/* ==========================================================
   Experience Esco Barber — styles
   Monochrome brand: ink, slate, steel, fog, silver, pearl, white
   ========================================================== */

:root {
  --ink: #1B191A;      /* fondo principal (logo) */
  --slate: #3C4146;    /* paneles alternos */
  --steel: #7D8182;    /* bordes, capas decorativas */
  --fog: #9F9E9F;      /* texto secundario sobre ink */
  --silver: #ABADAE;   /* capas decorativas */
  --pearl: #DCDADB;    /* secciones claras */
  --white: #FFFFFF;

  --font-display: "Antonio", "Arial Narrow", sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --radius-frame: clamp(20px, 2.4vw, 32px);
  --radius-tile: clamp(22px, 2.2vw, 34px);
  --radius-pill: 999px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --header-h: 88px;
  --bottom-nav-h: 0px;

  /* Brand X (from the logo), inlined so CSS masks work on any host */
  --x-mask: url("data:image/png;base64,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");
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bottom-nav-h);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.content :focus-visible, .index :focus-visible { outline-color: var(--ink); }
.panel :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--white); color: var(--ink); padding: 12px 18px;
  border-radius: var(--radius-pill); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Type ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.display--xl { font-size: clamp(3.4rem, 11.5vw, 11rem); }
.display--lg { font-size: clamp(3rem, 7.5vw, 7rem); }
.display--md { font-size: clamp(2.4rem, 5vw, 4.5rem); }

/* Stacked offset layers — the one loud typographic moment */
.display--layered {
  text-align: right;
  text-shadow:
    -.035em 0 0 var(--steel),
    -.07em 0 0 var(--silver);
  padding-left: .07em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--radius-pill);
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
  touch-action: manipulation;
}
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--pearl); }
.btn--ghost { color: var(--white); border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--slate); }
.btn--outline { color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
}
.text-link:hover { text-decoration-thickness: 3px; }
.text-link--light { color: var(--white); }

.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 14px; height: 14px; fill: currentColor; }
.stars--lg svg { width: 28px; height: 28px; }

/* ---------- Header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 calc(var(--gutter) + 12px);
  transition: background-color .25s var(--ease-out);
}
.site-header.is-scrolled { background: rgba(27, 25, 26, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.brand { justify-self: start; display: block; padding: 8px 0; }
.brand img { width: clamp(132px, 13vw, 176px); }

.pill-nav {
  display: flex; gap: 4px; padding: 5px;
  background: rgba(60, 65, 70, .72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pill-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 46px; height: 46px; padding: 0 12px;
  border-radius: 13px;
  color: var(--white); text-decoration: none;
  font-weight: 600; font-size: .9rem;
  transition: background-color .2s var(--ease-out);
}
.pill-link:hover { background: rgba(255,255,255,.1); }
.pill-link--solid { background: var(--ink); padding: 0 16px; }
.pill-link--solid:hover { background: #000; }

.round-btn {
  justify-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px;
  background: rgba(60, 65, 70, .72); color: var(--white);
  border: 1px solid rgba(255,255,255,.08);
  transition: background-color .2s var(--ease-out);
}
.round-btn:hover { background: var(--slate); }

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

.hero { background: var(--ink); padding: 12px var(--gutter) 0; }
.hero-frame {
  position: relative;
  min-height: clamp(640px, calc(100dvh - 12px), 980px);
  justify-content: center;
  border-radius: var(--radius-frame) var(--radius-frame) 0 0;
  border: 1px solid rgba(255,255,255,.07);
  border-bottom: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, var(--slate) 0%, var(--ink) 72%);
  padding: calc(var(--header-h) + 8px) clamp(16px, 3vw, 40px) clamp(32px, 5vh, 56px);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  color: var(--white);
}

.hero-stage {
  position: relative;
  width: 100%;
  height: clamp(340px, 54vh, 600px);
  display: flex; justify-content: center;
}
.hero-photo {
  height: 100%; width: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 58% 50%;
  border-radius: var(--radius-tile);
  filter: grayscale(1) contrast(1.05);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}

.tiles { position: absolute; inset: 0; pointer-events: none; }
.tile {
  --r: 0deg;
  position: absolute;
  width: clamp(138px, 12.5vw, 188px);
  aspect-ratio: 1;
  transform: rotate(var(--r));
  pointer-events: auto;
}
.tile a {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 100%; height: 100%;
  padding: 14px; text-align: center;
  background: var(--pearl); color: var(--ink);
  border-radius: var(--radius-tile);
  text-decoration: none;
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.65);
  transition: transform .25s var(--ease-out);
}
.tile a:hover { transform: scale(1.04); }
.tile a:focus-visible { outline-color: var(--white); outline-offset: 4px; }
.tile-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tile-name { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.tile-meta { font-size: .8rem; color: var(--slate); }

.tile--1 { --r: -20deg; left: 3%;  top: 52%; }
.tile--2 { --r: -9deg;  left: 17%; top: 14%; }
.tile--3 { --r: 10deg;  right: 17%; top: 10%; }
.tile--4 { --r: 21deg;  right: 3%; top: 50%; }

.hero-title {
  position: relative; z-index: 2;
  margin-top: -.62em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 8.6vw, 8.4rem);
  line-height: .9; text-transform: uppercase; text-align: center;
  letter-spacing: -.01em;
  text-wrap: balance;
  text-shadow: 0 6px 30px rgba(0,0,0,.45);
}

.hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(20px, 3vh, 32px);
}
.hero-rating {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  margin-top: 10px;
  color: var(--pearl); font-size: .9rem; font-weight: 500;
  text-decoration: none;
}
.hero-rating:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Load sequence: tiles settle into their tilt, photo and title follow */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: photo-in .9s var(--ease-out) both; }
  .tile { animation: tile-in .9s var(--ease-out) both; }
  .tile--2 { animation-delay: .08s; }
  .tile--3 { animation-delay: .16s; }
  .tile--1 { animation-delay: .24s; }
  .tile--4 { animation-delay: .32s; }
  .hero-title { animation: rise .8s .35s var(--ease-out) both; }
  .hero-actions, .hero-rating { animation: rise .8s .5s var(--ease-out) both; }
}
@keyframes photo-in { from { opacity: 0; transform: scale(.94); } }
@keyframes tile-in  { from { opacity: 0; transform: translateY(60px) rotate(0deg) scale(.85); } }
@keyframes rise     { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Editorial layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 var(--gutter);
}
.index { display: none; }
.content { min-width: 0; }

.manifesto {
  position: relative;
  padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 80px);
}
.manifesto-place {
  margin-bottom: 20px;
  font-weight: 500; font-size: .95rem; color: var(--slate);
}

.section { padding-bottom: clamp(56px, 8vw, 112px); }
.section-title { margin-bottom: clamp(24px, 3vw, 40px); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 20px; margin-bottom: clamp(24px, 3vw, 40px);
}
.section-head .section-title { margin-bottom: 0; overflow-wrap: anywhere; }
.section-text { max-width: 46ch; font-size: 1.15rem; margin: 20px 0 28px; }

/* Split panels (ink | slate) */
.split { display: grid; grid-template-columns: 1fr; }
.panel { padding: clamp(28px, 4vw, 56px); color: var(--white); }
.panel--ink { background: var(--ink); }
.panel--slate { background: var(--slate); }
.panel--center { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; }
.panel-lead { margin: 20px 0 28px; font-size: 1.15rem; color: var(--pearl); max-width: 30ch; }
.panel-text { margin: 20px 0 16px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.45; color: var(--pearl); max-width: 32ch; }

/* Price list */
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "time price";
  column-gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.price-row:first-child { padding-top: 0; }
.price-row:last-child { border-bottom: 0; padding-bottom: 0; }
.price-name { grid-area: name; font-weight: 600; font-size: 1.05rem; }
.price-time { grid-area: time; color: var(--pearl); font-size: .9rem; }
.price-value {
  grid-area: price; align-self: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-variant-numeric: tabular-nums;
}
.tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 600; vertical-align: 2px; white-space: nowrap;
}

/* Team */
.team { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
.barber { background: var(--ink); color: var(--white); }
.barber img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 30% 40%;
  filter: grayscale(1) contrast(1.05);
}
.barber-body { padding: 24px clamp(20px, 3vw, 32px) 20px; }
.barber-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 6vw, 5.5rem); line-height: .9; text-transform: uppercase;
}
.barber-role { margin-top: 8px; color: var(--pearl); }
.barber .text-link { margin-top: 8px; }

/* Reviews */
.score {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(7rem, 16vw, 14rem); line-height: 1;
  margin-bottom: 8px;
}

/* Bonos */
.section--bonos {
  position: relative;
  padding-top: clamp(16px, 2vw, 24px);
  overflow: hidden;
}

/* Brand X mark, recoloured through a mask so it follows currentColor */
.x-mark {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--x-mask) center / contain no-repeat;
          mask: var(--x-mask) center / contain no-repeat;
  aspect-ratio: 213 / 171;
}
.x-mark--bg {
  position: absolute; right: 0; top: 0;
  width: clamp(160px, 26vw, 340px);
  color: var(--silver);
  z-index: -1;
}
.section--bonos { isolation: isolate; }

/* Merch */
.merch { display: grid; grid-template-columns: 1fr; }
.merch img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); aspect-ratio: 16 / 10; }
.merch-body { display: flex; flex-direction: column; justify-content: flex-end; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1.2vw, 16px); }
.gallery a { display: block; overflow: hidden; background: var(--ink); }
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.gallery a:hover img { transform: scale(1.04); opacity: .85; }

/* Hours */
.status { margin-top: 20px; font-size: 1.15rem; color: var(--pearl); max-width: 26ch; }
.status strong { color: var(--white); display: block; font-size: 1.35rem; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 14px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.14); }
.hours th { font-weight: 600; padding-left: 12px; }
.hours td { color: var(--pearl); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr.is-today { background: var(--white); color: var(--ink); }
.hours tr.is-today td { color: var(--ink); }
.hours tr.is-today th::after { content: " · hoy"; font-weight: 500; }
.hours-note { margin-top: 20px; font-size: .9rem; color: var(--pearl); }

/* Location */
.location { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); }
.location address { font-style: normal; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.35; font-weight: 500; }
.location-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.map {
  width: 100%; min-height: 360px; border: 0;
  filter: grayscale(1) contrast(1.05);
  background: var(--silver);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink); color: var(--white);
  padding: clamp(48px, 7vw, 88px) var(--gutter) 32px;
}
.footer-logo { width: min(520px, 100%); }
.footer-cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px;
  margin-top: clamp(36px, 5vw, 64px);
}
.footer-label { font-size: .85rem; color: var(--fog); margin-bottom: 6px; }
.footer-cols a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; text-underline-offset: 4px; }
.footer-cols a:hover { text-decoration-thickness: 2px; }
.footer-copy { margin-top: 48px; font-size: .85rem; color: var(--fog); }

/* ---------- Mobile bottom nav ---------- */

.bottom-nav {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(27, 25, 26, .96);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; border-radius: 12px;
  color: var(--pearl); text-decoration: none;
  font-size: .72rem; font-weight: 600;
}
.bottom-nav .bottom-nav-cta { background: var(--white); color: var(--ink); }

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 767px) {
  :root { --header-h: 72px; --bottom-nav-h: 72px; }
  .pill-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 calc(var(--gutter) + 8px); }
  .round-btn { width: 46px; height: 46px; }

  .hero-frame { min-height: auto; }
  .hero-stage { height: auto; flex-direction: column; align-items: center; }
  .hero-photo { width: min(100%, 380px); height: auto; }

  /* Tiles become a tilted 2×2 grid under the title */
  .tiles {
    position: static; order: 3;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    width: 100%; max-width: 380px; margin-top: 28px;
  }
  .tile { position: static; width: 100%; }
  .tile--1 { --r: -4deg; } .tile--2 { --r: 3deg; } .tile--3 { --r: 4deg; } .tile--4 { --r: -3deg; }
  .hero-frame { display: grid; justify-items: center; }
  .hero-stage { display: contents; }
  .hero-photo { order: 1; }
  .hero-title { order: 2; font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .hero-actions { order: 4; width: 100%; max-width: 380px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-rating { order: 5; }
}

@media (min-width: 768px) {
  .bottom-nav { display: none; }
  .split { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
  .merch { grid-template-columns: 1.5fr 1fr; }
  .merch img { aspect-ratio: auto; min-height: 420px; }
  .location { grid-template-columns: 1fr 1.6fr; }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .tile { width: clamp(118px, 15vw, 150px); }
  .tile-name { font-size: .8rem; }
  .tile--1 { left: 0; } .tile--4 { right: 0; }
  .tile--2 { left: 8%; } .tile--3 { right: 8%; }
}

@media (min-width: 1024px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); }
  .index { display: block; }
  .index-list {
    position: sticky; top: calc(var(--header-h) + 40px);
    padding-top: clamp(56px, 9vw, 120px);
  }
  .index-list a {
    position: relative;
    display: flex; align-items: center; min-height: 40px;
    padding-left: 28px;
    text-decoration: none; text-transform: uppercase;
    font-weight: 500; font-size: .85rem; letter-spacing: .08em;
    color: var(--slate);
    transition: color .2s var(--ease-out);
  }
  .index-list a:hover { color: var(--ink); }
  /* Active item gets the brand X, the way the reference marks its current chapter */
  .index-list a::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 18px; aspect-ratio: 213 / 171;
    background: var(--ink);
    -webkit-mask: var(--x-mask) center / contain no-repeat;
            mask: var(--x-mask) center / contain no-repeat;
    transform: translate(-6px, -50%) scale(.6);
    opacity: 0;
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  }
  .index-list a[aria-current="true"] { color: var(--ink); font-weight: 700; }
  .index-list a[aria-current="true"]::before { opacity: 1; transform: translate(0, -50%) scale(1); }
}