*{box-sizing:border-box}
:root{--red:#991b27;--gold:#f5d58e;--cream:#fff8e9}
html,body{margin:0;min-height:100%;font-family:Arial,sans-serif}
body{background:radial-gradient(ellipse at top,#28664c 0%,#103b2d 60%,#09271e 100%);color:var(--cream);overflow-x:hidden}
[hidden]{display:none!important}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.lights{position:fixed;z-index:6;top:0;left:0;right:0;height:25px;display:flex;justify-content:space-around;pointer-events:none}
.lights:before{content:"";position:absolute;top:6px;left:0;right:0;height:1px;background:#e9d59a88}
.lights i{width:9px;height:12px;border-radius:50%;background:#ffe17d;margin-top:7px;box-shadow:0 0 12px #ffe17d;animation:blink 1.5s infinite alternate}
.lights i:nth-child(3n){background:#ff7777;box-shadow:0 0 12px #ff7777;animation-delay:.5s}
@keyframes blink{to{opacity:.45;transform:scale(.8)}}
.welcome{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:28px 18px max(28px,env(safe-area-inset-bottom));background:#020706;z-index:1}
.welcome-inner{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:24px 18px max(30px,env(safe-area-inset-bottom));z-index:2;}
.mini-kicker{position:absolute;top:max(26px,env(safe-area-inset-top));left:0;right:0;z-index:2;font-size:10px;letter-spacing:3px;font-weight:900;color:#ffe09b;text-shadow:0 2px 10px #000;pointer-events:none}
.video-frame{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:hidden;background:#000;box-shadow:none;z-index:0}
.video-frame:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 28%,rgba(0,0,0,.82) 100%);pointer-events:none}
.video-frame video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#000}
.tap-note{font-family:Georgia,serif;font-size:clamp(13px,3.5vw,17px);color:#fff4d8;margin:0 0 15px;text-shadow:0 2px 8px #000;z-index:2}
.start-btn{z-index:2;border:0;border-radius:999px;padding:16px 28px;background:linear-gradient(135deg,#ffe6a1,#e5b84f);color:#5a1718;font-size:13px;font-weight:900;letter-spacing:1px;box-shadow:0 7px 24px #0009;cursor:pointer}
.start-btn:disabled{opacity:.65;cursor:wait}
.skip-btn{z-index:2;margin-top:11px;background:rgba(0,0,0,.35);border:1px solid #f5d58e99;color:#fff3d6;border-radius:999px;padding:10px 19px;font-size:11px;cursor:pointer;backdrop-filter:blur(8px)}
.video-status{z-index:2;font-size:10px;color:#fff0d1;margin:10px 0 0;text-shadow:0 2px 8px #000}
.invitation{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;padding:48px 16px 45px}
.hero{text-align:center;max-width:600px;margin:0 auto 22px}
.hero h1{font-family:Georgia,serif;font-size:clamp(31px,7vw,49px);line-height:1.02;margin:12px 0;color:#fff5df;text-shadow:0 3px 0 #60121d}
.hero h1 em{display:block;color:#f6d486;font-style:normal}
.hero-copy{font-size:14px;line-height:1.6;color:#e6f0e8;margin:0}
.flyer-section{width:min(100%,510px);text-align:center}
.tape{display:inline-block;background:#f5d58e;color:#5c1b17;padding:8px 17px;border-radius:6px 6px 2px 2px;font-size:10px;font-weight:900;letter-spacing:1.6px;transform:rotate(-2deg);margin:0 0 10px;box-shadow:0 3px 8px #001b1466}
.flyer-wrap{width:100%;background:#fff;border:7px solid #fff8e9;border-radius:7px;box-shadow:0 16px 36px #00170f99;overflow:hidden}
.flyer{display:block;width:100%;height:auto;object-fit:contain}
.flyer-caption{font-size:11px;line-height:1.5;color:#f8dfa8;margin:11px auto 25px;max-width:440px}
.fun-card,.info-card{width:min(100%,510px);border:1px solid #f5d58e66;border-radius:20px;background:linear-gradient(145deg,#fff9ed,#f6e8ce);color:#3d3328;box-shadow:0 14px 35px #00180f66;padding:25px 22px;margin:0 auto 18px;text-align:center}
.fun-icon{font-size:35px}.fun-card h2,.info-card h2{font-family:Georgia,serif;color:#8d1824;font-size:25px;margin:7px 0}
.fun-lead{font-size:14px;font-weight:800;color:#18583e;margin:0 0 18px}
.fun-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.fun-item{background:#fff;border:1px solid #ead9b9;border-radius:13px;padding:12px 7px;display:flex;flex-direction:column;align-items:center;gap:5px}
.fun-item span{font-size:25px}.fun-item b{font-size:11px;color:#8d1824}.fun-item small{font-size:10px;line-height:1.35;color:#655b50}
.joke{background:#f9e2df;border:1px dashed #c66b69;border-radius:12px;padding:12px;margin-top:15px;font-size:11px;line-height:1.5;color:#76202a;font-weight:700}
.info-card{background:linear-gradient(145deg,#a51e2b,#751522);color:#fff8e9}
.section-label{font-size:10px;letter-spacing:2px;color:#f5d58e;font-weight:800}
.info-card h2{color:#fff2d5;font-size:24px;margin:9px 0 5px}
.info-card>p{font-size:12px;color:#f9dfd1;margin:0 0 20px}
.count-label{font-size:9px;letter-spacing:2px;color:#f5d58e;font-weight:800;margin-bottom:11px}
.countdown{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:20px}
.countdown div{display:flex;flex-direction:column;min-width:40px}
.countdown b{font-size:25px;font-variant-numeric:tabular-nums}
.countdown small{font-size:8px;letter-spacing:1.3px;color:#f5d58e;margin-top:4px}
.countdown>span{font-size:19px;color:#f5d58e;margin-top:-9px}
.actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.btn{border:0;border-radius:999px;padding:12px 15px;text-decoration:none;font-size:11px;font-weight:800;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.map{background:#f5d58e;color:#5c1b17}.confirm{background:#238452;color:white}.music{background:#fff8e9;color:#741522}
.closing{font-family:Georgia,serif!important;font-style:italic;color:#ffe1a3!important;margin:18px 0 0!important}
@media(max-width:600px){
 .welcome{padding:0;height:100svh;min-height:100svh}
 .welcome-inner{padding:20px 16px max(24px,env(safe-area-inset-bottom))}
 .video-frame video{object-fit:cover;object-position:center}
 .tap-note{font-size:13px}
 .invitation{padding:38px 12px 30px}
 .hero{margin-bottom:18px}.hero-copy{font-size:13px}
 .flyer-section{width:100%;max-width:480px}
 .flyer-wrap{border-width:5px}
 .flyer-caption{font-size:10px;margin-bottom:20px}
 .fun-card,.info-card{padding:22px 15px;border-radius:16px}
 .fun-card h2,.info-card h2{font-size:22px}
 .fun-grid{gap:6px}.fun-item{padding:10px 5px}.fun-item small{font-size:9px}
 .actions{flex-direction:column}.btn{width:100%;padding:13px}
 .countdown{gap:9px}
}

.welcome{cursor:pointer;touch-action:manipulation}
.welcome-inner{cursor:pointer}
.tap-hint{z-index:3;margin-top:13px;padding:13px 22px;border:1px solid #f5d58eaa;border-radius:999px;background:rgba(0,0,0,.42);color:#fff3d6;font-size:11px;font-weight:900;letter-spacing:1px;text-shadow:0 2px 8px #000;backdrop-filter:blur(8px);box-shadow:0 6px 20px #0006;animation:hintPulse 1.8s ease-in-out infinite}
@keyframes hintPulse{0%,100%{transform:scale(1);box-shadow:0 6px 20px #0006}50%{transform:scale(1.035);box-shadow:0 8px 28px #0009}}

/* Segunda pantalla: el flyer es el primer elemento visible, sin títulos encima. */
.invitation{padding-top:24px}
.flyer-section{width:min(100%,560px)}
.flyer-wrap{border:0;border-radius:8px;background:transparent;box-shadow:0 14px 34px #00170f88}
.flyer{width:100%;height:auto;display:block}
@media(max-width:600px){
 .invitation{padding:16px 8px 28px}
 .flyer-section{width:100%;max-width:100%}
 .flyer-wrap{border:0;border-radius:0;box-shadow:none}
 .flyer-caption{padding:0 10px;margin:12px auto 22px}
}

/* Figuras navideñas animadas sobre el flyer */
.flyer-wrap{position:relative}
.flyer-figure{position:absolute;z-index:2;height:auto;pointer-events:none;filter:drop-shadow(0 4px 3px rgba(0,0,0,.16));will-change:transform}
.disco-figure{left:-1%;top:-1%;width:30%;transform-origin:50% 50%;animation:discoSpin 13s linear infinite, discoFloat 3.5s ease-in-out infinite}
.santa-figure{left:1.5%;top:60.4%;width:43%;transform-origin:50% 90%;animation:santaBounce 2.8s ease-in-out infinite}
.copa-figure{left:57.2%;top:59.3%;width:37%;transform-origin:50% 90%;animation:copaToast 3.2s ease-in-out infinite}
@keyframes discoSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes discoFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes santaBounce{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes copaToast{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-5deg) translateY(-4px)}65%{transform:rotate(4deg) translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.flyer-figure{animation:none!important}}

/* Recordatorio del flyer: grande, visible y con humor */
.flyer-caption{
  width:min(100% - 12px,540px);
  margin:14px auto 25px;
  padding:18px 16px 19px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  border:2px dashed #f5d58e;
  border-radius:17px;
  background:linear-gradient(135deg,#fff4d9,#ffe5a7);
  color:#681923;
  box-shadow:0 8px 22px #00180f55;
  line-height:1.3;
  text-align:center;
}
.flyer-caption .caption-pin{
  font-size:clamp(12px,3.4vw,15px);
  font-weight:900;
  letter-spacing:1px;
  color:#a31e2c;
}
.flyer-caption strong{
  font-family:Georgia,serif;
  font-size:clamp(22px,6vw,31px);
  line-height:1.05;
  color:#8d1824;
  text-shadow:0 1px #f3c86e;
}
.flyer-caption>span:last-child{
  font-size:clamp(14px,3.8vw,18px);
  font-weight:800;
  max-width:460px;
}
.secret-card{
  width:min(100%,510px);
  margin:0 auto 18px;
  padding:24px 20px;
  text-align:center;
  color:#fff8e9;
  background:linear-gradient(145deg,#176044,#0d422f);
  border:2px solid #f5d58e;
  border-radius:20px;
  box-shadow:0 14px 35px #00180f66;
}
.secret-emoji{font-size:39px;letter-spacing:5px;margin-bottom:7px}
.secret-kicker{font-size:11px;font-weight:900;letter-spacing:2px;color:#f5d58e}
.secret-card h2{
  margin:9px 0 7px;
  font-family:Georgia,serif;
  font-size:clamp(22px,5.5vw,29px);
  color:#fff0c9;
}
.secret-card p{font-size:14px;line-height:1.5;margin:0 auto 13px;max-width:390px}
.secret-joke{
  padding:12px 13px;
  border-radius:12px;
  background:#fff3d8;
  color:#791c28;
  font-size:13px;
  line-height:1.45;
  font-weight:800;
}
@media(max-width:600px){
  .flyer-caption{width:calc(100% - 18px);padding:17px 13px 18px;margin:13px auto 22px}
  .secret-card{padding:22px 15px;border-radius:17px}
  .secret-card p{font-size:13px}
  .secret-joke{font-size:12px}
}

/* Ajuste del mensaje bajo el flyer: sin encabezado y con frase protagonista */
.flyer-caption .caption-pin{display:none}
.flyer-caption strong{display:none}
.flyer-caption>span:last-child{
  font-size:clamp(19px,5.2vw,26px);
  font-weight:900;
  line-height:1.22;
  max-width:500px;
  color:#681923;
}
.flyer-caption{
  padding:22px 17px;
  gap:0;
}
@media(max-width:600px){
  .flyer-caption{padding:21px 15px}
  .flyer-caption>span:last-child{font-size:clamp(20px,5.7vw,25px)}
}

/* Compatibilidad móvil: video visible por encima del fondo y debajo de los textos */
.welcome{isolation:isolate;background:#020706}
.video-frame{z-index:0!important}
.video-frame video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent}
.video-frame:after{z-index:1}
.welcome-inner{z-index:2!important}

/* Presentación adaptable: video completo y fondo ambiental sin recortar el original */
.video-frame{background:#071018!important;overflow:hidden}
.video-frame .video-bg{
  z-index:0!important;
  width:100%;height:100%;
  object-fit:cover!important;
  filter:blur(22px) brightness(.48) saturate(1.15);
  transform:scale(1.12);
  opacity:.95;
}
.video-frame #introVideo{
  z-index:1!important;
  width:100%;height:100%;
  object-fit:contain!important;
  object-position:center center;
  background:transparent!important;
}
.video-frame:after{z-index:2;pointer-events:none}
@media(min-width:700px){
  .video-frame #introVideo{padding:0}
  .welcome-inner{padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}
}
@media(max-width:699px){
  .video-frame .video-bg{filter:blur(18px) brightness(.42);transform:scale(1.18)}
  .video-frame #introVideo{object-fit:contain!important}
}

/* VIDEO: un único reproductor, encuadre completo y medidas adaptables */
.welcome{
  position:relative!important;
  width:100%!important;
  height:100vh!important;
  height:100svh!important;
  min-height:540px!important;
  overflow:hidden!important;
  background:radial-gradient(ellipse at 50% 42%,#1b4035 0%,#08130f 65%,#020706 100%)!important;
  isolation:isolate!important;
}
.video-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  z-index:0!important;
}
.video-frame #introVideo{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  z-index:1!important;
}
.video-frame:after{
  content:""!important;
  position:absolute!important;
  inset:48% 0 0!important;
  z-index:2!important;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.22) 30%,rgba(0,0,0,.76) 100%)!important;
  pointer-events:none!important;
}
.welcome-inner{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:3!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding:28px 18px max(24px,env(safe-area-inset-bottom))!important;
  background:transparent!important;
  pointer-events:none!important;
}
.welcome-inner .tap-hint,
.welcome-inner .skip-btn{pointer-events:auto!important}
.welcome-inner .mini-kicker{top:max(25px,env(safe-area-inset-top))!important}
.tap-hint{max-width:100%;text-align:center;cursor:pointer}
@media(max-width:699px){
  .welcome{min-height:100svh!important}
  .video-frame #introVideo{
    width:100vw!important;
    height:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }
  .welcome-inner{padding-left:16px!important;padding-right:16px!important}
}
@media(min-width:700px){
  .video-frame #introVideo{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}