/* =========================================================================
   ECTRICOL · ENERGÍAS RENOVABLES 2026 · base.css
   Motor visual: tokens de marca, escenario 1920x1080, chrome, sistema de animación,
   navegación (flechas, índice) y componentes interactivos (pestañas, acordeón, tilt, marquesina, marcos en vivo).
   ========================================================================= */
@font-face{font-family:"Maven Pro";src:url("../assets/fonts/MavenPro-VF.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:block}

:root{
  --azul:#21368B; --azul-900:#131F52; --azul-800:#1A2A6E; --azul-600:#2C47B0; --azul-500:#3A57C9; --azul-300:#8092D6; --azul-100:#D6DCF1; --azul-050:#EDF0FA;
  --amarillo:#FABF0D; --amarillo-2:#F4A11C;
  --silk:#FAFAFC; --ivory:#F2F2F0; --ash:#E8E8E5; --graphite:#8A8A84;
  --ease:cubic-bezier(.4,0,.2,1); --out:cubic-bezier(.16,1,.3,1); --inout:cubic-bezier(.76,0,.24,1);
  --mx:104px; --my:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:var(--azul-900);overflow:hidden;font-family:"Maven Pro","Segoe UI",system-ui,sans-serif;color:var(--silk);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.idle{cursor:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- Escenario ---------- */
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--azul-900);overflow:hidden}
.slide{position:absolute;inset:0;overflow:hidden;visibility:hidden;--fg:#fff;--fg2:rgba(255,255,255,.66);--line:rgba(255,255,255,.22);--bg:var(--azul-900)}
.slide.active{visibility:visible}
.slide[data-theme="light"]{--fg:var(--azul-900);--fg2:#5d6488;--line:rgba(19,31,82,.2);--bg:var(--silk);background:var(--silk);color:var(--fg)}
.slide[data-theme="dark"]{background:var(--azul-900);color:var(--fg)}
.slide[data-theme="blue"]{background:var(--azul);--bg:var(--azul);color:#fff}

/* ---------- Chrome persistente ---------- */
.chrome{position:absolute;left:var(--mx);right:var(--mx);top:var(--my);height:44px;display:flex;align-items:center;justify-content:space-between;z-index:40;pointer-events:none}
.chrome .lg{width:168px;height:auto;display:block;color:#fff}
.slide[data-theme="light"] .chrome .lg{color:var(--azul)}
.chrome .sec{font:700 22px/1 "Maven Pro";letter-spacing:.24em;text-transform:uppercase;color:var(--fg2);display:flex;gap:28px;align-items:center}
.chrome .sec i{display:block;width:1px;height:22px;background:var(--line)}
.chrome .sec b{color:var(--fg);font-weight:800}
.foot{position:absolute;left:var(--mx);right:var(--mx);bottom:var(--my);display:flex;justify-content:space-between;align-items:flex-end;z-index:40;pointer-events:none;font:600 22px/1.2 "Maven Pro";letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.foot .pg{font-variant-numeric:tabular-nums;color:var(--fg);font-weight:800;letter-spacing:.1em}
.foot .pg em{font-style:normal;color:var(--fg2);font-weight:600}
#prog{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(255,255,255,.08);z-index:90;pointer-events:none}
#prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--amarillo),var(--amarillo-2));transition:width .9s var(--out)}

/* Cortina de transición (azul marino, borde recto) */
#curt{position:absolute;inset:0;background:var(--azul-900);z-index:96;pointer-events:none;transform:translateX(-101%)}

/* ---------- Tipografía ---------- */
.kicker{white-space:nowrap;display:inline-flex;align-items:center;gap:20px;font:800 24px/1 "Maven Pro";letter-spacing:.26em;text-transform:uppercase;color:var(--amarillo)}
.kicker::before{content:"";display:block;width:64px;height:5px;background:var(--amarillo)}
.slide[data-theme="light"] .kicker{color:var(--azul)}
.t-display{font-weight:900;letter-spacing:-.045em;line-height:.86;text-transform:uppercase}
.t-title{font-weight:800;letter-spacing:-.035em;line-height:.95}
.t-lead{font-weight:500;line-height:1.28;letter-spacing:-.005em}
.num{font-weight:900;letter-spacing:-.06em;line-height:.8;font-variant-numeric:tabular-nums lining-nums}
.micro{font:700 22px/1.25 "Maven Pro";letter-spacing:.18em;text-transform:uppercase;color:var(--fg2)}
.y{color:var(--amarillo)}
.slide[data-theme="light"] .y{color:var(--azul)}
.ghost{position:absolute;font-weight:900;letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--line);pointer-events:none;user-select:none}

/* ---------- Medios ---------- */
.ph{position:absolute;overflow:hidden;background:#131F52}
.ph>img,.ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.grain{position:absolute;inset:-20%;width:140%;height:140%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;z-index:30;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.slide.on .kb>img{animation:kb 24s linear forwards}
@keyframes kb{from{transform:scale(1.0) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(var(--kx,-1.2%),var(--ky,-.8%),0)}}

/* ---------- Sistema de animación ---------- */
.slide:not(.on) [data-a]{opacity:0}
.slide.on [data-a]{animation-duration:1.05s;animation-timing-function:var(--out);animation-fill-mode:both;animation-delay:calc(var(--d,0)*1s)}
.slide.on [data-a="rise"]{animation-name:rise}
.slide.on [data-a="fade"]{animation-name:fade;animation-duration:1.2s;animation-timing-function:var(--ease)}
.slide.on [data-a="wipe"]{animation-name:wipe;animation-duration:1.35s;animation-timing-function:var(--inout)}
.slide.on [data-a="wipe-up"]{animation-name:wipeUp;animation-duration:1.35s;animation-timing-function:var(--inout)}
.slide.on [data-a="wipe-r"]{animation-name:wipeR;animation-duration:1.35s;animation-timing-function:var(--inout)}
.slide.on [data-a="bar"]{animation-name:barx;transform-origin:left center;animation-duration:1.1s;animation-timing-function:var(--inout)}
.slide.on [data-a="pop"]{animation-name:pop;animation-duration:.9s}
.slide.on [data-a="slide-l"]{animation-name:slideL}
.slide.on [data-a="slide-r"]{animation-name:slideR}
.slide.on [data-a="zoom"]{animation-name:zoomIn;animation-duration:1.8s}
@keyframes rise{from{opacity:0;transform:translate3d(0,64px,0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes wipe{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes wipeR{from{opacity:1;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes wipeUp{from{opacity:1;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes barx{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translate3d(-110px,0,0)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translate3d(110px,0,0)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:none}}
.ln{display:block;overflow:hidden;padding:.06em 0 .14em;margin:-.06em 0 -.14em}
.ln>span{display:block;will-change:transform}
.slide:not(.on) .ln>span{transform:translate3d(0,112%,0)}
.slide.on .ln>span{animation:lnUp 1.15s var(--out) both;animation-delay:calc(var(--d,0)*1s)}
@keyframes lnUp{from{transform:translate3d(0,112%,0)}to{transform:none}}
.draw{fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.slide.on .draw{animation:draw 2.4s var(--inout) both;animation-delay:calc(var(--d,0)*1s)}
@keyframes draw{to{stroke-dashoffset:0}}
.slide:not(.on) .pinpop{opacity:0}
.slide.on .pinpop{animation:pinpop .7s var(--out) both;animation-delay:calc(var(--d,0)*1s);transform-box:fill-box;transform-origin:center}
@keyframes pinpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.slide.on .pulse{animation:pulse 2.6s var(--ease) infinite;animation-delay:calc(var(--d,0)*1s + 1s);transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(3.4)}}

/* ---------- Utilidades ---------- */
.abs{position:absolute}
.hair{position:absolute;height:2px;background:var(--line);transform-origin:left}
.stripe{position:absolute;height:8px;background:linear-gradient(90deg,var(--amarillo),var(--amarillo-2))}
.tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--out);will-change:transform}
.tilt.hov{transition:transform .08s linear}
[data-par]{transition:transform .5s var(--out);will-change:transform}

/* ---------- Pestañas y acordeón (interactivos) ---------- */
.tabbar{display:flex;gap:14px;z-index:20}
.tabbar button{padding:16px 28px;border:2px solid var(--line);font:800 22px/1 "Maven Pro";letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);transition:all .35s var(--out);background:transparent;position:relative}
.tabbar button:hover{color:var(--fg);border-color:var(--fg)}
.tabbar button.on{background:var(--amarillo);border-color:var(--amarillo);color:var(--azul-900)}
.slide[data-theme="light"] .tabbar button.on{background:var(--azul);border-color:var(--azul);color:#fff}
[data-pane]{opacity:0;pointer-events:none;transition:opacity .6s var(--ease),transform .8s var(--out);transform:translate3d(0,24px,0)}
[data-pane].on{opacity:1;pointer-events:auto;transform:none}
.tabbar button .tp-bar{position:absolute;left:0;bottom:-2px;height:4px;width:0;background:var(--amarillo)}
.tabbar button.on .tp-bar{animation:tpb var(--tab-dur,6s) linear forwards}
@keyframes tpb{to{width:100%}}

/* ---------- Marcos de experiencias en vivo ---------- */
.live{position:absolute;overflow:hidden;background:#0b1233;box-shadow:0 40px 90px rgba(5,10,40,.5)}
.live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0b1233;pointer-events:none}
.live.ctl iframe{pointer-events:auto}
.live .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s var(--ease)}
.live.ready .shot{opacity:0}
.live .brk{position:absolute;width:44px;height:44px;border:4px solid var(--amarillo);z-index:4;pointer-events:none}
.live .brk.a{left:14px;top:14px;border-right:0;border-bottom:0}.live .brk.b{right:14px;top:14px;border-left:0;border-bottom:0}
.live .brk.c{left:14px;bottom:14px;border-right:0;border-top:0}.live .brk.d{right:14px;bottom:14px;border-left:0;border-top:0}
.livetag{position:absolute;z-index:5;left:28px;top:26px;display:flex;gap:12px;align-items:center;padding:10px 18px;background:rgba(19,31,82,.9);font:800 20px/1 "Maven Pro";letter-spacing:.2em;text-transform:uppercase;color:#fff;pointer-events:none}
.livetag::before{content:"";width:12px;height:12px;border-radius:50%;background:#ff4d4d;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.explorebtn{position:absolute;z-index:6;right:28px;bottom:26px;padding:16px 26px;background:var(--amarillo);color:var(--azul-900);font:800 22px/1 "Maven Pro";letter-spacing:.14em;text-transform:uppercase;transition:transform .3s var(--out),background .2s}
.explorebtn:hover{transform:translateY(-3px);background:#fff}
body.explore .slide.active .chrome,body.explore .slide.active .foot,body.explore .navarr,body.explore #idxbtn{opacity:0;pointer-events:none}
#exp-exit{position:fixed;right:22px;top:20px;z-index:300;display:none;padding:14px 22px;background:var(--amarillo);color:var(--azul-900);font:800 18px/1 "Maven Pro";letter-spacing:.16em;text-transform:uppercase;box-shadow:0 8px 30px rgba(0,0,0,.4)}
body.explore #exp-exit{display:block}
body>.live.full{position:fixed!important;inset:0!important;left:0!important;top:0!important;width:100vw!important;height:100vh!important;z-index:250;box-shadow:none}
body>.live.full .explorebtn{display:none}
body>.live.full .brk,body>.live.full .livetag{display:none}

/* ---------- Marquesina (clientes) ---------- */
.mq{position:absolute;left:0;right:0;overflow:hidden}
.mq-t{display:flex;gap:28px;width:max-content;animation:mq 46s linear infinite}
.mq.rev .mq-t{animation-direction:reverse;animation-duration:58s}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
html.capturing .mq-t,html.rm .mq-t{animation:none}

/* ---------- Navegación ---------- */
.navarr{position:fixed;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:rgba(19,31,82,.78);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:200;padding:0;opacity:.9;transition:opacity .4s,background .2s,transform .2s;box-shadow:0 4px 18px rgba(0,0,0,.28)}
.navarr.prev{left:18px}.navarr.next{right:18px}
.navarr:hover{background:var(--amarillo);color:#131F52;border-color:var(--amarillo)}
body.idle .navarr{opacity:.5}
html.kiosk body.idle .navarr,html.kiosk body.idle #idxbtn{opacity:0;pointer-events:none}
#idxbtn{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:200;padding:11px 22px;border:2px solid rgba(255,255,255,.7);background:rgba(19,31,82,.82);color:#fff;font:800 14px/1 "Maven Pro";letter-spacing:.2em;text-transform:uppercase;opacity:.75;transition:opacity .3s,background .2s}
#idxbtn:hover{background:var(--amarillo);color:#131F52;border-color:var(--amarillo);opacity:1}
body.idle #idxbtn{opacity:.4}
#idx{position:fixed;inset:0;z-index:400;background:rgba(10,16,52,.96);display:none;overflow:auto}
#idx.on{display:block}
.idx-in{max-width:1500px;margin:0 auto;padding:46px 40px 60px}
.idx-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid rgba(255,255,255,.2);padding-bottom:18px;margin-bottom:30px}
.idx-h b{font:900 44px/1 "Maven Pro";letter-spacing:-.03em}.idx-h span{font:600 15px/1 "Maven Pro";letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.idx-g{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.idx-g button{text-align:left;border:2px solid rgba(255,255,255,.18);padding:0;overflow:hidden;background:#131F52;transition:transform .3s var(--out),border-color .2s;position:relative}
.idx-g button:hover,.idx-g button.cur{border-color:var(--amarillo);transform:translateY(-4px)}
.idx-g img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#1A2A6E}
.idx-g .n{position:absolute;left:0;top:0;background:var(--amarillo);color:#131F52;font:900 20px/1 "Maven Pro";padding:8px 12px}
.idx-g .t{padding:12px 14px 14px;font:700 16px/1.2 "Maven Pro";letter-spacing:.04em}
html.capturing .navarr,html.capturing #idxbtn,html.rm .navarr,html.rm #idxbtn,html.capturing #exp-exit{display:none}

@media print{
  @page{size:1920px 1080px;margin:0}
  html,body{overflow:visible;width:1920px;height:auto;background:#fff}
  #stage{position:relative;transform:none!important;height:auto;overflow:visible}
  .slide{position:relative!important;visibility:visible!important;width:1920px;height:1080px;page-break-after:always;break-after:page}
  #prog,#curt,#hud,.navarr,#idxbtn,#idx{display:none!important}
  .slide [data-a],.slide .ln>span,.slide .draw,.slide .pinpop{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;stroke-dashoffset:0!important}
}