/* =====================================================================
   site.css — piezas COMPARTIDAS por index.html, snuff.html y autor.html
   (se carga DESPUÉS del <style> de cada página para unificar):
   foco accesible · enlace "saltar" · selector de idioma · cabecera con
   menú móvil · sistema de botones · barra de compra fija · pie.
   ===================================================================== */
:root{--ring:#8fd0ff;--btn-r:0;--hit:44px;--disp:'Anton',Impact,sans-serif;--sans:'Archivo','Helvetica Neue',Arial,sans-serif}

/* ---------- accesibilidad ---------- */
:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:#fff;color:#000;padding:12px 18px;border-radius:8px;
  font:700 14px/1 var(--sans);letter-spacing:.06em;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- selector de idioma (control segmentado) ---------- */
.lang{display:flex;gap:2px;padding:3px;border:1px solid rgba(226,242,253,.3);border-radius:999px;background:rgba(8,11,14,.6)}
.lang button{min-width:40px;min-height:34px;padding:0 .75em;border:0;border-radius:999px;background:none;color:#e2f2fd;
  font:700 12px/1 var(--sans)!important;letter-spacing:.14em!important;opacity:.7!important;text-decoration:none!important;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.lang button:hover{opacity:1!important;background:rgba(226,242,253,.12)}
.lang button[aria-pressed=true]{background:#e2f2fd;color:#0b0f13;opacity:1!important;text-shadow:none}

/* ---------- carrito (icono + contador) ---------- */
.cartl,.cartbtn{display:inline-flex!important;align-items:center;gap:.55em;min-height:var(--hit);padding:0 14px!important;border:1px solid rgba(226,242,253,.3)!important;
  border-radius:999px;background:rgba(8,11,14,.6)!important;text-decoration:none!important;transition:border-color .2s,background .2s}
.cartl:hover,.cartbtn:hover{border-color:#e2f2fd!important;background:rgba(226,242,253,.1)!important}
.cartl .n,.cartbtn .n{min-width:1.7em;padding:.25em .5em;text-align:center;font-weight:800}

/* ---------- cabecera de páginas interiores ---------- */
.top{height:72px!important;gap:16px}
.top .brand{flex:none}
.mainnav{display:flex;gap:4px;align-items:center}
.mainnav a{display:inline-flex;align-items:center;min-height:var(--hit);padding:0 14px;border-radius:999px;text-decoration:none!important;opacity:.8;transition:opacity .2s,background .2s}
.mainnav a:hover{opacity:1;background:rgba(226,242,253,.08)}
.mainnav a[aria-current=page]{opacity:1;box-shadow:inset 0 -2px 0 #e2f2fd;border-radius:0}
.menubtn{display:none!important;width:var(--hit);height:var(--hit);align-items:center;justify-content:center;border:1px solid rgba(226,242,253,.3)!important;border-radius:999px;background:rgba(8,11,14,.6)!important}
.menubtn svg{width:22px;height:22px}
.menubtn .x{display:none}.top.open .menubtn .x{display:block}.top.open .menubtn .b{display:none}
@media (max-width:900px){
  .menubtn{display:inline-flex!important}
  .mainnav{display:none!important}           /* en ≤ 900 px el menú vive en el panel #mnav */
}
@media (max-width:560px){.top .lang{display:none!important}}   /* en móvil el idioma está dentro del menú */
@media (max-width:420px){.top .lang button{min-width:34px;padding:0 .5em}.top .brand i{display:none}}
.top a.brand{display:inline-block!important}

/* ---------- sistema de botones (interiores; index usa el mismo lenguaje) ---------- */
.pg .btn{font:800 16px/1 var(--sans)!important;letter-spacing:.12em!important;min-height:56px!important;padding:0 1.8em!important;border-radius:var(--btn-r)!important;
  border:1.5px solid rgba(226,242,253,.6)!important;background:rgba(18,24,31,.85)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.5)!important;white-space:nowrap;
  transition:background .2s,color .2s,transform .15s,border-color .2s,box-shadow .2s!important}
.pg .btn:hover{background:#e2f2fd!important;color:#0b0f13!important;border-color:#e2f2fd!important;transform:translateY(-2px)}
.pg .btn:active{transform:translateY(0) scale(.98)}
.pg .btn.primary{background:#fff!important;color:#0b0f13!important;border-color:#fff!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 10px 34px rgba(120,190,240,.32),inset 0 -3px 0 rgba(0,0,0,.12)!important}
.pg .btn.primary:hover{background:#0b0f13!important;color:#fff!important;border-color:#fff!important}
.pg .btn[disabled],.pg .btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.pg .btn .spin{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pg .cta .btn{flex:1 1 220px}
@media (max-width:560px){.pg .cta{flex-direction:column}.pg .cta .btn{width:100%;flex:none}}

/* ---------- barra de compra fija (snuff.html) ---------- */
.buybar{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:45;transform:translate(-50%,140%);transition:transform .35s cubic-bezier(.2,.9,.25,1);
  width:min(calc(100% - 24px),760px);display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border:1px solid rgba(226,242,253,.25);border-radius:16px;
  background:rgba(10,12,15,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.7)}
.buybar.show{transform:translate(-50%,0)}
.buybar .bb-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.buybar .bb-t b{font:400 22px/1 var(--disp);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .bb-t span{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(233,237,240,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .btn{min-height:48px!important;padding:0 1.2em!important;font-size:14px!important;box-shadow:none!important}
.buybar .btn.icon{width:48px;padding:0!important}
.buybar .btn svg{width:1.3em;height:1.3em}
@media (max-width:420px){.buybar .bb-t span{display:none}}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}

/* ---------- formularios ---------- */
.consent input,.modal input[type=checkbox]{width:22px!important;height:22px!important;flex:none;accent-color:#e2f2fd}

/* =====================================================================
   ESTÉTICA BRUTALISTA Y FINA (v4) — sin esquinas redondeadas, filetes de 1 px,
   sin degradados ni sombras en controles; el estado se marca invirtiendo blanco/negro.
   ===================================================================== */
*,*::before,*::after{border-radius:0!important}
.spin,.globe{border-radius:50%!important}
:focus-visible{outline:1px solid #fff;outline-offset:3px;box-shadow:0 0 0 4px rgba(143,208,255,.55)}
.skip{border-radius:0}
/* idioma: celdas unidas por filetes */
.lang{gap:0;padding:0;border:1px solid rgba(226,242,253,.45);background:rgba(0,0,0,.6)}
.lang button{min-height:34px;min-width:40px;border-left:1px solid rgba(226,242,253,.45);font:600 11px/1 var(--sans)!important;letter-spacing:.2em!important}
.lang button:first-child{border-left:0}
.lang button[aria-pressed=true]{background:#fff;color:#000}
/* carrito y menú */
.cartl,.cartbtn,.menubtn{border:1px solid rgba(226,242,253,.45)!important;background:rgba(0,0,0,.6)!important;min-height:36px!important}
.cartl,.cartbtn{padding:0 12px!important}
.cartl .n,.cartbtn .n{background:#fff!important;color:#000!important;padding:.3em .45em;font:800 11px/1 var(--sans)}
.menubtn{width:44px;height:44px}
.top{background:linear-gradient(#000 82%,rgba(0,0,0,0))!important;border-bottom:0}
.mainnav a{font-weight:600;letter-spacing:.18em}
.mainnav a:hover{background:none;text-decoration:underline!important;text-underline-offset:6px}
.mainnav a[aria-current=page]{box-shadow:inset 0 -1px 0 #fff}
/* botones de páginas interiores */
.pg .btn{font:600 13px/1 var(--sans)!important;letter-spacing:.2em!important;min-height:52px!important;padding:0 1.6em!important;
  border:1px solid rgba(226,242,253,.6)!important;background:rgba(0,0,0,.55)!important;box-shadow:none!important;transform:none!important}
.pg .btn:hover{background:#e2f2fd!important;color:#000!important}
.pg .btn.primary{background:#fff!important;color:#000!important;border-color:#fff!important;font-weight:800!important;box-shadow:none!important}
.pg .btn.primary:hover{background:#c8161d!important;color:#fff!important;border-color:#c8161d!important}
.pg .btn svg{width:15px!important;height:15px!important;stroke-width:1.5}
.pg .cta{gap:0!important}
.pg .cta .btn+.btn{border-left:0!important}
@media (max-width:560px){.pg .cta .btn+.btn{border-left:1px solid rgba(226,242,253,.6)!important;border-top:0!important}}
/* barra de compra */
.buybar{border-radius:0;border:1px solid rgba(226,242,253,.4);box-shadow:none;padding:0 0 0 16px;gap:0;background:rgba(0,0,0,.92)}
.buybar .btn{min-height:52px!important;border-top:0!important;border-bottom:0!important;border-right:0!important}
.buybar .bb-t b{font-size:18px}
/* modal, cajón, aviso */
.modal{border:1px solid rgba(226,242,253,.5)!important;background:#000!important;box-shadow:none}
.modal input[type=email]{border:1px solid rgba(226,242,253,.5)!important;background:#000!important}
.drawer{background:rgba(0,0,0,.96)!important;border-left:1px solid rgba(226,242,253,.4)!important}
#cartClose,.modal .close{border:1px solid rgba(226,242,253,.45)!important;width:40px!important;height:40px!important}
.qty button{border:1px solid rgba(226,242,253,.45)!important}
.toast{background:#fff!important;color:#000!important;border:0;font-weight:700!important;letter-spacing:.18em!important}
.drawer .btn,.modal .btn{border-radius:0!important;box-shadow:none!important;background:#fff!important;color:#000!important;border:1px solid #fff!important;font:800 13px/1 var(--sans)!important;letter-spacing:.2em!important;min-height:52px!important}
.drawer .btn:hover,.modal .btn:hover{background:#c8161d!important;color:#fff!important;border-color:#c8161d!important}
.drawer .btn[disabled]{background:transparent!important;color:#e2f2fd!important;border-color:rgba(226,242,253,.3)!important}
/* chips de sección (snuff) y formularios (autor) */
.chips a{border-color:rgba(226,242,253,.3)!important;min-height:40px!important;font-size:11.5px!important;letter-spacing:.18em!important}
.chips .wrap{gap:0!important}.chips a+a{border-left:0!important}
.chips a.on{background:#fff!important;color:#000!important}
.f input,.f select,.f textarea{border:1px solid rgba(226,242,253,.3)!important;background:#000!important}
.f input:focus,.f select:focus,.f textarea:focus{border-color:#fff!important;outline:0!important;box-shadow:inset 0 0 0 1px #fff}
.f input,.f select,.f textarea,.pg .btn,.buybar .btn{border-radius:0!important}
@media (max-width:420px){.buybar{padding-left:12px}.buybar .bb-t b{font-size:16px}.buybar .btn{padding:0 .85em!important;letter-spacing:.12em!important;font-size:12px!important}}

/* =====================================================================
   MENÚ HAMBURGUESA A PANTALLA COMPLETA (#mnav, generado por site.js) — ≤ 900 px
   ===================================================================== */
html.menu-open,html.menu-open body{overflow:hidden!important}
.mnav{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;background:#000;color:#fff;
  padding:0 clamp(16px,5vw,40px) max(22px,env(safe-area-inset-bottom));overflow-y:auto;
  opacity:0;transition:opacity .22s}
.mnav[hidden]{display:none}
.mnav.open{opacity:1}
.mnav::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.mtop{flex:none;height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(226,242,253,.25)}
.mbrand{font:800 22px/1 var(--sans);letter-spacing:0;background:#fff;color:#000;padding:.1em .3em;text-decoration:none}
.mbrand i{font:500 9px var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;margin-left:.5em;vertical-align:.6em}
.mclose{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid rgba(226,242,253,.45);background:none;color:#fff;cursor:pointer}
.mclose:hover{background:#fff;color:#000}
.mclose svg{width:20px;height:20px}
.mlist{flex:1;display:flex;align-items:center;padding:18px 0}
.mlist ol{list-style:none;margin:0;padding:0;width:100%}
.mlist li{opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.25,1);transition-delay:calc(var(--i)*55ms + 60ms)}
.mnav.open .mlist li{opacity:1;transform:none}
.mlist a{display:flex;align-items:center;gap:clamp(14px,4vw,26px);min-height:64px;padding:12px 0;border-bottom:1px solid rgba(226,242,253,.18);
  color:#fff;text-decoration:none;font:400 clamp(32px,9vw,58px)/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;transition:padding .2s,color .2s}
.mlist li:first-child a{border-top:1px solid rgba(226,242,253,.18)}
.mlist a span{flex:none;min-width:2.6em;white-space:nowrap;font:600 11px/1 var(--sans);letter-spacing:.2em;color:rgba(226,242,253,.5)}
.mlist a:hover,.mlist a:focus-visible{padding-left:10px;color:#ff4b52}
.mlist a[aria-current=page]{color:#ff4b52}
.mlist a[aria-current=page] span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;background:#ff4b52;vertical-align:1px}
.mfoot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(226,242,253,.25)}
.mfoot .lang button{min-height:44px;min-width:52px}
.mfoot p{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(226,242,253,.55)}
.mfoot p b{color:#ff4b52}
@media (max-height:520px){.mtop{height:56px}.mlist a{min-height:48px;font-size:28px}.mlist{padding:8px 0}}
@media (prefers-reduced-motion:reduce){.mnav,.mlist li{transition:none}}
/* móvil en horizontal: cabecera más baja y chips no fijos para no comerse la pantalla */
@media (orientation:landscape) and (max-height:520px){
  .top{height:56px!important}
  .chips{position:static!important;padding-top:64px!important}
  .pg .hero{padding-top:20px!important}
  .buybar{bottom:8px}
}

/* ===== v8: logo real (imagen) en cabecera y menú ===== */
.top a.brand{background:none!important;padding:0!important;line-height:0;text-shadow:none}
.top a.brand img{display:block;height:56px;width:auto}
.top a.brand:hover{text-decoration:none;opacity:.88}
.mbrand{background:none!important;padding:0!important;line-height:0}
.mbrand img{display:block;height:54px;width:auto}
@media (orientation:landscape) and (max-height:520px){.top a.brand img{height:44px}.mbrand img{height:42px}}