/* =============================================================
   1. Tokens
   ============================================================= */
:root{
  --bg:        #100c09;
  --bg-2:      #17110c;
  --bg-3:      #211810;
  --cream:     #f2e9da;
  --cream-2:   #ddd0ba;
  --cream-3:   #8b7d68;
  --accent:    #a5322d;   /* rojo real del poste de barbero, muestreado de la foto */
  --accent-2:  #7f231f;
  --blue:      #2e77aa;   /* azul real del poste */
  --blue-soft: #5a95c2;
  --gold:      var(--blue); /* alias: donde antes se usaba dorado, ahora azul de marca real */
  --line:      rgba(242,233,218,.14);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --serif: "Fraunces", serif;
  --sans: "Inter", system-ui, sans-serif;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  font-size:16px; line-height:1.6;
  background: var(--bg); color: var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img, svg{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
h1,h2,h3{ font-family:var(--serif); text-wrap:balance; line-height:1.08; letter-spacing:-0.01em; font-weight:600; }
::selection{ background:var(--accent); color:var(--bg); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip-link{ position:fixed; top:-100px; left:1rem; padding:.6rem 1rem; background:var(--cream); color:var(--bg); z-index:9999; border-radius:8px; font-weight:600; }
.skip-link:focus{ top:1rem; }

.wrap{ max-width:1140px; margin:0 auto; padding:0 1.25rem; }
.kicker{ font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); font-weight:600; margin-bottom:.6rem; }

/* =============================================================
   3. Components
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:999px; font-weight:600; font-size:.95rem;
  transition: transform .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn-primary{ background:var(--accent); color:var(--bg); }
.btn-primary:hover{ background:var(--gold); transform:translateY(-2px); box-shadow:0 10px 30px rgba(184,113,46,.35); }
.btn-ghost{ border:1.5px solid var(--line); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* =============================================================
   4. Nav
   ============================================================= */
.nav{ position:sticky; top:0; z-index:100; background:rgba(16,12,9,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-inner{ max-width:1140px; margin:0 auto; padding:.9rem 1.25rem; display:flex; align-items:center; gap:1.5rem; }
.nav-brand{ font-family:var(--serif); font-weight:700; font-size:1.15rem; margin-right:auto; }
.nav-brand-accent{ color:var(--gold); font-style:italic; }
.nav-links{ display:none; gap:1.5rem; font-size:.9rem; color:var(--cream-2); }
.nav-links a:hover{ color:var(--gold); }
@media (min-width:720px){ .nav-links{ display:flex; } }
.nav-cta{ padding:.6rem 1.2rem; font-size:.85rem; }

/* =============================================================
   5. Hero
   ============================================================= */
.hero{ position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg-tint{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,12,9,.55) 0%, rgba(16,12,9,.35) 40%, rgba(16,12,9,.96) 100%); }
.hero-grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>'); }
/* Borde "pincelada" al pie del hero: la foto se funde con el fondo en vez de cortar en línea recta */
.hero-tear{ position:absolute; left:0; right:0; bottom:-2px; width:100%; height:clamp(40px,6vw,85px); z-index:2; fill:var(--bg); pointer-events:none; }
.hero-inner{ position:relative; z-index:3; max-width:1140px; margin:0 auto; padding:0 1.25rem 4.5rem; width:100%; }
.hero-top-row{ display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.hero-meta{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--cream-2); }
.hero-meta .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }
.hero-title{ font-size:clamp(2.4rem, 6vw, 4.4rem); }
.hero-title em{ color:var(--gold); font-style:italic; }
.hero-loc{ margin-top:1rem; color:var(--cream-2); font-size:1.05rem; max-width:40ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* El "7" de "7 años" como mini poste de barbero girando, inline con el texto */
.pole-seven{
  position:relative; display:inline-block; vertical-align:-0.55em;
  width:2.6em; height:2.6em; border-radius:50%; overflow:hidden;
  border:2.5px solid var(--cream); margin-right:.3em;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.pole-seven::before{
  content:""; position:absolute; inset:-30% -90%;
  background:repeating-linear-gradient(
    45deg,
    var(--accent) 0 11px,
    var(--cream) 11px 17px,
    var(--blue) 17px 28px,
    var(--cream) 28px 34px
  );
  animation: poleSevenSpin 3.5s linear infinite;
}
@keyframes poleSevenSpin{ from{ transform:translateX(0); } to{ transform:translateX(-68px); } }
.pole-seven-digit{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  font-family:var(--serif); font-weight:700; font-size:1.15em; color:var(--cream);
  text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9);
}
@media (prefers-reduced-motion: reduce){ .pole-seven::before{ animation:none; } }

/* Sello vintage de barbería — insignia circular con texto en arco, estilo real */
.crest-badge{
  width:150px; height:150px; flex-shrink:0;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.55));
}
@media (min-width:540px){ .crest-badge{ width:190px; height:190px; } }
.crest-ring-outer{ fill:none; stroke:var(--cream); stroke-width:2; opacity:.9; }
.crest-ring-inner{ fill:none; stroke:var(--cream); stroke-width:1; opacity:.55; }
.crest-arc-text textPath{
  font-family:"Rye", serif; fill:var(--cream);
  font-size:12.5px; letter-spacing:.5px;
}
.crest-monogram{
  font-family:"Pirata One", serif; fill:var(--accent-2);
  font-size:44px; paint-order:stroke; stroke:var(--cream); stroke-width:1.4px;
}
.crest-since{
  font-family:"Rye", serif; fill:var(--blue-soft);
  font-size:9px; letter-spacing:1.5px;
}

/* =============================================================
   6. Sections
   ============================================================= */
section{ padding:clamp(3.5rem,8vw,6rem) 0; border-top:1px solid var(--line); }
.about{ border-top:none; }
.about-text{ max-width:62ch; color:var(--cream-2); font-size:1.08rem; margin-top:.8rem; }
h2{ font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:.4rem; }

/* Servicios */
.servicios-grid{ display:grid; gap:1rem; margin-top:2rem; grid-template-columns:1fr; }
@media (min-width:720px){ .servicios-grid{ grid-template-columns:repeat(2,1fr); } }
.servicio-card{ background:var(--bg-3); border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.6rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:border-color .3s var(--ease-out), transform .3s var(--ease-out); }
.servicio-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.servicio-nombre{ font-family:var(--serif); font-size:1.15rem; }
.servicio-precio{ color:var(--gold); font-weight:600; white-space:nowrap; }
.servicios-note{ margin-top:1.4rem; color:var(--cream-3); font-size:.9rem; }

/* Galeria */
.galeria-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:2rem; }
.galeria-item{ flex:1 1 calc(50% - .45rem); max-width:calc(50% - .45rem); border-radius:12px; overflow:hidden; aspect-ratio:4/5; }
@media (min-width:720px){ .galeria-item{ flex-basis:calc(33.333% - .6rem); max-width:calc(33.333% - .6rem); } }
.galeria-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.galeria-item:hover img{ transform:scale(1.15); }

/* Resenas */
.resenas-inner{ text-align:center; max-width:640px; margin:0 auto; }
.resenas-text{ color:var(--cream-2); margin:.8rem 0 1.6rem; }

/* Cinta de reseñas reales, moviéndose de derecha a izquierda, efecto "coverflow" (más grande y por delante en el centro) */
.resenas-marquee{
  overflow:hidden; margin:2rem 0; padding:1.4rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.resenas-track{ display:flex; gap:1.1rem; width:max-content; will-change:transform; }
.resena-card{
  flex:0 0 300px; background:var(--bg-3); border:1px solid var(--line); border-radius:14px;
  padding:1.3rem 1.5rem;
  transform:scale(.85); opacity:.65;
  transition:transform .12s linear, opacity .12s linear, box-shadow .12s linear;
}
.resena-card.is-focus{ box-shadow:0 18px 40px rgba(0,0,0,.5); border-color:var(--gold); }
.resena-stars{ color:var(--gold); letter-spacing:2px; font-size:.9rem; }
.resena-text{ margin-top:.6rem; color:var(--cream-2); font-size:.92rem; line-height:1.55; }
.resena-autor{ margin-top:.9rem; font-weight:600; color:var(--cream); font-size:.88rem; }

/* Horario */
.horario-inner{ display:grid; gap:2rem; grid-template-columns:1fr; }
.horario-text{ max-width:520px; }
.horario-list{ list-style:none; margin-top:1.2rem; display:flex; flex-direction:column; gap:.6rem; }
.horario-list li{ display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line); color:var(--cream-2); }

/* Contacto */
.contacto-address{ margin-top:.6rem; color:var(--cream-2); }
.contacto-phone{ margin-top:.3rem; }
.contacto-phone a{ color:var(--gold); font-weight:600; }
/* Mapa: imagen real, enlaza directo a Google Maps (nunca carga nada de Google en la propia página) */
.mapa-imagen{
  position:relative; display:block; margin:1.6rem auto 0; max-width:420px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line);
}
.mapa-imagen img{ width:100%; height:auto; display:block; transition:transform .5s var(--ease-out); }
.mapa-imagen:hover img{ transform:scale(1.04); }
.mapa-imagen-badge{
  position:absolute; left:1rem; bottom:1rem; background:var(--accent); color:var(--bg);
  padding:.6rem 1.1rem; border-radius:999px; font-weight:600; font-size:.9rem;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}

/* FAQ */
.faq-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.8rem; }
.faq-item{ background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:1.2rem 1.4rem; }
.faq-q{ font-weight:600; margin-bottom:.4rem; }
.faq-a{ color:var(--cream-2); font-size:.95rem; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding:2rem 0; }
.footer-inner{ display:flex; flex-direction:column; gap:.4rem; align-items:center; text-align:center; color:var(--cream-3); font-size:.85rem; }
.footer-small a{ color:var(--gold); }
.foot-legal{ font-size:.8rem; }
.foot-legal a{ color:var(--cream-3); text-decoration:underline; }
.foot-legal a:hover{ color:var(--blue-soft); }

/* Páginas legales */
.legal-page{ padding-top:clamp(3rem,7vw,4.5rem); }
.legal-content{ max-width:70ch; }
.legal-content h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.4rem; }
.legal-updated{ color:var(--cream-3); font-size:.9rem; margin-bottom:2rem; }
.legal-content h2{ font-size:1.3rem; margin-top:2.2rem; margin-bottom:.6rem; }
.legal-content p{ color:var(--cream-2); line-height:1.7; margin-bottom:1rem; }
.legal-content ul{ color:var(--cream-2); line-height:1.8; margin:0 0 1rem 1.2rem; }
.legal-content a{ color:var(--blue-soft); text-decoration:underline; }
.legal-note{ margin-top:2.5rem; font-size:.85rem; font-style:italic; color:var(--cream-3); border-top:1px solid var(--line); padding-top:1.2rem; }


/* WhatsApp flotante, fijo abajo a la derecha, no se mueve al hacer scroll */
.whatsapp-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:150;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 30px rgba(0,0,0,.55); }
.whatsapp-float svg{ width:30px; height:30px; fill:#fff; }

/* Tijeras de scroll: fijas a la derecha, bajan y "cortan" según el avance de scroll */
.scroll-scissors{ display:none; position:fixed; right:26px; top:0; bottom:0; width:2px; z-index:140; pointer-events:none; }
@media (min-width:960px){ .scroll-scissors{ display:block; } }
.scissors-track{ position:absolute; inset:0; background:var(--line); }
.scissors-track-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background:var(--accent); }
.scissors-icon{
  position:absolute; left:50%; top:0%; width:52px; height:35px; max-width:none;
  transform:translate(-80%,-50%);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
.scissors-icon path{ fill:var(--cream); }
.scissors-icon .pivot{ fill:var(--accent); }
.scissors-icon .handle{ fill:none; stroke:var(--cream); stroke-width:2.6; }
.scissors-icon .blade-top-g{ transition:transform .13s ease-out; transform:rotate(9deg); }
.scissors-icon .blade-bottom-g{ transition:transform .13s ease-out; transform:rotate(-9deg); }
.scissors-icon.snip .blade-top-g{ transform:rotate(-5deg); }
.scissors-icon.snip .blade-bottom-g{ transform:rotate(5deg); }

/* =============================================================
   7. Reveal animation
   ============================================================= */
.reveal{ opacity:1; }
.reveal.pre{ opacity:0; transform:translateY(24px); }
.reveal.in{ opacity:1; transform:translateY(0); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* Reveal en cascada: cada tarjeta/foto aparece por su cuenta, no la sección entera de golpe */
.reveal-item{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:var(--stagger-delay, 0s); }
.reveal-item.in{ opacity:1; transform:translateY(0); }

/* =============================================================
   8. Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal.pre{ opacity:1; transform:none; }
  .reveal-item{ opacity:1; transform:none; transition:none; }
  .galeria-item img{ transition:none; }
  .resenas-track{ animation:none; }
  .resenas-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}