/* ============================================
   ARRECA Mantenimiento — Sistema visual V2
   ============================================ */
:root{
  --ink-deep:#08213F;      /* azul muy oscuro — fondos técnicos */
  --navy:#0C2D5C;          /* azul del logotipo */
  --blue:#1465B4;          /* azul institucional */
  --sky:#4DA8E8;           /* azul cielo — acentos */
  --cta:#1FAF55;           /* verde WhatsApp — SOLO conversión */
  --cta-dark:#178F45;      /* hover del CTA */
  --bg:#F4F8FC;            /* fondo claro azulado */
  --white:#FFFFFF;
  --txt:#12253A;
  --txt-2:#4E6379;         /* texto secundario */
  --line:#D6E3EF;
  --aux:#4DA8E8;           /* alias del cielo */
  --radius:16px;
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope','Segoe UI',system-ui,sans-serif;
  color:var(--txt); background:var(--bg); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-0.015em;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
.mono{font-family:'IBM Plex Mono','Consolas',monospace;}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px;}

/* ---------- NAV FIJA ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:80;
  background:rgba(7,23,39,0.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-inner{max-width:1080px;margin:0 auto;height:100%;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--white);}
.brand-name{font-weight:800;font-size:1rem;letter-spacing:0.02em;}
.brand-name small{display:block;font-family:'IBM Plex Mono',monospace;font-size:0.58rem;font-weight:600;color:#9FB4C6;letter-spacing:0.12em;}
.nav-links{display:flex;align-items:center;gap:22px;font-size:0.88rem;font-weight:600;color:#C6D3DE;}
.nav-links a:hover{color:var(--white);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:12px;font-weight:700;font-size:0.93rem;
  transition:background .15s,transform .12s,box-shadow .15s;border:1.5px solid transparent;cursor:pointer;
}
.btn:active{transform:scale(0.985);}
.btn-cta{background:var(--cta);color:var(--white);}
.btn-cta:hover{background:var(--cta-dark);box-shadow:0 10px 22px rgba(31,175,85,0.30);}
.btn-ghost{border-color:rgba(255,255,255,0.4);color:var(--white);}
.btn-ghost:hover{border-color:var(--white);}
.btn-white{background:var(--white);color:var(--blue);border-color:var(--line);}
.btn-white:hover{border-color:var(--blue);}
.btn-sm{padding:9px 14px;font-size:0.82rem;border-radius:10px;}
.nav-toggle{display:none;background:none;border:0;color:var(--white);font-size:1.5rem;cursor:pointer;}

@media(max-width:820px){
  .nav-links{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--ink-deep);flex-direction:column;align-items:stretch;
    padding:10px 22px 18px;gap:0;border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .nav-links a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,0.07);}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
}

/* ---------- PANTALLA 1 · CAMPAÑA ---------- */
.s1{
  padding:calc(var(--nav-h) + 46px) 0 60px;
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(77,168,232,0.30), transparent 60%),
    linear-gradient(160deg, #0E3568 0%, var(--ink-deep) 66%);
  color:var(--white);
}
.s1-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:44px;align-items:center;}
@media(max-width:860px){.s1-grid{grid-template-columns:1fr;gap:34px;}}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;
  color:#9CCFF5;border:1px solid rgba(77,168,232,0.55);padding:6px 13px;border-radius:999px;margin-bottom:18px;
}
.s1 h1{font-size:clamp(1.9rem,4.6vw,3rem);margin-bottom:14px;}
.s1 h1 span{color:#9CCFF5;}
.s1 .lead{color:#C6D3DE;font-size:1.03rem;max-width:48ch;margin-bottom:12px;}
.s1 .claims{list-style:none;margin:0 0 24px;color:#DDE6EE;font-size:0.94rem;}
.s1 .claims li{padding:5px 0 5px 26px;position:relative;}
.s1 .claims li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:14px;border-radius:4px;background:var(--aux);}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.micro{margin-top:14px;font-size:0.8rem;color:#8CA0B3;}
.micro a{color:#9CCFF5;font-weight:700;}

/* volante card */
.flyer-card{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);
  border-radius:20px;padding:16px;max-width:400px;margin:0 auto;
}
.flyer-card a.flyer-img{display:block;border-radius:12px;overflow:hidden;box-shadow:0 22px 46px rgba(0,0,0,0.42);}
.flyer-card img{width:100%;height:auto;}
.flyer-links{display:flex;gap:10px;margin-top:14px;}
.flyer-links .btn{flex:1;}

/* ---------- PANTALLA 2 · SERVICIOS ---------- */
.s2{
  padding:64px 0;background:var(--white);
  background-image:
    linear-gradient(rgba(20,101,180,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,101,180,0.05) 1px, transparent 1px);
  background-size:44px 44px;
}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;font-weight:700;letter-spacing:0.12em;color:var(--aux);display:block;margin-bottom:10px;}
.s2 h2, .s3 h2{font-size:clamp(1.45rem,3.2vw,2rem);}
.s2 .intro{max-width:640px;margin-bottom:34px;}
.s2 .intro p{color:var(--txt-2);margin-top:10px;font-size:0.97rem;}
/* ---------- PANTALLA 2 · SERVICIOS (rediseño hero + grid 2col) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr;}}

.svc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:16px;
  transition:transform .16s,box-shadow .16s,border-color .16s;
  text-decoration:none;color:inherit;
}
.svc:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,101,180,0.09);border-color:#A9CBEA;}
.svc:not(.svc-hero):last-child{grid-column:1/-1;}

/* Hero */
.svc.svc-hero{
  grid-column:1/-1;background:var(--navy);color:var(--white);
  border-color:rgba(77,168,232,0.30);flex-direction:row;
  align-items:center;justify-content:space-between;
  padding:36px 40px;position:relative;overflow:hidden;
}
.svc.svc-hero::before{
  content:'';position:absolute;right:-80px;top:-80px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(77,168,232,0.13),transparent 65%);
  pointer-events:none;
}
.svc.svc-hero:hover{transform:none;box-shadow:0 16px 40px rgba(12,45,92,0.38);border-color:rgba(77,168,232,0.50);}
.svc-hero-body{display:flex;flex-direction:column;gap:10px;max-width:520px;position:relative;}
.svc-hero-top{display:flex;align-items:center;gap:12px;}
.svc-hero-ic{flex:none;opacity:0.82;position:relative;}
.svc-hero-ic svg{width:110px;height:110px;color:#9CCFF5;}
.svc-hero h3{font-size:clamp(1.4rem,2.8vw,1.9rem);color:var(--white);}
.svc-hero p{color:rgba(255,255,255,0.72);font-size:0.95rem;line-height:1.55;}
.svc-hero-cta{align-self:flex-start;margin-top:4px;}
@media(max-width:700px){
  .svc.svc-hero{flex-direction:column;align-items:flex-start;padding:28px 24px;}
  .svc-hero-ic{display:none;}
}

/* Número */
.svc-n{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;font-weight:700;color:var(--txt-2);letter-spacing:0.10em;}
.svc-hero .svc-n{color:rgba(156,207,245,0.70);}

/* Fondo icono */
.ic-bg{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .2s ease;}
.svc:hover .ic-bg{transform:scale(1.06);}
.ic-bg svg{width:28px;height:28px;}
.ic-blue{background:#DEEEFB;color:var(--blue);}
.ic-teal{background:#DDF2F0;color:#0D7A7A;}
.ic-amber{background:#FFF4D6;color:#9A6B00;}
.ic-sand{background:#F3EDE3;color:#7A5C1E;}
.ic-green{background:#E2F3E8;color:#1E6B32;}

/* Cuerpo tarjeta */
.svc-body{display:flex;flex-direction:column;gap:7px;}
.svc-body h3{font-size:1rem;color:var(--navy);font-weight:800;}
.svc-body p{color:var(--txt-2);font-size:0.86rem;line-height:1.50;}

/* Pills */
.pill{font-size:0.68rem;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:0.04em;display:inline-flex;align-items:center;gap:5px;}
.pill-active{background:#E7F5EC;color:#1E6B32;}
.pill-guarantee{background:#E4F0FB;color:var(--blue);}

.one-contact{
  margin-top:26px;border-left:4px solid var(--blue);background:#EAF3FC;
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;color:var(--blue);
  font-weight:700;font-size:0.98rem;
}
.one-contact small{display:block;font-weight:500;color:var(--txt-2);margin-top:3px;font-size:0.86rem;}

/* ---------- PANTALLA 3 · CONFIANZA ---------- */
.s3{padding:64px 0 40px;background:var(--ink-deep);color:var(--white);}
.s3 .kicker{color:#9CCFF5;}
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 38px;}
@media(max-width:700px){.method{grid-template-columns:1fr;}}
.step{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);padding:28px 24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  transition:border-color .16s, background .16s;
}
.step:hover{border-color:rgba(156,207,245,0.5);background:rgba(255,255,255,0.06);}
.step-ic{width:44px;height:44px;color:#9CCFF5;flex:none;}
.step .n{font-family:'IBM Plex Mono',monospace;color:#9CCFF5;font-size:0.66rem;font-weight:700;letter-spacing:0.14em;}
.step h3{font-size:1.05rem;}
.step p{color:#B9C7D4;font-size:0.88rem;line-height:1.55;}

.retain{
  border:1px solid rgba(77,168,232,0.40);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:38px;background:rgba(77,168,232,0.10);
}
.retain p{color:#DDE6EE;font-size:0.95rem;}
.retain b{color:#9CCFF5;}
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:26px;align-items:center;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:28px;}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;text-align:center;}}
.contact-grid h2{margin-bottom:8px;}
.contact-grid .sub{color:#B9C7D4;font-size:0.92rem;margin-bottom:18px;}
.nums{font-family:'IBM Plex Mono',monospace;font-size:0.85rem;color:#C6D3DE;line-height:2;}
.nums b{color:var(--white);}
.cover{margin-top:14px;font-size:0.8rem;color:#8CA0B3;}
.foot{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:0.78rem;color:#8CA0B3;}

/* ---------- STICKY CTA MÓVIL ---------- */
.sticky{
  position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;
  background:rgba(7,23,39,0.96);border-top:1px solid rgba(255,255,255,0.12);
  padding:10px 14px;gap:10px;
}
.sticky .btn{flex:1;padding:12px 8px;font-size:0.88rem;}
@media(max-width:820px){.sticky{display:flex;} body{padding-bottom:64px;}}

/* ---------- PÁGINA /agua ---------- */
.page-agua .s1{padding-bottom:52px;}
section.blk{padding:54px 0;}
.blk-alt{background:var(--white);}
.sym-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:680px){.sym-grid{grid-template-columns:1fr;}}
.sym{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;font-weight:700;color:var(--blue);}
.sym .e{font-size:1.5rem;display:block;margin-bottom:6px;}
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:760px){.stage-grid{grid-template-columns:1fr;}}
.stage{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
.stage .n{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;font-weight:700;color:var(--aux);letter-spacing:0.1em;}
.stage h3{color:var(--blue);font-size:1rem;margin:8px 0 6px;}
.stage p{color:var(--txt-2);font-size:0.87rem;}
.promo-band{
  margin-top:26px;background:linear-gradient(120deg,var(--blue),var(--ink-deep));
  color:var(--white);border-radius:20px;padding:26px 28px;
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
}
@media(max-width:680px){.promo-band{grid-template-columns:1fr;text-align:center;}}
.promo-band .mono-tag{font-family:'IBM Plex Mono',monospace;font-size:0.66rem;font-weight:700;letter-spacing:0.1em;color:#9CCFF5;display:block;margin-bottom:6px;}
.promo-band h3{font-size:1.2rem;}
.promo-band p{color:#C6D3DE;font-size:0.88rem;margin-top:4px;}
details{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin-bottom:10px;}
summary{font-weight:700;color:var(--blue);cursor:pointer;font-size:0.94rem;}
details p{color:var(--txt-2);font-size:0.89rem;margin-top:9px;}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:680px){.gal{grid-template-columns:1fr;}}
.gal .ph{aspect-ratio:4/3;border-radius:var(--radius);background:var(--blue) center/cover no-repeat;border:1px solid var(--line);}
.note{margin-top:16px;border:1.5px dashed var(--aux);border-radius:12px;padding:14px 18px;font-size:0.84rem;color:#245E93;background:#EEF6FD;}
.note code{background:#00000010;padding:1px 6px;border-radius:4px;}


/* ---------- LOGO (imagen real) ---------- */
.logo-img{height:38px;width:auto;display:block;}
.brand:hover .logo-img{opacity:0.92;}
footer-logo{opacity:0.9;}


/* ---------- V3.2 · móvil compacto ---------- */
@media(max-width:600px){
  .s1{padding:calc(var(--nav-h) + 26px) 0 40px;}
  .s1 h1{font-size:1.62rem;}
  .s1 .lead{font-size:0.93rem;margin-bottom:10px;}
  .s1 .claims{margin-bottom:18px;}
  .s1 .claims li{font-size:0.86rem;padding:4px 0 4px 24px;}
  .s1 .claims li::before{width:11px;height:11px;top:9px;}
  .tag{font-size:0.62rem;padding:5px 11px;margin-bottom:14px;}
  .btn{padding:12px 16px;font-size:0.9rem;}
  .micro{font-size:0.74rem;margin-top:10px;}
  section.blk{padding:42px 0;}
  .section-head{margin-bottom:26px;}
}

/* ---------- Síntomas con visual 3D ---------- */
.sym{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 18px;font-size:0.95rem;}
.sym-ic{width:74px;height:74px;flex:none;filter:drop-shadow(0 6px 10px rgba(12,45,92,0.18));}

/* ---------- Etapas con mini-filtro ---------- */
.stage{display:flex;gap:18px;align-items:center;}
.cart{width:58px;height:94px;flex:none;filter:drop-shadow(0 6px 10px rgba(12,45,92,0.22));}
.stage-tx{flex:1;}
.stage-tx .n{font-family:'IBM Plex Mono',monospace;font-size:0.64rem;font-weight:700;color:var(--sky);letter-spacing:0.12em;}
.stage-tx h3{margin:4px 0 5px;}
.stage-tx p{font-size:0.86rem;}

/* ---------- Contacto en líneas ---------- */
.c-lines{display:flex;flex-direction:column;gap:10px;}
.c-line{
  display:flex;align-items:center;gap:14px;padding:13px 16px;
  border:1px solid rgba(255,255,255,0.18);border-radius:14px;
  color:var(--white);transition:border-color .15s, background .15s;
}
.c-line:hover{border-color:#9CCFF5;background:rgba(255,255,255,0.05);}
.c-line svg{width:26px;height:26px;color:#9CCFF5;flex:none;}
.c-line b{display:block;font-family:'IBM Plex Mono',monospace;font-size:0.95rem;letter-spacing:0.02em;}
.c-line small{color:#B9C7D4;font-size:0.76rem;}
.c-note{font-size:0.78rem;color:#8CA0B3;margin-top:4px;}

/* ============================================================
   HOME V4 · ciudad en niebla fija + panel de servicios compacto
   (todo scopeado a .home-v4 — NO afecta la página /agua)
   ============================================================ */
body.home-v4{background:var(--ink-deep);color:#E8F0F8;}

/* Ciudad fija detrás de todo: foto real, tenue, siempre visible */
.home-v4 .bg-city{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("img/ciudad-niebla.jpg") center top/cover no-repeat;
  opacity:0.20;
}

/* Las secciones flotan sobre la ciudad con velos semitransparentes */
.home-v4 .nav,
.home-v4 .s1,
.home-v4 .s2v4,
.home-v4 .s3,
.home-v4 .sticky{position:relative;z-index:1;}
.home-v4 .nav{z-index:80;}

.home-v4 .s1{
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(77,168,232,0.22), transparent 60%),
    linear-gradient(160deg, rgba(14,53,104,0.90) 0%, rgba(8,33,63,0.90) 66%);
}
.home-v4 .s2v4{background:linear-gradient(180deg, rgba(8,33,63,0.55), rgba(8,33,63,0.64));}
.home-v4 .s3{background:linear-gradient(180deg, rgba(8,33,63,0.86), rgba(8,33,63,0.94));}

/* --- Panel de servicios compacto --- */
.home-v4 .s2v4{padding:56px 0;}
.home-v4 .s2v4 .kicker{color:#9CCFF5;}
.home-v4 .intro{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 18px;margin-bottom:22px;
}
.home-v4 .intro h2{font-size:clamp(1.45rem,3.4vw,2rem);color:#fff;margin-top:8px;}
.home-v4 .intro-note{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.16em;
  color:#7E96AD;text-transform:uppercase;
}

.svc-panel{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(127,181,238,0.16);border:1px solid rgba(127,181,238,0.16);
  border-radius:16px;overflow:hidden;
}
.svc-cell{
  background:rgba(10,28,46,0.88);padding:24px 16px 26px;text-align:center;
  display:grid;justify-items:center;gap:8px;transition:background .16s;
}
.svc-cell:hover{background:rgba(16,55,94,0.80);}
.svc-cell .ic{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#9CCFF5;
  background:radial-gradient(circle at 50% 40%, rgba(77,168,232,0.18), rgba(77,168,232,0) 70%);
}
.svc-cell .ic svg{width:26px;height:26px;}
.svc-cell h3{font-size:1rem;color:#fff;font-weight:800;}
.svc-cell p{font-size:0.82rem;color:#AFC1D3;line-height:1.45;}
.svc-cell .tg{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.14em;color:#5FC98A;font-weight:700;}
.svc-cell .tg.b{color:#9CCFF5;}

/* --- Método en una sola franja --- */
.method-line{
  margin-top:22px;border:1px solid rgba(127,181,238,0.16);border-radius:16px;
  background:rgba(10,28,46,0.72);overflow:hidden;
}
.method-line-inner{display:grid;grid-template-columns:1fr;}
.mline{
  padding:16px 20px;border-top:1px solid rgba(127,181,238,0.12);
  display:flex;flex-direction:column;gap:4px;
}
.mline:first-child{border-top:0;}
.mline .n{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;font-weight:700;letter-spacing:0.16em;color:#9CCFF5;}
.mline p{font-size:0.86rem;color:#AFC1D3;}
.mline p b{color:#E8F0F8;}

/* --- Contacto: nota de retención --- */
.home-v4 .contact-grid .kicker{color:#9CCFF5;}
.home-v4 .retain-line{margin-top:16px;font-size:0.84rem;color:#8CA0B3;max-width:40ch;}
.home-v4 .retain-line b{color:#9CCFF5;}

@media(min-width:840px){
  .svc-panel{grid-template-columns:repeat(3,1fr);}
  .method-line-inner{grid-template-columns:repeat(3,1fr);}
  .mline{border-top:0;border-left:1px solid rgba(127,181,238,0.12);}
  .mline:first-child{border-left:0;}
}