@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root{color-scheme:light;--bg:#f8f3ef;--ink:#38252b;--muted:#806d73;--burgundy:#852a40;--wine:#6b2638;--blush:#edc7c6;--gold:#b99060;--line:rgba(113,66,75,.14);--glass:rgba(255,253,251,.63);--shadow:0 27px 74px rgba(90,49,61,.11);--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans','Manrope',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 12% 12%,#ffe8e6 0%,transparent 41%),radial-gradient(ellipse at 93% 83%,#f4e1d9 0%,transparent 37%),linear-gradient(125deg,#faf6f3 0%,#f7f1ec 44%,#f9f4ef 100%);font-family:var(--sans);color:var(--ink);overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,video:focus-visible{outline:3px solid var(--wine);outline-offset:4px}img{display:block;width:100%;max-width:100%}h1,h2,h3,p{margin-top:0}[hidden]{display:none!important}em{font-weight:400;color:var(--burgundy)}
.ambient-shape{position:fixed;z-index:-1;border-radius:50%;filter:blur(62px);pointer-events:none;opacity:.34}.ambient-shape-one{width:320px;height:320px;background:#f1c8c8;left:-160px;top:31%}.ambient-shape-two{width:400px;height:400px;background:#e8c2b7;right:-210px;bottom:-90px}.petals{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden}.floating-petal{position:absolute;width:var(--size);height:calc(var(--size)*1.4);left:var(--left);top:-5vh;border-radius:100% 0 100% 0;background:linear-gradient(145deg,#df8591,#b44961);opacity:0;transform-origin:center;animation:petal-drift var(--time) ease-in var(--delay) 1 forwards}@keyframes petal-drift{0%{transform:translateY(-5vh) rotate(0);opacity:0}12%{opacity:.5}78%{opacity:.5}100%{transform:translateY(109vh) translateX(65px) rotate(620deg);opacity:0}}
.site-header{height:88px;padding:16px clamp(22px,6vw,96px);display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:13px;min-width:0}.brand-mark{font-family:var(--serif);font-weight:500;font-size:25px;letter-spacing:-2px;color:var(--wine);width:54px;height:54px;border:1px solid rgba(130,70,80,.3);display:grid;place-items:center;border-radius:50%;position:relative}.brand-mark-dot{position:absolute;bottom:12px;right:7px;color:var(--gold)}.brand-copy{font-size:10px;letter-spacing:2.7px;font-weight:700;line-height:1.7;display:grid;white-space:nowrap}.brand-copy span{font-size:9px;letter-spacing:2.8px;color:var(--gold)}.header-actions{display:flex;align-items:center;gap:20px}.step-badge{font-weight:700;color:var(--muted);font-size:11px;letter-spacing:1.8px;white-space:nowrap}.music-toggle{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.55);border:1px solid rgba(120,61,77,.16);border-radius:100px;padding:10px 16px;color:var(--wine);font-size:12px;font-weight:700;backdrop-filter:blur(18px)}.music-toggle svg{height:17px;width:17px}.music-toggle.is-paused svg path{d:path('M9 7 L9 17 L17 12 Z')} .music-toggle:disabled{opacity:.68;cursor:not-allowed}
.site-footer{height:52px;display:flex;align-items:center;justify-content:center;gap:16px;color:#a88b89;letter-spacing:2.4px;font-size:9px;font-weight:700;text-align:center;padding:12px}.footer-star{color:var(--gold);font-size:13px}.scene{min-height:calc(100svh - 140px);padding:12px clamp(20px,6vw,96px) 36px;position:relative}.scene:focus{outline:none}.scene-entered .reveal-entrance{animation:scene-rise .7s both}.glass{background:var(--glass);border:1px solid rgba(255,255,255,.86);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:var(--shadow);border-radius:26px}.eyebrow{color:var(--wine);letter-spacing:3px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:12px}.eyebrow-line{width:22px;height:1px;background:var(--gold)}.gold-eyebrow{color:#ac845a}.btn{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:1px solid transparent;border-radius:100px;padding:15px 26px;min-height:55px;text-align:center;font-size:13px;letter-spacing:.3px;font-weight:700;transition:transform .25s,background .25s,box-shadow .25s}.btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(125deg,#963b51,#68273a);color:#fff;box-shadow:0 13px 30px rgba(110,40,60,.23)}.btn-primary:hover{background:linear-gradient(125deg,#ad5262,#742739);box-shadow:0 15px 32px rgba(110,40,60,.28)}.btn-soft{background:rgba(255,250,246,.78);border-color:rgba(110,40,60,.13);color:var(--wine)}.btn-large{min-width:215px;padding:18px 28px}.btn-arrow{font-size:19px;font-weight:400}.back-link{padding:12px;border:0;background:transparent;color:#8d7777;font-size:12px;font-weight:700;letter-spacing:.5px;transition:color .2s}.back-link:hover{color:var(--wine)}.scene-shell{width:min(100%,1050px);margin:0 auto}.scene-shell-wide{max-width:1010px}.scene-topline{display:flex;align-items:center;gap:17px;color:#ac9695;font-size:10px;font-weight:700;letter-spacing:2.2px;margin:17px auto 29px;white-space:nowrap}.scene-topline-line{height:1px;background:linear-gradient(90deg,rgba(150,94,98,.22),rgba(150,94,98,.04));flex:1}.center-heading{text-align:center;margin:0 auto 26px}.center-heading h2{font:500 clamp(37px,5vw,59px)/1.18 var(--serif);letter-spacing:-1px;margin:12px 0 0}
.scene-intro{display:grid;grid-template-columns:1fr .98fr;align-items:center;gap:clamp(20px,6vw,90px);max-width:1450px;margin:0 auto;padding-bottom:70px}.intro-copy{padding:40px 0 50px max(0px,calc((100vw - 1300px)/5));position:relative;z-index:3}.intro-copy h1{font:500 clamp(63px,8vw,132px)/1 var(--serif);letter-spacing:-5px;margin:30px 0 29px;white-space:nowrap}.intro-copy h1 em{display:block;font-size:.92em}.title-sparkle{font-size:.22em;color:var(--gold);vertical-align:top;display:inline-block;margin-top:12px;margin-left:9px}.intro-quote{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);line-height:1.4;margin-bottom:10px;max-width:510px}.intro-muted{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:29px}.tap-note{font-size:11px;color:var(--muted);margin-top:20px;display:flex;align-items:center;gap:7px}.note-icon{font-size:17px;color:var(--gold)}.intro-art{position:relative;width:min(100%,570px);justify-self:end;margin:0 auto}.intro-art-back{position:absolute;inset:7% -5% -5% 6%;border:1px solid rgba(182,139,106,.48);border-radius:46% 46% 13px 13px;transform:rotate(5deg)}.intro-art-frame{height:min(64vh,625px);min-height:370px;border-radius:46% 46% 13px 13px;overflow:hidden;position:relative;box-shadow:0 22px 65px rgba(95,50,57,.2);border:8px solid rgba(255,255,255,.72)}.intro-art-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(80,39,43,.16))}.intro-art-frame img{height:100%;object-fit:cover;object-position:center;transition:transform 2s}.intro-art-frame:hover img{transform:scale(1.055)}.intro-art-seal{position:absolute;right:-38px;bottom:16%;border-radius:50%;background:rgba(255,250,242,.93);border:1px solid #dec4a1;box-shadow:0 13px 29px rgba(80,45,45,.16);height:110px;width:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--wine);font:500 12px/1.6 var(--serif);letter-spacing:1.5px;transform:rotate(9deg)}.intro-art-seal span{font-size:16px;color:var(--gold)}.intro-art-stroke{position:absolute;width:60px;height:60px;border:1px solid rgba(186,139,95,.5);border-radius:50%;z-index:-1}.intro-art-stroke-one{top:-17px;left:-21px}.intro-art-stroke-two{bottom:-30px;left:12%;width:90px;height:90px}.intro-bottom{position:absolute;bottom:17px;left:clamp(20px,6vw,96px);font-size:10px;letter-spacing:2.2px;color:#a6948d}
.feature-card{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:500px}.feature-image{position:relative;min-height:420px;overflow:hidden}.feature-image img{height:100%;width:100%;object-fit:cover}.image-drift img{animation:image-float 14s ease-in-out infinite alternate}.feature-copy{padding:clamp(25px,5vw,76px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.feature-copy h2,.ending-copy h2{font:500 clamp(42px,5.6vw,76px)/1.13 var(--serif);margin:21px 0}.feature-copy p,.ending-copy p{font-size:15px;line-height:1.9;color:var(--muted);max-width:355px;margin-bottom:27px}.feature-card+.back-link{margin-top:18px}
.twocard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px}.picture-card{padding:12px;transition:transform .4s}.picture-card:hover{transform:translateY(-5px)}.picture-card-image{border-radius:18px;overflow:hidden;height:clamp(290px,32vw,390px)}.picture-card-image img{height:100%;object-fit:cover;transition:transform 1s}.picture-card:hover .picture-card-image img{transform:scale(1.055)}.picture-card-foot{padding:18px 12px 10px;display:flex;justify-content:space-between;align-items:center;gap:16px}.picture-card-foot h3{font:500 clamp(24px,2.7vw,32px)/1.1 var(--serif);margin:6px 0 0}.mini-label{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:700}.picture-ornament{color:var(--burgundy);font:31px var(--serif);margin-right:7px}.scene-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px}
.theater{padding:12px;overflow:hidden}.video-frame{position:relative;background:#211721;border-radius:18px;overflow:hidden;aspect-ratio:3/2;max-height:min(61vh,630px)}.video-frame video{display:block;height:100%;width:100%;object-fit:contain;background:#171318}.theater-footer{padding:16px 16px 5px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.8px}.theater-live{color:var(--wine);display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:#9b4656}.video-note{text-align:center;color:var(--muted);font-size:12px;margin:15px auto 0}
.letter-shell{max-width:840px}.sealed-letter{max-width:680px;position:relative;margin:auto;overflow:hidden;padding:12px}.sealed-letter>img{width:100%;aspect-ratio:1.55;object-fit:cover;border-radius:18px}.sealed-letter-overlay{position:absolute;inset:12px;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:17px;padding-bottom:32px;background:linear-gradient(180deg,transparent 33%,rgba(43,24,26,.64));border-radius:18px}.seal-circle{height:46px;width:46px;display:grid;place-items:center;border-radius:50%;color:#fff;border:1px solid rgba(255,255,255,.7);font:500 20px var(--serif);letter-spacing:-1px}.letter-paper{padding:clamp(25px,7vw,75px);background:#fffaf4;border:1px solid #ecddcd;box-shadow:0 24px 70px rgba(93,50,48,.12);animation:scene-rise .7s both}.letter-paper-top,.letter-paper-bottom{display:flex;justify-content:space-between;gap:12px;color:#af8f67;font-size:10px;font-weight:700;letter-spacing:2px}.letter-paper h3{text-align:center;font:500 clamp(34px,5vw,53px) var(--serif);margin:38px 0 4px}.letter-subtitle{text-align:center;color:var(--muted);font:italic 17px var(--serif);margin-bottom:38px}.letter-body{max-width:640px;margin:0 auto;color:#614c4d;font:16px/1.95 Georgia,serif}.letter-body p{margin-bottom:21px}.letter-salutation,.letter-signature{color:var(--wine)}.letter-paper-bottom{margin-top:31px;border-top:1px solid #ecdcca;padding-top:24px;justify-content:center}.letter-paper-bottom span{font-size:16px}
.ending-card{display:grid;grid-template-columns:.95fr 1fr;overflow:hidden;min-height:500px}.ending-image{overflow:hidden}.ending-image img{height:100%;object-fit:cover;object-position:center}.ending-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(25px,5vw,65px)}.ending-copy h2{margin:17px 0}.ending-actions{display:flex;flex-wrap:wrap;gap:11px}.ending-actions .btn{font-size:12px;min-height:46px;padding:13px 21px}.restart-experience{display:block;margin:18px auto 0}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:80;background:#5c2d3b;color:white;border-radius:14px;padding:13px 19px;font-size:12px;box-shadow:0 14px 35px rgba(50,20,25,.28);max-width:90vw;text-align:center}
.entrance{animation:scene-rise .9s both}.intro-art.entrance{animation-delay:.12s}@keyframes scene-rise{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}@keyframes image-float{0%{transform:scale(1)}100%{transform:scale(1.065)}}
@media(max-width:1040px){.scene-intro{gap:30px}.intro-copy h1{font-size:clamp(62px,8vw,102px)}.intro-art-seal{right:-20px}.intro-art-frame{height:min(55vh,510px)}.feature-copy{padding:30px}.scene{min-height:calc(100svh - 140px)}}
@media(max-width:720px){.site-header{height:74px;padding:10px 18px}.brand{gap:9px}.brand-mark{width:43px;height:43px;font-size:21px}.brand-copy{font-size:8px;letter-spacing:1.5px}.brand-copy span{font-size:8px;letter-spacing:1.1px}.header-actions{gap:7px}.step-badge{font-size:8px;letter-spacing:.6px}.music-toggle{padding:9px;border-radius:50%;width:39px;height:39px;justify-content:center}.music-toggle span{display:none}.music-toggle svg{flex:none}.scene{padding:10px 18px 35px;min-height:calc(100svh - 123px)}.site-footer{height:49px;font-size:8px;letter-spacing:1px}.scene-intro{display:flex;flex-direction:column;gap:17px;padding-top:8px;padding-bottom:70px}.intro-copy{padding:13px 8px 0;order:2;text-align:center}.intro-copy h1{font-size:clamp(57px,13.5vw,86px);letter-spacing:-3px;margin:13px 0 15px}.intro-copy h1 em{display:inline;font-size:1em}.title-sparkle{font-size:.17em;margin-top:0}.intro-quote{font-size:19px;margin-bottom:6px}.intro-muted{font-size:12px;margin-bottom:17px}.intro-art{order:1;width:min(100%,350px);max-height:35svh}.intro-art-frame{height:31svh;min-height:210px;max-height:310px;border-width:5px}.intro-art-seal{height:65px;width:65px;right:-8px;bottom:13%;font-size:8px;line-height:1.45}.intro-art-seal span{font-size:11px}.intro-art-stroke-two{bottom:-6px;left:5%;width:45px;height:45px}.intro-bottom{position:relative;bottom:auto;left:auto;order:3;font-size:8px;letter-spacing:1px;text-align:center;margin-top:14px}.tap-note{justify-content:center;font-size:10px;margin-top:15px}.eyebrow{font-size:9px;letter-spacing:2px}.feature-card,.ending-card{grid-template-columns:1fr}.feature-image{min-height:0;height:33svh;max-height:330px}.feature-copy{padding:30px 26px 28px}.feature-copy h2,.ending-copy h2{font-size:clamp(43px,10vw,57px);margin:12px 0}.feature-copy p{font-size:13px;margin-bottom:19px}.scene-topline{margin:10px auto 20px;gap:9px;letter-spacing:1px;font-size:8px}.twocard-grid{grid-template-columns:1fr;gap:13px}.center-heading{margin-bottom:20px}.center-heading h2{font-size:clamp(36px,9vw,46px)}.picture-card{display:grid;grid-template-columns:42% 1fr;min-height:190px;align-items:stretch;padding:8px}.picture-card-image{height:190px;max-width:none;border-radius:14px}.picture-card-foot{padding:15px;align-items:flex-start;flex-direction:column;justify-content:center}.picture-card-foot h3{font-size:24px}.picture-ornament{font-size:25px}.scene-actions{align-items:stretch;gap:4px;margin-top:20px}.scene-actions .btn{min-height:50px;padding:12px 19px;font-size:12px}.scene-actions .back-link{text-align:left;font-size:11px;min-width:80px}.theater{padding:7px}.video-frame{border-radius:14px;max-height:none;aspect-ratio:3/2}.theater-footer{padding:14px 8px 7px;font-size:9px;letter-spacing:1px}.video-note{font-size:11px}.sealed-letter>img{aspect-ratio:1.1}.sealed-letter-overlay{padding-bottom:22px}.letter-paper{padding:27px 23px}.letter-paper h3{margin-top:24px}.letter-subtitle{margin-bottom:22px;font-size:15px}.letter-body{font-size:15px;line-height:1.8}.ending-image{height:26svh;max-height:265px}.ending-copy{padding:29px 24px}.ending-copy p{margin-bottom:18px}.ending-actions{width:100%;flex-direction:column}.ending-actions .btn{width:100%}}
@media(max-width:390px){.scene-intro{gap:9px}.intro-copy h1{font-size:55px}.intro-quote{font-size:17px}.intro-art-frame{height:27svh;min-height:175px}.intro-bottom{display:none}.picture-card-image{height:160px}.picture-card{min-height:160px}.brand-copy{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* El foco programático en los títulos no dibuja un marco rectangular. */
.scene h1:focus,.scene h2:focus{outline:none}


/* ===========================================================
   EDICION CRISTAL / VINO · Una capa de vidrio por composición.
   Mantiene las escenas independientes y la tipografía legible.
   =========================================================== */
:root{
  --glass:rgba(255,255,255,.32);
  --shadow:0 24px 65px rgba(88,32,53,.13),0 4px 17px rgba(88,32,53,.05);
}
body{
  background:
    radial-gradient(ellipse 38% 45% at 12% 47%,rgba(122,33,58,.16) 0%,transparent 95%),
    radial-gradient(ellipse 39% 48% at 92% 11%,rgba(117,27,54,.14) 0%,transparent 95%),
    radial-gradient(ellipse 45% 42% at 70% 89%,rgba(222,150,151,.24) 0%,transparent 92%),
    linear-gradient(125deg,#fcf6f2 1%,#f5eae8 52%,#fff9f5 100%);
  background-attachment:fixed;
}
.ambient-shape-one{background:#b9667d;opacity:.29;filter:blur(72px);left:-140px;top:25%}
.ambient-shape-two{background:#dd969d;opacity:.26;filter:blur(90px);right:-190px;bottom:2%}
.glass{
  background:linear-gradient(145deg,rgba(255,255,255,.49),rgba(255,249,249,.24) 67%,rgba(255,255,255,.36));
  border:1px solid rgba(255,255,255,.79);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
  backdrop-filter:blur(24px) saturate(155%);
  box-shadow:var(--shadow),inset 0 1px 1px rgba(255,255,255,.72),inset 0 -1px 0 rgba(140,78,82,.08);
}
/* El panel principal deja ver el vino difuminado de atrás. */
.scene-intro:before{
  content:"";position:absolute;top:13%;left:1%;width:55%;height:65%;border-radius:45%;
  background:radial-gradient(ellipse at 40% 45%,rgba(119,35,63,.22),rgba(188,107,120,.14) 42%,transparent 75%);
  filter:blur(24px);pointer-events:none;z-index:0;
}
.scene-intro:after{
  content:"";position:absolute;bottom:6%;right:4%;width:32%;height:40%;border-radius:50%;
  background:radial-gradient(circle,rgba(157,60,81,.19),transparent 73%);filter:blur(25px);pointer-events:none;z-index:0;
}
.glass-hero{
  position:relative;
  padding:clamp(27px,3.2vw,52px);
  border-radius:34px;
  z-index:3;
  overflow:hidden;
  background:linear-gradient(138deg,rgba(255,255,255,.60),rgba(255,244,246,.30) 76%,rgba(255,255,255,.40));
  box-shadow:0 29px 68px rgba(94,38,57,.16),inset 0 1px 1px rgba(255,255,255,.9);
}
.glass-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(117deg,rgba(255,255,255,.35),transparent 35%,transparent 70%,rgba(255,255,255,.12));
}
.glass-hero > *{position:relative;z-index:1}
.scene-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,4vw,70px)}
.intro-copy{max-width:620px}
.intro-copy h1{font-size:clamp(63px,6.6vw,100px);line-height:1.04;letter-spacing:-4px;margin:23px 0 24px}
.intro-quote{font-size:clamp(20px,2.1vw,27px);line-height:1.43}
.intro-muted{max-width:430px}
.intro-art{z-index:2}
.intro-art-frame{box-shadow:0 26px 65px rgba(103,41,56,.20);border-color:rgba(255,255,255,.8)}
.intro-art-seal{background:rgba(255,251,248,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.84)}
.btn-primary{
  background:linear-gradient(115deg,#9a435d 0%,#7b3047 54%,#63273b 100%);
  border:1px solid rgba(255,218,223,.15);
  box-shadow:0 12px 28px rgba(105,38,59,.25),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{background:linear-gradient(115deg,#ac536b,#783147)}
.btn-soft{background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.music-toggle{background:rgba(255,255,255,.37);border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 20px rgba(107,42,61,.09);backdrop-filter:blur(20px)}
.brand-mark{background:rgba(255,255,255,.28);backdrop-filter:blur(12px);border-color:rgba(137,58,78,.18)}
.feature-card{background:linear-gradient(125deg,rgba(255,255,255,.42),rgba(255,246,246,.27))}
.feature-copy{position:relative;background:linear-gradient(120deg,rgba(255,255,255,.19),rgba(255,255,255,.04))}
.picture-card{background:rgba(255,255,255,.36)}
.picture-card-foot{border-top:1px solid rgba(255,255,255,.22)}
.theater{background:rgba(255,255,255,.38)}
.ending-card{background:linear-gradient(140deg,rgba(255,255,255,.40),rgba(255,250,250,.24))}
.letter-paper{
  background:linear-gradient(150deg,rgba(255,252,246,.87),rgba(255,249,242,.76));
  border:1px solid rgba(255,255,255,.89);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 25px 70px rgba(93,50,48,.13),inset 0 1px 1px #fff;
}
@media(max-width:1040px){
  .scene-intro{gap:24px}
  .intro-copy h1{font-size:clamp(57px,7.2vw,82px)}
  .glass-hero{padding:clamp(22px,3vw,38px)}
}
@media(max-width:720px){
  .scene-intro{gap:0;padding-top:3px;padding-bottom:48px}
  .scene-intro:before{width:120%;height:48%;left:-10%;top:38%;filter:blur(31px);background:radial-gradient(ellipse at 50% 50%,rgba(133,39,68,.24),rgba(191,111,124,.12) 58%,transparent 80%)}
  .scene-intro:after{width:70%;height:30%;top:0;right:-12%}
  .intro-art{width:min(96%,350px);margin:0 auto;z-index:2}
  .intro-art-frame{height:30svh;min-height:207px;max-height:295px}
  .glass-hero{
    order:2;width:100%;max-width:440px;
    margin:-24px auto 0;
    padding:29px 20px 27px;
    border-radius:29px;
    text-align:center;z-index:4;
    background:linear-gradient(142deg,rgba(255,255,255,.67),rgba(255,249,250,.37) 75%,rgba(255,255,255,.51));
    box-shadow:0 23px 53px rgba(111,44,65,.16),inset 0 1px 0 rgba(255,255,255,.98);
  }
  .intro-copy h1{font-size:clamp(45px,11.4vw,65px);letter-spacing:-2.6px;line-height:1.05;margin:13px 0 13px}
  .intro-quote{font-size:clamp(18px,4.9vw,21px);line-height:1.38}
  .intro-muted{font-size:12px;line-height:1.55;margin-bottom:19px}
  .tap-note{margin-top:15px}
  .intro-bottom{margin-top:20px;line-height:1.6}
  .feature-card,.ending-card,.picture-card,.theater,.sealed-letter{border-radius:24px}
  .feature-copy{padding:30px 26px}
  .theater-footer{flex-wrap:wrap;gap:8px}
}
@media(max-width:390px){
  .glass-hero{padding:24px 14px}
  .intro-copy h1{font-size:clamp(43px,11vw,52px)}
  .intro-art-frame{height:27svh;min-height:185px}
}
@media(prefers-reduced-transparency:reduce){
  .glass,.glass-hero{background:rgba(255,251,250,.90)}
}

/* Los degradados del fondo ya reemplazan a los círculos fijos; así se evita
   que provoquen desplazamiento horizontal en pantallas pequeñas. */
.ambient-shape{display:none}
html,body{max-width:100%;overflow-x:clip}


/* ================================================================
   NOCHE DE CRISTAL · Edición negro vino / champán
   Capas oscuras semitransparentes con luz de fondo. No se altera
   la lógica de ventanas, los audios, el video o la carta original.
   ================================================================ */
:root {
  color-scheme: dark;
  --bg: #0c0b10;
  --ink: #fbf0e9;
  --muted: #d2bdc3;
  --burgundy: #e4a7b6;
  --wine: #b86a81;
  --blush: #dfb0b2;
  --gold: #e5c292;
  --line: rgba(234,201,190,.16);
  --glass: rgba(32,22,31,.48);
  --shadow: 0 26px 70px rgba(0,0,0,.40), 0 7px 24px rgba(80,24,42,.20);
}
html { background: #0c0b10; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse 42% 48% at 6% 42%, rgba(112,31,57,.41), transparent 75%),
    radial-gradient(ellipse 47% 54% at 96% 16%, rgba(99,29,51,.35), transparent 76%),
    radial-gradient(ellipse 58% 44% at 49% 102%, rgba(91,28,52,.33), transparent 80%),
    linear-gradient(145deg, #0c0a0f 0%,#171018 47%,#0b0b10 100%);
  background-attachment: fixed;
}
::selection { background: #9d4864; color: white; }
button:focus-visible,a:focus-visible,video:focus-visible { outline-color: #e5c292; }
.site-header { isolation: isolate; }
.brand-mark {
  color: #f7e7db;
  background: rgba(255,240,230,.075);
  border: 1px solid rgba(229,194,146,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.brand-copy { color: #f7e5dd; }
.brand-copy span { color: var(--gold); }
.step-badge { color: #e4cbd0; }
.music-toggle {
  color:#f9ece9;
  background:rgba(59,30,47,.53);
  border:1px solid rgba(242,216,205,.25);
  box-shadow:0 10px 26px rgba(0,0,0,.17);
}
.music-toggle:hover { background:rgba(89,40,61,.62); }
.site-footer { color:#cfacb7; }
.footer-star { color:var(--gold); }
.glass,
.picture-card,
.theater,
.feature-card,
.ending-card {
  background: linear-gradient(135deg,
    rgba(94,57,71,.39) 0%,
    rgba(37,27,37,.49) 38%,
    rgba(54,31,45,.51) 100%);
  border:1px solid rgba(247,219,204,.24);
  -webkit-backdrop-filter: blur(27px) saturate(148%);
  backdrop-filter: blur(27px) saturate(148%);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.17),inset 1px 0 0 rgba(255,255,255,.055);
}
.glass-hero {
  position:relative;
  overflow:hidden;
  color:#fff3ed;
  background:linear-gradient(135deg,
    rgba(103,66,82,.43),
    rgba(48,31,45,.54) 42%,
    rgba(39,27,39,.63));
  border:1px solid rgba(246,223,204,.35);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  box-shadow:0 30px 85px rgba(0,0,0,.46),0 4px 24px rgba(104,40,60,.22),inset 0 1px 1px rgba(255,255,255,.23);
}
.glass-hero:before {
  background:linear-gradient(120deg,
    rgba(255,255,255,.17) 0%,transparent 31%,
    transparent 73%,rgba(222,165,166,.09) 100%);
}
.scene-intro:before {
  content:"";
  background:radial-gradient(ellipse,rgba(144,37,71,.58),rgba(99,31,52,.22) 49%,transparent 75%);
  opacity:.88;
  filter:blur(38px);
  z-index:0;
}
.scene-intro:after {
  background:radial-gradient(circle,rgba(123,54,74,.48),transparent 73%);
  filter:blur(38px);
}
.eyebrow { color:#f3d0ce; }
.eyebrow-line { background:var(--gold); }
.gold-eyebrow { color:var(--gold); }
em { color:#eab8bb; }
.intro-copy h1 { color:#fff2e9; text-shadow:0 5px 32px rgba(0,0,0,.15); }
.intro-copy h1 em { color:#f2b6c1; }
.intro-quote { color:#fff3e9; }
.intro-muted,.tap-note { color:#d9bec8; }
.note-icon { color:#e9bd8f; }
.intro-art-back { border-color:rgba(229,194,146,.62); }
.intro-art-frame {
  border:6px solid rgba(255,239,225,.37);
  box-shadow:0 27px 77px rgba(0,0,0,.48),0 0 38px rgba(139,57,76,.11);
}
.intro-art-frame:after { background:linear-gradient(180deg,transparent 63%,rgba(38,9,23,.22)); }
.intro-art-seal {
  color:#fff1e7;
  border:1px solid rgba(246,219,190,.51);
  background:rgba(60,35,47,.70);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 14px 37px rgba(0,0,0,.29);
}
.intro-art-stroke { border-color:rgba(226,189,139,.50); }
.intro-bottom { color:#d6a5b4; }
.btn-primary {
  color:#fff9f2;
  background:linear-gradient(116deg,#a65069 0%,#812d4c 53%,#68263c 100%);
  border:1px solid rgba(255,208,213,.30);
  box-shadow:0 13px 32px rgba(16,3,10,.43),inset 0 1px 0 rgba(255,255,255,.19);
}
.btn-primary:hover { background:linear-gradient(116deg,#b95e77,#953351);box-shadow:0 15px 34px rgba(18,4,11,.50); }
.btn-soft {
  color:#fff0e8;
  background:rgba(240,213,208,.085);
  border:1px solid rgba(245,218,207,.26);
}
.btn-soft:hover { background:rgba(240,213,208,.16); }
.back-link { color:#d5b8c0; }
.back-link:hover { color:#f6d1d2; }
.scene-topline { color:#cba7b2; }
.scene-topline-line { background:linear-gradient(90deg,rgba(225,185,153,.40),rgba(225,185,153,.05)); }
.center-heading h2,.feature-copy h2,.ending-copy h2 { color:#fff4eb; }
.feature-copy {
  background:linear-gradient(130deg,rgba(92,50,66,.13),rgba(22,16,27,.15));
}
.feature-copy p,.ending-copy p { color:#dfc9ce; }
.feature-card { overflow:hidden; }
.picture-card-foot { border-top:1px solid rgba(255,255,255,.09); }
.picture-card-foot h3 { color:#fdf0e7; }
.mini-label { color:#e8c298; }
.picture-ornament { color:#e7aebb; }
.theater { background:rgba(61,38,50,.49); }
.video-frame { background:#050508; }
.video-frame video { background:#050508; }
.theater-footer,.video-note { color:#d4c0c6; }
.theater-live { color:#f0c8b2; }
.sealed-letter { background:rgba(49,30,42,.49); }
.sealed-letter-overlay { background:linear-gradient(180deg,transparent 31%,rgba(22,7,15,.74)); }
/* La carta reproduce el papel original para que su texto siga legible. */
.letter-paper {
  color:#3d3030;
  background:linear-gradient(145deg,rgba(255,249,239,.97),rgba(248,232,219,.96));
  border:1px solid rgba(255,249,232,.86);
  box-shadow:0 28px 75px rgba(0,0,0,.43), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.letter-paper h3,.letter-body { color:#42303b; }
.letter-subtitle { color:#806b70; }
.letter-paper-top,.letter-paper-bottom { color:#956c58; }
.toast { background:#513147;border:1px solid rgba(255,234,215,.26); }
@media (max-width:720px) {
  .scene-intro:before {
    width:120%;height:53%;left:-10%;top:34%;filter:blur(38px);
    background:radial-gradient(ellipse,rgba(133,30,63,.65),rgba(104,35,58,.24) 52%,transparent 81%);
  }
  .scene-intro:after { background:radial-gradient(circle,rgba(134,53,78,.40),transparent 76%); }
  .glass-hero {
    color:#fff4eb;
    background:linear-gradient(140deg,rgba(105,65,80,.52),rgba(44,30,43,.68) 77%,rgba(56,34,48,.72));
    border:1px solid rgba(252,224,215,.33);
    box-shadow:0 22px 60px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,255,255,.21);
  }
  .intro-art-frame { border-width:5px; }
  .intro-art-seal { background:rgba(63,39,51,.83); }
}
@media(prefers-reduced-transparency:reduce) {
  .glass,.glass-hero { background:rgba(47,31,45,.96); }
  .letter-paper { background:#fff7ed; }
}
/* Los halos decorativos nunca deben agrandar el ancho de la página. */
@media (max-width:720px) {
  .scene-intro:before { left:0; width:100%; }
  .scene-intro:after { right:0; }
}


/* ============================================================
   REFINAMIENTO FINAL · CRISTAL BLANCO TRANSLÚCIDO
   El fondo vino permanece visible a través de las tarjetas;
   el papel de la carta mantiene su superficie legible.
   ============================================================ */
:root { --glass: rgba(255, 250, 250, .19); }
.glass,
.feature-card,
.picture-card,
.theater,
.ending-card {
  background: linear-gradient(137deg,
    rgba(255, 255, 255, .245) 0%,
    rgba(251, 236, 240, .135) 43%,
    rgba(252, 231, 239, .175) 100%);
  border: 1px solid rgba(255, 251, 248, .61);
  -webkit-backdrop-filter: blur(28px) saturate(156%) brightness(1.07);
  backdrop-filter: blur(28px) saturate(156%) brightness(1.07);
  box-shadow:
    0 27px 72px rgba(0,0,0,.36),
    0 9px 29px rgba(74,26,48,.18),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 1px 0 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.12);
}
.glass-hero {
  background: linear-gradient(133deg,
    rgba(255, 253, 252, .30) 0%,
    rgba(255, 243, 247, .16) 45%,
    rgba(255, 255, 255, .18) 100%);
  border: 1px solid rgba(255,255,255,.76);
  -webkit-backdrop-filter: blur(32px) saturate(170%);
  backdrop-filter: blur(32px) saturate(170%);
  box-shadow:
    0 31px 80px rgba(0,0,0,.39),
    0 8px 25px rgba(101,39,61,.16),
    inset 0 1px 1px rgba(255,255,255,.87),
    inset 1px 0 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.12);
}
.glass-hero::before {
  background: linear-gradient(119deg,
    rgba(255,255,255,.25) 0%, rgba(255,255,255,.075) 27%,
    transparent 55%, rgba(255,255,255,.12) 100%);
}
.feature-copy {
  background: linear-gradient(130deg,rgba(42,20,32,.18),rgba(43,22,35,.30));
}
.picture-card-foot { border-top-color:rgba(255,255,255,.24); }
.theater { background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(246,225,235,.12)); }
.sealed-letter { background:linear-gradient(135deg,rgba(255,255,255,.21),rgba(248,226,233,.12)); }
/* La carta debe conservar el aspecto de papel elegante, no volverse transparente. */
.letter-paper.glass {
  color:#3d3030;
  background:linear-gradient(145deg,rgba(255,249,239,.97),rgba(248,232,219,.96));
  border:1px solid rgba(255,249,232,.87);
  box-shadow:0 28px 75px rgba(0,0,0,.43),inset 0 1px 0 #fff;
}
@media(max-width:720px) {
  .glass,.feature-card,.picture-card,.theater,.ending-card {
    -webkit-backdrop-filter:blur(20px) saturate(145%);
    backdrop-filter:blur(20px) saturate(145%);
    border-color:rgba(255,255,255,.64);
  }
  .glass-hero {
    background:linear-gradient(139deg,
      rgba(255,255,255,.27),rgba(249,234,240,.155) 57%,rgba(255,255,255,.20));
    border-color:rgba(255,255,255,.74);
    -webkit-backdrop-filter:blur(21px) saturate(155%);
    backdrop-filter:blur(21px) saturate(155%);
  }
}
@media(prefers-reduced-transparency:reduce) {
  .glass,.feature-card,.picture-card,.theater,.ending-card {background:rgba(60,42,54,.97);}
  .letter-paper.glass {background:#fff7ed;}
}