/* ============================================================================
   Latins Imagem Pessoal — sistema visual.

   La idea: el poste de barbero no es un adorno, es la retícula del sitio. Gira
   en el hero, gira en la franja superior, numera las secciones y barre las
   filas de precios. Todo lo demás se cuelga de eso.

   Sin una linea de JavaScript. El movimiento sale de `animation-timeline`, que
   el navegador resuelve en el compositor: no bloquea el hilo principal y no
   cuesta una sola peticion. Donde no esta soportado, la pagina aparece sin mas
   —nunca oculta— porque los estados iniciales viven dentro de @supports.
   ========================================================================= */

:root {
    /* Base calida por capas: el negro plano aplasta las fotos y aburre. */
    --ink-950: #070606;
    --ink-900: #0b0a09;
    --ink-800: #121010;
    --ink-700: #1a1715;
    --ink-600: #23201c;
    --line:    #2f2a24;
    --line-soft: #1f1b17;

    /* Bronce medido en el logo (#906c48). Da 4.17:1 sobre el negro: vale para
       rellenos, bordes y display grande, NO para texto pequeno. El texto de
       acento usa --copper-soft (7.1:1). Los nombres --copper-* se conservan
       para no reescribir 800 lineas; el valor es la marca. */
    --copper:      #906c48;
    --copper-soft: #b8956a;
    --copper-bright: #c9a878;
    --copper-dim:  #5f452c;
    --copper-glow: rgba(144, 108, 72, 0.22);
    /* El brillo metalico del letrero de la fachada. */
    --metal: linear-gradient(135deg, #c9a878 0%, #906c48 45%, #6e5236 70%, #b8956a 100%);

    /* Crema medida en el logo. */
    --cream: #e4e4d8;
    --muted: #a49d8f;
    --faint: #6b665d;

    /* Rojo y azul de poste de barbero de verdad. La franja son 5 px: a ese
       tamano cualquier tono sucio se lee como gris, asi que van vivos. */
    --barber-red:  #cf3a2b;
    --barber-blue: #30619a;
    /* Para texto pequeno: --barber-red da 3.7:1 sobre el negro y no llega a
       AA. Este da 6.3:1. */
    --barber-red-soft: #e0705f;
    --whatsapp:    #25d366;

    --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --step-2: clamp(1.7rem, 1.4rem + 1.5vw, 2.4rem);
    --step-3: clamp(2.3rem, 1.7rem + 3vw, 3.8rem);
    --step-4: clamp(3rem, 2rem + 4.5vw, 5.5rem);

    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(4rem, 9vw, 7.5rem);
    --max: 74rem;
    --radius: 3px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

/* Transiciones entre paginas: una linea, y el navegador hace el resto. */
@view-transition { navigation: auto; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
    margin: 0;
    background: var(--ink-950);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: var(--copper-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cream); }

:focus-visible { outline: 2px solid var(--copper-soft); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 0.92;
    margin: 0;
    text-transform: uppercase;
}
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link { position: absolute; left: -9999px; z-index: 200; }
.skip-link:focus {
    left: var(--gutter); top: 1rem;
    background: var(--copper); color: var(--ink-900);
    padding: 0.6rem 1.1rem; font-weight: 600;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ====================================================== el poste de barbero */

/* La franja superior GIRA, como el poste de la puerta de una barberia: las
   bandas se desplazan en bucle continuo y a plena intensidad. Es una sola capa
   opaca, sin estados ni degradados de progreso.

   ⚠️ NO volver a colgar de aqui la barra de progreso del scroll. Estuvo, hecha
   con `transform: scaleX()` sobre el degradado, y `scaleX` COMPRIME lo pintado
   en vez de recortarlo: arriba de la pagina se veia el patron en miniatura y se
   iba estirando conforme bajabas. Recortar de verdad pide `clip-path` o un
   `width` animado, y ninguno de los dos se compone en la GPU. No compensa.

   ⚠️ Y es OPACA, sin `opacity`. Al ser `position: fixed` sobre el contenido,
   con opacidad la pagina se transparentaba a traves de ella al hacer scroll. */
.barber-stripe {
    /* Tres bandas de 12 px = 36 px de periodo, pero MEDIDO SOBRE EL EJE del
       degradado, que va a 115deg. En horizontal el periodo es
       36 / sin(115deg) = 39.7216 px. Desplazar exactamente eso es lo que cierra
       el bucle sin salto visible; cualquier otro numero da un tiron por vuelta. */
    --stripe-cycle: 39.7216px;

    position: fixed;
    inset: 0 0 auto 0;
    height: 5px;
    z-index: 120;
    overflow: hidden;
    background: var(--ink-950);
}
.barber-stripe::before {
    content: "";
    position: absolute;
    /* Sobresale dos ciclos por cada lado: al desplazarse nunca deja hueco. */
    inset: 0 calc(var(--stripe-cycle) * -2);
    background: repeating-linear-gradient(
        115deg,
        var(--barber-red) 0 12px,
        var(--cream) 12px 24px,
        var(--barber-blue) 24px 36px
    );
    /* `transform` se compone en la GPU: no repinta ni toca el hilo principal. */
    animation: spin-stripe 4s linear infinite;
}
@keyframes spin-stripe { to { transform: translateX(var(--stripe-cycle)); } }

.stripe-rule {
    height: 2px;
    border: 0;
    margin: 0;
    background: repeating-linear-gradient(
        115deg,
        var(--copper-dim) 0 10px,
        transparent 10px 20px
    );
}

/* ================================================================== botones */

.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.1rem;
    padding: 0.85rem 1.7rem;
    border: 1px solid var(--copper);
    border-radius: var(--radius);
    background: transparent;
    color: var(--copper-soft);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
/* El relleno entra desde abajo en vez de encenderse de golpe. */
.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--copper);
    transform: translateY(101%);
    transition: transform 0.45s var(--ease-out);
}
.button:hover { color: var(--ink-900); border-color: var(--copper-soft); }
.button:hover::before { transform: translateY(0); }
.button:active { transform: translateY(1px); }

.button--primary { background: var(--metal); border-color: var(--copper-soft); color: var(--ink-950); }
.button--primary::before { background: var(--copper-soft); }
.button--primary:hover { color: var(--ink-900); }

/* =================================================================== header */

.site-header {
    position: sticky;
    top: 5px;
    z-index: 100;
    background: color-mix(in srgb, var(--ink-950) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 4.5rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--cream); }
.brand img { height: 2.5rem; width: auto; }
@media (min-width: 62rem) { .brand img { height: 3.1rem; } }
.brand__name {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 3.4vw, 1.5rem);
    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
}
.brand__mark {
    width: 2.1rem; height: 2.1rem; flex: none;
    border-radius: 50%;
    border: 1px solid var(--copper-dim);
    display: grid; place-items: center;
    color: var(--copper);
    transition: transform 0.5s var(--ease-out), border-color 0.3s;
}
.brand:hover .brand__mark { transform: rotate(-15deg); border-color: var(--copper); }

.nav { display: none; }
.nav a {
    position: relative;
    color: var(--cream); text-decoration: none;
    font-size: 0.76rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.4rem 0;
}
/* Subrayado que crece desde el centro. */
.nav a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 1px;
    background: var(--copper);
    transform: translateX(-50%);
    transition: width 0.35s var(--ease-out);
}
.nav a:hover { color: var(--copper-soft); }
.nav a:hover::after { width: 100%; }

.header__cta { display: none; }

.menu { position: relative; }
.menu > summary {
    list-style: none; display: grid; place-items: center;
    width: 2.9rem; height: 2.9rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--cream); cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--copper); color: var(--copper); }
.menu__panel {
    position: absolute; right: 0; top: calc(100% + 0.6rem);
    min-width: 14rem; padding: 0.5rem;
    background: var(--ink-800);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
    animation: drop 0.28s var(--ease-out) both;
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.menu__panel a {
    display: block; padding: 0.75rem 0.9rem;
    color: var(--cream); text-decoration: none;
    font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
    border-radius: 2px;
    transition: background-color 0.2s, color 0.2s, padding-left 0.25s var(--ease-out);
}
.menu__panel a:hover { background: var(--ink-600); color: var(--copper-soft); padding-left: 1.3rem; }

@media (min-width: 62rem) {
    .nav { display: flex; gap: clamp(1.2rem, 2.5vw, 2.2rem); align-items: center; }
    .header__cta { display: inline-flex; }
    .menu { display: none; }
}

/* ===================================================================== hero */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.5rem, 13vw, 9rem);
    background:
        radial-gradient(ellipse 70% 60% at 15% 0%, var(--copper-glow), transparent 65%),
        var(--ink-950);
}
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(115deg, rgba(144,108,72,0.06) 0 2px, transparent 2px 24px);
    pointer-events: none;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.26; }
.hero__inner { position: relative; z-index: 2; max-width: 44rem; }

/* El monograma de la marca como marca de agua, no un patron generico. */
.hero__mark {
    position: absolute;
    z-index: 1;
    left: clamp(-6rem, -8vw, -2rem);
    bottom: -8%;
    width: clamp(18rem, 42vw, 34rem);
    opacity: 0.045;
    pointer-events: none;
    filter: grayscale(1);
}
@media (min-width: 62rem) { .hero__mark { left: 38%; bottom: -14%; opacity: 0.05; } }

.hero h1 { font-size: var(--step-4); margin-bottom: 1.1rem; }
/* Un destello recorre el titular una vez al cargar. Discreto, no un letrero. */
.hero h1 .shine {
    background: linear-gradient(100deg,
        var(--cream) 0 38%,
        var(--copper-bright) 46%,
        var(--copper-soft) 52%,
        var(--cream) 60% 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: shine 2.6s var(--ease-in-out) 0.4s both;
}
@keyframes shine { from { background-position: 140% 0; } to { background-position: 0 0; } }

.hero__tagline { font-size: var(--step-1); color: var(--muted); max-width: 33rem; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.8rem; }

.hero__facts {
    display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem;
    padding-top: 1.75rem; border-top: 1px solid var(--line-soft);
}
.hero__fact { display: flex; align-items: center; gap: 0.65rem; color: var(--muted); font-size: 0.9rem; }
.hero__fact svg { color: var(--copper); flex: none; }

/* El poste gira de verdad: las franjas se desplazan en bucle. */
.hero__pole { display: none; }
@media (min-width: 62rem) {
    .hero__pole {
        display: block;
        position: absolute;
        right: clamp(2rem, 7vw, 7rem);
        top: 12%; bottom: 12%;
        width: clamp(4.5rem, 6.5vw, 6rem);
        border-radius: 999px;
        overflow: hidden;
        box-shadow:
            inset -14px 0 30px rgba(0, 0, 0, 0.65),
            inset 14px 0 24px rgba(0, 0, 0, 0.4),
            0 40px 80px rgba(0, 0, 0, 0.5);
        pointer-events: none;
        z-index: 1;
    }
    .hero__pole::before {
        content: "";
        position: absolute;
        inset: -60% 0;
        /* Al 40 % el rojo y el azul se leian grises y el poste parecia sucio.
           Aqui la opacidad si es la herramienta correcta —el poste va sobre el
           degradado del hero, no sobre contenido que se desplaza— pero pedia
           mas cuerpo. Por encima de 0.6 compite con el titular. */
        opacity: 0.55;
        background: repeating-linear-gradient(
            162deg,
            var(--barber-red) 0 26px,
            var(--cream) 26px 52px,
            var(--barber-blue) 52px 78px
        );
        animation: spin-pole 7s linear infinite;
    }
}
@keyframes spin-pole { to { transform: translateY(-78px); } }

.scroll-cue {
    /* Solo en pantallas anchas: en movil cae encima de los datos de contacto. */
    display: none;
    position: absolute; left: 50%; bottom: 1.6rem;
    transform: translateX(-50%);
    width: 1px; height: 3rem;
    background: linear-gradient(var(--copper), transparent);
    z-index: 2;
}
.scroll-cue::after {
    content: "";
    position: absolute; top: 0; left: -2px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--copper);
    animation: cue 2.4s var(--ease-in-out) infinite;
}
@media (min-width: 62rem) { .scroll-cue { display: block; } }
@keyframes cue {
    0% { transform: translateY(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(2.8rem); opacity: 0; }
}

/* ================================================================= marquesina */

/* Cinta en movimiento continuo. Rompe el ritmo vertical y da vida sin JS. */
.ticker {
    position: relative;
    overflow: hidden;
    padding-block: 1.1rem;
    background: var(--ink-900);
    border-block: 1px solid var(--line-soft);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
    display: flex;
    width: max-content;
    animation: slide 38s linear infinite;
}
.ticker__track > span {
    display: inline-flex; align-items: center; gap: 2.5rem;
    padding-right: 2.5rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
}
.ticker__track b { color: var(--copper); font-weight: 400; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ================================================================= secciones */

.section {
    position: relative;
    padding-block: var(--section-y);
}
/* Nota: aqui estuvo `content-visibility: auto`. Se quito a proposito. En una
   pagina de ~15.000 px el ahorro de layout es marginal, pero la altura
   reservada por `contain-intrinsic-size` no coincide con la real, asi que la
   barra de scroll salta mientras el visitante baja. En un sitio cuyo trabajo es
   sentirse fluido en el movil, esa inestabilidad cuesta mas de lo que ahorra. */
.section--alt { background: var(--ink-900); }
.section--tint {
    background:
        radial-gradient(ellipse 60% 50% at 85% 0%, var(--copper-glow), transparent 60%),
        var(--ink-950);
}

/* Retícula editorial: el encabezado se queda fijo mientras el contenido pasa.
   Es lo que separa una página compuesta de una lista de bloques apilados. */
.section__grid { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) {
    .section__grid { grid-template-columns: 19rem 1fr; gap: clamp(3rem, 6vw, 6rem); }
    .section__head { position: sticky; top: 7.5rem; align-self: start; }
}

.section__head h2 { font-size: var(--step-3); margin-bottom: 0.8rem; }
.section__head p { color: var(--muted); margin: 0; font-size: 0.95rem; }

/* Numeral gigante de fondo: ancla editorial, no decoración vacía. */
.section__index {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px var(--copper-dim);
    margin-bottom: 0.4rem;
    opacity: 0.55;
}

.eyebrow {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--copper);
    margin: 0 0 0.7rem; display: flex; align-items: center; gap: 0.6rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--copper-dim), transparent); }

/* ================================================================= servicios */

.service-group + .service-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.service-group__title {
    font-size: 1.6rem; color: var(--copper);
    margin-bottom: 0.5rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: baseline; gap: 0.8rem;
}
.service-group__count { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--faint); }

.service {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0 1rem;
    padding: 1.15rem 0.9rem;
    margin-inline: -0.9rem;
    border-bottom: 1px solid var(--line-soft);
    isolation: isolate;
    transition: padding-left 0.4s var(--ease-out);
}
/* Barrido de cobre desde la izquierda al pasar por encima. */
.service::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(144,108,72,0.18), transparent 70%);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 0.5s var(--ease-out);
}
.service:hover::before { transform: scaleX(1); }
.service:hover { padding-left: 1.6rem; }
.service:last-child { border-bottom: 0; }

.service__name { font-weight: 600; font-size: 1.05rem; }
.service__price {
    font-family: var(--font-display); font-size: 1.55rem;
    color: var(--copper-soft); letter-spacing: 0.03em; white-space: nowrap;
    transition: color 0.3s, transform 0.4s var(--ease-out);
}
.service:hover .service__price { color: var(--cream); transform: scale(1.06); }
.service__price--quote { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.service__description { grid-column: 1 / -1; color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 0; }

/* ===================================================================== grids */

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .grid--2 { grid-template-columns: 1fr 1fr; } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ==================================================================== equipo */

.barber {
    position: relative;
    background: var(--ink-800);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.barber:hover { border-color: var(--copper-dim); transform: translateY(-6px); }
.barber__media { position: relative; overflow: hidden; }
.barber__photo { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out), filter 0.5s; filter: grayscale(0.55) contrast(1.05); }
.barber:hover .barber__photo { transform: scale(1.05); filter: grayscale(0) contrast(1); }
/* Velo de cobre que se retira al pasar por encima. */
.barber__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(11,10,9,0.85), transparent 55%), var(--copper-glow);
    opacity: 1; transition: opacity 0.5s var(--ease-out);
    pointer-events: none;
}
.barber:hover .barber__media::after { opacity: 0.45; }

.barber__monogram {
    aspect-ratio: 16 / 10;
    display: grid; place-items: center;
    background: repeating-linear-gradient(115deg, var(--ink-600) 0 14px, var(--ink-700) 14px 28px);
    font-family: var(--font-display); font-size: 3.2rem; color: var(--copper-dim);
    transition: color 0.4s;
}
.barber:hover .barber__monogram { color: var(--copper); }

.barber__body { padding: 1.1rem 1.25rem 1.4rem; }
.barber__name { font-size: 1.4rem; margin-bottom: 0.15rem; }
.barber__role { color: var(--copper); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }
.barber__bio { color: var(--muted); font-size: 0.88rem; margin: 0.7rem 0 0; }
.barber__social {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.9rem; font-size: 0.84rem; text-decoration: none;
    transition: gap 0.3s var(--ease-out);
}
.barber__social:hover { gap: 0.75rem; }

/* =================================================================== galería */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.55rem; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform 0.7s var(--ease-out), filter 0.5s; filter: grayscale(0.4); }
.gallery figure:hover img { transform: scale(1.07); filter: grayscale(0); }
.gallery figcaption {
    position: absolute; inset: auto 0 0 0;
    padding: 2rem 0.9rem 0.8rem;
    background: linear-gradient(transparent, rgba(7,6,6,0.94));
    font-size: 0.8rem;
    transform: translateY(100%); opacity: 0;
    transition: transform 0.45s var(--ease-out), opacity 0.4s;
}
.gallery figure:hover figcaption { transform: translateY(0); opacity: 1; }

/* ============================================================== testimonios */

.testimonial {
    position: relative;
    background: var(--ink-800);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 1.7rem 1.6rem 1.5rem;
    overflow: hidden;
    transition: border-color 0.4s, transform 0.5s var(--ease-out);
}
.testimonial::before {
    content: "\201C";
    position: absolute; top: -1.2rem; right: 0.6rem;
    font-family: var(--font-display); font-size: 7rem;
    color: var(--copper); opacity: 0.12; line-height: 1;
}
.testimonial::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--copper);
    transform: scaleY(0); transform-origin: 50% 0;
    transition: transform 0.5s var(--ease-out);
}
.testimonial:hover { border-color: var(--line); transform: translateY(-4px); }
.testimonial:hover::after { transform: scaleY(1); }
.testimonial__stars { color: var(--copper); letter-spacing: 0.1em; margin-bottom: 0.7rem; }
.star--empty { opacity: 0.25; }
.testimonial blockquote { margin: 0 0 1rem; font-size: 1rem; }
.testimonial__author { font-weight: 600; font-size: 0.9rem; margin: 0; }
.testimonial__source { color: var(--faint); font-size: 0.76rem; font-weight: 400; }

/* ================================================================= horarios */

.hours { border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.hours li {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--line-soft);
    transition: background-color 0.3s, padding-left 0.35s var(--ease-out);
}
.hours li:last-child { border-bottom: 0; }
.hours li:hover { background: var(--ink-700); padding-left: 1.6rem; }
/* El día de hoy, marcado. Sale del servidor, no de una suposición. */
.hours li.is-today {
    background: linear-gradient(90deg, var(--copper-glow), transparent);
    box-shadow: inset 3px 0 0 var(--copper);
}
.hours__day { color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
.hours li.is-today .hours__day { color: var(--cream); font-weight: 600; }
.hours__today {
    font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
    background: var(--copper); color: var(--ink-900);
    padding: 0.15rem 0.45rem; border-radius: 2px;
}
.hours__time { font-variant-numeric: tabular-nums; }
.hours__time--closed { color: var(--barber-red-soft); text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.12em; }

.map-frame {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    background:
        linear-gradient(rgba(18,16,16,0.94), rgba(18,16,16,0.94)),
        repeating-linear-gradient(115deg, var(--copper-dim) 0 1px, transparent 1px 16px);
    display: flex; flex-direction: column; justify-content: center;
}
/* La miniatura de Google Maps. El filtro la lleva a la paleta del sitio: el
   mapa claro de Google, tal cual, era un rectangulo blanco en una pagina negra.
   Al pasar el raton recupera el color para leerlo con comodidad. */
.map-frame__map {
    display: block; width: 100%; aspect-ratio: 16 / 10; border: 0;
    border-bottom: 1px solid var(--line-soft);
    filter: grayscale(1) invert(0.92) contrast(0.9) sepia(0.25);
    transition: filter 0.5s;
}
.map-frame:hover .map-frame__map { filter: none; }
.map-frame__body { padding: clamp(1.5rem, 4vw, 2.25rem); }
.map-frame address { font-style: normal; color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.3rem; }

/* ====================================================================== faq */

.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
    list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.3rem 0; cursor: pointer; font-weight: 600;
    transition: color 0.3s, padding-left 0.35s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--copper-soft); padding-left: 0.6rem; }
.faq summary::after {
    content: "+";
    font-family: var(--font-display); font-size: 1.7rem; color: var(--copper);
    line-height: 1; flex: none;
    transition: transform 0.4s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details > p { color: var(--muted); padding-bottom: 1.3rem; margin: 0; animation: unfold 0.4s var(--ease-out) both; }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } }

/* =============================================================== newsletter */

.newsletter {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(rgba(7,6,6,0.9), rgba(7,6,6,0.9)),
        repeating-linear-gradient(115deg, var(--copper-dim) 0 14px, var(--ink-950) 14px 28px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 5vw, 3.2rem);
}
.newsletter h2 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.newsletter > p { color: var(--muted); max-width: 34rem; }

.form { margin-top: 1.75rem; }
.field { margin-bottom: 1rem; }
.field label {
    display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem;
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"] {
    width: 100%; min-height: 3.1rem; padding: 0.75rem 0.95rem;
    background: rgba(7, 6, 6, 0.6);
    border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--cream); font-family: inherit; font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.field input::placeholder { color: var(--faint); }
.field input:focus {
    border-color: var(--copper); outline: none;
    background: rgba(7, 6, 6, 0.85);
    box-shadow: 0 0 0 3px rgba(144, 108, 72, 0.22);
}
.field--row { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .field--row { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; align-items: flex-start; gap: 0.7rem; margin: 1.3rem 0; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; accent-color: var(--copper); }
.consent label { font-size: 0.88rem; color: var(--muted); }

.errorlist { color: #ff8f7a; font-size: 0.84rem; list-style: none; margin: 0.4rem 0 0; padding: 0; }
.honeypot { position: absolute; left: -9999px; }

.messages-wrap { padding-top: 2rem; }
.message {
    padding: 0.95rem 1.15rem; border-radius: var(--radius);
    border-left: 3px solid var(--copper);
    background: var(--ink-800); margin: 0 0 0.6rem;
    animation: drop 0.4s var(--ease-out) both;
}
.message--error { border-left-color: var(--barber-red); }

/* =================================================================== footer */

.site-footer { background: var(--ink-900); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; border-top: 1px solid var(--line-soft); }
.site-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h3 { font-size: 1.15rem; color: var(--copper); margin-bottom: 0.9rem; }
.site-footer address, .site-footer p, .site-footer li { color: var(--muted); font-style: normal; font-size: 0.9rem; }
.site-footer li { padding: 0.15rem 0; }
.site-footer a { text-decoration: none; }

.social { display: flex; gap: 0.55rem; margin-top: 1rem; }
.social a {
    width: 2.7rem; height: 2.7rem; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%; color: var(--cream);
    transition: border-color 0.35s, color 0.35s, transform 0.4s var(--ease-out);
}
.social a:hover { border-color: var(--copper); color: var(--copper); transform: translateY(-4px) rotate(-8deg); }

.site-footer__legal {
    padding-bottom: 3.5rem; margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
    font-size: 0.8rem; color: var(--faint);
}

/* ========================================================= whatsapp flotante */

.whatsapp-float {
    position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 90;
    width: 3.6rem; height: 3.6rem;
    display: grid; place-items: center;
    background: var(--whatsapp); color: #04310f;
    border-radius: 50%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.whatsapp-float::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--whatsapp);
    animation: halo 2.8s var(--ease-out) infinite;
}
@keyframes halo {
    0% { transform: scale(1); opacity: 0.7; }
    70%, 100% { transform: scale(1.7); opacity: 0; }
}
.whatsapp-float:hover { transform: scale(1.08); color: #04310f; box-shadow: 0 16px 40px rgba(37, 211, 102, 0.3); }

/* ===================================================================== legal */

.legal { max-width: 46rem; color: var(--muted); }
.legal h3 { font-size: 1.35rem; color: var(--cream); margin: 2rem 0 0.6rem; }
.legal h3:first-child { margin-top: 0; }
.prose { max-width: 44rem; color: var(--muted); }
.stack-top { margin-top: 2rem; }

/* ============================================ aparición al entrar en pantalla */

/* El estado inicial vive DENTRO de @supports: si el navegador no entiende la
   línea de tiempo, no oculta nada y la página se ve entera. Nunca al revés. */
@supports (animation-timeline: view()) {
    .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 28%;
    }
    @keyframes reveal {
        from { opacity: 0; transform: translateY(26px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .reveal--stagger > * {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 2% cover 26%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    /* La franja deja de girar: queda quieta, entera y a todo color. */
    .barber-stripe::before { animation: none; }
}