/* ==========================================================================
   Visitapro — Secciones
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 100%);
}

.hero__stage {
  position: relative;
  padding-top: calc(var(--header-height) + var(--space-8));
  padding-bottom: var(--space-6);
  overflow: hidden;
  /* Sin esto, un swipe horizontal en touch puede quedar "atrapado" por el
     navegador como gesto de scroll vertical (o cancelado a mitad de camino)
     y el pointerup del slider nunca llega a dispararse — deslizar el dedo
     no cambiaba de slide en mobile. pan-y deja que el scroll vertical nativo
     siga funcionando normal, pero libera el eje horizontal para el JS. */
  touch-action: pan-y;
}

/* En pantallas muy anchas, la sección se topeaba y quedaba descentrada:
   el texto se centraba dentro de un container de 1200px mientras la foto
   sangraba hasta el borde real del viewport, dejando un hueco enorme a la
   izquierda y ningún margen a la derecha. Al limitar y centrar el stage
   completo, ambos lados quedan simétricos en monitores anchos; por debajo
   de este ancho no cambia nada (el stage ya ocupaba todo el viewport). */
@media (min-width: 960px) {
  .hero__stage {
    max-width: 1600px;
    margin-inline: auto;
  }
}

/* Blob de fondo muy suave — sensación de profundidad tipo Stripe/Linear,
   sin ilustraciones ni patrones invasivos. Solo el de la izquierda queda
   visible: el de la derecha lo tapa la foto a partir de 960px. */
.hero__stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  width: 480px;
  height: 480px;
  left: -160px;
  bottom: -220px;
  background: radial-gradient(circle, var(--blue-400) 0%, rgba(79, 176, 232, 0) 70%);
  opacity: 0.18;
}

/* Foto del hero — bleed a todo el borde derecho del navegador para que
   tenga más presencia visual que el bloque de texto. En mobile pasa a ser
   una tarjeta normal, de ancho completo, arriba del texto. */
.hero__photo-stage {
  position: relative;
  z-index: 0;
  width: 100%;
  /* 3/2 (~1536x1024) matches las fotos reales del hero mucho mejor que el
     4/3 anterior — con object-fit:cover, cuanto más cerca esté el box de
     la proporción real de la foto, menos se nota el recorte. */
  aspect-ratio: 3 / 2;
  /* Radio más chico que antes (era --radius-xl, 28px) — puntas menos
     redondeadas en mobile, pedido explícito. El desktop sigue en 32px,
     sin cambios (ver el override de abajo). */
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: var(--space-4);
}

@media (max-width: 959px) {
  .hero__photo-stage {
    /* Sombra interior muy sutil en vez de puntas grandes redondeadas para
       "suavizar" el borde — look premium sin que se vea "app icon". */
    box-shadow: inset 0 0 0 1px rgba(20, 41, 67, 0.06), inset 0 -22px 36px -26px rgba(20, 41, 67, 0.22);
  }
}

.hero__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out-expo);
  transform-origin: center;
}

.hero__photo.is-active {
  opacity: 1;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  /* cover: la foto llena el box por completo (sin huecos ni "aire", borde
     derecho parejo con el fundido) — un intento anterior de mostrarla
     completa con "contain" dejaba franjas vacías porque el box no tiene
     la misma relación de aspecto que las fotos. Para minimizar el recorte
     de "cover" sin reintroducir ese hueco, el aspect-ratio del box mobile
     se ajustó más abajo para acercarse al de las fotos reales (~3/2). */
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

.hero__photo--contain img {
  object-fit: contain;
  background: var(--blue-50);
}

.hero__photo-fade {
  display: none;
}

@media (min-width: 960px) {
  .hero__photo-stage {
    position: absolute;
    top: var(--space-6);
    right: var(--space-4);
    bottom: var(--space-6);
    left: auto;
    width: 52%;
    aspect-ratio: auto;
    margin-bottom: 0;
    border-radius: 32px;
  }

  .hero__photo-fade {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Suavizado otra vez (era 0.62 de pico) — se estaba "quemando"/lavando
       el borde izquierdo de la foto y se perdía imagen ahí. */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 14%, rgba(255, 255, 255, 0.07) 26%, rgba(255, 255, 255, 0) 40%);
    pointer-events: none;
  }

  /* Desktop: mostrar la foto completa sin recortar (contain, no cover).
     El box de bleed no tiene una relación de aspecto fija acá (depende de
     la altura del texto), así que puede quedar una franja del color de
     fondo a los costados — se acepta ese trade-off a cambio de nunca
     recortar la imagen. */
  .hero__photo img {
    object-fit: contain;
    background: var(--blue-50);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 960px) {
  .hero__inner {
    display: block;
    /* El texto usaba el .container genérico (max-width 1200 + auto-margin),
       lo que lo centraba con un margen propio distinto al de la foto y
       acentuaba la asimetría. Al quitarle ese centrado queda pegado al
       borde izquierdo del stage (ya limitado/centrado arriba), igual que
       la foto queda pegada al borde derecho. */
    max-width: none;
    margin-inline: 0;
  }
}

.hero__title {
  font-size: var(--text-2xl);
  color: var(--navy-900);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: var(--weight-extrabold);
}

.hero__title em {
  font-style: normal;
  color: var(--blue-600);
}

.hero__subtitle {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* Hero entrance sequence — oculto solo si el JS confirmó que va a animar
   (clase .hero-js agregada de forma síncrona); sin JS, el hero es visible.
   El paso 1 (título/bajada/bullets/botones) ya no usa este fade genérico:
   tiene su propia secuencia cinematográfica más abajo (.hero-intro). Esto
   solo cubre los dots (paso 2) y la franja de highlights (paso 3). */
.hero.hero-js [data-hero-step="2"],
.hero.hero-js [data-hero-step="3"] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

.hero.is-ready [data-hero-step="2"],
.hero.is-ready [data-hero-step="3"] {
  opacity: 1;
  transform: none;
}

.hero.is-ready [data-hero-step="2"] { transition-delay: 480ms; }
.hero.is-ready [data-hero-step="3"] { transition-delay: 950ms; }

/* ---------------------------------------------------------------------------
   Hero intro cinematográfico (una sola vez, al cargar la página)
   ------------------------------------------------------------------------
   Se activa con dos clases que el JS agrega y luego retira sobre .hero:
     .hero-intro            -> estado oculto/inicial (agregada en sync)
     .hero-intro.is-playing -> dispara la transición al estado final
   Ambas clases se remueven al terminar la secuencia (~2s), así las
   rotaciones posteriores del slider vuelven a usar su propia transición
   (más simple, ver más abajo ".hero-slide.is-active") en vez de repetir
   este efecto en cada cambio de slide. Igual que el resto del hero: el
   estado por defecto (sin .hero-intro) es siempre visible/sin transformar,
   para que si el JS no corre nunca quede nada oculto. */

.hero.hero-intro .hero__photo-stage {
  filter: brightness(0);
}

.hero.hero-intro.is-playing .hero__photo-stage {
  filter: brightness(1);
  transition: filter 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.hero-intro .hero__photo {
  transform: scale(1.04);
}

.hero.hero-intro.is-playing .hero__photo {
  transform: scale(1);
  transition: transform 1800ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--duration-slow) var(--ease-out-expo);
}

.hero.hero-intro .hero__photo-fade {
  opacity: 0;
}

.hero.hero-intro.is-playing .hero__photo-fade {
  opacity: 1;
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.hero.hero-intro [data-hero-step="1"] .hero-arg-badge {
  opacity: 0;
  transform: translateY(10px);
}

.hero.hero-intro.is-playing [data-hero-step="1"] .hero-arg-badge {
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 150ms,
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 150ms;
}

.hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero__title {
  opacity: 0;
  transform: translateX(-80px);
  filter: blur(6px);
}

.hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero__title {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1) 300ms,
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1) 300ms,
    filter 750ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero__subtitle {
  opacity: 0;
  transform: translateX(70px);
}

.hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero__subtitle {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 520ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 520ms;
}

.hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero-slide__list li {
  opacity: 0;
  transform: translateY(14px);
}

.hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__list li {
  opacity: 1;
  transform: none;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__list li:nth-child(1) { transition-delay: 560ms; }
.hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__list li:nth-child(2) { transition-delay: 610ms; }
.hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__list li:nth-child(3) { transition-delay: 660ms; }
.hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__list li:nth-child(4) { transition-delay: 710ms; }

.hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero-slide__actions {
  opacity: 0;
  transform: translateY(26px) scale(0.96);
}

.hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__actions {
  opacity: 1;
  transform: none;
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1) 800ms,
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1) 800ms;
}

/* Mobile: distancias y desenfoque reducidos, secuencia algo más corta. */
@media (max-width: 719px) {
  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-arg-badge {
    transition-delay: 100ms;
    transition-duration: 450ms;
  }

  .hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero__title {
    transform: translateX(-36px);
    filter: blur(3px);
  }

  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero__title {
    transition-delay: 200ms;
    transition-duration: 550ms;
  }

  .hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero__subtitle {
    transform: translateX(32px);
  }

  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero__subtitle {
    transition-delay: 450ms;
    transition-duration: 500ms;
  }

  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__actions {
    transition-delay: 700ms;
    transition-duration: 500ms;
  }

  .hero.hero-intro.is-playing .hero__photo-stage {
    transition-duration: 1100ms;
  }

  .hero.hero-intro.is-playing .hero__photo {
    transition-duration: 1400ms;
  }
}

/* Accesibilidad: sin desplazamientos, zoom ni blur — solo un fundido corto.
   Va al final para ganar los empates de especificidad frente a las reglas
   normales/mobile de arriba. */
@media (prefers-reduced-motion: reduce) {
  .hero.hero-intro .hero__photo-stage {
    filter: none;
  }

  .hero.hero-intro .hero__photo {
    transform: none;
  }

  .hero.hero-intro [data-hero-step="1"] .hero-arg-badge,
  .hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero__title,
  .hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero__subtitle,
  .hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero-slide__list li,
  .hero.hero-intro [data-hero-step="1"] .hero-slide.is-active .hero-slide__actions {
    transform: none;
    filter: none;
  }

  .hero.hero-intro.is-playing .hero__photo-fade {
    transition: opacity 220ms ease-out;
  }

  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-arg-badge,
  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero__title,
  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero__subtitle,
  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__list li,
  .hero.hero-intro.is-playing [data-hero-step="1"] .hero-slide.is-active .hero-slide__actions {
    transition: opacity 220ms ease-out;
    transition-delay: 0ms;
  }
}

/* Franja de highlights — reemplaza al antiguo hero-trust (3 pills en una
   fila) por 3 items con ícono + texto, con más aire propio y separados de
   la foto por el bottom-inset agregado en .hero__photo-stage (no pegados). */
.hero-highlights {
  position: relative;
  z-index: 1;
  background: var(--blue-50);
  border-top: 1px solid var(--color-border);
}

.hero-highlights__inner {
  display: grid;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-6);
  grid-template-columns: 1fr;
}

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

.hero-highlights__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-highlights__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-600);
  box-shadow: var(--shadow-soft);
}

.hero-highlights__icon svg {
  width: 20px;
  height: 20px;
}

.hero-highlights__text {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
}

/* Hero content slider — título, bajada, bullets y botones rotan juntos.
   La foto ya no vive dentro del slide: es la capa .hero__photo-stage. */

.hero-content {
  width: 100%;
  margin-top: var(--space-4);
}

@media (min-width: 960px) {
  .hero-content {
    max-width: 540px;
  }
}

/* Insignia "Pensado para las empresas argentinas" — vive fuera del track
   que rota entre slides, así queda fija en el mismo lugar en las 3. */
.hero-arg-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}

.hero-arg-badge__flag {
  flex: none;
  width: 34px;
  height: auto;
  margin-top: 2px;
  border-radius: 4px;
}

.hero-arg-badge__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  /* min-width:0 — sin esto, un item flex con texto puede negarse a
     encogerse por debajo de su ancho de contenido "natural" y desbordar
     la fila en pantallas angostas (gotcha clásico de flexbox). */
  min-width: 0;
}

.hero-arg-badge__text strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
  line-height: 1.3;
}

.hero-arg-badge__text span {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}

@media (max-width: 480px) {
  .hero-arg-badge__flag {
    width: 28px;
  }
}

.hero-content__track {
  position: relative;
  /* Antes la altura se fijaba una sola vez al máximo de los 3 slides —
     si el activo era más corto, quedaba un colchón de espacio vacío
     debajo (hasta ~137px medidos). Ahora se sincroniza con el slide
     activo en cada cambio (ver goTo() en main.js), y esta transición
     hace que achicarse/agrandarse se sienta como un movimiento suave en
     vez de un salto. */
  transition: height 500ms var(--ease-out-expo);
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out-expo);
  pointer-events: none;
}

.hero-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* Entrada cinematográfica del texto: cada elemento (título, bajada, cada
   bullet, botones) sube y se asienta con su propio delay escalonado en vez
   de que todo el bloque aparezca de golpe — sensación más premium/editorial.
   El cross-fade del .hero-slide de arriba sigue manejando la opacidad
   general; esto solo agrega el movimiento por elemento. */
.hero-slide .hero__title,
.hero-slide .hero__subtitle,
.hero-slide__list li,
.hero-slide .hero-slide__actions {
  transform: translateY(18px) scale(0.985);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.hero-slide.is-active .hero__title {
  transition-delay: 70ms;
}

.hero-slide.is-active .hero__subtitle {
  transition-delay: 160ms;
}

.hero-slide.is-active .hero-slide__list li:nth-child(1) { transition-delay: 250ms; }
.hero-slide.is-active .hero-slide__list li:nth-child(2) { transition-delay: 300ms; }
.hero-slide.is-active .hero-slide__list li:nth-child(3) { transition-delay: 350ms; }
.hero-slide.is-active .hero-slide__list li:nth-child(4) { transition-delay: 400ms; }

.hero-slide.is-active .hero-slide__actions {
  transition-delay: 470ms;
}

.hero-slide.is-active .hero__title,
.hero-slide.is-active .hero__subtitle,
.hero-slide.is-active .hero-slide__list li,
.hero-slide.is-active .hero-slide__actions {
  transform: none;
}

.hero-slide__list {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.hero-slide__list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero-slide__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
}

.hero-slide__icon svg {
  width: 18px;
  height: 18px;
}

.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  width: 100%;
}

@media (max-width: 599px) {
  .hero-slide__actions {
    flex-direction: column;
  }
  .hero-slide__actions .btn {
    width: 100%;
  }
}

.hero-slide__photo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  background: var(--gray-50);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-2);
}

.hero-slide__photo--portrait {
  aspect-ratio: 3 / 4;
  height: 420px;
  justify-self: center;
}

@media (min-width: 960px) {
  .hero-slide__photo--portrait {
    height: 480px;
  }
}

.hero-slide__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero-slide__photo-caption {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-soft);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
}

/* Indicadores del slider */

.hero-slider-dots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.65rem;
  margin-top: var(--space-4);
}

.hero-slider-dots button {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--gray-300);
  transition: width var(--duration-base) var(--ease-out-expo),
    background-color var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-out-expo);
}

/* Área táctil invisible más grande que el punto visible — más fácil de
   tocar en mobile sin agrandar el punto en sí. */
.hero-slider-dots button::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.hero-slider-dots button:hover {
  background: var(--blue-400);
}

.hero-slider-dots button.is-active {
  width: 32px;
  background: var(--blue-600);
  box-shadow: 0 2px 10px -2px rgba(46, 134, 222, 0.55);
}

/* ---------------------------------------------------------------------------
   CÓMO FUNCIONA
   ------------------------------------------------------------------------ */

.how {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .how {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}

.how__step {
  position: relative;
  text-align: left;
  padding-top: var(--space-2);
}

.how__step-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.how__step-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.how__step-index {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

.how__step-title {
  font-size: var(--text-md);
  color: var(--navy-900);
  margin-bottom: 0.4rem;
}

.how__step-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.how__connector {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 6px;
  width: calc(var(--space-3) + 12px);
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--gray-300) 0 6px,
    transparent 6px 12px
  );
  display: none;
}

@media (min-width: 900px) {
  .how__step:not(:last-child) .how__connector {
    display: block;
  }
}

@media (min-width: 900px) {
  .how--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Carrusel "Cómo funciona" — solo esta sección; Portal de Anfitriones sigue
   usando la grilla fija .how/.how--cols-3 de arriba sin cambios. Estilo
   "coverflow": el paso activo va a tamaño completo en el centro, los
   vecinos quedan más chicos/atenuados a los costados y se pueden tocar
   para enfocarlos. El track se mueve con transform (translateX), nunca con
   propiedades de layout, así no genera layout shift ni scroll horizontal
   de la página (el viewport recorta con overflow:hidden). */
.how-carousel {
  position: relative;
}

.how-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.how-carousel__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.how-carousel .how__step {
  flex: 0 0 auto;
  width: min(520px, 78vw);
  cursor: default;
  transition: opacity 450ms var(--ease-out-expo),
    transform 450ms var(--ease-out-expo),
    filter 450ms var(--ease-out-expo);
}

/* Estado atenuado solo si el JS confirmó que va a manejar el carrusel
   (clase .js-ready agregada de forma síncrona) — sin JS, los 4 pasos se
   ven a tamaño/opacidad completa (igual que el resto del sitio: nunca
   ocultar/atenuar contenido por defecto solo por CSS). */
.how-carousel.js-ready .how__step:not(.is-active) {
  opacity: 0.45;
  transform: scale(0.86);
  filter: saturate(0.75);
  cursor: pointer;
}

@media (min-width: 900px) {
  .how-carousel .how__step {
    /* vw, no % — un % acá se resolvería contra el content-box del track,
       que a su vez tiene padding calculado por JS a partir del ancho de
       este mismo slide: un % crea una dependencia circular que nunca
       converge al tamaño real (headroom se va comiendo el propio 60%). */
    width: min(560px, 42vw);
  }
}

.how-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.how-carousel__arrow {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  transition: border-color var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-fast) var(--ease-out-expo);
}

.how-carousel__arrow:hover {
  border-color: var(--blue-400);
  background: var(--blue-50);
}

.how-carousel__arrow svg {
  width: 18px;
  height: 18px;
}

.how-carousel__arrow--prev svg {
  transform: scaleX(-1);
}

.how-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.how-carousel__dots button {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--gray-300);
  transition: width var(--duration-base) var(--ease-out-expo),
    background-color var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-out-expo);
}

.how-carousel__dots button::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.how-carousel__dots button:hover {
  background: var(--blue-400);
}

.how-carousel__dots button.is-active {
  width: 32px;
  background: var(--blue-600);
  box-shadow: 0 2px 10px -2px rgba(46, 134, 222, 0.55);
}

/* ---------------------------------------------------------------------------
   PLANES / ARRANCÁ SIMPLE
   ------------------------------------------------------------------------ */

.tiers {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
  position: relative;
}

@media (min-width: 900px) {
  .tiers {
    grid-template-columns: 1fr auto 1fr;
  }
}

.tiers__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
}

@media (min-width: 900px) {
  .tiers__arrow {
    display: flex;
  }
}

.tier {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-out-expo),
    border-color var(--duration-base) var(--ease-out-expo);
}

.tier:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}

.tier--highlight:hover {
  border-color: var(--navy-700);
}

.tier__photo {
  /* Caja compartida por las dos cards de Planes (Control de Visitas y
     Portal de Anfitriones Cloud) — mismo width% y mismo aspect-ratio para
     que ninguna de las dos fotos se vea más grande que la otra, aunque las
     imágenes en sí tengan orientaciones distintas (una landscape, otra
     portrait). Cuadrado como punto medio razonable entre ambas. */
  position: relative;
  width: 84%;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-50);
  border: 1px solid var(--color-border);
}

.tier__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover (no contain): antes dejaba un margen de fondo gris alrededor de
     cada foto porque ninguna de las dos es cuadrada (una es panorámica,
     la otra vertical) — con cover llenan el box de punta a punta y el
     borde redondeado queda sobre la foto misma, igual en las dos cards. */
  object-fit: cover;
  object-position: center;
}

.tier--highlight .tier__photo {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.tier--highlight {
  background: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
  box-shadow: var(--shadow-lift);
}

.tier__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.tier__title {
  font-size: var(--text-lg);
}

.tier--highlight .tier__desc {
  color: rgba(255, 255, 255, 0.72);
}

.tier__desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tier__list {
  display: grid;
  gap: 0.65rem;
}

.tier__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
}

.tier__list svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--blue-500);
}

.tier--highlight .tier__list svg {
  color: var(--blue-400);
}

/* ---------------------------------------------------------------------------
   PORTAL DE ANFITRIONES
   ------------------------------------------------------------------------ */

.portal-feature {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-8);
}

@media (min-width: 960px) {
  .portal-feature {
    grid-template-columns: 1fr 1fr;
  }
}

.portal-feature__text h3 {
  font-size: var(--text-lg);
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}

.portal-feature__text .cred-benefits {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
}

.portal-feature__text .cred-benefits li {
  align-items: flex-start;
}

/* Variante oscura de "Además" — fondo azul Visitapro + dos celulares
   superpuestos, inspirada en la sección "La app para conectar equipos
   distribuidos" de humand.co/es: un teléfono adelante (más grande, más
   alto) y otro atrás (más chico, apoyado más abajo), que entran desde
   lados opuestos al hacer scroll. Solo esta instancia de .portal-feature
   (la de "Además" en Portal de Anfitriones) usa este modificador — el
   bloque de Modo Kiosco reutiliza la misma clase base .portal-feature sin
   --dark y queda intacto.

   "Franja rectangular azul" de lado a lado — ahora en cualquier ancho, no
   solo mobile. .portal-feature--dark es el fondo full-bleed (se sale del
   .container hasta los bordes reales del viewport); .portal-feature__inner
   (que además lleva la clase .portal-feature de siempre, así hereda el
   grid de 2 columnas) es quien limita el contenido a un ancho legible y
   lo centra adentro de la franja. */
.portal-feature--dark {
  background: var(--navy-900);
  color: var(--white);
  margin-top: var(--space-8);
  /* El ancho/margen full-bleed real lo pone JS (mide clientWidth real,
     sin la barra de scroll) — un 100vw puramente CSS mide ~8-17px de más
     en Windows/Linux con scrollbar visible y genera scroll horizontal.
     Sin JS, esto se ve como una tarjeta normal dentro del .container (no
     se rompe nada, solo no llega a los bordes). */
  padding-block: var(--space-6);
  padding-inline: var(--container-pad);
}

@media (min-width: 960px) {
  .portal-feature--dark {
    padding-block: var(--space-8);
  }
}

.portal-feature__inner {
  /* El margin-top de siempre ya lo puso .portal-feature--dark arriba —
     evita duplicarlo acá adentro. */
  margin-top: 0;
  max-width: var(--container-max);
  margin-inline: auto;
}

.portal-feature--dark .portal-feature__text h3 {
  color: var(--white);
}

.portal-feature--dark .cred-benefits li {
  color: rgba(255, 255, 255, 0.82);
}

.portal-feature--dark .hero-slide__icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--blue-400);
}

.portal-feature__phones {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: var(--space-4);
}

@media (min-width: 960px) {
  .portal-feature__phones {
    padding-top: 0;
  }
}

.portal-feature__phone {
  width: 48%;
  max-width: 220px;
  transition: transform 0.2s linear;
}

.portal-feature__phone--front {
  z-index: 2;
  /* Ahora con espacio real entre los dos (antes se superponían, luego
     -4%) — el acercamiento lo agrega el scroll (ver [data-phones-scroll]
     en main.js), que ahora tiene más rango para notarse. */
  margin-right: 4%;
}

.portal-feature__phone--back {
  z-index: 1;
  width: 42%;
  max-width: 189px;
  opacity: 0.94;
}

.portal-feature__phone img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.35));
}

.admin-callout {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--blue-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.admin-callout__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.admin-callout__icon svg {
  width: 22px;
  height: 22px;
}

.admin-callout p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   CREDENCIALES
   ------------------------------------------------------------------------ */

/* Rotador 3D — se ve una sola card centrada (más grande que antes, ya
   que ahora no comparte fila con la otra) y la que no está activa queda
   "atrás", girada y corrida en Z, asomando detrás — como una pila de dos
   cards que van turnándose adelante. Autoplay + dots + swipe, mismo
   patrón que el resto de los carruseles del sitio. */
.creds-rotator {
  max-width: 340px;
  margin-inline: auto;
}

@media (min-width: 560px) {
  .creds-rotator {
    max-width: 420px;
  }
}

.creds-rotator__stage {
  position: relative;
  perspective: 1400px;
  /* Fallback estático sin JS/antes de medir: las dos cards son
     position:absolute, así que sin esto el stage colapsaría a 0 de alto.
     El JS pisa esto con la altura real medida apenas corre. */
  aspect-ratio: 3 / 4;
  touch-action: pan-y;
}

.creds-rotator [data-cred-slide] {
  position: absolute;
  inset: 0;
  width: 100%;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: rotateY(-32deg) translateZ(-140px) translateX(-8%) scale(0.82);
  opacity: 0.55;
  filter: brightness(0.82) saturate(0.85);
  z-index: 1;
  pointer-events: none;
}

.creds-rotator [data-cred-slide].is-active {
  transform: none;
  opacity: 1;
  filter: none;
  z-index: 2;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .creds-rotator [data-cred-slide] {
    transform: none;
    filter: none;
    transition: opacity 220ms ease-out;
  }
}

.creds-rotator__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  margin-top: var(--space-4);
}

.creds-rotator__dots button {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--gray-300);
  transition: width var(--duration-base) var(--ease-out-expo),
    background-color var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-out-expo);
}

.creds-rotator__dots button::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.creds-rotator__dots button:hover {
  background: var(--blue-400);
}

.creds-rotator__dots button.is-active {
  width: 32px;
  background: var(--blue-600);
  box-shadow: 0 2px 10px -2px rgba(46, 134, 222, 0.55);
}

.cred-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.cred-card__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cred-card__visual svg {
  width: 60%;
  height: 60%;
  color: var(--navy-800);
}

.cred-card__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cred-card__label {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
}

.cred-benefits {
  display: grid;
  gap: 1rem;
  max-width: 640px;
  margin: var(--space-8) auto 0;
}

@media (min-width: 640px) {
  .cred-benefits {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-4);
  }
}

.cred-benefits li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   FUNCIONALIDADES QUE MARCAN LA DIFERENCIA
   ------------------------------------------------------------------------ */

.feature-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.feature-row {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 960px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
  }

  .feature-row--reverse .feature-row__text {
    order: 2;
  }

  .feature-row--reverse .feature-row__photo {
    order: 1;
  }
}

.feature-row__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
}

.feature-row__text h3 {
  font-size: var(--text-lg);
  color: var(--navy-900);
}

.feature-row__text p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.feature-row__text .tier__list {
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
   ORGANIZACIONES — marquesina continua (misma idea que la insignia del
   hero: todo el contenido duplicado una vez, el track viaja -50% en loop
   infinito, así el final de la tira se conecta sin salto con el comienzo).
   No depende de JS — es una animación CSS pura. Corre igual en cualquier
   ancho, mobile incluido, sale por un lado y entra por el otro.
   ------------------------------------------------------------------------ */

.orgs-marquee {
  overflow: hidden;
  /* Difumina los dos bordes de la sección en vez de cortar las tarjetas
     de golpe cuando entran/salen. */
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

.orgs-marquee__track {
  display: flex;
  width: max-content;
  animation: orgs-marquee-scroll 38s linear infinite;
}

/* Pausa al pasar el mouse — da tiempo a leer/clickear una tarjeta sin que
   seguir corriendo se sienta como que "se escapa". No es necesario en
   touch (no hay hover sostenido), el usuario igual puede tocar la tarjeta
   en el instante que pasa. */
.orgs-marquee__track:hover {
  animation-play-state: paused;
}

@keyframes orgs-marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

.orgs {
  display: flex;
  gap: var(--space-3);
  padding-right: var(--space-3);
}

.org-card {
  flex: 0 0 auto;
  width: min(260px, 72vw);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .orgs-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .orgs-marquee__track {
    animation: none !important;
    transform: none !important;
    width: auto;
  }
  .orgs[aria-hidden] {
    display: none;
  }
}

.org-card__visual {
  aspect-ratio: 5 / 4;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.org-card__visual svg {
  width: 42%;
  height: 42%;
  color: var(--navy-800);
}

.org-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.org-card__body {
  padding: var(--space-3);
}

.org-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
  margin-bottom: 0.35rem;
}

.org-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   EMPRESAS DE SEGURIDAD
   ------------------------------------------------------------------------ */

.partner-intro {
  max-width: 720px;
  margin: 0 auto var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.partner-features {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}

.partner-card__photo {
  /* Coincide exactamente con la relación real de resumendiario.png para que
     "contain" ocupe el 100% del contenedor sin dejar franjas del fondo a
     los costados (mismo patrón que .tier__photo en otras secciones). */
  width: 52%;
  max-width: 210px;
  margin: 0 auto var(--space-3);
  aspect-ratio: 1023 / 1537;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.partner-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* seguridadestadisticas.png es horizontal (a diferencia de resumendiario.png,
   vertical) — a igual max-width quedaba mucho más baja que la card vecina.
   La agrandamos y la recortamos un poco más cuadrada (cover) para que las
   dos cards de la sección queden parejas en altura. */
.partner-card__photo--wide {
  width: 62%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
}

@media (min-width: 640px) {
  .partner-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.partner-features h3 {
  font-size: var(--text-md);
  color: var(--navy-900);
  margin-bottom: 0.4rem;
}

.partner-features p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.partner-cta {
  margin-top: var(--space-6);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   ASESORAMIENTO DE HARDWARE
   ------------------------------------------------------------------------ */

.advisory-card {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .advisory-card {
    grid-template-columns: 1.1fr 1fr;
  }
}

.advisory-card__photo {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lift);
}

.advisory-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advisory-card__text {
  text-align: center;
}

@media (min-width: 900px) {
  .advisory-card__text {
    text-align: left;
  }
}

.advisory-card__title {
  font-size: var(--text-xl);
  color: var(--navy-900);
  margin-top: var(--space-1);
}

.advisory-card__desc {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.advisory-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (min-width: 900px) {
  .advisory-card__tags {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   CONTACTO
   ------------------------------------------------------------------------ */

.contact-card {
  display: grid;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .contact-card {
    grid-template-columns: 1fr 1.2fr;
  }
}

.contact-card__info {
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-card__info h3 {
  font-size: var(--text-lg);
}

.contact-card__info p {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
}

.contact-card__list {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-2);
}

.contact-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
}

.contact-card__list svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--blue-400);
}

.contact-card__form {
  background: var(--white);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.form-row {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 520px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  display: grid;
  gap: 0.4rem;
}

.form-field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.form-field input {
  font: inherit;
  font-size: var(--text-sm);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--gray-50);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-out-expo);
}

.form-field input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-50);
  background: var(--white);
}

/* Solo marca en rojo un email inválido una vez que la persona ya escribió
   algo y salió del campo — evita que arranque en rojo antes de tipear. */
.form-field input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #d64545;
  background: #fdf3f3;
}

.form-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.form-status[hidden] {
  display: none;
}

.form-status svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.form-status--ok {
  background: #eafaf1;
  border: 1px solid #b8ecd0;
  color: #187a45;
}

.form-status--error {
  background: #fdeeee;
  border: 1px solid #f5c6c6;
  color: #b3261e;
}

/* ---------------------------------------------------------------------------
   WIZARD DE CONTACTO (3 pasos)
   ------------------------------------------------------------------------ */

.wizard-privacy-badge {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.wizard-privacy-badge__icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-400);
}

.wizard-privacy-badge__icon svg {
  width: 16px;
  height: 16px;
}

.wizard-privacy-badge p {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

/* Indicador de progreso ------------------------------------------------- */

.wizard-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.wizard-progress__track {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.wizard-progress__step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--white);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition: background-color var(--duration-base) var(--ease-out-expo),
    border-color var(--duration-base) var(--ease-out-expo),
    color var(--duration-base) var(--ease-out-expo);
}

.wizard-progress__step.is-active {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}

.wizard-progress__step.is-done {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}

.wizard-progress__step-check {
  display: none;
  width: 14px;
  height: 14px;
}

.wizard-progress__step.is-done .wizard-progress__step-num {
  display: none;
}

.wizard-progress__step.is-done .wizard-progress__step-check {
  display: block;
}

.wizard-progress__line {
  width: 32px;
  height: 2px;
  flex: none;
  background: var(--color-border);
  transition: background-color var(--duration-base) var(--ease-out-expo);
}

@media (min-width: 480px) {
  .wizard-progress__line {
    width: 44px;
  }
}

.wizard-progress__line.is-done {
  background: var(--blue-600);
}

.wizard-progress__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--blue-600);
}

/* Panels (crossfade + slide, misma altura siempre) ----------------------- */

.wizard-panels {
  position: relative;
  margin-top: var(--space-3);
  transition: height var(--duration-base) var(--ease-out-expo);
}

.wizard-panel {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 260ms var(--ease-out-expo), transform 260ms var(--ease-out-expo);
  pointer-events: none;
}

.wizard-panel.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.wizard-panel.is-enter-right { transform: translateX(28px); }
.wizard-panel.is-enter-left { transform: translateX(-28px); }
.wizard-panel.is-exit-right { transform: translateX(28px); opacity: 0; }
.wizard-panel.is-exit-left { transform: translateX(-28px); opacity: 0; }

.wizard-panel__title {
  font-size: var(--text-md);
  color: var(--navy-900);
  margin-bottom: 0.35rem;
}

.wizard-panel__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.wizard-subquestion {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy-900);
  margin-top: var(--space-3);
  margin-bottom: 0.6rem;
}

.wizard-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  margin-top: var(--space-3);
}

.wizard-hint svg {
  width: 14px;
  height: 14px;
}

/* Paso 1 — filas seleccionables ------------------------------------------ */

.wizard-list {
  display: grid;
  gap: 0.5rem;
}

.wizard-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-fast) var(--ease-out-expo),
    transform var(--duration-fast) var(--ease-out-expo);
}

.wizard-row:hover {
  border-color: var(--blue-400);
  background: var(--blue-50);
  transform: translateY(-1px);
}

.wizard-row__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--blue-600);
}

.wizard-row__icon svg {
  width: 19px;
  height: 19px;
}

.wizard-row__label {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--navy-900);
}

.wizard-row__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text-soft);
}

/* Paso 2 — cards de "qué mejorar" ----------------------------------------- */

.wizard-cards {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 520px) {
  .wizard-cards {
    grid-template-columns: 1fr 1fr;
  }
  .wizard-card--wide {
    grid-column: 1 / -1;
  }
}

.wizard-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-fast) var(--ease-out-expo);
}

.wizard-card:hover {
  border-color: var(--blue-400);
}

.wizard-card.is-selected {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

.wizard-card__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--blue-600);
}

.wizard-card__icon svg {
  width: 18px;
  height: 18px;
}

.wizard-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.wizard-card__text strong {
  font-size: var(--text-sm);
  color: var(--navy-900);
}

.wizard-card__text span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.wizard-card__radio {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}

.wizard-card.is-selected .wizard-card__radio {
  border-color: var(--blue-600);
  border-width: 5px;
}

/* Paso 2 — cantidad de accesos -------------------------------------------- */

.wizard-quantity {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.wizard-qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.55rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--navy-900);
  transition: border-color var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-fast) var(--ease-out-expo);
}

.wizard-qty svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-soft);
}

.wizard-qty:hover {
  border-color: var(--blue-400);
}

.wizard-qty.is-selected {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

.wizard-qty.is-selected svg {
  color: var(--blue-600);
}

/* Paso 3 — formulario ------------------------------------------------------ */

.wizard-form {
  display: grid;
  gap: 1.1rem;
}

.wizard-input {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--gray-50);
  transition: border-color var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-fast) var(--ease-out-expo);
}

.wizard-input svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-text-soft);
}

.wizard-input input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  padding: 0.75rem 0 !important;
}

.wizard-input input:focus {
  box-shadow: none !important;
}

.wizard-input:focus-within {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-50);
  background: var(--white);
}

.wizard-input:has(input:invalid:not(:placeholder-shown):not(:focus)) {
  border-color: #d64545;
  background: #fdf3f3;
}

.wizard-privacy {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.85rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.wizard-privacy svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--color-text-soft);
}

.wizard-callout {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.65rem 0.9rem;
  background: var(--blue-50);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--navy-900);
}

.wizard-callout svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--blue-600);
}

/* Acciones (Volver / Continuar / Enviar) ---------------------------------- */

.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.wizard-actions .btn {
  flex: none;
}

/* Paso "listo" — confirmación ---------------------------------------------- */

.wizard-panel--done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  padding-block: var(--space-6);
}

.wizard-done__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #eafaf1;
  color: #187a45;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.wizard-done__icon svg {
  width: 28px;
  height: 28px;
}

.wizard-panel--done .wizard-panel__title {
  margin-bottom: 0;
}

.wizard-panel--done .wizard-panel__subtitle {
  margin-bottom: var(--space-3);
  max-width: 380px;
}

[data-wizard].is-done .wizard-progress {
  display: none;
}

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------ */

.footer {
  padding-block: var(--space-8) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

@media (min-width: 720px) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer__brand-logos {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: var(--space-2);
}

.footer__brand-logos img {
  height: 38px;
  width: auto;
}

.footer__brand p {
  max-width: 320px;
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer__col h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  margin-bottom: var(--space-2);
}

.footer__col a {
  display: block;
  padding: 0.3rem 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__col a:hover {
  color: var(--color-accent);
}

.footer__bottom {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-soft);
}