:root{
  --navy:#06111f;
  --navy-2:#0b1d33;
  --blue:#102b4b;
  --gold:#d7a84f;
  --gold-2:#efc980;
  --ivory:#f4ecdf;
  --muted:#b8b2a8;
  --line:rgba(215,168,79,.32);
  --shadow:0 24px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--navy);color:var(--ivory);
  font-family:Inter,system-ui,sans-serif;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-4;
  background:
  radial-gradient(circle at 20% 10%, rgba(39,77,119,.22), transparent 32%),
  radial-gradient(circle at 80% 25%, rgba(215,168,79,.08), transparent 28%),
  linear-gradient(180deg,#05101d,#08182a 55%,#040b14);
}
.cosmos{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-3;background:linear-gradient(180deg,#020814 0%,#07162a 52%,#030914 100%)}
.star-layer{position:absolute;inset:-18%;background-repeat:repeat;will-change:transform,opacity}
.stars-far{opacity:.38;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.4px);background-size:72px 72px;animation:starsFloatFar 65s linear infinite}
.stars-mid{opacity:.58;background-image:radial-gradient(circle,rgba(172,205,255,.95) 0 1.2px,transparent 1.8px),radial-gradient(circle,rgba(239,201,128,.8) 0 1px,transparent 1.7px);background-size:118px 118px,164px 164px;background-position:12px 28px,72px 96px;animation:starsFloatMid 44s linear infinite,twinkle 5.5s ease-in-out infinite alternate}
.stars-near{opacity:.76;background-image:radial-gradient(circle,rgba(255,255,255,1) 0 1.6px,transparent 2.4px);background-size:210px 210px;background-position:40px 70px;filter:drop-shadow(0 0 4px rgba(170,210,255,.8));animation:starsFloatNear 30s linear infinite,twinkle 3.8s ease-in-out infinite alternate-reverse}
.nebula{position:absolute;width:70vw;height:70vw;border-radius:50%;filter:blur(70px);opacity:.18;will-change:transform}
.nebula-a{left:-22vw;top:-26vw;background:radial-gradient(circle,rgba(63,92,173,.9),rgba(56,28,112,.45) 48%,transparent 72%);animation:nebulaMoveA 28s ease-in-out infinite alternate}
.nebula-b{right:-28vw;bottom:-34vw;background:radial-gradient(circle,rgba(110,42,117,.72),rgba(20,100,132,.45) 48%,transparent 72%);animation:nebulaMoveB 34s ease-in-out infinite alternate}
.shooting-star{position:absolute;width:150px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);opacity:0;transform:rotate(-28deg);filter:drop-shadow(0 0 5px white)}
.shooting-star-a{top:18%;left:18%;animation:shoot 11s ease-in-out infinite 3s}.shooting-star-b{top:42%;left:66%;animation:shoot 15s ease-in-out infinite 8s}
@keyframes starsFloatFar{to{transform:translate3d(72px,120px,0)}}
@keyframes starsFloatMid{to{transform:translate3d(-95px,150px,0)}}
@keyframes starsFloatNear{to{transform:translate3d(125px,190px,0)}}
@keyframes twinkle{0%{opacity:.38}50%{opacity:.78}100%{opacity:.5}}
@keyframes nebulaMoveA{to{transform:translate(13vw,9vw) scale(1.15)}}
@keyframes nebulaMoveB{to{transform:translate(-12vw,-8vw) scale(1.1)}}
@keyframes shoot{0%,78%{opacity:0;transform:translate(-180px,-80px) rotate(-28deg)}80%{opacity:1}88%{opacity:0;transform:translate(420px,190px) rotate(-28deg)}100%{opacity:0}}
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.04;
 background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
@keyframes drift{to{background-position:92px 92px,170px 190px}}
.topbar{
  position:fixed;left:0;right:0;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(20px,5vw,72px);
  background:linear-gradient(180deg,rgba(3,10,18,.84),rgba(3,10,18,0));
}
.brand{display:flex;gap:12px;align-items:center;color:var(--ivory);text-decoration:none}
.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;color:var(--gold)}
.brand-copy{display:flex;flex-direction:column;letter-spacing:.24em;font-family:"Cormorant Garamond",serif;line-height:.9}
.brand-copy strong{font-size:18px;font-weight:500}.brand-copy small{font-size:13px;margin-top:7px}
.ghost-button,.text-button{
  color:var(--ivory);background:none;border:0;font:500 11px Inter;letter-spacing:.18em;cursor:pointer
}
.screen{
  min-height:100svh;display:none;align-items:center;justify-content:center;
  padding:110px clamp(22px,6vw,90px) 70px;
  animation:fade .8s ease;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,rgba(20,54,94,.18),transparent 50%);
}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero{
  position:relative;justify-content:flex-start;
  background:url("assets/logo-poster.png") center/cover no-repeat;
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,14,.88) 0%,rgba(2,8,14,.5) 44%,rgba(2,8,14,.1)),linear-gradient(0deg,rgba(2,8,14,.7),transparent 55%)}
.hero-content{position:relative;max-width:680px;z-index:2}
.eyebrow,.step{font-size:11px;letter-spacing:.28em;color:var(--gold-2);text-transform:uppercase}
h1,h2{font-family:"Cormorant Garamond",serif;font-weight:500;line-height:.96;margin:18px 0}
h1{font-size:clamp(58px,8vw,118px);max-width:900px}
h2{font-size:clamp(42px,5vw,76px)}
.accent-line{font:italic 500 clamp(28px,4vw,54px) "Cormorant Garamond";color:var(--gold-2);margin:0 0 36px}
.primary-button,.secondary-button{
  border:1px solid var(--gold);padding:15px 24px;border-radius:4px;
  font:600 11px Inter;letter-spacing:.16em;cursor:pointer;transition:.3s;
}
.primary-button{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#08101a;box-shadow:0 10px 28px rgba(215,168,79,.2)}
.secondary-button{background:transparent;color:var(--gold-2)}
.primary-button:hover,.secondary-button:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(215,168,79,.25)}
.secondary-button.dark{color:#1b1d22;border-color:#9f742d}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.6);z-index:2}
.panel{width:min(1120px,100%);text-align:center}
.panel.narrow{width:min(860px,100%)}
.centered{text-align:center}
.question-panel h2{max-width:900px;margin-inline:auto}
.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.answer-card,.choice-card{
  min-height:230px;padding:28px 22px;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(180deg,rgba(18,40,67,.75),rgba(4,12,22,.88));
  color:var(--ivory);font:500 18px "Cormorant Garamond";cursor:pointer;transition:.35s;
}
.answer-card:hover,.choice-card:hover,.choice-card.featured{border-color:var(--gold);box-shadow:0 0 34px rgba(215,168,79,.13);transform:translateY(-3px)}
.answer-card span{display:block;font:400 12px Inter;color:var(--muted);margin-top:12px}
.microcopy{font-size:12px;color:var(--muted);margin-top:28px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:0;width:min(1240px,100%);border:1px solid var(--line);box-shadow:var(--shadow)}
.reflection-image{min-height:620px;position:relative;overflow:hidden;background:radial-gradient(circle at 58% 26%,rgba(63,110,170,.3),transparent 25%),linear-gradient(180deg,#07182e 0%,#0d2740 58%,#06111e 100%)}
.reflection-image:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1.2px,transparent 1.8px),radial-gradient(circle,rgba(239,201,128,.8) 0 1px,transparent 1.6px);background-size:76px 76px,123px 123px;background-position:0 0,31px 47px;opacity:.72;animation:sceneStars 24s linear infinite,twinkle 4s ease-in-out infinite alternate}
.reflection-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.42)),radial-gradient(circle at 50% 84%,rgba(215,168,79,.18),transparent 20%)}
.route-sky{position:absolute;inset:0;background:radial-gradient(circle at 68% 22%,rgba(175,210,255,.8) 0 2px,transparent 3px),radial-gradient(circle at 61% 30%,rgba(255,255,255,.95) 0 2px,transparent 3px),radial-gradient(circle at 54% 38%,rgba(239,201,128,.9) 0 2px,transparent 3px),radial-gradient(circle at 64% 46%,rgba(255,255,255,.8) 0 2px,transparent 3px);filter:drop-shadow(0 0 8px rgba(180,210,255,.65));animation:constellationPulse 4.8s ease-in-out infinite alternate}
.route-mountains{position:absolute;left:-8%;right:-8%;bottom:0;height:45%;background:linear-gradient(150deg,transparent 0 14%,#0a1b2d 14% 30%,transparent 30%),linear-gradient(210deg,transparent 0 22%,#10283d 22% 42%,transparent 42%),linear-gradient(160deg,transparent 0 34%,#071422 34% 55%,transparent 55%);opacity:.95}
.route-path{position:absolute;left:50%;bottom:-8%;width:18%;height:52%;transform:translateX(-50%) perspective(300px) rotateX(26deg);border-radius:48% 48% 8% 8%;background:linear-gradient(90deg,rgba(215,168,79,.05),rgba(239,201,128,.88),rgba(215,168,79,.08));box-shadow:0 0 32px rgba(215,168,79,.35);clip-path:polygon(46% 0,56% 0,100% 100%,0 100%);animation:pathGlow 3.8s ease-in-out infinite alternate}
.route-traveler{position:absolute;left:50%;bottom:18%;width:18px;height:62px;transform:translateX(-50%);background:linear-gradient(#05080e,#101522);border-radius:50% 50% 30% 30%;z-index:3;filter:drop-shadow(0 8px 8px rgba(0,0,0,.75))}.route-traveler:before{content:"";position:absolute;left:4px;top:-12px;width:10px;height:10px;border-radius:50%;background:#090c12}
.route-lantern{position:absolute;right:16%;bottom:14%;width:30px;height:42px;border:1px solid rgba(239,201,128,.8);border-radius:4px;z-index:4;background:radial-gradient(circle,rgba(255,220,130,.95),rgba(215,168,79,.22) 46%,transparent 72%);box-shadow:0 0 35px rgba(239,201,128,.62);animation:lantern 2.6s ease-in-out infinite alternate}
@keyframes sceneStars{to{background-position:76px 100px,154px 180px}}@keyframes constellationPulse{to{opacity:.58;filter:drop-shadow(0 0 16px rgba(180,210,255,.95))}}@keyframes pathGlow{to{filter:brightness(1.28);box-shadow:0 0 48px rgba(215,168,79,.5)}}@keyframes lantern{to{transform:translateY(-3px);filter:brightness(1.2)}}
.reflection-copy{padding:clamp(40px,6vw,80px);background:rgba(5,15,26,.92);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.prose{font:400 21px/1.65 "Cormorant Garamond";color:#e9dfd0;text-align:left;margin-bottom:28px}
.story-screen{background:radial-gradient(circle at 18% 22%,rgba(40,84,137,.28),transparent 34%),radial-gradient(circle at 82% 68%,rgba(116,61,132,.22),transparent 36%),linear-gradient(145deg,rgba(7,27,50,.68),rgba(10,17,33,.68) 56%,rgba(27,10,38,.68));color:var(--ivory)}
.story-screen:before{content:"";position:absolute;inset:-20%;background-image:radial-gradient(circle,rgba(255,255,255,.96) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(177,207,255,.8) 0 1.4px,transparent 2px);background-size:86px 86px,143px 143px;background-position:0 0,40px 66px;opacity:.62;animation:storySky 38s linear infinite,twinkle 5s ease-in-out infinite alternate}
.story-screen:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(215,168,79,.23),transparent 48%),linear-gradient(180deg,transparent 55%,rgba(2,7,14,.68));pointer-events:none}
.story-atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none}.story-atmosphere span{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 12px var(--gold-2);opacity:.35;animation:ember 9s ease-in-out infinite}.story-atmosphere span:nth-child(1){left:12%;bottom:12%;animation-delay:0s}.story-atmosphere span:nth-child(2){left:28%;bottom:7%;animation-delay:2s}.story-atmosphere span:nth-child(3){right:18%;bottom:14%;animation-delay:4s}.story-atmosphere span:nth-child(4){right:31%;bottom:4%;animation-delay:6s}.story-atmosphere span:nth-child(5){left:54%;bottom:9%;animation-delay:1s}
.story-card{z-index:2;width:min(880px,100%);padding:clamp(38px,7vw,88px);border:1px solid rgba(239,201,128,.54);background:linear-gradient(145deg,rgba(8,29,53,.82),rgba(14,21,42,.88) 55%,rgba(42,20,52,.8));backdrop-filter:blur(9px);color:var(--ivory);box-shadow:0 28px 90px rgba(0,0,0,.5),0 0 50px rgba(109,80,166,.12);position:relative}.story-card:before{content:"✦";position:absolute;right:32px;top:24px;color:var(--gold-2);font-size:28px;text-shadow:0 0 18px rgba(215,168,79,.55);animation:starBreathe 2.8s ease-in-out infinite alternate}.story-card:after{content:"";position:absolute;inset:16px;border:1px solid rgba(239,201,128,.12);pointer-events:none}
.story-card p{font:400 clamp(21px,2.2vw,27px)/1.58 "Cormorant Garamond";max-width:690px;color:#f1e5d4}.story-card p em{color:var(--gold-2);font-style:normal}.story-card h2{color:var(--gold-2)}.story-card .step{color:#8fd3d8}.story-card .secondary-button.dark{color:var(--gold-2);border-color:var(--gold)}
@keyframes storySky{to{transform:translate3d(120px,165px,0)}}@keyframes ember{0%,100%{transform:translateY(0);opacity:0}25%{opacity:.55}70%{opacity:.2}100%{transform:translateY(-170px);opacity:0}}@keyframes starBreathe{to{transform:scale(1.2);text-shadow:0 0 28px rgba(215,168,79,.9)}}
.star-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin:44px 0}
.star-button{border:0;background:none;color:var(--ivory);cursor:pointer;padding:8px}
.star-button .orb{display:grid;place-items:center;margin:auto;width:66px;height:66px;border:1px solid var(--gold);border-radius:50%;font-size:26px;transition:.3s}
.star-button:hover .orb,.star-button.selected .orb{background:rgba(215,168,79,.13);box-shadow:0 0 28px rgba(215,168,79,.35);transform:scale(1.06)}
.star-button label{display:block;margin-top:12px;font:500 12px Inter}
.star-message,.generated-question{margin:30px auto;padding:28px;border:1px solid var(--line);max-width:760px;font:400 28px/1.35 "Cormorant Garamond";background:rgba(3,10,18,.55)}
.hidden,[hidden]{display:none!important}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:40px 0}
.choice-card{min-height:150px;font-size:15px;letter-spacing:.08em}
.generated-question{min-height:130px;display:grid;place-items:center}
.final-screen{background:linear-gradient(90deg,rgba(3,10,18,.98),rgba(4,13,23,.78)),url("assets/hero-sendero.png") center/cover}
.email-layout{display:grid;grid-template-columns:1.15fr .85fr;width:min(1200px,100%);border:1px solid var(--line);background:rgba(4,13,23,.78);box-shadow:var(--shadow)}
.email-copy,.email-visual{padding:clamp(38px,6vw,76px)}
.email-copy p{font:400 22px/1.5 "Cormorant Garamond"}
.email-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid var(--line);text-align:center}
.email-visual p{font:400 25px/1.4 "Cormorant Garamond"}
.constellation{font-size:74px;color:var(--gold);letter-spacing:.3em;text-shadow:80px -55px 0 #fff,-55px -30px 0 #fff}
.form-row{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:30px}
form label{display:block;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
input[type=email]{width:100%;background:rgba(0,0,0,.18);border:1px solid var(--gold);color:#fff;padding:15px 16px;border-radius:4px;font:400 15px Inter}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;letter-spacing:0;text-transform:none;font-size:11px;line-height:1.45}
.form-message{min-height:22px;font:400 13px Inter!important;color:var(--gold-2)}
.seal{width:96px;height:96px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin:0 auto 30px;color:var(--gold);font-size:36px}
footer{display:flex;justify-content:space-between;padding:22px clamp(20px,5vw,72px);font-size:10px;letter-spacing:.12em;color:#817d76;background:#030a12}
@media (max-width:900px){
  .answer-grid{grid-template-columns:1fr}.answer-card{min-height:130px}
  .split,.email-layout{grid-template-columns:1fr}.reflection-image{min-height:380px}
  .email-visual{border-left:0;border-top:1px solid var(--line)}
  .star-grid{grid-template-columns:repeat(3,1fr)}
  .choice-row,.form-row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .topbar{padding:14px 16px}.brand-mark{width:38px;height:38px}.brand-copy strong{font-size:15px}
  .screen{padding:92px 18px 48px}
  h1{font-size:54px}.hero{background-position:61% center}
  .star-grid{grid-template-columns:repeat(2,1fr)}
  .reflection-copy{padding:34px 24px}
  footer{flex-direction:column;gap:8px}
}

.review-bar{position:fixed;z-index:30;top:76px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(215,168,79,.45);border-radius:8px;background:rgba(3,10,18,.94);box-shadow:0 10px 30px rgba(0,0,0,.35);font:500 10px Inter;letter-spacing:.06em;white-space:nowrap}.review-bar strong{color:var(--gold-2);margin-right:4px}.review-bar button,.review-bar select{border:1px solid rgba(215,168,79,.35);background:#0b1d33;color:var(--ivory);border-radius:4px;padding:8px 10px;font:500 10px Inter;cursor:pointer}.review-bar button:hover{border-color:var(--gold)}@media(max-width:760px){.review-bar{top:auto;bottom:8px;width:calc(100% - 16px);overflow-x:auto;justify-content:flex-start}.review-bar strong{display:none}.screen{padding-bottom:108px}}

#question .panel,#stars .panel,#prompt .panel,#welcome .panel{position:relative;z-index:2;padding:clamp(28px,5vw,58px);border:1px solid rgba(215,168,79,.18);background:linear-gradient(180deg,rgba(6,18,34,.58),rgba(3,10,20,.48));backdrop-filter:blur(4px);box-shadow:0 24px 80px rgba(0,0,0,.22)}
@media (max-width:760px){
  .choice-row,.community-actions{grid-template-columns:1fr}
  .choice-card{min-height:120px}
  .question-writing{padding:22px}
  .oracle-panel,.letter-shell{padding:34px 23px!important}
  .letter-shell::before{inset:10px}
  .traveler-question{margin-bottom:28px}
  .short-answer,.long-answer{text-align:left}
  .short-answer p:first-child::first-letter{font-size:54px}
  .long-answer p:first-child::first-letter{font-size:61px}
  .community-threshold{margin:58px 0 42px;padding:34px 20px}
  .community-link{min-height:175px}
}
@media (prefers-reduced-motion:reduce){.star-layer,.nebula,.shooting-star,.reflection-image:before,.route-sky,.route-path,.route-lantern,.story-screen:before,.story-atmosphere span,.story-card:before{animation:none!important}}

/* V1.7 — Segunda pantalla sin fotografía repetida */
#question{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 24%,rgba(91,68,168,.30),transparent 28%),
    radial-gradient(circle at 82% 70%,rgba(33,116,157,.24),transparent 30%),
    linear-gradient(145deg,#030916 0%,#08162b 48%,#130c2b 100%);
}
#question::before{
  content:"";
  position:absolute;
  inset:-20%;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.8px),
    radial-gradient(circle,rgba(192,170,255,.9) 0 1.3px,transparent 2px),
    radial-gradient(circle,rgba(239,201,128,.75) 0 1px,transparent 1.7px);
  background-size:78px 78px,137px 137px,191px 191px;
  background-position:0 0,35px 62px,88px 31px;
  opacity:.72;
  animation:questionStars 36s linear infinite,twinkle 5s ease-in-out infinite alternate;
}
#question::after{
  content:"";
  position:absolute;
  width:72vmin;
  height:72vmin;
  right:-22vmin;
  top:-20vmin;
  border-radius:50%;
  background:radial-gradient(circle,rgba(105,70,179,.24),rgba(36,97,145,.10) 42%,transparent 70%);
  filter:blur(14px);
  animation:questionNebula 14s ease-in-out infinite alternate;
}
#question .question-panel{z-index:2;background:linear-gradient(180deg,rgba(5,14,30,.72),rgba(7,11,27,.58));}
@keyframes questionStars{to{background-position:78px 115px,172px 205px,279px 148px}}
@keyframes questionNebula{to{transform:translate(-7vmin,6vmin) scale(1.08);opacity:.72}}
@media (max-width:760px){
  .choice-row,.community-actions{grid-template-columns:1fr}
  .choice-card{min-height:120px}
  .question-writing{padding:22px}
  .oracle-panel,.letter-shell{padding:34px 23px!important}
  .letter-shell::before{inset:10px}
  .traveler-question{margin-bottom:28px}
  .short-answer,.long-answer{text-align:left}
  .short-answer p:first-child::first-letter{font-size:54px}
  .long-answer p:first-child::first-letter{font-size:61px}
  .community-threshold{margin:58px 0 42px;padding:34px 20px}
  .community-link{min-height:175px}
}
@media (prefers-reduced-motion:reduce){#question::before,#question::after{animation:none!important}}

.hero-tagline{
  margin-top:1.2rem;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.2rem,2vw,1.8rem);
  color:#e8dcc0;
  max-width:42rem;
  line-height:1.4;
  text-shadow:0 0 18px rgba(0,0,0,.45);
  opacity:.95;
}

/* =========================================================
   V1.8 — CUATRO CAMINOS / ATMÓSFERAS NARRATIVAS
   ========================================================= */

.cinematic-transition{
  position:fixed;inset:0;z-index:120;pointer-events:none;opacity:0;
  background:#02060d;transition:opacity .42s ease;
}
.cinematic-transition span{
  position:absolute;left:50%;top:50%;width:1px;height:1px;border-radius:50%;
  background:rgba(239,201,128,.95);
  box-shadow:0 0 42px 18px rgba(215,168,79,.18);
  transform:translate(-50%,-50%) scale(.2);
  transition:transform 1s cubic-bezier(.2,.75,.18,1),box-shadow .9s ease;
}
.cinematic-transition.active{opacity:1}
.cinematic-transition.active span{transform:translate(-50%,-50%) scale(2200);box-shadow:0 0 100px 60px rgba(35,71,112,.18)}

#question.path-selection-screen{
  min-height:100svh;
  background:
    radial-gradient(ellipse at 50% 112%,rgba(185,139,70,.12),transparent 42%),
    radial-gradient(circle at 14% 20%,rgba(65,78,156,.16),transparent 30%),
    radial-gradient(circle at 88% 22%,rgba(18,102,127,.13),transparent 28%),
    linear-gradient(180deg,#020711 0%,#071426 58%,#030913 100%);
}
#question.path-selection-screen::before{
  inset:-10%;opacity:.58;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 .8px,transparent 1.5px),
    radial-gradient(circle,rgba(178,207,255,.72) 0 1.1px,transparent 1.8px),
    radial-gradient(circle,rgba(239,201,128,.62) 0 .8px,transparent 1.5px);
  background-size:92px 92px,157px 157px,241px 241px;
  animation:questionStars 64s linear infinite,twinkle 7s ease-in-out infinite alternate;
}
#question.path-selection-screen::after{
  width:92vmin;height:92vmin;right:-34vmin;top:-32vmin;opacity:.5;
  background:radial-gradient(circle,rgba(69,68,144,.28),rgba(22,91,126,.11) 42%,transparent 72%);
  filter:blur(32px);animation:questionNebula 22s ease-in-out infinite alternate;
}
.question-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.question-horizon{position:absolute;left:8%;right:8%;bottom:11%;height:1px;background:linear-gradient(90deg,transparent,rgba(239,201,128,.08),rgba(239,201,128,.35),rgba(239,201,128,.08),transparent);box-shadow:0 0 32px rgba(215,168,79,.12)}
.question-glow{position:absolute;left:50%;bottom:-32vmin;width:76vmin;height:58vmin;border-radius:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(215,168,79,.11),transparent 66%);filter:blur(8px);animation:questionGlow 8s ease-in-out infinite alternate}
.question-dust{position:absolute;inset:-20%;opacity:.22;background-image:radial-gradient(circle,rgba(239,201,128,.9) 0 1px,transparent 1.7px);background-size:330px 330px;animation:dustDrift 48s linear infinite}
.question-dust-b{background-size:470px 470px;background-position:190px 130px;animation-duration:70s;animation-direction:reverse;opacity:.14}
@keyframes questionGlow{to{transform:translateX(-50%) scale(1.12);opacity:.72}}
@keyframes dustDrift{to{transform:translate3d(160px,-90px,0)}}

#question .question-panel{
  width:min(1480px,100%);padding:clamp(36px,4.5vw,72px) clamp(18px,3vw,48px);
  border:0;background:transparent;backdrop-filter:none;box-shadow:none;z-index:3;
}
.question-panel h2{max-width:980px;font-size:clamp(46px,5.7vw,86px);letter-spacing:-.025em;margin-bottom:18px}
.question-intro{max-width:670px;margin:0 auto;color:rgba(244,236,223,.69);font:400 clamp(18px,1.8vw,24px)/1.55 "Cormorant Garamond",serif}
.path-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,24px);margin-top:clamp(38px,5vw,68px)}
.path-grid:hover .path-card:not(:hover){opacity:.48;filter:saturate(.65)}
.path-card{
  --pointer-x:0px;--pointer-y:0px;
  position:relative;isolation:isolate;min-height:clamp(390px,48vh,570px);overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;
  border-radius:2px;border:1px solid rgba(244,236,223,.14);padding:clamp(24px,2.2vw,38px);
  background:#06101d;color:var(--ivory);transform:translate3d(0,0,0);transition:opacity .55s ease,filter .55s ease,transform .65s cubic-bezier(.2,.72,.16,1),border-color .45s ease,box-shadow .55s ease;
}
.path-card::before{
  content:"";position:absolute;inset:0;z-index:-3;transform:scale(1.07) translate(var(--pointer-x),var(--pointer-y));
  transition:transform .7s cubic-bezier(.2,.72,.16,1),filter .6s ease;
}
.path-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(1,5,12,.03) 8%,rgba(2,7,14,.18) 42%,rgba(2,7,14,.96) 88%);
}
.path-card:hover,.path-card:focus-visible{
  transform:translateY(-10px);border-color:rgba(239,201,128,.55);
  box-shadow:0 28px 70px rgba(0,0,0,.46),0 0 52px rgba(99,126,172,.11);outline:none;
}
.path-card:hover::before{transform:scale(1.14) translate(var(--pointer-x),var(--pointer-y));filter:brightness(1.12)}
.path-card__chapter{position:absolute;left:clamp(24px,2.2vw,38px);top:28px;z-index:4;font:500 9px/1 Inter,sans-serif;letter-spacing:.28em;color:rgba(244,236,223,.64)}
.path-card__visual{position:absolute;inset:0;z-index:-2;overflow:hidden}
.path-vfx{position:absolute;display:block;transition:transform 1.1s cubic-bezier(.2,.72,.16,1),opacity .7s ease}
.path-card strong{display:block;max-width:15ch;font:500 clamp(25px,2.15vw,34px)/1.05 "Cormorant Garamond",serif;letter-spacing:-.015em}
.path-card__note{display:block;margin-top:16px;max-width:27ch;font:300 12px/1.55 Inter,sans-serif;color:rgba(244,236,223,.62)}
.path-card__invitation{display:flex;align-items:center;gap:10px;margin-top:28px;font:500 9px/1 Inter,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-2);opacity:.58;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.path-card__invitation i{font-style:normal;font-size:15px;transition:transform .4s ease}
.path-card:hover .path-card__invitation,.path-card:focus-visible .path-card__invitation{opacity:1;transform:none}
.path-card:hover .path-card__invitation i{transform:translateX(5px)}

/* Umbral I: bruma y una luz remota */
.path-card[data-path="busqueda"]::before{background:radial-gradient(circle at 70% 24%,rgba(178,210,255,.9) 0 1px,rgba(120,169,226,.26) 2px,transparent 11%),radial-gradient(ellipse at 42% 46%,rgba(76,90,153,.34),transparent 38%),linear-gradient(160deg,#06101f,#0a1930 56%,#10102a)}
.path-card[data-path="busqueda"] .path-vfx-a{left:-20%;right:-20%;top:26%;height:32%;background:linear-gradient(180deg,transparent,rgba(161,182,218,.13),transparent);filter:blur(13px);transform:rotate(-8deg);animation:mistPass 12s ease-in-out infinite alternate}
.path-card[data-path="busqueda"] .path-vfx-b{left:18%;right:10%;bottom:21%;height:1px;background:linear-gradient(90deg,transparent,rgba(197,217,245,.27),transparent);box-shadow:0 -46px 70px 18px rgba(62,78,126,.16);transform:rotate(4deg)}
.path-card[data-path="busqueda"] .path-vfx-c{right:24%;top:23%;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 18px 5px rgba(159,202,255,.45);animation:distantPulse 3.8s ease-in-out infinite alternate}
/* Umbral II: eclipse, memoria y fragmentos */
.path-card[data-path="pasado"]::before{background:radial-gradient(circle at 68% 25%,#080910 0 14%,rgba(197,141,88,.38) 14.5%,rgba(91,45,67,.18) 17%,transparent 29%),radial-gradient(circle at 28% 52%,rgba(107,45,73,.28),transparent 36%),linear-gradient(155deg,#080912,#1a1020 58%,#100b14)}
.path-card[data-path="pasado"] .path-vfx-a{left:16%;top:34%;width:72%;height:1px;background:linear-gradient(90deg,transparent,rgba(224,170,120,.35),transparent);box-shadow:0 44px 0 rgba(224,170,120,.11),0 88px 0 rgba(224,170,120,.06);transform:rotate(-7deg)}
.path-card[data-path="pasado"] .path-vfx-b{left:14%;top:22%;width:58%;height:56%;border-left:1px solid rgba(224,170,120,.16);border-bottom:1px solid rgba(224,170,120,.09);transform:skew(-14deg);opacity:.8}
.path-card[data-path="pasado"] .path-vfx-c{right:18%;top:45%;width:50px;height:78px;border:1px solid rgba(238,197,147,.2);transform:rotate(13deg);box-shadow:-92px 62px 0 -15px rgba(209,150,115,.11);animation:memoryFloat 7s ease-in-out infinite alternate}
/* Umbral III: árbol celeste y raíces */
.path-card[data-path="familia"]::before{background:radial-gradient(circle at 52% 29%,rgba(207,185,115,.34),transparent 21%),radial-gradient(circle at 22% 18%,rgba(42,118,124,.25),transparent 34%),linear-gradient(160deg,#041116,#08262b 55%,#071518)}
.path-card[data-path="familia"] .path-vfx-a{left:49%;top:18%;width:2px;height:48%;background:linear-gradient(180deg,rgba(239,201,128,.12),rgba(239,201,128,.7),rgba(239,201,128,.18));box-shadow:0 0 16px rgba(215,168,79,.25)}
.path-card[data-path="familia"] .path-vfx-b{left:18%;right:18%;top:24%;height:39%;background:repeating-radial-gradient(ellipse at 50% 105%,transparent 0 24px,rgba(239,201,128,.16) 25px 26px,transparent 27px 42px);clip-path:polygon(48% 100%,35% 72%,12% 58%,37% 60%,25% 30%,48% 55%,50% 0,53% 53%,77% 28%,65% 62%,92% 54%,65% 75%,52% 100%);filter:drop-shadow(0 0 8px rgba(215,168,79,.24));animation:treeBreathe 6s ease-in-out infinite alternate}
.path-card[data-path="familia"] .path-vfx-c{left:22%;right:22%;bottom:19%;height:27%;background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 17px,rgba(86,173,168,.15) 18px 19px,transparent 20px 34px);clip-path:polygon(48% 0,10% 42%,41% 29%,6% 78%,46% 48%,50% 100%,54% 48%,94% 78%,59% 29%,90% 42%,52% 0)}
/* Umbral IV: horizonte y portal */
.path-card[data-path="comienzo"]::before{background:radial-gradient(ellipse at 52% 69%,rgba(239,201,128,.42),transparent 24%),radial-gradient(circle at 20% 20%,rgba(36,122,150,.35),transparent 32%),linear-gradient(165deg,#04131d,#0a2a38 54%,#2a211d)}
.path-card[data-path="comienzo"] .path-vfx-a{left:16%;right:16%;top:23%;height:54%;border:1px solid rgba(239,201,128,.27);border-bottom:0;border-radius:50% 50% 0 0;box-shadow:inset 0 0 45px rgba(78,164,175,.1),0 0 35px rgba(215,168,79,.09);animation:portalBreathe 5s ease-in-out infinite alternate}
.path-card[data-path="comienzo"] .path-vfx-b{left:8%;right:8%;top:70%;height:1px;background:linear-gradient(90deg,transparent,rgba(239,201,128,.85),transparent);box-shadow:0 0 34px 9px rgba(215,168,79,.2)}
.path-card[data-path="comienzo"] .path-vfx-c{left:50%;top:27%;width:1px;height:39%;background:linear-gradient(180deg,transparent,rgba(239,201,128,.5),transparent);box-shadow:0 0 18px rgba(239,201,128,.22);animation:firstLight 4s ease-in-out infinite alternate}

@keyframes mistPass{to{transform:translate(9%,-4%) rotate(4deg);opacity:.55}}
@keyframes distantPulse{to{transform:scale(1.55);opacity:.65}}
@keyframes memoryFloat{to{transform:translate(-10px,-13px) rotate(8deg);opacity:.55}}
@keyframes treeBreathe{to{transform:scale(1.035);filter:drop-shadow(0 0 16px rgba(215,168,79,.36))}}
@keyframes portalBreathe{to{transform:scale(1.035);border-color:rgba(239,201,128,.48);box-shadow:inset 0 0 60px rgba(78,164,175,.16),0 0 48px rgba(215,168,79,.15)}}
@keyframes firstLight{to{opacity:.45;transform:scaleY(1.18)}}

/* La escena responde al camino escogido */
#reflection{background:#020812}
.reflection-image{isolation:isolate;transition:background 1s ease}
.reflection-image::before{z-index:0}
.reflection-image::after{z-index:8}
.route-orb,.route-rings,.route-tree,.route-fragments,.route-veil{position:absolute;pointer-events:none}
.route-orb{z-index:1;border-radius:50%;transition:all 1s ease}
.route-rings{z-index:1;border-radius:50%;border:1px solid rgba(239,201,128,.18);transition:all 1s ease}
.route-tree{z-index:3;display:none}
.route-fragments{z-index:4;display:none;inset:0}
.route-fragments span{position:absolute;border:1px solid rgba(239,201,128,.22);background:rgba(98,53,75,.08);animation:fragmentDrift 8s ease-in-out infinite alternate}
.route-fragments span:nth-child(1){width:56px;height:82px;left:18%;top:28%;transform:rotate(-14deg)}
.route-fragments span:nth-child(2){width:32px;height:48px;right:17%;top:41%;transform:rotate(17deg);animation-delay:1.4s}
.route-fragments span:nth-child(3){width:72px;height:34px;left:30%;bottom:23%;transform:rotate(8deg);animation-delay:2.3s}
.route-fragments span:nth-child(4){width:26px;height:65px;right:31%;bottom:17%;transform:rotate(-9deg);animation-delay:3.2s}
.route-veil{z-index:5;inset:-10%;opacity:0;filter:blur(15px);background:linear-gradient(115deg,transparent 20%,rgba(185,205,230,.12) 45%,transparent 70%);animation:veilPass 13s ease-in-out infinite alternate}

body[data-route="busqueda"] .reflection-image{background:radial-gradient(circle at 74% 26%,rgba(166,202,244,.15),transparent 20%),radial-gradient(ellipse at 38% 47%,rgba(70,81,145,.32),transparent 41%),linear-gradient(180deg,#040b18 0%,#09172c 61%,#070916 100%)}
body[data-route="busqueda"] .reflection-image::before{opacity:.46;filter:blur(.15px)}
body[data-route="busqueda"] .route-orb{right:20%;top:19%;width:7px;height:7px;background:#eaf5ff;box-shadow:0 0 25px 9px rgba(143,190,244,.35)}
body[data-route="busqueda"] .route-rings{right:11%;top:8%;width:31%;aspect-ratio:1;border-color:rgba(159,192,231,.08);box-shadow:0 0 80px rgba(94,111,187,.12)}
body[data-route="busqueda"] .route-veil{opacity:1}
body[data-route="busqueda"] .route-mountains{opacity:.42;filter:blur(2px)}
body[data-route="busqueda"] .route-path{background:linear-gradient(90deg,rgba(120,170,224,.02),rgba(180,210,245,.58),rgba(120,170,224,.02));box-shadow:0 0 38px rgba(120,170,224,.22)}
body[data-route="busqueda"] .route-lantern{right:21%;bottom:18%;background:radial-gradient(circle,rgba(199,224,255,.95),rgba(106,163,224,.2) 48%,transparent 72%);border-color:rgba(199,224,255,.7);box-shadow:0 0 42px rgba(116,177,238,.46)}

body[data-route="pasado"] .reflection-image{background:radial-gradient(circle at 70% 25%,#05060b 0 14%,rgba(195,135,88,.32) 14.5%,rgba(103,48,70,.16) 18%,transparent 30%),radial-gradient(circle at 24% 52%,rgba(112,47,73,.23),transparent 34%),linear-gradient(180deg,#070812 0%,#1b101f 58%,#0d0910 100%)}
body[data-route="pasado"] .reflection-image::before{opacity:.22;filter:saturate(.5)}
body[data-route="pasado"] .route-fragments{display:block}
body[data-route="pasado"] .route-orb{right:17%;top:13%;width:27%;aspect-ratio:1;background:#05060b;box-shadow:0 0 0 1px rgba(220,161,108,.32),0 0 55px rgba(162,87,75,.28)}
body[data-route="pasado"] .route-rings{right:11%;top:7%;width:39%;aspect-ratio:1;border-color:rgba(224,170,120,.12)}
body[data-route="pasado"] .route-mountains{background:linear-gradient(155deg,transparent 0 18%,#160e19 18% 34%,transparent 34%),linear-gradient(205deg,transparent 0 24%,#281522 24% 44%,transparent 44%),linear-gradient(165deg,transparent 0 38%,#0e0a11 38% 58%,transparent 58%)}
body[data-route="pasado"] .route-path{background:linear-gradient(90deg,rgba(197,139,94,.02),rgba(224,170,120,.55),rgba(197,139,94,.02));box-shadow:0 0 32px rgba(160,89,80,.28)}
body[data-route="pasado"] .route-lantern{right:15%;background:radial-gradient(circle,rgba(255,212,162,.9),rgba(172,91,76,.22) 50%,transparent 72%);box-shadow:0 0 34px rgba(185,103,82,.42)}

body[data-route="familia"] .reflection-image{background:radial-gradient(circle at 52% 26%,rgba(210,188,116,.22),transparent 21%),radial-gradient(circle at 18% 20%,rgba(30,118,123,.22),transparent 34%),linear-gradient(180deg,#031015 0%,#09272b 58%,#071313 100%)}
body[data-route="familia"] .reflection-image::before{opacity:.56;background-size:91px 91px,148px 148px}
body[data-route="familia"] .route-tree{display:block;left:22%;right:22%;top:14%;bottom:15%;filter:drop-shadow(0 0 14px rgba(215,168,79,.18))}
body[data-route="familia"] .route-tree::before{content:"";position:absolute;left:50%;top:12%;bottom:34%;width:3px;background:linear-gradient(180deg,rgba(239,201,128,.08),rgba(239,201,128,.7),rgba(239,201,128,.22));transform:translateX(-50%)}
body[data-route="familia"] .route-tree::after{content:"";position:absolute;inset:0 4% 28%;background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 34px,rgba(239,201,128,.16) 35px 36px,transparent 37px 56px);clip-path:polygon(49% 100%,35% 74%,9% 57%,37% 61%,21% 29%,48% 54%,50% 2%,54% 54%,79% 27%,65% 62%,94% 53%,65% 77%,52% 100%);animation:treeBreathe 7s ease-in-out infinite alternate}
body[data-route="familia"] .route-tree span{position:absolute;left:6%;right:6%;bottom:0;height:38%;background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 23px,rgba(81,175,165,.14) 24px 25px,transparent 26px 43px);clip-path:polygon(48% 0,8% 37%,41% 27%,2% 76%,46% 48%,50% 100%,54% 48%,98% 76%,59% 27%,92% 37%,52% 0)}
body[data-route="familia"] .route-sky{opacity:.55}
body[data-route="familia"] .route-mountains{opacity:.56;background:linear-gradient(155deg,transparent 0 17%,#082329 17% 35%,transparent 35%),linear-gradient(205deg,transparent 0 25%,#0d3536 25% 45%,transparent 45%),linear-gradient(165deg,transparent 0 39%,#061817 39% 59%,transparent 59%)}
body[data-route="familia"] .route-path{background:linear-gradient(90deg,rgba(215,168,79,.02),rgba(239,201,128,.62),rgba(215,168,79,.02));box-shadow:0 0 38px rgba(215,168,79,.25)}
body[data-route="familia"] .route-lantern{right:14%;background:radial-gradient(circle,rgba(255,229,162,.95),rgba(215,168,79,.22) 50%,transparent 72%)}

body[data-route="comienzo"] .reflection-image{background:radial-gradient(ellipse at 52% 71%,rgba(239,201,128,.34),transparent 24%),radial-gradient(circle at 21% 23%,rgba(39,132,157,.28),transparent 34%),linear-gradient(180deg,#04131d 0%,#0a2c39 58%,#2b211c 100%)}
body[data-route="comienzo"] .reflection-image::before{opacity:.67}
body[data-route="comienzo"] .route-orb{left:50%;top:18%;width:42%;height:59%;transform:translateX(-50%);border:1px solid rgba(239,201,128,.27);border-bottom:0;border-radius:50% 50% 0 0;box-shadow:inset 0 0 70px rgba(75,169,180,.09),0 0 42px rgba(215,168,79,.09);animation:portalBreathe 6s ease-in-out infinite alternate}
body[data-route="comienzo"] .route-rings{left:50%;top:23%;width:29%;height:48%;transform:translateX(-50%);border-color:rgba(239,201,128,.13);border-bottom-color:transparent}
body[data-route="comienzo"] .route-mountains{opacity:.54;background:linear-gradient(155deg,transparent 0 18%,#0b2730 18% 34%,transparent 34%),linear-gradient(205deg,transparent 0 24%,#17404a 24% 44%,transparent 44%),linear-gradient(165deg,transparent 0 38%,#0a1e24 38% 58%,transparent 58%)}
body[data-route="comienzo"] .route-path{background:linear-gradient(90deg,rgba(239,201,128,.02),rgba(255,221,153,.92),rgba(239,201,128,.02));box-shadow:0 0 48px rgba(239,201,128,.42)}
body[data-route="comienzo"] .route-lantern{right:18%;background:radial-gradient(circle,rgba(255,237,184,.98),rgba(239,201,128,.24) 48%,transparent 72%);box-shadow:0 0 44px rgba(239,201,128,.58)}

@keyframes fragmentDrift{to{transform:translate(8px,-13px) rotate(5deg);opacity:.48}}
@keyframes veilPass{to{transform:translateX(18%) rotate(4deg);opacity:.62}}

/* La página de relato adopta el cielo del camino */
body[data-route="busqueda"] .story-screen{background:radial-gradient(circle at 18% 22%,rgba(67,88,160,.30),transparent 34%),radial-gradient(circle at 82% 68%,rgba(31,84,130,.22),transparent 36%),linear-gradient(145deg,rgba(5,18,38,.82),rgba(8,16,35,.88) 56%,rgba(18,13,44,.86))}
body[data-route="busqueda"] .story-card{background:linear-gradient(145deg,rgba(7,23,48,.87),rgba(13,21,43,.91) 58%,rgba(28,21,55,.85));border-color:rgba(174,204,240,.32)}
body[data-route="busqueda"] .story-card h2{color:#dcecff}
body[data-route="pasado"] .story-screen{background:radial-gradient(circle at 76% 19%,rgba(160,91,78,.24),transparent 26%),radial-gradient(circle at 18% 72%,rgba(99,42,72,.28),transparent 38%),linear-gradient(145deg,#080912,#1a101f 58%,#0d0911)}
body[data-route="pasado"] .story-card{background:linear-gradient(145deg,rgba(22,12,22,.92),rgba(35,17,28,.92) 58%,rgba(17,10,16,.9));border-color:rgba(223,165,116,.34)}
body[data-route="pasado"] .story-card h2{color:#e9bd91}
body[data-route="pasado"] .story-card .step{color:#c88781}
body[data-route="familia"] .story-screen{background:radial-gradient(circle at 54% 12%,rgba(204,179,102,.20),transparent 30%),radial-gradient(circle at 15% 72%,rgba(33,115,118,.25),transparent 36%),linear-gradient(145deg,#041014,#082426 58%,#071413)}
body[data-route="familia"] .story-card{background:linear-gradient(145deg,rgba(5,25,27,.91),rgba(8,36,36,.91) 58%,rgba(12,24,21,.9));border-color:rgba(215,168,79,.38)}
body[data-route="familia"] .story-card h2{color:#efcd8b}
body[data-route="familia"] .story-card .step{color:#86cbc3}
body[data-route="comienzo"] .story-screen{background:radial-gradient(ellipse at 50% 112%,rgba(215,168,79,.26),transparent 45%),radial-gradient(circle at 18% 23%,rgba(43,126,154,.30),transparent 34%),linear-gradient(145deg,#04131d,#0b2935 58%,#2b201b)}
body[data-route="comienzo"] .story-card{background:linear-gradient(145deg,rgba(6,29,38,.91),rgba(11,41,48,.89) 58%,rgba(43,32,27,.88));border-color:rgba(239,201,128,.48)}
body[data-route="comienzo"] .story-card h2{color:#f2d293}
body[data-route="comienzo"] .story-card .step{color:#8ed5db}

/* La cámara de la pregunta */
.question-chamber::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(69,105,157,.15),transparent 34%),linear-gradient(180deg,rgba(2,7,15,.15),rgba(2,8,16,.62));
}
.question-guidance{max-width:660px;margin:0 auto;color:rgba(244,236,223,.7);font:400 21px/1.55 "Cormorant Garamond",serif}
.question-writing{display:block;text-align:left;min-height:0;padding:26px 28px;background:linear-gradient(180deg,rgba(8,24,44,.76),rgba(3,11,21,.88));box-shadow:inset 0 0 42px rgba(71,111,164,.08),0 22px 60px rgba(0,0,0,.2)}
.question-writing label{display:block;margin-bottom:12px;color:var(--gold-2);font:500 10px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.question-writing span{display:block;margin-top:12px;color:rgba(244,236,223,.46);font:300 11px/1.5 Inter,sans-serif;letter-spacing:.03em}
#ownQuestion{width:100%;min-height:126px;background:transparent;color:#fff;border:0;outline:0;font:400 clamp(23px,3vw,31px)/1.36 "Cormorant Garamond",serif;resize:vertical}
#ownQuestion::placeholder{color:rgba(244,236,223,.34)}
#questionContinue{margin-top:18px}
#questionMessage{min-height:20px}

/* Primera respuesta: íntima, breve y anterior al email */
.answer-screen{
  background:radial-gradient(circle at 50% 38%,rgba(73,106,164,.24),transparent 31%),radial-gradient(circle at 17% 70%,rgba(32,99,121,.14),transparent 31%),linear-gradient(155deg,#020711,#071528 58%,#030912);
}
.answer-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.answer-ring{position:absolute;left:50%;top:46%;border:1px solid rgba(239,201,128,.13);border-radius:50%;transform:translate(-50%,-50%);animation:answerOrbit 17s linear infinite}
.answer-ring-a{width:58vmin;height:58vmin}
.answer-ring-b{width:78vmin;height:78vmin;border-color:rgba(151,191,239,.08);animation-duration:27s;animation-direction:reverse}
.answer-light{position:absolute;left:50%;top:46%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:#fff4d2;box-shadow:0 0 28px 9px rgba(239,201,128,.35),0 0 100px 40px rgba(69,105,164,.13);animation:answerPulse 4.8s ease-in-out infinite alternate}
@keyframes answerOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes answerPulse{to{transform:translate(-50%,-50%) scale(1.35);opacity:.72}}
.oracle-panel{position:relative;z-index:2;padding:clamp(38px,6vw,72px)!important;background:linear-gradient(180deg,rgba(4,14,27,.82),rgba(3,10,20,.68))!important;box-shadow:0 35px 110px rgba(0,0,0,.4)!important}
.traveler-question{max-width:670px;margin:24px auto 40px;color:rgba(244,236,223,.55);font:300 12px/1.7 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.traveler-question em{display:block;margin-top:11px;color:rgba(244,236,223,.85);font:italic 400 clamp(21px,2.5vw,28px)/1.45 "Cormorant Garamond",serif;letter-spacing:0;text-transform:none}
.short-answer{max-width:700px;margin:34px auto;text-align:left}
.short-answer p{font-size:clamp(21px,2.2vw,27px);line-height:1.58;color:rgba(244,236,223,.88)}
.short-answer p:first-child::first-letter{float:left;margin:5px 8px 0 0;color:var(--gold-2);font:500 64px/.72 "Cormorant Garamond",serif}
.answer-bridge{max-width:590px;margin:40px auto 28px;padding-top:26px;border-top:1px solid rgba(215,168,79,.2);color:rgba(244,236,223,.56);font:italic 400 20px/1.5 "Cormorant Garamond",serif}

/* Carta completa y umbral de comunidad */
.letter-screen{align-items:flex-start;overflow:visible;background:radial-gradient(circle at 50% 8%,rgba(64,103,153,.2),transparent 30%),radial-gradient(ellipse at 50% 100%,rgba(215,168,79,.1),transparent 40%),linear-gradient(180deg,#020812,#071527 48%,#030a13)}
.letter-shell{position:relative;z-index:2;width:min(980px,100%);margin:0 auto;padding:clamp(44px,7vw,88px);border:1px solid rgba(215,168,79,.23);background:linear-gradient(155deg,rgba(7,22,40,.88),rgba(3,12,23,.9));box-shadow:0 38px 120px rgba(0,0,0,.43);text-align:center}
.letter-shell::before{content:"";position:absolute;inset:18px;border:1px solid rgba(244,236,223,.045);pointer-events:none}
.letter-question{max-width:720px;margin:18px auto 30px;color:rgba(244,236,223,.48);font:300 11px/1.6 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.letter-question em{display:block;margin-top:10px;color:rgba(244,236,223,.77);font:italic 400 23px/1.45 "Cormorant Garamond",serif;letter-spacing:0;text-transform:none}
.long-answer{max-width:760px;margin:42px auto 0;text-align:left}
.long-answer p{margin:0 0 27px;color:rgba(244,236,223,.91);font-size:clamp(20px,2vw,25px);line-height:1.68}
.long-answer p:first-child::first-letter{float:left;margin:7px 9px 0 0;color:var(--gold-2);font:500 74px/.7 "Cormorant Garamond",serif}
.long-answer .letter-closing{margin-top:44px;padding:34px 0;border-top:1px solid rgba(215,168,79,.28);border-bottom:1px solid rgba(215,168,79,.28);color:#f2d9a4;font-style:italic;text-align:center}
.community-threshold{position:relative;margin:72px -2px 54px;padding:clamp(40px,6vw,68px);border:1px solid rgba(215,168,79,.27);background:radial-gradient(circle at 50% 0,rgba(215,168,79,.1),transparent 37%),rgba(2,9,18,.55)}
.community-threshold h3{margin:14px auto 22px;max-width:760px;color:var(--ivory);font:500 clamp(33px,4vw,52px)/1.04 "Cormorant Garamond",serif}
.community-threshold>p:not(.step):not(.community-message){max-width:680px;margin:0 auto;color:rgba(244,236,223,.76);font:400 20px/1.55 "Cormorant Garamond",serif}
.community-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px;text-align:left}
.community-link{display:flex;min-height:190px;padding:27px;flex-direction:column;justify-content:flex-end;border:1px solid rgba(244,236,223,.16);background:linear-gradient(145deg,rgba(14,34,57,.82),rgba(4,13,24,.94));color:var(--ivory);text-decoration:none;transition:transform .45s ease,border-color .45s ease,box-shadow .45s ease}
.community-link:hover,.community-link:focus-visible{transform:translateY(-6px);border-color:rgba(239,201,128,.54);box-shadow:0 24px 60px rgba(0,0,0,.33);outline:none}
.community-link-primary{background:radial-gradient(circle at 82% 18%,rgba(78,164,135,.18),transparent 28%),linear-gradient(145deg,rgba(13,47,54,.86),rgba(4,17,27,.96))}
.community-link small{margin-bottom:auto;color:var(--gold-2);font:500 9px/1 Inter,sans-serif;letter-spacing:.2em}
.community-link strong{font:500 23px/1.08 "Cormorant Garamond",serif}
.community-link span{margin-top:13px;color:rgba(244,236,223,.66);font:300 11px/1.5 Inter,sans-serif}
.community-link.is-pending{opacity:.64}
.community-message{min-height:20px;margin:18px 0 0!important;color:var(--gold-2)!important;font:400 12px/1.5 Inter,sans-serif!important}

body[data-route="pasado"] .answer-screen{background:radial-gradient(circle at 50% 38%,rgba(142,75,83,.22),transparent 31%),linear-gradient(155deg,#05060c,#1a101e 58%,#09070d)}
body[data-route="familia"] .answer-screen{background:radial-gradient(circle at 50% 38%,rgba(165,139,73,.19),transparent 31%),radial-gradient(circle at 18% 72%,rgba(38,119,115,.16),transparent 30%),linear-gradient(155deg,#031013,#082426 58%,#061311)}
body[data-route="comienzo"] .answer-screen{background:radial-gradient(circle at 50% 42%,rgba(215,168,79,.22),transparent 30%),radial-gradient(circle at 18% 24%,rgba(44,132,156,.2),transparent 31%),linear-gradient(155deg,#03121b,#0b2934 58%,#251c18)}

@media (max-width:1180px){
  .path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path-card{min-height:430px}
}
@media (max-width:720px){
  #question .question-panel{padding-inline:0}
  .path-grid{grid-template-columns:1fr;gap:15px}
  .path-grid:hover .path-card:not(:hover){opacity:1;filter:none}
  .path-card{min-height:390px;padding:28px}
  .path-card__chapter{left:28px}
  .path-card strong{font-size:32px;max-width:18ch}
  .question-panel h2{font-size:clamp(43px,13vw,64px)}
  .reflection-image{min-height:470px}
}
@media (max-width:760px){
  .choice-row,.community-actions{grid-template-columns:1fr}
  .choice-card{min-height:120px}
  .question-writing{padding:22px}
  .oracle-panel,.letter-shell{padding:34px 23px!important}
  .letter-shell::before{inset:10px}
  .traveler-question{margin-bottom:28px}
  .short-answer,.long-answer{text-align:left}
  .short-answer p:first-child::first-letter{font-size:54px}
  .long-answer p:first-child::first-letter{font-size:61px}
  .community-threshold{margin:58px 0 42px;padding:34px 20px}
  .community-link{min-height:175px}
}
@media (prefers-reduced-motion:reduce){
  .cinematic-transition,.cinematic-transition span,.path-card,.path-card::before,.path-vfx,.question-glow,.question-dust,.route-fragments span,.route-veil,.route-orb,.answer-ring,.answer-light{animation:none!important;transition:none!important}
}

/* El modo de revisión es una ayuda de escritorio y no interrumpe la experiencia móvil. */
@media (max-width:760px){
  .review-bar{display:none!important}
  .screen{padding-bottom:54px}
}

/* =========================================================
   V2.0 · RECORRIDO VARIABLE, PORTADA RESPONSIVE Y CONSTELACIÓN
   ========================================================= */

/* La marca y el cartel siempre caben completos en la primera pantalla. */
.hero{
  isolation:isolate;
  background:
    radial-gradient(circle at 78% 28%,rgba(44,89,148,.24),transparent 30%),
    radial-gradient(ellipse at 72% 84%,rgba(215,168,79,.13),transparent 30%),
    linear-gradient(118deg,#020812 0%,#061426 48%,#020711 100%);
}
.hero-emblem{
  position:absolute;
  z-index:1;
  right:clamp(18px,4vw,72px);
  top:50%;
  width:min(48vw,720px);
  height:min(88svh,900px);
  transform:translateY(-50%);
  pointer-events:none;
  filter:drop-shadow(0 34px 80px rgba(0,0,0,.48));
}
.hero-emblem::before{
  content:"";
  position:absolute;
  inset:5% 7%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(88,131,190,.16),transparent 65%);
  filter:blur(24px);
}
.hero-emblem img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.hero-overlay{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(2,8,14,.97) 0%,rgba(2,8,14,.9) 37%,rgba(2,8,14,.48) 60%,rgba(2,8,14,.08) 100%),
    linear-gradient(0deg,rgba(2,8,14,.72),transparent 58%);
}
.hero-content{
  width:min(48vw,720px);
  max-width:720px;
}
.hero-brand-name{
  margin:0 0 20px;
  color:var(--ivory);
  font:500 clamp(22px,2.3vw,34px)/1 "Cormorant Garamond",serif;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.journey-signature{
  max-width:500px;
  min-height:20px;
  margin:0 0 27px;
  color:rgba(244,236,223,.54);
  font:italic 400 clamp(16px,1.4vw,20px)/1.5 "Cormorant Garamond",serif;
}
.brand{min-width:0}
.brand-copy{min-width:0;white-space:nowrap}

/* La escena posterior ya no comparte una composición visual dominante. */
#reflection{
  transition:background 1s ease;
}
#reflection .split{
  border-color:rgba(239,201,128,.24);
  background:#020812;
}
.reflection-image{
  min-height:660px;
  box-shadow:inset -1px 0 rgba(239,201,128,.13);
}
.reflection-image .route-orb,
.reflection-image .route-rings,
.reflection-image .route-sky,
.reflection-image .route-mountains,
.reflection-image .route-path,
.reflection-image .route-tree,
.reflection-image .route-fragments,
.reflection-image .route-veil,
.reflection-image .route-traveler,
.reflection-image .route-lantern{
  transition:opacity .75s ease,transform .9s ease,filter .9s ease,background .9s ease;
}

/* BRUMA: paisaje abierto, horizonte difuso y una única luz remota. */
body[data-route="busqueda"] #reflection{
  background:radial-gradient(circle at 16% 20%,rgba(76,91,166,.22),transparent 30%),linear-gradient(145deg,#020711,#07172d 55%,#080a1b);
}
body[data-route="busqueda"] .reflection-image{
  background:
    linear-gradient(180deg,transparent 0 48%,rgba(8,16,37,.38) 67%,rgba(4,8,20,.96) 100%),
    radial-gradient(ellipse at 22% 48%,rgba(118,137,199,.34),transparent 34%),
    radial-gradient(ellipse at 72% 39%,rgba(59,111,151,.25),transparent 38%),
    linear-gradient(180deg,#040817,#0a1931 62%,#070819);
}
body[data-route="busqueda"] .reflection-image::before{
  opacity:.3;
  background-size:112px 112px,197px 197px;
  filter:blur(.35px);
}
body[data-route="busqueda"] .route-tree,
body[data-route="busqueda"] .route-fragments{display:none}
body[data-route="busqueda"] .route-mountains{
  height:33%;
  opacity:.28;
  filter:blur(4px);
  transform:scale(1.12);
}
body[data-route="busqueda"] .route-path{
  width:9%;height:43%;bottom:-4%;opacity:.38;
  filter:blur(1.2px);
}
body[data-route="busqueda"] .route-traveler{left:39%;bottom:17%;transform:translateX(-50%) scale(.82)}
body[data-route="busqueda"] .route-lantern{right:18%;bottom:31%;width:15px;height:15px;border-radius:50%}
body[data-route="busqueda"] .route-veil{display:block;opacity:.9;inset:-22%;filter:blur(24px)}

/* ECLIPSE: cámara oscura, sol velado y fragmentos suspendidos. */
body[data-route="pasado"] #reflection{
  background:radial-gradient(circle at 82% 16%,rgba(137,65,78,.2),transparent 28%),linear-gradient(145deg,#05050a,#1a0d18 54%,#08060b);
}
body[data-route="pasado"] .reflection-image{
  background:
    radial-gradient(circle at 70% 26%,#030308 0 15%,rgba(230,165,105,.78) 15.4% 16.1%,rgba(139,69,76,.3) 17%,transparent 27%),
    linear-gradient(125deg,transparent 0 47%,rgba(222,151,111,.12) 48%,transparent 49%),
    radial-gradient(circle at 24% 60%,rgba(111,45,72,.34),transparent 35%),
    linear-gradient(180deg,#06060d,#190d19 62%,#08060a);
}
body[data-route="pasado"] .reflection-image::before{opacity:.13;background-size:170px 170px,253px 253px}
body[data-route="pasado"] .route-tree,
body[data-route="pasado"] .route-veil{display:none}
body[data-route="pasado"] .route-fragments{display:block;opacity:1}
body[data-route="pasado"] .route-sky{opacity:.16;filter:sepia(.7) hue-rotate(315deg)}
body[data-route="pasado"] .route-mountains{height:24%;opacity:.5;filter:saturate(.55)}
body[data-route="pasado"] .route-path{
  left:28%;width:7%;height:36%;bottom:-3%;opacity:.5;transform:translateX(-50%) perspective(300px) rotateX(26deg) rotate(8deg);
}
body[data-route="pasado"] .route-traveler{left:27%;bottom:14%}
body[data-route="pasado"] .route-lantern{right:64%;bottom:25%;width:18px;height:27px}

/* RAÍCES: el paisaje desaparece y el árbol ocupa toda la escena. */
body[data-route="familia"] #reflection{
  background:radial-gradient(circle at 13% 20%,rgba(36,130,127,.19),transparent 30%),linear-gradient(145deg,#020c0e,#082622 55%,#06120f);
}
body[data-route="familia"] .reflection-image{
  background:
    radial-gradient(circle at 50% 25%,rgba(239,201,128,.24),transparent 24%),
    radial-gradient(ellipse at 50% 100%,rgba(30,125,112,.24),transparent 52%),
    linear-gradient(180deg,#020e12,#092923 61%,#04110d);
}
body[data-route="familia"] .reflection-image::before{opacity:.38;background-size:139px 139px,221px 221px}
body[data-route="familia"] .route-orb,
body[data-route="familia"] .route-rings,
body[data-route="familia"] .route-fragments,
body[data-route="familia"] .route-veil,
body[data-route="familia"] .route-mountains,
body[data-route="familia"] .route-path,
body[data-route="familia"] .route-lantern{display:none}
body[data-route="familia"] .route-tree{
  display:block;
  left:8%;right:8%;top:5%;bottom:4%;
  transform:scale(1.16);
  filter:drop-shadow(0 0 30px rgba(215,168,79,.24));
}
body[data-route="familia"] .route-tree::before{width:5px;bottom:31%}
body[data-route="familia"] .route-tree::after{inset:0 0 25%;opacity:1}
body[data-route="familia"] .route-tree span{left:0;right:0;height:43%;opacity:1}
body[data-route="familia"] .route-traveler{left:72%;bottom:11%;transform:translateX(-50%) scale(.78)}
body[data-route="familia"] .route-sky{opacity:.35;transform:scale(1.08)}

/* PRIMER CIELO: portal luminoso, horizonte abierto y camino frontal. */
body[data-route="comienzo"] #reflection{
  background:radial-gradient(ellipse at 18% 82%,rgba(215,168,79,.2),transparent 32%),linear-gradient(145deg,#031019,#08303a 55%,#2a1e17);
}
body[data-route="comienzo"] .reflection-image{
  background:
    linear-gradient(180deg,transparent 0 58%,rgba(255,191,105,.18) 70%,rgba(38,25,20,.74) 100%),
    radial-gradient(ellipse at 50% 75%,rgba(255,216,143,.72),transparent 25%),
    radial-gradient(circle at 18% 24%,rgba(54,147,167,.33),transparent 34%),
    linear-gradient(180deg,#03131e,#0b3540 61%,#34231b);
}
body[data-route="comienzo"] .reflection-image::before{opacity:.62;background-size:82px 82px,137px 137px}
body[data-route="comienzo"] .route-tree,
body[data-route="comienzo"] .route-fragments,
body[data-route="comienzo"] .route-veil{display:none}
body[data-route="comienzo"] .route-orb{
  left:50%;top:11%;width:48%;height:63%;transform:translateX(-50%);
  border:1px solid rgba(255,218,154,.55);border-bottom:0;border-radius:50% 50% 0 0;
  background:radial-gradient(ellipse at 50% 95%,rgba(255,219,149,.2),transparent 46%);
  box-shadow:inset 0 0 90px rgba(76,189,192,.14),0 0 65px rgba(239,201,128,.19);
}
body[data-route="comienzo"] .route-rings{left:50%;top:18%;width:34%;height:49%;transform:translateX(-50%)}
body[data-route="comienzo"] .route-mountains{height:38%;opacity:.66}
body[data-route="comienzo"] .route-path{width:21%;height:54%;opacity:1}
body[data-route="comienzo"] .route-traveler{left:50%;bottom:17%;transform:translateX(-50%) scale(.88)}
body[data-route="comienzo"] .route-lantern{right:14%;bottom:16%}

.story-bridge{
  max-width:690px!important;
  margin:38px 0 30px!important;
  padding:24px 0 0;
  border-top:1px solid rgba(239,201,128,.25);
  color:rgba(244,236,223,.67)!important;
  font:italic 400 clamp(18px,1.8vw,22px)/1.55 "Cormorant Garamond",serif!important;
}

/* La estrella es ahora una palabra-luz nacida de la historia. */
.constellation-panel{width:min(1040px,100%)}
.constellation-panel h2{max-width:860px;margin-inline:auto}
.constellation-panel .lead{max-width:720px;margin-inline:auto}
.star-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,2vw,24px);
  max-width:920px;
  margin:50px auto 38px;
}
.star-button{
  min-height:190px;
  padding:25px 14px;
  border:1px solid rgba(239,201,128,.15);
  background:linear-gradient(180deg,rgba(12,30,53,.48),rgba(3,10,20,.72));
  transition:transform .45s ease,border-color .45s ease,background .45s ease,box-shadow .45s ease;
}
.star-button:hover,.star-button.selected{
  transform:translateY(-7px);
  border-color:rgba(239,201,128,.55);
  background:linear-gradient(180deg,rgba(24,51,83,.6),rgba(5,15,27,.9));
  box-shadow:0 25px 60px rgba(0,0,0,.3);
}
.star-button .orb{width:76px;height:76px}
.star-button label{margin-top:22px;color:var(--ivory);font:500 17px/1.2 "Cormorant Garamond",serif;letter-spacing:.08em;text-transform:uppercase}
.star-message{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:690px;
  margin:0 auto 28px;
  padding:25px 30px;
  border-top:1px solid rgba(215,168,79,.24);
  border-bottom:1px solid rgba(215,168,79,.24);
}
.star-message strong{color:var(--gold-2);font:500 24px/1.1 "Cormorant Garamond",serif;letter-spacing:.08em;text-transform:uppercase}
.star-message span{color:rgba(244,236,223,.76);font:400 20px/1.5 "Cormorant Garamond",serif}
.carried-light{
  display:inline-block;
  margin:22px auto 10px;
  padding:11px 18px;
  border:1px solid rgba(215,168,79,.28);
  border-radius:999px;
  color:rgba(244,236,223,.72);
  background:rgba(215,168,79,.06);
  font:400 15px/1.4 Inter,sans-serif;
}
.carried-light strong{color:var(--gold-2);font-weight:500}

body[data-route="pasado"] #stars{background:radial-gradient(circle at 50% 36%,rgba(151,77,84,.2),transparent 31%),linear-gradient(155deg,#05060c,#190d18 58%,#08060c)}
body[data-route="familia"] #stars{background:radial-gradient(circle at 50% 36%,rgba(164,141,77,.19),transparent 31%),radial-gradient(circle at 15% 70%,rgba(39,124,114,.15),transparent 31%),linear-gradient(155deg,#020e11,#082620 58%,#05110e)}
body[data-route="comienzo"] #stars{background:radial-gradient(circle at 50% 40%,rgba(215,168,79,.24),transparent 31%),radial-gradient(circle at 17% 23%,rgba(46,139,157,.18),transparent 31%),linear-gradient(155deg,#03121b,#0a3038 58%,#291e18)}

@media (max-width:1020px){
  .hero-content{width:min(57vw,650px)}
  .hero-emblem{right:-5vw;width:54vw;opacity:.78}
  .hero-overlay{background:linear-gradient(90deg,rgba(2,8,14,.98) 0%,rgba(2,8,14,.9) 46%,rgba(2,8,14,.38) 76%,rgba(2,8,14,.12))}
}

@media (max-width:760px){
  .topbar{padding:12px 14px}
  .brand{gap:9px}
  .brand-mark{width:36px;height:36px;flex:0 0 36px}
  .brand-copy{letter-spacing:.17em}
  .brand-copy strong{font-size:14px}
  .brand-copy small{font-size:10px;margin-top:5px}
  .ghost-button{font-size:9px;letter-spacing:.12em;padding:8px 0}
  .hero{
    justify-content:flex-start;
    align-items:flex-end;
    min-height:100svh;
    padding:104px 22px 72px;
  }
  .hero-emblem{
    top:5.5rem;
    right:50%;
    width:min(94vw,560px);
    height:61svh;
    transform:translateX(50%);
    opacity:.34;
    filter:drop-shadow(0 20px 45px rgba(0,0,0,.38));
  }
  .hero-emblem img{object-position:center top}
  .hero-overlay{
    background:
      linear-gradient(0deg,rgba(2,8,14,.98) 0%,rgba(2,8,14,.91) 38%,rgba(2,8,14,.35) 76%,rgba(2,8,14,.23) 100%),
      linear-gradient(90deg,rgba(2,8,14,.72),rgba(2,8,14,.18));
  }
  .hero-content{width:100%;max-width:620px}
  .hero-brand-name{font-size:22px;margin-bottom:14px;letter-spacing:.15em}
  .hero h1{font-size:clamp(48px,14vw,69px);max-width:8.5ch;margin:12px 0}
  .accent-line{margin-bottom:22px}
  .hero-tagline{max-width:29ch;font-size:19px}
  .journey-signature{font-size:16px;margin-bottom:22px}
  .scroll-hint{display:none}

  #reflection{align-items:flex-start;padding-inline:16px;overflow:visible}
  #reflection .split{grid-template-columns:1fr;width:100%}
  .reflection-image{min-height:450px;order:0}
  .reflection-copy{order:1;padding:38px 25px}
  body[data-route="familia"] .route-tree{transform:scale(1.04)}
  body[data-route="comienzo"] .route-orb{width:60%}

  .story-card{padding:40px 25px}
  .story-bridge{margin-top:28px!important}
  .star-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}
  .star-button{min-height:155px;padding:20px 10px}
  .star-button .orb{width:62px;height:62px}
  .star-button label{font-size:15px;margin-top:16px}
  .star-message{padding:22px 12px}
}

@media (max-width:390px){
  .brand-copy strong{font-size:13px}
  .brand-copy small{font-size:9px}
  .ghost-button{font-size:8px}
  .hero h1{font-size:47px}
  .hero-tagline{font-size:18px}
  .reflection-image{min-height:405px}
}

/* Evita que cualquier bloque alto quede recortado por el centrado vertical. */
.screen{overflow-x:hidden;overflow-y:auto;align-items:safe center}
#reflection,#story{align-items:flex-start;overflow-y:auto}
#reflection .split,#story .story-card{margin-inline:auto}
.reflection-copy h2{font-size:clamp(40px,4vw,62px);line-height:.98}
@media (max-width:760px){.reflection-copy h2{font-size:clamp(39px,11vw,56px)}}

/* =========================================================
   V2.1 · CORRECCIONES DE ESTABILIDAD Y LECTURA
   ========================================================= */

/* Transición cinematográfica estable: evita el enorme escalado que podía
   pixelar o cubrir la primera escena de respuesta en algunos dispositivos. */
.cinematic-transition{
  visibility:hidden;
  opacity:0;
  overflow:hidden;
  background:rgba(2,6,13,.96);
  transition:opacity .34s ease,visibility 0s linear .34s;
}
.cinematic-transition span{
  left:50%;top:50%;
  width:140vmax;height:140vmax;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(239,201,128,.72) 0,
    rgba(82,117,164,.24) 17%,
    rgba(8,22,42,.82) 45%,
    rgba(2,6,13,.98) 72%);
  box-shadow:none;
  filter:blur(12px);
  transform:translate(-50%,-50%) scale(.05);
  transition:transform .62s cubic-bezier(.2,.75,.18,1),opacity .42s ease;
  opacity:.35;
}
.cinematic-transition.active{
  visibility:visible;
  opacity:1;
  transition:opacity .34s ease,visibility 0s;
}
.cinematic-transition.active span{
  transform:translate(-50%,-50%) scale(1);
  box-shadow:none;
  opacity:1;
}

/* La historia forma parte del desplazamiento normal de la página. Antes
   existían dos desplazamientos superpuestos y el final podía quedar oculto. */
.story-screen{
  align-items:flex-start;
  justify-content:center;
  overflow:visible;
  min-height:100svh;
}
.story-card{
  margin:0 auto;
}

/* La escena que responde a la primera elección conserva una proporción
   legible y estable en escritorio, tablet y móvil. */
.reflection-image{
  min-height:clamp(440px,66svh,720px);
}
@media (max-width:900px){
  .reflection-image{min-height:clamp(400px,58svh,560px)}
}
@media (max-width:560px){
  .story-screen{padding-bottom:72px}
  .story-card{padding-bottom:52px}
  .reflection-image{min-height:460px}
}
.story-screen.active{
  display:block;
  overflow:visible;
}
.story-screen.active{
  overflow:clip;
}
/* Desplazamiento garantizado dentro de la pantalla del relato. */
.story-screen.active{
  display:flex;
  height:100svh;
  min-height:100svh;
  overflow-x:hidden;
  overflow-y:auto;
  align-items:flex-start;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}

/* V2.3 — Ilustraciones reales por camino en la segunda pantalla */
.reflection-image{
  position:relative;
  overflow:hidden;
  min-height:560px;
  background-color:#07111f;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.reflection-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(180deg, rgba(5,10,20,.04) 0%, rgba(5,10,20,.08) 28%, rgba(2,8,16,.22) 55%, rgba(2,8,16,.54) 100%);
  pointer-events:none;
}
.reflection-image .route-orb,
.reflection-image .route-rings,
.reflection-image .route-sky,
.reflection-image .route-mountains,
.reflection-image .route-path,
.reflection-image .route-tree,
.reflection-image .route-fragments,
.reflection-image .route-veil,
.reflection-image .route-traveler,
.reflection-image .route-lantern{
  display:none!important;
}
@media (max-width: 920px){
  .reflection-image{min-height:420px}
}