@font-face {
  font-family: "Vivita Bashan";
  src: url("../fonts/VIVITA-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vivita Bashan";
  src: url("../fonts/VIVITA-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4 Bashan";
  src: url("../fonts/SourceSerif4-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --ink: #161616;
  --gold: #DDBA84;
  --ivory: #F8F8F8;
  --red: #A81424;
  --white: #FFFFFF;
  --muted: #625E57;
  --line: #D9D5CD;
  /* Curvas oficiales: salida suave (UI), acento (movimientos de marca), cajón (desplegables). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Grano de película: textura SVG estática para las secciones oscuras. */
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  /* Escala tipográfica fluida. */
  --fl-h1: clamp(1.875rem, 1.35rem + 2.4vw, 2.75rem);
  --fl-h2: clamp(2rem, 1.3rem + 3vw, 3.375rem);
  --fl-h2b: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --fl-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 16px/normal "Source Serif 4 Bashan", Georgia, serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
/* Sobre fondos oscuros el anillo rojo se pierde: pasa a dorado. */
.marcas :focus-visible, .cierre :focus-visible { outline-color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* El atributo hidden manda sobre cualquier display de clase (p. ej. .campo es flex). */
[hidden] { display: none !important; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--ivory); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
[data-bashan="compra"]:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}