/* Chosen Barber: tokens, base, layout y componentes. Mobile-first: 768 y 1100. */

:root {
  color-scheme: dark;

  /* Color */
  --bg: #000000;            /* página, header, footer: el logo se funde */
  --surface: #16161A;       /* tarjetas */
  --surface-2: #212126;     /* placa Gold, tarjeta elevada, hover */
  --text: #C8CCD2;          /* plata: párrafos */
  --text-strong: #F2F3F5;   /* títulos */
  --muted: #9A9FA6;         /* secundario, notas */
  --gold: #C9A24A;          /* botón principal y detalles */
  --gold-light: #E3C16F;    /* hover y foco */
  --on-gold: #000000;
  --silver: #C8CCD2;        /* segundo eslabón */
  --line: rgba(200, 204, 210, .16);        /* decorativo */
  --line-field: #6B6F77;    /* borde de campo, 3:1 */
  --error: #FF8A7A;
  --success: #7FD6A4;
  --tag-bg: rgba(0, 0, 0, .72);

  /* Velos sobre foto: garantizan AA con cualquier foto */
  --scrim: rgba(0, 0, 0, .82);
  --hero-scrim-desk: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.84) 56%, rgba(0,0,0,.08) 80%); /* el H1 se limita al 60 % del contenedor */
  --hero-scrim-mob: linear-gradient(0deg, #000 0%, rgba(0,0,0,.84) 52%, rgba(0,0,0,.1) 78%, rgba(0,0,0,.5) 100%);

  /* Tipografía */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-gothic: 'Grenze Gotisch', Georgia, serif;
  --stretch-display: 68%;   /* títulos, cifras, precios, botones */
  --stretch-body: 100%;

  --fs-hero: clamp(3rem, 1.6rem + 6vw, 6.5rem);       /* 48 a 104 */
  --fs-h2: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);      /* 36 a 64 */
  --fs-h3: clamp(1.5rem, 1.3rem + .8vw, 2rem);        /* 24 a 32 */
  --fs-gothic: clamp(2rem, 1.7rem + 1.4vw, 3rem);     /* 32 a 48: nunca menos de 32 */
  --fs-stat: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);     /* 56 a 88 */
  --fs-price: clamp(2rem, 1.8rem + 1vw, 2.75rem);     /* 32 a 44 */
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body: 1.0625rem;     /* 17 */
  --fs-small: .9375rem;     /* 15 */
  --fs-tag: .75rem;         /* 12 */

  --lh-tight: .95;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --measure: 62ch;

  /* Espaciado 4/8 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section-y: clamp(64px, 4rem + 4vw, 128px);

  /* Radios: distintos según la jerarquía */
  --r-sm: 6px;              /* campos, rótulos */
  --r-md: 12px;             /* fotos */
  --r-lg: 18px;             /* tarjetas */
  --r-link: 999px;          /* botones y eslabones: forma de la cadena */

  /* Sombras: en negro puro solo se ven sobre superficies */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-card: var(--edge), 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-lift: var(--edge), 0 20px 48px rgba(0, 0, 0, .7);
  /* Prohibido: sombra o resplandor dorado */

  /* Anchos */
  --maxw: 1240px;
  --maxw-text: 720px;
  --header-h: 72px;
  --header-h-small: 60px;
  --mobile-bar-h: 64px;

  /* Movimiento */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-inout: cubic-bezier(.7, 0, .2, 1);
  --t-fast: 180ms;
  --t-med: 280ms;
  --t-enter: 700ms;
  --t-clasp: 900ms;
}

@media (min-width: 1100px) {
  :root { --header-h: 88px; --header-h-small: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-enter: 0ms; --t-clasp: 0ms; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom));
  overflow-wrap: break-word;
}
body.menu-abierto { overflow: hidden; }
img, svg, iframe { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 {
  color: var(--text-strong);
  font-weight: 800; font-stretch: var(--stretch-display);
  line-height: var(--lh-tight); text-transform: uppercase; text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 {
  color: var(--text-strong);
  font-size: var(--fs-h3); font-weight: 700; font-stretch: var(--stretch-display);
  line-height: var(--lh-snug);
}
a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-light); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--on-gold); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--gold); color: var(--on-gold); padding: 12px 16px; border-radius: var(--r-sm);
}
.skip:focus { top: 8px; }

.wrap { width: min(100% - 32px, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tight { padding-top: 0; }
.lead { font-size: var(--fs-lead); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.section-head { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
.section-head p { max-width: var(--measure); }
.gothic {
  color: var(--gold);
  font: 500 var(--fs-gothic)/1.15 var(--font-gothic);
  text-transform: none; font-stretch: normal;
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }

/* ---------- Iconos ---------- */
.icon { width: 22px; height: 22px; flex: none; fill: currentColor; }

/* ---------- Aviso de concepto: borrar el <p class="concept-note"> de cada página ---------- */
.concept-note {
  padding: 6px 16px; text-align: center;
  background: var(--surface); color: var(--muted);
  font-size: .8125rem; line-height: 1.35;
}

/* ---------- Botones ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 12px 28px;
  border: 1.5px solid transparent; border-radius: var(--r-link);
  font: 700 1.125rem/1.1 var(--font-sans); font-stretch: var(--stretch-display);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--gold); color: var(--on-gold); }
.btn--primary::before {  /* relleno que entra desde la izquierda */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold-light);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.btn--primary:hover { color: var(--on-gold); }
.btn--primary:hover::before, .btn--primary:focus-visible::before { transform: scaleX(1); }
.btn--secondary { border-color: var(--silver); color: var(--text); background: transparent; }
.btn--secondary:hover { color: var(--text-strong); background: var(--surface-2); border-color: var(--gold-light); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--block { width: 100%; }
@media (min-width: 1100px) { .btn { min-height: 48px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #000;             /* opaco a propósito: el logo es JPG sobre negro */
  border-bottom: 1px solid transparent;
  view-transition-name: cabecera;
  transition: border-color var(--t-med);
}
.site-header__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  height: var(--header-h);
  transition: height var(--t-med) var(--ease-out);
}
.site-header.is-small { border-bottom-color: var(--line); }
.site-header.is-small .site-header__in { height: var(--header-h-small); }
.site-header__logo { display: block; flex: none; transition: transform var(--t-med) var(--ease-out); transform-origin: left center; }
.site-header__logo img { width: 164px; }
.site-header.is-small .site-header__logo { transform: scale(.85); }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--s5); }
.nav a, .lang {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text); font-weight: 500; font-size: 1rem; text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) left calc(100% - 8px) / 0 2px no-repeat;
  transition: background-size var(--t-med) var(--ease-out), color var(--t-fast);
}
.nav a:hover, .lang:hover { color: var(--text-strong); background-size: 100% 2px; }
.nav a[aria-current="page"] { color: var(--text-strong); background-size: 100% 2px; }
.lang { padding-inline: var(--s2); min-width: 44px; justify-content: center; }
.site-header__acts { display: flex; align-items: center; gap: var(--s2); }
.site-header__book { display: none; }
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; color: var(--text-strong);
  background: none; border: 0; cursor: pointer;
}
.burger .icon { width: 28px; height: 28px; }
.burger .icon--close { display: none; }
.burger[aria-expanded="true"] .icon--open { display: none; }
.burger[aria-expanded="true"] .icon--close { display: block; }

.menu {
  position: fixed; left: 0; right: 0; top: var(--menu-top, var(--header-h)); bottom: 0; z-index: 49;
  display: none; flex-direction: column; gap: var(--s6);
  padding: var(--s5) 16px calc(var(--s5) + env(safe-area-inset-bottom));
  background: #000; overflow-y: auto;
}
.menu.is-open { display: flex; animation: menu-entra var(--t-med) var(--ease-out); }
@keyframes menu-entra { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.menu__links { margin-top: auto; flex: none; } /* anclado abajo, con scroll real si no cabe */
.menu__acts { flex: none; }
.menu__links a {
  display: block; padding-block: 6px;
  color: var(--text-strong); text-decoration: none;
  font-size: 2.25rem; line-height: 1.15; font-weight: 700; font-stretch: var(--stretch-display);
}
.menu__links a[aria-current="page"] { color: var(--gold); }
.menu__acts { display: grid; gap: var(--s3); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: calc(100svh - var(--header-h) - var(--mobile-bar-h));
  background: #000;
}
.hero__img { position: absolute; inset: 0 0 auto; height: 62%; z-index: -2; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-scrim-mob); }
.hero__in { padding-block: var(--s9) var(--s7); }
.hero__kicker { color: var(--text-strong); font-weight: 500; margin-bottom: var(--s3); }
.hero h1 { font-size: var(--fs-hero); margin-bottom: var(--s3); text-wrap: wrap; }
.hero h1 span { display: block; padding-top: .06em; }
.hero__lead { font-size: var(--fs-lead); color: var(--text-strong); max-width: 34rem; margin-top: var(--s2); }
.hero__cta { display: none; margin-top: var(--s5); }
.hero .tag-sample { position: absolute; right: 12px; bottom: 12px; }
@media (max-width: 767px) {
  .hero .tag-sample { top: 12px; bottom: auto; } /* sobre la foto, nunca bajo la barra fija */
  .hero { min-height: calc(100svh - var(--header-h) - var(--mobile-bar-h) - 66px); } /* 66px: aviso de concepto; quitarlo con el aviso */
}

/* ---------- Rótulo de ejemplo ---------- */
.tag-sample {
  display: inline-block;
  font: 500 var(--fs-tag)/1 var(--font-sans);
  color: var(--text);
  background: var(--tag-bg);
  padding: 5px 8px;
  border-radius: var(--r-sm);
}

/* ---------- Barra de datos ---------- */
.databar { border-bottom: 1px solid var(--line); }
.databar ul { display: grid; }
.databar li + li { border-top: 1px solid var(--line); }
.databar a, .databar span.databar__cell {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 52px; padding: var(--s2) 0;
  color: var(--text-strong); font-weight: 500; text-decoration: none;
}
.databar .icon { color: var(--gold); }
.databar a:hover { color: var(--gold-light); }

/* ---------- Tarjetas de servicio ---------- */
.menu-grid { display: grid; gap: var(--s4); }
.card {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5);
  background: var(--surface); color: var(--text);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: background-color var(--t-med);
}
a.card:hover { background: var(--surface-2); color: var(--text); }
.card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.price {
  color: var(--gold); font-size: var(--fs-price); font-weight: 700;
  font-stretch: var(--stretch-display); line-height: 1;
}
.time { display: inline-flex; align-items: center; gap: var(--s1); color: var(--muted); font-size: var(--fs-small); }
.time .icon { width: 18px; height: 18px; }
.menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s5); }

/* ---------- Placa Gold ---------- */
.gold-plaque {
  --n: 18px;
  order: -1;
  display: block; padding: 3px;
  background: var(--gold); color: var(--text); text-decoration: none;
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 var(--n), #000 calc(var(--n) + .5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--n), #000 calc(var(--n) + .5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--n), #000 calc(var(--n) + .5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--n), #000 calc(var(--n) + .5px)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, #0000 var(--n), #000 calc(var(--n) + .5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--n), #000 calc(var(--n) + .5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--n), #000 calc(var(--n) + .5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--n), #000 calc(var(--n) + .5px)) 100% 100% / 51% 51% no-repeat;
}
a.gold-plaque:hover { color: var(--text); }
.gold-plaque:focus-visible { outline: none; }
.gold-plaque:focus-visible .gold-plaque__in { outline: 2px solid var(--gold-light); outline-offset: -6px; } /* la mask recorta el outline exterior */
.gold-plaque__in {
  position: relative; display: flex; flex-direction: column; gap: var(--s3); height: 100%;
  padding: var(--s6) var(--s6);
  background: var(--surface-2);
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 18px, #000 18.5px) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 18px, #000 18.5px) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 18px, #000 18.5px) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 18px, #000 18.5px) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, #0000 18px, #000 18.5px) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 18px, #000 18.5px) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 18px, #000 18.5px) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 18px, #000 18.5px) 100% 100% / 51% 51% no-repeat;
}
.gold-plaque__in::before {  /* línea punteada del volante */
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 2px dotted var(--gold); border-radius: 14px;
}
.gold-plaque h2, .gold-plaque h3 { font: 500 var(--fs-gothic)/1.1 var(--font-gothic); color: var(--gold-light); text-transform: none; }
.gold-plaque__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.gold-plaque ul { display: grid; gap: var(--s1); }
.gold-plaque li { padding-block: var(--s1); border-bottom: 1px solid var(--line); color: var(--text-strong); }
.gold-plaque .btn { margin-top: auto; align-self: flex-start; }
@supports not ((mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000))) {
  .gold-plaque { outline: 3px solid var(--gold); outline-offset: 3px; }
}

/* ---------- Por qué un barbero ---------- */
.why { display: grid; gap: var(--s6); }
.why__list li { padding-block: var(--s5); border-top: 1px solid var(--line); display: grid; gap: var(--s2); }
.why__list li:last-child { border-bottom: 1px solid var(--line); }
.why__list p { max-width: var(--measure); }

/* ---------- Cómo funciona ---------- */
.steps { display: grid; gap: var(--s6); }
.step { position: relative; padding-left: 56px; }
.step__n {
  position: absolute; left: 0; top: -4px; width: 40px; text-align: center;
  color: var(--gold); font-size: 2.5rem; font-weight: 800; font-stretch: var(--stretch-display); line-height: 1;
}
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: calc(-1 * var(--s6) + 6px);
  width: 2px; background: var(--gold);
}
.step p { margin-top: var(--s1); }

/* ---------- Tu barbero ---------- */
.barber { display: grid; gap: var(--s6); justify-items: center; }
.barber__text { display: grid; gap: var(--s4); justify-self: stretch; }
.seal { width: min(100%, 200px); }
.links { display: flex; flex-direction: column; align-items: stretch; margin-top: var(--s3); }
.links li {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 104px; padding: var(--s3) var(--s6);
  border: 3px solid var(--gold); border-radius: var(--r-link);
  color: var(--text-strong);
}
.links li:nth-child(2) { border-color: var(--silver); }
.links li + li { margin-top: -10px; }
.links strong {
  flex: none; color: var(--gold); font-size: var(--fs-stat); font-weight: 800;
  font-stretch: var(--stretch-display); line-height: 1;
}
.links li:nth-child(2) strong { color: var(--silver); }

/* ---------- Fotos ---------- */
.foto { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; background: #000; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto > a { display: block; height: 100%; }
.foto a:focus-visible, .foto__open:focus-visible { outline-offset: -4px; } /* .foto recorta lo exterior */
.foto__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s1) var(--s2);
  padding: var(--s6) var(--s2) var(--s2);
  background: linear-gradient(0deg, rgba(0,0,0,.88) 45%, transparent);
  color: var(--text-strong); font-size: var(--fs-small); font-weight: 500; line-height: 1.2;
  pointer-events: none;
}
.foto figcaption .tag-sample { margin-left: auto; }

.preview {
  display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s2); scrollbar-color: var(--line-field) transparent;
}
.preview .foto { flex: 0 0 78%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.work-foot { margin-top: var(--s5); }
.menu-foot > a:not(.btn), .work-foot > a:not(.btn), .closer > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.gallery .foto { aspect-ratio: 1; }
.gallery .foto:nth-child(3n + 1) { grid-column: span 2; aspect-ratio: 4 / 5; }
.gallery .foto:nth-child(11) { grid-column: span 2; aspect-ratio: 16 / 10; }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: var(--s4); border: 0; background: rgba(0, 0, 0, .95); color: var(--text-strong);
}
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; gap: var(--s3); }
.lightbox::backdrop { background: #000; }
.lightbox img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.lightbox__btns { display: flex; gap: var(--s2); }
.lightbox button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; color: var(--text-strong);
  background: var(--surface-2); border: 0; border-radius: var(--r-link); cursor: pointer;
}

/* ---------- Reseñas ---------- */
.reviews { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); scrollbar-color: var(--line-field) transparent; }
.review {
  flex: 0 0 84%; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
  padding: var(--s5); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--edge);
}
.review .tag-sample { background: var(--surface-2); }
.review blockquote { color: var(--text-strong); font-size: 1.1875rem; line-height: 1.45; }
.review figcaption { margin-top: auto; color: var(--muted); font-size: var(--fs-small); }

/* ---------- Ubicación ---------- */
.find { display: grid; gap: var(--s4); }
.map { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg); }
.place { display: grid; gap: var(--s4); padding: var(--s5); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding-block: var(--s2); border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.hours td { color: var(--text-strong); text-align: right; }

.loc { display: grid; gap: var(--s5); }
.loc__side { display: grid; gap: var(--s5); align-content: start; }
.loc .map { aspect-ratio: 4 / 3; }
.loc__side h2 { font-size: var(--fs-h3); }
.addr a { display: inline-flex; align-items: center; min-height: 44px; gap: var(--s2); }
.loc__cols { display: grid; gap: var(--s6); }
.loc__cols > div { display: grid; gap: var(--s3); align-content: start; }

/* ---------- Páginas interiores ---------- */
.page-head { padding-block: var(--s8) var(--s7); }
.page-head h1 { font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4.75rem); max-width: 16em; margin-bottom: var(--s4); }
.page-head .lead + .lead { margin-top: var(--s3); }
.page-head .row { margin-top: var(--s5); }

.svc-layout { display: grid; gap: var(--s4); }
.svc-list { display: grid; gap: var(--s4); }
.svc { display: grid; gap: var(--s3); padding: var(--s5); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); transition: background-color var(--t-med); }
.svc:hover { background: var(--surface-2); }
.svc__inc { display: grid; gap: var(--s1); }
.svc__inc li { padding-left: var(--s4); position: relative; }
.svc__inc li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--gold); }
.svc__label { color: var(--muted); font-size: var(--fs-small); }
.svc .btn { justify-self: start; align-self: end; }
.svc-layout .gold-plaque { order: -1; align-self: start; }

.faq { display: grid; gap: var(--s3); }
.faq details { background: var(--surface); border-radius: var(--r-md); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  min-height: 56px; padding: var(--s3) var(--s4); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.75rem; line-height: 1; flex: none; transition: transform var(--t-fast); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary h3 { font-size: 1.1875rem; font-stretch: 100%; font-weight: 600; line-height: 1.3; }
.faq details p { padding: 0 var(--s4) var(--s4); max-width: var(--measure); }

.closer { display: grid; gap: var(--s4); justify-items: start; }

.prose { width: min(100% - 32px, var(--maxw-text)); margin-inline: auto; padding-bottom: var(--section-y); }
.prose h1 { font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4.75rem); margin-block: var(--s4); }
.prose h2 { font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); margin-top: var(--s7); margin-bottom: var(--s3); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: var(--s3); }
.prose ul li { padding-left: var(--s4); position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--gold); }
.draft { display: inline-block; padding: 8px 12px; border: 1px solid var(--gold); border-radius: var(--r-sm); color: var(--gold-light); font-weight: 600; font-size: var(--fs-small); }

/* ---------- Formulario ---------- */
.book { padding-block: var(--s8) var(--section-y); }
.book__in { display: grid; gap: var(--s6); }
.book__text { display: grid; gap: var(--s4); align-content: start; }
.book__text h2 { font: 500 var(--fs-gothic)/1.15 var(--font-gothic); color: var(--gold); text-transform: none; }
.book__direct { display: grid; gap: var(--s3); }
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s1); align-content: start; }
.field label { color: var(--text); font-size: var(--fs-small); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--surface); color: var(--text-strong);
  border: 1px solid var(--line-field); border-radius: var(--r-sm);
  font: 400 var(--fs-body)/1.4 var(--font-sans);
}
.field textarea { resize: vertical; min-height: 124px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold-light); outline-offset: 0; border-color: var(--gold-light); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { display: flex; gap: var(--s1); color: var(--error); font-size: var(--fs-small); }
.field__error[hidden] { display: none; }
.form__hint, .form__note { color: var(--muted); font-size: var(--fs-small); }
.form__status { color: var(--success); }
.form__status:empty { display: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s7); font-size: var(--fs-small); }
.site-footer__in { display: grid; gap: var(--s6); }
.site-footer__brand img { width: 200px; margin-bottom: var(--s3); }
.site-footer h2 { font: 600 var(--fs-small)/1.4 var(--font-sans); color: var(--text-strong); text-transform: none; margin-bottom: var(--s2); }
.site-footer a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }
.site-footer__copy { margin-top: var(--s6); color: var(--muted); }

/* ---------- Barra fija móvil ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1.3fr 1.2fr .9fr; gap: 6px;
  height: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom));
  padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));
  background: #000; border-top: 1px solid var(--line);
  transition: transform var(--t-med) var(--ease-out);
}
.mobile-bar.is-hidden { transform: translateY(100%); }
.mobile-bar .btn { min-height: 0; padding: 4px 6px; gap: 4px; font-size: 1rem; }
.mobile-bar .icon { width: 18px; height: 18px; }

/* ---------- 768 ---------- */
@media (min-width: 768px) {
  .wrap { width: min(100% - 64px, var(--maxw)); }
  .prose { width: min(100% - 64px, var(--maxw-text)); }
  body { padding-bottom: 0; }
  .mobile-bar { display: none; }
  .site-header__logo img { width: 200px; }
  .site-header__book { display: inline-flex; min-height: 44px; padding-inline: 20px; }
  .concept-note { font-size: .875rem; }

  .hero { min-height: min(720px, calc(100svh - var(--header-h))); align-items: center; }
  .hero::after { background: var(--hero-scrim-desk); }
  .hero__img { inset: 0 0 0 40%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
  .hero__img img { object-position: 62% 45%; }
  .hero__in { padding-block: var(--s8); }
  .hero h1 { max-width: 60%; }
  .hero__cta { display: flex; }

  .databar ul { grid-template-columns: repeat(3, 1fr); }
  .databar li + li { border-top: 0; border-left: 1px solid var(--line); padding-left: var(--s5); }
  .databar li { padding-right: var(--s3); }

  .menu-grid { grid-template-columns: 1fr 1fr; }
  .menu-grid .gold-plaque { grid-column: 1 / -1; }

  .links { flex-direction: row; }
  .links li { flex: 1; flex-direction: column; justify-content: center; gap: var(--s1); padding: var(--s5) var(--s6); text-align: center; min-height: 208px; }
  .links li + li { margin-top: 0; margin-left: -28px; }

  .barber { grid-template-columns: 240px 1fr; align-items: center; gap: var(--s7); }
  .seal { width: 240px; }
  .why { grid-template-columns: 1fr 1.6fr; gap: var(--s7); }

  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .step { padding-left: 0; padding-top: var(--s7); }
  .step__n { width: auto; top: 0; }
  .step:not(:last-child)::after { left: 40px; right: calc(-1 * var(--s5) + 8px); top: 19px; bottom: auto; width: auto; height: 2px; }

  .preview { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; overflow: visible; padding: 0; }
  .preview .foto { aspect-ratio: 1; min-width: 0; }
  .preview .foto:first-child { grid-column: span 2; grid-row: span 2; }

  .reviews { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; padding-bottom: var(--s7); }
  .review:nth-child(2) { transform: translateY(var(--s7)); }

  .gallery .foto:nth-child(3n + 1) { aspect-ratio: 16 / 10; }
  .place { padding: var(--s6); }
  .loc__cols { grid-template-columns: 1fr 1fr; }
  .faq { grid-template-columns: 1fr 1fr; align-items: start; }

  .form { grid-template-columns: 1fr 1fr; }
  .field--full, .form__actions { grid-column: 1 / -1; }
  .book__direct { grid-template-columns: repeat(2, max-content); }

  .site-footer__in { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------- 1100 ---------- */
@media (min-width: 1100px) {
  .site-header__logo img { width: 240px; }
  .burger, .menu { display: none !important; }
  .nav { display: block; }
  .lang { margin-left: var(--s2); }
  .site-header__book { min-height: 48px; }
  .hero__img img { object-position: 92% 45%; }

  .section-head { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s7); }

  .menu-grid { grid-template-columns: 1fr 1fr 1.15fr; }
  .menu-grid .gold-plaque { grid-column: 3; grid-row: 1 / span 2; order: 0; }
  .menu-grid .gold-plaque__in { padding: var(--s7) var(--s6); }

  .barber { grid-template-columns: 280px 1fr; gap: var(--s8); }
  .seal { width: 280px; }

  .find { grid-template-columns: 1fr 420px; gap: var(--s5); }
  .find .map { aspect-ratio: auto; min-height: 560px; }

  .loc { grid-template-columns: 400px 1fr; }
  .loc .map { aspect-ratio: auto; min-height: 560px; }

  .svc-layout { grid-template-columns: 1.35fr 1fr; align-items: start; gap: var(--s5); }
  .svc-layout .gold-plaque { order: 1; position: sticky; top: calc(var(--header-h-small) + 24px); grid-column: auto; }
  .svc { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s6); }
  .svc__head, .svc__desc { grid-column: 1 / -1; }
  .svc .btn { justify-self: end; }

  /* Mosaico de 6 columnas con celdas cuadradas */
  .gallery {
    --celda: calc((min(100vw - 64px, var(--maxw)) - 5 * var(--s3)) / 6);
    grid-template-columns: repeat(6, 1fr); grid-auto-rows: var(--celda);
  }
  .gallery .foto, .gallery .foto:nth-child(3n + 1), .gallery .foto:nth-child(11) { grid-column: auto; aspect-ratio: auto; }
  .gallery .foto:nth-child(1), .gallery .foto:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .gallery .foto:nth-child(7), .gallery .foto:nth-child(8), .gallery .foto:nth-child(9) { grid-column: span 2; }
  .gallery .foto:nth-child(10), .gallery .foto:nth-child(11) { grid-column: span 3; grid-row: span 2; }

  .book__in { grid-template-columns: 1fr 1.4fr; gap: var(--s8); }
  .site-footer__in { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* Transición entre páginas */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .menu.is-open { animation: none; }
}

@media print {
  .site-header, .mobile-bar, .concept-note, .book { display: none; }
  body { background: #fff; color: #000; }
}