/* ==========================================================================
   Estilos para el Plugin VV Servicios CPT v5.0
   ========================================================================== */

/* --------------------------------------------------------------------------
 * Design Tokens / Variables CSS
 * -------------------------------------------------------------------------- */
 :root {
  /* Colores Primarios */
  --vv-primary-color: #0a3585; /* Azul principal */
  --vv-primary-color-darker: #082a6a; /* Azul más oscuro para hover/active */
  --vv-primary-color-lighter: #e7f0fa; /* Un azul muy claro para fondos sutiles si es necesario */

  /* Colores Secundarios y Acentos */
  --vv-accent-color: #11C9FF; /* Celeste para acentos, como en hovers de enlaces de footer */
  
  /* Colores de Texto */
  --vv-text-color-dark: #1a171b; /* Principal para cuerpo de texto */
  --vv-text-color-light: #ffffff; /* Para texto sobre fondos oscuros */
  --vv-text-color-medium: #555555; /* Para texto secundario o descripciones */
  --vv-text-color-headings: #1a365d; /* Color específico para títulos - Azul oscuro */
  --vv-button-bg-color: var(--vv-primary-color); /* Color de fondo para botones */
  --vv-button-hover-bg-color: var(--vv-primary-color-darker); /* Color de fondo para hover de botones */

  /* Colores de Fondo y Bordes */
  --vv-background-light: #ffffff; /* Fondo de tarjetas, etc. */
  --vv-background-page: #f8f9fa; /* Fondo general de página (si el plugin lo necesitara) */
  --vv-border-color: #e0e0e0; /* Color de borde sutil */
  --vv-gray-200: #f2f2f2; /* Placeholder imágenes */

  /* Tipografía (Platzhalter - ajustar según tema) */
  --vv-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --vv-font-family-headings: var(--vv-font-family-base); /* O una fuente específica para títulos */
  
  --vv-font-size-base: 1rem; /* 16px por defecto */
  --vv-font-size-sm: 0.875rem; /* Small */
  --vv-font-size-md: 1rem;    /* Medium (base) */
  --vv-font-size-lg: 1.25rem; /* Large */
  --vv-font-size-xl: 1.5rem;  /* Extra Large (títulos de tarjeta) */
  --vv-font-size-xxl: 2rem; /* Títulos más grandes */

  --vv-line-height-base: 1.6;
  --vv-line-height-headings: 1.3;

  /* Espaciado */
  --vv-spacing-xs: 0.25rem;
  --vv-spacing-sm: 0.5rem;
  --vv-spacing-md: 1rem;
  --vv-spacing-lg: 1.5rem;
  --vv-spacing-xl: 2rem;

  /* Radios de Borde */
  --vv-radius-sm: 4px;
  --vv-radius-md: 8px; /* Tarjetas, elementos generales */
  --vv-radius-lg: 12px;
  --vv-radius-pill: 50px; /* Botones estilo píldora */
  --vv-radius-circle: 50%; /* Para elementos circulares como flechas */

  /* Sombras */
  --vv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --vv-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Sombra para tarjetas */
  --vv-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada para hover */

  /* Transiciones */
  --vv-transition-duration: 0.3s;
  --vv-transition-timing: ease-in-out;
  --vv-transition-base: var(--vv-transition-duration) var(--vv-transition-timing);
  
  /* Colores de enlaces en el footer */
  --vv-footer-link-color: #999999; /* Color de enlaces en el footer */
  --vv-footer-link-color-hover: #666666; /* Color de enlaces en el footer en hover */
}

/* --------------------------------------------------------------------------
 * Estilos Base y Contenedores
 * -------------------------------------------------------------------------- */
.vv-servicios-grid,
.vv-servicios-carousel {
  margin-top: var(--vv-spacing-xl);
  margin-bottom: var(--vv-spacing-xl);
  font-family: var(--vv-font-family-base);
}

/* --------------------------------------------------------------------------
 * Elemento de Servicio Individual (Card) - Base para Grid y Carrusel
 * -------------------------------------------------------------------------- */
.vv-servicio-item {
  background: var(--vv-background-card);
  border-radius: var(--vv-radius-md);
  border: 1px solid var(--vv-border-card, #e0e0e0); /* Aplicar el color de borde personalizable */
  box-shadow: var(--vv-shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* Para que todos los items en una fila de flex/grid tengan la misma altura si es necesario */
  transition: transform var(--vv-transition-base), box-shadow var(--vv-transition-base);
}

.vv-servicio-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--vv-shadow-lg);
}

/* Contenedor de la Imagen */
.vv-servicio-image-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* Proporción común para imágenes */
  background-color: var(--vv-placeholder-bg); /* Placeholder mientras carga la imagen */
  overflow: hidden;
  display: flex; /* Para centrar la imagen si es más pequeña (aunque object-fit:cover lo maneja) */
  align-items: center;
  justify-content: center;
}

.vv-servicio-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
  display: block; /* Elimina espacio extra debajo de la imagen */
}

/* Placeholder para cuando no hay imagen */
.vv-servicio-no-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vv-placeholder-bg);
  color: var(--vv-text-color-body);
  font-size: var(--vv-font-size-sm);
}

/* Contenido de la Tarjeta (Título, Extracto, Botón) */
.vv-servicio-content {
  padding: var(--vv-spacing-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Permite que este contenedor ocupe el espacio restante, empujando el botón hacia abajo */
}

.vv-servicio-title {
  font-family: var(--vv-font-family-headings);
  font-size: var(--vv-font-size-xl);
  color: var(--vv-heading-color);
  line-height: var(--vv-line-height-headings);
  margin: 0 0 var(--vv-spacing-sm) 0;
  font-weight: 600; /* Peso de fuente consistente */
  display: block; /* Asegurar que se muestre como bloque */
  padding: 0.5rem 0; /* Espaciado vertical */
  transition: color 0.3s ease; /* Transición suave para cambios de color */
}

/* Estilo para el título en hover - opcional */
.vv-servicio-title:hover {
  color: var(--vv-heading-hover-color); /* Cambiar al color de hover de título */
}

.vv-servicio-excerpt {
  font-size: var(--vv-font-size-md);
  color: var(--vv-text-color-body); /* Aplicar color de texto principal (extractos) personalizable */
  line-height: var(--vv-line-height-base);
  margin: 0 0 var(--vv-spacing-md) 0;
  flex-grow: 1; /* Permite que el extracto ocupe espacio si es necesario antes del botón */
}

/* Empujar el botón hacia abajo dentro del contenedor de contenido */
.vv-servicio-content .vv-btn {
  margin-top: auto; /* Clave para alinear botones al final */
}

/* --------------------------------------------------------------------------
 * Botón Reutilizable
 * -------------------------------------------------------------------------- */
.vv-btn {
  display: inline-flex; /* Para alinear icono y texto si se añade icono */
  align-items: center;
  justify-content: center;
  padding: var(--vv-spacing-sm) var(--vv-spacing-lg);
  font-family: var(--vv-font-family-base);
  font-size: var(--vv-font-size-md);
  font-weight: 600;
  color: var(--vv-button-text-color);
  background-color: var(--vv-button-background-color);
  border: none;
  border-radius: var(--vv-radius-pill);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease; /* Transición suave para todos los cambios */
  white-space: nowrap; /* Evita que el texto del botón se divida en múltiples líneas */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil para mejor contraste */
}

/* Efecto hover para botones */
.vv-btn:hover {
  background-color: var(--vv-button-background-hover-color);
  color: var(--vv-button-text-hover-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Sombra más pronunciada en hover */
}

/* Efecto active para botones */
.vv-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Variante de Botón en Bloque (ancho completo) */
.vv-btn--block {
  display: flex; /* Sobrescribe inline-flex para ocupar ancho completo */
  width: 100%;
}

/* --------------------------------------------------------------------------
 * Grid de Servicios
 * -------------------------------------------------------------------------- */
.vv-servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
  gap: var(--vv-spacing-lg);
}

/* --------------------------------------------------------------------------
 * Carrusel de Servicios (Slick Slider)
 * -------------------------------------------------------------------------- */
.vv-servicios-carousel {
  position: relative; /* Para posicionar flechas */
  visibility: hidden; /* Ocultar hasta que Slick lo inicialice para evitar FOUC */
}
.vv-servicios-carousel.slick-initialized {
  visibility: visible;
}

/* Estilos para los slides y su contenido para altura uniforme */
.vv-servicios-carousel .slick-track {
  display: flex !important; /* Fuerza a los slides a estar en una fila flex */
}

.vv-servicios-carousel .slick-slide {
  height: auto !important; /* Permite que el contenido determine la altura */
  margin-left: var(--vv-spacing-sm); /* Espacio entre slides */
  margin-right: var(--vv-spacing-sm);
}

.vv-servicios-carousel .slick-slide > div { /* Contenedor directo del item por Slick */
  height: 100%;
  display: flex; /* Para asegurar que el .vv-servicio-item dentro ocupe 100% */
}

.vv-servicios-carousel .vv-servicio-item {
  width: 100%; /* El item debe ocupar todo el ancho del slide_content_wrapper */
  /* La altura ya es 100% por la regla general de .vv-servicio-item y .slick-slide > div */
  margin: 0; /* Eliminar márgenes que puedan afectar el diseño */
  padding: 0; /* Asegurar que no haya padding que afecte el diseño */
}

/* Estilo para el extracto en el carrusel */
.vv-servicios-carousel .vv-servicio-excerpt {
  display: block;
  overflow: visible;
  white-space: normal;
  font-weight: normal; /* Asegurar que no esté en negrita */
  margin: 0.5rem 0 1rem 0; /* Ajustar márgenes para mejor espaciado */
  color: var(--vv-text-color-dark); /* Usar color oscuro para mejor legibilidad */
  line-height: 1.5; /* Mejor interlineado */
}

/* Flechas de Navegación del Carrusel */
.vv-servicios-carousel .slick-prev,
.vv-servicios-carousel .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;  /* Tamaño del contenedor de la flecha */
  height: 44px;
  background-color: var(--vv-primary-color);
  border-radius: var(--vv-radius-circle);
  border: none;
  padding: 0; /* Resetear padding si lo hubiera */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--vv-transition-base), opacity var(--vv-transition-base);
  opacity: 0.75;
}


.vv-servicios-carousel .slick-prev {
  left: calc(var(--vv-spacing-md) * -0.5 - 34px); /* Mover fuera del contenido, ajustar según gap */
}

.vv-servicios-carousel .slick-next {
  right: calc(var(--vv-spacing-md) * -0.5 - 34px); /* Mover fuera del contenido, ajustar según gap */
}

/* Iconos SVG dentro de las flechas */
.vv-servicios-carousel .slick-prev svg,
.vv-servicios-carousel .slick-next svg {
  width: 60px; /* Tamaño del icono SVG, debe caber en el botón de 68px */
  height: 60px;
  color: inherit; /* Hereda el color del botón */
}

.vv-servicios-carousel .slick-prev svg path,
.vv-servicios-carousel .slick-next svg path {
  fill: var(--vv-text-color-light); /* Color del icono directo a la ruta */
}

/* Eliminar flechas por defecto de Slick si usan :before */
.vv-servicios-carousel .slick-prev:before,
.vv-servicios-carousel .slick-next:before {
  content: none;
}

/* Estado Hover de las Flechas */
.vv-servicios-carousel .slick-prev:hover,
.vv-servicios-carousel .slick-next:hover {
  background-color: var(--vv-primary-color-darker); /* Usar el color hover definido en ajustes */
  opacity: 1; /* Hacer completamente opaco en hover */
  color: inherit; /* O especificar un color si es necesario, pero inherit suele bastar */
}

.vv-servicios-carousel .slick-prev:hover svg path,
.vv-servicios-carousel .slick-next:hover svg path {
  fill: var(--vv-text-color-light); /* Mantener el color claro en la ruta */
}

/* --------------------------------------------------------------------------
 * Estilos para Widget de Servicios Recientes (Footer, Sidebar) Y Shortcode Footer
 * -------------------------------------------------------------------------- */
/* Estilos para la lista generada por el shortcode [vv_servicios_footer] */
ul.vv-servicios-footer-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Estilos para los enlaces dentro de la lista del shortcode footer */
ul.vv-servicios-footer-list li a {
  color: var(--vv-footer-link-color);
  text-decoration: none; /* Opcional: quitar subrayado */
  transition: color var(--vv-transition-base);
  display: inline-block; /* Para aplicar padding/margin si fuera necesario */
  margin-bottom: var(--vv-spacing-xs); /* Pequeño espacio entre enlaces */
}

/* Estado Hover para los enlaces de la lista del shortcode footer */
ul.vv-servicios-footer-list li a:hover {
  color: var(--vv-footer-link-color-hover);
  text-decoration: none; /* Asegurar que no haya subrayado en hover */
}

/* --------------------------------------------------------------------------
 * Paginación Numérica (Para Grid)
 * -------------------------------------------------------------------------- */
.vv-servicios-pagination {
  text-align: center;
  margin-top: var(--vv-spacing-xl);
  font-family: var(--vv-font-family-base);
}

.vv-servicios-pagination ul { /* Slick usa ul para dots, pero paginate_links puede usarlo */
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Para centrar si es necesario */
}

.vv-servicios-pagination li {
    display: inline;
    margin: 0 var(--vv-spacing-xs);
}

.vv-servicios-pagination a,
.vv-servicios-pagination span.current {
  display: inline-block;
  padding: var(--vv-spacing-sm) var(--vv-spacing-md);
  font-size: var(--vv-font-size-md);
  color: var(--vv-pagination-link-text-color);
  background-color: var(--vv-pagination-link-bg-color);
  border: 1px solid var(--vv-pagination-link-border-color);
  border-radius: var(--vv-radius-sm);
  text-decoration: none;
  transition: background-color var(--vv-transition-base), color var(--vv-transition-base), border-color var(--vv-transition-base);
}

.vv-servicios-pagination a:hover {
  background-color: var(--vv-pagination-link-hover-bg-color);
  color: var(--vv-pagination-link-hover-text-color);
  border-color: var(--vv-pagination-link-hover-border-color);
}

.vv-servicios-pagination span.current {
  background-color: var(--vv-pagination-current-bg-color);
  color: var(--vv-pagination-current-text-color);
  border-color: var(--vv-pagination-current-border-color);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Lista de Servicios para Footer (Shortcode [vv_servicios_footer_list])
 * -------------------------------------------------------------------------- */
.vv-servicios-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--vv-font-family-base);
}

.vv-servicios-footer-list li {
  margin-bottom: var(--vv-spacing-sm);
}

.vv-servicios-footer-list li a {
  font-size: var(--vv-font-size-md);
  color: var(--vv-text-color-light); /* Ajustar si el footer tiene fondo oscuro */
  text-decoration: none;
  transition: color var(--vv-transition-base);
}

.vv-servicios-footer-list li a:hover {
  color: var(--vv-accent-color); /* O var(--vv-primary-color) */
}