/* =========================================================
   SECTIONS.CSS
   Estilos que sólo aplican a una sección puntual del sitio.
   Cada bloque está separado y comentado para que sumar o
   sacar una sección no rompa a las demás.
   ========================================================= */

/* ---------------------------------------------------------
   HERO — impacto y posicionamiento
   --------------------------------------------------------- */
.hero{
  padding:var(--space-8) 0 var(--space-7);
  position:relative;
}
.hero__mark{
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:0.14em;
  color:var(--color-gold-bright);
  margin-bottom:var(--space-4);
}
.hero__logo{ width:104px; height:auto; margin-bottom:var(--space-4); }
.hero__title{
  font-size:clamp(38px, 9vw, 54px);
  max-width:9ch;
}
.hero__title em{ font-style:italic; color:var(--color-gold-bright); }
.hero__lede{
  margin-top:18px;
  font-size:17px;
  color:var(--color-ivory-dim);
  max-width:34ch;
}
.hero__cta{
  display:flex;
  gap:12px;
  margin-top:var(--space-5);
  flex-wrap:wrap;
}
.hero__rating{ margin-top:var(--space-4); }

/* ---------------------------------------------------------
   POR QUÉ NF BARBERÍA (antes "La experiencia NF")
   Reutiliza .row-list / .row-item de components.css
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   UBICACIÓN
   --------------------------------------------------------- */
.location-note{
  margin-top:var(--space-3);
  font-size:14px;
  color:var(--color-ivory-dim);
  background:var(--color-charcoal);
  border:1px solid var(--color-line);
  padding:14px 16px;
  border-radius:var(--radius);
}
.map-frame{ margin-top:var(--space-4); }
.map-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--color-gold-bright);
  font-weight:500;
  transition:color var(--ease);
}
.map-cta:hover{ color:var(--color-ivory); }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
footer{
  padding:var(--space-8) 0 var(--space-6);
  font-size:13px;
  color:var(--color-ivory-dim);
  display:flex;
  flex-direction:column;
  gap:4px;
}