/* =============================================================
   ARSIM — Landing "Lista de espera"
   -------------------------------------------------------------
   Estilos propios de ESTA landing, apoyados en arsim-brand.css.
   Ni un color, fuente o radio suelto: todo sale de los tokens.
   Base = celular (375px). El bloque @media adapta a desktop.
   ============================================================= */

/* Sin esto un <video> conserva su ancho propio y desborda la grilla */
img,
video {
  max-width: 100%;
}

/* Un elemento de grilla no baja de su ancho intrinseco salvo que se
   le diga: evita que una imagen o un video estiren la columna. */
.hero-grid > *,
.split-grid > * {
  min-width: 0;
}

/* El CTA del hero baja al formulario con scroll suave */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

#lista {
  scroll-margin-top: 16px;
}

/* ---------- Ritmo vertical ----------
   .arsim-section trae 72px arriba y abajo; entre dos secciones
   seguidas eso sumaba 144px y estiraba la página sin motivo.
   Acá el espacio se controla en un solo lugar. */
.arsim-section {
  padding-top: 0;
  padding-bottom: 0;
}

main > section {
  margin-top: 56px;
}

/* El cierre respira un poco más: separa la lectura de la acción */
main > section.cierre {
  margin-top: 64px;
}

.section-head {
  margin-bottom: 20px;
}

.section-title {
  margin-top: 8px;
}

.section-lead {
  margin-top: 12px;
  font-size: 15.5px;
  color: var(--text-mid);
}

.head-right {
  margin-left: auto;
}

/* ---------- 1. HERO ---------- */

.hero {
  padding: 28px 0 16px;
}

.hero-grid {
  display: grid;
  gap: 28px;
}

.hero-logo {
  display: block;
  width: 108px;
  height: auto;
  margin-bottom: 20px;
}

.hero-eyebrow {
  display: block;
  margin-bottom: 12px;
}

.hero-lead {
  margin: 14px 0 22px;
}

/* El .arsim-cta del kit está dimensionado para la UI del hub; en
   una landing mobile queda chico como objetivo táctil. Se agranda
   SIN tocar su aspecto (relieve, canto, destello). */
.cta-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 14px 28px;
  font-size: 0.8rem;
  text-align: center;
}

.cta-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ---------- Capturas de producto ----------
   .arsim-thumb fija 160px de alto para las miniaturas del hub.
   Acá se recorta por proporción para que la imagen ocupe lo justo
   y se vea la parte que importa. */
.shot-thumb {
  height: auto;
  aspect-ratio: 16 / 10;
}

/* Los clips estan recortados a 16:10 para ocupar exactamente el mismo
   espacio que ocupaban las capturas fijas. */
.shot-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot-thumb img {
  object-position: center;
}

/* El viñeteado del kit está pensado para miniaturas con texto encima.
   Acá las capturas van solas, así que se baja su intensidad —misma
   gradiente del kit, sin colores nuevos— para que la imagen respire. */
.shot-thumb::after {
  opacity: 0.5;
}

/* ---------- 2. QUÉ ES ---------- */

.split-grid {
  display: grid;
  gap: 24px;
}

/* El diferencial de ARSIM, con los rieles punteados del kit.
   Va entre dos líneas para que se lea como una franja de datos y
   no como un pie de página. En celular baja en vertical. */
.flow {
  display: grid;
  justify-items: start;
  gap: 7px;
  margin-top: 22px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.flow-item {
  font-size: 0.72rem;
  letter-spacing: 1.6px;
  color: var(--text-primary);
}

.flow .arsim-track--h {
  width: 2px;
  height: 12px;
  min-height: 0;
  margin-left: 13px;
  background: repeating-linear-gradient(180deg, var(--border) 0 5px, transparent 5px 10px);
}

/* ---------- 3. BENEFICIOS ---------- */

.benefit-grid {
  display: grid;
  gap: 14px;
}

.benefit .arsim-card-head {
  padding: 9px 16px;
}

/* Acento: la numeración en cian, como un dato del kit.
   Texto plano, sin fondo, para que no compita con los pasos. */
.benefit-idx {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
}

.benefit .arsim-track--h {
  flex: 1;
}

.benefit .arsim-card-body {
  padding: 18px 16px 20px;
}

/* ---------- 4. CÓMO FUNCIONA ---------- */

.steps-panel .arsim-panel-head {
  margin-bottom: 18px;
}

.steps {
  list-style: none;
  display: grid;
  gap: 14px;
}

.step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: center;
}

.step-rail {
  display: flex;
  align-items: center;
}

/* Acento principal: los 01/02/03 toman el lenguaje de chip del kit
   —cian sobre fondo tenue y borde de acento— con los mismos tokens.
   Sin el resplandor de .arsim-step--active: acá no hay paso "actual",
   los tres pesan igual. */
.steps .arsim-step {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--border-accent);
}

/* En celular los rieles sobran: los pasos van pegados y compactos */
.step .arsim-track {
  display: none;
}

.step-title {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- 5. CIERRE: ACCESO ANTICIPADO ---------- */

.close-title {
  font-size: clamp(20px, 3.8vw, 26px);
}

.early-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.early-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  color: var(--text-mid);
}

.early-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 8px;
  height: 2px;
  background: var(--text-secondary);
}

/* El cierre no lleva formulario: sube al del hero */
.cierre-btn {
  margin-top: 22px;
}

.hero-form {
  margin-top: 22px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  margin-bottom: 8px;
}

.form .field input {
  width: 100%;
  min-height: 50px; /* cómodo para el pulgar, igual que el botón */
  padding: 14px 15px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
  transition: border-color 0.15s ease;
}

.form .field input::placeholder {
  color: var(--text-secondary);
}

.form input[aria-invalid='true'] {
  border-color: var(--danger);
}

/* Campo trampa para bots: fuera de la vista y fuera del tabulador */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* El boton mientras envia */
.arsim-cta[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Rojo = error. Uso de semaforo, no decorativo. */
.form-error {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: var(--r-control);
  color: var(--danger);
  font-size: 13.5px;
}

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

/* Confirmacion */
.form-success {
  display: grid;
  justify-items: start;
  gap: 12px;
}

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

.form-success p {
  font-size: 14.5px;
  color: var(--text-mid);
}

.form .field input:hover,
.form .field input:focus-visible {
  border-color: var(--border-accent);
}

/* ---------- 6. FOOTER ---------- */

.site-footer {
  margin-top: 52px;
  border-top: 1px solid var(--border);
  padding: 16px 0 22px;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-logo {
  width: 78px;
  height: auto;
}

.footer-text {
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* =============================================================
   PAGINA DE GRACIAS  (/registro-arsim/gracias/)
   Reutiliza todos los componentes de la landing: acá solo va el
   centrado y el ritmo propios de esa página.
   ============================================================= */

.gracias {
  padding: 40px 0 56px;
}

.gracias-wrap {
  max-width: 620px;
  text-align: center;
}

.gracias-logo {
  display: block;
  width: 108px;
  height: auto;
  margin: 0 auto 22px;
}

.gracias-title {
  margin: 18px 0 16px;
}

.gracias-lead {
  margin: 0 auto 10px;
}

/* Barra de progreso del kit, con el relleno en rojo porque marca un
   estado incompleto. El oro del kit queda reservado para puntaje. */
.progreso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 22px;
}

.progreso-barra {
  width: 100%;
  max-width: 300px;
  height: 10px;
}

.progreso-fill {
  background: var(--danger);
  box-shadow: none;
}

.progreso-dato {
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
}

.gracias-panel {
  margin-top: 32px;
  text-align: left;
}

.gracias-texto {
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--text-mid);
}

/* Mientras no haya link del grupo: botón apagado y sin respuesta */
.arsim-cta[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.wa-nota {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

.wa-nota[hidden] {
  display: none;
}

.gracias-volver {
  display: inline-block;
  margin-top: 28px;
}

@media (min-width: 760px) {
  .gracias {
    padding: 64px 0 72px;
  }

  .gracias-logo {
    width: 128px;
  }

  .gracias-panel {
    margin-top: 40px;
    padding: 28px 32px 32px;
  }

  /* Dentro del panel el CTA ocupa todo el ancho.
     Mayor especificidad que la regla .cta-lg de más abajo. */
  .gracias-panel .cta-lg {
    display: flex;
    width: 100%;
  }
}

/* =============================================================
   DESKTOP — composiciones de dos columnas
   ============================================================= */

@media (min-width: 760px) {
  main > section {
    margin-top: 76px;
  }

  main > section.cierre {
    margin-top: 88px;
  }

  /* ---------- Hero: copy a la izquierda, producto a la derecha ---------- */
  .hero {
    padding: 44px 0 28px;
  }

  /* Las dos columnas de imagen (hero y "Qué es") miden lo mismo,
     así las dos capturas tienen idéntica presencia. */
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }

  .hero-logo {
    width: 132px;
    margin-bottom: 24px;
  }

  .hero-lead {
    margin: 18px 0 26px;
  }

  /* En el hero vuelve a su ancho natural... */
  .cta-lg {
    display: inline-flex;
    width: auto;
    padding: 14px 32px;
  }

  /* ...pero en el formulario acompaña el ancho del input */
  .form .cta-lg {
    display: flex;
    width: 100%;
  }

  /* ---------- Qué es: captura a la izquierda, texto a la derecha ---------- */
  .split-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }

  .section-lead {
    max-width: 56ch;
  }

  /* El flujo vuelve a leerse en una línea */
  .flow {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .flow .arsim-track--h {
    flex: 1;
    width: auto;
    height: 2px;
    min-width: 16px;
    margin-left: 0;
    background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
  }

  .flow-item {
    white-space: nowrap;
  }

  /* ---------- Beneficios ---------- */
  .benefit-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  /* ---------- Cómo funciona: los tres pasos en fila, con rieles ---------- */
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 24px;
  }

  .step {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
  }

  .step .arsim-track {
    display: block;
    flex: 1;
    margin-left: 12px;
  }

  .step-title {
    padding: 14px 20px 0 0;
  }

  /* ---------- Cierre ---------- */
  .close-panel {
    padding: 28px 32px 32px;
  }

  /* En el hero los dos campos entran uno al lado del otro */
  .hero-form .campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .hero-form .field {
    margin-bottom: 0;
  }

  .hero-form .cta-lg {
    margin-top: 14px;
  }

  /* ---------- Footer ---------- */
  .footer-row {
    justify-content: space-between;
  }

  .site-footer {
    margin-top: 72px;
  }
}