/* AUDIOTECH · Catálogo interactivo · estilo «B» claro
   papel #F2F3EF · blanco · pizarra #3E4B51/#344147 · negro #1D1D1B · acento lima #B6CD36 */

@font-face{font-family:'BSC';src:url('fonts/barlow-sc-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'BSC';src:url('fonts/barlow-sc-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'BSC';src:url('fonts/barlow-sc-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'BSC';src:url('fonts/barlow-sc-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'BSC';src:url('fonts/barlow-sc-extrabold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'VogieBI';src:url('fonts/vogie-bi.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Jamal';src:url('fonts/jamal.woff2') format('woff2');font-display:swap}

:root{
  --paper:#F2F3EF; --paper2:#E7E8E2; --white:#FFFFFF;
  --slate:#3E4B51; --slate2:#344147; --ink:#1D1D1B;
  --lime:#B6CD36; --lime2:#A3B92A; --lime-soft:rgba(182,205,54,.22);
  --hair:rgba(52,65,71,.16); --hair2:rgba(52,65,71,.09);
  --r1:10px; --r2:16px; --r3:24px;
  --tb-h:58px; --tab-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --pad:20px; --maxw:1320px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sombra:0 18px 40px -22px rgba(29,29,27,.35);
}
@media (min-width:768px){:root{--pad:32px}}
@media (min-width:1024px){:root{--tb-h:76px;--tab-h:0px;--pad:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'BSC',system-ui,sans-serif;font-size:17px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;
  overflow-x:hidden;min-height:100vh;min-height:100dvh;overscroll-behavior-y:none}
@supports (overflow:clip){body{overflow-x:clip}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r1)}
.saltar:focus{left:8px}
.vg{font-family:'VogieBI',sans-serif;font-weight:400;letter-spacing:.005em;line-height:1}
.jamal{font-family:'Jamal',sans-serif;font-weight:400;letter-spacing:.06em;line-height:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* papel técnico: retícula de puntos suave, como el catálogo impreso */
.puntos-bg{background-image:radial-gradient(circle,rgba(62,75,81,.14) 1.1px,transparent 1.4px);background-size:22px 22px}

/* etiqueta sesgada lima (firma del catálogo) */
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:var(--ink);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 14px 4px;transform:skewX(-11deg);white-space:nowrap}
.tag > *{transform:skewX(11deg)}
.tag.oscura{background:var(--ink);color:var(--paper)}
.tag.suave{background:var(--white);color:var(--slate2);box-shadow:inset 0 0 0 1.5px var(--hair)}

/* ------------------------------------------------------------------ barra superior */
.topbar{position:fixed;left:0;right:0;top:0;z-index:60;height:calc(var(--tb-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 10px 0;
  display:flex;align-items:center;gap:6px;background:rgba(242,243,239,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--hair2);transition:transform .35s var(--ease),background .3s}
.tb-atras,.tb-compartir{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;transition:background .2s,transform .15s}
.tb-atras svg,.tb-compartir svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tb-atras:active,.tb-compartir:active{transform:scale(.92);background:var(--paper2)}
.tb-logo{display:flex;align-items:center;height:44px;padding:0 4px;margin-right:auto}
.tb-logo img{height:30px;width:auto}
.tb-secciones,.tb-acciones{display:none}
.tb-compartir{visibility:hidden}
body[data-vista="producto"] .tb-compartir{visibility:visible}
/* en el inicio (celular) la portada ya lleva el logo: la barra se oculta */
body[data-vista="inicio"] .topbar{transform:translateY(-110%)}
body[data-vista="inicio"].scrolled .topbar{transform:none}
body[data-vista="inicio"] .tb-atras{display:none}
body[data-vista="inicio"] .tb-logo{padding-left:10px}

@media (min-width:1024px){
  .topbar{padding:0 var(--pad);gap:28px;transform:none!important}
  .tb-atras,.tb-compartir{display:none}
  .tb-logo{margin-right:0;padding:0}
  .tb-logo img{height:38px}
  .tb-secciones{display:flex;gap:4px;margin-right:auto}
  .tb-secciones a{display:flex;align-items:baseline;gap:7px;padding:10px 14px;border-radius:var(--r1);font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate2);transition:background .2s,color .2s}
  .tb-secciones a i{font-family:'VogieBI';font-style:normal;font-size:13px;color:var(--slate);opacity:.75}
  .tb-secciones a:hover{background:var(--white)}
  .tb-secciones a.on{background:var(--ink);color:var(--paper)}
  .tb-secciones a.on i{color:var(--lime);opacity:1}
  .tb-acciones{display:flex;gap:8px}
  .tb-btn{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r1);background:var(--white);font-weight:700;font-size:16px;color:var(--slate2);box-shadow:inset 0 0 0 1px var(--hair2);transition:background .2s,transform .15s}
  .tb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tb-btn:hover{background:var(--lime-soft)}
  .tb-btn.on{background:var(--lime);color:var(--ink);box-shadow:none}
  .tb-btn .badge{position:static;margin-left:2px}
  body[data-vista="inicio"] .tb-logo{padding-left:0}
}

/* ------------------------------------------------------------------ barra inferior */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--tab-h) + var(--safe-b));padding:6px 8px var(--safe-b);
  display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-top:1px solid var(--hair2)}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;color:var(--slate);font-weight:600;font-size:13px;letter-spacing:.02em;transition:color .2s,transform .15s}
.tabbar a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.tabbar a::before{content:"";position:absolute;top:2px;width:46px;height:30px;border-radius:10px;background:var(--lime);transform:scale(.4);opacity:0;transition:transform .35s var(--ease),opacity .25s;z-index:-1}
.tabbar a.on{color:var(--ink);font-weight:700}
.tabbar a.on::before{transform:none;opacity:1}
.tabbar a:active{transform:scale(.94)}
.badge{position:absolute;top:0;left:calc(50% + 8px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ink);color:#fff;font:700 12px/20px 'BSC';text-align:center}
.badge[hidden]{display:none}
@media (min-width:1024px){.tabbar{display:none}}

/* ------------------------------------------------------------------ contenedor de vistas */
.vista{display:block;min-height:100vh;padding-top:calc(var(--tb-h) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--tab-h) + var(--safe-b) + 24px);outline:none}
body[data-vista="inicio"] .vista{padding-top:0}
@media (min-width:1024px){body[data-vista="inicio"] .vista{padding-top:var(--tb-h)}}
.envoltura{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.cargando{min-height:70vh;display:grid;place-items:center}
.cargando span{width:42px;height:42px;border-radius:50%;border:4px solid var(--paper2);border-top-color:var(--lime);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ PORTADA
   Texto y escena en zonas separadas (filas en celular, columnas desde 700 px): el texto nunca queda sobre el producto. */
.portada{position:relative;overflow:hidden;background:var(--paper);isolation:isolate;display:flex;flex-direction:column}
.portada .puntos-bg{position:absolute;inset:0;z-index:-3;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 92%);mask-image:linear-gradient(180deg,#000 30%,transparent 92%)}
.p-texto{position:relative;z-index:3;padding:calc(env(safe-area-inset-top,0px) + 22px) var(--pad) 0}
.p-logo{width:clamp(170px,48vw,210px);height:auto}
.p-titulo{margin:16px 0 12px;font-weight:800;font-size:clamp(32px,9.4vw,46px);line-height:.98;letter-spacing:-.005em;color:var(--ink)}
.p-titulo span{display:block;color:var(--slate)}
.p-texto .tag{font-size:clamp(14px,1vw,17px)}
.p-escena{position:relative;z-index:1;container-type:size;height:clamp(330px,98vw,520px);margin-top:8px}
.p-par{position:absolute;inset:0;pointer-events:none;will-change:transform}
/* bloque oscuro diagonal con filete lima (como la portada impresa) */
.p-losa{position:absolute;inset:0;background:linear-gradient(160deg,#3E4B51 0%,#2B363B 55%,#1D1D1B 100%);clip-path:polygon(64% 0,100% 0,100% 100%,8% 100%)}
.p-filete{position:absolute;inset:0;background:var(--lime);clip-path:polygon(58.5% 0,62% 0,6% 100%,2.5% 100%)}
.p-humo{position:absolute;pointer-events:none;user-select:none;max-width:none}
.p-humo.h1{width:128%;left:-12%;bottom:-6%;opacity:.95}
.p-humo.h2{width:78%;right:-26%;top:-2%;opacity:.8}
.p-heroe{position:absolute;z-index:2;display:block;left:0;right:0;margin:0 auto;top:2%;width:min(82cqw,calc(100cqh - 112px));pointer-events:auto}
.p-heroe img{width:100%;filter:drop-shadow(0 26px 30px rgba(29,29,27,.45))}
.p-sombra{position:absolute;left:12%;right:12%;bottom:-4%;height:12%;background:radial-gradient(50% 50% at 50% 50%,rgba(29,29,27,.55),rgba(29,29,27,0) 70%);filter:blur(4px);z-index:-1}
.p-cod{position:absolute;z-index:3;right:var(--pad);bottom:46px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:var(--white);text-align:right;max-width:70%}
.p-cod b{font-size:clamp(18px,5.4vw,24px);line-height:1.05}
.p-cod small{font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#D9DED6}
.p-buscar{position:relative;z-index:3;margin-top:22px;display:none}
@media (min-width:700px){
  .portada{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);height:clamp(470px,52vw,720px)}
  .p-texto{align-self:center;padding:0 clamp(18px,3vw,44px) 24px max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)))}
  .p-logo{width:clamp(180px,19vw,300px)}
  .p-titulo{font-size:clamp(36px,4.6vw,72px);margin:clamp(16px,2vw,28px) 0 clamp(12px,1.2vw,18px)}
  .p-escena{height:100%;margin:0}
  .p-losa{clip-path:polygon(26% 0,100% 0,100% 100%,6% 100%)}
  .p-filete{clip-path:polygon(20.5% 0,23.2% 0,3.2% 100%,.5% 100%)}
  .p-humo.h1{width:96%;left:auto;right:-6%;bottom:-8%}
  .p-humo.h2{width:58%;right:-14%;top:-12%}
  .p-heroe{left:12%;right:0;top:6%;width:min(74cqw,calc(100cqh - 150px))}
  .p-cod{right:clamp(18px,3vw,48px);bottom:clamp(20px,4cqh,36px)}
}
@media (min-width:700px){.p-buscar{display:block;max-width:440px}.inicio-buscar{display:none}.p-cod b{font-size:clamp(18px,2.1vw,26px)}}

/* ------------------------------------------------------------------ buscador */
.buscador{position:relative;width:100%;display:flex;align-items:center;gap:12px;height:60px;padding:0 10px 0 18px;border-radius:var(--r2);background:var(--white);
  box-shadow:0 1px 0 rgba(29,29,27,.04),0 14px 34px -20px rgba(29,29,27,.45),inset 0 0 0 1.5px var(--hair2);transition:box-shadow .25s}
.buscador:focus-within{box-shadow:0 14px 34px -18px rgba(29,29,27,.5),inset 0 0 0 2px var(--lime2)}
.buscador svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--slate2);stroke-width:2.2;stroke-linecap:round}
.buscador input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:18px;font-weight:500;color:var(--ink)}
.buscador input::placeholder{color:#5F6B70;opacity:1}
.buscador input::-webkit-search-cancel-button{display:none}
.bus-borrar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--paper)}
.bus-borrar svg{width:18px;height:18px;stroke-width:2.4}
.bus-borrar[hidden]{display:none}

.inicio-buscar{position:relative;z-index:4;margin-top:-30px}


/* ------------------------------------------------------------------ bloques del inicio */
.bloque{padding:40px 0 8px}
.bloque-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.bloque-hd h2{margin:0;font-weight:800;font-size:26px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:12px}
.bloque-hd h2::after{content:"";width:28px;height:8px;background:var(--lime);transform:skewX(-11deg)}
.bloque-hd a{font-weight:700;font-size:15px;color:var(--slate2);padding:8px 0;border-bottom:2px solid var(--lime)}
@media (min-width:1024px){.bloque{padding:64px 0 8px}.bloque-hd h2{font-size:34px}}

/* tarjetas de sección */
.secciones{display:grid;gap:14px}
@media (min-width:768px){.secciones{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.secciones{grid-template-columns:repeat(4,1fr);gap:18px}}
.sec-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:204px;padding:18px 20px 18px;border-radius:var(--r3);
  background:var(--white);overflow:hidden;isolation:isolate;box-shadow:var(--sombra);transition:transform .25s var(--ease),box-shadow .25s;container-type:inline-size}
/* placa oscura sesgada con sombra lima: la misma forma del logo */
.sc-placa{position:absolute;z-index:-1;right:22px;top:16px;width:50%;height:56%;border-radius:12px;background:linear-gradient(160deg,#4A585E,#2B363B 60%,#1D1D1B);transform:skewX(-11deg);box-shadow:7px 7px 0 var(--lime)}
.sec-card .sc-num{position:relative;height:46px;width:auto;align-self:flex-start}
.sec-card .sc-pie{position:relative;display:flex;flex-direction:column;gap:8px}
.sec-card .sc-nom{font-size:min(24px,7.6cqi);letter-spacing:.04em;color:var(--slate2);white-space:nowrap}
.sec-card .sc-ver{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--ink)}
.sec-card .sc-ver svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.sec-card .sc-foto{position:absolute;z-index:0;right:8px;top:-8px;width:min(42%,180px);max-width:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.4));transition:transform .45s var(--ease)}
.sec-card:active{transform:scale(.975)}
@media (hover:hover){.sec-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(29,29,27,.45)}.sec-card:hover .sc-foto{transform:scale(1.06) rotate(-3deg)}.sec-card:hover .sc-ver svg{transform:translateX(4px)}}
@media (min-width:1180px){
  .sec-card{min-height:340px;padding:22px}
  .sc-placa{right:26px;top:70px;width:64%;height:48%}
  .sec-card .sc-foto{right:4%;top:56px;width:74%}
  .sec-card .sc-nom{font-size:min(26px,9cqi)}
}

/* carrusel horizontal: sin barras, arrastre con mouse, inercia, snap y fundido en los bordes */
.car-envoltura{position:relative;margin:0 calc(var(--pad) * -1)}
.carrusel{--gap:14px;--col:min(46%,250px);--fl:0px;--fr:56px;display:grid;grid-auto-flow:column;grid-auto-columns:var(--col);gap:var(--gap);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:10px var(--pad) 18px;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.carrusel::-webkit-scrollbar{display:none;width:0;height:0}
.carrusel > *{scroll-snap-align:start}
.carrusel img{-webkit-user-drag:none;user-select:none}
.carrusel.medio{--fl:44px}
.carrusel.ini{--fl:0px}
.carrusel.fin{--fr:0px}
.carrusel.arrastrando{scroll-snap-type:none;cursor:grabbing;user-select:none}
.carrusel.arrastrando a{pointer-events:none}
@media (min-width:600px){.carrusel{--col:calc((100% - 2 * var(--gap)) / 3.25)}}
@media (min-width:1024px){
  .car-envoltura{margin:0}
  .carrusel{--gap:22px;--col:calc((100% - 3 * var(--gap)) / 4);padding:10px 0 20px;scroll-padding:0;cursor:grab}
}
@media (min-width:1500px){.carrusel{--col:calc((100% - 4 * var(--gap)) / 5)}}
.car-flecha{display:none}
@media (hover:hover) and (pointer:fine){
  .car-flecha{position:absolute;top:calc(50% - 64px);z-index:4;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--white);color:var(--ink);
    box-shadow:0 14px 30px -14px rgba(29,29,27,.55),inset 0 0 0 1px var(--hair2);transition:opacity .25s,background .2s,box-shadow .2s}
  .car-flecha svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .car-flecha.ant{left:-8px}.car-flecha.sig{right:-8px}
  .car-flecha:hover{background:var(--lime);box-shadow:0 16px 30px -12px rgba(120,140,20,.8)}
  .car-flecha[disabled]{opacity:0;pointer-events:none}
}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){.car-flecha.ant{left:-27px}.car-flecha.sig{right:-27px}}

/* ------------------------------------------------------------------ tarjeta de producto (sin caja gris) */
.card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r2);transition:transform .2s var(--ease)}
.card:active{transform:scale(.965)}
.card-media{position:relative;aspect-ratio:1/1;display:grid;place-items:center;isolation:isolate}
.card-media::before{content:"";position:absolute;inset:4% 0 0;z-index:-2;background:radial-gradient(closest-side,#FFFFFF 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,0) 100%)}
.card-media::after{content:"";position:absolute;left:16%;right:16%;bottom:3%;height:9%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(29,29,27,.32),rgba(29,29,27,0) 72%)}
.card-media img{width:92%;height:92%;object-fit:contain;transition:transform .45s var(--ease)}
@media (hover:hover){.card:hover .card-media img{transform:scale(1.05) translateY(-4px)}}
.card-body{display:flex;flex-direction:column;gap:5px;padding:6px 4px 4px}
.card-tipo{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.card-cod{font-size:21px;color:var(--ink);overflow-wrap:anywhere}
.card-dato{align-self:flex-start;margin-top:3px;font-weight:700;font-size:15px;color:var(--ink);background:var(--lime-soft);padding:2px 10px;border-radius:6px}
@media (min-width:1024px){.card-cod{font-size:24px}}

.rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
@media (min-width:768px){.rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}}
@media (min-width:1180px){.rejilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px}}

/* ------------------------------------------------------------------ SECCIÓN */
.sec-hd{position:relative;isolation:isolate;overflow:hidden;padding:26px 0 20px}
.sec-hd .puntos-bg{position:absolute;inset:0;z-index:-2;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.sec-hd-humo{position:absolute;z-index:-1;right:-22%;top:-30%;width:78%;max-width:640px;opacity:.75;pointer-events:none}
.sec-hd-fila{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sec-hd-num{height:64px;width:auto}
.sec-hd h1{margin:0 0 4px;font-size:min(64px,8.2vw);color:var(--slate2);white-space:nowrap}
.sec-hd .tag{margin-top:14px}
@media (min-width:1024px){.sec-hd{padding:48px 0 28px}.sec-hd-num{height:96px}.sec-hd-humo{right:-4%;top:-60%;width:44%}}

.filtros{position:sticky;top:calc(var(--tb-h) + env(safe-area-inset-top,0px));z-index:20;background:rgba(242,243,239,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  margin:0 calc(var(--pad) * -1) 18px;padding:10px 0 10px;border-bottom:1px solid var(--hair2)}
.chips{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px var(--pad);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips + .chips{margin-top:8px}
.chips-rot{flex:none;align-self:center;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-right:2px}
.chip{flex:none;height:40px;padding:0 16px;border-radius:var(--r1);background:var(--white);font-weight:700;font-size:16px;color:var(--slate2);box-shadow:inset 0 0 0 1.5px var(--hair);
  transition:background .2s,color .2s,box-shadow .2s,transform .15s;white-space:nowrap}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--ink);color:var(--white);box-shadow:none}
.chip.on.lima{background:var(--lime);color:var(--ink)}
@media (hover:hover){.chip:not(.on):hover{background:var(--lime-soft)}}

.grupo-hd{display:flex;align-items:center;gap:14px;margin:30px 0 14px}
.grupo-hd:first-child{margin-top:6px}
.grupo-hd .tag b{font-family:'VogieBI';font-weight:400;font-size:20px;letter-spacing:.02em}
.grupo-hd hr{flex:1;border:0;height:1px;background:var(--hair);margin:0}

/* ------------------------------------------------------------------ FICHA DE PRODUCTO */
.ficha{display:grid;gap:8px;padding-top:6px}
@media (min-width:1024px){.ficha{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:start;padding-top:28px}}
.galeria{position:relative;isolation:isolate;margin:0 calc(var(--pad) * -1);overflow:hidden}
@media (min-width:1024px){.galeria{margin:0;position:sticky;top:calc(var(--tb-h) + 20px);overflow:visible}}
.gal-humo{position:absolute;z-index:-1;left:50%;top:50%;width:130%;max-width:none;transform:translate(-50%,-46%);opacity:.6;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.gal-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y;cursor:zoom-in}
.gal-pista::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;height:min(96vw,460px);display:grid;place-items:center;position:relative;padding:4% 7%}
.gal-slide::after{content:"";position:absolute;left:22%;right:22%;bottom:5%;height:7%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(29,29,27,.3),rgba(29,29,27,0) 72%)}
.gal-slide img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 20px 26px rgba(29,29,27,.28))}
@media (min-width:1024px){.gal-slide{height:min(62vh,600px)}.gal-humo{width:108%;opacity:.42}}
.gal-pie{display:flex;align-items:center;justify-content:center;gap:14px;height:34px}
.puntos{display:flex;gap:8px;align-items:center}
.puntos button{width:9px;height:9px;border-radius:5px;background:rgba(52,65,71,.28);transition:width .3s var(--ease),background .3s}
.puntos button.on{width:26px;background:var(--ink)}
.gal-zoom{position:absolute;right:calc(var(--pad) - 4px);bottom:44px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--white);box-shadow:var(--sombra)}
.gal-zoom svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
@media (min-width:1024px){.gal-zoom{right:12px}}
.gal-flecha{display:none}
@media (hover:hover){
  .gal-flecha{position:absolute;top:calc(50% - 40px);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--white);box-shadow:var(--sombra);opacity:0;transition:opacity .2s,transform .2s}
  .gal-flecha svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .gal-flecha.ant{left:10px}.gal-flecha.sig{right:10px}
  .galeria:hover .gal-flecha{opacity:1}
  .gal-flecha:hover{transform:scale(1.08)}
}

.f-info{min-width:0}
.f-ruta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.f-ruta a{border-bottom:2px solid var(--lime)}
.f-cod{margin:14px 0 8px;font-size:clamp(40px,12vw,64px);color:var(--ink);overflow-wrap:anywhere}
.f-tipo{margin:0;font-weight:500;font-size:19px;color:var(--slate2)}
.claves{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin:22px 0 4px;border-top:2px solid var(--ink);border-bottom:1px solid var(--hair)}
.clave{padding:14px 10px 14px 0;min-width:0}
.clave + .clave{padding-left:14px;border-left:1px solid var(--hair)}
.clave b{display:block;font-weight:800;font-size:clamp(24px,7vw,32px);line-height:1.05;color:var(--ink);white-space:nowrap}
.clave b small{font-size:.62em;font-weight:700;margin-left:2px}
.clave > span{display:block;margin-top:4px;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.clave.larga b{white-space:normal;font-size:20px}

.acciones{display:grid;grid-template-columns:1fr auto;gap:10px;margin:22px 0 6px}
.acciones .btn-2,.acciones .btn-3{padding:0 14px;white-space:nowrap}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 18px;border-radius:12px;font-weight:700;font-size:17px;
  letter-spacing:.01em;transition:transform .15s var(--ease),background .2s,color .2s,box-shadow .2s;user-select:none;text-align:center;line-height:1.15}
.btn svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:scale(.96)}
.btn-wa{grid-column:1/-1;background:var(--lime);color:var(--ink);min-height:58px;font-size:18px;box-shadow:0 14px 28px -16px rgba(120,140,20,.9)}
.btn-wa svg{fill:var(--ink);stroke:none}
.btn-wa:hover{background:#C2D84A}
.btn-2{background:var(--slate2);color:#fff}
.btn-2:hover{background:var(--slate)}
.btn-2.on{background:var(--ink)}
.btn-3{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair)}
.btn-3:hover{background:var(--lime-soft)}
.btn-3.on{background:var(--ink);color:#fff;box-shadow:none}
.btn-txt{min-height:44px;padding:0 6px;color:var(--slate2);font-weight:700;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:5px}

.f-sub{margin:34px 0 10px;font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:12px}
.f-sub::after{content:"";flex:1;height:1px;background:var(--hair)}
.specs{margin:0;display:grid;grid-template-columns:minmax(118px,40%) 1fr;column-gap:16px}
.specs dt,.specs dd{margin:0;padding:12px 0;border-bottom:1px solid var(--hair2)}
.specs dt{font-weight:600;font-size:15px;color:var(--slate);letter-spacing:.01em;padding-top:13px}
.specs dd{font-weight:700;font-size:17px;color:var(--ink);line-height:1.35}
.interes{padding-top:20px}

/* ------------------------------------------------------------------ BUSCAR */
.bus-hd{position:sticky;top:calc(var(--tb-h) + env(safe-area-inset-top,0px));z-index:20;padding:14px 0 12px;background:linear-gradient(var(--paper) 82%,rgba(242,243,239,0))}
.bus-hd h1{margin:6px 0 14px;font-weight:800;font-size:30px;line-height:1;text-transform:uppercase}
@media (min-width:1024px){.bus-hd h1{font-size:40px;margin-top:22px}}
.sugerencias{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.sug{height:40px;padding:0 14px;border-radius:var(--r1);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--hair);font-weight:700;font-size:16px;color:var(--slate2);transition:background .2s,transform .15s}
.sug:active{transform:scale(.95)}
.sug.cod{font-family:'VogieBI';font-weight:400;font-size:15px;color:var(--ink);background:var(--lime-soft);box-shadow:none}
@media (hover:hover){.sug:hover{background:var(--lime-soft)}}
.bus-rot{margin:22px 0 10px;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.vacio{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 10px 20px;position:relative;isolation:isolate}
.vacio img.vacio-humo{position:absolute;z-index:-1;top:-10px;width:300px;opacity:.55}
.vacio h2{margin:24px 0 8px;font-weight:800;font-size:26px;line-height:1.1;color:var(--ink)}
.vacio p{margin:0 0 20px;max-width:420px;font-size:17px;color:var(--slate2)}
.vacio-ico{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:var(--white);box-shadow:var(--sombra)}
.vacio-ico svg{width:40px;height:40px;fill:none;stroke:var(--slate2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------------ MI LISTA */
.pag-hd{padding:20px 0 12px}
.pag-hd h1{margin:0;font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.pag-hd h1::after{content:"";width:28px;height:8px;background:var(--lime);transform:skewX(-11deg)}
.pag-hd p{margin:10px 0 0;color:var(--slate2);font-size:17px;max-width:560px}
@media (min-width:1024px){.pag-hd{padding:40px 0 18px}.pag-hd h1{font-size:40px}}
.lista{display:grid;gap:12px;margin-top:10px}
@media (min-width:900px){.lista{grid-template-columns:1fr 1fr;gap:16px}}
.item{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:14px;padding:10px 10px 10px 8px;border-radius:var(--r2);background:var(--white);box-shadow:0 10px 26px -20px rgba(29,29,27,.5)}
.item-foto{width:92px;height:92px;display:grid;place-items:center}
.item-foto img{width:100%;height:100%;object-fit:contain}
.item-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.item-txt b{font-size:20px;color:var(--ink)}
.item-txt span{font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.item-txt em{font-style:normal;font-weight:700;font-size:15px;color:var(--ink)}
.item-quitar{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--paper)}
.item-quitar svg{width:20px;height:20px;fill:none;stroke:var(--slate2);stroke-width:2.2;stroke-linecap:round}
.item-quitar:active{transform:scale(.92)}
.lista-pie{position:sticky;bottom:calc(var(--tab-h) + var(--safe-b) + 10px);z-index:10;margin-top:22px;display:grid;gap:8px;padding:12px;border-radius:var(--r3);background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -18px rgba(29,29,27,.45)}
.lista-pie .btn-wa{width:100%}
.lista-pie .fila{display:flex;justify-content:space-between;align-items:center;gap:10px}
@media (min-width:1024px){.lista-pie{max-width:560px;bottom:24px}}

/* ------------------------------------------------------------------ COMPARAR */
.cmp-wrap{margin:8px calc(var(--pad) * -1) 0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:10px}
.cmp{display:grid;grid-template-columns:112px repeat(var(--n),minmax(168px,1fr));min-width:min-content;padding:0 var(--pad)}
@media (min-width:768px){.cmp{grid-template-columns:200px repeat(var(--n),minmax(220px,1fr))}}
.cmp > div{padding:12px 12px;border-bottom:1px solid var(--hair2);min-width:0}
.cmp .rot{position:sticky;left:0;z-index:2;background:var(--paper);font-weight:600;font-size:14px;color:var(--slate);padding-left:0;box-shadow:8px 0 12px -10px rgba(29,29,27,.25)}
.cmp .val{font-weight:700;font-size:16px;color:var(--ink);scroll-snap-align:start}
.cmp .val.top{position:relative}
.cmp .val.top span{background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 92%,transparent 92%)}
.cmp .val.nd{color:#6A757A;font-weight:600}
.cmp .cab{border-bottom:2px solid var(--ink);display:flex;flex-direction:column;gap:6px;position:relative}
.cmp .rot.cab{justify-content:flex-end;position:sticky;left:0;z-index:3}
.cmp .cab-foto{display:block;aspect-ratio:1;width:100%;max-width:200px;position:relative}
.cmp .cab-foto img{width:100%;height:100%;object-fit:contain}
.cmp .cab b{font-size:20px;color:var(--ink)}
.cmp .cab small{font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.cmp .cab-quitar{position:absolute;right:6px;top:6px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--white);box-shadow:0 6px 16px -10px rgba(0,0,0,.5)}
.cmp .cab-quitar svg{width:16px;height:16px;fill:none;stroke:var(--slate2);stroke-width:2.4;stroke-linecap:round}
.cmp-ayuda{margin:10px 0 0;font-weight:600;font-size:14px;color:var(--slate)}
.cmp-agregar{display:grid;place-items:center;align-content:center;gap:8px;min-height:180px;border:2px dashed var(--hair);border-radius:var(--r2);font-weight:700;color:var(--slate2);text-align:center;padding:16px;margin:6px 0}

/* ------------------------------------------------------------------ pie (bloque oscuro puntual) */
.pie{position:relative;overflow:hidden;isolation:isolate;margin-top:56px;background:linear-gradient(160deg,#3E4B51,#1D1D1B);color:#E9ECE6;border-radius:var(--r3) var(--r3) 0 0}
.pie-humo{position:absolute;z-index:-1;right:-20%;bottom:-30%;width:90%;max-width:700px;opacity:.5;pointer-events:none}
.pie .envoltura{padding-top:40px;padding-bottom:40px;display:grid;gap:18px}
.pie img.pie-logo{width:210px}
.pie p{margin:0;font-size:17px;color:#E2E7DF;max-width:520px}
.pie .btn-wa{justify-self:start;padding:0 26px;grid-column:auto}
.pie small{font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#C9D0C6}
@media (min-width:1024px){.pie{margin:72px var(--pad) 0}.pie .envoltura{grid-template-columns:1fr auto;align-items:center;padding:56px 48px}}

/* ------------------------------------------------------------------ visor de zoom */
.visor{position:fixed;inset:0;z-index:100;background:rgba(242,243,239,.98);display:block;touch-action:none;overscroll-behavior:contain}
.visor[hidden]{display:none}
.visor-escena{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;touch-action:none}
.visor-escena img{max-width:94vw;max-height:80vh;width:auto;height:auto;object-fit:contain;transform-origin:50% 50%;will-change:transform;user-select:none;-webkit-user-drag:none;cursor:zoom-in}
.visor.zoom .visor-escena img{cursor:grab}
.visor-cerrar{position:absolute;right:14px;top:calc(env(safe-area-inset-top,0px) + 14px);width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--ink)}
.visor-cerrar svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.visor-flecha{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;display:grid;place-items:center;background:var(--white);box-shadow:var(--sombra)}
.visor-flecha svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.visor-flecha.ant{left:12px}.visor-flecha.sig{right:12px}
.visor-flecha[hidden]{display:none}
@media (pointer:coarse){.visor-flecha{display:none}}
.visor-pie{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 18px);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.visor-pie .puntos{pointer-events:auto}
.visor-ayuda{font-weight:600;font-size:14px;color:var(--slate)}

/* ------------------------------------------------------------------ aviso */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--safe-b) + 14px);z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:14px;max-width:calc(100vw - 28px);padding:12px 12px 12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-weight:600;font-size:16px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transition:transform .35s var(--ease),opacity .25s}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a,.toast button{flex:none;padding:8px 12px;border-radius:10px;background:var(--lime);color:var(--ink);font-weight:700;font-size:15px}
@media (min-width:1024px){.toast{bottom:28px}}

/* vuelo de la foto entre pantallas (FLIP) */
.vuelo{position:fixed;z-index:80;pointer-events:none;object-fit:contain;transform-origin:0 0;will-change:transform;filter:drop-shadow(0 20px 26px rgba(29,29,27,.25))}
[data-oculto]{visibility:hidden}


/* ================================================================== RONDA 2: interacción */

/* barra inferior con 5 accesos (Nuevo) */
.tabbar{grid-template-columns:repeat(var(--tabs,5),1fr)}
.tabbar a span{font-size:12.5px}
@media (min-width:400px){.tabbar a span{font-size:13px}}
.sin-nuevos .tabbar{--tabs:4}
.sin-nuevos [data-solo-nuevos]{display:none!important}
@media (min-width:1024px){
  .tb-secciones a.tb-nuevo{background:var(--lime);color:var(--ink);transform:skewX(-11deg);border-radius:6px;padding:10px 16px}
  .tb-secciones a.tb-nuevo b{display:inline-block;transform:skewX(11deg);font-weight:800}
  .tb-secciones a.tb-nuevo:hover{background:#C4DA48}
  .tb-secciones a.tb-nuevo.on{background:var(--ink);color:var(--lime)}
}
@media (min-width:1024px) and (max-width:1180px){.tb-secciones a{padding:10px 10px;font-size:15px}.tb-secciones a i{display:none}.tb-btn span{display:none}.tb-btn{padding:0 12px}}

/* carga inicial con el logo */
.arranque{position:fixed;inset:0;z-index:150;display:grid;place-content:center;justify-items:center;gap:22px;background:var(--paper);transition:opacity .45s var(--ease),visibility .45s}
.arranque img{width:min(240px,60vw);height:auto}
.arranque-barra{position:relative;width:min(200px,50vw);height:6px;background:var(--paper2);overflow:hidden;transform:skewX(-11deg)}
.arranque-barra i{position:absolute;inset:0;background:var(--lime);transform-origin:0 50%;animation:carga 1.1s var(--ease) infinite}
@keyframes carga{0%{transform:translateX(-100%)}60%{transform:translateX(0)}100%{transform:translateX(100%)}}
.arranque.fuera{opacity:0;visibility:hidden}

/* inclinación 3D con brillo (PC) */
.card-media{transform-style:preserve-3d;transition:transform .5s var(--ease)}
.card.tilt .card-media{transform:perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .12s linear}
.brillo{position:absolute;inset:6%;border-radius:50%;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 42%);mix-blend-mode:soft-light}
.card.tilt .brillo{opacity:1}
.sec-card.tilt{transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-4px);transition:transform .12s linear,box-shadow .25s}
.sec-card .brillo{inset:0;border-radius:inherit;mix-blend-mode:normal;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),rgba(255,255,255,0) 40%)}
.sec-card.tilt .brillo{opacity:1}

/* revelado: la barra lima de los títulos crece al aparecer */
.js-anim .bloque-hd h2::after,.js-anim .pag-hd h1::after{transform-origin:0 50%;transition:transform .7s .15s var(--ease)}
.js-anim .bloque-hd:not(.visto) h2::after,.js-anim .pag-hd:not(.visto) h1::after{transform:skewX(-11deg) scaleX(0)}

/* cortina diagonal a 11° (lima + pizarra) */
.cortina{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden;visibility:hidden}
.cortina i{position:absolute;top:-10%;bottom:-10%;left:-30vw;width:160vw;transform:translateX(-130%) skewX(-11deg)}
.cortina .c1{background:var(--lime)}
.cortina .c2{background:linear-gradient(160deg,#3E4B51,#1D1D1B)}

/* cursor sutil (PC) */
.cursor{position:fixed;left:0;top:0;z-index:140;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .25s}
.cursor span{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:2px solid var(--slate2);display:grid;place-items:center;
  font:700 12px/1 'BSC';letter-spacing:.08em;text-transform:uppercase;color:var(--ink);transition:transform .3s var(--ease),background .25s,border-color .25s}
.cursor.on{opacity:1}
.cursor.sobre span{transform:scale(1.5);border-color:var(--lime2);background:rgba(182,205,54,.18)}
.cursor.ver span{transform:scale(2.1);background:var(--lime);border-color:var(--lime)}
.cursor.ver span::after{content:"Ver";transform:scale(.48)}
.cursor.arrastra span{transform:scale(2.1);background:var(--ink);border-color:var(--ink);color:#fff}
.cursor.arrastra span::after{content:"↔";font-size:22px;transform:scale(.5)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* foto que vuela a «Mi lista» / «Comparar» */
.vuela-mini{position:fixed;z-index:130;width:64px;height:64px;object-fit:contain;pointer-events:none;left:0;top:0;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
/* check que se dibuja en el botón */
.btn svg.ok path{stroke-dasharray:24;stroke-dashoffset:0}
.btn.dibuja svg path{animation:dibuja .5s var(--ease) both}
@keyframes dibuja{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.btn .onda{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(182,205,54,.8);animation:onda .7s var(--ease) both}
@keyframes onda{to{box-shadow:0 0 0 14px rgba(182,205,54,0)}}

/* insignia «Nuevo» */
.ins-nuevo{display:inline-flex;align-items:center;background:var(--lime);color:var(--ink);font:800 12px/1 'BSC';letter-spacing:.12em;text-transform:uppercase;padding:6px 10px 5px;transform:skewX(-11deg);box-shadow:3px 3px 0 var(--ink)}
.ins-nuevo > span{transform:skewX(11deg)}
.card-nuevo{position:absolute;left:6px;top:8px;z-index:4}
.f-ruta .ins-nuevo{margin-left:6px}

/* ------------------------------------------------------------------ LO NUEVO (protagonista) */
.nuevo-band{position:relative;isolation:isolate;overflow:hidden;margin-top:34px;padding:34px 0 26px;color:#EEF1EA;
  background:linear-gradient(160deg,#3E4B51 0%,#2B363B 55%,#1D1D1B 100%)}
.nuevo-band::before{display:none;content:"";position:absolute;z-index:-1;left:-10%;top:-30%;width:42%;height:160%;background:var(--lime);opacity:.95;transform:skewX(-11deg);clip-path:polygon(78% 0,86% 0,22% 100%,14% 100%)}
.nuevo-humo{position:absolute;z-index:-1;right:-18%;bottom:-24%;width:min(90%,820px);opacity:.55;pointer-events:none}
.nuevo-hd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 18px;margin-bottom:12px}
.nuevo-hd h2{margin:10px 0 0;font-size:clamp(34px,9.4vw,64px);color:#fff;line-height:1}
.nuevo-hd p{margin:8px 0 0;font-size:17px;color:#D6DCD2;max-width:440px}
.nuevo-acc{display:flex;gap:10px;flex-wrap:wrap}
.btn-hist{background:var(--lime);color:var(--ink)}
.btn-hist:hover{background:#C4DA48}
.btn-claro{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn-claro:hover{background:rgba(255,255,255,.18)}
.nuevo-band .carrusel{--col:min(84%,380px);--gap:16px}
@media (min-width:700px){.nuevo-band .carrusel{--col:calc((100% - var(--gap)) / 2.15)}}
@media (min-width:1024px){.nuevo-band{margin-top:56px;padding:56px 0 40px}.nuevo-band .carrusel{--col:calc((100% - 2 * var(--gap)) / 3)}}
.nuevo-slide{position:relative;display:grid;grid-template-rows:auto auto;border-radius:var(--r3);overflow:hidden;isolation:isolate;
  background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .2s var(--ease)}
.nuevo-slide:active{transform:scale(.98)}
.ns-media{position:relative;aspect-ratio:1/0.9;display:grid;place-items:center;isolation:isolate}
.ns-media::before{content:"";position:absolute;inset:8% 10% 4%;z-index:-1;background:radial-gradient(closest-side,rgba(182,205,54,.5),rgba(182,205,54,0) 72%)}
.ns-media::after{content:"";position:absolute;left:22%;right:22%;bottom:6%;height:8%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,0) 72%)}
.ns-media img{width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 22px 24px rgba(0,0,0,.5));will-change:transform}
.ns-cinta{position:absolute;left:-6px;top:18px;z-index:3;background:var(--lime);color:var(--ink);font:800 15px/1 'BSC';letter-spacing:.16em;padding:9px 18px 8px 22px;transform:skewX(-11deg);box-shadow:4px 4px 0 #0E1214}
.ns-cinta span{display:inline-block;transform:skewX(11deg)}
.ns-info{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:4px 18px 18px}
.ns-info small{display:block;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#C9D1C5}
.ns-info b{display:block;margin-top:6px;font-size:clamp(22px,6vw,28px);color:#fff}
.ns-info em{display:inline-block;margin-top:8px;font-style:normal;font-weight:700;font-size:15px;color:var(--ink);background:var(--lime);padding:2px 10px;border-radius:6px}
.ns-ir{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);transition:transform .25s var(--ease),background .2s}
.ns-ir svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nuevo-slide:hover .ns-ir{background:var(--lime);transform:translateX(3px)}
.nuevo-band .car-flecha{background:#fff}

/* página «Lo nuevo» */
.nuevo-pag-hd{position:relative;isolation:isolate;overflow:hidden;padding:26px 0 22px}
.nuevo-pag-hd h1{margin:12px 0 6px;font-size:min(64px,9.4vw);color:var(--slate2)}
.nuevo-pag-hd p{margin:0 0 16px;color:var(--slate2);font-size:17px;max-width:520px}
@media (min-width:1024px){.nuevo-pag-hd{padding:48px 0 30px}}

/* ------------------------------------------------------------------ HISTORIAS */
.historias{position:fixed;inset:0;z-index:110;background:rgba(14,18,20,.92);display:grid;place-items:center;touch-action:none;overscroll-behavior:contain}
.historias[hidden]{display:none}
.hi-marco{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;background:linear-gradient(165deg,#46555B 0%,#2B363B 50%,#15191B 100%);color:#fff;
  display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px calc(var(--safe-b) + 36px)}
@media (min-width:700px){.hi-marco{width:min(430px,calc(92vh * 9 / 16));height:min(92vh,820px);border-radius:var(--r3);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}}
.hi-marco::before{content:"";position:absolute;z-index:-1;left:-30%;top:-10%;width:70%;height:130%;background:var(--lime);transform:skewX(-11deg);clip-path:polygon(70% 0,78% 0,30% 100%,22% 100%);opacity:.95}
.hi-humo{position:absolute;z-index:-1;left:50%;top:44%;width:150%;max-width:none;transform:translate(-50%,-50%);opacity:.6;pointer-events:none}
.hi-barras{display:flex;gap:5px}
.hi-barras i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.hi-barras i b{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.hi-barras i.hecha b{transform:scaleX(1)}
.hi-top{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.hi-top img{height:26px;width:auto}
.hi-cerrar{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.hi-cerrar svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.hi-media{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.hi-media img{max-width:92%;max-height:100%;object-fit:contain;filter:drop-shadow(0 30px 34px rgba(0,0,0,.55));will-change:transform}
.hi-info{position:relative}
.hi-info .ns-cinta{position:relative;left:0;top:0;display:inline-block}
.hi-info small{display:block;margin-top:16px;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#D3DACF}
.hi-info h3{margin:6px 0 0;font-size:clamp(34px,10vw,46px);line-height:1}
.hi-claves{display:flex;gap:18px;margin:14px 0 16px}
.hi-claves div b{display:block;font-weight:800;font-size:26px;line-height:1}
.hi-claves div span{display:block;margin-top:4px;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#C9D1C5}
.hi-acc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hi-acc .btn{min-height:52px;font-size:16px}
.hi-zona{position:absolute;top:90px;bottom:170px;width:38%;z-index:2}
.hi-zona.ant{left:0}.hi-zona.sig{right:0}
.hi-ayuda{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 10px);text-align:center;font-size:12px;color:rgba(255,255,255,.55);pointer-events:none}

/* movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.cortina i{transform:none}
.nuevo-slide.tilt{transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .12s linear}
.nuevo-slide .brillo{mix-blend-mode:screen;opacity:0}
.nuevo-slide.tilt .brillo{opacity:.6}
.carrusel{position:relative}

/* ================================================================== AJUSTE: franja y «Lo nuevo» compacto en PC */
/* sin franja clara: la banda de «Lo nuevo» empalma con el final de la portada */
.inicio-buscar{margin-bottom:-30px}
.nuevo-band{margin-top:0;padding-top:64px}
@media (min-width:700px){.nuevo-band{padding-top:34px}}
@media (min-width:1024px){
  .nuevo-band{margin-top:0;padding:30px 0 16px}
  .nuevo-hd{align-items:center;margin-bottom:10px}
  .nuevo-hd > div:first-child{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px}
  .nuevo-hd h2{margin:0;font-size:40px;letter-spacing:.03em}
  .nuevo-hd p{grid-column:1 / -1;margin:6px 0 0}
  .nuevo-band .carrusel{--gap:16px;--col:calc((100% - 2 * var(--gap)) / 3);padding-top:6px}
  .nuevo-band .ns-media{aspect-ratio:4/3}
  .nuevo-band .ns-media img{position:absolute;inset:0;margin:auto;width:84%;height:84%}
  .nuevo-band .ns-cinta{top:14px;font-size:13px;padding:7px 14px 6px 18px}
  .nuevo-band .ns-info{padding:0 16px 14px}
  .nuevo-band .ns-info b{font-size:22px;margin-top:4px}
  .nuevo-band .ns-info em{margin-top:6px;font-size:14px}
  .nuevo-band .ns-ir{width:44px;height:44px}
}
@media (min-width:1180px){.nuevo-band .carrusel{--col:calc((100% - 3 * var(--gap)) / 4)}}
/* flechas de «Lo nuevo» en PC: junto a los botones del título, nunca encima de las tarjetas */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .nuevo-band .envoltura{position:relative}
  .nuevo-band .car-envoltura{position:static}
  .nuevo-band .nuevo-acc{margin-right:112px}
  .nuevo-band .car-flecha{top:var(--flechas-top,13px);width:46px;height:46px}
  .nuevo-band .car-flecha.sig{left:auto;right:var(--pad)}
  .nuevo-band .car-flecha.ant{left:auto;right:calc(var(--pad) + 56px)}
  .nuevo-band .car-flecha[disabled]{opacity:.35;pointer-events:none}
}
/* la banda arranca del mismo tono con que termina el bloque oscuro de la portada: empalme sin escalón */
.nuevo-band{background:linear-gradient(180deg,#1F2629 0%,#2B363B 40%,#3A474D 100%)}
/* flechas de «Destacados» y «También te puede interesar» en PC: en la fila del título, nunca sobre las tarjetas */
@media (hover:hover) and (pointer:fine){
  .bloque{position:relative;--hd-top:40px;--hd-h:26px}
  .bloque.interes{--hd-top:20px}
  .bloque .car-envoltura{position:static}
  .bloque .bloque-hd{padding-right:116px}
  .bloque .car-flecha{top:calc(var(--hd-top) + (var(--hd-h) - 46px) / 2);width:46px;height:46px}
  .bloque .car-flecha.sig{left:auto;right:0}
  .bloque .car-flecha.ant{left:auto;right:56px}
  .bloque .car-flecha[disabled]{opacity:.35;pointer-events:none}
}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .bloque{--hd-top:64px;--hd-h:34px}
  .bloque.interes{--hd-top:20px}
}