/* =========================================================================
   GRUPO SANIPROF — sitio corporativo 2026
   Estructura visual siguiendo la forma en que un grupo industrial ordena
   su información: hero a sangre, banda de magnitudes, bloques de negocio
   en rejilla y pie de cuatro columnas. Un solo tema, claro y sobrio.
   ========================================================================= */
:root{
  /* --- Paleta de la guía de marca que entregó el cliente (GUIA_BRANDING) --- */
  --mk-navy:#324c8c;     /* azul corporativo */
  --mk-azul:#4678DD;     /* azul medio */
  --mk-cian:#00B5EF;     /* cian */
  --mk-gris:#B9BDC6;     /* gris */
  --mk-grafito:#58595b;  /* gris oscuro */
  --mk-tinte:#eef4fd;    /* tinte claro de la misma familia */
  /* --- Paleta tomada del sitio en produccion rentadesanitarios.com.mx --- */
  --brand:#1b3c87;      /* barra superior y titulos */
  --navy:#1b3c87;       /* bandas oscuras */
  --navy-2:#0f2157;     /* pie */
  --brand-800:#0f2157; --brand-600:#16306d;
  --accent:#3b82f6;     /* boton solido */
  --link:#2563eb;       /* enlaces */
  --brand-100:#dbeafe; --brand-050:#ebf4ff;
  --cian:#00B5EF;       /* solo logo, sin uso en interfaz */
  --slate:#4a5565; --gris:#dbeafe;
  --ink:#6a7282; --ink-2:#4a5565; --muted:#6a7282;
  --line:#e5e7eb; --line-2:#f3f4f6;
  --surface:#fff; --bg:#f6f8fa; --bg-2:#fbfcfd;
  --warn:#8a6100; --warn-bg:#fff5e0; --ok:#0f7b4f;
  --ff:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fd:"Poppins",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ff);background:var(--surface);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fd);margin:0;letter-spacing:-.022em;line-height:1.14;font-weight:800}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.medida{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brand);color:#fff;padding:10px 16px;border-radius:3px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;font-weight:600}

/* --------------------------------------------------------------- botones */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:1px solid var(--line);
  border-radius:2px;background:var(--surface);font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;font-family:var(--ff)}
.btn:hover{border-color:var(--brand);background:var(--brand);color:#fff}
.btn--p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--p:hover{background:var(--brand);border-color:var(--brand)}
.btn--lg{padding:16px 30px;font-size:15.5px}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--navy)}

/* --------------------------------------------------------- barra y cabecera */
.topbar{background:var(--navy);color:rgba(255,255,255,.72);font-size:12.5px}
.topbar-in{display:flex;align-items:center;gap:22px;height:38px;flex-wrap:nowrap;overflow:hidden}
.topbar .claim{color:rgba(255,255,255,.62);margin-right:auto;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:500;letter-spacing:.005em}
.topbar .tb{white-space:nowrap}
.topbar .tb:hover{color:#fff}
.topbar b{color:#fff;font-weight:600}
.tb-sel{display:flex;gap:2px;margin-left:8px}
.tb-sel a,.tb-sel span{padding:3px 9px;border:1px solid rgba(255,255,255,.18);font-size:11px;
  letter-spacing:.06em;line-height:1.5}
.tb-sel a:hover{border-color:rgba(255,255,255,.5);color:#fff}
.tb-sel .on{background:#fff;color:var(--navy);border-color:#fff;font-weight:700}

.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:20px;height:104px}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{height:84px;width:auto}
.logo-img{display:block;height:84px;width:auto}
.logo-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-left:1px solid var(--line);padding-left:12px;max-width:120px;line-height:1.3}
.nav{margin-left:auto}
.nav>ul{display:flex;flex-wrap:nowrap;gap:4px;list-style:none;margin:0;padding:0}
.nav>ul>li{position:relative}
.nav>ul>li>a{display:block;padding:10px 14px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.nav>ul>li>a:hover{color:var(--brand)}
.nav .sub{position:absolute;top:100%;left:0;min-width:260px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 12px 34px rgba(10,13,18,.12);list-style:none;
  margin:0;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.nav>ul>li.has:hover .sub,.nav>ul>li.has:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{display:block;padding:9px 12px;font-size:14px;color:var(--slate);border-radius:2px}
.nav .sub a:hover{background:var(--brand-050);color:var(--brand)}
.hdr-cta{flex:none;padding:10px 20px}

/* ------------------------------------------------------------------- hero
   El video lleva el claim grabado, así que el HTML no lo repite encima:
   la banda de llamada a la acción va debajo, siempre legible. */
.hero{background:var(--navy);color:#fff}
/* La caja toma exactamente la proporción de la película (16:9), así que
   el video llena el ancho y no quedan franjas a los lados. Antes la altura
   estaba acotada y con `contain` la animación salía como un panel angosto
   en medio de dos bandas azules: con las escenas fotográficas de la v2 ese
   corte se notaba como un recuadro pegado, no como un hero. El tope de
   820px evita que en pantallas muy anchas se vuelva desproporcionada. */
/* La caja llena el ancho y se acota a lo que queda de pantalla bajo la
   barra y la cabecera, así que la animación entra completa sin tener que
   desplazar la página. El recorte vertical cae en los márgenes vacíos que
   la propia película deja arriba y abajo; el 40% desplaza el encuadre para
   que el logotipo de la escena nunca quede cortado. */
.hero-media{position:relative;width:100%;overflow:hidden;background:var(--navy);
  height:clamp(280px, min(48vw, calc(100vh - 250px)), 600px)}
/* En las páginas de sección va además la miga de pan sobre el video. */
.hero--pag .hero-media{height:clamp(240px, min(42vw, calc(100vh - 300px)), 520px)}
/* La película entra completa dentro del recuadro: con `cover` la caja más
   baja recortaba arriba y abajo y las unidades salían gigantes y cortadas.
   Con `contain` se ve la escena entera y el sobrante queda en azul, del
   mismo tono que la banda de abajo. */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
/* Velo suave: la propia animación ya trae su graduación y su viñeta; el
   degradado de la página solo asienta el texto del pie de cada escena. */
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,32,63,.14) 0%,rgba(4,32,63,0) 26%,rgba(4,32,63,0) 78%,rgba(4,32,63,.34) 100%)}
/* La curva blanca cierra el bloque oscuro del hero contra el cuerpo de la
   página, como en el sitio en producción. Va al final de la sección —después
   de la banda azul— y en flujo normal, NO encimada: antes estaba en
   position:absolute y le tapaba la mitad a los botones de la banda. */
.hero{position:relative}
.ph--video{padding-bottom:26px}
.hero-ola{position:static;display:block;width:100%;height:clamp(52px,6vw,104px);
  margin-bottom:-1px;background:transparent;pointer-events:none}
.hero-ola path{fill:#fff}
.hero-nota{position:absolute;right:24px;bottom:14px;margin:0;z-index:3;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
/* En pantalla angosta la caja del video mide poco más de 230 px de alto y
   la nota se encima con la franja que la propia película trae abajo. */
@media(max-width:720px){.hero-nota{display:none}}
.hero-bar{background:var(--navy);border-top:1px solid rgba(255,255,255,.1)}
.hero-bar-in{display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;padding:26px 24px 30px}
.hero-bar .eyebrow{margin:0;color:rgba(255,255,255,.66)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* hero de página interna */
/* Cabecera azul: compacta en todo el sitio. El cliente pidió llegar antes
   al contenido; antes había que bajar media pantalla para ver el catálogo. */
.ph{background:var(--navy);color:#fff;padding:30px 0 26px}
.ph h1{font-size:clamp(24px,3.1vw,34px);margin-bottom:6px}
.ph .ph-sub{font-size:15.5px;max-width:74ch;margin-top:8px}
.ph--video{padding-top:22px;padding-bottom:22px}
.ph .eyebrow{color:rgba(255,255,255,.66)}
.ph h1{font-size:clamp(28px,4.4vw,50px);max-width:20ch}
.ph-sub{margin:20px 0 0;font-size:18px;line-height:1.55;color:rgba(255,255,255,.78);max-width:62ch}

/* ------------------------------------------------------- respuesta directa */
.resp{background:var(--brand-050);border-bottom:1px solid var(--brand-100)}
.resp-in{padding:20px 24px;max-width:1000px}
.resp-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin:0 0 10px;font-weight:700}
.resp-txt{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin:0;font-weight:450}
.resp-fecha{margin:8px 0 0;font-size:11.5px;color:var(--muted)}

/* --------------------------------------------------------------- secciones */
.sec{padding:52px 0}
.sec--alt{background:var(--bg)}
.sec--def{padding:44px 0 32px}
.sec--def h1{font-size:clamp(26px,3.4vw,38px);margin-bottom:22px;max-width:22ch}
.lead{font-size:19px;line-height:1.62;color:var(--slate);margin:0}
.sec-h{font-size:clamp(24px,3vw,34px);margin:0 0 14px}
.sec-intro{font-size:17px;color:var(--slate);max-width:64ch;margin:0 0 34px}
.sec h2{font-size:clamp(21px,2.4vw,27px);margin:38px 0 14px}
.sec h3{font-size:18.5px;margin:30px 0 10px}
.sec p,.sec li{font-size:16.5px;line-height:1.68;color:var(--slate)}
.mini{font-size:13.5px;color:var(--muted)}

/* --------------------------------------------------------------- magnitudes */
.mag{background:var(--navy);color:#fff}
.mag-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.mag-i{padding:40px 26px;border-left:1px solid rgba(255,255,255,.11);display:flex;flex-direction:column;gap:4px}
.mag-i:first-child{border-left:0;padding-left:0}
.mag-n{font-family:var(--fd);font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.mag-l{font-size:14.5px;font-weight:600}
.mag-d{font-size:12.5px;color:rgba(255,255,255,.56)}

/* ------------------------------------------------------------------ rejilla */
.grid{display:grid;gap:2px;background:var(--line)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.tile{background:var(--surface);padding:0;display:flex;flex-direction:column;
  transition:background .18s;min-height:100%}
.tile:hover{background:var(--brand-050)}
.tile-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease,ease)}
.tile:hover .tile-img img{transform:scale(1.04)}
.tile-b{padding:26px 24px 28px;display:flex;flex-direction:column;gap:8px;flex:1}
.tile-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tile-t{font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.tile-d{font-size:14.5px;color:var(--slate);line-height:1.55}
.tile-go{margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:600;color:var(--brand)}

/* --------------------------------------------------------- tablas y listas */
.tabla-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;background:var(--surface)}
caption{text-align:left;padding:14px 16px;font-size:13px;color:var(--muted);
  border-bottom:1px solid var(--line);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{background:var(--navy);color:#fff;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
tbody th{font-weight:600;color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.lista{padding-left:20px;margin:16px 0}
.lista li{margin-bottom:9px}
.chips{list-style:none;padding:0;margin:16px 0;display:flex;flex-wrap:wrap;gap:7px}
.chips li{font-size:13.5px;padding:6px 12px;background:var(--surface);border:1px solid var(--line);color:var(--slate)}
.nota{border-left:3px solid var(--accent);background:var(--brand-050);padding:18px 20px;margin:24px 0}
.nota p{margin:0;font-size:15px;color:var(--brand-600)}
.pasos{list-style:none;counter-reset:p;padding:0;margin:28px 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.pasos li{counter-increment:p;background:var(--bg);padding:26px 22px;display:flex;flex-direction:column;gap:6px}
.pasos li::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--brand);font-weight:700}
.pasos b{font-family:var(--fd);font-size:17px}
.pasos span{font-size:14.5px;color:var(--slate)}
.nap{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;margin:18px 0;font-size:16px}
.nap dt{font-weight:600;color:var(--muted);font-size:13.5px;padding-top:2px}
.nap dd{margin:0}
.glos dt{font-family:var(--fd);font-weight:700;font-size:18px;margin-top:26px;scroll-margin-top:100px}
.glos dd{margin:6px 0 0;color:var(--slate);font-size:16px;line-height:1.66}
.volver{color:var(--brand);font-weight:600}
.pv{background:var(--warn-bg);color:var(--warn);padding:1px 6px;font-size:.92em}

/* ---------------------------------------------------------------- migas */
.migas{border-bottom:1px solid var(--line);background:var(--bg-2)}
.migas ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:13px 0;font-size:13px}
.migas li+li::before{content:"/";margin-right:8px;color:var(--muted)}
.migas a{color:var(--muted)}
.migas a:hover{color:var(--brand)}
.migas [aria-current]{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------------- FAQ */
.faq-l{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-family:var(--fd);font-size:17.5px;
  font-weight:700;list-style:none;position:relative;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:24px;
  color:var(--brand);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--slate);max-width:70ch}

/* ------------------------------------------------------------------- CTA */
.cta{background:var(--navy);color:#fff;padding:60px 0}
.cta-in{display:flex;align-items:center;gap:36px;justify-content:space-between;flex-wrap:wrap}
.cta h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 10px;max-width:22ch}
.cta p{margin:0;color:rgba(255,255,255,.72);max-width:56ch;font-size:16px}

/* ------------------------------------------------------------------- pie */
.pie{background:var(--brand-800);color:rgba(255,255,255,.62);padding:64px 0 0;font-size:14.5px}
.pie-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px}
.pie-logo{filter:brightness(0) invert(1);margin-bottom:18px}
.pie h3{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:700}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:10px}
.pie a:hover{color:#fff}
.pie-nap{margin-top:20px;line-height:1.9;font-size:13.5px}
.pie-nap b{color:rgba(255,255,255,.9);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.pie-pais{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 24px 0}
.pie-pais-et{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4)}
.pie-pais a,.pie-pais span.on{font-size:13px;color:rgba(255,255,255,.62)}
.pie-pais a:hover{color:#fff;text-decoration:underline}
.pie-pais span.on{color:#fff;font-weight:600}
.pie-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 24px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:rgba(255,255,255,.42)}

/* ------------------------------------------- hero de sección con video */
/* El video va a sangre bajo el menú, igual que en la portada, y el título
   de la página cuelga de él en la misma caja azul: se lee como un bloque. */

/* --------------------------------------------------------------- adaptable */
@media(max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .pie-in{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .mag-in{grid-template-columns:repeat(2,1fr)}
  .mag-i{border-left:0;border-top:1px solid rgba(255,255,255,.11);padding-left:0}
  .nav{display:none}
  .topbar .claim,.topbar .tb{display:none}
  .tb-sel{margin-left:auto}
}
@media(max-width:620px){
  .grid--3,.grid--4{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .pie-in{grid-template-columns:1fr;gap:32px}
  .sec{padding:52px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero-vid{display:none}
}

/* menú móvil (lo monta sitio.js; sin JS el sitio usa el pie como índice) */
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);
  background:var(--surface);border-radius:2px;flex-direction:column;justify-content:center;
  align-items:center;gap:4px;cursor:pointer;flex:none}
.burger span{display:block;width:18px;height:2px;background:var(--brand)}
@media(max-width:860px){
  .burger{display:flex}
  .hdr-cta{display:none}
  .nav.open{display:block;position:absolute;top:84px;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);box-shadow:0 12px 30px rgba(10,13,18,.1);padding:12px 12px 28px;
    max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html.menu-abierto,html.menu-abierto body{overflow:hidden}
  .nav.open>ul{flex-direction:column;gap:0}
  .nav.open>ul>li>a{padding:13px 12px;border-bottom:1px solid var(--line-2)}
  .nav.open .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;
    box-shadow:none;padding:0 0 8px 14px}
}

/* Marca tipográfica: el sitio no depende de un archivo alojado en el
   dominio anterior, que es justo lo que el diagnóstico pide desmontar. */
.marca{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);
  font-weight:800;font-size:19px;letter-spacing:.14em;color:var(--ink)}
.marca i{display:block;width:4px;height:21px;background:var(--brand);flex:none}
.marca--pie{color:#fff;font-size:17px;margin-bottom:18px}
.logo-pie{height:40px;width:auto;margin-bottom:18px}
.marca--pie i{background:#fff}
/* el hero ya no repite el claim: lo dice el video */

/* --------------------------------------------- verificación de documento */
.vf{display:flex;gap:20px;align-items:flex-start;padding:26px 28px;border-radius:3px;margin:0 0 28px}
.vf-i{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:24px;font-weight:700;color:#fff}
.vf h2{font-size:22px;margin:0 0 8px}
.vf p{margin:0;font-size:15.5px;line-height:1.6}
.vf--bien{background:#e8f6ee;border:1px solid #cbe8d8}
.vf--bien .vf-i{background:var(--ok)}
.vf--bien h2{color:var(--ok)}
.vf--mal{background:#fdecea;border:1px solid #f5cdc8}
.vf--mal .vf-i{background:#b3261e}
.vf--mal h2{color:#b3261e}
.vf--aviso{background:var(--warn-bg);border:1px solid #f0dcae}
.vf--aviso .vf-i{background:var(--warn)}
.vf--aviso h2{color:var(--warn)}
.vf--neutro{background:var(--bg);border:1px solid var(--line)}
.vf--neutro .vf-i{background:var(--muted)}

/* ---------------------------------------------------------------- galería */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.gal figure{margin:0;background:var(--surface);display:flex;flex-direction:column}
.gal img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f2f5f8;padding:14px}
.gal figcaption{padding:12px 16px 16px;font-size:13px;color:var(--slate);line-height:1.45}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal{grid-template-columns:1fr}}


/* ------------------------------------------------- clientes autorizados */
.clientes{padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line);background:var(--surface)}
.clientes h2{font-size:clamp(19px,2.2vw,24px);text-align:center;margin-bottom:8px}
.clientes .clientes-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:30px}
/* Muro de marcas: los 45 logotipos que entregó Saniprof, en gris sobre
   blanco. Recuperan el color al pasar el cursor. La caja tiene proporción
   fija para que logos anchos y cuadrados se alineen igual. */
.cli-marcas{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(7,1fr)}
.cli-m{display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  aspect-ratio:7/4;padding:10px 14px;transition:border-color .18s,box-shadow .18s}
.cli-m img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  filter:grayscale(1);opacity:.72;transition:filter .18s,opacity .18s}
.cli-m:hover{border-color:var(--brand-100);box-shadow:0 6px 18px rgba(15,33,87,.08)}
.cli-m:hover img{filter:grayscale(0);opacity:1}
.cli-pais-h{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);font-weight:700}
.cli-pais-h span{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:10px;
  background:var(--brand-100);color:var(--brand);font-size:10.5px}
.cli-pais-h.mt32{margin-top:34px}
@media(max-width:1100px){.cli-marcas{grid-template-columns:repeat(5,1fr)}}
@media(max-width:760px){.cli-marcas{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.cli-marcas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.clientes-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.clientes-grid{grid-template-columns:repeat(2,1fr)}
  .topbar .claim{display:none}}

/* ------------------------------------------------- aviso de cookies */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy);
  color:rgba(255,255,255,.86);border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(100%);transition:transform .26s var(--ease,ease)}
.ck.on{transform:none}
.ck-in{width:100%;max-width:var(--wrap);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ck-txt{flex:1;min-width:260px;font-size:13.5px;line-height:1.5}
.ck-txt b{display:block;font-family:var(--fd);font-size:14.5px;color:#fff;margin-bottom:3px}
.ck-txt a{color:var(--link);text-decoration:underline}
.ck-btn{display:flex;gap:10px;flex:none}
.ck .btn--o{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.ck .btn--o:hover{background:#fff;border-color:#fff;color:var(--navy)}
.ck .btn--sm{padding:9px 18px;font-size:13.5px}
@media(max-width:560px){.ck-in{padding:14px 16px;gap:14px}.ck-btn{width:100%}.ck-btn .btn{flex:1}}

/* enlaces legales del pie */
.pie-legal-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.pie-legal-links a:hover{color:#fff;text-decoration:underline}
.pie-ck{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.pie-ck:hover{color:#fff;text-decoration:underline}


/* ---- Paleta de marca: reglas anadidas ---- */
h1,h2,h3{color:var(--brand)}
.hero h1,.ph h1,.ph h2,.mag h2,.cta h1,.cta h2,.pie h2,.pie h3,.hero-bar h2{color:inherit}
/* Sobre banda oscura el boton primario se invierte: maximo contraste (8.24:1) */
.hero-bar .btn--p,.cta .btn--p,.ph .btn--p{background:#fff;border-color:#fff;color:var(--brand)}
.hero-bar .btn--p:hover,.cta .btn--p:hover,.ph .btn--p:hover{background:var(--brand-050);border-color:var(--brand-050);color:var(--brand)}
/* Detalle cian de la guia bajo el rotulo de seccion */
.eyebrow{position:relative;padding-bottom:10px}
.eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--accent)}
.ph .eyebrow::after,.hero-bar .eyebrow::after,.cta .eyebrow::after{background:#93c5fd}
.tile:hover{box-shadow:inset 0 3px 0 var(--accent)}

/* ---- Mapa de cobertura ---- */
.mc{background:var(--brand-050)}
.mc-intro{max-width:62ch;color:var(--ink-2);font-size:16.5px;margin:0 0 28px}
/* Sin mar: el mapa va sobre el fondo de la sección y los tres países
   con presencia son lo único en azul fuerte. */
.mc-mapa{background:transparent;overflow:hidden}
.mc-mapa svg{display:block;width:100%;height:auto}
.mc-r1{fill:var(--brand);font-family:var(--fd);font-size:15px;font-weight:700}
/* Halo blanco: sin el mar, los rótulos caen unos sobre el país azul y
   otros sobre el fondo claro. El contorno los separa de los dos. */
.mc-r1,.mc-r2,.mc-r3{stroke:#fff;stroke-width:3.4px;paint-order:stroke fill;
  stroke-linejoin:round;stroke-linecap:round}
.mc-r2{stroke-width:3px}.mc-r3{stroke-width:3.2px}
.mc-r2{fill:#5b6a86;font-family:var(--ff);font-size:12px;font-weight:400}
.mc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);margin-top:2px}
.mc-col{background:var(--surface);padding:26px 24px 28px}
.mc-col-h{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:9px}
.mc-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.mc-col-n{margin:0;font-family:var(--fd);font-size:40px;line-height:1;font-weight:800;color:var(--brand)}
.mc-col-s{margin:6px 0 16px;font-size:13px;color:var(--muted)}
.mc-col-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mc-col-l li{padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2)}
.mc-nota{margin:18px 0 0;font-size:13px;color:var(--muted);max-width:88ch}
@media(max-width:900px){
  .mc-cols{grid-template-columns:1fr}
  /* En pantalla estrecha el mapa solo sostiene los tres rotulos cabecera;
     las nueve ciudades se leen completas en las columnas de abajo. */
  .mc-r1{font-size:30px}.mc-r2{font-size:22px}
  .mc-r3,.mc-guia--min{display:none}
}
.mc-r3{fill:#31415f;font-family:var(--ff);font-size:13px;font-weight:500}

/* ---- Tarjetas de servicio con icono (en lugar de fotografía) ---- */
.grid--ico .tile{background:var(--surface);text-align:center;padding:34px 24px 30px}
.grid--ico .tile:hover{background:var(--surface);box-shadow:inset 0 3px 0 var(--accent)}
.tile-ico{display:flex;align-items:center;justify-content:center;width:66px;height:66px;
  margin:0 auto 18px;border-radius:50%;background:var(--brand-050)}
.tile-ico svg{width:32px;height:32px;fill:var(--accent)}
.grid--ico .tile-b{padding:0;text-align:center;align-items:center}
.grid--ico .tile-t{font-size:17.5px}
.grid--ico .tile-d{max-width:34ch;margin-left:auto;margin-right:auto}
.grid--ico .tile:hover .tile-ico{background:var(--brand-100)}
@media(max-width:700px){.grid--ico .tile{padding:26px 20px 24px}}
/* Ciudad con su propio WhatsApp: el número va debajo del nombre. */
.mc-col-l li.mc-col-ci{padding:11px 0}
.mc-col-ci b{display:block;font-size:15px;font-weight:700;color:var(--mk-navy)}
.mc-col-ci .mc-ley-wa{margin-top:6px}

/* Cobertura: el mapa ocupa el recuadro del encabezado y la animación ocupa
   el hueco que el mapa dejó dentro de la sección. */
.hero-media--mapa{background:#fff;
  height:clamp(300px, min(46vw, calc(100vh - 260px)), 600px)}
.hero-media--mapa .mc-mapa{position:absolute;inset:18px 24px 34px;overflow:visible;
  display:flex;align-items:center;justify-content:center}
.hero-media--mapa .mc-mapa svg{width:100%;height:100%}
/* La nota va abajo a la izquierda: el mapa ocupa el centro y la derecha. */
.hero-nota--claro{left:24px;right:auto;bottom:11px;color:rgba(27,60,135,.5)}
@media(max-width:720px){.hero-media--mapa .mc-mapa{inset:10px 12px 24px}}
.mc-anim{margin:0}
.mc-anim-v{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;
  background:var(--navy);border-radius:14px}
.mc-anim figcaption{margin-top:10px;font-size:13px;color:var(--muted)}

.mc-col-tel{margin:14px 0 0;font-size:14.5px;font-weight:600}
.mc-col-tel a{color:var(--link)}

/* ---- Misión y visión ---- */
.mv{display:grid;grid-template-columns:1fr 1.35fr;gap:2px;background:var(--line);margin:28px 0 36px}
.mv-c{background:var(--brand-050);padding:28px 30px}
.mv-k{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:700}
.mv-t{margin:0;font-family:var(--fd);font-size:24px;line-height:1.28;font-weight:700;color:var(--brand)}
.mv-v{margin:0;font-size:16px;line-height:1.62;color:var(--ink-2)}
.lista--p{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:16px 0 22px}
.lista--p li{font-weight:600;color:var(--brand)}
.chips--v li{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand);font-weight:600}
@media(max-width:760px){.mv{grid-template-columns:1fr}.mv-t{font-size:21px}}

/* ---- Logotipo con los fundadores ----
   Es la imagen oficial de la guía de marca, en PNG/WebP con transparencia y
   sin recuadro detrás: se apoya directamente en el fondo de la página. */
.lf{margin:26px 0 30px;text-align:center}
.lf img{display:block;width:100%;max-width:360px;height:auto;margin:0 auto;
  background:transparent}
.lf figcaption{margin-top:14px;font-size:13.5px;color:var(--muted)}
@media(max-width:700px){.lf img{max-width:280px}}

/* ---- Cierre: "La familia creció y el propósito también" ---- */
.cierre{margin:44px 0 8px;padding:38px 34px 34px;background:var(--brand-050);border-top:4px solid var(--accent)}
.cierre-h{margin:0 0 22px;font-family:var(--fd);font-size:clamp(28px,4vw,40px);line-height:1.12;font-weight:800}
.cierre-h span{display:block;color:var(--brand)}
.cierre-h em{display:block;font-style:normal;color:var(--accent)}
.cierre-p1{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--brand)}
.cierre-p2{margin:0 0 16px;font-size:16px;color:var(--muted);max-width:56ch}
.cierre-p3{margin:0 0 26px;font-size:16.5px;font-weight:600;color:var(--ink-2)}
.cierre-q{margin:0;padding:0;border:0;font-family:var(--fd);font-size:clamp(20px,2.6vw,26px);
  line-height:1.3;font-weight:700;color:var(--accent)}
.cierre-q::before{content:"\201C"}
.cierre-q::after{content:"\201D"}
@media(max-width:700px){.cierre{padding:28px 22px 26px}}
/* Leyenda del mapa en la portada: tres tarjetas con el conteo y el teléfono
   del país, que es el dato que el visitante busca al mirar el mapa. */
.mc-leyenda{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(3,1fr);background:var(--line);border:1px solid var(--line)}
.mc-ley-i{display:flex;align-items:center;gap:12px;background:var(--surface);padding:16px 20px}
.mc-ley-x{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.mc-ley-x b{color:var(--brand);font-size:15px;line-height:1.25}
.mc-ley-x span{color:var(--muted);font-size:12.5px}
.mc-ley-tel{font-size:14.5px;font-weight:600;color:var(--link);white-space:nowrap}
.mc-leyenda .mc-dot{flex:none}
@media(max-width:820px){
  .mc-leyenda{grid-template-columns:1fr}
  .mc-ley-i{padding:13px 16px}
}

/* --- Selector de línea de WhatsApp (FAB) ------------------------------- */
.wa-menu{position:absolute;right:0;bottom:calc(100% + 10px);width:268px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(15,33,87,.18);padding:8px;z-index:60}
.wa-menu[hidden]{display:none}
.wa-menu-t{font-size:12px;line-height:1.35;color:var(--ink);padding:6px 10px 8px;font-weight:600}
.wa-menu-i{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  text-decoration:none;color:var(--ink-2)}
.wa-menu-i:hover,.wa-menu-i:focus-visible{background:var(--brand-050)}
.wa-menu-f{font-size:20px;line-height:1}
.wa-menu-x{display:flex;flex-direction:column;min-width:0}
.wa-menu-x b{font-size:14px;color:var(--brand);line-height:1.2}
.wa-menu-x span{font-size:12px;color:var(--ink);line-height:1.3}
@media (max-width:700px){.wa-menu{width:240px}}

/* --- Lista de WhatsApp por país (página de contacto) ------------------- */
.wa-lista{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.wa-lista a{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;text-decoration:none;background:#fff}
.wa-lista a:hover{border-color:var(--accent);background:var(--brand-050)}
.wa-lista-f{font-size:24px;line-height:1}
.wa-lista a>span:last-child{display:flex;flex-direction:column}
.wa-lista b{color:var(--brand);font-size:15px}
.wa-lista a span span{color:var(--ink);font-size:13px}

/* --- Catálogo por servicio: foto, piezas y paso al cotizador ------------
   Los colores salen de la guía de marca del cliente: azul corporativo
   #324c8c en la cabecera, azul medio #4678DD en el degradado y los
   botones, cian #00B5EF para marcar la fila elegida, gris #B9BDC6 en los
   filetes y el tinte claro de la misma familia en las filas alternas.
   La tabla va dentro de una tarjeta con sombra para que resalte sobre la
   página en lugar de confundirse con el texto. */
.cat-intro{max-width:70ch;margin:0 0 20px;color:var(--slate);font-size:16px}
.cat-wrap{margin:26px 0 30px}
.cat-wrap .tabla-wrap{margin:0;border:1px solid var(--mk-gris);border-radius:16px;
  overflow:hidden auto;background:#fff;box-shadow:0 14px 34px rgba(50,76,140,.14)}
.cat-t{width:100%;border-collapse:collapse;min-width:820px;background:#fff}
.cat-t caption{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mk-grafito);padding:14px 18px 12px;background:var(--mk-tinte);
  border-bottom:1px solid var(--mk-gris)}
.cat-t th,.cat-t td{padding:13px 16px;border-bottom:1px solid #e7ebf3;text-align:left;vertical-align:middle}
.cat-t thead th{background:linear-gradient(90deg,var(--mk-navy),var(--mk-azul));color:#fff;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  border-bottom:0;padding-top:13px;padding-bottom:13px}
.cat-t tbody tr{transition:background .15s,box-shadow .15s}
.cat-t tbody tr:nth-child(even){background:var(--mk-tinte)}
.cat-t tbody tr:hover{background:#e2ebfb}
.cat-t tbody tr.on{background:#dfe9fa;box-shadow:inset 4px 0 0 var(--mk-cian)}
.cat-t tbody tr:last-child th,.cat-t tbody tr:last-child td{border-bottom:0}
/* La foto entra COMPLETA en su recuadro: con `cover` los modelos verticales
   (sanitarios, regaderas, lavamanos) salían recortados de arriba y abajo. */
.cat-foto{width:168px;padding-right:0}
.cat-foto img{display:block;width:152px;height:114px;object-fit:contain;object-position:center;
  border-radius:10px;background:var(--mk-tinte);border:1px solid var(--mk-gris)}
.cat-nom{font-size:15.5px;color:var(--mk-navy);font-weight:700;min-width:190px}
.cat-med,.cat-cap{font-size:13.5px;color:var(--mk-grafito)}
/* Medidas y capacidad viven en una sola celda: lo que el catálogo no dice
   simplemente no se imprime, así que nunca queda un hueco en la tabla. */
.cat-ficha{max-width:420px}
.cat-ficha .cat-med,.cat-ficha .cat-cap{display:block;line-height:1.4}
.cat-ficha .cat-cap{margin-top:3px;font-size:12.5px;color:var(--muted)}
.cat-med{max-width:330px;line-height:1.4}
.cat-cap{max-width:230px;line-height:1.4}
.cat-pz{width:92px}
.cat-n{width:72px;padding:8px 6px;border:1.5px solid var(--mk-gris);border-radius:8px;
  font:inherit;font-size:14px;font-weight:600;text-align:center;color:var(--mk-navy);background:#fff}
.cat-n:focus{outline:2px solid var(--mk-cian);outline-offset:1px;border-color:var(--mk-azul)}
.cat-add{width:124px;text-align:right}
.cat-b{white-space:nowrap;border-color:var(--mk-azul);color:var(--mk-navy);background:#fff}
.cat-b:hover{background:var(--mk-navy);border-color:var(--mk-navy);color:#fff}

/* Barra de resumen: aparece en cuanto se agrega el primer modelo */
.cat-barra{margin-top:18px;border:1px solid var(--mk-navy);border-radius:12px;
  background:var(--mk-navy);color:#fff;padding:16px 18px;display:grid;gap:12px;
  grid-template-columns:auto 1fr auto;align-items:center;
  box-shadow:0 10px 26px rgba(50,76,140,.26)}
.cat-barra[hidden]{display:none}
.cat-barra p.cat-barra-x{margin:0;font-size:13px;color:#dbe4f6;white-space:nowrap}
.cat-barra-x b{font-family:var(--fd);font-size:24px;color:#fff;display:block;line-height:1}
.cat-barra-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cat-barra ul.cat-barra-l li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);
  border-radius:999px;padding:5px 8px 5px 11px;font-size:12.5px;color:#fff;
  display:flex;align-items:center;gap:6px}
.cat-barra-l b{color:var(--mk-cian)}
.cat-quitar{border:0;background:transparent;color:#c9d6ef;cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px}
.cat-quitar:hover{color:#fff}
.cat-barra-b{display:flex;gap:9px;align-items:center}
.cat-barra .btn--o{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.cat-barra .btn--o:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.cat-barra .btn--p{background:var(--mk-cian);border-color:var(--mk-cian);color:#08264f}
.cat-barra .btn--p:hover{background:#fff;border-color:#fff;color:var(--mk-navy)}
.cat-aviso{margin:0 0 18px;padding:13px 16px;border-radius:10px;background:var(--mk-tinte);
  border:1px solid var(--mk-gris);border-left:4px solid var(--mk-azul);
  color:var(--mk-grafito);font-size:14.5px}
.cat-aviso b{color:var(--mk-navy)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
  .cat-barra{grid-template-columns:1fr;text-align:left}
  .cat-barra-x{white-space:normal}
  .cat-barra-b{justify-content:flex-start}
}

/* --- Casos de éxito ----------------------------------------------------- */
.caso-res{max-width:74ch;color:var(--slate);font-size:16.5px;line-height:1.6;margin:0 0 26px}
.caso-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.caso-fotos figure{margin:0}
.caso-fotos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:12px;background:var(--line-2)}
.caso-fotos figcaption{margin-top:9px;font-size:13px;line-height:1.45;color:var(--muted)}
@media(max-width:860px){.caso-fotos{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.caso-fotos{grid-template-columns:1fr}}

/* Catálogos descargables ------------------------------------------------ */
.desc-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.desc-i{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--linea);
  border-radius:12px;background:#fff;text-decoration:none;color:var(--tinta);font-weight:600;
  transition:border-color .15s ease,box-shadow .15s ease}
.desc-i:hover{border-color:var(--navy);box-shadow:0 2px 10px rgba(16,32,64,.08)}
.desc-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:9px;background:var(--navy);color:#fff;font-size:12px;letter-spacing:.06em;flex:0 0 auto}

/* Mapa animado ----------------------------------------------------------
   Dos animaciones, las dos en CSS y sin una línea de JavaScript: el halo
   que late en cada sede y el destello que recorre las rutas entre países.
   Ambas se detienen si el visitante pidió menos movimiento en su sistema. */
.mc-eco{animation:mc-eco 2.9s cubic-bezier(.2,.6,.35,1) infinite;
  transform-box:view-box;transform-origin:center;will-change:transform,opacity}
@keyframes mc-eco{
  0%  {transform:scale(1);opacity:.85}
  65% {transform:scale(3.1);opacity:0}
  100%{transform:scale(3.1);opacity:0}
}
.mc-ruta-luz{stroke-dashoffset:var(--mc-l);
  animation-name:mc-ruta;animation-timing-function:cubic-bezier(.45,0,.55,1);
  animation-iteration-count:infinite}
@keyframes mc-ruta{
  0%  {stroke-dashoffset:var(--mc-l);opacity:0}
  8%  {opacity:1}
  78% {opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .mc-eco{animation:none;opacity:.3}
  .mc-ruta-luz{animation:none;opacity:0}
}

/* Logotipo vertical en la barra: el isotipo sobre la palabra. Necesita más
   alto que el horizontal para que "Saniprof" siga siendo legible, así que
   la barra crece de 74 a 88 px; en móvil se ajusta para no comerse la
   pantalla. */
@media(max-width:860px){
  .hdr-in{height:84px;gap:14px}
  .logo img,.logo-img{height:64px}
  .logo-sub{display:none}
}

/* Teléfono + WhatsApp en las tarjetas del mapa --------------------------- */
.mc-ley-b{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.mc-ley-n{display:block;font-style:normal;font-size:11px;color:var(--muted);line-height:1.2;
  text-align:right;max-width:150px}
.mc-ley-wa{display:inline-flex;align-items:center;gap:6px;margin-top:3px;padding:5px 11px;
  border-radius:999px;background:#e8f7ee;color:#0f7a3d;font-size:12.5px;font-weight:700;
  text-decoration:none;white-space:nowrap;transition:background .15s}
.mc-ley-wa:hover{background:#d4f0e0;color:#0b5c2e}
.mc-wa-i{width:15px;height:15px;flex:none}
.mc-col-tel .mc-ley-n{text-align:left;max-width:none;margin-top:2px}
.mc-col-wa{margin:10px 0 0}
@media(max-width:560px){
  .mc-ley-i{flex-wrap:wrap}
  .mc-ley-b{align-items:flex-start;width:100%;margin-left:23px}
  .mc-ley-n{text-align:left}
}

/* La Respuesta directa se conserva para buscadores y asistentes de IA, pero
   ya no se dibuja: recorte de 1 px, no display:none, para que siga en el
   árbol de accesibilidad y la sigan leyendo las máquinas. */
.resp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* El catálogo abre la página, así que va sobre fondo claro y con menos aire
   arriba: el cliente pidió que sea lo primero que se vea. */
.sec--cat{background:var(--surface);padding-top:34px}
.sec--cat .sec-h,.sec--cat h2{margin-top:0}

/* Cotización en curso ---------------------------------------------------
   Dos avisos: el contador de la cabecera, que viaja con el visitante por
   todo el sitio, y la barra de resumen, que se queda pegada al borde
   inferior mientras el catálogo está en pantalla. No se llama carrito
   porque aquí no se compra nada: se arma una cotización. */
.hdr-cot[hidden]{display:none}
.hdr-cot{display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 14px;
  border:1px solid var(--brand);border-radius:999px;color:var(--brand);
  text-decoration:none;font-size:13.5px;font-weight:700;white-space:nowrap;
  transition:background .15s,color .15s}
.hdr-cot:hover{background:var(--brand);color:#fff}
.hdr-cot svg{width:18px;height:18px;flex:none}
.hdr-cot-n{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;
  padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;line-height:1}
.hdr-cot:hover .hdr-cot-n{background:#fff;color:var(--brand)}
.con-cesta .hdr-cta{display:none}
@media(max-width:1240px){.hdr-cot-t{display:none}.hdr-cot{padding:8px 11px}}
@media(max-width:860px){.hdr-cot{margin-left:auto;order:2}}

/* La barra de resumen deja de esconderse al final de la tabla: se queda
   pegada abajo mientras haya piezas seleccionadas. */
.cat-barra{position:sticky;bottom:0;z-index:30;margin-top:0;
  border:1px solid var(--mk-navy);border-radius:12px 12px 0 0;background:var(--mk-navy);
  box-shadow:0 -8px 28px rgba(50,76,140,.30);padding:12px 18px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cat-barra p.cat-barra-x{margin:0;font-size:14px;color:#dbe4f6;flex:none}
.cat-barra-x b{font-size:20px;color:#fff}
.cat-barra-l{flex:1 1 240px;min-width:0;max-height:52px;overflow-y:auto}
.cat-barra-b{margin-left:auto;display:flex;gap:10px;flex:none}
@media(max-width:620px){
  .cat-barra{padding:10px 12px;gap:10px}
  .cat-barra-l{display:none}
  .cat-barra-b{width:100%;margin-left:0}
  .cat-barra-b .btn{flex:1 1 auto;text-align:center}
}

/* ---------- Sanitarios públicos inteligentes 5 STAR (oct-2026) ---------- */
.pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.pt{background:var(--surface);padding:26px 24px 28px;box-shadow:inset 0 3px 0 var(--mk-cian)}
.pt-t{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--mk-navy);margin:0 0 10px;letter-spacing:-.01em}
.pt-d{font-size:14.5px;color:var(--slate);line-height:1.6;margin:0}
.pres-serv{margin-top:28px;padding:24px 26px;background:var(--surface);border-left:4px solid var(--mk-navy)}
.pres-serv h3{margin:0 0 8px;font-size:17px;color:var(--mk-navy)}
.pres-serv p{margin:0;font-size:15px;color:var(--slate);line-height:1.6;max-width:90ch}
.gal--3{grid-template-columns:repeat(3,1fr)}
.gal--3 img{padding:0;object-fit:cover}
.ficha-t table{width:100%;border-collapse:collapse}
.ficha-t th,.ficha-t td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-size:14.5px;line-height:1.6}
.ficha-t th{width:220px;color:var(--mk-navy);background:var(--mk-tinte);font-weight:700}
.ficha-t td{color:var(--mk-grafito)}
@media(max-width:860px){.pts,.gal--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pts,.gal--3{grid-template-columns:1fr}.ficha-t th{width:auto;display:block;border-bottom:0;padding-bottom:4px}.ficha-t td{display:block;padding-top:6px}}

/* ---------- Calculadora de sanitarios (Recursos, oct-2026) ---------- */
.calc{border:1px solid var(--mk-gris);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 18px 40px -28px rgba(27,60,135,.45)}
.calc-tabs{display:flex;background:var(--mk-tinte);border-bottom:1px solid var(--mk-gris)}
.calc-tabs button{flex:1;padding:16px 10px;border:0;background:transparent;font:700 15px var(--fd);color:var(--mk-grafito);cursor:pointer;border-bottom:3px solid transparent}
.calc-tabs button.on{color:var(--mk-navy);border-bottom-color:var(--mk-cian);background:#fff}
.calc-form{padding:28px 30px 30px;display:flex;flex-direction:column;gap:24px}
.calc-campo{display:flex;flex-direction:column;gap:10px}
.calc-campo label,.calc-lbl{font:700 15px var(--fd);color:var(--mk-navy);display:flex;justify-content:space-between;gap:12px}
.calc-campo label b{color:var(--mk-azul)}
.calc-campo select{padding:13px 14px;border:1px solid var(--mk-gris);border-radius:10px;font:500 16px var(--ff);color:var(--ink);background:#fff}
.calc-campo input[type=range]{width:100%;accent-color:var(--mk-azul);height:28px}
.calc-campo--fila{flex-direction:row;align-items:center;justify-content:space-between}
.calc-sw{position:relative;width:86px;height:38px;border-radius:999px;border:1px solid var(--mk-gris);background:#e9edf3;cursor:pointer;font:700 13px var(--fd);color:var(--mk-grafito);padding:0 12px;text-align:right;transition:background .2s}
.calc-sw::before{content:"";position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.calc-sw.on{background:var(--mk-azul);border-color:var(--mk-azul);color:#fff;text-align:left}
.calc-sw.on::before{left:52px}
.calc-nota{margin:0;padding:16px 18px 16px 34px;background:var(--mk-tinte);border-radius:10px;font-size:14px;color:var(--mk-grafito);line-height:1.6}
.calc-go{align-self:flex-start}
.calc--res{padding:30px}
.calc-eyebrow{font:700 12px var(--mono, monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--mk-azul);margin:0}
.calc-n{font:600 22px var(--fd);color:var(--mk-navy);margin:10px 0 4px}
.calc-n b{font-size:64px;line-height:1;margin-right:8px;color:var(--mk-navy)}
.calc-res-sub{margin:0 0 18px;color:var(--mk-grafito);font-size:14px}
.calc-req{margin:0 0 22px;padding-left:20px;line-height:1.7;color:var(--ink)}
.calc-acc{display:flex;gap:12px;flex-wrap:wrap}
.calc-fuente{margin:18px 0 0;font-size:12.5px;color:var(--mk-grafito)}
@media(max-width:620px){.calc-form,.calc--res{padding:22px 18px}.calc-n b{font-size:50px}}
/* calculadora incrustada en Recursos */
.sec--calc{padding-top:48px;padding-bottom:24px}
.calc-cab{margin-bottom:20px}
.calc-cab h2{margin:6px 0 8px}
.calc-cab p{margin:0;color:var(--muted, #5b6472)}
.calc-mas{margin-top:14px;font-size:14px}
.calc-mas a{font-weight:600}
.ph-cta{margin:22px 0 0}