/* ==========================================================================
   PAGINAS.CSS
   Estilos únicos de secciones específicas que NO se repiten como componente
   genérico en otras páginas (hero del index, grid de servicios, franja de
   sellos, metodología de servicio individual, etc.).
   Depende de variables.css, base.css, componentes.css y layout.css.
   ========================================================================== */

/* ==========================================================================
   INDEX — SECCIÓN HERO
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--color-oscuro);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  color: var(--color-texto-claro);
  padding-top: var(--espaciado-xxl);
  padding-bottom: var(--espaciado-xxl);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(8, 18, 44, 0.95) 0%,
    rgba(8, 18, 44, 0.85) 35%,
    rgba(8, 18, 44, 0.4) 65%,
    rgba(8, 18, 44, 0.15) 100%
  );
  z-index: 1;
}

.hero .contenedor {
  position: relative;
  z-index: 2;
}

.hero__contenido {
  max-width: 600px;
}

.hero__titulo {
  color: var(--color-texto-claro);
  font-size: 2.25rem;
  margin-bottom: var(--espaciado-sm);
}

.hero__titulo span {
  color: var(--color-primario);
}

.hero__texto {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--espaciado-lg);
  max-width: 480px;
}

.hero__acciones {
  display: flex;
  gap: var(--espaciado-sm);
  flex-wrap: wrap;
}

/* ==========================================================================
   INDEX — FRANJA DE SELLOS DE CONFIANZA
   ========================================================================== */
.franja-sellos {
  background-color: var(--color-blanco);
  padding-top: var(--espaciado-lg);
  padding-bottom: var(--espaciado-lg);
}

.franja-sellos__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--espaciado-md);
}

/* ==========================================================================
   INDEX — SECCIÓN "NUESTROS SERVICIOS"
   ========================================================================== */
.seccion-servicios {
  padding-top: var(--espaciado-xxl);
  padding-bottom: var(--espaciado-xxl);
  background-color: var(--color-blanco);
}

.seccion-servicios__titulo {
  text-align: center;
  margin-bottom: var(--espaciado-xl);
}

.seccion-servicios__titulo span {
  color: var(--color-primario);
}

.seccion-servicios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaciado-md);
}

/* ==========================================================================
   QUIENES-SOMOS — HERO DE PÁGINA INTERNA (reutilizable en otras páginas
   internas: servicios.html, soluciones.html, etc.)
   ========================================================================== */
.hero-pagina {
  position: relative;
  background-color: var(--color-oscuro);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: var(--espaciado-xl);
  padding-bottom: var(--espaciado-xl);
  overflow: hidden;
}

.hero-pagina::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(8, 18, 44, 0.78);
  z-index: 1;
}

.hero-pagina .contenedor {
  position: relative;
  z-index: 2;
}

.hero-pagina__titulo {
  color: var(--color-texto-claro);
  font-size: 2.25rem;
  margin-bottom: var(--espaciado-xs);
}

.hero-pagina__texto {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
}

/* ==========================================================================
   QUIENES-SOMOS — MISIÓN / VISIÓN / VALORES + CIFRAS
   ========================================================================== */
.seccion-mvv {
  padding-top: var(--espaciado-xxl);
  padding-bottom: var(--espaciado-xxl);
  background-color: var(--color-blanco);
}

.seccion-mvv__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--espaciado-xl);
  align-items: stretch;
}

.seccion-mvv__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-lg);
}

.mvv-item__titulo {
  color: var(--color-primario);
  font-size: 1.15rem;
  margin-bottom: var(--espaciado-xs);
}

.mvv-item__texto {
  color: var(--color-texto-secundario);
}

.cifras-card {
  background-color: var(--color-oscuro);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-xl) var(--espaciado-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espaciado-lg);
  text-align: center;
}

.cifras-card__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cifras-card__numero {
  font-size: 2.5rem;
  font-weight: var(--peso-bold);
  color: var(--color-texto-claro);
  line-height: 1;
}

.cifras-card__texto {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.cifras-card__texto--solo {
  font-size: 1.05rem;
  font-weight: var(--peso-medio);
  color: var(--color-texto-claro);
}

/* ===============================
   QUIÉNES SOMOS — CIFRAS (TEXTO)
   ===============================  +10 AÑOS DE EXPERIENCIA, +100 CLIENTES
   CAMBIO A COLOR EXCLUSIVO DE LAS LETRAS*/

.seccion-mvv .cifras-card__numero {
  color: #0AA9E6;
  text-shadow:
    0 0 9px rgba(146, 192, 220, 0.6),
    0 0 12px rgba(146, 192, 220, 0.4);
}

.seccion-mvv .cifras-card__texto {
  color: #0AA9E6;
  text-shadow:
    0 0 4px rgba(146, 192, 220, 0.45);
}

.seccion-mvv .cifras-card__texto--solo {
  color: #0AA9E6;
  text-shadow:
    0 0 4px rgba(146, 192, 220, 0.45);
}

/* ==========================================================================
   QUIENES-SOMOS — NUESTRO RESPALDO
   ========================================================================== */
.seccion-respaldo {
  padding-top: var(--espaciado-xxl);
  padding-bottom: var(--espaciado-xxl);
  background-color: var(--color-gris-claro);
}

.seccion-respaldo__titulo {
  text-align: center;
  margin-bottom: var(--espaciado-xs);
}

.seccion-respaldo__titulo span {
  color: var(--color-primario);
}

.seccion-respaldo__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--espaciado-xl) auto;
}

.seccion-respaldo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaciado-md);
}

.card-respaldo {
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-lg);
  box-shadow: var(--sombra-suave);
}

.card-respaldo__icono {
  width: 40px;
  height: 40px;
  margin-bottom: var(--espaciado-sm);
}

.card-respaldo__titulo {
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  margin-bottom: var(--espaciado-xs);
}

.card-respaldo__texto {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
}

/* ==========================================================================
   QUIENES-SOMOS — POR QUÉ ELEGIRNOS (DIFERENCIADORES)
   ========================================================================== */
.seccion-diferenciadores {
  padding-top: var(--espaciado-xxl);
  padding-bottom: var(--espaciado-xxl);
  background-color: var(--color-blanco);
}

.seccion-diferenciadores__titulo {
  text-align: center;
  margin-bottom: var(--espaciado-xl);
}

.seccion-diferenciadores__titulo span {
  color: var(--color-primario);
}

.seccion-diferenciadores__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaciado-md);
}

.card-diferenciador {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-lg);
}

.card-diferenciador__titulo {
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  color: var(--color-primario);
  margin-bottom: var(--espaciado-xs);
}

.card-diferenciador__texto {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
}

/* ==========================================================================
   CONTACTO — HERO + GRID (info izquierda / formulario flotante derecha)
   Usa imagen de fondo (assets/fotos/fondo-contacto.jpg) con overlay oscuro
   semitransparente encima (mismo patrón que .hero-pagina), para que el
   texto blanco y los datos de contacto sigan siendo legibles sobre la foto.
   --color-oscuro queda como color de respaldo si la imagen no carga.
   ========================================================================== */
.hero-contacto {
  position: relative;
  background-color: var(--color-oscuro);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Espacio extra abajo para que la tarjeta flotante pueda "salirse"
     del hero sin pisar la siguiente sección (aquí el footer). */
  padding-top: var(--espaciado-xxl);
  padding-bottom: 140px;
  overflow: hidden;
}

/* Capa oscura semitransparente sobre la foto, para mantener el contraste
   de texto blanco igual que en .hero-pagina. */
.hero-contacto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(8, 18, 44, 0.55);
  z-index: 1;
}

/* El contenido (texto, datos, formulario) debe quedar SIEMPRE encima
   de la capa oscura. */
.hero-contacto .contenedor {
  position: relative;
  z-index: 2;
}

.hero-contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--espaciado-xl);
  align-items: start;
}

.hero-contacto__titulo {
  color: var(--color-texto-claro);
  font-size: 2.25rem;
  margin-bottom: var(--espaciado-xs);
}

.hero-contacto__texto {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--espaciado-lg);
}

/* ---------- Lista de datos de contacto (email, tel, ubicación, horario) ---------- */
.lista-contacto {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-md);
  margin-bottom: var(--espaciado-lg);
}

.dato-contacto {
  display: flex;
  align-items: flex-start;
  gap: var(--espaciado-sm);
}

/* Iconos reales en formato imagen (assets/iconos/). 48px para que sean
   simétricos y proporcionales con las etiquetas y valores de cada dato. */
.dato-contacto__icono {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.dato-contacto__label {
  display: block;
  color: #0AA9E6;           /* azul brillante — mismo tono que cifras de Quiénes Somos */
  font-weight: var(--peso-semibold);
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.dato-contacto__valor {
  display: block;
  color: var(--color-texto-claro);
  font-size: 0.95rem;
}

/* ---------- Redes sociales ---------- */
.redes-sociales {
  display: flex;
  gap: var(--espaciado-sm);
}

.redes-sociales__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.redes-sociales__enlace:hover {
  background-color: var(--color-primario);
}

/* ---------- Tarjeta flotante del formulario ---------- */
.card-formulario {
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-lg);
  box-shadow: var(--sombra-media);
  /* Truco para que la tarjeta "se salga" del hero hacia abajo:
     un margen negativo igual al padding-bottom extra del hero. */
  margin-bottom: -160px;
}

.card-formulario__titulo {
  color: var(--color-primario);
  font-size: 1.25rem;
  margin-bottom: var(--espaciado-md);
}

/* ---------- Formulario de contacto ---------- */
.formulario-contacto {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-sm);
}

.formulario-contacto__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaciado-sm);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo__label {
  font-size: 0.85rem;
  font-weight: var(--peso-medio);
  color: #0AA9E6;   /* mismo azul brillante que labels de datos de contacto */
}

.campo__input {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde-sm);
  padding: 10px 12px;
  font-size: 0.95rem;
  color: var(--color-texto);
}

.campo__input--textarea {
  resize: vertical;
  min-height: 100px;
}

.formulario-contacto__boton {
  align-self: flex-start;
  margin-top: var(--espaciado-xs);
}

/* ==========================================================================
   RESPONSIVE — TABLET Y MÓVIL (sección general del sitio)
   ========================================================================== */
@media (max-width: 992px) {
  .hero {
    background-position: center;
  }

  .franja-sellos__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .seccion-servicios__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .seccion-mvv__grid {
    grid-template-columns: 1fr;
  }

  .seccion-respaldo__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .seccion-diferenciadores__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contacto: apila info arriba, formulario abajo, y elimina el efecto
     de tarjeta flotante (en móvil se ve mejor todo en flujo normal). */
  .hero-contacto__grid {
    grid-template-columns: 1fr;
  }

  .hero-contacto {
    padding-bottom: var(--espaciado-xl);
  }

  .card-formulario {
    margin-bottom: 0;
    margin-top: var(--espaciado-lg);
  }
}

@media (max-width: 600px) {
  .hero__titulo {
    font-size: 1.75rem;
  }

  .franja-sellos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .seccion-servicios__grid {
    grid-template-columns: 1fr;
  }

  .hero__acciones {
    flex-direction: column;
  }

  .hero__acciones .btn {
    width: 100%;
  }

  .hero-pagina__titulo {
    font-size: 1.75rem;
  }

  .seccion-respaldo__grid {
    grid-template-columns: 1fr;
  }

  .seccion-diferenciadores__grid {
    grid-template-columns: 1fr;
  }

  /* Contacto: el formulario pasa de 2 columnas a 1 en pantallas chicas */
  .formulario-contacto__fila {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   COTIZACIÓN — HERO
   Mismo patrón que .hero-pagina y .hero-contacto. Fondo sólido --color-oscuro
   como respaldo hasta que exista assets/fotos/cotizacion-hero.jpg.
   Para activar la imagen basta con agregar background-image en el HTML,
   igual que en los demás heros del sitio — sin tocar este CSS.
   ========================================================================== */
.hero-cotizacion {
  position: relative;
  background-color: var(--color-oscuro);
  background-size: cover;
  background-position: center top; /* ancla imagen desde arriba — clave con 420px */
  background-repeat: no-repeat;
  /* padding-bottom amplio para que la tarjeta monte sobre el hero */
  padding-top: var(--espaciado-lg);
  padding-bottom: 120px;
  overflow: hidden;
  text-align: center;
}

/* Overlay oscuro semitransparente — mismo valor que .hero-pagina */
.hero-cotizacion::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(8, 18, 44, 0.78);
  z-index: 1;
}

.hero-cotizacion .contenedor {
  position: relative;
  z-index: 2;
}

.hero-cotizacion__titulo {
  color: var(--color-texto-claro);
  font-size: 2.25rem;
  margin-bottom: var(--espaciado-xs);
}

/* Span de acento en azul primario — mismo patrón que index y servicios */
.hero-cotizacion__titulo span {
  color: var(--color-primario);
}

.hero-cotizacion__texto {
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto;
}

/* ==========================================================================
   COTIZACIÓN — SECCIÓN FORMULARIO CENTRADO
   ========================================================================== */
.seccion-cotizacion {
  /* padding-top reducido porque la tarjeta sube con margin-top negativo */
  padding-top: 0;
  padding-bottom: var(--espaciado-xxl);
  background-color: var(--color-gris-claro);
}

/* Tarjeta blanca central que contiene todo el formulario */
.card-cotizacion {
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-xl);
  box-shadow: var(--sombra-media);
  max-width: 860px;
  margin: 0 auto;
  /* Sube la tarjeta para que monte sobre el hero — mismo patrón que .card-formulario */
  margin-top: -100px;
  position: relative; /* necesario para que z-index funcione sobre el hero */
  z-index: 3;
}

/* ==========================================================================
   COTIZACIÓN — FORMULARIO INTERNO
   ========================================================================== */
.formulario-cotizacion {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-lg);
}

/* Cada bloque (fieldset) es un grupo temático con su leyenda */
.formulario-cotizacion__bloque {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-sm);
}

/* Leyenda del fieldset — igual estilo que .card-formulario__titulo en contacto */
.formulario-cotizacion__leyenda {
  color: var(--color-primario);
  font-size: 1.1rem;
  font-weight: var(--peso-semibold);
  margin-bottom: var(--espaciado-xs);
  padding-bottom: var(--espaciado-xs);
  border-bottom: 2px solid var(--color-borde);
  width: 100%;
}

/* Sublabel informativo bajo la leyenda de servicios */
.formulario-cotizacion__sublabel {
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
  margin-top: calc(var(--espaciado-xs) * -0.5);
}

/* Fila de 2 columnas — igual patrón que .formulario-contacto__fila */
.formulario-cotizacion__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaciado-sm);
}

/* Select con misma apariencia que input — reutiliza .campo__input */
.campo__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6470' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ==========================================================================
   COTIZACIÓN — GRID DE CHECKBOXES VISUALES (servicios)
   Cada card-check es un label que envuelve un checkbox invisible.
   Al marcar el checkbox, el CSS activa el estilo :checked sin JS.
   ========================================================================== */
.grid-servicios-check {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaciado-sm);
}

/* Ocultar el input nativo pero mantenerlo accesible al teclado */
.card-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Tarjeta visual del servicio — estado normal */
.card-check {
  cursor: pointer;
}

.card-check__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaciado-xs);
  padding: var(--espaciado-md) var(--espaciado-sm);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-borde);
  background-color: var(--color-gris-claro);
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.card-check__contenido:hover {
  border-color: var(--color-primario);
  background-color: #F0F7FF;
}

/* Estado seleccionado: borde azul + fondo celeste muy suave */
.card-check input[type="checkbox"]:checked + .card-check__contenido {
  border-color: var(--color-primario);
  background-color: #EBF4FF;
  box-shadow: 0 0 0 3px rgba(0, 112, 220, 0.15);
}

.card-check__icono {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.card-check__nombre {
  font-size: 0.85rem;
  font-weight: var(--peso-semibold);
  color: var(--color-texto);
  line-height: 1.3;
}

/* Nombre del servicio en azul cuando está seleccionado */
.card-check input[type="checkbox"]:checked + .card-check__contenido .card-check__nombre {
  color: var(--color-primario);
}

/* ==========================================================================
   COTIZACIÓN — PIE DEL FORMULARIO (aviso + botón)
   ========================================================================== */
.formulario-cotizacion__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaciado-md);
  padding-top: var(--espaciado-sm);
  border-top: 1px solid var(--color-borde);
  flex-wrap: wrap;
}

.formulario-cotizacion__aviso {
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
  max-width: 420px;
}

/* ==========================================================================
   RESPONSIVE — COTIZACIÓN (TABLET Y MÓVIL)
   ========================================================================== */
@media (max-width: 992px) {
  .grid-servicios-check {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hero-cotizacion__titulo {
    font-size: 1.75rem;
  }

  .card-cotizacion {
    padding: var(--espaciado-md);
  }

  .formulario-cotizacion__fila {
    grid-template-columns: 1fr;
  }

  .grid-servicios-check {
    grid-template-columns: repeat(2, 1fr);
  }

  .formulario-cotizacion__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .formulario-cotizacion__boton {
    width: 100%;
  }
}

/* ==========================================================================
   SERVICIOS — GRID DE CARDS CON PANEL EXPANDIBLE
   Cada card tiene un estado cerrado (cabecera) y un estado abierto (panel).
   El JS de main.js maneja la clase --activa y el atributo hidden del panel.
   ========================================================================== */

.seccion-servicios-detalle {
  padding-top: var(--espaciado-xxl);
  padding-bottom: var(--espaciado-xxl);
  background-color: var(--color-gris-claro);
}

/* Grid de 2 columnas en escritorio */
.grid-servicios-detalle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaciado-md);
}

/* ── Card contenedora ── */
.card-servicio-detalle {
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  border: 2px solid var(--color-borde);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estado activo (panel abierto): resalta la card con borde azul */
.card-servicio-detalle--activa {
  border-color: var(--color-primario);
  box-shadow: var(--sombra-media);
}

/* ── Cabecera de la card (siempre visible) ── */
.card-servicio-detalle__cabecera {
  padding: var(--espaciado-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-xs);
}

.card-servicio-detalle__icono {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.card-servicio-detalle__titulo {
  font-size: 1.15rem;
  font-weight: var(--peso-semibold);
  color: var(--color-texto);
  margin: 0;
}

.card-servicio-detalle__resumen {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  margin: 0;
}

/* ── Botón expandir / contraer ── */
.btn-expandir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--espaciado-xs);
  padding: 8px 16px;
  border-radius: var(--radio-borde-sm);
  background-color: transparent;
  border: 1.5px solid var(--color-primario);
  color: var(--color-primario);
  font-size: 0.88rem;
  font-weight: var(--peso-semibold);
  cursor: pointer;
  align-self: flex-start;  /* no ocupa todo el ancho */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-expandir:hover {
  background-color: var(--color-primario);
  color: var(--color-texto-claro);
}

/* Ícono de flecha dentro del botón */
.btn-expandir__icono {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

/* ── Panel expandible (controlado por JS con hidden) ── */
.panel-servicio {
  padding: var(--espaciado-lg);
  padding-top: 0;
  border-top: 1px solid var(--color-borde);
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-md);
}

.panel-servicio__descripcion {
  font-size: 0.92rem;
  color: var(--color-texto-secundario);
  line-height: 1.7;
}

/* Título de la lista "¿Qué incluye?" */
.panel-servicio__incluye-titulo {
  font-size: 0.95rem;
  font-weight: var(--peso-semibold);
  color: var(--color-primario);
  margin-bottom: var(--espaciado-xs);
}

/* Lista de ítems incluidos */
.panel-servicio__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Cada ítem con checkmark azul como bullet */
.panel-servicio__lista li {
  font-size: 0.88rem;
  color: var(--color-texto-secundario);
  padding-left: 20px;
  position: relative;
}

.panel-servicio__lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primario);
  font-weight: var(--peso-bold);
}

/* Fila de botones del panel: "Cotizar" + "Ver página completa" */
.panel-servicio__acciones {
  display: flex;
  gap: var(--espaciado-sm);
  flex-wrap: wrap;
  padding-top: var(--espaciado-xs);
}

/* Botón outline oscuro para "Ver página completa" —
   variante que funciona sobre fondo blanco */
.btn-outline-dark {
  background-color: transparent;
  color: var(--color-texto);
  border: 1.5px solid var(--color-borde);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-outline-dark:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

/* ==========================================================================
   RESPONSIVE — SERVICIOS
   ========================================================================== */
@media (max-width: 992px) {
  /* En tablet: 1 columna */
  .grid-servicios-detalle {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .panel-servicio__acciones {
    flex-direction: column;
  }

  .panel-servicio__acciones .btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   NAV — DROPDOWN DE SERVICIOS
   Se activa con hover CSS puro sobre .nav__item--dropdown.
   El menú se posiciona absolutamente bajo el enlace "Servicios".
   ========================================================================== */

/* Contenedor del ítem con dropdown — necesita position:relative
   para que el menú hijo se posicione respecto a él */
.nav__item--dropdown {
  position: relative;
}

/* Flecha indicadora junto al texto "Servicios" */
.nav__dropdown-flecha {
  font-size: 0.7rem;
  margin-left: 3px;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Rotar flecha cuando el dropdown está visible */
.nav__item--dropdown:hover .nav__dropdown-flecha {
  transform: rotate(180deg);
}

/* Menú desplegable — oculto por defecto */
.nav__dropdown {
  display: none;                        /* oculto en estado normal */
  position: absolute;
  top: calc(100% + 8px);               /* 8px de separación bajo el enlace */
  left: 50%;
  transform: translateX(-50%);         /* centrado respecto al ítem padre */
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-media);
  min-width: 220px;
  z-index: 200;                         /* encima de todo el contenido */
  overflow: hidden;
  /* Pequeño triángulo decorativo apuntando hacia el nav */
  border-top: 3px solid var(--color-primario);
}

/* Mostrar al hacer hover sobre el ítem padre */
.nav__item--dropdown:hover .nav__dropdown {
  display: block;
}

/* Cada enlace del dropdown */
.nav__dropdown-enlace {
  display: block;
  padding: 10px var(--espaciado-md);
  font-size: 0.88rem;
  font-weight: var(--peso-medio);
  color: var(--color-texto);
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.nav__dropdown-enlace:hover {
  background-color: var(--color-gris-claro);
  color: var(--color-primario);
}

/* Línea separadora entre ítems del dropdown */
.nav__dropdown li + li .nav__dropdown-enlace {
  border-top: 1px solid var(--color-borde);
}

/* ==========================================================================
   SERVICIOS — SIMETRÍA VISUAL DE CARDS
   Fuerza que todas las cards del grid tengan la misma altura mínima
   en la cabecera, independientemente del largo del título o resumen.
   ========================================================================== */

/* Cada card ocupa toda la altura disponible en su celda del grid */
.card-servicio-detalle {
  display: flex;
  flex-direction: column;
}

/* La cabecera crece para ocupar espacio uniforme entre cards del mismo par.
   flex:1 hace que empuje el botón "Ver más" siempre hacia el mismo punto */
.card-servicio-detalle__cabecera {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-xs);
  padding: var(--espaciado-lg);
}

/* El resumen crece para absorber diferencias de longitud de texto —
   así el botón "Ver más" siempre queda alineado al mismo nivel */
.card-servicio-detalle__resumen {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE — DROPDOWN (móvil: se oculta junto con el nav)
   ========================================================================== */
@media (max-width: 768px) {
  /* En móvil el dropdown no aplica porque el nav completo está oculto */
  .nav__dropdown {
    display: none !important;
  }
}

/* ==========================================================================
   SOLUCIONES — SECCIÓN GRID DE 3 SOLUCIONES EMPRESARIALES
   Cada card presenta una solución combinada de 2 servicios de NAR SYSTEMS.
   Fondo blanco para contrastar con la sección .seccion-mvv anterior (blanco)
   y la .seccion-proceso siguiente (gris claro).
   ========================================================================== */

/* Contenedor de la sección completa de soluciones */
.seccion-soluciones {
  padding-top: var(--espaciado-xxl);
  padding-bottom: var(--espaciado-xxl);
  background-color: var(--color-gris-claro); /* fondo gris para separar visualmente */
}

/* Título centrado con span en azul — mismo patrón de todos los títulos de sección */
.seccion-soluciones__titulo {
  text-align: center;
  margin-bottom: var(--espaciado-xs);
}

.seccion-soluciones__titulo span {
  color: var(--color-primario); /* azul de marca para el acento en el título */
}

/* Párrafo introductorio centrado bajo el título */
.seccion-soluciones__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--espaciado-xl) auto;
  color: var(--color-texto-secundario);
}

/* Grid de 3 columnas iguales en escritorio */
.grid-soluciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaciado-md);
  align-items: stretch; /* todas las cards tienen la misma altura */
}

/* ── Card individual de solución ──
   Fondo blanco, borde superior azul como acento de marca (3px),
   display flex columna para que el CTA siempre quede al fondo */
.card-solucion {
  background-color: var(--color-blanco);
  border-radius: var(--radio-borde);
  border-top: 3px solid var(--color-primario); /* franja azul de identidad */
  padding: var(--espaciado-lg);
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;         /* apila elementos verticalmente */
  gap: var(--espaciado-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Efecto hover: eleva la card levemente — mismo patrón que .card-servicio */
.card-solucion:hover {
  box-shadow: var(--sombra-media);
  transform: translateY(-4px);
}

/* Ícono de la solución: PNG existente de /iconos, tamaño ligeramente mayor
   que los íconos de .card-respaldo (40px) para dar jerarquía visual */
.card-solucion__icono {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* Título de la solución — prominente, color oscuro */
.card-solucion__titulo {
  font-size: 1.1rem;
  font-weight: var(--peso-semibold);
  color: var(--color-texto);
  margin: 0;
}

/* Párrafo "El desafío:" — escrito en voz del cliente para generar empatía.
   Fondo azul muy suave para diferenciarlo visualmente del párrafo de solución */
.card-solucion__problema {
  font-size: 0.88rem;
  color: var(--color-texto-secundario);
  background-color: #F0F7FF;      /* mismo tono de .card-check__contenido:hover */
  border-left: 3px solid var(--color-primario); /* línea lateral azul como énfasis */
  padding: var(--espaciado-xs) var(--espaciado-sm);
  border-radius: 0 var(--radio-borde-sm) var(--radio-borde-sm) 0;
  margin: 0;
  line-height: 1.5;
}

/* Descripción de cómo NAR resuelve el desafío — texto corrido */
.card-solucion__descripcion {
  font-size: 0.88rem;
  color: var(--color-texto-secundario);
  line-height: 1.7;
  margin: 0;
  flex: 1; /* ocupa el espacio disponible para que el CTA y los tags queden abajo */
}

/* Contenedor de píldoras de servicios incluidos en la solución.
   flex-direction: column apila cada tag en su propia línea,
   align-items: flex-start evita que se estiren al ancho completo de la card */
.card-solucion__tags {
  display: flex;
  flex-direction: column;  /* una píldora por línea, sin fila horizontal */
  align-items: flex-start; /* cada píldora ocupa solo el ancho de su texto */
  gap: 6px;
  margin-top: auto; /* empuja tags y CTA hacia abajo dentro del flex column */
}

/* Píldora individual: fondo azul claro, borde azul, texto azul —
   diseño consistente con los checkboxes de cotizacion.html */
.card-solucion__tag {
  display: inline-block;
  background-color: #EBF4FF;      /* azul muy tenue — mismo que :checked en cotizacion */
  color: var(--color-primario);
  border: 1px solid rgba(0, 112, 220, 0.25);
  border-radius: 20px;            /* cápsula redondeada */
  padding: 3px 12px;
  font-size: 0.78rem;
  font-weight: var(--peso-semibold);
}

/* Botón CTA de cada card: hereda .btn .btn-primario y agrega ancho completo */
.card-solucion__cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--espaciado-xs);
}

/* ==========================================================================
   SOLUCIONES — SECCIÓN CÓMO TRABAJAMOS (PROCESO DE 4 PASOS)
   Fondo gris claro para alternar con la sección de soluciones (blanco).
   4 pasos numerados con número decorativo en azul #0AA9E6.
   ========================================================================== */

/* Contenedor de la sección proceso */
.seccion-proceso {
  padding-top: var(--espaciado-xxl);
  padding-bottom: var(--espaciado-xxl);
  background-color: var(--color-blanco); /* blanco para contrastar con el gris anterior */
}

/* Título centrado con span azul — patrón uniforme del sitio */
.seccion-proceso__titulo {
  text-align: center;
  margin-bottom: var(--espaciado-xs);
}

.seccion-proceso__titulo span {
  color: var(--color-primario);
}

/* Párrafo intro bajo el título */
.seccion-proceso__intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--espaciado-xl) auto;
  color: var(--color-texto-secundario);
}

/* Grid de 4 columnas iguales en escritorio — un paso por columna */
.grid-proceso {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaciado-md);
}

/* ── Card de cada paso ──
   Borde gris sutil, fondo blanco, centrado verticalmente */
.paso-proceso {
  background-color: var(--color-gris-claro);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-xs);
  text-align: center;
  border: 1px solid var(--color-borde);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover: resalta el paso con borde y sombra azul */
.paso-proceso:hover {
  border-color: var(--color-primario);
  box-shadow: var(--sombra-suave);
}

/* Número decorativo grande: mismo color y text-shadow que cifras de quienes-somos
   aria-hidden="true" en el HTML lo oculta de lectores de pantalla (es decorativo) */
.paso-proceso__numero {
  display: block;
  font-size: 2.8rem;
  font-weight: var(--peso-bold);
  color: #0AA9E6;                 /* azul brillante de marca — mismo que cifras MVV */
  text-shadow:
    0 0 9px rgba(146, 192, 220, 0.6),
    0 0 12px rgba(146, 192, 220, 0.4);
  line-height: 1;
  margin-bottom: var(--espaciado-xs);
}

/* Título del paso */
.paso-proceso__titulo {
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  color: var(--color-texto);
  margin: 0;
}

/* Descripción del paso */
.paso-proceso__texto {
  font-size: 0.88rem;
  color: var(--color-texto-secundario);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE — SOLUCIONES (TABLET: max-width 992px)
   ========================================================================== */
@media (max-width: 992px) {
  /* Grid de soluciones: de 3 columnas pasa a 2 columnas en tablet,
     así las cards 2 y 3 no se apilan ni se ven una encima de otra */
  .grid-soluciones {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grid de proceso: de 4 columnas a 2 columnas en tablet */
  .grid-proceso {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   RESPONSIVE — SOLUCIONES (MÓVIL: max-width 600px)
   ========================================================================== */
@media (max-width: 600px) {
  /* En móvil, grid de soluciones colapsa a 1 sola columna */
  .grid-soluciones {
    grid-template-columns: 1fr;
  }

  /* Grid de proceso: de 2 columnas a 1 columna en móvil */
  .grid-proceso {
    grid-template-columns: 1fr;
  }
}