/* ══════════════════════════════════════════════════════════════════════════
   Exsolares Irrigation — hoja completa, rediseño agosto 2026.
   Fondo blanco, verde de marca, mucha fotografía y tarjetas con sombra.
   Reemplaza por completo la hoja compartida: el sitio eléctrico sigue con
   la anterior. Todo lo que use una página de riego se estila aquí.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#ffffff;
  --paper-2:#f5f5f0;
  --paper-3:#edf2ed;
  --forest:#0d2a1a;
  --forest-2:#143d26;
  --green:#164d37;
  --green-d:#0d3324;
  --water:#b8dfdc;
  --lime:var(--water);
  --lime-d:#a3d4d1;
  --ink:#0e1f16;
  --ink-2:#2f463a;
  --muted:#53645a;
  --rule:#e3ebe0;
  --rule-2:#cfdccb;
  --focus:#256e79;
  --r:12px;
  --r-s:8px;
  --r-l:16px;
  --sh:none;
  --sh-2:none;
  --font:"Archivo",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
html,body{overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--forest)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

/* Archivo aguanta pesos altos con el tracking muy cerrado, que es lo que da
   el bloque compacto de la referencia. El titular va entero en verde oscuro:
   no hay palabra suelta en otra fuente ni en otro color. */
h1,h2,h3,h4{font-weight:700;line-height:1.0;letter-spacing:-.038em;
  color:var(--forest-2);overflow-wrap:break-word;min-width:0}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem)}
h2{font-size:clamp(2rem,4.3vw,3.35rem)}
h3{font-size:1.1rem;font-weight:600;letter-spacing:-.022em;line-height:1.25;
  color:var(--ink)}
h4{font-size:1rem}

.wrap{max-width:78rem;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.tnum{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.skip{position:absolute;left:1rem;top:-100px;background:var(--green);
  color:#fff;padding:.6rem 1.1rem;border-radius:999px;z-index:90;transition:top .2s}
.skip:focus{top:1rem}

/* ── piezas compartidas ─────────────────────────────────────────────── */

.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:.715rem;
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2)}
.eyebrow--light{color:var(--lime)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:50px;padding:.7rem 1.5rem;border-radius:999px;font-size:.95rem;
  font-weight:600;letter-spacing:-.01em;border:1px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,
    border-color .18s ease,box-shadow .18s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn--a{background:var(--green);color:#fff;box-shadow:none}
.btn--a:hover{background:var(--green-d)}
.btn--b{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--b:hover{border-color:var(--green);color:var(--green)}
.btn--lime{background:var(--lime);color:var(--forest)}
.btn--lime:hover{background:var(--lime-d)}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff;
  border-color:rgba(255,255,255,.42);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.2)}
.btn--sm{min-height:44px;padding:.5rem 1.1rem;font-size:.86rem}

.arrow{display:inline-grid;place-items:center;width:1.55em;height:1.55em;
  border-radius:50%;background:currentColor;flex:none}
.arrow::before{content:"→";color:var(--paper);font-size:.72em;line-height:1}

.lnk{display:inline-flex;align-items:center;gap:.6em;font-weight:600;
  font-size:.95rem;color:var(--green);transition:gap .18s}
.lnk:hover{gap:.95em}
.lnk--light{color:var(--lime)}
.lnk--light .arrow::before{color:var(--forest)}

.sec-head{display:grid;gap:1.1rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.sec-head h2{max-width:20ch}
.sec-head p{color:var(--muted);max-width:48ch;font-size:1.02rem}
@media (min-width:900px){
  .sec-head--split{grid-template-columns:1.15fr .85fr;align-items:end;gap:2.5rem}
  .sec-head--split>div:first-child{display:grid;gap:.9rem}
}

/* ── barra superior ─────────────────────────────────────────────────── */

.top{background:var(--forest);color:rgba(255,255,255,.78);font-size:.78rem}
.top__in{display:flex;align-items:center;gap:1.2rem;min-height:38px;
  flex-wrap:wrap;justify-content:center;padding-block:.35rem}
.top__in span{display:inline-flex;align-items:center;gap:.45em}
.top__in a{color:#fff;font-weight:600}
.top__in a:hover{color:var(--lime)}
.top__sep{width:1px;height:14px;background:rgba(255,255,255,.22)}
.top__r{margin-left:auto;display:flex;align-items:center;gap:1rem}
@media (max-width:860px){.top__r{margin-left:0}.top__sep{display:none}}

/* ── cabecera ───────────────────────────────────────────────────────── */

.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.hd__in{display:flex;align-items:center;gap:1.25rem;min-height:70px}
.hd__mark{display:flex;flex-direction:column;line-height:1.05;margin-right:auto;
  padding-block:.4rem}
.hd__brand-main{font-size:1.5rem;font-weight:700;letter-spacing:-.045em}
.hd__brand-sub{font-family:var(--font-mono);font-size:.645rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green)}
.hd__nav{display:flex;align-items:center;gap:1.7rem;list-style:none}
.hd__nav a{font-size:.92rem;font-weight:500;color:var(--ink-2);
  position:relative;padding-block:.4rem}
.hd__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.1rem;
  height:1.5px;background:var(--green);transition:right .22s ease}
.hd__nav a:hover{color:var(--green)}
.hd__nav a:hover::after{right:0}
.hd__lang{font-size:.76rem;font-weight:700;letter-spacing:.08em;
  border:1px solid var(--rule-2);border-radius:999px;padding:.32rem .7rem;
  color:var(--ink-2);min-height:44px;min-width:44px;display:grid;place-items:center}
.hd__lang:hover{border-color:var(--green);color:var(--green)}

.hd__burger{display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--rule-2);cursor:pointer;place-items:center;background:transparent;flex:none}
.hd__burger i{display:block;width:18px;height:1.6px;background:var(--ink);
  position:relative}
.hd__burger i::before,.hd__burger i::after{content:"";position:absolute;left:0;
  width:18px;height:1.6px;background:var(--ink);transition:transform .2s}
.hd__burger i::before{top:-5.5px}
.hd__burger i::after{top:5.5px}

@media (max-width:960px){
  .hd__in{min-height:62px;gap:.7rem}
  .nav-ready .hd__burger{display:grid}
  .hd__cta{display:none}
  .hd__nav{flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);padding:1rem 1.25rem 2rem;
    border-top:1px solid var(--rule)}
  .js #site-nav{position:absolute;top:100%;left:0;right:0;visibility:hidden;
    opacity:0;transform:translateY(-6px);pointer-events:none;z-index:70;
    max-height:calc(100dvh - 150px);overflow-y:auto;
    border-bottom:1px solid var(--rule)}
  html:not(.js) .hd__in{flex-wrap:wrap}
  html:not(.js) #site-nav{order:5;width:100%}
  .hd__nav li{border-bottom:1px solid var(--rule)}
  .hd__nav a{display:block;padding:.95rem .2rem;font-size:1.02rem}
  .hd__nav .hd__nav-cta{display:block;margin-top:1.1rem}
  .hd[data-menu-open="true"] #site-nav{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .hd[data-menu-open="true"] .hd__burger i{background:transparent}
  .hd[data-menu-open="true"] .hd__burger i::before{transform:translateY(5.5px) rotate(45deg)}
  .hd[data-menu-open="true"] .hd__burger i::after{transform:translateY(-5.5px) rotate(-45deg)}
}
@media (min-width:961px){.hd__nav-cta{display:none}}

/* ── héroe de portada, con video ────────────────────────────────────── */

.vhero{position:relative;margin:clamp(.6rem,1.4vw,1.1rem);
  border-radius:var(--r-l);overflow:hidden;isolation:isolate;
  min-height:min(88vh,780px);display:flex;flex-direction:column;
  justify-content:flex-end;color:#fff;
  padding:clamp(2rem,5vw,3.75rem) clamp(1.25rem,4vw,3.25rem)}
.vhero__media{position:absolute;inset:0;z-index:-2}
.vhero__media video,.vhero__media img{width:100%;height:100%;object-fit:cover}
.vhero__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,28,17,.62) 0%,rgba(8,28,17,.28) 34%,
    rgba(8,28,17,.72) 74%,rgba(8,28,17,.9) 100%)}
.vhero__copy{max-width:min(46rem,92%);display:grid;gap:1.1rem}
.vhero h1{color:#fff;text-wrap:balance;text-shadow:0 2px 24px rgba(6,20,12,.35)}
.vhero h1 em{color:var(--lime)}
.vhero__p{font-size:clamp(1rem,1.5vw,1.16rem);color:rgba(255,255,255,.86);
  max-width:44ch}
.vhero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.5rem}
.vhero__note{display:flex;align-items:center;font-size:.85rem;
  color:rgba(255,255,255,.7);padding-left:.4rem}

.vhero__floor{margin-top:clamp(1.75rem,4vw,2.75rem);min-width:0}
.rail__t{display:block;font-family:var(--font-mono);font-size:.7rem;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lime);margin-bottom:.8rem}
.rail__pills{display:flex;flex-wrap:wrap;gap:.5rem;max-width:52rem}
.rail__pills a{display:inline-flex;align-items:center;min-height:38px;
  padding:.4rem .95rem;border-radius:999px;font-size:.845rem;font-weight:500;
  color:#fff;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.1);backdrop-filter:blur(6px);transition:.18s}
.rail__pills a:hover{background:var(--lime);color:var(--forest);
  border-color:var(--lime)}

.vhero__cards{display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:34rem;min-width:0}
.vhero__card{display:flex;gap:.85rem;align-items:center;padding:.7rem;
  border-radius:var(--r-s);background:rgba(9,30,19,.55);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
  transition:.2s}
.vhero__card:hover{background:rgba(9,30,19,.75);transform:translateY(-3px)}
.vhero__card img{width:74px;height:64px;object-fit:cover;border-radius:10px;
  flex:none}
.vhero__card b{display:block;font-size:.92rem;font-weight:600;line-height:1.2}
.vhero__card span{display:block;font-size:.78rem;color:rgba(255,255,255,.72);
  margin-top:.2rem;line-height:1.35}
@media (max-width:760px){
  /* ocho pastillas en columna hacían un héroe interminable: en móvil van en
     una sola fila que se arrastra */
  .rail__pills{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    max-width:none;padding-bottom:.4rem;
    margin-inline:calc(-1 * clamp(1.25rem,4vw,3.25rem));
    padding-inline:clamp(1.25rem,4vw,3.25rem);
    scrollbar-width:none}
  .rail__pills::-webkit-scrollbar{display:none}
  .rail__pills a{flex:none;scroll-snap-align:start}
}
@media (max-width:620px){
  .vhero{min-height:auto;padding-block:clamp(4rem,22vw,6rem) 2rem}
  .vhero__cards{grid-template-columns:1fr;max-width:none;width:100%}
  .vhero__card img{width:64px;height:56px}
}

/* ── banda de hechos ────────────────────────────────────────────────── */

.strip{border-bottom:1px solid var(--rule);background:var(--paper)}
.strip__in{padding-block:clamp(1.6rem,3vw,2.4rem)}
.strip__t{text-align:center;font-size:.8rem;color:var(--muted);
  margin-bottom:1.35rem}
.strip__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule)}
.strip__g>div{background:var(--paper);padding:.4rem clamp(.5rem,2vw,1.5rem);
  text-align:center}
.strip__g strong{display:block;font-size:clamp(1.7rem,3.1vw,2.45rem);
  font-weight:700;letter-spacing:-.05em;color:var(--forest-2);line-height:1;
  font-variant-numeric:tabular-nums}
.strip__g span{display:block;font-size:.8rem;color:var(--muted);
  margin-top:.35rem;line-height:1.3}
@media (max-width:700px){
  .strip__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px}
}

/* ── secciones genéricas ────────────────────────────────────────────── */

.sec{padding-block:clamp(3.5rem,7vw,6.5rem)}
.sec--tint{background:var(--paper-2)}
.sec--pad-b0{padding-bottom:0}
.sec__n{display:inline-block;font-family:var(--font-mono);font-size:.715rem;
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:.9rem}
.sec h2+.sec__intro,.sec__intro{margin-top:1.1rem;max-width:52ch;
  color:var(--ink-2)}
.sec__intro p+p{margin-top:.9rem}

/* ── quiénes somos + cifras ─────────────────────────────────────────── */

.about__grid{display:grid;gap:1.75rem}
@media (min-width:900px){
  .about__grid{grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,5vw,4.5rem);
    align-items:start}
}
.about__lead{font-size:clamp(1.2rem,2.1vw,1.62rem);line-height:1.35;
  letter-spacing:-.022em;font-weight:500;color:var(--ink)}
.about__body{margin-top:1.15rem;color:var(--muted);max-width:60ch}
.about__body p+p{margin-top:.85rem}
.about__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;margin-top:clamp(2rem,4vw,3.25rem)}
.about__cards>div{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh)}
.about__cards strong{display:block;font-size:clamp(2rem,3.5vw,2.85rem);
  font-weight:700;letter-spacing:-.05em;color:var(--green);line-height:1;
  font-variant-numeric:tabular-nums;
  margin-bottom:1.9rem}
.about__cards b{display:block;font-size:.98rem;font-weight:600;
  margin-bottom:.3rem}
.about__cards span{display:block;font-size:.85rem;color:var(--muted);
  line-height:1.4}
@media (max-width:980px){.about__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  .about__cards{grid-template-columns:1fr}
  .about__cards strong{margin-bottom:.7rem}
}

/* ── servicios: tarjetas con foto ───────────────────────────────────── */

.svc__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.svc__card{position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:22rem;border-radius:var(--r);
  overflow:hidden;isolation:isolate;padding:1.35rem;color:#fff;
  transition:transform .25s ease,box-shadow .25s ease}
.svc__card img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;transition:transform .5s ease}
.svc__card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,30,19,.06) 0%,rgba(9,30,19,.5) 46%,
    rgba(9,30,19,.93) 100%)}
.svc__card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.svc__card:hover img{transform:scale(1.05)}
.svc__n{position:absolute;top:1.1rem;left:1.1rem;width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;font-size:.75rem;
  font-family:var(--font-mono);font-weight:500;background:rgba(9,30,19,.62);color:#fff;
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.svc__w{display:block;font-family:var(--font-mono);font-size:.665rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lime);margin-bottom:.5rem;
  line-height:1.3}
.svc__card h3{font-size:1.2rem;color:#fff;margin-bottom:.45rem}
.svc__card p{font-size:.87rem;line-height:1.45;color:rgba(255,255,255,.8);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.svc__more{display:flex;justify-content:center;margin-top:2rem}
@media (max-width:1080px){.svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .svc__grid{grid-template-columns:1fr}
  .svc__card{min-height:19rem}
}

/* ── públicos ───────────────────────────────────────────────────────── */

.pub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.pub article{display:grid;grid-template-columns:1fr auto;gap:1.25rem;
  align-items:start;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);padding:1.5rem;box-shadow:var(--sh);
  transition:transform .22s ease,box-shadow .22s ease}
.pub article:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.pub article:nth-child(2){background:var(--forest);border-color:var(--forest);
  color:#fff}
.pub article:nth-child(2) h3{color:#fff}
.pub article:nth-child(2) .pub__d{color:rgba(255,255,255,.72)}
.pub article:nth-child(2) .pub__l{color:var(--lime)}
.pub__l{font-size:.95rem;font-weight:600;color:var(--green);
  margin:.5rem 0 .6rem;line-height:1.35}
.pub__d{font-size:.9rem;color:var(--muted);line-height:1.55}
.pub img{width:112px;height:112px;object-fit:cover;border-radius:var(--r-s);
  flex:none}
@media (max-width:840px){.pub{grid-template-columns:1fr}}
@media (max-width:480px){
  .pub article{grid-template-columns:1fr}
  .pub img{width:100%;height:150px;order:-1}
}

/* ── bloque partido con foto grande ─────────────────────────────────── */

.split{display:grid;gap:1.75rem;align-items:center}
@media (min-width:980px){
  .split{grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4.5vw,4rem)}
  .split--flip .split__media{order:2}
}
.split__media{position:relative}
/* El radio va en el marco, no en la imagen: el parallax la escala y la
   desplaza, y con el radio en la propia foto se salía de su caja. */
.split__frame{position:relative;border-radius:var(--r-l);overflow:hidden}
.split__frame>img{display:block;width:100%;aspect-ratio:4/3.4;object-fit:cover}
.split__inset{position:absolute;right:-.75rem;bottom:-1.25rem;width:44%;
  max-width:15rem;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  border:6px solid var(--paper);box-shadow:var(--sh-2)}
.split__tag{position:absolute;left:1.25rem;top:1.25rem;
  background:rgba(255,255,255,.92);color:var(--forest);border-radius:999px;
  padding:.42rem .95rem;font-size:.76rem;font-weight:600;
  backdrop-filter:blur(6px)}
.split__copy h2{margin-bottom:1rem}
.split__copy>p{color:var(--muted);max-width:52ch}
.split__list{list-style:none;margin-top:1.75rem;display:grid;gap:.15rem}
.split__list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;
  align-items:baseline;padding:.95rem 0;border-top:1px solid var(--rule)}
.split__list li:last-child{border-bottom:1px solid var(--rule)}
.split__list span{font-family:var(--font-mono);font-size:.76rem;font-weight:500;color:var(--green);
  font-variant-numeric:tabular-nums}
.split__list b{font-weight:600;font-size:1rem}
.split__list p{font-size:.88rem;color:var(--muted);margin-top:.2rem}
.split__cta{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:520px){.split__inset{display:none}}

/* ── proceso, bloque verde ─────────────────────────────────────────── */

.proc{background:var(--forest);color:#fff;border-radius:var(--r-l);
  overflow:hidden;display:grid;gap:0}
@media (min-width:980px){.proc{grid-template-columns:1.05fr .95fr}}
.proc__copy{padding:clamp(1.9rem,4vw,3.4rem)}
.proc__copy h2{color:#fff;margin:1rem 0 1.1rem}
.proc__copy h2 em{color:var(--lime)}
.proc__copy>p{color:rgba(255,255,255,.72);max-width:44ch}
.proc__steps{list-style:none;margin-top:2rem;display:grid}
.proc__steps li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  padding:1.05rem 0;border-top:1px solid rgba(255,255,255,.16)}
.proc__steps li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.proc__steps span{font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--lime);
  font-variant-numeric:tabular-nums;padding-top:.15rem}
.proc__steps b{display:block;font-size:1.02rem;font-weight:600}
.proc__steps p{font-size:.88rem;color:rgba(255,255,255,.68);margin-top:.25rem}
.proc__cta{margin-top:2rem}
.proc__media{position:relative;min-height:22rem}
.proc__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.proc__cap{position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  color:#fff;text-shadow:0 2px 12px rgba(6,20,12,.6)}
.proc__cap b{font-family:var(--font-mono);font-size:clamp(1.4rem,2.6vw,1.95rem);
  font-weight:500;letter-spacing:-.03em}
.proc__cap span{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-align:right}

/* ── zona de servicio ───────────────────────────────────────────────── */

.cities{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.75rem}
.cities a{display:inline-flex;align-items:baseline;gap:.5em;min-height:42px;
  padding:.55rem 1.05rem;border-radius:999px;background:var(--paper);
  border:1px solid var(--rule-2);font-size:.92rem;font-weight:500;
  transition:.18s}
.cities a:hover{background:var(--forest);border-color:var(--forest);color:#fff}
.cities .cnty{font-size:.73rem;color:var(--muted)}
.cities a:hover .cnty{color:var(--lime)}

.area{position:relative;border-radius:var(--r-l);overflow:hidden;
  isolation:isolate;padding:clamp(2.25rem,5vw,4rem) clamp(1.5rem,4vw,3.25rem);
  color:#fff}
.area__bg{position:absolute;inset:0;z-index:-2}
.area__bg img{width:100%;height:100%;object-fit:cover}
.area__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,28,17,.82),rgba(8,28,17,.68))}
.area h2{color:#fff;margin-top:.9rem}
.area__p{color:rgba(255,255,255,.82);max-width:46ch;margin-top:.9rem}
.area .cities a{background:rgba(255,255,255,.12);color:#fff;
  border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.area .cities a:hover{background:var(--lime);border-color:var(--lime);
  color:var(--forest)}
.area .cities .cnty{color:rgba(255,255,255,.6)}
.area .cities a:hover .cnty{color:var(--forest)}

/* ── preguntas ──────────────────────────────────────────────────────── */

.faq__grid{display:grid;gap:1.75rem}
@media (min-width:980px){
  .faq__grid{grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4.5vw,3.75rem);
    align-items:start}
}
.faq__media{border-radius:var(--r-l);overflow:hidden;margin-top:1.5rem}
.faq__media img{width:100%;aspect-ratio:4/3.6;object-fit:cover}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;padding:1.15rem 0;cursor:pointer;list-style:none;
  font-size:1.04rem;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--rule-2);display:grid;place-items:center;
  font-style:normal;font-size:1.05rem;color:var(--green);transition:.2s;
  line-height:1}
.faq details[open] summary i{transform:rotate(45deg);background:var(--green);
  color:#fff;border-color:var(--green)}
.faq details p{padding:0 3rem 1.35rem 0;color:var(--muted);font-size:.95rem}
/* la versión antigua de las páginas interiores, sin acordeón */
.faq__i{border-top:1px solid var(--rule);padding:1.35rem 0}
.faq__i h3{margin-bottom:.5rem}
.faq__i p{color:var(--muted);font-size:.95rem;max-width:62ch}

/* ── cierre ─────────────────────────────────────────────────────────── */

.cierre{position:relative;margin:clamp(.6rem,1.4vw,1.1rem);
  border-radius:var(--r-l);overflow:hidden;isolation:isolate;color:#fff;
  padding:clamp(3rem,8vw,6rem) clamp(1.25rem,4vw,3.25rem);text-align:center;
  background:var(--forest)}
.cierre__bg,.cierre>img{position:absolute;inset:0;z-index:-2}
.cierre__bg img,.cierre>img{width:100%;height:100%;object-fit:cover}
.cierre__scrim,.cierre__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,28,17,.58),rgba(8,28,17,.8))}
.cierre .wrap{display:grid;justify-items:center;gap:1.1rem}
.cierre h2{color:#fff;max-width:18ch;text-wrap:balance}
.cierre h3{color:#fff}
.cierre h2 em{color:var(--lime)}
.cierre p{color:rgba(255,255,255,.8);max-width:52ch}
.cierre .btn--a{background:var(--lime);color:var(--forest);box-shadow:none}
.cierre .btn--a:hover{background:var(--lime-d)}
.cierre .btn--b{background:rgba(255,255,255,.12);color:#fff;
  border-color:rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.cierre .btn--b:hover{background:rgba(255,255,255,.22);color:#fff}
.cierre .hero__cta,.cierre__cta{display:flex;flex-wrap:wrap;gap:.7rem;
  justify-content:center;margin-top:.7rem}
.cierre .hero__nota{width:100%;font-size:.85rem;color:rgba(255,255,255,.65)}

/* ── pie ────────────────────────────────────────────────────────────── */

.ft{background:var(--forest);color:rgba(255,255,255,.72);
  padding-top:clamp(3rem,6vw,5rem);overflow:hidden}
.ft__g{display:grid;gap:2.25rem}
@media (min-width:820px){
  .ft__g{grid-template-columns:1.25fr repeat(3,minmax(0,.9fr));
    gap:clamp(1.5rem,4vw,3rem)}
}
.ft__c{display:grid;gap:.6rem;align-content:start;font-size:.92rem}
.ft__t{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime);margin-bottom:.35rem}
.ft__c a:hover{color:#fff}
.ft__brand b{display:block;font-size:1.3rem;font-weight:700;color:#fff;
  letter-spacing:-.035em;margin-bottom:.55rem}
.ft__brand p{font-size:.92rem;max-width:32ch}
.ft__legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.75rem;
  padding-block:1.35rem;font-size:.82rem;color:rgba(255,255,255,.55)}
.ft__word{display:block;width:100%;margin-top:-.5rem;
  font-size:clamp(2.6rem,14.6vw,11.4rem);font-weight:800;
  font-stretch:118%;letter-spacing:-.045em;
  line-height:.78;color:rgba(255,255,255,.09);user-select:none;
  white-space:nowrap;text-align:center;padding-bottom:.05em}

/* ── barra fija de contacto (móvil) ─────────────────────────────────── */

.bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  box-shadow:0 -8px 24px -16px rgba(13,42,26,.5)}
.bar a{background:var(--paper);text-align:center;padding:.9rem .5rem;
  font-size:.9rem;font-weight:600;color:var(--forest);
  padding-bottom:calc(.9rem + env(safe-area-inset-bottom))}
.bar a:first-child{background:var(--green);color:#fff}
@media (max-width:760px){
  .bar{display:grid}
  body{padding-bottom:0}
  .ft__legal{padding-bottom:4.5rem}
}

/* ══════════════════════════════════════════════════════════════════════
   Páginas interiores: servicio, ciudad, hub, quién lo hace, 404.
   Comparten el marcado antiguo, así que se restilan aquí.
   ══════════════════════════════════════════════════════════════════════ */

.hero{position:relative;margin:clamp(.6rem,1.4vw,1.1rem);
  border-radius:var(--r-l);overflow:hidden;isolation:isolate;color:#fff;
  min-height:min(62vh,540px);display:flex;align-items:flex-end;
  padding-block:clamp(2.5rem,6vw,4rem)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img,.hero__bg video{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,28,17,.55),rgba(8,28,17,.84))}
.hero__content{display:grid;gap:1.5rem;width:100%}
.hero__copy{display:grid;gap:1rem;max-width:46rem}
.hero__eyebrow{display:inline-block;font-family:var(--font-mono);
  font-size:.715rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--lime)}
.hero h1{color:#fff;text-wrap:balance}
.hero h1 em{color:var(--lime)}
.hero__p{font-size:clamp(1rem,1.4vw,1.12rem);color:rgba(255,255,255,.84);
  max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.hero__nota{font-size:.85rem;color:rgba(255,255,255,.68)}
.hero .btn--a{background:var(--lime);color:var(--forest);box-shadow:none}
.hero .btn--a:hover{background:var(--lime-d)}
.hero .btn--b{background:rgba(255,255,255,.1);color:#fff;
  border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.hero .btn--b:hover{background:rgba(255,255,255,.2);color:#fff}
.hero__floaters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;max-width:32rem}
.hero__fcard{padding:1rem 1.15rem;border-radius:var(--r-s);
  background:rgba(9,30,19,.55);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px)}
.hero__fcard-n{display:block;font-size:1.8rem;font-weight:700;
  letter-spacing:-.05em;color:var(--lime);line-height:1;
  font-variant-numeric:tabular-nums}
.hero__fcard-eyebrow{display:block;font-family:var(--font-mono);font-size:.7rem;
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--lime)}
.hero__fcard-l{display:block;font-size:.85rem;color:rgba(255,255,255,.78);
  margin-top:.35rem;line-height:1.35}
.hero__more{position:absolute;right:clamp(1.25rem,4vw,3.25rem);
  bottom:clamp(1.5rem,4vw,2.5rem);font-size:.85rem;font-weight:600;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:.2rem}
.hero__more:hover{color:var(--lime);border-color:var(--lime)}
@media (max-width:620px){
  .hero__floaters{grid-template-columns:1fr}
  .hero__more{display:none}
}

/* héroe sin foto (about, 404) */
.hero__content--plain{color:var(--ink)}
.hero:has(.hero__content--plain){background:var(--paper-2);color:var(--ink);
  min-height:auto;padding-block:clamp(3rem,6vw,5rem)}
.hero__content--plain h1{color:var(--ink)}
.hero__content--plain h1 em{color:var(--green)}
.hero:has(.hero__content--plain) .btn--a{background:var(--green);color:#fff}
.hero:has(.hero__content--plain) .btn--b{background:transparent;
  color:var(--ink);border-color:var(--rule-2);backdrop-filter:none}
.hero:has(.hero__content--plain) .hero__nota{color:var(--muted)}
.hero__content--plain .prosa{max-width:62ch}

/* placa de datos */
.placa{margin-top:1.75rem;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);padding:1.4rem clamp(1.25rem,3vw,2rem);
  box-shadow:var(--sh)}
.placa dl{display:grid;gap:0}
@media (min-width:760px){.placa dl{grid-template-columns:auto 1fr}}
.placa dt{font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green);padding:.7rem 0 .1rem}
.placa dd{font-size:.98rem;padding:0 0 .7rem;color:var(--ink-2)}
@media (min-width:760px){
  .placa dt{padding:.7rem 2.5rem .7rem 0;border-top:1px solid var(--rule)}
  .placa dd{padding:.7rem 0;border-top:1px solid var(--rule)}
  .placa dt:first-of-type,.placa dl>dt:first-child+dd{border-top:0}
}

/* prosa larga */
.prosa{max-width:66ch;color:var(--ink-2);font-size:1.02rem}
.prosa p+p{margin-top:1.05rem}

/* rejilla de puntos / pasos */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  margin-top:2.25rem}
.grid>div{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);padding:1.5rem;box-shadow:var(--sh)}
.grid h3{margin-bottom:.5rem}
.grid p{font-size:.9rem;color:var(--muted);line-height:1.55}
.grid__n{display:block;font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--green);
  margin-bottom:.7rem;font-variant-numeric:tabular-nums}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* tarjetas de servicio con foto (hub, ciudad) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;
  margin-top:2.25rem}
.cards>a{display:grid;gap:.75rem;align-content:start}
.cards figure{position:relative;border-radius:var(--r);overflow:hidden;
  margin:0}
.cards figure img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .45s ease}
.cards>a:hover figure img{transform:scale(1.05)}
.cards__pill{position:absolute;left:.85rem;bottom:.85rem;max-width:calc(100% - 4.5rem);
  background:rgba(255,255,255,.94);color:var(--forest);border-radius:999px;
  padding:.45rem .95rem;font-size:.85rem;font-weight:600;
  backdrop-filter:blur(6px)}
.cards__arrow{position:absolute;right:.85rem;bottom:.85rem;width:36px;
  height:36px;border-radius:50%;background:var(--lime);color:var(--forest);
  display:grid;place-items:center;font-size:.9rem;transition:.2s}
.cards>a:hover .cards__arrow{background:var(--green);color:#fff}
.cards__w{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green)}
.cards>a p{font-size:.9rem;color:var(--muted);line-height:1.5}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* tabla de servicios */
.tbl{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.94rem;
  display:block;overflow-x:auto}
.tbl thead th{text-align:left;font-family:var(--font-mono);font-size:.7rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--green);
  padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--rule-2);
  white-space:nowrap}
.tbl td{padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--muted)}
.tbl td:first-child{font-weight:600;color:var(--ink);min-width:12rem}
.tbl td:first-child a:hover{color:var(--green)}
.tbl tr:hover td{background:var(--paper-2)}

/* figura suelta */
.fig{margin:0;border-radius:var(--r);overflow:hidden}
.fig img{width:100%;object-fit:cover}
.fig--32 img{aspect-ratio:3/2}
.fig--43 img{aspect-ratio:4/3}
.porque__top{display:grid;gap:1.75rem;margin-top:1.5rem}
@media (min-width:900px){
  .porque__top{grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
}

/* ── movimiento ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(16px);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
      transform .55s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
  .js .reveal.is-in{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Movimiento de agua. Todo el sitio se mueve como se mueve el agua:
   entra por abajo llenando, los bordes se dibujan como un canal que se
   llena de izquierda a derecha, y las secciones se separan con una ola
   lenta. Nada de destellos: el héroe no lleva brillo de ningún tipo.
   Todo se apaga entero con prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

/* nivel de agua: barra fina arriba que sube con el scroll */
.tide{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;
  transform:scaleX(var(--tide,0));transform-origin:left;
  background:linear-gradient(90deg,var(--green),var(--lime));
  pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  /* Los marcos de foto se asientan. Solo transform: la opacidad se queda
     a 1 en todo momento, así que la foto nunca desaparece. */
  .js .zoom{transform:scale(1.05);
    transition:transform .95s cubic-bezier(.2,.62,.3,1) var(--d,0ms)}
  .js .zoom.is-in{transform:none}

  /* la pastilla sobre la foto entra con ella */
  .js .split__frame .split__tag{opacity:0;transform:translateY(6px);
    transition:opacity .5s ease .25s,transform .5s ease .25s}
  .js .split__frame.is-in .split__tag{opacity:1;transform:none}

  /* los bordes de las listas se dibujan como un canal que se llena */
  .js .split__list li::after,.js .proc__steps li::after{content:"";
    position:absolute;left:0;right:0;top:-1px;height:1.5px;
    background:linear-gradient(90deg,var(--green),var(--rule-2));
    transform:scaleX(0);transform-origin:left;
    transition:transform .6s cubic-bezier(.5,.02,.25,1) var(--d,0ms)}
  .js .proc__steps li::after{
    background:linear-gradient(90deg,var(--lime),rgba(255,255,255,.16))}
  .js .split__list li,.js .proc__steps li{position:relative}
  .js .lista-agua.is-in li::after{transform:scaleX(1)}

  /* deriva lenta de las fotos grandes al hacer scroll */
  .drift{will-change:transform}

  /* el copy del héroe entra en cascada, sin brillos */
  .vhero__copy>*{animation:rise .9s cubic-bezier(.22,.61,.36,1) both}
  .vhero__copy>*:nth-child(1){animation-delay:.06s}
  .vhero__copy>*:nth-child(2){animation-delay:.16s}
  .vhero__copy>*:nth-child(3){animation-delay:.26s}
  .vhero__copy>*:nth-child(4){animation-delay:.36s}
  .vhero__floor{animation:rise 1s cubic-bezier(.22,.61,.36,1) .46s both}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

  /* la pastilla y la flecha de las tarjetas responden como una superficie */
  .svc__card,.pub article,.cards>a figure{will-change:transform}
}

/* corriente lenta bajo la banda de cifras */
.strip__in{position:relative}
.strip__in::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:.5}

/* dos fotos pequeñas bajo el rótulo de la sección de autoridad: llenan la
   columna vacía y meten oficio donde solo había texto */
.about__pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;margin-top:2rem;max-width:20rem}
.about__pics img{width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-s)}
@media (max-width:899px){.about__pics{margin-top:1.25rem;max-width:16rem}}

/* ── página de servicio: texto + tarjeta de contacto fija ───────────── */

.dos-col{display:grid;gap:2rem}
@media (min-width:980px){
  .dos-col{grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4.5rem);
    align-items:start}
  .lado__in{position:sticky;top:6.5rem}
}
.lado__in{background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);padding:1.6rem;box-shadow:var(--sh)}
.lado__in h3{font-size:1.2rem;margin-bottom:.6rem}
.lado__in>div>p,.lado__in p{font-size:.92rem;color:var(--muted)}
.lado__cta{display:grid;gap:.6rem;margin-top:1.25rem}
.lado__dl{margin-top:1.5rem;display:grid;gap:.1rem}
.lado__dl>div{padding:.7rem 0;border-top:1px solid var(--rule)}
.lado__dl dt{font-family:var(--font-mono);font-size:.685rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green)}
.lado__dl dd{font-size:.92rem;color:var(--ink-2);margin-top:.2rem}
.lado__img{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-s);margin-top:1.4rem}

/* Residential home: quiet typography, documentary images and water accents. */
[hidden]{display:none!important}
button{font:inherit}
.btn{white-space:normal;text-align:center;line-height:1.35}
.hd__nav a{display:inline-flex;align-items:center;min-height:44px}
.hd__nav .btn{color:#fff}
.hd__nav-cta a::after{display:none}
.top__in a{display:inline-flex;align-items:center;min-height:30px}
.ft__legal a{display:inline-flex;align-items:center;min-height:44px;
  margin-left:1rem;text-decoration:underline;text-underline-offset:4px}
.ft a:focus-visible,.vhero a:focus-visible,
.res-close a:focus-visible,.cierre a:focus-visible{outline-color:var(--water)}
.ft__c a{min-height:36px;display:flex;align-items:center;width:fit-content}
.cities a{min-height:44px}
.vhero:has(.vhero__floor){padding-bottom:5.5rem}
.res-home h1,.res-home h2{font-weight:500;letter-spacing:-.05em;line-height:1.06}
.res-home h2{font-size:clamp(2.1rem,4vw,3.35rem);text-wrap:balance}
.res-home .vhero{min-height:660px;min-height:min(78svh,760px);justify-content:center;
  padding:clamp(4rem,7vw,6rem) clamp(1.4rem,6vw,6rem);margin:0 12px;
  background:var(--forest);border-radius:12px}
.res-home .vhero__copy{max-width:42rem;gap:1.4rem}
.res-home .vhero h1{font-size:clamp(2.8rem,4.8vw,4.3rem);text-align:left;
  text-wrap:initial;text-shadow:none;line-height:1.02}
.res-home .vhero__veil{background:linear-gradient(90deg,rgba(8,29,19,.86),
  rgba(8,29,19,.55) 43%,rgba(8,29,19,.04) 82%)}
.res-home .vhero__p{max-width:38ch;color:#fff;line-height:1.6}
.res-home .vhero__cta{max-width:36rem}
.res-home .vhero__note{width:100%;padding:0;color:#eef6ed}
.res-home .vhero__cta .btn--ghost{border:0;background:transparent;backdrop-filter:none;
  padding-inline:.35rem;text-decoration:underline;text-underline-offset:5px}
.res-facts{display:flex;justify-content:space-between;align-items:center;
  gap:2rem;padding-block:2rem;border-bottom:1px solid var(--rule)}
.res-facts dl{display:grid;grid-template-columns:.75fr 1.15fr 1fr;gap:2.6rem}
.res-facts dl>div{display:flex;flex-direction:column-reverse;justify-content:end;gap:.3rem}
.res-facts dd{font-size:clamp(1.1rem,1.7vw,1.5rem);letter-spacing:-.035em;line-height:1.2;font-weight:500}
.res-facts dt{font-size:.75rem;color:var(--muted)}
.text-link{display:inline-flex;align-items:center;gap:1.5rem;min-height:44px;
  width:fit-content;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--ink)}
.text-link>span{transition:transform .25s}
.text-link:hover>span{transform:translate(3px,-2px)}
.res-section{padding-block:clamp(3.5rem,6.5vw,6rem)}
.res-section--soft{background:var(--paper-2)}
.res-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.6rem}
.res-heading h2,.res-care h2,.res-issues h2,.res-area h2{margin-top:1.15rem}
.res-heading>p{max-width:29ch;color:var(--muted);font-size:1.02rem}
.res-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}
.res-service__photo{overflow:hidden;border-radius:10px;background:var(--paper-2)}
.res-service__photo img{width:100%;aspect-ratio:1.4;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.res-service h3{display:flex;align-items:start;justify-content:space-between;gap:1rem;
  font-size:1.22rem;line-height:1.3;margin-top:1.2rem;font-weight:500}
.res-service h3>span:last-child{font-size:1.3rem;flex:none;transition:transform .25s}
.res-service>p{margin-top:.7rem;font-size:.94rem;color:var(--muted);max-width:36ch}
.res-service:hover h3>span:last-child{transform:translate(2px,-2px)}
.res-service:hover img{transform:scale(1.025)}
.res-services__foot{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--rule)}
.res-services__foot p{font-size:.85rem;color:var(--muted)}
.res-issues{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,6rem)}
.res-issues>div>p{max-width:35ch;margin-top:1.5rem;color:var(--muted)}
.res-photo{margin:0;min-width:0}
.res-photo img{display:block;width:100%;object-fit:cover;border-radius:12px}
.res-photo figcaption{font-family:var(--font-mono);font-size:.72rem;line-height:1.5;color:var(--muted);margin-top:.8rem}
.res-issues__photo{margin-top:2rem}
.res-issues__photo img{aspect-ratio:1.8;object-position:35% 58%}
.res-issues__list{list-style:none}
.res-issues__list li{position:relative;border-top:1px solid var(--rule-2)}
.res-issues__list li:last-child{border-bottom:1px solid var(--rule-2)}
.res-issues__list a{display:flex;justify-content:space-between;gap:1.5rem;padding:1.3rem 0}
.res-issues__list a>span:first-child{display:grid;gap:.25rem}
.res-issues__list strong{font-size:1.06rem;font-weight:500}
.res-issues__list a>span>span{font-size:.88rem;color:var(--muted)}
.res-issues__list a>span:last-child{font-size:1.2rem}
.res-issues__list a:hover strong{text-decoration:underline;text-underline-offset:4px}
.res-care{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:clamp(2rem,6vw,5.5rem)}
.res-care__photo{overflow:hidden;border-radius:12px;background:var(--paper-2)}
.res-care__photo img{width:100%;aspect-ratio:1;object-fit:cover}
.res-care__photos{display:grid;grid-template-columns:1fr;align-items:end;min-width:0}
.res-care__photos .res-care__photo img{aspect-ratio:1.15}
.res-care__detail{position:relative;width:66%;justify-self:end;margin-top:-4.5rem;
  margin-right:-1rem;border:8px solid var(--paper);border-radius:16px;background:var(--paper)}
.res-care__detail img{aspect-ratio:1.5;object-position:50% 60%;border-radius:8px}
.res-care__copy>p{margin-top:1.4rem;color:var(--muted)}
.res-care__copy .res-care__proof{border-top:1px solid var(--rule);padding-top:1.2rem;
  font-size:.85rem;color:var(--ink-2)}
.res-care .btn{margin-top:1.6rem}
.res-efficiency .res-heading>p{max-width:45ch}
.res-efficiency__photos{display:grid;grid-template-columns:1.65fr 1fr;gap:1.3rem;margin-block:2rem 2.8rem}
.res-efficiency__photos img{height:clamp(230px,27vw,350px);object-position:center}
.res-efficiency__photos .res-photo:last-child img{object-position:48% 45%}
.res-efficiency__points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;list-style:none}
.res-efficiency__points li{border-top:1px solid var(--rule-2);padding-top:1.2rem}
.res-efficiency__points h3{font-size:1.15rem;font-weight:500}
.res-efficiency__points p{font-size:.94rem;color:var(--muted);margin-top:.6rem;max-width:35ch}
.res-efficiency .text-link{margin-top:2rem}
.company-intro h1{font-size:clamp(2.3rem,4.5vw,4.4rem);max-width:25ch;margin-top:1.3rem}
.company-intro>.wrap>p{max-width:60ch;margin-top:1.8rem;color:var(--muted);font-size:1.1rem}
.company-intro .hero__cta{margin-top:1.6rem}
.company-intro .hero__nota{color:var(--muted)}
.company-intro__photo{margin:3rem 0 0;overflow:hidden;border-radius:12px}
.company-intro__photo img{width:100%;height:clamp(240px,30vw,430px);object-fit:cover;object-position:45% 58%}
.company-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;margin-top:3rem}
.company-capabilities article{border-top:1px solid var(--rule-2);padding-top:1.4rem}
.company-capabilities h3{font-size:1.3rem;line-height:1.25;font-weight:500}
.company-capabilities p{color:var(--muted);margin-top:1rem}
.company-capabilities__photo{margin-bottom:1.5rem;overflow:hidden;border-radius:10px}
.company-capabilities__photo img{width:100%;aspect-ratio:1.4;object-fit:cover}
.res-process{background:var(--forest);color:#edf4ef;margin:0 12px;border-radius:12px}
.res-process h2,.res-process h3{color:#fff}
.res-process .eyebrow{color:var(--water)}
.res-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;list-style:none;margin-top:3rem}
.res-steps li{position:relative;border-top:1px solid #ffffff38;padding-top:1.3rem}
.res-step__n{display:block;font-family:var(--font-mono);font-size:.85rem;color:var(--water);margin-bottom:1.8rem}
.res-steps h3{font-size:1.17rem;font-weight:500;max-width:24ch}
.res-steps p{font-size:.94rem;color:#d2ded6;margin-top:1rem;max-width:33ch}
.res-area__grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.res-area__grid>div>p{max-width:45ch;color:var(--muted)}
.res-area__photos{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;gap:1.2rem;align-items:start}
.res-area__photos img{height:clamp(240px,32vw,410px);object-position:center}
.res-photo-credit{grid-column:1/-1;justify-self:end;font-size:.7rem;color:var(--muted);
  min-height:36px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.res-cities{display:flex;flex-wrap:wrap;column-gap:1rem;row-gap:.2rem;margin-block:1.2rem}
.res-cities a{display:inline-flex;align-items:center;min-height:44px;font-size:.88rem}
.res-cities a:hover{text-decoration:underline;text-underline-offset:4px}
.res-home .faq__media{max-width:22rem;border-radius:10px}
.res-home .faq__media img{aspect-ratio:1.65;object-position:center}
.res-home>.sec{background:var(--paper-2);padding-block:4.5rem}
.res-home .faq__grid{align-items:start}
.res-home .faq summary{font-weight:500}
.res-close{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;
  margin:12px;padding:5rem 0;color:#fff;background:var(--forest)}
.res-close__image{position:absolute;inset:0;z-index:-2}
.res-close__image img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.res-close::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#0d2a1af0,#0d2a1a99 60%,#0d2a1a40)}
.res-close h2{color:#fff;max-width:20ch}
.res-close p{max-width:41ch;margin-top:1.3rem;color:#eef4ef}
.res-close .btn{margin-top:1.8rem}
.res-close__call{display:block;min-height:44px;width:fit-content;margin-top:.65rem;
  font-size:.9rem;text-decoration:underline;text-underline-offset:4px;padding-block:.7rem}
.tide{background:#83bfbd;height:2px}
@media (prefers-reduced-motion:no-preference){
  .water-entry{transform:translateY(10px);transition:transform .5s cubic-bezier(.2,.6,.3,1)}
  .water-entry.is-in{transform:none}
  .water-entry .res-issues__list li::before,.water-entry.res-steps li::before{content:'';
    position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--water);
    transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.6,.3,1)}
  .water-entry.is-in .res-issues__list li::before,.water-entry.res-steps.is-in li::before{transform:scaleX(1)}
  .water-entry li:nth-child(2)::before{transition-delay:.12s}
  .water-entry li:nth-child(3)::before{transition-delay:.24s}
  .water-entry li:nth-child(4)::before{transition-delay:.36s}
  .res-home .vhero__copy>*{animation:none}
}
@media(max-width:1100px){
  .res-facts{gap:1.3rem}.res-facts dl{gap:1.7rem}.res-facts .text-link{font-size:.8rem;gap:.7rem}
  .res-home .vhero__cta{max-width:31rem}
}
@media(max-width:799px){
  .res-home .vhero{min-height:610px;padding:3.5rem 1.6rem 5rem;margin:0 8px;justify-content:flex-end}
  .res-home .vhero h1{font-size:clamp(2.25rem,6.4vw,3.7rem)}
  .res-home .vhero__copy{max-width:36rem}
  .res-home .vhero__veil{background:linear-gradient(0deg,#081d13ed,#081d1394 60%,#081d1320)}
  .res-home .vhero__media video{object-position:72% center}
  .res-home .vhero__p{max-width:35ch;font-size:1rem}
  .res-home .vhero__cta{max-width:31rem;gap:.4rem}
  .res-home .vhero__note{font-size:.78rem}
  .res-facts{display:block;padding-block:1.6rem}
  .res-facts dl{gap:1.4rem;grid-template-columns:repeat(3,minmax(0,1fr))}
  .res-facts dd{font-size:1.25rem}.res-facts dt{font-size:.67rem}
  .res-facts .text-link{margin-top:1.2rem;font-size:.85rem}
  .res-heading{display:block;margin-bottom:1.8rem}
  .res-heading>p{margin-top:1.2rem;max-width:38ch}
  .res-services{gap:2rem;grid-template-columns:1fr}
  .res-service__photo img{aspect-ratio:1.75}
  .res-service h3{margin-top:1rem}
  .res-service>p{max-width:45ch}
  .res-services__foot{align-items:start;flex-direction:column;gap:.7rem}
  .res-issues,.res-care,.res-area__grid{grid-template-columns:1fr;gap:2.3rem}
  .res-care__photo img{aspect-ratio:1.3}
  .res-care__copy>p{max-width:48ch}
  .res-efficiency__points,.company-capabilities{grid-template-columns:1fr;gap:1.6rem}
  .res-steps{grid-template-columns:1fr;gap:2rem;margin-top:2rem}
  .res-step__n{margin-bottom:.8rem}.res-steps h3,.res-steps p{max-width:45ch}
  .res-process{margin-inline:8px}
  .res-home>.sec{padding-block:3.5rem}
  .res-home .faq__media{display:block;max-width:none;margin-top:1.5rem}
  .res-home .faq__media img{aspect-ratio:2.1}
  .res-care__detail{margin-right:0;margin-top:-3rem;border-width:6px}
  .res-efficiency__photos{grid-template-columns:1.4fr 1fr;gap:.8rem;margin-bottom:2rem}
  .res-efficiency__photos img{height:240px}
  .res-area__photos{grid-template-columns:1fr 1fr;gap:.8rem}
  .res-area__photos img{height:250px}
  .res-photo-credit{justify-self:start}
  .res-close{padding-block:3.5rem;margin:8px}
  .res-close::before{background:#0d2a1ac9}
}
@media(max-width:480px){
  .top{display:none}
  .res-home .vhero{min-height:590px;padding-inline:1.2rem}
  .res-home .vhero h1{font-size:clamp(1.8rem,8.3vw,2.45rem)}
  .res-home .vhero__copy{gap:1.1rem}
  .res-home .vhero__cta{display:grid;justify-items:start}
  .res-home .vhero__cta .btn{font-size:.87rem;min-height:48px;padding-inline:1.1rem}
  .res-home .vhero__cta .btn--ghost{padding-left:0}
  .res-facts dl{grid-template-columns:1fr;gap:1rem}
  .res-facts dl>div{padding-bottom:1rem;border-bottom:1px solid var(--rule)}
  .res-facts dl>div:last-child{padding-bottom:0;border-bottom:0}
  .res-facts dt{font-size:.76rem}.res-facts dd{font-size:1.3rem}
  .res-home h2{font-size:2.15rem}
  .res-service h3{font-size:1.15rem}
  .hd__nav a{display:flex;min-height:48px}
  .ft__legal a{margin-left:0;display:flex}
}
@media(max-width:760px){
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .bar a{min-height:54px;padding:.8rem .5rem calc(.8rem + env(safe-area-inset-bottom));font-size:.82rem;white-space:nowrap}
  .ft__c a{min-height:44px}
  .bar{box-shadow:none;border-top:1px solid var(--rule)}
  .ft__legal{padding-bottom:1.35rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .water-entry,.reveal,.zoom,.water-reveal{opacity:1!important;transform:none!important;clip-path:none!important}
  .tide{display:none}
}
/* Water is the moving material; typography and controls remain stationary.
   A photograph's one motion is its entrance: water filling the frame once. */
.copy-line{display:block}
.motion-photo{overflow:hidden;border-radius:12px}
.tide{display:none}
.btn:hover,.res-service:hover,.res-service:focus-visible,.svc__card:hover,.pub article:hover{transform:none;box-shadow:none}
.res-service:hover img,.cards>a:hover figure img,.svc__card:hover img{transform:none}
.res-service img,.cards figure img,.svc__card img{transition:none!important;transform:none!important}
.res-service:hover h3>span:last-child,.text-link:hover>span{transform:none}
.res-service__photo img{transition:none}
/* Entrance only, and only once. The wrapper moves so the img kill-switch above
   keeps holding: photographs still never react to the cursor. The inset rises
   from the bottom edge, so the picture fills the way a basin does. */
.motion-ready .water-reveal{opacity:0;transform:translateY(22px);
  clip-path:inset(16% 0 0 0 round var(--reveal-radius,12px));
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1),
    clip-path .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--motion-delay,0ms);will-change:opacity,transform,clip-path}
.motion-ready .water-reveal.water-in{opacity:1;transform:none;
  clip-path:inset(0 round var(--reveal-radius,12px));will-change:auto}
.res-service__photo,.company-capabilities__photo{--reveal-radius:10px}
.hd[data-scrolled="true"]{background:rgba(255,255,255,.98)}
/* Sample review layout. The dashed edge and the notice exist so a placeholder
   can never be mistaken for a real customer; both go when real reviews land. */
.res-reviews{min-width:0;width:100%;align-self:center;display:grid;gap:.7rem}
.res-reviews__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#b8d8d0}
.res-reviews__notice{color:#e8c98a;opacity:.9;text-align:right}
.res-review{margin:0;padding:.95rem 1.1rem;border:1px solid #ffffff1f;border-radius:10px;background:#ffffff08}
.res-reviews[data-sample="true"] .res-review{border-style:dashed}
.res-review__stars{color:#cfe9dc;font-size:.78rem;letter-spacing:.18em}
.res-review blockquote{margin:.45rem 0 0;font-size:.92rem;line-height:1.55;color:#e6f2ec}
.res-review figcaption{margin-top:.55rem;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;color:#9fbcae}
.liquid-button{position:relative;isolation:isolate;overflow:hidden}
.liquid-button__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;display:block}
.liquid-button__label{position:relative;z-index:1;display:inline-flex;align-items:center;
  justify-content:center;gap:inherit;color:inherit;transition:color .16s ease}
.liquid-button[data-liquid-deep="true"] .liquid-button__label{color:#fff}
.res-process .res-heading{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3.5rem}
.res-process .res-heading h2{max-width:17ch}
.res-process .res-steps{margin-top:2.7rem}
@media(prefers-reduced-motion:no-preference){
  .hd{transition:background .3s}
  .faq summary i{transition:transform .32s,background .3s,color .3s}
}
@media(max-width:799px){
  .res-process .res-heading{grid-template-columns:1fr;gap:2.2rem}
  .res-reviews{max-width:540px}
  /* Both labels are long; side by side they collide and overflow on a phone. */
  .res-reviews__top{flex-direction:column;align-items:flex-start;gap:.3rem}
  .res-reviews__notice{text-align:left}
  .res-process .res-steps{margin-top:2rem}
}
@media(prefers-reduced-motion:reduce){
  .liquid-button__canvas{display:none!important}
}

/* ── Pantallas anchas · 23-sep-2026 ─────────────────────────────────
   A 1900 px la caja de 78rem dejaba 366 px de papel a cada lado mientras el
   héroe iba a sangre: el logo, el titular del héroe y los de sección caían en
   tres verticales distintas. Ahora todo arranca en el mismo margen, que crece
   con la pantalla hasta una columna de 1440 px. El % del padding se mide
   contra el contenedor, así que dentro de las bandas con margen de 12 px
   (proceso, cierre) la vertical sigue cuadrando sola. */
:root{--edge:clamp(1.15rem,4.6vw,6rem);--max:1440px}
.wrap{max-width:none;padding-inline:max(var(--edge),calc((100% - var(--max)) / 2))}
/* Las bandas despegadas del borde restan su propio margen al del texto. */
.res-process>.wrap,.res-close>.wrap{padding-inline:max(calc(var(--edge) - 12px),calc((100% - var(--max)) / 2))}
@media(max-width:799px){.res-process>.wrap,.res-close>.wrap{padding-inline:max(calc(var(--edge) - 8px),calc((100% - var(--max)) / 2))}}
@media(min-width:800px){
  .res-home .vhero{padding-inline:calc(max(var(--edge),calc((100% - var(--max)) / 2)) - 12px)}
  .res-home .vhero h1{font-size:clamp(2.8rem,4.2vw,4.7rem);hyphens:manual}
  .res-home .vhero__copy{max-width:54rem}
  .res-home .vhero h1 .copy-line{display:block;white-space:nowrap}
  .res-home .vhero__p{font-size:clamp(1.05rem,1.1vw,1.22rem)}
  .res-home h2{font-size:clamp(2.1rem,3.6vw,3.9rem)}
  .res-facts dd{font-size:clamp(1.25rem,1.6vw,1.9rem)}
  .res-facts dt{font-size:.8rem}
  .res-heading>p,.res-issues>div>p,.res-care__copy>p{font-size:clamp(1rem,.95vw,1.1rem)}
}

/* Bloque de proceso sin reseñas de muestra: la llamada ocupa su hueco. */
.res-process__cta{display:grid;gap:1.4rem;max-width:30rem}
.res-process__cta p{color:#d2ded6;font-size:1.02rem}
.res-process__cta>div{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem}
.res-process__cta .res-close__call{margin-top:0;color:#fff}

/* FAQ de portada: en lugar de repetir la foto de goteo, la vía directa. */
.faq__aside{margin-top:1.6rem;display:grid;justify-items:start;gap:.2rem}
.faq__aside p{color:var(--muted);max-width:32ch;margin-bottom:.8rem}
@media(max-width:799px){.res-process__cta{margin-top:1.8rem}}

/* Las rejillas de servicios llevan 8 fichas: a 3 columnas quedaba una fila de
   2 con el tercer hueco vacío. 4 en escritorio, 2 en tableta, 1 en móvil. */
@media (min-width:601px) and (max-width:1179px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Zona de servicio de la portada: una sola panorámica. La segunda foto era la
   misma de la ficha de diseño, tres secciones más arriba. */
.res-area__photos{grid-template-columns:1fr}
.res-area__photos img{height:clamp(240px,30vw,520px);object-position:50% 62%}

/* Página de servicio: la columna de texto se completa con para quién es,
   los pasos y las preguntas, para que no quede hueco junto a la tarjeta. */
.svc-main{display:grid;gap:2.4rem;min-width:0}
.svc-main .prosa p{font-size:clamp(1.02rem,1.05vw,1.14rem)}
.svc-extra{display:grid;gap:.9rem}
.svc-para{font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);max-width:40ch}
.svc-pasos{list-style:none;display:grid}
.svc-pasos li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding-block:1.1rem;border-top:1px solid var(--rule-2)}
.svc-pasos li:last-child{border-bottom:1px solid var(--rule-2)}
.svc-pasos .mono{font-size:.8rem;color:var(--green);padding-top:.2rem}
.svc-pasos h3{font-size:1.05rem;font-weight:500}
.svc-pasos p{font-size:.94rem;color:var(--muted);margin-top:.35rem;max-width:52ch}
.svc-main .faq{max-width:none}

/* Guías de problema (/guides/, 23-sep-2026). Solo espaciado y listas: el resto
   hereda de .sec, .prosa y .tbl para que se lean como el resto del sitio. */
.sec h2+.prosa{margin-top:1.1rem}
.guia__rev{margin-top:.6rem;color:var(--muted);font-size:.92rem}
.tbl-scroll{margin-top:1.6rem;overflow-x:auto}
.svc-guias,.guia__fuentes{list-style:none;margin-top:1.1rem;padding:0;display:grid;gap:.55rem}
.svc-guias a,.guia__fuentes a{color:var(--forest-2);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.svc-guias a:hover,.guia__fuentes a:hover{color:var(--ink)}
.sec h2 a{color:inherit;text-decoration:none}
@media (max-width:640px){
  .tbl-scroll .tbl thead{display:none}
  .tbl-scroll .tbl tr{display:block;padding:1rem 0;border-bottom:1px solid var(--rule)}
  .tbl-scroll .tbl td{display:block;padding:.2rem 0;border:0}
  .tbl-scroll .tbl td+td{margin-top:.45rem}
  .tbl-scroll .tbl td::before{content:attr(data-l);display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
}