:root {
  --paper: #F3EFE4;
  --paper-2: #EAE4D4;
  --card: #FBF8F0;
  --ink: #17332C;
  --ink-soft: #51605A;
  --violet: #6C4AA0;
  --violet-deep: #46306E;
  --violet-soft: #E7DFF2;
  --gold: #B98A2E;
  --gold-cta: #D8BC78;
  --gold-soft: #F0E3C4;
  --green-soft: #DCE8DA;
  --rose-soft: #F0DCD8;
  --blue-soft: #D9E2E8;
  --line: rgba(23, 51, 44, 0.14);
  --radio-card: 14px;
  --radio-input: 10px;
  --sombra: 0 18px 40px -18px rgba(23, 51, 44, 0.28);
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Archivo", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
main[id], section[id] { scroll-margin-top: 84px; }
body { -webkit-tap-highlight-color: rgba(108, 74, 160, 0.12); }
a, button { touch-action: manipulation; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radio-input);
}
.skip-link:focus { top: 12px; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, blockquote { font-family: var(--display); text-wrap: balance; }
p, li, summary, label { text-wrap: pretty; }

img { max-width: 100%; display: block; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap-chico { max-width: 820px; }

a { color: inherit; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--violet); color: #FBF8F0; }
.btn-primary:hover { background: var(--violet-deep); }
.btn-gold { background: var(--gold-cta); color: var(--ink); }
.btn-gold:hover { background: #E2CC98; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-small { padding: 10px 20px; font-size: 14px; }
.btn-grande { padding: 18px 40px; font-size: 17px; }
.btn-full { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(243, 239, 228, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.wordmark {
  color: var(--violet-deep);
  font-family: var(--body);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.075em;
  font-weight: 700;
  white-space: nowrap;
}
.nav-brand-text {
  border-left: 1px solid var(--line);
  padding-left: 13px;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--violet); }
.nav a:focus-visible, .btn:focus-visible, .faq summary:focus-visible, .pie a:focus-visible, .wa-link:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 4px;
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 56px 0 72px; }
.mandala {
  position: absolute;
  right: -140px;
  top: -120px;
  width: 620px;
  height: 620px;
  color: var(--violet);
  opacity: 0.22;
  pointer-events: none;
}
.mandala-spin { transform-origin: 200px 200px; animation: girar 140s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: 44px;
  align-items: center;
  position: relative;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--violet);
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(40px, 4.3vw, 58px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-line { display: inline; }
.hero-emphasis { color: var(--violet); }
@media (min-width: 961px) {
  .hero-line { display: block; }
}
.hero-sub {
  margin-top: 22px;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero-ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-photo { position: relative; }
.hero-photo-frame {
  border-radius: 999px 999px var(--radio-card) var(--radio-card);
  overflow: hidden;
  box-shadow: var(--sombra);
  border: 1px solid var(--line);
  background: var(--card);
}
.hero-photo-frame img { width: 100%; height: 520px; object-fit: cover; object-position: center 20%; }
.hero-photo-tag {
  position: absolute;
  left: -18px;
  bottom: 26px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: var(--radio-card);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.3;
}
.hero-photo-tag span { font-family: var(--body); font-size: 12px; letter-spacing: 0.08em; opacity: 0.8; }

/* ---------- frases ---------- */
.frases { background: var(--paper-2); padding: 96px 0; }
.frases h2, .manual h2, .sistema h2, .usos h2, .tipos-section h2, .pasos h2, .compara h2, .quien h2, .voces h2, .filtro h2, .camino h2, .faq h2, .cierre h2 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  font-weight: 600;
}
.frases-lista { list-style: none; margin-top: 44px; border-top: 1px solid var(--line); }
.frases-lista li {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
  padding: 26px 0 26px 64px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-style: italic;
}
.frases-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  width: 34px;
  height: 1px;
  background: var(--violet);
}
.frases-cierre { margin-top: 36px; max-width: 62ch; font-size: 18px; color: var(--ink-soft); }

/* ---------- explicación ---------- */
.manual { padding: 112px 0 70px; }
.manual-intro {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 88px);
  max-width: 1020px;
}
.manual-intro p { max-width: 54ch; font-size: 18px; color: var(--ink-soft); }
.manual-intro p:first-child { font-size: 20px; color: var(--ink); }

/* ---------- BodyGraph explicado ---------- */
.sistema { padding: 30px 0 90px; }
.sistema-panel {
  background: #1E2B26;
  border-radius: 18px;
  padding: clamp(30px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.sistema-panel h2 { color: var(--paper); font-size: clamp(34px, 4vw, 50px); line-height: 1.04; }
.sistema-kicker { color: var(--gold-soft); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }
.sistema-bajada { color: rgba(243, 239, 228, 0.8); margin-top: 18px; max-width: 58ch; }
.lectura-lista { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.lectura-lista article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid rgba(243, 239, 228, 0.18);
}
.lectura-lista article > span { color: #E88A72; font-size: 11px; letter-spacing: 0.08em; padding-top: 3px; }
.lectura-lista article p { color: rgba(243, 239, 228, 0.75); font-size: 13.5px; line-height: 1.5; }
.lectura-lista b { display: inline; color: var(--paper); font-size: 14px; }
.lectura-lista b::after { content: " — "; }
.sistema-aclaracion { margin-top: 18px; color: rgba(243, 239, 228, 0.58); font-size: 12.5px; max-width: 56ch; }
.bodygraph-figure { min-width: 0; }
.bodygraph-frame {
  overflow: hidden;
  border-radius: 12px;
  background: #050606;
  border: 1px solid rgba(243, 239, 228, 0.16);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.75);
}
.bodygraph-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.bodygraph-frame:hover img { transform: scale(1.035); }
.bodygraph-figure figcaption { margin-top: 12px; color: rgba(243, 239, 228, 0.6); font-size: 12px; text-align: right; }

.cita-ra { margin: 66px auto 0; max-width: 900px; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.cita-ra blockquote {
  font-size: clamp(27px, 3.2vw, 40px);
  line-height: 1.2;
  font-style: italic;
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 26px;
}
.cita-ra figcaption { margin-top: 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-family: var(--body); }
.cita-sello {
  width: 132px;
  height: 132px;
  border: 1px solid rgba(108, 74, 160, 0.42);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--violet);
  font-size: 10px;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 0.15em;
  transform: rotate(-9deg);
}

/* ---------- para qué sirve / tipos ---------- */
.usos { padding: 100px 0; background: var(--paper-2); }
.usos-intro, .tipos-intro { margin-top: 18px; max-width: 62ch; color: var(--ink-soft); font-size: 17px; }
.usos-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.uso { padding: 24px 24px 10px 0; border-top: 1px solid var(--line); }
.uso-numero { color: var(--violet); font-size: 12px; letter-spacing: 0.13em; font-weight: 700; }
.uso h3 { margin-top: 18px; font-size: 28px; font-weight: 600; }
.uso p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; max-width: 34ch; }
.usos-cierre { margin-top: 38px; color: var(--ink-soft); font-size: 14px; }
.usos-ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.tipos-section { padding: 104px 0; }
.tipos-section .tipos { margin-top: 42px; }

/* ---------- tipos ---------- */
.tipos { margin-top: 52px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.tipo {
  grid-column: span 2;
  background: var(--tint, var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radio-card);
  padding: 28px 26px 30px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tipo:hover { transform: translateY(-4px); }
.tipo:nth-child(4), .tipo:nth-child(5) { grid-column: span 3; }
.tipo h3 { font-size: 26px; font-weight: 600; margin-bottom: 10px; }
.tipo p { font-size: 15.5px; color: var(--ink-soft); }

/* ---------- pasos + form ---------- */
.pasos { padding: 104px 0; background: var(--paper-2); }
.pasos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.pasos-lista { list-style: none; margin-top: 40px; display: grid; gap: 26px; }
.pasos-lista li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.pasos-lista span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--violet);
  color: var(--violet);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 24px;
}
.pasos-lista p { font-size: 17px; padding-top: 10px; }
.pasos-nota { margin-top: 30px; font-size: 15px; color: var(--ink-soft); }

.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra);
  padding: 38px 36px 34px;
}
.form-card h3 { font-size: 32px; font-weight: 600; margin-bottom: 24px; }
.form-instruccion { margin: -16px 0 22px; font-size: 13.5px; color: var(--ink-soft); }
.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.campo input {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio-input);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.campo input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.campo input.invalido { border-color: #A4432F; }
.error { font-size: 12.5px; color: #A4432F; min-height: 16px; }
.form-ayuda { font-size: 14px; color: var(--ink-soft); margin: -4px 0 16px; }
.wa-link { color: var(--violet); font-weight: 600; }
.form-legal { margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.form-exito { margin-top: 20px; background: var(--green-soft); border-radius: var(--radio-input); padding: 22px; display: grid; gap: 12px; justify-items: start; }
.form-exito[hidden] { display: none; }
.form-exito h4 { font-size: 24px; font-weight: 600; }
.form-exito p { font-size: 15px; }

/* ---------- compara ---------- */
.compara { padding: 104px 0; }
.compara-grid { margin-top: 48px; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 24px; }
.panel {
  border-radius: var(--radio-card);
  border: 1px solid var(--line);
  padding: 40px 38px;
  display: grid;
  gap: 16px;
  justify-items: start;
  background: var(--card);
}
.panel-gratis { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.panel.panel-gratis h3, .panel.panel-gratis p { color: var(--paper); }
.panel-gratis .panel-tag { color: var(--gold-soft); }
.panel-gratis .panel-pie { color: rgba(243, 239, 228, 0.78); }
.panel-pago { background: var(--card); border-color: rgba(108, 74, 160, 0.35); }
.panel-tag { font-size: 12px; line-height: 1.7; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: #76561E; text-wrap: balance; }
.panel h3 { font-size: 32px; font-weight: 600; line-height: 1.15; }
.panel p { font-size: 16px; color: var(--ink-soft); }
  .panel.panel-pago h3 { color: var(--ink); }
.panel.panel-pago p { color: var(--ink-soft); }
.panel.panel-pago .panel-tag { color: #76561E; }
.panel-pie { font-size: 14px; font-style: italic; }
.panel .btn { margin-top: 6px; }
.panel-gratis .btn-ghost { border-color: var(--paper); color: var(--paper); }

/* ---------- quien ---------- */
.quien { padding: 104px 0; background: var(--paper-2); }
.quien-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.quien-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radio-card);
  box-shadow: var(--sombra);
}
.quien-copy p { margin-top: 18px; color: var(--ink-soft); max-width: 60ch; }
.quien-copy h2 { margin-bottom: 4px; }
.quien blockquote {
  margin-top: 26px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  font-style: italic;
  color: var(--violet);
  border-left: 2px solid var(--gold);
  padding-left: 24px;
}
.quien-redes { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--ink); }

/* ---------- voces ---------- */
.voces { padding: 104px 0; }
.voces-grid { margin-top: 48px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.voces-grid blockquote {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radio-card);
  padding: 32px 30px;
  display: grid;
  gap: 16px;
  align-content: start;
}
.voces-grid p { font-family: var(--display); font-size: 21px; line-height: 1.4; font-style: italic; }
.voces-grid cite { font-style: normal; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.voces-grid .voz-grande { grid-row: span 2; background: var(--ink); border-color: var(--ink); }
.voces-grid .voz-grande p { color: var(--paper); font-size: clamp(24px, 2.4vw, 30px); }
.voces-grid .voz-grande cite { color: rgba(243, 239, 228, 0.7); }
.voces-grid blockquote:nth-child(3) { grid-column: 2; }
.voces-cierre { margin-top: 34px; font-size: 18px; color: var(--ink-soft); }

/* ---------- filtro ---------- */
.filtro { padding: 96px 0; background: var(--paper-2); }
.filtro-grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.filtro-col { border-radius: var(--radio-card); padding: 36px 34px; border: 1px solid var(--line); }
.filtro-si { background: var(--green-soft); }
.filtro-no { background: var(--card); }
.filtro-col h3 { font-size: 28px; font-weight: 600; margin-bottom: 18px; }
.filtro-col ul { list-style: none; display: grid; gap: 14px; }
.filtro-col li { padding-left: 30px; position: relative; font-size: 16px; color: var(--ink-soft); }
.filtro-si li::before { content: "✓"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
.filtro-no li::before { content: "✕"; position: absolute; left: 0; color: #A4432F; font-weight: 700; }

/* ---------- camino ---------- */
.camino { padding: 104px 0; }
.ofertas { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.oferta {
  border: 1px solid var(--line);
  border-radius: var(--radio-card);
  background: var(--card);
  padding: 34px 30px;
  display: grid;
  gap: 14px;
  justify-items: start;
  align-content: start;
}
.oferta-habitarte { border-top: 4px solid var(--violet); }
.oferta-gratis { background: var(--ink); border-color: var(--ink); }
.oferta.oferta-gratis h3, .oferta.oferta-gratis p { color: var(--paper); }
.oferta.oferta-gratis p { color: rgba(243, 239, 228, 0.84); }
.oferta.oferta-gratis .oferta-precio { color: var(--gold-soft); }
.oferta.oferta-gratis .btn-gold { background: var(--gold-cta); color: var(--ink); }
.oferta-pago { border-top: 4px solid var(--violet); }
.oferta-pago h3 { color: var(--violet-deep); }
.oferta .oferta-precio { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #76561E; }
.oferta h3 { font-size: 30px; font-weight: 600; }
.oferta p { font-size: 15.5px; color: var(--ink-soft); }
.camino-puente { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 78ch; display: grid; gap: 8px; color: var(--ink-soft); }
.camino-puente a { color: var(--violet-deep); font-weight: 600; text-underline-offset: 3px; }

/* ---------- faq ---------- */
.faq { padding: 96px 0; background: var(--paper-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--body);
  font-size: 24px;
  color: var(--violet);
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-soft); max-width: 68ch; }

/* ---------- cierre ---------- */
.cierre { background: var(--ink); color: var(--paper); padding: 120px 0; text-align: center; }
.cierre h2 { font-size: clamp(40px, 5.4vw, 68px); font-weight: 600; color: var(--paper); }
.cierre p { margin: 18px 0 38px; font-family: var(--display); font-style: italic; font-size: 24px; color: rgba(243, 239, 228, 0.8); }

/* ---------- pie ---------- */
.pie { background: #10241F; color: rgba(243, 239, 228, 0.82); padding: 64px 0 32px; }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pie-wordmark { display: inline-block; color: var(--paper); font-size: 23px; line-height: 1; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 18px; }
.pie p { font-size: 14.5px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--gold-soft); }
.pie-titulo { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px; font-weight: 600; }
.pie-legal { margin-top: 48px; text-align: center; font-size: 12.5px; color: rgba(243, 239, 228, 0.5); }

/* ---------- reveal ---------- */
@keyframes subir {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.reveal { opacity: 0; }
.reveal.visible { animation: subir 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0s); }
.frases-lista li:nth-child(2) { --d: 0.08s; }
.frases-lista li:nth-child(3) { --d: 0.16s; }
.frases-lista li:nth-child(4) { --d: 0.24s; }
.frases-lista li:nth-child(5) { --d: 0.32s; }
.tipos .tipo:nth-child(2) { --d: 0.07s; }
.tipos .tipo:nth-child(3) { --d: 0.14s; }
.tipos .tipo:nth-child(4) { --d: 0.21s; }
.tipos .tipo:nth-child(5) { --d: 0.28s; }
.voces-grid blockquote:nth-child(2) { --d: 0.1s; }
.voces-grid blockquote:nth-child(3) { --d: 0.2s; }
.ofertas .oferta:nth-child(2) { --d: 0.1s; }
.ofertas .oferta:nth-child(3) { --d: 0.2s; }
.filtro-col:nth-child(2) { --d: 0.1s; }

.tit-anim { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.tit-anim.visible { opacity: 1; transform: none; }

.hero-copy > * { animation: subir 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.25s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.35s; }
.hero-photo { animation: subir 1.1s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }

.panel, .oferta, .voces-grid blockquote, .filtro-col, .tipo {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.panel:hover, .oferta:hover, .voces-grid blockquote:hover, .filtro-col:hover, .tipo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero-inner, .pasos-grid, .quien-grid, .compara-grid, .filtro-grid, .voces-grid, .ofertas, .pie-grid, .sistema-panel, .cita-ra { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .hero-photo-frame img { height: 420px; }
  .hero-photo-tag { left: 12px; }
  .tipos { grid-template-columns: 1fr 1fr; }
  .tipo, .tipo:nth-child(4), .tipo:nth-child(5) { grid-column: span 1; }
  .tipo:nth-child(5) { grid-column: span 2; }
  .voces-grid blockquote:nth-child(3) { grid-column: 1; }
  .voz-grande { grid-row: auto; }
  .mandala { width: 420px; right: -180px; }
  .manual-intro { gap: 26px; }
  .sistema-panel { gap: 34px; }
  .bodygraph-figure { width: min(100%, 520px); margin: 0 auto; }
  .usos-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .uso:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .eyebrow { font-size: 10.5px; letter-spacing: 0.16em; line-height: 1.65; }
  .hero h1 { font-size: 34px; }
  .nav-inner { gap: 10px; padding: 0 16px; }
  .wordmark { font-size: 18px; letter-spacing: 0.045em; }
  .nav-brand { gap: 9px; }
  .nav-brand-text { font-size: 7px; letter-spacing: 0.1em; padding-left: 9px; }
  .nav-inner > .btn { padding: 9px 12px; font-size: 11px; }
  .manual-intro, .lectura-lista, .usos-grid { grid-template-columns: 1fr; }
  .manual-intro { gap: 18px; }
  .sistema { padding-top: 12px; }
  .sistema-panel { padding: 26px 20px; border-radius: 16px; }
  .lectura-lista { margin-top: 22px; }
  .lectura-lista article { padding: 13px 0; }
  .cita-ra { margin-top: 48px; }
  .cita-sello { width: 92px; height: 92px; font-size: 8px; }
  .uso { padding-right: 0; }
  .uso:last-child { grid-column: auto; }
  .usos { padding: 76px 0; }
  .tipos-section { padding: 76px 0; }
  .campo-doble { grid-template-columns: 1fr; }
  .tipos { grid-template-columns: 1fr; }
  .tipo:nth-child(5) { grid-column: span 1; }
  .frases-lista li { padding-left: 0; padding-top: 34px; }
  .frases-lista li::before { top: 12px; }
  .form-card { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mandala-spin { animation: none; }
  .reveal { opacity: 1; }
  .reveal.visible { animation: none; }
  .hero-copy > *, .hero-photo { animation: none; }
  .tit-anim { opacity: 1; transform: none; transition: none; }
  .btn, .tipo, .panel, .oferta, .voces-grid blockquote, .filtro-col { transition: none; }
}