:root{
  --bg:#2E0C50; --bg2:#3B1164; --coral:#F05948; --wine:#9E3632; --ink:#FFFFFF; --soft:#D6C8E8; --line:rgba(255,255,255,.14);
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}

/* banderines */
.garland{display:block;width:100%;height:64px}
.wrap{max-width:720px;margin:0 auto;padding:0 22px}

.hero{text-align:center;padding:28px 0 44px}
.logo{width:120px;height:auto;display:block;margin:0 auto 26px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,11vw,84px);line-height:.95;letter-spacing:-.02em;margin:0}
h1 small{display:block;font-weight:500;font-size:.38em;letter-spacing:0;color:var(--soft);margin-bottom:.35em}
.lead{color:var(--soft);margin:18px auto 0;max-width:30ch}

.count{margin:38px auto 0;display:flex;justify-content:center;align-items:flex-start;gap:6px}
.unit{min-width:0;flex:1 1 0;max-width:170px}
.num{font-family:var(--display);font-weight:800;font-size:clamp(58px,17vw,124px);line-height:1;font-variant-numeric:tabular-nums;color:var(--coral);letter-spacing:-.03em}
.lab{font-size:15px;color:var(--soft);margin-top:6px}
.sep{font-family:var(--display);font-weight:700;font-size:clamp(44px,12vw,92px);line-height:1.1;color:var(--wine)}
.status{margin-top:22px;font-family:var(--display);font-weight:700;font-size:22px}
.status[hidden]{display:none}

.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:18px 12px}
.facts div+div{border-left:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--soft)}
.facts dd{margin:2px 0 0;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2}

h2{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-.01em;margin:52px 0 6px}
.sub{color:var(--soft);margin:0 0 22px}

ol.tl{list-style:none;margin:0;padding:0;position:relative}
ol.tl::before{content:"";position:absolute;left:76px;top:10px;bottom:10px;width:2px;background:var(--line)}
.tl li{display:grid;grid-template-columns:62px 1fr;column-gap:32px;padding:11px 0;position:relative}
.tl li::before{content:"";position:absolute;left:71px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--soft)}
.tl time{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;font-size:18px;padding-top:1px}
.tl .t{font-weight:600}
.tl .n{display:block;color:var(--soft);font-size:15px;font-weight:400}
.tl li.show::before{background:var(--coral);border-color:var(--coral)}
.tl li.show .t{color:var(--coral)}
.tl li.van .t::after{content:" 🚐"}
.tl li.done{opacity:.45}
.tl li.now{background:rgba(240,89,72,.12);border-radius:14px}
.tl li.now::before{background:var(--coral);border-color:#fff;box-shadow:0 0 0 5px rgba(240,89,72,.35)}
.tl li.now time::after{content:"Ahora";display:block;font-family:var(--body);font-size:12px;font-weight:600;color:var(--coral);margin-top:2px}

.vans{margin:44px 0 0;padding:22px;border-radius:20px;background:var(--bg2)}
.vans h3{font-family:var(--display);font-size:22px;margin:0 0 4px}
.vans p{margin:0;color:var(--soft)}
.vans ul{list-style:none;padding:0;margin:14px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.vans li{background:var(--bg);border-radius:12px;padding:10px 14px;flex:1 1 140px}
.vans b{font-family:var(--display);font-size:22px;display:block}
.vans span{font-size:14px;color:var(--soft)}

/* sorteo: la tarjeta completa es el botón */
.raffle{display:block;width:100%;margin:52px 0 0;padding:26px 22px;border:0;border-radius:24px;background:var(--coral);color:#fff;font:inherit;text-align:left}
.raffle-title{display:block;font-family:var(--display);font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-.01em;margin:0 0 6px}
.raffle-sub{display:block;opacity:.92;margin:0 0 20px}
.raffle-cta{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--display);font-weight:700;font-size:20px;padding:16px 18px;border-radius:16px;background:var(--bg);color:#fff}
.g-mark{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.g-mark svg{width:16px;height:16px}
button.raffle{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
button.raffle:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
button.raffle:active{transform:translateY(0)}
button.raffle:focus-visible{outline:3px solid #fff;outline-offset:4px}
button.raffle[disabled]{cursor:progress;transform:none;box-shadow:none}
button.raffle[disabled] .raffle-cta{opacity:.7}
.raffle-msg{display:block;font-weight:600;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fff;color:var(--bg)}
.raffle-msg:empty{display:none}

.raffle-done .who{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.18);border-radius:14px;padding:14px 16px}
.raffle-done .who img{width:48px;height:48px;border-radius:50%;flex:none;background:var(--bg)}
.raffle-done .who b{font-family:var(--display);font-size:22px;display:block;line-height:1.2}
.raffle-done .who span{font-size:15px;word-break:break-word}

.people{margin:14px 0 0}
.people-count{margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:18px}
.people ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.people li{display:flex;align-items:center;gap:8px;background:var(--bg2);border-radius:999px;padding:4px 12px 4px 4px;font-size:15px;font-weight:500;max-width:100%}
.people li img,.people li .ini{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover}
.people li .ini{display:grid;place-items:center;background:var(--coral);color:#fff;font-family:var(--display);font-weight:700;font-size:13px}
.people li span.n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.session{margin:10px 0 0;text-align:center;font-size:14px;color:var(--soft)}
.session button{font:inherit;color:#fff;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.winner{margin-top:18px;background:var(--bg);border-radius:16px;padding:18px;text-align:center;color:#fff}
.winner span{display:block;color:var(--soft);font-size:15px}
.winner b{font-family:var(--display);font-size:30px;line-height:1.15;display:block;margin-top:4px}
.winner.me{box-shadow:0 0 0 3px #fff inset}

.admin{margin:18px 0 0;padding:22px;border-radius:20px;border:2px dashed var(--coral)}
.admin h3{font-family:var(--display);margin:0 0 4px;font-size:20px}
.admin p{margin:0;color:var(--soft)}
.admin .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.admin button{flex:1 1 160px;font:inherit;font-family:var(--display);font-weight:700;font-size:18px;padding:14px 18px;border:0;border-radius:14px;background:var(--coral);color:#fff;cursor:pointer}
.admin button.alt{background:transparent;border:2px solid #fff}
.admin button[disabled]{opacity:.6;cursor:default}
.admin button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.admin ol{margin:14px 0 0;max-height:260px;overflow:auto;background:rgba(255,255,255,.08);border-radius:12px;padding:12px 12px 12px 34px}
.admin li{font-size:15px;word-break:break-word}
footer{text-align:center;color:var(--soft);font-size:14px;padding:48px 0 40px}
footer img{width:44px;opacity:.9;display:block;margin:0 auto 10px}

@media (max-width:480px){
  .facts{grid-template-columns:1fr}
  .facts div+div{border-left:0;border-top:1px solid var(--line)}
  .facts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .facts dd{text-align:right}
}
@media (prefers-reduced-motion:no-preference){
  .flag{transform-origin:top center;animation:sway 3.2s ease-in-out infinite}
  .flag:nth-child(odd){animation-delay:-1.6s}
  @keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
}
[hidden]{display:none !important}