/* Faure's Barber Shop · Sabaneta
   Concepto: su lema "El negocio puede ser pequeño, pero la visión tiene que ser grande".
   Negro y oro como su logo, poste de barbero, degradados como los de sus cortes.
   Letras: Playfair Display (titulares, con cursivas) + Manrope (texto). */
:root{
  --negro:#0d0c0a;
  --negro-2:#17150f;
  --oro:#d4a93c;
  --oro-claro:#f1d47e;
  --oro-osc:#8f6b1d;
  --hueso:#f3ecdc;
  --gris:#a49a85;
  --rojo-poste:#b8312f;
  --linea:rgba(212,169,60,.22);
  --f-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-texto:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --barra-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --oro-grad:linear-gradient(100deg,var(--oro-osc) 0%,var(--oro) 30%,var(--oro-claro) 50%,var(--oro) 70%,var(--oro-osc) 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra-h) + 10px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--hueso);font:400 17.5px/1.65 var(--f-texto);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
em{font-style:italic;color:var(--oro)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-999px;top:8px;z-index:300;background:var(--oro);color:var(--negro);padding:8px 14px}
.saltar:focus{left:12px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

.etiqueta{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:700 11.5px/1 var(--f-texto);letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.etiqueta::before{content:"";width:28px;height:1px;background:var(--oro)}
.h2{font:700 clamp(42px,6vw,92px)/1 var(--f-display);letter-spacing:-.015em;margin:0;text-wrap:balance}
.cabeza{max-width:1320px;margin:0 auto 52px;padding:0 var(--gutter)}
.sub{color:var(--gris);margin:18px 0 0;max-width:52ch;text-wrap:pretty}

.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:700 14.5px/1 var(--f-texto);letter-spacing:.04em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:color .4s var(--ease),transform .3s var(--ease)}
.btn-oro{background:var(--oro-grad);background-size:220% 100%;background-position:100% 0;color:var(--negro);transition:background-position .7s var(--ease),transform .3s var(--ease)}
.btn-oro:hover{background-position:0 0;transform:translateY(-2px)}
.btn-linea{border-color:var(--linea);color:var(--hueso)}
.btn-linea:hover{border-color:var(--oro);color:var(--oro-claro)}
.btn-chico{min-height:42px;padding:0 18px;font-size:13.5px}

/* Precarga */
.precarga{display:none}
.js .precarga{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--negro);animation:precarga-fuera 0s 5s forwards}
.precarga img,.precarga .aro{grid-area:1/1;width:min(200px,50vw);height:auto}
.aro{overflow:visible}
.aro circle{fill:none;stroke:var(--oro);stroke-width:2;stroke-dasharray:591;stroke-dashoffset:591;transform-origin:center;transform:rotate(-90deg) scale(1.12)}
@keyframes precarga-fuera{to{visibility:hidden;opacity:0}}

/* Barra */
.barra{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:20px;height:calc(var(--barra-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));transition:background .4s,box-shadow .4s}
.barra.solida{background:rgba(13,12,10,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--linea)}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{width:46px;height:46px}
.marca span{display:flex;flex-direction:column;font:italic 700 22px/1 var(--f-display);color:var(--oro-claro)}
.marca small{font:700 9px/1 var(--f-texto);font-style:normal;letter-spacing:.32em;text-transform:uppercase;color:var(--gris);margin-top:4px}
.barra-nav{display:none;gap:30px;margin-left:auto}
.barra-nav a{text-decoration:none;font-weight:600;font-size:14.5px;color:var(--hueso);opacity:.8;transition:opacity .3s,color .3s}
.barra-nav a:hover{opacity:1;color:var(--oro-claro)}
.barra .btn{margin-left:auto;flex-shrink:0}
@media (max-width:480px){.marca span{font-size:19px}.marca img{width:40px;height:40px}.barra .btn-chico{padding:0 14px}}
@media (min-width:960px){.barra-nav{display:flex}.barra .btn{margin-left:6px}}

/* Hero */
.hero{position:relative;display:grid;gap:50px;padding:calc(var(--barra-h) + 46px) var(--gutter) 80px;max-width:1440px;margin:0 auto;align-items:center;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 75% 40%,rgba(212,169,60,.16),transparent 55%)}
/* Poste de barbero: franjas que suben sin parar */
.poste{position:absolute;left:clamp(6px,1.4vw,22px);top:calc(var(--barra-h) + 20px);bottom:40px;width:clamp(10px,1.2vw,16px);border-radius:999px;overflow:hidden;box-shadow:0 0 0 2px var(--oro),0 0 20px rgba(212,169,60,.3);z-index:1}
.poste span{position:absolute;left:0;right:0;top:-120px;bottom:0;background:repeating-linear-gradient(-40deg,var(--hueso) 0 12px,var(--rojo-poste) 12px 24px,var(--hueso) 24px 36px,#1f4fa0 36px 48px);animation:poste 2.4s linear infinite}
@keyframes poste{to{transform:translateY(96px)}}
.hero-texto{position:relative;z-index:2;padding-left:clamp(14px,2vw,24px)}
.lema{margin:0 0 14px;font:700 clamp(30px,5.4vw,58px)/1.04 var(--f-display);letter-spacing:-.015em}
.lema>span{display:block}
.peq{display:inline-block;font-size:.62em;font-style:italic;color:var(--gris);transform-origin:left center}
.l4{line-height:.9}
.grande{display:inline-block;font:italic 900 clamp(96px,22vw,250px)/.88 var(--f-display);letter-spacing:-.04em;background:var(--oro-grad);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .06em 0;transform-origin:left bottom}
.anima .grande{animation:oro 5s ease-in-out 3s infinite}
@keyframes oro{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.firma{margin:0 0 26px;font:italic 500 17px/1 var(--f-display);color:var(--gris)}
.hero-sub{max-width:46ch;margin:0 0 28px;color:#d9d0bb;font-size:clamp(16.5px,1.3vw,18.5px);text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.nota-google{margin:0;color:var(--gris);font-size:14.5px}
.nota-google b{font:700 26px/1 var(--f-display);color:var(--oro-claro)}
.estrellas{color:var(--oro);letter-spacing:2px}
/* Medallon: el video de cortes dentro de un aro como el del logo */
.medallon{position:relative;margin:0;justify-self:center;width:min(100%,520px);aspect-ratio:1}
.medallon-aro{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.aro-ext{fill:none;stroke:var(--oro);stroke-width:2.4}
.aro-int{fill:none;stroke:var(--oro);stroke-width:1}
.medallon-aro text{font:700 8.4px var(--f-texto);letter-spacing:.32em;fill:var(--oro-claro)}
.medallon-aro .giro{transform-origin:100px 100px;animation:giro 30s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.medallon-video{position:absolute;inset:12.5%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px var(--negro),0 0 0 6px var(--oro-osc),0 30px 60px -10px rgba(0,0,0,.8)}
.medallon-video video{width:100%;height:100%;object-fit:cover}
@media (min-width:960px){
  .hero{grid-template-columns:1.15fr .85fr;min-height:100svh;gap:60px}
  .grande{font-size:clamp(140px,13vw,240px)}
}

/* Cortes: aparecen como un degradado */
.cortes{padding:120px 0 110px;border-top:1px solid var(--linea)}
.galeria{list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:1320px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.corte{position:relative;overflow:hidden;border-radius:14px;background:var(--negro-2)}
.corte img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1s var(--ease),filter .6s}
.corte:hover img{transform:scale(1.05);filter:brightness(1.08)}
.corte span{position:absolute;left:10px;bottom:10px;padding:7px 12px;border-radius:999px;background:rgba(13,12,10,.75);backdrop-filter:blur(6px);font:600 12.5px/1 var(--f-texto);color:var(--oro-claro)}
.c1{grid-column:1/-1}.c1 img{aspect-ratio:4/3;object-position:50% 35%}
@media (min-width:900px){
  /* 4 columnas sin huecos: c1 ocupa 2x2, c2-c5 llenan el lado, c6 y c7 hacen la ultima fila */
  .galeria{grid-template-columns:repeat(4,1fr);gap:18px}
  .c1{grid-column:1/3;grid-row:1/3}.c1 img{aspect-ratio:auto}
  .c6{grid-column:1/3}.c7{grid-column:3/5}
  .c6 img,.c7 img{aspect-ratio:2/1.15}
}
.enlace-ig{display:block;max-width:1320px;margin:28px auto 0;padding:0 var(--gutter);color:var(--oro);font-weight:700;text-decoration:none}
.enlace-ig:hover{color:var(--oro-claro)}

/* Servicios */
.servicios{padding:120px 0 110px;background:var(--negro-2)}
.lista-serv{list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:1320px;display:grid;gap:0 60px}
.lista-serv li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:4px 16px;padding:26px 0}
.lista-serv li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linea);transform-origin:left}
.anima .lista-serv li::after{transform:scaleX(0);background:linear-gradient(90deg,var(--oro-claro),var(--linea) 60%);transition:transform 1.1s var(--ease)}
.anima .lista-serv li.cortada::after{transform:scaleX(1)}
.lista-serv .n{grid-row:span 2;font:italic 700 26px/1.1 var(--f-display);color:var(--oro)}
.lista-serv h3{margin:0;font:700 clamp(24px,2.4vw,32px)/1.15 var(--f-display);transition:color .3s}
.lista-serv p{margin:0;color:var(--gris)}
.lista-serv li:hover h3{color:var(--oro-claro)}
.servicios-nota{max-width:1320px;margin:30px auto 0;padding:0 var(--gutter);color:var(--hueso);font-weight:600}
@media (min-width:900px){.lista-serv{grid-template-columns:1fr 1fr}}

/* Nosotros */
.equipo{display:grid;gap:44px;padding:130px var(--gutter);max-width:1320px;margin:0 auto;align-items:center}
.equipo-foto{margin:0;justify-self:center;width:min(100%,420px);border-radius:220px 220px 16px 16px;overflow:hidden;box-shadow:0 0 0 2px var(--oro-osc),0 40px 70px -30px rgba(0,0,0,.9)}
.equipo-foto img{width:100%;aspect-ratio:3/4.4;object-fit:cover}
.equipo-texto>p{color:#d9d0bb;max-width:46ch;font-size:18px}
.equipo-texto b{color:var(--oro-claro)}
.hechos{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--linea)}
.hechos li{padding:14px 0;border-bottom:1px solid var(--linea);color:var(--gris)}
.hechos b{font:700 20px/1 var(--f-display);color:var(--hueso);margin-right:6px}
@media (min-width:960px){.equipo{grid-template-columns:.8fr 1.2fr;gap:90px}}

/* Opiniones: carrusel horizontal */
.opiniones{padding:110px 0;border-top:1px solid var(--linea)}
.opiniones .etiqueta{max-width:1320px;margin:0 auto 34px;padding:0 var(--gutter)}
.carrusel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gutter) 26px;scrollbar-width:thin;scrollbar-color:var(--oro) transparent}
.resena{flex:0 0 min(84vw,460px);scroll-snap-align:start;margin:0;padding:34px 30px;border-radius:18px;background:linear-gradient(160deg,#1d1a12,#121009);border:1px solid var(--linea);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.resena p{margin:0;font:italic 500 clamp(21px,2vw,26px)/1.3 var(--f-display)}
.resena cite{font:700 11.5px/1 var(--f-texto);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.resena cite::before{content:"★★★★★  ";letter-spacing:2px}

/* Cita */
.cita{display:grid;gap:44px;padding:120px var(--gutter);max-width:1320px;margin:0 auto;align-items:start}
.cita-texto>p{color:#d9d0bb;max-width:42ch;font-size:18px}
.pedir{display:grid;gap:22px;padding:30px;border-radius:20px;background:var(--negro-2);border:1px solid var(--linea)}
.pedir fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pedir legend{font:italic 700 20px/1.2 var(--f-display);margin-bottom:12px;padding:0}
.pedir fieldset label{position:relative}
.pedir fieldset input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pedir fieldset span{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--linea);font-size:14.5px;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.pedir fieldset input:checked+span{background:var(--oro);color:var(--negro);border-color:var(--oro)}
.pedir fieldset input:focus-visible+span{outline:2px solid var(--oro-claro);outline-offset:2px}
.campo{display:grid;gap:10px;font:italic 700 20px/1.2 var(--f-display)}
.campo small{font:500 13px var(--f-texto);font-style:normal;color:var(--gris)}
.campo select{font:500 16px var(--f-texto);color:var(--hueso);background:var(--negro);border:1px solid var(--linea);padding:13px 15px;border-radius:12px}
.aviso{margin:0;font-size:13px;color:var(--gris)}
@media (min-width:960px){.cita{grid-template-columns:.9fr 1.1fr;gap:80px}}

/* Visita */
.visita{display:grid;gap:44px;padding:120px var(--gutter);max-width:1320px;margin:0 auto;border-top:1px solid var(--linea)}
.direccion{color:var(--gris);margin:14px 0 20px;font-size:18px}
.horario{margin:0 0 28px;color:#d9d0bb;font-size:17px;line-height:1.9}
.horario b{color:var(--hueso)}
.estado{display:inline-flex;align-items:center;gap:9px;font:700 12.5px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.estado::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gris)}
.estado.abierto{color:#7fd17a}
.estado.abierto::before{background:#7fd17a;box-shadow:0 0 10px #7fd17a}
.visita-cta{display:flex;flex-wrap:wrap;gap:12px}
.visita-mapa{min-height:380px;border-radius:20px;overflow:hidden;border:2px solid var(--oro-osc)}
.visita-mapa iframe{width:100%;height:100%;min-height:380px;border:0;filter:grayscale(.6) contrast(1.05)}
@media (min-width:960px){.visita{grid-template-columns:1fr 1fr;gap:70px}.visita-mapa{min-height:500px}}

/* Pie */
.pie{padding:90px var(--gutter) calc(110px + env(safe-area-inset-bottom));text-align:center;background:var(--negro-2);color:var(--gris);font-size:14.5px}
.pie img{width:120px;margin:0 auto 22px}
.pie-lema{margin:0 auto 18px;max-width:30ch;font:italic 500 clamp(20px,2.4vw,28px)/1.3 var(--f-display);color:var(--hueso)}
.pie p{margin:6px 0}
.pie a{color:var(--oro)}

.wa-flotante{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .precarga{display:none!important}
}

/* ===== Nivel 2: detalles finos ===== */
.filtros{position:absolute;width:0;height:0}

/* Cursor dorado con rastro de polvo de oro (solo con mouse) */
.cursor-oro,.polvo-oro{display:none}
@media (hover:hover) and (pointer:fine){
  .anima body{cursor:none}
  .anima a,.anima button,.anima label,.anima select{cursor:none}
  .anima .cursor-oro{display:block;position:fixed;left:0;top:0;z-index:400;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--oro-claro);box-shadow:0 0 14px var(--oro);pointer-events:none;mix-blend-mode:difference;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s}
  .anima .cursor-oro.grande{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(241,212,126,.18);box-shadow:inset 0 0 0 1px var(--oro-claro)}
  .anima .polvo-oro{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:399;pointer-events:none}
}

/* Barrido de poste de barbero al entrar a cada seccion */
.barrido{position:fixed;inset:0;z-index:150;pointer-events:none;visibility:hidden;
  background:repeating-linear-gradient(-55deg,var(--hueso) 0 34px,var(--rojo-poste) 34px 68px,var(--hueso) 68px 102px,#1f4fa0 102px 136px);opacity:.95}

/* Titulos que se descifran */
.descifra .x{color:var(--oro);opacity:.75}

/* Medallon: brillo que respira y se inclina hacia el cursor */
.medallon{transform-style:preserve-3d;will-change:transform}
.medallon::after{content:"";position:absolute;inset:6%;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(212,169,60,.45),transparent 65%);filter:blur(30px);animation:respira 4s ease-in-out infinite}
@keyframes respira{50%{opacity:.45;transform:scale(1.08)}}

/* Fotos de cortes: liquidas al pasar el cursor */
.corte img{will-change:transform}
.corte.liquida img{filter:url(#liquido) brightness(1.08)}

/* La moneda */
.marca-sec{position:relative;height:300svh;border-top:1px solid var(--linea);background:radial-gradient(ellipse at 50% 45%,rgba(212,169,60,.12),transparent 60%)}
.marca-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;align-content:center;gap:34px;padding:calc(var(--barra-h) + 10px) var(--gutter) 30px;overflow:hidden}
.marca-pin .etiqueta{position:absolute;top:calc(var(--barra-h) + 30px);left:var(--gutter);margin:0}
.moneda-escena{position:relative;width:min(62vw,340px);aspect-ratio:1;perspective:1200px}
.moneda{position:absolute;inset:0;transform-style:preserve-3d}
.cara{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.cara-frente{transform:translateZ(9px);box-shadow:0 0 0 3px var(--oro)}
.cara-frente img{width:100%;height:100%}
.cara-atras{transform:rotateY(180deg) translateZ(9px);display:grid;place-content:center;justify-items:center;gap:8px;
  background:radial-gradient(circle at 35% 30%,#f7df98,#d4a93c 35%,#8f6b1d 75%,#5d4410);box-shadow:inset 0 0 0 10px rgba(93,68,16,.55),inset 0 0 0 14px rgba(247,223,152,.45)}
.cara-atras .mono{font:italic 900 clamp(70px,14vw,120px)/1 var(--f-display);color:#3b2a08;text-shadow:0 2px 0 rgba(255,240,200,.5)}
.cara-atras .mono em{color:#3b2a08;font-size:.5em;vertical-align:middle}
.cara-atras small{font:800 10px/1 var(--f-texto);letter-spacing:.3em;text-transform:uppercase;color:#3b2a08}
/* Canto: capas que dan grosor a la moneda */
.canto{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d}
.canto::before,.canto::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(90deg,#8f6b1d 0 2px,#d4a93c 2px 4px)}
.canto::before{transform:translateZ(3px)}.canto::after{transform:translateZ(-3px)}
.sombra-moneda{position:absolute;left:15%;right:15%;bottom:-16%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);filter:blur(6px)}
.frases{list-style:none;margin:0;padding:0;position:relative;width:min(92vw,620px);height:110px;text-align:center}
.frases li{position:absolute;inset:0;display:grid;justify-items:center;gap:8px;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.frases li.activa{opacity:1;transform:none}
.frases b{font:italic 700 clamp(34px,5vw,60px)/1 var(--f-display);background:var(--oro-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.frases span{color:var(--gris);font-size:17px}
@media (prefers-reduced-motion:reduce){.marca-sec{height:auto}.marca-pin{position:static;height:auto;padding:110px var(--gutter)}.frases{height:auto}.frases li{position:static;opacity:1;transform:none;margin-bottom:20px}}