/* =========================================================
   DIVALTEC — estilos del sitio
   Tipografía: Barlow Condensed (títulos) + Barlow (texto)
   ========================================================= */
:root{
  --marca:#0033A0;          /* azul del logo */
  --marca-2:#1E5FD6;
  --agua:#3EA8F2;           /* acento */
  --noche:#06142A;          /* fondos oscuros */
  --noche-2:#0B2346;
  --tinta:#13243A;          /* texto principal */
  --gris:#52667A;           /* texto secundario */
  --linea:#D9E4F1;
  --claro:#F3F7FC;
  --blanco:#fff;
  --ok:#2F7D32;
  --radio:14px;
  --radio-s:8px;
  --sombra:0 1px 2px rgba(6,20,42,.06),0 8px 24px rgba(6,20,42,.08);
  --sombra-alta:0 2px 4px rgba(6,20,42,.08),0 18px 48px rgba(6,20,42,.16);
  --ancho:1180px;
  --f-titulo:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-texto:"Barlow",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-texto);font-size:17px;line-height:1.65;color:var(--tinta);background:var(--blanco);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--marca-2)}
h1,h2,h3,h4{font-family:var(--f-titulo);line-height:1.08;margin:0 0 .5em;color:var(--tinta);letter-spacing:.2px}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--agua);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:var(--marca);color:#fff;padding:10px 16px;border-radius:6px;z-index:100}
.saltar:focus{left:12px}
.icono{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:999px;font:600 15px/1 var(--f-texto);letter-spacing:.3px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.btn .icono{font-size:18px}
.btn:hover{transform:translateY(-1px)}
.btn--primario{background:var(--marca-2);color:#fff;box-shadow:0 6px 18px rgba(30,95,214,.35)}
.btn--primario:hover{background:var(--marca)}
.btn--contorno{border-color:var(--marca-2);color:var(--marca-2);background:transparent}
.btn--contorno:hover{background:var(--marca-2);color:#fff}
.btn--claro{background:#fff;color:var(--marca)}
.btn--claro:hover{background:var(--claro)}
.btn--fantasma{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.04)}
.btn--fantasma:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--wa{background:#1FAF55;color:#fff}
.btn--wa:hover{background:#178F45}
.botones{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.cabecera.con-sombra{border-color:var(--linea);box-shadow:0 4px 18px rgba(6,20,42,.06)}
.cabecera .contenedor{display:flex;align-items:center;gap:16px;height:76px}
.logo img{height:40px;width:auto}
.menu{margin-left:auto;display:flex;align-items:center;gap:2px}
.menu > a:not(.btn),.menu .desplegable > button{font:600 15px/1 var(--f-texto);color:var(--tinta);text-decoration:none;padding:10px 9px;white-space:nowrap;border-radius:8px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.menu > a:not(.btn):hover,.menu .desplegable > button:hover{color:var(--marca-2);background:var(--claro)}
.menu a[aria-current="page"]{color:var(--marca-2)}
.menu .btn{margin-left:8px;min-height:44px;padding:10px 18px;color:#fff;white-space:nowrap}
.menu .btn:hover{background:var(--marca);color:#fff}
.desplegable{position:relative}
.desplegable > button .icono{font-size:14px;transition:transform .2s}
.submenu{position:absolute;top:calc(100% + 8px);left:-12px;min-width:270px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-alta);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,visibility .18s,transform .18s}
.desplegable:hover .submenu,.desplegable:focus-within .submenu,.desplegable.abierto .submenu{opacity:1;visibility:visible;transform:none}
.desplegable:hover > button .icono,.desplegable.abierto > button .icono{transform:rotate(180deg)}
.submenu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--tinta);text-decoration:none;font-weight:500;font-size:15px}
.submenu a:hover{background:var(--claro);color:var(--marca-2)}
.submenu .icono{font-size:20px;color:var(--marca-2)}
.btn-menu{display:none;margin-left:auto;width:46px;height:46px;border-radius:10px;border:1px solid var(--linea);background:#fff;color:var(--tinta);font-size:24px;align-items:center;justify-content:center;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(900px 500px at 85% 20%,rgba(62,168,242,.22),transparent 60%),
  radial-gradient(700px 500px at 0% 100%,rgba(30,95,214,.35),transparent 60%),
  linear-gradient(160deg,var(--noche) 0%,var(--noche-2) 55%,#0E3570 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(180deg,#000 10%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 95%);pointer-events:none}
.hero .contenedor{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:88px;padding-bottom:150px}
.hero--pagina .contenedor{padding-top:64px;padding-bottom:124px}
.hero--solo .contenedor{grid-template-columns:1fr;max-width:860px;text-align:center;justify-items:center}
.hero h1{color:#fff;font-size:clamp(40px,5.6vw,68px);font-weight:700;text-transform:uppercase;margin-bottom:22px}
.hero--pagina h1{font-size:clamp(34px,4.6vw,56px)}
.hero h1 em{font-style:normal;color:var(--agua)}
.hero .lead{font-size:clamp(17px,1.6vw,19px);color:rgba(255,255,255,.78);max-width:600px;margin-bottom:32px}
.hero--solo .lead{margin-left:auto;margin-right:auto}
.hero--solo .botones{justify-content:center}
.etiqueta{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--f-texto);letter-spacing:2.2px;text-transform:uppercase;color:var(--agua);margin-bottom:20px}
.etiqueta::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
/* Etiqueta de la cabecera: píldora con onda (estilo del sitio original) */
.hero .etiqueta{gap:10px;padding:9px 20px 9px 16px;font-size:13px!important;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:999px;color:rgba(255,255,255,.85);font-size:12px;letter-spacing:2px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero .etiqueta::before{content:"";width:18px;height:8px;border-radius:0;background:var(--agua);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 5c2-3 4-3 6 0s4 3 6 0 3-2.5 4-1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 5c2-3 4-3 6 0s4 3 6 0 3-2.5 4-1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.migas{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:18px}
.migas a{color:rgba(255,255,255,.8);text-decoration:none}
.migas a:hover{color:#fff;text-decoration:underline}
.sellos{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding:0;list-style:none}
.sellos li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:8px 14px;border-radius:999px}
.sellos .icono{color:var(--agua);font-size:16px}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px}
.hero-visual::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(62,168,242,.35),rgba(62,168,242,0) 68%);filter:blur(6px)}
.hero-visual::after{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
.hero-visual img{position:relative;z-index:1;max-height:480px;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.hero--pagina .hero-visual{min-height:320px}
.hero--pagina .hero-visual img{max-height:340px}
/* Portada: la válvula es protagonista */
.hero-visual--grande{min-height:520px}
.hero-visual--grande img{max-height:560px}
.hero-visual--grande::before{width:92%}
.hero-visual--grande::after{width:84%}
.hero-visual .piso{position:absolute;z-index:0;bottom:4%;left:50%;width:62%;height:34px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.45),rgba(0,0,0,0) 70%)}
.ficha-flotante{position:absolute;z-index:2;max-width:230px;background:rgba(255,255,255,.97);color:var(--gris);border-radius:14px;padding:14px 18px;box-shadow:var(--sombra-alta);font-size:14px;line-height:1.4}
.ficha-flotante strong{display:block;font:700 20px/1.1 var(--f-titulo);color:var(--marca);margin-bottom:4px}
.ficha-flotante.f1{left:0;bottom:18%}
.ficha-flotante.f2{right:0;top:14%}
/* Ondas orgánicas (4 capas: avance + marea) y burbujas */
.olas{position:absolute;left:0;right:0;bottom:-1px;height:140px;overflow:hidden;pointer-events:none;color:var(--blanco)}
.olas.alt{color:var(--claro)}
.olas .capa{position:absolute;left:0;right:0;bottom:0;height:100%;animation:marea ease-in-out infinite alternate}
.olas svg{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:ola linear infinite}
.olas .o4{height:150%;animation-duration:8.7s}
.olas .o4 svg{animation-duration:41s;animation-direction:reverse}
.olas .o3{height:128%;animation-duration:7.1s;animation-delay:-2s}
.olas .o3 svg{animation-duration:31s}
.olas .o2{height:112%;animation-duration:6.3s;animation-delay:-4s}
.olas .o2 svg{animation-duration:23s;animation-direction:reverse}
.olas .o1{animation-duration:5.3s;animation-delay:-1s}
.olas .o1 svg{animation-duration:19s}
.olas .o1{--m:5px}
@keyframes ola{to{transform:translateX(-50%)}}
@keyframes marea{from{transform:translateY(0)}to{transform:translateY(var(--m,9px))}}
.burbujas{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.burbujas span{position:absolute;bottom:10%;width:var(--t);height:var(--t);animation:burbuja cubic-bezier(.45,.05,.55,.95) infinite;opacity:0}
.burbujas i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.7) 0,rgba(255,255,255,.18) 38%,rgba(255,255,255,.04) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 6px rgba(62,168,242,.25);animation:vaiven ease-in-out infinite alternate}
@keyframes burbuja{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:.9}80%{opacity:.55}100%{transform:translateY(calc(var(--sube) * -1)) scale(1.15);opacity:0}}
@keyframes vaiven{from{transform:translateX(calc(var(--va) * -1))}to{transform:translateX(var(--va))}}

/* ---------- Secciones ---------- */
.sec{padding:96px 0}
.sec--alt{background:var(--claro)}
.sec--oscura{background:linear-gradient(160deg,var(--noche),var(--noche-2));color:rgba(255,255,255,.8)}
.sec--oscura h2,.sec--oscura h3{color:#fff}
.sec--compacta{padding:64px 0}
.encabezado{max-width:720px;margin-bottom:48px}
.encabezado--centro{margin-left:auto;margin-right:auto;text-align:center}
.encabezado .etiqueta{color:var(--marca-2)}
.sec--oscura .encabezado .etiqueta{color:var(--agua)}
.encabezado--centro .etiqueta::after{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.h2{font-size:clamp(32px,4vw,48px);font-weight:700;text-transform:uppercase}
.sub{font-size:18px;color:var(--gris);margin:0}
.sec--oscura .sub{color:rgba(255,255,255,.7)}

.rejilla{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}

/* ---------- Tarjetas ---------- */
.tarjeta{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:28px;transition:border-color .2s,box-shadow .2s,transform .2s;display:flex;flex-direction:column}
.sec--alt .tarjeta{border-color:#E3EBF5}
.tarjeta h3{font-size:24px;font-weight:700;margin-bottom:10px}
.tarjeta p{font-size:16px;color:var(--gris);margin-bottom:0}
.tarjeta .num{font:700 15px/1 var(--f-titulo);letter-spacing:1px;color:var(--agua);margin-bottom:14px}
.tarjeta .dato{margin:auto 0 0;padding-top:16px;font-size:14px;color:var(--gris);border-top:1px solid var(--linea)}
.tarjeta p + .dato{margin-top:auto;padding-top:14px;min-height:calc(3em + 15px);line-height:1.5}
.tarjeta > p:not(.dato){margin-bottom:18px}
.tarjeta .dato b{color:var(--marca-2);font-weight:600}
.tarjeta .dato a{color:var(--marca-2);text-decoration:none;border-bottom:1px solid rgba(30,95,214,.32)}
.tarjeta .dato a:hover{border-bottom-color:var(--marca-2)}
.sec--oscura .tarjeta .dato a{color:var(--agua);border-bottom-color:rgba(62,168,242,.4)}
.sec--oscura .tarjeta .dato a:hover{border-bottom-color:var(--agua)}
.tarjeta .ico{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#E9F2FE,#D8E8FC);color:var(--marca-2);font-size:26px;margin-bottom:20px}
a.tarjeta{text-decoration:none;color:inherit}
a.tarjeta:hover,.tarjeta--hover:hover{border-color:#B8D0EE;box-shadow:var(--sombra-alta);transform:translateY(-3px)}
.tarjeta .mas{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--marca-2)}
.tarjeta .mas .icono{transition:transform .2s}
a.tarjeta:hover .mas .icono{transform:translateX(4px)}
.sec--oscura .tarjeta{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.sec--oscura .tarjeta p,.sec--oscura .tarjeta .dato{color:rgba(255,255,255,.68);border-color:rgba(255,255,255,.12)}
.sec--oscura .tarjeta .dato b{color:var(--agua)}
.sec--oscura .tarjeta .ico{background:rgba(62,168,242,.14);color:var(--agua)}

/* Producto con imagen */
.producto{padding:0;overflow:hidden}
.producto .foto{aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;background:
  radial-gradient(circle at 50% 60%,#fff 0%,#EEF4FB 70%);border-bottom:1px solid var(--linea)}
.producto .foto img{width:100%;height:100%;object-fit:contain;transition:transform .35s}
.producto:hover .foto img{transform:scale(1.04)}
.producto .cuerpo{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.producto .modelo{font:600 13px/1 var(--f-texto);letter-spacing:1.6px;text-transform:uppercase;color:var(--marca-2);margin-bottom:10px}

/* Series de válvulas */
.series-chips{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.series-chips a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:1px solid var(--linea);border-radius:999px;text-decoration:none;color:var(--tinta);font-size:15px;font-weight:500;transition:border-color .2s,background .2s}
.series-chips a:hover{border-color:var(--marca-2);background:var(--claro)}
.series-chips b{font:700 14px/1 var(--f-titulo);letter-spacing:1px;color:#fff;background:var(--marca-2);padding:6px 9px;border-radius:999px}
.producto .foto--serie{flex-direction:column;gap:6px;color:var(--marca-2);background:radial-gradient(circle at 50% 45%,#fff 0%,#E4EEFB 75%)}
.producto .foto--serie .icono{font-size:64px;stroke-width:1.4}
.producto .foto--serie b{font:700 44px/1 var(--f-titulo);letter-spacing:4px;color:var(--marca)}

/* Iconos ilustrados (dos tonos) — ver herramientas/iconos_duo.py */
.duo{width:1em;height:1em;color:var(--marca-2);flex-shrink:0}
.duo .l{fill:none;stroke:var(--c,currentColor);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.duo .r{fill:var(--t,#D3E6FB)}
.duo .a{fill:var(--c,currentColor)}
.duo .f{fill:#fff;stroke:var(--c,currentColor);stroke-width:2.2;stroke-linejoin:round}
.duo .w{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tarjeta .ico--duo{width:68px;height:68px;border-radius:18px;font-size:48px;background:#F3F7FC;border:1px solid #E3ECF7}
.sec--alt .tarjeta .ico--duo{background:#F7FAFE}

/* Certificación ISO: bloque sobrio, sin sellos de terceros */
.certificado{display:grid;grid-template-columns:190px 1fr;gap:36px;align-items:start;background:#fff;border:1px solid var(--linea);border-radius:20px;padding:36px;box-shadow:var(--sombra)}
.cert-marca{display:grid;place-content:center;justify-items:center;gap:6px;aspect-ratio:1;border:2px solid var(--marca-2);border-radius:16px;color:var(--marca);background:linear-gradient(150deg,#F4F8FE,#E6EFFB)}
.cert-marca b{font:700 46px/1 var(--f-titulo);letter-spacing:2px}
.cert-marca span{font:600 15px/1 var(--f-texto);letter-spacing:1.5px;color:var(--marca-2)}
.cert-texto p{color:var(--gris)}
.cert-texto > p:first-child{font-size:18px;color:var(--tinta)}
.cert-datos{display:flex;flex-wrap:wrap;gap:12px 40px;margin:22px 0;padding:18px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cert-datos dt{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gris);font-weight:600;margin-bottom:4px}
.cert-datos dd{margin:0;font:700 19px/1.2 var(--f-titulo);color:var(--marca)}
.cert-alcance{font-size:15px}
.pie-iso{font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.3px}
@media (max-width:700px){.certificado{grid-template-columns:1fr;gap:24px;padding:24px}.cert-marca{aspect-ratio:auto;padding:22px}}

/* Panel de telemetría: ilustración propia, no captura de terceros */
.panel{margin:0;border-radius:18px;overflow:hidden;background:#0A1F3B;border:1px solid rgba(255,255,255,.14);box-shadow:var(--sombra-alta)}
.panel-barra{display:flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.6);letter-spacing:.4px}
.panel-barra strong{color:var(--agua);font-weight:600}
.panel-puntos{display:flex;gap:6px}
.panel-puntos i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.panel-cuerpo{padding:20px;display:grid;gap:16px}
.panel-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.panel-kpis div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px}
.panel-kpis small{display:block;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.panel-kpis b{font:700 30px/1 var(--f-titulo);color:#fff}
.panel-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel-caja{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px}
.panel-caja h3{font-size:15px;font-weight:600;font-family:var(--f-texto);letter-spacing:.4px;color:rgba(255,255,255,.75);margin-bottom:12px}
.panel-caja svg{width:100%;height:auto;display:block}
.panel-nota{margin-top:14px;font-size:13px;color:rgba(255,255,255,.5)}
@media (max-width:760px){.panel-kpis{grid-template-columns:1fr 1fr}.panel-cols{grid-template-columns:1fr}.panel-kpis b{font-size:24px}}

/* ---------- Galería de obra ---------- */
.obras{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.obras figure{margin:0;position:relative;border-radius:var(--radio);overflow:hidden;background:var(--noche);box-shadow:var(--sombra);isolation:isolate}
.obras img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.obras figure:hover img{transform:scale(1.04)}
.obras figcaption{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;color:#fff;font-size:14px;line-height:1.45;background:linear-gradient(to top,rgba(6,20,42,.92),rgba(6,20,42,.55) 55%,transparent)}
.obras figcaption b{display:block;font:600 16px/1.3 var(--f-texto);margin-bottom:3px}
.obras--alta img{aspect-ratio:3/4}
@media (max-width:900px){.obras{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:560px){.obras{grid-template-columns:1fr}}

/* ---------- Cifras ---------- */
.cifras{position:relative;z-index:2;margin-top:-56px}
.cifras .caja{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--radio);box-shadow:var(--sombra-alta);overflow:hidden}
.cifra{padding:28px 26px;border-right:1px solid var(--linea)}
.cifra:last-child{border-right:0}
.cifra strong{display:block;font:700 44px/1 var(--f-titulo);color:var(--marca);margin-bottom:6px}
.cifra span{font-size:15px;color:var(--gris)}

/* ---------- Bloque dividido ---------- */
.dividido{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.dividido--inv > :first-child{order:2}
.marco-img{border-radius:var(--radio);overflow:hidden;background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra)}
.marco-img img{width:100%}
.marco-img figcaption{padding:12px 16px;font-size:14px;color:var(--gris);border-top:1px solid var(--linea)}
.destacado{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;background:#fff;border:1px solid var(--linea);border-radius:20px;padding:48px;box-shadow:var(--sombra)}
.destacado--texto{grid-template-columns:1fr}
.destacado .foto{display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,#fff,#EAF2FC 72%);border-radius:16px;padding:28px;min-height:340px}
.destacado .foto img{max-height:360px;width:auto}

/* ---------- Listas ---------- */
.lista-check{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista-check li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.lista-check .icono{color:#fff;background:var(--marca-2);border-radius:50%;padding:4px;font-size:22px;margin-top:2px;stroke-width:2.6}
.lista-check--2{grid-template-columns:1fr 1fr;gap:16px 32px}

/* ---------- Pasos ---------- */
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.paso{position:relative;padding:32px 28px;background:#fff;border-radius:var(--radio);border:1px solid var(--linea)}
.paso::before{counter-increment:paso;content:"0" counter(paso);display:block;font:700 48px/1 var(--f-titulo);color:transparent;-webkit-text-stroke:1.5px var(--marca-2);margin-bottom:16px}
.paso h3{font-size:24px}
.paso p{color:var(--gris);margin:0;font-size:16px}

/* ---------- Tabla ---------- */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:#fff;margin-top:40px}
.tabla{width:100%;border-collapse:collapse;min-width:720px;font-size:15px}
.tabla caption{text-align:left;padding:18px 20px;font:700 22px/1.2 var(--f-titulo);color:var(--tinta);border-bottom:1px solid var(--linea)}
.tabla th,.tabla td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--linea)}
.tabla thead th{background:var(--noche-2);color:#fff;font-weight:600;font-size:14px;letter-spacing:.5px}
.tabla tbody th{text-align:left;font-weight:600;background:var(--claro)}
.tabla td small{display:block;color:var(--gris);font-size:13px}
.tabla tbody tr:last-child > *{border-bottom:0}
.tabla tbody tr:hover td{background:#F7FAFE}

/* ---------- Banda CTA ---------- */
.banda{position:relative;overflow:hidden;border-radius:24px;padding:64px;color:#fff;background:
  radial-gradient(600px 300px at 100% 0%,rgba(62,168,242,.35),transparent 60%),
  linear-gradient(135deg,var(--marca) 0%,var(--noche-2) 100%);display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center}
.banda::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px;pointer-events:none}
.banda > *{position:relative}
.banda h2{color:#fff;font-size:clamp(30px,3.6vw,44px);text-transform:uppercase;margin-bottom:10px}
.banda p{color:rgba(255,255,255,.8);margin:0;font-size:18px;max-width:620px}
.banda .botones{justify-content:flex-end}

/* ---------- Contacto ---------- */
.contacto{display:grid;grid-template-columns:1.35fr .85fr;gap:48px;align-items:start}
.formulario{background:#fff;border:1px solid var(--linea);border-radius:20px;padding:40px;box-shadow:var(--sombra)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.campo--ancho{grid-column:1/-1}
.campo label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--tinta)}
.campo label span{color:#C62828}
.campo input,.campo select,.campo textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--linea);border-radius:10px;font:16px/1.4 var(--f-texto);color:var(--tinta);background:#fff;transition:border-color .2s,box-shadow .2s}
.campo textarea{min-height:120px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--marca-2);box-shadow:0 0 0 4px rgba(30,95,214,.14)}
.formulario .btn{width:100%;margin-top:24px;min-height:54px;font-size:16px}
.formulario .btn:disabled{opacity:.6;cursor:wait;transform:none}
.aviso{display:none;margin-top:16px;padding:14px 16px;border-radius:10px;font-size:15px}
.aviso.ok{display:block;background:#EAF5EA;color:#1E5A22}
.aviso.error{display:block;background:#FDECEC;color:#8A1C1C}
.nota-form{font-size:13px;color:var(--gris);margin:14px 0 0}
.datos{display:grid;gap:14px}
.dato-contacto{display:flex;gap:16px;align-items:flex-start;padding:18px;border:1px solid var(--linea);border-radius:var(--radio);background:#fff;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
a.dato-contacto:hover{border-color:#B8D0EE;box-shadow:var(--sombra)}
.dato-contacto .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#E9F2FE;color:var(--marca-2);font-size:22px;flex-shrink:0}
.dato-contacto small{display:block;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--gris);font-weight:600}
.dato-contacto b{font-weight:600;font-size:16px}

/* ---------- Pie ---------- */
.pie{background:var(--noche);color:rgba(255,255,255,.66);padding:72px 0 0;font-size:15px}
.pie .columnas{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.pie img{height:40px;width:auto;margin-bottom:18px}
.pie h4{color:#fff;font:600 14px/1 var(--f-texto);letter-spacing:1.8px;text-transform:uppercase;margin-bottom:18px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pie a{color:rgba(255,255,255,.75);text-decoration:none}
.pie a:hover{color:#fff}
.pie .contacto-pie li{display:flex;gap:10px;align-items:flex-start}
.pie .contacto-pie .icono{color:var(--agua);font-size:18px;margin-top:3px}
.pie .legal{border-top:1px solid rgba(255,255,255,.1);padding:22px 80px 22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;background:#1FAF55;color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .2s}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:32px;height:32px;fill:currentColor}

/* ---------- Animación de entrada ---------- */
.js .aparece{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .aparece.visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
  .pie .columnas{grid-template-columns:1fr 1fr}
  .destacado{grid-template-columns:1fr;padding:32px}
}
@media (max-width:960px){
  .btn-menu{display:inline-flex}
  .menu{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--linea);box-shadow:var(--sombra-alta);padding:12px 16px 20px;max-height:calc(100vh - 76px);overflow:auto;display:none}
  .menu.abierto{display:flex}
  .menu > a:not(.btn),.menu .desplegable > button{padding:14px 12px;white-space:normal;font-size:17px;width:100%;justify-content:space-between}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 8px;display:none;min-width:0}
  .desplegable.abierto .submenu{display:block}
  .menu .btn{margin:12px 0 0}
  .hero .contenedor{grid-template-columns:1fr;padding-top:56px;padding-bottom:120px;gap:24px}
  .hero-visual{min-height:300px;order:-1}
  .hero-visual img,.hero-visual--grande img{max-height:320px}
  .hero-visual--grande{min-height:300px}
  /* En celular la imagen del hero se mostraba solo en las fichas de producto;
     en sectores y servicios desaparecía, que es justo donde entra la gente
     desde el buscador. Ahora se muestra en todas, encima del texto. */
  .hero--pagina .hero-visual{display:flex;order:-1;min-height:0;margin-bottom:4px}
  .hero--pagina .hero-visual img{max-height:230px}
  .rejilla,.rejilla--2{grid-template-columns:1fr 1fr}
  .dividido,.contacto{grid-template-columns:1fr;gap:40px}
  .dividido--inv > :first-child{order:0}
  .cifras .caja{grid-template-columns:1fr 1fr}
  .cifra:nth-child(2){border-right:0}
  .cifra:nth-child(-n+2){border-bottom:1px solid var(--linea)}
  .pasos{grid-template-columns:1fr}
  .banda{grid-template-columns:1fr;padding:44px 32px}
  .banda .botones{justify-content:flex-start}
}
@media (max-width:600px){
  body{font-size:16px}
  .contenedor{padding:0 16px}
  .sec{padding:64px 0}
  .rejilla,.rejilla--2,.rejilla--4,.campos,.lista-check--2{grid-template-columns:1fr}
  .cifra{padding:20px 18px}
  .cifra strong{font-size:34px}
  .formulario{padding:24px 18px}
  .pie .columnas{grid-template-columns:1fr}
  .ficha-flotante{display:none}
  .hero .etiqueta{font-size:11px;letter-spacing:1.1px;padding:8px 14px 8px 12px;gap:8px}
  .hero-visual{min-height:220px}
  .hero-visual img{max-height:230px}
  .botones .btn{flex:1 1 100%}
  .logo img{height:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .aparece{opacity:1;transform:none}
}

/* ---------- Video de producto y visor 3D ---------- */
.video-marco{margin:0;border-radius:var(--radio);overflow:hidden;background:#000;box-shadow:var(--sombra-alta)}
.video-marco video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#9a9a9a}
.video-marco figcaption{padding:12px 16px;font-size:14px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.04)}
.visor-3d{position:relative;display:grid;place-items:center;min-height:440px;border-radius:var(--radio);overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#fff,#E3EDF9 75%);border:1px solid var(--linea);box-shadow:var(--sombra)}
.visor-3d > img{max-height:400px;width:auto;padding:24px;filter:drop-shadow(0 24px 30px rgba(6,20,42,.25))}
.visor-3d > .btn{position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}
.visor-3d model-viewer{width:100%;height:480px;background:transparent;--poster-color:transparent}
@media (max-width:560px){.visor-3d model-viewer{height:360px}}

/* ---------- Revisión de interfaz (web-design-guidelines + taste-skill, 2026-10-15) ---------- */
html{scroll-padding-top:96px}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.tabla td,.tabla th{font-variant-numeric:tabular-nums}
a,button,.btn{touch-action:manipulation}
.dividido .tabla{min-width:0}
.hero--pagina .hero-visual--producto{min-height:460px}
.hero--pagina .hero-visual--producto img{max-height:520px}
@media (max-width:960px){.hero--pagina .hero-visual--producto{display:flex;order:-1;min-height:0;margin:0 0 8px}
  .hero--pagina .hero-visual--producto img{max-height:300px}}
@media (max-width:560px){.hero--pagina .hero-visual--producto img{max-height:240px}}

/* Tablas anchas en celular: se deslizan, pero hay que decirlo. */
.tabla-wrap{position:relative}
@media (max-width:760px){
  .tabla-wrap::after{content:"Desliza para ver toda la tabla →";display:block;padding:10px 16px;font-size:13px;color:var(--gris);border-top:1px solid var(--linea);background:var(--claro);position:sticky;left:0}
  .tabla{min-width:620px;font-size:14px}
  .tabla th,.tabla td{padding:10px 12px}
  .tabla caption{font-size:19px;padding:14px 16px}
}

/* Fichas de producto en celular: la foto no debe comerse la pantalla. */
@media (max-width:600px){
  .producto .foto{aspect-ratio:16/10}
  .rejilla--3{grid-template-columns:1fr}
}

/* Banda "Se usa en": el camino de vuelta de una ficha a sus sectores. */
.sectores-de{padding:28px 0;background:var(--claro);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.sectores-de .contenedor{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sectores-de .rotulo{margin:0;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--gris)}
.sectores-de .series-chips{margin:0}
.sectores-de .series-chips a{background:#fff;padding:9px 16px 9px 12px}
.sectores-de .icono{color:var(--marca-2);font-size:18px}
@media (max-width:600px){
  .sectores-de{padding:22px 0}
  .sectores-de .contenedor{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- Artículo ---------- */
.prosa{max-width:720px}
.prosa p{font-size:18px;line-height:1.75;color:var(--tinta);margin:0 0 22px}
.prosa h2{font:700 30px/1.2 var(--f-titulo);margin:46px 0 18px;color:var(--noche)}
.prosa h3{font:600 21px/1.3 var(--f-texto);margin:32px 0 12px;color:var(--noche)}
.prosa ul{margin:0 0 22px;padding-left:22px}
.prosa li{font-size:18px;line-height:1.7;margin-bottom:10px}
.prosa strong{font-weight:600;color:var(--noche)}
.prosa a{color:var(--marca-2)}
.prosa figure{margin:30px 0}
.ficha-dato{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;margin:30px 0}
.ficha-dato div{background:#fff;padding:18px 20px}
.ficha-dato small{display:block;font-size:12px;letter-spacing:.9px;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.ficha-dato b{font:700 24px/1 var(--f-titulo);color:var(--marca)}
.fuente{border-left:3px solid var(--marca-2);background:var(--claro);padding:22px 24px;border-radius:0 var(--radio) var(--radio) 0;margin:36px 0}
.fuente p{margin:0 0 8px;font-size:16px;line-height:1.6}
.fuente p:last-child{margin:0}
.fuente .et{font-size:12px;letter-spacing:1.1px;text-transform:uppercase;font-weight:600;color:var(--gris)}
.meta-articulo{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--gris);margin-bottom:8px}
@media (max-width:600px){
  .prosa p,.prosa li{font-size:17px}
  .prosa h2{font-size:26px;margin-top:38px}
}

/* Casilla de autorización de datos: el área de toque es toda la fila. */
.campo-aviso{display:flex;gap:12px;align-items:flex-start;margin:4px 0 24px;padding:16px 18px;background:var(--claro);border:1px solid var(--linea);border-radius:var(--radio)}
.campo-aviso input{width:22px;height:22px;flex-shrink:0;margin-top:1px;accent-color:var(--marca-2);cursor:pointer}
.campo-aviso label{font-size:15px;line-height:1.55;color:var(--gris);cursor:pointer}
.campo-aviso a{color:var(--marca-2)}

/* Descargo bajo las tablas técnicas. */
.nota-tabla{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--gris)}
.nota-tabla a{color:var(--marca-2)}

/* tabla de dimensiones con su esquema de cotas al lado */
.tabla-cotas{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:32px;align-items:start;margin-top:40px}
.tabla-cotas .tabla-wrap{margin-top:0}
.tabla-cotas__fig{margin:0;position:sticky;top:96px;padding:24px 20px 18px;border:1px solid var(--linea);border-radius:var(--radio);background:#fff;text-align:center}
.tabla-cotas__fig img{width:100%;height:auto;margin:0 auto}
.tabla-cotas__fig figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--gris);text-align:left}
@media (max-width:960px){.tabla-cotas{grid-template-columns:1fr}.tabla-cotas__fig{position:static;max-width:280px;margin:0 auto}}
.lista-check--2col{columns:2;column-gap:56px}
.lista-check--2col li{break-inside:avoid}
@media (max-width:760px){.lista-check--2col{columns:1}}