/* House of Wax — sistema tipográfico compartido (prototipo "rediseño voces").
   Cargar DESPUÉS del <style> inline de cada página para que estos tokens ganen.
   Voz RETRO (principal, elegida por la dueña el 2026-10-10): Shrikhand (títulos, etiqueta de
   disco setentera) + Atkinson Hyperlegible (texto) + Martian Mono (precios y datos), auto-alojadas (OFL). */
@font-face{font-family:"Shrikhand";src:url("fonts/shrikhand-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:"Martian Mono";src:url("fonts/martian-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("fonts/martian-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Ninguna trae "₡": este subset de Chivo Mono (OFL, 748 bytes) aporta solo ese glifo */
@font-face{font-family:"HOW Colon";src:url("fonts/colon-sign.woff2") format("woff2");unicode-range:U+20A1;font-display:swap}

:root{
  /* roles — voz RETRO (setentera) */
  --voz-display:"Shrikhand","HOW Colon",Georgia,serif;
  --voz-body:"Atkinson Hyperlegible","HOW Colon",ui-sans-serif,system-ui,sans-serif;
  --voz-mono:"Martian Mono","HOW Colon",ui-monospace,Menlo,Consolas,monospace;

  /* tratamiento por rol. Shrikhand solo tiene peso 400 y ya viene inclinada:
     nunca pedirle bold ni italic (el navegador la falsearía). */
  --voz-display-weight:400;
  --voz-display-case:uppercase;   /* títulos en mayúscula (pedido de la dueña); los nombres de álbum no */
  --voz-display-tracking:0.01em;
  --voz-title-style:normal;      /* títulos de álbum */
  --voz-title-weight:400;
  --voz-title-case:none;
  --voz-label-tracking:0.06em;   /* etiquetas mono en mayúsculas */

  /* escala */
  --voz-size-hero:clamp(44px,7vw,92px);
  --voz-size-h2:clamp(26px,3.2vw,36px);
  --voz-size-title:19px;         /* título de álbum en tarjeta */
  --voz-size-body:16px;
  --voz-size-label:11px;         /* mínimo para etiquetas mono; nunca menos */
  --voz-size-nav:12px;
  --voz-size-price:13px;

  /* alias con los nombres que ya usan las páginas y cart.js */
  --font-display:var(--voz-display);
  --font-body:var(--voz-body);
  --font-accent:var(--voz-mono);
  --font-mono:var(--voz-mono);
  --how-font-display:var(--voz-display);
  --how-font-body:var(--voz-body);
  --how-font-mono:var(--voz-mono);
}


/* ——— Clases utilitarias compartidas ——— */
.voz-label{font-family:var(--voz-mono);font-size:var(--voz-size-label);font-weight:400;letter-spacing:var(--voz-label-tracking);text-transform:uppercase}
.voz-price{font-family:var(--voz-mono);font-size:var(--voz-size-price);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0}
.voz-title{font-family:var(--voz-display);font-style:var(--voz-title-style);font-weight:var(--voz-title-weight);text-transform:var(--voz-title-case);font-size:var(--voz-size-title);line-height:1.2}
.voz-hero{font-family:var(--voz-display);font-weight:var(--voz-display-weight);text-transform:var(--voz-display-case);letter-spacing:var(--voz-display-tracking);font-size:var(--voz-size-hero);line-height:.92;text-wrap:balance}

/* ——— Nav: logo · links · [accesibilidad · carrito · menú] ———
   Tres columnas iguales a los lados: los links quedan centrados en la pantalla aunque
   la derecha (accesibilidad + carrito) sea más ancha que el logo. */
nav:not(.mobile-nav){display:grid!important;grid-template-columns:1fr auto 1fr;column-gap:24px}
nav:not(.mobile-nav) .nav-logo{grid-column:1;justify-self:start}
nav:not(.mobile-nav) .nav-links{grid-column:2;margin:0}
nav:not(.mobile-nav) .nav-right{grid-column:3;justify-self:end}
nav:not(.mobile-nav) .nav-links a,.nav-more summary{white-space:nowrap}
/* Accesibilidad: solo el ícono (el nombre completo va en aria-label y en el globo al pasar el mouse),
   para que el lado derecho no empuje el menú fuera del centro */
.btn-a11y{font-size:0!important;width:34px;height:34px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0!important}
.btn-a11y::before{content:""!important;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='4.5' r='2'/%3E%3Cpath d='M4.5 8.5h15M12 8.5v6M12 14.5l-4 6.5M12 14.5l4 6.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='4.5' r='2'/%3E%3Cpath d='M4.5 8.5h15M12 8.5v6M12 14.5l-4 6.5M12 14.5l4 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-a11y:hover{color:var(--cream)}
/* pantallas medianas: menos aire entre links y carrito sin la palabra, para no salirse del centro */
@media(max-width:1279px){nav:not(.mobile-nav) .nav-links{gap:22px!important}}
@media(max-width:1180px){
  .nav-cart .nav-cart-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-cart{padding:6px 9px;gap:6px}
}
@media(max-width:1020px){nav:not(.mobile-nav) .nav-links{gap:16px!important}}
/* Ofertas siempre en naranja, en todas las páginas */
.nav-links a[href="ofertas.html"]{color:var(--sale,#f0a045)}
nav .nav-right{display:flex;align-items:center;gap:10px;margin-left:0}
nav .nav-right .nav-cart{order:2}
nav .nav-right .a11y-wrap{order:1}
nav .nav-right .nav-hamburger{order:3}
.nav-cart::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 8h14l-1 13H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 8h14l-1 13H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:700px){
  .nav-cart{padding:6px 9px;gap:6px}
  .nav-cart .nav-cart-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* ——— Nav carrito — botón + contador, idéntico en todas las páginas ——— */
.nav-cart{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--border);color:var(--muted);font-family:var(--voz-mono);font-size:var(--voz-size-nav);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;cursor:pointer;transition:.2s;white-space:nowrap}
.nav-cart:hover{border-color:var(--border2);color:var(--cream)}
.nav-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;background:var(--sale,#f0a04b);color:#140d05;font-family:var(--voz-mono);font-size:12px;font-weight:500;line-height:1}


/* Shrikhand solo tiene peso 400: nunca inventar negritas/cursivas falsas */
html{font-synthesis:none}

/* ——— Tarjetas: el precio siempre abajo, aunque el título ocupe 2 líneas ——— */
.vinyl-card,.oferta-card,.acc-card{display:flex;flex-direction:column}
.vinyl-card-body,.oferta-card-body,.acc-card-body{flex:1;display:flex;flex-direction:column}
.vinyl-card-meta,.oferta-card-price-row,.acc-card-bottom{margin-top:auto}

/* ——— Pie de página: al final del contenido, no fijo en pantalla ———
   Antes estaba position:fixed en todas las páginas y tapaba ~100px de contenido. */
footer{position:static!important;margin-top:72px;padding:32px 40px calc(32px + env(safe-area-inset-bottom,0px))!important;background:var(--bg2,#0d0d0d)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;gap:10px!important}
body{padding-bottom:0!important}
@media(max-width:700px){
  footer{margin-top:48px;padding:28px 20px calc(28px + env(safe-area-inset-bottom,0px))!important}
}

/* ——— Menú "Más ▾" (Nosotras · Contacto · FAQ · Términos) ——— */
.nav-more{position:relative;list-style:none}
.nav-more details{position:relative}
.nav-more summary{list-style:none;cursor:pointer;font-family:var(--voz-mono);font-size:var(--voz-size-nav);letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;color:inherit}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-more details[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.nav-more summary:focus-visible{outline:2px solid var(--sale,#f0a045);outline-offset:4px}
.nav-more-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);min-width:180px;margin:0;padding:8px 0;list-style:none;background:var(--bg2,#0d0d0d);border:1px solid var(--border2,#2e2a26);box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:120}
.nav-more-menu li a{display:block;padding:10px 18px;white-space:nowrap}
.nav-more-menu li a:hover,.nav-more-menu li a:focus-visible{background:var(--bg3,#151515);color:var(--cream)}
/* móvil: separador + secundarias más discretas */
.mobile-nav-sep{display:block;width:40px;height:1px;background:var(--border2,#2e2a26);margin:4px auto}
.mobile-nav .mobile-nav-secondary{font-size:13px;opacity:.8}
.nav-more-menu li a.active{border-bottom:0!important;padding-bottom:10px!important;color:var(--sale,#f0a045)}

/* ——— Títulos de sección en mayúscula (voz retro); los nombres de álbum quedan como vienen ——— */
h1,h2,.section-title,.faq-title,.cta-bottom-title,.ph-drawer-title,.result-error-title,.cotizar-info h2,.terminos-content h2{
  text-transform:var(--voz-display-case);letter-spacing:var(--voz-display-tracking)}
html .modal-album,html .vinyl-card-album,html .vinyl-row-album,html .item-row-album,html .voz-title{text-transform:var(--voz-title-case)}

/* ——— Avisos (.notif): frases en la letra de texto, no en la de títulos ——— */
.notif{font-family:var(--voz-body)!important;font-size:14px!important;letter-spacing:0!important;line-height:1.45;max-width:min(420px,calc(100vw - 48px))}