/* ========================================================================
   Ashford & Co. Barbershop — Soho Modern
   Editorial · B&W · Cobre acento · Anti-IA
   ======================================================================== */

/* -------- Tokens -------- */
:root {
    /* Colors */
    --ink:           #0F0F0F;
    --ink-soft:      #1A1A1A;
    --ink-mid:       #2A2A2A;
    --paper:         #F4F1EC;
    --paper-warm:    #EAE4DA;
    --paper-deep:    #DED7C8;
    --copper:        #B87333;
    --copper-dark:   #8C5824;
    --copper-soft:   rgba(184,115,51,.14);
    --muted:         #6B6B6B;
    --muted-light:   #9A9A9A;
    --line:          #D9D3C7;
    --line-dark:     #2E2E2E;
    --white:         #FFFFFF;

    /* Type — Barbería editorial · Didone signpainter */
    --f-display: 'Playfair Display', 'Bodoni Moda', 'Times New Roman', serif;
    --f-display-alt: 'Abril Fatface', 'Playfair Display', serif;
    --f-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --f-mono:    'Special Elite', 'Courier Prime', ui-monospace, monospace;

    /* Premium easing curves */
    --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Sizes */
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.75rem;
    --fs-5xl: 3.75rem;
    --fs-6xl: 5rem;
    --fs-display: clamp(2.5rem, 6vw + 1rem, 6rem);

    /* Spacing */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
    --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;
    --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px; --sp-10: 128px;

    /* Radius */
    --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 16px; --r-full: 999px;

    /* Shadows */
    --sh-sm: 0 1px 2px rgba(15,15,15,.06);
    --sh-md: 0 6px 18px rgba(15,15,15,.08);
    --sh-lg: 0 18px 40px rgba(15,15,15,.12);

    /* Layout */
    --container: 1240px;
    --container-tight: 960px;

    /* Transitions — fluid agency-grade */
    --t-fast: 200ms cubic-bezier(0.32, 0.72, 0, 1);
    --t: 400ms cubic-bezier(0.32, 0.72, 0, 1);
    --t-slow: 800ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* -------- Reset suave -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: var(--fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 500; line-height: 1.1; }
p { margin: 0 0 1em; }
::selection { background: var(--ink); color: var(--paper); }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--paper);
    padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 16px; top: 16px; }

/* -------- Container -------- */
.container {
    width: 100%;
    max-width: var(--container);
    padding: 0 24px;
    margin: 0 auto;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1280px){ .container { padding: 0 56px; } }

/* -------- Typography helpers -------- */
.display {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--fs-display);
    line-height: 1.02;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.display em.italic,
.serif.italic { font-style: italic; }
.serif { font-family: var(--f-display); }
.smallcaps {
    font-variant: small-caps;
    letter-spacing: .06em;
}
.lede {
    font-size: clamp(1.1rem, 1.4vw + .5rem, 1.4rem);
    line-height: 1.5;
    color: var(--ink);
    max-width: 60ch;
}
.label-mono {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-block;
    margin-bottom: var(--sp-5);
}
.label-mono--light { color: var(--paper); }
.display--light { color: var(--paper); }
.mono-small {
    font-family: var(--f-mono);
    font-size: var(--fs-sm);
    color: var(--muted);
    letter-spacing: .04em;
}

/* -------- Buttons -------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    font-family: var(--f-body);
    font-weight: 500;
    font-size: var(--fs-sm);
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 0;
    transition: transform var(--t-fast), background var(--t), color var(--t), border var(--t);
    border: 1px solid transparent;
    cursor: pointer;
}
.btn--sm { padding: 10px 16px; font-size: .78rem; }
.btn--lg { padding: 18px 30px; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn--primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.btn--primary:hover { background: var(--copper); border-color: var(--copper); color: var(--paper); transform: translateY(-1px); }

/* Botón primario en contextos oscuros: cobre sólido (brand) */
.hero .btn.btn--primary,
.section--dark .btn.btn--primary,
.cta-final .btn.btn--primary,
.cta-strip .btn.btn--primary,
.site-footer .btn.btn--primary {
    background: var(--copper);
    color: var(--paper);
    border-color: var(--copper);
    box-shadow: 0 10px 28px rgba(184,115,51,.28), inset 0 0 0 1px rgba(255,255,255,.08);
    letter-spacing: .16em;
    padding: 18px 30px;
}
.hero .btn.btn--primary:hover,
.section--dark .btn.btn--primary:hover,
.cta-final .btn.btn--primary:hover,
.cta-strip .btn.btn--primary:hover,
.site-footer .btn.btn--primary:hover {
    background: var(--copper-dark);
    border-color: var(--copper-dark);
    color: var(--paper);
    box-shadow: 0 14px 36px rgba(184,115,51,.4), inset 0 0 0 1px rgba(255,255,255,.12);
    transform: translateY(-2px);
}

/* Refinamiento global del botón */
.btn {
    font-size: .82rem;
    padding: 16px 26px;
    line-height: 1;
    position: relative;
    overflow: hidden;
}
.btn--lg { padding: 20px 36px; font-size: .9rem; }
.btn--sm { padding: 11px 18px; font-size: .72rem; }

/* Flecha animada en el primario */
.hero .btn.btn--primary::after,
.cta-final .btn.btn--primary::after {
    content: '→';
    display: inline-block;
    margin-left: 6px;
    font-family: var(--f-body);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.hero .btn.btn--primary:hover::after,
.cta-final .btn.btn--primary:hover::after {
    transform: translateX(6px);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light {
    color: var(--paper);
    border-color: var(--paper);
}
.btn--light:hover { background: var(--paper); color: var(--ink); }

.btn--link {
    padding: 14px 0;
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--ink);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.05rem;
    background: transparent;
}
.btn--link:hover { color: var(--copper); border-bottom-color: var(--copper); }

.link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-mono);
    font-size: var(--fs-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    transition: color var(--t), gap var(--t);
}
.link-arrow::after { content: '→'; transition: transform var(--t); }
.link-arrow:hover { color: var(--copper); gap: 14px; }

/* -------- Header / Nav -------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transition: background var(--t), border var(--t);
}
.site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
}
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1;
}
.brand__mark {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -.01em;
    color: var(--ink);
}
.brand__mark--lg { font-size: 3rem; }
.brand__word {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--copper);
}
.brand__since {
    font-family: var(--f-mono);
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-left: 6px;
}

.site-nav { display: none; }
.site-nav__list { display: flex; gap: 28px; align-items: center; }
.site-nav__list a {
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    color: var(--ink);
    position: relative;
    padding: 6px 0;
    transition: color var(--t);
}
.site-nav__list a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--copper);
    transition: right var(--t);
}
.site-nav__list a:hover { color: var(--copper); }
.site-nav__list a:hover::after { right: 0; }

@media (min-width: 1024px) {
    .site-nav { display: block; }
}

.site-header__cta { display: flex; align-items: center; gap: 12px; }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: inline-flex; } }

.nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border: 1px solid var(--ink);
}
.nav-toggle span {
    width: 18px; height: 1px; background: var(--ink); display: block;
    transition: transform var(--t), opacity var(--t);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.mobile-menu {
    position: fixed; inset: 84px 0 0 0;
    background: var(--paper);
    z-index: 49;
    overflow: auto;
    border-top: 1px solid var(--line);
}
.mobile-menu__inner { padding: 32px 24px 96px; max-width: 600px; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 4px; margin-bottom: 32px; }
.mobile-menu li a {
    display: block;
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 400;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.mobile-menu li a:hover { color: var(--copper); }

/* -------- HERO -------- */
.hero {
    position: relative;
    min-height: 100svh;
    color: var(--paper);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-bottom: 80px;
    padding-top: 60px;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-color: var(--ink-soft);
    filter: grayscale(.2) contrast(1.05);
}
.hero__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(15,15,15,.55) 0%, rgba(15,15,15,.35) 35%, rgba(15,15,15,.85) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: var(--sp-6);
}
.dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--copper);
    box-shadow: 0 0 0 4px rgba(184,115,51,.25);
}
.hero__title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(3.4rem, 11vw + .5rem, 9.5rem);
    line-height: .92;
    letter-spacing: -.025em;
    color: var(--paper);
    margin-bottom: var(--sp-6);
}
.hero__title .italic { color: var(--copper); }
.hero__lede {
    max-width: 56ch;
    font-size: clamp(1.05rem, 1vw + .65rem, 1.3rem);
    color: rgba(244,241,236,.85);
    margin-bottom: var(--sp-7);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-bottom: var(--sp-8); }
.hero__cta .btn--link { color: var(--paper); border: 0; border-bottom: 1px solid var(--paper); }
.hero__cta .btn--link:hover { color: var(--copper); border-bottom-color: var(--copper); }

.hero__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    border-top: 1px solid rgba(244,241,236,.18);
    padding-top: 28px;
    max-width: 720px;
}
.hero__meta li { display: flex; flex-direction: column; gap: 6px; }
.hero__meta strong {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    color: var(--paper);
    line-height: 1;
}
.hero__meta span {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(244,241,236,.7);
}

.hero__ticker {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    background: var(--copper);
    color: var(--ink);
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,.2);
}
.ticker {
    display: flex; gap: 28px;
    padding: 14px 0;
    white-space: nowrap;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    animation: ticker 38s linear infinite;
    width: max-content;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------- Sections -------- */
.section {
    padding: clamp(72px, 10vw, 140px) 0;
}
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper-warm { background: var(--paper-warm); color: var(--ink); }
.section--dark { background: var(--ink); color: var(--paper); }
.section__head { margin-bottom: var(--sp-8); }
.section__head--row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.section__head .display { margin-bottom: var(--sp-4); }
.section__sub { color: var(--muted); max-width: 60ch; }
.section__foot { margin-top: var(--sp-7); text-align: center; }

/* -------- Split -------- */
.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.split__col--label { padding-top: 12px; }
@media (min-width: 900px) {
    .split { grid-template-columns: 320px 1fr; gap: 80px; }
    .split__col--label .label-mono { margin-bottom: var(--sp-4); }
}

/* -------- Menu list (servicios home) -------- */
.menu-list { border-top: 1px solid var(--line-dark); }
.menu-list__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line-dark);
}
.menu-list__name h3 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2vw + .5rem, 2rem);
    color: var(--paper);
    margin-bottom: 6px;
    letter-spacing: -.015em;
}
.menu-list__name h3 em {
    font-family: var(--f-mono);
    font-style: normal;
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--copper);
    margin-left: 12px;
    vertical-align: middle;
}
.menu-list__name span {
    color: var(--muted-light);
    font-size: var(--fs-sm);
}
.menu-list__dots {
    display: none;
}
.menu-list__price {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--paper);
    white-space: nowrap;
}
.menu-list__item.is-featured { background: linear-gradient(90deg, rgba(184,115,51,.06) 0%, transparent 100%); padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) {
    .menu-list__item { grid-template-columns: 1.5fr 1fr auto; }
    .menu-list__dots {
        display: block;
        border-bottom: 1px dotted rgba(244,241,236,.3);
        align-self: end;
        height: 8px;
    }
}

/* -------- Barbers grid -------- */
.barbers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.barber-card {
    background: var(--paper-warm);
    border: 1px solid var(--line);
    transition: transform var(--t), box-shadow var(--t);
}
.barber-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.barber-card__img {
    aspect-ratio: 4/5;
    background-size: cover; background-position: center;
    background-color: var(--paper-deep);
    filter: grayscale(.6) contrast(1.05);
    transition: filter var(--t);
}
.barber-card:hover .barber-card__img { filter: grayscale(0) contrast(1.1); }
.barber-card__body { padding: 24px 22px 28px; }
.barber-card__body h3 {
    font-family: var(--f-display);
    font-size: 1.7rem;
    margin: 10px 0 10px;
    letter-spacing: -.01em;
}
.barber-card__body h3 em { font-style: italic; color: var(--copper); }
.barber-card__body p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
@media (min-width: 640px) { .barbers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .barbers-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* -------- Features grid -------- */
.features-grid {
    display: grid; gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    grid-template-columns: 1fr;
}
.feature {
    background: var(--paper-warm);
    padding: 36px 28px;
    transition: background var(--t);
}
.feature:hover { background: var(--paper); }
.feature__num {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    color: var(--copper);
    display: block;
    margin-bottom: var(--sp-4);
}
.feature h3 {
    font-family: var(--f-display);
    font-size: 1.4rem;
    margin-bottom: var(--sp-3);
    letter-spacing: -.01em;
}
.feature p { color: var(--muted); font-size: var(--fs-sm); margin: 0; line-height: 1.6; }
@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .features-grid { grid-template-columns: repeat(3, 1fr); } }

/* -------- Gallery mosaic (home) -------- */
.gallery-mosaic {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.g-tile {
    aspect-ratio: 4/5;
    background-size: cover; background-position: center;
    background-color: var(--paper-deep);
    filter: grayscale(.3) contrast(1.05);
    transition: filter var(--t), transform var(--t);
}
.g-tile:hover { filter: grayscale(0); transform: scale(1.01); }
@media (min-width: 700px) {
    .gallery-mosaic {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
    }
    .g-tile { aspect-ratio: auto; height: 100%; }
    .g-tile--tall { grid-row: span 2; }
    .g-tile--wide { grid-column: span 2; }
}
@media (min-width: 1024px) { .gallery-mosaic { grid-auto-rows: 280px; } }

/* -------- Quotes -------- */
.quotes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.quote {
    border-left: 1px solid var(--copper);
    padding: 8px 0 8px 24px;
    margin: 0;
}
.quote blockquote {
    font-family: var(--f-display);
    font-size: 1.45rem;
    line-height: 1.35;
    margin: 0 0 24px;
    color: var(--paper);
    font-weight: 300;
    letter-spacing: -.005em;
}
.quote figcaption strong {
    display: block;
    font-family: var(--f-body);
    font-size: var(--fs-sm);
    color: var(--paper);
}
.quote figcaption span {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(244,241,236,.55);
}
@media (min-width: 900px) { .quotes-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* -------- FAQ -------- */
.faq-list details {
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
}
.faq-list details[open] summary { color: var(--copper); }
.faq-list summary {
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    transition: color var(--t);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: '+';
    font-family: var(--f-mono);
    font-size: 1.4rem;
    color: var(--copper);
    transition: transform var(--t);
}
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p {
    margin: 14px 0 0;
    color: var(--muted);
    max-width: 60ch;
}

/* -------- CTA final -------- */
.cta-final {
    position: relative;
    color: var(--paper);
    padding: clamp(80px, 14vw, 160px) 0;
    overflow: hidden;
    isolation: isolate;
}
.cta-final__bg {
    position: absolute; inset: 0; z-index: -1;
    background-size: cover; background-position: center;
    background-color: var(--ink);
    filter: grayscale(.5);
}
.cta-final__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,15,15,.7), rgba(15,15,15,.9));
}
.cta-final__inner { position: relative; text-align: center; }
.cta-final .display { font-size: clamp(2.5rem, 7vw + .5rem, 6rem); margin-bottom: var(--sp-5); }
.cta-final .display em.italic { color: var(--copper); }
.cta-final__sub { max-width: 50ch; margin: 0 auto var(--sp-7); color: rgba(244,241,236,.78); font-size: 1.1rem; }
.cta-final__phone { margin-top: var(--sp-5); font-family: var(--f-mono); font-size: var(--fs-sm); letter-spacing: .08em; color: rgba(244,241,236,.7); }
.cta-final__phone a { color: var(--paper); border-bottom: 1px solid var(--copper); padding-bottom: 2px; }

/* -------- CTA strip (interior pages) -------- */
.cta-strip {
    background: var(--ink);
    color: var(--paper);
    padding: 80px 0;
    border-top: 1px solid var(--line-dark);
}
.cta-strip__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-strip .display { font-size: clamp(1.75rem, 3vw + 1rem, 3rem); margin: 0; }

/* -------- Footer -------- */
.site-footer {
    background: var(--ink);
    color: var(--paper);
    padding: 80px 0 32px;
}
.site-footer__grid {
    display: grid; grid-template-columns: 1fr; gap: 40px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--line-dark);
}
.site-footer__brand .brand__mark--lg { color: var(--paper); }
.site-footer__tagline {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--copper);
    margin: 10px 0 14px;
}
.site-footer__lede { color: rgba(244,241,236,.7); font-size: var(--fs-sm); max-width: 36ch; }
.site-footer__col h4 {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 16px;
    font-weight: 500;
}
.site-footer__col p, .site-footer__col address { color: rgba(244,241,236,.78); font-size: var(--fs-sm); font-style: normal; line-height: 1.7; }
.site-footer__col a { transition: color var(--t); }
.site-footer__col a:hover { color: var(--copper); }
.hours-list li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(244,241,236,.12);
    font-size: var(--fs-sm);
}
.hours-list span { color: var(--paper); }
.hours-list em { color: rgba(244,241,236,.6); font-style: normal; font-family: var(--f-mono); font-size: .8rem; }
.social-list { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); }
.site-footer__bottom {
    display: flex; justify-content: space-between; gap: 16px;
    padding-top: 24px;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    color: rgba(244,241,236,.5);
    flex-wrap: wrap;
}
.site-footer__credit a { color: var(--copper); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 56px; } }

/* -------- WhatsApp float -------- */
.wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px; height: 58px;
    background: #25D366;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    box-shadow: 0 10px 32px rgba(37,211,102,.4);
    z-index: 60;
    transition: transform var(--t), box-shadow var(--t);
}
.wa-float:hover { transform: scale(1.06); box-shadow: 0 14px 40px rgba(37,211,102,.55); }

/* -------- Page hero (inner pages) -------- */
.page-hero {
    padding: clamp(80px, 12vw, 140px) 0 clamp(48px, 6vw, 80px);
    background: var(--paper-warm);
    border-bottom: 1px solid var(--line);
}
.page-hero .display { margin-bottom: var(--sp-5); max-width: 18ch; }
.page-hero .lede { max-width: 68ch; }

/* -------- Service rows -------- */
.service-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 0;
    border-bottom: 1px solid var(--line);
}
.service-row__head {
    display: flex; flex-direction: column; gap: 12px;
}
.service-row__head .display {
    font-size: clamp(2rem, 4vw, 3.25rem);
}
.service-row__price {
    font-family: var(--f-mono);
    font-size: 1.1rem;
    letter-spacing: .04em;
    color: var(--copper);
}
.service-row--featured {
    background: var(--paper-warm);
    border: 1px solid var(--copper);
    padding: 48px;
    margin: 32px -16px;
}
.service-row--featured .service-row__head .label-mono em { color: var(--copper); }
.service-row__body p { font-size: 1.05rem; color: var(--ink); margin-bottom: 20px; max-width: 60ch; }
.checks { display: grid; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }
.checks li { padding-left: 22px; position: relative; }
.checks li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--copper); font-weight: 600;
}
@media (min-width: 900px) {
    .service-row { grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }
}

/* -------- Bios (page-barberos) -------- */
.bio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 60px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
}
.bio__media {
    aspect-ratio: 4/5;
    background-size: cover; background-position: center;
    background-color: var(--paper-deep);
    filter: grayscale(.4);
}
.bio__text .display { font-size: clamp(2.25rem, 4vw, 3.5rem); margin-bottom: var(--sp-5); }
.bio__text p { color: var(--ink); font-size: 1.05rem; max-width: 56ch; }
.bio__tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 24px;
}
.bio__tags li {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 6px 12px;
}
@media (min-width: 900px) {
    .bio { grid-template-columns: 440px 1fr; gap: 72px; }
    .bio--reverse .bio__media { order: 2; }
}

/* -------- Principles list -------- */
.principles {
    display: flex; flex-direction: column; gap: 18px;
    margin-top: 16px;
}
.principles li {
    font-family: var(--f-display);
    font-size: 1.2rem;
    line-height: 1.4;
    padding-left: 0;
}
.principles strong {
    font-family: var(--f-mono);
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--copper);
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

/* -------- Timeline -------- */
.timeline {
    margin-top: 40px;
    display: grid; gap: 24px;
    border-left: 1px solid var(--ink);
    padding-left: 28px;
}
.timeline li { display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: baseline; }
.timeline span {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--copper);
}
.timeline p { margin: 0; color: var(--ink); font-size: 1.05rem; max-width: 56ch; }

/* -------- Gallery grid (page) -------- */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.gallery-grid__item { margin: 0; }
.gallery-grid__img {
    aspect-ratio: 4/5;
    background-size: cover; background-position: center;
    background-color: var(--paper-deep);
    filter: grayscale(.3);
    transition: filter var(--t), transform var(--t);
}
.gallery-grid__item:hover .gallery-grid__img { filter: grayscale(0); }
.gallery-grid figcaption {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 12px;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* -------- Contact -------- */
.contact-grid {
    display: grid; grid-template-columns: 1fr; gap: 32px;
}
.contact-card {
    background: var(--paper-warm);
    border: 1px solid var(--line);
    padding: 48px 36px;
}
.contact-card--alt { background: var(--paper); }
.contact-card .display { font-size: clamp(2rem, 3vw + .5rem, 3rem); margin: 8px 0 16px; }
.contact-card p { color: var(--muted); margin-bottom: 24px; max-width: 36ch; }
.contact-list { display: grid; gap: 18px; }
.contact-list li { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.contact-list strong {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--copper);
    font-weight: 500;
}
.hours-list--mini { background: transparent; padding: 0; }
.hours-list--mini li { border-bottom: 1px dashed var(--line); padding: 6px 0; display: flex; justify-content: space-between; }
.hours-list--mini span { color: var(--ink); font-size: var(--fs-sm); }
.hours-list--mini em { color: var(--muted); font-style: normal; font-family: var(--f-mono); font-size: .8rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr 1fr; gap: 40px; } }

.map-block { padding: 0; background: var(--ink); }
.map-block__embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16/7;
    overflow: hidden;
}
.map-block__embed iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0;
    filter: grayscale(.4) contrast(1.05);
}

/* -------- Posts grid (blog fallback) -------- */
.posts-grid {
    display: grid; gap: 32px;
    grid-template-columns: 1fr;
}
.post-card { border: 1px solid var(--line); background: var(--paper-warm); }
.post-card__img { display: block; aspect-ratio: 16/10; background-size: cover; background-position: center; }
.post-card__body { padding: 24px; }
.post-card__body h2 { font-family: var(--f-display); font-size: 1.5rem; margin: 8px 0 12px; }
.post-card__body p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
@media (min-width: 700px) { .posts-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .posts-grid { grid-template-columns: repeat(3,1fr); } }

.content-area { max-width: var(--container-tight); }
.content-area p { font-size: 1.05rem; color: var(--ink); }

/* -------- Reveal animations -------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* -------- Sticky header style on scroll -------- */
.site-header.is-scrolled {
    background: rgba(244,241,236,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ========================================================================
   REDESIGN — Letterpress · Vintage English · Anti-IA
   ======================================================================== */

/* -------- Paper grain overlay (textura real, anti-IA) -------- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: .55;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* -------- Ornamento SVG decorativo -------- */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px auto;
    color: currentColor;
    opacity: .6;
}
.ornament svg { width: 200px; height: 24px; }
.ornament--light { color: var(--paper); }

/* -------- Sello vintage (corner badge) -------- */
.hero__seal {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 120px;
    height: 120px;
    z-index: 2;
    color: var(--paper);
    opacity: .85;
    transform: rotate(-6deg);
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.hero__seal:hover { transform: rotate(0deg) scale(1.05); }
.hero__seal svg { width: 100%; height: 100%; }
@media (max-width: 700px) {
    .hero__seal { width: 84px; height: 84px; top: 16px; right: 16px; }
}

/* -------- Override label-mono (typewriter feel) -------- */
.label-mono {
    font-family: var(--f-mono);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 400;
}

/* -------- Override display sizing para IM Fell (más respiro) -------- */
.display {
    font-variant-numeric: oldstyle-nums;
}
.hero__title {
    font-family: var(--f-display);
    font-weight: 400;
    letter-spacing: -.01em;
}
.hero__title .italic { font-style: italic; }

/* -------- Override eyebrow (más letterpress) -------- */
.hero__eyebrow {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .22em;
}
.hero__eyebrow span:last-child::before { content: '· '; }

/* -------- Drop cap editorial (Manifiesto) -------- */
.dropcap::first-letter {
    font-family: var(--f-display-alt);
    font-size: 5.5em;
    float: left;
    line-height: .82;
    margin: .08em .12em 0 -.04em;
    color: var(--copper);
    font-style: normal;
    font-weight: 400;
}

/* -------- Menu list — numeración romana + IM Fell -------- */
.menu-list__item {
    position: relative;
    counter-increment: services;
    padding-left: 56px;
}
.menu-list { counter-reset: services; }
.menu-list__item::before {
    content: counter(services, upper-roman) ".";
    position: absolute;
    left: 0;
    top: 28px;
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--copper);
    width: 44px;
    text-align: right;
}
.menu-list__name h3 {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -.015em;
}

/* -------- Hero ticker estilo letterpress -------- */
.ticker {
    font-family: var(--f-display);
    font-style: italic;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: none;
}
.hero__ticker { background: var(--copper); }
.ticker span:nth-child(odd):not(:nth-child(2n)) { font-style: italic; }

/* -------- Section heads con ornament inline -------- */
.section__head .label-mono {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.section__head .label-mono::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

/* -------- Hero title más editorial -------- */
.hero__title {
    font-family: var(--f-display);
    font-size: clamp(3.4rem, 12vw + .5rem, 10rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: .95;
}
.hero__title .italic {
    color: var(--copper);
    font-style: italic;
    font-weight: 400;
    display: inline-block;
}
.hero__title .serif:not(.italic) {
    font-weight: 900;
}

/* -------- Quote tipo pull-quote editorial -------- */
.quotes-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .quotes-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 48px;
        align-items: start;
    }
    .quote:first-child blockquote {
        font-size: clamp(1.6rem, 2.2vw + .6rem, 2.4rem);
        line-height: 1.25;
    }
    .quote:first-child {
        padding-right: 24px;
    }
}
.quote blockquote {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    color: var(--paper);
}

/* -------- Brand wordmark refinado -------- */
.brand__mark {
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    font-size: 1.5rem;
    letter-spacing: -.02em;
}
.brand__word {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--copper);
    letter-spacing: 0;
}
.brand__since {
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .2em;
}

/* -------- Mobile menu links — IM Fell -------- */
.mobile-menu li a {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 2.2rem;
}

/* -------- FAQ summary — IM Fell -------- */
.faq-list summary {
    font-family: var(--f-display);
    font-weight: 400;
}

/* -------- Service row & bio headlines -------- */
.service-row__head .display,
.bio__text .display { font-family: var(--f-display); }
.service-row__price {
    font-family: var(--f-mono);
    font-size: 1.05rem;
}

/* -------- Hero meta — números display -------- */
.hero__meta strong {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
}
.hero__meta span {
    font-family: var(--f-mono);
    font-size: .68rem;
}

/* -------- Site footer wordmark -------- */
.site-footer__brand .brand__mark--lg {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
}
.site-footer__tagline {
    font-family: var(--f-display);
    font-style: italic;
}

/* -------- Section foot copper underline -------- */
.section__foot {
    position: relative;
    margin-top: var(--sp-8);
}
.section__foot::before {
    content: '✦';
    display: block;
    color: var(--copper);
    margin-bottom: 28px;
    font-size: 1.2rem;
}

/* -------- Asymmetric manifesto -------- */
.split__col--main .display {
    font-size: clamp(2rem, 4vw + 1rem, 4rem);
    line-height: 1.02;
    margin-bottom: var(--sp-6);
}
.split__col--main .lede {
    font-size: 1.15rem;
    max-width: 56ch;
}

/* -------- Página interior heroes -------- */
.page-hero .display {
    font-family: var(--f-display);
    font-size: clamp(2.4rem, 5vw + 1rem, 5rem);
}

/* -------- Botones — letterpress feel -------- */
.btn {
    font-family: var(--f-mono);
    letter-spacing: .14em;
    font-weight: 400;
    border-radius: 0;
}

/* -------- Link arrow mono -------- */
.link-arrow {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .18em;
}

/* -------- Hours / Social — IM Fell italic -------- */
.site-footer__col h4 {
    font-family: var(--f-mono);
    font-size: .68rem;
}

/* -------- Vintage divider entre secciones (decorative) -------- */
.section + .section::before {
    content: '';
    display: block;
    width: 1px;
    height: 0;
}

/* -------- Improved hero veil (más vintage) -------- */
.hero__veil {
    background:
        radial-gradient(ellipse at 30% 40%, transparent 0%, rgba(15,15,15,.4) 60%, rgba(15,15,15,.85) 100%),
        linear-gradient(180deg, rgba(15,15,15,.4) 0%, rgba(15,15,15,.3) 40%, rgba(15,15,15,.9) 100%);
}

/* -------- Feature grid — Roman numerals as feature__num -------- */
.feature__num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--copper);
    letter-spacing: 0;
    text-transform: none;
}
.feature h3 {
    font-family: var(--f-display);
    font-weight: 400;
}

/* -------- Barber card titles — IM Fell -------- */
.barber-card__body h3 {
    font-family: var(--f-display);
    font-weight: 400;
}
.barber-card__body h3 em { color: var(--copper); }

/* -------- Bio tags — letterpress chips -------- */
.bio__tags li {
    font-family: var(--f-mono);
    font-size: .65rem;
    padding: 5px 11px;
}

/* -------- Site header height ajuste -------- */
.site-header__row { min-height: 88px; }

/* ========================================================================
   AGENCY-TIER OVERRIDES — Awwwards · $150k build feel
   ======================================================================== */

/* -------- Macro-whitespace (la página respira) -------- */
.section { padding: clamp(96px, 14vw, 200px) 0; }

/* -------- Eyebrow pill (rounded-full small caps badge) -------- */
.label-mono {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .22em;
    opacity: .85;
    margin-bottom: var(--sp-6);
    background: transparent;
}
.section__head .label-mono { padding-left: 14px; }
.section__head .label-mono::before { display: none; }
.label-mono--light { color: var(--paper); border-color: rgba(244,241,236,.4); }

/* -------- Double-Bezel cards (Doppelrand) -------- */
.barber-card {
    background: rgba(15,15,15,.03);
    border: 1px solid rgba(15,15,15,.08);
    border-radius: 24px;
    padding: 6px;
    transition: transform var(--t), background var(--t), border-color var(--t);
    box-shadow: 0 1px 2px rgba(15,15,15,.04);
}
.barber-card:hover {
    background: rgba(184,115,51,.06);
    border-color: rgba(184,115,51,.2);
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -20px rgba(15,15,15,.15);
}
.barber-card__img {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
    filter: grayscale(.5);
    transition: filter var(--t-slow);
}
.barber-card:hover .barber-card__img { filter: grayscale(0); }
.barber-card__body { padding: 22px 18px 24px; }

/* -------- Feature grid → asymmetric bento -------- */
.features-grid {
    display: grid;
    gap: 16px;
    background: transparent;
    border: 0;
    grid-template-columns: 1fr;
}
.feature {
    background: rgba(15,15,15,.03);
    border: 1px solid rgba(15,15,15,.08);
    border-radius: 24px;
    padding: 8px;
    transition: transform var(--t), background var(--t), border-color var(--t);
}
.feature:hover {
    transform: translateY(-4px);
    background: rgba(184,115,51,.05);
    border-color: rgba(184,115,51,.2);
}
.feature::after {
    content: '';
    display: block;
    background: var(--paper);
    border-radius: 18px;
    padding: 32px 28px 36px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 1px rgba(15,15,15,.02);
}
.feature { display: block; }
.feature__inner {
    background: var(--paper);
    border-radius: 18px;
    padding: 32px 28px 36px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.6);
}
.feature::after { display: none; }
.feature > * { position: relative; }
.feature {
    padding: 8px;
}
.feature .feature__num,
.feature h3,
.feature p {
    padding-left: 24px;
    padding-right: 24px;
}
.feature .feature__num { padding-top: 28px; }
.feature p { padding-bottom: 32px; }
.feature {
    background: rgba(15,15,15,.03);
}
.feature > .feature__num:first-child,
.feature > h3:nth-child(2),
.feature > p:nth-child(3) {
    background: var(--paper);
}
.feature > .feature__num:first-child {
    border-radius: 18px 18px 0 0;
    margin-top: 0;
    padding-top: 32px;
}
.feature > h3:nth-child(2) {
    margin: 0;
    padding-top: 12px;
}
.feature > p:nth-child(3) {
    border-radius: 0 0 18px 18px;
    padding-bottom: 36px;
    margin: 0;
}

@media (min-width: 640px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
    .feature:nth-child(1) { grid-column: span 3; }
    .feature:nth-child(2) { grid-column: span 3; }
    .feature:nth-child(3) { grid-column: span 2; }
    .feature:nth-child(4) { grid-column: span 2; }
    .feature:nth-child(5) { grid-column: span 2; }
    .feature:nth-child(6) { grid-column: span 6; }
    .feature:nth-child(6) > .feature__num:first-child { padding-top: 40px; }
    .feature:nth-child(6) h3 { font-size: 2rem; max-width: 60%; }
    .feature:nth-child(6) p { max-width: 60%; padding-bottom: 44px; }
}

/* -------- Button-in-Button (CTA con flecha en círculo) -------- */
.hero .btn.btn--primary,
.cta-final .btn.btn--primary {
    padding-right: 12px;
    gap: 12px;
}
.hero .btn.btn--primary::after,
.cta-final .btn.btn--primary::after {
    content: '↗';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
    margin: 0;
    font-size: 1rem;
    font-family: var(--f-body);
    line-height: 1;
    transition: transform var(--t) var(--ease-fluid), background var(--t);
}
.hero .btn.btn--primary:hover::after,
.cta-final .btn.btn--primary:hover::after {
    transform: translate(4px, -4px) scale(1.08);
    background: rgba(255,255,255,.28);
}
.hero .btn.btn--primary:active,
.cta-final .btn.btn--primary:active { transform: scale(.98); }

/* -------- Magnetic ghost button -------- */
.btn--ghost { transition: all var(--t) var(--ease-fluid); }
.btn--ghost:active { transform: scale(.98); }

/* -------- Fluid Island nav (header detached pill) -------- */
.site-header {
    background: transparent;
    border-bottom: 0;
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header__bar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
.site-header__row {
    background: rgba(244,241,236,.85);
    backdrop-filter: saturate(1.6) blur(20px);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
    border-radius: 999px;
    padding: 8px 8px 8px 24px;
    min-height: 64px;
    border: 1px solid rgba(15,15,15,.08);
    box-shadow: 0 8px 32px -8px rgba(15,15,15,.12), inset 0 1px 1px rgba(255,255,255,.6);
    transition: background var(--t), box-shadow var(--t);
}
.site-header.is-scrolled .site-header__row {
    background: rgba(244,241,236,.95);
    box-shadow: 0 16px 48px -12px rgba(15,15,15,.18), inset 0 1px 1px rgba(255,255,255,.7);
}
.site-header__cta .btn--primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    border-radius: 999px;
    padding: 12px 22px;
}
.site-header__cta .btn--ghost {
    border-radius: 999px;
}
.site-nav__list { gap: 22px; }
.site-nav__list a {
    font-size: .82rem;
    font-weight: 500;
}

/* -------- Buttons → rounded pills global -------- */
.btn {
    border-radius: 999px;
    font-family: var(--f-mono);
    font-weight: 400;
    letter-spacing: .14em;
}
.btn--link { border-radius: 0; }

/* -------- Scroll entry with blur (premium reveal) -------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(48px);
    filter: blur(8px);
    transition: opacity .9s var(--ease-fluid), transform .9s var(--ease-fluid), filter .9s var(--ease-fluid);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* -------- Page hero (interior) softer -------- */
.page-hero {
    background: var(--paper);
    padding: clamp(120px, 16vw, 180px) 0 clamp(64px, 8vw, 100px);
    border-bottom: 0;
    position: relative;
}
.page-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* -------- Footer rounded card feel -------- */
.site-footer { padding: 96px 0 32px; }

/* -------- Service rows con bezel -------- */
.service-row--featured {
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(184,115,51,.06), rgba(184,115,51,.02));
    border: 1px solid rgba(184,115,51,.3);
    padding: 56px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}
.service-row--featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(184,115,51,.08), transparent 50%);
    pointer-events: none;
}

/* -------- Gallery mosaic con bordes redondeados -------- */
.g-tile { border-radius: 20px; overflow: hidden; }
.gallery-grid__img { border-radius: 20px; }
.barber-card__img { border-radius: 18px; }

/* -------- Hero meta — espaciado más generoso -------- */
.hero__meta { gap: 32px; padding-top: 36px; }
.hero__meta strong { font-size: clamp(2rem, 3.5vw, 3rem); }

/* -------- Ticker fluido -------- */
.hero__ticker { padding: 0; }
.ticker { padding: 18px 0; gap: 32px; }

/* -------- Hero veil más cinematic -------- */
.hero__veil {
    background:
        radial-gradient(ellipse 80% 60% at 25% 45%, transparent 0%, rgba(15,15,15,.55) 70%, rgba(15,15,15,.92) 100%),
        linear-gradient(180deg, rgba(15,15,15,.5) 0%, rgba(15,15,15,.2) 30%, rgba(15,15,15,.92) 100%);
}

/* -------- Quote vintage frame -------- */
.quote {
    padding: 28px 28px 28px 36px;
    border-left: 0;
    border-radius: 20px;
    background: rgba(244,241,236,.04);
    border: 1px solid rgba(244,241,236,.08);
    position: relative;
}
.quote::before {
    content: '"';
    position: absolute;
    top: -8px;
    left: 20px;
    font-family: var(--f-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--copper);
    font-weight: 700;
}

/* -------- FAQ items con bezel -------- */
.faq-list details {
    border-bottom: 0;
    border: 1px solid rgba(15,15,15,.08);
    border-radius: 16px;
    padding: 18px 24px;
    margin-bottom: 8px;
    background: rgba(244,241,236,.5);
    transition: background var(--t), border-color var(--t);
}
.faq-list details[open] {
    background: var(--paper);
    border-color: rgba(184,115,51,.2);
}
.faq-list summary { padding: 8px 0; }

/* -------- Contact cards con bezel -------- */
.contact-card {
    border-radius: 28px;
    padding: 48px 40px 56px;
    position: relative;
    overflow: hidden;
}
.contact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 0%, rgba(184,115,51,.06), transparent 60%);
    pointer-events: none;
}

/* -------- Site header CTA — small primary fix -------- */
.site-header .btn--primary {
    box-shadow: 0 4px 12px rgba(15,15,15,.12);
}
.site-header .btn--primary:hover {
    background: var(--copper);
    border-color: var(--copper);
    box-shadow: 0 8px 20px rgba(184,115,51,.3);
    transform: translateY(-1px);
}

/* -------- Brand wordmark refinement (Plus Jakarta context) -------- */
.brand { gap: 8px; }
.brand__since { display: none; }
@media (min-width: 1024px) { .brand__since { display: inline; } }

/* -------- Floating Whatsapp más premium -------- */
.wa-float {
    width: 60px; height: 60px;
    background: #25D366;
    box-shadow: 0 10px 32px rgba(37,211,102,.35), inset 0 1px 1px rgba(255,255,255,.3);
}

/* -------- Mobile menu animation -------- */
.mobile-menu {
    opacity: 0;
    transition: opacity var(--t);
    pointer-events: none;
}
.mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
}
.mobile-menu li a { transition: color var(--t-fast); }

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; filter: none; }
}