:root{
  --bg:#F4F8FD; --surface:#FFFFFF; --ink:#0C2148; --muted:#4A5A7C; --line:#D3DEEE; --steel:#A8B9D4;
  --link:#1B62C4; --field:#F4F8FD; --err:#B3261E; --disc-navy:#0F2A5C; --alt:#0F2A5C;
  --navy:#0F2A5C; --navy-deep:#0A1F47; --orange:#F26B1D; --yellow:#F7B81A; --water:#7CC8FF; --blue:#1F6FD8; --wa:#25D366;
  --ring:var(--link);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#081330; --surface:#0F1E45; --ink:#EAF1FC; --muted:#A8B8D8; --line:#24366A; --steel:#3B5085;
    --link:#8CCBFF; --field:#0A1736; --err:#FF9C93; --disc-navy:#1B3F86; --alt:#1F6FD8;
  }
}
:root[data-theme="dark"]{
  --bg:#081330; --surface:#0F1E45; --ink:#EAF1FC; --muted:#A8B8D8; --line:#24366A; --steel:#3B5085;
  --link:#8CCBFF; --field:#0A1736; --err:#FF9C93; --disc-navy:#1B3F86; --alt:#1F6FD8;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 1.0625rem/1.6 Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.ic{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{font-weight:800;text-wrap:balance}
h2{margin:0 0 1rem;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.1;font-stretch:110%;letter-spacing:-.01em}
h3{font-stretch:108%}
.lead{color:var(--muted);max-width:34rem;margin:0}
.section{padding-block:clamp(3.5rem,8vw,6rem)}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:.7rem 1.3rem;
  border-radius:10px;border:2px solid transparent;font:inherit;font-weight:700;font-size:1.02rem;line-height:1.2;
  text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s;
}
.btn .ic{width:1.35rem;height:1.35rem}
.btn-orange{background:var(--orange);color:var(--navy-deep);--glyph:var(--orange)}
.btn-orange:hover{background:#FF7F35}
.btn-line{border-color:#fff;color:#fff}
.btn-line:hover{background:rgba(255,255,255,.14)}
.btn-navy{background:var(--navy);color:#fff;--glyph:var(--navy)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-navy .ic{color:#fff}
.contact .btn-navy{background:var(--alt);--glyph:var(--alt)}
.contact .btn-navy:hover{filter:brightness(.92)}

/* Encabezado */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:2px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:800;font-stretch:112%;font-size:1.15rem;letter-spacing:-.01em;line-height:1.1}
.chip{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none}
.chip img{width:36px;height:auto;display:block}
.nav{margin-left:auto;display:flex;gap:1.6rem}
.nav a{text-decoration:none;font-weight:600}
.nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--orange);text-underline-offset:7px}
.call{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem 1rem;border-radius:10px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}
.call:hover{background:var(--navy-deep)}
.call .ic{width:1.15rem;height:1.15rem}
.call .long{display:inline}
.call .short{display:none}
@media (max-width:820px){
  .nav{display:none}
  .call{margin-left:auto}
}
@media (max-width:420px){
  .call .long{display:none}
  .call .short{display:inline}
  .brand{font-size:1.05rem}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .call{background:var(--orange);color:var(--navy-deep)}
}
:root[data-theme="dark"] .call{background:var(--orange);color:var(--navy-deep)}

/* Hero */
.hero{--ring:var(--yellow);background:var(--navy);color:#fff;padding-block:clamp(2.5rem,6vw,5rem) clamp(3.5rem,7vw,6rem);overflow:hidden}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:1.3fr .8fr;gap:3rem}}
.hero-copy{container-type:inline-size}
.hero h1{
  margin:0 0 1.25rem;font-stretch:108%;line-height:1.04;letter-spacing:-.015em;
  font-size:clamp(1.8rem,7.4vw,3.3rem);hyphens:auto;overflow-wrap:break-word;color:#fff;
}
@supports (font-size:1cqi){.hero h1{font-size:clamp(1.8rem,8cqi,3.4rem)}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{
    background-image:linear-gradient(to top,var(--water) 50%,#fff 50%);
    background-size:100% 200%;background-position:0 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:rise 2.4s cubic-bezier(.3,.6,.3,1) .35s both;
  }
}
@keyframes rise{from{background-position:0 0}to{background-position:0 100%}}
.hero .lead{color:#D6E3F7;font-size:1.15rem;max-width:33rem;margin-bottom:1.75rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}

.portrait{position:relative;margin:0;width:min(100%,400px);justify-self:center}
@media (min-width:1000px){.portrait{justify-self:end}}
.portrait::before{content:"";position:absolute;right:-16px;bottom:-16px;width:72%;height:68%;background:var(--orange)}
.portrait img{
  position:relative;display:block;width:100%;height:auto;
  clip-path:polygon(34% 0,100% 0,100% 100%,0 100%,0 40%);
}
.badge{
  position:absolute;left:-6px;bottom:28px;display:flex;align-items:center;gap:.5rem;
  background:var(--yellow);color:var(--navy);font-weight:800;font-stretch:105%;padding:.55rem .9rem;font-size:.98rem;line-height:1.1;
}
.badge .ic{width:1.35rem;height:1.35rem}

/* Franja de garantías */
.strip{background:var(--yellow);color:var(--navy);--ring:var(--navy)}
.strip ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);width:min(1160px,100% - 2.5rem)}
.strip li{display:flex;gap:.8rem;align-items:flex-start;padding:1.3rem 1.2rem}
.strip li+li{border-left:2px solid rgba(15,42,92,.28)}
.strip li:first-child{padding-left:0}
.strip .ic{width:1.9rem;height:1.9rem;margin-top:.1rem}
.strip strong{display:block;font-weight:800;line-height:1.2}
.strip span{display:block;font-size:.95rem;line-height:1.35;margin-top:.15rem}
@media (max-width:900px){
  .strip ul{grid-template-columns:1fr 1fr}
  .strip li,.strip li:first-child{padding:1.1rem 1rem}
  .strip li:nth-child(odd){border-left:0;padding-left:0}
  .strip li:nth-child(n+3){border-top:2px solid rgba(15,42,92,.28)}
}
@media (max-width:520px){
  .strip ul{grid-template-columns:1fr}
  .strip li,.strip li:first-child,.strip li:nth-child(odd){padding:1rem 0;border-left:0}
  .strip li+li{border-top:2px solid rgba(15,42,92,.28)}
}

/* Servicios */
.split{display:grid;gap:2.5rem}
@media (min-width:900px){
  .split{grid-template-columns:.8fr 1.2fr;gap:4rem}
  .split-head{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px);align-self:start}
}
.svc-list{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--line)}
.svc{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.7rem 0;border-top:2px solid var(--line)}
.disc{width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;color:#fff}
.disc .ic{width:1.75rem;height:1.75rem}
.d-navy{background:var(--disc-navy)}
.d-blue{background:var(--blue)}
.d-orange{background:var(--orange);color:var(--navy-deep)}
.d-yellow{background:var(--yellow);color:var(--navy-deep)}
.svc h3{margin:.15rem 0 .45rem;font-size:1.3rem;line-height:1.2}
.svc p{margin:0 0 .85rem;color:var(--muted);max-width:38rem}
.svc .warn{color:var(--ink);border-left:4px solid var(--orange);padding-left:.8rem;font-size:.98rem}
.more{display:inline-flex;align-items:center;gap:.45rem;color:var(--link);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.more .ic{width:1.15rem;height:1.15rem}

/* Cómo trabajamos */
.how{background:var(--surface);border-block:2px solid var(--line)}
.steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:s}
.steps li{position:relative}
.steps .n{
  position:relative;z-index:1;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--disc-navy);color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:1rem;
}
.steps li:not(:last-child)::after{content:"";position:absolute;top:calc(1.375rem - 3px);left:2.75rem;right:-2rem;height:6px;background:var(--steel)}
.steps h3{margin:0 0 .4rem;font-size:1.15rem;line-height:1.2}
.steps p{margin:0;color:var(--muted);font-size:1rem}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;gap:1.75rem}
  .steps li{padding-left:4rem;min-height:2.75rem}
  .steps .n{position:absolute;left:0;top:0;margin:0}
  .steps li:not(:last-child)::after{top:2.75rem;bottom:-1.75rem;left:calc(1.375rem - 3px);right:auto;width:6px;height:auto}
}

/* Impermeabilizaciones */
.seal{background:var(--yellow);color:var(--navy);--ring:var(--navy)}
.seal h2{color:var(--navy)}
.seal-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.seal-grid{grid-template-columns:.9fr 1.1fr;gap:4rem}}
.art{width:100%;max-width:470px;height:auto;justify-self:center;display:block}
.seal .lead{color:var(--navy);max-width:36rem}
.checks{list-style:none;padding:0;margin:1.4rem 0 1.9rem;display:grid;gap:.7rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:600}
.tick{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;margin-top:.12rem}
.tick .ic{width:.85rem;height:.85rem;stroke-width:3.2}

/* Contacto */
.contact-grid{display:grid;gap:2.5rem}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}
.phone-big{display:inline-block;margin:.9rem 0 1.25rem;font-size:clamp(2rem,6.5vw,3rem);font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1.1;text-decoration:none}
.phone-big:hover{text-decoration:underline;text-decoration-thickness:4px;text-decoration-color:var(--orange);text-underline-offset:8px}
.info{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem}
.info li{display:flex;gap:.8rem;align-items:flex-start}
.info .ic{color:var(--link);margin-top:.15rem}
.info strong{display:block}
.panel{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1.1rem}
.panel h3{margin:0;font-size:1.35rem;line-height:1.2}
.panel label{display:grid;gap:.4rem;font-weight:700;font-size:.97rem}
.panel input,.panel select,.panel textarea{
  font:inherit;font-weight:400;color:var(--ink);background:var(--field);border:2px solid var(--line);border-radius:10px;
  padding:.75rem .9rem;min-height:50px;width:100%;
}
.panel textarea{min-height:104px;resize:vertical}
.panel input:focus,.panel select:focus,.panel textarea:focus{outline:3px solid var(--ring);outline-offset:1px;border-color:var(--link)}
.panel .btn{width:100%}
.hint{margin:0;color:var(--muted);font-size:.93rem}
.err{margin:0;color:var(--err);font-weight:600;min-height:1.3em;font-size:.95rem}

/* Pie */
.foot{--ring:var(--yellow);background:var(--navy);color:#DCE7F8;padding-block:2.5rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-start;justify-content:space-between}
.foot strong{color:#fff;font-stretch:112%;font-size:1.15rem}
.foot p{margin:.3rem 0 0;max-width:22rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot a{color:#fff}
.foot small{flex-basis:100%;border-top:2px solid rgba(255,255,255,.18);padding-top:1.25rem;color:#B9CBE8}

/* WhatsApp flotante */
.wa-float{
  position:fixed;right:calc(1rem + env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:30;
  width:62px;height:62px;border-radius:50%;background:var(--wa);color:#fff;--glyph:var(--wa);border:3px solid #fff;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(8,19,48,.4);
}
.wa-float .ic{width:36px;height:36px}
.wa-float:hover{transform:scale(1.05)}
.wa-float{--ring:var(--navy)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero h1{animation:none;background-position:0 100%}
  .wa-float:hover{transform:none}
}