/* =========================================================
   Sofisticado · capa de movimiento y navegación (site.css)
   Paleta extraída del sitio. Usar solo estas variables.
   ========================================================= */
:root{
  --c-slate:#1b272d;        /* pizarra: texto principal, fondos oscuros */
  --c-orange:#f5781c;       /* naranja de marca */
  --c-white:#ffffff;        /* fondo */
  --c-text:#4a555b;         /* texto secundario */
  --c-line:#d7dbdd;         /* bordes */
  --c-mist:#c9d0d3;         /* texto sobre oscuro */
  --c-hair:#e6e8e9;         /* separadores */
  --c-muted:#5d686e;        /* texto apagado */
  --c-muted-2:#5d6b72;      /* bordes sobre oscuro */
  --c-orange-text:#b3520a;  /* naranja accesible para texto chico */
  --c-slate-2:#243238;      /* tarjetas sobre oscuro */
  --c-slate-3:#3a4950;      /* bordes sobre oscuro */
  --c-black:#000000;

  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --t-fast:200ms; --t-med:350ms; --t-slow:600ms;
}

/* ---------- Transiciones entre páginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--t-med) var(--ease-io) both}
::view-transition-new(root){animation:vt-in var(--t-slow) var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
/* respaldo para navegadores sin View Transitions entre documentos */
html.js-fade body{transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
html.js-leaving body{opacity:0;transform:translateY(-10px)}
html.js-entering body{opacity:0;transform:translateY(12px)}

/* ---------- Foco visible ---------- */
:focus-visible{outline:3px solid var(--c-orange);outline-offset:3px;border-radius:4px}

/* ---------- Encabezado fijo + indicador de sección ---------- */
.site-header{position:sticky;top:0;z-index:45;background:var(--c-white);transition:box-shadow var(--t-med) var(--ease-out)}
.site-header.scrolled{box-shadow:0 8px 30px rgba(27,39,45,.08)}
.nav-links{position:relative}
.nav-links .nav-text{position:relative;transition:color var(--t-fast) var(--ease-out)}
.nav-links .nav-text:hover,.nav-links .nav-text.active{color:var(--c-slate)}
.nav-ind{position:absolute;left:0;bottom:-8px;height:2px;width:1px;background:var(--c-orange);transform-origin:left;transform:translateX(var(--x,0px)) scaleX(var(--w,0));opacity:var(--o,0);transition:transform var(--t-med) var(--ease-out),opacity var(--t-fast) var(--ease-out);pointer-events:none}

/* ---------- Menú móvil a pantalla completa ---------- */
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid var(--c-slate);border-radius:22px;background:var(--c-white);color:var(--c-slate);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--t-fast) var(--ease-out),background var(--t-fast),color var(--t-fast)}
.menu-btn:active{transform:scale(.94)}
.menu-btn span,.menu-btn span:before,.menu-btn span:after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform var(--t-med) var(--ease-out),opacity var(--t-fast)}
.menu-btn span:before,.menu-btn span:after{content:"";position:absolute;left:0}
.menu-btn span:before{transform:translateY(-6px)}.menu-btn span:after{transform:translateY(6px)}
@media (max-width:1320px){.menu-btn{display:inline-flex}}
.mmenu{position:fixed;inset:0;z-index:70;background:var(--c-slate);color:var(--c-white);display:flex;flex-direction:column;padding:20px clamp(20px,5vw,48px) 32px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out),visibility 0s linear var(--t-med)}
.mmenu.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out),visibility 0s}
.mmenu-top{display:flex;justify-content:space-between;align-items:center}
.mmenu-top img{height:34px;width:auto}
.mmenu-close{width:44px;height:44px;border-radius:22px;border:1.5px solid var(--c-muted-2);background:transparent;color:var(--c-white);font-size:24px;line-height:1;cursor:pointer}
.mmenu nav{display:flex;flex-direction:column;gap:6px;margin-top:clamp(32px,8vh,72px)}
.mmenu nav a{font-size:clamp(30px,8vw,44px);font-weight:300;color:var(--c-white);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--c-slate-3);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(18px);transition:opacity var(--t-med) var(--ease-out),transform var(--t-slow) var(--ease-out),color var(--t-fast)}
.mmenu nav a:after{content:"→";font-size:22px;color:var(--c-orange);transform:translateX(-6px);transition:transform var(--t-fast) var(--ease-out)}
.mmenu nav a:hover:after,.mmenu nav a:focus-visible:after{transform:none}
.mmenu nav a.active{color:var(--c-orange)}
.mmenu.open nav a{opacity:1;transform:none}
.mmenu.open nav a:nth-child(1){transition-delay:60ms}.mmenu.open nav a:nth-child(2){transition-delay:110ms}.mmenu.open nav a:nth-child(3){transition-delay:160ms}.mmenu.open nav a:nth-child(4){transition-delay:210ms}.mmenu.open nav a:nth-child(5){transition-delay:260ms}
.mmenu .mmenu-cta{margin-top:auto;display:block;text-align:center;padding:18px 24px;border-radius:4px;background:var(--c-orange);color:var(--c-slate);font-weight:700;font-size:17px;text-decoration:none;opacity:0;transform:translateY(18px);transition:opacity var(--t-med) var(--ease-out) 300ms,transform var(--t-slow) var(--ease-out) 300ms}
.mmenu.open .mmenu-cta{opacity:1;transform:none}
html.menu-open{overflow:hidden}

/* ---------- Aparición al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ---------- Microinteracciones ---------- */
.btn,.nav-cta,.mmenu-cta{transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background-color var(--t-fast),color var(--t-fast)}
.btn:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,39,45,.18)}
.btn:active,.nav-cta:active{transform:translateY(0) scale(.98);box-shadow:none}
main p a,.foot-col a{background-image:linear-gradient(var(--c-orange),var(--c-orange));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--t-med) var(--ease-out),color var(--t-fast)}
main p a:hover,.foot-col a:hover{background-size:100% 2px}
.card,.pb,.pcl{transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,39,45,.10)}
[data-zoom] img{transition:transform var(--t-slow) var(--ease-out)}
[data-zoom]:hover img{transform:scale(1.015)}
article{transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
#quien article:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(27,39,45,.10)}

/* ---------- Detalle de portada: despliegue 3D ---------- */
.depth{position:relative;perspective:1200px;perspective-origin:50% 0%;--u:1;--rx:0deg;--ry:0deg}
.depth .aura{position:absolute;left:50%;top:45%;width:70%;aspect-ratio:1.6;border-radius:50%;background:radial-gradient(closest-side,rgba(245,120,28,.5),rgba(245,120,28,0));filter:blur(30px);transform:translate(-50%,-50%) translate(var(--ax,0px),var(--ay,0px)) scale(calc(.6 + var(--u) * .5));opacity:calc(.2 + var(--u) * .45);pointer-events:none;transition:transform .25s linear}
.depth .tilt{position:relative;transform-style:preserve-3d;transform-origin:50% 100%;transform:translateY(calc((1 - var(--u)) * 90px)) rotateX(calc((1 - var(--u)) * 32deg + var(--rx))) rotateY(var(--ry)) scale(calc(.86 + var(--u) * .14));will-change:transform}
.depth .tilt.ease{transition:transform var(--t-slow) var(--ease-out)}
.depth .tilt > a{position:relative}
.depth .floor{position:absolute;left:4%;right:4%;bottom:-8%;height:16%;border-radius:50%;background:var(--c-slate);filter:blur(28px);opacity:.3;transform:translateZ(-60px);pointer-events:none}
.depth .scan{position:absolute;left:0;right:0;top:0;height:35%;background:linear-gradient(180deg,rgba(245,120,28,0),rgba(245,120,28,.16) 85%,rgba(245,120,28,.55) 100%);transform:translateY(-100%);opacity:0;animation:scan 3.2s var(--ease-io) .9s 2 both;pointer-events:none;mix-blend-mode:screen}
@keyframes scan{0%{transform:translateY(-100%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(300%);opacity:0}}
.depth .glare{position:absolute;inset:0;border-radius:10px;overflow:hidden;pointer-events:none}
.depth .glare:before{content:"";position:absolute;width:80%;aspect-ratio:1;left:10%;top:-40%;background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,0) 60%);transform:translate(var(--gx,0px),var(--gy,0px));opacity:var(--go,0);transition:opacity var(--t-med) var(--ease-out)}
.depth .edge{position:absolute;inset:-1px;border-radius:11px;border:1.5px solid var(--c-orange);opacity:var(--eo,0);transition:opacity var(--t-med) var(--ease-out);pointer-events:none}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.js-fade body{transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .mmenu,.mmenu nav a,.mmenu .mmenu-cta{transition:none}
  .depth .tilt{transform:none}.depth .scan{display:none}.depth .aura{transition:none}
  .btn:hover,.nav-cta:hover,.card:hover,#quien article:hover{transform:none}
  .nav-ind{transition:none}
}

/* ---------- Ajuste de encabezado en celulares chicos ---------- */
@media (max-width:480px){.nav-links .nav-cta{display:none}}

/* ---------- Slider de productos: pausa ---------- */
.prod.hold .pn.on .pbar i,.prod.paused .pn.on .pbar i,.prod.offscreen .pn.on .pbar i{animation-play-state:paused}
.pctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-28px}
.pctrl .pcount{margin-left:auto;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--c-muted)}
.pplay{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-size:14px;font-weight:600;color:var(--c-slate);background:var(--c-white);border:1.5px solid var(--c-line);border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.pplay:hover{border-color:var(--c-slate)}
.pplay:active{transform:scale(.97)}
.pplay-i{position:relative;width:12px;height:12px;display:inline-block}
.pplay-i:before,.pplay-i:after{content:"";position:absolute;top:0;width:4px;height:12px;background:var(--c-slate);border-radius:1px}
.pplay-i:before{left:1px}.pplay-i:after{right:1px}
.pplay.is-paused .pplay-i:before{left:2px;width:0;height:0;background:none;border-radius:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--c-orange)}
.pplay.is-paused .pplay-i:after{display:none}
@media (min-width:761px){.pctrl .parrows{display:none}}
@media (max-width:760px){.pctrl{margin-top:-30px}.pctrl .pcount{margin-left:0}.pplay .pplay-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.pplay{padding:10px 14px}}