/* Fuentes alojadas en el servidor (licencia SIL Open Font License 1.1) */
@font-face { font-family: 'Cormorant Garamond'; src: url(../assets/fuentes/cormorant-garamond-latin-300-normal.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../assets/fuentes/cormorant-garamond-latin-300-italic.woff2) format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../assets/fuentes/cormorant-garamond-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../assets/fuentes/cormorant-garamond-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../assets/fuentes/cormorant-garamond-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(../assets/fuentes/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(../assets/fuentes/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* Base */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
/* Diseño: una noche que amanece. La página avanza de luna nueva a luna llena y el visitante es la luz. Negro y marfil; mono para los datos, serif ligera para la voz; el único oro es la luz. */
:root {
  --noche: #030304;
  --noche-2: #0A0A0D;
  --noche-3: #121017;
  --marfil: #EDE6D6;
  --marfil-2: #BDB6A8;
  --ceniza: #8E8A80;
  --menta: #7FE3C3;
  --vela: #E9C987;
  --aurora-1: #2FD3A0;
  --aurora-2: #1FB5C9;
  --aurora-3: #8A4DFF;
  --linea: rgba(237, 230, 214, .14);
  --linea-2: rgba(237, 230, 214, .3);
  --hueso: #EDE6D6;
  --hueso-2: #E3DBCB;
  --tinta: #0B0B10;
  --tinta-2: #4B463F;
  --tinta-3: #6A6459;
  --linea-tinta: rgba(11, 11, 16, .18);
  --error: #B4232C;
  --f-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --gut-l: max(clamp(16px, 4.4vw, 72px), env(safe-area-inset-left, 0px));
  --gut-r: max(clamp(16px, 4.4vw, 72px), env(safe-area-inset-right, 0px));
  --lento: cubic-bezier(.45, 0, .2, 1);
  color-scheme: dark;
}
html { background: var(--noche); }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body { background: var(--noche); color: var(--marfil); font: 500 19px/1.55 var(--f-display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
::selection { background: var(--vela); color: var(--noche); }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, figure, fieldset, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--vela); outline-offset: 4px; border-radius: 4px; }
[hidden] { display: none !important; }
.wrap { padding-left: var(--gut-l); padding-right: var(--gut-r); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); font-weight: 400; }
.art, .ico { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.art .f, .ico .f { fill: currentColor; stroke: none; }
.art .ff { fill: currentColor; fill-opacity: .12; }

/* voz */
.eyebrow { font: 400 11.5px/1.3 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--menta); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow svg { width: 16px; height: 16px; flex: 0 0 auto; overflow: visible; }
.h2 { font: 300 clamp(42px, 5.6vw, 86px)/.98 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.h2 em, .display em { font-style: italic; font-weight: 300; }
.sub { font: italic 400 clamp(20px, 1.8vw, 25px)/1.42 var(--f-display); color: var(--marfil-2); max-width: 36ch; text-wrap: pretty; }
.hint { font: 400 12px/1.6 var(--f-mono); color: var(--ceniza); letter-spacing: .02em; max-width: 46ch; }

/* botones */
.btn { --bh: 54px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--bh); padding: 0 26px; border-radius: 999px; border: 1px solid transparent; background: none; font: 500 12.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background .5s var(--lento), color .5s var(--lento), border-color .5s var(--lento); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn--solid { background: var(--marfil); color: var(--noche); }
.btn--solid:hover { background: #FFFFFF; }
.btn--line { border-color: var(--linea-2); color: var(--marfil); }
.btn--line:hover { border-color: var(--marfil); }
.btn--text { height: 44px; padding: 0 8px; color: var(--marfil-2); text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--linea-2); }
.btn--text:hover { color: var(--marfil); text-decoration-color: currentColor; }
.btn--ink { background: var(--tinta); color: var(--hueso); }
.btn--ink:hover { background: #2A2830; }
.btn--line-ink { border-color: rgba(11, 11, 16, .3); color: var(--tinta); }
.btn--line-ink:hover { border-color: var(--tinta); }
.btn--text-ink { height: 44px; padding: 0 8px; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 7px; }

/* encabezado sobre la portada */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-top: calc(env(safe-area-inset-top, 0px) + 24px); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand svg { width: 20px; height: 27px; fill: none; stroke: var(--marfil); stroke-width: 1.6; }
.brand span { font: 400 21px/1 var(--f-display); letter-spacing: .44em; margin-right: -.44em; }
.top__end { display: flex; align-items: center; gap: 8px; }
.sound { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--marfil-2); font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.sound__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; transition: background .4s, box-shadow .4s; }
.sound[aria-pressed="true"] { color: var(--vela); }
.sound[aria-pressed="true"] .sound__dot { background: var(--vela); box-shadow: 0 0 12px var(--vela); }
.top__cta { height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid var(--linea-2); border-radius: 999px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.top__cta:hover { border-color: var(--marfil); }

/* navegación por fases */
.lunas { position: fixed; z-index: 40; right: max(22px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; color: var(--marfil); transition: color .6s; }
.lunas a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.lunas svg { width: 18px; height: 18px; overflow: visible; transition: transform .7s var(--lento); }
.lunas .l-bg { fill: none; stroke: currentColor; stroke-width: .9; opacity: .55; }
.lunas .l-lit { fill: currentColor; opacity: .8; }
.lunas a span { position: absolute; right: 46px; top: 50%; transform: translate(8px, -50%); white-space: nowrap; opacity: 0; pointer-events: none; padding: 8px 12px; border-radius: 999px; background: rgba(10, 10, 13, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 10.5px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; transition: opacity .5s, transform .6s var(--lento), background .6s; }
.lunas.on-light a span { background: rgba(237, 230, 214, .9); }
.lunas a:hover span, .lunas a:focus-visible span, .lunas a.is-flash span { opacity: 1; transform: translate(0, -50%); }
.lunas a.is-on svg { transform: scale(1.35); }
.lunas a.is-on .l-bg { opacity: 1; }
.lunas.on-light { color: var(--tinta); }

/* luna nueva: la luz revela */
.nueva { position: relative; isolation: isolate; overflow: clip; min-height: clamp(640px, 100svh, 980px); display: grid; align-items: center; }
.nueva__art { position: absolute; inset: 0; pointer-events: none; }
.pant { position: absolute; right: max(-3vw, -50px); top: 52%; width: min(820px, 64vw); height: auto; transform: translateY(-50%); max-width: none; }
.nueva__ghost { opacity: .065; }
.nueva__lit { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(circle var(--lr, 230px) at var(--lx, 72%) var(--ly, 48%), #000 0%, #000 28%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .18) 82%, transparent 100%); mask-image: radial-gradient(circle var(--lr, 230px) at var(--lx, 72%) var(--ly, 48%), #000 0%, #000 28%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .18) 82%, transparent 100%); }
.nueva__lit .pant { filter: sepia(.18) brightness(1.06); }
.halo { position: absolute; color: var(--marfil); right: calc(max(-3vw, -50px) - min(820px, 64vw) * .04); top: 52%; width: calc(min(820px, 64vw) * 1.08); aspect-ratio: 1; transform: translateY(-50%); }
.halo svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; }
.nueva__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle calc(var(--lr, 230px) * 1.7) at var(--lx, 72%) var(--ly, 48%), rgba(233, 201, 135, .17), rgba(233, 201, 135, .05) 45%, transparent 72%); mix-blend-mode: screen; }
.motas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ojo { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(255, 244, 214, .95) 0, rgba(233, 201, 135, .55) 22%, transparent 62%); }
.ojo::before, .ojo::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255, 244, 214, .85); }
.ojo::before { width: 30px; height: 1px; margin: -.5px 0 0 -15px; }
.ojo::after { width: 1px; height: 30px; margin: -15px 0 0 -.5px; }
.nueva__copy { position: relative; z-index: 2; display: grid; gap: 26px; justify-items: start; padding-block: 120px 110px; }
.kicker { font: 400 11px/1.4 var(--f-mono); letter-spacing: .28em; text-transform: uppercase; color: var(--marfil-2); }
.display { font: 300 clamp(54px, 8.2vw, 128px)/.92 var(--f-display); letter-spacing: -.02em; max-width: 9.5em; text-wrap: balance; }
.display em { display: block; }
.lead { font: italic 400 clamp(21px, 1.9vw, 26px)/1.42 var(--f-display); color: var(--marfil-2); max-width: 30ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 6px; }
.nueva__hint { position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; transform: translate(calc(var(--lx, 72vw) - 50%), calc(var(--ly, 48vh) + var(--lr, 230px) * .56)); font: 400 10.5px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--vela); opacity: .85; transition: opacity 1.2s; white-space: nowrap; }
.nueva__hint.is-off { opacity: 0; }
.nueva__moon { position: absolute; z-index: 2; left: var(--gut-l); bottom: 34px; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ceniza); }
.nueva__moon svg { width: 14px; height: 14px; overflow: visible; }
.moon-bg { fill: rgba(237, 230, 214, .06); stroke: rgba(237, 230, 214, .45); stroke-width: .8; }
.moon-lit { fill: var(--marfil); }
.eyebrow .moon-bg { stroke: currentColor; fill: none; }
.eyebrow .moon-lit { fill: currentColor; }

/* creciente: el oráculo */
.rito { position: relative; padding-block: clamp(100px, 11vw, 170px); }
.rito__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.rito__stage { position: relative; width: min(640px, 100%); aspect-ratio: 1; justify-self: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rito__guide { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--marfil); pointer-events: none; }
.wheel { position: absolute; inset: 0; }
.wc { position: absolute; left: 50%; top: 50%; width: 168px; height: 276px; margin: -138px 0 0 -84px; padding: 0; border: 0; background: none; perspective: 1200px; -webkit-tap-highlight-color: transparent; border-radius: 14px; transform: scale(.62); }
.wc__flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.wc__face { position: absolute; inset: 0; border-radius: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.wc__back { background: var(--noche-2); border: 1.5px solid var(--linea-2); display: grid; place-items: center; color: var(--marfil); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); transition: border-color .4s, box-shadow .4s; }
.wc__back::before, .wc__front::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(237, 230, 214, .22); border-radius: 9px; pointer-events: none; }
.wc__back .art { width: 96px; height: 116px; stroke-width: 2.4; }
.wc__front { transform: rotateY(180deg); background: linear-gradient(var(--noche-2), var(--noche-2)) padding-box, conic-gradient(from var(--ang, 0deg), var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-1)) border-box; border: 1.5px solid transparent; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; padding: 20px 12px 22px; box-sizing: border-box; box-shadow: 0 0 60px rgba(47, 211, 160, .18), 0 0 120px rgba(138, 77, 255, .2); }
.anim .wc.is-star .wc__front { animation: ang 7s linear infinite; }
.anim .wc { will-change: transform; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ang { to { --ang: 360deg; } }
.tf__num { font: 400 10.5px/1 var(--f-mono); letter-spacing: .3em; color: var(--marfil-2); }
.tf__art { align-self: center; display: grid; place-items: center; width: 100%; color: var(--marfil); }
.tf__art .art { width: 96px; height: 116px; }
.tf__art img { width: 150px; height: 150px; }
.tf__name { font: 400 22px/1.05 var(--f-display); text-align: center; }
.tf__key { margin-top: 7px; font: 400 9.5px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--menta); }
.wc.is-star { pointer-events: none; }
.state-wheel .wc:hover .wc__back, .state-wheel .wc:focus-visible .wc__back { border-color: var(--vela); box-shadow: 0 0 34px rgba(233, 201, 135, .45); }
.breath { position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%; border: 0; background: none; padding: 0; color: var(--marfil); -webkit-tap-highlight-color: transparent; touch-action: none; -webkit-touch-callout: none; }
.breath__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.breath__bg { fill: none; stroke: rgba(237, 230, 214, .22); stroke-width: .5; }
.breath__pg { fill: none; stroke: var(--vela); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 351.86; stroke-dashoffset: 351.86; filter: drop-shadow(0 0 3px rgba(233, 201, 135, .8)); }
.breath__txt { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font: 400 10.5px/1.4 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--vela); }
.breath:focus-visible { outline-offset: 8px; border-radius: 50%; }
.breath { transition: opacity .6s, visibility 0s; }
.rito:not(.state-closed) .breath { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s, visibility 0s .5s; }
.rito__text { position: relative; min-width: 0; }
.rito__intro, .rito__read { display: grid; gap: 22px; justify-items: start; }
.rito__name { font-size: clamp(48px, 5.4vw, 84px); }
.rito__key { font: 400 11.5px/1 var(--f-mono); letter-spacing: .32em; text-transform: uppercase; color: var(--menta); margin-top: -6px; }
.rito__msg { font: italic 400 clamp(23px, 2.1vw, 30px)/1.35 var(--f-display); max-width: 26ch; text-wrap: balance; }
.rito__ctas { display: grid; gap: 8px; justify-items: start; margin-top: 4px; }
.rito__more { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-left: -8px; }

/* cuarto creciente: dualidad */
.dual { position: relative; padding-block: clamp(100px, 11vw, 170px); }
.dual__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.dual__copy { display: grid; gap: 26px; justify-items: start; min-width: 0; }
.dual__p { font: 400 clamp(21px, 1.8vw, 25px)/1.5 var(--f-display); color: var(--marfil-2); max-width: 38ch; }
.dual__quote { font: italic 300 clamp(30px, 3vw, 46px)/1.15 var(--f-display); max-width: 18ch; text-wrap: balance; }
.dual__words { display: flex; flex-wrap: wrap; gap: 8px 0; font: 400 11px/1.6 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ceniza); }
.dual__words li { display: inline-flex; align-items: center; }
.dual__words li + li::before { content: ''; width: 5px; height: 5px; border: 1px solid var(--vela); transform: rotate(45deg); margin: 0 16px; }
.dual__viz { position: relative; width: min(560px, 100%); aspect-ratio: 1; justify-self: center; border-radius: 50%; overflow: hidden; --split: 50%; box-shadow: 0 0 0 1px var(--linea-2), 0 0 90px rgba(237, 230, 214, .08); touch-action: pan-y; isolation: isolate; }
.dual__side { position: absolute; inset: 0; display: grid; place-items: center; }
.dual__side img { width: 104%; height: auto; max-width: none; }
.dual__side--dark { background: var(--noche-2); }
.dual__side--light { background: var(--hueso); clip-path: inset(0 0 0 var(--split)); }
.dual__line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1px; margin-left: -.5px; background: var(--vela); box-shadow: 0 0 14px var(--vela); pointer-events: none; }
.dual__knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--noche); border: 1px solid var(--vela); display: grid; place-items: center; color: var(--vela); }
.dual__knob svg { width: 22px; height: 22px; fill: currentColor; }
.dual__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; z-index: 3; }
.dual__viz:focus-within { box-shadow: 0 0 0 2px var(--vela), 0 0 90px rgba(237, 230, 214, .08); }
.dual__lbls { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; justify-content: space-between; padding: 0 17%; pointer-events: none; font: 400 10.5px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; z-index: 2; color: #E6DFCF; mix-blend-mode: difference; }

/* gibosa: caminos como constelaciones */
.cam { position: relative; padding-block: clamp(100px, 11vw, 170px); }
.cam__head { display: grid; gap: 22px; max-width: 900px; justify-items: start; }
.cam__grid { margin-top: clamp(40px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.map { width: 100%; height: auto; overflow: visible; }
.map .bg { fill: var(--marfil); }
.const { cursor: pointer; }
.const .hit { fill: transparent; }
.const .lf { fill: none; stroke: var(--marfil); stroke-width: .9; stroke-dasharray: 1.5 5; stroke-linecap: round; opacity: .2; transition: opacity .8s; }
.const.on .lf { opacity: 0; }
.const .ln { fill: none; stroke: var(--vela); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: stroke-dashoffset 1.8s var(--lento), opacity .8s; }
.const.on .ln { opacity: .9; stroke-dashoffset: 0 !important; }
.const .st { fill: var(--marfil); opacity: .5; transition: opacity .6s, fill .6s; }
.const .hs { fill: var(--vela); opacity: 0; transition: opacity .8s; }
.const.on .st { opacity: 1; fill: #FFF6E2; }
.const.on .hs { opacity: .2; }
.const .lbl { font: 400 11px var(--f-mono); letter-spacing: .2em; fill: var(--ceniza); transition: fill .6s; }
.const.on .lbl, .const:hover .lbl { fill: var(--marfil); }
.ficha { display: grid; gap: 18px; padding: clamp(24px, 2.4vw, 36px); border-radius: 22px; border: 1px solid var(--linea); background: rgba(10, 10, 13, .6); min-width: 0; justify-items: start; }
.ficha__k { font: 400 11px/1 var(--f-mono); letter-spacing: .28em; text-transform: uppercase; color: var(--menta); }
.ficha__t { font: 300 clamp(36px, 3.4vw, 54px)/1 var(--f-display); }
.ficha__d { font: 400 20px/1.5 var(--f-display); color: var(--marfil-2); }
.ficha__f { font: 400 12px/1.6 var(--f-mono); color: var(--ceniza); }
.ficha__n, .ficha__swipe { display: none; }
.cam__names { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.cam__n { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea); background: none; color: var(--marfil-2); font: 400 12px/1 var(--f-mono); letter-spacing: .06em; transition: background .4s, color .4s, border-color .4s; }
.cam__n:hover { border-color: var(--linea-2); color: var(--marfil); }
.cam__n[aria-pressed="true"] { background: var(--marfil); border-color: var(--marfil); color: var(--noche); }

/* casi llena: el círculo */
.circ { position: relative; padding-block: clamp(90px, 10vw, 150px); }
.circ__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.circ__viz { position: relative; width: min(580px, 100%); aspect-ratio: 1; justify-self: center; }
.circ__ring { width: 100%; height: 100%; overflow: visible; }
.circ__ring .r { fill: none; stroke: var(--marfil); }
.circ__ring .p { fill: var(--marfil); }
.seat circle { fill: var(--noche); stroke: rgba(237, 230, 214, .45); stroke-width: 1; transition: stroke .6s, fill .6s; }
.seat .ico { color: var(--marfil-2); transition: color .6s; }
.seat.on circle { stroke: var(--vela); fill: #17130E; }
.seat.on .ico { color: var(--vela); }
.flame { position: absolute; left: 50%; top: 50%; width: 38px; height: 62px; margin: -42px 0 0 -19px; pointer-events: none; }
.flame__glow { position: absolute; left: 50%; top: 60%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 201, 135, .24), rgba(233, 201, 135, .06) 42%, transparent 70%); }
.flame__body { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 92%; filter: drop-shadow(0 0 12px rgba(255, 196, 112, .55)); }
.flame::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: linear-gradient(#5A4630, #1A140E); }
.anim .flame__body { animation: flick 1.5s ease-in-out infinite; }
.anim .flame__glow { animation: halo 2.6s ease-in-out infinite; }
@keyframes flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.94, 1.07) skewX(2deg); } 50% { transform: scale(1.05, .95) skewX(-2deg); } 75% { transform: scale(.97, 1.04) skewX(1deg); } }
@keyframes halo { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.circ__text { display: grid; gap: 30px; min-width: 0; }
.circ__items { display: grid; gap: 70px; }
.ci { display: grid; gap: 18px; justify-items: start; }
.ci__type { font: 400 11px/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--menta); }
.ci__t { font: 300 clamp(34px, 3.3vw, 52px)/1.02 var(--f-display); text-wrap: balance; }
.ci__p { font: 400 clamp(19px, 1.5vw, 21px)/1.5 var(--f-display); color: var(--marfil-2); max-width: 44ch; }
.ci__list { display: grid; gap: 4px; }
.ci__list li { display: flex; gap: 12px; align-items: baseline; font: italic 400 20px/1.4 var(--f-display); }
.ci__list li::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; transform: translateY(-3px) rotate(45deg); border: 1px solid var(--vela); }
.ci__quote { font: italic 400 clamp(22px, 1.9vw, 27px)/1.35 var(--f-display); border-left: 1px solid var(--vela); padding-left: 18px; max-width: 34ch; }
.ci__note { font: 400 12px/1.6 var(--f-mono); color: var(--ceniza); max-width: 52ch; }
.ci__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ci__date { font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--marfil); border: 1px solid var(--linea-2); border-radius: 999px; padding: 10px 16px; }
.circ__dots { display: none; gap: 0; margin-left: -9px; }
.circ__dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.circ__dots button::before { content: ''; width: 26px; height: 2px; background: var(--linea-2); transition: background .5s; }
.circ__dots button.is-on::before { background: var(--vela); }
.circ__dots button:hover::before { background: var(--marfil-2); }

/* la luna llena sale y alumbra */
.alba { position: relative; height: 210vh; }
.alba__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.alba__moon { position: absolute; left: 50%; top: 50%; width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #FBF6EC 0%, #EDE6D6 52%, #DED4C1 100%); box-shadow: 0 0 140px 40px rgba(237, 230, 214, .16); transform: scale(1.25); }
.anim .alba__moon { will-change: transform; }
.alba__wash { position: absolute; inset: 0; background: var(--hueso); opacity: 0; pointer-events: none; }
html:not(.anim) .alba { height: auto; }
html:not(.anim) .alba__sticky { position: relative; }
.alba__moon::before, .alba__moon::after { content: ''; position: absolute; border-radius: 50%; background: rgba(150, 138, 118, .12); }
.alba__moon::before { width: 14%; height: 14%; left: 58%; top: 28%; }
.alba__moon::after { width: 9%; height: 9%; left: 30%; top: 60%; }
.alba__txt { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; text-align: center; color: var(--tinta); padding-left: var(--gut-l); padding-right: var(--gut-r); }
.alba__txt .mono { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-2); }
.alba__big { font: italic 300 clamp(40px, 5.4vw, 84px)/1.02 var(--f-display); max-width: 14ch; text-wrap: balance; }

/* luna llena: la reserva se escribe */
.luz { position: relative; background: var(--hueso); color: var(--tinta); padding-block: clamp(70px, 8vw, 130px) clamp(100px, 10vw, 160px); }
.luz ::selection { background: var(--tinta); color: var(--hueso); }
.luz .eyebrow { color: var(--tinta-2); }
.luz :focus-visible { outline-color: var(--tinta); }
.luz__in { display: grid; gap: 34px; }
.frase { display: grid; gap: 34px; min-width: 0; }
.frase > * { min-width: 0; }
.frase__p { font: 300 clamp(30px, 3.7vw, 56px)/1.45 var(--f-display); letter-spacing: -.005em; max-width: 24em; text-wrap: pretty; }
.campo { display: inline-block; position: relative; vertical-align: baseline; max-width: 100%; }
.campo select, .campo input { font: italic 400 1em/1.2 var(--f-display); color: var(--tinta); background-color: transparent; border: 0; border-bottom: 1.5px solid rgba(11, 11, 16, .35); border-radius: 0; padding: 0 .04em .04em; margin: 0; max-width: 100%; box-sizing: border-box; transition: border-color .4s; }
.campo select { -webkit-appearance: none; appearance: none; padding-right: .9em; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - .42em) 58%, calc(100% - .18em) 58%; background-size: .24em .24em, .24em .24em; background-repeat: no-repeat; }
.campo select option { font: 400 18px var(--f-display); color: var(--tinta); background: var(--hueso); }
.campo input::placeholder { color: var(--tinta-3); opacity: .75; }
.campo select:hover, .campo input:hover, .campo select:focus, .campo input:focus { border-bottom-color: var(--tinta); outline: none; }
.campo select:focus-visible, .campo input:focus-visible { box-shadow: 0 3px 0 0 var(--tinta); }
.campo[data-invalid] input { border-bottom-color: var(--error); }
.campo__v { display: none; font: italic 400 1em/1.2 var(--f-display); }
.frase.is-sealed .campo select, .frase.is-sealed .campo input { display: none; }
.frase.is-sealed .campo__v { display: inline; }
.frase.is-sealed .campo { display: inline; }
.frase.is-sealed .campo label { display: none; }
.frase.is-sealed .frase__opt.is-empty { display: none; }
.campo__m { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: pre; font: italic 400 1em/1.2 var(--f-display); pointer-events: none; }
.frase__errs { display: grid; gap: 4px; }
.err { font: 400 12.5px/1.4 var(--f-mono); color: var(--error); }
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; max-width: 640px; }
.consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--tinta); }
.consent label { font: 400 18px/1.45 var(--f-display); color: var(--tinta-2); }
.frase__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.frase__acts .btn { --bh: 60px; padding: 0 34px; }
.frase__acts .hint { color: var(--tinta-3); }
.frase__done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 28px; align-items: center; }
.sello { width: 108px; height: 108px; color: var(--tinta); }
.sello svg { width: 100%; height: 100%; overflow: visible; }
.sello text { fill: currentColor; font: 500 8.4px var(--f-mono); letter-spacing: .2em; }
.frase__ok { font: italic 400 clamp(21px, 1.9vw, 26px)/1.4 var(--f-display); color: var(--tinta-2); max-width: 36ch; }
.frase__ok:focus { outline: none; }
.frase__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.frase__status { grid-column: 1 / -1; font: 400 12px/1.6 var(--f-mono); color: var(--tinta-2); }

/* pie: ya amaneció */
.pie { background: var(--hueso-2); color: var(--tinta); padding-block: clamp(80px, 9vw, 140px) calc(env(safe-area-inset-bottom, 0px) + 34px); overflow: clip; }
.pie__top { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.pie__tag { font: 300 clamp(36px, 4.8vw, 74px)/1 var(--f-display); text-wrap: balance; max-width: 13ch; }
.pie__tag em { font-style: italic; }
.pie__badge { width: clamp(120px, 13vw, 190px); height: auto; border-radius: 50%; box-shadow: 0 30px 60px rgba(11, 11, 16, .25); }
.pie__word { margin-top: clamp(40px, 6vw, 90px); font: 300 clamp(62px, 19vw, 320px)/.8 var(--f-display); letter-spacing: .1em; margin-right: -.1em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(11, 11, 16, .32); white-space: nowrap; overflow: hidden; background-image: linear-gradient(90deg, rgba(11, 11, 16, .88) var(--fill, 0%), transparent calc(var(--fill, 0%) + .6%)); -webkit-background-clip: text; background-clip: text; }
.pie__cols { margin-top: clamp(40px, 5vw, 70px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; border-top: 1px solid var(--linea-tinta); padding-top: 30px; }
.pie__cols > div { display: grid; gap: 8px; align-content: start; font: 400 19px/1.45 var(--f-display); color: var(--tinta-2); min-width: 0; }
.pie__cols .k { font: 400 10.5px/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 6px; }
.pie__cols a { color: var(--tinta); text-decoration: underline; text-underline-offset: 5px; }
.pie__legal { font-size: 16px !important; }
.pie__bottom { margin-top: 50px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font: 400 11px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.pie__up { border: 0; background: none; color: var(--tinta-2); font: inherit; letter-spacing: inherit; text-transform: inherit; height: 44px; padding: 0; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 14px 20px; border-radius: 999px; background: var(--marfil); color: var(--noche); font: 500 12px/1 var(--f-mono); letter-spacing: .08em; transition: opacity .35s, transform .5s var(--lento); max-width: calc(100vw - 32px); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* botón flotante de WhatsApp: marfil sobre la noche, tinta sobre la luz */
.wa { position: fixed; z-index: 41; right: max(22px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--marfil); color: var(--noche); box-shadow: 0 0 0 1px rgba(237, 230, 214, .25), 0 18px 40px rgba(0, 0, 0, .45); transition: transform .5s var(--lento), background .5s, color .5s, opacity .6s; -webkit-tap-highlight-color: transparent; }
.wa::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(233, 201, 135, .55); opacity: 0; }
.anim .wa::before { animation: waPulse 3.2s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(.82); opacity: 0; } 30% { opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } }
.wa svg { width: 26px; height: 26px; fill: currentColor; }
.wa:hover { transform: translateY(-3px); background: #FFFFFF; }
.wa.on-light { background: var(--tinta); color: var(--hueso); box-shadow: 0 0 0 1px rgba(11, 11, 16, .2), 0 18px 40px rgba(11, 11, 16, .25); }
.wa.on-light:hover { background: #2A2830; }
.wa span { position: absolute; right: 68px; top: 50%; transform: translate(8px, -50%); white-space: nowrap; opacity: 0; pointer-events: none; padding: 9px 14px; border-radius: 999px; background: rgba(10, 10, 13, .84); color: var(--marfil); font: 400 10.5px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; transition: opacity .4s, transform .5s var(--lento); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wa.on-light span { background: rgba(237, 230, 214, .92); color: var(--tinta); }
.wa:hover span, .wa:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.wa.is-hidden { opacity: 0; pointer-events: none; }

/* el círculo fijo en pantallas anchas */
@media (min-width: 900px) {
  .pinned .circ { padding-block: 0; }
  .pinned .circ__pin { height: 100svh; display: flex; align-items: center; }
  .pinned .circ__pin > .wrap { width: 100%; box-sizing: border-box; }
  .pinned .circ__items { position: relative; min-height: 500px; gap: 0; }
  .pinned .ci { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .7s var(--lento), transform .9s var(--lento), visibility 0s .7s; }
  .pinned .ci.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .9s var(--lento) .15s, transform 1s var(--lento) .15s, visibility 0s; }
  .pinned .circ__dots { display: flex; }
  .pinned .circ__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .pinned .circ .h2 { font-size: clamp(38px, 3.7vw, 58px); }
  .pinned .circ__text { gap: 24px; }
  .pinned .ci { gap: 14px; }
  .pinned .ci__p { max-width: 62ch; }
  .pinned .ci__quote { max-width: 48ch; }
  .pinned .ci__note { max-width: 84ch; }
  .pinned .ci__list { gap: 2px; }
}
@media (max-width: 1080px) {
  .rito__grid { grid-template-columns: minmax(0, 1fr); }
  .rito__text { order: -1; }
  .cam__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .dual__grid, .circ__grid { grid-template-columns: minmax(0, 1fr); }
  .dual__viz { width: min(440px, 100%); }
  .circ__viz { width: min(420px, 100%); }
  .pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  body { font-size: 18px; }
  .sound { font-size: 10px; letter-spacing: .1em; padding: 0 6px; }
  .sound__more { display: none; }
  .top { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
  .brand span { font-size: 19px; }
  .top__cta { height: 40px; padding: 0 14px; font-size: 10.5px; }
  .btn { --bh: 52px; padding: 0 22px; font-size: 12px; }

  /* LUNA NUEVA: la pantera llena la pantalla, el texto se lee encima de un velo y los botones ocupan el ancho */
  .nueva { align-items: end; min-height: 100svh; min-height: max(640px, 100svh); }
  .pant { right: 50%; top: 3%; bottom: auto; width: 112vw; transform: translateX(50%); }
  .halo { right: 50%; top: calc(3% - 2.24vw); bottom: auto; width: calc(112vw * 1.08); transform: translateX(50%); }
  .nueva__ghost { opacity: .085; }
  .nueva__copy { margin-top: 150px; padding-block: 90px 132px; gap: 18px; width: 100%; box-sizing: border-box; }
  .nueva__copy::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, transparent 0%, rgba(3, 3, 4, .55) 22%, rgba(3, 3, 4, .9) 48%, var(--noche) 100%); pointer-events: none; }
  .nueva__copy > * { position: relative; }
  .display { font-size: clamp(50px, 14.2vw, 64px); max-width: none; }
  .lead { font-size: 19px; max-width: 32ch; }
  .ctas { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin-top: 10px; }
  .ctas .btn { width: 100%; }
  .nueva__hint { transform: translate(calc(var(--lx, 72vw) - 50%), calc(var(--ly, 48vh) - var(--lr, 230px) * .8)); }
  .nueva__moon { bottom: 86px; left: var(--gut-l); right: var(--gut-r); flex-wrap: wrap; justify-content: center; row-gap: 6px; text-align: center; font-size: 10px; letter-spacing: .12em; }
  .nueva__sep { display: none; }

  /* ritmo de las secciones */
  .rito, .dual, .cam, .circ { padding-block: 84px; }
  .h2 { font-size: clamp(38px, 10.5vw, 46px); }
  .sub { font-size: 19px; }
  .eyebrow { font-size: 10.5px; letter-spacing: .26em; }

  /* CRECIENTE: el escenario ocupa todo el ancho; el texto va primero */
  .rito__grid { gap: 26px; }
  .rito__stage { width: 100vw; max-width: 100vw; margin-left: calc(var(--gut-l) * -1); margin-right: calc(var(--gut-r) * -1); justify-self: stretch; }
  .rito__intro, .rito__read { gap: 16px; }
  .rito__name { font-size: clamp(44px, 12vw, 54px); }
  .rito__msg { font-size: 22px; }
  .rito__ctas .btn--solid { width: 100%; }
  .wc { width: 120px; height: 197px; margin: -98.5px 0 0 -60px; }
  .wc__back .art { width: 70px; height: 84px; }
  .tf__art .art { width: 70px; height: 84px; }
  .tf__art img { width: 104px; height: 104px; }
  .tf__name { font-size: 17px; }
  .tf__key { font-size: 8px; }
  .wc__front { padding: 14px 8px 15px; }
  .breath { width: 250px; height: 250px; margin: -125px 0 0 -125px; }
  .breath__txt { bottom: 22px; font-size: 9.5px; }

  /* CUARTO CRECIENTE */
  .dual__grid { gap: 36px; }
  .dual__viz { width: min(360px, 100%); }
  .dual__quote { font-size: 30px; }
  .dual__p { font-size: 19px; }

  /* GIBOSA: primero los nombres (fila deslizable), luego un cielo bajo que se mueve, luego la ficha */
  .cam .wrap { display: grid; }
  .cam__head { order: 1; gap: 16px; }
  .cam__names { order: 2; margin-top: 28px; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 2px var(--gut-r) 10px 0; margin-right: calc(var(--gut-r) * -1); scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .cam__names::-webkit-scrollbar { display: none; }
  .cam__n { flex: 0 0 auto; scroll-snap-align: start; height: 42px; }
  .cam__grid { order: 3; margin-top: 10px; gap: 0; }
  .cam__map { overflow: hidden; height: 300px; margin-left: calc(var(--gut-l) * -1); margin-right: calc(var(--gut-r) * -1); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent); }
  .map { width: 230%; height: 100%; max-width: none; transition: transform 1.3s var(--lento); }
  .const .lbl { font-size: 13px; }
  .ficha { margin-top: 6px; padding: 24px 22px 26px; gap: 14px; touch-action: pan-y; position: relative; }
  .ficha__t { font-size: 36px; }
  .ficha__d { font-size: 19px; }
  .ficha__n { display: block; position: absolute; right: 22px; top: 26px; font: 400 11px/1 var(--f-mono); letter-spacing: .2em; color: var(--ceniza); }
  .ficha__swipe { display: flex; font: 400 10.5px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ceniza); display: flex; align-items: center; gap: 10px; }
  .ficha__swipe::before, .ficha__swipe::after { content: ''; width: 18px; height: 1px; background: var(--linea-2); }
  .ficha .btn { width: 100%; }

  /* CASI LLENA: la llama más contenida, las ceremonias como tarjetas que entran al llegar */
  .circ__grid { gap: 20px; }
  .circ__viz { width: min(300px, 100%); }
  .flame__glow { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .circ__text { gap: 22px; }
  .circ__items { gap: 18px; }
  .ci { gap: 14px; padding: 24px 22px 26px; border: 1px solid var(--linea); border-radius: 22px; background: rgba(10, 10, 13, .55); transition: border-color .6s, background .6s; }
  .ci.is-on { border-color: rgba(233, 201, 135, .38); background: rgba(23, 19, 14, .7); }
  .ci__t { font-size: 32px; }
  .ci__p { font-size: 18px; }
  .ci__list li { font-size: 18px; }
  .ci__quote { font-size: 21px; }
  .ci .btn { width: 100%; }

  /* LUNA LLENA: la transición es más corta y la frase se lee en una sola columna */
  .alba { height: 150vh; }
  .alba__big { font-size: clamp(36px, 10.5vw, 44px); }
  .luz { padding-block: 64px 96px; }
  .luz__in, .frase { gap: 26px; }
  .frase__p { font-size: clamp(26px, 7.6vw, 32px); line-height: 1.5; }
  .campo select { padding-right: 1em; }
  .consent label { font-size: 17px; }
  .frase__acts { gap: 12px; }
  .frase__acts .btn { width: 100%; --bh: 56px; }
  .frase__done { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .frase__btns { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .frase__btns .btn { width: 100%; }
  .frase__ok { font-size: 21px; }

  /* PIE */
  .pie { padding-block: 70px calc(env(safe-area-inset-bottom, 0px) + 96px); }
  .pie__top { flex-direction: column; align-items: flex-start; gap: 22px; }
  .pie__badge { width: 110px; }
  .pie__tag { font-size: 38px; }
  .pie__word { margin-top: 28px; font-size: 18vw; }
  .pie__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 28px; }
  .pie__bottom { margin-top: 36px; flex-direction: column; align-items: flex-start; gap: 10px; }

  /* barra de fases: píldora abajo; el nombre de la fase aparece encima al cambiar */
  .lunas { top: auto; right: auto; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateX(-50%); display: flex; gap: 0; padding: 0 6px; border-radius: 999px; background: rgba(10, 10, 13, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--linea); }
  .lunas.on-light { background: rgba(237, 230, 214, .88); box-shadow: 0 0 0 1px var(--linea-tinta); }
  .lunas a { width: 40px; height: 44px; }
  .lunas a span { right: auto; left: 50%; top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 6px); font-size: 10px; }
  .lunas a:hover span { opacity: 0; }
  .lunas a.is-flash span, .lunas a:focus-visible span { opacity: 1; transform: translate(-50%, 0); }

  /* WhatsApp: encima de la píldora, en la esquina */
  .wa { width: 52px; height: 52px; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
  .wa svg { width: 24px; height: 24px; }
  .wa span { display: none; }
}
.anim.pre .nueva__copy, .anim.pre .nueva__moon { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}