/* grupojoh.com — hoja única de la web estática (28-09-2026).
   Marca: marino y azul del logo; naranja solo para la acción principal; acero para los fondos.
   Tipos: Barlow Condensed (titulares, como la rotulación de las placas de los equipos) + Barlow (texto).
   Lo memorable es UNO: la «red de aire» (tubería azul con bajantes) que conecta los servicios de aire comprimido. */
/* Barlow y Barlow Condensed (OFL), alojadas aquí para no depender de Google Fonts y evitar saltos (CLS). Solo latin. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/estaticos/fuentes/barlow-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/estaticos/fuentes/barlow-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/estaticos/fuentes/barlow-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/estaticos/fuentes/barlow-condensed-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/estaticos/fuentes/barlow-condensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/estaticos/fuentes/barlow-condensed-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --marino:#002458; --azul:#0077b9; --azul-txt:#00619a; --azul-claro:#e3f0f8; --naranja:#f28c28; --naranja-osc:#d9731a;
  --tinta:#17212c; --gris:#56616d; --linea:#d6dde4; --acero:#eef2f5; --blanco:#fff;
  --tit:'Barlow Condensed','Arial Narrow',sans-serif; --txt:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:4px; --ancho:1200px; --tubo:7px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--txt);font-size:17px;line-height:1.6;color:var(--tinta);background:var(--blanco)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--azul-txt);text-underline-offset:3px}
a:hover{color:var(--marino)}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--tit);color:var(--marino);line-height:1.08;margin:0 0 .5em;font-weight:700;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
h3{font-size:1.45rem;font-weight:600}
p{margin:0 0 1em}
.sr{position:absolute;left:-9999px}.sr:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}
.cont{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.estrecho{max-width:760px}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--txt);font-weight:600;font-size:1rem;line-height:1.2;padding:.85em 1.4em;border-radius:var(--r);background:var(--naranja);color:var(--marino);text-decoration:none;border:2px solid var(--naranja);cursor:pointer;transition:background .15s}
.btn:hover{background:#ffa24a;border-color:#ffa24a;color:var(--marino)}
.btn-2{background:transparent;color:var(--marino);border-color:var(--marino)}
.btn-2:hover{background:var(--marino);color:#fff;border-color:var(--marino)}
.btn-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-claro:hover{background:#fff;color:var(--marino);border-color:#fff}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* ── barra superior y cabecera ── */
.barra-sup{background:var(--marino);color:#cfdcea;font-size:.9rem}
.barra-sup .cont{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px}
.barra-sup a{color:#fff;text-decoration:none;font-weight:600}
.barra-sup .urg b{color:#fff}
.cab{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--linea)}
.cab .cont{display:flex;align-items:center;gap:24px;min-height:78px}
.logo{flex:none;display:block}
.logo img{width:143px;height:auto}
.nav{margin-left:auto}
.nav>ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
.nav a,.nav summary{display:block;padding:10px 11px;font-weight:600;font-size:.98rem;color:var(--tinta);text-decoration:none;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.nav summary{list-style:none;display:flex;align-items:center;gap:5px}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav a:hover,.nav summary:hover,.nav .activa>a,.nav .activa>details>summary{color:var(--azul)}
.nav .destacado>a{color:var(--marino);box-shadow:inset 0 -3px 0 var(--naranja);border-radius:0}
.nav details{position:relative}
.nav details>div{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:#fff;border:1px solid var(--linea);border-top:var(--tubo) solid var(--azul);border-radius:0 0 var(--r) var(--r);box-shadow:0 18px 40px rgba(0,36,88,.14);padding:10px}
.nav details>div a{white-space:normal;padding:9px 12px;font-weight:500}
.nav details>div a:hover{background:var(--acero)}
.nav details>div a.hub{font-weight:700;color:var(--marino);border-bottom:1px solid var(--linea);margin-bottom:4px;border-radius:0}
.cab-cta{display:flex;gap:10px;align-items:center}
.cab-cta .btn{padding:.7em 1.1em;white-space:nowrap}
.hamb{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.hamb span{display:block;width:26px;height:3px;background:var(--marino);margin:5px 0;border-radius:2px}
@media (max-width:1440px){.cab-cta .tel-cab{display:none}}
@media (max-width:1060px){
  .hamb{display:block}.cab-cta{display:none}
  .nav{position:fixed;inset:78px 0 0 0;background:#fff;overflow:auto;padding:12px 20px 120px;display:none;margin:0}
  .nav.abierto{display:block}
  .nav>ul{flex-direction:column;align-items:stretch}
  .nav a,.nav summary{padding:14px 6px;font-size:1.08rem;border-bottom:1px solid var(--acero);border-radius:0}
  .nav details>div{position:static;box-shadow:none;border:0;border-left:var(--tubo) solid var(--azul);min-width:0;padding:0 0 8px 12px;border-radius:0}
  .barra-sup .urg{display:none}
  body.menu-abierto{overflow:hidden}
}

/* ── cabeceras de página ── */
.hero{position:relative;background:var(--marino);color:#fff;overflow:hidden}
.hero-foto{position:absolute;inset:0}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,36,88,.96) 0%,rgba(0,36,88,.88) 42%,rgba(0,36,88,.35) 75%,rgba(0,36,88,.15) 100%)}
.hero .cont{position:relative;padding-top:88px;padding-bottom:96px}
.hero h1{color:#fff;max-width:14em;font-size:clamp(2.5rem,5.6vw,4.3rem);line-height:1.02}
.hero .lead{font-size:1.2rem;max-width:34em;color:#e2ebf4}
.hero .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-datos{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);max-width:760px;font-size:.98rem;color:#cfdcea}
.hero-datos b{display:block;font-family:var(--tit);font-size:1.6rem;color:#fff;font-weight:600;line-height:1.1}
@media (max-width:700px){.hero-foto::after{background:linear-gradient(180deg,rgba(0,36,88,.72),rgba(0,36,88,.95) 55%)}.hero .cont{padding-top:56px;padding-bottom:60px}}

.cab-pag{background:var(--acero);border-bottom:1px solid var(--linea)}
.cab-pag .cont{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:48px;padding-bottom:48px}
.cab-pag.sin-foto .cont{grid-template-columns:1fr}
.cab-pag h1{margin-bottom:.35em}
.cab-pag .lead{font-size:1.15rem;color:var(--gris);max-width:36em}
.cab-pag figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#dfe6ec}
.cab-pag figure img{width:100%;height:100%;object-fit:cover}
.cab-pag .acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (max-width:860px){.cab-pag .cont{grid-template-columns:1fr;gap:26px;padding-top:30px;padding-bottom:34px}}
.miga{font-size:.9rem;color:var(--gris);margin-bottom:14px}
.miga a{color:var(--gris)}
.miga span[aria-hidden]{margin:0 6px;opacity:.6}

/* ── secciones ── */
.sec{padding:84px 0}
.sec-gris{background:var(--acero)}
.sec-marino{background:var(--marino);color:#dce7f2}
.sec-marino h2,.sec-marino h3{color:#fff}
.sec-cab{max-width:760px;margin-bottom:40px}
.sec-cab p{font-size:1.1rem;color:var(--gris)}
.sec-marino .sec-cab p{color:#c6d5e5}
@media (max-width:700px){.sec{padding:56px 0}}

/* ── LA RED DE AIRE: colector con bajantes ── */
.red{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:18px;padding-top:46px}
.red::before{content:"";position:absolute;top:0;left:-24px;right:-24px;height:var(--tubo);background:var(--azul);border-radius:4px}
.red::after{content:"";position:absolute;top:-7px;left:-24px;width:22px;height:21px;background:var(--marino);border-radius:3px}
.toma{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);border-radius:var(--r);text-decoration:none;color:var(--tinta);transition:border-color .15s,transform .15s}
.toma::before{content:"";position:absolute;top:-46px;left:34px;width:var(--tubo);height:46px;background:var(--azul)}
.toma::after{content:"";position:absolute;top:-30px;left:28px;width:19px;height:12px;background:var(--marino);border-radius:2px}
.toma:hover{border-color:var(--azul);transform:translateY(-2px);color:var(--tinta)}
.toma figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--acero)}
.toma figure img{width:100%;height:100%;object-fit:cover}
.toma div{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.toma h3{font-size:1.35rem;margin-bottom:.3em}
.toma p{font-size:.96rem;color:var(--gris);margin:0 0 14px}
.toma .mas{margin-top:auto;font-weight:600;color:var(--azul-txt);font-size:.95rem}
@media (max-width:1060px){.red{grid-template-columns:repeat(2,1fr);padding-top:0;padding-left:40px}.red::before{top:0;bottom:0;left:0;right:auto;width:var(--tubo);height:auto}.red::after{top:-10px;left:-7px}.toma::before{top:34px;left:-40px;width:40px;height:var(--tubo)}.toma::after{top:28px;left:-30px;width:12px;height:19px}}
@media (max-width:620px){.red{grid-template-columns:1fr}}

/* ── alquiler (banda) ── */
.alquiler{background:var(--marino);color:#dce7f2;position:relative;overflow:hidden}
.alquiler .cont{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
.alquiler h2{color:#fff}
.alquiler ul{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:10px}
.alquiler li{position:relative;padding-left:30px}
.alquiler li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:var(--tubo);background:var(--naranja);border-radius:2px}
.alquiler figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.alquiler figure img{width:100%;height:100%;object-fit:cover}
.alquiler .acciones{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:860px){.alquiler .cont{grid-template-columns:1fr;gap:30px;padding-top:52px;padding-bottom:52px}}

/* ── rejillas de líneas de negocio ── */
.lineas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.linea-card{display:flex;flex-direction:column;border-top:var(--tubo) solid var(--marino);background:#fff;padding:24px 22px 22px;border-radius:0 0 var(--r) var(--r);text-decoration:none;color:var(--tinta)}
.sec-gris .linea-card{background:#fff}
.linea-card:hover{border-top-color:var(--azul);color:var(--tinta)}
.linea-card h3{margin-bottom:.35em}
.linea-card p{color:var(--gris);font-size:.98rem}
.linea-card ul{list-style:none;padding:0;margin:0 0 16px;font-size:.96rem}
.linea-card li{padding:6px 0;border-bottom:1px solid var(--acero)}
.linea-card li a{text-decoration:none;font-weight:500}
.linea-card .mas{margin-top:auto;font-weight:600;color:var(--azul-txt)}
@media (max-width:900px){.lineas{grid-template-columns:1fr}}

.bodega{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.bodega figure{margin:0;border-radius:var(--r);overflow:hidden}
.bodega-lista{display:grid;gap:0;margin:22px 0 26px;border-top:1px solid var(--linea)}
.bodega-lista a{display:grid;grid-template-columns:1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta)}
.bodega-lista a b{font-family:var(--tit);font-size:1.35rem;color:var(--marino);font-weight:600;display:block}
.bodega-lista a span{color:var(--gris);font-size:.96rem}
.bodega-lista a:hover b{color:var(--azul)}
.bodega-lista a::after{content:"";width:9px;height:9px;border-top:2px solid var(--azul);border-right:2px solid var(--azul);transform:rotate(45deg);align-self:center}
@media (max-width:900px){.bodega{grid-template-columns:1fr;gap:28px}}

/* ── marcas ── */
.marcas{display:grid;gap:34px}
.marcas-grupo{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;padding-top:22px;border-top:1px solid var(--linea)}
.marcas-grupo h3{font-size:1.3rem}
.marcas-grupo p{font-size:.94rem;color:var(--gris);margin:0}
.logos{display:flex;flex-wrap:wrap;gap:10px}
.logos span{display:flex;align-items:center;justify-content:center;width:132px;height:64px;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:10px}
.logos img{max-height:40px;width:auto;filter:grayscale(1);opacity:.78;transition:filter .2s,opacity .2s}
.logos span:hover img{filter:none;opacity:1}
@media (max-width:760px){.marcas-grupo{grid-template-columns:1fr;gap:12px}.logos span{width:calc(33.3% - 7px)}}

/* ── historia / nosotros ── */
.historia{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.historia figure{margin:0;border-radius:var(--r);overflow:hidden}
.anio{font-family:var(--tit);font-weight:700;font-size:clamp(4.5rem,11vw,8rem);line-height:.85;color:var(--azul);letter-spacing:-.02em;margin-bottom:10px}
@media (max-width:860px){.historia{grid-template-columns:1fr;gap:28px}}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.galeria figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--acero)}
.galeria figure.ancha{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.galeria img{width:100%;height:100%;object-fit:cover}
.galeria figcaption{font-size:.85rem;color:var(--gris);padding:6px 2px}
@media (max-width:760px){.galeria{grid-template-columns:repeat(2,1fr)}}
.generaciones{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:0}
.generaciones li{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--linea)}
.generaciones li b{font-family:var(--tit);font-size:1.4rem;color:var(--marino);font-weight:600}

.resenas{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:start}
.resena{margin:0;background:#fff;border-left:var(--tubo) solid var(--azul);padding:22px 24px;border-radius:0 var(--r) var(--r) 0}
.resena blockquote{margin:0 0 12px;font-size:1.06rem}
.resena figcaption{font-size:.92rem;color:var(--gris)}
@media (max-width:760px){.resenas{grid-template-columns:1fr}}

/* ── servicio: cuerpo + lateral ── */
.con-lateral{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.lateral{position:sticky;top:100px;display:grid;gap:18px}
.caja-contacto{background:var(--marino);color:#dce7f2;padding:24px;border-radius:var(--r)}
.caja-contacto h3{color:#fff;font-size:1.45rem}
.caja-contacto p{font-size:.96rem}
.caja-contacto .btn{width:100%;justify-content:center;margin-top:8px}
.caja-seccion{border:1px solid var(--linea);border-top:var(--tubo) solid var(--azul);padding:16px 18px;border-radius:0 0 var(--r) var(--r)}
.caja-seccion h3{font-size:1.2rem;margin-bottom:.4em}
.caja-seccion ul{list-style:none;padding:0;margin:0}
.caja-seccion li a{display:block;padding:8px 0;border-bottom:1px solid var(--acero);text-decoration:none;font-weight:500;color:var(--tinta)}
.caja-seccion li a[aria-current]{color:var(--azul);font-weight:700}
@media (max-width:980px){.con-lateral{grid-template-columns:1fr;gap:36px}.lateral{position:static}}
.prosa{max-width:760px}
.prosa h2{margin-top:1.6em}
.prosa h2:first-child{margin-top:0}
.prosa h3{margin-top:1.2em}
.prosa ul,.prosa ol{padding-left:1.2em}
.prosa li{margin-bottom:.4em}
.check{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px;margin:0 0 1.4em}
.check li{position:relative;padding-left:30px;margin:0}
.check li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--azul-claro)}
.check li::after{content:"";position:absolute;left:6px;top:.55em;width:5px;height:9px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg)}
@media (max-width:620px){.check{grid-template-columns:1fr}}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:0 0 1.6em;counter-reset:paso}
.paso{border-top:var(--tubo) solid var(--azul);background:var(--acero);padding:18px 18px 16px;border-radius:0 0 var(--r) var(--r)}
.paso h3{font-size:1.25rem;margin-top:0}
.paso p{margin:0;font-size:.97rem;color:var(--gris)}
.faq{border-top:1px solid var(--linea);margin-bottom:1.6em}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:600;font-size:1.06rem;position:relative;color:var(--marino)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:22px;width:10px;height:10px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.faq details>div{padding:0 0 16px;color:var(--gris)}
.foto-cuerpo{margin:0 0 1.6em;border-radius:var(--r);overflow:hidden}
.foto-cuerpo figcaption{font-size:.88rem;color:var(--gris);padding:8px 2px 0}
.fotos-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 1.6em}
.fotos-2 figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.fotos-2 img{width:100%;height:100%;object-fit:cover}

/* ── tarjetas de artículos ── */
.articulos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.art{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta)}
.art figure{margin:0 0 14px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);background:var(--acero)}
.art figure img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.art:hover figure img{transform:scale(1.03)}
.art h3{font-size:1.35rem;margin-bottom:.35em}
.art:hover h3{color:var(--azul)}
.art p{font-size:.96rem;color:var(--gris);margin:0}
.art .fecha{font-size:.88rem;color:var(--gris);margin-bottom:6px}
@media (max-width:900px){.articulos{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.articulos{grid-template-columns:1fr}}

/* ── artículo ── */
.art-cab{padding:40px 0 10px}
.art-cuerpo{padding:10px 0 60px}
.art-meta{color:var(--gris);font-size:.95rem;margin-bottom:18px}
.relacionados{border-top:var(--tubo) solid var(--azul);background:var(--acero);padding:22px 24px;border-radius:0 0 var(--r) var(--r);margin:30px 0}
.relacionados h2{font-size:1.5rem;margin-top:0}
.relacionados ul{margin:0;padding-left:1.1em}

/* ── contacto (pie) ── */
.pie-contacto{background:var(--acero);padding:80px 0;border-top:1px solid var(--linea)}
.pie-contacto .cont{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.datos{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.datos li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.datos .ico{width:40px;height:40px;border-radius:50%;background:var(--marino);color:#fff;display:flex;align-items:center;justify-content:center}
.datos .ico svg{width:19px;height:19px}
.datos b{font-weight:600}
.datos a{text-decoration:none;color:var(--marino)}
.datos small{color:var(--gris);font-size:.9rem}
@media (max-width:900px){.pie-contacto .cont{grid-template-columns:1fr;gap:30px}.pie-contacto{padding:56px 0}}
.form{background:#fff;border:1px solid var(--linea);border-top:var(--tubo) solid var(--naranja);border-radius:0 0 var(--r) var(--r);padding:28px;display:grid;gap:14px}
.form h3{margin:0}
.form .fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:5px;font-weight:600;font-size:.95rem;color:var(--marino)}
.form input,.form select,.form textarea{font:inherit;font-weight:400;font-size:1rem;color:var(--tinta);padding:.7em .8em;border:1px solid #b9c4cf;border-radius:var(--r);background:#fff;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--azul);outline:2px solid var(--azul-claro)}
.form .legal{display:flex;gap:10px;font-weight:400;font-size:.86rem;color:var(--gris);align-items:flex-start}
.form .legal input{width:auto;margin-top:3px}
.form .nota{font-size:.88rem;color:var(--gris);margin:0}
.form .respuesta .ok{background:#e7f5ea;border-left:4px solid #2e8b4a;padding:12px 14px;color:#1d5a30}
.form .respuesta .error{background:#fdecea;border-left:4px solid #c0392b;padding:12px 14px;color:#8e2519}
@media (max-width:620px){.form .fila{grid-template-columns:1fr}.form{padding:20px}}

/* ── pie ── */
.pie{background:var(--marino);color:#b9cadd;font-size:.95rem;padding:60px 0 0}
.pie .cont{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.pie h4{color:#fff;font-size:1.2rem;margin-bottom:.7em}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.pie a{color:#dce7f2;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie .logo-pie{background:#fff;display:inline-block;padding:10px 14px;border-radius:var(--r);margin-bottom:14px}
.pie .logo-pie img{width:150px}
.pie .redes{display:flex;gap:10px;margin-top:14px}
.pie .redes a{width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center}
.pie .redes svg{width:17px;height:17px;fill:#fff}
.pie-bajo{display:flex!important;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.15);margin-top:44px;padding-top:18px!important;padding-bottom:22px;font-size:.88rem}
@media (max-width:900px){.pie .cont{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie .cont{grid-template-columns:1fr}}

/* ── móvil: barra fija de contacto, WhatsApp flotante, cookies ── */
.barra-movil{display:none}
@media (max-width:760px){
  .barra-movil{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--linea);box-shadow:0 -6px 20px rgba(0,36,88,.1)}
  .barra-movil a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 10px;font-size:.8rem;font-weight:600;text-decoration:none;color:var(--marino)}
  .barra-movil a svg{width:21px;height:21px}
  .barra-movil a.pres{background:var(--naranja);color:var(--marino)}
  body{padding-bottom:64px}
  /* 01-10-2026 (Tato): «la bola de WhatsApp no sale en móvil». Sale como en ER y PSF (y como JoinChat en el WordPress): encima de la
     barra fija; en las landings de Ads, que no llevan barra, abajo del todo */
  .wa{bottom:78px;left:14px;width:52px;height:52px}
  .landing .wa{bottom:16px}
}
.wa{position:fixed;left:20px;bottom:20px;z-index:44;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.wa svg{width:30px;height:30px;fill:#fff}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;justify-content:center}
.cookies[hidden]{display:none}
.cookies-caja{max-width:760px;background:#fff;border:1px solid var(--linea);border-top:var(--tubo) solid var(--marino);box-shadow:0 18px 40px rgba(0,36,88,.2);padding:18px 20px;display:flex;gap:18px;align-items:center;border-radius:0 0 var(--r) var(--r)}
.cookies-caja p{margin:0;font-size:.92rem}
.cookies-btn{display:flex;gap:8px;flex:none}
.cookies-btn .btn{padding:.6em 1em}
@media (max-width:640px){.cookies{bottom:74px}.cookies-caja{flex-direction:column;align-items:stretch}}
.staging{position:fixed;right:10px;bottom:84px;z-index:99;background:#c0392b;color:#fff;font:600 12px/1 var(--txt);padding:6px 9px;border-radius:3px;pointer-events:none;opacity:.85}

/* ── contenido heredado con clases .joh- (artículos y landings): se integra en la marca nueva ── */
.joh-post{--bg:#fff;--card:#fff;--text:var(--tinta);--muted:var(--gris);--line:var(--linea);--accent:var(--naranja);--accent-dark:var(--marino);--accent-blue:var(--azul);--accent-soft:#fff3e6;--industrial:var(--acero);font-family:var(--txt)}
.joh-post h1,.joh-post h2,.joh-post h3{font-family:var(--tit)}

/* landings: el formulario nuevo dentro de la caja .joh-cta heredada */
.landing .joh-cta .form{border-top-color:var(--naranja);padding:20px;gap:10px;margin:14px 0}
.landing .joh-cta .form label{color:var(--marino);font-size:.9rem}
.landing .joh-cta .form .legal,.landing .joh-cta .form .legal span{color:var(--gris)}
.landing .joh-cta .form .legal a{color:var(--azul)}
.landing .joh-cta .joh-small a{color:#fff;font-weight:600}
.landing .barra-movil{display:none}
@media (max-width:760px){.landing{padding-bottom:0}}
/* rejilla de 2 para las páginas de sección con 4 tarjetas */
.lineas.dos{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.lineas.dos{grid-template-columns:1fr}}
/* enlaces secundarios de la barra superior (escritorio); en móvil van dentro del menú */
.barra-sup nav{display:flex;gap:18px}
.barra-sup nav a{font-weight:500;color:#dce7f2}
.barra-sup nav a:hover,.barra-sup nav a[aria-current]{color:#fff;text-decoration:underline}
.nav .solo-movil{display:none}
@media (max-width:1060px){.nav .solo-movil{display:list-item}.barra-sup nav{display:none}}
/* contenido heredado (.joh-): mismas esquinas y fondo que la marca nueva */
.joh-post .joh-hero{background:var(--marino);border-radius:var(--r);box-shadow:none;border-left:var(--tubo) solid var(--naranja)}
.joh-post .joh-card,.joh-post .joh-service,.joh-post .joh-note,.joh-post .joh-table-wrap,.joh-post .joh-faq,.joh-post .joh-cta,.joh-post .joh-cabecera-foto,.joh-post .joh-galeria img{border-radius:var(--r)}
.joh-post .joh-cta{background:var(--marino)}
.joh-post .joh-btn{border-radius:var(--r)}
@media (max-width:1060px){.barra-sup{display:none}}
@media (max-width:620px){
  .toma{flex-direction:row}
  .toma figure{flex:0 0 112px;aspect-ratio:auto;min-height:100%}
  .toma div{padding:14px 14px 14px}
  .toma h3{font-size:1.25rem}
  .toma p{font-size:.92rem;margin-bottom:8px}
  .toma::before{top:30px}.toma::after{top:24px}
  .red{gap:14px}
}
.pie-bajo a{text-decoration:underline}
.joh-post .joh-btn{color:var(--marino)}
.joh-post .joh-cta a:not(.joh-btn),.joh-post .joh-hero a:not(.joh-btn){color:#fff}
.joh-table-wrap{overflow-x:auto}
/* tarjetas de las landings y artículos (.joh-card con foto): todas las fotos a la misma proporción y aire alrededor (28-09, Tato) */
.joh-post .joh-grid{gap:22px}
.joh-post .joh-grid .joh-card{display:flex;flex-direction:column;padding:18px 18px 20px;margin-bottom:0}
.joh-post .joh-card > img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:var(--r);margin:0 0 16px;display:block}
.joh-post .joh-card .joh-badge{align-self:flex-start;margin:0 0 12px}
.joh-post .joh-card > p{margin:0}
/* bloque de contacto: foto real + razones (28-09, Tato: «me falta valor añadido o foto en esa parte») */
.pie-foto{margin:22px 0 0;border-radius:var(--r);overflow:hidden;background:#dfe6ec}
.pie-foto img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pie-foto figcaption{font-size:.86rem;color:var(--gris);padding:8px 2px 0;background:var(--acero)}
.razones{list-style:none;padding:0;margin:22px 0 4px;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.razones li{border-top:var(--tubo) solid var(--azul);padding-top:10px}
.razones b{display:block;font-family:var(--tit);font-size:1.25rem;font-weight:600;color:var(--marino);line-height:1.15;margin-bottom:3px}
.razones span{font-size:.93rem;color:var(--gris);line-height:1.45;display:block}
.pie-contacto .datos{grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:26px;padding-top:22px;border-top:1px solid var(--linea)}
.pie-contacto .form{position:sticky;top:100px}
@media (max-width:900px){.pie-contacto .form{position:static}}
@media (max-width:560px){.razones,.pie-contacto .datos{grid-template-columns:1fr}}
.datos small{line-height:1.4;display:inline-block;margin-top:2px}
@media (max-width:900px){
  .pie-contacto .cont>div:first-child{display:contents}
  .pie-contacto h2{order:1;margin-bottom:0}.pie-contacto .cont>div:first-child>p{order:2;margin:0}
  .pie-contacto .form{order:3}
  .pie-contacto .pie-foto{order:4;margin:0}.pie-contacto .razones{order:5;margin:0}.pie-contacto .datos{order:6;margin:0}
  .pie-contacto .cont{gap:18px}
}
/* portada: los 9 servicios con sus iconos de línea (de la web anterior) */
.iconos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linea);border-left:1px solid var(--linea)}
.icono-serv{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;padding:22px 22px 22px 16px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta);background:#fff;transition:background .15s}
.icono-serv:hover{background:var(--acero);color:var(--tinta)}
.icono-serv img{width:120px;height:auto;mix-blend-mode:multiply}
.icono-serv h3{font-size:1.3rem;margin:0 0 .25em}
.icono-serv p{font-size:.93rem;color:var(--gris);margin:0 0 8px;line-height:1.45}
.icono-serv .mas{font-weight:600;color:var(--azul-txt);font-size:.92rem}
@media (max-width:1000px){.iconos{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.iconos{grid-template-columns:1fr}.icono-serv{grid-template-columns:96px 1fr;padding:16px 14px}.icono-serv img{width:96px}}

/* 29-09-2026: URL de la bibliografía y correos largos ensanchaban la página en móvil */
body{overflow-wrap:break-word}

/* ── 29-09-2026 (Tato) ── carrusel de fotos: portada «Socio técnico de bodegas» y cabecera de aire comprimido */
.carrusel{position:relative;border-radius:var(--r);overflow:hidden;background:#dfe6ec;min-width:0}
.carrusel-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/3;overscroll-behavior-x:contain}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel .carrusel-foto{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always;border-radius:0;aspect-ratio:auto;height:100%}
.carrusel .carrusel-foto img{width:100%;height:100%;object-fit:cover}
.carrusel-btn{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,36,88,.25);cursor:pointer;transition:background .15s,opacity .15s;opacity:.85}
.carrusel-btn::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-top:3px solid var(--marino);border-right:3px solid var(--marino)}
.carrusel-btn.ant{left:12px}.carrusel-btn.ant::before{transform:translate(-30%,-50%) rotate(-135deg)}
.carrusel-btn.sig{right:12px}.carrusel-btn.sig::before{transform:translate(-70%,-50%) rotate(45deg)}
.carrusel-btn:hover{background:#fff;opacity:1}
.carrusel-puntos{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:4px}
.carrusel-puntos button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.carrusel-puntos button::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(0,36,88,.35);transition:background .15s,transform .15s}
.carrusel-puntos button[aria-current=true]::before{background:var(--naranja);transform:scale(1.25)}
@media (max-width:620px){.carrusel-btn{width:38px;height:38px;margin-top:-19px}}

/* /bodegas/: tarjetas de «Lo que hacemos en bodega» con foto */
.linea-card.con-foto{padding:0;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.linea-card.con-foto figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--acero)}
.linea-card.con-foto figure img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.linea-card .linea-txt{display:flex;flex-direction:column;flex:1;padding:22px 22px 22px}
.linea-card.con-foto:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(0,36,88,.45)}
.linea-card.con-foto:hover figure img{transform:scale(1.04)}

/* aire comprimido: «Todo el ciclo del aire comprimido» — que los pasos parezcan lo que son, enlaces */
a.paso{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta);transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
a.paso h3{transition:color .18s}
a.paso .mas{margin-top:auto;padding-top:12px;font-weight:600;font-size:.95rem;color:var(--azul-txt)}
a.paso .mas::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);vertical-align:.1em;transition:transform .18s}
a.paso:hover,a.paso:focus-visible{background:#fff;border-top-color:var(--naranja);box-shadow:0 12px 26px -14px rgba(0,36,88,.45);transform:translateY(-3px);color:var(--tinta)}
a.paso:hover h3,a.paso:focus-visible h3{color:var(--azul)}
a.paso:hover .mas::after{transform:translateX(4px) rotate(45deg)}

/* ── 29-09-2026 (Tato: «falta dinamismo, cuidar los hovers, carruseles en las imágenes estáticas») ── */
/* portada: el fondo del hero pasa solo entre cuatro fotos propias, con fundido y un zoom muy lento */
.hero-foto img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero-foto img.activa{opacity:1;animation:hero-zoom 12s ease-out both}
@keyframes hero-zoom{from{transform:scale(1.07)}to{transform:scale(1)}}
/* carrusel de producto (Bag in Box): la máquina entera, sin recortar, sobre blanco */
.carrusel.producto,.carrusel.producto .carrusel-foto{background:#fff}
.carrusel.producto .carrusel-foto img{object-fit:contain;padding:14px}

/* botones: se levantan un poco */
.btn{transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(0,36,88,.6)}
.btn:active{transform:none;box-shadow:none}
/* flecha de «Ver …» que avanza al pasar por encima (tarjetas de la portada, hubs, iconos) */
.toma .mas::after,.icono-serv .mas::after,.linea-card .mas::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);vertical-align:.1em;transition:transform .18s}
.toma:hover .mas::after,.icono-serv:hover .mas::after,.linea-card:hover .mas::after{transform:translateX(4px) rotate(45deg)}
/* tomas de la red de aire (portada) */
.toma{transition:border-color .18s,transform .18s,box-shadow .18s}
.toma:hover{transform:translateY(-4px);box-shadow:0 14px 28px -16px rgba(0,36,88,.5)}
.toma figure img{transition:transform .45s ease}
.toma:hover figure img{transform:scale(1.06)}
.toma:hover h3{color:var(--azul)}
.toma h3{transition:color .18s}
/* iconos de servicios (portada) */
.icono-serv{transition:background .2s}
.icono-serv img{transition:transform .3s ease}
.icono-serv:hover img{transform:scale(1.07)}
.icono-serv h3{transition:color .2s}
.icono-serv:hover h3{color:var(--azul)}
/* tarjetas de los hubs sin foto */
.linea-card{transition:border-color .18s,transform .18s,box-shadow .18s}
.linea-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(0,36,88,.45)}
.linea-card h3{transition:color .18s}
.linea-card:hover h3{color:var(--azul)}
/* artículos */
.art{transition:transform .2s}
.art:hover{transform:translateY(-3px)}
.art figure{transition:box-shadow .2s}
.art:hover figure{box-shadow:0 14px 28px -16px rgba(0,36,88,.55)}
.art:hover figure img{transform:scale(1.05)}
.art h3{transition:color .18s}
/* lista de bodega (portada) y menú lateral de sección */
.bodega-lista a{transition:padding .2s,background .2s}
.bodega-lista a:hover{padding-left:12px;padding-right:6px;background:linear-gradient(90deg,var(--azul-claro),transparent)}
.bodega-lista a::after{transition:transform .2s}
.bodega-lista a:hover::after{transform:translateX(4px) rotate(45deg)}
.caja-seccion li a{transition:color .15s,padding .15s}
.caja-seccion li a:hover{color:var(--azul);padding-left:6px}
/* menú de arriba: raya que crece debajo */
.nav>ul>li>a,.nav>ul>li>details>summary{position:relative}
.nav>ul>li:not(.destacado)>a::before,.nav>ul>li>details>summary::before{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav>ul>li:not(.destacado)>a:hover::before,.nav>ul>li>details>summary:hover::before,.nav>ul>li.activa>a::before,.nav>ul>li.activa>details>summary::before{transform:scaleX(1)}
.nav details>div a{transition:background .15s,padding .15s}
.nav details>div a:hover{padding-left:16px}
/* galerías: la foto se acerca */
.galeria figure img,.fotos-2 figure img{transition:transform .45s ease}
.galeria figure:hover img,.fotos-2 figure:hover img{transform:scale(1.05)}
.fotos-2 figure{overflow:hidden}
.joh-galeria figure{overflow:hidden;border-radius:14px}
.joh-galeria img{transition:transform .45s ease}
.joh-galeria figure:hover img{transform:scale(1.05)}
.joh-service{transition:transform .2s,box-shadow .2s}
.joh-service:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(23,50,71,.45)}
.logos span img{transition:filter .2s,opacity .2s,transform .2s}
.logos span:hover img{transform:scale(1.06)}

/* aparecer al hacer scroll (solo lo que está por debajo al cargar; joh.js pone .revela y .visto) */
.revela{opacity:0}
.revela.visto{animation:sube .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes sube{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.revela{opacity:1}}

/* 29-09-2026: nota de la ficha de Google junto a las reseñas (portada y Nosotros) */
.nota-google{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:4px}
.nota-num{font-family:var(--tit);font-size:2.6rem;font-weight:700;color:var(--marino);line-height:1}
.estrellas{position:relative;display:inline-block;font-size:1.4rem;line-height:1;letter-spacing:3px;color:#c5ced8}
.estrellas::before{content:"★★★★★"}
.estrellas span{position:absolute;top:0;left:0;bottom:0;width:var(--pct);overflow:hidden;white-space:nowrap;color:#f5a623}
.estrellas span::before{content:"★★★★★"}
.nota-total{color:var(--gris);font-size:1.02rem}
.nota-total b{color:var(--tinta)}
.nota-enlaces{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:4px}
.nota-enlaces a{font-weight:600;text-decoration:none;color:var(--azul-txt);border-bottom:2px solid transparent;transition:border-color .15s,color .15s}
.nota-enlaces a:hover{color:var(--marino);border-bottom-color:var(--naranja)}

/* ── 29-09-2026 PRUEBA (Tato): la red de aire de la portada se dibuja al hacer scroll (joh.js pone .anima y las variables) ──
   --c: colector 0→1 · --b: bajante de cada toma · --v: pieza/válvula visible. Sin JS o con «reducir movimiento», se ve completa. */
.red-viva .pieza{position:absolute;z-index:1;pointer-events:none}
.red-viva.anima::before{transform:scaleX(var(--c,1));transform-origin:left center}
.red-viva.anima .toma::before{transform:scaleY(var(--b,1));transform-origin:center top}
.red-viva.anima .toma::after{opacity:var(--v,1);transform:scale(calc(.3 + .7 * var(--v,1)))}
.red-viva.anima .toma{opacity:0;translate:0 12px;transition:opacity .6s ease,translate .6s ease,border-color .18s,transform .18s,box-shadow .18s}
.red-viva.anima .toma.conectada{opacity:1;translate:0 0}
.red-viva.anima .pieza{opacity:var(--v,1);scale:calc(.5 + .5 * var(--v,1))}
/* el aire pasando: un brillo suave que recorre el colector cuando está lleno */
.red-viva.llena::before{background:linear-gradient(90deg,var(--azul) 0 42%,#7cc4ee 50%,var(--azul) 58% 100%) 0 0/300% 100%;animation:aire 4.5s linear infinite}
@keyframes aire{from{background-position:100% 0}to{background-position:0 0}}
/* manómetro al principio del colector: la aguja sube con --c */
.manometro{left:4px;top:-58px;width:46px;height:46px;border-radius:50%;border:3px solid var(--marino);background:radial-gradient(circle,#fff 0 56%,transparent 57%),repeating-conic-gradient(from 225deg,var(--marino) 0 2deg,transparent 2deg 27deg),#fff}
.manometro::before{content:"";position:absolute;left:50%;top:100%;width:7px;height:12px;margin:3px 0 0 -3.5px;background:var(--marino)}
.manometro::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--marino)}
.manometro i{position:absolute;left:50%;top:calc(50% - 15px);width:2px;height:15px;margin-left:-1px;background:var(--naranja);border-radius:2px;transform-origin:50% 100%;transform:rotate(calc(-125deg + var(--c,1) * 205deg))}
/* filtro colgando del colector entre la 1.ª y la 2.ª toma */
.filtro{left:calc(20% - 15px);top:var(--tubo);width:16px;height:34px;transform-origin:center top}
.filtro::before{content:"";position:absolute;left:3px;top:0;width:10px;height:6px;background:var(--marino)}
.filtro::after{content:"";position:absolute;left:0;top:6px;width:16px;height:26px;border-radius:3px 3px 8px 8px;background:linear-gradient(180deg,var(--marino) 0 5px,#fff 5px 100%);border:2px solid var(--marino)}
/* válvula de corte (mariposa) en el colector */
.valvula{left:calc(60% - 12px);top:-6px;width:24px;height:19px;background:var(--marino);clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,50% 58%,0 100%)}
/* tapón al final */
.tapon{right:-28px;top:-4px;width:9px;height:15px;background:var(--marino);border-radius:2px}
@media (max-width:1060px){
  .red-viva .pieza{display:none}
  .red-viva.anima::before{transform:scaleY(var(--c,1));transform-origin:center top}
  .red-viva.anima .toma::before{transform:scaleX(var(--b,1));transform-origin:left center}
  .red-viva.llena::before{background:linear-gradient(180deg,var(--azul) 0 42%,#7cc4ee 50%,var(--azul) 58% 100%) 0 0/100% 300%;animation-name:aire-v}
  @keyframes aire-v{from{background-position:0 100%}to{background-position:0 0}}
}
/* hueco para el manómetro encima del colector (no pisa la entradilla) */
.red-viva{margin-top:76px}   /* los márgenes se juntan con los 40 px de .sec-cab: manda el mayor */
@media (max-width:1060px){.red-viva{margin-top:0}}
/* la flecha de «Ver …» va pegada al texto aunque este parta en dos líneas */
.toma .mas,.icono-serv .mas,.linea-card .mas,a.paso .mas{display:inline-flex;align-items:center;gap:8px}
.toma .mas::after,.icono-serv .mas::after,.linea-card .mas::after,a.paso .mas::after{margin-left:0;flex:none}

/* ════ SISTEMA GRÁFICO APLICADO A LA WEB (29-09-2026, Tato: «aplica el design system») ════
   Piezas del sistema de /prueba-diseno/ (mismos nombres sg-*): se dibujan al llegar a la pantalla (joh.js pone .en-vista a
   [data-anima]). Sin JS o con «reducir movimiento», todo aparece ya dibujado. */
.sg-dib{stroke-dasharray:1;stroke-dashoffset:1}
.en-vista .sg-dib{animation:sg-dibuja .5s ease-out forwards;animation-delay:calc(var(--i) * .2s)}
.en-vista .sg-dib-larga{animation-duration:.9s}
@keyframes sg-dibuja{to{stroke-dashoffset:0}}
@keyframes sg-redibuja{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* ojo: nada de [pathLength] en los selectores: Chrome no recalcula el estilo de ese atributo (mayúsculas en SVG) al cambiar una clase del contenedor, y la animación no arranca */
.sg-ico > :not([stroke-dasharray]){stroke-dasharray:1;stroke-dashoffset:0}

/* cabeceras de página: fondo de plano muy tenue */
.cab-pag{background-image:linear-gradient(rgba(0,119,185,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,119,185,.06) 1px,transparent 1px);background-size:24px 24px}

/* Auditoría: cabecera con el esquema de una red y dos fugas */
.cab-esquema{min-width:0}
.sg-mini{width:100%;height:auto;overflow:visible;display:block}
.sg-mini-piezas{fill:var(--marino);opacity:0;transition:opacity .5s 1.8s}
.en-vista .sg-mini-piezas{opacity:1}
.sg-fuga{opacity:0;transition:opacity .4s 2.1s}
.en-vista .sg-fuga{opacity:1}
.sg-fuga circle{fill:var(--naranja)}
.sg-fuga .sg-onda{fill:none;stroke:var(--naranja);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.en-vista .sg-onda{animation:sg-onda 2s ease-out infinite 2.3s}
.en-vista .sg-onda2{animation-delay:3.3s}
@keyframes sg-onda{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
.sg-fuga text{font-family:var(--txt);font-size:15px;font-weight:600;fill:var(--naranja-osc);text-anchor:middle}

/* Latiguillos: panel con el símbolo grande en vez de una foto que no es de latiguillos */
.cab-simbolo{position:relative;aspect-ratio:4/3;background:#fff;border:1.5px solid var(--marino);border-radius:var(--r);display:grid;place-items:center;overflow:hidden;background-image:linear-gradient(rgba(0,119,185,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,119,185,.07) 1px,transparent 1px);background-size:24px 24px}
.cab-simbolo{padding-top:62px}
@media (max-width:560px){.cab-simbolo{padding-top:100px}.cab-simbolo .sg-ico{width:36%}}
.cab-simbolo .sg-ico{width:42%;height:auto;color:var(--azul);stroke-width:1.6}
.cab-simbolo .sg-ico > :not([stroke-dasharray]){stroke-dashoffset:1}
.cab-simbolo.en-vista .sg-ico > :not([stroke-dasharray]){animation:sg-dibuja 1.4s ease-out forwards}
.cab-simbolo .etiquetas{position:absolute;left:16px;top:16px;right:16px;display:flex;flex-wrap:wrap;gap:8px}
.etq-tubo{display:inline-block;background:var(--azul);color:#fff;font-weight:600;font-size:.9rem;padding:7px 26px 7px 12px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.etq-tubo:nth-child(2n){background:var(--marino)}

/* «¿Qué incluye…?» de los servicios: cada punto cuelga del colector (una fila = un colector) */
.sg-incluye{list-style:none;margin:10px 0 1.8em;padding:34px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 20px}
.sg-incluye li{position:relative;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:16px 16px 16px 14px;font-size:.98rem;line-height:1.45;margin:0;transition:border-color .18s,transform .18s,box-shadow .18s}
.sg-incluye li::before{content:"";position:absolute;top:-34px;left:-10px;right:-10px;height:7px;background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform .45s linear;transition-delay:calc(var(--i) * .12s)}
.sg-incluye li:nth-child(2n+1)::before{left:0}.sg-incluye li:nth-child(2n)::before{right:0}
.sg-incluye li::after{content:"";position:absolute;top:-28px;left:30px;width:7px;height:28px;background:var(--azul);transform:scaleY(0);transform-origin:top;transition:transform .3s ease;transition-delay:calc(.35s + var(--i) * .12s)}
.en-vista.sg-incluye li::before{transform:scaleX(1)}
.en-vista.sg-incluye li::after{transform:scaleY(1)}
.sg-incluye .sg-ico{flex:none;width:38px;height:38px;color:var(--azul)}
.sg-incluye li:hover{border-color:var(--azul);transform:translateY(-3px);box-shadow:0 12px 24px -16px rgba(0,36,88,.5)}
.sg-incluye li:hover .sg-ico > :not([stroke-dasharray]){animation:sg-redibuja .7s ease-out}
@media (max-width:560px){.sg-incluye{grid-template-columns:1fr}.sg-incluye li::before{left:0!important;right:0!important}}

/* Portada: lo que incluye el alquiler, repartido por un colector vertical con su válvula */
.sg-alq-red{position:relative;padding-left:64px;margin:6px 0 30px}
.sg-alq-red::before{content:"";position:absolute;left:20px;top:46px;bottom:26px;width:7px;background:#2d9ad8;transform:scaleY(0);transform-origin:top;transition:transform .9s ease}
.sg-alq-red.en-vista::before{transform:scaleY(1)}
.sg-alq-mano{position:absolute;left:0;top:0;width:47px;height:47px;border-radius:50%;background:conic-gradient(from 210deg,#2d9ad8 0 160deg,var(--naranja) 160deg 230deg,transparent 230deg);box-shadow:inset 0 0 0 6px var(--marino),0 0 0 2px #cfe3f3}
.sg-alq-mano i{position:absolute;left:50%;top:50%;width:3px;height:18px;margin:-18px 0 0 -1.5px;background:#fff;border-radius:2px;transform-origin:50% 100%;transform:rotate(-100deg);transition:transform 1.2s cubic-bezier(.3,1.5,.5,1) .3s}
.sg-alq-red.en-vista .sg-alq-mano i{transform:rotate(130deg)}
.sg-alq-red ul{list-style:none;margin:0;padding:58px 0 0;display:grid;gap:12px}
.sg-alq-red li{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);padding:13px 16px;color:#fff;font-weight:500;opacity:0;translate:-14px 0;transition:opacity .5s,translate .5s,background .2s;transition-delay:calc(.5s + var(--i) * .18s)}
.sg-alq-red li::before{content:"";position:absolute;left:-38px;top:50%;width:38px;height:7px;margin-top:-3.5px;background:#2d9ad8;border-radius:0}
.sg-alq-valv{position:absolute;left:-28px;top:50%;width:17px;height:14px;margin-top:-7px;background:#cfe3f3;clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,50% 58%,0 100%)}
.sg-alq-red.en-vista li{opacity:1;translate:0 0}
.sg-alq-red li:hover{background:rgba(255,255,255,.13);transition-delay:0s}

/* Placa de características */
.sg-placa{position:relative;background:linear-gradient(160deg,#dfe6ec,#c9d3dc);border:2px solid #9fb0c0;border-radius:6px;padding:26px 30px 22px;box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff;color:#1f3350;margin-top:28px;max-width:560px}
.sg-placa>i{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#8a9bab 60%);box-shadow:0 0 0 1px #7d8e9e}
.sg-placa>i:nth-child(1){left:10px;top:10px}.sg-placa>i:nth-child(2){right:10px;top:10px}.sg-placa>i:nth-child(3){left:10px;bottom:10px}.sg-placa>i:nth-child(4){right:10px;bottom:10px}
.sg-placa-cab{font-family:var(--tit);font-weight:700;font-size:1.45rem;color:var(--marino);padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid #9fb0c0}
.sg-placa dl{margin:0}
.sg-placa dl>div{display:grid;grid-template-columns:8.5em 1fr;gap:10px;padding:6px 0;border-bottom:1px solid rgba(31,51,80,.18);font-size:.95rem}
.sg-placa dl>div:last-child{border-bottom:0}
.sg-placa dt{font-weight:600}
.sg-placa dd{margin:0;font-family:var(--tit);font-size:1.12rem;font-weight:600;color:var(--marino)}

/* Codos de tubería en las esquinas de una foto o un carrusel */
.sg-codos{position:relative;margin:14px}
.sg-codos>i{position:absolute;z-index:2;width:44px;height:44px;border:7px solid var(--azul);pointer-events:none}
.sg-codos>i:nth-of-type(1){left:-14px;top:-14px;border-right:0;border-bottom:0;border-top-left-radius:18px}
.sg-codos>i:nth-of-type(2){right:-14px;top:-14px;border-left:0;border-bottom:0;border-top-right-radius:18px}
.sg-codos>i:nth-of-type(3){left:-14px;bottom:-14px;border-right:0;border-top:0;border-bottom-left-radius:18px}
.sg-codos>i:nth-of-type(4){right:-14px;bottom:-14px;border-left:0;border-top:0;border-bottom-right-radius:18px}
.historia .sg-codos .carrusel{border-radius:2px}

/* Línea de tiempo: el colector con sus derivaciones */
.sg-linea{position:relative;list-style:none;margin:64px 0 0;padding:40px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.sg-linea::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.6,0,.2,1)}
.sg-linea.en-vista::before{transform:scaleX(1)}
.sg-linea li{position:relative;padding-top:4px}
.sg-linea li::before{content:"";position:absolute;left:18px;top:-40px;width:7px;height:34px;background:var(--azul);transform:scaleY(0);transform-origin:top;transition:transform .5s ease;transition-delay:calc(1s + var(--n,0) * .25s)}
.sg-linea li::after{content:"";position:absolute;left:12px;top:-14px;width:19px;height:10px;background:var(--marino);border-radius:2px;opacity:0;transition:opacity .3s;transition-delay:calc(1.4s + var(--n,0) * .25s)}
.sg-linea li:nth-child(2){--n:1}.sg-linea li:nth-child(3){--n:2}.sg-linea li:nth-child(4){--n:3}
.sg-linea.en-vista li::before{transform:scaleY(1)}
.sg-linea.en-vista li::after{opacity:1}
.sg-linea b{display:block;font-family:var(--tit);font-size:1.7rem;color:var(--marino);line-height:1.1;margin:8px 0 4px}
.sg-linea span{font-size:.95rem;color:var(--gris)}
@media (max-width:900px){.sg-linea{grid-template-columns:1fr 1fr;row-gap:44px}}
@media (max-width:560px){.sg-linea{grid-template-columns:1fr}}

/* símbolo encima de las tarjetas sin foto (Nosotros) */
.linea-card .sg-ico{width:52px;height:52px;color:var(--azul);margin-bottom:14px}
.linea-card:hover .sg-ico > :not([stroke-dasharray]){animation:sg-redibuja .8s ease-out}

/* Contacto del pie (todas las páginas): la red entra por la izquierda y llega al formulario */
.pie-contacto{overflow-x:clip}
.pie-red{position:relative;height:34px;margin:-6px 0 18px}
.pie-red span{position:absolute;left:-100vw;right:-56px;top:13px;height:7px;background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform 1.5s cubic-bezier(.6,0,.2,1)}
.pie-red i{position:absolute;right:120px;top:7px;width:24px;height:19px;background:var(--marino);clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,50% 58%,0 100%);opacity:0;transition:opacity .3s 1s}
.pie-red em{position:absolute;right:52px;top:-26px;width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid var(--marino);opacity:0;transition:opacity .3s 1.15s}
.pie-red em::after{content:"";position:absolute;left:50%;top:100%;width:6px;height:6px;margin:1px 0 0 -3px;background:var(--marino)}
.pie-red em::before{content:"";position:absolute;left:50%;top:calc(50% - 12px);width:2px;height:12px;margin-left:-1px;background:var(--naranja);transform-origin:50% 100%;transform:rotate(-120deg);transition:transform 1.2s cubic-bezier(.3,1.5,.5,1) 1.3s}
.pie-red b{position:absolute;right:-62px;top:5px;width:12px;height:23px;background:var(--marino);border-radius:2px;opacity:0;transition:opacity .3s 1.4s}
.pie-red.en-vista span{transform:scaleX(1)}
.pie-red.en-vista i,.pie-red.en-vista em,.pie-red.en-vista b{opacity:1}
.pie-red.en-vista em::before{transform:rotate(60deg)}
@media (max-width:900px){.pie-red span{right:-24px}.pie-red b{display:none}.pie-red i{right:90px}.pie-red em{right:24px}}

@media (prefers-reduced-motion:reduce){
  .sg-dib{stroke-dasharray:none;stroke-dashoffset:0}
  .cab-simbolo .sg-ico > :not([stroke-dasharray]){stroke-dashoffset:0}
  .sg-mini-piezas,.sg-fuga,.sg-alq-red li,.pie-red i,.pie-red em,.pie-red b,.sg-linea li::after{opacity:1;translate:none}
  .sg-incluye li::before,.sg-incluye li::after,.sg-alq-red::before,.pie-red span,.sg-linea::before,.sg-linea li::before{transform:none}
}

/* ── 01-10-2026 (Tato): artículos con formulario a la derecha que acompaña al bajar, como las landings ── */
.art-con-form{padding-top:26px}
.art-con-form .art-cuerpo{padding:0 0 10px}
.art-con-form .art-col{min-width:0}   /* sin esto, en móvil una tabla de 760 px ensancha la rejilla (786 px a 390) */
.art-con-form .joh-post{max-width:none;padding:0 0 24px}
.lateral-form .joh-cta{margin-top:0;padding:22px;background:var(--marino);border-radius:var(--r)}   /* como .joh-post .joh-cta de las landings */
.lateral-form .joh-cta h2{font-size:1.25rem;margin:0 0 8px;line-height:1.25}
.lateral-form .joh-cta>p{margin:0 0 10px;font-size:.95rem}
.lateral-form .joh-cta .form{border-top-color:var(--naranja);padding:20px;gap:10px;margin:14px 0}
.lateral-form .joh-cta .form label{color:var(--marino);font-size:.9rem}
.lateral-form .joh-cta .form .legal,.lateral-form .joh-cta .form .legal span{color:var(--gris)}
.lateral-form .joh-cta .form .legal a{color:var(--azul)}
.lateral-form .joh-cta .joh-small{color:#e8eef3;margin:0}
.lateral-form .joh-cta .joh-small a{color:#fff;font-weight:600}
.art-portada{margin:0 0 24px}
.art-portada img{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:0 10px 30px rgb(23 50 71 / .10)}