/* ============================================================
   FdezGROWTH — Hoja de estilos
   Requiere tokens.css cargado antes.
   ============================================================ */

/* ---------------- Reset mínimo y base ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--texto-cuerpo);
  line-height: var(--lh-cuerpo);
  font-weight: var(--peso-cuerpo);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--peso-titulo);
  font-variation-settings: "wdth" 100;
}
p { margin: 0; }
img, svg { max-width: 100%; }

a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--acento-oscuro); }

:focus-visible { outline: var(--foco); outline-offset: var(--foco-offset); }

/* Salto al contenido: visible solo con teclado */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: var(--blanco);
  padding: var(--e-3) var(--e-4); z-index: 10;
  text-decoration: none;
}
.skip:focus { left: var(--e-4); top: var(--e-4); color: var(--blanco); }

/* ---------------- Papeles tipográficos ---------------- */
.t-hero {
  font-size: var(--texto-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-display);
  font-weight: var(--peso-display);
}
.t-h2 {
  font-size: var(--texto-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-titulo);
  font-weight: var(--peso-titulo);
}
.t-h3 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: var(--peso-titulo);
}
.t-entradilla {
  font-size: var(--texto-entradilla);
  line-height: var(--lh-entradilla);
  color: var(--text-secondary);
}
.t-pequeno { font-size: var(--texto-pequeno); line-height: 1.5; }
.t-etiqueta {
  font-size: var(--texto-etiqueta);
  line-height: var(--lh-etiqueta);
  font-weight: var(--peso-etiqueta);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  font-variation-settings: "wdth" 115;
  color: var(--text-secondary);
}
.t-num { font-variant-numeric: tabular-nums; }

/* Las etiquetas de sección abren con un trazo corto del acento: cose todas
   las secciones con el mismo gesto. Los números (01/02/03) van exentos. */
.t-etiqueta:not(.t-num)::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  margin-right: 0.9em;
  vertical-align: middle;
  background: var(--acento);
}
.medida { max-width: var(--medida-lectura); }
.suave { color: var(--text-secondary); }
.enfasis { color: var(--text-emphasis); }

/* ---------------- Retícula ---------------- */
.wrap {
  max-width: var(--contenedor-max);
  margin: 0 auto;
}
.seccion { padding: var(--seccion-y) var(--canal); }
.seccion--continua { padding: 0 var(--canal) var(--seccion-y); }
.seccion--alt { background: var(--surface-alt); }
.pila { display: grid; gap: var(--e-6); }

/* ---------------- Marca ---------------- */
.marca {
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tinta);
}
.marca:hover { color: var(--tinta); }
.marca b { font-weight: 700; color: var(--tinta); }
.marca i { font-style: normal; font-weight: 400; color: var(--text-secondary); }

/* El logo se dimensiona en em: crece y encoge con el wordmark que acompaña. */
.marca__logo {
  height: 0.88em;
  width: auto;
  margin-right: 0.42em;
  vertical-align: -0.08em;
}

/* ---------------- Botón ---------------- */
.btn {
  font-family: var(--font-core);
  font-weight: 500;
  font-size: var(--texto-cuerpo);
  line-height: 1.2;
  letter-spacing: 0;
  padding: 14px 24px;
  border-radius: var(--radio-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
  background: var(--action-bg);
  color: var(--action-fg);
  border: none;
}
.btn:hover { background: var(--action-bg-hover); color: var(--action-fg); }

.btn--sec {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--action-secondary-border);
}
.btn--sec:hover {
  background: transparent;
  color: var(--tinta);
  border-color: var(--action-secondary-border-hover);
}
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ---------------- Tarjeta ----------------
   La usan el formulario y su mensaje de confirmación. */
.card {
  border-radius: var(--radio-tarjeta);
  padding: var(--e-6);
  box-shadow: none;
  background: var(--surface-card);
  border: var(--borde);
  color: var(--text-body);
}

/* ---------------- Cabecera ---------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}
.cabecera__inner {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 0 var(--canal);
  height: 68px;
  display: flex;
  align-items: center;
  gap: var(--e-8);
}
.cabecera__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e-8);
}
.nav { display: flex; font-size: var(--texto-pequeno); }
.nav a { color: var(--text-emphasis); text-decoration: none; }
.nav a:hover { color: var(--tinta); }

/* ---------------- Hero ---------------- */
.hero { padding: clamp(3rem, 7vw, 6.5rem) var(--canal) var(--seccion-y); }
.hero h1 { max-width: 19ch; }
.hero__acciones {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-top: var(--e-2);
}

/* ---------------- Rejilla de tarjetas ---------------- */
.rejilla--ancha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: var(--e-4);
}
.paso { display: grid; gap: var(--e-3); align-content: start; }
.paso p { font-size: var(--texto-pequeno); line-height: 1.6; }
.paso .t-etiqueta { color: var(--acento); }

/* ---------------- Franja inversa ---------------- */
.banda {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding: var(--seccion-y) var(--canal);
  scroll-margin-top: 68px;
  position: relative;
  overflow: hidden;
}

/* El logo, enorme y casi invisible, asomando por el canto. Marca la banda
   como territorio propio sin competir con el texto. */
.banda__filigrana {
  position: absolute;
  right: -3%;
  bottom: -12%;
  height: 118%;
  width: auto;
  fill: var(--pizarra-300);
  opacity: 0.07;
  pointer-events: none;
}
@media (max-width: 900px) { .banda__filigrana { display: none; } }

/* Los pasos se numeran en grande: son el esqueleto visual de la banda. */
.paso__num {
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--acento);
}
.banda h2 { max-width: 28ch; color: var(--text-on-inverse); }
.banda .t-etiqueta { color: var(--text-on-inverse-secondary); }
.banda h3 { color: var(--papel); }
.banda p { color: var(--text-on-inverse-secondary); }

/* ---------------- FAQ ---------------- */
.faq { max-width: 760px; border-top: 1px solid var(--border-subtle); }
.faq details { border-bottom: 1px solid var(--border-subtle); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-6);
  padding: 20px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary { transition: color var(--transicion); }
.faq summary:hover { color: var(--acento); }
.faq summary:hover .faq-i span { background: var(--acento); }
.faq p { padding: 0 0 var(--e-6); color: var(--text-emphasis); }

.faq-i { position: relative; width: 14px; height: 14px; flex: none; }
.faq-i span {
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 1.5px;
  background: var(--text-secondary);
  transition: transform var(--transicion);
}
.faq-i span:last-child { transform: rotate(90deg); }
details[open] .faq-i span:last-child { transform: rotate(0deg); }

/* ---------------- Formulario ---------------- */
.form { display: grid; gap: 20px; max-width: 440px; }
.form.card, .gracias.card { padding: clamp(var(--e-6), 4vw, var(--e-8)); }
.form.card { max-width: 480px; }
.campo { display: grid; gap: var(--e-2); }
.campo label { font-size: var(--texto-pequeno); font-weight: 500; color: var(--tinta); }
.campo input {
  font-family: var(--font-core);
  font-size: var(--texto-cuerpo);
  line-height: 1.4;
  color: var(--tinta);
  padding: 13px 14px;
  border-radius: var(--radio-control);
  border: 1px solid var(--border-subtle);
  background: var(--blanco);
  width: 100%;
  appearance: none;
}
.campo input:hover { border-color: var(--border-strong); }
.ayuda { font-size: var(--texto-pequeno); color: var(--text-secondary); }

.consentimiento {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-size: var(--texto-pequeno);
  line-height: 1.5;
  color: var(--text-secondary);
}
.consentimiento input { margin: 3px 0 0; flex: none; accent-color: var(--acento); }
.consentimiento a { color: var(--text-secondary); }
.consentimiento a:hover { color: var(--tinta); }

.form__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  flex-wrap: wrap;
  margin-top: var(--e-1);
}
.gracias {
  display: grid;
  gap: var(--e-3);
  max-width: var(--medida-lectura);
}
.error-envio { color: var(--text-error); font-size: var(--texto-pequeno); }
[hidden] { display: none !important; }

/* ---------------- Pie ---------------- */
.pie {
  border-top: 1px solid var(--border-subtle);
  /* El padding crece con la pantalla: con 40px fijos el pie se amontonaba
     en móvil, donde cada dato se va a su propia línea. */
  padding: clamp(var(--e-12), 9vw, var(--e-16)) var(--canal);
}
.pie__inner { display: grid; gap: var(--e-6); }

.pie p {
  font-size: var(--texto-pequeno);
  line-height: 1.7;
  color: var(--text-secondary);
}
.pie .marca { font-size: inherit; }

/* En pantalla ancha los datos van en fila, separados por puntos que pone el
   CSS. Al apilarse en móvil, esos puntos sobran y se retiran solos. */
.pie__datos,
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
}
.pie__datos > * + *::before,
.pie__legal > * + *::before {
  content: "·";
  margin-right: var(--e-4);
  color: var(--text-muted);
}

.pie a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-subtle);
  transition: color var(--transicion), text-decoration-color var(--transicion);
}
.pie a:hover { color: var(--tinta); text-decoration-color: var(--acento); }

/* ---------------- Animación de entrada ---------------- */
[data-reveal].pre-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------------- Páginas de texto largo (legales) ---------------- */
.legal { padding: var(--seccion-y) var(--canal); }
.legal__inner { max-width: 44rem; margin: 0 auto; }

.legal h1 {
  font-size: var(--texto-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-titulo);
  margin-bottom: var(--e-3);
}
.legal h2 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: var(--e-12) 0 var(--e-4);
  padding-top: var(--e-6);
  border-top: 1px solid var(--border-subtle);
}
.legal h2:first-of-type { margin-top: var(--e-8); }
.legal p, .legal li { color: var(--text-emphasis); }
.legal p + p { margin-top: var(--e-4); }
.legal ul { margin: var(--e-4) 0 0; padding-left: var(--e-6); display: grid; gap: var(--e-2); }
.legal dl { margin: var(--e-4) 0 0; display: grid; gap: var(--e-3); }
.legal dt { font-weight: 500; color: var(--tinta); }
.legal dd { margin: 0; color: var(--text-emphasis); }
.legal__fecha { color: var(--text-muted); font-size: var(--texto-pequeno); }
.legal__volver { margin-top: var(--e-16); }

/* ============================================================
   Ajustes para móvil
   Todo el comportamiento por debajo de 660px vive aquí, junto.
   ============================================================ */
@media (max-width: 660px) {

  /* Tipografía. El titular salía a 38,8px y ocupaba seis líneas; con el
     interlineado de escritorio (1,06) se leía como un bloque macizo. */
  :root {
    --texto-hero: clamp(2rem, 8.2vw, 2.6rem);      /* 38,8px → 32px */
    --lh-hero: 1.12;                                /* 1,06 → respira */
    --texto-h2: clamp(1.5rem, 6.4vw, 1.875rem);    /* 29,4px → 25px */
    --seccion-y: clamp(3.5rem, 13vw, 4.5rem);      /* 64px → 56px */
    --track-etiqueta: 0.1em;                        /* que la etiqueta quepa */
  }

  /* Ritmo vertical. 24px entre cada elemento deja el bloque desparramado
     cuando el ancho es de 350px. */
  .pila { gap: 20px; }
  .hero { padding-top: var(--e-8); }

  /* Cabecera: solo la marca, centrada. El enlace no cabe y el botón partía
     en dos líneas; la llamada a la acción la recoge el hero. */
  .cabecera__acciones { display: none; }
  .cabecera__inner { justify-content: center; }

  /* Botones a ancho completo: se aciertan con el pulgar sin mirar. */
  .hero__acciones .btn,
  .form__acciones .btn { width: 100%; }
  .form__acciones { gap: var(--e-4); }

  /* Los tres pasos, algo más juntos ya que se apilan. */
  .rejilla--ancha { gap: var(--e-8); }
  .paso__num { font-size: 28px; }

  /* FAQ: seis preguntas a 40px de alto cada una son mucho scroll. */
  .faq summary { padding: 18px 0; font-size: 17px; gap: var(--e-4); }
  .faq p { padding-bottom: 20px; }

  /* Pie: cada dato en su línea y sin los puntos de separación. */
  .pie__inner { gap: var(--e-8); }
  .pie__datos { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
  .pie__datos > * + *::before { content: none; }
  .pie__datos .marca { margin-bottom: var(--e-1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}