/* Barbería: oscura y atrevida (con el tema "Negro y dorado" luce más), tipografía enorme en
   mayúsculas, lista de precios grande, fotos en blanco y negro y botón de cita fijo. */

:root {
  --radio: 2px;
}

body {
  font-size: 1.05rem;
}

h1,
h2,
.marca {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.boton {
  border-radius: var(--radio);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.marca {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__lista {
  display: flex;
  gap: 1.25rem;
  list-style: none;
}

.nav__lista a {
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav__lista a:hover {
  color: var(--color-enlace);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  min-height: min(100svh, 860px);
  align-items: flex-end;
  overflow: hidden;
  padding: 8rem 0 4rem;
  background:
    linear-gradient(90deg, var(--color-fondo) 0%, color-mix(in srgb, var(--color-fondo) 80%, transparent) 55%, color-mix(in srgb, var(--color-fondo) 35%, transparent)),
    var(--foto, none) center / cover no-repeat,
    var(--color-fondo);
}

.hero__poste {
  position: absolute;
  top: 0;
  right: clamp(1rem, 6vw, 5rem);
  width: clamp(14px, 2.5vw, 26px);
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-principal) 0 14px,
    var(--color-fondo) 14px 28px,
    var(--color-texto) 28px 42px,
    var(--color-fondo) 42px 56px
  );
  opacity: 0.85;
}

.hero__contenido {
  position: relative;
  /* Hueco para la franja de barbero: el texto nunca pasa por debajo. */
  padding-right: calc(clamp(1rem, 6vw, 5rem) + clamp(14px, 2.5vw, 26px) + 1rem);
}

@media (max-width: 640px) {
  .hero__poste {
    right: 0.6rem;
    width: 10px;
  }

  .hero__contenido {
    padding-right: 1.75rem;
  }
}

.hero__etiqueta {
  margin-bottom: 1rem;
  color: var(--color-enlace);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero__titulo {
  font-size: clamp(2rem, 9vw, 7rem);
  font-weight: 900;
  line-height: 0.92;
}

.nombre-largo .hero__titulo {
  font-size: clamp(2rem, 6.5vw, 4rem);
  line-height: 1;
}

.hero__lema {
  max-width: 480px;
  margin: 1.5rem 0 2rem;
  color: var(--color-texto-suave);
  font-size: 1.1rem;
}

/* ---------- Secciones ---------- */

.seccion {
  padding: clamp(4rem, 10vw, 7rem) 0;
}

.seccion--borde {
  border-top: 1px solid var(--color-borde);
}

.titulo-gigante {
  margin-bottom: 2.5rem;
  font-size: clamp(2.2rem, 9vw, 5.5rem);
  font-weight: 900;
  line-height: 0.95;
}

.titulo-gigante span {
  color: var(--color-enlace);
}

.titulo-mediano {
  margin-bottom: 1.25rem;
  font-size: 1.6rem;
}

/* Precios: grandes, con línea de puntos */
.precios {
  display: grid;
  gap: 0 4rem;
  list-style: none;
}

@media (min-width: 860px) {
  .precios {
    grid-template-columns: 1fr 1fr;
  }
}

.precios .servicio {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.precios .servicio__cabecera::after {
  order: 1;
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted var(--color-borde);
  transform: translateY(-0.35em);
  content: "";
}

.precios .servicio__cabecera:not(:has(.servicio__precio))::after {
  display: none;
}

.precios .servicio__nombre {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  text-transform: uppercase;
}

.precios .servicio__precio {
  order: 2;
  color: var(--color-enlace);
  font-family: var(--fuente-titulos);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.manifiesto {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--color-principal);
  color: var(--color-sobre-principal);
}

.manifiesto p {
  max-width: 900px;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
}

/* Fotos en blanco y negro que se colorean al pasar */
.galeria {
  gap: 4px;
}

.galeria__enlace {
  border-radius: 0;
}

.galeria img {
  aspect-ratio: 1;
  filter: grayscale(1) contrast(1.1);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.galeria__enlace:hover img,
.galeria__enlace:focus-visible img {
  filter: none;
}

.contacto {
  display: grid;
  gap: 3rem;
}

@media (min-width: 860px) {
  .contacto {
    grid-template-columns: 1.2fr 1fr;
  }
}

.contacto > * {
  min-width: 0;
}

.contacto__direccion {
  font-size: 1.3rem;
  font-weight: 700;
}

.contacto__ciudad {
  color: var(--color-texto-suave);
}

.contacto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.horario th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Pie y cita fija ---------- */

.pie {
  padding: 2rem 0 6rem;
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  font-size: 0.85rem;
}

.cita-fija {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.4rem;
  border-radius: var(--radio);
  background: var(--color-principal);
  color: var(--color-sobre-principal);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.cita-fija svg {
  width: 20px;
  height: 20px;
}

.aviso-demo {
  bottom: 0.75rem;
}

@media (max-width: 480px) {
  .nav__lista {
    gap: 0.9rem;
  }

  .aviso-demo {
    bottom: 4.6rem;
  }
}