/* =========================================================
   Ajustes de motion para la versión web (GSAP).
   Regla: el estado FINAL es el estado por defecto del CSS.
   Solo se oculta de antemano lo visible al cargar (hero),
   y GSAP deja siempre el estado final explícito al terminar.
   ========================================================= */

/* Láser: GSAP controla la animación (el keyframe CSS queda para el lienzo) */
.js .laser .ink,.js .laser .beam{animation:none}
.js .laser .ink{clip-path:inset(0 100% 0 0)}
.js [data-hero-prod],.js [data-hero-shadow],.js .hero-label{opacity:0}
.no-motion .laser .ink{clip-path:none!important}
.no-motion .laser .beam{display:none}

/* Capas de media: entrada (.media) · puntero (.media-in) · hover CSS (.shot/.photo) */
.media,.media-in{position:relative;width:100%;height:100%}
.cat .media{position:absolute;inset:0}
.cat .media-in .shot{position:absolute;inset:0}
@media(hover:hover){.cat:hover .photo{transform:scale(1.03)}.cat:hover .cat-arrow{transform:translateX(4px)}}
.cat .photo{transition:transform .5s cubic-bezier(.22,.61,.36,1)}

/* Hero: product theater */
.hero-visual{isolation:isolate}
.hero-stage{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:48px;padding-bottom:8%}
.hero-prod{transform-origin:50% 100%}
.hero-shadow{position:absolute;bottom:8%;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(25,23,21,.24),transparent);transform-origin:50% 50%}
.hero-label{display:none;position:absolute;z-index:2;font-size:.68rem;font-weight:600;letter-spacing:.16em;line-height:1.5;color:#5E5751;pointer-events:none}
.hero-label b{display:flex;align-items:center;gap:10px;font-weight:600;color:#191715}
.hero-label b::after{content:"";display:block;width:56px;height:1px;background:#191715;opacity:.35}
@media(min-width:1024px){.hero-label{display:block}}

/* Personalización: escenario con perspectiva, respuesta y barrido de luz */
.pers-stage{perspective:900px}
.pers-rig{position:absolute;inset:0;transform-style:preserve-3d}
.pers-stage .obj-body{overflow:hidden}
.sweep{position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-150%);opacity:0;pointer-events:none}
.burn{animation:none;display:none}

/* Transición de ambiente crema → carbón */
.amb{position:relative;isolation:isolate}
.amb > .wrap{position:relative;z-index:1}
.amb-layer{position:absolute;inset:0;background:#191715;z-index:0;pointer-events:none}
.js .amb{background:#F6F1EA}

/* Empresas: fan-out */
.fan{display:flex;gap:18px;align-items:flex-end;margin-bottom:4%}
.fan-item{transform-origin:50% 100%}

/* Regalos: tilt con perspectiva */
@media(hover:hover) and (min-width:1024px){.gcard{perspective:900px}}

/* header: transparente arriba, opaco al hacer scroll */
.hdr{background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background .3s,border-color .3s}
.hdr.is-scrolled,.hdr.is-open{background:rgba(246,241,234,.94);border-bottom-color:#DED6CE;backdrop-filter:blur(4px)}
.mnav[hidden]{display:none}

/* fotos reales (cuando existan) */
.photo{width:100%;height:100%;object-fit:cover;display:block}
.skip{position:absolute;left:-9999px;top:8px;background:#191715;color:#FFFDFC;padding:10px 16px;border-radius:999px;z-index:50}
.skip:focus{left:12px}

@media(prefers-reduced-motion:reduce){
  .js [data-hero-prod],.js [data-hero-shadow],.js .hero-label{opacity:1}
  .sweep{display:none}
}

/* Fan-out en móvil: filas más compactas para que el movimiento no se corte */
@media(max-width:1023px){.fan{gap:0}.fan-item{margin:0 -10px}}