/* Sistema de diseño del sitio. Extraído del <style> de index.html en la etapa E4
   (DISEÑO §5): un solo archivo, cacheado, compartido por todas las páginas.
   No se toca admin.html, que lleva su propio estilo. */
/* ───────────────────────────────────────────────────────────
   DRAGÓNASTROLÓGICO — public site
   ONE design system: ink · paper · brass · verdigris.
   One type scale, one --wide, one .hidden. Nothing below
   redefines :root again: if a value looks wrong, it is wrong here.
   ─────────────────────────────────────────────────────────── */

:root {
  --paper:#F2EEF6; --paper-2:#E8E1F0; --paper-3:#DCD2E7;
  --ink:#1E1638; --ink-soft:#3E3560; --ink-mute:#686283;
  --rule:#C9BEDB; --rule-soft:#DDD4E9;
  --brass:#7E5E14; --brass-bright:#9A7420;
  --verdigris:#5A3D99; --claret:#8E2F45;
  --claret-bg:#F5E3E8; --verd-bg:#E7DFF4; --brass-bg:#F4EAD2;
  --step--1:clamp(.78rem,.76rem + .12vw,.84rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.06rem);
  --step-1:clamp(1.18rem,1.12rem + .3vw,1.36rem);
  --step-2:clamp(1.4rem,1.28rem + .58vw,1.78rem);
  --step-3:clamp(1.75rem,1.5rem + 1.1vw,2.45rem);
  --step-4:clamp(2.1rem,1.62rem + 2.2vw,3.5rem);
  --u:.5rem; --wide:70rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#120E24; --paper-2:#1B1533; --paper-3:#251D42;
    --ink:#EEE8F7; --ink-soft:#CBC2DE; --ink-mute:#968EAE;
    --rule:#3A3059; --rule-soft:#2A2244;
    --brass:#D9B25A; --brass-bright:#EBC874;
    --verdigris:#B39DF0; --claret:#EE98A8;
    --claret-bg:#2E1726; --verd-bg:#221A3D; --brass-bg:#2A2114;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:#120E24; --paper-2:#1B1533; --paper-3:#251D42;
  --ink:#EEE8F7; --ink-soft:#CBC2DE; --ink-mute:#968EAE;
  --rule:#3A3059; --rule-soft:#2A2244;
  --brass:#D9B25A; --brass-bright:#EBC874;
  --verdigris:#B39DF0; --claret:#EE98A8;
  --claret-bg:#2E1726; --verd-bg:#221A3D; --brass-bg:#2A2114;
  color-scheme: dark;
}

/* ── foundations ────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--step-0); line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:"EB Garamond",Georgia,"Times New Roman",serif;font-weight:500;text-wrap:balance;line-height:1.15;margin:0}
.mono,.num{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
a{color:var(--verdigris);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--brass)}
:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
p{margin:0 0 1em}

/* ── layout ─────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:1.25rem}
section{padding-block:calc(var(--u)*7)}
section + section{border-top:1px solid var(--rule-soft)}
.stack{display:flex;flex-direction:column;gap:calc(var(--u)*2.5)}
.stack-sm{display:flex;flex-direction:column;gap:var(--u)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 calc(var(--u)*1.5)}
.lede{font-size:var(--step-1);color:var(--ink-soft);font-family:"EB Garamond",Georgia,serif;line-height:1.45}

/* ── site header ───────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;gap:calc(var(--u)*2);padding-block:calc(var(--u)*1.5);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:.55rem;margin-right:auto}
.brand .name{font-family:"EB Garamond",serif;font-size:var(--step-1);letter-spacing:.02em}
.brand .logo{width:36px;height:36px;border-radius:8px;display:block;flex:0 0 auto;align-self:center}
nav.site{display:flex;gap:calc(var(--u)*2);flex-wrap:wrap}
nav.site a{font-size:var(--step--1);color:var(--ink-soft);text-decoration:none;letter-spacing:.03em;padding-block:.2rem;border-bottom:1px solid transparent}
nav.site a:hover{color:var(--ink);border-bottom-color:var(--brass)}
/* dónde estás: el mismo borde de latón del hover, ya fijo */
nav.site a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass)}
/* En el teléfono las cinco entradas caben en UNA fila que rueda ella sola.
   Sin hamburguesa: cuesta un toque y esconde el destino. La barra es el
   único elemento que rueda de lado, junto con .tbl-wrap y .eph-wrap; el
   documento nunca desborda a lo ancho. */
@media (max-width:38rem){
  header.site .wrap{row-gap:calc(var(--u)*1.25)}
  .brand{margin-right:auto;min-width:0}
  nav.site{order:3;flex:1 0 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    gap:calc(var(--u)*2.5);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.site::-webkit-scrollbar{display:none}
  nav.site a{white-space:nowrap;scroll-snap-align:start;padding-block:.75rem}
}
.theme-btn{background:none;border:1px solid var(--rule);color:var(--ink-soft);border-radius:2px;cursor:pointer;font-size:.85rem;line-height:1;padding:.4rem .5rem;font-family:inherit}
.theme-btn:hover{border-color:var(--brass);color:var(--brass)}

/* ── saltar al contenido: con el encabezado pegajoso, su ausencia se nota ── */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--paper);color:var(--ink);
  border:1px solid var(--brass);padding:.6rem 1rem;font-size:var(--step--1);text-decoration:none}
.skip:focus{left:1.25rem;top:.6rem}

/* ── almanac band ───────────────────────────────────── */
.almanac{margin-top:calc(var(--u)*6);border-block:1px solid var(--rule);background:var(--paper-2);overflow-x:auto}
/* wraps to fewer columns on a phone instead of pushing the page sideways */
.almanac-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));min-width:0}
.alm-cell{padding:calc(var(--u)*2.5) calc(var(--u)*2);border-left:1px solid var(--rule-soft)}
.alm-cell:first-child{border-left:0}
.alm-k{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.45rem}
.alm-v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:var(--step-1);color:var(--ink);line-height:1.2}
.alm-v-row{display:flex;align-items:center;gap:.6rem}
.alm-n{font-size:var(--step--1);color:var(--ink-mute);margin-top:.3rem;line-height:1.4}
.alm-foot{border-top:1px solid var(--rule-soft);padding:calc(var(--u)*1.25) calc(var(--u)*2);font-size:var(--step--1);color:var(--ink-mute);background:var(--paper)}
.moon{width:2.6rem;height:2.6rem;display:block}

/* ── cards ─────────────────────────────────────────── */
.cards{display:grid;gap:calc(var(--u)*3);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:calc(var(--u)*4)}
.card{border:1px solid var(--rule);background:var(--paper);padding:calc(var(--u)*3);display:flex;flex-direction:column;gap:calc(var(--u)*1.5)}
.card h3{font-size:var(--step-2)}
.card .glyph{font-size:1.5rem;color:var(--brass);line-height:1;font-family:"EB Garamond",serif}
.card p{margin:0;font-size:var(--step--1);color:var(--ink-soft);line-height:1.6}
.card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:var(--step--1)}
.card dt{color:var(--ink-mute);font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;align-self:center}
.card dd{margin:0;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.card .spacer{flex:1}
.price-ok{display:inline-flex;align-items:center;gap:.4rem;background:var(--paper);border:1px solid var(--rule);color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-variant-numeric:tabular-nums;letter-spacing:.04em;padding:.25rem .5rem;border-radius:2px}
p.price-vat{font-size:.72rem;color:var(--ink-mute)}

/* ── buttons ────────────────────────────────────────────── */
.btn{font-family:inherit;font-size:var(--step--1);font-weight:500;padding:.7rem 1.2rem;border-radius:2px;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);letter-spacing:.02em;line-height:1.3;text-align:center}
.btn:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn-ghost{background:none;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{background:var(--paper-2);border-color:var(--brass);color:var(--ink)}
.btn-row{display:flex;gap:var(--u);flex-wrap:wrap;margin-top:calc(var(--u)*3)}

/* ── main tabs ───────────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rule);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;padding:calc(var(--u)*1.75) calc(var(--u)*2.5);white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.tabs button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--brass)}

/* ── avisos: la etiqueta de automático, el legal y el informativo ── */
.auto-label{border:1px solid var(--brass);background:var(--brass-bg);padding:calc(var(--u)*2) calc(var(--u)*2.5);font-size:var(--step--1);line-height:1.55;display:flex;gap:calc(var(--u)*1.5);align-items:flex-start}
.auto-label .ic{font-family:"IBM Plex Mono",monospace;color:var(--brass);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:.1rem}
.auto-label p{margin:0}
.auto-label p + p{margin-top:.5rem}
.legal-note{border-left:2px solid var(--claret);background:var(--claret-bg);padding:calc(var(--u)*2) calc(var(--u)*2.5);font-size:var(--step--1);line-height:1.58;color:var(--ink)}
.legal-note strong{color:var(--claret)}
.legal-note p:last-child{margin-bottom:0}
.info-note{border-left:2px solid var(--verdigris);background:var(--verd-bg);padding:calc(var(--u)*2) calc(var(--u)*2.5);font-size:var(--step--1);line-height:1.58}
.info-note p:last-child{margin-bottom:0}

/* ── forms ───────────────────────────────────────────── */
.form-grid{display:grid;gap:calc(var(--u)*2.5);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin-top:calc(var(--u)*3)}
label.field{display:flex;flex-direction:column;gap:.35rem;font-size:var(--step--1)}
label.field .lbl{color:var(--ink-soft);font-weight:500}
label.field .hint{color:var(--ink-mute);font-size:.72rem;line-height:1.4}
input[type=text],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=password],input[type=email],input[type=search],select{font-family:inherit;font-size:var(--step-0);padding:.55rem .7rem;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:2px;width:100%}
input:focus,select:focus{border-color:var(--brass)}
textarea{font-family:inherit;font-size:var(--step-0);padding:.6rem .7rem;background:var(--paper);
  color:var(--ink);border:1px solid var(--rule);border-radius:2px;width:100%;min-height:6rem;resize:vertical}
textarea:focus{border-color:var(--brass)}
.check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:var(--step--1);line-height:1.55;border:1px solid var(--rule);padding:calc(var(--u)*2);background:var(--paper);cursor:pointer}
.check input{margin:.25rem 0 0;width:1.05rem;height:1.05rem;accent-color:var(--verdigris)}
.check.check-critical{border-color:var(--claret);background:var(--claret-bg)}
.check-lite{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:var(--step--1);line-height:1.5;cursor:pointer}
.check-lite input{margin:.2rem 0 0;width:1.05rem;height:1.05rem;accent-color:var(--verdigris)}
.err{color:var(--claret);font-size:var(--step--1);margin-top:.8rem}

/* ── chart wheel ─────────────────────────────────────── */
.wheel-wrap{display:grid;gap:calc(var(--u)*4);grid-template-columns:minmax(0,1fr);margin-top:calc(var(--u)*4)}
@media (min-width:60rem){.wheel-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.wheel{width:100%;max-width:34rem;margin-inline:auto;aspect-ratio:1;display:block}
.wheel text{font-family:"IBM Plex Mono",monospace}

/* ── tables ──────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule)}
table.t{border-collapse:collapse;width:100%;min-width:22rem;font-family:"IBM Plex Mono",monospace;font-size:var(--step--1);font-variant-numeric:tabular-nums}
table.t th,table.t td{padding:.45rem .7rem;text-align:left;border-bottom:1px solid var(--rule-soft)}
table.t th{background:var(--paper-2);font-weight:500;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
table.t tr:last-child td{border-bottom:0}
table.t .sym{color:var(--brass);font-family:"EB Garamond",serif;font-size:1.2em}
.retro{color:var(--claret);font-size:.85em}
.eph-wrap{overflow-x:auto;border:1px solid var(--rule);margin-top:calc(var(--u)*3)}
table.eph{border-collapse:collapse;width:100%;min-width:30rem;font-family:"IBM Plex Mono",monospace;font-size:var(--step--1);font-variant-numeric:tabular-nums}
table.eph th,table.eph td{padding:.5rem .8rem;text-align:left;border-bottom:1px solid var(--rule-soft)}
table.eph th{background:var(--paper-2);font-weight:500;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
table.eph tr:last-child td{border-bottom:0}
table.eph .sym{color:var(--brass);font-family:"EB Garamond",serif;font-size:1.15em}

/* ── reading ─────────────────────────────────────────── */
.reading{display:flex;flex-direction:column;gap:calc(var(--u)*3);margin-top:calc(var(--u)*4)}
.reading-item{border:1px solid var(--rule);background:var(--paper);padding:calc(var(--u)*2.5)}
.reading-item h4{margin:0 0 .5rem;font-family:"EB Garamond",serif;font-size:var(--step-1);font-weight:600;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.reading-item h4 .glyph{color:var(--brass);font-size:1.2em}
.reading-item h4 .pos{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.08em;color:var(--ink-mute);text-transform:uppercase;margin-left:auto}
.reading-item p{margin:0;font-size:var(--step--1);line-height:1.6;color:var(--ink-soft)}
.reading-item p + p{margin-top:.6rem}

/* ── tarot ───────────────────────────────────────────── */
.tarot-cards{display:grid;gap:calc(var(--u)*3);grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));margin-top:calc(var(--u)*4)}
.tarot-card{display:flex;flex-direction:column;gap:.7rem;perspective:900px}
.tarot-card .plate{width:100%;aspect-ratio:.6;border:1px solid var(--rule);background:var(--paper-2);display:block}
.tarot-card .plate.reversed{transform:rotate(180deg)}
.tarot-card .position-name{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--brass)}
.tarot-card .name{font-family:"EB Garamond",serif;font-size:var(--step-1);font-weight:600;line-height:1.2}
.tarot-card .state{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.tarot-card .text{font-size:var(--step--1);line-height:1.55;color:var(--ink-soft);margin:0}
/* lo que la carta trae impreso, transcrito de la baraja */
.tarot-card .printed{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:.55rem;display:flex;flex-direction:column;gap:.3rem}
.tarot-card .printed-head{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin:0}
.tarot-card .printed-name{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.06em;color:var(--ink-mute);margin:0;overflow-wrap:anywhere}
.tarot-card .printed-rows{font-size:.72rem;line-height:1.45;color:var(--ink-soft);margin:0;display:flex;flex-direction:column;gap:.1rem}
.tarot-card .printed-rows .k{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute)}
.tarot-card .printed-motto{font-family:"EB Garamond",serif;font-size:.86rem;line-height:1.4;font-style:italic;color:var(--ink);margin:0}

/* ── la carta que se voltea ──────────────────────────── */
.tarot-card .flip{position:relative;width:100%;aspect-ratio:620/924;transform-style:preserve-3d;
  transition:transform .56s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.tarot-card.open .flip{transform:rotateY(180deg)}
.tarot-card .face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--rule);background:var(--paper-2);overflow:hidden}
.tarot-card .face.back{transform:rotateY(0deg)}
.tarot-card .face.front{transform:rotateY(180deg)}
/* la lámina de la baraja propia manda; el dibujo geométrico queda de respaldo
   y solo aparece si la imagen no carga */
.tarot-card .face .card-art{width:100%;height:100%;max-width:100%;object-fit:contain;display:block}
.tarot-card .face svg{width:100%;height:100%;display:none;border:0;aspect-ratio:auto}
.tarot-card .face.art-failed .card-art{display:none}
.tarot-card .face.art-failed svg{display:block}
.tarot-card .face.front.reversed .card-art,
.tarot-card .face.front.reversed svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.tarot-card .flip{transition:none}}

/* El nombre de la carta y su significado SON la lectura: aparecen cuando la
   carta se voltea, no antes. El hueco se reserva igual —visibility, no
   display— para que la rejilla no dé un salto al revelarse. */
.tarot-card .reveal{display:flex;flex-direction:column;gap:.7rem;visibility:hidden;opacity:0;transition:opacity .3s ease .18s}
.tarot-card.open .reveal{visibility:visible;opacity:1}
/* sin movimiento las cartas ya salen volteadas, así que todo se lee de una vez */
@media (prefers-reduced-motion:reduce){
  .tarot-card .reveal{visibility:visible;opacity:1;transition:none}
}

/* ── el barajeo, el reparto y el volteo ────────────────────
   Adorno sobre la tirada, en tres tiempos que se leen uno tras otro: la
   baraja se baraja, se reparten tres cartas bocabajo y después cada una se
   voltea. Cinco reversos encima de la rejilla, en una capa absoluta para
   que nada del diseño se recalcule. Solo se animan transform y opacity; al
   acabar, el guion borra los elementos y cancela todo.

   El reverso que vuela y el de la carta que aterriza son la misma imagen y
   se recortan igual (contain): el relevo entre uno y otro, de .14s, no se
   nota, y por eso la carta se queda bocabajo hasta que le toca voltearse. */
.tarot-stage{position:relative}
.tarot-shuffle{position:absolute;inset:0;pointer-events:none;z-index:2}
.tarot-shuffle .shuffle-card{position:absolute;display:block;object-fit:contain;
  border:1px solid var(--rule);background:var(--paper-2);
  box-shadow:0 .35rem 1.1rem rgba(0,0,0,.18);will-change:transform,opacity}
.tarot-cards.dealing .tarot-card{opacity:0}
.tarot-cards.dealing .tarot-card.dealt{opacity:1;transition:opacity .14s linear}
/* sin movimiento: no hay barajeo y las cartas se reparten con el fundido */
@media (prefers-reduced-motion:reduce){
  .tarot-shuffle{display:none}
  .tarot-cards.dealing .tarot-card{opacity:1}
  .tarot-cards.dealing .tarot-card.dealt{transition:none}
}

/* ── account, membership and member area ─────────────── */
.status-line{font-size:var(--step--1);color:var(--ink-mute);margin:0}
.status-line.ok{color:var(--verdigris)}
.status-line.bad{color:var(--claret)}
.panel{border:1px solid var(--rule);background:var(--paper);padding:calc(var(--u)*2.5);overflow-wrap:anywhere}
.panel-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* las dos copias de «Mis datos», una al lado de la otra; en el teléfono, una debajo de la otra */
.cmp{display:grid;gap:calc(var(--u)*2);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.cmp-col{border:1px solid var(--rule);background:var(--paper-2);padding:calc(var(--u)*2);min-width:0}
.cmp-head{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin:0 0 .7rem}
.cmp-list{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;font-size:var(--step--1)}
.cmp-list dt{color:var(--ink-mute);font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.cmp-list dd{margin:0;overflow-wrap:anywhere}
.cmp-list dd.diff{color:var(--claret);font-weight:600}
.gsi-slot{display:flex;align-items:center;gap:var(--u);flex-wrap:wrap;min-height:2.75rem}
.banner{border:1px solid var(--verdigris);background:var(--verd-bg);padding:calc(var(--u)*2) calc(var(--u)*2.5);font-size:var(--step--1);line-height:1.55;margin-top:calc(var(--u)*3)}
.banner.bad{border-color:var(--claret);background:var(--claret-bg)}
.banner p:last-child{margin-bottom:0}
.memb{border:1px solid var(--rule);background:var(--paper-2);margin-top:calc(var(--u)*4)}
.memb-head{padding:calc(var(--u)*3);border-bottom:1px solid var(--rule)}
.memb-body{padding:calc(var(--u)*3);display:flex;flex-direction:column;gap:calc(var(--u)*2.5)}
.state-pill{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border-radius:2px;border:1px solid currentColor}
.state-on{color:var(--verdigris);background:var(--verd-bg)}
.state-off{color:var(--ink-mute)}
.state-wait{color:var(--brass);background:var(--brass-bg)}
.item-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--u)*1.5)}
.item{border:1px solid var(--rule);background:var(--paper);padding:calc(var(--u)*2.25);display:flex;flex-direction:column;gap:calc(var(--u)*1.25);min-width:0}
.item .meta{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.item .body{margin:0;font-size:var(--step--1);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.item .answer{border-left:2px solid var(--verdigris);padding-left:calc(var(--u)*1.5)}
.empty{font-size:var(--step--1);color:var(--ink-mute);border:1px dashed var(--rule);padding:calc(var(--u)*2.5);margin:0}

/* ── tools head ──────────────────────────────────────── */
.tools-head{padding-block:calc(var(--u)*7) 0}

/* ── site footer ─────────────────────────────────────── */
footer.site{border-top:1px solid var(--rule);background:var(--paper-2);padding-block:calc(var(--u)*6);margin-top:calc(var(--u)*4)}
footer.site p{font-size:var(--step--1);color:var(--ink-soft);max-width:60ch}
.foot-grid{display:grid;gap:calc(var(--u)*4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.foot-grid h4{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--brass);margin:0 0 .8rem}
.h4-next{margin-top:1.6rem}
.foot-grid p,.foot-grid li{font-size:var(--step--1);color:var(--ink-soft);line-height:1.6}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-bottom{margin-top:calc(var(--u)*5);padding-top:calc(var(--u)*3);border-top:1px solid var(--rule);font-size:var(--step--1);color:var(--ink-mute)}

/* ── age check ──────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center;padding:1.25rem}
.gate-card{max-width:30rem;text-align:left}
.gate-card .mark{font-size:3rem;color:var(--brass);font-family:"EB Garamond",serif;line-height:1;display:block;margin-bottom:1rem}
.gate-card h2{font-size:var(--step-3);margin-bottom:.6rem}
.gate-card p{font-size:var(--step--1);color:var(--ink-soft)}
.gate-denied{display:none}

/* ── celestial sphere ─────────────────────────────────────── */
/* The sky is fixed behind the whole page, not only behind the cover:
   it stays visible along the entire journey. Everything else in the
   body rides above it at z-index 1. */
#sky{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
header.site,main,footer.site{position:relative;z-index:1}
/* Sections let the sky through; the cover carries no background at
   all, so there the sky can be seen whole and clicked. */
main section{background:color-mix(in srgb,var(--paper) 88%,transparent)}
main section.hero-3d{background:none}
/* and the clicks go through the cover to the canvas underneath; the
   almanac takes its own back, so the panel stays usable */
main section.hero-3d{pointer-events:none}
main section.hero-3d h1,
main section.hero-3d p,
main section.hero-3d a,
main section.hero-3d button{pointer-events:auto}
.hero-3d{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 42%, color-mix(in srgb,var(--paper) 82%,transparent) 0%, color-mix(in srgb,var(--paper) 58%,transparent) 38%, color-mix(in srgb,var(--paper) 12%,transparent) 72%, transparent 100%)}
.hero-3d-inner{position:relative;z-index:2;padding-block:calc(var(--u)*13) calc(var(--u)*8)}
.sky-label{position:fixed;left:1.25rem;bottom:1.1rem;z-index:2;pointer-events:none;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);opacity:0;transition:opacity .35s ease;
  border:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 86%,transparent);padding:.35rem .6rem;border-radius:2px}
.sky-label.visible{opacity:1}
.hero-hint{position:absolute;right:1.25rem;bottom:1.1rem;z-index:3;pointer-events:none;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;color:var(--ink-mute);opacity:.75;max-width:14rem;text-align:right;line-height:1.5}
@media (max-width:38rem){.hero-hint{display:none}}
@media (prefers-reduced-motion:reduce){.sky-label{transition:none}}

/* ── utilidades: las que sustituyen a los style="…" repetidos ──────
   Eran los atributos en línea que más veces aparecían en la página.
   Van al final a propósito: así una utilidad gana al componente sobre
   el que se pone, igual que ganaba el atributo en línea. */
/* primer piso: las que declaran varias propiedades a la vez */
.fine{font-size:var(--step--1);color:var(--ink-mute)}
.note-sm{font-size:var(--step--1);color:var(--ink-soft)}
.head-note{font-size:var(--step--1);color:var(--ink-soft);margin:.7rem 0 0}
.tool-foot{font-size:var(--step--1);line-height:1.6;color:var(--ink-mute);max-width:56rem;margin:calc(var(--u)*3) 0 0}
.row-split{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap}
.fieldset-bare{border:0;padding:0;margin:0 0 calc(var(--u)*2)}
.legend-lbl{font-size:var(--step--1);font-weight:600;margin-bottom:.6rem}
.opt{flex:1;min-width:11rem}             /* un radio de la fila de planes o de métodos */
.form-grid-wide{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.check-col{margin-top:calc(var(--u)*3);display:flex;flex-direction:column;gap:calc(var(--u)*2)}

/* segundo piso: una sola propiedad. Va después para que gane a lo de
   arriba cuando las dos se ponen en el mismo elemento. */
.h-sec{font-size:var(--step-3)}          /* el <h2> de cada sección */
h3.h-card{font-size:var(--step-1)}       /* el <h3> de una tarjeta */
.h-box{font-size:var(--step-2)}          /* el <h3> de un .memb-head */
.t-1{font-size:var(--step-1)}            /* un párrafo destacado, no un título */
.m-20ch{max-width:20ch}
.m-22ch{max-width:22ch}
.m-24ch{max-width:24ch}
.m-48ch{max-width:48ch}
.m-52ch{max-width:52ch}
.m-44{max-width:44rem}
.m-52{max-width:52rem}
.m-56{max-width:56rem}
.m-58{max-width:58rem}
.wrap-read{max-width:44rem}              /* la columna de lectura de «Cómo se calcula» */
.lede-1{margin-top:1rem}                 /* el .lede justo debajo de un <h2> */
.lede-2{margin-top:.6rem}                /* un segundo párrafo de .lede */
.nudge-3{margin-top:.3rem}
.nudge-4{margin-top:.4rem}
.nudge{margin-top:.6rem}
.nudge-lg{margin-top:.8rem}
.gap-05{margin-top:calc(var(--u)*1.5)}
.gap-1{margin-top:calc(var(--u)*2)}
.gap-15{margin-top:calc(var(--u)*2.5)}
.gap-2{margin-top:calc(var(--u)*3)}
.gap-3{margin-top:calc(var(--u)*4)}
.gap-4{margin-top:calc(var(--u)*5)}
.gap-5{margin-top:calc(var(--u)*6)}
.flush{margin-top:0}                     /* un .btn-row que no debe añadir su hueco */
.flat{margin:0}
.eb-3{margin:0 0 .3rem}
.eb-9{margin:0 0 .9rem}
.mb-1{margin:0 0 calc(var(--u)*2)}
.mt7{margin:.7rem 0 0}
.state-note{margin:.9rem 0 0}
h4.h4-next{margin-top:1.6rem}
.plain{text-decoration:none}             /* una <a> con pinta de .btn */
.upper{text-transform:uppercase}
.gate-row{margin-top:1.5rem}
.gate-fine{margin-top:1.25rem;font-size:.68rem;letter-spacing:.06em;color:var(--ink-mute)}

.hidden{display:none!important}