/* === VARIABLES GLOBALES ===
   Rediseño 2026 clonado de la referencia en video: fondo casi negro y neutro
   (no marrón cálido como antes), dorado pálido usado con moderación (botones,
   logo, acentos puntuales) en vez de dorado saturado por todos lados, tipografía
   única (Inter) en vez de la pareja serif/sans anterior, botones tipo píldora. */
:root {
    /* Tokens exactos del panel de estilos de Lovable (oklch) que mandaste — antes eran
       aproximaciones mías a ojo desde capturas del video, esto es lo real. Los *-rgb se
       mantienen (ya confirmados por muestreo de píxeles) porque rgba(var(--x-rgb), alfa)
       se usa en decenas de lugares para transparencias; oklch() no mezcla con ese patrón. */
    --bg-main: oklch(14.5% 0 0);
    --bg-main-rgb: 11, 13, 12;
    --bg-secondary: oklch(16.5% 0 0);
    --bg-2-rgb: 18, 20, 18;
    --bg-elevated: oklch(18.5% 0 0);
    --bg-elevated-rgb: 24, 26, 24;

    --gold-primary: oklch(76.2% 0.098 84.5);
    --gold-rgb: 211, 184, 123;
    --gold-light: oklch(87.8% 0.076 88);
    --gold-light-rgb: 232, 217, 179;

    --text-light: oklch(97% 0.005 90);
    --text-light-rgb: 245, 243, 239;
    --text-muted: oklch(68% 0.012 85);
    --text-muted-rgb: 147, 149, 141;

    --line-rgb: 245, 243, 239;

    /* Degradado y sombras de marca — tal cual el token --gradient-gold / --shadow-gold / --shadow-panel */
    --gradient-gold: linear-gradient(100deg, oklch(87.8% 0.076 88), oklch(76.2% 0.098 84.5) 55%, oklch(66% 0.09 80));
    --shadow-gold: 0 18px 50px -20px oklch(76.2% 0.098 84.5 / 0.45);
    --shadow-panel: 0 24px 60px -30px oklch(0% 0 0 / 0.9);

    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius-pill: 999px;
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    background-color: var(--bg-main);
    color: var(--text-light);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Luz ambiental muy sutil: apenas un respiro de brillo, el fondo sigue siendo
   casi negro y neutro (antes era un marrón cálido mucho más presente) */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(60% 45% at 15% 5%, rgba(var(--gold-rgb), 0.05), transparent 60%),
        radial-gradient(50% 40% at 88% 95%, rgba(var(--gold-rgb), 0.04), transparent 62%);
}

/* === LOADER === */
.loader-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-main); display: flex; justify-content: center; align-items: center;
    z-index: 9999; transition: opacity 0.5s ease;
}
.loader-spinner {
    width: 40px; height: 40px; border: 3px solid rgba(var(--gold-rgb), 0.2);
    border-top-color: var(--gold-primary); border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* === BARRA DE PROGRESO DE SCROLL === */
/* Por encima del navbar (z-index 1000) para que nunca quede tapada, incluso cuando
   el navbar todavía es transparente al tope de la página. */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: var(--gradient-gold); z-index: 1100; pointer-events: none;
}

/* === NAVEGACIÓN === */
/* Arriba del todo el navbar es invisible y se funde con el hero (sin barra ni línea).
   Recién al bajar aparece el fondo difuminado y la línea divisoria — el JS pone .scrolled. */
.navbar {
    position: fixed; width: 100%; top: 0; padding: 24px 0; z-index: 1000;
    background: transparent; border-bottom: 1px solid transparent;
    transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar.scrolled {
    padding: 12px 0;
    background: rgba(var(--bg-main-rgb), 0.82);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(var(--text-light-rgb), 0.08);
}
.nav-container {
    width: 90%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;
}
.nav-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-heading); color: var(--text-light); font-size: 0.95rem;
    font-weight: 700; text-decoration: none; letter-spacing: 1.5px;
}
.nav-logo img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.nav-links { display: flex; list-style: none; gap: 34px; align-items: center; }
.nav-links a {
    color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; transition: var(--transition);
}
.nav-links a:hover { color: var(--text-light); }
.nav-links a.btn-outline { color: var(--gold-light); }

/* Antes quedaba siempre como 3 rayas — abrías el menú y el ícono no avisaba que
   ahora es para cerrarlo. El JS ya pone aria-expanded correctamente en el click;
   solo faltaba engancharlo a la animación de las 3 rayas → X. */
.nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; z-index: 1001; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ''; display: block; width: 24px; height: 2px; background: var(--text-light);
    position: relative; transition: var(--transition);
}
.nav-toggle span::before { position: absolute; top: -8px; }
.nav-toggle span::after { position: absolute; top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* === BOTONES (píldora, como en la referencia) === */
.btn-gold {
    display: inline-block; padding: 15px 32px; background: var(--gradient-gold);
    color: var(--bg-main); font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; font-size: 0.82rem; text-decoration: none; border: none; cursor: pointer;
    position: relative; overflow: hidden; transition: var(--transition); border-radius: var(--radius-pill);
    box-shadow: var(--shadow-gold);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -14px oklch(76.2% 0.098 84.5 / 0.5); filter: brightness(1.04); }
/* Antes solo aclaraba el color (filter: brightness) — un brillo diagonal que
   cruza el botón se siente más a "luz sobre superficie pulida", más elegante
   que un simple cambio de brillo plano. */
.btn-gold::before, .btn-submit::before {
    content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
    background: linear-gradient(75deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.btn-gold:hover::before, .btn-submit:hover::before { left: 125%; }
.btn-outline {
    display: inline-block; border: 1px solid rgba(var(--text-light-rgb), 0.25); padding: 14px 30px;
    border-radius: var(--radius-pill); color: var(--text-light); font-size: 0.82rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; text-decoration: none; transition: var(--transition);
}
.btn-outline:hover { border-color: var(--gold-primary); color: var(--gold-light); }
.nav-links .btn-outline { padding: 10px 20px; }

/* === HERO === */
.hero { min-height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; padding-top: 80px; overflow: hidden; }
.hero-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden; background-color: var(--bg-main); }
/* Con un solo clip real no hay a qué "rotar", así que en vez del fundido
   fadeSlide de antes (pensado para 3 fotos turnándose) esto solo hace un
   zoom lento y continuo (Ken Burns) para que el fondo tenga algo de vida
   además del movimiento propio del video. */
.hero-slider .slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    background-color: var(--bg-main);
    animation: heroKenBurns 24s ease-in-out infinite alternate;
}
.slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(var(--bg-main-rgb), 0.55) 0%, rgba(var(--bg-main-rgb), 0.92) 100%); z-index: 1; }

@keyframes heroKenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.hero-content { position: relative; z-index: 5; width: 90%; max-width: 1200px; margin: 0 auto; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; }
.hero-copy { text-align: left; }
.hero-eyebrow {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 1.25rem;
}
.hero h1 { font-family: var(--font-heading); font-size: 3.4rem; line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; }
.hero h1 .accent { color: var(--gold-primary); }
.hero .subtitle { color: var(--text-muted); font-size: 1.05rem; max-width: 46ch; margin: 1.5rem 0 2.25rem; line-height: 1.6; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Logo del hero: mismo halo/entrada de antes, reescalado y con el aro dorado
   ahora más discreto (menos glow, más línea fina) para calzar con la referencia */
.logo-container {
    --logo-size: clamp(220px, 26vw, 340px);
    position: relative; margin: 0 auto; width: var(--logo-size); height: var(--logo-size);
}
.logo-halo {
    position: absolute; inset: -16px; border-radius: 50%; z-index: 0; opacity: 0;
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(var(--gold-rgb), 0.45) 50deg, transparent 125deg,
        transparent 225deg, rgba(var(--gold-light-rgb), 0.3) 290deg, transparent 360deg);
    filter: blur(16px);
    animation: haloSpin 11s linear infinite, haloFadeIn 1.6s ease-out forwards;
    animation-delay: 0s, 0.4s;
}
@keyframes haloSpin { to { transform: rotate(360deg); } }
@keyframes haloFadeIn { from { opacity: 0; } to { opacity: 1; } }
.logo-container::after {
    content: ''; position: absolute; inset: -8px; border-radius: 50%; z-index: 0;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    animation: ringBreathe 4.5s ease-in-out infinite; animation-delay: 1.9s;
    opacity: 0;
}
@keyframes ringBreathe {
    0%, 100% { transform: scale(1); opacity: 0; }
    50%      { transform: scale(1.06); opacity: 0.45; }
}
.hero-logo {
    position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(var(--gold-rgb), 0.3);
    opacity: 0;
    animation: logoReveal 1.4s cubic-bezier(0.19, 1, 0.22, 1) forwards, logoBreathe 4.5s ease-in-out infinite;
    animation-delay: 0.5s, 2s;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease;
}
@keyframes logoReveal {
    from { opacity: 0; transform: scale(0.8) rotate(-10deg); filter: blur(10px); }
    60%  { filter: blur(0); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
@keyframes logoBreathe {
    0%, 100% { box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.1); }
    50%      { box-shadow: 0 0 38px rgba(var(--gold-rgb), 0.22); }
}
.hero-logo:hover { transform: scale(1.04); border-color: var(--gold-primary); }
.logo-shine { position: absolute; inset: 0; z-index: 2; border-radius: 50%; overflow: hidden; pointer-events: none; }
.logo-shine::before, .logo-shine::after {
    content: ''; position: absolute; top: -60%; left: -160%; height: 220%;
    animation: shineSweep 7s ease-in-out infinite;
}
.logo-shine::before {
    width: 55%;
    background: linear-gradient(75deg, transparent 0%, rgba(var(--gold-light-rgb), 0.3) 50%, transparent 100%);
    animation-delay: 2.6s;
}
.logo-shine::after {
    width: 18%;
    background: linear-gradient(75deg, transparent 0%, rgba(var(--gold-light-rgb), 0.55) 50%, transparent 100%);
    animation-delay: 2.75s;
}
@keyframes shineSweep { 0% { left: -160%; } 30% { left: 170%; } 100% { left: 170%; } }

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero-copy { text-align: center; }
    .hero .cta-row { justify-content: center; }
    .hero h1 { font-size: 2.4rem; }
}

/* === CINTA DE TEXTO (marquee) ===
   Franja angosta con el mismo texto duplicado dos veces seguidas; anima solo
   la mitad del ancho para que el loop sea perfecto y no se note el corte. */
.marquee {
    border-top: 1px solid rgba(var(--text-light-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--text-light-rgb), 0.08);
    background: var(--bg-secondary);
    padding: 16px 0; overflow: hidden; white-space: nowrap;
}
.marquee-track { display: inline-flex; animation: marqueeScroll 28s linear infinite; }
.marquee-track span {
    display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); padding: 0 20px;
}
.marquee-track span::after { content: '•'; margin-left: 40px; color: rgba(var(--gold-rgb), 0.5); }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* === CONTENEDOR Y TÍTULOS DE SECCIÓN === */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
section { padding: 110px 0; position: relative; }
.section-eyebrow {
    display: flex; align-items: center; gap: 12px; margin-bottom: 1.1rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
}
.section-eyebrow .num { color: var(--gold-primary); }
.section-eyebrow .dash { width: 28px; height: 1px; background: rgba(var(--text-light-rgb), 0.25); }
.section-title h2, .section-title-solo {
    font-family: var(--font-heading); font-size: clamp(2rem, 1.4vw + 1.6rem, 2.75rem);
    font-weight: 700; letter-spacing: -0.01em; color: var(--text-light); margin-bottom: 0.9rem;
}
.section-title p { color: var(--text-muted); font-size: 1rem; max-width: 56ch; }

/* === CONOCE AL BARBERO: 2 tarjetas + fila de estadísticas === */
/* Mismo resplandor cálido de ".booking" pero asomando desde arriba-derecha,
   para que cada sección con este tratamiento tenga su propia dirección de luz. */
.about-barber {
    background:
        radial-gradient(55% 65% at 92% 6%, oklch(76.2% 0.098 84.5 / 0.14), transparent 65%),
        var(--bg-main);
}
.barber-cards { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 2.5rem; }
.barber-card-copy, .barber-card-photo {
    background: var(--bg-elevated); border: 1px solid rgba(var(--text-light-rgb), 0.07);
    border-radius: 20px; transition: var(--transition);
}
.barber-card-copy:hover, .barber-card-photo:hover { border-color: rgba(var(--gold-rgb), 0.3); }
.barber-card-copy { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.barber-card-copy h3 { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: var(--text-light); margin-bottom: 1rem; }
.barber-card-copy p { color: var(--text-muted); line-height: 1.75; max-width: 46ch; }
.barber-handle {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 1.75rem; width: fit-content;
    font-size: 0.82rem; font-weight: 600; color: var(--gold-light); text-decoration: none;
    border: 1px solid rgba(var(--gold-rgb), 0.3); border-radius: var(--radius-pill); padding: 8px 16px;
    transition: var(--transition);
}
.barber-handle:hover { background: rgba(var(--gold-rgb), 0.1); border-color: var(--gold-primary); }
.barber-handle svg { width: 15px; height: 15px; }

/* La imagen vieja (chibi.webp) tenía fondo transparente, por eso el padding+recuadro
   chico nunca se notaba — se veía solo la silueta flotando sobre el glow de la tarjeta.
   El video es opaco (tiene su propio fondo), así que con ese mismo padding quedaba una
   caja visible adentro de otra caja. Ahora va a sangre completa, como los tiles de la
   Galería: el video ES la tarjeta, sin marco propio. */
.barber-card-photo { padding: 0; overflow: hidden; position: relative; min-height: 380px; }
.barber-card-photo img {
    width: 100%; max-width: 240px; height: auto; position: relative; z-index: 1;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,0.5));
}
.barber-card-photo video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 15%; /* prioriza cabeza/cara sobre los pies al recortar */
}
.barber-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.stat-card {
    background: var(--bg-elevated); border: 1px solid rgba(var(--text-light-rgb), 0.07);
    border-radius: 20px; padding: 26px 28px; transition: var(--transition);
}
.stat-card:hover { border-color: rgba(var(--gold-rgb), 0.3); }
.stat-card .stat-num { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 700; color: var(--text-light); }
.stat-card .stat-label { margin-top: 4px; font-size: 0.82rem; color: var(--text-muted); }

@media (max-width: 860px) {
    .barber-cards { grid-template-columns: 1fr; }
    .barber-card-photo { order: -1; }
    .barber-stats { grid-template-columns: 1fr; }
}

/* === GALERÍA: GRID DESTACADO (3 fotos) ===
   3 columnas iguales, en vertical. Antes era un "bento" (una ancha + dos angostas
   apiladas) heredado de la referencia, pero esa forma es para fotos panorámicas —
   estas 3 fotos son de retrato (más altas que anchas), así que quedaban recortadas
   en una tira horizontal aplastada sin importar el tamaño. 3 columnas parejas con
   proporción 4:5 es la forma natural para este tipo de foto. */
.bento-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.5rem; }
.bento-tile {
    position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 5;
    border: 1px solid rgba(var(--text-light-rgb), 0.07);
}
.bento-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.bento-tile:hover img { transform: scale(1.05); }
.bento-tile::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(var(--bg-main-rgb), 0.85) 100%);
}
.bento-caption {
    position: absolute; left: 20px; bottom: 18px; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.5px; color: var(--text-light);
    text-transform: uppercase;
}
.bento-caption .line { width: 16px; height: 1px; background: var(--gold-primary); }

/* aspect-ratio ya resuelve el alto solo en cualquier ancho — acá solo hace falta
   bajar a 1 columna en teléfonos angostos, donde 3 columnas dejarían cada foto
   de ~100px de ancho. */
@media (max-width: 640px) {
    .bento-gallery { grid-template-columns: 1fr; }
}

/* Línea sutil que separa el grid estático del carrusel: misma idea que ".bento-caption .line"
   pero horizontal y centrada, para marcar que son dos bloques distintos de la galería. */
.section-divider {
    width: 140px; height: 1px; margin: 3rem auto 0;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.4), transparent);
}

/* === GALERÍA: COVERFLOW 3D CON LIGHTBOX ===
   Recorte de una animación que trajo el cliente (coverflow con arrastre, autoplay
   y foto ampliada al tocar la del centro), readaptada a los tokens de color/tipografía
   del sitio en vez de sus valores propios (azul #94c0e9, Inter suelto, etc). Las
   tarjetas las arma js/main.js a partir de las 6 fotos reales — antes el grid
   estático de acá solo alcanzaba a mostrar 3 de las 6 que ya existen en img/. */
.portfolio { background: var(--bg-secondary); }

.coverflow-panel {
    max-width: 640px; margin: 2.5rem auto 0; background: var(--bg-elevated);
    border: 1px solid rgba(var(--text-light-rgb), 0.08); border-radius: 24px;
    padding: 32px; box-shadow: var(--shadow-panel);
}
.coverflow-header {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted);
}

/* Faltaba user-select:none: al arrastrar con el mouse sobre las fotos, el navegador
   lo interpretaba como selección de texto/imagen y las pintaba de azul (el color de
   selección de Chrome/Windows) — por eso parecía que el clic "no hacía nada", el
   flash azul tapaba la reacción real. */
.coverflow-stage {
    position: relative; width: 100%; height: 320px; perspective: 1100px; overflow: hidden;
    cursor: grab; display: flex; justify-content: center; align-items: center;
    margin-bottom: 22px; touch-action: pan-y;
    user-select: none; -webkit-user-select: none;
}
.coverflow-stage:active { cursor: grabbing; }
.coverflow-stage.dragging { cursor: grabbing; }
.coverflow-card {
    position: absolute; width: 180px; height: 270px; border-radius: 14px; overflow: hidden;
    background: var(--bg-main); border: 1px solid rgba(var(--gold-rgb), 0.18);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, filter 0.6s ease;
    cursor: pointer;
}
.coverflow-card img {
    width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block;
    -webkit-user-drag: none; user-drag: none;
}

.coverflow-info { text-align: center; min-height: 62px; }
.coverflow-info h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text-light); margin-bottom: 4px; }
.coverflow-info p { font-size: 0.85rem; color: var(--text-muted); }

.coverflow-slider-wrapper { position: relative; width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; margin-top: 12px; }
.coverflow-dots { position: absolute; width: 200px; display: flex; justify-content: space-between; z-index: 1; pointer-events: none; }
.coverflow-dots span { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--gold-rgb), 0.3); transition: background 0.3s ease, transform 0.3s ease; }
.coverflow-dots span.active { background: var(--gold-primary); transform: scale(1.4); }

.coverflow-slider-wrapper input[type="range"] { -webkit-appearance: none; appearance: none; width: 240px; background: transparent; z-index: 2; }
.coverflow-slider-wrapper input[type="range"]:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 4px; }
.coverflow-slider-wrapper input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 2px; background: rgba(var(--text-light-rgb), 0.15); cursor: pointer; }
.coverflow-slider-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 24px; width: 46px; margin-top: -11px; border-radius: var(--radius-pill);
    background: var(--gradient-gold); box-shadow: var(--shadow-gold); cursor: grab;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="11" viewBox="0 0 24 12" fill="none" stroke="%231b1712" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 1L2 6L7 11M17 1L22 6L17 11"/></svg>');
    background-position: center; background-repeat: no-repeat; background-size: 18px 11px;
}
.coverflow-slider-wrapper input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.coverflow-slider-wrapper input[type="range"]::-moz-range-track { height: 2px; background: rgba(var(--text-light-rgb), 0.15); }
.coverflow-slider-wrapper input[type="range"]::-moz-range-thumb {
    height: 24px; width: 46px; border: none; border-radius: var(--radius-pill);
    background: var(--gradient-gold); box-shadow: var(--shadow-gold); cursor: grab;
}

@media (max-width: 560px) {
    .coverflow-panel { padding: 26px 18px; }
    .coverflow-stage { height: 260px; }
    .coverflow-card { width: 150px; height: 225px; }
}

/* === LIGHTBOX (foto de la galería ampliada) === */
.lightbox {
    position: fixed; inset: 0; background: rgba(var(--bg-main-rgb), 0.92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; justify-content: center; align-items: center; z-index: 2000;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.lightbox.active { opacity: 1; pointer-events: auto; }
.lightbox img {
    max-width: 90%; max-height: 85vh; border-radius: 16px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.85); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lightbox.active img { transform: scale(1); }
.lightbox-close {
    position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: transparent;
    border: 1px solid rgba(var(--text-light-rgb), 0.2); color: var(--text-light);
    font-size: 26px; line-height: 1; cursor: pointer; transition: var(--transition);
}
.lightbox-close:hover { border-color: var(--gold-primary); color: var(--gold-light); }
@media (max-width: 560px) {
    .lightbox-close { top: calc(16px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
}

/* === EL PROCESO (nuevo) === */
/* Resplandor cálido asomando desde arriba al centro — igual idea que ".booking",
   pero más discreto porque acá solo hay texto e íconos, sin fotos que compitan. */
#proceso {
    background:
        radial-gradient(50% 55% at 50% 0%, oklch(76.2% 0.098 84.5 / 0.1), transparent 70%),
        var(--bg-main);
}
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 3rem; }
.process-step { border-top: 1px solid rgba(var(--text-light-rgb), 0.12); padding-top: 1.5rem; transition: border-color 0.3s ease; }
.process-step:hover { border-top-color: rgba(var(--gold-rgb), 0.5); }
/* Antes el círculo solo tenía el número ("01","02","03") sin ningún ícono que
   distinga de un vistazo qué pasa en cada paso. */
.process-step .step-icon {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), 0.35);
    display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
    color: var(--gold-primary); transition: var(--transition);
}
.process-step .step-icon svg { width: 20px; height: 20px; }
.process-step:hover .step-icon { border-color: var(--gold-primary); background: rgba(var(--gold-rgb), 0.08); transform: scale(1.05); }
.step-num {
    display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 0.5rem;
}
.process-step h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text-light); margin-bottom: 0.6rem; }
.process-step p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; }
@media (max-width: 760px) { .process-steps { grid-template-columns: 1fr; gap: 32px; } }

/* === EL MENÚ === */
/* Resplandor cálido asomando desde abajo-derecha; queda más tenue que en ".booking"
   porque las tarjetas de servicio ya tienen su propio degradado oscuro encima. */
.services {
    background:
        radial-gradient(55% 70% at 90% 100%, oklch(76.2% 0.098 84.5 / 0.11), transparent 65%),
        var(--bg-secondary);
}
/* 2x2: con 4 columnas las tarjetas quedaban angostas y los nombres se partían en dos líneas */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 2.5rem; align-items: stretch; }
@media (max-width: 760px) { .services-grid { grid-template-columns: 1fr; } }

/* Degradado vertical sutil (claro arriba → oscuro abajo) y borde de tinte cálido,
   medido pixel a pixel de la referencia: antes era un plano liso sin profundidad. */
.service-card {
    background: linear-gradient(180deg, oklch(21% 0 0) 0%, oklch(18.5% 0 0) 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.16);
    border-radius: 20px; padding: 30px 28px; transition: var(--transition);
    display: flex; flex-direction: column; height: 100%; position: relative;
}
.service-card:hover { border-color: rgba(var(--gold-rgb), 0.4); transform: translateY(-4px); box-shadow: var(--shadow-panel); }
.premium-card { border-color: rgba(var(--gold-rgb), 0.3); }

.card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 18px; margin-bottom: 10px; border-bottom: 1px solid rgba(var(--gold-rgb), 0.22);
}
.card-head-title { display: flex; align-items: center; gap: 12px; }
/* Antes las 4 tarjetas del menú solo tenían un número — sin nada que distinga
   de un vistazo qué categoría es cada una. */
.card-icon {
    width: 22px; height: 22px; flex-shrink: 0; color: var(--gold-primary);
    transition: transform 0.3s ease;
}
.service-card:hover .card-icon { transform: scale(1.12) rotate(-4deg); }
.card-num { font-size: 0.72rem; letter-spacing: 2px; color: var(--gold-light); font-weight: 700; }
.service-card h3 { font-family: var(--font-heading); color: var(--text-light); font-size: 1.2rem; font-weight: 700; }

/* Sin líneas entre ítems (la referencia solo lleva la del encabezado); el aire
   entre filas es lo que los separa, y el resaltado aparece solo al pasar el cursor. */
.service-list { list-style: none; padding: 0; margin-top: 12px; width: 100%; }
/* Una sola línea por servicio: nombre a la izquierda, precio a la derecha, centrados
   verticalmente entre sí (ya no hay subtexto que desalinee) */
.service-list li {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 11px 10px; border-radius: 8px; margin: 0 -10px;
    transition: background 0.25s ease;
}
.service-list li:hover { background: rgba(var(--gold-rgb), 0.07); }
.service-name { color: oklch(78% 0.008 88); font-weight: 400; font-size: 0.9rem; line-height: 1.4; }
.service-list .price {
    color: var(--gold-light); font-weight: 500; font-size: 0.9rem;
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* === TESTIMONIOS (nuevo) === */
.testimonials { background: var(--bg-main); text-align: center; }
.testimonial-track { position: relative; max-width: 720px; margin: 3rem auto 0; min-height: 140px; }
.testimonial-slide {
    position: absolute; inset: 0; opacity: 0; transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none;
}
.testimonial-slide.active { opacity: 1; transform: none; pointer-events: auto; }
.testimonial-slide blockquote {
    font-family: var(--font-heading); font-size: clamp(1.2rem, 1vw + 1rem, 1.6rem); font-weight: 500;
    color: var(--text-light); line-height: 1.5; max-width: 42ch; margin: 0 auto;
}
.testimonial-slide cite {
    display: block; margin-top: 1.5rem; font-style: normal; font-size: 0.82rem;
    letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted);
}
.testimonial-slide cite b { color: var(--gold-light); font-weight: 600; }
.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2.5rem; }
.testimonial-dots .car-dot { background: rgba(var(--text-light-rgb), 0.2); }
.testimonial-dots .car-dot.active { background: var(--gold-primary); }

/* === RESERVAS === */
/* Resplandor dorado cálido asomando desde la izquierda, como en el video
   (antes era un fondo plano sin vida) */
.booking {
    background:
        radial-gradient(60% 90% at 8% 30%, oklch(76.2% 0.098 84.5 / 0.16), transparent 65%),
        radial-gradient(40% 60% at 0% 100%, oklch(66% 0.09 80 / 0.12), transparent 70%),
        var(--bg-secondary);
}
.booking-wrapper { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.booking-info h2 { font-family: var(--font-heading); font-size: clamp(2rem, 1.4vw + 1.6rem, 2.75rem); font-weight: 700; color: var(--text-light); margin-bottom: 1rem; }
.booking-info p { color: var(--text-muted); margin-bottom: 2rem; font-size: 1rem; line-height: 1.6; }
/* Antes "Dirección"/"Atención" no tenían ningún ícono (se perdieron en el rediseño) */
.contact-details p { color: var(--text-light); margin-bottom: 0.9rem; display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; }
.contact-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--gold-primary); }
.contact-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.contact-details .label { font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }

.glass-panel {
    position: relative;
    background: var(--bg-elevated); border: 1px solid rgba(var(--text-light-rgb), 0.08);
    padding: 36px; border-radius: 20px; box-shadow: var(--shadow-panel);
    transition: var(--transition);
}
/* Borde que se ilumina SIGUIENDO al cursor (no un glow parejo en todo el marco):
   un degradado radial centrado en la posición del mouse —que el JS escribe en --mx/--my—
   recortado con mask para que solo se vea en el grosor del borde. */
.glass-panel::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: radial-gradient(220px circle at var(--mx, -300px) var(--my, -300px),
        oklch(87.8% 0.076 88 / 0.95), oklch(76.2% 0.098 84.5 / 0.4) 42%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.glass-panel:hover::before, .glass-panel:focus-within::before { opacity: 1; }
.glass-panel:focus-within { box-shadow: var(--shadow-panel), var(--shadow-gold); }
.styled-form { display: flex; flex-direction: column; gap: 20px; }
.input-group { position: relative; z-index: 10; }
.form-row { display: flex; gap: 16px; }
.form-row .input-group { flex: 1; min-width: 0; }

/* En iOS el control nativo de fecha/hora arma su propio ancho mínimo interno
   (los segmentos día/mes/año + el ícono de calendario) que no cede solo con
   min-width:0 en el contenedor — a diferencia de Android, cuyo control nativo
   es más angosto y sí entra bien en la mitad de la fila. La forma confiable de
   evitar que se encimen es no partir la fila en dos ahí: apilarlos completos.
   "@supports (-webkit-touch-callout: none)" es el truco estándar para detectar
   específicamente Safari/WebKit de iOS por CSS (Android no reconoce esa propiedad). */
@supports (-webkit-touch-callout: none) {
    .form-row { flex-direction: column; gap: 20px; }
}

/* text-align:left explícito porque iOS centra por defecto el texto de
   input[type=date] / input[type=time] (a diferencia de los inputs normales y
   el select, que ya nacen alineados a la izquierda) — sin esto, Fecha y Hora
   quedaban centrados mientras el resto del formulario se veía a la izquierda. */
.input-group input, .input-group select {
    width: 100%; background: rgba(var(--bg-main-rgb), 0.5); border: 1px solid rgba(var(--text-light-rgb), 0.12);
    border-radius: 10px; padding: 13px 14px; color: var(--text-light); font-family: var(--font-body);
    font-size: 0.92rem; text-align: left; outline: none; position: relative; z-index: 20; cursor: text; transition: var(--transition);
}
.input-group input:focus, .input-group select:focus { border-color: var(--gold-primary); }
.input-group select { color: var(--text-muted); cursor: pointer; }
.input-group select option, .input-group select optgroup { background: var(--bg-secondary); color: var(--text-light); }
.input-group label:not(.static-label) {
    position: absolute; top: 13px; left: 15px; color: var(--text-muted); pointer-events: none;
    transition: 0.2s ease; z-index: 15; font-size: 0.92rem;
}
.input-group input:focus ~ label:not(.static-label),
.input-group input:not(:placeholder-shown) ~ label:not(.static-label) {
    top: -9px; left: 10px; font-size: 0.7rem; color: var(--gold-primary);
    background: var(--bg-elevated); padding: 0 6px;
}
.input-group label.static-label {
    display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-muted); margin-bottom: 8px;
}

.btn-submit {
    margin-top: 6px; background: var(--gradient-gold); border: none; color: var(--bg-main);
    padding: 15px; font-size: 0.85rem; font-family: var(--font-body); font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer; position: relative;
    overflow: hidden; transition: var(--transition); border-radius: var(--radius-pill);
    box-shadow: var(--shadow-gold);
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px oklch(76.2% 0.098 84.5 / 0.5); filter: brightness(1.04); }

@media (max-width: 860px) {
    .booking-wrapper { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .contact-details p { justify-content: center; }
    .contact-text { text-align: left; }
}

/* Animaciones de aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(32px); transition: 0.7s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* === FOOTER === */
footer { text-align: center; padding: 40px 0 30px; border-top: 1px solid rgba(var(--text-light-rgb), 0.08); }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.footer-brand span { font-family: var(--font-heading); font-weight: 700; letter-spacing: 1px; color: var(--text-light); }
footer p.copy { color: var(--text-muted); font-size: 0.85rem; }
footer .credit { margin-top: 6px; font-size: 0.75rem; letter-spacing: 0.5px; color: rgba(var(--text-muted-rgb), 0.7); }
footer .credit a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition); }
footer .credit a:hover { color: var(--gold-primary); border-bottom-color: rgba(var(--gold-rgb), 0.4); }
.footer-social { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(var(--text-light-rgb), 0.12);
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition);
}
.footer-social a:hover { border-color: var(--gold-primary); color: var(--gold-light); }
.footer-social svg { width: 16px; height: 16px; }

/* === BARRA FLOTANTE: WhatsApp + Instagram === */
/* env(safe-area-inset-*) suma el margen real del notch/isla dinámica en iPhones
   modernos (viewport-fit=cover en el <meta> es lo que habilita estas variables) —
   si no, en esos teléfonos el botón queda pegado al borde curvo de la pantalla. */
.floating-bar {
    position: fixed; right: calc(24px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 900;
    display: flex; flex-direction: column; gap: 12px;
    opacity: 0; transform: translateX(24px);
    animation: floatBarIn 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards; animation-delay: 1.7s;
}
@keyframes floatBarIn { to { opacity: 1; transform: translateX(0); } }
/* Los dos botones NO son iguales (antes los tenía a ambos rellenos de dorado):
   base = círculo transparente con borde e ícono dorados (así es Instagram),
   y WhatsApp encima va relleno con el degradado y con un halo que late. */
.float-btn {
    position: relative; width: 50px; height: 50px; border-radius: 50%;
    background: transparent; border: 1px solid rgba(var(--gold-rgb), 0.32);
    display: flex; align-items: center; justify-content: center; color: var(--gold-light);
    transition: var(--transition);
}
/* 19px: el glifo de WhatsApp es relleno y pesa más visualmente que el de Instagram,
   que es de trazo — a igual tamaño se veía desbalanceado */
.float-btn svg { width: 19px; height: 19px; position: relative; z-index: 2; }
.float-btn:hover { transform: translateY(-3px) scale(1.06); border-color: rgba(var(--gold-rgb), 0.7); }

.float-wa {
    background: var(--gradient-gold); border-color: transparent; color: var(--bg-main);
    box-shadow: var(--shadow-gold);
}
.float-wa:hover { filter: brightness(1.05); }
/* Halo que late suave alrededor del botón de WhatsApp ("palpito ligero") */
.float-wa::before {
    content: ''; position: absolute; inset: -10px; border-radius: 50%; z-index: 0;
    background: rgba(var(--gold-rgb), 0.16); filter: blur(3px);
    animation: waPulse 3s ease-in-out infinite; animation-delay: 2.2s;
}
@keyframes waPulse {
    0%, 100% { transform: scale(0.88); opacity: 0.35; }
    50%      { transform: scale(1.08); opacity: 0.85; }
}

.float-tooltip {
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px);
    background: var(--bg-elevated); color: var(--text-light); font-size: 0.76rem; letter-spacing: 0.5px;
    padding: 6px 12px; border-radius: 6px; white-space: nowrap; border: 1px solid rgba(var(--text-light-rgb), 0.1);
    opacity: 0; pointer-events: none; transition: var(--transition); z-index: 3;
}
.float-btn:hover .float-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 600px) {
    .floating-bar { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
    .float-btn { width: 46px; height: 46px; }
    .float-tooltip { display: none; }
}

/* === PUNTOS (usados por el carrusel de testimonios) === */
.car-dots { display: flex; gap: 8px; }
.car-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--text-light-rgb), 0.2); border: none; padding: 0; cursor: pointer; transition: var(--transition); }
.car-dot.active { background: var(--gold-primary); transform: scale(1.4); }

/* El navbar es fijo: sin este offset, el título de cada sección queda tapado al llegar por ancla */
#inicio, #barbero, #trabajos, #proceso, #servicios, #testimonios, #reservas { scroll-margin-top: 90px; }

/* Responsive general */
@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-links {
        position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column; align-items: flex-start;
        gap: 0; background: rgba(var(--bg-main-rgb), 0.98); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(var(--text-light-rgb), 0.1);
        max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.35s ease;
    }
    .nav-links.open { max-height: 340px; opacity: 1; }
    .nav-links li { width: 100%; padding: 16px 6%; border-bottom: 1px solid rgba(var(--text-light-rgb), 0.05); }
    section { padding: 80px 0; }
}