/* Capa de experiencia comun a todas las paginas: header, intro con el logo,
   transiciones entre paginas y detalles de interfaz. La inyecta
   scripts/mejoras_seo.py despues de movil.css, asi pisa los estilos viejos. */

:root{--ux-max:1200px;--ux-ease:cubic-bezier(.22,.61,.36,1)}

/* ── Transicion suave entre paginas (Chrome/Edge/Safari; el resto navega normal) ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ux-vt-out .22s ease both}
::view-transition-new(root){animation:ux-vt-in .32s var(--ux-ease) both}
@keyframes ux-vt-out{to{opacity:0}}
@keyframes ux-vt-in{from{opacity:0;transform:translateY(8px)}}
header{view-transition-name:emi-header}

/* ── Header: logo alineado con el contenido, links al centro, acciones a la derecha ── */
header{
  padding-block:12px;
  padding-inline:max(24px,calc((100% - var(--ux-max)) / 2 + 24px));
  box-shadow:none;border-bottom:1px solid rgba(15,23,42,.06);
  gap:24px;min-height:72px;
}
header.scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 6px 24px -12px rgba(15,23,42,.18)}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:46px;width:auto}
@media (min-width:1024px){
  nav{flex:1;gap:2px}
  nav > a:first-of-type{margin-left:auto}
  nav .nav-cart{margin-left:auto}
}
@media (min-width:769px){
  nav a:not(.nav-wa):not(.nav-cart){position:relative;text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;padding:10px 16px;background:none!important;color:var(--navy)}
  nav a:not(.nav-wa):not(.nav-cart)::after{content:'';position:absolute;left:16px;right:16px;bottom:4px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ux-ease)}
  nav a:not(.nav-wa):not(.nav-cart):hover::after,nav a.active::after{transform:scaleX(1)}
  nav a.active{color:var(--red)!important}
  nav .nav-cart{text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;background:none!important;margin-right:6px!important}
  nav .nav-cart:hover{color:var(--red)}
  .nav-wa{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;border-radius:999px!important;padding:11px 20px!important;box-shadow:0 8px 20px -8px rgba(211,47,47,.6)}
}
@media (min-width:769px) and (max-width:1023px){
  header{padding-inline:20px;gap:12px}
  nav a:not(.nav-wa):not(.nav-cart){padding:8px 9px!important;font-size:14px!important}
  nav a:not(.nav-wa):not(.nav-cart)::after{left:9px;right:9px}
  .nav-wa{padding:9px 14px!important}
}
/* carrito en el header (solo celular) y botones del menu con 44px para el dedo */
.hdr-cart{display:none}
@media (max-width:768px){
  header{min-height:64px;padding-block:10px;gap:4px}
  .logo img{height:40px}
  .logo{margin-right:auto}
  .hdr-cart{display:grid;place-items:center;position:relative;width:44px;height:44px;border:none;background:none;color:var(--navy);cursor:pointer;border-radius:12px}
  .hdr-cart:active{background:var(--gray-100)}
  .hdr-cart .cart-badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font:700 10px/18px var(--font-body);text-align:center;align-items:center;justify-content:center}
  .burger{width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;color:var(--navy)}
  .nav-close{display:grid!important;place-items:center;width:44px;height:44px;top:12px!important;right:12px!important;color:var(--navy)}
  nav:not(.open) .nav-close{display:none!important}
  html.sin-fab .fab-wa{display:none}
}

/* ── Intro: la pantalla azul se pinta de rojo con franjas de rodillo que chorrean,
      aparecen lineas finas y el logo blanco queda en el centro ── */
#emi-intro{display:none}
html.emi-intro{overflow:hidden}
html.emi-intro #emi-intro{
  display:flex;position:fixed;inset:0;z-index:100000;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%,#16284a 0%,#0a1628 60%,#060e1b 100%);
  /* red de seguridad: si el JS no corre, la intro se va sola */
  animation:ei-auto-out .5s ease 5s forwards;
}
#emi-intro .ei-paint{position:absolute;inset:0;display:flex}
#emi-intro .ei-paint i{flex:1;margin-right:-1px;height:calc(100% + 90px);transform:translateY(calc(-100% - 10px));
  background:linear-gradient(#D32F2F,#D32F2F) top/100% calc(100% - 88px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath fill='%23D32F2F' d='M0 0h100v18c-4 0-5 6-9 6s-4-10-9-10-5 30-10 30-4-26-9-26-5 8-10 8-4-4-9-4-6 36-11 36-4-32-9-32-5 10-10 10-4-8-9-8-5 4-5 4z'/%3E%3C/svg%3E") bottom/100% 90px no-repeat;
  animation:ei-roll .95s cubic-bezier(.7,0,.25,1) forwards}
#emi-intro .ei-paint i:nth-child(1){animation-delay:.05s}
#emi-intro .ei-paint i:nth-child(2){animation-delay:.17s;background-position:top,bottom left 30%}
#emi-intro .ei-paint i:nth-child(3){animation-delay:.1s}
#emi-intro .ei-paint i:nth-child(4){animation-delay:.24s}
#emi-intro .ei-paint i:nth-child(5){animation-delay:.13s}
#emi-intro .ei-paint i:nth-child(6){animation-delay:.2s}
#emi-intro .ei-paint i:nth-child(7){animation-delay:.08s}
#emi-intro .ei-lines{position:absolute;inset:0;opacity:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 1px,transparent 1px 34px),radial-gradient(90% 70% at 50% 50%,transparent 30%,rgba(90,0,0,.45) 100%);
  animation:ei-fade .8s ease 1.05s forwards}
#emi-intro .ei-center{position:relative;display:flex;align-items:center;gap:clamp(14px,3vw,28px);width:min(640px,88vw)}
#emi-intro .ei-rule{flex:1;height:1px;background:rgba(255,255,255,.7);transform:scaleX(0);animation:ei-rule .7s cubic-bezier(.22,.61,.36,1) 1.25s forwards}
#emi-intro .ei-rule:first-child{transform-origin:right}
#emi-intro .ei-rule:last-child{transform-origin:left}
#emi-intro .ei-logo{position:relative;width:min(340px,58vw);height:auto;filter:brightness(0) invert(1) drop-shadow(0 8px 24px rgba(60,0,0,.35));opacity:0;transform:scale(.9);animation:ei-logo .75s cubic-bezier(.34,1.4,.64,1) 1s forwards}
#emi-intro .ei-foot{position:absolute;bottom:clamp(40px,10vh,90px);display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;animation:ei-fade .5s ease 1.3s forwards}
#emi-intro .ei-bar{width:160px;height:2px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
#emi-intro .ei-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .35s var(--ux-ease)}
#emi-intro .ei-txt{font:500 11px/1 var(--font-body);letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.75)}
#emi-intro.ei-out{animation:ei-out .7s cubic-bezier(.76,0,.24,1) forwards;pointer-events:none}
@keyframes ei-roll{to{transform:translateY(0)}}
@keyframes ei-logo{to{opacity:1;transform:none}}
@keyframes ei-rule{to{transform:scaleX(1)}}
@keyframes ei-fade{to{opacity:1}}
@keyframes ei-out{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes ei-auto-out{to{opacity:0;visibility:hidden}}

/* ── Detalles generales ── */
::selection{background:rgba(211,47,47,.18)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.fab-wa{box-shadow:0 12px 28px -8px rgba(37,211,102,.6)}
footer .footer-brand img{height:44px!important;width:auto}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.emi-intro #emi-intro{display:none}
  html.emi-intro{overflow:auto}
}