/* ==========================================================================
BARBER WILL — Greenville, TX
Sistema de diseño "MONOCHROME EDGE"
Blanco & negro · cromo · 3D · Visionarios Company
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
:root{
/* Escala de grises */
--negro:#000000;
--negro-2:#050505;
--negro-3:#0a0a0a;
--gris-950:#0f0f0f;
--gris-900:#151515;
--gris-850:#1b1b1b;
--gris-800:#232323;
--gris-700:#2e2e2e;
--gris-600:#3d3d3d;
--gris-500:#5c5c5c;
--gris-400:#8a8a8a;
--gris-300:#b4b4b4;
--gris-200:#d6d6d6;
--gris-100:#ededed;
--blanco:#ffffff;
/* Cromo / metal */
--cromo:linear-gradient(135deg,#ffffff 0%,#d8d8d8 12%,#6e6e6e 26%,#ffffff 42%,#9a9a9a 58%,#f2f2f2 72%,#5a5a5a 88%,#e8e8e8 100%);
--cromo-suave:linear-gradient(180deg,#ffffff 0%,#cfcfcf 45%,#8f8f8f 60%,#f4f4f4 100%);
--cromo-borde:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.05) 40%,rgba(255,255,255,.35) 65%,rgba(255,255,255,.02));
/* ---- COLORES DEL POSTE DE BARBERO (rojo · blanco · azul) ---- */
--rojo:#E4322B;
--rojo-cla:#FF5A52;
--rojo-osc:#A6120D;
--azul:#1E4FD8;
--azul-cla:#4C7BFF;
--azul-osc:#0B2A80;
--duo:linear-gradient(145deg,var(--rojo) 0%,#8f2f7a 50%,var(--azul) 100%);
--duo-h:linear-gradient(90deg,var(--rojo),var(--azul));
--poste:repeating-linear-gradient(115deg,
var(--rojo) 0 14px,#ffffff 14px 28px,var(--azul) 28px 42px,#ffffff 42px 56px);
--tricolor:linear-gradient(90deg,var(--rojo) 0 33.33%,#ffffff 33.33% 66.66%,var(--azul) 66.66% 100%);
--glow-rojo:0 0 34px -4px rgba(228,50,43,.75);
--glow-azul:0 0 34px -4px rgba(30,79,216,.75);
/* ---- NEÓN DE FONDO: el resplandor rojo/azul del banner, por toda la web ----
Se alternan A y B sección a sección para que la luz "viaje" al bajar. */
--negro-fondo:#050505;
/* Los focos van centrados en vertical y se apagan antes de los bordes:
así las secciones se funden entre sí y no se ven costuras al hacer scroll. */
--neon-a:
radial-gradient(ellipse 56% 58% at 2% 42%,rgba(228,50,43,.26),transparent 68%),
radial-gradient(ellipse 56% 58% at 98% 62%,rgba(30,79,216,.26),transparent 68%),
radial-gradient(ellipse 90% 46% at 50% 50%,rgba(255,255,255,.035),transparent 72%);
--neon-b:
radial-gradient(ellipse 56% 58% at 98% 42%,rgba(30,79,216,.26),transparent 68%),
radial-gradient(ellipse 56% 58% at 2% 62%,rgba(228,50,43,.26),transparent 68%),
radial-gradient(ellipse 90% 46% at 50% 50%,rgba(255,255,255,.035),transparent 72%);
--neon-suave:
radial-gradient(ellipse 70% 120% at 18% 50%,rgba(228,50,43,.16),transparent 64%),
radial-gradient(ellipse 70% 120% at 82% 50%,rgba(30,79,216,.16),transparent 64%);
/* Tipografía */
--f-display:'Archivo Black','Arial Black',Impact,sans-serif;
--f-cond:'Big Shoulders Display','Oswald',Impact,sans-serif;
--f-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
/* Ritmo */
--r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px; --r-full:999px;
--nav-h:76px;
--pad-x:clamp(18px,5vw,86px);
--sec-y:clamp(52px,6.4vw,110px);
--max:1360px;
/* Movimiento */
--e-out:cubic-bezier(.16,1,.3,1);
--e-io:cubic-bezier(.65,0,.35,1);
--e-back:cubic-bezier(.34,1.56,.64,1);
/* Sombras */
--sh-1:0 2px 8px rgba(0,0,0,.5);
--sh-2:0 18px 50px -18px rgba(0,0,0,.9);
--sh-3:0 40px 90px -30px rgba(0,0,0,1);
--glow:0 0 0 1px rgba(255,255,255,.12),0 0 34px -6px rgba(255,255,255,.22);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
background:var(--negro-fondo);
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
scrollbar-color:var(--gris-600) var(--negro);
}
html.is-locked{overflow:hidden}
body{
font-family:var(--f-body);
background:transparent;
color:var(--gris-200);
line-height:1.65;
font-size:clamp(15px,.55vw + 13.4px,17px);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--rojo);color:var(--blanco)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--negro)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--rojo),var(--azul));border-radius:99px;border:2px solid var(--negro)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--rojo-cla),var(--azul-cla))}
:focus-visible{outline:2px solid var(--rojo-cla);outline-offset:3px;border-radius:4px}
/* --------------------------------------------------------------------------
2. UTILIDADES
-------------------------------------------------------------------------- */
.contenedor{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cromo-txt{
background:var(--cromo);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
background-size:220% 220%;
animation:cromoFlow 9s linear infinite;
}
@keyframes cromoFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* ---- CAPA DE NEÓN: una sola luz roja/azul detrás de toda la web ----
Va fija: el contenido pasa por delante y nunca se ven costuras entre
secciones, porque no hay un fondo por sección sino uno solo. */
.neon-fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.neon-fondo span{
position:absolute;border-radius:50%;
filter:blur(80px);mix-blend-mode:screen;will-change:transform;
}
.neon-fondo .n1{
width:70vw;height:70vw;max-width:900px;max-height:900px;left:-22%;top:-14%;
background:radial-gradient(circle,rgba(228,50,43,.5),transparent 66%);
animation:neonVa 26s var(--e-io) infinite;
}
.neon-fondo .n2{
width:66vw;height:66vw;max-width:860px;max-height:860px;right:-20%;bottom:-16%;
background:radial-gradient(circle,rgba(30,79,216,.5),transparent 66%);
animation:neonVa 33s var(--e-io) infinite reverse;
}
.neon-fondo .n3{
width:52vw;height:52vw;max-width:680px;max-height:680px;left:38%;top:34%;
background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);
animation:neonVa 41s var(--e-io) infinite;
}
@keyframes neonVa{
0%,100%{transform:translate(0,0) scale(1)}
33%{transform:translate(12%,-9%) scale(1.14)}
66%{transform:translate(-10%,10%) scale(.92)}
}
@media (prefers-reduced-motion:reduce){
.neon-fondo .n1{animation-duration:60s}
.neon-fondo .n2{animation-duration:72s}
.neon-fondo .n3{animation-duration:88s}
}
/* Grano de película global */
.grano{
position:fixed;inset:-120px;z-index:9990;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:granoMove .55s steps(3) infinite;
}
@keyframes granoMove{
0%{transform:translate(0,0)}25%{transform:translate(-14px,9px)}
50%{transform:translate(11px,-13px)}75%{transform:translate(-9px,-7px)}100%{transform:translate(0,0)}
}
/* Líneas de escaneo sutiles */
.scanlines{
position:fixed;inset:0;z-index:9989;pointer-events:none;opacity:.35;
background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px);
}
/* Viñeta */
.vineta{position:fixed;inset:0;z-index:9988;pointer-events:none;
background:radial-gradient(ellipse 120% 85% at 50% 45%,transparent 42%,rgba(0,0,0,.55) 100%)}
/* Encabezado de sección */
.sec-cab{margin-bottom:clamp(38px,5vw,68px);position:relative;z-index:2}
.sec-cab.centro{text-align:center}
.eyebrow{
display:inline-flex;align-items:center;gap:11px;
font-family:var(--f-cond);font-size:clamp(11px,1.4vw,13px);font-weight:700;
letter-spacing:.42em;text-transform:uppercase;color:var(--rojo-cla);margin-bottom:18px;
text-shadow:0 0 22px rgba(228,50,43,.45);
}
.eyebrow::before{content:"";width:clamp(26px,5vw,54px);height:3px;border-radius:2px;background:var(--tricolor)}
.sec-cab.centro .eyebrow::after{content:"";width:clamp(26px,5vw,54px);height:3px;border-radius:2px;background:var(--tricolor);transform:scaleX(-1)}
.titulo{
font-family:var(--f-display);
font-size:clamp(1.85rem,5.9vw,4.5rem);
line-height:.98;letter-spacing:-.022em;text-transform:uppercase;
color:var(--blanco);
}
.titulo .contorno{
color:transparent;-webkit-text-stroke:1.5px var(--rojo);
paint-order:stroke fill;
}
.titulo .rojo{color:var(--rojo);text-shadow:0 0 40px rgba(228,50,43,.5)}
.titulo .azul{color:var(--azul-cla);text-shadow:0 0 40px rgba(30,79,216,.5)}
.subtitulo{
max-width:62ch;margin-top:22px;color:var(--gris-400);
font-size:clamp(.95rem,1.6vw,1.1rem);
}
.sec-cab.centro .subtitulo{margin-inline:auto}
/* Botones */
.btn{
--bg:var(--blanco); --fg:var(--negro);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
padding:clamp(14px,1.5vw,17px) clamp(24px,3vw,38px);
font-family:var(--f-cond);font-weight:800;font-size:clamp(14px,1.5vw,16px);
letter-spacing:.16em;text-transform:uppercase;
color:var(--fg);background:var(--bg);
border-radius:var(--r-full);isolation:isolate;overflow:hidden;
transform-style:preserve-3d;
transition:transform .5s var(--e-back),box-shadow .5s var(--e-out),color .35s;
box-shadow:0 10px 26px -12px rgba(255,255,255,.5);
white-space:nowrap;
}
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.85) 50%,transparent 80%);
transform:translateX(-130%);transition:transform .75s var(--e-out);
}
.btn:hover::before{transform:translateX(130%)}
.btn:hover{transform:translateY(-4px) scale(1.035);box-shadow:0 22px 46px -16px rgba(255,255,255,.6)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn--fantasma{--bg:transparent;--fg:var(--blanco);border:1.5px solid rgba(255,255,255,.32);box-shadow:none;backdrop-filter:blur(6px)}
.btn--fantasma:hover{--fg:var(--blanco);background:transparent;border-color:var(--azul-cla);box-shadow:var(--glow-azul)}
.btn--fantasma::before{background:linear-gradient(120deg,transparent 20%,rgba(76,123,255,.4) 50%,transparent 80%)}
.btn--wa{--bg:#111;--fg:#fff;border:1.5px solid rgba(255,255,255,.22)}
.btn--wa:hover{--bg:#111;--fg:#fff;border-color:var(--rojo);box-shadow:var(--glow-rojo)}
/* Botón principal en rojo barbería */
.btn--rojo{--bg:linear-gradient(135deg,var(--rojo-cla),var(--rojo) 45%,var(--rojo-osc));--fg:#fff;
box-shadow:0 12px 30px -12px rgba(228,50,43,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--rojo:hover{box-shadow:0 24px 52px -16px rgba(228,50,43,1),inset 0 1px 0 rgba(255,255,255,.45)}
.btn--rojo::before{background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%)}
.btn svg{width:18px;height:18px;flex:none}
/* Etiqueta metálica */
.chip{
position:relative;display:inline-flex;align-items:center;gap:9px;
padding:8px 16px;border-radius:var(--r-full);
font-family:var(--f-cond);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
color:var(--gris-100);
background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(10px);
transition:border-color .4s,transform .4s var(--e-back),box-shadow .4s;
}
.chip:hover{transform:translateY(-2px)}
.chip--rojo{border-color:rgba(228,50,43,.55);background:linear-gradient(180deg,rgba(228,50,43,.24),rgba(228,50,43,.06));color:#ffd7d5;box-shadow:0 8px 26px -12px rgba(228,50,43,.9)}
.chip--azul{border-color:rgba(76,123,255,.55);background:linear-gradient(180deg,rgba(30,79,216,.28),rgba(30,79,216,.06));color:#d7e2ff;box-shadow:0 8px 26px -12px rgba(30,79,216,.9)}
.chip .punto{width:7px;height:7px;border-radius:50%;background:var(--rojo);box-shadow:0 0 12px var(--rojo),0 0 22px var(--rojo);animation:latido 1.9s infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
/* --------------------------------------------------------------------------
3. PRELOADER
-------------------------------------------------------------------------- */
#preloader{
position:fixed;inset:0;z-index:10000;
display:grid;place-items:center;
background:var(--negro);
overflow:hidden;
}
.pl-centro{position:relative;display:grid;place-items:center;gap:34px;z-index:2}
.pl-logo-caja{
position:relative;width:clamp(150px,34vw,232px);aspect-ratio:1;
display:grid;place-items:center;
perspective:900px;
}
.pl-anillo{
position:absolute;inset:-16%;border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 55%,rgba(228,50,43,.3) 66%,var(--rojo) 78%,#fff 86%,var(--azul) 94%,transparent 100%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
animation:plAnillo 1.5s linear infinite;
filter:drop-shadow(0 0 10px rgba(228,50,43,.7));
}
.pl-anillo.dos{
inset:-32%;animation-duration:2.6s;animation-direction:reverse;opacity:.75;
background:conic-gradient(from 180deg,transparent 0 58%,rgba(30,79,216,.3) 68%,var(--azul) 80%,#fff 90%,transparent 100%);
filter:drop-shadow(0 0 10px rgba(30,79,216,.7));
}
@keyframes plAnillo{to{transform:rotate(1turn)}}
.pl-logo{
width:88%;height:88%;object-fit:contain;
filter:drop-shadow(0 0 34px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(228,50,43,.4));
animation:plLogo 3s var(--e-io) infinite;
transform-style:preserve-3d;
}
@keyframes plLogo{
0%,100%{transform:rotateY(0deg) scale(1)}
50%{transform:rotateY(22deg) scale(1.045)}
}
/* Barra de progreso tipo poste de barbero */
.pl-barra{
position:relative;width:clamp(190px,58vw,340px);height:5px;border-radius:99px;
background:rgba(255,255,255,.1);overflow:hidden;
}
.pl-barra i{
/* La barra se rellena recortandola (clip-path), no cambiando su anchura.
Cambiar la anchura obligaba a recalcular el diseño en cada fotograma y,
ademas, chocaba con el "transition" de aqui: cada frame arrancaba una
transicion nueva que pisaba la anterior. De ahi los tirones. */
position:absolute;inset:0;width:100%;border-radius:99px;
background:var(--poste);
background-size:200% 100%;
animation:plPoste .7s linear infinite;
clip-path:inset(0 100% 0 0 round 99px);
box-shadow:0 0 22px rgba(228,50,43,.7),0 0 32px rgba(30,79,216,.5);
}
@keyframes plPoste{to{background-position:-56px 0}}
.pl-meta{display:flex;align-items:baseline;gap:16px;font-family:var(--f-cond);letter-spacing:.3em;text-transform:uppercase}
.pl-meta .pl-txt{font-size:12px;color:var(--gris-500)}
.pl-meta .pl-num{font-family:var(--f-display);font-size:clamp(28px,7vw,44px);color:var(--blanco);line-height:1;font-variant-numeric:tabular-nums}
/* Cortina de salida */
/* salida: el preloader se funde y deja ver la web al instante */
#preloader{transition:opacity .38s var(--e-out),visibility .38s}
#preloader.fuera{opacity:0;visibility:hidden;pointer-events:none}
#preloader.fuera .pl-centro{opacity:0;transform:scale(.95);transition:opacity .22s,transform .34s var(--e-out)}
#preloader.oculto{display:none}
/* --------------------------------------------------------------------------
5. HEADER + NAVEGACIÓN
-------------------------------------------------------------------------- */
/* Crece con transform, no cambiando la anchura: cambiarla obligaba al
navegador a recalcular el diseño en CADA fotograma del scroll. Se ve
exactamente igual, porque el degradado se comprime del mismo modo. */
.barra-progreso{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9994;
transform:scaleX(0);transform-origin:0 50%;
background:linear-gradient(90deg,var(--rojo),#fff 50%,var(--azul));
box-shadow:0 0 16px rgba(228,50,43,.8),0 0 26px rgba(30,79,216,.5)}
.cabecera{
position:fixed;top:0;left:0;right:0;z-index:900;
height:var(--nav-h);
display:flex;align-items:center;
transition:background .45s,backdrop-filter .45s,height .45s var(--e-out),border-color .45s;
border-bottom:1px solid transparent;
}
.cabecera.pegada{
height:64px;
background:rgba(0,0,0,.68);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
border-bottom-color:rgba(255,255,255,.1);
}
.cabecera.escondida{transform:translateY(-104%);transition:transform .5s var(--e-out),background .45s}
.cab-inner{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x);
display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca{display:flex;align-items:center;gap:13px;flex:none;z-index:2}
.marca img{width:clamp(40px,5vw,50px);height:auto;transition:transform .6s var(--e-back),filter .5s;
filter:drop-shadow(0 0 12px rgba(255,255,255,.28)) drop-shadow(0 0 20px rgba(228,50,43,.45))}
.marca:hover img{transform:rotate(-12deg) scale(1.12);
filter:drop-shadow(0 0 16px rgba(255,255,255,.5)) drop-shadow(0 0 30px rgba(228,50,43,.9))}
.marca-txt{display:flex;flex-direction:column;line-height:1}
.marca-txt b{font-family:var(--f-display);font-size:clamp(15px,1.7vw,19px);letter-spacing:.04em;color:var(--blanco);text-transform:uppercase}
.marca-txt span{font-family:var(--f-cond);font-size:9.5px;letter-spacing:.36em;color:var(--gris-500);text-transform:uppercase;margin-top:3px}
.nav-esc{display:flex;align-items:center;gap:clamp(4px,1.4vw,10px)}
.nav-esc a{
position:relative;padding:9px 13px;border-radius:var(--r-full);
font-family:var(--f-cond);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
color:var(--gris-300);transition:color .3s;
}
.nav-esc a::after{
content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2.5px;border-radius:2px;background:var(--tricolor);
transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out);
}
.nav-esc a:hover,.nav-esc a.activo{color:var(--blanco)}
.nav-esc a:hover::after,.nav-esc a.activo::after{transform:scaleX(1);transform-origin:left}
.cab-acciones{display:flex;align-items:center;gap:10px;flex:none;z-index:2}
.idioma{
display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-full);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
}
.idioma button{
padding:5px 11px;border-radius:var(--r-full);
font-family:var(--f-cond);font-weight:800;font-size:12px;letter-spacing:.14em;
color:var(--gris-400);transition:.3s;
}
.idioma button.on{background:var(--rojo);color:#fff;box-shadow:0 0 16px -2px rgba(228,50,43,.9)}
.btn-cab{padding:11px 22px;font-size:13px}
/* Hamburguesa */
.hamburguesa{
display:none;position:relative;width:52px;height:52px;border-radius:50%;
border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
backdrop-filter:blur(10px);z-index:1002;flex:none;
transition:background .35s,border-color .35s,transform .4s var(--e-back);
}
.hamburguesa:hover{transform:scale(1.07)}
.hamburguesa i{
position:absolute;left:50%;width:20px;height:2px;background:var(--blanco);border-radius:2px;
transform:translateX(-50%);transition:transform .5s var(--e-back),opacity .3s,width .4s;
}
.hamburguesa i:nth-child(1){top:19px;background:var(--rojo);box-shadow:0 0 10px rgba(228,50,43,.8)}
.hamburguesa i:nth-child(2){top:25px;width:14px;background:var(--blanco)}
.hamburguesa i:nth-child(3){top:31px;background:var(--azul-cla);box-shadow:0 0 10px rgba(76,123,255,.8)}
.hamburguesa.abierta{background:var(--rojo);border-color:var(--rojo);box-shadow:var(--glow-rojo)}
.hamburguesa.abierta i{background:#fff;box-shadow:none}
.hamburguesa.abierta i:nth-child(1){transform:translateX(-50%) translateY(6px) rotate(45deg)}
.hamburguesa.abierta i:nth-child(2){opacity:0;width:0}
.hamburguesa.abierta i:nth-child(3){transform:translateX(-50%) translateY(-6px) rotate(-45deg)}
/* --------------------------------------------------------------------------
6. MENÚ MÓVIL / TABLET
-------------------------------------------------------------------------- */
.menu-movil{
position:fixed;inset:0;z-index:1001;
display:grid;grid-template-rows:auto auto 1fr auto;
background:
radial-gradient(ellipse 90% 60% at 100% 0%,rgba(228,50,43,.32),transparent 62%),
radial-gradient(ellipse 90% 60% at 0% 100%,rgba(30,79,216,.32),transparent 62%),
#060606;
clip-path:circle(0% at calc(100% - 46px) 40px);
transition:clip-path .8s var(--e-out);
overflow-y:auto;overscroll-behavior:contain;
padding:clamp(14px,4vw,22px) var(--pad-x) clamp(20px,5vw,30px);
}
.menu-movil.abierto{clip-path:circle(155% at calc(100% - 46px) 40px)}
.menu-movil .mm-deco{
position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 2px,transparent 2px 24px);
}
/* franja tricolor de barbero en el borde */
.menu-movil::before{
content:"";position:fixed;left:0;top:0;bottom:0;width:5px;z-index:3;
background:var(--poste);background-size:100% 200%;
animation:posteGira 2.6s linear infinite;
}
.menu-movil .mm-logo-ghost{height:auto;position:fixed;right:-18vw;bottom:-8vh;width:min(72vw,460px);opacity:.028;
pointer-events:none;animation:ghostGirar 30s linear infinite;
}
.menu-movil > *{position:relative;z-index:2}
/* ── cabecera del menú: marca + salida ── */
.mm-cab{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding-bottom:clamp(12px,3vw,18px);
border-bottom:1px solid rgba(255,255,255,.1);
}
.mm-marca{display:flex;align-items:center;gap:12px;min-width:0}
.mm-marca img{
width:clamp(38px,10vw,46px);height:auto;flex:none;
filter:drop-shadow(0 0 12px rgba(255,255,255,.3)) drop-shadow(0 0 22px rgba(228,50,43,.55));
}
.mm-marca span{display:flex;flex-direction:column;line-height:1;min-width:0}
.mm-marca b{font-family:var(--f-display);font-size:clamp(15px,4.4vw,19px);letter-spacing:.04em;color:var(--blanco);text-transform:uppercase}
.mm-marca small{font-family:var(--f-cond);font-weight:700;font-size:9px;letter-spacing:.32em;color:var(--gris-500);text-transform:uppercase;margin-top:5px}
/* el botón de salida: grande, visible y con área de toque cómoda */
.mm-cerrar{
flex:none;width:clamp(46px,12vw,54px);aspect-ratio:1;border-radius:50%;
display:grid;place-items:center;color:#fff;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo) 55%,var(--rojo-osc));
border:2px solid rgba(255,255,255,.34);
box-shadow:0 12px 28px -10px rgba(228,50,43,1);
transition:transform .4s var(--e-back),box-shadow .4s;
}
.mm-cerrar:active{transform:scale(.92)}
.mm-cerrar:hover{transform:rotate(90deg) scale(1.06);box-shadow:0 16px 34px -10px rgba(228,50,43,1)}
.mm-cerrar svg{width:46%;height:46%}
/* ── estado ── */
.mm-estado{display:flex;flex-wrap:wrap;gap:8px;padding:clamp(12px,3vw,16px) 0}
.mm-estado .chip{font-size:10px;padding:6px 12px;letter-spacing:.18em}
/* ── navegación: lista tipo app, con número, nombre y flecha ──
Se centra en el espacio libre: si no, el sobrante se acumulaba
todo debajo del último enlace y parecía un hueco olvidado. */
.mm-nav{display:flex;flex-direction:column;justify-content:center}
.mm-nav li{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07)}
.mm-nav li:last-child{border-bottom:0}
.mm-nav a{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:clamp(12px,3.4vw,18px);
padding:clamp(11px,2.6vw,15px) 4px;
color:var(--blanco);
transform:translateY(105%);opacity:0;
transition:transform .7s var(--e-out),opacity .5s,color .3s,padding-left .35s var(--e-out);
}
.menu-movil.abierto .mm-nav a{transform:none;opacity:1}
.mm-nav a .idx{
font-family:var(--f-cond);font-weight:800;font-size:11px;letter-spacing:.16em;
color:var(--rojo);width:2.2em;transition:color .3s;
}
.mm-nav a .txt{
font-family:var(--f-display);text-transform:uppercase;
font-size:clamp(1.5rem,7vw,2.3rem);line-height:1;letter-spacing:.005em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mm-nav a .fl{
width:clamp(17px,4.4vw,20px);height:auto;color:var(--gris-600);
transform:translateX(-6px);opacity:0;
transition:transform .4s var(--e-out),opacity .4s,color .3s;
}
.mm-nav a:hover,.mm-nav a:active{color:var(--rojo-cla);padding-left:10px}
.mm-nav a:hover .idx,.mm-nav a:active .idx{color:var(--azul-cla)}
.mm-nav a:hover .fl,.mm-nav a:active .fl{transform:none;opacity:1;color:var(--rojo-cla)}
.mm-nav li:nth-child(1) a{transition-delay:.08s}
.mm-nav li:nth-child(2) a{transition-delay:.13s}
.mm-nav li:nth-child(3) a{transition-delay:.18s}
.mm-nav li:nth-child(4) a{transition-delay:.23s}
.mm-nav li:nth-child(5) a{transition-delay:.28s}
.mm-nav li:nth-child(6) a{transition-delay:.33s}
.mm-nav li:nth-child(7) a{transition-delay:.38s}
/* ── pie del menú ── */
.mm-pie{display:grid;gap:clamp(10px,2.6vw,14px);padding-top:clamp(14px,3.4vw,20px)}
.mm-promo{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
padding:clamp(12px,3vw,16px) clamp(14px,3.4vw,18px);border-radius:var(--r-md);
background:linear-gradient(115deg,rgba(228,50,43,.26),rgba(30,79,216,.2));
border:1px solid rgba(255,255,255,.2);
box-shadow:0 12px 30px -16px rgba(228,50,43,.95);
transition:transform .4s var(--e-out),border-color .4s;
}
.mm-promo:active{transform:scale(.985)}
.mm-promo-num{
font-family:var(--f-display);font-size:clamp(24px,7vw,30px);line-height:1;color:var(--blanco);
text-shadow:0 0 18px rgba(255,255,255,.45);white-space:nowrap;
}
.mm-promo-num i{font-style:normal;font-size:.58em;vertical-align:.18em;padding:0 .06em}
.mm-promo-txt{font-size:clamp(11.5px,3vw,13px);color:var(--gris-200);line-height:1.35}
.mm-promo svg{width:18px;height:18px;color:rgba(255,255,255,.65)}
.mm-acciones{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mm-acciones .btn{width:100%;padding:clamp(12px,3.2vw,15px) 8px;font-size:clamp(11px,3vw,13px);gap:8px}
.mm-acciones .btn svg{width:16px;height:16px}
.mm-social{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap}
.mm-social a{
width:clamp(42px,11vw,48px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--gris-200);
transition:.35s var(--e-back);
}
.mm-social a:hover,.mm-social a:active{background:var(--rojo);border-color:var(--rojo);color:#fff;transform:translateY(-3px);box-shadow:var(--glow-rojo)}
.mm-social a:nth-child(even):hover{background:var(--azul);border-color:var(--azul);box-shadow:var(--glow-azul)}
.mm-social svg{width:19px;height:19px}
/* selector de idioma dentro del menú */
.mm-idioma{
display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-full);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);margin-left:4px;
}
.mm-idioma button{
padding:7px 13px;border-radius:var(--r-full);
font-family:var(--f-cond);font-weight:800;font-size:12px;letter-spacing:.14em;
color:var(--gris-400);transition:.3s;
}
.mm-idioma button.on{background:var(--rojo);color:#fff;box-shadow:0 0 14px -2px rgba(228,50,43,.9)}
.mm-dir{
display:block;text-align:center;font-size:clamp(10.5px,2.8vw,12px);
color:var(--gris-500);letter-spacing:.06em;padding-top:2px;
}
.mm-dir:hover{color:var(--gris-200)}
/* --------------------------------------------------------------------------
7. BANNER / HERO
-------------------------------------------------------------------------- */
.hero{
position:relative;min-height:100svh;min-height:100dvh;
display:grid;align-items:center;
padding:calc(var(--nav-h) + clamp(18px,3vw,34px)) 0 clamp(64px,8vw,92px);
overflow:hidden;perspective:1400px;
}
/* capas de fondo */
.hero-capas{position:absolute;inset:0;z-index:0;transform-style:preserve-3d}
.hero-foto{
position:absolute;inset:-6%;
background-size:cover;background-position:center;
/* el gris/contraste/brillo ya viene grabado en hero-local.jpg */
transform:scale(1.08);
will-change:transform;
}
.hero-foto::after{content:"";position:absolute;inset:0;background:
linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.42) 32%,rgba(0,0,0,.7) 70%,#000 100%),
radial-gradient(ellipse 70% 60% at 50% 46%,transparent,rgba(0,0,0,.68))}
/* AURAS DE COLOR — le dan la vida al banner */
.hero-aura{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-aura span{
position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
mix-blend-mode:screen;will-change:transform;
}
.hero-aura .a1{width:46vw;height:46vw;max-width:620px;max-height:620px;left:-10%;top:4%;
background:radial-gradient(circle,rgba(228,50,43,.95),transparent 68%);animation:auraVa 15s var(--e-io) infinite}
.hero-aura .a2{width:44vw;height:44vw;max-width:580px;max-height:580px;right:-8%;bottom:-6%;
background:radial-gradient(circle,rgba(30,79,216,.95),transparent 68%);animation:auraVa 19s var(--e-io) infinite reverse}
.hero-aura .a3{width:28vw;height:28vw;max-width:400px;max-height:400px;left:44%;top:52%;
background:radial-gradient(circle,rgba(255,255,255,.55),transparent 66%);animation:auraVa 23s var(--e-io) infinite;opacity:.32}
@keyframes auraVa{
0%,100%{transform:translate(0,0) scale(1)}
33%{transform:translate(9%,-11%) scale(1.16)}
66%{transform:translate(-8%,8%) scale(.9)}
}
/* rayo tricolor que barre el banner */
.hero-rayo{
position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.55;
}
.hero-rayo::before{
content:"";position:absolute;top:-40%;bottom:-40%;width:34vw;left:0;
background:linear-gradient(100deg,transparent,rgba(228,50,43,.45) 32%,rgba(255,255,255,.5) 50%,rgba(30,79,216,.45) 68%,transparent);
filter:blur(26px);
animation:rayoBarre 9s var(--e-io) infinite;
will-change:transform;
}
/* con transform en vez de `left`: mismo barrido, pero lo pinta la GPU
y deja de recalcular el diseño de la página en cada fotograma */
@keyframes rayoBarre{
0%{transform:translateX(-45vw) rotate(14deg)}
55%,100%{transform:translateX(125vw) rotate(14deg)}
}
#lienzo3d{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:.9;pointer-events:none}
.hero-rejilla{
position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;
background-image:
linear-gradient(rgba(228,50,43,.09) 1px,transparent 1px),
linear-gradient(90deg,rgba(30,79,216,.09) 1px,transparent 1px);
background-size:78px 78px;
-webkit-mask:radial-gradient(ellipse 75% 70% at 50% 45%,#000 20%,transparent 78%);
mask:radial-gradient(ellipse 75% 70% at 50% 45%,#000 20%,transparent 78%);
animation:rejillaDeriva 22s linear infinite;
}
@keyframes rejillaDeriva{to{background-position:78px 78px,78px 78px}}
/* foco que sigue al ratón */
.hero-foco{
position:absolute;inset:0;z-index:3;pointer-events:none;
background:radial-gradient(circle 380px at var(--mx,50%) var(--my,45%),rgba(255,90,82,.16),rgba(76,123,255,.09) 45%,transparent 72%);
transition:background .18s linear;mix-blend-mode:screen;
}
.hero-contenido{
position:relative;z-index:5;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x);
display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
align-items:center;gap:clamp(20px,4vw,60px);
transform-style:preserve-3d;
}
/* con los postes a los lados, el contenido nunca debe rozarlos */
@media (min-width:1025px){
.hero .hero-contenido{padding-inline:max(var(--pad-x),100px)}
}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(18px,2.6vw,26px)}
/* Título kinético */
.hero-titulo{
font-family:var(--f-display);text-transform:uppercase;
font-size:clamp(2.4rem,8.6vw,8.2rem);
line-height:.88;letter-spacing:-.028em;
color:var(--blanco);margin:0;
transform-style:preserve-3d;
}
.hero-titulo .linea{display:block;overflow:hidden;padding-bottom:.05em;white-space:nowrap}
.hero-titulo .linea.dos{margin-left:clamp(0px,2.4vw,54px)}
.hero-titulo .car{
display:inline-block;transform:translateY(105%) rotate(9deg);opacity:0;
animation:carEntra .62s var(--e-out) forwards;
/* Cada letra arrastra las sombras difuminadas de la linea (46 y 90 px) y,
en WILL, contorno y resplandor. Sin esto el movil volvia a pintar todo
ese difuminado en CADA fotograma del movimiento. Asi se dibuja una vez
y despues solo se desplaza. La clase "listo" libera la memoria luego. */
will-change:transform,opacity;
}
@keyframes carEntra{to{transform:none;opacity:1}}
/* Red de seguridad: las letras arrancan invisibles y solo las destapa la
animacion. Si esa animacion no llega a correr (movil lento, ahorro de
bateria, pestana en segundo plano), el titulo se quedaba en blanco o a
medias. Con esta clase, que el JS pone al terminar, siempre acaban visibles. */
.hero-titulo.listo .car{opacity:1;transform:none;animation:none;will-change:auto}
/* BARBER en blanco con brillo, WILL en contorno rojo */
.hero-titulo .linea.uno{
text-shadow:0 0 46px rgba(255,255,255,.35),0 0 90px rgba(228,50,43,.35);
}
.hero-titulo .hueco{
color:transparent;
-webkit-text-stroke:clamp(1.5px,.3vw,3.4px) var(--rojo);
filter:drop-shadow(0 0 18px rgba(228,50,43,.7));
}
.hero-titulo .hueco .car:nth-child(even){-webkit-text-stroke-color:var(--azul-cla)}
.hero-sub{
display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,2vw,20px);
margin-top:clamp(14px,2.2vw,22px);
font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.28em;
font-size:clamp(11px,1.6vw,14px);font-weight:700;color:var(--gris-400);
}
.hero-sub .div{width:26px;height:3px;border-radius:2px;background:var(--tricolor)}
.hero-sub span{color:var(--gris-200)}
.hero-sub b{color:var(--blanco);font-size:1.35em;letter-spacing:0}
/* banderas en SVG: los emoji de bandera no se dibujan en Windows */
.banderas{display:inline-flex;align-items:center;gap:6px}
.banderas svg{
width:clamp(20px,2.4vw,26px);height:auto;display:block;border-radius:3px;
box-shadow:0 0 0 1px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.6);
}
.hero-desc{max-width:52ch;margin-top:clamp(14px,2vw,20px);color:var(--gris-300);font-size:clamp(.95rem,1.7vw,1.14rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.8vw,30px)}
/* estadísticas */
.hero-stats{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(12px,2.5vw,32px);margin-top:clamp(22px,3.2vw,38px);
max-width:640px;
}
.hero-stats div{position:relative;padding-left:16px}
.hero-stats div::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--rojo),var(--azul))}
.hero-stats div:nth-child(2)::before{background:linear-gradient(180deg,#fff,var(--rojo))}
.hero-stats div:nth-child(3)::before{background:linear-gradient(180deg,var(--azul-cla),#fff)}
.hero-stats b{display:block;font-family:var(--f-display);font-size:clamp(1.6rem,4.6vw,2.7rem);line-height:1;color:var(--blanco);text-shadow:0 0 26px rgba(255,255,255,.28)}
.hero-stats span{font-family:var(--f-cond);font-size:clamp(10px,1.4vw,12px);letter-spacing:.2em;text-transform:uppercase;color:var(--gris-400)}
/* ═══════════ EMBLEMA DEL LOGO EN EL BANNER ═══════════ */
.hero-emblema{
position:relative;display:grid;place-items:center;
perspective:1100px;justify-self:center;
}
.emblema{
position:relative;width:clamp(210px,27vw,400px);aspect-ratio:1;
display:grid;place-items:center;
transform-style:preserve-3d;
transition:transform .8s var(--e-out);
will-change:transform;
}
/* halo de color detrás */
.emblema .em-halo{
position:absolute;inset:-24%;border-radius:50%;pointer-events:none;
background:
radial-gradient(circle at 32% 30%,rgba(228,50,43,.85),transparent 58%),
radial-gradient(circle at 70% 72%,rgba(30,79,216,.85),transparent 58%);
filter:blur(38px);opacity:.85;
animation:emHalo 7s var(--e-io) infinite;
}
@keyframes emHalo{0%,100%{transform:scale(1) rotate(0deg);opacity:.7}50%{transform:scale(1.14) rotate(180deg);opacity:1}}
/* anillos giratorios */
.emblema .em-anillo{position:absolute;border-radius:50%;pointer-events:none}
.emblema .r1{
inset:-3%;
background:conic-gradient(from 0deg,transparent 0 52%,var(--rojo) 64%,#fff 74%,var(--azul) 84%,transparent 96%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
animation:emGira 6.5s linear infinite;
filter:drop-shadow(0 0 8px rgba(228,50,43,.8));
}
.emblema .r2{
inset:-13%;
background:conic-gradient(from 140deg,transparent 0 60%,var(--azul-cla) 70%,#fff 80%,transparent 90%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
animation:emGira 11s linear infinite reverse;
opacity:.9;
}
.emblema .r3{
inset:-23%;border:1.5px dashed rgba(255,255,255,.28);
animation:emGira 34s linear infinite;
}
@keyframes emGira{to{transform:rotate(1turn)}}
/* disco de fondo con franja de barbero */
.emblema .em-disco{
position:absolute;inset:4%;border-radius:50%;
background:
radial-gradient(circle at 34% 26%,rgba(255,255,255,.14),transparent 55%),
#050505;
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 0 60px rgba(0,0,0,.9),0 30px 70px -24px rgba(0,0,0,1);
overflow:hidden;
}
.emblema .em-disco::before{
content:"";position:absolute;inset:0;opacity:.3;
background:var(--poste);background-size:100% 200%;
animation:posteGira 3.4s linear infinite;
-webkit-mask:radial-gradient(circle,transparent 52%,#000 96%);
mask:radial-gradient(circle,transparent 52%,#000 96%);
}
@keyframes posteGira{to{background-position:0 -112px}}
/* el logo */
.emblema .em-logo{
position:relative;z-index:3;width:64%;height:64%;object-fit:contain;
filter:drop-shadow(0 0 26px rgba(255,255,255,.5)) drop-shadow(0 0 52px rgba(228,50,43,.55));
animation:emLatir 5.5s var(--e-io) infinite;
}
@keyframes emLatir{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
/* texto circular alrededor.
Se centra con left/top 50% + translate: mezclar `inset` con `width/height`
deja la caja sobrerestringida y el círculo se descuadra del logo. */
.emblema .em-circular{
position:absolute;top:50%;left:50%;
width:138%;height:138%;
transform:translate(-50%,-50%);
transform-origin:50% 50%;
z-index:2;pointer-events:none;overflow:visible;
animation:emGiraCentrado 26s linear infinite;
}
/* la rotación debe conservar el centrado, si no se descoloca al girar */
@keyframes emGiraCentrado{
from{transform:translate(-50%,-50%) rotate(0deg)}
to{transform:translate(-50%,-50%) rotate(360deg)}
}
.emblema .em-circular text{
font-family:var(--f-cond);font-weight:800;font-size:9.4px;
fill:rgba(255,255,255,.85);text-transform:uppercase;
}
/* chapa de premio */
.emblema .em-chapa{
position:absolute;right:-2%;bottom:4%;z-index:4;
display:grid;place-content:center;text-align:center;gap:1px;
width:clamp(62px,8.4vw,104px);aspect-ratio:1;border-radius:50%;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo) 55%,var(--rojo-osc));
color:#fff;border:2px solid rgba(255,255,255,.85);
box-shadow:0 16px 36px -12px rgba(228,50,43,1);
transform:rotate(-11deg);
animation:chapaBota 4.5s var(--e-back) infinite;
}
@keyframes chapaBota{0%,100%{transform:rotate(-11deg) scale(1)}50%{transform:rotate(-5deg) scale(1.07)}}
.emblema .em-chapa b{font-family:var(--f-display);font-size:clamp(13px,1.7vw,20px);line-height:.95}
.emblema .em-chapa span{font-family:var(--f-cond);font-weight:800;font-size:clamp(7px,.85vw,9px);letter-spacing:.14em}
/* ═══════════ POSTES DE BARBERO ═══════════
Uno a cada lado, de la altura completa del banner. */
.poste3d{
position:absolute;z-index:4;pointer-events:none;
top:calc(var(--nav-h) + clamp(6px,1vw,16px));
bottom:clamp(14px,2vw,30px);
width:clamp(34px,3.1vw,52px);
perspective:900px;
}
.poste3d.izq{left:clamp(8px,1.5vw,30px)}
.poste3d.der{right:clamp(8px,1.5vw,30px)}
/* el cilindro de cristal */
.poste3d .tubo{
position:absolute;left:0;right:0;
top:clamp(9px,.9vw,15px);bottom:clamp(9px,.9vw,15px);
border-radius:clamp(16px,1.6vw,26px);overflow:hidden;
background:var(--poste);
background-size:100% 200%;
animation:posteGira 2.6s linear infinite;
box-shadow:
inset -13px 0 28px rgba(0,0,0,.72),
inset 13px 0 20px rgba(255,255,255,.26),
inset 0 0 0 1px rgba(255,255,255,.16),
0 20px 55px -18px rgba(228,50,43,.7),
0 -20px 55px -18px rgba(30,79,216,.5);
}
/* sombreado del cilindro: bordes oscuros, centro luminoso */
.poste3d .tubo::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,
rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 22%,
rgba(255,255,255,.16) 42%,rgba(0,0,0,.1) 66%,rgba(0,0,0,.6) 100%);
}
/* las tapas cromadas */
.poste3d .tapa{
position:absolute;left:-13%;right:-13%;z-index:2;
height:clamp(15px,1.5vw,25px);border-radius:clamp(6px,.7vw,10px);
background:var(--cromo-suave);
box-shadow:0 8px 20px rgba(0,0,0,.75),
inset 0 -3px 6px rgba(0,0,0,.35),
inset 0 2px 3px rgba(255,255,255,.85);
}
.poste3d .tapa.arriba{top:0}
.poste3d .tapa.abajo{bottom:0}
/* reflejo vertical del cristal */
.poste3d .brillo{
position:absolute;left:14%;width:20%;top:clamp(9px,.9vw,15px);bottom:clamp(9px,.9vw,15px);
border-radius:99px;z-index:3;
background:linear-gradient(90deg,rgba(255,255,255,.62),rgba(255,255,255,.06));
filter:blur(1px);
}
/* el poste derecho es el espejo del izquierdo: rayas y luz simétricas */
.poste3d.der .tubo{transform:scaleX(-1)}
.poste3d.der .brillo{
left:auto;right:14%;
background:linear-gradient(270deg,rgba(255,255,255,.62),rgba(255,255,255,.06));
}
/* --------------------------------------------------------------------------
8. SEPARADORES 3D
-------------------------------------------------------------------------- */
/* Marquesina */
.marquesina{
position:relative;overflow:hidden;
padding:clamp(14px,2.2vw,22px) 0;
background:linear-gradient(100deg,var(--rojo) 0%,var(--rojo-cla) 48%,var(--rojo) 100%);
color:var(--blanco);
border-block:2px solid rgba(255,255,255,.85);
transform:rotate(-1.6deg) scale(1.05);
box-shadow:0 22px 60px -22px rgba(228,50,43,.95);
z-index:3;
}
.marquesina.invertida{
background:linear-gradient(100deg,var(--azul-osc) 0%,var(--azul) 48%,var(--azul-osc) 100%);
color:var(--blanco);border-color:rgba(255,255,255,.85);
transform:rotate(1.6deg) scale(1.05);
box-shadow:0 22px 60px -22px rgba(30,79,216,.95);
}
.marquesina.blanca{
background:var(--blanco);color:var(--negro);border-color:var(--negro);
box-shadow:0 22px 60px -24px rgba(255,255,255,.5);
}
.marq-pista{display:flex;width:max-content;animation:marqDesliza 26s linear infinite;will-change:transform}
.marquesina.rev .marq-pista{animation-direction:reverse}
.marquesina:hover .marq-pista{animation-play-state:paused}
@keyframes marqDesliza{to{transform:translateX(-50%)}}
.marq-grupo{display:flex;align-items:center;flex:none}
.marq-grupo span{
display:inline-flex;align-items:center;gap:clamp(16px,3vw,34px);
padding-inline:clamp(16px,3vw,34px);
font-family:var(--f-display);text-transform:uppercase;
font-size:clamp(1.15rem,3.6vw,2.5rem);line-height:1;letter-spacing:.01em;white-space:nowrap;
}
.marq-grupo span::after{content:"";width:clamp(9px,1.6vw,15px);height:clamp(9px,1.6vw,15px);border-radius:50%;background:currentColor;flex:none}
.marq-grupo .fino{-webkit-text-stroke:1.4px currentColor;color:transparent}
/* Separador con cubo 3D */
.sep3d{
position:relative;display:grid;place-items:center;
padding:clamp(12px,1.4vw,24px) 0;background:transparent;
overflow:hidden;
}
/* ── Aire alrededor de los separadores ──
Una sección y un separador seguidos sumaban sus rellenos y dejaban un hueco
enorme. Junto a un separador, la sección respira menos por ese lado. */
main > section:has(+ .sep3d),
main > section:has(+ .sep-galones),
main > section:has(+ .cinta-doble){padding-bottom:clamp(22px,2.4vw,38px)}
.sep3d + section,
.sep-galones + section,
.cinta-doble + section{padding-top:clamp(22px,2.4vw,38px)}
/* Dos secciones seguidas SIN separador en medio (opiniones → ubicación):
sumaban los dos rellenos enteros y dejaban un vacío de 266 px.
El `[class]` es necesario: sin él la regla pierde contra `.social`/`.ubicacion`. */
main > section[class]:has(+ section){padding-bottom:clamp(26px,3vw,50px)}
main > section[class] + section[class]{padding-top:clamp(26px,3vw,50px)}
.sep3d::before,.sep3d::after{
content:"";position:absolute;top:50%;height:3px;border-radius:2px;width:min(38%,420px);
background:linear-gradient(90deg,transparent,var(--rojo) 55%,var(--azul));
box-shadow:0 0 18px -4px rgba(228,50,43,.8);
}
.sep3d::before{left:var(--pad-x)}
.sep3d::after{right:var(--pad-x);transform:scaleX(-1)}
.escena-cubo{width:clamp(56px,9vw,86px);height:clamp(56px,9vw,86px);perspective:620px;position:relative;z-index:2}
.cubo{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:cuboGira 15s linear infinite;will-change:transform}
@keyframes cuboGira{
0%{transform:rotateX(-22deg) rotateY(0deg)}
100%{transform:rotateX(-22deg) rotateY(360deg)}
}
.cubo figure{
position:absolute;inset:0;display:grid;place-items:center;
border:1.5px solid rgba(255,255,255,.5);
background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.02));
backdrop-filter:blur(2px);
}
.cubo .f1,.cubo .f3{background:linear-gradient(140deg,rgba(228,50,43,.55),rgba(228,50,43,.14));border-color:rgba(255,120,114,.75)}
.cubo .f2,.cubo .f4{background:linear-gradient(140deg,rgba(30,79,216,.55),rgba(30,79,216,.14));border-color:rgba(120,155,255,.75)}
.cubo .f5,.cubo .f6{background:linear-gradient(140deg,rgba(255,255,255,.3),rgba(255,255,255,.06))}
.cubo figure img{
/* El ![]()
lleva height="86" en el HTML. El CSS solo le cambiaba el
ANCHO, asi que la altura se quedaba clavada en 86 px: en movil, con
caras de 57 px, el logo cuadrado salia estirado a 37x85 y se salia
del cubo. En ordenador coincidia por casualidad y por eso se veia
bien. Con height:auto vuelve a ser proporcional. */
width:66%;height:auto;max-height:66%;object-fit:contain;opacity:.98
}
.cubo figure span{font-family:var(--f-display);font-size:clamp(15px,2.4vw,22px);color:var(--blanco);letter-spacing:.05em;text-shadow:0 0 12px rgba(0,0,0,.7)}
.cubo .f1{transform:translateZ(calc(clamp(56px,9vw,86px) / 2))}
.cubo .f2{transform:rotateY(90deg) translateZ(calc(clamp(56px,9vw,86px) / 2))}
.cubo .f3{transform:rotateY(180deg) translateZ(calc(clamp(56px,9vw,86px) / 2))}
.cubo .f4{transform:rotateY(-90deg) translateZ(calc(clamp(56px,9vw,86px) / 2))}
.cubo .f5{transform:rotateX(90deg) translateZ(calc(clamp(56px,9vw,86px) / 2))}
.cubo .f6{transform:rotateX(-90deg) translateZ(calc(clamp(56px,9vw,86px) / 2))}
.escena-cubo .sombra{
position:absolute;left:50%;bottom:-26px;width:120%;height:16px;
background:radial-gradient(ellipse,rgba(255,255,255,.3),transparent 70%);filter:blur(7px);
animation:sombraPulso 15s ease-in-out infinite;
}
/* escalado en vez de cambiar el ancho: mismo latido, sin recalcular */
@keyframes sombraPulso{
0%,100%{opacity:.5;transform:translateX(-50%) scaleX(1)}
50%{opacity:.85;transform:translateX(-50%) scaleX(.717)}
}
/* Separador de galones / chevrons 3D */
.sep-galones{
position:relative;height:clamp(42px,4.4vw,60px);overflow:hidden;background:transparent;
display:grid;place-items:center;perspective:520px;
}
.galones{display:flex;gap:clamp(6px,1.2vw,14px);transform:rotateX(46deg);transform-style:preserve-3d}
.galones i{
display:block;width:clamp(16px,2.6vw,30px);height:clamp(30px,5vw,58px);
background:linear-gradient(180deg,var(--rojo-cla),var(--rojo-osc));
clip-path:polygon(0 0,52% 0,100% 50%,52% 100%,0 100%,48% 50%);
opacity:.16;animation:galonPulso 2.4s var(--e-io) infinite;
}
.galones i:nth-child(3n+2){background:linear-gradient(180deg,#fff,#7a7a7a)}
.galones i:nth-child(3n+3){background:linear-gradient(180deg,var(--azul-cla),var(--azul-osc))}
.galones i:nth-child(n){animation-delay:calc(var(--i,0) * .09s)}
@keyframes galonPulso{0%,100%{opacity:.14;transform:translateZ(0)}45%{opacity:1;transform:translateZ(30px)}}
/* Cinta diagonal doble */
.cinta-doble{position:relative;height:clamp(84px,9.5vw,124px);overflow:hidden;background:transparent}
.cinta-doble .marquesina{position:absolute;left:-6%;right:-6%}
.cinta-doble .marquesina:nth-child(1){top:14%}
.cinta-doble .marquesina:nth-child(2){bottom:14%}
/* --------------------------------------------------------------------------
9. BANDA PROMO 10 = 2 GRATIS
-------------------------------------------------------------------------- */
.promo{
position:relative;padding:var(--sec-y) 0;overflow:hidden;
background:transparent;
}
.promo-halo{
position:absolute;left:50%;top:50%;width:min(120vw,1100px);aspect-ratio:1;transform:translate(-50%,-50%);
background:
radial-gradient(circle at 34% 40%,rgba(228,50,43,.3),transparent 55%),
radial-gradient(circle at 68% 62%,rgba(30,79,216,.3),transparent 55%);
pointer-events:none;filter:blur(20px);
animation:haloLatir 7s var(--e-io) infinite;
}
@keyframes haloLatir{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.75}50%{transform:translate(-50%,-50%) scale(1.16);opacity:1}}
.promo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:2}
/* Sin esto los hijos de la rejilla nunca bajan de su ancho natural
y el bloque "10 CORTES +2 GRATIS" se salia de la pantalla. */
.promo-grid>*{min-width:0}
.promo-num{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(10px,2vw,20px);margin-bottom:22px}
.promo-num .big{
font-family:var(--f-display);font-size:clamp(5rem,17vw,11rem);line-height:.78;
letter-spacing:-.04em;
}
.promo-num .big--rojo{
background:linear-gradient(160deg,var(--rojo-cla),var(--rojo) 45%,var(--rojo-osc));
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 30px rgba(228,50,43,.85));
}
.promo-num .txt{padding-top:clamp(6px,1.5vw,16px)}
.promo-num .txt b{display:block;font-family:var(--f-display);font-size:clamp(1.4rem,4.2vw,2.6rem);line-height:1;color:var(--blanco);text-transform:uppercase}
.promo-num .txt span{font-family:var(--f-cond);font-size:clamp(11px,1.6vw,13px);letter-spacing:.26em;text-transform:uppercase;color:var(--gris-500)}
.promo-pasos{display:grid;gap:14px;margin-top:clamp(24px,3.5vw,34px)}
.promo-paso{
display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.1);
transition:transform .5s var(--e-out),border-color .4s,background .4s;
}
.promo-paso:hover{transform:translateX(8px);border-color:rgba(255,255,255,.3);background:linear-gradient(120deg,rgba(255,255,255,.11),rgba(255,255,255,.03))}
.promo-paso .n{
flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
font-family:var(--f-display);font-size:16px;color:#fff;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo-osc));
box-shadow:0 8px 20px -8px rgba(228,50,43,1);
}
.promo-paso:nth-child(even) .n{background:linear-gradient(140deg,var(--azul-cla),var(--azul-osc));box-shadow:0 8px 20px -8px rgba(30,79,216,1)}
.promo-paso:hover{border-color:rgba(255,120,114,.5)}
.promo-paso:nth-child(even):hover{border-color:rgba(120,155,255,.5)}
.promo-paso b{display:block;color:var(--blanco);font-family:var(--f-cond);font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.promo-paso p{font-size:14px;color:var(--gris-400);margin-top:2px}
/* Tarjeta de sellos 3D (visual) */
.tarjeta-escena{perspective:1300px;display:grid;place-items:center}
.tarjeta3d{
position:relative;width:min(100%,430px);aspect-ratio:1.62;
transform-style:preserve-3d;
transform:rotateY(-17deg) rotateX(8deg);
transition:transform .9s var(--e-out);
will-change:transform;
}
.tarjeta-escena:hover .tarjeta3d{transform:rotateY(-4deg) rotateX(3deg) scale(1.03)}
.tarjeta-cara{
position:absolute;inset:0;border-radius:var(--r-lg);
background:
radial-gradient(circle at 12% 8%,rgba(228,50,43,.35),transparent 46%),
radial-gradient(circle at 88% 92%,rgba(30,79,216,.35),transparent 46%),
linear-gradient(140deg,#1c1c1c 0%,#000 48%,#232323 100%);
border:1px solid rgba(255,255,255,.24);
box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.2),0 0 60px -24px rgba(228,50,43,.9);
padding:clamp(16px,3.2vw,24px);display:flex;flex-direction:column;justify-content:space-between;
overflow:hidden;
}
/* franja tricolor en el canto de la tarjeta */
.tarjeta-cara::after{
content:"";position:absolute;left:0;right:0;top:0;height:5px;
background:var(--poste);background-size:200% 100%;
animation:plPoste 1.1s linear infinite;
}
.tarjeta-cara::before{
content:"";position:absolute;inset:0;
background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.14) 48%,transparent 62%);
transform:translateX(-30%);animation:brilloTarjeta 5.5s var(--e-io) infinite;
}
@keyframes brilloTarjeta{0%,70%,100%{transform:translateX(-60%)}35%{transform:translateX(60%)}}
.tc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2}
.tc-top img{width:clamp(34px,6vw,44px);height:auto}
.tc-top .tc-tit{font-family:var(--f-display);font-size:clamp(13px,2.3vw,17px);letter-spacing:.1em;color:var(--blanco);text-transform:uppercase;text-align:right;line-height:1.1}
.tc-top .tc-tit small{display:block;font-family:var(--f-cond);font-size:9.5px;letter-spacing:.3em;color:var(--gris-500)}
.tc-sellos{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.4vw,10px);position:relative;z-index:2}
.tc-sello{
aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
border:1.5px dashed rgba(255,255,255,.26);
font-family:var(--f-display);font-size:clamp(10px,1.8vw,13px);color:var(--gris-600);
transition:.5s var(--e-back);
}
.tc-sello.lleno{
border:1.5px solid var(--rojo-cla);
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo-osc));color:#fff;
box-shadow:0 0 18px rgba(228,50,43,.9);transform:scale(1.06);
}
.tc-sello.lleno img{width:74%}
.tc-sello.lleno:nth-child(even){
border-color:var(--azul-cla);
background:linear-gradient(140deg,var(--azul-cla),var(--azul-osc));
box-shadow:0 0 18px rgba(30,79,216,.9);
}
.tc-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2}
.tc-pie span{font-family:var(--f-cond);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-500)}
.tc-pie b{font-family:var(--f-display);font-size:clamp(15px,2.6vw,20px);color:var(--blanco)}
/* --------------------------------------------------------------------------
10. SERVICIOS — tarjetas 3D
-------------------------------------------------------------------------- */
.servicios{padding:var(--sec-y) 0;position:relative;background:transparent}
.serv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,26px);perspective:1500px}
.serv-card{
position:relative;padding:clamp(24px,3.4vw,36px);border-radius:var(--r-lg);
background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.012));
border:1px solid rgba(255,255,255,.1);
transform-style:preserve-3d;overflow:hidden;isolation:isolate;
transition:border-color .5s,box-shadow .5s,background .5s;
will-change:transform;
}
/* franja tricolor superior que aparece al pasar el ratón */
.serv-card::after{
content:"";position:absolute;left:0;right:0;top:0;height:4px;
background:var(--tricolor);transform:scaleX(0);transform-origin:left;
transition:transform .6s var(--e-out);
}
.serv-card:hover::after{transform:scaleX(1)}
.serv-card::before{
content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
background:radial-gradient(circle 280px at var(--cx,50%) var(--cy,50%),rgba(228,50,43,.3),rgba(30,79,216,.16) 45%,transparent 72%);
}
.serv-card:hover::before{opacity:1}
.serv-card:hover{border-color:rgba(255,120,114,.45);box-shadow:0 40px 80px -34px rgba(228,50,43,.7)}
.serv-card:nth-child(even):hover{border-color:rgba(120,155,255,.45);box-shadow:0 40px 80px -34px rgba(30,79,216,.7)}
.serv-card:nth-child(even)::before{
background:radial-gradient(circle 280px at var(--cx,50%) var(--cy,50%),rgba(30,79,216,.3),rgba(228,50,43,.16) 45%,transparent 72%);
}
.serv-num{
position:absolute;right:clamp(14px,2.4vw,22px);top:clamp(10px,2vw,16px);
font-family:var(--f-display);font-size:clamp(3.4rem,7vw,5.4rem);line-height:1;
color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.18);
transition:.6s var(--e-out);pointer-events:none;
}
.serv-card:hover .serv-num{-webkit-text-stroke-color:var(--rojo);transform:translateZ(40px) scale(1.08)}
.serv-card:nth-child(even):hover .serv-num{-webkit-text-stroke-color:var(--azul-cla)}
.serv-icono{
width:clamp(48px,6vw,60px);height:clamp(48px,6vw,60px);border-radius:var(--r-sm);
display:grid;place-items:center;margin-bottom:20px;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo-osc));color:#fff;
transform:translateZ(34px);
box-shadow:0 14px 30px -10px rgba(228,50,43,.95);
transition:transform .6s var(--e-back),box-shadow .5s;
}
.serv-card:nth-child(even) .serv-icono{
background:linear-gradient(140deg,var(--azul-cla),var(--azul-osc));
box-shadow:0 14px 30px -10px rgba(30,79,216,.95);
}
.serv-card:hover .serv-icono{transform:translateZ(58px) rotate(-9deg) scale(1.12)}
.serv-icono svg{width:52%;height:52%}
.serv-card h3{
font-family:var(--f-display);font-size:clamp(1.25rem,2.6vw,1.65rem);text-transform:uppercase;
color:var(--blanco);letter-spacing:.01em;line-height:1.1;transform:translateZ(26px);
}
.serv-card p{margin-top:10px;color:var(--gris-400);font-size:14.5px;transform:translateZ(16px)}
.serv-precio{
display:flex;align-items:baseline;gap:8px;margin-top:20px;padding-top:18px;
border-top:1px solid rgba(255,255,255,.1);transform:translateZ(20px);
}
.serv-precio b{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2rem);color:var(--rojo-cla);text-shadow:0 0 22px rgba(228,50,43,.6)}
.serv-card:nth-child(even) .serv-precio b{color:var(--azul-cla);text-shadow:0 0 22px rgba(76,123,255,.6)}
.serv-precio span{font-family:var(--f-cond);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-500)}
.serv-precio .desde{margin-right:auto}
.nota-precios{margin-top:24px;text-align:center;font-size:12.5px;color:var(--gris-600);letter-spacing:.04em}
/* --------------------------------------------------------------------------
11. GALERÍA ARTÍSTICA
-------------------------------------------------------------------------- */
.galeria{padding:var(--sec-y) 0;position:relative;background:transparent}
.gal-filtros{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:clamp(26px,4vw,42px)}
.gal-filtros button{
position:relative;padding:9px 20px;border-radius:var(--r-full);
font-family:var(--f-cond);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
color:var(--gris-300);border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);
transition:.4s var(--e-out);
}
.gal-filtros button:hover{color:var(--blanco);border-color:var(--rojo);transform:translateY(-3px);box-shadow:0 10px 24px -12px rgba(228,50,43,.95)}
.gal-filtros button.on{
background:linear-gradient(135deg,var(--rojo-cla),var(--rojo) 55%,var(--rojo-osc));
color:#fff;border-color:transparent;
box-shadow:0 12px 28px -12px rgba(228,50,43,1);
}
.gal-mosaico{
display:grid;grid-template-columns:repeat(12,1fr);
gap:clamp(10px,1.4vw,18px);
grid-auto-flow:dense;
perspective:1600px;
}
/* ---------- pieza de galería ---------- */
.gal-item{
position:relative;overflow:hidden;border-radius:var(--r-md);
background:var(--gris-900);cursor:pointer;
transform-style:preserve-3d;
transition:transform .7s var(--e-out),box-shadow .7s,opacity .5s,border-color .5s;
border:1.5px solid rgba(255,255,255,.09);
}
.gal-item:hover{will-change:transform}
.gal-item.oculto{display:none}
.gal-item img{
width:100%;height:100%;object-fit:cover;
/* fotos con su color natural: sin tintes ni blanco y negro */
transform:scale(1.05);
transition:transform 1.2s var(--e-out);
}
/* degradado inferior para que se lea el texto */
.gal-item::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 32%,transparent 48%,rgba(0,0,0,.94) 100%);
transition:opacity .5s;opacity:.9;
}
/* al pasar el ratón: color real, zoom y elevación */
.gal-item:hover img{transform:scale(1.14)}
.gal-item:hover::after{opacity:.72}
.gal-item:hover{
z-index:3;border-color:rgba(255,255,255,.45);
box-shadow:0 46px 96px -34px rgba(228,50,43,.75),0 26px 60px -30px rgba(30,79,216,.7);
}
/* esquinas tipo visor de cámara */
.gal-esquinas{position:absolute;inset:10px;z-index:3;pointer-events:none}
.gal-esquinas i{
position:absolute;width:20px;height:20px;border:2px solid var(--blanco);border-radius:3px;
opacity:0;transition:.5s var(--e-out);
}
.gal-esquinas i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;transform:translate(-8px,-8px)}
.gal-esquinas i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;transform:translate(8px,-8px)}
.gal-esquinas i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;transform:translate(-8px,8px)}
.gal-esquinas i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;transform:translate(8px,8px)}
.gal-item:hover .gal-esquinas i{opacity:.95;transform:none}
/* número de archivo, arriba a la izquierda */
.gal-num{
position:absolute;left:clamp(12px,1.6vw,18px);top:clamp(10px,1.4vw,16px);z-index:4;
font-family:var(--f-display);font-size:clamp(15px,2vw,22px);line-height:1;
color:rgba(255,255,255,.9);letter-spacing:.06em;
text-shadow:0 2px 12px rgba(0,0,0,.9);
transition:.5s var(--e-out);
}
.gal-item:hover .gal-num{color:#fff;transform:translateY(-3px)}
/* etiqueta de categoría */
.gal-tag{
position:absolute;right:clamp(10px,1.4vw,14px);top:clamp(10px,1.4vw,14px);z-index:4;
padding:5px 11px;border-radius:var(--r-full);
font-family:var(--f-cond);font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);
backdrop-filter:blur(8px);
transform:translateY(-8px);opacity:0;transition:.5s var(--e-out);
}
.gal-item:hover .gal-tag{transform:none;opacity:1}
.gal-tag[data-c="cortes"]{background:rgba(228,50,43,.85);border-color:rgba(255,255,255,.5)}
.gal-tag[data-c="disenos"]{background:rgba(30,79,216,.85);border-color:rgba(255,255,255,.5)}
.gal-tag[data-c="local"]{background:rgba(255,255,255,.9);color:#000;border-color:#fff}
/* pie de la pieza */
.gal-meta{
position:absolute;left:0;right:0;bottom:0;z-index:4;padding:clamp(13px,1.8vw,20px);
display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
transform:translateY(10px);opacity:0;transition:.55s var(--e-out);
}
.gal-item:hover .gal-meta{transform:none;opacity:1}
.gal-meta b{display:block;font-family:var(--f-display);font-size:clamp(14px,1.9vw,19px);color:var(--blanco);text-transform:uppercase;line-height:1.05}
.gal-meta .ig{display:block;font-family:var(--f-cond);font-weight:700;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-300);margin-top:3px}
.gal-meta .linea-c{display:block;width:34px;height:3px;border-radius:2px;background:var(--tricolor);margin-bottom:9px;
transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out) .12s}
.gal-item:hover .gal-meta .linea-c{transform:scaleX(1)}
.gal-lupa{
position:absolute;right:12px;bottom:12px;z-index:5;width:40px;height:40px;border-radius:50%;
display:grid;place-items:center;color:#fff;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo-osc));
box-shadow:0 10px 24px -8px rgba(228,50,43,1);
transform:scale(0) rotate(-90deg);transition:.5s var(--e-back);
}
.gal-item:nth-child(even) .gal-lupa{background:linear-gradient(140deg,var(--azul-cla),var(--azul-osc));box-shadow:0 10px 24px -8px rgba(30,79,216,1)}
.gal-item:hover .gal-lupa{transform:none}
.gal-lupa svg{width:17px;height:17px}
/* desfase editorial: las piezas pares bajan un poco (solo escritorio) */
@media (min-width:901px){
.gal-item:nth-child(even){margin-top:clamp(14px,2.4vw,34px)}
.gal-item:nth-child(5n+3){margin-top:clamp(6px,1.2vw,16px)}
}
/* patrón de tamaños (escritorio) */
.gal-item:nth-child(1){grid-column:span 5;aspect-ratio:4/5}
.gal-item:nth-child(2){grid-column:span 4;aspect-ratio:3/4}
.gal-item:nth-child(3){grid-column:span 3;aspect-ratio:3/5}
.gal-item:nth-child(4){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(5){grid-column:span 5;aspect-ratio:16/11}
.gal-item:nth-child(6){grid-column:span 4;aspect-ratio:4/5}
.gal-item:nth-child(7){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(8){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(9){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(10){grid-column:span 3;aspect-ratio:3/5}
.gal-ig{display:grid;place-items:center;margin-top:clamp(30px,4vw,46px);gap:14px}
/* Lightbox */
.lightbox{
position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
background:rgba(0,0,0,.96);backdrop-filter:blur(14px);
opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;
padding:clamp(12px,3vw,40px);
}
.lightbox.abierto{opacity:1;visibility:visible}
.lb-marco{position:relative;max-width:min(94vw,940px);max-height:86svh;perspective:1200px}
.lb-marco img{
max-width:100%;max-height:82svh;object-fit:contain;border-radius:var(--r-md);
box-shadow:0 50px 120px -30px rgba(228,50,43,.6),0 30px 90px -40px rgba(30,79,216,.6);
border:2px solid rgba(255,255,255,.28);
animation:lbEntra .6s var(--e-out);
}
@keyframes lbEntra{from{opacity:0;transform:rotateY(-14deg) scale(.9)}to{opacity:1;transform:none}}
.lb-marco video{
max-width:100%;max-height:82svh;border-radius:var(--r-md);background:#000;
box-shadow:0 50px 120px -30px rgba(228,50,43,.6),0 30px 90px -40px rgba(30,79,216,.6);
border:2px solid rgba(255,255,255,.28);
animation:lbEntra .6s var(--e-out);
}
.lb-marco .oculto{display:none}
/* chapa de play sobre los videos del mosaico */
.gal-play{
position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;
}
.gal-play svg{
width:clamp(38px,4.6vw,52px);height:clamp(38px,4.6vw,52px);
color:#fff;padding:12px;border-radius:50%;
background:rgba(0,0,0,.42);border:1.5px solid rgba(255,255,255,.55);
backdrop-filter:blur(6px);
box-shadow:0 14px 34px -12px rgba(0,0,0,.9);
transition:transform .45s var(--e-io),background .35s;
}
.gal-item:hover .gal-play svg{transform:scale(1.12);background:var(--rojo);border-color:var(--rojo)}
.lb-cap{margin-top:14px;text-align:center;font-family:var(--f-cond);letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--gris-400)}
.lb-cerrar,.lb-nav{
position:absolute;z-index:3;width:clamp(44px,6vw,54px);height:clamp(44px,6vw,54px);border-radius:50%;
display:grid;place-items:center;color:var(--blanco);
border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
transition:.4s var(--e-back);
}
.lb-cerrar:hover,.lb-nav:hover{background:var(--rojo);border-color:var(--rojo);color:#fff;transform:scale(1.12);box-shadow:var(--glow-rojo)}
.lb-cerrar{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);position:fixed}
.lb-nav{top:50%;transform:translateY(-50%);position:fixed}
.lb-nav:hover{transform:translateY(-50%) scale(1.12)}
.lb-nav.prev{left:clamp(8px,2.4vw,26px)}
.lb-nav.next{right:clamp(8px,2.4vw,26px)}
.lb-cerrar svg,.lb-nav svg{width:21px;height:21px}
.lb-contador{position:fixed;bottom:clamp(14px,3vw,28px);left:50%;transform:translateX(-50%);font-family:var(--f-display);font-size:15px;color:var(--gris-400);letter-spacing:.12em}
.lb-contador b{color:var(--blanco)}
/* --------------------------------------------------------------------------
12. CLUB / FIDELIZACIÓN
-------------------------------------------------------------------------- */
.club{padding:var(--sec-y) 0;position:relative;background:transparent;overflow:hidden}
.club-halo{position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 55% 45% at 82% 24%,rgba(30,79,216,.28),transparent 62%),
radial-gradient(ellipse 50% 45% at 14% 76%,rgba(228,50,43,.26),transparent 62%)}
.club-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4.5vw,64px);align-items:start;position:relative;z-index:2}
/* panel de la tarjeta del socio */
.socio-panel{
position:relative;padding:clamp(20px,3vw,30px);border-radius:var(--r-xl);
background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.18);
box-shadow:var(--sh-3),0 0 70px -30px rgba(228,50,43,.8);
backdrop-filter:blur(12px);overflow:hidden;
}
/* franja de barbero en el borde superior del panel */
.socio-panel::before{
content:"";position:absolute;left:0;right:0;top:0;height:5px;
background:var(--poste);background-size:200% 100%;
animation:plPoste 1.1s linear infinite;
}
.socio-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.socio-cab h3{font-family:var(--f-display);font-size:clamp(1.1rem,2.4vw,1.5rem);text-transform:uppercase;color:var(--blanco);letter-spacing:.02em}
.progreso-anillo{position:relative;width:clamp(120px,20vw,160px);aspect-ratio:1;margin:0 auto clamp(18px,2.6vw,26px)}
.progreso-anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.progreso-anillo circle{fill:none;stroke-width:9;stroke-linecap:round}
.progreso-anillo .pista{stroke:rgba(255,255,255,.11)}
.progreso-anillo .valor{stroke:url(#gradBarbero);transition:stroke-dashoffset 1s var(--e-out);filter:drop-shadow(0 0 10px rgba(228,50,43,.9))}
.progreso-txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.progreso-txt b{font-family:var(--f-display);font-size:clamp(2rem,5vw,2.8rem);line-height:1;color:var(--blanco);text-shadow:0 0 26px rgba(228,50,43,.7)}
.progreso-txt span{font-family:var(--f-cond);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gris-500)}
.sellos-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.4vw,12px);margin-bottom:22px}
.sello{
position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
border:2px dashed rgba(255,255,255,.2);
font-family:var(--f-display);font-size:clamp(11px,2vw,15px);color:var(--gris-600);
transition:.55s var(--e-back);
}
.sello.lleno{
border:2px solid var(--rojo-cla);
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo-osc));color:#fff;
box-shadow:0 0 22px rgba(228,50,43,.9);
animation:selloPop .6s var(--e-back);
}
.sello.lleno:nth-child(even){
border-color:var(--azul-cla);
background:linear-gradient(140deg,var(--azul-cla),var(--azul-osc));
box-shadow:0 0 22px rgba(30,79,216,.9);
}
.sello.lleno img{width:76%}
@keyframes selloPop{0%{transform:scale(0) rotate(-140deg)}60%{transform:scale(1.22) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.sello.premio{border-style:solid;border-color:var(--rojo);box-shadow:0 0 18px -4px rgba(228,50,43,.8);color:var(--rojo-cla)}
.sello.premio::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--rojo);animation:aro 2.6s var(--e-io) infinite}
@keyframes aro{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.14);opacity:0}}
.socio-datos{display:grid;gap:8px;padding:16px;border-radius:var(--r-md);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.09);margin-bottom:18px}
.socio-datos .fila{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.socio-datos .fila span{color:var(--gris-500);font-family:var(--f-cond);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px}
.socio-datos .fila b{color:var(--blanco);font-weight:600;text-align:right;word-break:break-word}
.socio-acciones{display:grid;gap:10px}
.socio-acciones .btn{width:100%}
.club-aviso{
display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:var(--r-md);
background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18);
font-size:13px;color:var(--gris-400);
}
.club-aviso svg{width:19px;height:19px;flex:none;color:var(--gris-300);margin-top:2px}
/* Premio desbloqueado */
.premio-banner{
display:none;margin-bottom:20px;padding:22px 20px;border-radius:var(--r-lg);text-align:center;
background:linear-gradient(135deg,var(--rojo-cla),var(--rojo) 45%,var(--rojo-osc));
color:#fff;position:relative;overflow:hidden;
border:2px solid rgba(255,255,255,.6);
box-shadow:0 22px 54px -20px rgba(228,50,43,1);
}
.premio-banner::before{
content:"";position:absolute;inset:-40%;
background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,255,255,.5) 82%,transparent 92%);
animation:emGira 4.5s linear infinite;
}
.premio-banner > *{position:relative;z-index:2}
.premio-banner.on{display:block;animation:premioIn .8s var(--e-back)}
@keyframes premioIn{from{opacity:0;transform:scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
.premio-banner b{display:block;font-family:var(--f-display);font-size:clamp(1.5rem,4vw,2.2rem);text-transform:uppercase;line-height:1;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.premio-banner p{font-size:13.5px;margin-top:6px;color:rgba(255,255,255,.9)}
.premio-banner .codigo{
display:inline-block;margin-top:12px;padding:10px 22px;border-radius:var(--r-full);
background:var(--negro);color:var(--blanco);font-family:var(--f-display);letter-spacing:.24em;font-size:17px;
border:1px solid rgba(255,255,255,.35);
}
/* Escáner QR */
.escaner{
position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.97);
display:grid;grid-template-rows:auto 1fr auto;gap:16px;padding:clamp(16px,4vw,30px);
opacity:0;visibility:hidden;transition:.45s;
}
.escaner.abierto{opacity:1;visibility:visible}
.esc-cab{display:flex;align-items:center;justify-content:space-between;gap:14px}
.esc-cab h3{font-family:var(--f-display);text-transform:uppercase;color:var(--blanco);font-size:clamp(1.1rem,3vw,1.5rem)}
.esc-video{
position:relative;width:100%;height:100%;min-height:0;border-radius:var(--r-lg);overflow:hidden;
background:#000;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;
}
.esc-video video{width:100%;height:100%;object-fit:cover}
.esc-mira{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.esc-mira .caja{
position:relative;width:min(66vw,270px);aspect-ratio:1;border-radius:20px;
box-shadow:0 0 0 100vmax rgba(0,0,0,.6);
}
.esc-mira .caja i{position:absolute;width:30px;height:30px;border:3px solid var(--rojo);border-radius:6px;box-shadow:0 0 14px rgba(228,50,43,.9)}
.esc-mira .caja i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0}
.esc-mira .caja i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0}
.esc-mira .caja i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0}
.esc-mira .caja i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0}
.esc-mira .laser{
position:absolute;left:6%;right:6%;top:6%;height:3px;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--rojo) 30%,#fff 50%,var(--azul-cla) 70%,transparent);
box-shadow:0 0 18px rgba(228,50,43,.95);animation:laserVa 2.1s var(--e-io) infinite;
}
/* el láser recorre la mira con transform, no con `top` */
@keyframes laserVa{
0%{transform:translateY(0)}
50%{transform:translateY(var(--recorrido,240px))}
100%{transform:translateY(0)}
}
.esc-estado{text-align:center;font-family:var(--f-cond);letter-spacing:.2em;text-transform:uppercase;font-size:12.5px;color:var(--gris-400);min-height:20px}
.esc-pie{display:grid;gap:10px}
.esc-manual{display:flex;gap:8px;flex-wrap:wrap}
.esc-manual input{
flex:1 1 160px;padding:14px 16px;border-radius:var(--r-full);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--blanco);
text-align:center;font-family:var(--f-display);letter-spacing:.28em;text-transform:uppercase;font-size:16px;
}
.esc-manual input::placeholder{color:var(--gris-600);letter-spacing:.2em}
/* --------------------------------------------------------------------------
13. FORMULARIO DE REGISTRO
-------------------------------------------------------------------------- */
.registro{position:relative;padding:var(--sec-y) 0;background:transparent;overflow:hidden}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:2}
.reg-beneficios{display:grid;gap:14px;margin-top:clamp(24px,3.4vw,34px)}
.reg-benef{display:flex;gap:14px;align-items:flex-start}
.reg-benef .ic{
flex:none;width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;
background:linear-gradient(150deg,var(--rojo-cla),var(--rojo-osc));
border:1px solid rgba(255,255,255,.24);color:#fff;
box-shadow:0 10px 24px -12px rgba(228,50,43,1);
}
.reg-benef:nth-child(2) .ic{background:linear-gradient(150deg,var(--azul-cla),var(--azul-osc));box-shadow:0 10px 24px -12px rgba(30,79,216,1)}
.reg-benef:nth-child(3) .ic{background:linear-gradient(150deg,#fff,#9a9a9a);color:#000}
.reg-benef .ic svg{width:19px;height:19px}
.reg-benef b{display:block;color:var(--blanco);font-family:var(--f-cond);font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.reg-benef p{font-size:14px;color:var(--gris-400)}
.reg-caja{
position:relative;padding:clamp(24px,3.6vw,38px);border-radius:var(--r-xl);
background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.15);
box-shadow:var(--sh-3);backdrop-filter:blur(14px);
transform-style:preserve-3d;
}
.reg-caja::before{
content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;
background:linear-gradient(135deg,var(--rojo) 0%,rgba(255,255,255,.9) 38%,var(--azul) 72%,rgba(228,50,43,.7) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:.9;
}
.reg-caja h3{font-family:var(--f-display);font-size:clamp(1.5rem,3.4vw,2.1rem);text-transform:uppercase;color:var(--blanco);line-height:1;margin-bottom:8px}
.reg-caja > p{font-size:14px;color:var(--gris-400);margin-bottom:24px}
.campo{position:relative;margin-bottom:18px}
.campo input,.campo select{
width:100%;padding:20px 18px 9px;border-radius:var(--r-md);
background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);
color:var(--blanco);font-size:15.5px;transition:border-color .35s,background .35s,box-shadow .35s;
}
.campo select{padding-top:20px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.campo select option{background:#111;color:#fff}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--rojo);background:rgba(0,0,0,.6);box-shadow:0 0 0 4px rgba(228,50,43,.18),0 0 24px -6px rgba(228,50,43,.7)}
.campo label{
position:absolute;left:18px;top:16px;pointer-events:none;
font-family:var(--f-cond);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-500);
transition:.35s var(--e-out);
}
.campo input:focus + label,.campo input:not(:placeholder-shown) + label,
.campo select:focus + label,.campo select.tiene + label{
top:7px;font-size:10px;letter-spacing:.24em;color:var(--gris-300);
}
.campo .error{display:block;margin-top:6px;font-size:12px;color:var(--rojo-cla);font-weight:600;opacity:0;transform:translateY(-4px);transition:.3s}
.campo.mal input,.campo.mal select{border-color:var(--rojo);background:rgba(228,50,43,.09);animation:tiembla .4s}
@keyframes tiembla{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.campo.mal .error{opacity:1;transform:none}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:11px;align-items:flex-start;margin-bottom:20px;cursor:pointer;font-size:12.5px;color:var(--gris-400);line-height:1.5}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .caja{
flex:none;width:21px;height:21px;border-radius:6px;margin-top:1px;
border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:.3s var(--e-back);
}
.check .caja svg{width:13px;height:13px;color:var(--negro);opacity:0;transform:scale(.4);transition:.3s var(--e-back)}
.check input:checked + .caja{background:var(--rojo);border-color:var(--rojo);box-shadow:0 0 16px -3px rgba(228,50,43,.9)}
.check .caja svg{color:#fff}
.check input:checked + .caja svg{opacity:1;transform:none}
.check a{color:var(--gris-200);text-decoration:underline;text-underline-offset:3px}
.reg-enviar{width:100%;position:relative}
.reg-enviar.cargando{pointer-events:none;color:transparent}
.reg-enviar.cargando::after{
content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;
animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(1turn)}}
.reg-legal{margin-top:16px;text-align:center;font-size:11.5px;color:var(--gris-600);line-height:1.6}
/* Éxito */
.reg-exito{display:none;text-align:center;padding:clamp(10px,2vw,20px) 0}
.reg-exito.on{display:block;animation:exitoIn .7s var(--e-out)}
@keyframes exitoIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reg-exito .tick{
width:84px;height:84px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo) 50%,var(--azul));color:#fff;
box-shadow:0 0 50px rgba(228,50,43,.8),0 0 80px -20px rgba(30,79,216,.8);
animation:tickPop .7s var(--e-back);
}
@keyframes tickPop{0%{transform:scale(0)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.reg-exito .tick svg{width:40px;height:40px}
.reg-exito h4{font-family:var(--f-display);font-size:clamp(1.5rem,4vw,2.2rem);text-transform:uppercase;color:var(--blanco);line-height:1}
.reg-exito p{color:var(--gris-400);font-size:14.5px;margin-top:10px;max-width:42ch;margin-inline:auto}
.reg-exito .socio-id{
display:inline-block;margin-top:18px;padding:11px 24px;border-radius:var(--r-full);
border:2px dashed var(--rojo);font-family:var(--f-display);letter-spacing:.22em;color:var(--blanco);font-size:16px;
box-shadow:0 0 26px -8px rgba(228,50,43,.9);
}
.reg-exito .acciones{display:grid;gap:10px;margin-top:22px}
/* --------------------------------------------------------------------------
14. RESEÑAS + PREMIO
-------------------------------------------------------------------------- */
.social{padding:var(--sec-y) 0;background:transparent;position:relative;overflow:hidden}
.social-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4.5vw,60px);align-items:center}
.premio-foto{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:var(--sh-3);max-width:520px;margin-inline:auto;transition:transform .8s var(--e-out)}
.premio-foto:hover{transform:scale(1.02)}
.premio-foto img{display:block;width:100%;height:auto;object-fit:contain}
.premio-foto figcaption{
padding:14px 16px;text-align:center;
background:rgba(0,0,0,.55);
font-family:var(--f-cond);letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--gris-300);
}
.premio-sello{
position:absolute;right:14px;top:14px;width:clamp(74px,11vw,100px);aspect-ratio:1;border-radius:50%;
display:grid;place-content:center;text-align:center;gap:1px;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo) 50%,var(--rojo-osc));color:#fff;
border:2px solid rgba(255,255,255,.85);
box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 34px -6px rgba(228,50,43,1);
animation:selloGira 16s linear infinite;
}
@keyframes selloGira{to{transform:rotate(1turn)}}
.premio-sello b{font-family:var(--f-display);font-size:clamp(15px,2.4vw,20px);line-height:.95}
.premio-sello span{font-family:var(--f-cond);font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.resenas{display:grid;gap:clamp(12px,1.8vw,18px)}
.resena{
padding:clamp(18px,2.6vw,26px);border-radius:var(--r-lg);
background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.012));
border:1px solid rgba(255,255,255,.1);
transition:transform .55s var(--e-out),border-color .45s;
}
.resena{position:relative;overflow:hidden}
.resena::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:var(--tricolor);transform:scaleY(0);transform-origin:top;
transition:transform .6s var(--e-out);
}
.resena:hover::before{transform:scaleY(1)}
.resena:hover{transform:translateY(-6px);border-color:rgba(255,120,114,.45);box-shadow:0 30px 60px -30px rgba(228,50,43,.8)}
.resena .estrellas{display:flex;gap:3px;margin-bottom:12px;color:var(--rojo-cla);font-size:17px;letter-spacing:.14em;text-shadow:0 0 16px rgba(228,50,43,.7)}
.resena .estrellas svg{width:15px;height:15px;color:var(--rojo-cla)}
.resena p{font-size:15px;color:var(--gris-200);line-height:1.65}
.resena .quien{display:flex;align-items:center;gap:11px;margin-top:16px}
.resena .avatar{
width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
background:linear-gradient(140deg,var(--rojo-cla),var(--azul));color:#fff;
font-family:var(--f-display);font-size:16px;border:1.5px solid rgba(255,255,255,.3);
}
.resena .quien b{display:block;color:var(--blanco);font-size:14px;font-weight:600}
.resena .quien span{font-size:11.5px;color:var(--gris-500);font-family:var(--f-cond);letter-spacing:.16em;text-transform:uppercase}
/* --------------------------------------------------------------------------
15. UBICACIÓN
-------------------------------------------------------------------------- */
.ubicacion{padding:var(--sec-y) 0;background:transparent;position:relative}
.ubi-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,56px);align-items:stretch}
.ubi-info{display:grid;align-content:start;gap:clamp(16px,2.4vw,24px)}
.ubi-bloque{
display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--r-lg);
background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.012));
border:1px solid rgba(255,255,255,.1);
transition:transform .5s var(--e-out),border-color .4s;
}
.ubi-bloque:hover{transform:translateX(7px);border-color:rgba(255,120,114,.45);box-shadow:0 20px 44px -26px rgba(228,50,43,.9)}
.ubi-bloque .ic{
flex:none;width:48px;height:48px;border-radius:var(--r-sm);display:grid;place-items:center;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo-osc));color:#fff;
box-shadow:0 10px 24px -10px rgba(228,50,43,1);
}
.ubi-bloque:nth-child(2) .ic{background:linear-gradient(140deg,var(--azul-cla),var(--azul-osc));box-shadow:0 10px 24px -10px rgba(30,79,216,1)}
.ubi-bloque:nth-child(3) .ic{background:linear-gradient(140deg,#fff,#8f8f8f);color:#000}
.ubi-bloque:nth-child(4) .ic{background:linear-gradient(140deg,var(--rojo),var(--azul));color:#fff}
.ubi-bloque .ic svg{width:21px;height:21px}
.ubi-bloque h4{font-family:var(--f-cond);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gris-500);margin-bottom:5px}
.ubi-bloque p,.ubi-bloque a{color:var(--blanco);font-size:15.5px;line-height:1.5}
.ubi-bloque a:hover{text-decoration:underline;text-underline-offset:4px}
.ubi-bloque .horas{display:grid;gap:3px;font-size:14px}
.ubi-bloque .horas div{display:flex;justify-content:space-between;gap:14px;color:var(--gris-300)}
.ubi-bloque .horas div b{color:var(--blanco);font-weight:600}
.ubi-bloque .horas div.hoy{color:var(--rojo-cla);font-weight:700}
.ubi-bloque .horas div.hoy b{color:var(--rojo-cla)}
/* redes sociales dentro del bloque de ubicacion */
.ubi-redes{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ubi-redes a{
display:inline-flex;align-items:center;gap:8px;
padding:7px 13px;border-radius:999px;
border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);
font-size:13.5px;line-height:1;color:var(--gris-200);
transition:transform .3s var(--e-io),background .3s,border-color .3s,color .3s;
}
.ubi-redes a svg{width:15px;height:15px;flex:none}
.ubi-redes a:hover{
transform:translateY(-2px);text-decoration:none;
background:var(--rojo);border-color:var(--rojo);color:#fff;box-shadow:var(--glow-rojo);
}
.ubi-redes a:nth-child(2):hover{background:#111;border-color:rgba(255,255,255,.45);box-shadow:0 12px 26px -14px rgba(255,255,255,.5)}
.ubi-redes a:nth-child(3):hover{background:var(--azul);border-color:var(--azul);box-shadow:var(--glow-azul)}
.ubi-mapa{
position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(320px,46vw,520px);
border:1px solid rgba(255,255,255,.14);box-shadow:var(--sh-3);
}
.ubi-mapa iframe{width:100%;height:100%;min-height:inherit;border:0}
.ubi-mapa .marco{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);border-radius:inherit}
.ubi-cartel{
position:absolute;left:14px;bottom:14px;width:clamp(96px,15vw,138px);border-radius:var(--r-sm);overflow:hidden;
border:1px solid rgba(255,255,255,.3);box-shadow:0 18px 40px rgba(0,0,0,.8);
transform:rotate(-3deg);transition:transform .6s var(--e-back);
}
.ubi-cartel:hover{transform:rotate(0) scale(1.07)}
.ubi-cartel img{
/* Mismo fallo que tenia el logo del cubo: el ![]()
lleva height="640"
en el HTML y el CSS solo le fijaba el ancho, asi que la altura se
quedaba en 640 px y la foto salia aplastada a la mitad de su ancho
(proporcion real 0.56, se dibujaba a 0.26). Con height:auto vuelve
a su proporcion y el cartelito recupera su tamano de polaroid. */
display:block;width:100%;height:auto
}
/* --------------------------------------------------------------------------
16. PIE DE PÁGINA
-------------------------------------------------------------------------- */
.pie{position:relative;background:transparent;overflow:hidden;border-top:0}
/* franja tricolor de barbero arriba del pie */
.pie::before{
content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:5;
background:var(--poste);background-size:200% 100%;
animation:plPoste 1.3s linear infinite;
}
.pie-luz{position:absolute;left:50%;top:-30%;width:min(140vw,1200px);aspect-ratio:1;transform:translateX(-50%);
background:
radial-gradient(circle at 38% 50%,rgba(228,50,43,.18),transparent 54%),
radial-gradient(circle at 64% 56%,rgba(30,79,216,.18),transparent 54%);
filter:blur(30px);pointer-events:none}
/* marca de agua: el nombre grande, detrás de todo y sin ocupar sitio */
.pie-marca-agua{
position:absolute;left:50%;bottom:-.14em;transform:translateX(-50%);
font-family:var(--f-display);text-transform:uppercase;white-space:nowrap;
font-size:clamp(4rem,17vw,15rem);line-height:.8;letter-spacing:-.035em;
color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);
pointer-events:none;user-select:none;z-index:0;
}
/* ── franja de cierre / llamada a la acción ── */
.pie-cta{
position:relative;z-index:2;
border-bottom:1px solid rgba(255,255,255,.1);
padding:clamp(44px,6vw,76px) 0;
}
.pie-cta-caja{
display:grid;grid-template-columns:minmax(0,1.35fr) auto;
align-items:center;gap:clamp(24px,4vw,56px);
}
.pie-cta-texto .eyebrow{margin-bottom:14px}
.pie-cta-texto .titulo{
font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:.95;
text-wrap:balance; /* reparte las líneas para que no quede una coja */
max-width:16ch;
}
.pie-cta-texto p{margin-top:14px;color:var(--gris-400);font-size:clamp(.92rem,1.5vw,1.05rem);max-width:46ch}
.pie-cta-acciones{display:flex;flex-wrap:wrap;gap:12px}
/* ── cuerpo ── */
.pie-top{padding:clamp(46px,6vw,72px) 0 clamp(34px,4vw,50px);position:relative;z-index:2}
.pie-grid{
display:grid;
grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);
gap:clamp(26px,4vw,54px);
}
/* columna de marca */
.pie-logo{display:inline-flex;align-items:center;gap:14px;margin-bottom:18px}
.pie-logo img{
width:clamp(56px,7vw,72px);height:auto;flex:none;
filter:drop-shadow(0 0 18px rgba(255,255,255,.3)) drop-shadow(0 0 34px rgba(228,50,43,.5));
}
.pie-logo span{display:flex;flex-direction:column;line-height:1}
.pie-logo b{font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:.03em;color:var(--blanco);text-transform:uppercase}
.pie-logo small{font-family:var(--f-cond);font-weight:700;font-size:10px;letter-spacing:.34em;color:var(--gris-500);text-transform:uppercase;margin-top:6px}
.pie-marca p{font-size:14.5px;color:var(--gris-400);max-width:38ch;line-height:1.7}
.pie-premio{
display:inline-flex;align-items:center;gap:9px;margin-top:18px;
padding:9px 15px;border-radius:var(--r-full);
background:linear-gradient(120deg,rgba(228,50,43,.2),rgba(228,50,43,.05));
border:1px solid rgba(255,120,114,.4);
font-family:var(--f-cond);font-weight:700;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:#ffd7d5;
}
.pie-premio svg{width:14px;height:14px;flex:none;color:var(--rojo-cla)}
.pie-social{display:flex;gap:10px;margin-top:20px}
.pie-social a{
width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--gris-200);
transition:.4s var(--e-back);
}
.pie-social a:hover{background:var(--rojo);border-color:var(--rojo);color:#fff;transform:translateY(-4px) rotate(-8deg);box-shadow:var(--glow-rojo)}
.pie-social a:nth-child(2):hover{background:var(--azul);border-color:var(--azul);box-shadow:var(--glow-azul)}
.pie-social svg{width:18px;height:18px}
/* columnas de enlaces */
.pie-col h4{
position:relative;font-family:var(--f-cond);font-size:12px;letter-spacing:.28em;
text-transform:uppercase;color:var(--blanco);margin-bottom:20px;padding-bottom:12px;
}
.pie-col h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:2px;background:var(--tricolor)}
.pie-col li + li{margin-top:11px}
.pie-col a{
position:relative;font-size:14.5px;color:var(--gris-400);
transition:color .3s,padding-left .35s var(--e-out);
}
.pie-col a::before{
content:"";position:absolute;left:0;top:50%;width:0;height:1.5px;background:var(--rojo);
transform:translateY(-50%);transition:width .35s var(--e-out);
}
.pie-col a:hover{color:var(--blanco);padding-left:15px}
.pie-col a:hover::before{width:9px}
/* contacto con iconos */
.pie-datos li{display:flex;gap:11px;align-items:flex-start}
.pie-datos li + li{margin-top:14px}
.pie-datos svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--rojo-cla)}
.pie-datos a{font-size:14.5px;color:var(--gris-300);line-height:1.5}
.pie-datos a::before{display:none}
.pie-datos a:hover{color:var(--blanco);padding-left:0;text-decoration:underline;text-underline-offset:4px}
/* horario */
.pie-horario{
margin-top:22px;padding:16px 18px;border-radius:var(--r-md);
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.pie-horario .chip{font-size:10.5px;padding:6px 12px;letter-spacing:.18em;margin-bottom:14px}
.pie-horario dl{display:grid;gap:8px}
.pie-horario dl div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.pie-horario dt{color:var(--gris-500);font-family:var(--f-cond);letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.pie-horario dd{color:var(--gris-200);font-weight:600;font-variant-numeric:tabular-nums}
/* ── barra inferior ── */
.pie-bajo{
position:relative;z-index:2;
border-top:1px solid rgba(255,255,255,.09);
background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
}
.pie-bajo-caja{
display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
padding:22px 0;font-size:12.5px;color:var(--gris-500);
}
.pie-copy{letter-spacing:.02em}
.pie-vis{display:inline-flex;align-items:center;gap:7px}
.pie-vis a{
color:var(--gris-200);font-weight:600;
border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:1px;transition:.3s;
}
.pie-vis a:hover{color:var(--rojo-cla);border-bottom-color:var(--rojo)}
/* --------------------------------------------------------------------------
17. BOTONES FLOTANTES + TOAST + MODAL
-------------------------------------------------------------------------- */
.flotantes{position:fixed;right:clamp(12px,2.4vw,24px);bottom:clamp(12px,2.4vw,24px);z-index:950;display:grid;gap:11px;justify-items:end}
.fab{
position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo) 50%,var(--rojo-osc));color:#fff;
border:2px solid rgba(255,255,255,.35);
box-shadow:0 16px 36px -10px rgba(228,50,43,1);
transition:.45s var(--e-back);
}
.fab:hover{transform:scale(1.14) rotate(-8deg);box-shadow:0 22px 48px -12px rgba(228,50,43,1)}
.fab svg{width:26px;height:26px}
.fab--oscuro{background:rgba(20,20,20,.9);color:var(--blanco);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);box-shadow:var(--sh-2)}
.fab--oscuro:hover{background:var(--azul);border-color:var(--azul-cla);color:#fff;box-shadow:var(--glow-azul)}
.fab .pulso{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--rojo-cla);animation:fabPulso 2.4s var(--e-io) infinite;pointer-events:none}
@keyframes fabPulso{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}}
.fab .globo{
position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px);
white-space:nowrap;padding:9px 15px;border-radius:var(--r-full);
background:var(--negro);color:var(--blanco);border:1px solid rgba(255,255,255,.2);
font-family:var(--f-cond);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
opacity:0;pointer-events:none;transition:.4s var(--e-out);
}
.fab:hover .globo{opacity:1;transform:translateY(-50%)}
#irArriba{opacity:0;visibility:hidden;transform:translateY(14px)}
#irArriba.on{opacity:1;visibility:visible;transform:none}
/* Toast */
.toasts{position:fixed;left:50%;top:calc(var(--nav-h) + 14px);transform:translateX(-50%);z-index:3000;display:grid;gap:9px;width:min(92vw,430px)}
.toast{
display:flex;gap:12px;align-items:flex-start;padding:14px 17px;border-radius:var(--r-md);
background:rgba(10,10,10,.96);border:1px solid rgba(255,255,255,.2);
box-shadow:var(--sh-2);backdrop-filter:blur(12px);
animation:toastIn .5s var(--e-back);
}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.94)}to{opacity:1;transform:none}}
.toast.fuera{animation:toastOut .4s var(--e-io) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px) scale(.95)}}
.toast{border-left:4px solid var(--rojo)}
.toast .ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(140deg,var(--rojo-cla),var(--rojo-osc));color:#fff;box-shadow:0 0 16px -4px rgba(228,50,43,1)}
.toast .ic svg{width:15px;height:15px}
.toast b{display:block;color:var(--blanco);font-size:14px}
.toast p{font-size:12.5px;color:var(--gris-400);margin-top:2px}
/* Modal genérico */
.modal{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:clamp(14px,4vw,32px);
background:rgba(0,0,0,.92);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.45s}
.modal.abierto{opacity:1;visibility:visible}
.modal-caja{
width:min(94vw,560px);max-height:86svh;overflow-y:auto;padding:clamp(22px,3.6vw,36px);border-radius:var(--r-xl);
background:linear-gradient(160deg,#141414,#000);border:1px solid rgba(255,255,255,.18);box-shadow:var(--sh-3);
animation:modalIn .55s var(--e-out);
}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.modal-caja h3{font-family:var(--f-display);font-size:clamp(1.3rem,3.2vw,1.9rem);text-transform:uppercase;color:var(--blanco);margin-bottom:14px;line-height:1.05}
.modal-caja h4{font-family:var(--f-cond);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--blanco);margin:18px 0 8px}
.modal-caja p,.modal-caja li{font-size:14px;color:var(--gris-400);line-height:1.7}
.modal-caja ul{display:grid;gap:7px;padding-left:18px;list-style:disc}
.modal-caja .cerrar{position:sticky;top:0;float:right;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--blanco);transition:.35s}
.modal-caja .cerrar:hover{background:var(--blanco);color:var(--negro)}
/* Confeti */
.confeti{position:fixed;inset:0;z-index:2400;pointer-events:none;overflow:hidden}
.confeti i{position:absolute;width:9px;height:14px;background:var(--blanco);opacity:.95;animation:cae linear forwards}
@keyframes cae{to{transform:translateY(112vh) rotate(760deg);opacity:0}}
/* --------------------------------------------------------------------------
18. ANIMACIONES DE ENTRADA (scroll)
-------------------------------------------------------------------------- */
/* Nada de will-change aqui: eran 38 capas de GPU reservadas desde el
primer instante, aunque el elemento estuviera fuera de pantalla. En
movil eso pesa mucho y no aporta nada: el navegador compone igual de
bien una transicion de opacidad y transform sin reservarla antes. */
[data-anim]{opacity:0}
[data-anim="sube"]{transform:translateY(46px)}
[data-anim="baja"]{transform:translateY(-38px)}
[data-anim="izq"]{transform:translateX(-52px)}
[data-anim="der"]{transform:translateX(52px)}
[data-anim="zoom"]{transform:scale(.88)}
[data-anim="flip"]{transform:perspective(1000px) rotateX(-38deg);transform-origin:top center}
[data-anim="giroY"]{transform:perspective(1000px) rotateY(-30deg)}
[data-anim].visible{opacity:1;transform:none;transition:opacity .95s var(--e-out),transform 1.05s var(--e-out)}
[data-anim].visible{transition-delay:var(--d,0s)}
/* --------------------------------------------------------------------------
19. RESPONSIVE
-------------------------------------------------------------------------- */
/* --- Escritorio mediano --- */
@media (max-width:1180px){
.nav-esc a{padding:8px 9px;font-size:13px}
.nav-esc a::after{left:9px;right:9px}
.promo-grid,.reg-grid,.social-grid,.ubi-grid,.club-grid{gap:clamp(24px,4vw,44px)}
}
/* --- Tablet horizontal / portátil pequeño --- */
@media (max-width:1024px){
:root{--nav-h:70px}
.nav-esc{display:none}
.hamburguesa{display:block}
.btn-cab{display:none}
.pie-grid{grid-template-columns:1fr 1fr;gap:34px}
.pie-marca{grid-column:1/-1}
.pie-contacto{grid-column:1/-1}
.pie-cta-caja{grid-template-columns:1fr;gap:26px}
.pie-cta-acciones .btn{flex:1 1 auto}
/* banner apilado: emblema arriba, texto debajo */
.hero-contenido{grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(22px,4vw,36px)}
.hero-emblema{order:-1}
.emblema{width:clamp(200px,34vw,300px)}
.hero-badges,.hero-sub,.hero-cta{justify-content:center}
.hero-titulo .linea.dos{margin-left:0}
.hero-titulo{font-size:clamp(3.2rem,14vw,7.4rem)}
.hero-desc{margin-inline:auto}
.hero-stats{margin-inline:auto}
.hero-stats div{padding-left:0;padding-top:12px}
.hero-stats div::before{left:50%;right:auto;top:0;bottom:auto;width:36px;height:3px;transform:translateX(-50%)}
.poste3d{display:none}
/* menú tablet: tipografía y ritmo ajustados para caber en pantalla */
}
/* --- Tablet vertical --- */
@media (max-width:900px){
.promo-grid,.reg-grid,.social-grid,.ubi-grid,.club-grid{grid-template-columns:1fr}
/* En movil y tablet la fila "10 CORTES +2 GRATIS" no cabe entera.
Con esta rejilla se parte por parejas (numero + palabra), en vez de
dejar el "+2" arriba y "GRATIS" solo en la linea de abajo. */
.promo-num{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:clamp(10px,2vw,20px);row-gap:clamp(10px,1.8vw,18px)}
.serv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Son 3 fichas: en 2 columnas la última quedaría suelta, así que ocupa
la fila entera y la retícula cierra limpia. */
.serv-card:last-child{grid-column:span 2}
/* en una columna, las entradas laterales sobrarían y además empujan
el ancho de la página antes de animarse: aquí entran desde abajo */
[data-anim="izq"],[data-anim="der"]{transform:translateY(40px)}
.tarjeta-escena{order:-1}
.tarjeta3d{transform:rotateY(-8deg) rotateX(4deg)}
.premio-foto{max-width:520px;margin-inline:auto}
.ubi-mapa{min-height:340px}
.socio-panel{max-width:560px;margin-inline:auto;width:100%}
.reg-caja{max-width:600px;margin-inline:auto;width:100%}
/* galería a 8 columnas */
.gal-mosaico{grid-template-columns:repeat(8,1fr)}
.gal-item:nth-child(1){grid-column:span 5;aspect-ratio:4/5}
.gal-item:nth-child(2){grid-column:span 3;aspect-ratio:3/5}
.gal-item:nth-child(3){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(4){grid-column:span 5;aspect-ratio:16/11}
.gal-item:nth-child(5){grid-column:span 4;aspect-ratio:4/5}
.gal-item:nth-child(6){grid-column:span 4;aspect-ratio:4/5}
.gal-item:nth-child(7){grid-column:span 4;aspect-ratio:1}
.gal-item:nth-child(8){grid-column:span 4;aspect-ratio:3/4}
.gal-item:nth-child(9){grid-column:span 5;aspect-ratio:16/10}
.gal-item:nth-child(10){grid-column:span 3;aspect-ratio:3/5}
}
/* --- Móvil grande --- */
@media (max-width:680px){
:root{--nav-h:64px;--sec-y:clamp(56px,13vw,88px)}
.cabecera.pegada{height:58px}
.marca-txt span{display:none}
.idioma{padding:3px}
.idioma button{padding:4px 9px;font-size:11px}
.hero{padding-top:calc(var(--nav-h) + 14px);padding-bottom:74px}
.hero-contenido{gap:16px}
.emblema{width:clamp(148px,42vw,196px)}
.emblema .em-chapa{width:clamp(46px,13vw,60px);right:-4%}
.hero-badges{gap:7px;margin-bottom:14px}
.chip{padding:6px 12px;font-size:10.5px;letter-spacing:.16em}
.hero-titulo .linea.dos{margin-left:0}
.poste3d{display:none}
.hero-stats{grid-template-columns:repeat(3,1fr);gap:10px}
.hero-stats div{padding-left:11px}
.hero-cta{width:100%}
.hero-cta .btn{flex:1 1 100%;width:100%}
.promo-num .txt{padding-top:4px}
.campo-fila{grid-template-columns:1fr}
.serv-grid{grid-template-columns:1fr}
/* A una sola columna hay que anular el span 2 de tablet: si no, el grid
se inventa una segunda columna y las fichas salen descuadradas. */
.serv-card:last-child{grid-column:auto}
/* menú móvil compacto: debe caber sin scroll en pantallas de 780px+ */
.flotantes{right:12px;bottom:12px}
.fab{width:52px;height:52px}
.fab .globo{display:none}
/* galería a 6 columnas */
.gal-mosaico{grid-template-columns:repeat(6,1fr);gap:8px}
.gal-item:nth-child(1){grid-column:span 6;aspect-ratio:16/11}
.gal-item:nth-child(2){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(3){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(4){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(5){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(6){grid-column:span 6;aspect-ratio:16/10}
.gal-item:nth-child(7){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(8){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(9){grid-column:span 3;aspect-ratio:3/4}
.gal-item:nth-child(10){grid-column:span 3;aspect-ratio:3/4}
.gal-item:hover img{transform:scale(1.04)}
.pie-grid{grid-template-columns:1fr;gap:32px}
.pie-bajo-caja{justify-content:center;text-align:center;flex-direction:column;gap:10px;padding:20px 0}
.pie-cta{padding:38px 0}
.pie-cta-acciones{width:100%}
.pie-cta-acciones .btn{flex:1 1 100%;width:100%}
.pie-marca-agua{font-size:clamp(3rem,22vw,7rem)}
.lb-nav.prev{left:6px}.lb-nav.next{right:6px}
}
/* --- Móvil pequeño --- */
@media (max-width:400px){
:root{--pad-x:15px}
.marca img{width:36px}
.hamburguesa{width:46px;height:46px}
.hamburguesa i{left:50%;width:18px}
.hamburguesa i:nth-child(1){top:16px}
.hamburguesa i:nth-child(2){top:22px}
.hamburguesa i:nth-child(3){top:28px}
.hero-stats b{font-size:1.4rem}
.sellos-grid,.tc-sellos{gap:6px}
.promo-paso{padding:13px 14px;gap:12px}
}
/* --- Móviles muy estrechos (320 px) --- */
/* A 320 px el botón del menú se salía 12 px de la pantalla y quedaba
cortado. Solo se aprietan las separaciones: no cambia el tamaño de
nada ni desaparece ningún elemento. */
@media (max-width:360px){
.cab-inner{gap:10px}
.marca{gap:9px}
.cab-acciones{gap:6px}
}
/* --- Móvil / tablet en HORIZONTAL (poca altura) --- */
@media (orientation:landscape) and (max-height:560px){
:root{--nav-h:56px;--sec-y:clamp(44px,8vw,70px)}
.hero{min-height:auto;padding:calc(var(--nav-h) + 26px) 0 54px}
/* en horizontal recuperamos las 2 columnas: emblema al lado del texto */
.hero-contenido{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);text-align:left;justify-items:stretch;gap:clamp(16px,3vw,34px)}
.hero-emblema{order:0}
.emblema{width:clamp(140px,22vw,210px)}
.emblema .em-chapa{width:clamp(46px,7vw,64px)}
.hero-badges,.hero-sub,.hero-cta{justify-content:flex-start}
.hero-titulo{font-size:clamp(2.3rem,8.6vw,4.6rem)}
.hero-desc{display:none}
.hero-stats{margin-top:18px}
.hero-stats div{padding-left:14px;padding-top:0}
.hero-stats div::before{left:0;top:3px;bottom:3px;width:3px;height:auto;transform:none}
.poste3d{display:none}
.menu-movil{padding-top:calc(var(--nav-h) + 6px);padding-bottom:11px;grid-template-rows:auto auto auto}
/* en horizontal el menú se reparte en 2 columnas para que quepa entero */
/* en horizontal el menú reparte la navegación en 2 columnas */
.menu-movil{padding:10px var(--pad-x) 10px}
.mm-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(18px,4vw,50px);row-gap:0}
.mm-nav li:nth-last-child(2){border-bottom:0}
.mm-nav a{padding:4px 2px;gap:9px}
.mm-nav a .txt{font-size:clamp(1.05rem,3.2vw,1.5rem)}
.mm-nav a .idx{font-size:9.5px;width:2em}
.mm-nav a .fl{width:15px}
.mm-cab{padding-bottom:5px}
.mm-marca img{width:34px}
.mm-cerrar{width:42px}
.mm-estado{padding:5px 0;gap:5px}
.mm-pie{gap:7px;grid-template-columns:1.15fr 1fr;display:grid;align-items:center;padding-top:7px}
.mm-promo{padding:7px 11px;gap:9px;grid-row:span 2}
.mm-promo-num{font-size:20px}
.mm-promo-txt{font-size:10.5px}
.mm-acciones{grid-template-columns:1fr 1fr;gap:7px}
.mm-acciones .btn{padding:9px 6px;font-size:10.5px}
.mm-social{gap:6px;justify-content:flex-start}
.mm-social a{width:31px}
.mm-social svg{width:15px;height:15px}
.mm-idioma button{padding:5px 9px;font-size:10px}
.mm-dir{grid-column:1/-1;font-size:10px}
.esc-mira .caja{width:min(34vh,190px)}
.modal-caja{max-height:80svh}
.lb-marco img{max-height:70svh}
}
/* --- Pantallas muy grandes --- */
@media (min-width:1700px){
:root{--max:1560px}
.hero-titulo{font-size:clamp(4.5rem,7.6vw,9rem)}
}
@media (min-width:2200px){
:root{--max:1780px;--pad-x:clamp(40px,4vw,120px)}
body{font-size:18px}
}
/* --- Preferencias de accesibilidad ---
Quitamos SOLO el movimiento grande e incómodo (parallax, barridos, caídas).
Las animaciones de marca (anillos del logo, poste de barbero, brillos) se
quedan: son pequeñas, no desplazan bloques y son la identidad del negocio. */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
/* las luces del banner siguen vivas, pero mucho más despacio y sin sacudidas */
.hero-aura .a1{animation-duration:38s}
.hero-aura .a2{animation-duration:46s}
.hero-aura .a3{animation-duration:54s}
.hero-rayo{opacity:.32}
.hero-rayo::before{animation-duration:22s}
.hero-rejilla{animation-duration:60s}
/* el titulo del banner aparece ya puesto, sin letra a letra */
.hero-titulo .car{animation:none;opacity:1;transform:none}
/* las entradas al hacer scroll pasan a ser un fundido, sin desplazamiento */
[data-anim]{transform:none!important;transition-duration:.5s!important}
[data-anim].visible{transition:opacity .5s ease!important}
/* el texto en marcha va mucho más lento */
.marq-pista{animation-duration:90s}
}
@media print{
.cabecera,.flotantes,.menu-movil,#preloader,.grano,.scanlines,.vineta{display:none!important}
body{background:#fff;color:#000}
}
/* ═══════════════ RENDIMIENTO EN MÓVIL Y TABLET ═══════════════
El movil no tiene el musculo grafico del ordenador. Estos efectos son los
que lo atascaban al deslizar; en pantalla pequena no se aprecian y el
aspecto queda practicamente igual.
Se activa por TACTIL, no por ancho: cortando en 900 px una tablet en
horizontal (1024 px) se quedaba fuera y seguia con los efectos caros. */
@media (hover:none), (pointer:coarse), (max-width:1024px){
/* El grano se movia 60 veces por segundo sobre TODA la pantalla y con
mezcla de color: obligaba a repintarlo todo en cada fotograma. Se queda
quieto. Con opacidad .055 el parpadeo no se nota en un movil. */
.grano{animation:none}
/* backdrop-filter (cristal esmerilado) es la propiedad mas cara que hay
en movil: la GPU vuelve a desenfocar todo lo que hay detras en cada
fotograma, y habia 47 elementos con ella. Las tarjetas conservan su
fondo semitransparente, asi que se ven casi igual. Se mantiene solo en
el visor y el modal, que salen a pantalla completa y no se deslizan. */
/* Ojo: `.cubo figure` NO entra aqui. Su desenfoque es de solo 2px sobre
un cubo de ~90px (coste ridiculo) y es lo que separa visualmente las
caras: sin el se leia el texto de las caras traseras del reves a
traves de las delanteras. */
.btn--fantasma,.chip,.cabecera,.cabecera.pegada,.hamburguesa,
.gal-tag,.socio-panel,.reg-caja,.pie-bajo,
.fab--oscuro{backdrop-filter:none}
/* Refuerzo del cubo: las caras que miran hacia atras no se dibujan.
Es como se construye un cubo 3D solido y elimina el texto espejado. */
.cubo figure{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* IMPORTANTE: los elementos FIJOS se apoyaban en ese desenfoque para tapar
lo que pasa por detras al hacer scroll. Sin el, un fondo al 68% deja
leer el contenido a traves y el texto se solapaba con "BARBER WILL".
Se les sube el fondo a opaco: mismo color, ya no transparenta. */
.cabecera.pegada{background:rgb(6,6,8)}
.hamburguesa{background:rgb(18,18,20)}
.fab--oscuro{background:rgb(20,20,20)}
.mm-panel{background:rgb(8,8,10)}
}
/* ═══════════ EMBLEMA DEL BANNER: giro barato ═══════════
Los anillos combinan degradado conico + mascara + resplandor difuminado,
y giran sin parar. Sin una capa propia el movil recalculaba las tres cosas
en CADA fotograma, y eso hacia que el texto circular "BARBER WILL" y las
letras del titulo fueran a tirones. Con la capa se dibujan UNA vez y
despues solo se rota, que es gratis. No cambia nada de aspecto. */
.emblema .em-anillo,
.emblema .em-circular,
.emblema .em-halo{will-change:transform}
/* Y cuando el banner sale de pantalla, se paran: no tiene sentido gastar
bateria y GPU girando algo que no se ve mientras el usuario baja. */
body.fuera-hero .emblema .em-anillo,
body.fuera-hero .emblema .em-circular,
body.fuera-hero .emblema .em-halo,
body.fuera-hero .hero-aura>*,
body.fuera-hero .hero-rayo::before{animation-play-state:paused}
/* ═════════ SIN ANIMACIONES DE ENTRADA AL HACER SCROLL ═════════
En TODAS las vistas: ordenador, tablet y movil. Eran 38 bloques que
empezaban invisibles y aparecian al llegar a ellos; por diseno el
contenido llegaba tarde y se notaba como lentitud. Ahora la web esta
entera desde el primer momento. */
[data-anim],
[data-anim].visible,
[data-anim="sube"],
[data-anim="baja"],
[data-anim="izq"],
[data-anim="der"],
[data-anim="zoom"],
[data-anim="flip"],
[data-anim="giroY"]{
opacity:1 !important;
transform:none !important;
transition:none !important;
animation:none !important;
}
/* ═══════ HALOS DIFUMINADOS: lo que realmente atascaba el móvil ═══════
Comparado con losvisionarioscompany.com (86 animaciones infinitas y va
fluida), aqui el problema no era el numero de animaciones sino los
desenfoques: 6 manchas enormes con blur(70-80px) MAS mezcla "screen",
moviendose sin parar y sobre una capa fija a pantalla completa. Cada
fotograma obligaba a la GPU a re-desenfocar un area gigante y ademas a
releer el fondo para mezclarlo.
En tactil se quedan QUIETAS (se dibujan una vez) y con menos radio.
El aspecto es el mismo: son manchas de luz difusa, no se aprecia. */
@media (hover:none), (pointer:coarse), (max-width:1024px){
.neon-fondo>*,
.hero-aura>*,
.em-halo,
.promo-halo,
.hero-rejilla{animation:none !important}
.neon-fondo>*{filter:blur(44px) !important}
.hero-aura>*{filter:blur(40px) !important}
.em-halo{filter:blur(24px) !important}
.promo-halo{filter:blur(14px) !important}
}
/* Nada se anima si no se esta viendo: las 4 cintas seguian desplazandose
por toda la web aunque estuvieran fuera de pantalla, y el logo del menu
movil giraba con el menu CERRADO. Puro gasto de GPU y bateria. */
.anim-pausa,.anim-pausa *{animation-play-state:paused !important}
#menuMovil:not(.abierto) .mm-logo-ghost{animation-play-state:paused}