/* ============================================================
   Barbería Lastarria · base
   Reset, tipografías autoalojadas, tipografía base y utilidades.
   Depende de tokens.css, que debe cargarse antes.
   ============================================================ */

/* ---------- Tipografías autoalojadas -------------------------------------
   Subconjuntadas a latin y latin-ext. El español cabe entero en latin:
   latin-ext casi nunca se descarga, lo impide el unicode-range.
   Las flechas →, ★, ✕ y ↗ NO están en el subconjunto: van en SVG.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/fraunces-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-italic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-italic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/barlow-condensed-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/barlow-condensed-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-condensed-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-condensed-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Reset -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--negro-humo);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: var(--t-cuerpo-alto);
  font-weight: var(--p-cuerpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  /* El header es sticky, no fixed: no hace falta padding compensatorio
     y por eso no desplaza el contenido al cargar.                       */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { border-radius: var(--radio); cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--ambar); color: var(--sobre-ambar); }


/* ---------- Enlaces ------------------------------------------------------ */

a {
  color: var(--ambar);
  text-decoration: none;
}
a:hover { color: var(--hueso); }


/* ---------- Foco ---------------------------------------------------------
   Visible siempre para quien navega con teclado. No se quita nunca.      */

:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-offset);
}


/* ---------- Tipografía base ---------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;   /* Fraunces tiene eje óptico; el diseño no lo fija */
}

h1 {
  font-size: var(--t-h1);
  line-height: var(--t-h1-alto);
  letter-spacing: var(--t-h1-track);
  font-weight: var(--p-h1);
}

h2 {
  font-size: var(--t-h2);
  line-height: var(--t-h2-alto);
  letter-spacing: var(--t-h2-track);
  font-weight: var(--p-h2);
}

h3 {
  font-size: var(--t-h3);
  line-height: var(--t-h3-alto);
  font-weight: var(--p-h2);
}


/* ---------- Utilidades tipográficas -------------------------------------- */

/* Antetítulo de sección: Barlow Condensed 300, mayúsculas, tracking amplio */
.antetitulo {
  font-family: var(--condensada);
  font-weight: var(--p-ligero);
  font-size: var(--t-antetitulo);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--t-antetitulo-track);
  color: var(--humo);
}

/* Frase de posicionamiento del hero: Fraunces 500 itálica */
.frase {
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--p-frase);
  font-size: var(--t-frase);
  line-height: var(--t-frase-alto);
  color: var(--hueso);
  max-width: 36ch;
}

/* Precios: SIEMPRE cifras tabulares, para que las columnas cuadren */
.precio {
  font-family: var(--sans);
  font-weight: var(--p-precio);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--ambar);
}

/* Etiqueta pequeña: Barlow Condensed 400. A 10–11,5px sobre fondo oscuro
   el peso 300 se lava; por eso las etiquetas van en 400 y no en 300. */
.etiqueta {
  font-family: var(--condensada);
  font-weight: var(--p-etiqueta);
  font-size: var(--t-nota);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--humo);
}

.texto-secundario { color: var(--humo); }
.texto-menor { font-size: var(--t-menor); }
.nota { font-size: var(--t-nota); color: var(--humo); }

/* En móvil la nota sube a 13px. A 11,5px una etiqueta se lee, pero
   .nota lleva frases completas con información que hay que leer:
   «Algunos precios varían según la complejidad», el aviso del mapa,
   la fuente de las reseñas. No se baja de acá. */
@media (max-width: 767px) {
  .nota { font-size: 13px; line-height: 1.6; }
}


/* ---------- Accesibilidad ------------------------------------------------ */

/* Texto solo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: primer elemento enfocable de cada página */
.saltar {
  position: absolute;
  left: var(--e-3);
  top: calc(-1 * var(--tactil-min) - var(--e-5));
  z-index: calc(var(--z-chat) + 1);
  background: var(--ambar);
  color: var(--sobre-ambar);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radio);
  font-weight: var(--p-medio);
  transition: top .15s ease;
}
.saltar:focus {
  top: var(--e-3);
  color: var(--sobre-ambar);
}


/* ---------- Movimiento ---------------------------------------------------- */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}