/* =====================================================================
   NAVAJA — Barbería | style.css
   Dirección visual: espresso cálido + latón + acento oxblood.
   Firma: riel "poste de barbero" animado.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
    --espresso:   #15110D;   /* fondo base, casi negro cálido */
    --coffee:     #1E1813;   /* superficie elevada */
    --coffee-2:   #271F18;   /* superficie alterna */
    --brass:      #C9A24B;   /* acento principal (latón) */
    --brass-soft: #E3C074;   /* acento claro / hover */
    --cream:      #ECE5D8;   /* texto principal */
    --taupe:      #9A8C7B;   /* texto secundario */
    --oxblood:    #8E2B20;   /* rojo poste, uso muy puntual */
    --line:       rgba(201,162,75,.18);

    --maxw: 1180px;
    --r:    14px;
    --ease: cubic-bezier(.22,.61,.36,1);

    --fs-display: clamp(2.8rem, 7vw, 5.6rem);
    --fs-h2:      clamp(2rem, 4vw, 3.1rem);
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--espresso);
    color:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Fondo con textura sutil de grano para que nunca se vea "plano" */
body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(201,162,75,.10), transparent 60%),
      radial-gradient(900px 500px at -10% 20%, rgba(142,43,32,.08), transparent 55%);
}

/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.05;letter-spacing:.5px}
.eyebrow{
    display:inline-block;font-family:'Oswald',sans-serif;text-transform:uppercase;
    letter-spacing:3px;font-size:.8rem;color:var(--brass);margin-bottom:14px;font-weight:500;
}

/* ---------- BOTONES ---------- */
.btn{
    --pad:14px 28px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
    letter-spacing:1.5px;font-size:.92rem;padding:var(--pad);border-radius:999px;
    cursor:pointer;border:1px solid transparent;transition:.35s var(--ease);
    position:relative;will-change:transform;
}
.btn--solid{background:var(--brass);color:#1a130b}
.btn--solid:hover{background:var(--brass-soft);transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(201,162,75,.6)}
.btn--ghost{border-color:var(--line);color:var(--cream)}
.btn--ghost:hover{border-color:var(--brass);color:var(--brass-soft);transform:translateY(-2px)}
.btn--block{width:100%}
.btn--whatsapp{background:#1f7a44;color:#fff;margin-top:8px}
.btn--whatsapp:hover{background:#26995a;transform:translateY(-2px)}

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    transition:.4s var(--ease);
    background:transparent;
}
.nav.is-scrolled{
    background:rgba(21,17,13,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand__mark{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:4px;color:var(--cream)}
.brand__sub{font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--brass);margin-top:3px}

.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a:not(.btn){
    font-family:'Oswald',sans-serif;font-weight:400;text-transform:uppercase;
    letter-spacing:1.5px;font-size:.88rem;color:var(--cream);position:relative;padding:4px 0;
}
/* subrayado animado hover */
.nav__links a:not(.btn)::after{
    content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
    background:var(--brass);transition:width .35s var(--ease);
}
.nav__links a:not(.btn):hover{color:var(--brass-soft)}
.nav__links a:not(.btn):hover::after{width:100%}
.nav__cta{--pad:10px 22px}

.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:26px;height:2px;background:var(--cream);transition:.3s var(--ease)}

/* =====================================================================
   HERO  + firma "poste de barbero"
   ===================================================================== */
.hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    overflow:hidden;
    background:
      linear-gradient(180deg, rgba(21,17,13,.6), rgba(21,17,13,.95)),
      var(--img-hero, linear-gradient(135deg,#2a211a,#15110d 60%));
    background-size:cover;background-position:center;
}
.hero__overlay{
    position:absolute;inset:0;
    background:radial-gradient(900px 500px at 70% 30%, rgba(201,162,75,.12), transparent 60%);
    pointer-events:none;
}
.hero__inner{position:relative;z-index:2;padding:120px 24px 90px;max-width:880px}
.hero__eyebrow{
    font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:4px;
    color:var(--brass);font-size:.85rem;margin-bottom:20px;
}
.hero__title{font-size:var(--fs-display);text-transform:uppercase;margin-bottom:24px}
.hero__title em{
    font-family:'Marck Script',cursive;font-style:normal;text-transform:none;
    color:var(--brass-soft);font-weight:400;letter-spacing:0;display:inline-block;
}
.hero__text{max-width:520px;color:var(--taupe);font-size:1.1rem;margin-bottom:36px}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:54px}

.hero__stats{display:flex;gap:48px;flex-wrap:wrap}
.hero__stats li{display:flex;flex-direction:column}
.hero__stats strong{font-family:'Oswald',sans-serif;font-size:2.4rem;color:var(--brass-soft);line-height:1}
.hero__stats span{font-size:.78rem;text-transform:uppercase;letter-spacing:2px;color:var(--taupe);margin-top:6px}

/* Firma: riel poste de barbero (derecha) */
.pole{
    position:absolute;top:0;right:6%;width:26px;height:100%;z-index:1;
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    background:repeating-linear-gradient(
        -45deg,
        var(--oxblood) 0 14px,
        var(--cream) 14px 28px,
        #2a4a8e 28px 42px,   /* azul tenue, terna clásica del poste */
        var(--cream) 42px 56px
    );
    background-size:100% 80px;
    animation:poleMove 4s linear infinite;
    opacity:.85;
    box-shadow:0 0 30px -6px rgba(0,0,0,.6) inset;
}
@keyframes poleMove{from{background-position:0 0}to{background-position:0 -80px}}

.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;width:24px;height:40px;border:2px solid var(--line);border-radius:14px;display:flex;justify-content:center}
.hero__scroll span{width:3px;height:8px;background:var(--brass);border-radius:2px;margin-top:7px;animation:scrollDot 1.6s var(--ease) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-4px)}50%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* =====================================================================
   SECCIONES GENERALES
   ===================================================================== */
.section{position:relative;z-index:1;padding:104px 0}
.section--alt{background:var(--coffee)}
.section__head{text-align:center;max-width:640px;margin:0 auto 56px}
.section__title{font-size:var(--fs-h2);text-transform:uppercase}
.section__lead{color:var(--taupe);font-size:1.05rem;margin-top:14px}

.grid{display:grid;gap:24px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{
    background:var(--coffee-2);border:1px solid var(--line);border-radius:var(--r);
    padding:34px 28px;transition:.4s var(--ease);
}
.section--alt .card{background:var(--espresso)}
.card:hover{transform:translateY(-6px);border-color:var(--brass);box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}

/* ---------- SERVICIOS ---------- */
.service__icon{
    display:inline-flex;width:56px;height:56px;border-radius:12px;
    align-items:center;justify-content:center;color:var(--brass);
    background:rgba(201,162,75,.1);border:1px solid var(--line);margin-bottom:20px;
    transition:.4s var(--ease);
}
.service__icon svg{width:28px;height:28px}
.card:hover .service__icon{background:var(--brass);color:#1a130b}
.service__title{font-size:1.25rem;text-transform:uppercase;margin-bottom:10px}
.service__desc{color:var(--taupe);font-size:.96rem}

/* ---------- NOSOTROS / BENEFICIOS ---------- */
.about{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.about__text .btn{margin-top:28px}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.benefit{display:flex;gap:16px;align-items:flex-start}
.benefit__icon{flex:none;width:46px;height:46px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--brass);background:rgba(201,162,75,.1);border:1px solid var(--line)}
.benefit__icon svg{width:22px;height:22px}
.benefit__title{font-size:1.05rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.benefit__desc{color:var(--taupe);font-size:.9rem}

/* ---------- PRECIOS (LA CARTA) ---------- */
.pricing{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.price{display:flex;align-items:baseline;gap:14px;padding:18px 4px;border-bottom:1px solid var(--line)}
.price__info{display:flex;flex-direction:column}
.price__name{font-family:'Oswald',sans-serif;font-size:1.18rem;text-transform:uppercase;letter-spacing:.5px}
.price__detail{color:var(--taupe);font-size:.85rem}
.price__dots{flex:1;border-bottom:1px dotted rgba(154,140,123,.4);transform:translateY(-4px)}
.price__value{font-family:'Oswald',sans-serif;font-size:1.4rem;color:var(--brass-soft);font-weight:600;white-space:nowrap}
.pricing__note{text-align:center;color:var(--taupe);font-size:.9rem;margin-top:26px}
.pricing__note code{color:var(--brass-soft);background:rgba(201,162,75,.08);padding:2px 7px;border-radius:5px;font-size:.85em}

/* ---------- GALERÍA ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery__item{
    position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
    border:1px solid var(--line);
    background:linear-gradient(160deg,#2c241c,#17120d), var(--img);
    background-size:cover;background-position:center;background-blend-mode:overlay;
    transition:.5s var(--ease);
}
.gallery__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(21,17,13,.7))}
.gallery__item:hover{transform:scale(1.02);border-color:var(--brass)}
.gallery__tag{position:absolute;left:16px;bottom:14px;z-index:2;font-family:'Oswald',sans-serif;font-size:1.5rem;color:var(--brass-soft);letter-spacing:2px}

/* ---------- TESTIMONIOS ---------- */
.quote{display:flex;flex-direction:column}
.quote__stars{color:var(--brass);letter-spacing:3px;margin-bottom:14px}
.quote__text{font-size:1.05rem;color:var(--cream);margin-bottom:22px;font-style:italic}
.quote__author{display:flex;align-items:center;gap:14px;margin-top:auto}
.quote__avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--brass);color:#1a130b;font-family:'Oswald',sans-serif;font-size:1.25rem;font-weight:600}
.quote__author strong{display:block;font-family:'Oswald',sans-serif;letter-spacing:.5px}
.quote__author small{color:var(--taupe)}

/* ---------- CONTACTO ---------- */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.contact__list{margin:30px 0 24px;display:flex;flex-direction:column;gap:18px}
.contact__list li{display:flex;gap:14px;align-items:flex-start;color:var(--taupe)}
.contact__list strong{color:var(--cream);font-family:'Oswald',sans-serif;letter-spacing:.5px}
.contact__list a:hover{color:var(--brass-soft)}
.contact__ico{font-size:1.2rem;flex:none}

.contact__form-wrap{background:var(--coffee-2);border:1px solid var(--line);border-radius:var(--r);padding:36px}
.section--alt .contact__form-wrap{background:var(--espresso)}
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{font-family:'Oswald',sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--taupe)}
.field input,.field textarea{
    background:var(--espresso);border:1px solid var(--line);border-radius:10px;
    padding:13px 15px;color:var(--cream);font-family:inherit;font-size:.96rem;
    transition:.3s var(--ease);resize:vertical;
}
.section--alt .field input,.section--alt .field textarea{background:var(--coffee)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.field input::placeholder,.field textarea::placeholder{color:#6a5e51}
.form__hint{font-size:.8rem;color:var(--taupe);text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:.95rem;border:1px solid}
.alert--ok{background:rgba(31,122,68,.14);border-color:rgba(38,153,90,.5);color:#bfe6cf}
.alert--error{background:rgba(142,43,32,.14);border-color:rgba(142,43,32,.5);color:#e9b9b2}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:var(--coffee);border-top:1px solid var(--line);position:relative;z-index:1;padding-top:60px}
.footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:40px}
.footer__brand p{color:var(--taupe);margin-top:12px;max-width:280px}
.footer__nav{display:flex;flex-direction:column;gap:12px}
.footer__nav a,.footer__social a{color:var(--taupe);transition:.3s var(--ease);width:fit-content}
.footer__nav a:hover,.footer__social a:hover{color:var(--brass-soft)}
.footer__social{display:flex;flex-direction:column;gap:12px}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;padding-bottom:30px;border-top:1px solid var(--line);color:var(--taupe);font-size:.85rem}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{
    position:fixed;right:22px;bottom:22px;z-index:60;
    width:56px;height:56px;border-radius:50%;background:#26995a;color:#fff;
    display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.6);
    transition:.35s var(--ease);
}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}

/* =====================================================================
   ANIMACIÓN DE APARICIÓN (scroll reveal)
   ===================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.reveal.is-visible{opacity:1;transform:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
    .grid--4{grid-template-columns:repeat(2,1fr)}
    .grid--3{grid-template-columns:1fr}
    .about,.contact{grid-template-columns:1fr;gap:40px}
    .gallery{grid-template-columns:repeat(2,1fr)}
    .footer__inner{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
    /* menú móvil */
    .nav__toggle{display:flex}
    .nav__links{
        position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;
        background:rgba(21,17,13,.97);backdrop-filter:blur(10px);
        border-bottom:1px solid var(--line);
        max-height:0;overflow:hidden;transition:max-height .45s var(--ease);
    }
    .nav__links.is-open{max-height:420px}
    .nav__links a{width:100%;padding:16px 24px;border-bottom:1px solid var(--line)}
    .nav__links a::after{display:none}
    .nav__cta{margin:16px 24px;width:calc(100% - 48px)}
    .nav.is-open-bg{background:rgba(21,17,13,.97)}

    .hero__inner{padding-top:110px}
    .hero__stats{gap:30px}
    .pole{right:0;width:16px;opacity:.6}
    .section{padding:74px 0}
    .field-row{grid-template-columns:1fr}
    .footer__inner{grid-template-columns:1fr;gap:28px}
    .footer__bottom{flex-direction:column;gap:6px}
    .wa-float{width:52px;height:52px}
}

@media (max-width:420px){
    .grid--4{grid-template-columns:1fr}
    .gallery{grid-template-columns:1fr}
    .hero__actions{flex-direction:column}
    .hero__actions .btn{width:100%}
}

/* =====================================================================
   ACCESIBILIDAD: foco visible + respeto a "menos movimiento"
   ===================================================================== */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
    outline:2px solid var(--brass-soft);outline-offset:3px;border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition-duration:.01ms !important}
    .reveal{opacity:1;transform:none}
    html{scroll-behavior:auto}
}