/* Reset, tipografia y variables de color base.
   --primario/--secundario/--acento se inyectan por cliente en <head>
   (ver templates/partials/head.mustache). Aqui solo van los NEUTROS,
   que dependen del esquema ('claro' por defecto, u 'oscuro'). */

/* Fuentes autoalojadas (static/fonts/, copiadas a dist/static/fonts/ por
   el build) -- sin contactar fonts.googleapis.com/fonts.gstatic.com en
   cada visita. Solo se incluye el subset "latin" de Google Fonts: cubre
   todos los caracteres del castellano (incl. ñ, acentos, ¿¡, €), y este
   sitio no tiene contenido en otros alfabetos. Mismos pesos/estilos que
   se pedian antes en la URL de Google Fonts (Fraunces 300-900 italica y
   normal, Work Sans 400-700). */
@font-face{
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../static/fonts/fraunces-italic.woff2") format("woff2");
}
@font-face{
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../static/fonts/fraunces-normal.woff2") format("woff2");
}
@font-face{
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../static/fonts/work-sans.woff2") format("woff2");
}

:root{
  --bg: #faf8f4;
  --bg2: #f2ede3;
  --surface: #ffffff;
  --line: #e4ddd0;
  --text: #221d16;
  --text2: #5c5346;
  --text3: #6b6250;
  --shadow: 0 16px 40px rgba(60, 45, 20, .10);
}

:root[data-tema="oscuro"]{
  --bg: #15110d;
  --bg2: #1d1712;
  --surface: #241d17;
  --line: #372c21;
  --text: #f3e9d7;
  --text2: #b6a68c;
  --text3: #a89a80;
  --shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  position: relative;
  /* Antes era un color solido (--bg) de arriba a abajo -- se nota plano en
     tramos largos sin foto. Dos resplandores muy suaves con los colores de
     marca del cliente (arriba-izquierda y derecha) rompen la monotonia sin
     depender de ninguna foto, y funcionan igual con cualquier color de marca
     que se configure para un cliente nuevo. */
  background:
    radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--primario) 38%, transparent), transparent 68%),
    radial-gradient(900px 520px at 100% 26%, color-mix(in srgb, var(--secundario) 28%, transparent), transparent 64%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Grano muy fino (ruido SVG en linea, sin peticion de red) para que el fondo
   se sienta como papel/mate en vez de color digital plano -- mismo espiritu
   que el "negro mate" que ya se buscaba para esta demo. */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* El grano de arriba usa position:fixed -- sin esto el contenido normal
   (no posicionado) pintaria por detras de el en vez de por delante. */
header, main, footer{ position: relative; z-index: 1; }
::selection{ background: var(--primario-boton); color: var(--primario-ink); }

img{ max-width: 100%; display: block; }
a{ color: inherit; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--primario);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3{
  font-family: "Fraunces", ui-serif, Georgia, serif;
  text-wrap: balance;
  margin: 0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; animation: none !important; }
}

/* Estructura y espaciado de cada seccion. Mobile-first: las reglas base son
   para movil, los @media (min-width) anaden columnas en pantallas grandes. */

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.con-sombra{ box-shadow: var(--shadow); }
.site-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
}
.btn-header{ padding: 10px 16px; font-size: 13.5px; flex-shrink: 0; white-space: nowrap; }
.btn-header-icono{ display: none; }

/* ---------- Hero ---------- */
.hero{
  padding: 72px 0 56px;
  background-size: cover;
  background-position: center;
}
.hero .wrap{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* ---------- Stripe divider ---------- */
.stripe{
  height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--primario), var(--primario) 14px,
    var(--secundario) 14px, var(--secundario) 28px
  );
}

/* ---------- Confianza (barra de resenas) ---------- */
.confianza{
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Secciones genericas ---------- */
section.block{
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
section.block:last-of-type{ border-bottom: none; }

/* Alterna un tinte muy suave (--bg2, ya definido en base.css pero sin usar
   hasta ahora) para que la pagina no sea un unico bloque de color de arriba
   a abajo -- se nota sobre todo en las secciones largas sin foto. El margen
   negativo compensa el padding del .wrap para que el tinte llegue hasta el
   borde de la columna de contenido, no que se quede metido hacia dentro. */
section.block:nth-of-type(even){
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
}

.block-head{
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding-top: 22px;
}
/* Mismo gesto que el "eyebrow" del hero (linea corta antes del texto), aqui
   como acento de color por encima de cada titulo de seccion -- da ritmo
   visual repetido con los colores de marca del cliente, no un color fijo. */
.block-head::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--primario), var(--secundario));
}

/* ---------- Equipo ---------- */
.equipo-grid{
  display: grid;
  gap: 24px;
}
.equipo-foto{
  width: 100%;
  height: auto;
  border-radius: 6px;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

/* ---------- Galeria ---------- */
/* 3 columnas desde movil: con 3 fotos (lo habitual) llenan la rejilla
   entera sin dejar ninguna suelta y descuadrada en su propia fila. */
.galeria-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.galeria-foto{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

/* ---------- Horario + ubicacion ---------- */
.horario-grid{
  display: grid;
  gap: 32px;
}
.mapa-embed{
  border-radius: 4px;
  margin-top: 14px;
}

/* ---------- Footer ---------- */
footer{ padding: 40px 0 60px; }
.contact-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.redes-sociales{
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
}
.foot-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.foot-legal{ display: flex; gap: 16px; flex-wrap: wrap; }
.foot-creditos{ margin: 18px 0 0; font-size: 12.5px; }

/* ---------- Legal ---------- */
.legal-content{ padding: 56px 0 72px; max-width: 720px; }
.legal-content h1{ font-size: clamp(30px, 5vw, 42px); margin-bottom: 6px; }
.legal-content h2{ font-size: 19px; font-family: "Work Sans", sans-serif; font-weight: 600; margin: 34px 0 10px; }
.legal-content p, .legal-content li{ line-height: 1.65; color: var(--text2); }
.legal-content ul{ padding-left: 20px; }

/* ---------- Breakpoints ---------- */
@media (min-width: 760px){
  .equipo-grid{ grid-template-columns: 240px 1fr; align-items: center; }
  .horario-grid{ grid-template-columns: 1fr 1fr; }
  .hero{ padding: 108px 0 84px; }
}

/* Componentes visuales: botones, marca, textos de hero, listas, tarjetas. */

/* ---------- Marca / logo ---------- */
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* deja que el hijo flex se encoja por debajo de su ancho de contenido -- si no, text-overflow:ellipsis de abajo no hace nada */
  text-decoration: none;
}
.brand-logo{ border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.brand-iniciales{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--primario-boton);
  color: var(--primario-ink);
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 14px;
}
.brand-nombre{
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  /* Se encoge en pantallas estrechas en vez de partirse en dos lineas --
     con nombres de cliente mas largos que "Barbería Nilo", cae a puntos
     suspensivos en vez de duplicar la altura del header. */
  font-size: clamp(14px, 4.2vw, 17px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

/* ---------- Hero ---------- */
.eyebrow{
  font-family: "Work Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primario-texto);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content: "";
  width: 26px;
  height: 1px;
  background: var(--primario);
}
.hero h1{
  font-size: clamp(42px, 9vw, 76px);
  font-weight: 600;
  font-style: italic;
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--text);
}
.hero .tagline{
  font-size: clamp(16px, 2.4vw, 19px);
  color: var(--text2);
  max-width: 46ch;
  line-height: 1.55;
  margin: 0;
}
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

/* ---------- Botones ---------- */
.btn{
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s ease;
}
.btn-primary{
  background: var(--primario-boton);
  color: var(--primario-ink);
  box-shadow: var(--shadow);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
  border: 1px solid var(--line);
  color: var(--text2);
}
.btn-ghost:hover{ border-color: var(--primario); color: var(--text); }
.btn-mapa{ margin-top: 14px; padding: 10px 18px; font-size: 13.5px; }

/* ---------- Confianza ---------- */
.confianza-puntuacion{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.estrellas{ color: var(--primario-texto); letter-spacing: 1px; }
.confianza-texto{ font-size: 14.5px; color: var(--text2); }
.confianza-enlace{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primario-texto);
  text-decoration: none;
}
.confianza-enlace:hover{ text-decoration: underline; }

/* ---------- Titulos de bloque ---------- */
.block-head h2{
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500;
  font-style: italic;
}
.block-head .count{
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  white-space: nowrap;
}

/* ---------- Servicios ---------- */
.servicios-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.servicio{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.servicio-nombre{ font-weight: 500; color: var(--text); }
.servicio-duracion{ font-size: 13px; color: var(--text3); }
.servicio-precio{
  margin-left: auto;
  font-family: "Work Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--primario-texto);
}

/* ---------- Equipo ---------- */
.equipo-texto{ color: var(--text2); line-height: 1.65; }

/* ---------- Horario ---------- */
.hours-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.hours-list li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.hours-list .day{ font-size: 15.5px; font-weight: 500; color: var(--text); }
.hours-list .time{
  font-family: "Work Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  color: var(--text2);
  text-align: right;
}
.hours-list .time.closed{ color: var(--secundario-texto); font-weight: 500; }
.direccion-texto{ color: var(--text2); line-height: 1.6; margin: 0; }

/* ---------- Footer ---------- */
.contact-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-card .label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
}
.contact-card .value{
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
}
.contact-card a.value:hover{ color: var(--primario-texto); }
.redes-sociales a{
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text2);
}
.redes-sociales a:hover{ color: var(--primario-texto); }
.foot-row .mark{
  font-family: "Fraunces", serif;
  font-style: italic;
  color: var(--text2);
}
.foot-legal a{
  font-size: 12.5px;
  color: var(--text3);
  text-decoration: none;
}
.foot-legal a:hover{ color: var(--text); }
.foot-creditos{ color: var(--text3); }
.foot-creditos a{ color: var(--text2); font-weight: 600; text-decoration: none; }
.foot-creditos a:hover{ text-decoration: underline; }

/* ---------- Boton flotante de WhatsApp ---------- */
.whatsapp-flotante{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transition: transform .15s ease;
}
.whatsapp-flotante:hover{ transform: scale(1.06); }

@media (max-width: 560px){
  .hero{ padding: 64px 0 48px; }
  .block-head{ flex-direction: column; align-items: flex-start; gap: 8px; }
  /* El boton flotante de WhatsApp (fijo, abajo a la derecha, ~76px de
     ancho con su margen) tapa transitoriamente el texto pegado al borde
     derecho al hacer scroll en moviles estrechos -- el precio de un
     servicio o la hora de cierre del sabado, por ejemplo. Va DESPUES de
     las reglas base de .servicio/.hours-list li (que usan el shorthand
     "padding: Npx 0" y si no ganarian por venir mas tarde en el cascade). */
  .servicio,
  .hours-list li{
    padding-right: 64px;
  }
  /* El boton "Reservar por WhatsApp" del header por si solo ocupa mas de
     dos tercios del ancho en un movil estrecho, dejando casi sin sitio al
     nombre del negocio. Por debajo de este ancho se reduce a un circulo
     con solo el icono (el boton flotante ya repite el mismo icono, asi que
     sigue siendo reconocible) para que el nombre tenga espacio real. */
  .btn-header{
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .btn-header-texto{ display: none; }
  .btn-header-icono{ display: block; }
}