/**
 * Landing de acceso anticipado — design system v3.
 *
 * Sin tokens propios: todo sale de design-system-v3-tokens.css. Si algo aquí
 * necesita un color que no esté allí, el color está mal elegido.
 *
 * Nota de jerarquía (decisión del operador, 24-ago-2026): el lienzo es BLANCO, y
 * con fondo y tarjeta en blanco la separación la lleva un HAIRLINE de 1px, no una
 * sombra grande — dos blancos con sombra difusa se aplanan.
 */

form.aa {
  max-width: 68rem;
  margin: 0 auto;
  /* El header del sitio es position:fixed y mide 85px: sin este colchon, el
     eyebrow del hero queda DEBAJO de la cabecera. Medido el 27-ago-2026. */
  padding: calc(85px + var(--space-xl)) var(--space-md) var(--space-xxl);
  font-family: var(--font-body);
  color: var(--ink);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

/**
 * El eyebrow va en --bosque, NO en --terracota.
 *
 * El spec da la terracota para eyebrows, pero medido sobre el lienzo blanco da
 * 3,84:1 y a 13px hacen falta 4,5. Así que el ACENTO de marca se conserva como
 * punto decorativo —que no tiene requisito de contraste— y el texto se lee.
 */
.aa__eyebrow {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bosque);
  margin: 0 0 var(--space-sm);
  display: flex;
  align-items: center;
  gap: .55rem;
}

.aa__eyebrow::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: var(--radius-full);
  background: var(--terracota);
  flex: 0 0 auto;
}

.aa__titulo {
  font-family: var(--font-display);
  /* Tope duro del spec §13: hero <= 4rem. */
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.06;
  font-weight: 600;
  color: var(--bosque);
  margin: 0 0 var(--space-md);
  max-width: 18ch;
}

.aa__lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-lg);
  max-width: 56ch;
}

.aa__lead strong { color: var(--bosque); font-weight: 600; }

/* ── El dato duro: banda crema, que es su uso canónico (sección, no lienzo) ── */

.aa__dato {
  background: var(--crema);
  border-left: 3px solid var(--sol);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-xl);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 56ch;
}

.aa__dato b { color: var(--bosque); font-weight: 600; }

/* ── Los tres pasos: lista editorial numerada, no tres tarjetas iguales ──── */

.aa__pasos {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 48rem) {
  .aa__pasos { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}

.aa__paso {
  position: relative;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(49, 86, 45, .16);
}

.aa__paso b {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
  /* Terracota, NO dorado. Medido con scripts/contraste.mjs: `--sol` sobre el
     lienzo blanco da 1,72:1, y estos numerales no son decoración —son el único
     indicador visual del orden, porque la lista va sin marcador—. `--terracota`
     da 3,84:1 y a 2rem cuenta como texto grande (umbral 3:1), así que PASA AA.
     Numerales en terracota es además uso canónico del v3. */
  color: var(--terracota);
  margin-bottom: var(--space-xs);
}

.aa__paso span { display: block; font-size: .9375rem; line-height: 1.55; color: var(--ink); }
.aa__paso em { font-style: normal; font-weight: 600; color: var(--bosque); }

/* ── La tarjeta del formulario ───────────────────────────────────────────── */

/* Tres campos no necesitan 1.088px: a ese ancho el formulario se lee como una
   hoja de cálculo y el ojo pierde el renglón. Se queda en el mismo ancho de línea
   que el lead, y alineada a la izquierda para que la página siga siendo UNA
   columna editorial en vez de un hero suelto con una tarjeta centrada debajo. */
.aa__card {
  max-width: 38rem;
  background: var(--blanco);
  border: 1px solid rgba(49, 86, 45, .18);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--sombra-suave);
}

@media (min-width: 48rem) {
  .aa__card { padding: var(--space-xl); }
}

.aa__card-titulo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bosque);
  margin: 0 0 var(--space-md);
}

/* ── Campos ──────────────────────────────────────────────────────────────── */

form.aa .form-item { margin: 0 0 var(--space-md); }

form.aa label {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bosque-deep);
  margin-bottom: var(--space-xs);
}

form.aa input[type="text"],
form.aa input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  /* 16px exactos: por debajo, iOS hace zoom al enfocar. */
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--blanco);
  padding: .85rem 1rem;
  border: 1px solid rgba(49, 86, 45, .28);
  border-radius: var(--radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}

form.aa input[type="text"]:focus,
form.aa input[type="email"]:focus {
  outline: none;
  border-color: var(--agua);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, .22);
}

form.aa .description {
  font-size: .875rem;
  line-height: 1.5;
  /* En v3 el texto secundario NO lleva gris propio: es `--ink` con opacidad.
     Antes había aquí un #5F665C inventado. Al 72 % sobre blanco resuelve a
     #636362 = 6,01:1, medido: pasa AA. */
  color: var(--ink);
  opacity: .72;
  margin-top: var(--space-xxs);
}

/* ── Consentimiento ──────────────────────────────────────────────────────── */

form.aa .form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  background: var(--crema);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-lg);
}

form.aa .form-type-checkbox input { margin: .15rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--bosque); flex: 0 0 auto; }

form.aa .form-type-checkbox label {
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

/* El tema mete al .form-actions un borde superior y un colchon que aqui dejan un
   hueco vacio de ~90px entre el consentimiento y el boton. */
form.aa .form-actions {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}



form.aa .form-actions input.aa__cta {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  /* --sol NUNCA lleva texto claro (1.49:1 sobre blanco): el texto va oscuro. */
  color: var(--bosque-deep);
  background: var(--sol);
  border: none;
  border-radius: var(--radius-full);
  padding: 1rem 1.6rem;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 26px -12px var(--sol-glow);
}

form.aa .form-actions input.aa__cta:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -14px var(--sol-glow); }
form.aa .form-actions input.aa__cta:focus-visible { outline: 3px solid var(--bosque); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  form.aa .form-actions input.aa__cta { transition: none; }
  form.aa .form-actions input.aa__cta:hover { transform: none; }
}

@media (min-width: 34rem) {
  form.aa .form-actions input.aa__cta { width: auto; min-width: 17rem; }
}

/* ── Pie de confianza ────────────────────────────────────────────────────── */

.aa__confianza {
  margin: var(--space-lg) 0 0;
  font-size: .875rem;
  color: var(--ink);
  opacity: .72;
  text-align: center;
}

.aa__confianza b { color: var(--bosque); font-weight: 600; }

/* El honeypot no se ve, pero tampoco se lee: fuera del árbol accesible. */
form.aa .form-item-website { position: absolute !important; left: -9999px !important; }

/* ── El asterisco de «campo obligatorio» ─────────────────────────────────── */

/* Drupal lo planta pegado al label («*Tu nombre»). Se separa y se baja de tono:
   los tres campos son obligatorios, asi que el asterisco informa poco y solo
   ensucia. El `title` del marcador sigue ahi para el lector de pantalla. */
form.aa .form-required::after {
  content: "";
  margin: 0;
}

form.aa .form-item label.form-required::before {
  content: "";
}