:root{
--paper:#FFFFFF;
--suave:#F5FAFD;
--ink:#132B3D;
--ink-soft:#4A5D6E;
--hielo:#CDEBF8;
--azul:#7CC4EC;
--marino:#132B3D;
--oscuro:#0B1B28;
--linea:#E1ECF3;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section{scroll-margin-top:84px}
body{
font-family:'Archivo',system-ui,sans-serif;
background:var(--paper);
color:var(--ink);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Archivo Expanded','Archivo',sans-serif;line-height:1.12;letter-spacing:-0.01em}
header{
position:sticky;top:0;z-index:50;
background:rgba(11,27,40,.97);
border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:'Archivo Expanded',sans-serif;font-weight:800;font-size:1.1rem;text-decoration:none;color:#fff;display:inline-flex;align-items:center;gap:11px}
.logo img{height:40px;width:auto;display:block;background:#fff;border-radius:8px;padding:4px 6px}
.logo span{color:var(--azul)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.92rem;font-weight:500}
.nav-links a:hover{color:#fff}
.btn{
display:inline-flex;align-items:center;gap:9px;
background:var(--azul);color:var(--marino);
font-weight:700;font-size:.95rem;
padding:13px 26px;border-radius:999px;
text-decoration:none;transition:background .15s ease;
}
.btn:hover{background:var(--hielo)}
.btn.small{padding:10px 18px;font-size:.88rem}
.btn.wa{background:var(--azul);color:var(--marino)}
.btn.tel{background:transparent;color:#fff;border:2px solid rgba(205,235,248,.55)}
.btn.tel:hover{background:rgba(205,235,248,.14);border-color:var(--azul);color:var(--azul)}
.btn.wa:hover{background:var(--hielo)}
.hero{
position:relative;
min-height:min(86vh,880px);
display:flex;align-items:center;
padding:120px 0 130px;
background:var(--oscuro);
color:#fff;
}
.hero-grid{max-width:44rem;text-align:center}
.kicker{
display:inline-block;font-size:.78rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;
color:var(--hielo);border-left:3px solid var(--azul);
padding-left:12px;margin-bottom:24px;
}
.hero h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;margin-bottom:14px;color:#fff}
.hero p{font-size:1.08rem;color:rgba(255,255,255,.82);max-width:26rem;margin:0 auto 30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.hero-ctas-2{margin-top:12px}
.hero-note{font-size:.88rem;color:rgba(255,255,255,.75);margin-top:16px}
.hero-note strong{color:#fff}
.hero-strip{border-bottom:1px solid var(--linea);background:#fff}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.hero-strip span{
padding:20px 4px;font-size:1.1rem;color:var(--ink);font-weight:600;
display:flex;align-items:center;gap:14px;line-height:1.4;
border-bottom:1px solid var(--linea);
}
.hero-strip span::before{content:"";flex:none;width:11px;height:11px;border-radius:3px;background:var(--azul)}
.foto-band{padding:56px 0 0}
.foto-band img{width:100%;height:auto;display:block;border-radius:12px}
section{padding:80px 0}
.sec-head{max-width:40rem;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:14px;color:var(--ink)}
.sec-head p{color:var(--ink-soft);font-size:1.05rem}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.service{
background:#fff;border:1px solid var(--linea);border-radius:12px;
padding:30px 28px;
}
.service.featured{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;border-left:4px solid var(--azul)}
.service h3{font-size:1.18rem;font-weight:700;margin-bottom:10px;color:var(--ink)}
.service.featured h3{font-size:1.45rem}
.service p{color:var(--ink-soft);font-size:.97rem}
.service .tag{
display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--marino);
background:var(--hielo);border-radius:5px;
padding:5px 11px;margin-bottom:14px;
}
.service ul{list-style:none;margin-top:14px}
.service ul li{
padding:8px 0 8px 22px;color:var(--ink-soft);font-size:.95rem;
position:relative;line-height:1.55;
}
.service ul li::before{content:"—";color:var(--azul);font-weight:700;position:absolute;left:0}
.service ul li strong{color:var(--ink)}
.proceso{background:var(--suave);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.step{border-top:3px solid var(--azul);padding-top:22px}
.step .num{
font-weight:700;
font-size:.78rem;color:var(--ink-soft);
display:block;margin-bottom:14px;letter-spacing:.14em;
}
.step h3{font-size:1.08rem;margin-bottom:10px;color:var(--ink)}
.step p{color:var(--ink-soft);font-size:.95rem}
.sistema{border-top:1px solid var(--linea)}
.sistema .sec-head{max-width:46rem;margin:0 auto 44px;text-align:center}
.sistema .sec-head .idx{margin-left:auto;margin-right:auto}
.steps-2{grid-template-columns:repeat(2,1fr);max-width:60rem;margin:0 auto}
.senales-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.senal{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:26px 24px}
.senal h3{font-size:1.02rem;font-weight:700;margin-bottom:8px;color:var(--ink)}
.senal p{color:var(--ink-soft);font-size:.93rem}
.clientes{border-top:1px solid var(--linea);background:var(--suave)}
.clientes .sec-head{max-width:44rem;margin:0 auto 40px;text-align:center}
.logos-cinta{margin-top:4px}
.logos-cinta{
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logos-pista{display:flex;align-items:center;width:max-content;animation:rodar 34s linear infinite}
/* margin-right en vez de gap: asi el ancho total es exactamente 2x un set
y el translateX(-50%) empalma sin salto en la costura */
.logos-pista img{
flex:none;margin-right:58px;
max-height:58px;max-width:132px;height:auto;width:auto;
object-fit:contain;
}
.logos-cinta:hover .logos-pista{animation-play-state:paused}
.cta-final{text-align:center;padding:100px 0;border-top:1px solid var(--linea)}
.cta-final h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;max-width:34rem;margin:0 auto 16px;color:var(--ink)}
.cta-final p{color:var(--ink-soft);font-size:1.08rem;max-width:30rem;margin:0 auto 32px}
footer{background:var(--oscuro);color:#9DBACD;padding:40px 0;font-size:.9rem}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .logo{color:#fff;font-size:1rem}
.foot a{color:#9DBACD;text-decoration:none}
.foot a:hover{color:#fff}
.wa-float{
position:fixed;right:20px;bottom:20px;z-index:60;
width:58px;height:58px;border-radius:50%;
background:var(--azul);display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(19,43,61,.28);
transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.06)}
@media (max-width:860px){
.nav-links a:not(.btn){display:none}
.logo{font-size:.95rem;gap:8px}
.logo img{height:32px}
.hero{padding:96px 0 76px}
.hero-strip .wrap{grid-template-columns:1fr}
.services{grid-template-columns:1fr}
.service.featured{grid-template-columns:1fr;gap:16px}
.steps,.steps-2,.senales-grid{grid-template-columns:1fr}
section{padding:56px 0}
}
/* --- firma visual Repararte --- */
.hero{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%)}
.idx{
display:block;font-family:'Archivo Expanded',sans-serif;
font-size:3.2rem;font-weight:800;color:var(--hielo);
line-height:1;margin-bottom:10px;
}
.clientes .idx{margin-left:auto;margin-right:auto}
.hero-strip{background:var(--marino);border-bottom:none}
.hero-strip span{color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.hero-strip span::before{
width:14px;height:14px;border-radius:0;background:none;
background-image:url('data:image/svg+xml;utf8,');
background-size:contain;background-repeat:no-repeat;
}
.steps{position:relative}
.steps::before{content:"";position:absolute;top:7px;left:0;right:0;height:2px;background:var(--linea)}
.step{border-top:none;padding-top:30px;position:relative}
.step::before{
content:"";position:absolute;top:0;left:0;
width:16px;height:16px;border-radius:50%;
background:var(--azul);border:3px solid #fff;
box-shadow:0 0 0 2px var(--azul);
}
.cta-final{position:relative;overflow:hidden;background:var(--suave)}
.cta-final::after{
content:"";position:absolute;right:-50px;bottom:-70px;
width:320px;height:320px;opacity:.55;pointer-events:none;
background-image:url('data:image/svg+xml;utf8,');
background-size:contain;background-repeat:no-repeat;
}
.cta-final .wrap{position:relative;z-index:1}
.ola{display:block;width:100%;height:70px;margin-bottom:-1px}
@media (max-width:860px){
.idx{font-size:2.4rem}
.steps::before{display:none}
.step::before{display:none}
.step{border-top:3px solid var(--azul);padding-top:22px}
.cta-final::after{width:200px;height:200px;right:-40px;bottom:-50px}
}
/* --- dinamica e interactividad --- */
.hero{overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-velo{position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(11,27,40,.85), rgba(11,27,40,.55));pointer-events:none}
/* video de fondo: en movil y con reduced-motion cae a la foto fija */
.hero-media{background:url('img/impermeabilizacion-hero.jpg') center 40%/cover no-repeat}
@media (prefers-reduced-motion: reduce){ .hero-media video{display:none} }
.hero .wrap{position:relative;z-index:3;width:100%}
.rvl{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rvl.vis{opacity:1;transform:none}
.service,.senal{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.service:hover,.senal:hover{transform:translateY(-5px);border-color:var(--azul);box-shadow:0 10px 26px rgba(19,43,61,.10)}
.logos-pista img{transition:transform .25s ease}
.logos-pista img:hover{transform:scale(1.09)}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.wa-float{animation:latido 2.6s ease-in-out infinite}
.wa-float:hover{animation:none;transform:scale(1.08)}
@media (prefers-reduced-motion: reduce){
.rvl{opacity:1;transform:none;transition:none}
.wa-float{animation:none}
}
/* --- agresividad: cartel / brutal --- */
.hero h1{
font-size:clamp(2.2rem,4.6vw,3.5rem);
text-transform:uppercase;
line-height:1.02;letter-spacing:-0.015em;
}
.hero{padding:120px 0 130px}
.kicker{font-weight:800;letter-spacing:.2em;border-left-width:6px;font-size:.82rem}
.btn{border-radius:999px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;padding:16px 30px}
.btn.small{padding:11px 20px;border-radius:999px}
.wa-float{border-radius:50%}
.service,.senal{border-radius:0;border-width:2px}
.service.featured{border-left-width:10px}
.foto-band img{border-radius:0}
.logos-pista{animation-duration:17s;will-change:transform}
.logos-pista img{margin-right:34px;max-height:42px;max-width:100px}
.service .tag{border-radius:999px;font-weight:800}
.sec-head{position:relative}
.idx{
position:absolute;top:-0.55em;left:-0.06em;z-index:0;
font-size:clamp(5rem,11vw,8.5rem);
color:transparent;
-webkit-text-stroke:2px var(--hielo);
margin:0;pointer-events:none;line-height:1;
}
.sec-head h2{position:relative;z-index:1;padding-top:2.2rem;text-transform:uppercase;letter-spacing:-0.01em}
.sec-head p{position:relative;z-index:1}
.clientes .idx{left:50%;transform:translateX(-50%)}
.cta-final h2{text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem)}
.steps{gap:34px}
.step h3{text-transform:uppercase;font-size:1rem;letter-spacing:.02em}
.step::before{border-radius:50%}
.hero-strip span::before{width:16px;height:16px}
.cinta{
background:var(--azul);color:var(--marino);
overflow:hidden;white-space:nowrap;
border-top:3px solid var(--marino);border-bottom:3px solid var(--marino);
padding:12px 0;
}
.cinta-inner{
display:inline-block;
font-family:'Archivo Expanded',sans-serif;font-weight:800;
font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;
animation:rodar 22s linear infinite;
}
.cinta-inner span{margin:0 26px}
@keyframes rodar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
.cinta-inner{animation:none}
.logos-pista{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding:0 20px}
.logos-pista img:nth-child(n+12){display:none}
.logos-pista img{margin:0 29px 24px}
.logos-cinta{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:860px){
.idx{font-size:4.2rem}
.sec-head h2{padding-top:1.6rem}
.cinta-inner{font-size:.9rem}
}
/* --- motion premium --- */
:root{--ease:cubic-bezier(.22,.61,.36,1)}
#progreso{position:fixed;top:0;left:0;height:3px;background:var(--azul);width:0;z-index:100;transition:width .1s linear}
.hero-fondo{
position:absolute;inset:-12% 0;z-index:0;
background:url('img/impermeabilizacion-hero.jpg') center 40%/cover no-repeat;
will-change:transform;
}
@keyframes subirEntrada{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.sin-intro .hero h1,.revelado .hero h1{animation:subirEntrada .8s var(--ease) .25s both}
.sin-intro .hero p,.revelado .hero p{animation:subirEntrada .8s var(--ease) .45s both}
.sin-intro .hero .hero-ctas,.revelado .hero .hero-ctas{animation:subirEntrada .8s var(--ease) .62s both}
.sin-intro .hero .hero-note,.revelado .hero .hero-note{animation:subirEntrada .8s var(--ease) .78s both}
.rvl{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.btn{position:relative;border-radius:2px;transition:background .25s var(--ease),transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.service,.senal{border-radius:2px;border-width:1px;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.service:hover,.senal:hover{transform:translateY(-6px);border-color:var(--azul);box-shadow:0 18px 40px rgba(19,43,61,.12)}
.service.featured{border-left-width:6px}
.foto-band{overflow:hidden}
.foto-band img{border-radius:2px;transition:transform 6s var(--ease)}
.foto-band img.vis{transform:scale(1.05)}
@keyframes flotarGota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero-strip span::before{animation:flotarGota 3.4s ease-in-out infinite}
.hero-strip span:nth-child(2)::before{animation-delay:.6s}
.hero-strip span:nth-child(3)::before{animation-delay:1.2s}
.hero-strip span:nth-child(4)::before{animation-delay:1.8s}
.cinta{padding:9px 0;border-top-width:1px;border-bottom-width:1px}
.cinta-inner{font-size:.82rem;font-weight:600;letter-spacing:.3em;animation-duration:38s}
@keyframes bobOla{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.ola{animation:bobOla 7s ease-in-out infinite}
.idx{transition:opacity 1s var(--ease)}
.logo img{transition:transform .3s var(--ease)}
.logo:hover img{transform:rotate(-6deg) scale(1.06)}
@media (prefers-reduced-motion: reduce){
.hero h1,.hero p,.hero .hero-ctas{animation:none}
.hero-strip span::before,.ola,.cinta-inner{animation:none}
.foto-band img.vis{transform:none}
#progreso{display:none}
.hero-fondo{transform:none !important}
}
/* --- INTRO: La Gota Genesis + Filtracion y Sellado --- */
html.con-intro, html.con-intro body{overflow:hidden}
html.sin-intro #intro{display:none}
html.con-intro header .logo img{opacity:0}
#intro{position:fixed;inset:0;z-index:200;background:var(--oscuro)}
#intro .escena{position:absolute;inset:0}
/* genesis */
.charco{position:absolute;left:50%;top:44%;width:70vmin;height:34vmin;
transform:translate(-50%,-46%);border-radius:50%;
background:radial-gradient(ellipse at center, rgba(205,235,248,.9), transparent 62%);
opacity:0;animation:encenderCharco .7s ease .62s forwards;pointer-events:none}
@keyframes encenderCharco{to{opacity:.10}}
.gota-caida{position:absolute;left:50%;top:44%;margin:-22px 0 0 -17px;
animation:caerGota .60s cubic-bezier(.55,0,1,.45) .08s both}
.gota-caida .forma{display:block;width:34px;height:44px;background:#fff;
border-radius:62% 62% 58% 58% / 30% 30% 70% 70%;
animation:deformaGota .80s linear .08s both}
@keyframes caerGota{from{transform:translateY(-56vh)}to{transform:translateY(0)}}
@keyframes deformaGota{0%{transform:scale(.8,1.25)}78%{transform:scale(.8,1.25);opacity:1}
92%{transform:scale(1.6,.45);transform-origin:50% 100%}
100%{transform:scale(1.9,.3);opacity:0;transform-origin:50% 100%}}
.onda{position:absolute;left:50%;top:44%;width:70px;height:70px;margin:-35px 0 0 -35px;
border:2px solid var(--azul);border-radius:50%;opacity:0;pointer-events:none}
.onda.o1{animation:expandirOnda .8s ease-out .66s both}
.onda.o2{animation:expandirOnda .9s ease-out .78s both;border-color:var(--hielo)}
.onda.o3{animation:expandirOnda .8s ease-out 1.15s both}
@keyframes expandirOnda{0%{transform:scale(.15,.06);opacity:.5}100%{transform:scale(3,.5);opacity:0}}
/* logo: un solo SVG. .nucleo es una capa invisible sobre el emblema,
solo existe para que sitio.js pueda medirla y calcular el morph. */
.logo-armado{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
animation:preparaGolpe .30s ease 3.80s}
@keyframes preparaGolpe{0%{transform:translate(-50%,-50%) scale(1)}
40%{transform:translate(-50%,-50%) scale(1.03)}
75%{transform:translate(-50%,-50%) scale(.985)}
100%{transform:translate(-50%,-50%) scale(1)}}
.marco{position:relative;width:min(88vw,62vh,510px);aspect-ratio:1}
.marco svg{display:block;width:100%;height:100%;overflow:visible}
.nucleo{position:absolute;left:.1%;top:0;width:99.8%;height:72.6%;pointer-events:none}
/* salida */
#boquete{position:fixed;width:40px;height:40px;border-radius:50%;
display:none;z-index:1;pointer-events:none;
box-shadow:0 0 0 3px var(--azul), 0 0 0 9px rgba(205,235,248,.35), 0 0 0 300vmax var(--oscuro);
transition:transform .38s cubic-bezier(.22,1,.32,1);will-change:transform}
#intro.rompiendo{background:transparent;pointer-events:none}
#intro.rompiendo .charco,#intro.rompiendo .onda,#intro.rompiendo .gota-caida{display:none}
#intro.rompiendo #ri-gotas,#intro.rompiendo #ri-rolo,#intro.rompiendo #ri-flash{display:none}
#intro.rompiendo #ri-danado{filter:none !important}
#intro.rompiendo #ri-letras,#intro.rompiendo #ri-sanoTxt{opacity:0;transition:opacity .45s ease}
#intro.rompiendo .logo-armado{transition:transform .32s cubic-bezier(.22,1,.32,1);animation:none}
#cookies{
position:fixed;left:20px;bottom:20px;z-index:300;
background:var(--marino);color:#fff;
border-left:4px solid var(--azul);
padding:16px 18px;max-width:340px;
transform:translateY(16px);opacity:0;
transition:transform .35s var(--ease),opacity .35s var(--ease);
}
#cookies.visible{transform:none;opacity:1}
#cookies p{font-size:.85rem;line-height:1.5;margin:0 0 12px;color:rgba(255,255,255,.9)}
@media (max-width:860px){
#cookies{left:12px;right:12px;bottom:12px;max-width:none}
}
/* --- paginas interiores y accesos --- */
.pagina-hero{background:var(--oscuro);color:#fff;padding:110px 0 70px}
.pagina-hero h1{font-size:clamp(2rem,4.5vw,3.4rem);text-transform:uppercase;color:#fff;margin-bottom:14px;line-height:1.05}
.pagina-hero p{color:rgba(255,255,255,.82);font-size:1.1rem;max-width:36rem}
.pagina-hero .kicker{color:var(--hielo);border-left:3px solid var(--azul)}
.accesos{border-top:1px solid var(--linea)}
.accesos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.acceso{
display:block;background:#fff;border:1px solid var(--linea);border-radius:2px;
padding:30px 28px;text-decoration:none;color:var(--ink);
transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.acceso:hover{transform:translateY(-6px);border-color:var(--azul);box-shadow:0 18px 40px rgba(19,43,61,.12)}
.acceso h3{font-size:1.1rem;text-transform:uppercase;margin-bottom:10px}
.acceso p{color:var(--ink-soft);font-size:.95rem;margin-bottom:16px}
.acceso .flecha{color:var(--azul);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:860px){.accesos-grid{grid-template-columns:1fr}.pagina-hero{padding:80px 0 50px}}