/* ============================================================
   Barbería Lastarria · tokens
   Valores del diseño aprobado: "Barberia Lastarria v2 Oscura.dc.html"
   No inventar valores acá. Si falta uno, sale del diseño.
   ============================================================ */

:root {

  /* ---------- Paleta ------------------------------------------------
     Base oscura en todo el sitio. Ningún fondo claro en ninguna parte.
     El Ámbar es el único color de acción y es plano, nunca degradado. */

  --negro-humo:      #0E0F11;  /* fondo general, header, hero          */
  --grafito:         #1B1D20;  /* tarjetas, footer, panel lateral      */
  --ambar:           #FFB020;  /* ÚNICO color de acción                */
  --ambar-hover:     #E09A12;  /* solo :hover de botones primarios     */
  --cian:            #22C8E0;  /* solo uñas y bordes activos           */
  --hueso:           #F4F2ED;  /* texto principal, nunca blanco puro   */
  --humo:            #9AA0A6;  /* texto secundario, deshabilitado      */
  --linea:           #2A2D31;  /* bordes y separadores, 1px            */
  --linea-fuerte:    #3A3E43;  /* outline de botón, panel, deshabil.   */
  --sobre-ambar:     #412402;  /* ÚNICO texto que va encima del Ámbar  */

  /* El rojo y el azul del poste del logo son exclusivos del logo.
     No existen como token: no deben aparecer en ningún elemento.      */

  /* Velos y capas */
  --velo-hero:       rgba(14, 15, 17, .74);  /* capa sobre foto de hero */
  --velo-panel:      rgba(14, 15, 17, .62);  /* detrás del panel móvil  */
  --tag-opacidad:            .15;            /* tags de grafiti, header */
  --tag-opacidad-hero:       .28;            /* tags de grafiti, hero   */


  /* ---------- Tipografía --------------------------------------------
     Fraunces: titulares. Barlow Condensed 300: antetítulos.
     Inter: cuerpo. Autoalojadas en assets/fonts/.                     */

  --serif:      'Fraunces', Georgia, 'Times New Roman', serif;
  --condensada: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --sans:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala — escritorio */
  --t-h1:           76px;    --t-h1-alto:    .94;   --t-h1-track:  -.042em;
  --t-h2:           34px;    --t-h2-alto:   1.1;    --t-h2-track:  -.028em;
  --t-h3:           23px;    --t-h3-alto:   1.25;
  --t-frase:        23px;    --t-frase-alto:1.4;    /* Fraunces 500 italic */
  --t-resena:       29px;                           /* reseñas en estado A */
  --t-antetitulo: 12.5px;    --t-antetitulo-track: .18em;
  --t-cuerpo:       16px;    --t-cuerpo-alto: 1.75; /* mínimo en móvil    */
  --t-menor:      14.5px;
  --t-nota:       11.5px;

  /* Piso de 11px. El diseño aprobado pedía 10px para la marca de la
     tarjeta y 9px para los badges; ambos suben a 11px por legibilidad.
     Medido a 375px: ninguno de los dos cambia el layout. La marca ya
     recortaba con elipsis, así que solo recorta un carácter antes; el
     badge "Agotado" pasa de 40 a 46px sobre una imagen de 111,66px.
     NO bajar de 11px. El auditor lo revisa. */
  --t-card-marca:   11px;   /* marca en la tarjeta de catálogo, móvil */
  --t-badge:        11px;   /* badges Agotado y Oferta */

  /* Pesos */
  --p-h1:      800;
  --p-h2:      700;
  --p-frase:   500;
  --p-ligero:  300;   /* Barlow Condensed · antetítulos de sección   */
  --p-etiqueta:400;   /* Barlow Condensed · etiquetas de 10–11,5px   */
  --p-cuerpo:  400;
  --p-medio:   500;
  --p-precio:  600;


  /* ---------- Espaciado ---------------------------------------------- */

  --e-1:   4px;   --e-2:   8px;   --e-3:  12px;   --e-4:  16px;
  --e-5:  24px;   --e-6:  32px;   --e-7:  40px;   --e-8:  56px;
  --e-9:  64px;   --e-10: 84px;   --e-11: 96px;

  /* Ritmo de sección del diseño: 84px arriba, 96px al cerrar */
  --seccion-arriba: 84px;
  --seccion-abajo:  96px;


  /* ---------- Layout -------------------------------------------------- */

  --ancho-contenido:  1240px;
  --ancho-estrecho:   1000px;   /* legales, gift card */
  --ancho-texto:       660px;   /* columna del hero: la foto no lo mueve */
  --padding-lateral:    32px;   /* escritorio */
  --padding-lateral-movil: 12px;

  --header-alto:        74px;
  --panel-carrito:     420px;
  --chat-boton:         60px;
  --chat-margen:        28px;

  /* Táctil — mínimos que no se bajan */
  --tactil-min:         44px;
  --boton-alto-movil:   48px;


  /* ---------- Bordes y radios ----------------------------------------- */

  --borde:        1px solid var(--linea);
  --borde-fuerte: 1px solid var(--linea-fuerte);
  --radio:         2px;   /* botones */
  --radio-burbuja:10px;   /* burbujas del chatbot */
  --radio-circulo: 50%;

  /* Las superficies se separan por borde de 1px, NUNCA por sombra.
     No hay token de sombra a propósito.                                */

  /* ---------- Foco ----------------------------------------------------- */

  --foco: 2px solid var(--ambar);
  --foco-offset: 2px;


  /* ---------- Capas ----------------------------------------------------- */

  --z-tags:       0;
  --z-contenido:  1;
  --z-header:    60;
  --z-panel:     70;   /* menú móvil, panel de carrito, filtros */
  --z-chat:      80;
}


/* ---------- Móvil ≤767px ------------------------------------------------
   El catálogo va a 3 columnas; el resto a 1. Cuerpo mínimo 16px.        */

@media (max-width: 767px) {
  :root {
    --t-h1:            33px;   --t-h1-alto: 1.02;
    --t-h2:            27px;
    --t-frase:         19px;
    --t-resena:        22px;
    --padding-lateral: var(--padding-lateral-movil);
    --seccion-arriba:  56px;
    --seccion-abajo:   64px;
  }
}

/* ---------- Tablet 768–1023px ------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --t-h1:            54px;   --t-h1-alto: .98;
    --t-h2:            30px;
    --padding-lateral: 24px;
    --seccion-arriba:  68px;
    --seccion-abajo:   80px;
  }
}