/* =========================================================
   Fuentes autohospedadas.
   Se sirven desde el propio dominio para no depender de
   fonts.googleapis.com, que bloqueaba el render ~1s.
   Subconjunto latino, los mismos ficheros que sirve Google.
   ========================================================= */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Galith Gazal - sistema de diseño
   Tipografía: Fraunces (display) + Inter (cuerpo)
   Paleta: cálida con acento lila [A5]
   Sin emojis en la interfaz. Íconos SVG inline. [R5]
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --bg:            #F7F8FC;
  --bg-warm:       #EDEFF9;
  --bg-card:       #FFFFFF;
  --ink:           #2D2D4E;
  --ink-2:         #4B4B6B;
  --muted:         #5E5E7E;
  --line:          #E2E5F3;
  --line-strong:   #C9CEE6;
  --accent:        #6B4FC8;
  --accent-hover:  #5B3DA8;
  --accent-soft:   #ECE8FA;
  --accent-line:   #D3C9F2;
  /* Rosa de su marca (#F990CF en sus PDFs). Solo decorativo:
     no pasa contraste, así que nunca se usa para texto. */
  --pink:          #F08FC4;
  --pink-soft:     #FBE6F2;

  /* Tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2.05rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.85rem + 2.7vw, 4.1rem);

  /* Espacio */
  --sp-1: 0.5rem;
  --sp-2: 0.875rem;
  --sp-3: 1.35rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;

  --radius:    14px;
  --radius-lg: 24px;
  /* Radio contenido para botones y campos. El radio total (999px)
     se lee como plantilla genérica, así que no se usa. */
  --radius-cta:  7px;

  --shadow-sm: 0 1px 2px rgba(45, 45, 78, 0.05), 0 2px 8px rgba(45, 45, 78, 0.04);
  --shadow-md: 0 4px 12px rgba(45, 45, 78, 0.06), 0 12px 32px rgba(45, 45, 78, 0.07);

  --wrap: 1120px;
  --wrap-narrow: 720px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
/* El atributo hidden debe ganar siempre: varias reglas de abajo
   declaran display:flex o display:block y lo estaban pisando. */
[hidden][hidden] { display: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

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

/* ---------- Utilidades ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .wrap { padding-inline: 2rem; } }

.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--warm { padding-block: clamp(4.75rem, 11vw, 8.5rem); }

/* Pausas amplias y transiciones contenidas crean un ritmo menos mecánico. */
.hero + .section { padding-block: clamp(5.5rem, 12vw, 9rem); }
.section--warm + .section:not(.section--warm) { padding-block: clamp(4rem, 8vw, 6.25rem); }
.section:not(.section--warm) + .section--warm { padding-block: clamp(5rem, 11vw, 8rem); }

.section--warm { background: var(--bg-warm); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.is-hidden { display: none; }

/* Etiqueta pequeña sobre los títulos */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent-line);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-2);
}

.section-head { margin-bottom: var(--sp-4); }
.section-head h2 { font-size: var(--step-3); margin-top: var(--sp-2); }
.section-head p { margin-top: var(--sp-2); max-width: 56ch; }

@media (min-width: 768px) {
  .section-head { margin-bottom: var(--sp-5); }
}

/* ---------- Botones ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  max-width: 100%;
  min-height: 48px;
  padding: 0.7rem 1.15rem;
  border: 0;
  border-block: 1px solid currentColor;
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--accent-soft) 0 50%, transparent 50% 100%);
  background-position: 100% 0;
  background-size: 205% 100%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  text-decoration: none;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  transition: background-position 0.32s cubic-bezier(.2,.7,.2,1),
              color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease;
}
.btn:hover { background-position: 0 0; transform: translateX(3px); }
.btn:active { transform: translateX(1px); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  box-shadow: none;
}
.btn svg {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.btn:hover svg { transform: translateX(2px); }

.btn--primary { color: var(--accent-hover); }
.btn--primary:hover { color: var(--ink); }

.btn--ghost {
  border-block-color: var(--line-strong);
  background-image: linear-gradient(90deg, var(--bg-warm) 0 50%, transparent 50% 100%);
  color: var(--ink-2);
}
.btn--ghost:hover { border-block-color: var(--accent-line); color: var(--accent-hover); }

.btn--block {
  width: 100%;
  padding-inline: 0.9rem;
}

.newsletter .btn--primary {
  border-block-color: #C9BEEA;
  background-image: linear-gradient(90deg, rgba(201, 190, 234, 0.16) 0 50%, transparent 50% 100%);
  color: #FFFFFF;
}
.newsletter .btn--primary:hover { color: #FFFFFF; }
.newsletter .btn--primary:focus-visible { outline-color: #C9BEEA; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 calc(100% - 8px);
  background-repeat: no-repeat;
  background-size: 0 1px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--accent);
  text-decoration: none;
  transition: background-size 0.28s ease, color 0.2s ease, gap 0.2s ease;
}
.link-arrow:hover { background-size: 100% 1px; color: var(--accent-hover); gap: 0.6rem; }
.link-arrow:focus-visible { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn svg,
  .link-arrow { transition: none; }
  .btn:hover,
  .btn:active,
  .btn:hover svg { transform: none; }
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 248, 252, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 68px;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  white-space: nowrap;
}
.brand span { color: var(--accent); }

.nav { display: none; }
.nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
}
.nav a {
  font-size: 0.94rem;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.4rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.header__cta { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  border-radius: var(--radius);
  color: var(--ink);
}
.nav-toggle:hover { background: var(--bg-warm); }

@media (min-width: 900px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* Menú móvil */
.mobile-nav {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 99;
  background: var(--bg);
  padding: var(--sp-4) 1.25rem var(--sp-5);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mobile-nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 900px) { .mobile-nav { display: none; } }

.mobile-nav ul { list-style: none; padding: 0; display: grid; gap: 0.25rem; }
.mobile-nav a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  text-decoration: none;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: var(--sp-4); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--sp-5) var(--sp-6);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -25%;
  width: 70vw;
  height: 70vw;
  max-width: 620px;
  max-height: 620px;
  background: radial-gradient(circle, var(--accent-soft) 0%, rgba(236, 232, 250, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--sp-5);
}

.hero h1 {
  font-size: var(--step-4);
  margin-top: var(--sp-3);
  font-weight: 400;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

.hero__lead { margin-top: var(--sp-3); max-width: 46ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.hero__media { position: relative; justify-self: center; width: 100%; max-width: 380px; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 78%;
  background: var(--bg-warm);
  border-radius: var(--radius-lg) var(--radius-lg) 120px 120px;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(45, 45, 78, 0.12));
}

@media (min-width: 900px) {
  .hero { padding-block: var(--sp-6) var(--sp-7); }
  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: var(--sp-5);
  }
  .hero__media { max-width: 420px; }
}

/* Franja de credenciales */
.creds {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-3);
}
.creds ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--sp-3);
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.creds li { display: flex; align-items: center; gap: var(--sp-3); }
.creds li:not(:last-child)::after {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* ---------- Cita ---------- */
.quote { text-align: center; }
.quote blockquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  max-width: 32ch;
  margin-inline: auto;
  font-style: italic;
  font-weight: 300;
}
.quote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Tarjetas ---------- */
.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p { font-size: 0.97rem; color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }

.card__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

/* Bloque destacado (servicios / GROU) */
.feature {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; padding: var(--sp-5); gap: var(--sp-5); }
  .feature--flip > *:first-child { order: 2; }
}

.feature h2 { font-size: var(--step-2); margin-top: var(--sp-2); }
.feature p { margin-top: var(--sp-2); }
.feature .btn { margin-top: var(--sp-3); }

.spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec div { background: var(--bg-warm); padding: var(--sp-3); }
.spec dt {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec dd {
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}

.checklist { list-style: none; padding: 0; display: grid; gap: 0.7rem; margin-top: var(--sp-3); }
.checklist li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.97rem; }
.checklist svg { flex-shrink: 0; margin-top: 0.25rem; color: var(--accent); }

/* Aviso de contenido en construcción (GROU) */
.notice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  font-size: 0.94rem;
  color: var(--accent-hover);
  margin-top: var(--sp-3);
}
.notice svg { flex-shrink: 0; margin-top: 0.15rem; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--ink);
  color: #DDD9EE;
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
@media (min-width: 768px) { .newsletter { padding: var(--sp-6) var(--sp-5); } }

.newsletter h2 { color: #FFF; font-size: var(--step-3); }
.newsletter p { margin-top: var(--sp-2); color: #ADA9C6; max-width: 46ch; margin-inline: auto; }
.newsletter .eyebrow { color: #C9BEEA; }
.newsletter .eyebrow::before { background: rgba(201, 190, 234, 0.4); }

.newsletter__form {
  display: grid;
  gap: var(--sp-2);
  max-width: 440px;
  margin: var(--sp-4) auto 0;
  text-align: left;
}
.newsletter__form input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-cta);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  min-height: 48px;
}
.newsletter__form input::placeholder { color: #9490B0; }
.newsletter__form input:focus-visible { outline-color: #C9BEEA; }

.newsletter__note { font-size: var(--step--1); color: #9490B0; margin-top: var(--sp-3); }
.newsletter__note a { color: #C9BEEA; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-5) var(--sp-4);
  background: var(--bg-warm);
}
.footer__top {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); }
}

.footer h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer a { text-decoration: none; font-size: 0.95rem; }
.footer a:hover { color: var(--accent); }
.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  margin-top: var(--sp-2);
  max-width: 24ch;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.social { display: flex; gap: 0.6rem; margin-top: var(--sp-3); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--muted);
}

/* ---------- Botón flotante de WhatsApp ---------- */
/* Oculto por defecto. app.js lo muestra solo si hay número en config.js [A6] */
.wa-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease;
}
.wa-fab[data-ready="true"] { display: inline-flex; }
.wa-fab:hover { transform: scale(1.06); }
@media (min-width: 768px) { .wa-fab { right: 1.75rem; bottom: 1.75rem; } }

/* ---------- Animación de entrada ----------
   Se aplica solo con la clase .js en <html>, que pone un script
   inline en el <head>. Sin JS el contenido se ve normal. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Páginas interiores
   ========================================================= */

.page-hero {
  position: relative;
  padding-block: var(--sp-5) var(--sp-4);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60vw; height: 60vw;
  max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, var(--accent-soft) 0%, rgba(241,235,249,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero__inner { position: relative; }
.page-hero h1 { font-size: var(--step-4); margin-top: var(--sp-3); font-weight: 400; }
.page-hero h1 em { font-style: italic; color: var(--accent); font-variation-settings: "SOFT" 60, "WONK" 1; }
.page-hero .lead { margin-top: var(--sp-3); max-width: 54ch; }

@media (min-width: 900px) {
  .page-hero { padding-block: var(--sp-6) var(--sp-5); }
  .page-hero--split .page-hero__inner {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--sp-5);
    align-items: center;
  }
}

.page-hero__media { position: relative; max-width: 340px; margin-top: var(--sp-4); }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 76%;
  background: var(--bg-warm);
  border-radius: var(--radius-lg) var(--radius-lg) 110px 110px;
  z-index: -1;
}
.page-hero__media img { width: 100%; filter: drop-shadow(0 16px 36px rgba(43,35,32,0.12)); }
@media (min-width: 900px) { .page-hero__media { margin-top: 0; justify-self: end; } }

/* Migas de pan */
.crumbs { font-size: var(--step--1); color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin-inline: 0.4rem; color: var(--line-strong); }

/* Texto largo */
.prose { max-width: 62ch; }
.prose > * + * { margin-top: var(--sp-3); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-5); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-4); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  border-left: 2px solid var(--accent-line);
  padding-left: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

/* Índice editorial de formación */
.pills {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
  border-bottom: 1px solid var(--line-strong);
  counter-reset: formacion;
}

.pills li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
  counter-increment: formacion;
}

.pills li::before {
  content: counter(formacion, decimal-leading-zero);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (min-width: 700px) {
  .pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4);
  }
}

/* Bloque de datos (pagos, políticas) */
.datos { display: grid; gap: var(--sp-3); }
@media (min-width: 700px) { .datos { grid-template-columns: 1fr 1fr; } }
.datos > div {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.datos h3 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2); }
.datos ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; font-size: 0.95rem; }
.datos li { display: flex; gap: 0.5rem; align-items: flex-start; }
.datos li::before {
  content: "";
  flex-shrink: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.62rem;
}

/* FAQ */
.faq { display: grid; gap: 0.6rem; max-width: 62ch; }
.faq details {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.faq details[open] { border-color: var(--accent-line); }
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq p { margin-top: var(--sp-2); font-size: 0.97rem; }

/* =========================================================
   Formularios de captura
   ========================================================= */

.recurso {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.recurso h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.recurso > p { font-size: 0.97rem; }
.recurso__meta {
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--sp-2);
}
.recurso form { margin-top: auto; padding-top: var(--sp-3); display: grid; gap: 0.5rem; }

.field { display: grid; gap: 0.3rem; }
.field input {
  width: 100%;
  padding: 0.7rem 1rem;
  min-height: 46px;
  border-radius: var(--radius-cta);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
}
.field input::placeholder { color: var(--muted); }
.field input:disabled { background: var(--bg-warm); color: var(--muted); cursor: not-allowed; }

.form-msg {
  font-size: var(--step--1);
  line-height: 1.5;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  margin-top: 0.2rem;
}
.form-msg[data-tipo="ok"]    { background: #E9F5EC; color: #2A6B38; }
.form-msg[data-tipo="error"] { background: #FBEBEF; color: #96305A; }
.form-msg[data-tipo="info"]  { background: var(--accent-soft); color: var(--accent-hover); }

.form-pendiente {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
  background: var(--bg-warm);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-top: 0.2rem;
}
.form-pendiente svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--accent); }
.form-pendiente a { color: var(--accent); }

/* La newsletter va sobre fondo oscuro */
.newsletter .form-msg[data-tipo="info"] { background: rgba(201,190,234,0.16); color: #DCC9F5; }
.newsletter .form-pendiente { background: rgba(255,255,255,0.07); color: #ADA9C6; }
.newsletter .form-pendiente svg { color: #C9BEEA; }
.newsletter .form-pendiente a { color: #C9BEEA; }

/* =========================================================
   Página 404
   ========================================================= */
.error-page {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-6);
}
.error-page h1 { font-size: var(--step-4); font-weight: 400; }
.error-page p { margin-top: var(--sp-3); max-width: 44ch; margin-inline: auto; }
.error-page .hero__actions { justify-content: center; }

/* Botón deshabilitado: tiene que verse deshabilitado */
.btn:disabled,
.btn[disabled] {
  border-block-color: var(--line-strong);
  background-image: none;
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover,
.btn[disabled]:hover { color: var(--muted); transform: none; }
.btn:disabled:hover svg,
.btn[disabled]:hover svg { transform: none; }
.newsletter .btn:disabled,
.newsletter .btn[disabled] {
  border-block-color: #9490B0;
  color: #ADA9C6;
}

/* =========================================================
   Secciones nuevas (copy de Galith, ago 2026)
   ========================================================= */

/* Arte abstracto de marca */
.arte {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "¿Te pasa algo de esto?" */
.sintomas {
  list-style: none;
  width: 100%;
  max-width: 48rem;
  padding: 0;
  display: grid;
  gap: clamp(var(--sp-3), 4vw, var(--sp-4));
}
.sintomas li {
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.sintomas__cierre {
  max-width: 36ch;
  margin-top: clamp(var(--sp-5), 8vw, var(--sp-6));
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--accent);
  font-variation-settings: "SOFT" 50, "WONK" 1;
}

/* "Algunos temas que podemos trabajar" */
.temas {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-2) var(--sp-3);
}
@media (min-width: 760px) { .temas { grid-template-columns: 1fr 1fr; } }
.temas li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 1.02rem;
  line-height: 1.5;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.temas li:hover { background: var(--bg-card); border-color: var(--accent-line); transform: translateY(-1px); }
.temas svg { flex-shrink: 0; margin-top: 0.28rem; color: var(--accent); }

/* Nota lateral del bloque "Cómo trabajo" */
.nota-lateral {
  position: relative;
  background: linear-gradient(145deg, var(--bg-card), var(--accent-soft));
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  font-size: 0.98rem;
  box-shadow: inset 4px 0 0 var(--accent);
}
.nota-lateral strong { color: var(--accent-hover); }

/* Las cuatro preguntas del Sobre mí */
.preguntas {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  counter-reset: q;
}
@media (min-width: 820px) { .preguntas { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); } }
.preguntas li {
  counter-increment: q;
  position: relative;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.preguntas li:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.preguntas li::before {
  content: "0" counter(q);
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* Bloque visual de GROU */
.grou-visual {
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  text-align: center;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 25%, rgba(144, 112, 226, 0.22), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(240, 143, 196, 0.18), transparent 55%),
    var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.34), var(--shadow-sm);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.feature:hover .grou-visual { transform: rotate(-1deg) scale(1.015); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.46), var(--shadow-md); }
.grou-visual__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--accent);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.grou-visual__txt {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-hover);
}

/* Tarjeta de recurso con arte, en la home */
.card--arte { padding: 0; overflow: hidden; background: var(--bg-card); }
.card--arte .card__media {
  display: block;
  aspect-ratio: 5 / 3;
  background: var(--accent-soft);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.card--arte .card__media .arte { transition: transform 0.7s cubic-bezier(.2,.6,.2,1), filter 0.35s ease; }
.card--arte:hover .card__media .arte { transform: scale(1.035); filter: saturate(1.06); }
.card--arte .card__cuerpo { padding: var(--sp-4); display: grid; align-content: start; gap: var(--sp-1); }
.card--arte .card__cuerpo p { margin-top: auto; }
.card--arte h3 a { text-decoration: none; }
.card--arte h3 a:hover { color: var(--accent); }
.card--arte h3 a:focus-visible { color: var(--accent-hover); }

/* Página de recursos: lista en filas */
.lista-recursos { display: grid; gap: clamp(2rem, 5vw, 4rem); }

.recurso {
  display: grid;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: 6rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow-sm);
}
.recurso:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
@media (min-width: 860px) {
  .recurso { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: stretch; }
  .recurso:nth-child(even) { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .recurso:nth-child(even) .recurso__media { order: 2; }
}

.recurso__media { background: var(--accent-soft); aspect-ratio: 5 / 3; overflow: hidden; border-bottom: 1px solid var(--line); }
.recurso__media .arte { transition: transform 0.8s cubic-bezier(.2,.6,.2,1), filter 0.35s ease; }
.recurso:hover .recurso__media .arte { transform: scale(1.025); filter: saturate(1.05); }
@media (min-width: 860px) { .recurso__media { aspect-ratio: auto; min-height: 100%; } }

.recurso__cuerpo { padding: var(--sp-4); display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 860px) { .recurso__cuerpo { padding: var(--sp-5); } }
.recurso__cuerpo h3 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.recurso__cuerpo > p { font-size: 1.02rem; }

.recurso__meta {
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--sp-3);
}
.recurso form { margin-top: var(--sp-3); display: grid; gap: 0.5rem; max-width: 30rem; }

/* Nota personal dentro de un recurso (guía de duelo) */
.recurso__nota {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-left: 2px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  line-height: 1.6;
  display: grid;
  gap: var(--sp-2);
}
.recurso__cita {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--accent-hover);
  font-variation-settings: "SOFT" 50, "WONK" 1;
}

/* El hero ya no lleva el círculo lila: el arte hace ese trabajo */
.hero__media::after { background: var(--bg-warm); }

/* =========================================================
   Portadas de guía.

   La cifra es lo que comunica: dice exactamente qué te llevas
   (5 razones, 7 señales, 7 capítulos). El SVG geométrico queda
   detrás, muy tenue, cumpliendo su papel honesto: textura.

   La cifra es texto real, no imagen, así que usa Fraunces de
   verdad, pesa cero y escala perfecto.
   ========================================================= */
.portada {
  position: relative;
  text-decoration: none;
  display: grid;
  place-content: center;
  aspect-ratio: 8 / 5;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-line);
  overflow: hidden;
  text-align: center;
}
.portada__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  mix-blend-mode: multiply;
}
.portada__indice {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 3.6rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--accent);
  opacity: 0.85;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.portada__tema {
  position: relative;
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--accent-hover);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

.card--guia {
  padding: 0;
  overflow: hidden;
  border-color: var(--line-strong);
}
.card--guia .card__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sp-4);
}
.card--guia h3 a {
  display: block;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.card--guia { position: relative; }
/* Enlace extendido: el <a> del título cubre toda la tarjeta, así que
   se puede pulsar en cualquier punto sin duplicar enlaces en el HTML. */
.card--guia h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card--guia .card__cuerpo { display: flex; flex-direction: column; }
/* El aviso de acción va al final, después de la bajada. */
.card--guia .card__cuerpo::after {
  content: "Leer guía  \2192";
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--accent-hover);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.card--guia:hover .card__cuerpo::after,
.card--guia:focus-within .card__cuerpo::after {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.card--guia:hover,
.card--guia:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card--guia:hover h3 a,
.card--guia:focus-within h3 a {
  color: var(--accent-hover);
  text-decoration-color: var(--accent);
}
.card--guia:hover h3 a::after,
.card--guia:focus-within h3 a::after {
  color: var(--accent);
  text-decoration-color: var(--accent);
  transform: translateX(0.25rem);
}
.card--guia:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.card--guia h3 a:focus-visible { outline: none; }
.card--guia:hover .portada__fondo,
.card--guia:focus-within .portada__fondo { transform: scale(1.03); }
.portada__fondo { transition: transform 0.6s cubic-bezier(.2,.6,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .card--guia,
  .card--guia h3 a,
  .card--guia h3 a::after,
  .card--guia .portada__fondo { transition: none; }
  .card--guia:hover,
  .card--guia:focus-within,
  .card--guia:hover h3 a::after,
  .card--guia:focus-within h3 a::after { transform: none; }
}

/* Página de recursos: una sola columna, portada arriba */
.recurso { grid-template-columns: 1fr; }
@media (min-width: 860px) { .recurso { grid-template-columns: 1fr; } }
.recurso__media.portada { aspect-ratio: 16 / 6; }
@media (min-width: 860px) { .recurso__media.portada { aspect-ratio: 21 / 6; } }

/* =========================================================
   Entrada del retrato y firma

   Nada de animar su cara: micro-animar el rostro de una persona
   real cae en el valle inquietante, y su marca se sostiene en
   presencia auténtica. El movimiento es de cámara, una sola vez
   al entrar, y después queda quieto.
   ========================================================= */
.hero__media { position: relative; }

.js .hero__foto {
  opacity: 0;
  transform: scale(1.06);
  animation: entrarRetrato 1.6s cubic-bezier(.16,.8,.24,1) 0.25s forwards;
  transform-origin: 50% 70%;
  will-change: transform, opacity;
}
@keyframes entrarRetrato { to { opacity: 1; transform: scale(1); } }

/* La sombra lila entra con la foto.
   OJO: esta animación termina en el transform final de la sombra, que
   incluye su desplazamiento. Si aquí se pone transform:none, se borra
   el offset y la sombra desaparece detrás de la foto. */
.js .hero__media::after {
  transform: translate(18px, 18px) scaleY(0.9);
  transform-origin: bottom;
  opacity: 0;
  animation: entrarForma 1.4s cubic-bezier(.16,.8,.24,1) 0.1s forwards;
}
@keyframes entrarForma {
  to { transform: translate(18px, 18px) scaleY(1); opacity: 1; }
}

/* Firma manuscrita que se dibuja sola */
.firma {
  margin: var(--sp-4) auto 0;
  width: min(230px, 55vw);
  color: var(--accent);
}
.firma svg { width: 100%; height: auto; display: block; }
.firma svg path {
  fill: var(--accent);
  fill-opacity: 0;
  stroke: var(--accent);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.firma[data-escribiendo="true"] svg path {
  animation: trazo 1s ease forwards, rellenar 0.5s ease forwards;
}
@keyframes trazo   { to { stroke-dashoffset: 0; } }
@keyframes rellenar{ to { fill-opacity: 1; stroke-opacity: 0; } }
.firma svg.sin-animar path { fill-opacity: 1; stroke: none; }

/* Entrada escalonada del hero */
.js .hero h1 > span.palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: subir 0.75s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes subir { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero h1 > span.palabra { opacity: 1; transform: none; animation: none; }
  .firma[data-escribiendo="true"] svg path { animation: none; fill-opacity: 1; stroke: none; }
  .js .hero__foto { opacity: 1; transform: none; animation: none; }
  .js .hero__media::after { opacity: 1; transform: none; animation: none; }
}

/* El libro se presenta como una pieza editorial: la ilustración abre el
   relato y el texto entra en ella, sin convertirlo en una ficha de producto. */
.libro {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  max-width: 66rem;
  margin-inline: auto;
  padding-block: var(--sp-3);
  border-block: 1px solid var(--line-strong);
}

.libro__portada {
  position: relative;
  width: min(100%, 35rem);
  margin-inline: auto;
  padding: clamp(0.65rem, 3vw, var(--sp-3));
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.libro__portada picture { display: block; }
.libro__portada img {
  width: 100%;
  border-radius: var(--radius);
}

.libro__texto {
  position: relative;
  min-width: 0;
  padding: var(--sp-3) 0 var(--sp-2);
}
.libro__texto h2 {
  max-width: 12ch;
  margin-top: var(--sp-2);
  font-size: var(--step-3);
  font-weight: 400;
}
.libro__texto > .lead {
  max-width: 34ch;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
}

.libro__creditos {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  line-height: 1.75;
  letter-spacing: 0.025em;
  color: var(--muted);
}

.libro__nota {
  max-width: 42ch;
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}
.libro__nota + .btn { margin-top: var(--sp-3); }

@media (min-width: 860px) {
  .libro {
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    gap: 0;
    align-items: start;
    padding-block: var(--sp-5);
  }
  .libro__portada {
    width: 100%;
    margin: 0;
    padding: var(--sp-3);
    /* El bloque de texto se monta -sp-5 sobre esta columna. Sin este
       margen extra a la derecha, la ilustración quedaba tapada y se
       perdía el crédito de la ilustradora. */
    padding-right: calc(var(--sp-5) + var(--sp-4));
  }
  .libro__texto {
    z-index: 1;
    margin: var(--sp-5) 0 var(--sp-4) calc(var(--sp-5) * -1);
    padding: var(--sp-5);
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
  }
}

/* Texto de Galith sobre su hijo. Se separa del resto para que se lea
   como su voz y no como copy de producto. */
.libro__nota-autora {
  margin-top: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--accent-line);
  display: grid;
  gap: var(--sp-2);
}
.libro__nota-autora p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.libro__nota-autora p:first-child { color: var(--ink); }
.libro__nota-autora em {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--ink);
}

/* La sección del libro medía 1379px de alto y no cabía en una pantalla
   de portátil: al llegar por el ancla #libro, el botón de compra quedaba
   debajo del pliegue. Se comprime el ritmo vertical sin apretar el texto. */
#libro.section { padding-block: var(--sp-5); }
@media (min-width: 860px) {
  #libro.section { padding-block: var(--sp-5); }
  .libro { padding-block: var(--sp-3); align-items: center; }
  .libro__portada { padding: var(--sp-2); padding-right: calc(var(--sp-4) + var(--sp-3)); }
  .libro__texto { margin-block: var(--sp-3); padding: var(--sp-4); }
  .libro__texto h2 { font-size: var(--step-2); }
  .libro__texto > .lead { font-size: var(--step-1); }
}
.libro__nota-autora { margin-top: var(--sp-3); gap: 0.55rem; }
.libro__nota-autora p { font-size: 0.97rem; line-height: 1.6; }
.libro__creditos { margin-top: var(--sp-3); }
.libro__nota { margin-top: var(--sp-2); }
.libro__nota + .btn { margin-top: var(--sp-2); }
@media (min-width: 860px) {
  .libro__texto { padding: var(--sp-3) var(--sp-4); margin-block: var(--sp-2); }
  .libro__texto > .lead { margin-top: var(--sp-1); }
  .libro__creditos { margin-top: var(--sp-2); line-height: 1.6; }
  /* Logística y botón en la misma línea: ahorra una fila entera */
  .libro__nota {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    max-width: 26ch;
  }
  .libro__nota + .btn { margin-top: var(--sp-2); }
}
@media (min-width: 860px) {
  /* Último ajuste de altura: el relato baja medio punto de interlínea.
     Por debajo de esto habría que recortar el texto de Galith, y eso
     no se toca. */
  .libro__nota-autora p { font-size: 0.95rem; line-height: 1.55; }
  .libro__nota-autora { gap: 0.45rem; padding-left: var(--sp-2); }
  .libro { padding-block: var(--sp-2); }
}

/* =========================================================
   Ejercicio "La historia que te cuentas"
   ========================================================= */
.ejercicio__aviso {
  margin-top: var(--sp-3);
  max-width: 52ch;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
  padding-left: var(--sp-2);
  border-left: 2px solid var(--line-strong);
}
.page-hero .btn { margin-top: var(--sp-4); }

.escenas { list-style: none; padding: 0; margin: 0; counter-reset: esc; }

.escena__num {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.escena h2 { font-size: var(--step-2); margin-top: var(--sp-2); }
.escena__sit {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.escena__preg { margin-top: var(--sp-3); color: var(--ink-2); }

.ops { list-style: none; padding: 0; margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }

.op {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.2s ease, background-color 0.2s ease,
              transform 0.2s ease, opacity 0.2s ease;
}
.op:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateX(3px);
}
.op:disabled { cursor: default; }
.op[data-estado="elegida"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  border-left-width: 3px;
}
.op[data-estado="descartada"] { opacity: 0.4; }

.op__fb {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-warm);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-2);
  font-size: 0.97rem;
  line-height: 1.65;
}
.op__nombre {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--accent-hover);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.op__alt { color: var(--ink); }

.escena__sig { margin-top: var(--sp-4); }

/* Resultado */
.resultado {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-strong);
}
.resultado h2 { font-size: var(--step-3); margin-top: var(--sp-2); }
.resultado > p { margin-top: var(--sp-3); max-width: 56ch; }
.resultado__otro {
  margin-top: var(--sp-2);
  font-size: 0.97rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.resultado__resto { margin-top: var(--sp-4); }
.resultado__cierre {
  margin-top: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--accent-line);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  max-width: 52ch;
}
.resultado .hero__actions { margin-top: var(--sp-4); }

/* Sin JS todo queda visible como artículo; con JS se va de una en una */
.escenas[data-modo="guiado"] .escena { padding-block: var(--sp-2); }
.escenas:not([data-modo]) .escena + .escena {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* Forma original recuperada: la foto en arco, apoyada sobre una sombra
   lila desplazada que asoma por detrás. La foto es una fotografía completa,
   así que llena la forma en lugar de flotar recortada sobre ella. */
.hero__media, .page-hero__media { position: relative; aspect-ratio: 4 / 5; }
.hero__media { max-width: 400px; }

.hero__media .hero__foto,
.page-hero__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
}

/* La sombra lila detrás, desplazada, con la misma silueta */
.hero__media::after,
.page-hero__media::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate(18px, 18px);
  /* Lila de su paleta oficial (#AEBAEF), rebajado: se ve la silueta
     detrás sin competir con la foto. */
  background: color-mix(in srgb, #AEBAEF 55%, var(--bg));
  border: 1px solid color-mix(in srgb, #AEBAEF 70%, var(--bg));
  border-radius: 50%;
}
@media (max-width: 620px) {
  .hero__media::after, .page-hero__media::after { transform: translate(11px, 11px); }
  .js .hero__media::after { animation: none; transform: translate(11px, 11px); opacity: 1; }
}

/* =========================================================
   Invitación al ejercicio.
   Es el objetivo principal del sitio: tiene que verse antes
   que nada y dejar claro a dónde lleva.
   ========================================================= */
.invita {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}
.invita:hover {
  background: var(--bg-card);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.invita__txt { display: grid; gap: 0.35rem; min-width: 0; }
.invita__eb {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.invita__tit {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.invita__sub { font-size: 0.97rem; color: var(--ink-2); max-width: 46ch; }
.invita__flecha {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.invita:hover .invita__flecha { transform: translateX(5px); }
@media (max-width: 620px) {
  .invita { flex-direction: column; align-items: flex-start; }
  .invita__flecha { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .invita, .invita__flecha { transition: none; }
  .invita:hover { transform: none; }
  .invita:hover .invita__flecha { transform: none; }
}

/* Salidas al terminar el ejercicio: que siga explorando el sitio */
.sigue { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.sigue__tit {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.sigue__lista { list-style: none; padding: 0; margin-top: var(--sp-2); display: grid; }
.sigue__lista li + li { border-top: 1px solid var(--line); }
.sigue__lista a {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.sigue__lista a span { color: var(--accent); }
.sigue__lista a:hover { color: var(--accent); padding-left: 6px; }

/* Cierre del ejercicio hacia el programa que todavía no existe */
.programa {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--ink);
  border-radius: var(--radius-lg);
  color: #DDD9EE;
}
@media (min-width: 700px) { .programa { padding: var(--sp-5); } }
.programa .eyebrow { color: #C9BEEA; }
.programa .eyebrow::before { background: rgba(201, 190, 234, 0.4); }
.programa h3 {
  margin-top: var(--sp-2);
  font-size: var(--step-2);
  color: #fff;
  max-width: 24ch;
}
.programa p { margin-top: var(--sp-3); color: #ADA9C6; max-width: 52ch; }
.programa__form { margin-top: var(--sp-4); display: grid; gap: 0.5rem; max-width: 26rem; }
.programa__form input {
  width: 100%;
  padding: 0.75rem 1rem;
  min-height: 48px;
  border-radius: var(--radius-cta);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.programa__form input::placeholder { color: #9490B0; }
.programa .form-pendiente { background: rgba(255,255,255,0.07); color: #ADA9C6; }
.programa .form-pendiente svg, .programa .form-pendiente a { color: #C9BEEA; }

/* La portada del ejercicio era tan alta que la primera situación quedaba
   fuera de pantalla. Se comprime para que se vea que hay algo debajo. */
body:has(#ejercicio) .page-hero { padding-block: var(--sp-4) var(--sp-3); }
body:has(#ejercicio) .page-hero h1 { font-size: var(--step-3); }
body:has(#ejercicio) #ejercicio.section { padding-block: var(--sp-4) var(--sp-6); }
.ejercicio__aviso { margin-top: var(--sp-2); }

/* Captura de correo al terminar el ejercicio: es el momento de más interés,
   así que va justo debajo del resultado y antes de cualquier otra cosa. */
.resumen {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
}
.resumen__tit {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.resumen__sub { margin-top: var(--sp-2); font-size: 0.98rem; color: var(--ink-2); max-width: 48ch; }
.resumen__form { margin-top: var(--sp-3); display: grid; gap: 0.5rem; max-width: 26rem; }
.resumen__form input[type="text"], .resumen__form input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  min-height: 48px;
  border-radius: var(--radius-cta);
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink);
}
.resumen__nota { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--muted); }