/* =========================================================
   Kooben — tema moderno (octubre 2026)
   Blanco, negro y el azul del logotipo; títulos en Archivo; esquinas
   suaves y paneles de cristal oscuro en el Estudio 3D y en Vive tu cocina.
   Se carga AL FINAL, después de kooben.css, estudio.css y vive.css, y
   sobrescribe cada detalle del diseño cálido anterior (crema, latón, grano
   de papel, cursivas, píldoras). Cucenza no usa esta hoja: conserva su paleta.
   ========================================================= */
:root{
  --paper:#FFFFFF; --paper-2:#F4F6F9; --paper-3:#E9EDF2; --card:#FFFFFF;
  --ink:#0E1116; --ink-2:#4A5362; --ink-3:#7A8494;
  --line:#E3E7ED; --line-2:rgba(14,17,22,.1);
  --brass:#1B6FD1; --brass-2:#4A93E8; --brass-3:#9CC8FF; --walnut:#0F4C97;
  --night:#0B0D11; --night-2:#12161C; --night-3:#1B2029;
  --on-night:#F2F5F9; --on-night-2:#A9B3C2; --on-night-3:rgba(242,245,249,.14);
  --serif:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --azul-10:rgba(27,111,209,.1); --azul-18:rgba(27,111,209,.18); --azul-35:rgba(27,111,209,.35);
  --vidrio:rgba(11,13,17,.62); --vidrio-2:rgba(11,13,17,.82); --vidrio-borde:rgba(255,255,255,.1);
  --sombra:0 24px 50px -30px rgba(14,17,22,.35);
  --r:10px; --r-ui:10px; --r-chip:8px; --r-card:14px;
}

/* ---------- base y tipografía ---------- */
body::after{display:none}                      /* sin grano de papel */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em;line-height:1.02}
h1 em,h2 em,h3 em,h4 em,.display em,.h em,.statement em{font-style:normal;color:var(--brass)}
.statement{font-weight:600;letter-spacing:-.025em}
.statement em{font-weight:700}
.sec--night .display em,.sec--night h2 em,.hero h1 em,.vivo h2 em,.t3d h2 em,.thero h1 em,.vive__inicio h1 em,.pie__cta h2 em,.sig__tx h2 em{color:var(--brass-3)}
.kicker{font-weight:700;color:var(--brass)}
.kicker::before{width:26px;height:2px;border-radius:2px;background:var(--brass)}
.sec--night .kicker,.hero .kicker,.thero .kicker,.t3d .kicker,.vivo .kicker,.vive__inicio .kicker{color:var(--brass-3)}
.sec--night .kicker::before,.hero .kicker::before,.vivo .kicker::before,.t3d .kicker::before,.thero .kicker::before,.vive__inicio .kicker::before{background:var(--brass-3)}
::selection{background:var(--brass);color:#fff}
.menu__links a{font-weight:700;letter-spacing:-.03em}
.menu__links a small{font-weight:600}

/* ---------- botones y enlaces ---------- */
.btn{border-radius:var(--r-ui);padding:16px 26px}
.btn:hover,.btn:focus-visible{color:#fff}
.btn--brass{--fg:#fff}
.btn--light{border-color:rgba(255,255,255,.4)}
.hdr--claro .hdr__cta{--bg:rgba(255,255,255,.1);--fg:#fff;border-color:rgba(255,255,255,.4)}
.cursor span{color:#fff}

/* ---------- encabezado y menú ---------- */
.hdr--claro{color:#fff}
.hdr--solido{background:rgba(255,255,255,.88)}
.hdr__panel{border-radius:var(--r-card);box-shadow:var(--sombra)}
.hdr__panel a{border-radius:var(--r-chip)}
.hdr__panel b{font-weight:700;letter-spacing:-.01em}
.hdr__vive::before{box-shadow:0 0 0 3px var(--azul-18)}

/* ---------- portada ---------- */
.hero{color:#fff}
/* el video de portada es claro: velo más fuerte abajo y a la izquierda (donde va el texto), video un poco más oscuro y sombra en las letras */
.hero__media img,.hero__media video{filter:brightness(.78) contrast(1.06) saturate(1.05)}
.hero__velo{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 30%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.92) 100%),linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 42%,rgba(0,0,0,.06) 78%)}
.hero .kicker,.hero h1,.hero__sub,.hero__pie{text-shadow:0 2px 26px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.45)}
.hero h1 em{color:#BFDAFF}
.hero__sub{color:rgba(255,255,255,.92);font-weight:500}
.hero__pie{color:rgba(255,255,255,.85)}
.hero__pie{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.72)}
.hero__pie .scroll i{background:rgba(255,255,255,.3)}
.phero__img{border-radius:var(--r-card)}

/* ---------- bloques del sitio ---------- */
.cifra b{font-weight:800;letter-spacing:-.04em}
.svc h3{font-weight:700}
.svc .mini{border-radius:var(--r-ui)}
.vista{border-radius:var(--r-card);box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.hs__ph,.pc__ph,.marco,.gal a,.sede,.t3d__ph,.mapa,.video,.muestra__ph,.est-refs figure{border-radius:var(--r-card)}
.hs__fin{font-weight:700;letter-spacing:-.02em}
.hs__fin small{font-weight:600}
.filtros button{border-radius:var(--r-ui)}
.paso .n{-webkit-text-stroke:0;color:#D5E5FB;font-weight:800;letter-spacing:-.04em}
.paso.is-in .n{color:var(--brass)}
.paso h3{font-weight:700}
.valores li{font-weight:600}
.sede{color:#fff}
.sede::after{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85))}
.sede__tx p{color:rgba(255,255,255,.78)}
.chips span{border-radius:var(--r-chip)}
.tabla td:first-child{font-weight:600}
.faq summary{font-weight:600;letter-spacing:-.01em}
.canal b{font-weight:700}
.mapa{filter:grayscale(.2) contrast(1.02)}
.cinta__track span{font-weight:600;letter-spacing:-.01em}
.cinta__track i,.ttips li::before,.specs li::before{border-radius:50%;transform:none}
.specs li::before{margin-top:10px}
.muestra figcaption b{font-weight:600}
.combo b{font-weight:700}
.lista li b{font-weight:600}

/* visor de fotos */
dialog.lb{background:rgba(0,0,0,.96);color:#fff}
dialog.lb::backdrop{background:rgba(0,0,0,.9)}
.lb button{border-color:rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff}
.lb button:hover{background:var(--azul-35)}

/* ---------- pie ---------- */
.pie__cta h2{font-weight:800}
.pie__cta .flecha{border-color:rgba(255,255,255,.3)}
.pie__marca{font-weight:800;letter-spacing:-.06em}
.wa-flot b{border-radius:var(--r-ui)}

/* ---------- portada: cocina 3D en vivo y Vive tu cocina ---------- */
.vivo{background:var(--night)}
.vivo h2{color:#fff}
.vivo__velo{background:linear-gradient(90deg,rgba(11,13,17,.9) 0%,rgba(11,13,17,.62) 34%,rgba(11,13,17,0) 62%),linear-gradient(0deg,rgba(11,13,17,.55),rgba(11,13,17,0) 30%)}
.vivo__amb button{border-color:rgba(255,255,255,.28);background:rgba(11,13,17,.35);border-radius:var(--r-ui)}
.vivo__amb button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#fff}
.vivo__nota{color:rgba(255,255,255,.5)}
.vh__lista b{font-weight:700}
.vh__pantalla{background:var(--night);border-radius:var(--r-card);box-shadow:0 50px 90px -50px rgba(0,0,0,.6)}
.vh__hud i{background:rgba(11,13,17,.6);border-radius:6px}
.vh__hud em{background:var(--brass);color:#fff;border-radius:var(--r-chip)}

/* ---------- proyectos: visor 3D ---------- */
.b3d{background:var(--vidrio-2);border-radius:var(--r-chip)}
.p3d__visor{background:var(--night-2);border-radius:var(--r-card)}
.p3d__grupo{background:var(--vidrio);border-radius:var(--r-ui);box-shadow:0 10px 30px -12px rgba(0,0,0,.5),inset 0 0 0 1px var(--vidrio-borde)}
.p3d__grupo button{color:rgba(255,255,255,.8);border-radius:var(--r-chip)}
.p3d__grupo button[aria-pressed="true"]{background:var(--brass);color:#fff}
.p3d__nota{color:rgba(255,255,255,.75)}
.p3d__ficha dd{font-weight:600}

/* ---------- tienda ---------- */
.hdr__carro span{color:#fff}
.carrito__velo{background:rgba(11,13,17,.5)}
.carrito__caja{box-shadow:-30px 0 60px -30px rgba(0,0,0,.35)}
.carrito__top h2{font-weight:700}
.cfila__img{border-radius:var(--r-chip)}
.cfila__tx a{font-weight:600}
.carrito__tot b{font-weight:700}
.toast{border-radius:var(--r-ui)}
.thero{background:radial-gradient(120% 90% at 78% 30%,#182238 0%,#0E131C 55%,#0B0D11 100%)}
.thero__luz{background:radial-gradient(closest-side,rgba(27,111,209,.38),rgba(27,111,209,0))}
.thero .migas,.thero .migas a{color:rgba(255,255,255,.55)}
.thero h1{color:#fff}
.thero__sellos{border-top-color:rgba(255,255,255,.12)}
.thero__sellos li{border-right-color:rgba(255,255,255,.08)}
.thero__sellos b{font-weight:700;color:#fff}
@media (max-width:900px){.thero__sellos li{border-bottom-color:rgba(255,255,255,.08)}}
.tcat{background:linear-gradient(180deg,#fff,#F4F6F9);border-radius:var(--r-card)}
.tcat:hover{box-shadow:0 30px 50px -34px rgba(14,17,22,.4)}
.tcat__ph::after{background:radial-gradient(closest-side,rgba(14,17,22,.2),rgba(14,17,22,0))}
.tcat__tx b{font-weight:700}
.t3d h2{color:#fff}
.tfiltros{background:rgba(255,255,255,.9)}
.tbuscar input,.tbar select{border-radius:var(--r-ui)}
.tbuscar input:focus{box-shadow:0 0 0 3px var(--azul-18)}
.tcats button,.tsubs button{border-radius:var(--r-chip)}
.tp{border-radius:var(--r-card)}
.tp:hover{box-shadow:0 0 0 1px rgba(14,17,22,.14),0 34px 60px -40px rgba(14,17,22,.45)}
.tp__ph{background:#F4F6F9}
.tp__chips li{border-radius:var(--r-chip);background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(14,17,22,.06)}
.tp__3d{background:var(--vidrio-2);color:#fff;border-radius:var(--r-chip)}
.tp__tx h3{font-weight:600;letter-spacing:-.01em}
.tp__precio{font-weight:700}
.tp__add{border-radius:var(--r-ui)}
.pp__foto,.pp__visor{background:#EEF1F5;border-radius:var(--r-card)}
.pp__visor.cargando::after{background:#EEF1F5}
.pp__chips li{border-radius:var(--r-chip)}
.pp__mod span{background:var(--azul-10);color:var(--walnut)}
.pp__precio{font-weight:700}
.pp__3d{border-radius:var(--r-card)}
.pp__3d:hover{box-shadow:0 24px 44px -28px rgba(0,0,0,.6)}
.pp__3d-ic{background:var(--azul-18)}
.pp__3d b{font-weight:700;color:#fff}
.pp__specs h2{font-weight:700}
.pp__tabs{border-radius:var(--r-ui)}
.pp__tabs button{border-radius:var(--r-chip)}
.pp__3d-acc button{background:var(--vidrio-2);color:#fff;border-radius:var(--r-chip)}
.pp__3d-acc button[aria-pressed="true"]{background:var(--brass);color:#fff}
.cantidad{border-radius:var(--r-ui)}
.pagar legend{font-weight:700}
.campo input,.campo select,.campo textarea{border-radius:var(--r-ui)}
.opcion{border-radius:var(--r-ui)}
.resumen{border-radius:var(--r-card)}
.resumen h2{font-weight:700}
.resumen__tot b{font-weight:700}
.aviso{border-radius:var(--r-chip)}

/* ---------- Estudio 3D ---------- */
.t-estudio .hdr{background:rgba(255,255,255,.88)}
.est__visor{background:#E9EDF2}
.est__visor.sin3d{background-color:var(--night-2)}
.est__visor::after{box-shadow:inset 0 0 160px rgba(0,0,0,.22)}
.est__carga{background:radial-gradient(120% 90% at 50% 40%,#182238,#0B0D11)}
.est__logo{font-weight:800;letter-spacing:-.04em}
.est__carga i{background:rgba(255,255,255,.15)}
.est__vistas,.est__hora,.est__herr{background:var(--vidrio);border-radius:var(--r-ui);box-shadow:0 10px 30px -12px rgba(0,0,0,.5),inset 0 0 0 1px var(--vidrio-borde)}
.est__vistas button,.est__hora button,.est__herr button{color:rgba(255,255,255,.8);border-radius:var(--r-chip)}
.est__vistas button[aria-pressed="true"],.est__hora button[aria-pressed="true"],.est__herr button[aria-pressed="true"]{background:var(--brass);color:#fff}
.est__pie{background:linear-gradient(to top,rgba(11,13,17,.62),rgba(11,13,17,0));color:#fff}
.est__pie h2{font-weight:700}
.est__pie p{color:rgba(255,255,255,.82)}
.est__ayuda{color:rgba(14,17,22,.55)}
.est__aviso{border-radius:var(--r-ui)}
.est__real{background:rgba(11,13,17,.74);color:#fff;border-radius:var(--r-card)}
.est__real-tx span{color:rgba(255,255,255,.86)}
.est__real-acc button{color:#fff;border-radius:var(--r-chip)}
.est__real-acc button:first-child{background:var(--brass);color:#fff}
.est__h1{font-weight:700}
.est__h1 em{font-style:normal}
.preset{border-radius:var(--r-ui)}
.preset b{font-weight:600}
.forma{border-radius:var(--r-ui)}
.forma svg{fill:rgba(14,17,22,.06)}
.forma[aria-pressed="true"] svg{fill:var(--azul-18);stroke:var(--brass)}
.est__grupo{border-radius:var(--r-ui)}
.est__mini{border-radius:var(--r-chip)}
.est__gt b{font-weight:600}
.est__btn2,.est__sig,.est__atras,.est__carro,.est__wa,.vermas,.plano,.tile,.eqc,.est__inv,.inv,.est__plano-card,.dlg__drop{border-radius:var(--r-ui)}
.est__h h2{font-weight:700}
.est .filters button,.est__inv-acc button,.est__editor-acc button,.sw--txt{border-radius:var(--r-chip)}
.tile .badge{background:rgba(255,255,255,.92);color:var(--walnut)}
.eqc .im{background:radial-gradient(90% 80% at 50% 45%,#fff,#EEF1F5);border-radius:var(--r-ui) var(--r-ui) 0 0}
.resumen-e .rq dt img{border-radius:var(--r-chip)}
.est__eqbar b{font-weight:700}
.est-pasos b,.est-pasos h3{font-weight:700}
.est__avisos{border-radius:var(--r-chip)}
.est__plano-card b{font-weight:700}
.est__plano-card .est__sig:hover{color:var(--night)}
/* plano en planta: grises y azul en lugar de cremas */
.plano .muro{stroke:#1B2029}
.plano .mueble{fill:#E9EDF2;stroke:#7A8494}
.plano .mueble.esq{fill:#DEE4EC}
.plano .mueble.isla{fill:#D5E5FB}
.plano .alto{stroke:#4A5362}
.plano .rf{fill:#CFD6DF}.plano .rl{stroke:#B7C1CE}
.plano .x{stroke:#4A5362}
.plano .tarja{stroke:#4A5362}
.plano .banco{fill:#B7C1CE;stroke:#7A8494}
.plano .cota{stroke:#7A8494}
.plano marker path{fill:#7A8494}
.plano .ct,.plano .et{fill:#4A5362}
.plano polygon.edit:hover{fill:#DCEAFF}
.plano polygon.sel{fill:#BFD9FF;stroke:var(--brass)}
/* editor de muebles y ventana del plano */
.est__editor{background:rgba(11,13,17,.9);border-radius:var(--r-card)}
.est__editor>b{font-weight:700}
.est__ancho button{border-color:rgba(255,255,255,.3)}
.est__ancho button:hover:not(:disabled){background:var(--brass);color:#fff;border-color:var(--brass)}
.est__ancho output{font-weight:700}
.est__editor .filters button{border-color:rgba(255,255,255,.25)}
.est__editor .filters button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#fff}
.est__editor-acc button{border-color:rgba(255,255,255,.25)}
.dlg::backdrop{background:rgba(11,13,17,.6)}
.dlg__in{border-radius:var(--r-card)}
.dlg h2{font-weight:700}
.dlg__drop:hover,.dlg__drop.sobre{background:#EAF2FF}
.dlg__drop img{border-radius:var(--r-chip)}
.est__inv summary b{font-weight:700}
/* etiquetas del equipo sobre el 3D y acceso a Vive */
.etq{background:var(--vidrio-2);color:#fff;border-radius:var(--r-chip)}
.etq::after{box-shadow:0 0 0 3px var(--azul-35)}
.est__vive{color:#fff;background:var(--brass);border-radius:var(--r-ui)}
.est__vive:hover{background:#fff;color:var(--ink)}

/* =========================================================
   MOTION (motion.js) — todo bajo html.mv; sin movimiento, nada de esto aplica
   ========================================================= */
html{scroll-behavior:auto}                 /* el desplazamiento suave lo lleva motion.js; sin doble animación */
@view-transition{navigation:none}          /* la transición entre páginas es la cortina */
::view-transition-old(root),::view-transition-new(root){animation:none}

/* 1-2. intro y cortina */
.cortina{position:fixed;inset:0;z-index:9000;pointer-events:none;visibility:hidden}
.cortina::before{content:"";position:absolute;inset:-2% 0;background:var(--night);transform:translateY(100%);transition:transform .55s var(--ease-io)}
.cortina--sale{visibility:visible;pointer-events:auto}
.cortina--sale::before{transform:translateY(0)}
.cortina--intro{visibility:visible;pointer-events:auto}
.cortina--intro::before{transform:none;transition:none}
.intro-fuera .cortina--intro::before{transform:translateY(-101%);transition:transform .9s var(--ease-io) .1s}
.cortina__in{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;color:#fff;opacity:0;transition:opacity .4s}
.cortina--intro .cortina__in{opacity:1}
.intro-fuera .cortina__in{opacity:0;transition:opacity .25s}
.cortina__marca{display:flex;gap:.06em;font:800 clamp(2.6rem,7vw,5.6rem)/1 var(--sans);letter-spacing:.18em;overflow:hidden}
.cortina__marca span{display:inline-block;transform:translateY(110%);animation:letraSube .9s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 60ms + 80ms)}
.cortina__marca span:nth-child(1){--i:0}.cortina__marca span:nth-child(2){--i:1}.cortina__marca span:nth-child(3){--i:2}.cortina__marca span:nth-child(4){--i:3}.cortina__marca span:nth-child(5){--i:4}.cortina__marca span:nth-child(6){--i:5}
@keyframes letraSube{to{transform:none}}
.cortina__linea{width:min(260px,50vw);height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.cortina__linea i{display:block;height:100%;background:var(--brass-2);transform-origin:left;animation:lineaCrece 1.3s var(--ease-io) forwards}
@keyframes lineaCrece{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cortina__n{font:600 .8rem var(--sans);letter-spacing:.3em;color:var(--brass-3);font-variant-numeric:tabular-nums}
.intro-on{overflow:hidden}
.intro-on .hero [data-entra]{animation-play-state:paused}
.intro-fuera .hero [data-entra]{animation-play-state:running}

/* 3. cursor propio */
.mv-mouse,.mv-mouse a,.mv-mouse button,.mv-mouse summary,.mv-mouse label,.mv-mouse [role=button]{cursor:none}
.mv-mouse input,.mv-mouse select,.mv-mouse textarea{cursor:auto}
.mcur{position:fixed;left:0;top:0;z-index:9500;pointer-events:none;opacity:0;transition:opacity .3s}
.mcur.on{opacity:1}
.mcur i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.mcur__p{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--brass)}
.mcur__a{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid var(--brass);opacity:.7;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),opacity .3s,background .3s,border-color .3s}
.mcur--link .mcur__a{width:62px;height:62px;margin:-31px 0 0 -31px;opacity:1;background:var(--azul-10)}
.mcur--ver .mcur__a{opacity:0}
.mcur--texto .mcur__p,.mcur--texto .mcur__a{opacity:0}
.mcur--pulsa .mcur__a{width:30px;height:30px;margin:-15px 0 0 -15px}
.cursor{z-index:9600}

/* 5. portada que se encoge */
.mv .hero{transform-origin:50% 0;will-change:transform;transition:none}
.mv .hero__media{will-change:transform}
.mv .hero__media img{animation:none}
.mv .hero__in{will-change:transform,opacity}

/* 6. parallax de fotos: las fotos se agrandan un poco para que no se vea el borde */
.mv .mv-par{scale:1.14;will-change:translate}
.mv .pc__ph img,.mv .hs__ph img,.mv .tcat__ph img{transition:transform 1.2s var(--ease-out),filter .6s}

/* 7. entradas automáticas */
.mv [data-mv]{opacity:0;transform:translateY(38px);filter:blur(10px);transition:opacity 1s var(--ease),transform 1.25s var(--ease-out),filter .9s var(--ease);transition-delay:var(--dm,0s)}
.mv [data-mv].is-in{opacity:1;transform:none;filter:blur(0)}
.mv h1[data-mv],.mv h2[data-mv]{clip-path:inset(0 0 100% 0);transform:translateY(24px)}
.mv h1[data-mv].is-in,.mv h2[data-mv].is-in{clip-path:inset(-10% 0 -10% 0);transition:opacity .8s,transform 1.2s var(--ease-out),filter .9s,clip-path 1.1s var(--ease-io)}
.mv .pc[data-mv],.mv .tcat[data-mv],.mv .tp[data-mv],.mv figure[data-mv],.mv .marco[data-mv]{transform:translateY(56px) scale(.96)}
.mv .pc[data-mv].is-in,.mv .tcat[data-mv].is-in,.mv .tp[data-mv].is-in,.mv figure[data-mv].is-in,.mv .marco[data-mv].is-in{transform:none}
.mv .intro-on [data-mv]{transition:none}
/* titulares palabra por palabra: suben con desenfoque y un giro ligero */
.mv.anim [data-split] .w>span{transform:translateY(115%) rotate(4deg);filter:blur(8px);transform-origin:0 100%;transition:transform 1.15s var(--ease-out),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 55ms + var(--d,0s))}
.mv.anim [data-split].is-in .w>span{transform:none;filter:blur(0)}
.mv.anim [data-rev]{filter:blur(8px);transition:opacity 1s var(--ease),transform 1.2s var(--ease-out),filter .9s var(--ease);transition-delay:var(--d,0s)}
.mv.anim [data-rev].is-in{filter:blur(0)}

/* 8. velocidad: los bloques se inclinan y se desfasan; el pie de la portada igual */
.mv .pgrid,.mv .tgrid,.mv .tcat-grid,.mv .cols,.mv .cifras,.mv .lista,.mv .obras,.mv .sedes,.mv .duo,.mv .svc,.mv .canales,.mv .faq,.mv .ficha,.mv .gal,.mv .est-pasos,.mv .pasos,.mv .texto,.mv .thero__piezas,.mv .vh__in,.mv .p3d__visor,.mv .pp__grid{transform-origin:50% 50%;will-change:rotate,translate;transition:rotate .35s var(--ease),translate .35s var(--ease)}
.mv .hs__ph img{transition:transform 1.4s var(--ease-out),rotate .4s var(--ease)}

/* 11. tarjetas con inclinación y brillo que sigue al cursor */
.pc__ph,.tcat__ph,.tp__media,.hs__ph,.sede,.vh__pantalla,.canal,.marco,.pp__foto{transform-style:preserve-3d;transition:transform .8s var(--ease-out),box-shadow .8s var(--ease-out)}
.tilt{transition:box-shadow .8s var(--ease-out)!important}
.tilt::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 60%);mix-blend-mode:soft-light}
.pc:hover .pc__ph,.tcat:hover .tcat__ph,.tp:hover .tp__media{box-shadow:0 40px 70px -40px rgba(14,17,22,.55)}
.pc,.tcat,.tp,.sede,.prod{transition:transform .8s var(--ease-out),box-shadow .8s var(--ease-out)}
.pc:hover,.prod:hover{transform:translateY(-6px)}
.pc:hover .pc__tx h3{color:var(--brass)}
.pc__tx h3{transition:color .35s}

/* 12. menú: letras que ruedan */
.rueda{display:inline-block;position:relative;overflow:hidden;line-height:1.2;vertical-align:bottom}
.rueda__a,.rueda__b{display:block;transition:transform .55s var(--ease-out),opacity .4s}
.rueda__b{position:absolute;left:0;top:0;transform:translateY(110%);color:var(--brass)}
a:hover>.rueda .rueda__a,button:hover>.rueda .rueda__a,.hdr__drop:focus-within>button>.rueda .rueda__a{transform:translateY(-110%)}
a:hover>.rueda .rueda__b,button:hover>.rueda .rueda__b,.hdr__drop:focus-within>button>.rueda .rueda__b{transform:none}

/* 13. botones: onda al hacer clic y pulso */
.btn,.filtros button,.tcats button,.tsubs button,.tp__add,.vivo__amb button,.est__btn2{position:relative;overflow:hidden}
.onda{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;animation:onda .7s var(--ease-out) forwards}
.btn--line .onda,.filtros button .onda,.tcats button .onda,.tsubs button .onda{background:var(--azul-18)}
@keyframes onda{to{transform:scale(28);opacity:0}}
.pulsa{scale:.95;transition:scale .15s var(--ease)!important}
.btn{transition:color .45s var(--ease),border-color .45s var(--ease),transform .5s var(--ease-out),scale .35s var(--ease-out)}
.hdr__nav>a:not(.btn),.link,.pie a,.menu__links a{transition:color .35s var(--ease),transform .5s var(--ease-out)}
.link:hover .ar{transform:translateX(8px) rotate(-12deg)}
.svc .ir,.pie__cta .flecha,.hs__fin{transition:background .5s var(--ease-out),border-color .5s,color .5s,transform .6s var(--ease-out)}

/* 10. marca del pie */
.mv .pie__marca{will-change:transform}

/* fotos que entran con zoom ligado al scroll (navegadores con animaciones por scroll) */
@supports (animation-timeline: view()){
  .mv .gal a img,.mv .phero__img img,.mv .t3d__ph img,.mv .est-refs img{animation:fotoEntra linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes fotoEntra{from{scale:1.3;filter:saturate(.6) blur(6px)}to{scale:1.14}}
}
@media (max-width:820px){.mv .hero{transform:none!important;border-radius:0!important}.mv [data-mv]{transform:translateY(24px);filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){.cortina,.mcur{display:none}.pc__ph,.tcat__ph,.tp__media,.hs__ph,.sede,.vh__pantalla,.canal,.marco,.pp__foto{transition:none}}

/* ---------- Vive tu cocina ---------- */
.t-vive .hdr{background:rgba(11,13,17,.55);color:#fff}
.vive{background:var(--night)}
.vive__pista{background:var(--vidrio-2);color:#fff;border-radius:var(--r-ui)}
.vive__volver{background:var(--vidrio);color:#fff;border-radius:var(--r-ui)}
.vive__grupo{background:var(--vidrio);border-radius:var(--r-ui);box-shadow:inset 0 0 0 1px var(--vidrio-borde)}
.vive__grupo button{color:rgba(255,255,255,.8);border-radius:var(--r-chip)}
.vive__grupo button[aria-pressed="true"]{background:var(--brass);color:#fff}
.vive__t{color:rgba(255,255,255,.75)}
.vive__btn{background:var(--vidrio);color:#fff;border-radius:var(--r-ui)}
.vive__btn[aria-pressed="true"]{background:var(--brass);color:#fff}
#vSonido[aria-pressed="false"]{background:var(--vidrio);color:rgba(255,255,255,.45)}
#vSonido[aria-pressed="true"]{background:var(--vidrio);color:#fff}
.vive__menu,.vive__ayuda{background:rgba(11,13,17,.9);border-radius:var(--r-card)}
.vive__menu b,.vive__ayuda b{font-weight:700}
.vive__luces input{accent-color:var(--brass-2)}
.vive__objetos button{border-color:rgba(255,255,255,.22);border-radius:var(--r-chip)}
.vive__objetos button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#fff}
kbd{border-color:rgba(255,255,255,.3);color:#fff}
.vive__palanca{background:rgba(11,13,17,.4)}
.vive__palanca i{background:rgba(255,255,255,.85)}
.vive__inicio{background:linear-gradient(90deg,rgba(11,13,17,.94),rgba(11,13,17,.72) 55%,rgba(11,13,17,.5)),url(/configurador/img/k45.jpg) center/cover}
.vive__inicio .migas,.vive__inicio .migas a{color:rgba(255,255,255,.6)}
.vive__inicio h1{color:#fff}
.vive__op{border-color:rgba(255,255,255,.25);background:rgba(11,13,17,.45);color:#fff;border-radius:var(--r-ui)}
.vive__op:hover{background:var(--azul-35)}
.vive__op b{font-weight:700}
.vive__op--mio{background:var(--brass);border-color:var(--brass)}
.vive__op--mio small{color:rgba(255,255,255,.85)}
.vive__nota{color:rgba(255,255,255,.6)}