/* TITO v5 — réplica medida de ciaoenergy.com (1440×900): cada cifra viene de /root/ciao-medidas.json */
@font-face{font-family:'Anton';src:url('fonts/Anton-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201A,U+201C-201E}
@font-face{font-family:'Anton';src:url('fonts/Anton.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA}
@font-face{font-family:'Geist';src:url('fonts/Geist-latin.woff2') format('woff2');font-weight:300 500;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/Geist-Mono-latin.woff2') format('woff2');font-weight:300;font-display:swap}
:root{
  --sabor:#D42B9C; --glow:#6A3A5C; --fog:#262626; --arg1:#C2338F; --arg2:#E88AC8;
  --blanco:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#000;color:#fff;font-family:'Geist',sans-serif;font-weight:300;font-size:17.5px;line-height:1.5}
body{overflow-x:hidden}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
/* display: Franklin Gothic ATF Black Italic ≈ Anton oblicua */
.it{font-family:'Anton',sans-serif;font-style:italic;font-weight:400;text-transform:uppercase;line-height:1.2;letter-spacing:.005em}
.t42{font-size:clamp(28px,2.92vw,42px);line-height:.86}          /* 42px medido */
.t108{font-size:clamp(52px,7.5vw,108px);line-height:.8}         /* 108px / 86.4 medido */
.geist12{font-size:12.2px;font-weight:300;line-height:1.5}
.mono{font-family:'Geist Mono',monospace;font-size:10.5px;font-weight:300;color:rgba(255,255,255,.5);line-height:1.5}

/* cargador */
#cargador{position:fixed;inset:0;background:#000;z-index:200;display:grid;place-items:center;transition:opacity .6s,visibility .6s}
#cargador.fuera{opacity:0;visibility:hidden}
#cargador .lg{width:206px}                                       /* vídeo del loader: 206×434 */
#cargador .pct{position:absolute;top:810px;top:90vh;left:50%;transform:translateX(-50%);font-size:14px;font-weight:300;letter-spacing:14px;opacity:.86}

/* nav: ON (58,53) · logo 126×46 centrado top 40 · MENU (1217,53) · CONTACT 91×37 (1291,44) r7 */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:0}
.nav .on{position:absolute;left:4.03vw;top:53px;display:flex;align-items:center;gap:8px;font-size:12.2px;font-weight:300}
.sonido{display:flex;gap:2px;align-items:flex-end;height:10px;background:none;border:0}
.sonido i{width:2px;background:#fff;height:3px}
.sonido.on i{animation:bar .7s ease-in-out infinite alternate}
.sonido.on i:nth-child(2){animation-delay:.15s}.sonido.on i:nth-child(3){animation-delay:.3s}
@keyframes bar{from{height:3px}to{height:10px}}
.nav .logo{position:absolute;left:50%;top:40px;transform:translateX(-50%);height:46px;display:block}
.nav .logo svg{height:46px;width:auto;display:block}
.btn-menu{position:absolute;left:84.5vw;top:53px;background:none;border:0;color:#fff;font-size:12.2px;font-weight:300}
.btn-contacto{position:absolute;left:89.65vw;top:44px;width:91px;height:37px;display:grid;place-items:center;background:#fff;color:#000;text-decoration:none;font-size:12.2px;font-weight:400;text-transform:uppercase;border-radius:7px}
#progreso-pista{position:fixed;top:20px;left:4vw;right:4vw;height:1px;background:rgba(255,255,255,.12);z-index:95}
#progreso{position:absolute;left:0;top:-1px;height:3px;width:0;background:linear-gradient(to right,rgba(255,255,255,0),#fff);border-radius:2px}
@media(max-width:760px){.nav .on{display:none}.btn-menu{left:auto;right:96px}.btn-contacto{left:auto;right:16px}}

/* menú superpuesto */
#velo-menu{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:120;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
#velo-menu.abierto{opacity:1;visibility:visible}
#velo-menu ul{list-style:none;text-align:center}
#velo-menu a{display:block;text-decoration:none;font-size:clamp(34px,4.2vw,60px);line-height:1.25}
#velo-menu a:hover{color:var(--sabor)}
#cerrar-menu{position:absolute;top:44px;right:4vw;background:none;border:0;color:#fff;font-size:26px}

/* marcas de esquina (Geist Mono 10.5 al 50%): "_" en (1376,169) y (1376,791); "C E _" en x58 y451/517/561 */
.marca{position:fixed;z-index:60;pointer-events:none}
.m1{left:95.55vw;top:18.8vh}.m2{left:95.55vw;top:87.9vh}
.m3{left:4.03vw;top:50.1vh}.m4{left:4.03vw;top:57.4vh}.m5{left:4.03vw;top:62.3vh}
.esq{position:fixed;width:9px;height:9px;border:1px solid rgba(255,255,255,.35);z-index:60;pointer-events:none}
.esq.a{left:4vw;top:12vh;border-right:0;border-bottom:0}.esq.b{right:4vw;top:12vh;border-left:0;border-bottom:0}
.esq.c{left:4vw;bottom:5.5vh;border-right:0;border-top:0}.esq.d{right:4vw;bottom:5.5vh;border-left:0;border-top:0}

/* ===== escenario fijo ===== */
#escena{position:fixed;inset:0;z-index:1;overflow:hidden}
/* ambiente medido: bordes #2A2A2A/#20201F, suelo #645576 (morado apagado), centro #534C60 */
.fondo{position:absolute;inset:0;background:
  radial-gradient(60% 42% at 50% 100%, var(--glow) 0%, rgba(0,0,0,0) 70%),
  radial-gradient(70% 60% at 50% 55%, #2E2A33 0%, rgba(0,0,0,0) 80%),
  linear-gradient(to bottom, #1C1C1C 0%, var(--fog) 50%, #141414 100%);
  transition:opacity .8s}
.fondo.mani{background:
  radial-gradient(70% 60% at 30% 40%, color-mix(in srgb,var(--arg2) 55%,var(--arg1)) 0%, rgba(0,0,0,0) 70%),
  linear-gradient(160deg, var(--arg1) 0%, color-mix(in srgb,var(--arg1) 70%,#000) 60%, color-mix(in srgb,var(--arg1) 35%,#000) 100%)}
.fondo.arg{background:
  radial-gradient(60% 50% at 50% 100%, #000 0%, rgba(0,0,0,0) 70%),
  linear-gradient(160deg, var(--arg2) 0%, var(--arg1) 55%, color-mix(in srgb,var(--arg1) 50%,#000) 100%)}
.fondo.gama{background:radial-gradient(60% 45% at 50% 100%, var(--glow) 0%, rgba(0,0,0,0) 70%),linear-gradient(to bottom,#0C0C0C,#1E1E1E 50%,#0A0A0A)}
.vineta{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%)}
#grano{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.045;mix-blend-mode:overlay;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 type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* letras dispersas: filas a 24vh y 74vh, desde 6.8vw cada 17.15vw, 12.2px/300, blanco 30%, mayúsculas */
.letras{position:absolute;inset:0;pointer-events:none}
.letras span{position:absolute;font-size:12.2px;font-weight:300;text-transform:uppercase;color:rgba(255,255,255,.3);transition:opacity .5s}

/* envases: hero 84vh (recortada abajo), perfil/beneficios 75vh centrada (bbox 108→784 de 900) */
.env{position:absolute;top:50%;left:50%;will-change:transform,filter,opacity}
.env img{height:100%;width:auto;pointer-events:none}
#env-c{height:75vh}
#env-c img{-webkit-box-reflect:below 2px linear-gradient(transparent 68%, rgba(255,255,255,.12))}
#env-i,#env-d{height:52vh;filter:brightness(.42) saturate(.8) blur(1.5px) drop-shadow(0 30px 40px rgba(0,0,0,.7));cursor:pointer;transition:filter .4s}
#env-i:hover,#env-d:hover{filter:brightness(.7) saturate(.9) blur(0)}
#env-i{transform:translate(-50%,-44%) translateX(-44.5vw) rotate(-22deg)}
#env-d{transform:translate(-50%,-44%) translateX(44.5vw) rotate(20deg)}
.fila-env{position:absolute;top:50%;left:50%;height:44vh;opacity:0;filter:brightness(.32) saturate(.85) blur(1.5px) drop-shadow(0 26px 36px rgba(0,0,0,.8));transition:filter .8s}
.fila-env img{height:100%;width:auto;pointer-events:none;-webkit-box-reflect:below 2px linear-gradient(transparent 68%, rgba(255,255,255,.12))}
.fila-env.luz{filter:brightness(1.04) drop-shadow(0 0 42px rgba(255,255,255,.28))}
#lampara{position:absolute;left:50%;top:0;transform:translate(-50%,-110%);z-index:5;transition:transform .8s ease}
#lampara.baja{transform:translate(-50%,4%)}
#lampara img{display:block;margin:0 auto;width:170px;height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
#cono{position:absolute;left:50%;top:120px;transform:translateX(-50%);width:360px;height:56vh;background:linear-gradient(to bottom,rgba(255,255,255,.32),rgba(255,255,255,0) 76%);clip-path:polygon(37% 0,63% 0,100% 100%,0 100%);filter:blur(6px);opacity:0;transition:opacity .6s}
#lampara.baja #cono{opacity:1}
#pedestal{position:absolute;left:50%;bottom:0;transform:translate(-50%,130%);width:min(560px,70vw);height:120px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.16),rgba(255,255,255,.04) 55%,transparent 75%);filter:blur(4px);z-index:2;transition:transform .8s ease}
#pedestal.sube{transform:translate(-50%,42%)}

/* hero: nombre centrado abajo (y 721 = 80vh, 2 líneas 42px) + "scroller" a 95.6vh 12.2px 60% */
.txt-hero{position:absolute;left:50%;top:80vh;transform:translateX(-50%);text-align:center;z-index:6;width:min(600px,80vw)}
.txt-hero h1{color:#fff;line-height:.86}
.pista-aviso{position:absolute;left:50%;top:95.6vh;transform:translateX(-50%);font-size:12.2px;font-weight:300;text-transform:uppercase;color:rgba(255,255,255,.6);z-index:6;white-space:nowrap}
/* perfil/beneficios: columna izquierda x=147/1440=10.2vw, título y=366/900=40.7vh, texto y=481 (53.4vh), ancho 392 */
.col{position:absolute;left:10.2vw;top:40.7vh;width:392px;max-width:80vw;z-index:6}
.col h2{color:#fff;margin-bottom:43px}.col h3{color:#fff;margin-bottom:22px}          /* 366→481 con 2 líneas de 50 = 15px hueco + lh */
.col p{font-size:17.5px;font-weight:300;line-height:1.5;color:#fff}
.col .fmt{display:block;margin-top:18px;font-size:12.2px;font-weight:300;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* chip: blanco, texto negro 14px/300 mayúsculas tachado, cajita × del color del sabor; en y=330 (36.7vh), 37px sobre el título */
.chip{display:inline-flex;align-items:stretch;height:21px;margin-bottom:16px;font-size:14px;font-weight:300;text-transform:uppercase;line-height:21px}
.chip .x{width:21px;display:grid;place-items:center;background:var(--sabor);color:#fff;font-size:17.5px;line-height:1}
.chip b{font-weight:300;background:#fff;color:#000;padding:0 8px;text-decoration:line-through;text-decoration-thickness:1px}
.col.mani{top:36.7vh}
.col.mani h3{margin-top:0}

/* riel: 4 círculos 51px en x=1331 (92.4vw), y 294/381/468/555 → 32.7vh + n·9.7vh */
#riel{position:absolute;left:92.4vw;top:32.7vh;z-index:7;pointer-events:none;display:flex;flex-direction:column;gap:calc(9.7vh - 51px)}
#riel button{width:51px;height:51px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.3s;backdrop-filter:blur(4px)}
#riel button svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.5}
#riel button.activa{background:#fff;border-color:#fff}
#riel button.activa svg{stroke:#000}
@media(max-width:900px){#riel{left:auto;right:12px;gap:12px}#riel button{width:40px;height:40px}
  .col{left:6vw;top:auto;bottom:8vh;width:88vw}.col.mani{top:auto;bottom:8vh}
  #env-c{height:58vh}#env-i,#env-d{height:36vh}
  #env-i{transform:translate(-50%,-70%) translateX(-42vw) rotate(-22deg)}#env-d{transform:translate(-50%,-70%) translateX(42vw) rotate(20deg)}
  .fila-env{height:30vh}}

/* pista: 8 tramos de 125vh (medido 1125/900) */
#pista{position:relative;z-index:2;pointer-events:none}
#pista .tramo{height:125vh}

/* ===== flujo posterior sobre la escena (la niebla sigue detrás) ===== */
#resto{position:relative;z-index:10}
.faq{min-height:1540px;padding:67px 10vw 80px}
.faq h2{margin-bottom:70px}
.faq-int{margin-left:16.5vw;width:672px;max-width:80vw}           /* preguntas en x=384 (26.7vw), ancho 672 */
.p-item{margin-bottom:20px}
.p-item>button{width:100%;background:none;border:0;color:#fff;font-size:18px;font-weight:500;text-align:left;padding:0 40px 0 0;position:relative;line-height:1.4}
.p-item>button::after{content:'+';position:absolute;right:0;top:0;font-weight:300}
.p-item.abierta>button::after{content:'–'}
.p-resp{max-height:0;overflow:hidden;transition:max-height .35s ease}
.p-resp p{font-size:15.8px;font-weight:300;line-height:1.5;padding:19px 0 24px}
.news{min-height:611px;padding:68px 0 0;text-align:center}
.news-int{width:490px;max-width:86vw;margin:0 auto}
.news p{font-size:14px;font-weight:300;line-height:1.5;margin:17px 0 36px}
.news input{width:100%;height:49px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;padding:0 18px;border-radius:7px;font-size:14px;margin-bottom:10px}
.news input::placeholder{color:rgba(255,255,255,.5)}
.news button{width:100%;height:49px;background:#fff;color:#000;border:0;font-size:14px;font-weight:400;text-transform:uppercase;border-radius:7px}
.news .legal{font-size:12.2px;font-weight:500;margin-top:25px}
.news .legal a{text-decoration:underline}
.news .ok{display:none;margin-top:14px;font-size:14px}
.pie{padding:80px 10vw 60px;text-align:center}
.pie .cc{font-size:10.5px;font-weight:300;margin-bottom:98px}
.pie .links{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;font-size:10.5px;text-transform:uppercase}
.pie .links a{text-decoration:none}
.pie .links .soc{border:1px solid rgba(255,255,255,.4);border-radius:3.5px;padding:3px 12px;font-size:12.2px;font-weight:400}
.pie .aviso{margin-top:60px;font-size:10.5px;color:rgba(255,255,255,.5);max-width:80ch;margin-left:auto;margin-right:auto}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#lampara,#cono,#pedestal,.fondo,.vineta,.letras,.fila-env,.txt-hero,.pista-aviso{pointer-events:none}
@media(max-width:900px){.faq{padding:60px 6vw}.faq-int{margin-left:0;width:100%;max-width:100%}.faq h2{margin-bottom:40px}}
/* 3D */
#lienzo3d{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block}
.legado{display:none!important}
.flecha-c{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:36px;height:36px;border:0;background:none;color:#fff;font-size:34px;line-height:36px;opacity:1;transition:opacity .4s}
.flecha-c.izq{left:40.5vw}.flecha-c.der{right:40.5vw}
.car-barra{position:absolute;left:50%;top:86.6vh;transform:translateX(-50%);display:flex;gap:6px;z-index:6;transition:opacity .4s}
.car-barra i{display:block;width:60px;height:2px;background:rgba(255,255,255,.18);transition:background .4s}
.car-barra i.activa{background:var(--sabor)}
.txt-hero{top:82vh}
@media(max-width:900px){.flecha-c.izq{left:6vw}.flecha-c.der{right:6vw}.car-barra i{width:36px}}

.zero{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-size:clamp(90px,17vw,250px);line-height:.85;text-align:center;color:rgba(255,255,255,.55);-webkit-text-stroke:2px rgba(255,255,255,.35);opacity:0;pointer-events:none;white-space:nowrap;will-change:transform,opacity}
.fondo.arg{background:radial-gradient(60% 50% at 50% 55%, var(--arg2) 0%, var(--arg1) 50%, color-mix(in srgb,var(--arg1) 55%,#000) 100%)}
#progreso{background:linear-gradient(to right,rgba(255,255,255,0),var(--sabor))}

.fondo.mani{background:radial-gradient(75% 70% at 35% 45%, color-mix(in srgb,var(--arg2) 60%,var(--arg1)) 0%, var(--arg1) 45%, color-mix(in srgb,var(--arg1) 45%,#000) 100%)}
.fondo.arg{background:radial-gradient(65% 60% at 50% 50%, var(--arg2) 0%, var(--arg1) 55%, color-mix(in srgb,var(--arg1) 70%,#000) 100%)}
.zero{color:rgba(255,255,255,.42);-webkit-text-stroke:2px rgba(255,255,255,.5)}
/* luces: tipografía con halo, barra degradada con punto luminoso, riel con aro, progreso con brillo */
.txt-hero h1,.col h2,.col h3{text-shadow:0 0 18px rgba(255,255,255,.55),0 0 42px rgba(255,255,255,.25)}
.car-barra{width:400px;height:14px;align-items:center;gap:0}
.car-linea{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:linear-gradient(to right,#4EC8F0,#D42B9C 40%,#F5762E 75%,#F2C230)}
#car-punto{position:absolute;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 22px var(--sabor);transition:left .8s cubic-bezier(.65,0,.35,1)}
.flecha-c{font-size:0;width:28px;height:40px;display:grid;place-items:center}
.flecha-c::before{content:'⋮';font-size:22px;color:rgba(255,255,255,.9);letter-spacing:0}
#riel button.activa{box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 22px rgba(255,255,255,.55)}
#riel button:not(.activa){background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
#riel button:not(.activa) svg{stroke:rgba(255,255,255,.5)}
#riel::before{content:'';position:absolute;left:25px;top:0;bottom:0;border-left:1px dotted rgba(255,255,255,.22);z-index:-1}
#progreso{box-shadow:0 0 8px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.5)}
.pista-aviso{top:96vh}

.fondo.mani{background:radial-gradient(70% 65% at 35% 45%, color-mix(in srgb,var(--arg2) 55%,var(--arg1)) 0%, var(--arg1) 48%, color-mix(in srgb,var(--arg1) 72%,#000) 100%)}

.fondo.mani{background:radial-gradient(60% 55% at 40% 40%, color-mix(in srgb,var(--arg2) 45%,var(--arg1)) 0%, var(--arg1) 40%, color-mix(in srgb,var(--arg1) 55%,#000) 80%, color-mix(in srgb,var(--arg1) 30%,#000) 100%)}
.fondo.arg{background:radial-gradient(60% 55% at 50% 50%, var(--arg2) 0%, var(--arg1) 50%, color-mix(in srgb,var(--arg1) 55%,#000) 100%)}

.txt-hero{top:85vh}
.pista-aviso{top:96.5vh}

/* el fondo ahora lo pinta la escena 3D */
.fondo,.fondo.mani,.fondo.arg,.fondo.gama{background:#000!important}
/* el lienzo 3D ahora pinta el fondo (opaco): el texto gigante del argumento pasa por encima con fundido suave */
.zero{z-index:4;mix-blend-mode:soft-light;color:rgba(255,255,255,.9);-webkit-text-stroke:0}

/* CTA del último tramo de la botella y selector en la gama entera */
.cta-gama{position:absolute;left:50%;top:82vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:6;visibility:hidden;opacity:0}
.cta-gama span{color:rgba(255,255,255,.75)}
.btn-gama{background:#fff;color:#000;border:0;border-radius:7px;padding:14px 26px;font-family:'Geist';font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 0 24px rgba(255,255,255,.35)}
.btn-gama:hover{box-shadow:0 0 34px rgba(255,255,255,.6)}
.elige{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;z-index:6;visibility:hidden;opacity:0}
.elige span{color:rgba(255,255,255,.7);margin-right:6px}
.elige button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:99px;padding:9px 18px;font-family:'Anton';font-style:italic;text-transform:uppercase;font-size:15px;letter-spacing:.03em;transition:.25s}
.elige button:hover{background:#fff;color:#000}
.faq{min-height:auto;padding-bottom:110px}
#cta-gama,#elige{pointer-events:auto}
.txt-hero{top:87vh}
.car-barra{top:84.5vh}
.pista-aviso{top:97vh}

/* selector de cerveza en la portada: nombres bajo la fila, el activo encendido; también se puede pulsar la botella */
.elige-hero{position:absolute;left:50%;top:79vh;transform:translateX(-50%);display:flex;gap:8px;z-index:6;pointer-events:auto}
.elige-hero button{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.85);border-radius:99px;padding:8px 16px;font-family:'Anton';font-style:italic;text-transform:uppercase;font-size:14px;letter-spacing:.03em;transition:.25s;backdrop-filter:blur(4px)}
.elige-hero button:hover{border-color:#fff;color:#fff}
.elige-hero button.activa{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.45)}
.txt-hero{top:86vh}
.car-barra{top:83.5vh}
@media (max-width:900px){.elige-hero{gap:5px;top:76vh}.elige-hero button{padding:6px 10px;font-size:12px}}
/* nombres bajo cada envase (portada) */
#nombres3d{position:absolute;inset:0;z-index:6;pointer-events:none}
.tag3d{position:absolute;left:0;top:0;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.9);border-radius:99px;padding:7px 14px;font-family:'Anton';font-style:italic;text-transform:uppercase;font-size:13px;letter-spacing:.03em;white-space:nowrap;opacity:0;transition:opacity .3s,background .25s,color .25s;backdrop-filter:blur(4px);will-change:transform}
.tag3d:hover{border-color:#fff;color:#fff}
.tag3d.activa{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 16px rgba(255,255,255,.45)}
.elige-hero{display:none}
/* selector de la cascada: por encima de todo y solo en su tramo */
.elige{z-index:9}
#escena .elige button{position:relative;z-index:1;cursor:pointer}
/* ===== MÓVIL: portada y lupa ===== */
@media(max-width:760px){
  .nav .logo{left:16px;transform:none;top:22px}.nav .logo svg{height:34px}
  .btn-contacto{display:none}.btn-menu{right:16px;top:22px}
  .col{left:6vw;width:88vw;max-width:88vw;top:auto;bottom:9vh}
  .col h2,.col h3{font-size:34px}
  #riel{top:auto;bottom:34vh;right:10px;gap:10px}#riel button{width:34px;height:34px}
  .txt-hero{top:80vh}.car-barra{top:77vh;width:70vw}.pista-aviso{top:94vh}
  .tag3d{font-size:11px;padding:5px 10px}
  .cta-gama{top:78vh}.elige{bottom:5vh}
  .zero{font-size:22vw}
}
@media(max-width:760px){
  .col{bottom:5vh}.col h2,.col h3{font-size:28px;line-height:.9}.col p{font-size:14px;line-height:1.45;margin-top:10px}
  #riel{bottom:auto;top:12vh;right:8px}
}
@media(max-width:760px){#riel{right:4px}#riel button{width:30px;height:30px}#riel svg{width:14px;height:14px}}
/* aviso de arrastre en la portada; la escena admite gestos horizontales (pan-y deja el scroll vertical al navegador) */
#escena{touch-action:pan-y}
#lienzo3d{cursor:grab}
.aviso-desliza{position:absolute;left:50%;top:73vh;transform:translateX(-50%);color:rgba(255,255,255,.85);white-space:nowrap;z-index:6;pointer-events:none;letter-spacing:.06em;text-transform:uppercase;font-size:11px;text-shadow:0 1px 6px rgba(0,0,0,.6);animation:aviso-lat 2.4s ease-in-out infinite}
.aviso-desliza .flecha{display:inline-block;font-size:14px}
@keyframes aviso-lat{0%,100%{transform:translateX(-50%)}50%{transform:translateX(calc(-50% + 6px))}}
@media(min-width:761px){.aviso-desliza{top:71vh}}