/* ==========================================================================
   Agua industrial — Landing de soluciones · Exova / FluidsControl SA
   Molde: Landing SaniFlow (mismos tokens y patrones). Mobile-first.
   ========================================================================== */

:root{
  /* Tipografía — Exo (display/marca) + Barlow Condensed (cuerpo, labels, tablas) */
  --font-display: 'Exo', system-ui, sans-serif;            /* pesos 700/800 */
  --font-body: 'Barlow Condensed', system-ui, sans-serif;  /* 400 cuerpo, 600/700 labels, 800 títulos */

  /* Oscuro neutro (identidad marketing: placas de LinkedIn) */
  --c-dark:        #10151C;   /* color de TEXTO y títulos */
  --c-blue-deep:   #0B1130;   /* azul bien oscuro de las franjas formato Siemens */

  /* Acentos de marca (celeste del logo + cyan de placas + teal del catálogo) */
  --c-blue:        #2AA6F8;   /* celeste: fondos de CTA y acentos. Nunca como texto sobre blanco */
  --c-blue-bright: #009AFF;
  --c-cyan:        #35B6EA;
  --c-teal:        #65DDD1;
  --c-green:       #30E49E;
  --c-green-soft:  #BDF6E0;   /* fondo del hero */
  /* Azul AA para texto sobre claros: 5.5 blanco / 5.0 --c-bg-soft / 4.6 --c-green-soft */
  --c-blue-text:   #0067B0;

  /* Grises acero + neutros */
  --c-steel-700:   #343E48;
  --c-steel-500:   #545D64;
  --c-steel-300:   #BEC2C5;
  --c-bg-soft:     #F5F5F5;
  --c-white:       #FFFFFF;
  --c-error:       #B3261E;

  /* Espaciado / radios / sombras */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem; --sp-8:4rem;
  --radius: 10px; --radius-lg: 16px;
  --shadow-card: 0 6px 24px rgba(6,16,32,.08);
  --maxw: 1200px;

  --header-h: 72px;
  --photo-h: 290px;          /* alto del área de foto de las tarjetas de solución */
}

/* ---------- Reset y base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px);
  font-size:111%;            /* escala compartida con SaniFlow y AgileReact */
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.02rem;
  line-height:1.55;
  color:var(--c-steel-700);
  background:var(--c-white);
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:var(--c-blue-text); }
address{ font-style:normal; }
code{ font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:.92em; }
button{ font:inherit; cursor:pointer; }

:focus-visible{ outline:3px solid var(--c-blue-text); outline-offset:2px; border-radius:2px; }
.trust-band :focus-visible,
.makers :focus-visible,
.quote-intro :focus-visible{ outline-color:var(--c-blue); }
.site-footer :focus-visible{ outline-color:var(--c-dark); }

.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-3); }
.section{ padding-block: clamp(64px, 9vw, 120px); }

.eyebrow{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.82rem;
  color:var(--c-blue-text);
  margin:0 0 .8rem;
}

h2{
  font-family:var(--font-body);
  font-weight:800;
  color:var(--c-dark);
  font-size:clamp(1.75rem, 4vw, 2.5rem);
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:.02em;
}
h3{ font-family:var(--font-body); font-weight:700; color:var(--c-dark); font-size:1.3rem; line-height:1.2; }
.section-lead{
  max-width:56ch;
  margin-top:var(--sp-2);
  color:var(--c-steel-500);
  font-size:clamp(1.1rem, 1.8vw, 1.25rem);
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-2); top:-100px; z-index:200;
  background:var(--c-blue); color:var(--c-dark);
  padding:.6rem 1rem; border-radius:var(--radius); font-weight:700;
  transition:top .15s ease;
}
.skip-link:focus{ top:var(--sp-1); }

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  text-decoration:none;
  text-align:center;
  border:2px solid transparent;
  border-radius:var(--radius);
  padding:.7rem 1.4rem;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primary{ background:var(--c-blue); color:var(--c-dark); }
.btn-primary:hover{ background:var(--c-blue-bright); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--c-dark); border-color:var(--c-dark); }
.btn-secondary:hover{ border-color:var(--c-blue); background:var(--c-blue); color:var(--c-dark); }
.btn-lg{ padding:.8rem 1.75rem; font-size:1.15rem; }
.btn-block{ display:block; width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(16,21,28,.08);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 2px 16px rgba(6,16,32,.1); }
.header-inner{
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:var(--header-h);
}
.brand{ display:inline-flex; align-items:center; flex-shrink:0; }
.brand img{ width:132px; height:auto; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; gap:var(--sp-3); }
.main-nav a{
  color:var(--c-dark); text-decoration:none; font-weight:600;
  font-size:1.1rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.4rem .15rem; position:relative;
  transition:color .18s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--c-blue);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.main-nav a:hover{ color:var(--c-dark); }
.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; }

.lang-toggle{
  display:flex; border:1px solid var(--c-steel-300); border-radius:var(--radius); overflow:hidden;
}
/* Sin traducciones cargadas el selector se oculta (ver initLangToggle) */
.lang-toggle[hidden], .lang-toggle button[hidden]{ display:none; }
.lang-toggle button{
  background:transparent; color:var(--c-dark); border:0;
  padding:.32rem .55rem; font-weight:600; font-size:.9rem; letter-spacing:.04em;
}
.lang-toggle button[aria-pressed="true"]{ background:var(--c-blue); color:var(--c-dark); }
.lang-toggle button:not([aria-pressed="true"]):hover{ background:rgba(16,21,28,.06); }

.btn-header{ padding:.5rem 1.15rem; font-size:1.1rem; white-space:nowrap; }

.nav-burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:9px;
  background:transparent; border:1px solid var(--c-steel-300); border-radius:var(--radius);
}
.nav-burger span{
  display:block; height:2px; width:100%; background:var(--c-dark);
  border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.main-nav.open{
  display:block;
  position:absolute; left:0; right:0; top:var(--header-h);
  background:var(--c-white);
  border-top:1px solid rgba(16,21,28,.08);
  box-shadow:0 12px 24px rgba(6,16,32,.12);
}
.main-nav.open ul{ flex-direction:column; gap:0; padding:var(--sp-2) var(--sp-3); }
.main-nav.open a{ display:block; padding:.8rem 0; border-bottom:1px solid rgba(16,21,28,.08); }
.main-nav.open a::after{ display:none; }
/* Selector de idioma del menú: oculto salvo en celulares chicos (ver max-width 419px) */
.nav-lang{ display:none; }

/* ---------- Hero ---------- */
/* Hero CLARO del molde. Diferencia con SaniFlow: el video de planta es oscuro y
   cargado (rodillos azules, máquina), así que NO va detrás del texto con velo
   blanco: va al costado (escritorio) o debajo (celular). El texto queda siempre
   sobre el degradé claro y pasa AA sin depender del cuadro del video. */
.hero{
  position:relative;
  color:var(--c-steel-700);
  background:linear-gradient(160deg, var(--c-white) 0%, var(--c-green-soft) 100%);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg stroke='%2330E49E' stroke-width='1' opacity='.35'%3E%3Cline x1='20' y1='40' x2='120' y2='90'/%3E%3Cline x1='120' y1='90' x2='230' y2='30'/%3E%3Cline x1='120' y1='90' x2='80' y2='200'/%3E%3Cline x1='80' y1='200' x2='210' y2='170'/%3E%3Cline x1='230' y1='30' x2='210' y2='170'/%3E%3Cline x1='20' y1='40' x2='80' y2='200' opacity='.5'/%3E%3C/g%3E%3Cg fill='%2330E49E'%3E%3Ccircle cx='20' cy='40' r='3'/%3E%3Ccircle cx='120' cy='90' r='4'/%3E%3Ccircle cx='230' cy='30' r='2.5'/%3E%3Ccircle cx='80' cy='200' r='3.5'/%3E%3Ccircle cx='210' cy='170' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 260px;
  opacity:.14;
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:1;
  padding-block:clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 5.5rem);
}
.hero-brandline{
  text-transform:uppercase; letter-spacing:.14em; font-weight:600;
  color:var(--c-blue-text); font-size:.95rem;
}
/* h1 descriptivo (no wordmark): azul AA, Exo 800. En celular, dos renglones */
.hero-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.9rem, 9vw, 4.6rem);
  line-height:1;
  letter-spacing:-.01em;
  margin-top:var(--sp-1);
  color:var(--c-blue-text);
  width:min-content;
}
.hero-sub{
  margin-top:var(--sp-2);
  font-size:clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight:600;
  line-height:1.3;
  max-width:34ch;
  color:var(--c-dark);
}
.hero-industries{
  margin-top:var(--sp-2);
  text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--c-blue-text); font-size:1rem;
}
.hero-feature{
  margin-top:var(--sp-2);
  min-height:2.5em;
  font-size:clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight:800;
  line-height:1.2;
  color:var(--c-dark);
  max-width:24ch;
  opacity:1;
  transition:opacity .35s ease;
}
.hero-feature.is-out{ opacity:0; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); }

/* Medio del hero: póster (siempre) + video encima cuando arranca */
.hero-media{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:var(--c-blue-deep);
  /* fundido superior hacia el degradé del hero */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%);
}
.hero-poster,
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:58% 50%;
}
.hero-video{ opacity:0; transition:opacity .8s ease; }
.hero-video.is-playing{ opacity:1; }

/* ---------- Propuesta de valor ---------- */
.vp-grid{ display:grid; gap:var(--sp-3); margin-top:var(--sp-6); }
.vp-card{
  background:var(--c-white);
  border:1px solid var(--c-bg-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--sp-4) var(--sp-3);
}
.vp-icon{
  width:52px; height:52px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(42,166,248,.12);
  color:var(--c-blue-text);
  margin-bottom:var(--sp-2);
}
.vp-card h3{ margin-bottom:var(--sp-1); }
.vp-card p{ color:var(--c-steel-500); }

/* ---------- Franja de confianza (formato Siemens) ---------- */
.trust-band{
  background:var(--c-blue-deep);
  color:var(--c-white);
  padding-block:var(--sp-6);
}
.trust-badges{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  text-align:center;
}
.trust-badges li{ display:grid; gap:.3rem; padding-inline:var(--sp-1); align-content:start; }
.trust-accent{
  font-family:var(--font-body); font-weight:800; font-size:1.35rem;
  color:var(--c-blue); letter-spacing:.02em;
}
.trust-badges li > span:last-child{ color:rgba(255,255,255,.75); font-size:1rem; }
.trust-industries{
  margin-top:var(--sp-4);
  text-align:center;
  color:rgba(255,255,255,.75);
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:var(--sp-3);
  font-size:1.1rem;
}
.trust-industries strong{ color:var(--c-white); letter-spacing:.04em; }

/* ---------- Soluciones ---------- */
.models{ background:var(--c-bg-soft); }
.model-grid{
  display:grid; gap:var(--sp-3);
  margin-top:var(--sp-4);
}
/* Tres familias con título propio. Filas centradas: con 3, 7 y 4 tarjetas
   la última fila queda al medio y no colgando a la izquierda */
.sol-group + .sol-group{ margin-top:var(--sp-6); }
.sol-group-title{
  font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--c-blue-text);
  display:flex; align-items:center; gap:var(--sp-2);
  margin:var(--sp-4) 0 var(--sp-3);
}
.sol-group-title::after{ content:""; flex:1; height:1px; background:var(--c-steel-300); }
.sol-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); }
.sol-grid > .model-card{ flex:0 1 100%; }

.model-card{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.model-card:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(6,16,32,.14); }

/* Área de foto: mismo alto para fotos y paneles de marca */
.model-photo{
  position:relative;
  height:var(--photo-h);
  padding:var(--sp-2) var(--sp-2) var(--sp-4);
  background:linear-gradient(180deg, #FBFCFD 0%, var(--c-bg-soft) 100%);
}
/* Fotos de producto sobre blanco puro (JPG con fondo 255): el panel también
   es blanco, así la foto no muestra recuadro */
.model-photo--white{
  background:var(--c-white);
  border-bottom:1px solid var(--c-bg-soft);
}
/* Fotos de ambiente (equipo de ósmosis, 15-10-2026): la foto llena el área, sin margen */
.model-photo.model-photo--foto{ padding:0; background:#E9EDF2; }
.model-photo--foto .model-gallery img{ object-fit:cover; }
.model-photo--foto .model-single img{ object-fit:cover; }
.model-photo--foto .gal-dots span{ background:rgba(255,255,255,.8); box-shadow:0 0 0 1px rgba(16,21,28,.25); }
.model-photo--foto .gal-dots span.is-active{ background:var(--c-blue); }
.model-gallery{
  display:flex;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.model-gallery::-webkit-scrollbar{ display:none; }
.model-gallery img{
  flex:0 0 100%;
  width:100%; height:100%; object-fit:contain;
  scroll-snap-align:center;
}
.model-single{ height:100%; }
.model-single img{ width:100%; height:100%; object-fit:contain; }
.model-single--cutout img{ filter:drop-shadow(0 10px 16px rgba(6,16,32,.18)); }
.gal-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-card);
  color:var(--c-dark);
  transition:background-color .18s ease;
}
.gal-btn:hover{ background:var(--c-blue); }
.gal-btn svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.gal-prev{ left:10px; }
.gal-next{ right:10px; }
.gal-dots{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; justify-content:center; gap:6px;
}
.gal-dots span{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-steel-300);
  transition:background-color .18s ease;
}
.gal-dots span.is-active{ background:var(--c-blue); }

/* Panel de marca (tarjetas sin foto real: ósmosis y CO2). No imita un equipo */
.sol-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-2);
  padding:var(--sp-3);
  background:
    url("images/waves.svg") 50% 50% / cover no-repeat,
    linear-gradient(160deg, var(--c-white) 0%, var(--c-green-soft) 140%);
  border-bottom:1px solid var(--c-bg-soft);
  text-align:center;
}
.sol-panel-icon{
  width:92px; height:92px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--c-white);
  color:var(--c-blue-text);
  box-shadow:0 8px 22px rgba(0,103,176,.16), inset 0 0 0 2px rgba(42,166,248,.45);
}
.sol-panel-label{
  font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  font-size:.88rem; color:var(--c-blue-text);
  background:rgba(255,255,255,.85);
  padding:.2rem .7rem; border-radius:999px;
}

.model-body{ padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.model-body h4{ font-family:var(--font-body); font-weight:700; color:var(--c-dark); font-size:1.4rem; line-height:1.2; letter-spacing:.01em; }
.model-tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
.model-tags li{
  background:var(--c-bg-soft); color:var(--c-steel-700);
  font-size:.85rem; font-weight:600; letter-spacing:.03em;
  padding:.15rem .6rem; border-radius:999px;
}
.model-body > p{ color:var(--c-steel-500); flex:1; }
.model-cta{ display:grid; gap:.5rem; }
.model-cta .btn{ padding-inline:.8rem; }
.link-cotizar{
  font-weight:700; color:var(--c-blue-text); text-decoration:none;
  font-size:1rem;
}
.link-cotizar:hover{ text-decoration:underline; }

/* ---------- Tablas (comparativa del molde → tabla de bridas HF) ---------- */
.table-scroll{ overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow-card); }
.compare-table{
  width:100%; min-width:560px;
  border-collapse:collapse;
  background:var(--c-white);
  font-size:1rem;
}
.compare-table th, .compare-table td{
  padding:.65rem 1rem; text-align:left;
  border-bottom:1px solid var(--c-bg-soft);
}
.compare-table thead th{
  background:var(--c-blue); color:var(--c-dark);
  text-transform:uppercase; letter-spacing:.05em; font-size:.82rem;
  line-height:1.25; vertical-align:bottom;
}
.compare-table tbody th{ font-weight:700; color:var(--c-dark); }
.compare-table tbody tr:nth-child(even){ background:#FAFBFC; }
.hf-table td, .hf-table tbody th{ white-space:nowrap; }
.hf-table td:nth-child(2){ text-align:center; }
.hf-table thead th:nth-child(2){ text-align:center; }

/* ---------- Detalle técnico (acordeones) ---------- */
.model-details .section-lead{ margin-bottom:var(--sp-2); }
.md-group-title{
  font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--c-blue-text);
  margin:var(--sp-6) 0 0;
}
.model-detail{
  background:var(--c-white);
  border:1px solid var(--c-bg-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  margin-top:var(--sp-3);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.model-detail summary{
  list-style:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem var(--sp-2);
  padding:var(--sp-3);
  cursor:pointer;
  border-radius:var(--radius-lg);
}
.model-detail summary::-webkit-details-marker{ display:none; }
.model-detail summary:hover{ background:#FAFBFC; }
.md-name{
  font-family:var(--font-body); font-weight:800; font-size:1.6rem;
  color:var(--c-dark); letter-spacing:.02em;
}
.md-sub{ color:var(--c-steel-500); font-size:1.05rem; flex:1 1 260px; }
.md-chevron{
  width:12px; height:12px; margin-left:auto; flex-shrink:0;
  border-right:2.5px solid var(--c-blue-text);
  border-bottom:2.5px solid var(--c-blue-text);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.model-detail[open] .md-chevron{ transform:rotate(225deg); }
.md-body{
  padding:var(--sp-3);
  border-top:1px solid var(--c-bg-soft);
}
.md-info{ display:grid; gap:var(--sp-3); }
.md-photo{
  background:var(--c-white);
  border:1px solid var(--c-bg-soft);
  border-radius:var(--radius);
  display:grid; place-items:center;
  padding:var(--sp-2);
  align-self:start;
  position:relative;
}
.md-photo img{ max-height:380px; width:auto; max-width:100%; object-fit:contain; }
.md-desc{ color:var(--c-steel-700); font-size:1.1rem; }
.specs{
  width:100%; border-collapse:collapse; margin-top:var(--sp-3); font-size:1rem;
}
.specs th, .specs td{
  text-align:left; padding:.5rem .75rem;
  border-bottom:1px solid var(--c-bg-soft);
  vertical-align:top;
}
.specs th{
  width:38%;
  color:var(--c-dark); font-weight:700;
  text-transform:uppercase; font-size:.85rem; letter-spacing:.05em;
}
.specs tr:nth-child(even){ background:#FAFBFC; }
.md-apps{ margin-top:var(--sp-3); color:var(--c-steel-500); }
.md-apps strong{ color:var(--c-dark); text-transform:uppercase; font-size:.9rem; letter-spacing:.05em; }
/* Gases disueltos: las tres aplicaciones en lista y el caso de la portada de fdscontrol.com */
.md-apps .check-list{ margin-top:.6rem; }
.md-caso{ margin-top:.9rem; }
.md-datos{
  margin-top:var(--sp-3);
  background:var(--c-bg-soft);
  border-left:3px solid var(--c-blue);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--sp-2) var(--sp-3);
}
.md-datos h4{
  font-size:.95rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--c-blue-text); margin-bottom:.6rem;
}
/* Los hijos de la grilla del acordeón no se estiran al ancho de su contenido: así la tabla
   de SaniFlow HF (560 px) queda dentro de su .table-scroll y se desliza en el celular */
.md-info > *{ min-width:0; }
.md-tabla{ margin-top:var(--sp-4); }
.md-tabla h4{ font-size:1.15rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:var(--sp-2); }
.md-tabla-nota{ margin-top:.7rem; color:var(--c-steel-500); font-size:.95rem; }
.md-cot{ margin-top:var(--sp-3); }

/* Lista con viñeta cuadrada celeste (skids del molde) */
.check-list{ display:grid; gap:.55rem; }
.check-list li{ padding-left:1.4rem; position:relative; color:var(--c-steel-700); }
.check-list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:.55rem; height:.55rem; border-radius:2px;
  background:var(--c-blue);
}

/* ---------- Consumibles y repuestos ---------- */
.accessories{ background:var(--c-bg-soft); }
.acc-grid{ display:grid; gap:var(--sp-3); margin-top:var(--sp-4); }
.acc-card{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--sp-3);
}
.acc-card h3{ font-size:1.2rem; }
.acc-mat{ color:var(--c-steel-500); font-size:.95rem; margin:.25rem 0 var(--sp-2); }
.acc-parts{ width:100%; border-collapse:collapse; font-size:.98rem; }
.acc-parts tr{ display:grid; gap:.1rem; padding:.45rem 0; border-bottom:1px solid var(--c-bg-soft); }
.acc-parts td{ padding:0; }
.acc-parts td:last-child{ white-space:nowrap; }
/* Sin números de parte (15-10-2026): queda una sola celda y tiene que poder partir */
.acc-parts td:only-child{ white-space:normal; }
.acc-parts code{ color:var(--c-dark); font-weight:600; }

.acc-plazo{ font-weight:700; color:var(--c-blue-text); }
.acc-cta{ margin-top:var(--sp-4); font-size:1.1rem; }

/* ---------- Somos fabricantes (formato Siemens) ---------- */
.makers{
  background:var(--c-blue-deep);
  color:var(--c-white);
  padding-block:clamp(64px, 9vw, 120px);
}
.makers-inner{ display:grid; gap:var(--sp-4); align-items:center; }
.makers h2{ color:var(--c-blue-bright); }
.makers-lead{
  color:rgba(255,255,255,.75); font-size:clamp(1.15rem, 2vw, 1.35rem);
  margin-top:var(--sp-2); max-width:48ch;
}
.makers-points{ display:grid; gap:var(--sp-2); margin:var(--sp-4) 0; }
.makers-points li{
  display:grid; gap:.15rem;
  padding-left:1.5rem; position:relative;
}
.makers-points li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:.6rem; height:.6rem; border-radius:2px;
  background:var(--c-white);
}
.makers-points strong{ color:var(--c-blue-bright); font-size:1.15rem; }
.makers-points span{ color:rgba(255,255,255,.72); }
/* Foto real de planta (no PNG recortado): recuadro con radio y sombra */
.makers-photo img{
  border-radius:var(--radius-lg);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}

/* ---------- Qué datos necesitamos (lugar de Skids del molde) ---------- */
.datos-grid{ display:grid; gap:var(--sp-3); margin-top:var(--sp-6); }
.datos-col{
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--c-bg-soft);
  border-top:4px solid var(--c-blue);
  border-radius:var(--radius) var(--radius) var(--radius-lg) var(--radius-lg);
  padding:var(--sp-3);
}
.datos-col h3{ font-size:1.3rem; }
.datos-col .check-list{ flex:1; }
.datos-cierre{
  margin-top:var(--sp-6);
  display:grid; gap:var(--sp-2); justify-items:start;
}
.datos-f5{ color:var(--c-dark); font-weight:600; font-size:1.15rem; max-width:70ch; }
.datos-d2{ color:var(--c-steel-500); max-width:70ch; }
.datos-cierre .btn{ margin-top:var(--sp-1); }

/* ---------- Formulario ---------- */
.quote{
  background:var(--c-blue-deep);
  color:var(--c-white);
}
.quote .eyebrow{ color:var(--c-white); }
.quote-inner{ display:grid; gap:var(--sp-4); }
.quote-intro h2{ color:var(--c-blue-bright); }
.quote-intro > p{ color:rgba(255,255,255,.75); margin-top:var(--sp-2); max-width:46ch; font-size:1.15rem; }
.quote-points{ margin-top:var(--sp-3); display:grid; gap:.6rem; }
.quote-points li{
  padding-left:1.6rem; position:relative; color:rgba(255,255,255,.85);
}
.quote-points li::before{
  content:"✓"; position:absolute; left:0;
  color:var(--c-blue); font-weight:800;
}
.quote-intro > p.quote-nota{
  margin-top:var(--sp-4);
  padding-left:.9rem;
  border-left:3px solid var(--c-blue);
  font-size:1rem;
  color:rgba(255,255,255,.72);
}
.quote-form{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 48px rgba(6,16,32,.14);
  padding:var(--sp-4) var(--sp-3);
  color:var(--c-steel-700);
  display:grid; gap:var(--sp-2);
}
.form-row{ display:grid; gap:var(--sp-2); }
.form-field label{
  display:block; font-weight:700; font-size:.95rem;
  letter-spacing:.02em; color:var(--c-dark); margin-bottom:.25rem;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  font-family:var(--font-body); font-size:1.05rem; color:var(--c-steel-700);
  padding:.55rem .7rem;
  border:1.5px solid var(--c-steel-300);
  border-radius:var(--radius);
  background:var(--c-white);
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:#6B747B; opacity:1; }
.form-field textarea{ resize:vertical; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover{ border-color:var(--c-steel-500); }
.form-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23545D64' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  padding-right:2.2rem;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(42,166,248,.18);
}
.form-field.invalid input, .form-field.invalid select{ border-color:var(--c-error); }
.field-error{ display:none; color:var(--c-error); font-size:.9rem; margin-top:.25rem; }
.form-field.invalid .field-error{ display:block; }
.field-hint{ color:var(--c-steel-500); font-size:.9rem; margin-top:.25rem; }
.form-feedback{ font-weight:600; min-height:1.4em; }
.form-feedback.ok{ color:#1B7F4B; }
.form-feedback.error{ color:var(--c-error); }

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(160deg, var(--c-blue) 0%, var(--c-cyan) 45%, var(--c-teal) 100%);
  color:rgba(16,21,28,.82);
  padding-block:var(--sp-6) var(--sp-3);
}
.footer-grid{ display:grid; gap:var(--sp-4); }
.footer-brand img{ width:150px; }
.footer-brand p{ margin-top:var(--sp-2); max-width:34ch; }
.site-footer h2{
  color:var(--c-dark); font-size:1rem; letter-spacing:.1em;
  margin-bottom:var(--sp-2);
}
.footer-contact p{ margin-bottom:.4rem; }
.site-footer a{ color:var(--c-dark); font-weight:700; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-nav ul{ display:grid; gap:.4rem; }
.footer-legal{
  margin-top:var(--sp-6);
  border-top:1px solid rgba(16,21,28,.18);
  padding-top:var(--sp-3);
  font-size:.82rem;
  color:rgba(16,21,28,.78);
  width:100%;
}
.footer-legal p{ max-width:none; }
.footer-legal p + p{ margin-top:.4rem; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* ---------- Breakpoints ---------- */
@media (max-width: 419px){
  .header-actions .lang-toggle{ display:none; }
  .main-nav.open .nav-lang{ display:flex; padding:.9rem 0 .4rem; }
  .main-nav.open .nav-lang .lang-toggle[hidden]{ display:none; }
  /* Rótulos largos en mayúsculas (ANTIINCRUSTANTE, INSTRUMENTACIÓN) ensanchaban la tabla a 320 px */
  .specs th{ letter-spacing:.02em; }
  .specs th, .specs td{ overflow-wrap:anywhere; }
}
@media (max-width: 560px){
  .brand img{ width:96px; }
  .header-inner{ gap:.6rem; }
  .lang-toggle button{ padding:.25rem .4rem; font-size:.8rem; }
  .btn-header{ padding:.4rem .7rem; font-size:.95rem; }
  .nav-burger{ width:38px; height:38px; }
  .hero-ctas .btn{ flex:1 1 auto; }
}

@media (min-width: 640px){
  .form-row{ grid-template-columns:1fr 1fr; }
  .vp-grid{ grid-template-columns:1fr 1fr; }
  .model-grid{ grid-template-columns:repeat(2, 1fr); }
  .sol-grid > .model-card{ flex-basis:calc((100% - var(--sp-3)) / 2); }
  .acc-grid{ grid-template-columns:repeat(2, 1fr); }
  .datos-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width: 900px){
  .main-nav{ display:block; margin-left:var(--sp-3); }
  .nav-burger{ display:none; }
  /* El video ocupa la mitad derecha, a sangre, y se funde por la izquierda */
  .hero{ min-height:clamp(560px, 46vw, 680px); display:flex; align-items:center; }
  .hero-inner{ width:100%; padding-block:clamp(3rem, 6vw, 5rem); }
  .hero-copy{ max-width:min(560px, 47%); }
  .hero-title{ width:auto; font-size:clamp(3rem, 5vw, 4.2rem); }
  .hero-media{
    position:absolute; top:0; right:0; bottom:0;
    width:52%;
    aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 28%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 28%);
  }
  .makers-inner{ grid-template-columns:1fr 1fr; gap:var(--sp-6); }
  .quote-inner{ grid-template-columns:.8fr 1.2fr; align-items:start; }
  .footer-grid{ grid-template-columns:1.2fr 1fr .6fr; }
}

@media (min-width: 1100px){
  :root{ --photo-h: 260px; }
  .vp-grid{ grid-template-columns:repeat(4, 1fr); }
  .sol-grid > .model-card{ flex-basis:calc((100% - 3 * var(--sp-3)) / 4); }
  .acc-grid{ grid-template-columns:repeat(4, 1fr); }
  .datos-grid{ grid-template-columns:repeat(3, 1fr); }
  .md-info{ grid-template-columns:.75fr 1.25fr; align-items:start; gap:var(--sp-4); }
  /* Acordeones sin foto: texto a la izquierda, tabla de specs a la derecha */
  .md-info--sinfoto{ grid-template-columns:1fr; }
  .md-info--sinfoto .md-text{
    display:grid; grid-template-columns:1fr 1fr; column-gap:var(--sp-6);
    grid-template-areas:
      "desc  specs"
      "apps  specs"
      "extra specs"
      "cot   specs";
    grid-template-rows:auto auto auto 1fr;
    align-items:start;
  }
  .md-info--sinfoto .md-desc{ grid-area:desc; }
  .md-info--sinfoto .specs{ grid-area:specs; margin-top:0; }
  .md-info--sinfoto .md-apps{ grid-area:apps; }
  .md-info--sinfoto .md-datos{ grid-area:extra; }
  .md-info--sinfoto .md-cot{ grid-area:cot; }
  /* SaniFlow HF: la tabla de bridas ocupa el hueco bajo las aplicaciones */
  .md-info--tabla .md-text{
    grid-template-areas:
      "desc  specs"
      "apps  specs"
      "tabla specs"
      "cot   specs";
    grid-template-rows:auto auto auto 1fr;
  }
  .md-info--tabla .compare-table{ min-width:0; }
  .md-info--sinfoto .md-tabla{ grid-area:tabla; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .model-card:hover{ transform:none; }
  /* Sin video: queda el póster fijo */
  .hero-video{ display:none !important; }
}

/* ==========================================================================
   Capa Exova (14-10-2026) — el lenguaje visual de la web de la marca
   (exovatech.com) sobre esta landing. Pedido de Ernesto: actualizar las tres
   landings (SaniFlow, AgileReact y Agua Industrial) con el diseño de Exova.
   Misma capa que SaniFlow (el molde), más los componentes propios de esta.
   Cambia la gráfica, no el contenido ni el comportamiento: mismas secciones,
   mismos textos, mismo formulario y mismo circuito de envío.
   Va al final para pisar las reglas de arriba sin reescribirlas. Lo que cambia
   respecto del sistema de julio:
   - Texto corrido en Barlow (antes Barlow Condensed); la condensada queda para
     títulos de sección, cejillas, etiquetas y botones, como en la web.
   - Botones píldora en mayúsculas condensadas; tarjetas de radio 20 que se
     levantan al pasar; paneles en el hielo de la web (#F1F6FB) en vez de gris.
   - Hero sobre el fondo claro de la web (blanco a hielo con brillos celeste y
     aguamarina) en vez del verde claro con la red de puntos.
   - Franjas oscuras con el degradé azul noche y la trama de puntos de la web;
     títulos en blanco y cejillas en cian (antes título en azul eléctrico).
   - Tablas con encabezado oscuro; pie azul noche liso con el logo blanco (el
     degradé celeste del pie no va con la web: Ernesto, 13-10-2026).
   ========================================================================== */
:root{
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --c-bg-soft:    #F1F6FB;   /* hielo de la web (antes gris #F5F5F5) */
  --c-ice-2:      #E7F0F8;
  --c-line:       #E3E8EE;
  --c-blue-night: #070B22;   /* pie y fondo profundo de las franjas */
  --radius: 12px; --radius-lg: 20px; --radius-xl: 28px;
  --shadow-hover: 0 18px 48px rgba(6,16,32,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
  --grad-marca: linear-gradient(110deg, var(--c-blue) 0%, var(--c-cyan) 45%, var(--c-teal) 100%);
  --grad-oscuro: radial-gradient(1200px 600px at 85% -10%, rgba(42,166,248,.22), transparent 60%),
                 radial-gradient(900px 500px at -10% 110%, rgba(101,221,209,.14), transparent 60%),
                 linear-gradient(180deg, var(--c-blue-deep), var(--c-blue-night));
}
body{ font-size:.96rem; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h2{ font-family:var(--font-cond); line-height:1.04; letter-spacing:.005em; }
h3{ font-family:var(--font-body); }
::selection{ background:rgba(42,166,248,.28); color:var(--c-dark); }

/* Cejilla: rayita con el degradé de marca + etiqueta condensada */
.eyebrow, .hero-brandline{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-cond); font-weight:700; letter-spacing:.14em;
}
.eyebrow::before, .hero-brandline::before{
  content:""; flex:none; width:26px; height:3px; border-radius:3px; background:var(--grad-marca);
}

/* Botones: píldora, condensada en mayúsculas */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px; border-width:1.5px; border-radius:999px;
  font-family:var(--font-cond); font-weight:700; font-size:.95rem; line-height:1.15;
  letter-spacing:.06em; text-transform:uppercase;
  transition:background-color .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn-primary:hover{ color:var(--c-dark); box-shadow:0 10px 26px rgba(0,154,255,.28); }
.btn-secondary{ border-color:rgba(16,21,28,.22); }
.btn-secondary:hover{ box-shadow:none; }
.btn-lg{ min-height:54px; padding:0 30px; font-size:1.02rem; }
.btn-block{ display:flex; width:100%; }
.btn-header{ min-height:42px; padding:0 18px; font-size:.9rem; }

/* Encabezado: vidrio blanco, navegación como la de la web */
.site-header{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:rgba(16,21,28,.06);
}
.site-header.is-scrolled{ box-shadow:none; }
.brand img{ width:128px; }
.main-nav ul{ gap:2px; }
.main-nav a{
  display:inline-block; padding:10px 14px; border-radius:10px;
  font-family:var(--font-body); font-weight:600; font-size:.92rem; letter-spacing:0; text-transform:none;
  transition:background-color .2s, color .2s;
}
.main-nav a::after{ display:none; }
.main-nav a:hover{ background:rgba(42,166,248,.1); color:var(--c-dark); }
.main-nav.open a{ display:block; padding:.85rem .25rem; border-radius:0; font-size:1.02rem; }
.main-nav.open a:hover{ background:none; }
.lang-toggle{ gap:2px; padding:3px; border-color:rgba(16,21,28,.12); border-radius:999px; background:rgba(255,255,255,.6); }
.lang-toggle button{ border-radius:999px; font-family:var(--font-cond); font-weight:700; letter-spacing:.06em; }
.nav-burger{ width:44px; height:44px; padding:11px; border-color:rgba(16,21,28,.12); border-radius:12px; background:var(--c-white); }

/* Hero: el fondo claro de la web en vez del verde claro con la red de puntos */
.hero{
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(42,166,248,.16), transparent 62%),
    radial-gradient(700px 480px at 70% 100%, rgba(101,221,209,.16), transparent 60%),
    linear-gradient(180deg, var(--c-white) 0%, var(--c-bg-soft) 100%);
}
.hero::before{ display:none; }
/* El h1 «Agua industrial» queda en azul AA: no es un wordmark (CLAUDE.md §3) */
.hero-sub{ font-weight:500; line-height:1.4; color:var(--c-dark); }
.hero-industries{ font-family:var(--font-cond); letter-spacing:.12em; }
.hero-feature{ font-family:var(--font-cond); }

/* Propuesta de valor: tarjetas e íconos de la web */
.vp-card{ border:1px solid rgba(16,21,28,.08); border-radius:var(--radius-lg); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.vp-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.vp-icon{ width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg, rgba(42,166,248,.14), rgba(101,221,209,.18)); }

/* Franjas oscuras: degradé azul noche + trama de puntos (la .band-dark de la web) */
.trust-band, .makers, .quote{ position:relative; isolation:isolate; overflow:hidden; background:var(--grad-oscuro); }
.trust-band::before, .makers::before, .quote::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.35; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.trust-band :focus-visible, .makers :focus-visible, .quote-intro :focus-visible{ outline-color:var(--c-cyan); }
.trust-accent{ font-family:var(--font-cond); font-weight:800; font-size:clamp(1.35rem, 2.2vw, 1.6rem); letter-spacing:.01em; color:var(--c-white); }
.trust-badges li > span:last-child{ color:rgba(255,255,255,.74); font-size:.95rem; }
.trust-industries strong{ font-family:var(--font-cond); letter-spacing:.08em; }
.makers .eyebrow, .quote .eyebrow{ color:var(--c-cyan); }
.makers h2, .quote-intro h2{ color:var(--c-white); }
.makers-points li::before{ width:.55rem; height:.55rem; border-radius:50%; background:var(--c-cyan); }
.makers-points strong{ color:var(--c-white); font-size:1.08rem; }
.quote-points li::before{ color:var(--c-cyan); }

/* Modelos: filtros y tarjetas de la web */
.filter-group legend{ font-family:var(--font-cond); letter-spacing:.12em; }
.chip{
  font-family:var(--font-cond); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  background:var(--c-white); border:1px solid rgba(16,21,28,.1);
}
.chip:hover{ background:var(--c-ice-2); border-color:rgba(16,21,28,.18); }
.chip.active, .chip.active:hover{ background:var(--c-blue); border-color:var(--c-blue); color:var(--c-dark); }
.filter-empty{ border-radius:var(--radius-lg); }
.model-card{ border:1px solid rgba(16,21,28,.08); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.model-card:hover{ box-shadow:var(--shadow-hover); border-color:rgba(42,166,248,.35); }
.model-photo{ background:linear-gradient(160deg, var(--c-white), var(--c-bg-soft) 70%); }
.model-body h3{ font-family:var(--font-display); font-weight:800; font-size:1.35rem; letter-spacing:-.01em; }
.model-tags li{ font-family:var(--font-cond); background:var(--c-bg-soft); border:1px solid rgba(16,21,28,.06); }
.cert-flag, .md-cert{
  font-family:var(--font-cond); font-weight:700; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  border-radius:6px; padding:.22rem .6rem;
}

/* Tabla comparativa: encabezado oscuro, como las tablas de la web */
.compare h3{ font-family:var(--font-cond); font-weight:800; }
.table-scroll{ border:1px solid var(--c-line); border-radius:var(--radius-lg); box-shadow:none; background:var(--c-white); }
.compare-table th, .compare-table td{ border-bottom-color:var(--c-line); }
.compare-table thead th{ background:var(--c-dark); color:var(--c-white); font-family:var(--font-cond); font-weight:700; letter-spacing:.06em; }
.compare-table tbody tr:nth-child(even){ background:#FAFCFE; }
.compare-table tbody tr:hover{ background:var(--c-bg-soft); }

/* Detalle por modelo */
.model-detail{ border:1px solid rgba(16,21,28,.08); }
.model-detail summary:hover{ background:var(--c-bg-soft); }
.md-name{ font-family:var(--font-display); font-size:1.45rem; letter-spacing:-.01em; }
.md-body{ border-top-color:var(--c-line); }
/* Fotos JPG con fondo blanco 255 (CLAUDE.md §3): sus paneles siguen BLANCOS. Sobre el hielo
   de la web la foto se veía como un recuadro blanco (tanque, ProFlow, carbón, LifePure…) */
.md-photo{ background:var(--c-white); border-color:var(--c-line); border-radius:var(--radius-lg); }
.model-photo.model-photo--white{ background:var(--c-white); }
.specs th{ font-family:var(--font-cond); letter-spacing:.06em; }
.specs th, .specs td{ border-bottom-color:var(--c-line); }
.specs tr:nth-child(even){ background:#FAFCFE; }
.md-apps strong{ font-family:var(--font-cond); letter-spacing:.08em; }
.md-note{ border-left-width:4px; }

/* Configurador: panel de hielo de la web */
.configurator{ background:linear-gradient(160deg, var(--c-white) 0%, var(--c-bg-soft) 60%, var(--c-ice-2) 100%); border:1px solid rgba(16,21,28,.07); border-radius:var(--radius-xl); }
.config-title, .config-result-label, .config-field label, .config-field .config-label{ font-family:var(--font-cond); }
.config-field select{ min-height:46px; border-radius:var(--radius); }
.config-fixed{ border-radius:var(--radius); }
.config-result{ border:1px solid var(--c-line); border-radius:var(--radius-lg); }

/* Accesorios */
.acc-card{ border:1px solid rgba(16,21,28,.08); }
.acc-parts td{ border-bottom-color:var(--c-line); }

/* Skids: título en tinta, como todos los títulos sobre blanco de la web */
.skids-copy h2{ color:var(--c-dark); }

/* Formulario: la tarjeta y los campos de la web */
.quote-form{ border:1px solid var(--c-line); border-radius:var(--radius-xl); box-shadow:var(--shadow-hover); padding:clamp(22px, 3.4vw, 40px); }
.form-field label{ font-family:var(--font-body); font-weight:600; font-size:.9rem; letter-spacing:0; }
.form-field input, .form-field select, .form-field textarea{
  min-height:48px; padding:11px 14px; border-radius:var(--radius); color:var(--c-dark); font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}
.config-field select:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ box-shadow:0 0 0 4px rgba(42,166,248,.2); }

/* Pie: azul noche liso y logo blanco, como el de la web */
.site-footer{ background:var(--c-blue-night); color:rgba(255,255,255,.7); border-top:1px solid rgba(255,255,255,.08); padding-block:clamp(56px, 7vw, 88px) var(--sp-3); }
.site-footer :focus-visible{ outline-color:var(--c-cyan); }
.site-footer h2{ font-family:var(--font-cond); font-size:.9rem; letter-spacing:.14em; color:var(--c-white); }
.site-footer a{ color:rgba(255,255,255,.84); font-weight:500; }
.site-footer a:hover{ color:var(--c-white); text-underline-offset:3px; }
.footer-legal{ border-top-color:rgba(255,255,255,.1); color:rgba(255,255,255,.55); }

@media (prefers-reduced-motion: reduce){
  .vp-card:hover{ transform:none; }
}

/* Componentes propios de Agua Industrial */
.sol-group-title, .md-group-title, .md-datos h4, .md-tabla h4{ font-family:var(--font-cond); }
.sol-group-title::after{ background:var(--c-line); }
.sol-panel{
  background:url("images/waves.svg") 50% 50% / cover no-repeat,
             linear-gradient(160deg, var(--c-white) 0%, var(--c-ice-2) 140%);
  border-bottom-color:var(--c-line);
}
.sol-panel-icon{ box-shadow:0 8px 22px rgba(0,103,176,.14), inset 0 0 0 2px rgba(42,166,248,.4); }
.sol-panel-label{ font-family:var(--font-cond); }
.model-photo--white{ border-bottom-color:var(--c-line); }
.model-body h4{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.01em; }
.datos-col{ background:linear-gradient(160deg, var(--c-white) 0%, var(--c-bg-soft) 60%, var(--c-ice-2) 100%); border:1px solid rgba(16,21,28,.07); border-top:4px solid var(--c-blue); }
.acc-parts tr{ border-bottom-color:var(--c-line); }
.quote-intro > p.quote-nota{ border-left-color:var(--c-cyan); }

/* Encabezado en celular: mismas medidas compactas de antes (logo + idioma +
   Cotizar + menú entran en 360 px); esta capa las había pisado */
@media (max-width: 560px){
  .brand img{ width:96px; }
  .btn-header{ min-height:38px; padding:0 12px; font-size:.82rem; letter-spacing:.04em; }
  .lang-toggle{ padding:2px; }
  .nav-burger{ width:40px; height:40px; padding:10px; }
}

/* Celulares angostos (360 px): las mayúsculas espaciadas del botón y del
   selector de idioma ensanchaban el encabezado 20 px */
@media (max-width: 400px){
  .header-inner{ gap:.4rem; }
  .brand img{ width:90px; }
  .lang-toggle{ padding:1px; gap:0; }
  .lang-toggle button{ padding:.2rem .32rem; letter-spacing:.02em; }
  .btn-header{ padding:0 10px; font-size:.8rem; letter-spacing:.02em; }
  .nav-burger{ width:38px; height:38px; padding:9px; }
}