@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-garamond-latin.woff2") format("woff2");font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:Inter;src:url("fonts/inter-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--black:#070706;--warm:#0C0A08;--surface:#12100D;--card:#18140F;--gold:#D8B27A;--light-gold:#E8C99C;--bright-gold:#F3D7AA;--dark-gold:#8C6A3A;--bronze:#6B4A27;--text:#e8e0d3;--muted:#a49a8e;--line:rgba(216,178,122,.18);--serif:"Cormorant Garamond",Georgia,serif;--sans:Inter,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--black);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}::selection{background:var(--gold);color:var(--black)}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;height:auto;display:block}svg{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,p,blockquote{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.03}h1{font-size:clamp(57px,8.2vw,112px);letter-spacing:-.035em}h2{font-size:clamp(42px,5.6vw,72px);letter-spacing:-.025em}h3{font-size:34px;letter-spacing:-.015em}em{font-style:normal;color:var(--gold)}strong{font-weight:500}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:7px}a:hover{color:var(--light-gold)}.shell{width:min(100% - 40px,1240px);margin-inline:auto}.section{padding-block:85px}.eyebrow{font-size:10px;font-weight:500;line-height:1.5;text-transform:uppercase;letter-spacing:.2em;color:var(--gold)}.quiet{font-size:11px;line-height:1.8;color:var(--muted)}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;left:20px;top:-100px;z-index:20;padding:10px 20px;background:var(--gold);color:var(--black)}.skip-link:focus{top:12px}.site-header{min-height:95px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);position:relative;z-index:2}.brand{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--gold);flex-shrink:0}.brand span{font-family:var(--serif);font-weight:500;font-size:38px;letter-spacing:.13em;padding-left:.13em}.brand small{font-size:7px;letter-spacing:.45em;margin-top:7px;padding-left:.45em}.site-header nav{display:flex;align-items:center;gap:30px;font-size:11px}.site-header nav>a:not(.nav-cta){display:none}.nav-cta{font-size:10px;border-bottom:1px solid var(--dark-gold);padding-bottom:4px}.nav-cta span{margin-left:7px}.hero{position:relative;padding-top:50px;display:grid;isolation:isolate}.hero-copy{position:relative;z-index:1}.hero-copy .eyebrow{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.16em}.small-rule{display:inline-block;width:25px;height:1px;background:var(--dark-gold)}.hero h1{margin-top:27px}.hero-description{font-size:13px;color:var(--muted);margin-top:26px;line-height:1.85}.hero-invitation{font-family:var(--serif);font-size:24px;margin-top:17px}.hero-invitation strong{color:var(--gold)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;padding:14px 23px;font-size:11px;letter-spacing:.02em}.button svg{width:20px;height:20px}.button-gold{background:var(--gold);color:var(--black);border:1px solid var(--gold)}.button-gold:hover{background:var(--light-gold);color:var(--black)}.hero .button{margin-top:28px}.hero-note{margin-top:15px;font-size:10px}.hero-art{position:relative;margin:0 -20px;height:520px;overflow:hidden;z-index:0}.hero-art picture{display:block;height:100%;width:100%}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 22%}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--black) 0%,transparent 15%,transparent 65%,var(--black) 99%),linear-gradient(90deg,rgba(7,7,6,.28),transparent 20%,transparent 85%,rgba(7,7,6,.5));pointer-events:none}.art-caption{position:absolute;bottom:24px;left:0;right:0;text-align:center;z-index:1;font-family:var(--serif);color:var(--light-gold);font-size:23px}.art-caption small{display:block;font-family:var(--sans);font-size:7px;letter-spacing:.28em;margin-top:8px;color:var(--muted)}.invocation{display:flex;justify-content:space-between;align-items:center;gap:9px;border-block:1px solid var(--line);padding:25px 0;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}.invocation i{font-style:normal;font-size:8px;color:var(--bronze)}.section-heading{text-align:center;margin-bottom:38px}.section-heading h2{margin-top:20px}.section-heading>p:last-child{color:var(--muted);font-size:13px;margin-top:22px}.experience-grid{display:grid;grid-template-columns:1fr;gap:12px}.experience-card{background:linear-gradient(135deg,var(--surface),var(--warm));border:1px solid var(--line);padding:30px;min-width:0;position:relative}.feature-icon{width:36px;height:36px;color:var(--gold);margin-bottom:24px}.experience-card .eyebrow{font-size:8px;letter-spacing:.15em}.experience-card h3{margin-top:12px}.experience-card>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.95;margin-top:18px;max-width:39ch}.text-link{font-size:11px;color:var(--gold);display:inline-flex;align-items:center;gap:20px;line-height:1.7}.experience-card .text-link{margin-top:28px}.card-footnote{display:block;margin-top:25px;color:var(--gold);font-family:var(--serif);font-size:20px;line-height:1.3}.wish-card{background:radial-gradient(ellipse at right top,rgba(140,106,58,.11),transparent 80%),var(--surface)}.health-section{background:var(--warm);border-block:1px solid var(--line);position:relative}.health-inner{padding-block:75px;text-align:center}.health-symbol{width:79px;height:79px;border:1px solid var(--dark-gold);border-radius:50%;margin:0 auto 30px;display:grid;place-items:center;box-shadow:0 0 0 9px rgba(216,178,122,.035)}.health-symbol svg{width:35px;height:35px;color:var(--gold)}.health-section h2{font-size:clamp(43px,6.4vw,82px);margin-top:22px;line-height:1.08}.health-description{color:var(--muted);font-size:13px;max-width:52ch;margin:28px auto 0}.health-section blockquote{font-family:var(--serif);font-size:25px;line-height:1.4;color:var(--gold);margin-top:34px}.health-section cite{display:block;font-family:var(--sans);font-size:7px;font-style:normal;letter-spacing:.2em;color:var(--muted);margin-top:14px}.medical-note{font-size:11px;line-height:1.85;color:var(--muted);max-width:67ch;margin:35px auto 0;padding-top:25px;border-top:1px solid var(--line)}.desktop-break{display:none}.ritual-section{display:grid;gap:40px;align-items:center}.ritual-art{max-width:440px;justify-self:center;overflow:hidden}.ritual-art img{mix-blend-mode:screen}.ritual-copy h2{margin-top:20px}.ritual-copy>p:not(.eyebrow){font-size:13px;color:var(--muted);margin-top:25px;max-width:51ch}.ritual-principle{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:15px;color:var(--gold)}.ritual-principle svg{width:25px;height:25px;flex-shrink:0}.ritual-principle p{font-family:var(--serif);font-size:23px;line-height:1.3}.rules-section{border-block:1px solid var(--line);background:var(--warm)}.rules-layout{display:grid;gap:36px}.rules-intro h2{margin-top:20px}.rules-intro>p:not(.eyebrow):not(.quiet){color:var(--muted);font-size:13px;margin-top:24px}.rules-star{width:42px;height:42px;color:var(--dark-gold);margin-top:28px;display:none}.rules-context{margin-top:25px;max-width:30ch;font-size:10px}.rules-list{list-style:none;counter-reset:rules;margin:0;padding:0}.rules-list>li{display:grid;grid-template-columns:38px 1fr;gap:15px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}.rules-list>li:first-child{border-top:1px solid var(--line)}.roman{font-family:var(--serif);font-size:23px;color:var(--dark-gold);line-height:1.4}.rules-list>li>p,.rules-list>li>div>p{font-family:var(--serif);font-size:24px;line-height:1.25}.rules-list>li:nth-child(6) p{color:var(--gold)}.first-wish{margin-top:18px}.first-wish summary{list-style:none;display:inline-flex;gap:24px;align-items:center;font-size:10px;letter-spacing:.05em;color:var(--gold);cursor:pointer;padding:8px 0;min-height:35px}.first-wish summary::-webkit-details-marker{display:none}.first-wish summary span{font-size:18px;font-weight:300}.first-wish[open] summary span{transform:rotate(45deg)}.legend{border-left:1px solid var(--dark-gold);padding:4px 0 6px 20px;margin-top:10px}.legend>p:not(.eyebrow){font-family:var(--serif);font-size:21px;line-height:1.4;margin-top:18px;color:var(--muted)}.legend .eyebrow{font-size:8px}.privacy-strip{display:flex;flex-wrap:wrap;gap:15px;align-items:center;padding-block:38px;border-bottom:1px solid var(--line)}.privacy-strip>svg{width:29px;height:29px;color:var(--gold);flex-shrink:0}.privacy-strip>div{flex:1;min-width:210px}.privacy-strip h2{font-size:26px}.privacy-strip p{font-size:11px;color:var(--muted);margin-top:8px;max-width:36ch}.privacy-strip>a{margin-left:44px}.download-section{text-align:center;padding-block:90px}.download-icon{border-radius:20px;margin:0 auto 28px;width:86px;height:86px}.download-section h2{margin-top:20px}.download-section>p:not(.eyebrow):not(.quiet){font-size:13px;color:var(--muted);margin-top:25px}.store-button{display:inline-flex;align-items:center;gap:16px;padding:15px 27px;margin-top:30px;border:1px solid var(--dark-gold);border-radius:7px;background:var(--surface);color:var(--light-gold);text-align:left;opacity:1;cursor:default}.store-button svg{width:24px;height:32px}.store-button small{font-size:9px;display:block;letter-spacing:.04em}.store-button strong{font-size:23px;line-height:1.2;display:block}.download-section>.quiet{margin-top:20px;font-size:10px}.site-footer{display:grid;gap:30px;border-top:1px solid var(--line);padding-block:35px}.footer-brand{align-self:start;justify-self:start}.footer-brand span{font-size:34px}.footer-links{display:flex;flex-wrap:wrap;gap:15px 24px;font-size:10px;color:var(--muted)}.footer-credit>a{display:block;font-size:11px}.footer-credit strong{font-weight:600;color:var(--gold)}.footer-credit small{font-size:9px;color:var(--muted);display:block;margin-top:8px}.footer-disclaimer{color:var(--muted);font-size:9px;line-height:1.8;max-width:94ch}.legal-header{min-height:100px}.legal-back{font-size:11px;color:var(--gold)}.legal-main{max-width:800px;padding-block:70px 90px}.legal-main h1{font-size:clamp(48px,7vw,76px);margin:20px 0 25px}.legal-main .legal-date{font-size:11px;color:var(--muted);margin-bottom:36px}.legal-intro{font-family:var(--serif);font-size:27px;line-height:1.35;color:var(--light-gold);padding-bottom:30px;border-bottom:1px solid var(--line)}.legal-main h2{font-size:32px;margin:38px 0 15px}.legal-main p:not(.eyebrow):not(.legal-date):not(.legal-intro),.legal-main li{font-size:14px;color:var(--muted);line-height:1.9}.legal-main p+p{margin-top:16px}.legal-main li{margin-bottom:10px}.legal-main ul{padding-left:22px}.legal-main a{color:var(--gold);text-decoration:underline;text-underline-offset:4px}.legal-main strong{color:var(--text)}.legal-callout{border-left:2px solid var(--gold);background:var(--surface);padding:20px 25px;margin-block:30px}.legal-main .legal-callout p{color:var(--text)}
@media(min-width:600px){.shell{width:min(100% - 72px,1240px)}.site-header nav>a:not(.nav-cta){display:inline}.site-header{min-height:110px}.hero-art{margin-inline:0}.experience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.wish-card{grid-column:span 2}.wish-card>p:not(.eyebrow){max-width:65ch}.experience-card{padding:36px}.invocation{justify-content:center;gap:clamp(18px,4vw,65px);font-size:10px;letter-spacing:.22em}.rules-list>li{grid-template-columns:50px 1fr}.rules-list>li>p,.rules-list>li>div>p{font-size:29px}.desktop-break{display:initial}.footer-links{gap:24px}.site-footer{grid-template-columns:1fr 1fr}.footer-links{justify-content:flex-end;align-content:center}.footer-credit{grid-column:1 / -1}.footer-disclaimer{grid-column:1 / -1}}
@media(min-width:900px){.section{padding-block:120px}.hero{grid-template-columns:1fr 1fr;align-items:center;min-height:785px;padding-top:0}.hero-copy{padding:58px 0 80px;min-width:0}.hero h1{font-size:clamp(80px,7.8vw,110px)}.hero-copy .eyebrow{font-size:9px}.hero-art{height:785px;margin-left:-60px;margin-right:-35px}.hero-art img{object-position:center top}.hero-art:after{background:linear-gradient(90deg,var(--black),transparent 17%,transparent 85%,var(--black)),linear-gradient(180deg,var(--black),transparent 9%,transparent 72%,var(--black) 99%)}.art-caption{bottom:68px;left:40px;font-size:25px}.hero-description{font-size:14px}.hero-invitation{font-size:27px}.hero .button{margin-top:32px;padding-inline:28px;min-height:55px}.hero-note{margin-top:18px}.section-heading{margin-bottom:52px}.experience-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.experience-card{grid-column:span 2;padding:34px;min-height:320px}.wish-card,.experience-card:nth-child(2){grid-column:span 3;min-height:365px}.experience-card h3{font-size:36px}.experience-card:nth-child(3) h3{font-size:32px}.wish-card>p:not(.eyebrow){max-width:45ch}.feature-icon{margin-bottom:30px}.health-inner{padding-block:100px}.health-description{font-size:14px}.health-section blockquote{font-size:29px}.medical-note{max-width:82ch}.ritual-section{grid-template-columns:1fr 1fr;gap:90px}.ritual-copy>p:not(.eyebrow){font-size:14px}.rules-layout{grid-template-columns:.9fr 1.4fr;gap:100px}.rules-star{display:block}.rules-context{margin-top:30px}.rules-list>li{padding-block:26px}.privacy-strip{padding-block:40px;gap:22px}.privacy-strip>div{flex:1}.privacy-strip p{max-width:none}.privacy-strip>a{margin-left:0}.download-section{padding-block:115px}.site-footer{grid-template-columns:140px 1fr auto;align-items:center;padding-block:45px;gap:25px}.footer-links{justify-content:center}.footer-credit{grid-column:auto;text-align:right}.footer-disclaimer{text-align:center;justify-self:center;margin-top:15px;grid-column:1/-1}.legal-main{padding-block:90px 120px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ===== Reordenamiento 2026-09-15: claridad primero ===== */
.button-ghost{border:1px solid var(--dark-gold);color:var(--light-gold);background:transparent}
.button-ghost:hover{border-color:var(--gold);color:var(--bright-gold)}
.hero-wordmark{font-family:var(--serif);font-size:clamp(44px,7vw,64px);letter-spacing:.16em;padding-left:.16em;line-height:1;color:var(--gold);margin-top:24px}
.hero-clear h1{font-size:clamp(33px,5.6vw,50px);letter-spacing:-.02em;line-height:1.12;margin-top:16px}
.hero-lede{font-size:13px;line-height:1.9;color:var(--muted);margin-top:22px;max-width:48ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-clear .hero-actions .button{margin-top:0}
.hero-tagline{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--gold);max-width:30ch}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:40px}
.step{display:grid;gap:20px;align-items:center}
.step-shot img{width:auto;max-width:100%;margin-inline:auto}
.step-num{display:flex;align-items:center;gap:14px;color:var(--gold);font-family:var(--serif);font-size:30px;line-height:1}
.step-num svg{width:21px;height:21px;flex-shrink:0}
.step-copy h3{font-size:27px;margin-top:14px}
.step-copy>p:not(.step-num){font-size:12px;line-height:1.95;color:var(--muted);margin-top:15px;max-width:42ch}
.screens-section{background:var(--warm);border-block:1px solid var(--line);padding-block:85px}
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px}
.phone{margin:0}
.phone img{width:auto;max-width:100%;margin-inline:auto}
.phone figcaption{margin-top:16px;text-align:center;font-size:11px;line-height:1.75;color:var(--muted);max-width:27ch;margin-inline:auto}
.phone figcaption strong{display:block;color:var(--light-gold);font-weight:500;margin-bottom:3px}
.screens-note{margin-top:42px;text-align:center}
.health-shot{margin:36px auto 0;display:flex;justify-content:center}
.dream-layout{display:grid;gap:46px;align-items:center}
.dream-copy h2{margin-top:20px}
.dream-lede{font-size:13px;line-height:1.95;color:var(--muted);margin-top:25px;max-width:50ch}
.dream-key{font-family:var(--serif);font-size:24px;line-height:1.38;color:var(--light-gold);margin-top:28px;padding-left:20px;border-left:2px solid var(--dark-gold)}
.dream-points{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:19px}
.dream-points li{display:grid;grid-template-columns:24px 1fr;gap:16px;align-items:start}
.dream-points svg{width:21px;height:21px;color:var(--gold);margin-top:2px}
.dream-points b{display:block;font-size:12px;font-weight:500}
.dream-points span{display:block;font-size:11px;line-height:1.85;color:var(--muted);margin-top:4px}
.dream-free{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--serif);font-size:21px;color:var(--gold)}
.dream-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.price-grid{display:grid;grid-template-columns:1fr;gap:12px}
.price-card{background:linear-gradient(135deg,var(--surface),var(--warm));border:1px solid var(--line);padding:28px 24px;display:flex;flex-direction:column}
.price-card .eyebrow{font-size:8px;letter-spacing:.15em}
.price-amount{font-family:var(--serif);font-size:37px;line-height:1.1;margin-top:13px}
.price-amount small{font-family:var(--sans);font-size:10px;letter-spacing:.12em;color:var(--muted);margin-left:5px}
.price-amount s{font-size:23px;color:var(--muted);margin-right:9px;text-decoration-thickness:1px}
.price-note{font-size:11px;line-height:1.85;color:var(--muted);margin-top:15px}
.price-note .text-link{margin-top:8px;gap:10px}
.price-highlight{border-color:var(--dark-gold);background:radial-gradient(ellipse at right top,rgba(140,106,58,.16),transparent 78%),var(--surface)}
.price-highlight .price-amount,.price-care .price-amount{color:var(--gold)}
.price-foot{margin-top:28px;text-align:center;max-width:72ch;margin-inline:auto}
.waitlist{max-width:560px;margin:55px auto 0;padding:38px 26px;border:1px solid var(--line);background:linear-gradient(135deg,var(--surface),var(--warm))}
.waitlist-icon{width:27px;height:27px;color:var(--gold);margin:0 auto 18px}
.waitlist h3{font-size:29px}
.waitlist>p{font-size:12px;line-height:1.9;color:var(--muted);margin-top:14px;max-width:44ch;margin-inline:auto}
.waitlist-button{margin-top:26px}
.waitlist-note{margin-top:18px;max-width:46ch;margin-inline:auto}
@media(min-width:600px){
  .step-shot img,.phone img,.health-shot img{height:430px;width:auto;max-width:100%}
  .step{grid-template-columns:200px 1fr;gap:30px}
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phones{gap:40px 18px}
}
@media(min-width:900px){
  .hero-wordmark{font-size:clamp(54px,5.2vw,70px);margin-top:0}
  .hero-clear h1{font-size:clamp(42px,4.2vw,58px)}
  .hero-lede{font-size:14px}
  .hero-tagline{font-size:23px}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
  .step{grid-template-columns:1fr;gap:22px;align-items:start}
  .step-shot img{margin-inline:0}
  .step-shot img,.phone img{height:430px}
  .step-copy h3{font-size:24px}
  .screens-section{padding-block:120px}
  .phones{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
  .dream-layout{grid-template-columns:1.05fr .95fr;gap:80px}
  .dream-key{font-size:27px}
  .price-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .price-card{padding:30px 22px}
  .price-amount{font-size:33px}
}

/* ===== Atmósfera 2026-09-15 — CSS puro, sin JS, sin imágenes nuevas =====
   El CSP de /djinn prohíbe <script>, así que todo esto es declarativo.
   Sólo se animan transform y opacity: nada aquí dispara relayout ni repintado
   por cuadro. Las capas de fondo son pseudo-elementos; no se tocó el HTML.
   El apagado por prefers-reduced-motion va al final y cubre pseudo-elementos,
   que es justo lo que el `*{animation:none}` de más arriba NO alcanza. */

/* El contenido se apila por encima del ambiente. El header ya traía z-index. */
main,.site-footer{position:relative;z-index:1}

/* ---------- 1. Polvo estelar ----------
   Tres capas de puntos hechos con radial-gradient. Cada capa tiene UN tamaño de
   mosaico y varios puntos en posiciones irregulares dentro de él; los tamaños
   entre capas son primos entre sí (211 / 277 / 317), así que el patrón combinado
   tarda millones de píxeles en repetirse. Cada capa sube exactamente un mosaico
   por ciclo, que es lo que hace el bucle invisible. */
html::before,html::after,body::before{
  content:"";position:fixed;left:0;right:0;top:-420px;bottom:-420px;
  z-index:0;pointer-events:none;background-repeat:repeat}

/* Lejos: polvo fino, casi imperceptible, el más lento. */
html::before{
  background-image:
    radial-gradient(circle at 17% 23%,rgba(216,178,122,.42) 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 8%,rgba(216,178,122,.30) 0 1px,transparent 1.6px),
    radial-gradient(circle at 82% 61%,rgba(232,201,156,.34) 0 1px,transparent 1.6px),
    radial-gradient(circle at 38% 79%,rgba(216,178,122,.26) 0 1px,transparent 1.6px);
  background-size:211px 211px;opacity:.5;
  animation:djinn-dust-211 40s linear infinite}

/* Medio. */
html::after{
  background-image:
    radial-gradient(circle at 29% 12%,rgba(232,201,156,.46) 0 1.3px,transparent 2px),
    radial-gradient(circle at 74% 44%,rgba(216,178,122,.38) 0 1.3px,transparent 2px),
    radial-gradient(circle at 9% 67%,rgba(243,215,170,.30) 0 1.3px,transparent 2px);
  background-size:277px 277px;opacity:.55;
  animation:djinn-dust-277 31s linear infinite;animation-delay:-12s}

/* Cerca: pocas motas, un poco más grandes y más rápidas. Da la profundidad. */
body::before{
  background-image:
    radial-gradient(circle at 46% 31%,rgba(243,215,170,.5) 0 1.7px,transparent 2.6px),
    radial-gradient(circle at 88% 84%,rgba(216,178,122,.4) 0 1.7px,transparent 2.6px);
  background-size:317px 317px;opacity:.6;
  animation:djinn-dust-317 23s linear infinite;animation-delay:-5s}

@keyframes djinn-dust-211{to{transform:translate3d(0,-211px,0)}}
@keyframes djinn-dust-277{to{transform:translate3d(0,-277px,0)}}
@keyframes djinn-dust-317{to{transform:translate3d(0,-317px,0)}}

/* En pantallas chicas se retira la capa cercana: una capa menos de composición
   a todo el viewport es la diferencia que sí se nota en un teléfono modesto. */
@media(max-width:599px){body::before{display:none}}

/* ---------- 6. Textura: grano y viñeteado ----------
   Estático a propósito: se rasteriza una vez y se queda. Animarlo sería
   exactamente el repintado por cuadro que hay que evitar. */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.021) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.017) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 120% 85% at 50% 45%,transparent 52%,rgba(7,7,6,.5) 100%)}

/* ---------- 2. La lámpara respira ----------
   El brief pedía box-shadow animado. No lo hice así: animar box-shadow repinta
   en cada cuadro, y la regla de rendimiento manda. El efecto es el mismo —un
   resplandor que sube y baja en 4 s— con opacity y scale, que van al compositor.
   El box-shadow original del círculo se queda, quieto. */
.health-symbol{position:relative;overflow:visible;isolation:isolate}
.health-symbol::after{
  content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;
  margin:-95px 0 0 -95px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(216,178,122,.3) 0%,rgba(216,178,122,.11) 42%,transparent 70%);
  animation:djinn-breathe 4s ease-in-out infinite}
@keyframes djinn-breathe{
  0%,100%{opacity:.45;transform:scale(.88)}
  50%{opacity:1;transform:scale(1.06)}}

/* El hilo de humo: sube, se inclina y se disuelve. La curva sale de combinar
   el desplazamiento con una rotación leve y el origen abajo. */
.health-symbol::before{
  content:"";position:absolute;left:50%;bottom:calc(100% + 4px);
  width:2px;height:74px;margin-left:-1px;pointer-events:none;z-index:-1;
  transform-origin:50% 100%;
  background:linear-gradient(to top,rgba(216,178,122,.34),rgba(216,178,122,.10) 45%,transparent 90%);
  filter:blur(2.5px);
  animation:djinn-smoke 7s ease-out infinite}
@keyframes djinn-smoke{
  0%{opacity:0;transform:translate3d(0,14px,0) rotate(-5deg) scaleY(.5)}
  22%{opacity:.85}
  58%{transform:translate3d(5px,-26px,0) rotate(7deg) scaleY(1)}
  100%{opacity:0;transform:translate3d(-4px,-64px,0) rotate(-6deg) scaleY(1.25)}}

/* ---------- 3. El genio ----------
   No se mueve el retrato: se mueve lo que lo envuelve. El ::after de .hero-art
   ya existía (la máscara); esto va debajo de ella, en ::before. */
.hero-art::before{
  content:"";position:absolute;inset:-12%;pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 46% 34% at 28% 62%,rgba(140,106,58,.22),transparent 70%),
    radial-gradient(ellipse 38% 44% at 76% 40%,rgba(107,74,39,.20),transparent 72%);
  animation:djinn-veil 34s ease-in-out infinite}
@keyframes djinn-veil{
  0%,100%{transform:translate3d(-2%,0,0) scale(1)}
  50%{transform:translate3d(3%,-2%,0) scale(1.09)}}

/* Una luz ámbar en la zona del rostro, que late muy despacio. Es luz interior,
   no un recorte de los ojos: con CSS solo no se puede señalar los ojos sin
   agregar marcado ni una imagen, y el brief pedía ninguna de las dos. */
.hero-art picture{position:relative}
.hero-art picture::after{
  content:"";position:absolute;left:50%;top:30%;width:34%;height:16%;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse,rgba(208,139,57,.26),rgba(208,139,57,.09) 45%,transparent 72%);
  animation:djinn-ember 6.5s ease-in-out infinite}
@keyframes djinn-ember{
  0%,100%{opacity:.35}
  50%{opacity:.9}}

/* ---------- 4. Entradas al hacer scroll ----------
   Sin soporte de animation-timeline no se declara ninguna animación, así que el
   contenido queda visible por omisión. No hay estado oculto que se pueda quedar
   pegado: si algo falla, se ve todo. */
@supports (animation-timeline:view()){
  @media not (prefers-reduced-motion:reduce){
    main>section{
      animation:djinn-enter linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 52%}
    @keyframes djinn-enter{
      from{opacity:0;transform:translate3d(0,26px,0)}
      to{opacity:1;transform:translate3d(0,0,0)}}}}

/* ---------- 5. El oro reacciona ----------
   Un barrido de luz que cruza el botón al pasar el cursor. Es un transform sobre
   un pseudo-elemento: ni el botón ni su texto se vuelven a pintar. */
.button,.store-button,.waitlist-button{position:relative;overflow:hidden}
.button::after,.store-button::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translate3d(-130%,0,0);
  transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.button:hover::after,.button:focus-visible::after,
.store-button:hover::after{transform:translate3d(130%,0,0)}
/* El botón sólido lleva el barrido más tenue: sobre oro pleno, menos es más. */
.button-gold::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%)}

/* Los bordes de las tarjetas se encienden apenas. */
.experience-card,.price-card,.waitlist{transition:border-color .55s ease}
.experience-card,.price-card,.waitlist{position:relative}
.experience-card:hover,.price-card:hover,.waitlist:hover{border-color:rgba(216,178,122,.40)}
.experience-card::after,.price-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(216,178,122,.10),transparent 72%);
  transition:opacity .55s ease}
.experience-card:hover::after,.price-card:hover::after{opacity:1}

/* ---------- Apagado obligatorio ----------
   El bloque de más arriba usa `*`, que no alcanza pseudo-elementos. Éste sí.
   Con el movimiento desactivado, todo queda quieto y visible. */
@media(prefers-reduced-motion:reduce){
  html::before,html::after,body::before,body::after,
  .health-symbol::before,.health-symbol::after,
  .hero-art::before,.hero-art picture::after,
  main>section,.button::after,.store-button::after,
  .experience-card::after,.price-card::after{
    animation:none!important;transition:none!important;transform:none!important}
  main>section{opacity:1!important}
  /* Esta usa transform para centrarse, no para animarse: se le devuelve. */
  .hero-art picture::after{transform:translate(-50%,-50%)!important}
  .health-symbol::before{display:none}
  .health-symbol::after{opacity:.6}
  .hero-art picture::after{opacity:.5}}

/* ===== Historias del Djinn + magnitud sin cifras · 2026-09-15 =====
   Sin JS, sin imágenes nuevas: la atmósfera de cada relato son gradientes.
   Cada tarjeta acepta una foto después con una sola línea:
     .story-tunnel{--story-photo:url("historias/tunel.webp")}
   `img-src 'self'` ya lo permite, no hay que tocar el CSP. */

.stories-section{background:var(--warm);border-block:1px solid var(--line);padding-block:85px}
.stories{display:grid;grid-template-columns:1fr;gap:14px}
.stories-cta{margin-top:44px;text-align:center;font-family:var(--serif);
  font-size:clamp(32px,4.6vw,52px);line-height:1.1;color:var(--gold)}
.stories-note{max-width:64ch;margin:22px auto 0;text-align:center}

.story{--story-photo:none;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:296px;padding:26px;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--black)}

/* La atmósfera. Sólo negro, oro y bronce: los colores del ritual pertenecen
   a EL PACTO (§3) y no se asoman aquí. */
.story::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--story-photo),var(--story-mood);
  background-size:cover,cover;background-position:center,center;opacity:.9}
/* Un velo que garantiza contraste del texto pase lo que pase detrás. */
.story::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,6,.55) 0%,rgba(7,7,6,.30) 38%,rgba(7,7,6,.88) 100%)}

/* Túnel de estadio: paredes oscuras, luz al fondo. */
.story-tunnel{--story-mood:
  radial-gradient(ellipse 34% 46% at 50% 44%,rgba(232,201,156,.30),transparent 68%),
  linear-gradient(90deg,rgba(7,7,6,.95) 0%,transparent 26%,transparent 74%,rgba(7,7,6,.95) 100%),
  linear-gradient(180deg,var(--warm),var(--black))}
/* Escenario: un cono de luz desde arriba. */
.story-stage{--story-mood:
  radial-gradient(ellipse 26% 70% at 50% -8%,rgba(243,215,170,.26),transparent 70%),
  radial-gradient(ellipse 44% 16% at 50% 82%,rgba(216,178,122,.14),transparent 72%),
  linear-gradient(180deg,var(--black),var(--surface))}
/* Amanecer: un horizonte cálido y bajo. */
.story-dawn{--story-mood:
  radial-gradient(ellipse 120% 40% at 50% 104%,rgba(216,178,122,.26),transparent 68%),
  linear-gradient(180deg,var(--black) 30%,rgba(107,74,39,.22) 100%)}
/* Madrugada de hospital: luz fría y pálida por una ventana. */
.story-ward{--story-mood:
  radial-gradient(ellipse 40% 34% at 18% 14%,rgba(232,201,156,.20),transparent 66%),
  linear-gradient(160deg,rgba(18,16,13,.9),var(--black) 62%)}
/* Escritorio: el charco de una lámpara. */
.story-desk{--story-mood:
  radial-gradient(ellipse 34% 30% at 78% 76%,rgba(216,178,122,.24),transparent 66%),
  linear-gradient(200deg,var(--black),rgba(24,20,15,.95))}
/* Noche: un solo resplandor pequeño, abajo. */
.story-night{--story-mood:
  radial-gradient(ellipse 18% 14% at 50% 88%,rgba(243,215,170,.22),transparent 70%),
  linear-gradient(180deg,var(--black),rgba(12,10,8,.98))}

/* La etiqueta NO se anima nunca y no depende de ningún efecto para verse:
   es lo que dice que esto es ficción, y tiene que leerse siempre. */
.story-label{font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);opacity:.95;margin-bottom:auto;
  padding-bottom:9px;border-bottom:1px solid rgba(216,178,122,.22)}

.story-lines{margin-top:30px;display:grid;gap:11px}
.story-lines p{font-family:var(--serif);font-size:21px;line-height:1.32;color:var(--text)}
.story-lines p:last-child{color:var(--light-gold)}

/* Aparición en secuencia al entrar en pantalla. Sin soporte, o con movimiento
   reducido, no se declara animación: las líneas están visibles desde el inicio. */
@supports (animation-timeline:view()){
  @media not (prefers-reduced-motion:reduce){
    .story-lines p{animation:djinn-line linear both;animation-timeline:view()}
    .story-lines p:nth-child(1){animation-range:entry 10% entry 30%}
    .story-lines p:nth-child(2){animation-range:entry 20% entry 40%}
    .story-lines p:nth-child(3){animation-range:entry 30% entry 50%}
    .story-lines p:nth-child(4){animation-range:entry 40% entry 60%}
    @keyframes djinn-line{
      from{opacity:0;transform:translate3d(0,15px,0)}
      to{opacity:1;transform:translate3d(0,0,0)}}}}

/* La franja de magnitud: tres afirmaciones, cero números. */
.reach-strip{display:grid;grid-template-columns:1fr;gap:20px;
  padding-block:44px;border-block:1px solid var(--line);text-align:center}
.reach-strip p{font-family:var(--serif);font-size:23px;line-height:1.3;color:var(--muted)}
.reach-strip em{display:block;color:var(--gold);font-size:26px;margin-top:4px}

@media(min-width:600px){
  .stories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reach-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}}
@media(min-width:900px){
  .stories-section{padding-block:120px}
  .stories{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .story{min-height:330px;padding:30px}
  .story-lines p{font-size:22px}}

@media(prefers-reduced-motion:reduce){
  .story-lines p{animation:none!important;transform:none!important;opacity:1!important}}

/* ===== Páginas de símbolos · /djinn/suenos/ ===== */
.symbol-main{max-width:760px}
.crumbs{font-size:10px;letter-spacing:.06em;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--gold)}
.symbol-main h1{font-size:clamp(34px,5.4vw,56px);line-height:1.08;margin:14px 0 30px}
.symbol-senses{display:grid;gap:16px;margin-bottom:40px}
.symbol-gloss{border-left:2px solid var(--dark-gold);padding:6px 0 8px 22px;margin:0}
.symbol-gloss p{font-family:var(--serif);font-size:clamp(22px,3vw,28px);line-height:1.34;color:var(--light-gold)}
.symbol-gloss cite{display:block;font-family:var(--sans);font-style:normal;font-size:8px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.symbol-block{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.symbol-block h2{font-size:26px;margin-bottom:14px}
.symbol-lexemes,.symbol-themes,.symbol-related{list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px}
.symbol-lexemes li,.symbol-themes li{font-size:12px;color:var(--text);
  border:1px solid var(--line);padding:7px 14px;border-radius:2px;background:var(--surface)}
.symbol-themes li{color:var(--gold)}
.symbol-related li a{display:inline-block;font-size:12px;color:var(--gold);
  border:1px solid var(--dark-gold);padding:7px 14px;border-radius:2px;transition:border-color .4s ease}
.symbol-related li a:hover{border-color:var(--gold);color:var(--bright-gold)}
.symbol-cta{margin-top:48px;padding:32px 26px;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--surface),var(--warm));text-align:center}
.symbol-cta h2{font-size:29px}
.symbol-cta p{font-size:13px;color:var(--muted);margin-top:14px;max-width:46ch;margin-inline:auto}
.symbol-cta .button{margin-top:24px;display:inline-flex;width:auto}
.symbol-note{margin-top:30px;text-align:center;max-width:62ch;margin-inline:auto}
.symbol-index{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:10px}
.symbol-index a{display:block;padding:20px 22px;border:1px solid var(--line);
  background:var(--surface);transition:border-color .4s ease}
.symbol-index a:hover{border-color:var(--dark-gold)}
.symbol-index strong{display:block;font-family:var(--serif);font-weight:400;
  font-size:23px;line-height:1.2;color:var(--light-gold)}
.symbol-index span{display:block;font-size:12px;line-height:1.8;color:var(--muted);margin-top:8px}
@media(min-width:700px){.symbol-index{grid-template-columns:repeat(2,minmax(0,1fr))}}