/* Barber Hamza · negro de barbería y la luz LED blanca de su techo de hexágonos */
:root{
  --noche:#0b0b0d;
  --carbon:#151619;
  --carbon-2:#1e2024;
  --led:#f3f2ee;
  --gris:#a6a7ad;
  --linea:rgba(243,242,238,.12);
  --luz:#ffffff;
  --luz-2:#e6eefc;
  --brillo:rgba(205,225,255,.45);
  --wa:#25d366;
  --gutter:clamp(16px,4vw,56px);
  --titulo:"Anton",Impact,system-ui,sans-serif;
  --texto:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--texto);font-size:17px;line-height:1.6;color:var(--led);background:var(--noche);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.98}
h2{font-size:clamp(40px,6vw,80px)}
h3{font-size:30px}
:focus-visible{outline:3px solid var(--luz);outline-offset:3px}

.eti{font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.eti::before{content:"";width:14px;height:12px;background:var(--luz);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:drop-shadow(0 0 6px var(--brillo))}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.boton svg{width:20px;height:20px;flex:none}
.boton:active{transform:scale(.98)}
.boton--luz{background:var(--luz);color:var(--noche);box-shadow:0 0 22px -2px var(--brillo);transition:background .2s,box-shadow .25s,transform .2s}
.boton--luz:hover{background:var(--luz-2);box-shadow:0 0 30px 2px var(--brillo)}
.boton--linea{border-color:rgba(243,242,238,.35);color:var(--led)}
.boton--linea:hover{border-color:var(--led);background:rgba(243,242,238,.06)}
.boton--peq{min-height:44px;padding:0 16px;font-size:15px}
.boton--icono{width:44px;padding:0}
button.boton{font-family:inherit;background-clip:padding-box}
.boton--linea{background:transparent}

/* Cabecera */
.cab{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:24px;padding:12px var(--gutter);transition:background .25s,box-shadow .25s}
.cab::before{content:"";position:absolute;inset:0 0 -30px;z-index:-1;background:linear-gradient(180deg,rgba(11,11,13,.85),transparent);transition:opacity .25s}
.cab.solida{background:rgba(11,11,13,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linea)}
.cab.solida::before{opacity:0}
.cab__logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-width:0}
.cab__logo span{font-family:var(--titulo);font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.cab__logo span,.pie__logo{color:var(--gris)}
.cab__logo b,.pie__logo b{font-weight:400;color:var(--luz)!important;text-shadow:0 0 14px var(--brillo)}
.cab nav{display:flex;gap:26px}
.cab nav a{font-weight:700;font-size:15px;text-decoration:none;opacity:.8;padding:10px 0}
.cab nav a:hover{opacity:1;color:var(--luz)}
.cab__logo span,.boton{white-space:nowrap}
@media (max-width:820px){.cab nav{display:none}}
@media (max-width:420px){.cab{gap:12px}.cab__logo span{font-size:21px}.cab .boton--peq{padding:0 14px;gap:8px}}
@media (max-width:340px){.cab__logo span{font-size:18px}.cab .boton--peq svg{display:none}}

/* Portada: texto sobre panal de luz, foto vertical a la derecha */
.portada{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:100svh;position:relative;overflow:hidden}
.portada::before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23f3f2ee' stroke-width='2'%3E%3Cpath d='M30 1h60l29 51-29 51H30L1 52Z'/%3E%3C/g%3E%3C/svg%3E");background-size:120px 104px;
  -webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 75%);mask-image:linear-gradient(90deg,#000 30%,transparent 75%)}
.portada__texto{position:relative;z-index:1;align-self:end;padding:120px var(--gutter) clamp(40px,8vh,88px)}
.portada h1{font-size:clamp(54px,8.4vw,128px)}
/* «Que buscabas.» como tubo de LED: solo el contorno, encendido */
.portada h1 span{display:block;color:transparent;-webkit-text-stroke:2px var(--luz);text-shadow:0 0 18px var(--brillo),0 0 42px rgba(205,225,255,.25)}
@supports not (-webkit-text-stroke:2px #fff){.portada h1 span{color:var(--luz)}}
.portada__sub{font-size:clamp(17px,1.5vw,20px);color:rgba(243,242,238,.82);max-width:32em;margin-top:22px}
.portada__botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.portada__notas{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;font-size:15px;color:rgba(243,242,238,.75)}
.portada__notas li{display:flex;align-items:center;gap:8px}
.portada__notas b{color:var(--led)}
.estrellas{display:inline-flex;color:#f5b301}
.estrellas svg,.portada__notas .ig{width:17px;height:17px}
.portada__foto{position:relative}
.portada__foto img,.portada__foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.portada__foto video{object-position:50% 40%;background:var(--noche)}
.portada__panal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.portada__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--noche),transparent 30%)}
@media (max-width:900px){
  .portada{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0}
  .portada__foto{order:-1;height:62svh}
  .portada__foto::after{background:linear-gradient(0deg,var(--noche) 2%,transparent 45%)}
  .portada__texto{padding-top:0;margin-top:-90px}
  .portada__botones .boton{flex:1 1 100%}
  .portada::before{-webkit-mask-image:linear-gradient(0deg,#000 20%,transparent 60%);mask-image:linear-gradient(0deg,#000 20%,transparent 60%)}
}

/* Cabeza de sección */
section{scroll-margin-top:72px}
.cabeza{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.cabeza .eti{grid-column:1/-1;margin-bottom:0}
.cabeza > p:last-child{color:var(--gris);max-width:30em}
@media (max-width:820px){.cabeza{grid-template-columns:1fr}}

/* Cortes: panal de hexágonos en zigzag que corre de lado al bajar.
   Sin JS o con «reducir movimiento», la pista se desliza con el dedo. */
.cortes{--h:clamp(220px,calc((100svh - 330px)/1.8),380px);--w:calc(var(--h)*.866);--sep:8px;padding:clamp(72px,10vw,128px) 0}
.cortes .cabeza,.cortes__ig{padding:0 var(--gutter)}
.cortes .cabeza{margin-bottom:clamp(24px,4vh,48px)}
.cortes__pista{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gutter)}
.cortes__pista::-webkit-scrollbar{display:none}
.cortes__fotos{display:flex;width:max-content;height:calc(var(--h)*1.75 + var(--sep));padding-right:var(--gutter)}
.cortes__fotos li{flex:none;width:var(--w);height:var(--h);scroll-snap-align:start;background:var(--carbon);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transform:translateY(var(--y,0)) scale(var(--s,1));opacity:var(--o,1)}
.cortes__fotos li + li{margin-left:calc(var(--w)/-2 + var(--sep))}
.cortes__fotos li:nth-child(even){--y:calc(var(--h)*.75 + var(--sep))}
.cortes__fotos img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cortes__fotos li:hover img{transform:scale(1.06)}
.cortes__ig{margin-top:20px;color:var(--gris)}
.cortes__ig a{color:var(--luz);font-weight:700}
/* Con movimiento: la sección se queda fija y el panal avanza con el scroll */
.cortes--fijo{padding:0}
.cortes--fijo .cortes__fijo{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:64px;overflow:hidden}
.cortes--fijo .cortes__pista{overflow:visible;scroll-snap-type:none}
.cortes--fijo .cortes__fotos{will-change:transform}
@media (max-width:820px){
  .cortes{--h:clamp(190px,calc((100svh - 430px)/1.75),300px)}
  .cortes .cabeza > p:last-child{font-size:16px}
  .cortes--fijo .cortes__fijo{padding-top:84px;padding-bottom:72px}
}

/* Color y diseños */
.color{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(72px,10vw,128px) var(--gutter);background:var(--carbon)}
.color__fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.color__fotos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.color__fotos img:nth-child(2){transform:translateY(clamp(16px,3vw,40px))}
.color__texto,.peques__texto{display:grid;gap:18px;justify-items:start}
.color__texto > p:not(.eti),.peques__texto > p:not(.eti){color:var(--gris);max-width:30em;font-size:18px}
blockquote{border-left:3px solid var(--luz);padding:4px 0 4px 18px;margin-top:6px}
blockquote p{font-size:19px;font-weight:500}
cite{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--gris)}
@media (max-width:900px){.color{grid-template-columns:1fr}}

/* Peques */
.peques{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(72px,10vw,128px) var(--gutter)}
.peques__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:6px}
@media (max-width:900px){.peques{grid-template-columns:1fr}.peques__foto img{aspect-ratio:1}}

/* Locales */
.locales{padding:clamp(72px,10vw,128px) var(--gutter);border-top:1px solid var(--linea)}
.locales__lista{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.local{background:var(--carbon);border-radius:8px;overflow:hidden;border:1px solid var(--linea)}
.local > img{width:100%;aspect-ratio:16/10;object-fit:cover}
.local__datos{padding:24px clamp(18px,2.4vw,32px) 28px;display:grid;gap:8px}
.local__datos p{display:flex;align-items:center;gap:8px;color:rgba(243,242,238,.85)}
.local__datos p > svg{width:18px;height:18px;flex:none;color:var(--luz)}
.local__nota b{color:var(--led)}
.local__horario{font-weight:700}
.local__hoy{font-size:15px}
.local__hoy::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#888)}
.local__extra{color:var(--luz)!important;font-weight:700}
.local__botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media (max-width:820px){.locales__lista{grid-template-columns:1fr}}

/* Opiniones */
.opiniones{padding:clamp(72px,10vw,128px) var(--gutter);background:var(--carbon)}
.opiniones__lista{columns:3 300px;column-gap:clamp(16px,2vw,24px)}
.opiniones__lista li{break-inside:avoid;background:var(--carbon-2);border-radius:8px;padding:24px;margin-bottom:clamp(16px,2vw,24px);border-top:3px solid var(--luz)}
.opiniones__lista p{font-size:17px}

/* Pie */
.pie{background:#050506;color:rgba(243,242,238,.65);padding:48px var(--gutter) 110px;display:grid;gap:10px;font-size:15px}
.pie__logo{display:flex;align-items:center;gap:10px;font-family:var(--titulo);font-size:28px;text-transform:uppercase;margin-bottom:6px}
.pie__logo svg{width:30px;height:26px;color:var(--luz);filter:drop-shadow(0 0 6px var(--brillo))}
.pie a{color:var(--led)}

/* Botón flotante */
.flotante{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 20px 0 16px;border-radius:28px;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:transform .2s}
.flotante svg{width:26px;height:26px}
.flotante:hover{transform:translateY(-2px)}
/* Secundario frente al chat: solo el icono, y aparece al bajar de la portada */
.flotante{width:56px;padding:0;justify-content:center;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .25s}
.flotante.visible{opacity:1;pointer-events:auto;transform:none}
.flotante{border:0;cursor:pointer}
.flotante__menu{position:fixed;right:16px;bottom:84px;z-index:30;display:grid;gap:8px;min-width:220px;padding:14px;border-radius:14px;background:var(--carbon-2);border:1px solid var(--linea);box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}
.flotante__menu[hidden]{display:none}
.flotante__menu p{font-size:13px;color:var(--gris);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.flotante__menu a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:10px;background:var(--wa);color:#fff;font-weight:700;text-decoration:none}
.flotante__menu svg{width:22px;height:22px}

/* Chat de la web (n8n): :root:root para ganar a su hoja de estilos */
:root:root{
  --chat--window--width:min(400px,calc(100vw - 32px));
  --chat--window--height:min(620px,calc(100svh - 110px));
  --chat--color-primary:var(--luz);
  --chat--color-primary-shade-50:var(--luz-2);
  --chat--color-primary-shade-100:var(--luz-2);
  --chat--color-secondary:var(--luz);
  --chat--color-secondary-shade-50:var(--luz-2);
  --chat--color-white:#fff;
  --chat--color-light:#f3f2ee;
  --chat--color-dark:#141414;
  --chat--font-family:var(--texto);
  --chat--header--background:var(--noche);
  --chat--header--color:var(--led);
  --chat--heading--font-size:22px;
  --chat--toggle--background:var(--luz);
  --chat--toggle--hover--background:var(--luz-2);
  --chat--toggle--active--background:var(--luz-2);
  --chat--toggle--color:var(--noche);
  --chat--toggle--size:60px;
  --chat--message--bot--background:var(--carbon-2);
  --chat--message--bot--color:var(--led);
  --chat--body--background:var(--noche);
  --chat--footer--background:var(--carbon);
  --chat--footer--color:var(--led);
  --chat--input--background:var(--carbon);
  --chat--input--text-color:var(--led);
  --chat--message--user--background:var(--luz);
  --chat--message--user--color:#141414;
  --chat--border-radius:14px;
}

.chat-window-toggle{box-shadow:0 0 26px var(--brillo)!important}
.chat-window .chat-inputs,.chat-window .chat-input-send-button{background:var(--carbon)!important;color:var(--luz)!important}
.chat-window .chat-inputs textarea{color:var(--led)!important}

/* Apariciones */
.aparece{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.aparece.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .aparece{opacity:1;transform:none}
}