/* ============================================================
   PEDRO'S v11 — Pedro, Master Barber · in Salon Salon, Vero Beach, FL
   Dark cinematic / modern barber. High contrast. Mobile-first.
   ============================================================ */
:root{
  --bg:#0f0d0b; --bg-2:#161210; --surface:#1c1713; --surface-2:#241c16;
  --bone:#f5eee1; --muted:#b6a793; --dim:#8a7b6a;
  --gold:#e0a73e; --gold-2:#f3c869;
  --red:#bb3c26; --red-2:#d24c31;
  --line:rgba(245,238,225,.12); --line-2:rgba(245,238,225,.24);
  --display:"Anton", Impact, sans-serif;
  --body:"Archivo", system-ui, -apple-system, sans-serif;
  --wrap:80rem; --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-anchor:none}
body{font-family:var(--body);color:var(--bone);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* reserve room for the fixed mobile CTA bar so it never covers the footer */
  padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--gold-2)}

/* ---- shared ---- */
.eyebrow{font-weight:700;font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.eyebrow--gold{color:var(--gold)}
.section-head{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,5vw,3rem)}
.section-title{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.5rem,8vw,5rem);line-height:.92;letter-spacing:.005em;margin-top:.6rem}
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:700;
  font-size:1rem;letter-spacing:.01em;padding:.9rem 1.5rem;border-radius:3px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;line-height:1}
.btn .ico{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto}
.btn--gold{background:var(--gold);color:#20160a;box-shadow:0 6px 22px rgba(224,167,62,.22)}
.btn--gold:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn--outline{background:transparent;border-color:var(--line-2);color:var(--bone)}
.btn--outline:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)}
.btn--lg{padding:1.05rem 1.8rem;font-size:1.08rem}

/* ============ HEADER ============ */
.site-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(1.1rem,5vw,3rem);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:.55rem;margin-right:auto;color:var(--bone)}
.brand__mark{width:1.9rem;height:1.9rem;color:var(--gold);flex:0 0 auto}
.brand__lockup{display:flex;flex-direction:column;justify-content:center;line-height:1}
.brand__word{font-family:var(--display);font-size:1.75rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--bone);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.brand__ap{color:var(--gold)}
.brand__sub{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:.22rem;white-space:nowrap}
.brand__sub b{color:var(--gold);font-weight:800}
.nav{display:none;gap:1.7rem}
.nav a{font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.nav a:hover{color:var(--gold)}
/* header Call is HIDDEN on mobile — the floating bottom bar already carries Call + WhatsApp.
   It only appears on desktop (>=920px), where there is no floating bar. */
.head-cta{display:none;padding:.58rem 1rem;font-size:.9rem}
.lang-toggle{background:transparent;border:1.5px solid var(--line-2);color:var(--bone);font-family:var(--body);
  font-weight:800;font-size:.78rem;letter-spacing:.08em;padding:.5rem .7rem;border-radius:3px;cursor:pointer;
  transition:border-color .25s,color .25s}
.lang-toggle:hover{border-color:var(--gold);color:var(--gold)}

/* ============ HERO ============ */
.hero{position:relative;min-height:clamp(580px,92svh,900px);display:flex;align-items:flex-end;
  color:var(--bone);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:contrast(1.06) saturate(1.02)}
.hero__video{display:none}
.hero__bg .hero__video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:contrast(1.06) saturate(1.02)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,13,11,.5) 0%,rgba(15,13,11,.04) 26%,rgba(15,13,11,.5) 58%,rgba(15,13,11,.97) 100%),
             radial-gradient(75% 55% at 78% 8%,rgba(224,167,62,.12),transparent 70%)}
.hero__inner{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(1.4rem,5vw,3rem) clamp(1.1rem,5vw,3rem) clamp(2.6rem,7vw,4.6rem)}
.hero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.1rem,13vw,6.4rem);line-height:.9;letter-spacing:.004em;text-shadow:0 2px 34px rgba(0,0,0,.6)}
.hero__title .hl{color:var(--gold)}
.hero__lede{max-width:36ch;margin-top:1.1rem;font-size:clamp(1.02rem,2.6vw,1.24rem);color:#e9dfce;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero__lede strong{color:#fff;font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.7rem 0 1rem}
.hero__trust{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--dim);letter-spacing:.04em}
.dot-live{width:.5rem;height:.5rem;border-radius:50%;background:#39d353;box-shadow:0 0 0 3px rgba(57,211,83,.2)}
.hero__figure{position:relative}
.hero__frame{position:relative;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.5);aspect-ratio:4/3}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:70% 30%;filter:contrast(1.05) saturate(1.03)}
.hero__frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(15,13,11,.55) 0%,rgba(15,13,11,0) 45%),
             linear-gradient(0deg,rgba(15,13,11,.8) 0%,rgba(15,13,11,0) 40%)}
.hero__badge{position:absolute;left:1rem;bottom:1rem;z-index:2;display:flex;flex-direction:column;
  line-height:1.05;background:rgba(15,13,11,.6);backdrop-filter:blur(6px);border:1px solid var(--line-2);
  border-left:3px solid var(--gold);padding:.5rem .8rem;border-radius:3px}
.hero__badge b{font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;text-transform:uppercase}
.hero__badge{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ============ MARQUEE ============ */
.marquee{background:var(--gold);color:#20160a;overflow:hidden;padding:.6rem 0}
.marquee__track{display:inline-flex;align-items:center;gap:1.3rem;white-space:nowrap;
  font-weight:800;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;
  animation:marq 28s linear infinite;will-change:transform}
.marquee__track i{opacity:.5;font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ FEATURED (banner destacado · sin precios · reutilizable para promo) ============ */
.featured{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(3.2rem,10vw,6.5rem) clamp(1.1rem,5vw,3rem);
  background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.featured__bg{position:absolute;inset:0;z-index:-2}
.featured__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  opacity:.26;filter:grayscale(.15) contrast(1.05)}
.featured::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 95% at 12% 18%,rgba(15,13,11,.25),var(--bg) 80%)}
.featured__inner{max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;
  align-items:flex-start;gap:1.05rem}
.featured__title{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;
  font-size:clamp(2.4rem,9vw,4.6rem);max-width:15ch;letter-spacing:.01em}
.featured__title .hl{color:var(--gold)}
.featured__lede{color:var(--muted);max-width:52ch;font-size:clamp(1rem,2.6vw,1.15rem)}
.featured__chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:.15rem 0 .3rem}
.featured__chips li{border:1px solid var(--line-2);border-radius:999px;padding:.42rem .95rem;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--bone);
  background:color-mix(in srgb,var(--surface) 68%,transparent)}
.featured__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.35rem}
@media(min-width:760px){
  .featured__bg img{object-position:72% 30%;opacity:.3}
  .featured::after{background:linear-gradient(90deg,var(--bg) 32%,rgba(15,13,11,.28) 78%)}
}

/* ============ SERVICES ============ */
.services{padding:clamp(2.5rem,7vw,5rem) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.svc-grid{max-width:var(--wrap);margin:2.2rem auto 0;padding:0 clamp(1.1rem,5vw,3rem);
  display:grid;gap:1rem;grid-template-columns:1fr;list-style:none}
.svc{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:8px;padding:clamp(1.5rem,3.6vw,2.2rem);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.svc:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 22px 44px rgba(0,0,0,.4)}
.svc__no{position:absolute;top:-.6rem;right:.2rem;z-index:0;font-family:var(--display);line-height:1;
  font-size:clamp(4.5rem,13vw,7rem);color:transparent;-webkit-text-stroke:1.5px var(--line-2);
  pointer-events:none;transition:-webkit-text-stroke-color .4s var(--ease)}
.svc:hover .svc__no{-webkit-text-stroke-color:color-mix(in srgb,var(--gold) 60%,transparent)}
.svc h3{position:relative;z-index:1;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:.01em;margin-bottom:.4rem;max-width:12ch}
.svc p{position:relative;z-index:1;color:var(--muted);max-width:42ch}

/* ============ ABOUT ============ */
.about{max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,9vw,6.5rem) clamp(1.1rem,5vw,3rem);
  display:grid;gap:clamp(1.6rem,5vw,3.5rem);grid-template-columns:1fr;align-items:center}
.about__media{position:relative;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.45);max-width:22rem}
.about__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 -80px 60px -40px rgba(15,13,11,.7)}
.about__media img{width:100%;object-fit:cover;aspect-ratio:3/4;filter:contrast(1.04)}
.about__body p{margin-top:1.05rem;color:var(--muted);font-size:1.06rem;max-width:48ch}
.about__body p strong{color:var(--bone)}
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin-top:1.6rem}
.pill-row li{border:1px solid var(--line-2);border-radius:2rem;padding:.42rem .95rem;font-size:.84rem;
  font-weight:600;color:var(--muted)}

/* ============ WORK ============ */
.work{padding:clamp(2.5rem,7vw,5rem) 0}
.gallery{max-width:var(--wrap);margin:2rem auto 0;padding:0 clamp(1.1rem,5vw,3rem);
  display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;grid-auto-flow:dense}
.g{overflow:hidden;border-radius:5px;border:1px solid var(--line);background:var(--surface)}
.g img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);transition:transform .6s var(--ease)}
.g:hover img{transform:scale(1.06)}
.g--tall{grid-row:span 2}
.g--wide{grid-column:span 2}

/* ============ VISIT + MAP ============ */
.visit{background:linear-gradient(180deg,var(--bg),#0a0806);padding:clamp(3rem,8vw,6rem) 0;
  display:grid;gap:clamp(1.8rem,4vw,2.6rem);grid-template-columns:1fr}
.visit>*{max-width:var(--wrap);margin-inline:auto;width:100%}
.visit__body{padding:0 clamp(1.1rem,5vw,3rem)}
.visit__addr{font-style:normal;margin-top:1.2rem;font-size:1.15rem;line-height:1.7;color:var(--muted)}
.visit__addr strong{color:var(--bone);font-weight:700}
.visit__inside{display:inline-block;margin-top:.25rem;font-size:.9rem;color:var(--dim)}
.visit__hours{margin-top:1rem;color:var(--dim);letter-spacing:.04em}
.visit__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
.visit__map{padding:0 clamp(1.1rem,5vw,3rem)}
.visit__frame{display:block;width:100%;height:clamp(320px,58vw,440px);border:1px solid var(--line-2);
  border-radius:8px;box-shadow:0 24px 50px rgba(0,0,0,.45)}

/* ============ FOOTER ============ */
.site-foot{background:#0a0806;padding:clamp(2.6rem,6vw,4rem) clamp(1.1rem,5vw,3rem);display:grid;gap:1.4rem}
.foot__brand p{margin-top:.5rem;color:var(--dim)}
.foot__social{display:flex;gap:1.5rem;font-weight:600}
.foot__social a{color:var(--muted)}
.foot__social a:hover{color:var(--gold)}
.foot__legal{font-size:.8rem;color:var(--dim);border-top:1px solid var(--line);padding-top:1.2rem}

/* ============ STICKY MOBILE CTA (Call + WhatsApp) ============ */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.4);transform:translateY(120%);transition:transform .4s var(--ease)}
.cta-bar.show{transform:none}
.cta-bar__btn{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem .95rem calc(1rem + env(safe-area-inset-bottom));font-weight:800;letter-spacing:.02em;
  font-size:1.02rem;transition:filter .18s var(--ease)}
.cta-bar__btn .ico{width:1.25em;height:1.25em;fill:currentColor}
.cta-bar__btn:active{filter:brightness(.9)}
.cta-bar__call{background:var(--gold);color:#20160a}
.cta-bar__wa{background:#1f9d5b;color:#fff}
/* touch feedback for all buttons (hover doesn't fire on touch) */
.btn:active{transform:translateY(1px) scale(.985)}

/* ============ RESPONSIVE ============ */
@media (min-width:760px){
  .hero__video{display:block}
  .hero__pic{display:none}
  .hero::after{background:linear-gradient(90deg,rgba(15,13,11,.93) 0%,rgba(15,13,11,.5) 42%,rgba(15,13,11,.06) 74%),
    linear-gradient(180deg,rgba(15,13,11,.35) 0%,transparent 44%,rgba(15,13,11,.92) 100%),
    radial-gradient(55% 60% at 88% 12%,rgba(224,167,62,.12),transparent 70%)}
  .svc-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .about{grid-template-columns:minmax(17rem,23rem) 1fr}
  .about__media{max-width:none}
  .visit{grid-template-columns:1.05fr 1fr;align-items:stretch}
  .visit__body{align-self:center}
  .visit__map{display:flex}
  .visit__frame{height:100%;min-height:420px}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:920px){
  .nav{display:flex}
  .head-cta{display:inline-flex}
  .cta-bar{display:none}
  body{padding-bottom:0}
}

/* ============ VERY SMALL SCREENS (<=380px) ============ */
@media (max-width:380px){
  .site-head{gap:.6rem;padding:.6rem 1rem}
  .brand__word{font-size:1.5rem}
  .brand__sub{font-size:.5rem;letter-spacing:.08em}
  .hero__inner{padding-bottom:2.4rem}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
}

/* ============ MOTION SAFETY ============ */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .js .reveal{opacity:1!important;transform:none!important;transition:none}
  .marquee__track{animation:none}
  .g:hover img{transform:none}
}