* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
:root{
  --ink:#0A0A0B;
  --ink-2:#141416;
  --charcoal:#1B1B1D;
  --bone:#F1ECE3;
  --stone:#9C9A93;
  --stone-dim:#6E6C67;
  --red:#C21F1F;
  --red-dim:#8F1717;
  --oak:#A87C4F;
  --line:rgba(241,236,227,0.12);
}
html{
  scroll-behavior:smooth;
}
#nosotros{
  scroll-margin-top:88px;
}
#servicios{
  scroll-margin-top:88px;
}
#galeria{
  scroll-margin-top:88px;
}
#valoraciones{
  scroll-margin-top:88px;
}
#ubicacion{
  scroll-margin-top:88px;
}
::selection{
  background:var(--red);
  color:var(--bone);
}
a{
  color:inherit;
  text-decoration:none;
}
img{
  display:block;
  max-width:100%;
}
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
.eyebrow{
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--stone);
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width:18px;
  height:2px;
  background:var(--red);
  margin-right:10px;
  vertical-align:middle;
}
h1, h2, h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.05;
}
.slash{
  font-style:italic;
  color:var(--red);
  font-weight:400;
}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  padding:22px 0;
  transition:background 0.35s ease, padding 0.35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(10,10,11,0.88);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-mark{
  width:38px;
  height:38px;
  border:1px solid var(--bone);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fraunces', serif;
  font-size:16px;
  position:relative;
  flex-shrink:0;
}
.logo-mark::after{
  content:'';
  position:absolute;
  left:15%;
  right:15%;
  top:48%;
  height:2px;
  background:var(--red);
}
.logo-text{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.3;
}
.logo-text span{
  display:block;
  font-size:10px;
  color:var(--stone);
  letter-spacing:0.18em;
}
nav.links{
  display:flex;
  gap:36px;
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
nav.links a{
  position:relative;
  padding-bottom:4px;
  color:var(--bone);
  opacity:0.85;
  transition:opacity .2s;
}
nav.links a:hover{
  opacity:1;
}
nav.links a::after{
  content:'';
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:1px;
  background:var(--red);
  transition:right .25s ease;
}
nav.links a:hover::after{
  right:0;
}
.btn{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:13px 26px;
  border:1px solid var(--bone);
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
  white-space:nowrap;
}
.btn:hover{
  transform:translateY(-2px);
}
.btn-primary{
  background:var(--red);
  border-color:var(--red);
  color:var(--bone);
}
.btn-primary:hover{
  background:var(--red-dim);
  border-color:var(--red-dim);
}
.btn-ghost{
  border-color:var(--line);
  color:var(--bone);
}
.btn-ghost:hover{
  border-color:var(--bone);
}
.nav-cta{
  display:flex;
  align-items:center;
  gap:18px;
}

/* ---- Mobile hamburger menu ---- */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:38px;
  height:38px;
  background:transparent;
  border:1px solid var(--line);
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.menu-toggle span{
  display:block;
  width:18px;
  height:1.5px;
  background:var(--bone);
  transition:transform .3s ease, opacity .3s ease;
}
body.menu-open .menu-toggle span:nth-child(1){
  transform:translateY(6.5px) rotate(45deg);
}
body.menu-open .menu-toggle span:nth-child(2){
  opacity:0;
}
body.menu-open .menu-toggle span:nth-child(3){
  transform:translateY(-6.5px) rotate(-45deg);
}
.mobile-nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,10,11,0.6);
  backdrop-filter:blur(2px);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
body.menu-open .mobile-nav-backdrop{
  opacity:1;
  pointer-events:auto;
}
body.menu-open{
  overflow:hidden;
}
.mobile-nav{
  position:fixed;
  top:0;
  right:0;
  height:100dvh;
  width:min(80vw, 320px);
  background:var(--ink-2);
  border-left:1px solid var(--line);
  z-index:95;
  padding:96px 30px 40px;
  display:flex;
  flex-direction:column;
  gap:30px;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
}
body.menu-open .mobile-nav{
  transform:translateX(0);
}
.mobile-nav-links{
  display:flex;
  flex-direction:column;
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.mobile-nav-links a{
  padding:15px 0;
  border-bottom:1px solid var(--line);
  color:var(--bone);
  opacity:0.92;
  transition:opacity .2s ease, padding-left .2s ease;
}
.mobile-nav-links a:hover,
.mobile-nav-links a:active{
  opacity:1;
  padding-left:6px;
  color:var(--red);
}
.mobile-nav-cta{
  margin-top:4px;
  justify-content:center;
  text-align:center;
}
.mobile-nav-phone{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--stone);
  text-align:center;
}
.nav-cta .btn .short{
  display:none;
}

/* ---- Gallery: "Cortes" carousel (autoplay + manual arrows) ---- */
.cortes-slideshow{
  background:var(--ink-2);
}
.cortes-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.cortes-slide.active{
  opacity:1;
  pointer-events:auto;
}
.cortes-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(0.35) contrast(1.05);
}
.cortes-slideshow:hover .cortes-slide img{
  filter:grayscale(0) contrast(1.05);
}
.cortes-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(241,236,227,0.35);
  background:rgba(10,10,11,0.55);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--bone);
  padding:0;
  transition:background .25s ease, border-color .25s ease, transform .2s ease;
}
.cortes-arrow:hover{
  background:var(--red);
  border-color:var(--red);
}
.cortes-arrow:active{
  transform:translateY(-50%) scale(0.9);
}
.cortes-arrow svg{
  width:16px;
  height:16px;
  display:block;
}
.cortes-arrow-prev{ left:10px; }
.cortes-arrow-next{ right:10px; }

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  padding-bottom:90px;
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
}
.hero-eyebrow{
  color:var(--bone);
  opacity:0.9;
}
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
  max-width:14ch;
  margin-top:22px;
}
.hero p.lede{
  font-family:'Inter', sans-serif;
  font-size:17px;
  color:var(--stone);
  max-width:46ch;
  margin-top:24px;
}
.hero-ctas{
  display:flex;
  gap:16px;
  margin-top:38px;
  flex-wrap:wrap;
}
section{
  padding:120px 0;
  position:relative;
}
.section-head{
  margin-bottom:64px;
  max-width:640px;
}
.section-head h2{
  font-size:clamp(2rem, 3.6vw, 3rem);
  margin-top:16px;
}
.about{
  border-top:1px solid var(--line);
}
.about-grid{
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:80px;
  align-items:center;
}
.about-text p{
  color:var(--stone);
  font-size:16px;
  margin-top:20px;
  max-width:48ch;
}
.about-text p:first-of-type{
  margin-top:26px;
}
.about-figures{
  display:flex;
  gap:40px;
  margin-top:46px;
}
.figure{
  font-family:'Fraunces', serif;
}
.figure .num{
  font-size:2.6rem;
  color:var(--bone);
}
.figure .num .slash{
  font-size:1.6rem;
}
.figure .label{
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--stone-dim);
  margin-top:6px;
}
.about-photo{
  position:relative;
}
.about-photo img{
  width:100%;
  filter:grayscale(0.15) contrast(1.05);
  border:1px solid var(--line);
}
.about-photo::before{
  content:'';
  position:absolute;
  top:-18px;
  left:-18px;
  width:70px;
  height:70px;
  border-top:2px solid var(--red);
  border-left:2px solid var(--red);
}
.about-photo::after{
  content:'';
  position:absolute;
  bottom:-18px;
  right:-18px;
  width:70px;
  height:70px;
  border-bottom:2px solid var(--red);
  border-right:2px solid var(--red);
}
.barber{
  border-top:1px solid var(--line);
}
.barber-grid{
  display:grid;
  grid-template-columns:0.8fr 1fr;
  gap:80px;
  align-items:center;
}
.barber-photo{
  position:relative;
}
.barber-photo-placeholder{
  width:100%;
  aspect-ratio:4 / 5;
  border:1px solid var(--line);
  background:var(--ink-2);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.barber-photo-placeholder::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(194,31,31,0.08), transparent 60%);
}
.barber-photo-mark{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:clamp(48px, 7vw, 88px);
  color:var(--stone-dim);
  letter-spacing:0.02em;
  position:relative;
}
.barber-photo::before{
  content:'';
  position:absolute;
  top:-18px;
  left:-18px;
  width:70px;
  height:70px;
  border-top:2px solid var(--red);
  border-left:2px solid var(--red);
}
.barber-photo::after{
  content:'';
  position:absolute;
  bottom:-18px;
  right:-18px;
  width:70px;
  height:70px;
  border-bottom:2px solid var(--red);
  border-right:2px solid var(--red);
}
.barber-text p{
  color:var(--stone);
  font-size:16px;
  margin-top:20px;
  max-width:50ch;
}
.barber-text p:first-of-type{
  margin-top:26px;
}
.services{
  background:var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.service-list{
  border-top:1px solid var(--line);
}
.service-row{
  display:grid;
  grid-template-columns:60px 1fr 320px;
  gap:24px;
  align-items:baseline;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  transition:background .25s ease, padding-left .25s ease;
}
.service-row:hover{
  background:rgba(194,31,31,0.045);
  padding-left:14px;
}
.service-num{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  color:var(--red);
  letter-spacing:0.05em;
}
.service-name{
  font-family:'Fraunces', serif;
  font-size:1.5rem;
  font-weight:500;
}
.service-desc{
  color:var(--stone);
  font-size:14.5px;
  line-height:1.6;
}
.services-note{
  margin-top:36px;
  color:var(--stone-dim);
  font-size:13.5px;
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:0.02em;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:14px;
  gap:14px;
}
.gallery-item{
  overflow:hidden;
  position:relative;
  border:1px solid var(--line);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .4s ease;
  filter:grayscale(0.35) contrast(1.05);
}
.gallery-item:hover img{
  transform:scale(1.06);
  filter:grayscale(0) contrast(1.05);
}
.gallery-item.g1{
  grid-column:1 / 4;
  grid-row:span 42;
}
.gallery-item.g2{
  grid-column:4 / 7;
  grid-row:span 22;
}
.gallery-item.g3{
  grid-column:4 / 6;
  grid-row:span 20;
}
.gallery-cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px 18px;
  background:linear-gradient(0deg, rgba(10,10,11,0.85), transparent);
  font-family:'Space Grotesk', sans-serif;
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--bone);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.gallery-item:hover .gallery-cap{
  opacity:1;
  transform:translateY(0);
}
.location{
  border-top:1px solid var(--line);
}
.loc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
}
.loc-card{
  border:1px solid var(--line);
  padding:0;
  overflow:hidden;
}
.loc-photo{
  height:230px;
  overflow:hidden;
}
.loc-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(0.3) contrast(1.05);
}
.loc-details{
  padding:34px;
}
.loc-row{
  display:flex;
  gap:18px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.loc-row:first-child{
  border-top:none;
  padding-top:0;
}
.loc-label{
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--stone-dim);
  width:100px;
  flex-shrink:0;
  padding-top:2px;
}
.loc-value{
  font-size:16px;
  color:var(--bone);
}
.loc-value a:hover{
  color:var(--red);
}
.loc-value .muted{
  color:var(--stone);
  font-size:14px;
  display:block;
  margin-top:4px;
}
.map-embed{
  border:1px solid var(--line);
  filter:invert(0.92) grayscale(0.6) contrast(0.9) brightness(0.95);
  width:100%;
  height:420px;
}
.cta-band{
  border-top:1px solid var(--line);
  padding:100px 0;
  text-align:center;
}
.cta-band h2{
  font-size:clamp(2rem, 5vw, 3.4rem);
  max-width:16ch;
  margin:0 auto;
}
.cta-band .lede{
  color:var(--stone);
  max-width:44ch;
  margin:22px auto 40px;
}
.cta-band-btns{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
footer{
  border-top:1px solid var(--line);
  padding:56px 0 40px;
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
}
.footer-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer-social{
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.footer-social-label{
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--stone-dim);
}
.footer-social-icons{
  display:flex;
  gap:14px;
}
.footer-social-icons a{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bone);
  transition:background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.footer-social-icons a:hover{
  background:var(--red);
  border-color:var(--red);
  transform:translateY(-2px);
}
.footer-social-icons svg{
  width:18px;
  height:18px;
}
.footer-bottom{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  color:var(--stone-dim);
  letter-spacing:0.04em;
  flex-wrap:wrap;
  gap:10px;
}
#i39vnw{
  margin-top:16px;
  margin-bottom:36px;
}
#ijvf3n{
  justify-content:center;
  display:flex;
}
#i5w8eh{
  margin-top:18px;
}
#i2g4l{
  background-repeat:repeat;
  background-position:left top;
  background-attachment:scroll;
  background-size:auto;
  background-image:url('hero.webp');
}
.reviews{
  background:var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:120px 0 100px;
  overflow:hidden;
}
.reviews .section-head{
  max-width:none;
}
.reviews-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.reviews-head-text h2{
  font-size:clamp(2rem, 3.6vw, 3rem);
  margin-top:16px;
  max-width:16ch;
}
.reviews-stats{
  display:flex;
  align-items:center;
  gap:36px;
  flex-wrap:wrap;
}
.reviews-stats .figure .num{
  font-size:2.2rem;
}
.reviews-link{
  font-family:'Space Grotesk', sans-serif;
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--bone);
  border-bottom:1px solid var(--red);
  padding-bottom:3px;
  white-space:nowrap;
  transition:color .2s ease, opacity .2s ease;
  opacity:0.9;
}
.reviews-link:hover{
  color:var(--red);
  opacity:1;
}
.reviews-marquee{
  margin-top:64px;
  position:relative;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.reviews-track{
  display:flex;
  width:max-content;
  animation:reviews-scroll 48s linear infinite;
}
.reviews-track:hover{
  animation-play-state:paused;
}
.reviews-track:focus-within{
  animation-play-state:paused;
}
.reviews-set{
  display:flex;
  gap:20px;
  padding:0 10px;
}
.review-card{
  flex:0 0 340px;
  background:var(--ink);
  border:1px solid var(--line);
  padding:30px 28px 26px;
  position:relative;
}
.review-card::before{
  content:'“';
  position:absolute;
  top:6px;
  right:20px;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:3.4rem;
  color:var(--red);
  opacity:0.16;
  line-height:1;
  pointer-events:none;
}
.review-top{
  display:flex;
  align-items:center;
  gap:14px;
}
.review-avatar{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fraunces', serif;
  font-size:16px;
  color:var(--bone);
  background:color-mix(in srgb, var(--av) 55%, var(--ink-2));
  border:1px solid color-mix(in srgb, var(--av) 70%, transparent);
}
.review-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:14.5px;
  letter-spacing:0.01em;
}
.review-verified{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--stone-dim);
}
.review-verified svg{
  width:11px;
  height:11px;
  fill:var(--oak);
  flex-shrink:0;
}
.review-stars{
  margin-top:18px;
  color:var(--oak);
  font-size:14px;
  letter-spacing:2px;
}
.review-quote{
  margin-top:14px;
  color:var(--bone);
  font-size:15px;
  line-height:1.6;
  max-width:42ch;
}
.review-meta{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'Space Grotesk', sans-serif;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--stone-dim);
}
.review-date{
  color:var(--stone);
}
#ip1pbl{
  --av:var(--red);
}
#iz0crp{
  --av:var(--oak);
}
#ivklth{
  --av:var(--red);
}
#ibe91u{
  --av:var(--oak);
}
#il1hgf{
  --av:var(--red);
}
#i8524i{
  --av:var(--oak);
}
#im12ed{
  --av:var(--red);
}
#inemyr{
  --av:var(--oak);
}
#ipe51g{
  --av:var(--red);
}
#iwoo1k{
  --av:var(--oak);
}
#ipe6oi{
  --av:var(--red);
}
#iq4ve9{
  --av:var(--oak);
}
#irtb8x{
  font-family:"Google Sans", Arial, sans-serif;
  font-size:16px;
  font-weight:700;
  border-bottom:0px rgb(230, 232, 240);
}
#i0g7ud{
  font-family:"Google Sans", Arial, sans-serif;
  font-size:16px;
  font-weight:700;
  border-bottom:0px rgb(230, 232, 240);
}
#iga31g{
  font-family:"Google Sans", Arial, sans-serif;
  font-size:16px;
  font-weight:700;
  border-bottom:0px rgb(230, 232, 240);
}
#ioztrq{
  font-family:"Google Sans", Arial, sans-serif;
  font-size:16px;
  font-weight:700;
  border-bottom:0px rgb(230, 232, 240);
}
#i4mpyt{
  font-family:"Google Sans", Arial, sans-serif;
  font-size:16px;
  font-weight:700;
  border-bottom:0px rgb(230, 232, 240);
}
#imyo3l{
  font-family:"Google Sans", Arial, sans-serif;
  font-size:16px;
  font-weight:700;
  border-bottom:0px rgb(230, 232, 240);
}
#id0tv{
  color:#f80202;
}
#ih1s6{
  color:#fa0000;
}
#im9iz{
  color:#f80606;
}
#iq4nla{
  color:#fff4f4;
}
#ibjuvj{
  background-repeat:repeat, repeat, repeat, repeat-x, repeat;
  background-position:left top, center top, center top, center center, center center;
  background-attachment:scroll, scroll, scroll, scroll, scroll;
  background-size:cover, cover, cover, cover, cover;
  background-image:url('fondo-1.webp'), url('fondo-2.webp'), url('fondo-3.webp'), url('fondo-4.webp'), url('fondo-5.webp');
  transition:height 2s ease-in;
}
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .reviews-track{
    animation:none;
  }
  .reviews-marquee{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}
@keyframes reviews-scroll{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}
@media (max-width: 900px){
  #i2g4l{
    background-repeat:no-repeat;
    background-position:center 18%;
    background-size:cover;
    background-attachment:scroll;
  }
  .wrap{
    padding:0 22px;
  }
  nav.links{
    display:none;
  }
  .menu-toggle{
    display:flex;
  }
  .about-grid{
    grid-template-columns:1fr;
    gap:50px;
  }
  .about-photo{
    order:-1;
  }
  .barber-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .about-figures{
    flex-wrap:wrap;
    gap:28px 36px;
  }
  .loc-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .service-row{
    grid-template-columns:34px 1fr;
  }
  .service-row .service-desc{
    grid-column:2 / 3;
  }
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .gallery-item.g1{
    grid-column:1/3;
    grid-row:span 28;
  }
  .gallery-item.g2{
    grid-column:1/2;
    grid-row:span 20;
  }
  .gallery-item.g3{
    grid-column:2/3;
    grid-row:span 20;
  }
  section{
    padding:80px 0;
  }
  .hero{
    padding-bottom:60px;
  }
  .nav-cta{
    gap:12px;
  }
  .nav-cta .btn{
    padding:11px 18px;
  }
  .nav-cta .btn span.full{
    display:none;
  }
  .nav-cta .btn .short{
    display:inline;
  }
  .reviews{
    padding:90px 0 80px;
  }
  .reviews-head{
    align-items:flex-start;
  }
  .review-card{
    flex-basis:290px;
  }
  .map-embed{
    height:300px;
  }
}
@media (max-width: 480px){
  .reviews-marquee{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .review-card{
    flex-basis:260px;
    padding:24px 22px 22px;
  }
  .wrap{
    padding:0 18px;
  }
  section{
    padding:64px 0;
  }
  .hero{
    min-height:92vh;
    padding-bottom:44px;
  }
  .hero-ctas .btn{
    flex:1 1 auto;
    justify-content:center;
    text-align:center;
  }
  .logo-text{
    font-size:11.5px;
  }
  .logo-text span{
    font-size:9px;
  }
  .about-figures{
    gap:22px 30px;
  }
  .figure .num{
    font-size:2.1rem;
  }
  .service-row{
    padding:24px 0;
  }
  .service-name{
    font-size:1.22rem;
  }
  .gallery-grid{
    gap:10px;
  }
  .loc-details{
    padding:26px 22px;
  }
  .loc-row{
    gap:12px;
  }
  .loc-label{
    width:78px;
    font-size:10px;
  }
  .map-embed{
    height:240px;
  }
  .mobile-nav{
    width:82vw;
    padding:88px 24px 32px;
  }
  .cta-band{
    padding:70px 0;
  }
}

/* =========================================================
   Animaciones y transiciones — entrada, scroll y fuentes
   ========================================================= */

/* ---- Reveal on scroll: bloques y tarjetas (fade + elevación marcada) ---- */
.reveal{
  opacity:0;
  transform:translateY(56px);
  transition:opacity 1.1s cubic-bezier(.16,.8,.24,1), transform 1.1s cubic-bezier(.16,.8,.24,1);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---- Reveal de texto: eyebrows, títulos, párrafos ---- */
.reveal-text{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity, transform;
}
.reveal-text.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---- Reveal de imágenes/fotografías: fade + escala más perceptible ---- */
.reveal-img{
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.3s cubic-bezier(.16,.8,.24,1), transform 1.3s cubic-bezier(.16,.8,.24,1);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity, transform;
}
.reveal-img.is-visible{
  opacity:1;
  transform:scale(1);
}

/* ---- Pantalla de carga inicial ---- */
html.is-loading{
  overflow:hidden;
  height:100%;
}
.preloader{
  position:fixed;
  inset:0;
  z-index:999;
  background:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
}
html.is-loaded .preloader{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.preloader-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.preloader-word{
  font-family:'Fraunces', serif;
  font-size:clamp(26px, 4.4vw, 42px);
  letter-spacing:0.02em;
  color:var(--bone);
  opacity:0;
  animation:preloaderIn .7s cubic-bezier(.16,.8,.24,1) .1s forwards;
}
.preloader-word .accent{
  color:var(--red);
  font-style:italic;
}
.preloader-line{
  width:64px;
  height:2px;
  background:var(--line);
  position:relative;
  overflow:hidden;
  opacity:0;
  animation:preloaderIn .5s ease .35s forwards;
}
.preloader-line::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  animation:preloaderLine 1.05s cubic-bezier(.65,0,.35,1) .45s forwards;
}
@keyframes preloaderIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes preloaderLine{
  to{ transform:scaleX(1); }
}

/* ---- Entrada de la cabecera y el hero: se disparan justo cuando la carga termina ---- */
header#site-header{
  opacity:0;
}
html.is-loaded header#site-header{
  animation:headerFade .8s ease .05s forwards;
}
@keyframes headerFade{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:translateY(0); }
}
.logo-mark::after{
  transform:scaleX(0);
  transform-origin:left;
}
html.is-loaded .logo-mark::after{
  animation:logoLine .7s cubic-bezier(.16,.8,.24,1) .55s forwards;
}
@keyframes logoLine{
  to{ transform:scaleX(1); }
}

.hero .hero-eyebrow,
.hero h1,
.hero .lede,
.hero .hero-ctas{
  opacity:0;
}
html.is-loaded .hero .hero-eyebrow{
  animation:heroRise 1.1s cubic-bezier(.16,.8,.24,1) .3s forwards;
}
html.is-loaded .hero h1{
  animation:heroRise 1.2s cubic-bezier(.16,.8,.24,1) .5s forwards;
}
html.is-loaded .hero .lede{
  animation:heroRise 1.2s cubic-bezier(.16,.8,.24,1) .7s forwards;
}
html.is-loaded .hero .hero-ctas{
  animation:heroRise 1.2s cubic-bezier(.16,.8,.24,1) .9s forwards;
}
@keyframes heroRise{
  from{ opacity:0; transform:translateY(46px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---- Micro-transición extra en botones y filas de servicio ---- */
.service-row{
  transition:transform .35s cubic-bezier(.16,.8,.24,1), border-color .35s ease;
}
.service-row:hover{
  transform:translateX(6px);
}

/* ---- Respeta accesibilidad: sin animaciones si el usuario las desactiva ---- */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-text, .reveal-img{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  header#site-header,
  .hero .hero-eyebrow, .hero h1, .hero .lede, .hero .hero-ctas,
  .logo-mark::after{
    opacity:1 !important;
    animation:none !important;
    transform:none !important;
  }
  .service-row:hover{
    transform:none;
  }
  .preloader{
    transition:opacity .15s ease, visibility .15s ease;
  }
  .preloader-word, .preloader-line, .preloader-line::after{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ---- Sin JavaScript: nunca dejar la web bloqueada tras la carga ---- */
html.no-js .preloader{
  display:none;
}
html.no-js{
  overflow:visible !important;
  height:auto !important;
}
html.no-js header#site-header,
html.no-js .hero .hero-eyebrow,
html.no-js .hero h1,
html.no-js .hero .lede,
html.no-js .hero .hero-ctas,
html.no-js .reveal,
html.no-js .reveal-text,
html.no-js .reveal-img{
  opacity:1 !important;
  animation:none !important;
  transform:none !important;
}