/* ===== Estilos de secciones ===== */

/* ===== Identidad visual: componentes compartidos ===== */

/* Etiqueta pequeña sobre los títulos de sección ("kicker") */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: var(--peso-bold);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.kicker::before,
.kicker::after {
  content: '';
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}

/* Color del kicker según el fondo de su sección: dorado en oscuro, nunca en claro */
.hero .kicker,
.testimonios .kicker,
.contacto .kicker {
  color: var(--color-acento-dorado);
}

.vista-previa .kicker,
.ubicacion .kicker,
.bloque--claro .kicker {
  color: var(--color-texto-secundario);
}

/* Aparición suave de elementos al hacer scroll (ver main.js) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* "Orbes" difuminados de fondo: manchas de luz suaves, puramente decorativas.
   Van en ::before/::after para no necesitar HTML ni estilos inline. */
.con-orbes {
  position: relative;
  overflow: hidden;
}

.con-orbes > * {
  position: relative;
  z-index: 1;
}

.con-orbes::before,
.con-orbes::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Variante para fondo oscuro: se permite el resplandor dorado */
.con-orbes--oscuro::before {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -110px;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.22) 0%, transparent 70%);
}

.con-orbes--oscuro::after {
  width: 380px;
  height: 380px;
  bottom: -160px;
  left: -140px;
  background: radial-gradient(circle, rgba(20, 58, 99, 0.45) 0%, transparent 70%);
}

/* ----- Hero -----
   En móvil: foto vertical propia, con degradado de arriba (sólido) hacia
   abajo (foto), pensada para una sola columna angosta.
   En escritorio: foto panorámica que ocupa todo el fondo (ver media query). */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-fondo-oscuro);
  background-image: url('../img/heromovile.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  /* Un poco menos de 100vh a propósito: solo lo justo para que se note el
     borde de la franja de confianza, sin que se vea toda la fila. En móvil
     hace falta un poco más porque la fila se corta más fácil */
  min-height: calc(100vh - 70px);
  display: flex;
  /* En móvil el texto arranca arriba (zona sólida de la foto), no
     centrado, para que no choque con la foto que asoma más abajo */
  align-items: flex-start;
  /* El padding-top reserva el espacio del header flotante dentro de la
     propia sección, así el fondo sí llega hasta arriba de todo */
  padding: calc(var(--altura-header) + var(--separacion-header) * 2 + 1.5rem) 1.25rem 3rem;
}

/* Destello dorado sutil en la esquina superior izquierda, sobre el fondo
   oscuro (permitido por la regla del dorado) */
.hero::before {
  content: '';
  position: absolute;
  top: -180px;
  left: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.28) 0%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.hero__contenedor {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 900px) {
  .hero {
    background-image: url('../img/hero4.webp');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    align-items: center;
    padding-left: 5rem;
    min-height: calc(100vh - 90px);
  }

  .hero__contenedor {
    margin: 0;
    text-align: left;
  }
}

@media (min-width: 1200px) {
  .hero {
    padding-left: 7rem;
  }
}

.hero__titulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--color-fondo-claro);
  margin-bottom: 1rem;
}

/* Palabra clave resaltada con efecto de marcador: dorado permitido por ir
   sobre el fondo oscuro del hero */
.hero__destacado {
  color: var(--color-acento-dorado);
}

.hero__subtitulo {
  font-weight: var(--peso-regular);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-fondo-claro);
  margin-bottom: 2rem;
}

/* Franja de confianza en movimiento continuo (sin logos, solo mensajes propios) */
.confianza {
  /* Efecto vidrio: blanco con transparencia sutil en vez de sólido */
  background-color: var(--color-fondo-claro-transparente);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  border-top: 1px solid var(--color-separador-claro);
  border-bottom: 1px solid var(--color-separador-claro);
  padding: 0.85rem 0;
}

.confianza__pista {
  display: flex;
  width: max-content;
  gap: 2rem;
  animation: confianza-scroll 28s linear infinite;
}

.confianza:hover .confianza__pista {
  animation-play-state: paused;
}

.confianza__grupo {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: none;
}

.confianza__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: var(--peso-bold);
  font-size: 0.85rem;
  color: var(--color-texto-primario);
  white-space: nowrap;
}

/* Fondo claro: el círculo va en verde WhatsApp (nada de dorado sobre claro) */
.confianza__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-boton-whatsapp);
  flex: none;
}

.confianza__marca svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: var(--color-fondo-claro);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confianza__punto {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(69, 89, 122, 0.3);
  flex: none;
  align-self: center;
}

@keyframes confianza-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.hero__boton-llamada {
  display: inline-block;
  background-color: var(--color-boton-whatsapp);
  color: var(--color-fondo-claro);
  font-weight: var(--peso-bold);
  font-size: 1rem;
  padding: 0.9rem 1.75rem;
  border-radius: 50px;
  animation: latido-boton 1.8s ease-in-out infinite;
}

.hero__boton-llamada:hover {
  filter: brightness(0.92);
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
  animation-play-state: paused;
}

/* Latido sutil para llamar la atención sobre el CTA principal */
@keyframes latido-boton {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@media (min-width: 768px) {
  .hero__titulo {
    font-size: 3rem;
  }

  .hero__subtitulo {
    font-size: 1.25rem;
  }
}

/* ----- Vista previa (Quiénes Somos / Nuestro Programa) ----- */
.vista-previa {
  background-color: var(--color-fondo-claro);
  padding: 3rem 1.25rem;
  border-top: 1px solid var(--color-separador-claro);
}

/* Envoltura del ancho exacto de la tarjeta: ancla la insignia sin que el
   overflow:hidden de la tarjeta la recorte, sin importar el ancho de pantalla */
.vista-previa__tarjeta-envoltura {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

/* Insignia decorativa asomando en la esquina de la tarjeta.
   En celular asoma por la esquina inferior derecha, justo sobre la foto,
   sin invadir el texto ni el botón. */
.vista-previa__insignia {
  display: block;
  position: absolute;
  bottom: 92px;
  right: -18px;
  left: auto;
  top: auto;
  height: 230px;
  width: auto;
  z-index: 5;
  filter: drop-shadow(var(--sombra-suave));
  animation: flotar-insignia 3.5s ease-in-out infinite;
}

@media (min-width: 768px) {
  .vista-previa__insignia {
    /* A la izquierda de la tarjeta, a la altura del final del párrafo y
       las cifras */
    top: 300px;
    bottom: auto;
    left: -165px;
    right: auto;
    height: 430px;
  }
}

/* Destello dorado detrás de la tarjeta, centrado sobre la foto. Va en la
   envoltura (no en la tarjeta, que tiene overflow:hidden) para que no se
   recorte y pueda notarse el color más allá del borde de la tarjeta. */
.vista-previa__destello {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  /* En celular la foto es la última pieza de la columna, justo antes del
     botón: se ubica desde abajo, centrada horizontalmente */
  bottom: 230px;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 340px;
  height: 340px;
}

@media (min-width: 768px) {
  .vista-previa__destello {
    /* En escritorio la foto está a la derecha, a esta altura aproximada */
    top: 300px;
    bottom: auto;
    left: auto;
    right: 228px;
    transform: translate(50%, -50%);
    width: 480px;
    height: 480px;
  }
}

@keyframes flotar-insignia {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Excepción: "Quiénes Somos" no lleva la línea separadora porque su tarjeta
   ya tiene borde y sombra propios. Prueba: fondo oscuro con textura de
   puntos en vez del fondo claro, para ver cómo se ve la tarjeta flotando
   sobre oscuro (la tarjeta en sí no cambia). */
#quienes-somos.vista-previa {
  position: relative;
  border-top: none;
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  /* Más aire azul abajo, para que la tarjeta de Nuestro Programa tenga
     espacio de sobra donde superponerse sin llegar a tocar esta tarjeta */
  padding-bottom: 6rem;
}

/* Mismo destello dorado difuminado del hero, ahora en la esquina inferior
   izquierda de esta sección */
#quienes-somos.vista-previa::before {
  content: '';
  position: absolute;
  bottom: -180px;
  left: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.28) 0%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

@media (min-width: 900px) {
  #quienes-somos.vista-previa {
    padding-bottom: 9rem;
  }
}

/* Excepción: "Nuestro Programa" tiene fondo blanco propio (a los costados de
   la tarjeta) pero sin línea separadora; la tarjeta se superpone igual (con
   margen negativo) sobre las secciones oscuras de arriba (Quiénes Somos) y
   abajo (Testimonios), que se siguen viendo oscuras en esa franja porque ahí
   ya es la sección vecina, no esta */
#nuestro-programa.vista-previa {
  background-color: var(--color-fondo-claro);
  border-top: none;
  /* 1px en vez de 0: evita que el margen negativo de la tarjeta "colapse"
     con el de la sección y arrastre el fondo blanco hacia arriba/abajo,
     tapando la superposición sobre el azul de las secciones vecinas */
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 900px) {
  #nuestro-programa.vista-previa {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Tarjeta elevada con sombra propia en vez de un simple separador de línea.
   Ya no se monta sobre la sección anterior: desde que existe la franja de
   confianza entre el hero y esta sección, superponerla se veía mezclado con
   la franja en movimiento. Más ancha y horizontal para las dos columnas. */
.vista-previa__tarjeta {
  max-width: 1040px;
  margin: 0 auto;
  background-color: var(--color-fondo-claro);
  border: 1px solid var(--color-separador-claro);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  padding: 2.5rem 1.5rem;
  overflow: hidden;
}

.vista-previa__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.vista-previa__contenedor {
  text-align: center;
}

.vista-previa__media {
  position: relative;
  z-index: 4;
  width: 100%;
}

/* Marco desfasado con textura de puntos, asomando detrás de la esquina
   superior derecha de la foto (mismo recurso que las tarjetas de cifras) */
.vista-previa__media::before {
  content: "";
  position: absolute;
  top: -18px;
  right: -18px;
  width: 62%;
  height: 50%;
  border-radius: var(--radio-grande);
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 16px 16px;
  z-index: -1;
}

.vista-previa__imagen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* En celular el recorte 4/3 corta el panfleto de la pared: se ancla la
     imagen más hacia arriba para que se alcance a ver */
  object-position: center 20%;
  border-radius: var(--radio-grande);
}

@media (min-width: 768px) {
  .vista-previa__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 3rem;
  }

  /* Columna estirada a la altura de la foto, con las cifras empujadas
     abajo para que su borde quede a la misma altura que el de la foto */
  .vista-previa__contenedor {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    text-align: left;
  }

  .vista-previa__media {
    flex: 0 0 360px;
  }

  .vista-previa__imagen {
    aspect-ratio: 3 / 4;
    object-position: center;
  }
}

.vista-previa__titulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.5rem;
  color: var(--color-texto-primario);
  margin-bottom: 1rem;
}

.vista-previa__texto {
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto-secundario);
  margin-bottom: 1.5rem;
}

/* Cifras reales (nada de datos inventados): tres tarjetas individuales en
   fila, cada una con fondo oscuro propio, porque el número va en dorado y
   el dorado no puede ir sobre el fondo claro de la tarjeta grande */
.vista-previa__cifras {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.vista-previa__cifra {
  flex: 1;
  text-align: center;
  padding: 1rem 0.5rem;
  border-radius: 16px;
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}

.vista-previa__cifra-numero {
  display: block;
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-acento-dorado);
}

/* La etiqueta reserva el alto de varias líneas y centra su texto en ese
   espacio: así el número de las tres tarjetas queda en una misma línea, y el
   texto (de 1, 2 o 3 líneas) queda centrado sobre una misma línea central,
   en vez de pegado arriba dejando hueco abajo */
.vista-previa__cifra-etiqueta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.2em; /* 4 líneas (4 x 1.3) en móvil, donde las tarjetas son angostas */
  margin-top: 0.5rem;
  font-weight: var(--peso-bold);
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--color-fondo-claro);
}

/* Botón secundario: sin dorado porque la sección tiene fondo claro.
   Centrado debajo de las dos columnas (texto + imagen). */
.vista-previa__boton {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
  font-weight: var(--peso-bold);
  font-size: 1rem;
  color: var(--color-texto-primario);
  border: 1px solid var(--color-texto-secundario);
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
}

/* Al pasar el mouse, se invierte a relleno sólido (sin usar el dorado) */
.vista-previa__boton:hover {
  background-color: var(--color-texto-primario);
  border-color: var(--color-texto-primario);
  color: var(--color-fondo-claro);
  transform: translateY(-2px);
}

/* Variante para usar este mismo botón sobre fondo oscuro (el dorado sí va
   ahí): páginas de Testimonios y Ubicación completas, enlazadas desde Inicio */
.vista-previa__boton--oscuro {
  color: var(--color-acento-dorado);
  border-color: var(--color-acento-dorado);
}

.vista-previa__boton--oscuro:hover {
  background-color: var(--color-acento-dorado);
  border-color: var(--color-acento-dorado);
  color: var(--color-texto-primario);
}

@media (min-width: 768px) {
  .vista-previa__tarjeta {
    padding: 3.5rem 3rem;
  }

  .vista-previa__titulo {
    font-size: 2rem;
  }

  .vista-previa__texto {
    font-size: 1.1rem;
  }

  .vista-previa__cifra {
    padding: 1.25rem 0.75rem;
  }

  .vista-previa__cifra-numero {
    font-size: 2.1rem;
  }

  .vista-previa__cifra-etiqueta {
    min-height: 3.9em; /* 3 líneas (3 x 1.3) en escritorio */
    font-size: 0.85rem;
  }
}

/* ----- Nuestro Programa (vista previa): tarjeta que se superpone a las
   secciones oscuras de arriba y abajo, con texto + foto en dos columnas ----- */
.programa__tarjeta {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: -45px auto -45px;
  background-color: var(--color-fondo-claro);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  padding: 2.5rem 1.5rem;
}

/* Personaje asomando a la izquierda de la tarjeta, señalando con la mano
   hacia los recuadros de los frentes. Solo en escritorio: en móvil no hay
   espacio a los costados de la tarjeta para que asome */
.programa__senalador {
  display: none;
}

@media (min-width: 1100px) {
  .programa__senalador {
    display: block;
    position: absolute;
    left: -165px;
    top: 350px;
    width: 340px;
    height: auto;
    z-index: 1;
    filter: drop-shadow(var(--sombra-suave));
    animation: flotar-senalador 4s ease-in-out infinite;
  }
}

@keyframes flotar-senalador {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.programa__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* En móvil había mucho espacio muerto entre la imagen y el botón */
#nuestro-programa .vista-previa__boton {
  margin-top: 1rem;
}

@media (min-width: 900px) {
  #nuestro-programa .vista-previa__boton {
    margin-top: 2rem;
  }
}

.programa__texto {
  max-width: 640px;
  text-align: center;
}

.programa__frentes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
  text-align: left;
}

/* Recuadros azul marino con textura de puntos (mismo recurso que las
   cifras de Quiénes Somos) y un destello dorado sutil propio en la esquina
   -- no la imagen de destello, un brillo hecho en CSS -- ya que el dorado
   sí está permitido aquí por ir sobre fondo oscuro */
.programa__frente {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 16px;
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}

.programa__frente::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -35px;
  right: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.35) 0%, transparent 70%);
}

.programa__frente-icono {
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
}

.programa__frente-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.programa__frente-texto {
  font-weight: var(--peso-bold);
  font-size: 0.95rem;
  color: var(--color-fondo-claro);
}

.programa__frente-descripcion {
  font-weight: var(--peso-medium);
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(252, 252, 253, 0.7);
}

.programa__media {
  position: relative;
  width: 100%;
  max-width: 240px;
}

/* Destello dorado centrado detrás de la ilustración (permitido: la
   ilustración tiene su propio fondo oscuro, y el brillo se desvanece antes
   de exponerse sobre el fondo claro de la tarjeta) */
.programa__media::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 130%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.4) 0%, transparent 70%);
  pointer-events: none;
}

/* Ilustración con fondo transparente: sin recuadro, sombra ni recorte,
   se deja tal cual el PNG original */
.programa__imagen {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .programa__tarjeta {
    margin: -65px auto -65px;
    padding: 3.5rem 3rem;
  }

  .programa__grid {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }

  .programa__texto {
    flex: 1;
    max-width: none;
    text-align: left;
  }

  .programa__media {
    flex: 0 0 360px;
    max-width: 360px;
  }
}

/* ----- Testimonios ----- */
.testimonios {
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 3rem 1.25rem;
  /* La tarjeta de Nuestro Programa se superpone aquí arriba, así que hace
     falta más aire para que el título no quede pegado a su borde */
  padding-top: 6rem;
}

@media (min-width: 900px) {
  .testimonios {
    padding-top: 7.5rem;
  }
}

.testimonios__contenedor {
  max-width: 1100px;
  margin: 0 auto;
}

.testimonios__cabecera {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.testimonios__titulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.5rem;
  color: var(--color-fondo-claro);
}

/* Párrafo de introducción, solo en la página independiente de Testimonios
   (en la vista previa de Inicio no hace falta, el título ya es breve) */
.testimonios__intro {
  margin-top: 0.75rem;
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(252, 252, 253, 0.85);
}

/* Aviso legal chico, debajo del carrusel: el sector está regulado, así que
   los testimonios no pueden leerse como una promesa de resultado */
.testimonios__aviso {
  max-width: 640px;
  margin: 0.75rem auto 0;
  text-align: center;
  font-weight: var(--peso-medium);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(252, 252, 253, 0.55);
}

/* Carrusel: flechas + pista con scroll horizontal nativo (sin librerías) */
.testimonios__carrusel-envoltura {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.testimonios__carrusel {
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Oculta la barra de scroll manteniendo el desplazamiento funcional */
.testimonios__carrusel {
  scrollbar-width: none;
}

.testimonios__carrusel::-webkit-scrollbar {
  display: none;
}

.testimonios__pista {
  display: flex;
  gap: 1.5rem;
}

.testimonios__flecha {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-acento-dorado);
  color: var(--color-acento-dorado);
  font-size: 1.4rem;
  line-height: 1;
}

.testimonios__flecha:hover {
  background-color: var(--color-acento-dorado);
  color: var(--color-texto-primario);
}

/* Tarjetas claras y elevadas sobre el fondo oscuro de la sección: alto contraste,
   sin depender del dorado para destacar. Una tarjeta visible en móvil.
   El borde blanco enmarca el video contra el fondo oscuro de la sección. */
.testimonios__tarjeta {
  flex: 0 0 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
  background-color: var(--color-fondo-claro);
  border: 4px solid var(--color-fondo-claro);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonios__tarjeta:hover {
  transform: translateY(-6px);
}

.testimonios__video-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--color-fondo-oscuro);
  overflow: hidden;
}

/* La imagen del video llena todo el recuadro (recorta en vez de dejar barras) */
.testimonios__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-fondo-oscuro);
}

/* Botón de reproducción centrado, propio del sitio (no el control nativo del navegador) */
.testimonios__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background-color: var(--color-acento-dorado);
  box-shadow: var(--sombra-suave);
  cursor: pointer;
}

.testimonios__play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  fill: var(--color-texto-primario);
}

.testimonios__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.testimonios__play--oculto {
  opacity: 0;
  pointer-events: none;
}

/* Frase corta que refuerza cada testimonio, distinta en cada tarjeta */
.testimonios__frase {
  padding: 1.1rem 1.25rem;
  font-style: italic;
  font-weight: var(--peso-medium);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  color: var(--color-texto-secundario);
}

@media (min-width: 768px) {
  .testimonios__titulo {
    font-size: 2rem;
  }

  /* Tres tarjetas visibles; el resto se desliza dentro del carrusel */
  .testimonios__tarjeta {
    flex: 0 0 calc((100% - 2 * 1.5rem) / 3);
  }
}

/* ----- Ubicación (ahora como panel dentro de la sección combinada con
   Contacto directo; ver .contacto-combinado__panel--ubicacion) ----- */
.ubicacion__titulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.5rem;
  color: var(--color-texto-primario);
  margin-bottom: 1rem;
}

.ubicacion__intro {
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto-secundario);
  margin-bottom: 0.75rem;
}

.ubicacion__texto {
  font-weight: var(--peso-bold);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto-secundario);
  margin-bottom: 1.5rem;
}

/* Mapa real de Google Maps, responsivo y con esquinas redondeadas */
.ubicacion__mapa {
  border-radius: var(--radio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

.ubicacion__mapa iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
}

/* ----- Ubicación completa (página independiente): texto y mapa más grandes
   que en el panel resumido de Inicio, en dos columnas desde escritorio ----- */
.ubicacion-completa__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ubicacion-completa__texto {
  max-width: 480px;
}

.ubicacion-completa__mapa {
  width: 100%;
}

.ubicacion-completa__mapa .ubicacion__mapa iframe {
  height: 320px;
}

@media (min-width: 900px) {
  .ubicacion-completa__grid {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }

  .ubicacion-completa__texto {
    flex: 1;
  }

  .ubicacion-completa__mapa {
    flex: 1;
  }

  .ubicacion-completa__mapa .ubicacion__mapa iframe {
    height: 420px;
  }
}

@media (min-width: 768px) {
  .ubicacion__titulo {
    font-size: 2rem;
  }

  .ubicacion__texto {
    font-size: 1.1rem;
  }

  .ubicacion__mapa iframe {
    height: 320px;
  }
}

/* ----- Contacto directo: panel flotante que cierra la página ----- */
.contacto-exterior {
  position: relative;
  background-color: var(--color-fondo-claro);
  padding: 0.5rem 1.25rem 3rem;
}

/* Solo en la home: más separación con Testimonios, que viene justo antes */
.contacto-exterior--combinado {
  padding-top: 1.5rem;
}

@media (min-width: 900px) {
  .contacto-exterior--combinado {
    padding-top: 2.5rem;
  }
}

/* Insignia flotante en la esquina del panel, solo en móvil/tablet. Va fuera
   del panel (que tiene overflow:hidden por los puntitos de fondo) para que
   sí pueda sobresalir del borde sin que se recorte. */
.contacto__insignia {
  position: absolute;
  top: -14px;
  right: 0.5rem;
  width: 74px;
  z-index: 3;
  filter: drop-shadow(var(--sombra-suave));
}

@media (min-width: 900px) {
  .contacto__insignia {
    display: none;
  }
}

.contacto {
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

/* Grid combinado solo para la home: Contacto directo (izquierda) +
   Ubicación (derecha) como dos recuadros dentro del mismo panel oscuro */
.contacto-combinado__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contacto-combinado__panel--contacto,
.contacto-combinado__panel--ubicacion {
  text-align: center;
}

/* Este panel va sobre el fondo oscuro del contenedor .contacto, así que
   el título/texto de ubicación (pensados originalmente para fondo claro)
   necesitan pasar a los colores de fondo oscuro */
.contacto-combinado__panel--ubicacion .ubicacion__titulo {
  color: var(--color-fondo-claro);
}

.contacto-combinado__panel--ubicacion .ubicacion__intro,
.contacto-combinado__panel--ubicacion .ubicacion__texto {
  color: rgba(252, 252, 253, 0.8);
}

/* Ilustración centrada en el espacio libre debajo de los botones */
.contacto-combinado__ilustracion {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 1.75rem auto 0;
}

@media (min-width: 900px) {
  .contacto-combinado__ilustracion {
    margin: 1.25rem auto 0;
    max-width: 280px;
  }
}

@media (min-width: 900px) {
  .contacto-combinado__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }

  .contacto-combinado__panel--contacto,
  .contacto-combinado__panel--ubicacion {
    flex: 1;
    text-align: left;
  }
}

.contacto__grid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contacto__contenedor {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* Ilustraciones decorativas: ocultas en móvil, a los costados desde escritorio */
.contacto__ilustracion {
  display: none;
}

@media (min-width: 900px) {
  .contacto__grid {
    gap: 2rem;
  }

  .contacto__ilustracion {
    display: block;
    width: 170px;
    flex: none;
  }
}

.contacto__titulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.5rem;
  color: var(--color-fondo-claro);
  margin-bottom: 1rem;
}

.contacto__texto {
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-fondo-claro);
  margin-bottom: 2rem;
}

.contacto__botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.contacto__boton-llamada {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 100%;
  max-width: 320px;
  color: var(--color-texto-primario);
  font-weight: var(--peso-bold);
  font-size: 1rem;
  padding: 0.9rem 1.75rem;
  border-radius: 50px;
}

/* El fondo dorado va en un pseudo-elemento (z-index -1) en vez de en el
   propio botón: así el avioncito (z-index -2) queda de verdad DETRÁS del
   dorado. Si el dorado fuera el fondo del botón, el avioncito se pintaría
   encima de él (el fondo del propio contenedor siempre queda al fondo) */
.contacto__boton-llamada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-acento-dorado);
  border-radius: 50px;
}

/* Insignia asomando detrás del botón (no encima). El z-index:1 del botón
   mantiene este z-index negativo dentro del botón, sin escaparse detrás
   de todo el panel oscuro */
.contacto__insignia-boton {
  position: absolute;
  top: -14px;
  right: -10px;
  width: 46px;
  z-index: -2;
  filter: drop-shadow(var(--sombra-suave));
  pointer-events: none;
}

.contacto__boton-llamada:hover {
  filter: brightness(0.92);
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
}

.contacto__boton-whatsapp {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  background-color: var(--color-boton-whatsapp);
  color: var(--color-fondo-claro);
  font-weight: var(--peso-bold);
  font-size: 1rem;
  padding: 0.9rem 1.75rem;
  border-radius: 50px;
}

.contacto__boton-whatsapp:hover {
  filter: brightness(0.92);
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
}

@media (min-width: 768px) {
  .contacto__titulo {
    font-size: 2rem;
  }

  .contacto__texto {
    font-size: 1.1rem;
  }

  .contacto__botones {
    flex-direction: row;
    justify-content: center;
  }

  .contacto__boton-llamada,
  .contacto__boton-whatsapp {
    width: auto;
    white-space: nowrap;
  }
}

/* ===== Componentes de páginas internas ===== */

/* ----- Encabezado de página interna (Quiénes Somos, Nuestro Programa, FAQ, Privacidad) ----- */
.hero-pagina {
  background-color: var(--color-fondo-oscuro);
  /* El fondo llega hasta el borde superior real; el padding-top reserva el
     espacio del header flotante para que no tape el título */
  padding: calc(var(--altura-header) + var(--separacion-header) * 2 + 4rem) 1.25rem 3rem;
  text-align: center;
}

.hero-pagina__contenedor {
  max-width: 720px;
  margin: 0 auto;
}

.hero-pagina__titulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.75rem;
  color: var(--color-fondo-claro);
  margin-bottom: 1rem;
}

.hero-pagina__texto {
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-fondo-claro);
}

.hero-pagina__fecha {
  display: block;
  margin-top: 1rem;
  font-weight: var(--peso-bold);
  font-size: 0.85rem;
  color: var(--color-acento-dorado);
}

@media (min-width: 768px) {
  .hero-pagina__titulo {
    font-size: 2.5rem;
  }

  .hero-pagina__texto {
    font-size: 1.15rem;
  }
}

/* Variante de Quiénes Somos: foto real de fondo en toda la sección. En
   móvil, la foto vertical dedicada (zona sólida arriba para el texto,
   foto asomando abajo, mismo recurso que el hero de la home); en
   escritorio, la panorámica horizontal (ver @media más abajo) */
.hero-pagina--quienes-somos {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 100vh;
  background-color: var(--color-fondo-oscuro);
  background-image: url('../img/heroquienesmovil.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  text-align: center;
  /* Qué tan abajo empieza el texto en móvil (después del header flotante).
     Reducí el "+ 2rem" (o ponelo en 0, o negativo) para subirlo más. */
  padding-top: calc(var(--altura-header) + var(--separacion-header) * 2 + 1rem);
}

.hero-pagina--quienes-somos .hero-pagina__contenedor {
  max-width: 560px;
  margin: 0 auto;
}

/* Destello dorado en la esquina superior izquierda, mismo recurso que el
   hero de la home. Solo en escritorio: en móvil ya está el destello del
   PNG (.hero-pagina__relleno-envoltura), no hace falta otro más */
@media (min-width: 900px) {
  .hero-pagina--quienes-somos::before {
    content: '';
    position: absolute;
    top: -180px;
    left: -180px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 201, 106, 0.28) 0%, transparent 65%);
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
  }
}

/* Más fuerza en móvil: título más grande */
.hero-pagina--quienes-somos .hero-pagina__titulo,
.hero-pagina--nuestro-programa .hero-pagina__titulo {
  font-size: 2.1rem;
}

/* Todo el título en dorado (antes solo la segunda palabra) */
.hero-pagina--quienes-somos .hero-pagina__titulo,
.hero-pagina--nuestro-programa .hero-pagina__titulo {
  color: var(--color-acento-dorado);
}

/* Aprovecha el espacio libre entre el texto y la foto, solo en móvil */
.hero-pagina__relleno-envoltura {
  position: relative;
  z-index: 0;
  width: fit-content;
  margin: 2rem auto 0;
}

/* Destello dorado detrás del PNG, mismo recurso que ya usamos en otras
   secciones (permitido: va sobre el fondo oscuro, no sobre el claro). El
   z-index:0 de arriba evita que este -1 se escape detrás de toda la
   sección (la foto), que era por lo que no se notaba. */
.hero-pagina__relleno-envoltura::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.hero-pagina__relleno-movil {
  display: block;
  width: 45vw;
  max-width: 220px;
  margin: 0 auto;
  animation: latido-suave 3s ease-in-out infinite;
}

/* Latido suave: más lento y con menos escala que el del botón, para que
   se note pero sin llamar demasiado la atención */
@keyframes latido-suave {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* Botón dorado casi pegado al PNG, con el mismo latido (misma animación,
   mismo tiempo) para que ambos se muevan sincronizados */
.hero-pagina__boton-asesor {
  display: block;
  width: fit-content;
  margin: 0.75rem auto 0;
  background-color: var(--color-acento-dorado);
  color: var(--color-texto-primario);
  font-weight: var(--peso-bold);
  font-size: 0.95rem;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  box-shadow: var(--sombra-suave);
  animation: latido-suave 3s ease-in-out infinite;
}

@media (min-width: 900px) {
  .hero-pagina__boton-asesor {
    display: none;
  }

  .hero-pagina__relleno-envoltura {
    display: none;
  }
}

.hero-pagina__destacado {
  color: var(--color-acento-dorado);
}

@media (min-width: 900px) {
  /* La sección toma exactamente la proporción panorámica de la foto real
     (2883x878), así entra completa y sin ningún espacio vacío alrededor.
     A cambio queda una franja angosta, con poco alto para el texto. */
  .hero-pagina--quienes-somos {
    min-height: 0;
    aspect-ratio: 2883 / 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--altura-header) + var(--separacion-header) * 2);
    padding-bottom: calc(var(--altura-header) + var(--separacion-header) * 2);
    /* En vez de un padding-left fijo, se deja libre casi la mitad derecha
       (donde está la foto) y se centra el texto en el espacio que sobra a
       la izquierda (la zona azul sólida) -- así no queda un hueco enorme
       en pantallas anchas */
    padding-left: 0%;
    padding-right: 40%;
    background-image: url('../img/heroquienes.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Ajuste fino de altura: sube el texto un poco respecto al centrado
     matemático puro. Más negativo = más arriba. */
  .hero-pagina--quienes-somos .hero-pagina__contenedor {
    transform: translateY(2px);
  }

  /* Título mucho más grande, solo en esta página y solo en escritorio:
     es el primer impacto de la página, así que ocupa más espacio */
  .hero-pagina--quienes-somos .hero-pagina__titulo {
    font-size: 3.5rem;
    white-space: nowrap;
    position: relative;
    top: -40px; /* más negativo = más arriba, mueve solo esta frase */
  }

  /* Texto descriptivo, a la derecha de la foto flotante (que sube desde
     la sección de abajo) y pegado a la parte de abajo del hero, en vez de
     ir debajo del título en el flujo normal */
  .hero-pagina__texto--quienes-somos {
    display: block;
    position: absolute;
    /* En % del ancho del hero, no en px: el título queda centrado dentro
       de su propia franja (4% a 60%) y puede terminar más a la derecha de
       lo que parece, así que en vez de calcular a partir del ancho de la
       foto, este texto arranca directamente después de esa franja (60%) */
    left: 35%;
    bottom: 55px; /* qué tan pegado al borde inferior del hero */
    max-width: 400px;
    text-align: left;
  }

  /* En escritorio vuelve al alineado a la izquierda (el centrado es solo
     para la versión de fondo completo en móvil) */
  .hero-pagina--quienes-somos,
  .hero-pagina--nuestro-programa {
    text-align: left;
  }

  .hero-pagina--quienes-somos .hero-pagina__contenedor,
  .hero-pagina--nuestro-programa .hero-pagina__contenedor {
    margin: 0;
  }
}

/* Variante de Nuestro Programa: mismo recurso, con sus propias imágenes */
.hero-pagina--nuestro-programa {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 100vh;
  background-color: var(--color-fondo-oscuro);
  background-image: url('../img/heroprogramamovil.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  text-align: center;
  /* Qué tan abajo empieza el texto en móvil (después del header flotante).
     Reducí el "+ 2rem" (o ponelo en 0, o negativo) para subirlo más. */
  padding-top: calc(var(--altura-header) + var(--separacion-header) * 2 + 2rem);
}

.hero-pagina--nuestro-programa .hero-pagina__contenedor {
  max-width: 560px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  /* Destello dorado en la esquina superior izquierda, igual que Quiénes
     Somos (solo escritorio: en móvil ya está el destello del PNG) */
  .hero-pagina--nuestro-programa::before {
    content: '';
    position: absolute;
    top: -180px;
    left: -180px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 201, 106, 0.28) 0%, transparent 65%);
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
  }

  /* La sección toma exactamente la proporción panorámica de la foto real
     (2900x901), así entra completa y sin recortes. */
  .hero-pagina--nuestro-programa {
    min-height: 0;
    aspect-ratio: 2900 / 801;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--altura-header) + var(--separacion-header) * 2);
    padding-bottom: calc(var(--altura-header) + var(--separacion-header) * 2);
    /* Se deja libre casi la mitad derecha (donde está la foto) y el texto
       se centra en la zona azul sólida de la izquierda */
    padding-left: 0%;
    padding-right: 40%;
    background-image: url('../img/heroprograma.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Todo centrado en la zona azul: título y texto uno debajo del otro,
     centrados horizontal y verticalmente (así no queda tanto fondo vacío) */
  .hero-pagina--nuestro-programa {
    text-align: center;
  }

  .hero-pagina--nuestro-programa .hero-pagina__contenedor {
    max-width: 700px; /* ancho del bloque título + texto */
    margin: 0;
    /* Ajuste fino de altura de todo el bloque: negativo = más arriba */
    transform: translateY(30px);
  }

  /* Título grande, en una sola línea, solo en escritorio */
  .hero-pagina--nuestro-programa .hero-pagina__titulo {
    font-size: 3.5rem;
    white-space: nowrap;
    margin-bottom: 1.25rem; /* espacio entre el título y el texto */
    position: relative;
    top: 0px; /* solo el título: negativo = sube, positivo = baja */
    left: 0px; /* solo el título: negativo = izquierda, positivo = derecha */
  }

  .hero-pagina--nuestro-programa .hero-pagina__texto {
    font-size: 1.15rem; /* tamaño del texto */
    line-height: 1.65; /* separación entre renglones */
    text-align: left; /* alineado a la izquierda (center = centrado, right = a la derecha) */
    position: relative;
    top: 0px; /* solo el texto: negativo = sube, positivo = baja */
    left: 78px; /* solo el texto: negativo = izquierda, positivo = derecha */
  }
}

/* Ícono único centrado, acento de "Diagnóstico Antes Que Producto" (fondo oscuro) */
.filosofia__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--color-acento-dorado);
  border-radius: 50%;
  color: var(--color-acento-dorado);
}

.filosofia__icono svg {
  width: 32px;
  height: 32px;
}

/* ----- Bloque de contenido genérico (reutilizable en varias páginas) ----- */
.bloque {
  padding: 3rem 1.25rem;
}

.bloque--claro {
  background-color: var(--color-fondo-claro);
  border-top: 1px solid var(--color-separador-claro);
}

/* Justo después va el hero de Quiénes Somos, que ya trae su propio aire
   abajo; con el padding-top normal quedaba mucho espacio muerto entre
   ambas secciones */
#nuestra-historia {
  padding-top: 2rem;
  border-top: none;
  /* La tarjeta (ver más abajo) sube sobre el hero con un margin-top
     negativo: al ser el hero un elemento posicionado (position:relative +
     z-index:0), esta sección también necesita position + z-index para
     pintarse encima, si no el hero gana igual por ir antes en el HTML */
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  #nuestra-historia {
    /* Margen lateral de toda la sección (antes venía escondido en .bloque).
       Ponlo en 0 para pegar todo a los bordes de la pantalla */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    /* Espacio en blanco debajo del recuadro, antes de la sección azul de
       Diagnóstico. Bájalo (ej. 1rem, o 0) para subir esa sección */
    padding-bottom: 2rem;
  }
}

/* Foto de la oficina: cruza el borde de arriba de la tarjeta, asomando
   hacia el hero (fondo oscuro) de arriba. Solo en escritorio: en móvil no
   hay espacio para que flote sin tapar el logo/título */
.historia__foto-flotante {
  display: none;
}

@media (min-width: 900px) {
  .historia__foto-flotante {
    display: block;
    position: absolute;
    top: -229px;
    left: 10%;
    width: 260px;
    z-index: 2;
  }

  .historia__foto-flotante img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radio-grande);
    box-shadow: none;
  }
}

/* Logo + título, centrados en móvil (donde la foto de arriba no se ve) y
   corridos a la derecha en escritorio (donde sí, para no chocar con ella) */
.historia__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

@media (min-width: 900px) {
  .historia__marca {
    align-items: flex-start;
    text-align: left;
    margin-left: 332px; /* solo un número: cuánto se corre a la derecha (independiente de la foto) */
  }
}

.historia__marca-logo {
  display: block;
  height: 52px;
  width: auto;
}

@media (min-width: 900px) {
  .historia__marca-logo {
    position: relative;
    top: -30px;  /* solo el logo: negativo = sube, positivo = baja (el título no se mueve) */
    left: 95px; /* solo el logo: negativo = izquierda, positivo = derecha (el título no se mueve) */
  }

  /* Solo el título "Nuestra historia" (no afecta los .bloque__titulo de
     otras secciones, porque va acotado a .historia__marca) */
  .historia__marca .bloque__titulo {
    position: relative;
    top: -30px;  /* negativo = sube, positivo = baja */
    left: 20px; /* negativo = izquierda, positivo = derecha */
    font-size: 2.3rem; /* tamaño de la letra */
    margin-bottom: 1rem; /* espacio debajo del título (empuja el párrafo) */
  }
}

.bloque--oscuro {
  background-color: var(--color-fondo-oscuro);
}

.bloque__contenedor {
  max-width: 760px;
  margin: 0 auto;
}

.bloque__titulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.bloque--claro .bloque__titulo {
  color: var(--color-texto-primario);
}

.bloque--oscuro .bloque__titulo {
  color: var(--color-fondo-claro);
}

.bloque__subtitulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-bold);
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}

.bloque--claro .bloque__subtitulo {
  color: var(--color-texto-primario);
}

.bloque--oscuro .bloque__subtitulo {
  color: var(--color-fondo-claro);
}

.bloque__texto {
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.bloque__texto:last-child {
  margin-bottom: 0;
}

.bloque--claro .bloque__texto {
  color: var(--color-texto-secundario);
}

.bloque--oscuro .bloque__texto {
  color: var(--color-fondo-claro);
}

.bloque__texto a {
  text-decoration: underline;
}

/* Frase clave resaltada: dorado permitido solo dentro de .bloque--oscuro */
.bloque--oscuro .texto-dorado {
  color: var(--color-acento-dorado);
}

@media (min-width: 768px) {
  .bloque__titulo {
    font-size: 2rem;
  }

  .bloque__texto {
    font-size: 1.1rem;
  }
}

/* ----- Nuestra Historia (Quiénes Somos): tarjeta clara con el texto, y al
   lado (fuera de la tarjeta) la foto de Miami ----- */
.historia__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  max-width: none;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .historia__contenido {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
    /* En vez de centrado (margin:0 auto), se ancla a la izquierda: así
       cuando subes el max-width de arriba, todo el espacio extra se va
       hacia la derecha, en vez de repartirse a los dos lados */
    margin-left: 0;
    margin-right: auto;
  }
}

.historia__tarjeta {
  position: relative;
  z-index: 0;
  width: 100%;
  background-color: var(--color-fondo-claro);
  border: 1px solid var(--color-separador-claro);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  padding: 2.5rem 1.5rem;
}

/* Dentro de la tarjeta clara, el título/texto vuelven a los colores de
   fondo claro (el resto de .bloque--oscuro los pone en blanco) */
.historia__tarjeta .bloque__titulo {
  color: var(--color-texto-primario);
}

.historia__tarjeta .bloque__texto {
  color: var(--color-texto-secundario);
}

/* Ilustración de equipo/crecimiento, asomando en la esquina inferior
   derecha de la foto de Miami (ahora ambas viven en .historia__media, ya
   que la foto salió de la tarjeta). Solo en pantallas grandes: en móvil
   no hay espacio de sobra en la esquina para que asome sin tapar nada */
.historia__equipo {
  display: none;
}

@media (min-width: 900px) {
  .historia__equipo {
    display: block;
    position: absolute;
    right: -30px;
    bottom: -20px;
    width: 240px;
    height: auto;
    z-index: 1;
    filter: drop-shadow(var(--sombra-suave));
    animation: flotar-insignia 3.5s ease-in-out infinite;
  }
}

/* Círculo blanco chico y sutil para el check verde, en vez del ícono suelto */
.historia__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px; /* tamaño del ícono verde */
  height: 26px;
}

/* El ícono nuevo (iconobien) ya es un círculo verde con el check: llena
   todo el espacio, sin el círculo blanco de antes */
.historia__check img {
  display: block;
  width: 100%;
  height: 100%;
}

.historia__texto {
  position: relative;
  z-index: 0;
  margin: 0;
  max-width: 640px;
}

/* Párrafo centrado solo en móvil (los recuadros de abajo se quedan
   alineados a la izquierda, se ven mejor así al ser una lista) */
@media (max-width: 899px) {
  .historia__texto .bloque__texto {
    text-align: center;
  }
}

/* Solo el párrafo "AFS (Accurate Financial Solutions) nació de...", en
   escritorio. Acotado a .historia__texto, así que no toca otros párrafos */
@media (min-width: 900px) {
  .historia__texto .bloque__texto {
    position: relative;
    top: -40px;  /* negativo = sube, positivo = baja (los recuadros azules no se mueven) */
    left: 0px; /* negativo = izquierda, positivo = derecha */
    max-width: none; /* ancho del bloque de texto: ponle un número (ej. 500px) para hacerlo más angosto */
    font-size: 1.1rem; /* tamaño de la letra */
    line-height: 1.6; /* separación entre renglones */
    margin-bottom: 1rem; /* espacio debajo del párrafo (lo acerca o aleja de los recuadros azules) */
  }
}

/* Recuadros de "Nuestra Historia" parejos (a diferencia de Nuestro
   Programa, donde sí se ajustan a su propio texto) y con más fuerza:
   más grandes, en vez de cada uno con su propio ancho */
.historia__texto .programa__frentes {
  margin: 1rem 0;
}

.historia__texto .programa__frente {
  width: 100%;
  padding: 0.5rem 0.75rem;
}

.historia__texto .programa__frente-texto {
  font-size: 0.95rem;
}

/* Cuadrícula 2x2 en vez de apilados, solo cuando hay ancho de sobra.
   Todo lo de abajo es solo escritorio y solo para "Nuestra Historia"
   (acotado a .historia__texto, no toca los recuadros de la home) */
@media (min-width: 900px) {
  /* El GRUPO de los 4 recuadros */
  .historia__texto .programa__frentes {
    display: grid;
    grid-template-columns: 1fr 1fr; /* columnas: 1fr 1fr 1fr 1fr = las 4 en una fila */
    gap: 0.75rem; /* separación entre recuadros */
    position: relative;
    top: -35px;  /* mueve el grupo: negativo = sube, positivo = baja */
    left: 0px; /* mueve el grupo: negativo = izquierda, positivo = derecha */
    max-width: none; /* ancho del grupo: ponle un número (ej. 500px) para hacerlo más angosto */
    margin: 1rem 0; /* espacio arriba y abajo del grupo */
  }

  /* CADA recuadro azul */
  .historia__texto .programa__frente {
    padding: 0.5rem 0.75rem; /* 1er valor = alto (arriba/abajo), 2do = aire a los lados */
    min-height: 0px; /* alto mínimo: ponle un número (ej. 70px) para hacerlos todos más altos e iguales */
    border-radius: 16px; /* redondeado de las esquinas */
    gap: 0.5rem; /* espacio entre el check y el texto */
  }

  /* El TEXTO dentro de cada recuadro */
  .historia__texto .programa__frente-texto {
    font-size: 0.95rem; /* tamaño de la letra */
    line-height: normal; /* separación entre renglones (ponle un número, ej. 1.4, para separarlos más) */
  }
}

.historia__media {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.historia__imagen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave-hover);
}

@media (min-width: 900px) {
  .historia__tarjeta {
    /* auto en vez de un % fijo: toma todo el espacio que sobre después de
       reservarle su ancho fijo a la foto de Miami (ver .historia__media),
       así uno no le "roba" espacio al otro sin querer */
    flex: 0 0 700;
    max-width: none;
    padding: 2.5rem 3rem 0.5rem;
    margin-top: -65px;
    margin-left: 120px; /* mueve la tarjeta izquierda (negativo) / derecha (positivo) */
  }

  .historia__texto {
    max-width: none;
  }

  .historia__media {
    /* 0 0 = ancho fijo, no crece ni se achica (antes competía por espacio
       contra la tarjeta y terminaba encogiéndose casi a nada) */
    flex: 0 0 400px;
    max-width: none;
    margin-top: -60px;
    margin-left: 0px; /* separación con la tarjeta (más grande = más espacio entre las dos) */
    margin-right: 100px; /* corre la foto a la izquierda SIN cambiar la separación con la tarjeta (la tarjeta se achica sola) */
  }

  /* Misma proporción real de la foto (4/5) en escritorio: ya no hace
     falta una relación distinta a la de móvil */
  .historia__imagen {
    aspect-ratio: 4 / 4.5;
  }
}

/* ----- Nuestra Historia, SOLO MÓVIL (escritorio no se toca) ----- */

/* Imagen de móvil que ya combina la foto de sala y la de Miami. Trae sus
   propias esquinas redondeadas, así que no lleva radio ni sombra */
.historia__movil {
  display: block;
  width: 100%;
  max-width: 400px; /* tamaño máximo de la imagen en móvil */
  height: auto;
}

@media (min-width: 900px) {
  .historia__movil {
    display: none;
  }
}

/* Recuadro dorado "MIAMI FLORIDA" entre el recuadro de texto y la imagen
   de móvil. Dorado sobre fondo claro: excepción pedida por el cliente
   (el texto va en azul oscuro para que se lea bien) */
.historia__etiqueta-movil {
  display: block;
  margin: -0.75rem 0; /* acerca la etiqueta a la tarjeta y a la imagen (el gap del contenedor es 2.5rem) */
  padding: 0.7rem 1.75rem; /* 1er valor = alto, 2do = aire a los lados */
  background-color: var(--color-acento-dorado);
  color: var(--color-texto-primario);
  font-weight: var(--peso-extrabold);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-align: center;
  border-radius: 12px;
  box-shadow: var(--sombra-suave);
}

@media (min-width: 900px) {
  .historia__etiqueta-movil {
    display: none;
  }
}

@media (max-width: 899px) {
  /* La foto de Miami (y el PNG que la acompaña) no se muestran en móvil:
     ahí va a ir una imagen nueva que ya combina las dos fotos */
  .historia__media {
    display: none;
  }

  /* Título más grande (crece con el ancho de pantalla, con tope) y más
     aire debajo, antes del párrafo */
  .historia__marca .bloque__titulo {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .historia__marca {
    margin-bottom: 1.75rem;
  }

  /* Aire entre el párrafo y los recuadros azules */
  .historia__texto .bloque__texto {
    margin-bottom: 2rem;
  }

  .historia__texto .programa__frentes {
    margin: 2rem 0 1rem;
  }
}

/* ----- Nuestra Filosofía (Quiénes Somos): fondo azul con foto tenue y tres
   tarjetas ----- */
.filosofia {
  /* Foto muy atenuada por un velo azul (ver --velo-oscuro en base.css).
     Para cambiar la foto, cambia solo el nombre del archivo en url(...) */
  background-image: linear-gradient(var(--velo-oscuro), var(--velo-oscuro)), url('../img/diagnostico.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Efecto de profundidad al hacer scroll: la foto queda "fija" y el contenido
   pasa por encima. Al ser fondo de la sección, nunca se sale del recuadro
   azul. Solo en escritorio: en móvil (sobre todo iPhone) el fondo fijo se
   ve entrecortado */
@media (min-width: 900px) {
  .filosofia {
    background-attachment: fixed;
  }
}

.filosofia__contenedor {
  max-width: 1100px;
  margin: 0 auto;
}

/* Sección más compacta: menos aire arriba y abajo que un .bloque normal.
   Va con id para ganarle al "más respiro" de 1024px sin importar el orden */
#nuestra-filosofia {
  padding-top: 2.5rem;
  /* Aire bajo las tarjetas (2.5rem) + lo que el recuadro de "Por Qué
     Elegirnos" se monta encima del azul (3rem, ver .valores__contenedor).
     Si cambias cuánto se monta, cambia este valor en la misma cantidad */
  padding-bottom: 5.5rem;
}

@media (min-width: 900px) {
  #nuestra-filosofia {
    padding-top: 3.5rem; /* aire arriba de la sección */
    padding-bottom: 8.5rem; /* aire bajo las tarjetas (3.5rem) + lo que se monta el recuadro (5rem) */
  }
}

.filosofia__encabezado {
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}

.filosofia__encabezado .bloque__titulo {
  margin-bottom: 0.75rem;
  font-size: 1.9rem; /* tamaño del título en móvil */
}

@media (min-width: 900px) {
  .filosofia__encabezado {
    max-width: 900px; /* ancho suficiente para que el título quede en una línea */
  }

  .filosofia__encabezado .bloque__titulo {
    font-size: 2.75rem; /* tamaño del título en escritorio */
  }
}

.filosofia__encabezado .bloque__texto {
  margin-bottom: 0;
}

.filosofia__tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .filosofia__tarjetas {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Tarjeta tipo vidrio oscuro: legible sobre la foto, borde dorado sutil
   (el dorado va bien aquí porque el fondo es oscuro) */
.filosofia__tarjeta {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem;
  background-color: var(--fondo-tarjeta-oscura);
  border: 1px solid var(--color-acento-dorado);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* opacity se repite aquí para no perder el desvanecido de .reveal */
  transition: opacity 0.7s ease, transform 0.35s ease, box-shadow 0.25s ease;
}

/* Destello dorado sutil en la esquina superior, mismo recurso de las
   tarjetas de la home */
.filosofia__tarjeta::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.filosofia__tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--resplandor-dorado);
}

.filosofia__tarjeta .filosofia__icono {
  position: relative;
  margin: 0 auto 1.25rem;
}

.filosofia__tarjeta-titulo {
  position: relative;
  margin-bottom: 0.75rem;
  font-weight: var(--peso-extrabold);
  font-size: 1.25rem;
  color: var(--color-fondo-claro);
}

.filosofia__tarjeta-texto {
  position: relative;
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-fondo-claro);
}

/* ----- Por Qué Elegirnos (Quiénes Somos): tarjetas escalonadas + panel azul
   con PNG. Clases propias (valores__*) porque .tarjetas se comparte con
   Nuestro Programa ----- */
/* Sin espacio arriba: el recuadro se monta directamente sobre el azul de
   Diagnóstico (ver margin-top negativo en .valores__contenedor). Va con id
   para ganarle al "más respiro" de 1024px sin importar el orden */
#nuestros-valores {
  padding-top: 0;
}

/* Solo móvil: la altura de esta sección queda con decimales (por los
   tamaños de letra), y entre ella y Contacto directo se colaba una línea
   finita del azul del fondo de la página. Se traslapan 1px (mismo color
   claro en las dos, así que no se nota) para taparla */
@media (max-width: 899px) {
  #nuestros-valores {
    margin-bottom: -1px;
  }
}

/* Todo el contenido de la sección encerrado en un recuadro (mismo estilo
   del recuadro de "Nuestra Historia"). Se monta sobre el azul de arriba:
   el margin-top negativo lo sube (más negativo = se monta más). El borde de
   arriba de la sección evita que ese margen mueva también el fondo claro */
.valores__contenedor {
  position: relative;
  z-index: 1;
  max-width: 1200px; /* ancho del recuadro */
  margin: -3rem auto 0;
  padding: 2rem 1.25rem; /* aire interno: 1er valor arriba/abajo, 2do a los lados */
  background-color: var(--color-fondo-claro);
  /* Puntitos azules (mismo tamaño que en los fondos oscuros; el color y su
     intensidad están en --puntos-azules, en base.css) */
  background-image: radial-gradient(var(--puntos-azules) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--color-separador-claro);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
}

@media (min-width: 900px) {
  .valores__contenedor {
    margin-top: -5rem; /* cuánto se monta sobre el azul en escritorio */
    padding: 3rem 3rem;
  }
}

/* Título solo, grande y centrado sobre las dos columnas */
.valores__encabezado {
  margin-bottom: 1.5rem;
  text-align: center;
  line-height: 1.05;
  font-size: 2.6rem; /* tamaño de "Elegirnos?" en móvil (la línea de arriba se calcula a partir de este) */
}

@media (min-width: 900px) {
  .valores__encabezado {
    margin-bottom: 0;
    font-size: 3.2rem; /* tamaño de "Elegirnos?" en escritorio */
  }
}

/* "¿Por Qué" chico, arriba en su propia línea */
.valores__pregunta {
  display: block;
  margin-bottom: 0.15em;
  font-weight: var(--peso-bold);
  font-size: 0.45em; /* proporción respecto a "Elegirnos?" (0.45 = 45% de su tamaño) */
  letter-spacing: 0.04em;
}

/* "Elegirnos?" grande, abajo, en azul (el dorado no va sobre fondo claro) */
.valores__destacado {
  display: block;
  color: var(--color-texto-primario);
}

/* Panel + PNG a un lado y tarjetas al otro */
.valores__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Panel azul con textura de puntos: el PNG "sale" por arriba del panel.
   El z-index:0 mantiene el destello (z-index:-1) dentro del panel */
.valores__panel {
  position: relative;
  z-index: 0;
  height: 220px; /* alto del panel azul */
  margin-top: 7rem; /* espacio para la parte del PNG que sobresale por arriba */
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
}

/* Destello dorado detrás del PNG (permitido: va sobre el azul oscuro) */
.valores__panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.valores__png {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 320px; /* tamaño del PNG (el panel mide 220px: lo que pasa sobresale) */
  width: auto;
  filter: drop-shadow(var(--sombra-suave));
  animation: flotar-insignia 3.5s ease-in-out infinite;
}

/* Las tres tarjetas: cada una un "escalón" más a la derecha */
.valores__escalera {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.valores__tarjeta {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: calc(100% - 2rem); /* deja lugar para el escalón más largo */
  padding: 1.25rem 1.25rem;
  background-color: var(--color-fondo-claro);
  border: 1px solid var(--color-separador-claro);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
  /* opacity se repite para no perder el desvanecido de .reveal */
  transition: opacity 0.7s ease, transform 0.35s ease, box-shadow 0.25s ease;
}

.valores__tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-suave-hover);
}

/* Escalones en móvil: sangría creciente */
.valores__tarjeta:nth-child(2) {
  margin-left: 1rem;
}

.valores__tarjeta:nth-child(3) {
  margin-left: 2rem;
}

/* Círculo azul con el ícono PNG dorado adentro (dorado sobre azul: permitido) */
.valores__icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px; /* tamaño del círculo azul */
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-fondo-oscuro);
}

.valores__icono img {
  width: 55%; /* tamaño del ícono dentro del círculo */
  height: 55%;
  object-fit: contain;
}

.valores__titulo {
  margin-bottom: 0.35rem;
  font-weight: var(--peso-extrabold);
  font-size: 1.15rem;
  color: var(--color-texto-primario);
}

.valores__texto {
  font-weight: var(--peso-medium);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-texto-secundario);
}

@media (min-width: 900px) {
  /* En escritorio el título vuelve a la columna izquierda, encima del
     panel azul (así las tarjetas no quedan empujadas hacia abajo). Se usa
     una cuadrícula de 2 columnas; display:contents hace que el panel y las
     tarjetas se acomoden directamente en ella */
  .valores__contenedor {
    display: grid;
    grid-template-columns: 380px 1fr; /* ancho de la columna izquierda | resto */
    column-gap: 3.5rem;
    align-items: center;
  }

  .valores__cuerpo {
    display: contents;
  }

  .valores__encabezado {
    grid-column: 1;
    grid-row: 1;
  }

  .valores__intro {
    grid-column: 1;
    grid-row: 2;
  }

  .valores__escalera {
    grid-column: 2;
    grid-row: 1 / span 2; /* las tarjetas ocupan el alto de las dos filas */
  }

  .valores__tarjeta {
    width: calc(100% - 7rem); /* deja lugar para los dos escalones */
    padding: 1.5rem;
  }

  /* Escalones en escritorio: cada tarjeta 3.5rem más a la derecha */
  .valores__tarjeta:nth-child(2) {
    margin-left: 3.5rem;
  }

  .valores__tarjeta:nth-child(3) {
    margin-left: 7rem;
  }
}

/* ----- Cómo Funciona (Nuestro Programa): sin recuadro. Título, texto y tres
   pasos escalonados a la izquierda, y una imagen a la derecha ----- */
#como-funciona {
  border-top: none; /* sin la línea fina de arriba, junto al hero */
  /* Espacio en blanco bajo esta sección, antes de "Trabajamos en Dos
     Frentes". Bájalo para subir esa sección azul (va con id para ganarle al
     "más respiro" de 1024px) */
  padding-bottom: 3rem;
}

@media (min-width: 1024px) {
  #como-funciona {
    padding-bottom: 5rem;
  }
}

.pasos__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 1100px; /* ancho total del contenido */
  margin: 0 auto;
}

.pasos__columna {
  width: 100%;
}

.pasos__columna .bloque__titulo {
  margin-bottom: 0.75rem;
  font-size: 2.2rem; /* tamaño del título en móvil */
}

.pasos__columna .bloque__texto {
  margin-bottom: 1.75rem; /* espacio entre el texto y el primer paso */
  font-size: 1.05rem;
}

/* Los tres pasos: cada uno un "escalón" más a la derecha. El gap es el
   espacio entre recuadros: la línea dorada ya no sale del recuadro, así que
   se puede bajar libremente (0 = pegados) */
.pasos__lista {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada paso es su propio recuadro azul con textura de puntos */
.pasos__paso {
  position: relative;
  width: calc(100% - 3rem); /* deja lugar para los dos escalones */
  padding: 0.7rem 1.1rem 1rem 4.6rem; /* el 4º valor deja lugar al círculo */
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  border-radius: 16px;
  box-shadow: var(--sombra-suave);
  /* opacity se repite aquí para no perder el desvanecido de .reveal */
  transition: opacity 0.7s ease, transform 0.35s ease, box-shadow 0.25s ease;
}

.pasos__paso:nth-child(2) {
  margin-left: 1.5rem; /* escalón 2 */
}

.pasos__paso:nth-child(3) {
  margin-left: 3rem; /* escalón 3 */
}

.pasos__paso:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-suave-hover);
}

/* Línea dorada que baja desde el círculo y se desvanece, sin salir del
   recuadro (todo el dorado queda sobre azul) */
.pasos__paso:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(1rem + 22px - 1px); /* centrada con el círculo */
  top: calc(1rem + 44px); /* justo debajo del círculo */
  bottom: 0.75rem; /* dónde termina, dentro del recuadro (más grande = línea más corta) */
  width: 2px;
  background: linear-gradient(var(--color-acento-dorado), rgba(247, 201, 106, 0));
  pointer-events: none;
}

/* Círculo dorado con el ícono (dorado sobre azul: permitido) */
.pasos__marcador {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* tamaño del círculo dorado */
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-acento-dorado);
  color: var(--color-fondo-oscuro);
  box-shadow: 0 0 0 4px rgba(247, 201, 106, 0.18), 0 0 18px rgba(247, 201, 106, 0.4);
}

.pasos__marcador svg {
  width: 22px; /* tamaño del ícono dentro del círculo */
  height: 22px;
}

.pasos__etiqueta {
  display: block;
  margin-bottom: 0.1rem;
  font-weight: var(--peso-extrabold);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-acento-dorado);
}

.pasos__titulo {
  margin-bottom: 0.2rem;
  font-weight: var(--peso-extrabold);
  font-size: 1.05rem;
  color: var(--color-fondo-claro);
}

.pasos__descripcion {
  font-weight: var(--peso-medium);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(252, 252, 253, 0.85);
}

/* Imagen de la derecha: PNG con fondo transparente, sin marco ni sombra */
.pasos__media {
  width: 100%;
  max-width: 340px;
}

.pasos__imagen {
  display: block;
  width: 100%;
  aspect-ratio: 779 / 789; /* proporción real del PNG recortado: sin deformar */
  object-fit: contain;
}

@media (min-width: 900px) {
  .pasos__contenido {
    flex-direction: row;
    align-items: center;
    gap: 3rem; /* separación entre la columna de pasos y la imagen */
  }

  .pasos__columna {
    flex: 1;
    max-width: 620px; /* ancho de la columna de la izquierda */
  }

  /* TÍTULO "Cómo funciona" */
  .pasos__columna .bloque__titulo {
    position: relative;
    top: -30px; /* solo el título: negativo = sube, positivo = baja */
    left: -15px; /* solo el título: negativo = izquierda, positivo = derecha */
    font-size: 2.9rem; /* tamaño del título en escritorio */
  }

  /* PÁRRAFO "Antes de proponerte cualquier camino..." */
  .pasos__columna .bloque__texto {
    position: relative;
    top: -25px; /* solo el párrafo: negativo = sube, positivo = baja */
    left: -11px; /* solo el párrafo: negativo = izquierda, positivo = derecha */
    font-size: 1.25rem; /* tamaño de la letra */
    margin-bottom: 2rem; /* espacio entre el párrafo y el primer paso */
  }

  /* LOS TRES RECUADROS como grupo */
  .pasos__lista {
    position: relative;
    top: -20px; /* mueve los tres recuadros juntos: negativo = sube, positivo = baja */
    left: 0px; /* mueve los tres recuadros juntos: negativo = izquierda, positivo = derecha */
  }

  /* Escalones en escritorio: cada recuadro 3rem más a la derecha. Si cambias
     estos márgenes, ajusta también el width de .pasos__paso para que no se salgan */
  .pasos__paso {
    width: calc(100% - 6rem); /* ancho de cada recuadro */
  }

  .pasos__paso:nth-child(1) {
    margin-left: 0rem; /* recuadro 1 */
  }

  .pasos__paso:nth-child(2) {
    margin-left: 3rem; /* recuadro 2 */
  }

  .pasos__paso:nth-child(3) {
    margin-left: 6rem; /* recuadro 3 */
  }

  /* IMAGEN de la derecha */
  .pasos__media {
    flex: 0 0 420px; /* ancho de la imagen */
    max-width: none;
    position: relative;
    top: 0px; /* negativo = sube, positivo = baja */
    left: 0px; /* negativo = izquierda, positivo = derecha */
  }
}

/* ----- Trabajamos en Dos Frentes (Nuestro Programa): fondo azul con foto
   tenue y dos tarjetas ----- */
.frentes {
  /* Foto muy atenuada por un velo azul (--velo-oscuro en base.css).
     Para cambiar la foto, cambia solo el nombre del archivo en url(...) */
  background-image: linear-gradient(var(--velo-oscuro), var(--velo-oscuro)), url('../img/oficina1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Efecto de profundidad al hacer scroll: la foto queda "fija" y el contenido
   pasa por encima, sin salirse nunca del recuadro azul. Solo escritorio: en
   móvil (sobre todo iPhone) el fondo fijo se ve entrecortado */
@media (min-width: 900px) {
  .frentes {
    background-attachment: fixed;
  }
}

/* Sección compacta. Va con id para ganarle al "más respiro" de 1024px */
#dos-frentes {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 900px) {
  #dos-frentes {
    padding-top: 3.5rem; /* aire arriba (dentro del azul) */
    padding-bottom: 3.5rem; /* aire abajo */
    /* Sube o baja TODA la sección azul: negativo = sube (se monta sobre el
       espacio en blanco de arriba), positivo = baja */
    margin-top: -3rem;
  }
}

.frentes__contenedor {
  max-width: 1100px;
  margin: 0 auto;
}

.frentes__encabezado {
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}

.frentes__encabezado .bloque__titulo {
  margin-bottom: 0.75rem;
  font-size: 1.9rem; /* tamaño del título en móvil */
}

.frentes__encabezado .bloque__texto {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .frentes__encabezado {
    max-width: 900px;
  }

  .frentes__encabezado .bloque__titulo {
    font-size: 2.75rem; /* tamaño del título en escritorio */
  }
}

.frentes__tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Imagen de la asesora señalando las dos tarjetas: solo en escritorio (en
   móvil las tarjetas van una sobre otra y no tendría sentido) */
.frentes__senal {
  display: none;
}

@media (min-width: 900px) {
  .frentes__tarjetas {
    /* tarjeta | espacio central para la imagen | tarjeta */
    grid-template-columns: 1fr 140px 1fr; /* el 140px es el hueco entre las tarjetas */
    column-gap: 0;
    max-width: 1100px; /* ancho de todo el conjunto (tarjeta + hueco + tarjeta) */
    margin: 0 auto;
  }

  .frentes__senal {
    display: block;
    position: relative;
    z-index: 2; /* por encima de las tarjetas: sus manos las señalan */
    align-self: end; /* pegada al borde de abajo de las tarjetas */
    justify-self: center;
    top: 0px; /* negativo = sube, positivo = baja */
    left: 0px; /* negativo = izquierda, positivo = derecha */
    width: 340px; /* tamaño de la imagen (el alto sale de su proporción) */
    max-width: none;
    height: auto;
    /* Márgenes: "0 -100px -50px" = arriba, lados, abajo.
       - Lados (-100px): cuánto se monta sobre cada tarjeta = (ancho de la
         imagen - hueco central) / 2. Si cambias el ancho, cambia esto.
       - Abajo (-50px): cuánto de la imagen cuelga por debajo de las tarjetas.
         La imagen era más alta que el contenido de las tarjetas y las
         estiraba, dejando espacio vacío abajo. Más negativo = tarjetas más
         bajas (la imagen cuelga más); 0 = como antes */
    margin: 0 -100px -50px;
    /* El corte plano de la cintura se desvanece en vez de verse cortado */
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  }
}

/* Tarjeta tipo vidrio oscuro con borde dorado sutil (el dorado va bien
   aquí porque el fondo es oscuro) */
.frentes__tarjeta {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem;
  background-color: var(--fondo-tarjeta-oscura);
  border: 1px solid var(--color-acento-dorado);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* opacity se repite aquí para no perder el desvanecido de .reveal */
  transition: opacity 0.7s ease, transform 0.35s ease, box-shadow 0.25s ease;
}

/* Destello dorado sutil en la esquina superior */
.frentes__tarjeta::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.frentes__tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--resplandor-dorado);
}

/* Ícono PNG (el mismo de la vista previa del inicio) */
.frentes__icono {
  position: relative;
  width: 96px; /* tamaño del ícono */
  height: 96px;
  margin: 0 auto 1rem;
}

.frentes__icono img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.frentes__titulo {
  position: relative;
  margin-bottom: 0.75rem;
  font-weight: var(--peso-extrabold);
  font-size: 1.25rem;
  color: var(--color-fondo-claro);
}

.frentes__texto {
  position: relative;
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-fondo-claro);
}

/* Espacio en blanco entre la sección azul "Trabajamos en Dos Frentes" y el
   panel de "Contacto directo" (solo Nuestro Programa: va acotado a la
   sección que viene justo después de #dos-frentes). Súbelo para separarlos
   más, bájalo para acercarlos. Solo escritorio: en móvil queda como estaba */
@media (min-width: 900px) {
  #dos-frentes + .contacto-exterior {
    padding-top: 4rem;
  }
}

/* Escritorio: valores para mover y dimensionar cada elemento de las dos
   tarjetas. Van aquí (después de las reglas base de arriba) para poder
   ganarles. Todos arrancan igual que como se veían antes.
   En top/left: negativo = sube / izquierda, positivo = baja / derecha */
@media (min-width: 900px) {
  /* LAS DOS TARJETAS: tamaño (aire interno) */
  .frentes__tarjeta {
    padding: 2rem 1.5rem; /* 1er valor = alto (arriba/abajo), 2do = aire a los lados */
  }

  /* TARJETA IZQUIERDA (Perfil Financiero): posición */
  .frentes__tarjeta:first-of-type {
    top: 0px;
    left: 0px;
  }

  /* TARJETA DERECHA (Obligaciones con Acreedores): posición */
  .frentes__tarjeta:last-of-type {
    top: 0px;
    left: 0px;
  }

  /* ÍCONOS de las dos tarjetas */
  .frentes__icono {
    top: 0px;
    left: 0px;
    width: 96px; /* tamaño del ícono */
    height: 96px;
  }

  /* TÍTULO de las dos tarjetas */
  .frentes__titulo {
    top: 0px;
    left: 0px;
    font-size: 1.25rem; /* tamaño de la letra */
  }

  /* DESCRIPCIÓN de las dos tarjetas */
  .frentes__texto {
    top: 0px;
    left: 0px;
    font-size: 1rem; /* tamaño de la letra */
    max-width: none; /* ancho del texto: con un número (ej. 260px) salta de renglón antes */
    margin-left: auto; /* estos dos auto mantienen el texto centrado en la tarjeta */
    margin-right: auto;
  }

  /* SOLO la descripción de la TARJETA IZQUIERDA (Perfil Financiero): ancho
     propio para que salte de renglón antes. Ponle "none" para quitarlo, o
     un número mayor/menor para partirlo menos/más */
  .frentes__tarjeta:first-of-type .frentes__texto {
    max-width: 300px;
  }
}

/* ----- Preguntas frecuentes: fondo blanco con el título arriba y un recuadro
   azul (el azul corporativo) que encierra todas las preguntas ----- */
/* Fondo blanco con puntitos azules (mismo tamaño de puntos que en los fondos
   oscuros del sitio, pero en el azul corporativo). Cubre toda la página, del
   título hasta el panel de "Contacto directo", sin el pie de página. Sin
   overflow:hidden para no cortar la sombra del panel de contacto */
.faq-fondo {
  position: relative;
  z-index: 0;
  background-color: var(--color-fondo-claro);
  background-image: radial-gradient(var(--puntos-azules) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Parte de arriba (título + preguntas): el personaje se ubica respecto a ella */
.faq-fondo__superior {
  position: relative;
}

/* El contenedor del panel de contacto deja de tener su propio fondo claro,
   para que se vean los puntitos detrás del panel azul */
.faq-fondo .contacto-exterior {
  background-color: transparent;
}

/* Personaje del lado derecho. Solo en pantallas anchas (desde 1280px): en
   pantallas más chicas no hay espacio a los lados del recuadro y taparía
   las preguntas */
.faq__png {
  display: none;
}

@media (min-width: 1280px) {
  .faq__png {
    display: block;
    position: absolute;
    z-index: 1;
    right: 6%; /* distancia al borde derecho: más grande = más hacia el centro */
    bottom: 0; /* pegado al borde de abajo; sube con un valor positivo (ej. 40px) */
    height: 560px; /* tamaño del personaje (el ancho se ajusta solo) */
    width: auto;
    filter: drop-shadow(var(--sombra-suave));
    pointer-events: none;
  }
}

/* Encabezado sobre fondo blanco: título y texto en azul. El padding-top es el
   espacio de arriba (el del header flotante + un poco): bájalo para subir el
   título y todo lo de abajo. Va con clase compuesta para ganarle al "más
   respiro" de 1024px sin importar el orden */
.faq-fondo .hero-pagina {
  background-color: transparent;
  padding-top: calc(var(--altura-header) + var(--separacion-header) * 2 + 0.5rem);
  padding-bottom: 2rem; /* aire entre el título y el recuadro de preguntas */
}

.faq-fondo .hero-pagina__titulo {
  color: var(--color-texto-primario);
}

.faq-fondo .hero-pagina__texto {
  color: var(--color-texto-secundario);
}

.faq-fondo .bloque {
  background-color: transparent;
  border-top: none;
}

#preguntas {
  padding-top: 0;
}

/* Recuadro azul que encierra todas las preguntas (el azul corporativo) */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* espacio entre preguntas */
  padding: 1rem; /* aire entre el borde del recuadro y las preguntas */
  background-color: var(--color-fondo-oscuro);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
}

/* Cada pregunta es su propia tarjeta. Al pasar el mouse el borde se ilumina
   y al abrirse toda la tarjeta cambia a un tono dorado; al cerrarse vuelve
   suavemente al azul */
.faq__item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.06);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.faq__item:hover {
  border-color: rgba(247, 201, 106, 0.45);
}

.faq__item[open] {
  border-color: var(--color-acento-dorado);
  background-color: rgba(247, 201, 106, 0.12);
  box-shadow: 0 12px 30px -14px rgba(247, 201, 106, 0.4);
}

/* Pregunta centrada. El botón +/× va en el borde derecho, fuera del flujo,
   para que el texto quede centrado de verdad */
.faq__pregunta {
  position: relative;
  display: block;
  padding: 1.1rem 2.9rem; /* el 2do valor deja lugar al botón +/× a la derecha y mantiene el texto centrado */
  text-align: center;
  font-family: var(--fuente-principal);
  font-weight: var(--peso-bold);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-fondo-claro);
  cursor: pointer;
  list-style: none;
  transition: color 0.35s ease;
}

.faq__pregunta:hover,
.faq__item[open] .faq__pregunta {
  color: var(--color-acento-dorado);
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -14px; /* centra el botón en vertical */
  border: 1px solid rgba(247, 201, 106, 0.6);
  border-radius: 50%;
  font-weight: var(--peso-extrabold);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-acento-dorado);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease, color 0.35s ease;
}

/* Al abrir, el "+" gira 45° (queda como "×") y se llena de dorado */
.faq__item[open] .faq__pregunta::after {
  transform: rotate(45deg);
  background-color: var(--color-acento-dorado);
  color: var(--color-fondo-oscuro);
}

/* Mantiene el contenido cerrado "presente" (oculto por el alto 0) para poder
   animar también al cerrar: si no, el navegador lo esconde al instante */
.faq__item::details-content {
  content-visibility: visible;
  display: block;
}

/* Despliegue: el alto crece de 0 a su tamaño real (0fr -> 1fr), sin un tope
   fijo, y el texto aparece con un leve movimiento hacia abajo */
.faq__cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item[open] .faq__cuerpo {
  grid-template-rows: 1fr;
}

.faq__respuesta {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 1.5rem;
  text-align: center;
  font-weight: var(--peso-medium);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-fondo-claro);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.4s ease, padding-bottom 0.4s ease;
}

.faq__item[open] .faq__respuesta {
  padding-bottom: 1.25rem;
  opacity: 1;
  transform: none;
  transition-delay: 0.08s; /* el texto aparece un instante después de que se abre el espacio */
}

@media (min-width: 768px) {
  .faq {
    gap: 1rem;
    padding: 1.5rem;
  }

  .faq__pregunta {
    padding: 1.2rem 3.4rem;
    font-size: 1.1rem;
  }

  .faq__pregunta::after {
    right: 1.1rem;
  }
}

/* ----- Más respiro entre secciones en pantallas grandes ----- */
@media (min-width: 1024px) {
  .contacto,
  .bloque {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  /* No entra en la lista de arriba: necesita más padding-top que el resto
     porque la tarjeta de Nuestro Programa se superpone encima */
  .testimonios {
    padding-bottom: 5rem;
  }

  /* No entra en la lista de arriba: necesita conservar el espacio reservado
     para el header flotante en su padding-top */
  .hero-pagina {
    padding-top: calc(var(--altura-header) + var(--separacion-header) * 2 + 5rem);
    padding-bottom: 5rem;
  }

  .vista-previa {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  /* No entran en la lista de arriba: son franjas angostas a propósito (ver
     @media 900px de cada una), un padding-top tan grande no entra ahí */
  .hero-pagina--quienes-somos,
  .hero-pagina--nuestro-programa {
    padding-top: calc(var(--altura-header) + var(--separacion-header) * 2);
    padding-bottom: calc(var(--altura-header) + var(--separacion-header) * 2);
  }

  /* No entra en la lista de arriba: el hero ahora termina en una curva, así
     que le damos una dilatación generosa y prudente antes de la tarjeta,
     en vez de quedar pegada */
  #nuestra-historia {
    padding-top: 6rem;
  }
}

/* Solo la versión combinada de la home: más aire a los costados (el texto
   quedaba pegado al borde) y menos abajo (sobraba espacio vacío). Va
   después de la regla de "más respiro" de arriba para poder ganarle. */
@media (min-width: 900px) {
  .contacto--combinado {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 1.5rem;
  }
}

/* ===== Landing "Salir de deudas" (salir-de-deudas.html) =====
   Reutiliza los componentes de las otras páginas (hero__*, pasos__*,
   testimonios__*, historia__*); aquí solo va lo propio de esta página.
   Va al final para poder ganarle a la regla de "más respiro" de 1024px. */

/* ----- 1. Hero de las landings: lo primero que se ve es la acción
   (el formulario en salir-de-deudas.html, los botones de llamar/WhatsApp
   en salir-de-deudas-llamada.html). Pensado primero para celular: título
   corto y la acción justo debajo, sin tener que bajar.
   Fondo azul con la foto tenue de la oficina (mismo recurso de "¿Calificas?")
   y el destello dorado de las esquinas (con-orbes--oscuro) ----- */
.hero-landing {
  background-color: var(--color-fondo-oscuro);
  background-image: linear-gradient(var(--velo-oscuro), var(--velo-oscuro)), url('../img/oficina1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* El padding-top reserva el espacio del header flotante */
  padding: calc(var(--altura-header) + var(--separacion-header) * 2 + 0.75rem) 1rem 2.5rem;
}

/* Móvil: título, acción y lo de apoyo, uno debajo del otro (en ese orden).
   Escritorio: texto + apoyo a la izquierda, acción a la derecha */
.hero-landing__grid {
  display: grid;
  grid-template-areas:
    'intro'
    'accion'
    'apoyo';
  gap: 1.25rem;
  max-width: 1150px;
  margin: 0 auto;
}

.hero-landing__intro {
  grid-area: intro;
  text-align: center;
}

.hero-landing__accion {
  grid-area: accion;
}

.hero-landing__apoyo {
  grid-area: apoyo;
}

.hero-landing__titulo {
  font-weight: var(--peso-extrabold);
  font-size: 1.6rem; /* tamaño del título en móvil */
  line-height: 1.2;
  color: var(--color-fondo-claro);
}

/* Parte clave del título en dorado (va sobre el azul: permitido) */
.hero-landing__destacado {
  color: var(--color-acento-dorado);
}

.hero-landing__texto {
  max-width: 520px;
  margin: 0.6rem auto 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(252, 252, 253, 0.88);
}

.hero-landing__texto strong {
  font-weight: var(--peso-bold);
  color: var(--color-fondo-claro);
}

/* Lista de beneficios con el check verde */
.hero-landing__lista {
  display: grid;
  gap: 0.6rem;
  max-width: 420px;
  margin: 0 auto;
}

.hero-landing__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: var(--peso-bold);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--color-fondo-claro);
}

.hero-landing__item img {
  flex: none;
  width: 22px;
  height: 22px;
}

/* "Llena el formulario" encima de la tarjeta, en dorado (va sobre el azul:
   permitido), con un lápiz y una flecha que rebota hacia el formulario */
.hero-landing__llena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  font-weight: var(--peso-extrabold);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--color-acento-dorado);
}

.hero-landing__llena svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.hero-landing__llena-flecha {
  animation: llena-flecha 1.4s ease-in-out infinite;
}

@keyframes llena-flecha {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

@media (min-width: 900px) {
  .hero-landing__llena {
    font-size: 1.15rem;
    margin-bottom: 1rem;
  }
}

/* Enlace suave que invita a ver los testimonios de abajo */
.hero-landing__ver-mas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  margin: 1.25rem auto 0;
  font-weight: var(--peso-bold);
  font-size: 0.9rem;
  color: var(--color-acento-dorado);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-landing__ver-mas svg {
  width: 16px;
  height: 16px;
}

.hero-landing__ver-mas:hover {
  filter: brightness(1.1);
}

@media (min-width: 900px) {
  .hero-landing {
    padding: calc(var(--altura-header) + var(--separacion-header) * 2 + 2.5rem) 2rem 4rem;
  }

  .hero-landing__grid {
    grid-template-columns: 1fr minmax(0, 540px); /* texto | acción */
    grid-template-areas:
      'intro accion'
      'apoyo accion';
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
    row-gap: 1.75rem;
    align-items: start;
  }

  .hero-landing__intro {
    align-self: end;
    text-align: left;
  }

  .hero-landing__titulo {
    font-size: 2.75rem; /* tamaño del título en escritorio */
  }

  .hero-landing__texto {
    margin: 1rem 0 0;
    font-size: 1.12rem;
  }

  .hero-landing__lista {
    margin: 0;
    gap: 0.8rem;
  }

  .hero-landing__item {
    font-size: 1.02rem;
  }

  .hero-landing__ver-mas {
    margin: 1.75rem 0 0;
  }
}

/* ----- Hero de la versión con llamada: los botones van en el lugar del
   formulario, con la ilustración del puntaje al lado ----- */
.hero-landing__botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Mismos botones de Contacto directo, más grandes y a todo el ancho */
.hero-landing__botones .contacto__boton-llamada,
.hero-landing__botones .contacto__boton-whatsapp {
  max-width: 380px;
  padding: 1rem 1.5rem;
  font-size: 1.05rem;
  text-align: center;
}

.hero-landing__botones .contacto__boton-llamada {
  font-weight: var(--peso-extrabold);
  box-shadow: var(--resplandor-dorado);
  animation: latido-suave 2.4s ease-in-out infinite;
}

.hero-landing__botones .contacto__boton-llamada:hover {
  animation-play-state: paused;
}

/* "+20 años de experiencia · Oficina en Miami" debajo de los botones */
.hero-landing__nota {
  margin-top: 0.85rem;
  font-weight: var(--peso-bold);
  font-size: 0.82rem;
  text-align: center;
  color: rgba(252, 252, 253, 0.75);
}

/* Filtro de quién aplica: dos líneas cortas en vidrio sobre el azul */
.hero-landing__filtro {
  display: grid;
  gap: 0.5rem;
  max-width: 420px;
  margin: 1.25rem auto 0;
}

.hero-landing__filtro li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(252, 252, 253, 0.85);
}

.hero-landing__filtro strong {
  font-weight: var(--peso-bold);
  color: var(--color-fondo-claro);
}

.hero-landing__filtro .cifras-rapidas__icono {
  width: 22px;
  height: 22px;
}

.hero-landing__filtro .cifras-rapidas__icono--no svg {
  width: 11px;
  height: 11px;
}

/* Ilustración del puntaje: solo en escritorio, arriba de los botones (en
   celular se oculta para que los botones queden bien arriba) */
.hero-landing__imagen {
  display: none;
}

@media (min-width: 900px) {
  .hero-landing__botones {
    align-items: stretch;
  }

  .hero-landing__botones .contacto__boton-llamada,
  .hero-landing__botones .contacto__boton-whatsapp {
    width: 100%;
    max-width: none;
  }

  .hero-landing__filtro {
    margin: 0;
    max-width: 520px;
  }

  .hero-landing__filtro li {
    font-size: 0.95rem;
  }

  .hero-landing__imagen {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto 1.5rem;
  }

  /* En la versión con llamada, la acción va centrada en su columna */
  .hero-landing--llamada .hero-landing__accion {
    align-self: center;
  }
}

/* ----- Decoración de las secciones claras de las landings (y gracias):
   orbes azules difuminados (con-orbes--claro) y elementos sueltos (.deco):
   anillos, bloques de puntos y bolitas que flotan suave. Todo en azul:
   el dorado no va sobre claro ----- */
.con-orbes--claro::before {
  width: 460px;
  height: 460px;
  top: -140px;
  right: -160px;
  background: radial-gradient(circle, rgba(20, 58, 99, 0.22) 0%, transparent 70%);
}

.con-orbes--claro::after {
  width: 420px;
  height: 420px;
  bottom: -150px;
  left: -150px;
  background: radial-gradient(circle, rgba(69, 120, 190, 0.24) 0%, transparent 70%);
}

/* Testimonios + ¿Calificas? se leen como un solo bloque continuo: mismo
   fondo liso (sin la textura de puntos) y los orbes de la unión se mueven
   hacia el centro de cada sección, para que no queden cortados en el borde */
/* Con .testimonios delante para ganarle a ".testimonios.testimonios--claro"
   (la textura de puntos), que está más abajo en este archivo */
.testimonios.testimonios--claro.con-orbes--claro {
  background-image: none;
}

.testimonios.con-orbes--claro::after {
  bottom: auto;
  top: 30%;
}

#calificas.con-orbes--claro::before {
  top: 25%;
}

/* Le gana a ".con-orbes > *" (que pone todo en el flujo, por encima) */
.con-orbes > .deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Anillo: dos círculos de línea fina, uno dentro del otro */
.deco--anillo {
  width: 150px;
  height: 150px;
  border: 2px solid rgba(11, 35, 64, 0.12);
  border-radius: 50%;
  animation: deco-flotar 9s ease-in-out infinite;
}

.deco--anillo::after {
  content: '';
  position: absolute;
  inset: 22px;
  border: 2px dashed rgba(11, 35, 64, 0.14);
  border-radius: 50%;
}

/* Bloque de puntos azules más marcados que la textura del fondo */
.deco--puntos {
  width: 110px;
  height: 110px;
  background-image: radial-gradient(rgba(11, 35, 64, 0.3) 2px, transparent 2.5px);
  background-size: 16px 16px;
  animation: deco-flotar 11s ease-in-out infinite reverse;
}

/* Bolita sólida con degradado azul */
.deco--bola {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-fondo-oscuro-medio), var(--color-fondo-oscuro));
  box-shadow: 0 6px 14px rgba(11, 35, 64, 0.25);
  animation: deco-flotar 7s ease-in-out infinite;
}

.deco--bola-chica {
  width: 10px;
  height: 10px;
  opacity: 0.6;
}

@keyframes deco-flotar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Posiciones (en celular quedan más pegadas a los bordes y más chicas) */
.deco--arriba-izq { top: 28px; left: -50px; }
.deco--arriba-der { top: 28px; right: -30px; }
.deco--abajo-izq { bottom: 30px; left: -30px; }
.deco--abajo-der { bottom: 36px; right: -50px; }
.deco--medio-izq { top: 45%; left: 14px; }
.deco--medio-der { top: 38%; right: 16px; }
.deco--titulo-izq { top: 64px; left: 18%; }
.deco--titulo-der { top: 96px; right: 20%; }

@media (max-width: 899px) {
  .deco--anillo {
    width: 110px;
    height: 110px;
  }

  .deco--anillo::after {
    inset: 16px;
  }

  .deco--puntos {
    width: 80px;
    height: 80px;
  }

  .deco--titulo-izq { left: 6%; top: 40px; }
  .deco--titulo-der { right: 6%; top: 70px; }
}

@media (min-width: 900px) {
  .deco--arriba-izq { top: 50px; left: 4%; }
  .deco--arriba-der { top: 50px; right: 5%; }
  .deco--abajo-izq { bottom: 50px; left: 3%; }
  .deco--abajo-der { bottom: 50px; right: 4%; }
  .deco--medio-izq { left: 5%; }
  .deco--medio-der { right: 6%; }
}

/* ----- Barra fija abajo (solo celular): aparece cuando la acción del hero
   (formulario o botones) ya quedó atrás, para volver a ella o llamar sin
   tener que subir. La muestra/oculta main.js ----- */
.barra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background-color: var(--color-fondo-claro-transparente);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -8px 24px rgba(11, 35, 64, 0.16);
  transform: translateY(110%);
  visibility: hidden; /* escondida tampoco se puede alcanzar con el teclado */
  transition: transform 0.3s ease, visibility 0.3s;
}

.barra-fija.is-visible {
  transform: none;
  visibility: visible;
}

/* Botón principal de la barra: azul con letra blanca (va sobre claro) */
.barra-fija__boton {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-radius: 50px;
  background-color: var(--color-texto-primario);
  color: var(--color-fondo-claro);
  font-weight: var(--peso-extrabold);
  font-size: 0.98rem;
  line-height: 1.1;
  text-align: center;
}

.barra-fija__boton svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.barra-fija__boton--whatsapp {
  background-color: var(--color-boton-whatsapp);
}

/* El footer deja lugar a la barra para que no tape el copyright */
.con-barra-fija .footer {
  padding-bottom: 6rem;
}

@media (min-width: 900px) {
  .barra-fija {
    display: none;
  }

  .con-barra-fija .footer {
    padding-bottom: 1.5rem;
  }
}

/* ----- 2. ¿Calificas?: mismo diseño de "Cómo funciona" (pasos__*) con las
   dos líneas de "aplicas / no aplicas" debajo de los recuadros ----- */
#calificas {
  border-top: none; /* sin la línea fina de arriba, junto al hero */
}

.cifras-rapidas__condiciones {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.cifras-rapidas__condicion {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background-color: #fff;
  border: 1px solid var(--color-separador-claro);
  border-radius: 16px;
  font-weight: var(--peso-medium);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-texto-secundario);
}

.cifras-rapidas__condicion strong {
  font-weight: var(--peso-bold);
  color: var(--color-texto-primario);
}

.cifras-rapidas__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
}

.cifras-rapidas__icono img {
  width: 100%;
  height: 100%;
}

/* Círculo rojo con la X: mismo tamaño que el check verde */
.cifras-rapidas__icono--no {
  border-radius: 50%;
  background-color: #d64545;
  color: var(--color-fondo-claro);
}

.cifras-rapidas__icono--no svg {
  width: 13px;
  height: 13px;
}

@media (min-width: 900px) {
  /* Sube junto con los recuadros (la lista va 20px más arriba en escritorio) */
  .cifras-rapidas__condiciones {
    position: relative;
    top: -20px;
    margin-top: 1.75rem;
  }

  .cifras-rapidas__condicion {
    font-size: 0.95rem;
  }
}
/* ----- Cierre de las landings: el panel de Contacto directo va al final,
   después de "Nuestra historia" (que ya trae su propio aire), así que
   arriba va poco: solo lo justo para que la insignia no se corte ----- */
.contacto-exterior--landing {
  padding-top: 1rem;
}

/* Botón verde que vuelve al formulario, dentro del panel oscuro */
.contacto__boton-volver {
  margin-top: 0.5rem;
}

/* Botón de "¿Calificas?" que lleva al formulario: centrado en móvil,
   alineado con los recuadros en escritorio */
.calificas__boton {
  display: block;
  width: fit-content;
  margin: 1.75rem auto 0;
}

@media (min-width: 900px) {
  .calificas__boton {
    position: relative;
    top: -20px; /* sube junto con los recuadros y las condiciones */
    margin-left: 0;
  }
}

/* Formulario de 2 pasos. Colores y tipografía del sitio; sin dorado dentro
   de la tarjeta porque es blanca (regla del dorado) */
.afs-f {
  --afs-navy: var(--color-texto-primario);
  --afs-navy-deep: #061529;
  --afs-ink-soft: var(--color-texto-secundario);
  --afs-green: #1f7a55;
  --afs-green-bg: rgba(31, 122, 85, 0.09);
  --afs-red: #a8122a;
  --afs-red-bg: rgba(168, 18, 42, 0.07);
  --afs-line: rgba(11, 35, 64, 0.14);
  --afs-line-soft: rgba(11, 35, 64, 0.08);

  position: relative;
  display: flex;
  justify-content: center;
  font-family: var(--fuente-principal);
  color: var(--afs-navy);
}

.afs-f__card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--afs-line);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
  padding: clamp(28px, 4vw, 42px);
}

.afs-f__step {
  display: none;
}

.afs-f__step.is-active {
  display: block;
  animation: afs-f-entrada 0.35s ease both;
}

@keyframes afs-f-entrada {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.afs-f__q {
  font-weight: var(--peso-extrabold);
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--afs-navy);
}

.afs-f__q--sm {
  font-size: 1.45rem;
}

.afs-f__back {
  display: block;
  margin: 18px auto 0;
  font-weight: var(--peso-bold);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--afs-ink-soft);
}

.afs-f__back:hover {
  color: var(--afs-navy);
}

.afs-f__field {
  margin-bottom: 18px;
}

.afs-f__field label {
  display: block;
  font-weight: var(--peso-bold);
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--afs-navy);
  margin-bottom: 7px;
}

.afs-f__field label span {
  color: var(--afs-red);
  margin-left: 2px;
}

/* Campos en caja (borde completo y fondo gris muy claro): se reconocen
   al instante como "aquí se escribe". Al enfocarlos: borde azul y fondo blanco */
.afs-f__field input {
  width: 100%;
  border: 1.5px solid var(--afs-line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-weight: var(--peso-medium);
  font-size: 1rem; /* 16px: evita que el iPhone haga zoom al tocar el campo */
  line-height: 1.3;
  color: var(--afs-navy);
  background: #f6f8fb;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.afs-f__field input::placeholder {
  color: #9aa3b5;
}

.afs-f__field input:focus {
  outline: none;
  border-color: var(--afs-navy);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(11, 35, 64, 0.1);
}

/* Celular: la caja completa es el campo, con el +1 adentro a la izquierda */
.afs-f__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  border: 1.5px solid var(--afs-line);
  border-radius: 10px;
  background: #f6f8fb;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.afs-f__phone:focus-within {
  border-color: var(--afs-navy);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(11, 35, 64, 0.1);
}

.afs-f__phone-prefix {
  flex: none;
  padding-right: 8px;
  border-right: 1px solid var(--afs-line);
  font-weight: var(--peso-bold);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--afs-ink-soft);
}

/* El input va sin caja propia (la caja es .afs-f__phone) */
.afs-f__phone input,
.afs-f__phone input:focus {
  border: 0;
  border-radius: 0;
  padding-left: 0;
  background: transparent;
  box-shadow: none;
}

.afs-f__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 18px;
  cursor: pointer;
}

.afs-f__check input {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--afs-navy);
}

.afs-f__check span {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--afs-ink-soft);
}

.afs-f__check a {
  text-decoration: underline;
}

.afs-f__check strong {
  font-weight: var(--peso-bold);
  color: var(--afs-navy);
}

.afs-f__check i {
  font-style: normal;
  color: var(--afs-red);
}

/* Campos que faltan por llenar al intentar enviar */
.afs-f__field.is-invalid input,
.afs-f__field.is-invalid .afs-f__phone {
  border-color: var(--afs-red);
}

.afs-f__check.is-invalid span {
  color: var(--afs-red);
}

.afs-f__submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px 20px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--afs-navy), var(--afs-navy-deep));
  color: #fff;
  font-weight: var(--peso-bold);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 16px 30px -14px rgba(11, 35, 64, 0.5);
  transition: transform 0.12s, box-shadow 0.12s;
}

.afs-f__submit svg {
  width: 20px;
  height: 20px;
}

.afs-f__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 36px -14px rgba(11, 35, 64, 0.55);
}

.afs-f__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.afs-f__error {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--afs-red-bg);
  color: var(--afs-red);
  font-size: 0.9rem;
  font-weight: var(--peso-bold);
}

.afs-f__step--result {
  text-align: center;
  padding: 18px 0 6px;
}

.afs-f__result-ic {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.afs-f__result-ic--no {
  color: var(--afs-red);
  background: var(--afs-red-bg);
}

.afs-f__result-ic svg {
  width: 24px;
  height: 24px;
}

.afs-f__result-text {
  max-width: 38ch;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--afs-ink-soft);
}

.afs-f__result-text strong {
  color: var(--afs-navy);
}

.afs-f__spinner {
  width: 38px;
  height: 38px;
  margin: 8px auto 22px;
  border: 3px solid var(--afs-line-soft);
  border-top-color: var(--afs-navy);
  border-radius: 50%;
  animation: afs-f-giro 0.8s linear infinite;
}

@keyframes afs-f-giro {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  .afs-f__card {
    padding: 26px 22px;
  }
}

/* ----- Formulario destacado: tarjeta blanca sobria (borde gris fino y
   sombra), con un encabezado corto y todos los campos en un solo paso.
   Sin dorado ni brillos: tiene que verse como un formulario, no como un
   elemento gráfico. Va después de los estilos base para ganarles ----- */
.afs-f--destacado .afs-f__card {
  --afs-pad: clamp(24px, 4.5vw, 44px); /* aire interno de la tarjeta */
  max-width: 620px; /* ancho máximo del formulario */
  padding: var(--afs-pad);
  border: 1px solid rgba(11, 35, 64, 0.1);
  border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(6, 21, 43, 0.7);
}

/* Encabezado de la tarjeta: alineado a la izquierda, como un formulario
   normal, y compacto para que los campos queden lo más arriba posible en
   el celular. En "no aplica" y "enviando" se oculta */
.afs-f__encabezado {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--afs-line-soft);
  text-align: left;
}

/* "Te llamamos en 24 horas hábiles", con un reloj, debajo del texto */
.afs-f__tiempo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-weight: var(--peso-bold);
  font-size: 0.85rem;
  color: var(--afs-green);
}

.afs-f__tiempo svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.afs-f__encabezado-titulo {
  margin-bottom: 4px;
  font-weight: var(--peso-extrabold);
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
  line-height: 1.2;
  color: var(--afs-navy);
}

.afs-f__encabezado-texto {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--afs-ink-soft);
}

/* Nombre y apellidos lado a lado (también en celular: son campos cortos) */
.afs-f__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* "Tus datos están seguros" debajo del botón */
.afs-f__seguro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
  color: var(--afs-ink-soft);
}

.afs-f__seguro svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* Dentro del hero: la tarjeta llena su columna y en celular aprovecha
   todo el ancho (menos aire interno) */
.hero-landing .afs-f__card {
  max-width: 540px;
}

/* Más aire dentro del formulario del hero: entre campos, entre el
   encabezado y los campos, y entre la casilla y el botón */
.hero-landing .afs-f__encabezado {
  margin-bottom: 24px;
  padding-bottom: 18px;
}

.hero-landing .afs-f__field {
  margin-bottom: 22px;
}

.hero-landing .afs-f__field label,
.hero-landing .afs-f__monto legend {
  margin-bottom: 9px;
}

.hero-landing .afs-f__opciones {
  gap: 10px;
}

.hero-landing .afs-f__check {
  margin: 24px 0 22px;
}

@media (max-width: 480px) {
  .hero-landing .afs-f--destacado .afs-f__card {
    --afs-pad: 24px 22px;
  }

  .hero-landing .afs-f__field {
    margin-bottom: 20px;
  }

  .hero-landing .afs-f__opciones .afs-f__opcion span {
    font-size: 0.86rem;
  }
}


/* ----- Monto: botones grandes por rango (radios con forma de botón) ----- */
.afs-f__monto {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.afs-f__monto legend {
  padding: 0;
  margin-bottom: 10px;
  font-weight: var(--peso-bold);
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--afs-navy);
}

.afs-f__monto legend span {
  color: var(--afs-red);
  margin-left: 2px;
}

/* Dos columnas también en celular: seis botones en tres filas */
.afs-f__opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.afs-f__opcion {
  position: relative;
  cursor: pointer;
}

/* El círculo del radio no se ve: el botón entero es lo que se toca */
.afs-f__opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
}

/* Con .afs-f__opciones delante para ganarle a ".afs-f__field label span"
   (el asterisco rojo de las etiquetas) */
.afs-f__opciones .afs-f__opcion span {
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 8px;
  background: #f6f8fb; /* mismo fondo y borde que los campos de texto */
  border: 1.5px solid var(--afs-line);
  border-radius: 10px;
  font-weight: var(--peso-bold);
  font-size: 0.92rem;
  line-height: 1.2;
  text-align: center;
  color: var(--afs-navy);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}

.afs-f__opcion:hover span {
  border-color: var(--afs-navy);
}

.afs-f__opcion:active span {
  transform: scale(0.97);
}

/* Elegido: relleno azul con letra blanca */
.afs-f__opcion input:checked + span {
  background: var(--afs-navy);
  border-color: var(--afs-navy);
  color: #fff;
}

/* Anillo de foco visible al moverse con el teclado */
.afs-f__opcion input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(11, 35, 64, 0.25);
}

/* Sin elegir al intentar enviar: borde rojo */
.afs-f__monto.is-invalid .afs-f__opcion span {
  border-color: var(--afs-red);
}

.afs-f__monto.is-invalid legend {
  color: var(--afs-red);
}

.afs-f__monto-aviso {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--afs-red-bg);
  color: var(--afs-red);
  font-weight: var(--peso-bold);
  font-size: 0.88rem;
}

/* Botón Enviar en dorado con letra azul, como el botón de llamada del sitio */
.afs-f--destacado .afs-f__submit {
  background: var(--color-acento-dorado);
  color: var(--color-texto-primario);
  box-shadow: var(--resplandor-dorado);
}

.afs-f--destacado .afs-f__submit:hover {
  box-shadow: 0 14px 32px rgba(247, 201, 106, 0.4);
}

/* "Una ruta clara": en escritorio la imagen va a la izquierda y los
   recuadros a la derecha (al revés que "¿Calificas?", para intercalar) */
@media (min-width: 900px) {
  .pasos__contenido--invertido {
    flex-direction: row-reverse;
  }
}

/* Versión oscura de "¿Calificas?" y "Una ruta clara": fondo azul con foto
   tenue, mismo recurso de "Dos Frentes" */
.pasos--oscuro {
  background-image: linear-gradient(var(--velo-oscuro), var(--velo-oscuro)), url('../img/oficina1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 900px) {
  .pasos--oscuro {
    background-attachment: fixed;
  }
}

/* Sobre el fondo azul, los recuadros azules se perderían: pasan a vidrio
   oscuro con borde dorado (como las tarjetas de "Dos Frentes") */
.pasos--oscuro .pasos__paso {
  background-color: var(--fondo-tarjeta-oscura);
  border: 1px solid rgba(247, 201, 106, 0.55);
  box-shadow: var(--sombra-flotante);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pasos--oscuro .pasos__paso:hover {
  box-shadow: var(--resplandor-dorado);
}

/* Líneas de "aplicas / no aplicas" en vidrio claro sobre el azul */
.pasos--oscuro .cifras-rapidas__condicion {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(252, 252, 253, 0.85);
}

.pasos--oscuro .cifras-rapidas__condicion strong {
  color: var(--color-fondo-claro);
}

/* "Una ruta clara": en vez de la foto, azul oscuro con puntitos blancos y
   los destellos (con-orbes) de Testimonios / Contacto del inicio */
.pasos--oscuro.pasos--puntos {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  background-attachment: scroll;
}

/* ----- Beneficios (fila 2): mismos recuadros escalonados de "Cómo
   funciona", pero con cuatro escalones en vez de tres ----- */
#beneficios {
  border-top: none;
}

#beneficios .pasos__paso {
  padding-top: 1rem;
  min-height: calc(44px + 2rem); /* nunca más bajo que el círculo dorado */
}

#beneficios .pasos__paso:nth-child(1) { margin-left: 0; }
#beneficios .pasos__paso:nth-child(2) { margin-left: 1rem; }
#beneficios .pasos__paso:nth-child(3) { margin-left: 2rem; }
#beneficios .pasos__paso:nth-child(4) { margin-left: 3rem; }

/* Imagen de la mujer con el celular del puntaje: es cuadrada (675x675) y
   ya trae su propio desvanecido abajo */
#beneficios .pasos__imagen {
  aspect-ratio: 1 / 1;
}

@media (min-width: 900px) {
  /* Título más chico que el de "Cómo funciona": este es más largo */
  #beneficios .pasos__columna .bloque__titulo {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
  }

  #beneficios .pasos__paso:nth-child(2) { margin-left: 2rem; }
  #beneficios .pasos__paso:nth-child(3) { margin-left: 4rem; }
  #beneficios .pasos__paso:nth-child(4) { margin-left: 6rem; }
}

/* ----- 4. Testimonios: aquí no hay tarjeta superpuesta arriba, así que
   no hace falta el aire extra del inicio ----- */
.testimonios.testimonios--suelto {
  padding-top: 3rem;
}

@media (min-width: 900px) {
  .testimonios.testimonios--suelto {
    padding-top: 5rem;
  }
}

/* Versión clara: fondo blanco con puntitos azules, y los videos con un
   borde azul oscuro grueso en vez del blanco */
.testimonios.testimonios--claro {
  background-color: var(--color-fondo-claro);
  background-image: radial-gradient(var(--puntos-azules) 1px, transparent 1px);
  background-size: 18px 18px;
}

.testimonios--claro .kicker {
  color: var(--color-texto-secundario);
}

.testimonios--claro .testimonios__titulo {
  color: var(--color-texto-primario);
}

.testimonios--claro .testimonios__tarjeta {
  border-color: var(--color-fondo-oscuro);
  box-shadow: var(--sombra-suave-hover);
}

.testimonios--claro .testimonios__tarjeta:hover {
  box-shadow: var(--sombra-flotante);
}

/* Flechas del carrusel en azul (el dorado no va sobre claro) */
.testimonios--claro .testimonios__flecha {
  border-color: var(--color-texto-primario);
  color: var(--color-texto-primario);
}

.testimonios--claro .testimonios__flecha:hover {
  background-color: var(--color-texto-primario);
  color: var(--color-fondo-claro);
}

/* ===== Página independiente de Testimonios: hero propio + tarjetas tipo
   "collage" con los videos reales + franja de cifras reales ===== */

/* ----- Hero: texto + ilustración, fondo azul con puntitos y destello
   dorado en la esquina (mismo recurso que el resto del sitio) ----- */
/* Foto muy atenuada por un velo azul (--velo-oscuro en base.css), mismo
   recurso que "Diagnóstico Antes Que Producto" y "Trabajamos en Dos
   Frentes". Para cambiar la foto, cambia solo el nombre del archivo */
.testimonios-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-fondo-oscuro);
  background-image: linear-gradient(var(--velo-oscuro), var(--velo-oscuro)), url('../img/fondotestimonios.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Último valor = aire abajo, también en móvil: en 0 la foto llega hasta el
     borde de abajo del azul, en vez de dejar una franja de azul vacía */
  padding: calc(var(--altura-header) + var(--separacion-header) * 2 + 2rem) 1.25rem 0;
}

.testimonios-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -180px;
  left: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.28) 0%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}

.testimonios-hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.testimonios-hero__texto {
  position: relative;
  top: 0px; /* negativo = sube, positivo = baja (en móvil) */
  max-width: 560px;
}

.testimonios-hero__titulo {
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--color-fondo-claro);
  margin: 0 0 1rem;
}

/* El dorado en el título solo va permitido sobre fondo oscuro (ver
   CLAUDE.md); .texto-dorado por sí solo solo aplica dentro de .bloque--oscuro */
.testimonios-hero .texto-dorado {
  color: var(--color-acento-dorado);
}

.testimonios-hero__subtitulo {
  font-weight: var(--peso-medium);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(252, 252, 253, 0.85);
}

.testimonios-hero__media {
  width: 100%;
  max-width: 320px;
}

.testimonios-hero__imagen {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  /* Sección más angosta: menos aire arriba, y sin aire abajo (ya estaba) */
  .testimonios-hero {
    padding-top: calc(var(--altura-header) + var(--separacion-header) * 2);
    padding-bottom: 0;
  }

  .testimonios-hero__grid {
    flex-direction: row;
    /* flex-start en vez de center: el texto arranca a la misma altura que
       la cabeza de la foto, no centrado respecto a toda su altura */
    align-items: flex-start;
    text-align: left;
    gap: 3rem;
  }

  .testimonios-hero__texto {
    top: 40px; /* solo escritorio: negativo = sube, positivo = baja */
  }

  .testimonios-hero__titulo {
    font-size: 2.75rem;
  }

  .testimonios-hero__media {
    flex: none;
    max-width: 400px;
    /* Alto fijo: recorta la foto por abajo para que la sección sea más
       angosta. Súbelo para que se vea más foto, bájalo para recortar más */
    height: 320px;
  }

  .testimonios-hero__media .testimonios-hero__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* "top": conserva la parte de arriba (la cara) y recorta por abajo */
    object-position: top;
  }
}

/* ----- Tarjetas: formato horizontal (portada del video a la izquierda,
   cita entre comillas y estrellas a la derecha), con los 5 videos reales.
   El propio orden del grid arma la distribución pedida: 2 arriba, 2 en
   medio y 1 centrada abajo, sin tener que reordenar nada a mano.
   Reutiliza .testimonios__video-marco / __video / __play, que no dependen
   del carrusel ----- */
#testimonios {
  position: relative;
  overflow: hidden;
  /* Justo antes va el hero, que ya queda sin aire propio abajo: se recorta
     el padding de arriba y se quita el borde para que no se sienta un
     salto de espacio en blanco justo después del hero */
  padding-top: 2rem;
  /* Justo después va Contacto directo. OJO: este padding tiene que ser
     mayor al desvanecido de la sombra de los recuadros (--sombra-suave
     necesita unos 35px) porque la sección recorta con overflow:hidden (para
     contener el destello/puntitos) - con menos espacio, la sombra se corta
     a la mitad y se ve como una línea en vez de desvanecerse */
  padding-bottom: 2.5rem;
  border-top: none;
  /* Puntitos azules (mismo patrón ya usado en otras secciones claras del
     sitio) + un par de manchas de color para que el blanco no se vea tan
     plano, siempre de fondo y muy tenue para no competir con las tarjetas */
  background-image: radial-gradient(var(--puntos-azules) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* El fondo con puntitos de los testimonios sigue hasta el panel de
   Contacto directo, para que no quede un tramo plano entre los recuadros
   de cifras y el panel oscuro (acotado a esta página) */
#testimonios + .contacto-exterior {
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(var(--puntos-azules) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Escritorio: un poco más de separación entre los recuadros de cifras y el
   panel de Contacto directo. Súbelo para separarlos más, bájalo para
   acercarlos */
@media (min-width: 900px) {
  #testimonios + .contacto-exterior {
    padding-top: 1rem;
  }
}

/* La insignia flotante asoma 14px por encima del panel (ver su regla
   original); con el overflow:hidden de arriba (necesario para que el
   destello no se cuele sobre la sección anterior) ese sobresalto quedaría
   recortado, así que acá se ajusta a 0 */
#testimonios + .contacto-exterior .contacto__insignia {
  top: 0;
}

/* Personaje que señala hacia los recuadros de cifras, a la derecha del
   grupo (a la altura de la 2da/3ra tarjeta). Solo en móvil: en escritorio
   los tres recuadros van en fila y no queda espacio libre a un lado */
.testimonios-stats__personaje {
  position: absolute;
  z-index: 2;
  top: 80px; /* altura: sube/baja la imagen */
  right: -3rem; /* qué tan separada queda del borde derecho */
  width: 180px; /* tamaño de la imagen */
  pointer-events: none;
  filter: drop-shadow(var(--sombra-suave));
}

@media (min-width: 640px) {
  .testimonios-stats__personaje {
    display: none;
  }
}

#testimonios::before,
#testimonios::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

#testimonios::before {
  width: 380px;
  height: 380px;
  top: -130px;
  left: -120px;
  background: radial-gradient(circle, rgba(11, 35, 64, 0.14) 0%, transparent 70%);
}

#testimonios::after {
  width: 460px;
  height: 460px;
  bottom: -180px;
  right: -150px;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.22) 0%, transparent 70%);
}

/* Continúa exactamente el mismo círculo del destello de arriba (mismo
   tamaño, posición y color), para que no se vea una línea cortada justo en
   el borde entre las dos secciones */
#testimonios + .contacto-exterior::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 460px;
  height: 460px;
  top: -280px;
  right: -150px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.22) 0%, transparent 70%);
}

.testimonios-grid {
  /* Ancho fijo de tarjeta: se calcula para 3 por fila y se reutiliza tal
     cual en la fila de 2, así todas las tarjetas quedan del mismo tamaño
     sin importar cuántas haya en su fila. Se amplía un poco el contenedor
     (de 980px a 1080px) para que no queden demasiado angostas */
  --ancho-tarjeta: calc((1080px - 2 * 1.5rem) / 3);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 1080px;
  margin: 2.5rem auto 0;
}

/* Dos filas separadas: tres tarjetas arriba, dos abajo, ambas centradas */
.testimonios-grid__fila {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .testimonios-grid__fila {
    flex-direction: row;
    justify-content: center;
  }

  .testimonios-grid__fila .testimonios-grid__tarjeta {
    flex: 0 0 var(--ancho-tarjeta);
    max-width: var(--ancho-tarjeta);
  }
}

.testimonios-grid__tarjeta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  background-color: var(--color-fondo-claro);
  border: 1px solid var(--color-separador-claro);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  /* opacity se repite para no perder el desvanecido de .reveal */
  transition: opacity 0.7s ease, transform 0.35s ease, box-shadow 0.25s ease;
}

.testimonios-grid__tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-suave-hover);
}

/* Video en formato vertical (4/5), no un recuadro chico: le da presencia
   propia a la tarjeta en vez de quedar como un ícono pequeño */
.testimonios-grid__tarjeta .testimonios__video-marco {
  flex: none;
  width: 42%;
  aspect-ratio: 4 / 5;
}

.testimonios-grid__cuerpo {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.3rem 1.15rem;
}

/* Comillas grandes decorativas, como en la referencia del cliente */
.testimonios-grid__comillas {
  position: absolute;
  top: 0.3rem;
  right: 1rem;
  font-size: 2.75rem;
  line-height: 1;
  font-weight: var(--peso-extrabold);
  color: var(--color-acento-dorado);
  opacity: 0.5;
}

.testimonios-grid__frase {
  font-weight: var(--peso-bold);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-texto-primario);
  padding-right: 1.25rem;
}

/* Estrellas decorativas: refuerzan la confianza sin indicar una calificación
   individual verificada (la cifra real y auditable es la de 4.9/5 en la
   franja de abajo) */
.testimonios-grid__estrellas {
  margin-top: 0.65rem;
  color: var(--color-acento-dorado);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
}

.testimonios-grid__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.85rem;
  font-weight: var(--peso-bold);
  font-size: 0.78rem;
  color: var(--color-texto-secundario);
}

.testimonios-grid__etiqueta-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--color-fondo-oscuro);
  color: var(--color-acento-dorado);
}

.testimonios-grid__etiqueta-icono svg {
  width: 14px;
  height: 14px;
}

/* ----- Cifras reales (no inventadas): recuadros al final de la sección de
   testimonios (ya no es una franja aparte), con el mismo lenguaje de
   tarjetas que el resto de la página. Los números se animan al entrar en
   pantalla (ver [data-contador] en js/main.js) ----- */
.testimonios-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 1080px;
  margin: 0.75rem auto 0;
}

@media (min-width: 640px) {
  .testimonios-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonios-stats__tarjeta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  background-color: var(--color-fondo-oscuro);
  border: none;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
  transition: transform 0.3s ease, box-shadow 0.25s ease;
}

.testimonios-stats__tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-suave-hover);
}

/* En la tarjeta oscura el ícono pasa a círculo dorado con trazo oscuro,
   invertido respecto al resto de la página, para que no se pierda contra
   el mismo fondo oscuro de la tarjeta. Va antes de .testimonios-stats__tarjeta--destacada
   para que esa variante pueda pisarla (mismo nivel de especificidad: gana
   la que está declarada después) */
.testimonios-stats__tarjeta .testimonios-stats__icono {
  background-color: var(--color-acento-dorado);
  color: var(--color-fondo-oscuro);
}

.testimonios-stats__tarjeta .testimonios-stats__numero {
  color: var(--color-acento-dorado);
}

.testimonios-stats__tarjeta .testimonios-stats__etiqueta {
  color: rgba(252, 252, 253, 0.75);
}

/* Recuadro destacado ("Clientes atendidos"): mismo tamaño que los otros
   dos, solo cambia el color a dorado. Texto e ícono en azul, ya que el
   dorado va como fondo, no como texto/ícono. Late suave, solo en móvil
   (reutiliza la misma animación que el botón del hero de "Nuestro Programa") */
.testimonios-stats__tarjeta--destacada {
  background-color: var(--color-acento-dorado);
}

.testimonios-stats__tarjeta--destacada .testimonios-stats__icono {
  background-color: var(--color-fondo-oscuro);
  color: var(--color-fondo-claro);
}

.testimonios-stats__tarjeta--destacada .testimonios-stats__numero,
.testimonios-stats__tarjeta--destacada .testimonios-stats__etiqueta {
  color: var(--color-texto-primario);
}

/* En móvil el recuadro se ajusta al ancho de su contenido (no estira hasta
   el borde) y los tres quedan centrados, con una línea fina atravesándolos
   por el medio: como las tarjetas son opacas, la línea solo se nota en los
   espacios entre ellas, dando el efecto de que las conecta */
@media (max-width: 639px) {
  .testimonios-stats {
    position: relative;
    /* Columna del ancho del contenido más ancho (en vez de 1fr, que ocupa
       todo el ancho): así las tres tarjetas, al compartir la misma columna,
       quedan con el mismo ancho que la más ancha de las tres */
    grid-template-columns: max-content;
    justify-content: center;
    /* MOVER el grupo de izquierda a derecha: 0px = centrado.
       Negativo = mueve todo el grupo a la izquierda.
       Positivo = mueve todo el grupo a la derecha. */
    left: -60px;
    /* MOVER el grupo de arriba a abajo: 0px = posición actual.
       Negativo = sube el grupo. Positivo = baja el grupo. */
    top: -30px;
    /* TAMAÑO total del grupo (los tres recuadros juntos, con todo y línea):
       1 = tamaño actual. Más de 1 = más grande. Menos de 1 = más chico.
       Ejemplo: 1.15 agranda un 15%, 0.9 achica un 10% */
    transform: scale(2);
  }

  .testimonios-stats::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: var(--color-acento-dorado);
    opacity: 0.5;
  }

  .testimonios-stats__tarjeta {
    position: relative;
    z-index: 1;
  }

  .testimonios-stats__tarjeta--destacada {
    animation: latido-suave 2.2s ease-in-out infinite;
  }
}

.testimonios-stats__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-fondo-oscuro);
  color: var(--color-acento-dorado);
}

.testimonios-stats__icono svg {
  width: 19px;
  height: 19px;
}

.testimonios-stats__numero {
  display: block;
  font-family: var(--fuente-principal);
  font-weight: var(--peso-extrabold);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--color-texto-primario);
}

.testimonios-stats__etiqueta {
  display: block;
  font-weight: var(--peso-medium);
  font-size: 0.78rem;
  color: var(--color-texto-secundario);
}

/* ----- 5. Una ruta clara: va justo antes de "Nuestra historia"; abajo
   necesita aire extra porque la foto flotante de la historia sube y se
   monta sobre ella (igual que sobre el hero en Quiénes Somos) ----- */
@media (min-width: 900px) {
  #ruta-clara {
    padding-bottom: 17.5rem;
  }
}

@media (min-width: 1024px) {
  #ruta-clara {
    padding-bottom: 14rem;
  }
}

/* ----- 6. Nuestra historia: es la última sección, un poco más de aire
   antes del footer ----- */
@media (min-width: 900px) {
  #nuestra-historia.historia--cierre {
    padding-bottom: 5rem;
  }
}

/* ===== Página de Ubicación (ubicacion.html) ===== */

/* ----- Fondo blanco continuo con puntitos (cubre todo, del título hasta
   el panel de contacto, sin franjas, igual que en Preguntas Frecuentes) +
   dos destellos tenues en esquinas opuestas para que no se vea tan plano.
   Sin overflow:hidden (igual que .faq-fondo): si lo tuviera, recortaría la
   sombra del panel de Contacto directo que va al final (ver el problema
   que esto mismo causó en Testimonios). Por eso los destellos van sin
   bordes negativos en los lados que podrían generar scroll horizontal */
.ubicacion-fondo {
  position: relative;
  /* Prueba: fondo azul oscuro en vez de blanco */
  background-color: var(--color-fondo-oscuro);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}

.ubicacion-fondo::before,
.ubicacion-fondo::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

/* Esquina superior izquierda */
.ubicacion-fondo::before {
  width: 420px;
  height: 420px;
  top: -80px;
  left: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 70%);
}

/* Esquina inferior derecha (contenido del todo adentro, para no asomarse
   sobre el pie de página) */
.ubicacion-fondo::after {
  width: 460px;
  height: 460px;
  bottom: 0;
  right: 0;
  background: radial-gradient(circle, rgba(247, 201, 106, 0.2) 0%, transparent 70%);
}

.ubicacion-fondo .bloque {
  position: relative;
  z-index: 1;
  background-color: transparent;
  border-top: none;
}

/* Línea divisoria corta y centrada, justo en el borde azul (el dorado va
   sobre fondo oscuro, nunca sobre el panel blanco que viene después) */
#ubicacion {
  position: relative;
}

#ubicacion::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 90px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--color-acento-dorado);
}

/* El panel de Contacto directo queda blanco con puntitos, aunque el resto
   de la página esté en azul */
.ubicacion-fondo .contacto-exterior {
  position: relative;
  z-index: 1;
  background-color: var(--color-fondo-claro);
  background-image: radial-gradient(var(--puntos-azules) 1px, transparent 1px);
  background-size: 18px 18px;
  border-top: none;
  /* Aire blanco extra arriba, antes de que empiece el recuadro oscuro */
  padding-top: 3rem;
}

/* La insignia del avioncito estaba pensada para asomarse justo encima del
   recuadro oscuro; como ahora ese recuadro bajó (padding-top de arriba),
   hay que bajarla la misma distancia para que siga pegada a su esquina */
.ubicacion-fondo .contacto__insignia {
  top: 34px;
}

/* ----- 1. Encabezado compacto, directo sobre el fondo claro (sin hero
   aparte): título + bullets ----- */
.ubicacion-fondo .hero-pagina {
  position: relative;
  z-index: 1;
  background-color: transparent;
  padding-top: calc(var(--altura-header) + var(--separacion-header) * 2 + 0.5rem);
  padding-bottom: 1.5rem;
}

.ubicacion-fondo .hero-pagina__titulo {
  color: var(--color-fondo-claro);
}

.ubicacion-fondo .hero-pagina__texto {
  color: rgba(252, 252, 253, 0.85);
}

#hero-ubicacion .kicker {
  color: var(--color-acento-dorado);
}

#hero-ubicacion .kicker svg {
  width: 16px;
  height: 16px;
}

/* Fila compacta de bullets, debajo del texto de intro */
.ubicacion-bullets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-top: 1.5rem;
}

.ubicacion-bullets__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--peso-bold);
  font-size: 0.85rem;
  color: var(--color-texto-primario);
  background-color: var(--color-fondo-claro);
  border: 1px solid var(--color-separador-claro);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  box-shadow: var(--sombra-suave);
}

.ubicacion-bullets__item svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--color-texto-secundario);
}

@media (min-width: 768px) {
  #hero-ubicacion .hero-pagina__contenedor {
    max-width: 640px;
  }
}

/* ----- 2. Dónde Estamos: tarjeta con los datos de la oficina + mapa ----- */
#ubicacion {
  padding-top: 0;
}

.ubicacion-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

.ubicacion-info__tarjeta {
  display: flex;
  flex-direction: column;
  background-color: var(--color-fondo-claro);
  border: 1px solid var(--color-separador-claro);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
  padding: 1.25rem 1.75rem;
}

.ubicacion-info__etiqueta {
  display: inline-block;
  width: fit-content;
  font-weight: var(--peso-bold);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-primario);
  background-color: var(--color-acento-dorado);
  border-radius: 50px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.75rem;
  /* Posición: ajustan el recuadro "MIAMI FLORIDA" desde donde está ahora.
     Negativo en top = sube, positivo = baja.
     Negativo en left = izquierda, positivo = derecha. */
  position: relative;
  top: 0px;
  left: 0px;
  /* Tamaño del recuadro completo: 1 = tamaño actual, más de 1 = más
     grande, menos de 1 = más chico (ej: 1.15, 0.9). El valor de acá es el
     de escritorio; el de móvil está más abajo, en el media query */
  transform: scale(1);
}

.ubicacion-info__nombre {
  font-weight: var(--peso-extrabold);
  font-size: 1.4rem;
  color: var(--color-texto-primario);
  margin: 0 0 1.5rem;
}

.ubicacion-info__dato {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-separador-claro);
  font-weight: var(--peso-medium);
  font-size: 0.95rem;
  color: var(--color-texto-secundario);
}

.ubicacion-info__dato strong {
  font-weight: var(--peso-bold);
  color: var(--color-texto-primario);
  white-space: nowrap;
}

/* Fila del teléfono: ícono y texto a la izquierda igual que las otras,
   pero centrados en vertical entre sí (al ser una sola línea, con
   align-items: flex-start se veía desalineada contra el ícono) */
.ubicacion-info__dato--telefono {
  align-items: center;
}

/* Ícono del teléfono en verde (el mismo verde de WhatsApp), en vez del
   círculo azul oscuro que usan los otros dos datos. Doble clase para
   ganarle a .ubicacion-info__dato-icono sin importar el orden */
.ubicacion-info__dato-icono.ubicacion-info__dato-icono--verde {
  background-color: var(--color-boton-whatsapp);
  color: var(--color-fondo-claro);
}

.ubicacion-info__dato a {
  color: var(--color-texto-secundario);
}

.ubicacion-info__dato-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-fondo-oscuro);
  color: var(--color-acento-dorado);
  margin-top: 0.1rem;
}

.ubicacion-info__dato-icono svg {
  width: 17px;
  height: 17px;
}

.ubicacion-info__boton {
  margin: 0.75rem 0 0;
}

/* Solo en móvil/tablet: la etiqueta "Miami Florida" y el botón "Cómo
   llegar" quedan centrados dentro de la tarjeta (el resto sigue a la
   izquierda) */
@media (max-width: 899px) {
  .ubicacion-info__etiqueta {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Tamaño solo en móvil (pisa el scale(1) de escritorio) */
    transform: scale(1.3);
  }

  .ubicacion-info__boton {
    margin-left: auto;
    margin-right: auto;
  }
}

.ubicacion-info__mapa {
  min-height: 320px;
  border-radius: var(--radio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

.ubicacion-info__mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

@media (min-width: 900px) {
  .ubicacion-info__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* ===== Página de gracias (gracias.html) =====
   Fondo azul con la foto tenue de la oficina (mismo recurso de "Dos
   Frentes") y una tarjeta clara al centro, con borde dorado como el
   formulario, para que se sienta la continuación de lo que se envió */
.gracias {
  /* Sin alto de pantalla completa: debajo vienen testimonios y ubicación,
     y conviene que se note que hay más para ver */
  display: flex;
  flex-direction: column; /* imagen arriba, tarjeta abajo */
  align-items: center;
  justify-content: center;
  /* El padding-top reserva el espacio del header flotante */
  padding: calc(var(--altura-header) + var(--separacion-header) * 2 + 1.5rem) 1.25rem 4rem;
  background-color: var(--color-fondo-oscuro);
  background-image: linear-gradient(var(--velo-oscuro), var(--velo-oscuro)), url('../img/oficina1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gracias__tarjeta {
  position: relative; /* el check de arriba se ubica respecto a la tarjeta */
  width: 100%;
  max-width: 640px;
  padding: 4rem 1.5rem 2.25rem; /* arriba deja lugar a la parte de la imagen que se monta */
  text-align: center;
  background-color: var(--color-fondo-claro);
  border: 2px solid var(--color-acento-dorado);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-flotante);
}

/* Imagen de arriba: su parte baja (que ya se desvanece) se monta sobre el
   borde de la tarjeta. El margin-bottom negativo es cuánto se monta */
.gracias__imagen {
  z-index: 2; /* por encima de la tarjeta */
  width: 230px; /* tamaño de la imagen en móvil */
  max-width: 70%;
  height: auto;
  margin-bottom: -48px;
  filter: drop-shadow(0 18px 30px rgba(6, 21, 43, 0.35));
}

@media (min-width: 768px) {
  .gracias__imagen {
    width: 290px; /* tamaño de la imagen en escritorio */
    margin-bottom: -60px;
  }
}

/* Kicker sobre la tarjeta clara: sin dorado */
.gracias .kicker {
  color: var(--color-texto-secundario);
}

.gracias__titulo {
  margin-bottom: 0.75rem;
  font-weight: var(--peso-extrabold);
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--color-texto-primario);
}

.gracias__texto {
  max-width: 460px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-texto-secundario);
}

.gracias__texto strong {
  font-weight: var(--peso-bold);
  color: var(--color-texto-primario);
}

/* Aviso "¿Qué sigue?": recuadro azul muy claro con tres pasos numerados */
.gracias__aviso {
  margin: 1.5rem auto 0;
  max-width: 500px;
  padding: 1.1rem 1.25rem;
  text-align: left;
  background-color: rgba(11, 35, 64, 0.05);
  border: 1px solid var(--color-separador-claro);
  border-left: 4px solid var(--color-texto-primario);
  border-radius: 14px;
}

.gracias__aviso-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-weight: var(--peso-extrabold);
  font-size: 1rem;
  color: var(--color-texto-primario);
}

.gracias__aviso-titulo svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.gracias__aviso-lista {
  display: grid;
  gap: 0.65rem;
}

.gracias__aviso-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-texto-secundario);
}

.gracias__aviso-lista strong {
  font-weight: var(--peso-bold);
  color: var(--color-texto-primario);
}

/* Número del paso en un círculo azul */
.gracias__aviso-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--color-texto-primario);
  color: var(--color-fondo-claro);
  font-weight: var(--peso-extrabold);
  font-size: 0.72rem;
}

.gracias__divisor {
  width: 64px;
  height: 3px;
  margin: 1.75rem auto;
  border-radius: 3px;
  background-color: var(--color-separador-claro);
}

.gracias__pregunta {
  margin-bottom: 0.35rem;
  font-weight: var(--peso-extrabold);
  font-size: 1.15rem;
  color: var(--color-texto-primario);
}

.gracias__apoyo {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-texto-secundario);
}

/* Los botones son los mismos de Contacto directo; sobre la tarjeta clara
   el de llamar lleva una sombra para que no se pierda */
.gracias__botones .contacto__boton-llamada {
  box-shadow: var(--resplandor-dorado);
}

.gracias__volver {
  display: inline-block;
  margin-top: 1.75rem;
  font-weight: var(--peso-bold);
  font-size: 0.95rem;
  color: var(--color-texto-secundario);
  text-decoration: underline;
}

.gracias__volver:hover {
  color: var(--color-texto-primario);
}

@media (min-width: 768px) {
  .gracias__tarjeta {
    padding: 4.75rem 3rem 2.5rem;
  }

  .gracias__titulo {
    font-size: 2.6rem;
  }
}

/* ----- Gracias: ubicación de la oficina. Fondo claro; en celular foto,
   datos y mapa uno debajo del otro; en escritorio datos + foto a la
   izquierda y el mapa a la derecha ----- */
.visitanos {
  padding: 3rem 1.25rem;
  background-color: var(--color-fondo-claro);
  border-top: 1px solid var(--color-separador-claro);
}

.visitanos__grid {
  display: grid;
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

.visitanos__info {
  text-align: center;
}

.visitanos .kicker {
  color: var(--color-texto-secundario);
}

.visitanos__titulo {
  margin-bottom: 0.75rem;
  font-weight: var(--peso-extrabold);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--color-texto-primario);
}

.visitanos__texto {
  max-width: 460px;
  margin: 0 auto 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto-secundario);
}

/* Dirección con un pin, en recuadro claro */
.visitanos__direccion {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 420px;
  margin: 0 auto 1.25rem;
  padding: 0.9rem 1.1rem;
  text-align: left;
  background-color: #fff;
  border: 1px solid var(--color-separador-claro);
  border-radius: 16px;
  font-style: normal;
  font-weight: var(--peso-bold);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-texto-primario);
  box-shadow: var(--sombra-suave);
}

.visitanos__direccion svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

/* Botón "Cómo llegar": azul con letra blanca (va sobre claro, sin dorado) */
.visitanos__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 50px;
  background-color: var(--color-texto-primario);
  color: var(--color-fondo-claro);
  font-weight: var(--peso-bold);
  font-size: 0.98rem;
}

.visitanos__boton svg {
  width: 18px;
  height: 18px;
}

.visitanos__boton:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave-hover);
}

/* Foto real de la oficina */
.visitanos__foto {
  display: block;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  margin: 1.75rem auto 0;
  object-fit: cover;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave-hover);
}

.visitanos__mapa iframe {
  height: 280px;
}

@media (min-width: 900px) {
  .visitanos {
    padding: 5rem 2rem;
  }

  .visitanos__grid {
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 3.5rem;
  }

  .visitanos__info {
    text-align: left;
  }

  .visitanos__titulo {
    font-size: 2.2rem;
  }

  .visitanos__texto,
  .visitanos__direccion {
    margin-left: 0;
  }

  .visitanos__foto {
    margin-left: 0;
  }

  .visitanos__mapa iframe {
    height: 460px;
  }
}

/* ----- Gracias: testimonios (versión clara de la landing), con un poco
   menos de aire arriba porque vienen justo después de la tarjeta ----- */
.gracias ~ .testimonios {
  padding-bottom: 3rem;
}

@media (min-width: 900px) {
  .gracias ~ .testimonios {
    padding-bottom: 5rem;
  }
}