/* assets/css/landing-comun.css — el esqueleto que comparten las landings.
 *
 * POR QUÉ EXISTE
 *
 * «Vender mi guía» (/escribir-con-nosotros) y «Crear cuenta» (/registro) son
 * la misma página con distinto argumento: misma cabecera, mismos botones,
 * mismo pie, mismas preguntas frecuentes. Tenerlo dos veces garantizaba que
 * al primer retoque una de las dos se quedara atrás, sin forma de enterarse
 * salvo abriéndolas las dos.
 *
 * Aquí está lo común. Lo propio de cada una vive en
 * assets/css/pages/<pagina>.css, que se carga DESPUÉS.
 *
 * LA CSP DE ESTAS RUTAS NO CONCEDE 'unsafe-inline'
 *
 * Ni en `script-src` ni en `style-src` (ver _headers). Nada de `style="…"`,
 * `<style>` ni `on*=`: lo que cambia en caliente viaja por variables CSS
 * escritas con `style.setProperty()`, que es CSSOM y sí pasa.
 * `scripts/comprobar-csp.mjs` falla la build si alguien lo reintroduce.
 *
 * Una variable CSS sin definir NO da error: descarta la declaración entera y
 * deja de pintar, en silencio. Por eso los tokens se declaran aquí, en un
 * único sitio, y `tests/css-variables.test.ts` audita que no se use ninguno
 * que no exista.
 */

:root {
  --coral: var(--color-brand-coral);
  --coral-fuerte: var(--color-brand-coral-oscuro);
  --coral-suave: #FFECEA;
  --tinta: var(--color-brand-ink);
  --tinta-2: #23405E;
  --apagado: var(--color-mudo);
  --crema: var(--color-brand-cream);
  --crema-2: var(--color-brand-mist);
  --blanco: #ffffff;
  --linea: var(--color-linea);
  --linea-fuerte: #C6D0DA;
  --sombra: var(--shadow-soft);
  --sombra-panel: 0 24px 70px -32px rgb(0 27 53 / 45%);
  --serif: var(--font-brand);
  --sans: var(--font-brand);
  --caja: var(--content-width);
  --radio: 10px;
  --radio-g: 18px;
  /* Lo que `.caja` deja libre a cada lado. Lo usa la foto del hero para
     salirse hasta el borde de la ventana sin números a ojo. */
  --margen: calc((100vw - min(var(--caja), 100vw - 64px)) / 2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, p, dl, dd { margin: 0; }
img { max-width: 100%; display: block; }

/* `hidden` tiene que ganar SIEMPRE.
   El atributo lo pone el navegador con `display:none` en su hoja de usuario,
   que pierde contra cualquier `display` de aquí: sin este `!important`, un
   `.btn[hidden]` se seguía viendo porque `.btn` declara `display:inline-flex`.
   Pasó de verdad: el botón «Atrás» salía en el paso 1. */
[hidden] { display: none !important; }

.caja { width: min(var(--caja), calc(100% - 64px)); margin: 0 auto; }
.ico { width: 22px; height: 22px; flex: 0 0 auto; }

/* Se ve, pero solo con lector de pantalla. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

/* ══════════ Botones ══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radio);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--relleno { background: var(--coral); color: #fff; }
.btn--relleno:hover { background: var(--coral-fuerte); transform: translateY(-1px); }
.btn--linea { border: 1.5px solid var(--coral); color: var(--coral); padding: 9px 18px; font-size: 14px; }
.btn--linea:hover { background: var(--coral); color: #fff; }
.btn--suave { border: 1.5px solid var(--linea-fuerte); color: var(--tinta-2); background: var(--blanco); }
.btn--suave:hover { border-color: var(--tinta-2); }
.btn--ancho { flex: 1; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

.enlace-flecha { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--tinta); }
.enlace-flecha:hover { color: var(--coral); }

.rotulo {
  color: var(--coral); font-size: 11.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
}

/* ══════════ Cabecera ══════════ */
.cab { position: sticky; top: 0; z-index: 60; background: rgba(253, 247, 243, .92); backdrop-filter: blur(14px); }
.cab__fila { display: flex; align-items: center; gap: 40px; height: 74px; }
.marca { display: inline-flex; align-items: center; }
/* El logotipo YA lleva el nombre dentro, así que no se acompaña de texto: dos
   veces la marca al lado se lee como un error, no como refuerzo. El nombre
   accesible lo pone el `alt` de la imagen. */
.marca__logo { display: block; height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: 34px; margin: 0 auto; font-size: 14.5px; color: var(--tinta-2); }
.nav a { transition: color .18s ease; }
.nav a:hover { color: var(--coral); }

.cab__acciones { display: flex; align-items: center; gap: 18px; }
.cab__sesion { font-size: 14.5px; color: var(--tinta-2); }
.cab__sesion:hover { color: var(--coral); }

.cab__menu { display: none; width: 42px; height: 42px; padding: 10px; }
.cab__menu span { display: block; height: 1.6px; background: var(--tinta); border-radius: 2px; }
.cab__menu span + span { margin-top: 5px; }

/* ══════════ Preguntas frecuentes ══════════ */
.ayuda { padding: 88px 0 96px; }
.ayuda__rejilla { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 60px; align-items: start; }
.ayuda__intro h2 { margin: 16px 0 12px; font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.024em; line-height: 1.15; }
.ayuda__intro p { color: var(--apagado); font-size: 15px; line-height: 1.6; max-width: 330px; }
.ayuda__lista { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.ayuda details { border-bottom: 1px solid var(--linea); }
.ayuda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 0; font-size: 16px; font-weight: 600; letter-spacing: -.012em;
  cursor: pointer; list-style: none;
}
.ayuda summary::-webkit-details-marker { display: none; }
.ayuda summary::after { content: "+"; color: var(--coral); font-size: 22px; font-weight: 400; line-height: 1; }
.ayuda details[open] summary::after { content: "–"; }
.ayuda details p { padding: 0 44px 20px 0; margin-top: -4px; color: var(--apagado); font-size: 14.8px; line-height: 1.65; }

/* ══════════ Pie ══════════ */
.pie { padding: 34px 0 44px; border-top: 1px solid var(--linea); background: var(--blanco); }
.pie__fila { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.marca--pie .marca__logo { height: 34px; }
.pie__enlaces { display: flex; gap: 26px; flex-wrap: wrap; color: var(--apagado); font-size: 14px; }
.pie__enlaces a:hover { color: var(--coral); }

/* ══════════ Pantallas medianas ══════════ */
@media (max-width: 1080px) {
  :root { --margen: 24px; }
  .caja { width: calc(100% - 48px); }
  .ayuda__rejilla { grid-template-columns: 1fr; gap: 34px; }
  .ayuda__intro p { max-width: none; }
}

/* ══════════ Móvil ══════════ */
@media (max-width: 760px) {
  .caja { width: calc(100% - 36px); }
  .cab__fila { height: 64px; gap: 14px; }
  .marca__logo { height: 32px; }
  .cab__menu { display: block; margin-left: auto; }
  .cab__acciones { display: none; }

  /* Menú desplegado: la navegación pasa a columna bajo la cabecera. */
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 64px;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 8px 18px 18px; background: var(--crema);
    border-bottom: 1px solid var(--linea); box-shadow: var(--sombra);
  }
  .nav.es-abierta { display: flex; }
  .nav a { padding: 13px 2px; border-bottom: 1px solid var(--linea); font-size: 15.5px; }
  .nav a:last-child { border-bottom: 0; }

  .enlace-flecha { width: 100%; justify-content: center; }

  .ayuda { padding: 58px 0 64px; }
  .ayuda details p { padding-right: 20px; }

  .pie__fila { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pie__enlaces { gap: 16px 22px; }
}

/* Quien pide menos movimiento no lo recibe: nada se anima. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}