/* ===========================================================
   KAYKO — EL ZOCALO

   Esta hoja la usan LAS DOS PANTALLAS: el sitio y el catálogo. No hay dos
   zócalos parecidos, hay uno solo —con las variables de la marca, que
   también son de las dos—.

   Es lo que hace que pasar del home al catálogo no sea un salto: arriba no
   cambia absolutamente nada.

   OJO: acá no va ningún reinicio general (`*`, `a`, `body`). El catálogo
   trae su propia hoja y un reinicio de esta se la comería entera; lo que el
   zócalo necesita va apuntado a él y a nada más.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@200;300;400;500&display=swap');

:root{
  --negro:#0B0000;  --carbon:#171317;  --carbon2:#221C21;
  --oro:#D8A94E;    --oro-claro:#F8E88A; --oro-hondo:#A9793A; --oro-fondo:#5C4623;
  --crema:#F2E8D5;  --papel:#FAF6EF;
  --bordo:#6E1A28;  --bordo-hondo:#3E0F17;

  /* texto legible: el oro se reserva para filetes y titulares grandes */
  --tinta:#F2E8D5;          --tinta-baja:rgba(242,232,213,.68);
  --tinta-oscura:#241C18;   --tinta-oscura-baja:rgba(36,28,24,.72);

  --serif:'EB Garamond','Bembo Std',Garamond,Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --mx:clamp(18px,4.4vw,72px);
  --barra-alto:66px;
  --rampa:linear-gradient(102deg,var(--oro-fondo) 0%,var(--oro-hondo) 18%,
          var(--oro) 42%,var(--oro-claro) 58%,var(--oro) 74%,var(--oro-hondo) 100%);
  --borde:1px solid rgba(216,169,78,.22);
  --borde-claro:1px solid rgba(36,28,24,.14);
  --curva:cubic-bezier(.2,.7,.2,1);
}

/* ---------- barra ---------- */
header.barra{
  position:sticky;top:0;z-index:90;background:rgba(11,0,0,.96);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(216,169,78,.16);
}
.barra .fila{
  display:flex;align-items:center;gap:22px;height:var(--barra-alto);padding:0 var(--mx);
}
.barra .marca{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.barra .marca img{height:26px;width:auto}
.barra .marca span{font-family:var(--serif);font-size:19px;letter-spacing:.26em;padding-left:2px}
nav.menu{display:flex;align-items:center;gap:26px;margin-left:8px}
nav.menu a{
  font-size:13px;letter-spacing:.11em;color:var(--tinta-baja);
  padding:5px 0;position:relative;transition:color .2s;white-space:nowrap;
}
nav.menu a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--oro);transition:right .3s var(--curva)}
nav.menu a:hover,nav.menu a[aria-current]{color:var(--oro)}
nav.menu a:hover::after,nav.menu a[aria-current]::after{right:0}

/* REGALÍAS en el menú: dorado y con un eslabón de la cadena al lado */
nav.menu a.regalias{
  color:var(--oro);display:inline-flex;align-items:center;gap:8px;font-weight:400;
}
nav.menu a.regalias svg{width:15px;height:15px;flex:0 0 auto;opacity:.9}
nav.menu a.regalias:hover{color:var(--oro-claro)}
nav.menu a.regalias:hover svg{opacity:1}
.pie a.regalias{color:var(--oro);display:inline-flex;align-items:center;gap:7px}
.pie a.regalias svg{width:13px;height:13px;flex:0 0 auto}

/* buscador como CAMPO abierto, no como lupa que despliega */
.buscar{
  margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 1 240px;min-width:0;
  border:1px solid rgba(216,169,78,.26);border-radius:2px;padding:0 11px;height:36px;
  background:rgba(0,0,0,.45);transition:border-color .25s;
}
.buscar:focus-within{border-color:var(--oro)}
.buscar svg{width:14px;height:14px;flex:0 0 auto;opacity:.6}
.buscar input{
  background:none;border:0;color:var(--tinta);font:300 13.5px var(--sans);width:100%;outline:none;
}
.buscar input::placeholder{color:rgba(242,232,213,.4)}
.acciones{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.acciones a{display:flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.09em;
  color:var(--tinta-baja);transition:color .2s}
.acciones a:hover{color:var(--oro)}
.chapa{background:var(--oro);color:var(--negro);border-radius:9px;min-width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;padding:0 5px}
.hamb{display:none;background:none;border:0;cursor:pointer;padding:7px;margin-left:auto}
.hamb span{display:block;width:24px;height:1px;background:var(--tinta);margin:5px 0;transition:.3s}

/* barra de anuncio */
.anuncio{
  background:var(--rampa);color:var(--negro);text-align:center;
  font-size:12px;letter-spacing:.1em;padding:8px var(--mx);font-weight:400;
}

/* barra propia de adentro del reservado.
   Va con header. adelante: si no, `header.barra` le gana por especificidad y queda negra */
header.barra--reservada{
  background:linear-gradient(90deg,var(--bordo-hondo),#2A0A11 60%,var(--bordo-hondo));
  border-bottom:1px solid rgba(216,169,78,.3);
}
.barra--reservada .marca span::after{
  content:'Regalías';display:inline-block;margin-left:12px;font-family:var(--sans);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);
  border:1px solid rgba(216,169,78,.4);padding:3px 8px;vertical-align:middle}

.menu a.destacado{color:#E8C97A}

@media (max-width:860px){
  .hamb{display:block}
  .buscar{display:none}
  nav.menu{
    position:fixed;inset:var(--barra-alto) 0 0 0;background:rgba(11,0,0,.985);
    backdrop-filter:blur(18px);flex-direction:column;justify-content:flex-start;
    padding:32px var(--mx);gap:2px;margin:0;
    transform:translateY(-101%);transition:transform .4s var(--curva);
  }
  nav.menu.abierta{transform:none}
  nav.menu a{font-size:19px;letter-spacing:.1em;width:100%;padding:15px 0;
    border-bottom:1px solid rgba(216,169,78,.14)}
}

/* Lo que el zócalo da por sentado cuando vive en el sitio —el reinicio y la
   tipografía del cuerpo— y que adentro del catálogo no está. Va apuntado al
   zócalo, no a la página. */
.anuncio,.barra,.barra *{box-sizing:border-box}
.anuncio,.barra{font-family:var(--sans);font-weight:300;line-height:1.6}
.barra a{color:inherit;text-decoration:none}
.barra img{max-width:100%;display:block}
.barra button{font:inherit;margin:0;padding:0;background:none;border:0}

/* ===========================================================
   05/10/2026 · correcciones de Mario (KD-03, KD-04, KD-06, KD-12)
   Esta hoja la cargan el sitio (después de kayko.css) y la tienda (antes
   de la suya). Lo de la cabecera se toca ACÁ y en ningún otro lado.
   =========================================================== */

/* Adentro de la tienda, `--tinta` es la tinta oscura del catálogo. El zócalo
   usa la suya, clara, sin pisarle nada a la página. */
.anuncio,header.barra{--tinta:#F2E8D5;--tinta-baja:rgba(242,232,213,.68)}

/* KD-04: la franja de arriba no se leía. Letra más grande y con más peso;
   el alto de la franja NO cambia: lo que crece la letra se le saca al aire
   de arriba y de abajo (antes 12px con 8+8; ahora 14.5px con 6+6). */
.anuncio{font-size:14.5px;font-weight:500;letter-spacing:.06em;padding:6px var(--mx);line-height:1.6}

/* KD-03: «Ingresar», a la vista y sin competir con el carrito. */
nav.menu a.ingresar{color:var(--tinta-baja)}
.pie a.ingresar,.pie-firma a.ingresar{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pie-firma a.ingresar{display:inline}

/* KD-12: un toque alcanza. El primer toque se ve: barra arriba y enlace atenuado. */
#cargando{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff 40%,#fff 60%,transparent);
  background-size:50% 100%;background-repeat:no-repeat;animation:cargando 1.1s linear infinite}
#cargando[hidden]{display:none}
@keyframes cargando{from{background-position:-50% 0}to{background-position:150% 0}}
a.yendo{opacity:.55}
@media (prefers-reduced-motion:reduce){
  #cargando{animation:none;background-size:100% 100%}
}

.chapa{font-size:12px}
.barra [hidden]{display:none!important}

@media (max-width:860px){
  /* en el celular la franja ocupa dos renglones: más apretados para que
     tampoco ahí quede más gruesa que antes */
  .anuncio{font-size:14px;letter-spacing:.03em;line-height:1.36;padding:5px 14px}
  /* KD-12: «Cotización» medía 66x20 y el carrito 38x38. El dedo necesita 44. */
  .barra .fila{gap:8px}
  .barra .marca span{font-size:17px;letter-spacing:.2em}
  .acciones{gap:2px;margin-left:auto}
  .acciones a{min-height:44px;padding:0 7px;font-size:14px;letter-spacing:.04em}
  .hamb{margin-left:0;min-width:44px;min-height:44px;padding:7px 10px}
  nav.menu a.ingresar{font-size:16px;border-bottom:0}
}

/* Lo que en el sitio ya estaba resuelto en kayko.css y acá faltaba: sin esto
   la cabecera, adentro de la tienda, heredaba la tinta oscura del catálogo
   (KAYKO, Cotización y Carrito no se veían) y en el celular el menú cerrado
   quedaba pintado encima de la página. */
header.barra{color:var(--tinta)}
.barra .buscar input{color:var(--tinta)}
.barra .buscar svg{color:var(--tinta)}
.pie-firma a.ingresar,footer .abajo a.ingresar{font-size:14px}
@media (max-width:860px){
  /* MENÚ DEL CELULAR (27/09/2026): el header lleva backdrop-filter y eso lo
     vuelve el contenedor de lo fixed que tenga adentro. Se cuelga del header
     (absolute) y cerrado queda invisible. */
  nav.menu{
    position:absolute;inset:auto;top:100%;left:0;right:0;
    height:calc(100dvh - var(--barra-alto));overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--curva),transform .3s var(--curva),visibility 0s linear .3s;
  }
  nav.menu.abierta{
    transform:none;opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .3s var(--curva),transform .3s var(--curva);
  }
}

/* mismo color de barra en el sitio y en la tienda: opaca (antes .96, y sobre el crema del catalogo se aclaraba) */
header.barra{background:#0B0000}
header.barra--reservada{background:linear-gradient(90deg,var(--bordo-hondo),#2A0A11 60%,var(--bordo-hondo))}

/* la franja en dos renglones parejos: sin un punto suelto al empezar el segundo */
.anuncio{text-wrap:balance}

/* KD-09 (Mario, 05/10/2026): «siempre que haya algo para abajo, una flechita».
   La de Empresas (KC-03), ahora en todas las páginas del sitio. La crea
   kayko.js; Empresas ya la tenía escrita adentro y se queda con la suya. */
.sigue{position:fixed;left:50%;bottom:18px;z-index:60;width:48px;height:48px;margin-left:-24px;
  border-radius:999px;border:1px solid rgba(216,169,78,.7);background:rgba(11,0,0,.82);
  color:#F8E88A;display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 6px 22px rgba(0,0,0,.35);transition:opacity .25s ease,visibility .25s ease,background .2s ease;
  animation:sigue-late 1.9s ease-in-out infinite}
.sigue:hover{background:#0B0000}
.sigue:focus-visible{outline:3px solid #F8E88A;outline-offset:3px}
.sigue svg{width:22px;height:22px;display:block}
.sigue.se-fue{opacity:0;visibility:hidden;pointer-events:none}
@keyframes sigue-late{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){
  .sigue{animation:none}
}
@media print{
  .sigue{display:none}
}
/* KA-000037 (10/10/2026): en pantallas de dedo la flecha quedaba encima de
   «Comprar ahora», de las tarjetas y de los enlaces, y se comía el toque.
   Con dedo se baja deslizando: ahí la flecha sólo avisa y deja pasar el toque. */
@media (hover:none) and (pointer:coarse){
  .sigue{pointer-events:none}
}