/* =========================================================
   EJEMPLO: BARBERÍA CORTE FINO
   Estilo de barbería clásica: blanco hueso, rojo y azul
   de poste de barbero, y títulos altos como un letrero.
   ========================================================= */

/* ----- TIPOGRAFÍAS ----- */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../../fonts/big-shoulders-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

/* ----- VARIABLES ----- */
:root {
  --color-fondo: #F6F3EE;     /* blanco hueso */
  --color-tinta: #1D1B19;     /* texto */
  --color-gris: #5E5A55;      /* texto secundario */
  --color-rojo: #B3202A;      /* rojo barbería */
  --color-azul: #1F3A6B;      /* azul barbería */
  --color-linea: #D9D3CA;     /* líneas */

  /* Franja de ejemplo (colores de la página principal) */
  --color-franja: #0E1A2B;
  --color-franja-acento: #FFB938;

  --fuente-titulos: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --fuente-texto: "Figtree", "Segoe UI", Arial, sans-serif;

  --margen: 1.25rem;
  --ancho-max: 1100px;
}

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

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
}

h1,
h2 {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}

h1 {
  font-size: clamp(3.4rem, 15vw, 7rem);
}

h2 {
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  margin-bottom: 1.25rem;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-azul);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  padding: 0.5rem 1rem;
  background: var(--color-tinta);
  color: var(--color-fondo);
  z-index: 10;
}
.saltar:focus {
  top: 3.5rem;
}

.icono {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- FRANJA DE EJEMPLO ----- */
.franja-ejemplo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem var(--margen);
  background: var(--color-franja);
  color: #EAF0F7;
  font-size: 0.875rem;
  text-align: center;
}
.franja-ejemplo a {
  color: var(--color-franja-acento);
  font-weight: 700;
  padding: 0.35rem 0;
}

/* ----- BOTONES ----- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0.8rem 1.5rem;
  background: var(--color-rojo);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 4px;
}
.boton:hover {
  background: #951A23;
}

.boton-chico {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font-size: 0.95rem;
}

.boton-claro {
  background: var(--color-fondo);
  color: var(--color-azul);
}
.boton-claro:hover {
  background: #fff;
}

/* ----- ENCABEZADO ----- */
.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0.9rem var(--margen);
  border-bottom: 2px solid var(--color-tinta);
}

.logo {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.9rem;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

/* ----- PORTADA ----- */
.portada {
  display: flex;
  gap: 1.25rem;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 2.5rem var(--margen) 3rem;
}

/* El poste de barbero: franjas rojas, blancas y azules */
.poste {
  flex: 0 0 22px;
  border-radius: 11px;
  border: 2px solid var(--color-tinta);
  background: repeating-linear-gradient(
    -45deg,
    var(--color-rojo) 0 14px,
    #fff 14px 24px,
    var(--color-azul) 24px 38px,
    #fff 38px 48px
  );
}

.portada-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.portada-texto > p {
  max-width: 30em;
  color: var(--color-gris);
  font-size: 1.125rem;
}

.portada-horario {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-tinta);
}

/* ----- SECCIONES ----- */
.seccion {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 3rem var(--margen);
  border-top: 2px solid var(--color-tinta);
}

.nota {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-gris);
}

/* Lista de precios con puntitos, como una pizarra */
.precios {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
}
.precios li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0;
  font-size: 1.1rem;
}
.precios .puntos {
  flex: 1;
  border-bottom: 2px dotted var(--color-linea);
  transform: translateY(-0.3em);
}
.precios strong {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  color: var(--color-rojo);
}

/* Sección oscura para la galería */
.seccion-oscura {
  max-width: none;
  background: var(--color-azul);
  color: #fff;
  border-top: 0;
}
.seccion-oscura > * {
  max-width: calc(var(--ancho-max) - 2 * var(--margen));
  margin-left: auto;
  margin-right: auto;
}
.seccion-oscura .nota {
  color: #C9D3E6;
}

/* Cuadros de la galería (en una página real son fotos) */
.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.foto {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: 0.75rem;
  border-radius: 4px;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 55%),
    repeating-linear-gradient(-45deg, #2A4A80 0 12px, #24426F 12px 24px);
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.6rem;
  text-transform: uppercase;
}

/* ----- HORARIO Y UBICACIÓN ----- */
.horario {
  margin: 0 0 1.5rem;
  max-width: 480px;
}
.horario div {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-linea);
}
.horario dt {
  font-weight: 600;
}
.horario dd {
  margin: 0;
}

.direccion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.mapa {
  aspect-ratio: 4 / 3;
  max-height: 420px;
  width: 100%;
  border: 2px solid var(--color-tinta);
  background: var(--color-linea);
}
.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ----- LLAMADO FINAL ----- */
.cierre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 3rem var(--margen);
  background: var(--color-rojo);
  color: #fff;
}
.cierre h2 {
  margin: 0;
}

/* ----- PIE ----- */
.pie {
  padding: 1.5rem var(--margen);
  font-size: 0.9rem;
  color: var(--color-gris);
  text-align: center;
}
.pie a {
  display: inline-block;
  padding: 0.6rem 0;
}

/* ----- PANTALLAS GRANDES ----- */
@media (min-width: 800px) {
  :root {
    --margen: 2rem;
  }
  .poste {
    flex-basis: 36px;
    border-radius: 18px;
  }
  .portada {
    gap: 2.5rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .galeria {
    grid-template-columns: repeat(4, 1fr);
  }
  #ubicacion {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: auto auto 1fr; /* la última fila absorbe el alto del mapa */
    column-gap: 3rem;
  }
  #ubicacion h2,
  #ubicacion .horario,
  #ubicacion .direccion {
    grid-column: 1;
  }
  #ubicacion .mapa {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  .cierre {
    align-items: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}