:root{
  --noche:#0E1A2B;
  --nieve:#F5F2EA;
  --oro:#D9A441;
  --rojo:#B01E2E;
  --rojo-hover:#D63030;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --focus:#D9A441;
  --glass-bg:rgba(14,26,43,.7);
  --border-subtle:rgba(245,242,234,.22);
  --text-muted:rgba(245,242,234,.6);
  --text-soft:rgba(245,242,234,.82);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--noche);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:radial-gradient(120% 80% at 50% 0%,#1a2b44 0%,var(--noche) 55%,#070d17 100%) fixed;
  color:var(--nieve);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.bokeh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bokeh i{position:absolute;border-radius:50%;filter:blur(18px);opacity:.35;background:radial-gradient(circle,rgba(217,164,65,.9),transparent 70%);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(30px,-40px,0) scale(1.15)}}
.vignette{position:fixed;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 22vmin 6vmin rgba(4,8,15,.85)}
.grain{position:fixed;inset:-50%;z-index:4;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:5;min-height:100vh}
section{min-height:100vh;padding:14vh clamp(22px,6vw,90px);position:relative}
[hidden]{display:none!important}

/* TYPOGRAPHY */
.eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--oro);margin-bottom:22px;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:.95;letter-spacing:-.01em}
h1{font-size:clamp(56px,10vw,160px)}
h2{font-size:clamp(38px,6vw,96px)}
h3{font-size:clamp(32px,4.5vw,64px)}
h1 em,h2 em,h3 em{font-style:italic;color:var(--oro);font-weight:300}
p.lead{font-family:var(--serif);font-size:clamp(18px,2vw,26px);line-height:1.4;max-width:32ch;color:var(--text-soft);margin-top:26px;font-weight:300}
.small{font-size:13px;line-height:1.7;color:var(--text-muted);max-width:42ch}
.num{font-family:var(--serif);font-style:italic;color:var(--oro);font-size:22px;margin-bottom:18px;display:block}
.req{color:var(--oro)}

/* REVEAL ANIMATIONS */
.reveal{opacity:0;transform:translateY(40px)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* BUTTONS */
.btn{
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:999px;
  padding:18px 32px;
  font:600 12px var(--sans);
  letter-spacing:.26em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;
  min-height:44px;
  min-width:44px;
}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn-subir{background:var(--rojo);color:#fff}
.btn-subir:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(176,30,46,.6);background:var(--rojo-hover)}
.btn-subir:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-oro{background:transparent;color:var(--nieve);border:1px solid var(--oro)}
.btn-oro:hover{background:rgba(217,164,65,.12);transform:translateY(-2px)}
.btn-votar{padding:12px 24px;font-size:11px}
.btn-votar[aria-pressed="true"]{background:var(--oro);color:var(--noche);border-color:var(--oro)}

/* HERO */
#hero{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:12vh;text-align:center}
#hero .hero-copy{max-width:720px;margin:0 auto}
#hero .scroll-cue{position:absolute;right:clamp(22px,6vw,90px);bottom:12vh;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--text-muted);writing-mode:vertical-rl}
#hero .scroll-cue::after{content:"";display:inline-block;width:1px;height:60px;background:linear-gradient(var(--oro),transparent);margin-top:14px}
@media (max-width:820px){#hero .scroll-cue{display:none}}

/* FILTRO SECTION */
#filtro .txt{text-align:center;max-width:600px;margin:0 auto}
.filtro-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* FORMULARIO */
.form-wrap{max-width:560px;margin:0 auto;width:100%}
.fields{display:grid;gap:24px;margin-top:32px}
.field-group{display:grid;gap:8px}
.field-group label{font-size:14px;font-weight:400;color:var(--nieve)}
.field-group input[type="text"],
.field-group input[type="email"]{
  width:100%;
  padding:16px 20px;
  border-radius:8px;
  border:1px solid var(--border-subtle);
  background:transparent;
  color:var(--nieve);
  font:inherit;
  font-size:16px;
  transition:border-color .2s,background .2s;
}
.field-group input:focus{outline:none;border-color:var(--oro);background:rgba(217,164,65,.04)}
.field-group input::placeholder{color:var(--text-muted)}
.field-group input[aria-invalid="true"]{border-color:#E04040}
.field-group input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(224,64,64,.2)}

/* FILE INPUTS */
.file-input-wrap{display:flex;flex-direction:column;gap:8px}
.file-trigger{justify-content:flex-start;padding:14px 20px;border-radius:8px;border:1px solid var(--border-subtle);background:transparent;color:var(--nieve);font:inherit;font-size:14px;min-height:48px}
.file-trigger:hover{border-color:var(--oro);background:rgba(217,164,65,.06)}
.file-hint{font-size:12px;color:var(--text-muted)}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
.preview-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--border-subtle)}
.video-preview{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border-subtle)}
.video-preview video{width:100%;height:auto;display:block}
.btn-remove{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(14,26,43,.8);border:1px solid var(--border-subtle);color:var(--nieve);font-size:18px;line-height:1;cursor:pointer}
.btn-remove:hover{background:var(--rojo);border-color:var(--rojo)}

/* CONSENT */
.consent{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--border-subtle);border-radius:12px;background:rgba(217,164,65,.03)}
.consent input[type="checkbox"]{width:20px;height:20px;flex-shrink:0;accent-color:var(--oro);margin-top:2px}
.consent label{font-size:13px;line-height:1.5;color:var(--text-soft);cursor:pointer}
.consent a{color:var(--oro);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--nieve)}

/* FORM ACTIONS */
.form-actions{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.status{min-height:24px;font-size:14px;color:var(--oro);text-align:right}

/* PREVIA SECTION */
#previa .txt{text-align:center}
.previa-wrap{display:grid;gap:24px;align-items:center;max-width:700px;margin:0 auto}
.globe-preview{--s:min(60vw,420px);width:var(--s);height:var(--s);margin:0 auto}
.previa-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ENVIADO SECTION */
#enviado .txt{text-align:center}
.enviado-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* VOTACIÓN SECTION */
#votacion{min-height:auto;padding-bottom:18vh}
#votacion header{text-align:center;max-width:760px;margin:0 auto 9vh}
.votacion-info{text-align:center;font-size:14px;color:var(--text-muted);margin-bottom:24px;min-height:24px}

/* CIERRE SECTION */
#cierre .txt{text-align:center;max-width:700px;margin:0 auto}
.cierre-cta{text-align:center;margin-top:32px}
#cierre-small{margin-bottom:16px}
#cierre-small strong{color:var(--oro)}

/* FOOTER */
footer{
  position:relative;
  z-index:5;
  padding:32px clamp(22px,6vw,90px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-top:1px solid rgba(245,242,234,.08);
}
.logo-open{width:140px;height:auto;flex-shrink:0}

/* MODAL BASE */
dialog{
  border:0;
  background:transparent;
  color:var(--nieve);
  max-width:none;
  max-height:none;
  width:100vw;
  height:100vh;
  height:100dvh;
  padding:0;
}
dialog::backdrop{
  background:rgba(5,9,16,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
dialog[open]{display:grid;place-items:center}

/* MODAL HISTORIA */
.mwrap{
  height:100%;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:5vw;
  padding:6vw;
  overflow:auto;
}
.mwrap .globe{--s:min(42vw,560px);animation:none;margin:0 auto;cursor:default}
.mwrap .globe:hover{transform:none}
.mtxt h3{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.5vw,68px);line-height:1}
.mtxt p{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--text-soft);margin-top:20px;max-width:36ch}
.mtxt .meta{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--oro);margin-top:24px}
.vote-wrap{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.vote-count{font-size:13px;color:var(--text-soft);min-width:100px}
.close{
  position:absolute;
  top:24px;
  right:28px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--border-subtle);
  background:transparent;
  color:var(--nieve);
  font-size:0;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.close:hover{background:rgba(245,242,234,.1);border-color:var(--oro)}
.close:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.close::before,.close::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* MODAL NO ADOPTADO / BASES */
.modal-content,.bases-content{
  background:var(--glass-bg);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  padding:48px;
  max-width:480px;
  width:90%;
  text-align:center;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
}
.modal-content h3,.bases-content h3{font-size:clamp(24px,3.5vw,36px);margin-bottom:16px}
.modal-content p,.bases-text p{font-size:16px;line-height:1.7;color:var(--text-soft);margin-bottom:16px}
.bases-text{text-align:left;margin:24px 0;font-size:14px;line-height:1.8;color:var(--text-soft)}
.bases-text strong{color:var(--nieve)}
.bases-text a{color:var(--oro);text-decoration:underline}
.bases-content .btn{margin-top:16px}

/* GLOBE / ORB (shared) */
.globe{
  --s:clamp(130px,17vw,220px);
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  position:relative;
  cursor:pointer;
  border:0;
  background:none;
  color:inherit;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  animation:float 7s ease-in-out infinite;
}
.globe:nth-child(3n){--s:clamp(110px,13vw,170px);animation-duration:9s;margin-top:60px}
.globe:nth-child(4n+1){animation-delay:-3s}
.globe:nth-child(5n){margin-top:-30px}
@keyframes float{50%{transform:translateY(-14px)}}
.globe:hover,.globe:focus-visible{transform:scale(1.06)}
.globe:focus-visible{outline:2px solid var(--focus);outline-offset:8px}
.orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;background:#0b1422;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(245,242,234,.18)}
.orb .slides,.orb video{position:absolute;inset:-6%;width:112%;height:112%}
.orb .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:xf 12s infinite;filter:saturate(.9) contrast(1.05)}
.orb .slides img:nth-child(2){animation-delay:4s}
.orb .slides img:nth-child(3){animation-delay:8s}
.orb .slides img:only-child{opacity:1;animation:kb 14s ease-in-out infinite alternate}
@keyframes xf{0%{opacity:0;transform:scale(1.12)}8%{opacity:1}33%{opacity:1}42%{opacity:0;transform:scale(1)}100%{opacity:0}}
@keyframes kb{to{transform:scale(1.15) translate(-3%,2%)}}
.orb video{object-fit:cover;opacity:0;transition:opacity .8s}
.playing .orb video{opacity:1}
.orb .snow{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:radial-gradient(1.6px 1.6px at 20% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 70% 20%,#fff,transparent),radial-gradient(2px 2px at 40% 70%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1.4px 1.4px at 55% 45%,#fff,transparent),radial-gradient(1.8px 1.8px at 12% 80%,rgba(255,255,255,.8),transparent);background-size:100% 100%;animation:snow 9s linear infinite;opacity:.85}
.orb .snow.b{animation-duration:14s;transform:scale(1.4);opacity:.5;animation-delay:-5s}
@keyframes snow{from{background-position:0 -100%}to{background-position:12px 100%}}
.orb .glass{position:absolute;inset:0;z-index:3;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.55) 0,rgba(255,255,255,.12) 9%,transparent 22%),radial-gradient(circle at 70% 82%,rgba(217,164,65,.25),transparent 30%),radial-gradient(circle at 50% 50%,transparent 52%,rgba(14,26,43,.35) 66%,rgba(245,242,234,.28) 71%,rgba(14,26,43,.75) 72%);box-shadow:inset 0 0 30px rgba(255,255,255,.18),inset -12px -18px 40px rgba(0,0,0,.45)}
.orb .glass::after{content:"";position:absolute;left:16%;top:9%;width:34%;height:14%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.5),transparent);transform:rotate(-28deg);filter:blur(1px)}
.globe .cap{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--text-soft)}
.globe .play{position:absolute;z-index:4;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;border:1px solid var(--border-subtle);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(14,26,43,.25);opacity:0;transition:opacity .4s}
.globe .play::before{content:"";position:absolute;left:17px;top:14px;border-left:12px solid var(--nieve);border-top:8px solid transparent;border-bottom:8px solid transparent}
.globe:hover .play,.globe:focus-within .play{opacity:1}
.playing .play{opacity:0!important}

/* SKY GRID (fallback para historias semilla si WebGL falla) */
.sky{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,44px);max-width:1200px;margin:0 auto}

/* STAR / EASTER EGG */
.star{width:24px;height:24px;background:none;border:0;cursor:pointer;opacity:.5;position:relative;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.star::before{content:"";position:absolute;inset:0;background:var(--oro);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.star:hover{opacity:1}
.star:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.bubbles{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(3px 3px at 30% 80%,rgba(255,226,150,.9),transparent),radial-gradient(2px 2px at 60% 90%,rgba(255,226,150,.9),transparent),radial-gradient(4px 4px at 45% 70%,rgba(255,226,150,.7),transparent),radial-gradient(2px 2px at 70% 60%,rgba(255,226,150,.9),transparent);animation:bub 3s linear infinite}
@keyframes bub{from{background-position:0 40%}to{background-position:0 -60%}}
.egg .orb{background:radial-gradient(circle at 50% 70%,#7a5a1e,#1b1408 70%)}

/* LOADING SPINNER */
.loading{display:inline-block;width:20px;height:20px;border:2px solid var(--border-subtle);border-top-color:var(--oro);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn .loading{margin-right:8px}

/* MOBILE */
@media (max-width:820px){
  .chapter,#tuya .grid,.mwrap{grid-template-columns:1fr}
  .chapter .txt,.chapter.l .txt{grid-column:1}
  .chapter{min-height:90vh;align-items:end}
  .mwrap{align-content:center;gap:30px;padding:70px 24px 24px;overflow:auto}
  .mwrap .globe{--s:min(78vw,380px)}
  .globe{--s:clamp(120px,40vw,170px)}
  .globe:nth-child(3n){--s:clamp(100px,32vw,140px);margin-top:20px}
  .sky{gap:84px 20px}
  .scroll-cue{display:none}
  .form-actions{justify-content:center}
  .btn-subir{width:100%}
  .btn-oro{width:100%}
  .form-actions .btn{flex:1;min-width:160px}
  footer{flex-direction:column;text-align:center}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .orb .slides img:first-child{opacity:1}
  .reveal{opacity:1;transform:none}
  .globe{animation:none}
  .bokeh i{animation:none}
  .bubbles{animation:none}
  .snow{animation:none}
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast:more){
  :root{--border-subtle:rgba(245,242,234,.5);--text-muted:rgba(245,242,234,.8)}
  .btn-oro{border-width:2px}
  .close{border-width:2px}
  .field-group input{border-width:2px}
}