/* ============================================================
   Ely Smith · Registros Akáshicos
   Sistema visual. Papel hueso + lapislázuli: los colores que Ely
   ya usa en su feed y en la tapa de su libro. No se inventó nada.
   ============================================================ */

:root {
  /* Fondos */
  --bone:       #F2F1ED;   /* el hueso cálido de sus placas */
  --paper:      #FAF9F5;
  --sand:       #E2DCD0;
  --sand-soft:  #EAE5DA;

  /* Tinta */
  --ink:        #17202E;
  --ink-soft:   #535B6A;
  --ink-faint:  #596171;

  /* Acento: el azul de su marca */
  --lapis:      #0A4AA6;
  --lapis-deep: #07357A;
  --lapis-tint: #DDE6F5;

  /* Campo nocturno */
  --night:      #08182F;
  --night-2:    #102949;
  --night-ink:  #EDEBE4;
  --night-soft: #A9B6C9;
  --sky:        #9CC0EC;

  --rule:       rgba(23,32,46,.14);
  --rule-night: rgba(237,235,228,.16);

  /* Tipografía */
  /* Instrument Serif y Instrument Sans son del mismo sistema tipográfico.
     La serif tiene un contraste altísimo: recién a partir de los 100px
     se ve para lo que fue dibujada. Por eso la escala de display es
     grande de verdad, no «grande para una web». */
  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-text:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-display: clamp(2.9rem, 10.8vw, 11rem);
  --t-h2:      clamp(1.95rem, 3.8vw, 3.2rem);
  --t-h2-xl:   clamp(2.5rem, 7vw, 6.2rem);
  --t-h3:      clamp(1.28rem, 1.7vw, 1.6rem);
  --t-lede:    clamp(1.08rem, 1.5vw, 1.35rem);
  --t-body:    1.0rem;
  --t-small:   .875rem;
  --t-label:   .67rem;
  --t-micro:   .625rem;

  --measure:   62ch;
  --gutter:    clamp(1.25rem, 5vw, 4.5rem);
  --maxw:      1240px;
  --sect:      clamp(4.5rem, 10vw, 9rem);

  --ease:      cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--lapis); color: var(--paper); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lapis); color: #fff; padding: .7rem 1.1rem;
  font-size: var(--t-small); text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- Estructura ---------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sect); position: relative; }

.ground-bone  { background: var(--bone); }
.ground-paper { background: var(--paper); }
.ground-sand  { background: var(--sand-soft); }
.ground-night { background: var(--night); color: var(--night-ink); }
.ground-night h2, .ground-night h3, .ground-night .kicker { color: var(--night-ink); }
.ground-night p { color: var(--night-soft); }
.ground-night .rule { background: var(--rule-night); }

/* ---------- Tipografía ---------- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: .93;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

.display { font-size: var(--t-display); line-height: .9; letter-spacing: -.026em; }
h2 { font-size: var(--t-h2); }
h3 {
  font-size: var(--t-h3); line-height: 1.16; letter-spacing: -.008em;
}

/* La itálica de la serif es lo más cercano a la caligrafía que Ely usa
   en sus placas de mensajes canalizados. */
/* La itálica de Instrument Serif es casi caligráfica: es lo más cerca
   que se puede estar de las placas manuscritas de Ely sin usar una
   fuente de script, que a este tamaño se rompería. */
.wonk { font-style: italic; color: var(--lapis); letter-spacing: -.012em; }
.ground-night .wonk { color: var(--sky); }

p { margin: 0 0 1.1em; max-width: var(--measure); color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

.lede { font-size: var(--t-lede); line-height: 1.55; color: var(--ink); max-width: 46ch; }

.kicker {
  font-size: var(--t-label);
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--lapis);
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1.4rem;
}
.kicker::before {
  content: ""; width: 1.7rem; height: 1px; background: currentColor; flex: none;
}
.ground-night .kicker { color: var(--sky); }

a { color: var(--lapis); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.ground-night a { color: var(--sky); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-text);
  font-size: .9rem; font-weight: 500; letter-spacing: .015em;
  padding: .92rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { flex: none; }

.btn-solid  { background: var(--lapis); color: #fff; }
.btn-solid:hover { background: var(--lapis-deep); }

.btn-line   { border-color: var(--rule); color: var(--ink); }
.btn-line:hover { border-color: var(--lapis); color: var(--lapis); }

.ground-night .btn-solid { background: var(--sky); color: var(--night); }
.ground-night .btn-solid:hover { background: #BCD5F5; }
.ground-night .btn-line { border-color: var(--rule-night); color: var(--night-ink); }
.ground-night .btn-line:hover { border-color: var(--sky); color: var(--sky); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Enlace con flecha */
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 500; text-decoration: none;
  color: var(--lapis);
  border-bottom: 1px solid currentColor;
  padding-bottom: .2rem;
  transition: gap .25s var(--ease);
}
.arrow-link:hover { gap: .85rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bone) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--rule); }

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
}

.brand {
  font-family: var(--f-display);
  font-size: 1.12rem; letter-spacing: .01em;
  text-decoration: none; color: var(--ink);
  display: flex; align-items: baseline; gap: .55rem;
  white-space: nowrap;
}
.brand small {
  font-family: var(--f-text);
  font-size: .62rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-faint);
}

.site-nav { display: flex; align-items: center; gap: 1.9rem; }
.site-nav a {
  font-size: .875rem; text-decoration: none; color: var(--ink);
  position: relative; padding-block: .2rem;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--lapis);
  transition: right .3s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.site-nav a[aria-current="page"] { color: var(--lapis); }

.nav-toggle {
  display: none; background: none; border: 0; padding: .4rem;
  color: var(--ink); cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.6rem;
    transform: translateY(-120%);
    transition: transform .4s var(--ease);
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .site-nav.is-open { transform: none; }
  .site-nav a { width: 100%; padding-block: .95rem; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
  .site-nav .btn { margin-top: 1.1rem; }
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem); position: relative; overflow: hidden; }

.hero .wrap { position: relative; z-index: 2; }

.hero-title { margin-bottom: 1.8rem; }
.hero-title .line { display: block; }

.hero-lede { max-width: 44ch; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.62fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }

.hero-meta {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding-bottom: .4rem;
}
.hero-meta-item { display: flex; gap: .9rem; align-items: baseline; }
.hero-meta-item dt {
  font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint); min-width: 6.2rem; flex: none;
}
.hero-meta-item dd { margin: 0; font-size: .95rem; color: var(--ink); }

.hero-cta { margin-top: 2.4rem; }

.hero-note { margin-top: 1.5rem; font-size: var(--t-small); color: var(--ink-faint); max-width: 40ch; }

/* Dibujo de línea del hero */
.hero-art {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.hero-art svg {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: min(58vw, 640px); height: auto; opacity: .5;
}
@media (max-width: 900px) { .hero-art svg { right: -22%; opacity: .22; } }

.draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); animation: draw 2.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw { animation: none; stroke-dashoffset: 0; } }

/* ---------- Revelado al scrollear ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Bloque de sección ---------- */

.sect-head { max-width: 58ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sect-head p { margin-top: 1.2rem; }

.split {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split--wide { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* ---------- Tarjetas de servicio ---------- */

.offer-list { display: grid; gap: 0; }

.offer {
  display: grid;
  grid-template-columns: 3.2rem minmax(0,1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(2rem, 3.6vw, 2.9rem);
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background .3s var(--ease);
}
.offer:last-child { border-bottom: 1px solid var(--rule); }
.ground-night .offer { border-color: var(--rule-night); }
.offer:hover { background: color-mix(in srgb, var(--lapis) 4%, transparent); }
.ground-night .offer:hover { background: rgba(156,192,236,.06); }

.offer-num {
  font-family: var(--f-display); font-size: .95rem;
  color: var(--ink-faint); padding-top: .35rem;
  font-variant-numeric: tabular-nums;
}
.ground-night .offer-num { color: var(--night-soft); }

.offer-body h3 { margin-bottom: .6rem; }
.offer-body p { margin: 0; font-size: .95rem; max-width: 54ch; }
.offer-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.tag {
  font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .3rem .72rem; color: var(--ink-soft);
}
.ground-night .tag { border-color: var(--rule-night); color: var(--night-soft); }

.offer-go {
  align-self: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid; place-items: center; color: var(--lapis);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.offer:hover .offer-go { background: var(--lapis); border-color: var(--lapis); color: #fff; }

.offer--lead { padding-block: clamp(2.4rem, 4.6vw, 3.6rem); }
.offer--lead h3 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.offer--lead .offer-body p { font-size: 1.02rem; }

@media (max-width: 720px) {
  .offer { grid-template-columns: 2.2rem minmax(0,1fr); }
  .offer-go { grid-column: 2; margin-top: 1.1rem; }
}

/* ---------- Pasos ---------- */

.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.4rem;
  padding-block: 1.6rem; border-top: 1px solid var(--rule-night);
}
.step:first-child { border-top: 0; }
.step-n {
  font-family: var(--f-display); font-size: .9rem;
  color: var(--sky); padding-top: .25rem; font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.step p { margin: 0; font-size: .93rem; }

/* ---------- Retrato / bio ---------- */

.portrait {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background: var(--sand);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94) contrast(1.02); }
.portrait figcaption {
  font-size: var(--t-small); color: var(--ink-faint);
  padding: .8rem .1rem 0; margin: 0;
}

.bio-facts { display: grid; gap: 0; margin-top: 2.2rem; }
.bio-fact {
  display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr);
  gap: 1.2rem; padding-block: 1rem; border-top: 1px solid var(--rule);
  font-size: .93rem;
}
.bio-fact dt { color: var(--ink-faint); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; padding-top: .2rem; }
.bio-fact dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .bio-fact { grid-template-columns: 1fr; gap: .25rem; } }

/* ---------- Cita ---------- */

.pull {
  border: 0; margin: 0; padding: 0;
  max-width: 24ch;
}
.pull blockquote {
  margin: 0; font-family: var(--f-display);
  font-size: clamp(1.7rem, 3.1vw, 2.9rem); line-height: 1.1;
  letter-spacing: -.016em;
  font-style: italic;
  color: var(--lapis);
}
.ground-night .pull blockquote { color: var(--sky); }
.pull figcaption { margin-top: 1.1rem; font-size: var(--t-small); color: var(--ink-faint); }
.ground-night .pull figcaption { color: var(--night-soft); }

/* ---------- Libro ---------- */

.book { display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1fr); gap: clamp(2rem,6vw,5rem); align-items: center; }
@media (max-width: 820px) { .book { grid-template-columns: 1fr; } }

.book-cover {
  position: relative; max-width: 300px;
  box-shadow: 0 2px 4px rgba(23,32,46,.06), 0 24px 48px -18px rgba(23,32,46,.34);
  border-radius: 2px; overflow: hidden;
  transform: rotate(-1.4deg);
  transition: transform .5s var(--ease);
}
.book-cover:hover { transform: rotate(0deg) translateY(-4px); }

.book-meta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.8rem 0; }
.book-meta div { font-size: .88rem; }
.book-meta dt { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .2rem; }
.book-meta dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- Prensa ---------- */

.press { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule-night); border-block: 1px solid var(--rule-night); }
.press-item { background: var(--night); padding: 1.8rem clamp(1.1rem,2.4vw,2rem); }
.press-item h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.press-item p { margin: 0; font-size: .87rem; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  padding-block: 1.45rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  font-family: var(--f-display); font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.3; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--f-text); font-size: 1.3rem; line-height: 1;
  color: var(--lapis); flex: none; transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.5rem; font-size: .96rem; }

/* ---------- CTA final ---------- */

.cta-final { text-align: left; }
.cta-final .display { max-width: 16ch; margin-bottom: 1.6rem; }
.cta-final .lede { max-width: 48ch; margin-bottom: 2.2rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--night); color: var(--night-soft); padding-block: clamp(3.5rem,7vw,5.5rem) 2rem; }
.footer-top { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(2, minmax(0,1fr)); gap: clamp(2rem,5vw,4rem); }
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

.footer-brand .brand { color: var(--night-ink); font-size: 1.3rem; }
.footer-brand p { color: var(--night-soft); font-size: .9rem; margin-top: 1rem; max-width: 34ch; }

.site-footer h3, .site-footer .footer-h { font-family: var(--f-text); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--night-ink); margin-bottom: 1.1rem; font-weight: 500; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer li a, .site-footer li span { font-size: .9rem; color: var(--night-soft); text-decoration: none; }
.site-footer li a:hover { color: var(--sky); }

.footer-bottom {
  margin-top: clamp(3rem,6vw,4.5rem); padding-top: 1.6rem;
  border-top: 1px solid var(--rule-night);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: var(--t-small); color: var(--night-soft);
}
.footer-bottom a { color: var(--night-soft); }

.disclaimer {
  margin-top: 1.4rem; font-size: .8rem; line-height: 1.6;
  color: var(--night-soft); opacity: .85; max-width: 68ch;
}

/* ---------- WhatsApp flotante ---------- */

.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--lapis); color: #fff;
  padding: .85rem 1.25rem; border-radius: 999px;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(10,74,166,.5);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .25s var(--ease);
}
.wa-float.is-in { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { background: var(--lapis-deep); }
@media (max-width: 520px) { .wa-float span { display: none; } .wa-float { padding: .95rem; } }

/* ---------- Página interior ---------- */

.page-hero { padding-block: clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem); }
.breadcrumb { font-size: var(--t-small); color: var(--ink-faint); margin-bottom: 1.6rem; }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--lapis); }
.breadcrumb span { margin-inline: .5rem; }

.prose h3 { margin-top: 2.6rem; margin-bottom: .8rem; }
.prose ul { margin: 0 0 1.4rem; padding: 0; list-style: none; display: grid; gap: .75rem; max-width: var(--measure); }
.prose ul li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .75rem; font-size: .96rem; color: var(--ink-soft); }
.prose ul li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lapis); margin-top: .62rem; }
.ground-night .prose ul li::before { background: var(--sky); }

.level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.level {
  background: var(--paper); padding: clamp(1.6rem,3vw,2.4rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.level .kicker { margin-bottom: 0; }
.level h3 { font-size: clamp(1.25rem,1.9vw,1.6rem); }
.level p { margin: 0; font-size: .95rem; }
.level ul { margin: 0; }
.level .arrow-link { margin-top: auto; align-self: flex-start; }

/* ---------- Motivo de línea reutilizable ---------- */

.line-motif { width: 100%; height: auto; display: block; color: var(--lapis); opacity: .55; }
.ground-night .line-motif { color: var(--sky); opacity: .45; }

/* ============================================================
   Piezas dibujadas. El sitio no usa fotografía: todo lo visual
   es tipografía y línea, para que no dependa de material que
   todavía no existe.
   ============================================================ */

.plate {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(2rem, 4vw, 3.2rem);
  display: flex; flex-direction: column; gap: 1.6rem;
  overflow: hidden;
}
.ground-sand .plate { background: var(--bone); }
.plate::after {
  content: ""; position: absolute; inset: .5rem;
  border: 1px solid var(--rule); pointer-events: none;
}
.plate-name {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: .98;
  color: var(--lapis); margin: 0;
}
.plate-sub {
  font-size: var(--t-label); letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0;
}
.plate-seal { width: clamp(120px, 22vw, 168px); align-self: flex-end; margin-top: auto; }
.plate-lines { display: grid; gap: 0; margin: 0; }
.plate-lines div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .62rem; border-top: 1px solid var(--rule);
  font-size: .82rem;
}
.plate-lines dt { color: var(--ink-faint); letter-spacing: .06em; }
.plate-lines dd { margin: 0; color: var(--ink); text-align: right; }

/* Placa del libro, tipografiada como una portada */
.book-plate {
  position: relative;
  aspect-ratio: 5 / 8; max-width: 320px; width: 100%;
  background: linear-gradient(107deg, var(--paper) 0 8px, var(--bone) 8px);
  border: 1px solid var(--rule);
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.4rem, 2.6vw, 2rem);
  display: flex; flex-direction: column;
  box-shadow: 0 2px 3px rgba(23,32,46,.05), 0 26px 50px -22px rgba(23,32,46,.4);
  transform: rotate(-1.4deg);
  transition: transform .55s var(--ease);
}
.book-plate:hover { transform: rotate(0) translateY(-5px); }
.book-plate .bp-author {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.4rem;
}
.book-plate .bp-title {
  font-family: var(--f-display); font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  line-height: 1.02; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .7rem;
}
.book-plate .bp-sub {
  font-family: var(--f-display); font-style: italic;
  font-size: .98rem; line-height: 1.25; color: var(--lapis); margin: 0;
}
.book-plate .bp-art { margin-top: auto; }
.book-plate .bp-foot {
  margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Banda de credenciales */
.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.credit { background: var(--bone); padding: 1.7rem clamp(1.1rem,2.4vw,1.9rem); }
.credit dt { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--lapis); margin-bottom: .55rem; }
.credit dd { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.credit dd strong { color: var(--ink); font-weight: 500; display: block; font-size: 1.02rem; margin-bottom: .25rem; font-family: var(--f-display); }

/* Separador dibujado entre secciones */
.divider { display: flex; align-items: center; gap: 1.2rem; color: var(--rule); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.divider svg { color: var(--lapis); opacity: .6; flex: none; }

/* ---------- Hero, composición definitiva ---------- */

.hero-fig { margin: 0; color: var(--lapis); }
.hero-fig svg { width: 100%; height: auto; }
@media (max-width: 900px) { .hero-fig { max-width: 340px; margin-inline: auto; opacity: .8; } }

.masthead {
  margin: clamp(2.6rem, 5vw, 4.2rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem clamp(1.2rem, 3vw, 2.6rem);
}
.masthead > div { min-width: 0; }
.masthead dt {
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .45rem;
}
.masthead dd { margin: 0; font-size: .9rem; color: var(--ink); line-height: 1.45; }
@media (max-width: 760px) { .masthead { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Ilustración de fondo, discreta ---------- */

.bg-art {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  display: grid; align-items: center; justify-items: center;
}
.bg-art svg { width: 100%; height: auto; }
.section { position: relative; }
.section > .wrap { position: relative; z-index: 1; }

.bg-art--constelacion { align-items: start; opacity: .5; }
.bg-art--constelacion svg { max-width: 1100px; margin-top: 4%; color: var(--sky); }
.bg-art--aura { align-items: end; opacity: .5; }
.bg-art--aura svg { color: var(--sky); }

/* Ilustración como pieza de sección */
.fig {
  margin: 0; color: var(--lapis);
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.fig svg { width: 100%; height: auto; }
.fig--sm { max-width: 190px; }
.fig--md { max-width: 280px; }
.ground-night .fig { color: var(--sky); }

.sect-aside { display: flex; justify-content: center; padding-block: 1rem; }

/* ---------- Ritmo vertical entre título y texto ---------- */

h1 + p, h2 + p, h3 + p,
h1 + .lede, h2 + .lede, h3 + .lede,
.display + p, .wonk + p { margin-top: 1.15rem; }
.sect-head h2 + p { margin-top: 1.3rem; }
.hero-title + .lede { margin-top: 1.6rem; }

/* Encabezado de sección con ilustración al costado */
.head-row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.head-row .sect-head { margin-bottom: 0; }
.head-row .fig { margin-inline: auto; }
@media (max-width: 800px) {
  .head-row { grid-template-columns: 1fr; }
  .head-row .fig { max-width: 200px; }
}

/* ---------- Variante con fotografía ---------- */

.photo { margin: 0; }
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 2px;
  filter: saturate(.92) contrast(1.03);
}
.photo figcaption {
  margin-top: .85rem; font-size: var(--t-small); color: var(--ink-faint);
  max-width: 34ch;
}
.ground-night .photo figcaption { color: var(--night-soft); }
.photo--portrait { max-width: 430px; }
.photo--portrait img { aspect-ratio: 4 / 5; }
.photo--cover { max-width: 300px; }
.photo--cover img {
  box-shadow: 0 2px 4px rgba(23,32,46,.06), 0 24px 48px -18px rgba(23,32,46,.34);
  transform: rotate(-1.4deg);
  transition: transform .5s var(--ease);
}
.photo--cover img:hover { transform: rotate(0) translateY(-4px); }

/* ============================================================
   MOVIMIENTO
   Todo se anima con transform, opacity y clip-path. Nada toca
   layout. Cada bloque tiene su corte en prefers-reduced-motion.
   ============================================================ */

:root {
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur:       .95s;
}

/* --- Revelado por máscara: el texto sube desde detrás de su propia línea --- */

[data-rv] { will-change: transform, opacity, clip-path; }

/* El barrido va por mask-position y no por clip-path: clip-path le
   achica la caja al elemento y el IntersectionObserver deja de verlo,
   con lo cual nunca se revela a sí mismo. */
[data-rv="mask"] {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
          mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-size: 120% 200%;     mask-size: 120% 200%;
  -webkit-mask-position-x: 50%;     mask-position-x: 50%;
  -webkit-mask-position-y: 100%;    mask-position-y: 100%;
  transform: translateY(.16em);
  transition: -webkit-mask-position-y var(--dur) var(--ease-out),
              mask-position-y var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
[data-rv="mask"].is-in {
  -webkit-mask-position-y: 0%; mask-position-y: 0%;
  transform: none;
}

[data-rv="fade"] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
[data-rv="fade"].is-in { opacity: 1; transform: none; }

/* La ilustración entra girando apenas y creciendo: da sensación de peso. */
[data-rv="art"] {
  opacity: 0; transform: scale(.94) rotate(-4deg);
  transition: opacity 1.4s var(--ease-out), transform 1.6s var(--ease-out);
}
[data-rv="art"].is-in { opacity: 1; transform: none; }

/* Filas que entran desde el margen */
[data-rv="slide"] {
  opacity: 0; transform: translateX(-18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-rv="slide"].is-in { opacity: 1; transform: none; }

/* --- El trazo que se dibuja solo --- */

.draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 2.4s var(--ease-soft);
}
.is-drawn .draw { stroke-dashoffset: 0; }

/* Los rayos del astro se dibujan hacia afuera, uno detrás de otro. */
.rays line {
  opacity: var(--o, .5);
  stroke-dasharray: var(--rl, 40);
  stroke-dashoffset: var(--rl, 40);
  transition: stroke-dashoffset .75s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.is-drawn .rays line { stroke-dashoffset: 0; }

/* El disco gira con el scroll: una rueda de tiempo, no un adorno. */
.spin {
  transform-box: view-box;
  transform-origin: center;
  transform: rotate(var(--rot, 0deg));
}

@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1 !important; transform: none !important;
              -webkit-mask-image: none !important; mask-image: none !important;
              transition: none !important; }
  .draw { stroke-dashoffset: 0 !important; transition: none; }
  .rays line { stroke-dashoffset: 0 !important; transition: none; }
  .spin { transform: none !important; }
}

/* ============================================================
   EL MOMENTO: la constelación se enciende donde mirás
   ============================================================ */

.constel { position: relative; --r: 300px; --mx: 50%; --my: 40%; }
.constel .capa { position: absolute; inset: 0; }
.constel .capa svg { width: 100%; height: auto; }

/* Tres capas: el cielo apagado, el halo de luz, y el mismo cielo
   encendido recortado por esa luz. */
.constel .luz,
.constel .halo {
  opacity: 0;
  transition: opacity .7s var(--ease-out);
}
.constel.is-lit .luz, .constel.is-lit .halo { opacity: 1; }

.constel .halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle calc(var(--r) * 1.15) at var(--mx) var(--my),
              rgba(156, 192, 236, .16) 0%,
              rgba(156, 192, 236, .07) 38%,
              transparent 70%);
}
.constel .luz {
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my),
                       #000 0%, rgba(0,0,0,.72) 40%, transparent 72%);
          mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my),
                       #000 0%, rgba(0,0,0,.72) 40%, transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .constel .luz, .constel .halo { opacity: .55; transition: none; }
}

/* ============================================================
   MICRO-INTERACCIÓN
   ============================================================ */

/* Botón sólido: el color entra desde abajo, no cambia de golpe. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lapis-deep);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn-solid:hover::before { transform: none; }
.btn-solid:hover { background: var(--lapis); }
.ground-night .btn-solid::before { background: #C3D8F7; }

.btn-line::before { background: var(--lapis); }
.btn-line:hover { color: #fff; border-color: var(--lapis); }
.btn-line:hover::before { transform: none; }
.ground-night .btn-line::before { background: var(--sky); }
.ground-night .btn-line:hover { color: var(--night); border-color: var(--sky); }

.btn svg { transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }

/* Fila de servicio: se corre, el número se enciende, la flecha viaja. */
.offer { position: relative; overflow: hidden; }
.offer::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--lapis);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.ground-night .offer::after { background: var(--sky); }
.offer:hover::after { transform: none; }
.offer-num, .offer-body h3 { transition: color .4s var(--ease-out), transform .6s var(--ease-out); }
.offer:hover .offer-num { color: var(--lapis); }
.offer:hover .offer-body h3 { transform: translateX(6px); }
.ground-night .offer:hover .offer-num { color: var(--sky); }
.offer-go svg { transition: transform .5s var(--ease-out); }
.offer:hover .offer-go svg { transform: translateX(3px); }
.tag { transition: border-color .4s var(--ease-out), color .4s var(--ease-out); }
.offer:hover .tag { border-color: color-mix(in srgb, var(--lapis) 35%, transparent); }

/* Navegación: el subrayado se dibuja, no aparece. */
.site-nav a::after { transition: right .45s var(--ease-out); }

/* Enlace con flecha: la línea se retrae mientras la flecha avanza. */
.arrow-link { position: relative; border-bottom: 0; }
.arrow-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.arrow-link:hover::after { transform: scaleX(.82); transform-origin: left; }
.arrow-link svg { transition: transform .5s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(4px); }

/* Acordeón con altura animada */
.faq details { overflow: hidden; }
.faq .faq-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.faq details[open] .faq-body { grid-template-rows: 1fr; }
.faq .faq-body > div { overflow: hidden; }
.faq summary { transition: color .35s var(--ease-out); }
.faq summary:hover { color: var(--lapis); }
.faq summary::after { transition: transform .45s var(--ease-out), color .35s var(--ease-out); }

/* La placa del libro levanta con sombra, no sólo con transform. */
.book-plate { transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.book-plate:hover {
  box-shadow: 0 2px 3px rgba(23,32,46,.05), 0 44px 70px -26px rgba(23,32,46,.46);
}

/* El sello gira, lentísimo. Es geometría sagrada: tiene que respirar. */
.seal-spin { animation: seal 140s linear infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .seal-spin { animation: none; } }
@keyframes seal { to { transform: rotate(360deg); } }

/* ============================================================
   UMBRALES entre campos de color
   ============================================================ */

/* El umbral: una peineta de marcas que se desvanece al entrar en el
   campo oscuro. Va en el fondo y no en un ::before, porque ese pseudo
   lo necesitan las reglas verticales de la grilla. */
.ground-night, .ground-lapis { position: relative; }
.ground-night {
  background-color: var(--night);
  background-image:
    linear-gradient(to bottom, rgba(8, 24, 47, 0) 0, rgba(8, 24, 47, 1) 100%),
    repeating-linear-gradient(90deg, rgba(244, 241, 234, .2) 0 1px, transparent 1px 13px);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 26px, 100% 26px;
  background-position: top left, top left;
}
.ground-lapis {
  background-image:
    linear-gradient(to bottom, rgba(10, 74, 166, 0) 0, rgba(10, 74, 166, 1) 100%),
    repeating-linear-gradient(90deg, rgba(244, 241, 234, .26) 0 1px, transparent 1px 13px);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 26px, 100% 26px;
  background-position: top left, top left;
}

/* ============================================================
   DETALLE TIPOGRÁFICO
   ============================================================ */

.display, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Las comillas angulares cuelgan fuera de la caja, como en imprenta. */
.pull blockquote { text-indent: -.42em; }
.hang { margin-left: -.36em; }

.fg-num, .book-meta dd, .masthead dd { font-variant-numeric: tabular-nums; }

/* ============================================================
   IMPRESIÓN
   ============================================================ */

@media print {
  .site-header, .wa-float, .bg-art, .hero-fig, .fig, .offer-go, .constel { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.2cm; page-break-inside: avoid; }
  .ground-night, .ground-night * { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .faq details { display: block; }
  .faq .faq-body { grid-template-rows: 1fr !important; }
}

/* ============================================================
   AJUSTES DE COMPOSICIÓN tras la pasada de movimiento
   ============================================================ */

/* El astro pesa más y se sale por el margen derecho: eso da profundidad
   y hace que la página empiece fuera de la pantalla. */
.hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
.hero-fig { position: relative; }
.hero-fig svg { width: 132%; max-width: none; margin-left: -4%; }
@media (max-width: 1100px) { .hero-fig svg { width: 118%; margin-left: -2%; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-fig { max-width: 420px; margin-inline: auto; opacity: .85; }
  .hero-fig svg { width: 100%; margin-left: 0; }
}

/* Cada línea del titular sube detrás de su propia máscara. */
.hero-title .line { display: block; }

/* La constelación, en dos capas superpuestas. */
.bg-art--constelacion { position: absolute; inset: 0; opacity: 1; }
.constel .capa {
  position: absolute; inset: 0;
  display: grid; align-items: start; justify-items: center;
}
.constel .capa svg {
  width: 100%; max-width: 1100px; height: auto; margin-top: 4%;
  color: var(--sky);
}
.constel .base { opacity: .3; }
.constel .luz svg { color: #D6E6FB; }

/* El acordeón, mientras se cierra, mantiene el contenido montado. */
.faq details.is-closing .faq-body { grid-template-rows: 0fr; }

/* La entrada no bloquea la primera pintura: sólo afina lo que ya está. */
html:not(.is-ready) .hero-fig-in { opacity: 0; }
.hero-fig-in { transition: opacity .9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-ready) .hero-fig-in { opacity: 1; }
}


/* ---------- El header se invierte sobre los campos oscuros ---------- */

.site-header, .brand, .site-nav a, .nav-toggle {
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out),
              border-color .45s var(--ease-out);
}
.site-header[data-over="night"] {
  background: color-mix(in srgb, var(--night) 82%, transparent);
  border-bottom-color: var(--rule-night);
}
.site-header[data-over="lapis"] {
  background: color-mix(in srgb, var(--lapis) 84%, transparent);
  border-bottom-color: rgba(244, 241, 234, .22);
}
.site-header[data-over] .brand,
.site-header[data-over] .site-nav > a,
.site-header[data-over] .nav-toggle { color: var(--night-ink); }
.site-header[data-over] .brand small { color: var(--night-soft); }
.site-header[data-over] .site-nav a::after { background: var(--sky); }
.site-header[data-over] .site-nav a[aria-current="page"] { color: var(--sky); }
.site-header[data-over] .btn-solid { background: var(--sky); color: var(--night); }
.site-header[data-over] .btn-solid::before { background: #C3D8F7; }
.site-header[data-over="lapis"] .btn-solid { background: var(--bone); color: var(--lapis-deep); }
.site-header[data-over="lapis"] .btn-solid::before { background: #fff; }
@media (max-width: 880px) {
  .site-header[data-over] .site-nav { background: var(--night); border-bottom-color: var(--rule-night); }
  .site-header[data-over="lapis"] .site-nav { background: var(--lapis); }
  .site-header[data-over] .site-nav a { color: var(--night-ink); border-bottom-color: var(--rule-night); }
}

/* ============================================================
   ÚLTIMOS DETALLES
   ============================================================ */

/* El header es pegajoso: los anclas tienen que frenar antes de meterse
   abajo de la barra. */
[id] { scroll-margin-top: 92px; }

/* La regla del epígrafe se dibuja en lugar de aparecer. */
.kicker::before {
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out) .12s;
}
.is-in .kicker::before,
.kicker.is-in::before { transform: none; }
@media (prefers-reduced-motion: reduce) { .kicker::before { transform: none; } }

/* El masthead entra dato por dato. */
.masthead > div {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.masthead.is-in > div { opacity: 1; transform: none; }
.masthead.is-in > div:nth-child(1) { transition-delay: .04s; }
.masthead.is-in > div:nth-child(2) { transition-delay: .12s; }
.masthead.is-in > div:nth-child(3) { transition-delay: .20s; }
.masthead.is-in > div:nth-child(4) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .masthead > div { opacity: 1; transform: none; transition: none; }
}

/* Las tarjetas de nivel responden al puntero. */
.level {
  position: relative;
  transition: background .45s var(--ease-out);
}
.level::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--lapis);
  transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease-out);
}
.level:hover::before { transform: none; }
.level:hover { background: color-mix(in srgb, var(--lapis) 3%, var(--paper)); }

/* Las fichas de credencial, igual. */
.credit { transition: background .45s var(--ease-out); }
.credit:hover { background: var(--paper); }

/* El pie de página también respira. */
.site-footer li a { position: relative; }
.site-footer li a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--sky); transition: right .4s var(--ease-out);
}
.site-footer li a:hover::after { right: 0; }


/* ============================================================
   HERO: el titular ocupa la página y el astro queda detrás
   ============================================================ */

.hero {
  padding-block: clamp(2.6rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  position: relative; overflow: hidden;
  min-height: min(92svh, 980px);
  display: flex; align-items: center;
}
.hero > .wrap { width: 100%; position: relative; z-index: 2; }

/* El astro nace de la esquina inferior derecha y se sale del cuadro.
   Cortarlo es deliberado: un círculo entero y centrado compite con el
   titular; uno cortado lo acompaña. */
.hero-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-art svg {
  position: absolute;
  right: clamp(-22%, -13vw, -8%);
  bottom: clamp(-40%, -23vw, -16%);
  width: clamp(520px, 64vw, 980px); height: auto;
  color: var(--lapis); opacity: .55;
}

.hero-eyebrow {
  display: flex; flex-wrap: wrap; gap: .5rem clamp(1.5rem, 4vw, 3.4rem);
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.6rem, 3.4vw, 2.8rem);
}

.hero-title { margin: 0; }
.hero-title .line { display: block; }

/* Dos líneas de distinto cuerpo: la primera plantea, la segunda remata.
   Un titular con jerarquía adentro, no un bloque parejo. */
.hero-l1 { font-size: .6em; line-height: .96; }
.hero-l2 { display: block; margin-top: .04em; }

.hero-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(1.8rem, 3.6vw, 3rem);
}
.hero-foot .lede { max-width: 40ch; }
.hero-foot .micro { max-width: 38ch; }
.hero-act { justify-self: end; align-self: end; align-items: flex-end; }
@media (max-width: 860px) {
  .hero-foot { grid-template-columns: 1fr; }
  .hero-act { justify-self: start; }
  .hero { min-height: 0; display: block; }
  .hero-art svg { opacity: .28; width: 130%; right: -30%; bottom: -12%; }
  .hero-l1 { font-size: .68em; }
}

/* ============================================================
   LA BANDA DE MARCA
   ============================================================ */


/* ============================================================
   CAPA EDITORIAL
   Lo que separa una página linda de una premiada no es el gusto:
   es el contraste de escala. Tipografía enorme contra tipografía
   diminuta, y un campo de color que se banca ser protagonista.
   ============================================================ */

/* --- Micro-tipografía: el contrapunto de los titulares --- */

.micro {
  font-family: var(--f-text);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1.5;
  margin: 0;
}
.ground-night .micro { color: currentColor; opacity: .68; }
.ground-lapis .micro { color: currentColor; opacity: .82; }

/* --- El campo lapislázuli: el azul de Ely dejando de ser un detalle --- */

.ground-lapis {
  background: var(--lapis);
  color: #F4F1EA;
  position: relative;
}
.ground-lapis h1, .ground-lapis h2, .ground-lapis h3 { color: #FBF8F2; }
.ground-lapis p { color: rgba(244, 241, 234, .78); }
.ground-lapis .kicker { color: rgba(244, 241, 234, .72); }
.ground-lapis .wonk { color: #BFD3F2; }
.ground-lapis .rule { background: rgba(244, 241, 234, .2); }
.ground-lapis .offer { border-color: rgba(244, 241, 234, .2); }
.ground-lapis a { color: #DCE7FA; }
.ground-lapis .btn-solid { background: var(--bone); color: var(--lapis-deep); }
.ground-lapis .btn-solid::before { background: #fff; }
.ground-lapis .btn-line { border-color: rgba(244, 241, 234, .34); color: #F4F1EA; }
.ground-lapis .btn-line::before { background: var(--bone); }
.ground-lapis .btn-line:hover { color: var(--lapis-deep); border-color: var(--bone); }
.ground-lapis .fig, .ground-lapis .line-motif { color: #A8C3EC; }
.ground-lapis .pull blockquote { color: #CFDEF7; }
.ground-lapis .pull figcaption { color: rgba(244, 241, 234, .6); }
.ground-lapis .steps .step { border-color: rgba(244, 241, 234, .2); }
.ground-lapis .step-n { color: #BFD3F2; }

/* --- La banda de marca: el oficio, a todo el ancho --- */

.wordmark { position: relative; padding-block: clamp(2.6rem, 6vw, 5.5rem); overflow: hidden; }
.wordmark .wrap { position: relative; z-index: 2; }

.wordmark-line {
  font-family: var(--f-display);
  /* El cuerpo lo calcula el JS midiendo la línea: así toca los dos
     márgenes a cualquier ancho. Este clamp es el respaldo sin JS. */
  font-size: clamp(2.4rem, 11.4vw, 12rem);
  line-height: .86;
  letter-spacing: -.035em;
  white-space: nowrap;
  margin: 0;
  color: #FBF8F2;
  display: block;
}
.wordmark-line em { font-style: italic; color: #A8C3EC; letter-spacing: -.02em; }
.wordmark-line + .wordmark-line { margin-top: -.02em; }

.wordmark-seal {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(260px, 40vw, 560px);
  opacity: .5; pointer-events: none; z-index: 1;
  color: #9FBDE9;
}

.wordmark-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem 2rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(244, 241, 234, .22);
  padding-top: 1rem;
}

/* --- Reglas verticales: la grilla se ve, como en una revista --- */

.ruled::before, .ruled::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--rule); pointer-events: none; z-index: 0;
}
.ruled::before { left: var(--gutter); }
.ruled::after  { right: var(--gutter); }
.ground-night.ruled::before, .ground-night.ruled::after { background: rgba(244, 241, 234, .12); }
@media (max-width: 860px) { .ruled::before, .ruled::after { display: none; } }

.ground-lapis.ruled::before, .ground-lapis.ruled::after { background: rgba(244, 241, 234, .16); }

/* --- Folio de sección --- */

.folio {
  position: absolute; top: clamp(1.4rem, 3vw, 2.6rem);
  right: var(--gutter);
  font-family: var(--f-display); font-size: 1rem;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  z-index: 3; pointer-events: none;
  padding-right: .9rem;
}
.ground-night .folio { color: rgba(244, 241, 234, .55); }
.ground-lapis .folio { color: rgba(244, 241, 234, .62); }
@media (max-width: 860px) { .folio { display: none; } }

/* --- Detalle óptico --- */

.display { text-wrap: pretty; }
.bleed-l { margin-left: -.045em; }


/* --- Titulares de sección a todo el ancho --- */

.h2-xl {
  font-size: var(--t-h2-xl);
  line-height: .92;
  letter-spacing: -.026em;
  max-width: 17ch;
}
.h2-xl.h2-wide { max-width: none; }

.sect-banner {
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.sect-banner p { max-width: 42ch; }
@media (max-width: 860px) { .sect-banner { grid-template-columns: 1fr; align-items: start; } }

/* La fila principal de servicios pesa más que las otras dos. */
.offer--lead h3 { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.02; }
.offer--lead .offer-body p { font-size: 1.05rem; max-width: 52ch; }

/* El cierre: el titular más grande de la página después de la portada. */
.cta-final .display { max-width: 15ch; }
.cta-final .lede { max-width: 46ch; }

/* --- El pie es el valor más oscuro de la página: así el salto desde
       el campo lapislázuli se lee como una decisión, no como un error. --- */

.site-footer { background: #050C17; }
.site-footer::before {
  content: ""; display: block; height: 1px; width: 100%;
  background: rgba(244, 241, 234, .14);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.site-footer .wrap > .footer-top { margin-top: 0; }

/* Un poco más de aire entre los dos claros para que no se confundan. */
.ground-sand { background: #E9E3D7; }


/* --- Las dos líneas de la marca se separan apenas al scrollear --- */

.wordmark-line { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .wordmark-line { transform: none !important; }
}

/* Las listas de .prose traían el gris de fondo claro y quedaban
   ilegibles sobre los campos oscuros. */
.ground-night .prose ul li, .ground-night .prose p { color: var(--night-soft); }
.ground-lapis .prose ul li, .ground-lapis .prose p { color: rgba(244, 241, 234, .82); }
.ground-night .prose h3, .ground-lapis .prose h3 { color: inherit; }


/* ============================================================
   LA BANDA DE MARCA EN VERTICAL
   Un celular es un retrato: la composición tiene que apilarse, no
   ser la versión ancha apretada. En ancho, «Registros Akáshicos»
   entra en una línea; en angosto se parte en dos y las tres líneas
   quedan del mismo cuerpo, que es lo que la sostiene.
   ============================================================ */

.wm-angosto { display: none; }

/* Tres líneas sólo cuando el ancho ya no da para dos. Entre 430 y 720
   la versión de dos líneas ocupa la mitad de alto y se lee igual. */
@media (max-width: 430px) {
  .wm-ancho { display: none; }
  .wm-angosto { display: block; line-height: .9; }
  /* La itálica tiene descendentes largas: pegadas a .86 la «g» de
     Registros se le mete adentro a la «A» de Akáshicos. */
  .wm-angosto + .wm-angosto { margin-top: .05em; }
}


@media (max-width: 720px) {
  .wordmark { padding-block: clamp(2.8rem, 9vw, 4rem); }

  /* El sello se corre a la esquina y se apaga: detrás de tres líneas
     grandes sólo ensucia las letras. */
  .wordmark-seal {
    left: auto; right: -18%; top: auto; bottom: -14%;
    transform: none;
    width: 62vw; opacity: .2;
  }

  /* El pie deja de ser una lista y pasa a ser un colofón corrido. */
  .wordmark-foot {
    display: block;
    margin-top: clamp(1.4rem, 4vw, 2rem);
    padding-top: .9rem;
  }
  .wordmark-foot .micro {
    display: inline;
    font-size: .58rem;
    letter-spacing: .15em;
    line-height: 1.7;
  }
  .wordmark-foot .micro::after {
    /* Espacios duros: el espacio normal se colapsa contra el borde
       del inline y el punto queda pegado a la palabra siguiente. */
    content: "\00a0·\00a0";
    opacity: .5;
    letter-spacing: normal;
  }
  .wordmark-foot .micro:last-child::after { content: none; }
}


/* ============================================================
   CORRECCIONES DE AUDITORÍA
   ============================================================ */

/* Los enlaces del pie medían 18px de alto. El mínimo para un target
   táctil es 24; con el padding quedan en 28 sin mover el diseño. */
.site-footer ul { gap: .15rem; }
.site-footer li a, .site-footer li span {
  display: inline-block;
  padding-block: .32rem;
  line-height: 1.45;
}
.site-footer li a::after { bottom: .22rem; }
.footer-bottom a { display: inline-block; padding-block: .3rem; }
.breadcrumb a { display: inline-block; padding-block: .3rem; }

/* ============================================================
   LAS TRES PUERTAS
   La sección más genérica que tenía la página —número, título,
   párrafo, flechita— pasa a ser lo que el texto dice que es: tres
   puertas. El arco no es un adorno, es la forma del panel.
   ============================================================ */

.puertas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: stretch;
}

.puerta {
  position: relative;
  display: flex; flex-direction: column;
  isolation: isolate;
  text-decoration: none; color: inherit;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 50% 50% 3px 3px / 26% 26% 0 0;
  padding: clamp(2.9rem, 5.6vw, 4.2rem) clamp(1.3rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--paper);
  overflow: hidden;
  transition: background .5s var(--ease-out), border-color .5s var(--ease-out),
              transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.puerta:hover, .puerta:focus-visible {
  background: var(--bone);
  border-color: color-mix(in srgb, var(--lapis) 45%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -34px rgba(10, 74, 166, .45);
}

/* Los arcos concéntricos viven detrás del contenido y se abren de
   adentro hacia afuera. */
.puerta-arco {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  color: var(--lapis); opacity: .75;
  display: grid; align-items: end;
  /* Las patas del arco corrían como rayas detrás del texto. Se
     desvanecen antes de llegar a la copia: queda sólo la clave. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 24%, rgba(0,0,0,.28) 42%, transparent 56%);
          mask-image: linear-gradient(to bottom, #000 0 24%, rgba(0,0,0,.28) 42%, transparent 56%);
}
.puerta-arco svg { width: 100%; height: 100%; }
.puerta-arco path {
  transform-origin: 50% 100%;
  transition: transform .75s var(--ease-out), opacity .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.puerta:hover .puerta-arco path,
.puerta:focus-visible .puerta-arco path {
  transform: scale(calc(1 + (var(--i, 0) + 1) * .018));
}
.puerta:hover .puerta-arco { opacity: 1; }

.puerta-motivo {
  width: clamp(86px, 46%, 132px);
  margin: 0 auto clamp(1.3rem, 2.6vw, 2rem);
  color: var(--lapis);
  transition: transform .7s var(--ease-out);
}
.puerta:hover .puerta-motivo { transform: translateY(-4px) scale(1.04); }
.puerta-motivo svg { width: 100%; height: auto; }

.puerta-folio {
  position: absolute; top: clamp(1rem, 2vw, 1.5rem); left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display); font-size: .92rem;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

.puerta h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.1;
  text-align: center;
  margin-bottom: .75rem;
  transition: color .4s var(--ease-out);
}
.puerta:hover h3 { color: var(--lapis); }
.puerta p {
  font-size: .92rem; text-align: center; margin: 0 auto 1.2rem;
  max-width: 34ch;
}
.puerta .offer-tags { justify-content: center; margin-top: 0; margin-bottom: 1.4rem; }
.puerta-ir {
  margin-top: auto; align-self: center;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 500; color: var(--lapis);
  padding-top: .9rem; border-top: 1px solid var(--rule);
  width: 100%; justify-content: center;
  transition: gap .4s var(--ease-out), border-color .5s var(--ease-out);
}
.puerta:hover .puerta-ir { gap: .85rem; border-color: color-mix(in srgb, var(--lapis) 40%, transparent); }

/* La puerta principal pesa más que las otras dos. */
.puerta--principal { background: var(--bone); }
.puerta--principal h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.puerta--principal .puerta-arco { opacity: .7; }

@media (max-width: 900px) {
  .puertas { grid-template-columns: 1fr; gap: 1.1rem; }
  .puerta {
    border-radius: 44% 44% 3px 3px / 12% 12% 0 0;
    padding-top: clamp(2.8rem, 12vw, 4rem);
  }
  .puerta-arco { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .puerta, .puerta-arco path, .puerta-motivo { transition: none; }
  .puerta:hover { transform: none; }
  .puerta:hover .puerta-arco path { transform: none; }
}

/* ============================================================
   APERTURA
   No es una pantalla de carga: es el registro que se abre. El campo
   lapislázuli se parte al medio como dos hojas y deja ver la portada.

   Tres reglas de diseño, no de estética:
   1. Toda la secuencia es CSS. Si el JavaScript falla, se abre igual.
   2. No existe sin JS: el markup está oculto y sólo se muestra cuando
      un script mínimo en el <head> le pone la clase a <html>.
   3. Una sola vez por sesión, y se puede saltear con cualquier gesto.
   ============================================================ */

.site-intro { display: none; }

.intro .site-intro {
  display: block;
  position: fixed; inset: 0; z-index: 300;
  pointer-events: auto;
  animation: intro-cerrar .01s linear 2.15s forwards;
}
.intro { overflow: hidden; }

/* Las dos hojas */
.intro-hoja {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--lapis);
  animation: none;
  will-change: transform;
}
.intro-hoja--izq { left: 0;  transform-origin: left center;  animation: intro-izq .85s var(--ease-out) 1.25s forwards; }
.intro-hoja--der { right: 0; transform-origin: right center; animation: intro-der .85s var(--ease-out) 1.25s forwards; }

/* La junta: una hairline que marca por dónde se abre */
.intro-junta {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(244, 241, 234, .38);
  transform: translateX(-50%) scaleY(0); transform-origin: center;
  animation: intro-junta .6s var(--ease-out) .9s forwards;
}

/* El centro */
.intro-centro {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: 1.4rem; text-align: center;
  color: #F4F1EA;
  animation: intro-centro .5s var(--ease-out) 1.15s forwards;
}
.intro-sello { width: clamp(150px, 26vw, 250px); color: #AECAF0; }
.intro-sello svg { width: 100%; height: auto; }

/* Cada círculo se traza a compás, uno detrás del otro */
.traza {
  stroke-dasharray: var(--per, 280);
  stroke-dashoffset: var(--per, 280);
  animation: intro-traza .5s var(--ease-soft) var(--d, 0s) forwards;
}

.intro-marca {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1; letter-spacing: -.02em;
  color: #FBF8F2; margin: 0;
  opacity: 0; animation: intro-aparece .6s var(--ease-out) .42s forwards;
}
.intro-sub {
  color: rgba(244, 241, 234, .72); margin: 0;
  opacity: 0; animation: intro-aparece .6s var(--ease-out) .55s forwards;
}
.intro-saltar {
  position: absolute; left: 50%; bottom: clamp(1.4rem, 4vw, 2.6rem);
  transform: translateX(-50%);
  color: rgba(244, 241, 234, .74);
  opacity: 0; animation: intro-aparece .5s var(--ease-out) .7s forwards;
}

@keyframes intro-traza { to { stroke-dashoffset: 0; } }
@keyframes intro-aparece { to { opacity: 1; } }
@keyframes intro-junta { to { transform: translateX(-50%) scaleY(1); } }
@keyframes intro-centro { to { opacity: 0; transform: scale(1.07); } }
@keyframes intro-izq { to { transform: translateX(-101%); } }
@keyframes intro-der { to { transform: translateX(101%); } }
@keyframes intro-cerrar { to { visibility: hidden; pointer-events: none; } }

/* Saltear: se acelera todo y se termina */
.intro-fin .site-intro { animation: intro-cerrar .01s linear .42s forwards; }
.intro-fin .intro-hoja--izq { animation: intro-izq .42s var(--ease-out) forwards; }
.intro-fin .intro-hoja--der { animation: intro-der .42s var(--ease-out) forwards; }
.intro-fin .intro-centro { animation: intro-centro .28s var(--ease-out) forwards; }
.intro-fin .intro-saltar { animation: none; opacity: 0; }

/* Si el sistema pide menos movimiento la apertura no existe: el script
   del <head> ni siquiera le pone la clase a <html>. Esto es el cinturón
   de seguridad por si llegara a ponérsela igual. */
@media (prefers-reduced-motion: reduce) {
  .intro .site-intro { display: none; }
  .intro { overflow: auto; }
}

/* ============================================================
   INSTAGRAM
   Es donde publica casi todos los días y donde anuncia los cursos
   antes que en ningún otro lado. Estaba sólo en el pie.
   ============================================================ */

.ig-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .ig-grid { grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } }

.ig-cuenta { display: flex; flex-direction: column; gap: 1.4rem; }

/* El arroba se estira hasta tocar los dos bordes de su columna: es el
   dato que queremos que se lea antes que nada. */
.ig-arroba {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 5vw, 3.4rem);
  line-height: 1; letter-spacing: -.028em;
  white-space: nowrap;
  color: #FBF8F2; text-decoration: none;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(244, 241, 234, .3);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.ig-arroba:hover { color: #BFD3F2; border-bottom-color: #BFD3F2; }

.ig-datos { display: grid; gap: 0; margin: 0; }
.ig-datos > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: .72rem;
  border-bottom: 1px solid rgba(244, 241, 234, .18);
  font-size: .88rem;
}
.ig-datos dt {
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 241, 234, .66);
}
.ig-datos dd { margin: 0; text-align: right; color: #F4F1EA; }
.ig-datos a { color: #CFDEF7; }

/* El arroba en la fila de micro-datos de la portada */
.ig-hero {
  color: var(--lapis); text-decoration: none;
  /* con padding llega a los 24px de target táctil sin cambiar el aire
     de la fila de micro-datos */
  display: inline-block; padding-block: .35rem;
  box-shadow: inset 0 -1px 0 currentColor;
  transition: opacity .35s var(--ease-out);
}
.ig-hero:hover { opacity: .65; }

/* Los enlaces sueltos de TikTok y Facebook medían 18px de alto. */
.ig-datos dd a { display: inline-block; padding-block: .3rem; }
.ig-datos > div { padding-block: .55rem; }


/* La banda de marca no puede comerse la pantalla. Va al final del
   archivo a propósito: tiene que ganarle en la cascada al bloque de
   `max-width`, que también fija el padding. */
@media (max-height: 760px) {
  .wordmark { padding-block: clamp(1.4rem, 4vh, 2.8rem) !important; }
  .wordmark-foot { margin-top: 1rem; padding-top: .8rem; }
}

/* --- Redes del pie en una línea, no como cuatro ítems de la lista --- */
.footer-redes {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  margin: 1.1rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--rule-night);
}
.footer-redes a { font-size: .9rem; color: var(--night-soft); text-decoration: none; padding-block: .3rem; }
.footer-redes a:hover { color: var(--sky); }

/* --- El botón de Instagram: un enlace que se ve, no una sección entera --- */
.btn-ig {
  background: var(--lapis); color: #fff;
}
.btn-ig::before { background: var(--lapis-deep); }
.btn-ig:hover { color: #fff; }


/* La tapa es un mockup con esquinas redondeadas y fondo transparente.
   box-shadow dibujaría la sombra del rectángulo de la imagen, esquinas
   vacías incluidas; drop-shadow sigue la silueta real del libro. */
.photo--cover { max-width: 320px; }
.photo--cover img {
  box-shadow: none;
  filter: drop-shadow(0 22px 26px rgba(23, 32, 46, .22))
          drop-shadow(0 2px 3px rgba(23, 32, 46, .10));
}
@media (max-width: 820px) {
  .photo--cover { max-width: 250px; margin-inline: auto; }
}