/* =============================================================================
   NAVAJA & ROBLE — Hoja de estilos única
   Barbería ficticia · Providencia, Santiago de Chile

   Índice
   01. Variables de marca
   02. Reset y base
   03. Tipografía compartida
   04. Botones y controles
   05. Utilidades de sección
   06. Apariciones progresivas
   07. Barra de progreso global
   08. Navegación
   09. Hero
   10. Nosotros
   11. Servicios (packs + carta con pestañas)
   12. Catálogo de estilos
   13. Antes y después
   14. Equipo
   15. Testimonios
   16. Agendar hora
   17. Horarios y ubicación
   18. Preguntas frecuentes
   19. Pie de página
   20. Fondo animado de página
   21. Cáscara de las 7 páginas (activo, encabezado, franja de cierre)
   22. Componentes propios de las páginas nuevas
   23. Puntos de quiebre
   24. Transiciones entre páginas
   25. Chatbot «Filo»
   26. Movimiento reducido

   Puntos de quiebre: 640, 768, 1024 y 1280 px. Todo el responsive vive en CSS;
   el JavaScript no mide el ancho de la ventana para decidir el diseño.
   ============================================================================= */


/* =============================================================================
   01. VARIABLES DE MARCA
   ============================================================================= */

:root {
  /* --- Paleta oficial --- */
  --fondo:        #171310;
  --superficie:   #241A16;
  --borde:        #3A2F26;
  --laton:        #B08D57;
  --laton-claro:  #C9A574;
  --burdeos:      #7A2E33;
  --texto:        #EDE6D8;
  --texto-suave:  #A79B8B;
  --exito:        #6E8B3D;

  /* --- Componentes RGB de la paleta, para construir transparencias --- */
  --fondo-rgb:      23, 19, 16;
  --superficie-rgb: 36, 26, 22;
  --borde-rgb:      58, 47, 38;
  --laton-rgb:      176, 141, 87;
  --burdeos-rgb:    122, 46, 51;
  --texto-rgb:      237, 230, 216;
  --suave-rgb:      167, 155, 139;
  --exito-rgb:      110, 139, 61;

  /* --- Derivados: el burdeos puro no tiene contraste suficiente como texto
         sobre el fondo oscuro, así que los mensajes de error usan este tinte
         claro de la misma familia (7,8:1 sobre --fondo). --- */
  --error-texto:  #E39299;

  /* --- Tipografías: Google Fonts primero, sistema como respaldo --- */
  --fuente-titulo: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
                   "Book Antiqua", Georgia, "Times New Roman", serif;
  --fuente-cuerpo: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Formas, sombras y ritmo --- */
  --radio:        3px;
  --radio-chico:  2px;
  --radio-pildora: 999px;
  --suavizado:    cubic-bezier(.22, .61, .36, 1);
  --sombra-carta: 0 22px 48px rgba(0, 0, 0, .5);
  --sombra-boton: 0 12px 30px rgba(var(--laton-rgb), .3);
  --alto-cabecera: 72px;
}


/* =============================================================================
   02. RESET Y BASE
   ============================================================================= */

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: var(--laton-claro); text-decoration: none; }
a:hover { color: var(--laton); }

button { font: inherit; color: inherit; }

::selection { background: var(--laton); color: var(--fondo); }

:focus-visible {
  outline: 2px solid var(--laton-claro);
  outline-offset: 3px;
  border-radius: var(--radio-chico);
}
/* <main> solo es enfocable para recibir el salto de teclado: sin recuadro */
main:focus, main:focus-visible { outline: none; }

/* Enlace de salto para teclado y lectores de pantalla */
.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--laton);
  color: var(--fondo);
  font-weight: 500;
}
.saltar-al-contenido:focus {
  left: 12px;
  top: 12px;
  color: var(--fondo);
}

/* Contenedores de ancho máximo */
.contenedor {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(18px, 4vw, 40px);
}
.contenedor--angosto { max-width: 1060px; }
.contenedor--estrecho { max-width: 900px; }

/* Todo destino de ancla deja aire bajo la cabecera fija */
section[id] { scroll-margin-top: 88px; }


/* =============================================================================
   03. TIPOGRAFÍA COMPARTIDA
   Fraunces para títulos y display, Schibsted Grotesk para el resto.
   El eje WONK solo se activa en los títulos principales de sección.
   ============================================================================= */

.titulo-seccion {
  margin: 0 0 clamp(24px, 4vh, 44px);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 96, "wght" 600, "SOFT" 0, "WONK" 1;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--texto);
  max-width: 20ch;
  text-wrap: balance;
}
.titulo-seccion--corto { max-width: 16ch; }

/* Etiqueta pequeña de sección: aquí sí van las mayúsculas espaciadas */
.etiqueta-seccion {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--laton);
}
.etiqueta-seccion__linea {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--laton);
  flex: none;
}

.parrafo {
  margin: 0 0 20px;
  font-size: clamp(.95rem, 1.4vw, 1.0625rem);
  line-height: 1.8;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* Citas y frases destacadas: Fraunces con el eje SOFT abierto, sin WONK */
.cita {
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--laton);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 48, "wght" 600, "SOFT" 70, "WONK" 0;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.3;
  color: var(--laton-claro);
}

/* Encabezado de dos piezas: título a la izquierda, nota o filtros a la derecha */
.encabezado-doble {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(26px, 4vh, 44px);
}
.encabezado-doble .titulo-seccion { margin-bottom: 0; }
.encabezado-doble__nota {
  margin: 0;
  max-width: 42ch;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--texto-suave);
}

.aviso-noscript {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid rgba(var(--burdeos-rgb), .55);
  border-radius: var(--radio);
  background: rgba(var(--burdeos-rgb), .14);
  color: var(--texto);
  font-size: .9375rem;
}


/* =============================================================================
   04. BOTONES Y CONTROLES
   Las mayúsculas espaciadas se reservan para etiquetas y botones pequeños.
   ============================================================================= */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  cursor: pointer;
  font-family: var(--fuente-cuerpo);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 320ms var(--suavizado),
              color 320ms ease,
              border-color 320ms ease,
              transform 320ms var(--suavizado),
              box-shadow 320ms ease;
}
.boton--grande { min-height: 52px; padding: 0 34px; font-size: .8125rem; }
.boton--chico  { min-height: 44px; padding: 0 16px; font-size: .6875rem; letter-spacing: .18em; }

/* Botón sólido de latón: la acción principal en todo el sitio */
.boton--laton {
  background: var(--laton);
  color: var(--fondo);
  border-color: var(--laton);
}
.boton--laton:hover {
  background: var(--laton-claro);
  border-color: var(--laton-claro);
  color: var(--fondo);
  transform: translateY(-2px);
  box-shadow: var(--sombra-boton);
}

/* Botón de contorno claro sobre fotografía */
.boton--contorno {
  background: transparent;
  color: var(--texto);
  border-color: rgba(var(--texto-rgb), .34);
}
.boton--contorno:hover {
  border-color: var(--laton);
  color: var(--laton-claro);
  background: rgba(var(--laton-rgb), .1);
  transform: translateY(-2px);
}

/* Botón fantasma dentro de tarjetas */
.boton--fantasma {
  background: transparent;
  color: var(--laton-claro);
  border-color: rgba(var(--laton-rgb), .45);
}
.boton--fantasma:hover {
  background: var(--laton);
  border-color: var(--laton);
  color: var(--fondo);
}

/* Pastillas de filtro / pestaña (catálogo y carta de servicios) */
.pestana,
.filtro {
  min-height: 46px;
  padding: 0 22px;
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  cursor: pointer;
  font-family: var(--fuente-cuerpo);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color 320ms var(--suavizado), color 320ms ease, border-color 320ms ease;
}
.pestana:hover,
.filtro:hover { color: var(--texto); border-color: rgba(var(--laton-rgb), .55); }

/* El estado activo se declara con atributo para ganarle al :hover de arriba */
.pestana[aria-selected="true"],
.filtro[aria-pressed="true"],
.filtro--activo {
  background: var(--laton);
  border-color: var(--laton);
  color: var(--fondo);
}


/* =============================================================================
   05. UTILIDADES DE SECCIÓN
   ============================================================================= */

.seccion {
  position: relative;
  padding-block: clamp(64px, 11vh, 132px);
}

/* Marco de imagen con proporción fija y fondo sólido de respaldo */
.marco {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.marco img { width: 100%; height: 100%; object-fit: cover; }


/* =============================================================================
   06. APARICIONES PROGRESIVAS
   Solo se ocultan si hay JavaScript para volver a mostrarlas.
   ============================================================================= */

@keyframes entrar {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aparecer {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes respirar {
  0%, 100% { opacity: .5;  transform: scale(1); }
  50%      { opacity: .92; transform: scale(1.12); }
}
@keyframes filo {
  from { transform: translateX(-120%); }
  to   { transform: translateX(520%); }
}

.js [data-reveal] { opacity: 0; }
[data-reveal].visible { animation: entrar 640ms var(--suavizado) both; }


/* =============================================================================
   07. BARRA DE PROGRESO GLOBAL
   ============================================================================= */

.progreso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 120;
  background: rgba(var(--borde-rgb), .8);
  pointer-events: none;
}
.progreso__barra {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--burdeos), var(--laton) 55%, var(--laton-claro));
  will-change: transform;
}
.progreso__filo {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(var(--texto-rgb), .8), transparent);
  animation: filo 7s linear infinite;
  opacity: .45;
}


/* =============================================================================
   08. NAVEGACIÓN
   Hamburguesa bajo 1024 px; enlaces de escritorio desde 1024 px.
   ============================================================================= */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 400ms var(--suavizado), border-color 400ms ease;
}
.cabecera--solida {
  background: rgba(var(--fondo-rgb), .9);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--borde);
}

.nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 13px clamp(18px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav__logo { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.nav__monograma {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.nav__monograma img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.nav__marca { display: flex; flex-direction: column; line-height: 1; }
.nav__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.125rem;
  letter-spacing: .01em;
  color: var(--texto);
}
.nav__bajada {
  margin-top: 5px;
  font-size: .5625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Enlaces de escritorio: ocultos por defecto, se muestran desde 1024 px.
   El interlineado y el rastreo son ajustados para que las seis secciones más
   el botón quepan en una sola fila ya a 1024 px. */
.nav__enlaces {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  gap: 14px;
}
.nav__enlace {
  display: block;
  padding: 12px 0;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color 300ms ease;
}
.nav__enlace:hover { color: var(--texto); }
.nav__cta { margin-left: 6px; }

/* Botón hamburguesa: visible por defecto, se oculta desde 1024 px */
.nav__hamburguesa {
  width: 46px;
  height: 46px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
}
.nav__barra {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--texto);
  transition: transform 350ms var(--suavizado);
}
.nav__hamburguesa[aria-expanded="true"] .nav__barra:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] .nav__barra:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* Panel desplegable */
.menu {
  display: block;
  padding: 10px 18px 26px;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  animation: entrar 320ms var(--suavizado) both;
}
.menu[hidden] { display: none; }
.menu__enlace {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--borde);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 32, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.375rem;
  color: var(--texto);
}
.menu__enlace:hover { color: var(--laton-claro); }
.menu__cta { width: 100%; margin-top: 18px; min-height: 52px; }
.menu__dato { margin: 18px 0 0; font-size: .75rem; color: var(--texto-suave); }


/* =============================================================================
   09. HERO
   ============================================================================= */

.hero {
  position: relative;
  min-height: 100vh;    /* respaldo para navegadores sin unidades svh */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--fondo);
  isolation: isolate;
}

.hero__foto {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background: var(--superficie);
  will-change: transform;
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; opacity: .58; }

/* Halo de latón que respira lentamente */
.hero__respiro {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-origin: 25% 20%;
  animation: respirar 11s ease-in-out infinite;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(var(--laton-rgb), .32), transparent 58%),
    radial-gradient(90% 70% at 88% 88%, rgba(var(--burdeos-rgb), .3), transparent 62%);
}

.hero__velo { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Protege el contraste del título sobre la fotografía real */
.hero__velo--contraste {
  background: linear-gradient(100deg,
    rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .72) 34%,
    rgba(0, 0, 0, .44) 58%, rgba(0, 0, 0, 0) 82%);
}
.hero__velo--diagonal {
  background: linear-gradient(105deg,
    rgba(var(--fondo-rgb), .92) 0%, rgba(var(--fondo-rgb), .72) 38%,
    rgba(var(--fondo-rgb), .34) 68%, rgba(var(--fondo-rgb), .78) 100%);
}
.hero__velo--base {
  background: linear-gradient(to top, var(--fondo) 2%, rgba(var(--fondo-rgb), .1) 42%);
}

.hero__particulas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__contenido {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 128px clamp(18px, 4vw, 40px) clamp(48px, 7vh, 90px);
}

.hero__etiqueta {
  margin: 0 0 clamp(18px, 3vh, 30px);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--laton);
  animation: entrar 700ms var(--suavizado) 120ms both;
}

.hero__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 0, "WONK" 1;
  font-size: clamp(3rem, 10vw, 8.25rem);
  line-height: .92;
  letter-spacing: -0.03em;
  color: var(--texto);
  text-wrap: balance;
  animation: entrar 800ms var(--suavizado) 220ms both;
}
.hero__ampersand { color: var(--laton); }

.hero__eslogan {
  margin: clamp(20px, 3.4vh, 34px) 0 0;
  max-width: 16ch;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 60, "wght" 600, "SOFT" 70, "WONK" 0;
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--laton-claro);
  animation: entrar 800ms var(--suavizado) 340ms both;
}

.hero__texto {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(.875rem, 1.5vw, 1rem);
  line-height: 1.7;
  color: var(--texto-suave);
  text-wrap: pretty;
  animation: entrar 800ms var(--suavizado) 440ms both;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 4.5vh, 46px);
  animation: entrar 800ms var(--suavizado) 540ms both;
}

.hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(38px, 6vh, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--borde);
  animation: entrar 800ms var(--suavizado) 640ms both;
}
.hero__datos { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 54px); }
.hero__dato { display: flex; flex-direction: column; gap: 6px; }
.hero__dato-etiqueta {
  font-size: .625rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.hero__dato-valor {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 36, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--texto);
}
.hero__desliza {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color 300ms ease;
}
.hero__desliza:hover { color: var(--laton-claro); }
.hero__linea {
  display: block;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--laton), transparent);
}


/* =============================================================================
   10. NOSOTROS
   ============================================================================= */

.nosotros { background: transparent; }

.nosotros__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.nosotros__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.marco--ancho { grid-column: span 2; }

/* Los 4 pilares */
.pilares {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(48px, 8vh, 96px);
}
.pilar {
  padding: 28px 24px 30px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 400ms var(--suavizado),
              transform 400ms var(--suavizado),
              background-color 400ms ease;
}
.pilar:hover {
  border-color: rgba(var(--laton-rgb), .55);
  background: #2C211B;
  transform: translateY(-6px);
}
.pilar__marco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  border: 1px solid rgba(var(--laton-rgb), .45);
  border-radius: var(--radio);
  color: var(--laton);
}
.pilar__icono { width: 22px; height: 22px; }
.pilar__titulo {
  margin: 0 0 10px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 28, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.pilar__texto { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--texto-suave); text-wrap: pretty; }

/* Contadores animados */
.contadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(44px, 7vh, 80px);
  padding-top: clamp(34px, 5vh, 54px);
  border-top: 1px solid var(--borde);
}
.contador { display: flex; flex-direction: column; gap: 8px; }
.contador__cifra {
  display: flex;
  align-items: baseline;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 120, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--laton);
  font-variant-numeric: lining-nums tabular-nums;
}
.contador__sufijo { color: var(--laton-claro); }
.contador__etiqueta {
  font-size: .6875rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--texto-suave);
}


/* =============================================================================
   11. SERVICIOS — packs destacados y carta completa con pestañas
   ============================================================================= */

/* Los filos diagonales que antes vivían aquí ahora son el fondo de toda la
   página de servicios: ver §20, .fondo__filos. */
.seccion--packs,
.seccion--carta { position: relative; z-index: 1; }
.seccion--packs { padding-bottom: clamp(36px, 6vh, 64px); }
.seccion--carta { padding-top: clamp(36px, 6vh, 64px); }

/* --- Los 4 packs --- */
.packs { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 24px;
  background: rgba(var(--fondo-rgb), .74);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 420ms var(--suavizado),
              transform 420ms var(--suavizado),
              box-shadow 420ms ease;
}
.pack:hover {
  border-color: rgba(var(--laton-rgb), .6);
  transform: translateY(-8px);
  box-shadow: var(--sombra-carta);
}
.pack--destacado { border-color: rgba(var(--burdeos-rgb), .6); }
/* El burdeos es color de insignia, nunca de fondo grande */
.pack__insignia {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 4px 12px;
  background: var(--burdeos);
  color: var(--texto);
  border-radius: var(--radio-chico);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.pack__nombre {
  margin: 0 0 6px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 36, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--texto);
}
.pack__duracion {
  margin: 0 0 20px;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.pack__incluye {
  margin: 0 0 24px;
  flex: 1;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--texto-suave);
  text-wrap: pretty;
}
.pack__precios {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
}
.pack__precio {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 60, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--laton);
  font-variant-numeric: lining-nums tabular-nums;
}
.pack__antes { font-size: .875rem; color: var(--texto-suave); text-decoration: line-through; }
.pack .boton { margin-top: 18px; }

/* --- Carta completa --- */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(22px, 3.5vh, 36px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}

.carta { display: grid; grid-template-columns: 1fr; gap: 14px; }
.carta[hidden] { display: none; }
.carta:focus-visible { outline-offset: 6px; }

.servicio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 18px;
  background: rgba(var(--fondo-rgb), .64);
  border: 1px solid var(--borde);
  border-left: 2px solid rgba(var(--laton-rgb), .4);
  border-radius: var(--radio);
  animation: entrar 420ms var(--suavizado) both;
  transition: border-color 380ms ease, transform 380ms var(--suavizado), background-color 380ms ease;
}
.servicio:hover {
  border-color: rgba(var(--laton-rgb), .4);
  border-left-color: var(--laton);
  background: rgba(var(--fondo-rgb), .92);
  transform: translateY(-4px);
}
.servicio__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.servicio__nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.servicio__precio {
  flex: none;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 36, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.25rem;
  color: var(--laton);
  font-variant-numeric: lining-nums tabular-nums;
}
.servicio__texto { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--texto-suave); text-wrap: pretty; }
.servicio__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.servicio__duracion {
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.enlace-agendar {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laton-claro);
  transition: color 300ms ease, letter-spacing 300ms ease;
}
.enlace-agendar:hover { color: var(--laton); letter-spacing: .28em; }


/* =============================================================================
   12. CATÁLOGO DE ESTILOS
   El filtro usa el atributo [hidden]: las tarjetas salen y entran de la grilla
   sin sacarlas del flujo con position absolute.
   ============================================================================= */

/* El matiz frío/cálido que respondía al cursor pasó a ser el fondo de toda la
   página del catálogo: ver §20, .fondo__matiz. */
.catalogo { overflow: hidden; }
.catalogo .contenedor { position: relative; z-index: 1; }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; }

.catalogo__conteo {
  margin: 0 0 18px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.catalogo__grilla { display: grid; grid-template-columns: 1fr; gap: 16px; }

.estilo {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color 420ms var(--suavizado),
              transform 420ms var(--suavizado),
              box-shadow 420ms ease;
}
.estilo[hidden] { display: none; }
.estilo.entra { animation: aparecer 420ms var(--suavizado) both; }
.estilo:hover {
  border-color: rgba(var(--laton-rgb), .55);
  transform: translateY(-6px);
  box-shadow: var(--sombra-carta);
}
.estilo__foto { position: relative; aspect-ratio: 4 / 5; background: #2C211B; overflow: hidden; }
.estilo__foto img { width: 100%; height: 100%; object-fit: cover; }
.estilo__numero {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 9px;
  background: var(--laton-claro);
  color: var(--fondo);
  border-radius: var(--radio-chico);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
}
.estilo__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 20px 18px 18px; flex: 1; }
.estilo__nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.estilo__texto { margin: 0; flex: 1; font-size: .8125rem; line-height: 1.65; color: var(--texto-suave); text-wrap: pretty; }
.estilo__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.estilo__duracion {
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.estilo__precio {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.0625rem;
  color: var(--laton);
  font-variant-numeric: lining-nums tabular-nums;
}
.estilo .boton { margin-top: 6px; }


/* =============================================================================
   13. ANTES Y DESPUÉS
   ============================================================================= */

/* El paso de gris frío a latón cálido pasó a ser el fondo de toda la página de
   antes y después: ver §20, .fondo__clima. */
.casos { overflow: hidden; }
.casos .contenedor { position: relative; z-index: 1; }

.casos__grilla { display: grid; grid-template-columns: 1fr; gap: 20px; }

.caso {
  background: rgba(var(--fondo-rgb), .62);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.comparador {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #2C211B;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  outline-offset: -2px;
}
.comparador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  user-select: none;
  -webkit-user-select: none;
}
.comparador__despues {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.comparador__etiqueta {
  position: absolute;
  bottom: 12px;
  padding: 3px 10px;
  border-radius: var(--radio-chico);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: opacity 300ms ease;
}
.comparador__etiqueta--antes { left: 12px; background: rgba(var(--fondo-rgb), .78); color: var(--texto); }
.comparador__etiqueta--despues { right: 12px; background: var(--laton-claro); color: var(--fondo); }
.comparador--arrastrando .comparador__etiqueta { opacity: .25; }
.comparador__tirador {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--laton-claro);
  box-shadow: 0 0 18px rgba(var(--laton-rgb), .5);
  will-change: left;
}
.comparador__asa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(var(--fondo-rgb), .88);
  border: 1px solid var(--laton-claro);
  color: var(--laton-claro);
  font-size: .8125rem;
  letter-spacing: .04em;
}

.caso__texto { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; }
.caso__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.caso__nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.3125rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.caso__barbero {
  flex: none;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.caso__estilo {
  margin: 0;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laton);
}
.caso__nota { margin: 0; font-size: .8125rem; line-height: 1.7; color: var(--texto-suave); text-wrap: pretty; }
.caso__marca {
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .6875rem;
  color: var(--texto-suave);
}
.caso__marca--despues { color: var(--laton-claro); }


/* =============================================================================
   14. EQUIPO
   El acercamiento de la foto y la frase se resuelven en CSS, sin JavaScript.
   ============================================================================= */

.equipo { background: transparent; }
.equipo__grilla { display: grid; grid-template-columns: 1fr; gap: 16px; }

.barbero {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color 420ms var(--suavizado),
              transform 420ms var(--suavizado),
              box-shadow 420ms ease;
}
.barbero:hover,
.barbero:focus-within {
  border-color: rgba(var(--laton-rgb), .55);
  transform: translateY(-6px);
  box-shadow: var(--sombra-carta);
}
.barbero__foto { position: relative; aspect-ratio: 4 / 5; background: #2C211B; overflow: hidden; }
.barbero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 600ms var(--suavizado);
}
.barbero:hover .barbero__foto img,
.barbero:focus-within .barbero__foto img { transform: scale(1.06); }

.barbero__frase {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 18px 20px;
  background: linear-gradient(to top, rgba(var(--fondo-rgb), .95), rgba(var(--fondo-rgb), 0));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 450ms var(--suavizado), transform 450ms var(--suavizado);
}
.barbero:hover .barbero__frase,
.barbero:focus-within .barbero__frase { opacity: 1; transform: none; }
.barbero__frase p {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 80, "WONK" 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--laton-claro);
  text-wrap: pretty;
}

.barbero__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; }
.barbero__nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.barbero__cargo {
  margin: 0;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--laton);
}
.barbero__datos {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: .8125rem;
  color: var(--texto-suave);
}
.barbero__datos dt {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.barbero__datos dd { margin: 0; }


/* =============================================================================
   15. TESTIMONIOS
   ============================================================================= */

/* Las vetas de madera pasaron a ser el fondo de toda la página de Nosotros,
   que es donde vive ahora el equipo: ver §20, .fondo__vetas. */
.testimonios { overflow: hidden; }
.testimonios .contenedor { position: relative; z-index: 1; }

.carrusel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(var(--fondo-rgb), .62);
  outline-offset: 2px;
}
.carrusel__pista {
  display: flex;
  transition: transform 560ms var(--suavizado);
}
.testimonio {
  flex: 0 0 100%;
  margin: 0;
  padding: clamp(30px, 6vw, 64px) clamp(22px, 6vw, 72px);
}
.testimonio__estrellas { margin: 0 0 22px; font-size: .9375rem; letter-spacing: .3em; color: var(--laton-claro); }
.testimonio__texto {
  margin: 0 0 26px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 72, "wght" 600, "SOFT" 70, "WONK" 0;
  font-size: clamp(1.2rem, 2.5vw, 1.875rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--texto);
  text-wrap: pretty;
}
.testimonio__pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.testimonio__nombre {
  font-family: var(--fuente-titulo);
  font-style: normal;
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.125rem;
  color: var(--texto);
}
.testimonio__meta {
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.carrusel__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
}
.carrusel__flechas { display: flex; gap: 10px; }
.carrusel__flecha {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-size: .9375rem;
  cursor: pointer;
  transition: border-color 300ms ease, color 300ms ease, background-color 300ms ease;
}
.carrusel__flecha:hover {
  border-color: var(--laton);
  color: var(--laton-claro);
  background: rgba(var(--laton-rgb), .1);
}
.carrusel__puntos { display: flex; gap: 8px; }
.carrusel__punto {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.carrusel__punto span {
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--borde);
  transition: width 400ms var(--suavizado), background-color 400ms ease;
}
.carrusel__punto[aria-current="true"] span { width: 28px; background: var(--laton); }


/* =============================================================================
   16. AGENDAR HORA
   ============================================================================= */

/* El cielo que va de día a noche pasó a ser el fondo de toda la página de
   reserva: ver §20, .fondo__cielo. */
.agenda { overflow: hidden; }
.agenda .contenedor { position: relative; z-index: 1; }

.agenda__bajada {
  margin: 0 0 clamp(28px, 4.5vh, 46px);
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--texto-suave);
}

/* --- Formulario --- */
.formulario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: clamp(22px, 4vw, 40px);
  background: rgba(var(--superficie-rgb), .78);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.formulario[hidden] { display: none; }

.campo { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo__etiqueta {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.campo__control {
  min-height: 48px;
  padding: 0 14px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: .9375rem;
  color-scheme: dark;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.campo__control::placeholder { color: rgba(var(--suave-rgb), .7); }
.campo__control:focus {
  border-color: var(--laton);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--laton-rgb), .18);
}
.campo__control--area { min-height: 96px; padding: 14px; line-height: 1.6; resize: vertical; }
.campo__control[aria-invalid="true"] { border-color: rgba(var(--burdeos-rgb), .9); }

.campo__ayuda { font-size: .75rem; color: var(--texto-suave); }
.campo__error { font-size: .78125rem; color: var(--error-texto); }
.campo__error:empty { display: none; }

.casilla { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.casilla__control { width: 20px; height: 20px; accent-color: var(--laton); cursor: pointer; flex: none; }
.casilla__texto { font-size: .875rem; color: var(--texto-suave); }

/* Bloques de hora */
.bloques { display: flex; flex-wrap: wrap; gap: 8px; }
.bloque {
  min-height: 44px;
  min-width: 76px;
  padding: 0 12px;
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  cursor: pointer;
  font-family: var(--fuente-cuerpo);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: lining-nums tabular-nums;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.bloque:hover { color: var(--texto); border-color: rgba(var(--laton-rgb), .55); }
.bloque[aria-pressed="true"] { background: var(--laton); border-color: var(--laton); color: var(--fondo); }

.formulario__envio { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 6px; }
.formulario__nota { font-size: .78125rem; color: var(--texto-suave); }

/* --- Confirmación (simulada) --- */
.confirmacion {
  padding: clamp(26px, 5vw, 46px);
  background: rgba(var(--exito-rgb), .1);
  border: 1px solid rgba(var(--exito-rgb), .55);
  border-radius: var(--radio);
  animation: entrar 520ms var(--suavizado) both;
}
.confirmacion[hidden] { display: none; }
.confirmacion__titulo {
  margin: 0 0 14px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 72, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--texto);
}
.confirmacion__detalle { margin: 0 0 16px; font-size: 1rem; line-height: 1.8; color: var(--texto); }
.confirmacion__detalle strong { color: var(--laton-claro); font-weight: 500; }
.confirmacion__direccion { margin: 0 0 20px; font-size: .9375rem; line-height: 1.7; color: var(--texto-suave); }
.confirmacion__demo {
  margin: 0 0 24px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 18, "wght" 600, "SOFT" 70, "WONK" 0;
  font-size: .9375rem;
  color: var(--texto-suave);
}


/* =============================================================================
   17. HORARIOS Y UBICACIÓN
   ============================================================================= */

.ubicacion { background: transparent; }

/* El grano de película y el halo de latón pasaron a ser el fondo de toda la
   página de contacto: ver §20, .fondo__grano y .fondo__halo. */
.ubicacion .contenedor { position: relative; z-index: 1; }

.ubicacion__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(28px, 4.5vh, 48px);
}
.ubicacion__encabezado .titulo-seccion { margin-bottom: 0; }

/* Insignia de estado: se calcula siempre con la hora de Santiago */
.insignia-estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--radio-pildora);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(var(--suave-rgb), .1);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
}
.insignia-estado__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texto-suave);
}
.insignia-estado[data-estado="abierto"] {
  background: rgba(var(--exito-rgb), .18);
  border-color: rgba(var(--exito-rgb), .6);
  color: #C6DC9C;
}
.insignia-estado[data-estado="abierto"] .insignia-estado__punto { background: var(--exito); }

.ubicacion__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.horarios { width: 100%; border-collapse: collapse; }
.horarios__titulo {
  text-align: left;
  padding-bottom: 14px;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.horarios tr { border-bottom: 1px solid var(--borde); }
.horarios th {
  text-align: left;
  padding: 14px 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.0625rem;
  color: var(--texto);
}
.horarios td { text-align: right; padding: 14px 0; font-size: .875rem; color: var(--texto); }
.horarios__fila--cerrada th,
.horarios__fila--cerrada td { color: var(--texto-suave); }
.horarios__fila--hoy th,
.horarios__fila--hoy td { color: var(--laton); }

.reglas {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reglas li {
  padding-left: 16px;
  border-left: 1px solid rgba(var(--laton-rgb), .45);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--texto-suave);
}

.contacto {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 20px;
  font-size: .875rem;
}
.contacto dt {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.contacto dd { margin: 0; color: var(--texto); }
.contacto__suave { color: var(--texto-suave); }

/* Mapa: contenedor 16:9 que aloja el iframe de Google Maps. */
.mapa {
  position: relative;
  margin-top: 28px;
  aspect-ratio: 16 / 9;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

/* El marco no trae medidas propias: las pone el CSS y llena el contenedor.
   El filtro lo baja al registro oscuro del sitio sin volverlo ilegible; al
   pasar el cursor recupera color y contraste para leer bien las calles. */
.mapa__marco {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.45) contrast(1.06) brightness(.82) saturate(.9);
  transition: filter 500ms var(--suavizado);
}
.mapa__marco:hover,
.mapa__marco:focus {
  filter: grayscale(.15) contrast(1.02) brightness(.95) saturate(1);
}

/* Respaldo sin conexión: queda siempre pintado bajo el marco. Si principal.js
   detecta que no hay red, oculta el iframe y esto es lo que se ve. */
.mapa__respaldo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapa[data-mapa="sin-conexion"] .mapa__marco { display: none; }

.mapa__cuadricula {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--texto-rgb), .05) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(var(--texto-rgb), .05) 0 1px, transparent 1px 42px);
}
.mapa__avenida { position: absolute; top: 0; bottom: 0; left: 38%; width: 10px; background: rgba(var(--laton-rgb), .16); }
.mapa__calle { position: absolute; left: 0; right: 0; top: 54%; height: 14px; background: rgba(var(--texto-rgb), .07); }
.mapa__pin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
}
.mapa__punto {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--laton);
  box-shadow: 0 0 0 8px rgba(var(--laton-rgb), .2);
}
.mapa__direccion {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.125rem;
  color: var(--texto);
}
.mapa__nota {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--texto-suave);
}

.mapa__pie { margin: 14px 0 0; }
.enlace-mapa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laton-claro);
  transition: color 300ms ease;
}
.enlace-mapa:hover { color: var(--laton); }
.enlace-mapa__flecha { transition: transform 300ms var(--suavizado); }
.enlace-mapa:hover .enlace-mapa__flecha { transform: translateX(5px); }


/* =============================================================================
   18. PREGUNTAS FRECUENTES
   ============================================================================= */

.faq { background: transparent; }
.acordeon { display: flex; flex-direction: column; }
.acordeon__item { border-bottom: 1px solid var(--borde); }
.acordeon__encabezado { margin: 0; }
.acordeon__boton {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--texto);
  transition: color 300ms ease;
}
.acordeon__boton:hover { color: var(--laton-claro); }
.acordeon__boton[aria-expanded="true"] { color: var(--laton-claro); }
.acordeon__signo {
  flex: none;
  font-family: var(--fuente-cuerpo);
  font-size: .9375rem;
  color: var(--laton);
  transition: transform 400ms var(--suavizado);
}
.acordeon__boton[aria-expanded="true"] .acordeon__signo { transform: rotate(45deg); }

.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 420ms var(--suavizado), opacity 420ms ease;
}
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p {
  margin: 0;
  padding: 0 0 22px;
  max-width: 68ch;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--texto-suave);
  text-wrap: pretty;
}
.acordeon__item--abierto .acordeon__panel { grid-template-rows: 1fr; opacity: 1; }


/* =============================================================================
   19. PIE DE PÁGINA
   ============================================================================= */

.pie {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding: clamp(52px, 9vh, 92px) 0 40px;
}
.pie__grilla { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); }

.pie__logo {
  display: block;
  width: 92px;
  height: 92px;
  margin-bottom: 18px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.pie__logo img { width: 100%; height: 100%; object-fit: contain; }
.pie__marca {
  margin: 0 0 8px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 48, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--texto);
}
.pie__eslogan {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 70, "WONK" 0;
  font-size: 1rem;
  color: var(--laton-claro);
}

.pie__titulo {
  display: block;
  margin-bottom: 10px;
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.pie__nav { display: flex; flex-direction: column; gap: 4px; }
.pie__nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: .875rem;
  color: var(--texto-suave);
  transition: color 300ms ease;
}
.pie__nav a:hover { color: var(--laton-claro); }

.pie__bloque { display: flex; flex-direction: column; gap: 4px; }
.pie__bloque p { margin: 0 0 10px; font-size: .875rem; line-height: 1.7; color: var(--texto-suave); }
.pie__red {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--texto);
  transition: color 300ms ease;
}
.pie__red:hover { color: var(--laton-claro); }
.pie__cta { margin-top: 8px; min-height: 48px; }

.pie__aviso {
  margin: clamp(38px, 6vh, 64px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--borde);
  max-width: 90ch;
  font-size: .78125rem;
  line-height: 1.8;
  color: var(--texto-suave);
}
.pie__creditos {
  margin: 14px 0 0;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--laton-claro);
}


/* =============================================================================
   20. FONDO ANIMADO DE PÁGINA
   Al partir el sitio en siete páginas, cada una tiene menos scroll y el fondo
   continuo se pierde. Se recupera dándole a cada página su propia atmósfera:
   una capa fija a pantalla completa, con z-index negativo, que se pinta sobre
   el color de <body> y por debajo de todo el contenido. Por eso las secciones
   ya no llevan color opaco propio (§10 a §18): lo que separa una de otra es
   .seccion--velo, un velo translúcido que deja ver la atmósfera detrás.

   Capa           Página            Entrada
   .fondo__respiro   Inicio         late solo (CSS)
   .fondo__filos     Servicios      scroll
   .fondo__matiz     Catálogo       hover/foco de cada tarjeta
   .fondo__clima     Antes/después  posición de la cortina
   .fondo__vetas     Nosotros       scroll
   .fondo__cielo     Agendar        hora seleccionada
   .fondo__grano     Contacto       late solo (CSS)
   .fondo__halo      Contacto       cursor
   ============================================================================= */

.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;              /* sobre el color de <body>, bajo todo el contenido */
  pointer-events: none;
  overflow: hidden;
}
.fondo > * { position: absolute; }

/* Velo de sección: la única separación entre secciones vecinas ahora que no
   pintan un color opaco. Translúcido para no tapar el fondo de la página. */
.seccion--velo {
  background: rgba(var(--superficie-rgb), .55);
  border-block: 1px solid rgba(var(--borde-rgb), .8);
}

/* --- Inicio: halo de latón que respira --- */
.fondo__respiro {
  inset: 0;
  transform-origin: 25% 20%;
  animation: respirar 11s ease-in-out infinite;
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(var(--laton-rgb), .16), transparent 60%),
    radial-gradient(80% 60% at 92% 92%, rgba(var(--burdeos-rgb), .14), transparent 64%);
}

/* --- Servicios: filos diagonales que cruzan al hacer scroll --- */
.fondo__filos {
  inset: -30% -20%;
  opacity: .5;
  will-change: transform;
  background-image: repeating-linear-gradient(115deg,
    transparent 0 118px,
    rgba(var(--laton-rgb), .18) 118px 119px,
    transparent 119px 172px,
    rgba(var(--texto-rgb), .06) 172px 173px,
    transparent 173px 300px);
}

/* --- Catálogo: matiz frío o cálido según el estilo bajo el cursor --- */
.fondo__matiz {
  inset: 0;
  opacity: 0;
  background: radial-gradient(70% 55% at 50% 40%, rgba(var(--laton-rgb), .16), transparent 72%);
  transition: opacity 600ms var(--suavizado), background 600ms var(--suavizado);
}

/* --- Antes y después: de gris frío a latón cálido --- */
.fondo__clima {
  inset: 0;
  background: radial-gradient(75% 60% at 50% 45%, rgba(var(--suave-rgb), .1), transparent 72%);
  transition: background 500ms var(--suavizado);
}

/* --- Nosotros: vetas de madera en paralaje muy lento --- */
.fondo__vetas {
  inset: -25% -10%;
  opacity: .4;
  will-change: transform;
  background-image:
    repeating-linear-gradient(92deg, rgba(var(--laton-rgb), .2) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(88deg, rgba(var(--burdeos-rgb), .16) 0 1px, transparent 1px 61px),
    repeating-linear-gradient(90deg, rgba(var(--texto-rgb), .05) 0 1px, transparent 1px 137px);
}

/* --- Agendar: el cielo pasa de día a noche según la hora elegida --- */
.fondo__cielo {
  inset: 0;
  background: radial-gradient(90% 70% at 50% 0%, rgba(var(--suave-rgb), .1), transparent 70%);
  transition: background 900ms var(--suavizado);
}
/* El velo va por encima del cielo y lo apaga. Sube a .55 arriba por contraste:
   con .35, el cielo de la mañana deja el fondo en #363433 y el texto en --laton
   que va directamente encima se queda en 4.01:1, bajo el mínimo de 4.5:1. */
.fondo__velo {
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--fondo-rgb), .55), rgba(var(--fondo-rgb), .82));
}

/* --- Contacto: grano de película + halo de latón que sigue al cursor ---
   El grano es un SVG incrustado como data URI: no pesa ni pide red. Va con
   opacidad plana y sin mix-blend-mode, porque sobre un fondo casi negro
   overlay se comporta como multiply y el grano no se vería. */
.fondo__grano {
  inset: 0;
  opacity: .05;   /* topado por contraste, junto con el alfa del halo en fondos.js */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grano 900ms steps(1, end) infinite;
}
/* Saltos cortos y desiguales: el grano tiembla como una película, no se desliza. */
@keyframes grano {
  0%   { background-position:   0px   0px; }
  25%  { background-position: -37px  19px; }
  50%  { background-position:  23px -41px; }
  75%  { background-position: -19px -13px; }
  100% { background-position:   0px   0px; }
}
.fondo__halo {
  inset: 0;
  opacity: 0;
  transition: opacity 500ms var(--suavizado);
}

/* Viñeta compartida: apaga los bordes para que la textura no llegue al filo */
.fondo__vineta {
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--fondo-rgb), .88), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, rgba(var(--fondo-rgb), .88), transparent 70%);
}


/* =============================================================================
   21. CÁSCARA DE LAS 7 PÁGINAS
   Lo que se repite idéntico en cada archivo: el marcador de página actual, el
   encabezado de las páginas interiores y la franja de cierre.
   ============================================================================= */

/* --- Enlace de la página actual, en latón --- */
.nav__enlace.activo,
.menu__enlace.activo { color: var(--laton); }
.nav__enlace.activo { position: relative; }
.nav__enlace.activo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--laton);
}

/* --- Encabezado de las páginas interiores (todas menos el inicio) --- */
.encabezado-pagina { padding-top: clamp(104px, 15vh, 168px); }
.encabezado-pagina .titulo-seccion { margin-bottom: 18px; }
.encabezado-pagina__bajada {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.75;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* --- Enlace a la página profunda, al pie de cada adelanto del inicio --- */
.enlace-profundo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: clamp(24px, 4vh, 40px);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laton-claro);
  transition: color 300ms ease;
}
.enlace-profundo:hover { color: var(--laton); }
.enlace-profundo__flecha { transition: transform 300ms var(--suavizado); }
.enlace-profundo:hover .enlace-profundo__flecha { transform: translateX(6px); }

/* --- Franja de cierre: cierra las 6 páginas que no son la de reserva --- */
.franja-cierre {
  position: relative;
  padding-block: clamp(52px, 9vh, 96px);
  background: rgba(var(--superficie-rgb), .6);
  border-top: 1px solid var(--borde);
  text-align: center;
}
.franja-cierre__eslogan {
  margin: 0 0 clamp(22px, 3.5vh, 36px);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 72, "wght" 600, "SOFT" 75, "WONK" 0;
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--texto);
}
.franja-cierre__horario {
  margin: clamp(20px, 3vh, 30px) 0 0;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* --- Cabecera y pie mínimos de agendar.html ---
   Es una página de un solo camino: solo el logo, que vuelve al inicio. */
.cabecera--minima .nav { justify-content: flex-start; }
.pie--minimo { text-align: center; }
.pie--minimo .pie__aviso { max-width: 78ch; margin-inline: auto; }


/* =============================================================================
   22. COMPONENTES PROPIOS DE LAS PÁGINAS NUEVAS
   Piezas que no existían cuando todo cabía en una sola página.
   ============================================================================= */

/* --- servicios.html: franja de política --- */
.politicas { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--borde); }
.politica { padding: 26px 24px; background: rgba(var(--fondo-rgb), .82); }
.politica__titulo {
  margin: 0 0 10px;
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.politica__texto { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--texto-suave); }

/* --- servicios.html: vitrina de productos --- */
.productos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; }
.producto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--borde);
}
.producto__nombre { font-size: .9375rem; color: var(--texto); }
.producto__precio {
  flex: none;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.0625rem;
  color: var(--laton);
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- catalogo.html: ficha desplegable de cada estilo ---
   Va con <details> nativo: se abre y se cierra sin JavaScript. */
.estilo__detalle { margin-top: 14px; border-top: 1px solid var(--borde); }
.estilo__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--laton-claro);
  transition: color 300ms ease;
}
.estilo__resumen::-webkit-details-marker { display: none; }
.estilo__resumen:hover { color: var(--laton); }
.estilo__resumen::after {
  content: "+";
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 300ms var(--suavizado);
}
.estilo__detalle[open] .estilo__resumen::after { transform: rotate(45deg); }
.estilo__ficha { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.estilo__ficha dt {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.estilo__ficha dd { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--texto); }

/* --- antes-despues.html: precio del trabajo y llamado a la acción --- */
.caso__cuenta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.caso__valor {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 36, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.375rem;
  color: var(--laton);
  font-variant-numeric: lining-nums tabular-nums;
}
.caso__duracion {
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.caso__cta { margin-top: 16px; width: 100%; }

/* --- nosotros.html: botón de cada barbero y franja de oficio --- */
.barbero__cuerpo .boton { margin-top: 18px; width: 100%; }
.oficio { display: grid; grid-template-columns: 1fr; gap: 18px; }
.oficio__punto {
  padding: 24px;
  background: rgba(var(--fondo-rgb), .74);
  border: 1px solid var(--borde);
  border-left: 2px solid rgba(var(--laton-rgb), .5);
  border-radius: var(--radio);
}
.oficio__titulo {
  margin: 0 0 10px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.125rem;
  color: var(--texto);
}
.oficio__texto { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--texto-suave); }

/* --- agendar.html: formulario y resumen en vivo, lado a lado --- */
.agenda__disposicion {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.resumen {
  padding: 26px 24px;
  background: rgba(var(--superficie-rgb), .82);
  border: 1px solid var(--borde);
  border-top: 2px solid var(--laton);
  border-radius: var(--radio);
}
.resumen__titulo {
  margin: 0 0 20px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.25rem;
  color: var(--texto);
}
.resumen__lista { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.resumen__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borde);
}
.resumen__fila dt {
  flex: none;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.resumen__fila dd { margin: 0; text-align: right; font-size: .875rem; color: var(--texto); }
.resumen__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 0;
}
.resumen__total span {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.resumen__total strong {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 48, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--laton);
  font-variant-numeric: lining-nums tabular-nums;
}
.resumen__nota { margin: 16px 0 0; font-size: .75rem; line-height: 1.6; color: var(--texto-suave); }

/* --- contacto.html: cómo llegar --- */
.llegar { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
.llegar__medio {
  padding: 20px;
  background: rgba(var(--fondo-rgb), .74);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.llegar__titulo {
  margin: 0 0 8px;
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laton-claro);
}
.llegar__texto { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--texto-suave); }


/* =============================================================================
   23. PUNTOS DE QUIEBRE
   640 · 768 · 1024 · 1280
   ============================================================================= */

/* ---------- Bajo 640 px: el panel de Filo ocupa casi toda la pantalla ---------- */
@media (max-width: 639px) {
  .filo { right: 0; bottom: 0; left: 0; align-items: stretch; gap: 0; }
  .filo__burbuja { position: fixed; right: 14px; bottom: 14px; }
  .filo--abierto .filo__burbuja { display: none; }
  .filo__panel {
    width: 100vw;
    height: 100svh;
    max-height: none;
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
  }
}

/* ---------- 640 px: dos columnas en las grillas de tarjetas ---------- */
@media (min-width: 640px) {
  .contadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogo__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipo__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 768 px: la carta y los casos se abren a dos columnas ---------- */
@media (min-width: 768px) {
  .carta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casos__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ubicacion__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .politicas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .oficio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .llegar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caso__cta { width: auto; }
}

/* ---------- 1024 px: navegación de escritorio y grillas anchas ---------- */
@media (min-width: 1024px) {
  /* La hamburguesa desaparece por completo y entran los enlaces */
  .nav__hamburguesa { display: none; }
  .nav__enlaces { display: flex; }
  .menu { display: none !important; }

  .nosotros__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .equipo__grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalogo__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .politicas { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* El resumen de la reserva acompaña al formulario y se queda a la vista */
  .agenda__disposicion { grid-template-columns: minmax(0, 1fr) 320px; }
  .resumen { position: sticky; top: calc(var(--alto-cabecera) + 24px); }
}

/* ---------- 1280 px: máxima densidad ---------- */
@media (min-width: 1280px) {
  .nav__enlaces { gap: 30px; }
  .nav__enlace { font-size: .78125rem; letter-spacing: .16em; }

  .packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalogo__grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .casos__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* En antes-despues.html cada caso ocupa una fila entera: la comparación es
     el contenido más persuasivo del sitio y merece el ancho completo. */
  .casos--completa .casos__grilla { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vh, 72px); }
  .casos--completa .caso { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
}


/* =============================================================================
   24. TRANSICIONES ENTRE PÁGINAS
   Un barrido de latón en diagonal al navegar, para que no se vea el parpadeo
   blanco del navegador entre documento y documento.

   Cómo degrada: `@view-transition` es una regla que los navegadores sin soporte
   descartan al analizar el CSS, y las pseudoclases ::view-transition-* no
   existen para ellos. Sin soporte, la navegación es la de siempre, sin animación
   y sin JavaScript de por medio. Necesita mismo origen: abierto con file:// no
   se activa, y también en ese caso la navegación funciona normal.

   Movimiento reducido: además del bloque de abajo, principal.js llama a
   skipTransition() en cuanto arranca, que es la forma que da la especificación
   para cancelarla de verdad en vez de dejarla correr en cero.
   ============================================================================= */

@view-transition { navigation: auto; }

/* La cabecera, el pie y la barra de progreso salen del recorte de la raíz: con
   nombre propio forman su propio grupo, y abajo se les apaga la animación para
   que se queden quietos mientras el resto barre. */
.cabecera { view-transition-name: cabecera; }
.pie      { view-transition-name: pie; }
.progreso { view-transition-name: progreso; }

::view-transition-group(cabecera),
::view-transition-group(pie),
::view-transition-group(progreso),
::view-transition-old(cabecera), ::view-transition-new(cabecera),
::view-transition-old(pie),      ::view-transition-new(pie),
::view-transition-old(progreso), ::view-transition-new(progreso) {
  animation: none;
}

/* Sin la mezcla de opacidad que trae por defecto: el barrido es un recorte
   limpio, no un desvanecido. */
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }

/* CÓMO SE DIBUJA EL FILO
   Las dos instantáneas se recortan con la misma diagonal, pero la de la página
   que se va lleva 6 px de desfase. Entre ambas queda una franja diagonal de 6 px
   por la que asoma el fondo del grupo, que es de latón: esa franja es el filo, y
   viaja sola porque los dos recortes se animan a la par.

   Se hace así y no con drop-shadow porque el CSS aplica los filtros ANTES del
   recorte: la sombra se calcularía sobre el rectángulo entero y el clip-path se
   la llevaría por delante. Probado, no se veía nada.

   La inclinación es la misma de los filos de Servicios: el borde superior va
   adelantado respecto del inferior. */
::view-transition-group(root) { background: var(--laton-claro); }

::view-transition-new(root) { animation: filo-nueva 320ms var(--suavizado) both; }
::view-transition-old(root) { animation: filo-vieja 320ms var(--suavizado) both; }

/* La nueva descubre desde la izquierda, por detrás del filo */
@keyframes filo-nueva {
  from { clip-path: polygon(0 0, -2% 0, -38% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 138% 0, 102% 100%, 0 100%); }
}

/* La vieja se retira por delante del filo, 6 px más adelante */
@keyframes filo-vieja {
  from { clip-path: polygon(calc(-2% + 6px) 0, 100% 0, 100% 100%, calc(-38% + 6px) 100%); }
  to   { clip-path: polygon(calc(138% + 6px) 0, 100% 0, 100% 100%, calc(102% + 6px) 100%); }
}


/* =============================================================================
   25. CHATBOT «FILO»
   Burbuja fija abajo a la derecha que abre un panel. Bajo 640 px el panel ocupa
   casi toda la pantalla; desde ahí, 380 px pegado a la esquina.
   ============================================================================= */

.filo {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 130;              /* sobre la cabecera (100) y la barra de progreso (120) */
  display: flex;
  /* column-reverse deja la burbuja abajo, anclada a la esquina, y el panel
     creciendo hacia arriba. Con `column` el orden del marcado la pondría encima
     del panel, que es justo al revés de lo que se espera. */
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}

/* --- La burbuja --- */
.filo__burbuja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px 0 16px;
  background: var(--laton);
  color: var(--fondo);
  border: 1px solid var(--laton-claro);
  border-radius: var(--radio-pildora);
  box-shadow: var(--sombra-boton);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background-color 300ms ease, transform 300ms var(--suavizado);
}
.filo__burbuja:hover { background: var(--laton-claro); transform: translateY(-2px); }
.filo__burbuja-icono { display: flex; }
.filo__burbuja-icono svg { width: 20px; height: 20px; }

/* En escritorio la burbuja se queda visible bajo el panel: es una segunda
   manera de cerrar y, sobre todo, un elemento enfocable que sigue existiendo.
   Con display: none no podría recibir el foco al cerrar. Solo se esconde bajo
   640 px, donde el panel ocupa la pantalla entera y estorbaría. */

/* --- El panel --- */
.filo__panel {
  display: flex;
  flex-direction: column;
  width: min(calc(100vw - 28px), 380px);
  height: min(calc(100vh - 28px), 560px);
  max-height: calc(100svh - 28px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 2px solid var(--laton);
  border-radius: var(--radio);
  box-shadow: var(--sombra-carta);
  overflow: hidden;
  animation: filo-entra 260ms var(--suavizado) both;
}
.filo__panel[hidden] { display: none; }

@keyframes filo-entra {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.filo__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 14px 18px;
  border-bottom: 1px solid var(--borde);
  background: rgba(var(--fondo-rgb), .5);
}
.filo__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-variation-settings: "opsz" 30, "wght" 600, "SOFT" 0, "WONK" 0;
  font-size: 1.125rem;
  line-height: 1.1;
  color: var(--texto);
}
.filo__bajada {
  margin: 2px 0 0;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.filo__acciones { display: flex; gap: 4px; }
.filo__accion {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
  cursor: pointer;
  font-size: 1rem;
  transition: color 250ms ease, border-color 250ms ease;
}
.filo__accion:hover { color: var(--laton-claro); border-color: var(--borde); }

/* --- El hilo --- */
.filo__hilo {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}

.filo__mensaje { max-width: 88%; }
.filo__mensaje--filo { align-self: flex-start; }
.filo__mensaje--yo   { align-self: flex-end; }

.filo__texto {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--radio);
  font-size: .875rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.filo__mensaje--filo .filo__texto {
  background: rgba(var(--fondo-rgb), .8);
  border: 1px solid var(--borde);
  border-left: 2px solid rgba(var(--laton-rgb), .6);
  color: var(--texto);
}
.filo__mensaje--yo .filo__texto {
  background: rgba(var(--laton-rgb), .18);
  border: 1px solid rgba(var(--laton-rgb), .45);
  color: var(--texto);
}

/* Tablas de precios dentro de un mensaje */
.filo__lista {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.filo__lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--borde);
  font-size: .8125rem;
}
.filo__lista li:last-child { border-bottom: 0; }
.filo__lista-nombre { color: var(--texto); }
.filo__lista-valor {
  flex: none;
  color: var(--laton-claro);
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- Los botones de opción --- */
.filo__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
}
.filo__opcion {
  min-height: 38px;
  padding: 8px 14px;
  background: none;
  border: 1px solid rgba(var(--laton-rgb), .5);
  border-radius: var(--radio-pildora);
  color: var(--laton-claro);
  cursor: pointer;
  font-size: .75rem;
  line-height: 1.3;
  text-align: left;
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}
.filo__opcion:hover {
  background: rgba(var(--laton-rgb), .16);
  border-color: var(--laton);
  color: var(--texto);
}
/* Las que llevan a otra página se distinguen del resto */
.filo__opcion--ir {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--laton-rgb), .16);
  border-color: var(--laton);
  color: var(--texto);
}
.filo__opcion--ir::after { content: " →"; white-space: pre; }

/* --- Indicador de escritura --- */
.filo__escribiendo {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 14px;
  background: rgba(var(--fondo-rgb), .8);
  border: 1px solid var(--borde);
  border-left: 2px solid rgba(var(--laton-rgb), .6);
  border-radius: var(--radio);
  width: fit-content;
}
.filo__escribiendo span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--laton);
  animation: filo-punto 1.1s ease-in-out infinite;
}
.filo__escribiendo span:nth-child(2) { animation-delay: .18s; }
.filo__escribiendo span:nth-child(3) { animation-delay: .36s; }
@keyframes filo-punto {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* --- La entrada de texto --- */
.filo__entrada {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--borde);
}
.filo__etiqueta {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.filo__campo {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  background: rgba(var(--fondo-rgb), .8);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pildora);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: .875rem;
}
.filo__campo::placeholder { color: var(--texto-suave); }
.filo__campo:focus { border-color: rgba(var(--laton-rgb), .7); outline: none; }
.filo__campo:focus-visible { outline: 2px solid var(--laton-claro); outline-offset: 2px; }
.filo__enviar {
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--laton);
  border: 0;
  border-radius: 50%;
  color: var(--fondo);
  cursor: pointer;
  font-size: 1.125rem;
  transition: background-color 250ms ease;
}
.filo__enviar:hover { background: var(--laton-claro); }

.filo__aviso {
  margin: 0;
  padding: 0 16px 14px;
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--texto-suave);
}


/* =============================================================================
   26. MOVIMIENTO REDUCIDO
   Primera de las dos barreras: la segunda vive en el JavaScript, que consulta
   prefers-reduced-motion antes de arrancar cualquier animación imperativa.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    /* El retraso negativo evita que un elemento con animación diferida quede
       invisible durante su espera por culpa del relleno hacia atrás. */
    animation-delay: -1ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Nada queda invisible por depender de una animación de entrada */
  .js [data-reveal] { opacity: 1; }
  .hero__etiqueta,
  .hero__titulo,
  .hero__eslogan,
  .hero__texto,
  .hero__acciones,
  .hero__pie { opacity: 1; }

  .progreso__filo { display: none; }
  .barbero__frase { opacity: 1; transform: none; }

  /* El grano de Contacto se queda quieto y el halo no aparece: fondos.js
     tampoco engancha el cursor cuando se pide menos movimiento. */
  .fondo__grano { animation: none; }
  .fondo__halo { display: none; }
  /* El halo del inicio deja de latir, pero se queda pintado */
  .fondo__respiro { animation: none; }

  /* La transición entre páginas no barre. principal.js además la cancela con
     skipTransition(), así que esto es solo la segunda barrera. */
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }

  /* El panel de Filo aparece sin deslizarse y los puntos de «escribiendo» no
     laten. chatbot.js además se salta la espera y responde de inmediato. */
  .filo__panel { animation: none; }
  .filo__escribiendo span { animation: none; opacity: .6; }
}