/* @estado VIGENTE @rev 2026-09-30 @negocio clean
   MOTION · Clean Detailing (Goku 2026-09-30, Jose: "hazme el motion"). Solo lo carga la principal (index.html).
   LENGUAJE: una luz que barre una superficie y la descubre limpia. Todo nace de ahí: el título sube detrás de una
   máscara, la línea del comparador descubre el asiento lavado, el reflejo pasa por el oro y por el metal de la pistola.
   LEYES: anima solo transform/opacity/clip-path; nada continuo (ley de latidos Colibrí); con movimiento reducido todo
   se ve quieto; en celular no hay imán, ni foco, ni cursor (eso es de mouse). Motor: motion.js. */

:root{
  /* Tiempos: rápido (feedback) · interacción · transición · cine */
  --t1:180ms;--t2:360ms;--t3:720ms;--t4:1200ms;
  /* Curvas: salida exponencial (casi todo), quart (interacciones), barrido (luz que entra y sale) */
  --e-expo:cubic-bezier(.16,1,.3,1);--e-quart:cubic-bezier(.25,1,.5,1);--e-barre:cubic-bezier(.65,0,.35,1)
}

/* ===== REFLEJO · luz sobre una superficie (reutilizable: .reflejo + clase .pasa la dispara una vez) =====
   Dos bandas como en la pintura de verdad: una ancha y suave (el ambiente) y una delgada y dura (el foco).
   overlay: sobre el negro no pinta nada; solo enciende lo que ya tiene luz (metal, oro, logo). */
.reflejo{position:relative;overflow:hidden;isolation:isolate}
.reflejo::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:70%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.0) 22%,rgba(255,255,255,.28) 40%,rgba(255,255,255,.9) 49%,rgba(255,255,255,.28) 54%,rgba(255,255,255,0) 70%,transparent 100%);
  mix-blend-mode:overlay;transform:translate3d(-130%,0,0) skewX(-14deg);opacity:0}
.reflejo.pasa::before{animation:reflejo 1.25s var(--e-barre) forwards}
@keyframes reflejo{0%{opacity:0;transform:translate3d(-130%,0,0) skewX(-14deg)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(190%,0,0) skewX(-14deg)}}

/* ===== BARRA · transparente arriba, vidrio al bajar; se esconde al bajar y regresa al subir ===== */
.cine .barra{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;
  transition:transform var(--t3) var(--e-expo),background var(--t3) var(--e-quart),border-color var(--t3)}
.cine .barra.vidrio{background:rgba(6,4,20,.62);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom-color:rgba(255,255,255,.08)}
.cine.listo .barra.oculta{transform:translate3d(0,-110%,0)}
.barra .logo{display:block;border-radius:4px}
.barra .sec{transition:background var(--t2) var(--e-quart),box-shadow var(--t2) var(--e-quart),border-color var(--t2)}

/* ===== ENTRADA · la secuencia de 1.6 s =====
   html.cine = hay movimiento; .va = arranca (motion.js, o el respaldo del <head> a los 2.5 s); .listo = terminó
   (se quitan los retrasos para que después el botón y la barra respondan al instante). */
.cine:not(.va) .aurora{opacity:0}
.cine.va:not(.listo) .aurora{transition:opacity 1.6s var(--e-quart)}
.cine:not(.va) .barra{transform:translate3d(0,-110%,0)}
.cine.va:not(.listo) .barra{transition:transform .9s var(--e-expo) .15s}
/* Etiqueta: se descubre de izquierda a derecha, como la luz */
.cine:not(.va) .hero .eti{clip-path:inset(0 100% 0 0)}
.cine .hero .eti{clip-path:inset(0 0 0 0)}
.cine.va:not(.listo) .hero .eti{transition:clip-path .9s var(--e-expo) .3s}
/* Título: cada palabra sube detrás de su máscara (motion.js parte el título en palabras) */
.cine:not(.va) .hero h1[data-i]:not(.partido){opacity:0}
h1.partido{background:none}
h1.partido span{background:none}
h1.partido .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
h1.partido .wi{display:inline-block;background:linear-gradient(115deg,#fff 35%,#FFF3C9);-webkit-background-clip:text;background-clip:text;color:transparent}
h1.partido .wi.oro-w{background:linear-gradient(100deg,#F2B93B 0,#FFD868 30%,#FFF6D6 46%,#FFD868 60%,#F2B93B 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.cine:not(.va) h1.partido .wi{transform:translate3d(0,112%,0)}
.cine.va:not(.listo) h1.partido .wi{transition:transform .95s var(--e-expo)}
/* el brillo que corre una vez por la parte dorada */
h1.partido.brilla .wi.oro-w{background-position:0 0;transition:background-position 1.6s var(--e-barre)}
/* Lo demás entra después del título, enfocándose */
.cine:not(.va) .hero [data-i="3"],.cine:not(.va) .hero [data-i="5"],.cine:not(.va) .hero [data-i="6"]{opacity:0;transform:translate3d(0,10px,0);filter:blur(8px)}
.cine.va:not(.listo) .hero [data-i="3"],.cine.va:not(.listo) .hero [data-i="5"],.cine.va:not(.listo) .hero [data-i="6"]{transition:opacity .8s var(--e-expo),transform .8s var(--e-expo),filter .8s var(--e-expo)}
.cine.va:not(.listo) .hero [data-i="3"]{transition-delay:1s}
.cine.va:not(.listo) .hero [data-i="5"]{transition-delay:1.3s}
.cine.va:not(.listo) .hero [data-i="6"]{transition-delay:1.42s}
.cine:not(.va) .hero [data-i="4"]{opacity:0;transform:scale(.94)}
.cine.va:not(.listo) .hero [data-i="4"]{transition:opacity .6s var(--e-quart) 1.15s,transform .9s var(--e-expo) 1.15s}
/* Fundador: una franja de luz se abre y descubre la foto */
.cine:not(.va) .fundador[data-i]{clip-path:inset(49% 0 49% 0 round 30px);opacity:0}
.cine .fundador[data-i]{clip-path:inset(0 0 0 0 round 30px)}
.cine.va:not(.listo) .fundador[data-i]{transition:clip-path 1.25s var(--e-expo) .62s,opacity .2s linear .62s}
.cine:not(.va) .fundador[data-i] img{transform:scale(1.14)}
.cine.va:not(.listo) .fundador[data-i] img{transition:transform 1.9s var(--e-expo) .62s}

/* ===== BOTONES · el oro se ilumina y sigue tantito al mouse; al tocarlo se hunde (ya venía) ===== */
.oro{position:relative;overflow:hidden;isolation:isolate;translate:var(--ix,0) var(--iy,0);transition:transform .12s,box-shadow .12s,translate var(--t2) var(--e-expo)}
.oro .fl{position:relative;z-index:4}
.sec{translate:var(--ix,0) var(--iy,0);transition:translate var(--t2) var(--e-expo),background var(--t2),box-shadow var(--t2)}
@media (hover:hover) and (pointer:fine){
  .oro:hover{box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 5px 0 #C08A22,0 22px 44px -10px rgba(255,216,104,.75)}
  .sec:hover{background:rgba(5,170,234,.16);box-shadow:0 0 26px rgba(5,170,234,.38)}
  .oro:hover .fl,.sec:hover .fl{transform:translateX(5px)}
}

/* ===== TÍTULOS DE SECCIÓN · la etiqueta se enmarca con dos hilos de luz y el título sube detrás de su máscara ===== */
.cab .eti{display:inline-flex;align-items:center;gap:12px}
.cab .eti::before,.cab .eti::after{content:"";width:22px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--dorado))}
.cab .eti::after{background:linear-gradient(90deg,var(--dorado),transparent)}
.rev .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
h2.rev{background:none}
.rev .in{display:block;background:linear-gradient(115deg,#fff 45%,var(--dorado));-webkit-background-clip:text;background-clip:text;color:transparent}
.cine [data-rev] .eti::before{transform:scaleX(0);transform-origin:right}
.cine [data-rev] .eti::after{transform:scaleX(0);transform-origin:left}
.cine [data-rev] .eti{opacity:0}
.cine [data-rev] .rev .in{transform:translate3d(0,108%,0)}
.cine [data-rev] .cab-p{opacity:0;transform:translate3d(0,8px,0)}
.cine [data-rev].si .eti{opacity:1;transition:opacity .5s var(--e-quart)}
.cine [data-rev].si .eti::before,.cine [data-rev].si .eti::after{transform:none;transition:transform .9s var(--e-expo) .1s}
.cine [data-rev].si .rev .in{transform:none;transition:transform 1s var(--e-expo) .12s}
.cine [data-rev].si .cab-p{opacity:1;transform:none;transition:opacity .8s var(--e-expo) .35s,transform .8s var(--e-expo) .35s}

/* ===== ANTES / DESPUÉS · comparador: la línea es la luz que limpia ===== */
.adx-wrap{display:grid;gap:18px}
/* celular: título arriba, el comparador en medio y los botones de pares abajo */
@media (max-width:899px){.adx-txt{display:contents}.adx-txt .cab{order:1;margin-bottom:0}.comp{order:2}.pares{order:3}}
.comp{--p:50%;position:relative;aspect-ratio:3/4;border-radius:26px;overflow:hidden;border:1.5px solid rgba(255,255,255,.2);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;background:#0b0b10}
.comp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.comp .c-a{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0);will-change:clip-path}
.comp .c-l{position:absolute;top:0;bottom:0;left:var(--p);width:0;z-index:3;pointer-events:none}
.comp .c-l::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 18%,#fff 82%,rgba(255,255,255,0));
  box-shadow:0 0 14px rgba(255,255,255,.75),0 0 40px rgba(5,170,234,.55)}
.comp .c-l::after{content:"";position:absolute;top:0;bottom:0;left:0;width:90px;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12));mix-blend-mode:overlay;opacity:0;transition:opacity var(--t2)}
.comp.barre .c-l::after,.comp.arr .c-l::after{opacity:1}
.comp .c-m{position:absolute;top:50%;left:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,8,24,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 22px rgba(5,170,234,.35);transition:transform var(--t2) var(--e-expo)}
.comp .c-m svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.comp.arr .c-m{transform:scale(1.12)}
.comp .c-et{position:absolute;bottom:12px;z-index:2;font:800 11px Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;border-radius:99px;pointer-events:none;transition:opacity var(--t2) var(--e-quart)}
.comp .c-et.a{left:12px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff}
.comp .c-et.d{right:12px;background:linear-gradient(180deg,#FFE7A0,#FFD868);color:#1A1233}
.comp[data-lado="a"] .c-et.d,.comp[data-lado="d"] .c-et.a{opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.comp input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.comp:focus-within{outline:2px solid var(--azul);outline-offset:3px}
.comp .c-cur{position:absolute;left:0;top:0;z-index:4;pointer-events:none;font:800 10.5px Montserrat,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:#1A1233;background:#fff;padding:6px 11px;border-radius:99px;margin:18px 0 0 18px;opacity:0;transition:opacity var(--t1)}
.comp.encima .c-cur{opacity:1}
.comp.cambia img{opacity:0;transition:opacity .28s var(--e-quart)}
.comp img{transition:opacity .45s var(--e-quart)}
.pares{display:flex;gap:8px;justify-content:center}
.pares button{font:700 13px Montserrat,sans-serif;color:rgba(255,255,255,.78);padding:9px 16px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);transition:background var(--t2),color var(--t2),border-color var(--t2),transform var(--t1)}
.pares button[aria-pressed="true"]{color:#1A1233;background:linear-gradient(180deg,#FFE7A0,#FFD868);border-color:transparent}
.pares button:active{transform:scale(.96)}
.pares button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.adx-txt{text-align:center}
.adx-txt p{font-size:14.5px;max-width:420px;margin:0 auto}
/* entrada del comparador: se abre desde una franja, la foto se asienta */
.cine .comp[data-rev]{clip-path:inset(8% 6% 8% 6% round 26px);opacity:0}
.cine .comp[data-rev].si{clip-path:inset(0 0 0 0 round 26px);opacity:1;transition:clip-path 1.1s var(--e-expo),opacity .4s var(--e-quart)}

/* ===== RUTAS · el foco de luz sigue al mouse dentro de la tarjeta (solo computadora); en celular, se hunde al tocar ===== */
.ruta{transition:transform var(--t1) var(--e-quart),border-color var(--t2)}
.ruta>span{position:relative;z-index:1}
.ruta:active{transform:scale(.985)}
.ruta .ic{transition:background var(--t2),border-color var(--t2),box-shadow var(--t2)}
@media (hover:hover) and (pointer:fine){
  .ruta::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t2) var(--e-quart);
    background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,216,104,.16),rgba(5,170,234,.06) 45%,transparent 70%)}
  .ruta:hover::before{opacity:1}
  .ruta:hover{border-color:rgba(255,216,104,.42)}
  .ruta:hover .ic{border-color:rgba(255,216,104,.75);box-shadow:0 0 22px rgba(255,216,104,.28)}
}

/* ===== EL OFICIO · la foto se mueve tantito con el scroll y un reflejo cruza el metal de la pistola ===== */
.oficio .marco{position:absolute;inset:0;overflow:hidden;z-index:0}
.oficio::before{z-index:1}
.oficio .marco img{will-change:transform;transform:translate3d(0,var(--py,0px),0) scale(1.12)}
.oficio .brillo{position:absolute;inset:0;z-index:2;pointer-events:none}
.oficio .txt{z-index:2}
.cine .oficio[data-rev] .marco img{transform:translate3d(0,var(--py,0px),0) scale(1.26)}
.cine .oficio[data-rev].si .marco img{transform:translate3d(0,var(--py,0px),0) scale(1.12);transition:transform 1.8s var(--e-expo)}
.cine .oficio[data-rev] .txt{opacity:0;transform:translate3d(0,14px,0)}
.cine .oficio[data-rev].si .txt{opacity:1;transform:none;transition:opacity .9s var(--e-expo) .35s,transform .9s var(--e-expo) .35s}

/* ===== PRODUCTOS · se levantan poquito al pasar el mouse ===== */
@media (hover:hover) and (pointer:fine){
  .prod{transition:transform var(--t2) var(--e-expo),box-shadow var(--t2) var(--e-expo)}
  .prod .pic img{transition:transform var(--t3) var(--e-expo)}
  .prod:hover{transform:translate3d(0,-5px,0);box-shadow:0 34px 60px -26px rgba(0,0,0,.95),0 0 0 1px rgba(255,216,104,.5)}
  .prod:hover .pic img{transform:scale(1.05)}
  .fundador img{transition:transform 1.2s var(--e-expo)}
  .fundador:hover img{transform:scale(1.03)}
  .pie a{transition:background var(--t2),border-color var(--t2),color var(--t2)}
  .pie a:hover{color:#fff;border-color:rgba(255,216,104,.5);background:rgba(255,216,104,.08)}
}

/* ===== LUZ POR SECCIÓN · la aurora cambia de luz según dónde vas (azul en lo limpio, oro en el oficio) ===== */
.aurora b{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--e-barre)}
.aurora b.l-azul{background:radial-gradient(70vmax 55vmax at 78% 38%,rgba(5,170,234,.2),rgba(5,170,234,0) 70%)}
.aurora b.l-oro{background:radial-gradient(70vmax 55vmax at 18% 70%,rgba(255,216,104,.11),rgba(255,216,104,0) 70%)}
.aurora[data-luz="azul"] b.l-azul,.aurora[data-luz="oro"] b.l-oro{opacity:1}

/* ===== GRANO DE CINE · fijo, quieto y casi invisible (solo computadora: en celular no se nota y cuesta) ===== */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .grano{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.045;
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
}

/* ===== Computadora: el comparador a un lado y el texto con los botones al otro ===== */
@media (min-width:900px){
  .adx-wrap{grid-template-columns:minmax(0,460px) 1fr;gap:56px;align-items:center}
  .adx-txt{text-align:left}
  .adx-txt .cab{text-align:left}
  .adx-txt p{margin:0}
  .pares{justify-content:flex-start;margin-top:22px}
  .oficio .marco{left:auto;width:50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
  .oficio .marco img{position:absolute;inset:0;width:100%;height:100%;object-position:50% 50%;transform:translate3d(0,var(--py,0px),0) scale(1.35);transform-origin:55% 50%;-webkit-mask-image:none;mask-image:none}
  .cine .oficio[data-rev] .marco img{transform:translate3d(0,var(--py,0px),0) scale(1.5)}
  .cine .oficio[data-rev].si .marco img{transform:translate3d(0,var(--py,0px),0) scale(1.35)}
}

/* ===== Aparición general (la de colibri.css, más fina: menos desenfoque, curva exponencial) ===== */
.mov .ve{filter:blur(6px);transform:translate3d(0,12px,0)}
.mov .ve.si{filter:none;transform:none;transition:opacity .8s var(--e-expo),filter .8s var(--e-expo),transform .8s var(--e-expo)}

/* ===== Movimiento reducido: todo visible y quieto (el comparador sigue funcionando a mano) ===== */
@media (prefers-reduced-motion:reduce){
  .reflejo.pasa::before{animation:none}
  .oficio .marco img{transform:scale(1.12)!important}
}