/* ===== eventos: columnas que se expanden (inspiración panel de producto) ===== */
.evx{position:relative;display:flex;gap:10px;height:620px;border-radius:36px;overflow:hidden;background:#fff;padding:10px;box-shadow:0 30px 70px -40px rgba(46,74,92,.6)}
.evx .col{position:relative;flex:1 1 0;min-width:0;border-radius:28px;overflow:hidden;cursor:pointer;background:var(--soft);color:var(--navy);
  transition:flex-grow .7s cubic-bezier(.7,0,.2,1),color .4s;display:flex;flex-direction:column;justify-content:space-between;padding:26px 24px;border:0;text-align:left;font:inherit}
.evx .col::before{content:"";position:absolute;inset:0;background:var(--c);clip-path:circle(0% at 50% 100%);transition:clip-path .7s cubic-bezier(.7,0,.2,1);z-index:0}
.evx .col > *{position:relative;z-index:1}
.evx .col .num{font-weight:800;font-size:.85rem;letter-spacing:.2em;opacity:.7}
.evx .col .name{font-family:var(--f-display);font-size:2.3rem;line-height:1.05}
.evx .col .tag{font-weight:600;font-size:.92rem;max-width:22ch;opacity:.85}
.evx .col .more{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem;letter-spacing:.06em;margin-top:12px}
.evx .col .more i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;transition:transform .4s}
.evx .col .art{position:absolute;left:50%;top:44%;width:min(250px,80%);aspect-ratio:1;transform:translate(-50%,-50%) scale(.55);opacity:.85;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .4s;z-index:1;pointer-events:none}
.evx .col .art img{position:absolute;left:50%;bottom:0;height:78%;transform:translateX(-50%) translateY(30%);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1) .05s,opacity .4s}
.evx .col .art .icon{position:absolute;inset:0;display:grid;place-items:center}
.evx .col .art .icon svg{width:62%;overflow:visible}
.evx .col.on{flex-grow:2.4;color:#fff}
.evx .col.on::before{clip-path:circle(150% at 50% 100%)}
.evx .col.on .art{transform:translate(-50%,-56%) scale(1);opacity:1}
.evx .col.on .art img{transform:translateX(-50%) translateY(0);opacity:1}
.evx .col.on .art .icon{transform:translate(28%,-26%) scale(.55);transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.evx .col.on .more i{background:#fff;color:var(--c);transform:rotate(-45deg)}
.evx .col .acc{position:absolute;pointer-events:none}

/* detalle a pantalla completa */
.evd{position:absolute;inset:0;z-index:5;border-radius:36px;background:var(--c);color:#fff;overflow:hidden;visibility:hidden;clip-path:inset(0 round 36px);transition:background .6s}
.evd.open{visibility:visible}
.evd .big{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);text-align:center;font-weight:900;font-size:clamp(4.5rem,15vw,13rem);line-height:.9;letter-spacing:-.04em;color:rgba(255,255,255,.95);white-space:nowrap;pointer-events:none}
.evd .big span{display:inline-block}
.evd .hero-art{position:absolute;left:50%;top:50%;width:min(360px,62%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.evd .hero-art .halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 68%)}
.evd .hero-art img{position:absolute;left:50%;bottom:4%;height:82%;transform:translateX(-50%);filter:drop-shadow(0 24px 30px rgba(0,0,0,.25))}
.evd .hero-art .icon{position:absolute;right:-6%;top:2%;width:38%}
.evd .hero-art .icon svg{width:100%;overflow:visible}
.evd .info{position:absolute;left:34px;bottom:34px;max-width:300px;display:flex;flex-direction:column;gap:10px}
.evd .info .n{font-weight:800;letter-spacing:.2em;font-size:.8rem;opacity:.85}
.evd .info h3{font-family:var(--f-display);font-weight:400;font-size:2.4rem;line-height:1.05}
.evd .info p{font-weight:600;font-size:.98rem;line-height:1.45}
.evd .info ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem}
.evd .info li{display:flex;gap:8px;align-items:center}
.evd .info li::before{content:"✦"}
.evd .cta{position:absolute;right:34px;bottom:34px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.evd .cta small{font-weight:700;opacity:.9}
.evd .cta .btn{background:#fff;color:var(--c-dark)}
.evd .close{position:absolute;top:22px;right:22px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:var(--navy);font-size:1.4rem;font-weight:800;cursor:pointer;display:grid;place-items:center;z-index:3}
.evd .dots{position:absolute;right:30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:3}
.evd .dots button{width:16px;height:16px;border-radius:50%;border:3px solid #fff;background:transparent;cursor:pointer;padding:0;transition:transform .3s,background .3s}
.evd .dots button.on{background:#fff;transform:scale(1.35)}
.evd .tab{position:absolute;top:26px;left:34px;display:flex;gap:8px;z-index:3}
.evd .tab span{background:rgba(255,255,255,.25);border-radius:999px;padding:7px 14px;font-weight:800;font-size:.78rem;letter-spacing:.12em}
.evd .tab span:first-child{background:#fff;color:var(--c-dark)}
.evd .spark{position:absolute;width:26px;height:26px;fill:#fff;opacity:.9}

@media (max-width:820px){
  .evx{flex-direction:column;height:auto;gap:8px;padding:8px}
  .evx .col{flex:none;height:118px;padding:18px 20px;transition:height .6s cubic-bezier(.7,0,.2,1),color .4s;justify-content:center;gap:2px}
  .evx .col .name{font-size:1.9rem}
  .evx .col .tag{display:none}
  .evx .col .more{position:absolute;right:18px;top:50%;transform:translateY(-50%);margin:0}
  .evx .col .more span{display:none}
  .evx .col .art{left:auto;right:70px;top:50%;width:96px;transform:translateY(-50%) scale(.8)}
  .evx .col .art img{display:none}
  .evx .col.on{height:230px}
  .evx .col.on .tag{display:block}
  .evx .col.on .art{width:170px;right:40px;transform:translateY(-50%) scale(1)}
  .evx .col.on .art img{display:block}
  .evx .col.on .art .icon{transform:translate(30%,-30%) scale(.5)}
  .evd{position:fixed;inset:0;border-radius:0;z-index:95;padding-top:env(safe-area-inset-top,0px)}
  .evd .big{top:34%;font-size:clamp(3.6rem,22vw,7rem)}
  .evd .hero-art{top:36%;width:min(300px,72%)}
  .evd .info{left:20px;right:20px;bottom:calc(120px + env(safe-area-inset-bottom,0px));max-width:none}
  .evd .info h3{font-size:2rem}
  .evd .info ul{display:none}
  .evd .cta{left:20px;right:20px;bottom:calc(26px + env(safe-area-inset-bottom,0px));align-items:stretch}
  .evd .cta .btn{justify-content:center}
  .evd .cta small{display:none}
  .evd .dots{right:auto;left:50%;top:auto;bottom:auto;top:calc(76px + env(safe-area-inset-top,0px));transform:translateX(-50%);flex-direction:row}
  .evd .tab{top:calc(24px + env(safe-area-inset-top,0px));left:20px}
  .evd .close{top:calc(16px + env(safe-area-inset-top,0px))}
}

/* ===== contador estilo tablero (flip) ===== */
.fc-wrap{position:relative;border-radius:22px;padding:3px;background:conic-gradient(from var(--ang,0deg),#F4A49B,#FBE7A1,#BFE3C7,#B6D8EE,#D3C2EE,#FF7FB0,#F4A49B);animation:spinb 4s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spinb{to{--ang:360deg}}
.fc{position:relative;border-radius:20px;background:linear-gradient(160deg,#2E4A5C,#1E3442);padding:14px 10px 10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.fc::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.fc .lbl{color:#FBE7A1;font-weight:800;font-size:.68rem;letter-spacing:.3em;text-align:center}
.fc .row{display:flex;justify-content:center;align-items:flex-start;gap:6px}
.fc .unit{display:flex;flex-direction:column;align-items:center;gap:5px}
.fc .pair{display:flex;gap:3px}
.fc .cap{color:#D3E4F0;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fc .colon{color:#FF9FC8;font-weight:900;font-size:1.6rem;line-height:44px;animation:blink 1s steps(1) infinite;text-shadow:0 0 10px #FF5FA8}
@keyframes blink{50%{opacity:.25}}
.flip{position:relative;width:34px;height:48px;perspective:220px;font-weight:900;font-size:2rem;font-variant-numeric:tabular-nums;color:#fff}
.flip .h{position:absolute;left:0;right:0;height:24px;overflow:hidden;background:linear-gradient(180deg,#3E6A82,#335a70);backface-visibility:hidden}
.flip .h span{display:block;width:100%;text-align:center;line-height:48px;height:48px;background:linear-gradient(180deg,#fff 30%,#FFD7E6);-webkit-background-clip:text;background-clip:text;color:transparent}
.flip .t{top:0;border-radius:8px 8px 0 0}
.flip .b{top:24px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#2C5468,#244657)}
.flip .b span{margin-top:-24px}
.flip::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#132733;z-index:4}
.flip .ft{z-index:3;transform-origin:50% 100%}
.flip .fb{z-index:3;transform-origin:50% 0;transform:rotateX(90deg)}
.flip.go .ft{animation:ftop .32s ease-in forwards}
.flip.go .fb{animation:fbot .32s ease-out .32s forwards}
@keyframes ftop{to{transform:rotateX(-90deg)}}
@keyframes fbot{to{transform:rotateX(0)}}
.fc .unit.ss .flip .h{background:linear-gradient(180deg,#E8796E,#D9655B)}
.fc .unit.ss .flip .b{background:linear-gradient(180deg,#C9574E,#B84D45)}
.fc .unit.ss .flip .h span{background:linear-gradient(180deg,#fff 30%,#FFE9A8);-webkit-background-clip:text;background-clip:text}
.fc .pulse{position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 2px rgba(255,159,200,.0);pointer-events:none}
@media (prefers-reduced-motion:reduce){.fc-wrap{animation:none}}
#eventos .wrap{max-width:1440px}
.evx{height:680px}
.evx-hint{text-align:center;font-weight:700;opacity:.6;margin-top:14px;font-size:.9rem}
@media (max-width:820px){.evx{height:auto}}
.evd .acc{position:absolute;overflow:visible}
.evx{z-index:6}
.fc{--fw:30px;--fh:44px}
.fc .row{gap:4px}
.fc .pair{gap:2px}
.flip{width:var(--fw);height:var(--fh);font-size:calc(var(--fh)*.66)}
.flip .h{height:calc(var(--fh)/2)}
.flip .b{top:calc(var(--fh)/2)}
.flip .h span{line-height:var(--fh);height:var(--fh)}
.flip .b span{margin-top:calc(var(--fh)/-2)}
.fc .colon{line-height:var(--fh);font-size:1.3rem}
.flip .h.t{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.flip{filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
@media (max-width:380px){.fc{--fw:26px;--fh:40px}}
@media (max-width:820px),(pointer:coarse){.flip{filter:none}}
@media (max-width:820px){.evd .big{font-size:clamp(3rem,16vw,7rem)}.evx .col.on .tag{max-width:15ch}.evx .col.on .art{right:30px}}