/* ==========================================================================
   Calvo Glass — chrome: cabecera, riel, pie, cajón y puerta de edad
   ========================================================================== */

/* --- cabecera ----------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px var(--m);
  /* Translúcida con desenfoque, como v8: al desplazar, las piezas pasan por
     debajo en vez de desaparecer contra una barra opaca. El color-mix cae a
     crema sólida donde no haya soporte. */
  background: var(--cream);
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.hdr .side {
  display: flex;
  align-items: center;
  gap: 19px;
  flex: 1;
  font-size: 12.5px;
  color: var(--ash);
}
.hdr .side.r { justify-content: flex-end; }
.hdr .side a:hover,
.hdr .side button:hover { color: var(--ink); }

.hdr-menu {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
}
/* Las barras son solo del teléfono: en escritorio "Menú" se lee como palabra
   y el icono sobra, que es como está en v8. */
.hdr-menu .bars { display: none; }
@media (max-width: 800px) {
  .hdr-menu .bars {
    display: block;
    width: 16px;
    height: 10px;
    flex: none;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
  }
}

/* El wordmark es un dibujo: se mide por alto, no por cuerpo de letra. */
.hdr .wm {
  height: clamp(22px, 1.78vw, 26px);
  flex: none;
  display: flex;
  align-items: center;
}
.hdr .wm svg { height: 100%; width: auto; display: block; }

.bag { display: inline-flex; align-items: center; gap: 7px; }
.bag-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
}

/* --- riel de categorías -------------------------------------------------- */
.rail {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--m);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-left: var(--m);
  border-bottom: 1px solid var(--rule);
}
.rail::-webkit-scrollbar { display: none; }
.rail .chip { flex: none; }


/* --- pie ---------------------------------------------------------------- */
.sitefoot {
  margin-top: var(--section);
  padding: var(--section) var(--m) var(--s8);
  border-top: 1px solid var(--rule);
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s8);
}
.sitefoot .wmf { display: block; height: 24px; margin-bottom: var(--s4); }
.sitefoot .wmf svg { height: 100%; width: auto; }
.sitefoot .brand p { max-width: 34ch; }
.sitefoot h4 { margin: 0 0 var(--s4); color: var(--ash); }
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li a { display: block; padding: 6px 0; font-size: 13.5px; color: var(--ash); }
.sitefoot li a:hover { color: var(--ink); }
.foot-base { margin-top: var(--s10); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.foot-base p { margin: 0; }

/* --- cajón del menú ------------------------------------------------------ */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(27, 26, 23, .42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--d-control);
}
.scrim.on { opacity: 1; }

.menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(408px, 88vw);
  padding: var(--s5) var(--s6) var(--s8);
  background: var(--cream);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform var(--d-card) var(--e-standard);
}
.menu.on { transform: none; }

.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-top .wm-type {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
}
.menu-top button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 17px;
  cursor: pointer;
}

.menu-search { margin: var(--s5) 0 var(--s6); }
.menu-tree, .menu-aux { list-style: none; margin: 0; padding: 0; }
.menu-tree > li > a {
  display: block;
  padding: 11px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.015em;
}
.menu-subs { list-style: none; margin: 0 0 var(--s3); padding: 0 0 0 var(--s3); }
.menu-subs a { display: flex; align-items: center; min-height: 40px; font-size: 13.5px; color: var(--ash); }
.menu-subs a:hover { color: var(--ink); }
.menu-aux { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.menu-aux a { display: flex; align-items: center; min-height: 44px; font-size: 13.5px; color: var(--ash); }
.menu-aux a:hover { color: var(--ink); }

/* --- puerta de edad ------------------------------------------------------ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--m);
  background: rgba(27, 26, 23, .55);
  backdrop-filter: blur(4px);
}
.gate-card {
  position: relative;
  width: min(430px, 100%);
  padding: var(--s8) var(--s6) var(--s6);
  background: var(--brick);
  color: var(--on-brick);          /* 4.97:1 sobre ladrillo */
  overflow: hidden;
}
.gate-card h2 {
  font-size: clamp(24px, 3.4vw, 31px);
  letter-spacing: -.02em;
  line-height: 1.06;
  margin: 0 0 var(--s3);
}
.gate-card p { font-size: 14px; margin: 0 0 var(--s6); }

.gate-smoke {
  position: absolute;
  top: -14px;
  right: 18px;
  width: 54px;
  opacity: .22;
  pointer-events: none;
}
.gate-smoke svg { width: 100%; height: auto; }

.gate-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
/* Sobre ladrillo el contorno tiene que ser el color del texto, no la tinta:
   tinta sobre ladrillo no llega a 3:1 y el botón desaparece como control. */
.gate-actions .btn-secondary { color: var(--on-brick); border: 1px solid var(--on-brick); }
.gate-actions .btn-secondary:hover { background: var(--on-brick); color: var(--brick); }

.gate-remember {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  font-size: 12.5px;
}
.gate-remember input { width: 16px; height: 16px; flex: none; accent-color: var(--on-brick); }

/* Con la puerta abierta la página de atrás no se desplaza ni se tabula. */
body.gate-locked { overflow: hidden; }

/* --- teléfono ------------------------------------------------------------ */
@media (max-width: 800px) {
  /* flex:1 en ambos costados: así el wordmark queda en el centro de la
     pantalla y no en el hueco que sobra. */
  .hdr .side.l, .hdr .side.r { flex: 1; }
  /* Especificidad a propósito: la regla de 44px más abajo es `.hdr .side a`
     (0,2,1) y va después, así que un `.hdr-search{display:none}` simple
     (0,1,0) pierde y "Buscar" reaparecía en el teléfono. */
  .hdr .side .hdr-search { display: none; }   /* el cajón trae su propio buscador */
}
@media (max-width: 760px) {
  .hdr { padding-top: 4px; padding-bottom: 4px; }
  /* 44px, no 40: el riel es la única navegación visible en el teléfono sin
     abrir el cajón, y la regla del proyecto son 44. Cuatro píxeles de alto
     de más en el riel es un precio que no se nota. */
  .rail .chip { min-height: 44px; }
  .hdr .side a, .hdr .side button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .foot-top { grid-template-columns: 1fr; gap: var(--s6); }
  .sitefoot li a { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 430px) {
  /* "Menú" choca con el wordmark; el icono se queda, la palabra se va. */
  .hdr-menu .lbl { display: none; }
  .hdr-menu .bars { width: 18px; height: 12px; }
}
@media (max-width: 360px) {
  .hdr-account { display: none; }  /* está a un toque dentro del cajón */
}