/* Nitidez: renderizado nítido en hero, about y product cards (WebKit, IE) */
.hero-slide img,
.about-hero-bg img,
.product-card-img{
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: bicubic;
}
/* Carrusel productos: renderizado suave para evitar pixelación al escalar */
.productos-hero-slide img{
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.1);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.14);
  --brand: #6ee7ff;
  --accent: #f2c200;
  --topbar: #1f2e3d;
  --topbar-h: 36px;
  /* La fuente se carga con wght@200..800: declarar 850 o 900 renderiza igual
     que 800. La jerarquia de titulos se apoya en tamano y tracking, no en
     pesos que no existen. */
  /* Header (claro) + menú (azul premium) */
  --winter: #f5f7fa; /* vuelve el header a “blanco invierno” */
  --menuBlue: #0d243a;
  --menuBlue2: #0a1b2b;
  --menuLine: rgba(255,255,255,.14);
  --naval: #36d3ff;
  /* Enlaces y foco sobre fondo claro: el cian --naval solo llega a 1,66:1 sobre #f8f8f8 */
  --link-on-light: #0b5cff;
  --focus-on-light: #0b5cff;
  --focus-on-dark: #36d3ff;
  /* Header: logo lo más grande posible sin deformar */
  --header-h: 104px;
  --logo-h: 82px;
  --shadow: 0 18px 45px rgba(0,0,0,.45);
  --radius: 16px;
  --radius-sm: 12px;
  /* Layout premium/wide (antes: 1120px) */
  --max: 1280px;
  --pad: clamp(16px, 3vw, 28px);
  /* Safe area iPhone (notch/home indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Tipografía: Plus Jakarta Sans (variable) con fallback a InterVar local */
  --font: "Plus Jakarta Sans", "InterVar", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  /* Karl Dose + Valdemar: fusión (azul K-D + naval Valdemar + acento ámbar) */
  --kd-navy: #0c2233;
  --kd-blue: #153d5c;
  --kd-amber: #e89b2c;
  --kd-nav-blend: color-mix(in srgb, var(--kd-navy) 72%, var(--naval) 28%);
  /* SCP Sintersa: azul instrumentacion + acento cobre (conector/contacto) */
  --scp-navy: #14293f;
  --scp-blue: #1f4a70;
  --scp-accent: #b06c3a;
  --scp-nav-blend: color-mix(in srgb, var(--scp-navy) 72%, var(--naval) 28%);
  /* Wilson Walton International: azul casco + acento cobre (Cuproline) */
  --ww-navy: #102a35;
  --ww-blue: #1b4a5c;
  --ww-accent: #a45f3c;
  --ww-nav-blend: color-mix(in srgb, var(--ww-navy) 72%, var(--naval) 28%);
  /* Üntel Kablo: misma línea visual (azul oscuro + acento) para estandarizar páginas partner */
  --uk-navy: #0d2838;
  --uk-blue: #1a4560;
  --uk-accent: #1e7a6b;
  --uk-nav-blend: color-mix(in srgb, var(--uk-navy) 72%, var(--naval) 28%);
  /* Ferri: azul corporativo + grafito tecnico */
  --fr-navy: #232232;
  --fr-blue: #2d7ec0;
  --fr-accent: #5b9fd2;
  --fr-nav-blend: color-mix(in srgb, var(--fr-navy) 48%, var(--fr-blue) 52%);
  /* Norwegian Greentech: agua limpia, ingeniería nórdica y acuicultura */
  --ngt-navy: #0f3942;
  --ngt-teal: #0f5b61;
  --ngt-accent: #33a68b;
  --ngt-nav-blend: color-mix(in srgb, var(--ngt-navy) 45%, var(--ngt-accent) 55%);
  /* Detegasa: tratamiento residuos (verde/ambiental) */
  --dt-navy: #0d2f3a;
  --dt-blue: #1a4a5c;
  --dt-accent: #2a8b7a;
  --dt-nav-blend: color-mix(in srgb, var(--dt-navy) 72%, var(--naval) 28%);
  /* Meson / Válvulas navales: industrial azul/rojo (valve specialists Scandinavia) */
  --vl-navy: #0c1f2e;
  --vl-blue: #1a3d52;
  --vl-accent: #c43d2d;
  --vl-nav-blend: color-mix(in srgb, var(--vl-navy) 72%, var(--naval) 28%);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font);
  font-weight: 450;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
}

/* Mantiene simetría al abrir menú (sin saltos por scrollbars) */
body.menu-open{
  overflow: hidden;
  padding-right: var(--scrollbar-comp, 0px);
}
body.menu-open::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(11,18,32,.22);
  backdrop-filter: blur(3px);
  z-index: 40; /* debajo del header (z-index 50) */
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button,input,textarea{ font: inherit; }

.container{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Evita que el header sticky tape títulos al navegar por anclas */
section[id]{
  scroll-margin-top: calc(var(--header-h) + 14px);
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  /* Se pinta sobre la top-bar clara: necesita fondo propio y opaco para verse. */
  background: var(--menuBlue);
  border: 1px solid var(--naval);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus{ left: 10px; z-index: 9999; }
.skip-link:focus-visible{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
}

/* Barra superior: contacto, horario y redes (fondo 50% más claro que winter, texto en negrita) */
.top-bar{
  /* Fondo 50% más claro que el header (--winter); altura en :root (--topbar-h) */
  background: #fafbfc; /* fallback */
  background: color-mix(in srgb, var(--winter) 50%, white);
  /* Altura minima, no fija: a 375px el contenido envuelve en tres lineas y
     ocupa 51,5px. Con height fija se salia -8,3px por arriba y +43,3px por
     abajo, cortando el telefono principal y el email, que son justo los datos
     que sostienen la promesa de "Emergencias 24/7". */
  min-height: var(--topbar-h);
  border-bottom: 1px solid rgba(16,24,40,.08);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(16,24,40,.75);
}
.top-bar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--topbar-h);
  padding: 4px calc(var(--pad) * 2);
}
.top-bar-info{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.top-bar-link{
  color: rgba(16,24,40,.82);
  font-weight: 600;
  transition: color .14s ease;
}
.top-bar-link:hover{
  color: rgba(16,24,40,.95);
}
.top-bar-sep{
  color: rgba(16,24,40,.3);
  user-select: none;
  font-size: 10px;
  font-weight: 600;
}
.top-bar-text{
  color: rgba(16,24,40,.68);
  font-weight: 600;
}
.top-bar-social{
  display: flex;
  align-items: center;
  gap: 4px;
}
.top-bar-social-link{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: rgba(16,24,40,.6);
  transition: color .14s ease, background .14s ease;
}
.top-bar-social-link:hover{
  color: rgba(16,24,40,.88);
  background: rgba(16,24,40,.06);
}
.top-bar-social-link svg{
  width: 12px;
  height: 12px;
}

@media (max-width: 720px){
  .top-bar{ font-size: 10px; }
  .top-bar-info .top-bar-sep:nth-of-type(2),
  .top-bar-info .top-bar-text{ display: none; }
  .top-bar-social-link{ width: 18px; height: 18px; }
  .top-bar-social-link svg{ width: 11px; height: 11px; }
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: var(--winter);
  border-bottom: 1px solid rgba(16,24,40,.10);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 28px;
  padding: 0 calc(var(--pad) * 2);
  min-height: var(--header-h);
}

.logo-box{
  display:flex;
  align-items:center;
  gap: 20px;
  padding: 24px 28px;
  background: transparent;
  border-radius: 0;
  min-height: var(--header-h);
}
.logo-img{
  height: var(--logo-h); /* +50% adicional vs 60px => 90px (base original 40px) */
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

.topnav{
  display:flex;
  align-items:center;
  gap: 36px;
  padding: 0 calc(var(--pad) * 2);
  border-radius: 0;
  border: 0;
  background: transparent;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
.brand-name{
  display: grid;
  line-height: 1.1;
}
.brand-name strong{ font-weight: 750; letter-spacing: .2px; }
.brand-name span{ font-size: 13px; color: var(--muted); }

.nav{
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav a{
  padding: 20px 16px;
  border-radius: 10px;
  /* Header es claro => links oscuros para contraste */
  color: rgba(16,24,40,.80);
  border: 1px solid transparent;
  font-size: 12px;
  letter-spacing: .3px;
}
.nav a:hover{
  color: rgba(16,24,40,.95);
  border-color: rgba(16,24,40,.12);
  background: rgba(16,24,40,.05);
}
.nav a[aria-current="page"]{
  color: rgba(16,24,40,.95);
  border-color: rgba(54,211,255,.28);
  background: rgba(54,211,255,.14);
}

/* Submenú Productos / Representamos */
.nav-item{
  display: inline-flex;
  align-items: center;
  position: relative;
}
.nav-item-row{ display: inline-flex; align-items: center; }
.nav-expand-btn{ display: none; } /* Solo visible en móvil */
.nav-sublist{
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 6px 0;
  margin-top: 4px;
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.12);
  background: var(--winter);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  z-index: 20;
}
.nav-item-products:hover .nav-sublist,
.nav-item-products:focus-within .nav-sublist,
.nav-item-representamos:hover .nav-sublist,
.nav-item-representamos:focus-within .nav-sublist{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-sublist li{ margin: 0; }
.nav-sublist a{
  display: block;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(16,24,40,.85);
  border-radius: 8px;
  margin: 0 6px;
  width: auto;
}
.nav-sublist a:hover{
  background: rgba(16,24,40,.06);
  color: rgba(16,24,40,.95);
}

.topbar .btn{
  border-color: rgba(16,24,40,.14);
  background: rgba(16,24,40,.04);
  color: rgba(16,24,40,.92);
}
.topbar .btn:hover{
  background: rgba(16,24,40,.06);
  border-color: rgba(16,24,40,.20);
}

/* Botón "Menú" (premium) */
.topbar .menu-btn{
  border-color: rgba(13,36,58,.18);
  background: linear-gradient(180deg, rgba(13,36,58,.92), rgba(10,27,43,.92));
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.topbar .menu-btn:hover{
  border-color: rgba(54,211,255,.25);
  background: linear-gradient(180deg, rgba(13,36,58,.98), rgba(10,27,43,.98));
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.topbar .menu-btn:active{
  transform: translateY(1px);
}
.topbar .menu-btn:focus-visible{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.topbar .menu-btn[aria-expanded="true"]{
  border-color: rgba(54,211,255,.32);
  background: linear-gradient(180deg, rgba(54,211,255,.18), rgba(13,36,58,.92));
}

.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.lang-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.14);
  background: rgba(16,24,40,.04);
  color: rgba(16,24,40,.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
a.lang-pill{
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
a.lang-pill:hover{
  background: rgba(16,24,40,.08);
  border-color: rgba(16,24,40,.22);
  color: rgba(16,24,40,.96);
}
.lang-pill.is-active{
  border-color: rgba(54,211,255,.28);
  background: rgba(54,211,255,.14);
  color: rgba(16,24,40,.96);
}
.lang-separator{
  color: rgba(16,24,40,.35);
  font-size: 12px;
}

.header-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}
.btn:active{ transform: translateY(1px); }
.btn.primary{
  /* Antes: degradado cian->violeta al 16%/14% de alfa. Con esa opacidad el
     boton principal pesaba igual que el secundario y no se leia como la accion
     de la pagina. Ahora solido, con el cian propio (--naval) y texto oscuro. */
  background: var(--naval);
  border-color: var(--naval);
  color: #06202b;
  font-weight: 650;
}
.btn.primary:hover{
  background: #5cdcff;
  border-color: #5cdcff;
}
.btn.primary:active{
  background: #22c4f0;
  border-color: #22c4f0;
}
.btn.small{ padding: 8px 12px; border-radius: 12px; }

.menu-btn{
  display: none;
}

.hero{
  position: relative;
  width: 100%;
  /* Proporción estándar 16:9 para hero/carrusel (norma web) */
  aspect-ratio: 16 / 9;
  min-height: min(400px, 56vh);
  max-height: min(720px, calc(100svh - var(--header-h) - var(--topbar-h) - 24px));
  --hero-pad: clamp(18px, 4vh, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hero-pad) 0 calc(var(--hero-pad) + 64px); /* +espacio para flecha */
  overflow: hidden;
}
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slider{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slides{
  height: 100%;
  display: flex;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero-slide{
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.hero-slide picture,
.hero-slide img{
  width: 100%;
  height: 100%;
  display: block;
}
.hero-slide img{
  object-fit: cover;
  object-position: center;
  animation: hero-slide-zoom 7s ease-in-out infinite alternate;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Entrada con movimiento al cambiar de diapositiva */
.hero-slide.is-active img{
  animation: hero-slide-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards, hero-slide-zoom 7s ease-in-out 1.5s infinite alternate;
}
@keyframes hero-slide-in{
  from{ transform: scale(1.08) translate(0, 0); opacity: 0.92; }
  to{ transform: scale(1) translate(0, 0); opacity: 1; }
}
@keyframes hero-slide-zoom{
  from{ transform: scale(1) translate(0, 0); }
  to{ transform: scale(1.096) translate(-1.5%, -0.8%); }
}
.hero-slide .hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
}
.hero-nav:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
}
.hero-prev{ left: 14px; }
.hero-next{ right: 14px; }
.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.dot-btn{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.dot-btn::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
}
.dot-btn-pause{
  width: auto;
  min-width: 24px;
  padding: 0 6px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1;
}
.dot-btn-pause::before{ content: none; }
.dot-btn:focus-visible{
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 2px;
}
.dot-btn[aria-current="true"]::before{
  background: rgba(54,211,255,.85);
  border-color: rgba(54,211,255,.85);
}
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(11,18,32,.58), rgba(11,18,32,.74));
  z-index: 1;
  pointer-events: none;
}
.hero-center{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0;
  max-width: 980px;
  margin: 0 auto;
}
.hero .hero-slogan-wrap{
  display: none;
}
.hero[data-hero-slide="0"] .hero-slogan-wrap-0,
.hero[data-hero-slide="1"] .hero-slogan-wrap-1,
.hero[data-hero-slide="2"] .hero-slogan-wrap-2{
  display: block;
}
.hero p.hero-slogan.hero-slogan-line,
.hero-slogan-line{
  font-size: clamp(20px, 2.8vw, 32px);
  line-height: calc(1.28em + 5px);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  text-transform: uppercase;
  font-weight: 750;
  letter-spacing: 0.8px;
}
.hero-slogan-line .hero-line-key{
  font-weight: 800;
  color: var(--naval);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-slogan-small{
  margin: 12px auto 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.5;
  color: rgba(255,255,255,.88);
  text-shadow: 0 8px 24px rgba(0,0,0,.3);
  max-width: 36ch;
  font-weight: 500;
}
.hero-slogan-wrap-0 .hero-ctas,
.hero-slogan-wrap-1 .hero-ctas,
.hero-slogan-wrap-2 .hero-ctas{ margin-top: 20px; }
.hero p.hero-slogan{
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.05;
  letter-spacing: 1.2px;
  text-transform: none;
}
.hero-slogan{
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: rgba(255,255,255,.96);
  text-shadow: 0 18px 55px rgba(0,0,0,.35);
  /* Más aire entre líneas (evita que tildes rocen arriba) + 5px extra */
  line-height: calc(1.18em + 5px);
}
.hero-slogan-soft{
  color: rgba(220, 235, 245, .92);
}
.hero-key{
  display: inline;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  margin: 0;
  box-shadow: none;
}
.hero-sep{
  opacity: .8;
  margin: 0 8px;
}
.hero-naval,
.hero-mil,
.hero-mar,
.hero-ind{
  color: rgba(255,255,255,.96);
}
.hero-highlight{
  color: var(--naval);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-sub{
  margin: 18px auto 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  text-shadow: 0 18px 55px rgba(0,0,0,.32);
}
.hero-sub b{
  color: rgba(255,255,255,.94);
}

.hero-ctas{
  justify-content: center;
  margin-top: 18px;
}

.hero-down{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  position: absolute;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 3;
}
.hero-down:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
}
.chev{
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(45deg);
}


/* Ferri: maquinaria naval especializada */
.section-ferri.fr-intro { padding: 56px 0 48px; }
.fr-intro-inner { max-width: 70ch; margin: 0 auto; }
.section-ferri .page-title-partner-logo { width: auto; max-width: min(360px, 100%); max-height: 86px; margin: 0 auto 24px; display: block; }
.section-ferri .page-title-brand { color: var(--fr-navy); margin-bottom: 12px; }
.section-ferri .partner-tagline { color: var(--fr-nav-blend); margin-top: 0; margin-bottom: 20px; }
.fr-intro-text { margin: 0; margin-top: 20px; line-height: 1.65; max-width: 65ch; }
.section-ferri.page-title { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, color-mix(in srgb, var(--fr-blue) 8%, #f8f8f8) 100%); }
.section-ferri.section-light { background: color-mix(in srgb, var(--fr-blue) 5%, #f8f8f8); }
.section-ferri .section-title h2 { color: var(--fr-navy); }
.section-ferri .section-title .underline { background: linear-gradient(90deg, var(--fr-blue), var(--naval)); }
.section-ferri .product-card { border-color: rgba(35,34,50,.16); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--fr-blue) 4%, #fff) 100%); }
.section-ferri .product-card:hover { border-color: rgba(45,126,192,.28); box-shadow: 0 14px 36px rgba(35,34,50,.11); }
.section-ferri .product-card .btn.primary,
.section-ferri .product-card .btn:hover { border-color: var(--fr-blue); background: color-mix(in srgb, var(--fr-blue) 16%, rgba(255,255,255,.92)); color: var(--fr-navy); }
.section-ferri .callout { border-color: rgba(45,126,192,.20); background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--fr-blue) 7%, #fff)); }
.section-ferri .callout h3 { color: var(--fr-blue); }
.section-ferri .partner-products { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 720px) { .section-ferri .partner-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .section-ferri .partner-products { grid-template-columns: repeat(3, 1fr); } }

/* Portfolio Ferri */
.fr-portfolio { padding-top: 32px; padding-bottom: 40px; }
.fr-portfolio-header { text-align: center; margin-bottom: 28px; }
.fr-portfolio-title { margin: 0; font-size: clamp(28px, 3.9vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: 2.1px; color: var(--fr-navy); text-transform: uppercase; text-wrap: balance; }
.fr-portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--max); margin: 0 auto; }
@media (max-width: 900px) { .fr-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fr-portfolio-grid { grid-template-columns: 1fr; } }
.fr-portfolio-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: 16px; background: rgba(255,255,255,.72); border: 1px solid rgba(35,34,50,.10); transition: border-color 0.2s, box-shadow 0.2s; }
.fr-portfolio-card:hover { border-color: rgba(45,126,192,.28); box-shadow: 0 8px 24px rgba(35,34,50,.10); }
.fr-portfolio-card-img-wrap { width: 100%; aspect-ratio: 280/180; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(45,126,192,.08); border-radius: 8px; margin-bottom: 12px; }
.fr-portfolio-card-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.fr-portfolio-card-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--fr-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; font-weight: 300; margin-bottom: 10px; }
.fr-portfolio-card-label { font-size: 0.95rem; font-weight: 600; color: rgba(16,24,40,.9); text-align: center; }

/* Norwegian Greentech: tratamiento de agua y acuicultura */
.section-ngt.ngt-intro { padding: 56px 0 48px; }
.ngt-intro-inner { max-width: 70ch; margin: 0 auto; }
.section-ngt .page-title-partner-logo { width: auto; max-width: min(360px, 100%); max-height: 86px; margin: 0 auto 24px; display: block; }
.section-ngt .page-title-brand { color: var(--ngt-navy); margin-bottom: 12px; }
.section-ngt .partner-tagline { color: var(--ngt-nav-blend); margin-top: 0; margin-bottom: 20px; }
.ngt-intro-text { margin: 0; margin-top: 20px; line-height: 1.65; max-width: 65ch; }
.section-ngt.page-title { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, color-mix(in srgb, var(--ngt-teal) 8%, #f8f8f8) 100%); }
.section-ngt.section-light { background: color-mix(in srgb, var(--ngt-accent) 5%, #f8f8f8); }
.section-ngt .section-title h2 { color: var(--ngt-navy); }
.section-ngt .section-title .underline { background: linear-gradient(90deg, var(--ngt-accent), var(--naval)); }
.section-ngt .product-card { border-color: rgba(15,91,97,.16); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--ngt-accent) 4%, #fff) 100%); }
.section-ngt .product-card:hover { border-color: rgba(51,166,139,.28); box-shadow: 0 14px 36px rgba(15,57,66,.11); }
.section-ngt .product-card .btn.primary,
.section-ngt .product-card .btn:hover { border-color: var(--ngt-accent); background: color-mix(in srgb, var(--ngt-accent) 18%, rgba(255,255,255,.92)); color: var(--ngt-navy); }
.section-ngt .callout { border-color: rgba(51,166,139,.2); background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--ngt-accent) 7%, #fff)); }
.section-ngt .callout h3 { color: var(--ngt-teal); }
.section-ngt .partner-products { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 720px) { .section-ngt .partner-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .section-ngt .partner-products { grid-template-columns: repeat(3, 1fr); } }

/* Portfolio Norwegian Greentech */
.ngt-portfolio { padding-top: 32px; padding-bottom: 40px; }
.ngt-portfolio-header { text-align: center; margin-bottom: 28px; }
.ngt-portfolio-title { margin: 0; font-size: clamp(28px, 3.9vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: 2.1px; color: var(--ngt-navy); text-transform: uppercase; text-wrap: balance; }
.ngt-portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--max); margin: 0 auto; }
@media (max-width: 900px) { .ngt-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ngt-portfolio-grid { grid-template-columns: 1fr; } }
.ngt-portfolio-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: 16px; background: rgba(255,255,255,.72); border: 1px solid rgba(15,57,66,.1); transition: border-color 0.2s, box-shadow 0.2s; }
.ngt-portfolio-card:hover { border-color: rgba(51,166,139,.28); box-shadow: 0 8px 24px rgba(15,57,66,.1); }
.ngt-portfolio-card-img-wrap { width: 100%; aspect-ratio: 280/180; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(51,166,139,.08); border-radius: 8px; margin-bottom: 12px; }
.ngt-portfolio-card-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.ngt-portfolio-card-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--ngt-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; font-weight: 300; margin-bottom: 10px; }
.ngt-portfolio-card-label { font-size: 0.95rem; font-weight: 600; color: rgba(16,24,40,.9); text-align: center; }
.partners-logos .partner-logo-ngt {
  /* La escala va con el resto, calculada por medicion. */
}

/* ====================== */
/* Sections / Layout */

.section{
  padding: clamp(56px, 7vw, 92px) 0;
}

/* Trama tecnica de las bandas oscuras.
   Reutiliza el plano de buque en dique seco que ya vive en el hero de "Quienes
   somos": material propio y del sector, no una textura de stock. Va al 6% y
   fijado abajo a la derecha, asi que aporta identidad sin competir con el
   texto; el contraste del contenido no cambia porque el plano es del mismo
   azul que el fondo. */
.section:not(.section-light){
  position: relative;
  isolation: isolate;
}
.section:not(.section-light)::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../assets/img/about/imagen_fondo_hw-are.webp");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: min(760px, 62%) auto;
  opacity: .06;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 78%);
          mask-image: linear-gradient(to left, #000 0%, transparent 78%);
}
@media (max-width: 720px){
  /* En movil el plano no se lee y solo ensucia: fuera. */
  .section:not(.section-light)::after{ display: none; }
}
/* Mismo color base para sección representados y clientes (blanco gris suave) */
.section-light{
  background: #f8f8f8;
  color: rgba(16,24,40,.92);
}
.section-light a{ color: inherit; }
.section-light .muted{ color: rgba(16,24,40,.70); }
.section-light .btn{
  border-color: rgba(16,24,40,.14);
  background: rgba(16,24,40,.04);
  color: rgba(16,24,40,.92);
}
.section-light .btn:hover{
  background: rgba(16,24,40,.06);
  border-color: rgba(16,24,40,.20);
}
.section-light .btn.primary{
  /* Un degradado al 18% de alfa pesa lo mismo que el boton secundario y
     nadie distingue cual es la accion principal. Solido, como el general. */
  border-color: var(--naval);
  background: var(--naval);
  color: #06202b;
  font-weight: 650;
}

.lead{
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
}
.muted{ color: var(--muted); }

.section-title{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 20px;
}
.section-title h2{
  margin: 0;
  /* Headline premium (más “potente”) */
  font-size: clamp(28px, 3.9vw, 46px);
  line-height: 1.06;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  font-weight: 800;
  text-wrap: balance;
}
.underline{
  /* Pedido: quitar la línea bajo los títulos en todo el sitio */
  display: none;
}


/* Cards / Grids */

.cards-3{
  display: grid;
  /* Se adapta mejor a anchos “intermedios” sin apretar ni descentrar */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 18px);
  margin-top: 20px;
}
.img-card{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 45px rgba(16,24,40,.10);
}
.img-card-link{
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.img-card-link:hover{
  transform: translateY(-2px);
  border-color: rgba(16,24,40,.20);
  box-shadow: 0 22px 60px rgba(16,24,40,.14);
}
.img-card-link:active{
  transform: translateY(0);
}
.img-card-link:focus-visible{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 3px;
}
.img-card img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.img-card h3{
  margin: 0;
  padding: 14px 14px 16px;
  font-size: 15px;
  letter-spacing: .2px;
}

.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.72);
  padding: 16px;
  box-shadow: 0 18px 45px rgba(16,24,40,.10);
}
.card h3{ margin: 10px 0 6px; }
.card h2{ margin: 10px 0 6px; font-size: 1.22em; }
.card p{ margin: 0; color: rgba(16,24,40,.72); }
.productos-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(16,24,40,.10);
}
.productos-jump a{
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(16,24,40,.75);
  border: 1px solid rgba(16,24,40,.14);
  background: rgba(16,24,40,.04);
  text-decoration: none;
}
.productos-jump a:hover{
  color: rgba(16,24,40,.95);
  border-color: rgba(54,211,255,.28);
  background: rgba(54,211,255,.08);
}
.productos-catalog.section{ padding-top: clamp(51px, 6.5vw, 87px); } /* -5px vs section base */
.productos-page-title{
  margin: 0 0 24px;
  font-size: clamp(28px, 3.9vw, 46px);
  font-weight: 800;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(16,24,40,.92);
}
.productos-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
@media (min-width: 720px) {
  .productos-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .productos-list{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .productos-list{ grid-template-columns: repeat(4, 1fr); }
}
/* Productos: 4 cards en línea, tamaños compactos */
.productos-list .product-card-img-wrap{ aspect-ratio: 4/3; padding: 4%; }
.productos-list .product-card-with-img .product-card-body{ padding: 12px 14px; }
.productos-list .product-card-with-img .pill{ margin-bottom: 6px; font-size: 11px; padding: 4px 8px; }
.productos-list .product-card-with-img .product-title{ font-size: 0.95rem; margin: 0 0 6px; }
.productos-list .product-card-with-img p{ font-size: 0.875rem; line-height: 1.45; }
.productos-list .product-card .btn{ margin-top: 8px; font-size: 13px; padding: 6px 12px; }
.product-card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.product-card-actions .btn{ margin-top: 0; }

article.product-card,
a.product-card-link{
  scroll-margin-top: calc(var(--header-h) + var(--topbar-h, 0px) + 14px);
}
a.product-card-link{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.product-card-link:hover{ box-shadow: 0 12px 32px rgba(16,24,40,.14); }
.product-card .btn{ margin-top: 12px; }
.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(16,24,40,.04);
  color: rgba(16,24,40,.78);
}
.pill b{ font-weight: 750; }

.page-title{
  padding: 44px 0 10px;
}
.page-title-partner-logo { display: block; max-width: 220px; height: auto; object-fit: contain; margin: 0 auto 16px; }
.page-title h1{
  margin: 0;
  /* Tiene que ser el texto mas grande de la pagina. Con 44px se quedaba por
     debajo de .section-title h2 (46px) en las 10 paginas interiores: el
     subtitulo pesaba mas que el titulo. */
  font-size: clamp(32px, 4.6vw, 54px);
  color: rgba(16,24,40,.92);
}
.page-title p{
  margin: 10px 0 0;
  color: rgba(16,24,40,.72);
  max-width: 72ch;
}

/* Karl Dose intro: más espacio, logo más grande, H1 con colores del logo */
.kd-intro { padding: 56px 0 48px; }
.kd-intro-inner { max-width: 70ch; margin: 0 auto; }
.kd-intro .page-title-partner-logo { width: auto; max-width: min(360px, 100%); max-height: 86px; margin-bottom: 24px; }
.kd-intro .page-title-brand { color: var(--kd-navy); margin-bottom: 12px; }
.kd-intro .partner-tagline { margin-top: 0; margin-bottom: 20px; }
.kd-intro-text { margin: 0; margin-top: 20px; line-height: 1.65; max-width: 65ch; }

.callout{
  border-radius: var(--radius);
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.76);
  padding: 18px;
  box-shadow: 0 18px 45px rgba(16,24,40,.10);
}
.callout h3{ margin: 0 0 8px; }
.callout p{ margin: 0; color: rgba(16,24,40,.72); }
.notice{
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(16,24,40,.22);
  background: rgba(16,24,40,.03);
  padding: 14px 14px;
  color: rgba(16,24,40,.78);
}

.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.u-mt-12{ margin-top: 12px; }
.u-mt-16{ margin-top: 16px; }
.u-mt-32{ margin-top: 32px; }
.u-mb-14{ margin-bottom: 14px; }
.u-mb-24{ margin-bottom: 24px; }
.u-mb-28{ margin-bottom: 28px; }
.u-pb-0{ padding-bottom: 0; }
.hp-field{
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* Productos hero (sub-landing) */

.productos-hero{
  position: relative;
  overflow: hidden;
  min-height: 429px;
  max-height: 642px;
  padding: 14px clamp(33px, 5.5vw, 55px) 0 clamp(33px, 5.5vw, 55px);
  color: rgba(16,24,40,.92);
}
.productos-hero-slider{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.productos-hero-slides{
  height: 100%;
  display: flex;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); /* 10% más lento */
  will-change: transform;
}
.productos-hero-slide{
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  background: #f8fafc; /* fondo claro para imágenes con transparencia */
}
.productos-hero-slide picture,
.productos-hero-slide img{
  width: 100%;
  height: 100%;
  display: block;
}
.productos-hero-slide img{
  object-fit: contain;
  object-position: center;
  background: transparent;
  transform: scale(1.2); /* 20% más grande */
}
.productos-hero .hero-nav{ opacity: .85; }
.productos-hero .hero-dots{ bottom: 20px; }
.productos-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Fondo gris */
  /* Antes: dos degradados grises al 20-34%. Sobre una foto clara el texto
     blanco bajaba a 1,32:1 y se compensaba con seis text-shadow apiladas.
     Ahora el velo hace su trabajo: oscuro y mas denso en la franja baja,
     que es donde se apoya el texto. */
  background: linear-gradient(180deg,
    rgba(6,17,28,.18) 0%,
    rgba(6,17,28,.38) 30%,
    rgba(6,17,28,.72) 48%,
    rgba(6,17,28,.82) 100%);
}
.productos-hero-inner{
  position: absolute;
  bottom: 52px; /* sobre los puntos del carrusel (bottom: 20px) */
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.productos-hero-content{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.productos-hero-subtitle{
  margin: 0 0 8px;
  font-size: clamp(19px, 2.16vw, 23px);
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  /* Una sombra suave basta cuando el velo tiene la densidad correcta.
     Las seis anteriores, con dos contornos duros de 1px, eran un parche. */
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.productos-hero-ctas{
  margin-top: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.productos-hero-ctas .btn.primary{
  /* Iba de cian claro a azul oscuro con texto blanco: sobre la mitad cian el
     blanco daba 1,76:1 y no se leia. Solido con texto oscuro, como el resto
     de botones principales del sitio: 9,54:1. */
  border: 2px solid var(--naval);
  background: var(--naval);
  color: #06202b;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.08em;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.productos-hero-ctas .btn.primary:hover{
  border-color: var(--brand);
  background: var(--brand);
  color: #06202b;
  box-shadow: 0 6px 28px rgba(0,0,0,.45), 0 0 20px rgba(54,211,255,.3);
}


/* About hero (premium) */

.about-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 92px) 0;
  color: rgba(255,255,255,.92);
}
.about-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Blueprint: prioriza el casco (centro superior) */
  object-position: center 32%;
  display: block;
}
.about-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Más “blueprint”, menos oscurecido, con glow sutil */
  background:
    radial-gradient(900px 520px at 20% 35%, rgba(54,211,255,.16), transparent 60%),
    linear-gradient(90deg, rgba(11,18,32,.58) 0%, rgba(11,18,32,.26) 58%, rgba(11,18,32,.16) 100%),
    linear-gradient(180deg, rgba(11,18,32,.18), rgba(11,18,32,.58));
}
.about-hero-inner{
  position: relative;
  z-index: 2;
  padding-left: 10px;
  padding-right: 10px;
}
.about-hero-content{
  /* Más espacio para el texto */
  max-width: 1080px;
  /* Totalmente transparente (sin caja) */
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.about-hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(54,211,255,.28);
  background: linear-gradient(135deg, rgba(54,211,255,.16), rgba(11,92,255,.12));
  color: rgba(255,255,255,.86);
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.about-hero-title{
  margin: 14px 0 10px;
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1.05;
  letter-spacing: .2px;
}
.about-hero-main{
  /* +30% de aire vs antes */
  margin: 14px 0 18px;
  /* -20% aprox vs versión anterior */
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: .2px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,.96);
  text-shadow: 0 22px 65px rgba(0,0,0,.35);
}
.about-hero-brand{
  margin: 0 0 18px;
  /* +30% aprox vs 12px */
  font-size: 19px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,.82);
  text-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.about-hero-subtitle{
  margin: 0 0 18px;
  font-size: clamp(16px, 1.7vw, 20px);
  color: rgba(255,255,255,.88);
  max-width: 62ch;
  padding-left: 12px;
  border-left: 3px solid rgba(54,211,255,.7);
}
.about-hero-text{
  margin: 0;
  color: rgba(255,255,255,.84);
  max-width: 65ch;
  /* Evita saltos “raros” por indentación en el HTML */
  white-space: normal;
}
.about-hero-bullets{
  margin-top: 18px;
}
.about-hero-bullets .bullet{
  color: rgba(255,255,255,.84);
}
.about-hero-bullets .dot{
  background: linear-gradient(135deg, rgba(54,211,255,.95), rgba(11,92,255,.9));
  box-shadow: 0 14px 36px rgba(54,211,255,.20);
}

.about-metrics{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.metric{
  display: grid;
  gap: 6px;
  min-width: 0;
}
.metric-value{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: .6px;
  font-weight: 800;
  /* Dorado de marca (--accent), que estaba declarado y sin usar. Las cifras
     son el unico sitio de esta pantalla donde aparece: si se repartiera por
     toda la pagina dejaria de ser un acento. */
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.metric-label{
  font-size: 13px;
  color: rgba(255,255,255,.78);
}
.metric-line{
  width: 38px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.22);
  margin-top: 2px;
}


/* CTA botones (Quiénes Somos) */

/* Sólo afecta la sección con fondo (about-hero) */
.about-hero .hero-ctas{
  justify-content: flex-start;
  gap: 12px;
}
.about-hero .btn{
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 44px rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.about-hero .btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 18px 54px rgba(0,0,0,.32);
  transform: translateY(-1px);
}
.about-hero .btn:active{ transform: translateY(0); }
.about-hero .btn:focus-visible{
  outline: 3px solid var(--focus-on-dark);
  outline-offset: 2px;
  box-shadow: 0 18px 54px rgba(0,0,0,.32);
  border-color: rgba(54,211,255,.35);
}

/* Primario: más contraste y “premium glow” sobre foto */
.about-hero .btn.primary{
  border-color: var(--naval);
  background: var(--naval);
  color: #06202b;
  font-weight: 650;
}
.about-hero .btn.primary:hover{
  border-color: var(--brand);
  background: var(--brand);
}

/* Secundario (“Conócenos más / Volver al inicio”): glass + flecha sutil */
.about-hero .who-btn{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  position: relative;
}
.about-hero .who-btn:hover{
  border-color: rgba(54,211,255,.28);
  background: rgba(255,255,255,.12);
}
.about-hero .who-btn::after{
  content: "→";
  margin-left: 10px;
  opacity: .92;
}

@media (max-width: 980px){
  .about-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .about-metrics{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .about-hero-content{ max-width: 100%; }
}


/* About */

.about-grid{
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
.about-text .lead b{
  color: rgba(16,24,40,.95);
  background: linear-gradient(90deg, rgba(54,211,255,.22), rgba(11,92,255,.18));
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.08);
}
.bullets{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.bullet{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(16,24,40,.76);
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--naval), rgba(11,92,255,.9));
  box-shadow: 0 10px 24px rgba(54,211,255,.20);
}
.about-box{
  border-radius: var(--radius);
  border: 1px solid rgba(16,24,40,.10);
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(54,211,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 40%, rgba(11,92,255,.16), transparent 55%),
    rgba(255,255,255,.78);
  padding: 18px;
  box-shadow: 0 24px 70px rgba(16,24,40,.14);
  display: grid;
  gap: 12px;
}
.about-box-head{
  display: grid;
  gap: 2px;
  padding: 8px 10px 2px;
}
.about-kicker{
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(16,24,40,.72);
}
.about-subkicker{
  font-size: 12px;
  color: rgba(16,24,40,.60);
}
.about-subkicker code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  background: rgba(16,24,40,.04);
  border: 1px solid rgba(16,24,40,.10);
  border-radius: 10px;
  padding: 2px 8px;
}
.about-stats{
  display: grid;
  gap: 12px;
  padding: 6px 0 2px;
}
.stat{
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(16,24,40,.03);
}
.stat strong{
  font-size: 22px;
  letter-spacing: .4px;
}
.stat span{ color: rgba(16,24,40,.72); font-size: 13px; }

.stat-premium{
  grid-template-columns: 44px 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 14px 14px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 14px 40px rgba(16,24,40,.08);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.stat-premium:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 56px rgba(16,24,40,.12);
  border-color: rgba(54,211,255,.22);
}
.stat-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(16,24,40,.10);
  background: linear-gradient(135deg, rgba(54,211,255,.18), rgba(11,92,255,.14));
  display: grid;
  place-items: center;
  color: rgba(16,24,40,.78);
}
.stat-icon svg{ width: 22px; height: 22px; }
.stat-body{ display: grid; gap: 2px; }
.stat-value{
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: .2px;
  color: rgba(16,24,40,.92);
}
.stat-label{
  font-size: 13px;
  color: rgba(16,24,40,.70);
}


/* Partners (grid fijo) */

.partners-lead{
  width: 90%;
  margin: 0 auto 16px;
  max-width: none;
  text-align: left;
}

#representamos .partners-lead{
  width: min(860px, 88%);
  margin: 0 auto 30px;
  text-align: center;
}
#representamos .partners-logos{
  /* La variable, no el gap suelto: el ancho de cada logo se calcula con ella.
     Si solo se pisa 'gap', el hueco real supera al calculado y la fila rompe. */
  --logos-gap: clamp(18px, 2.6vw, 28px);
  margin: 0 auto;
  padding: 8px 0 4px;
}
#representamos .partner-item{
  min-height: 116px;
  padding: 18px 12px;
}
.partner-logo{
  width: min(170px, 100%);
  height: auto;
  opacity: .92;
  filter: saturate(.98);
}

/* Logos sin caja: coherente, premium y limpio */
.partners-logos{
  --logos-gap: clamp(14px, 2.2vw, 22px);
  --logos-cols: 4;
  display: flex;
  flex-wrap: wrap;
  /* Flex, no grid: la ultima fila se centra sola aunque el numero de
     representadas no sea multiplo del numero de columnas. Con grid, el
     septimo logo quedaba solo y pegado a la izquierda. */
  justify-content: center;
  align-items: center;
  gap: var(--logos-gap);
  margin: 18px auto 0;
  padding: 12px 0;
  max-width: 980px;
}
/* Columnas de la tira, todas juntas y en orden descendente. Antes estaban
   repartidas por el archivo y a 375 px ganaba la de 2 columnas por venir mas
   abajo, no por ser mas especifica: los logos anchos se recortaban. */
@media (max-width: 980px){ .partners-logos{ --logos-cols: 3; } }
@media (max-width: 620px){ .partners-logos{ --logos-cols: 2; } }
@media (max-width: 430px){
  .partners-logos{ --logos-cols: 1; }
  /* En una columna sobra aire vertical: sin esto la tira mide 1.300 px de
     scroll. Con dos columnas los logos anchos se recortaban, asi que la
     columna unica se queda, pero mas apretada. */
  .partners-logos .partner-item,
  #representamos .partners-logos .partner-item{ min-height: 76px; padding: 8px 10px; }
  .partners-logos{ --logos-gap: 6px; }
}

.partners-logos .partner-item{
  /* Crecen para llenar su fila: con 7 logos la segunda fila lleva 3 y, sin
     esto, quedaba mas corta que la de arriba y la tira se veia coja. */
  flex: 1 1 calc((100% - (var(--logos-cols) - 1) * var(--logos-gap)) / var(--logos-cols));
  max-width: calc((100% - (var(--logos-cols) - 1) * var(--logos-gap)) / var(--logos-cols) * 1.34);
}
.partner-item{
  width: 100%;
  display: grid;
  place-items: center;
  padding: 14px 10px;
  min-height: 104px;
  /* Sin fondos/cajas: los logos “respiran” sobre el fondo */
  background: transparent;
  border: 0;
  box-shadow: none;
}
.partner-link{
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.partner-link-static{
  cursor: default;
}

.partner-picture{
  display: grid;
  place-items: center;
  transform: translateZ(0);
  transition: transform .16s ease;
  /* Evitar blur en Safari/WebKit al hacer hover (scale): capa propia y render nítido */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.partners-logos .partner-item:hover .partner-picture{
  /* Sin scale para mantener aspecto vectorial/nítido en Safari y otros; solo elevación */
  transform: translateY(-1px) translateZ(0);
}
.partners-logos .partner-logo{
  /* Una tira de logos se dimensiona por ALTURA. Antes iba por ancho
     (width: min(170px)) y la altura la decidia la proporcion de cada archivo:
     los logos salian entre 52 y 99 px de alto, casi el doble unos que otros.
     Con caja de altura fija, todos ocupan la misma banda vertical. */
  --logo-scale: 1;
  width: auto;
  height: 56px;
  max-width: min(300px, 100%);
  opacity: .78;
  filter: grayscale(1) contrast(1.08) brightness(0.96);
  transition: opacity .16s ease, filter .16s ease, transform .16s ease;
  object-fit: contain;
  transform: scale(var(--logo-scale)) translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.partners-logos .partner-item:hover .partner-logo{
  opacity: 1;
  filter: grayscale(0) contrast(1.02) saturate(1.06);
  transform: scale(var(--logo-scale)) translateZ(0);
}

/* Escalas medidas, no estimadas. Igualar solo la ALTURA no funciona aqui:
   los logos van de 2,4:1 (Sealand) a 5:1 (Wilson Walton), asi que a igual
   altura unos ocupaban el doble de superficie que otros y la tira se veia
   descompensada. Se mide el recuadro de tinta real de cada archivo y se
   iguala la RAIZ DEL AREA, que es como se equilibra un muro de logotipos.
   Si se cambia un archivo de logo, hay que volver a medir. */
.partners-logos img[alt="Detegasa"]{ --logo-scale: 1.09; }
.partners-logos img[alt="Karl Dose"]{ --logo-scale: 0.95; }
.partners-logos img[alt="Üntel Kablo"]{ --logo-scale: 1.03; }
.partners-logos img[alt="Industrias Ferri"]{ --logo-scale: 1.04; }
.partners-logos img[alt="Norwegian Greentech"]{ --logo-scale: 0.92; }
.partners-logos img[alt="Wilson Walton International"]{ --logo-scale: 1.10; }
/* SCP Sintersa es 9:1, el doble de alargado que cualquier otro. Su ancho ya
   lo limita la celda (max-width), y ese recorte le baja tambien el alto para
   mantener la proporcion. Reducirlo ademas con --logo-scale se sumaba a ese
   recorte y quedaba al doble de pequeno que el resto. Sin escala: llena la
   celda a lo ancho y su area queda al 80%, el techo que permite un 9:1. */
.partners-logos img[alt="SCP Sintersa"]{ --logo-scale: 1; }
/* Ese 18% de mas se lo come el hueco entre columnas, que mide 22px. Con
   una o dos columnas no hay hueco al lado y la pagina se desplazaba a lo
   ancho, asi que solo se aplica de 3 columnas en adelante. */
@media (min-width: 621px){ .partners-logos img[alt="SCP Sintersa"]{ max-width: 118%; } }
.partners-logos img[alt="Sealand Global"]{ --logo-scale: 1.34; }

/* (Opcional) Marquee antiguo: lo dejamos por si lo necesitas después */
.partners-marquee{
  --gap: 18px;
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Marquee "Quiénes confiaron": logos visibles, fondo transparente, movimiento igual */
.clients-marquee{
  --gap: 20px;
  cursor: pointer;
  /* Fade muy suave en bordes para no ocultar logos */
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.clients-marquee .partner-item{
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  min-height: 150px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}
.clients-marquee .partner-item:hover{
  /* Sin box-shadow para no ver recuadro; la retroiluminación va en el logo (drop-shadow) */
  box-shadow: none;
}
.clients-marquee .partner-picture{
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clients-marquee .partner-logo{
  width: 150px;
  height: 150px;
  object-fit: contain;
  opacity: 1;
  /* Mismo tono gris para todos los logos del banner */
  filter: grayscale(1) contrast(1.08) brightness(0.96);
  transition: filter .25s ease;
}
.clients-marquee .partner-item:hover .partner-logo{
  opacity: 1;
  /* Retroiluminación blanco invierno (sin azul), sigue la forma del logo */
  filter: grayscale(0) brightness(1.06) drop-shadow(0 0 12px rgba(255,255,255,.5)) drop-shadow(0 0 24px rgba(255,255,255,.25));
}

/* Tamaños por cliente (por src para que aplique a ambas copias del marquesina y sean armónicos) */
.clients-marquee .partner-picture{ overflow: visible; }
.clients-marquee .partner-item{ overflow: visible; }
.clients-marquee img[src*="client_navimag_2"]{ transform: scale(1.2); }
.clients-marquee img[src*="client_asenav"]{ transform: scale(1.15); }
.clients-marquee img[src*="client_chilean_navy"]{ transform: scale(0.9); }
.clients-marquee img[src*="client_nasa"]{ transform: scale(0.85); }

.partners-track{
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  width: max-content;
  /* Velocidad ~15% más lenta que antes (22s → 26s) */
  animation: partners-scroll 26s linear infinite;
}
@keyframes partners-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-50% - (var(--gap) / 2))); }
}
.partner-card{
  flex: 0 0 240px;
  min-height: 92px;
  border-radius: var(--radius);
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.76);
  display: grid;
  place-items: center;
  padding: 14px 14px;
  box-shadow: 0 18px 45px rgba(16,24,40,.08);
}


/* Contact / Form */

.contact-saas{
  margin-top: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(16,24,40,.10);
  border-bottom: 1px solid rgba(16,24,40,.10);
}
.contact-saas-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  /* 'stretch' estiraba la columna del mapa hasta la altura del formulario:
     817 px de hueco rayado. Cada columna con su altura. */
  align-items: start;
}
.contact-col{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-left{
  padding-right: 8px;
}
.contact-right{
  padding-left: 22px;
  border-left: 1px solid rgba(16,24,40,.10); /* línea central */
  /* Importante: para “equilibrio” de ambos cuerpos, el lado derecho debe estirarse
     al mismo alto que el formulario. El sticky rompe ese estirado. */
  display: grid;
  grid-template-rows: 1fr auto; /* mapa ocupa el espacio, datos abajo */
  gap: 12px;
}
.contact-title{
  margin: 0 0 2px;
  /* Es el H2 de la pagina y tiene que quedar claramente por debajo del H1
     (44px). Antes el H2 de esta pagina medía 46px, mas que el titulo. */
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: .2px;
  font-weight: 800;
}
.contact-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Labels un poco más “SaaS” */
.contact-saas .field label{
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 750;
  color: rgba(16,24,40,.74);
}

/* Form “flat”: sin caja, sólo líneas y foco premium */
.contact-saas .field input,
.contact-saas .field textarea{
  background: transparent;
  border-color: rgba(16,24,40,.47);
  border-radius: 16px;
  padding: 14px 14px;
  font-size: 15px;
}
.contact-saas .field textarea{
  min-height: 150px;
  resize: vertical;
}
.contact-saas .field input::placeholder,
.contact-saas .field textarea::placeholder{
  color: rgba(16,24,40,.62);
}
.contact-saas .field input:hover,
.contact-saas .field textarea:hover{
  border-color: rgba(16,24,40,.62);
}
.contact-saas .field input:focus,
.contact-saas .field textarea:focus{
  border-color: rgba(54,211,255,.45);
  box-shadow: 0 0 0 4px rgba(54,211,255,.18);
}
.contact-actions{
  display: grid;
}
.turnstile-wrap{
  margin-top: 4px;
}
.turnstile-box{
  min-height: 66px;
}
/* Botón principal del formulario: transparente y vistoso (sin degradés) */
.contact-saas .btn.primary.contact-submit{
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  /* Era transparente con borde al 32%: a 556px de ancho se confundia con un
     campo mas del formulario. Solido, para que se lea como la accion. */
  background: var(--naval);
  color: #06202b;
  border: 1.5px solid var(--naval);
  box-shadow:
    0 10px 26px rgba(16,24,40,.10),
    inset 0 0 0 1px rgba(255,255,255,.65);
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.contact-saas .btn.primary.contact-submit:hover{
  background: #5cdcff;
  border-color: #5cdcff;
  box-shadow:
    0 16px 40px rgba(16,24,40,.14),
    inset 0 0 0 1px rgba(255,255,255,.72);
  transform: translateY(-1px);
}
.contact-saas .btn.primary.contact-submit:active{
  transform: translateY(0);
  background: rgba(13,36,58,.08);
}
.contact-saas .btn.primary.contact-submit:focus-visible{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
  border-color: rgba(54,211,255,.55);
  box-shadow:
    0 16px 40px rgba(16,24,40,.14),
    inset 0 0 0 1px rgba(255,255,255,.72);
}

.contact-microcopy{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(16,24,40,.66);
}

.contact-questions{
  margin: 6px 0 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(16,24,40,.10);
}
.contact-questions-title{
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(16,24,40,.86);
}
.contact-questions-text{
  margin: 0;
  color: rgba(16,24,40,.74);
  line-height: 1.6;
}
.contact-questions-text a{
  color: rgba(16,24,40,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 750;
}

.contact-quick{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 2px;
}
.quick-link{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: rgba(16,24,40,.76);
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none; /* sin líneas */
  padding: 6px 8px; /* área clickeable + efecto hover */
  border-radius: 999px;
  line-height: 1;
  transition: color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.quick-link:hover{
  color: rgba(13,36,58,.95);
  background: rgba(54,211,255,.12);
  box-shadow:
    0 10px 26px rgba(16,24,40,.10),
    0 0 0 1px rgba(54,211,255,.18) inset,
    0 0 22px rgba(54,211,255,.22);
  transform: translateY(-1px);
}
.quick-link:focus-visible{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
  background: rgba(54,211,255,.14);
  box-shadow:
    0 10px 26px rgba(16,24,40,.10),
    0 0 0 1px rgba(54,211,255,.18) inset;
}
.quick-link:active{
  transform: translateY(0);
  background: rgba(54,211,255,.16);
}

.contact-mapbox{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(16,24,40,.10);
  overflow: hidden;
  background: rgba(16,24,40,.03);
  /* Sin min-height: con aspect-ratio, un alto minimo empuja el ANCHO. En
     movil forzaba 400px dentro de una columna de 330 y la pagina se
     desplazaba a lo ancho. El ancho manda, el alto sale de la proporcion. */
  aspect-ratio: 4 / 3;
  max-height: 420px;
}
.contact-mapbox iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-mini{
  padding-top: 8px;
  border-top: 1px solid rgba(16,24,40,.10);
  display: grid;
  gap: 8px;
  color: rgba(16,24,40,.78);
  font-size: 13px;
}
.contact-mini a{
  text-decoration: none; /* sin líneas */
  color: rgba(13,36,58,.92);
  padding: 4px 6px;
  border-radius: 999px;
  display: inline-block;
  line-height: 1.1;
  transition: color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.contact-mini a:hover{
  color: rgba(13,36,58,.98);
  background: rgba(54,211,255,.12);
  box-shadow:
    0 10px 26px rgba(16,24,40,.10),
    0 0 0 1px rgba(54,211,255,.18) inset,
    0 0 18px rgba(54,211,255,.20);
  transform: translateY(-1px);
}
.contact-mini a:active{
  transform: translateY(0);
  background: rgba(54,211,255,.16);
}
.contact-mini a:focus-visible{
  outline: none;
  background: rgba(54,211,255,.14);
  box-shadow:
    0 0 0 4px rgba(54,211,255,.22),
    0 10px 26px rgba(16,24,40,.10),
    0 0 0 1px rgba(54,211,255,.18) inset;
}
.panel{
  border-radius: var(--radius);
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 45px rgba(16,24,40,.10);
}
.panel-light{ background: rgba(255,255,255,.78); }
.panel-inner{ padding: 18px; }
.panel-heading{ margin: 0 0 14px; }

.form{
  display: grid;
  gap: 12px;
}
.field{
  display: grid;
  gap: 6px;
}
.field label{
  font-size: 13px;
  color: rgba(16,24,40,.76);
}
.field input,
.field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(16,24,40,.45);
  background: rgba(255,255,255,.92);
  padding: 12px 12px;
  color: rgba(16,24,40,.92);
  outline: none;
}
.field input:focus,
.field textarea:focus{
  border-color: var(--focus-on-light);
  outline: 3px solid var(--focus-on-light);
  outline-offset: 1px;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color: #b32617;
  background: rgba(179,38,23,.05);
}
.hint{
  font-size: 12px;
  color: rgba(16,24,40,.66);
}
.form-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.form-status{
  margin: 4px 0 0;
  font-size: 13px;
}
.form-status.ok{
  color: rgba(22, 163, 74, .96);
  font-weight: 700;
}
.form-status.bad{ color: rgba(185, 28, 28, .92); }

/* (contact-box eliminado: se reemplaza por layout split con mapa) */


/* Footer premium */

.premium-footer{
  background: linear-gradient(180deg, rgba(13,36,58,.98), rgba(10,27,43,.98));
  color: rgba(255,255,255,.92);
}
.footer-premium{
  padding: 48px var(--pad) 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.85fr 0.85fr 1fr;
  gap: 28px 40px;
  align-items: start;
}
.footer-col-title,
.footer-col h4{
  margin: 0 0 12px;
  padding-bottom: 6px;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
  line-height: 1.3;
}
.footer-brand-row{ margin-bottom: 12px; }
.footer-logo{ height: 52px; width: auto; }
.footer-desc{
  margin: 0;
  color: rgba(255,255,255,.72);
  max-width: 36ch;
  font-size: 14px;
  line-height: 1.55;
}
.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer-list a{
  color: rgba(255,255,255,.78);
  font-size: 14px;
}
.footer-list a:hover{ color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 3px; }

.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.5;
}
.footer-contact a{ color: rgba(255,255,255,.86); }
.fi{
  display: inline-flex;
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 6px;
}
.fi svg{ width: 16px; height: 16px; }

.footer-social{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.social{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display: grid;
  place-items: center;
}
.social svg{ width: 18px; height: 18px; color: rgba(255,255,255,.86); }
.social:hover{
  border-color: rgba(54,211,255,.25);
  background: rgba(255,255,255,.08);
}
.footer-bottom{
  margin-top: 28px;
}
.footer-divider{
  height: 1px;
  background: rgba(255,255,255,.12);
  margin-bottom: 18px;
}
.footer-copy{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1.5;
}

/* Media Queries (final del archivo original) */
@media (max-width: 980px){
  .cards-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid{ grid-template-columns: 1fr; }
  .contact-saas-grid{ grid-template-columns: 1fr; }
  .contact-form-grid{ grid-template-columns: 1fr; }
  .contact-right{
    padding-left: 0;
    border-left: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(16,24,40,.10);
    grid-template-rows: auto auto;
  }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 24px 28px; }
  .partners-marquee{ --gap: 14px; }
  .partner-card{ flex-basis: min(240px, 44vw); }
}

@media (max-width: 620px){
  .cards-3{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .partner-item{ min-height: 96px; padding: 12px 10px; }
}

/* Muy pequeño (iPhone SE, etc.) */
@media (max-width: 375px){
  :root{ --pad: 14px; }
  .hero p.hero-slogan{ font-size: 26px; }
  .hero p.hero-slogan.hero-slogan-line,
  .hero-slogan-line{ font-size: 16px; }
  .section-title h2{ font-size: 22px; }
  .nav{ width: min(320px, calc(100% - 28px)); }
}

/* El menu de escritorio necesita ~960px de contenido: logo + 5 entradas +
   selector de idioma. Medido en el navegador, no estimado. La consulta compara
   contra el ancho con barra de desplazamiento, asi que el corte va en 1000 para
   dejar margen. Antes estaba en 720 y la cabecera desbordaba a lo ancho entre
   721 y 960. */
@media (max-width: 1000px){
  :root{
    --header-h: 88px;
    --logo-h: 66px;
    --pad: clamp(14px, 4vw, 20px); /* Más equilibrado en móvil */
  }
  body{ padding-bottom: var(--safe-bottom); }
  .nav{
    /* Popover anclado al botón (derecha), color corporativo Valdemar */
    display: grid;
    position: absolute;
    left: auto;
    right: var(--pad);
    top: calc(100% + 10px);
    width: min(360px, calc(100% - 2 * var(--pad)));
    padding: 12px 0;
    border-radius: 16px;
    border: 1px solid rgba(54,211,255,.25);
    background: linear-gradient(180deg, var(--menuBlue), var(--menuBlue2));
    box-shadow: var(--shadow), 0 0 0 1px rgba(54,211,255,.12);
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }
  .nav.open{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
  }
  .nav a{
    padding: 12px 16px;
    color: rgba(255,255,255,.94);
    -webkit-tap-highlight-color: transparent;
  }
  .nav a:hover{ color: var(--naval); }
  .nav > a{
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-item{
    display: grid;
    gap: 0;
  }
  .nav-expand-btn{ display: grid; }
  .nav-item-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    gap: 8px;
  }
  .nav-item-row > a{
    flex: 1;
    padding: 14px 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-expand-btn{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: rgba(255,255,255,.9);
  }
  .nav-expand-btn:hover{ background: rgba(255,255,255,.1); color: var(--naval); }
  .nav-expand-btn:focus-visible{ outline: 2px solid var(--naval); outline-offset: 2px; }
  .nav-expand-icon{
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
  }
  .nav-item.sub-open .nav-expand-icon{
    transform: rotate(-135deg) translateY(2px);
  }
  .nav-sublist{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    box-shadow: none;
    border: none;
    background: rgba(0,0,0,.18);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav-item.sub-open .nav-sublist{
    max-height: 320px; /* Suficiente para 6 ítems */
  }
  .nav-sublist a{
    margin: 0;
    padding: 12px 16px 12px 28px;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: rgba(255,255,255,.88);
    font-size: 0.9em;
  }
  .nav-sublist a:hover{ color: var(--naval); }
  .menu-btn{ display: inline-flex; }
  .lang-switch{
    margin-left: 0;
    order: 2;
  }
  .lang-pill{
    min-width: 34px;
    min-height: 34px;
    padding: 0 8px;
  }
  .logo-box{ padding: 10px 12px; }
  .site-header{ padding-top: var(--safe-top); }
  /* Tipografía móvil más equilibrada */
  .hero h1{ font-size: clamp(28px, 8vw, 42px); }
  .hero-slogan-line{ font-size: clamp(18px, 4.5vw, 24px); }
  .hero-slogan-small{ font-size: 15px; }
  .hero-sub{ font-size: 15px; }
  .section-title h2{ font-size: clamp(24px, 6vw, 36px); }
  .lead{ font-size: 15px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
  .productos-list{ grid-template-columns: 1fr; }
  .partner-card{ min-height: 86px; padding: 14px 12px; }
}


/* Marquee: pausa en hover solo en partners; en clientes no se detiene (solo con click) */

.partners-marquee:not(.clients-marquee):hover .partners-track,
.partners-marquee:not(.clients-marquee):focus-within .partners-track {
  animation-play-state: paused;
}
/* Banner clientes: nunca se detiene al pasar el mouse; solo se pausa con click (JS) */
.clients-marquee .partners-track{
  animation-play-state: running;
}
.clients-marquee.is-paused .partners-track{
  animation-play-state: paused;
}


/* Roadmap (interno) */

.roadmap-toolbar{
  border-radius: var(--radius);
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 45px rgba(16,24,40,.08);
  padding: 14px;
  margin: 10px 0 16px;
}
.roadmap-controls{
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  align-items: end;
}
.roadmap-field{
  display: grid;
  gap: 6px;
}
.roadmap-label{
  font-size: 12px;
  color: rgba(16,24,40,.70);
  letter-spacing: .2px;
}
.roadmap-input,
.roadmap-select{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.45);
  background: rgba(255,255,255,.70);
  padding: 10px 12px;
  color: rgba(16,24,40,.92);
  outline: none;
}
.roadmap-input:focus,
.roadmap-select:focus{
  border-color: rgba(54,211,255,.38);
  box-shadow: 0 0 0 4px rgba(54,211,255,.18);
}
.roadmap-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.roadmap-summary{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.roadmap-progress{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(16,24,40,.05);
  overflow: hidden;
}
.roadmap-progress-bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(54,211,255,.65), rgba(11,92,255,.55));
  transition: width .18s ease;
}
.roadmap-stats{
  font-size: 13px;
  color: rgba(16,24,40,.80);
}
.roadmap-updated{
  font-size: 12px;
  color: rgba(16,24,40,.65);
}

.roadmap-root{
  margin-top: 8px;
}
.roadmap-tree,
.rm-children{
  list-style: none;
  margin: 0;
  padding: 0;
}

.rm-item{
  position: relative;
  margin: 10px 0;
}
.rm-children{
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid rgba(16,24,40,.14);
}
.rm-item::before{
  content:"";
  position: absolute;
  left: -18px;
  top: 24px;
  width: 18px;
  border-top: 1px solid rgba(16,24,40,.14);
}
.roadmap-tree > .rm-item::before{
  display: none;
}

.rm-node{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.80);
  padding: 12px 12px;
  box-shadow: 0 18px 45px rgba(16,24,40,.06);
}
.rm-node:hover{
  border-color: rgba(54,211,255,.24);
  box-shadow: 0 18px 45px rgba(16,24,40,.08);
}
.rm-left{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  min-width: 0;
}
.rm-toggle{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.14);
  background: rgba(16,24,40,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(16,24,40,.82);
  cursor: pointer;
}
.rm-toggle:hover{
  background: rgba(16,24,40,.06);
}
.rm-toggle-spacer{
  opacity: .35;
}
.rm-caret{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(16,24,40,.70);
  border-bottom: 2px solid rgba(16,24,40,.70);
  transform: rotate(-45deg);
  transition: transform .14s ease;
}
.rm-toggle[aria-expanded="true"] .rm-caret{
  transform: rotate(45deg);
}
.rm-meta{
  display: grid;
  gap: 6px;
  min-width: 0;
}
.rm-title{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.rm-id{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(16,24,40,.04);
  color: rgba(16,24,40,.75);
}
.rm-name{
  font-weight: 750;
  color: rgba(16,24,40,.92);
  letter-spacing: .1px;
}
.rm-desc{
  font-size: 13px;
  color: rgba(16,24,40,.72);
  max-width: 90ch;
}
.rm-right{
  display: grid;
  gap: 8px;
  justify-items: end;
  align-content: start;
  flex: 0 0 auto;
}
.rm-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(16,24,40,.04);
  color: rgba(16,24,40,.78);
  white-space: nowrap;
}
.rm-badge.ok{
  border-color: rgba(52,211,153,.30);
  background: rgba(52,211,153,.12);
  color: rgba(8,84,52,.92);
}
.rm-badge.warn{
  border-color: rgba(251,191,36,.35);
  background: rgba(251,191,36,.14);
  color: rgba(120,72,0,.92);
}
.rm-badge.muted{
  border-color: rgba(16,24,40,.14);
  background: rgba(16,24,40,.03);
  color: rgba(16,24,40,.70);
}
.rm-select{
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.14);
  background: rgba(255,255,255,.70);
  padding: 8px 10px;
  color: rgba(16,24,40,.92);
}
.rm-group-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rm-children.is-collapsed{
  display: none;
}

@media (max-width: 920px){
  .roadmap-controls{
    grid-template-columns: 1fr;
  }
  .roadmap-actions{
    justify-content: flex-start;
  }
  .rm-left{
    grid-template-columns: 32px 1fr;
  }
}


/* Footer legal */

.footer-legal{
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.footer-legal a{
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
.footer-legal a:hover{
  color: rgba(255,255,255,.95);
}
.footer-legal span{ margin: 0 6px; color: rgba(255,255,255,.4); }

.legal-content { max-width: 72ch; }
.legal-content h2 { margin-top: 1.5em; margin-bottom: 0.5em; font-size: 1.15rem; }
.legal-content ul { margin: 0.5em 0 1em 1.25em; }
.legal-content a { color: var(--link-on-light); text-decoration: underline; }
/* ----- Karl Dose / Partner vitrina ----- */
.partner-tagline { font-size: 1rem; font-weight: 600; margin-bottom: 12px; color: var(--kd-blue); }
.section-karl-dose .partner-tagline { color: var(--kd-nav-blend); }
.section-karl-dose.page-title { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, color-mix(in srgb, var(--kd-navy) 8%, #f8f8f8) 100%); }

.partner-products { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 720px) { .partner-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .partner-products { grid-template-columns: repeat(3, 1fr); } }

.product-card-with-img { overflow: hidden; padding: 0; display: flex; flex-direction: column; min-height: 0; height: 100%; transition: box-shadow 0.25s ease; }
.product-card-img-wrap { width: 100%; aspect-ratio: 16/9; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 5%; background: rgba(16,24,40,.06); overflow: hidden; }
.product-card-img-wrap picture { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.product-card-with-img .product-card-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; }
.product-card-with-img .product-card-body { padding: 16px 18px; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.product-card-with-img .pill { margin-bottom: 8px; }
.product-card-with-img h3,
.product-card-with-img .product-title { margin: 0 0 8px; font-size: 1.08rem; color: rgba(16,24,40,.92); }
.product-card-with-img p { margin: 0; color: rgba(16,24,40,.72); font-size: 0.95rem; line-height: 1.5; }
.product-card-with-img .btn { margin-top: 12px; }

.product-card-resena { font-size: 0.88rem; line-height: 1.5; color: rgba(16,24,40,.7); margin: 0 0 12px; flex: 1; min-height: 0; max-height: 4.5em; overflow: hidden; transition: max-height 0.3s ease; }
.product-card:hover .product-card-resena,
.product-card:focus-within .product-card-resena { max-height: 12em; }

.product-card-vitrina .product-card-body { padding: 16px 18px; }
.product-card-vitrina .product-title { margin: 0 0 8px; font-size: 1.08rem; }
.product-card-vitrina .product-card-resena { margin-bottom: 12px; }
.product-card-vitrina .product-card-body .btn { margin-top: auto; }

/* Portfolio 4 categorías (estilo Karl Dose) */
.kd-portfolio { padding-top: 32px; padding-bottom: 40px; }
.kd-portfolio-header { text-align: center; margin-bottom: 28px; }
.kd-portfolio-title { margin: 0; font-size: clamp(28px, 3.9vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: 2.1px; color: var(--kd-navy); text-transform: uppercase; text-wrap: balance; }
.kd-portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--max); margin: 0 auto; }
@media (max-width: 900px) { .kd-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kd-portfolio-grid { grid-template-columns: 1fr; } }
.kd-portfolio-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(16,24,40,.1); transition: border-color 0.2s, box-shadow 0.2s; }
.kd-portfolio-card:hover { border-color: rgba(21,61,92,.25); box-shadow: 0 8px 24px rgba(21,61,92,.12); }
.kd-portfolio-card-img-wrap { width: 100%; aspect-ratio: 280/180; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(16,24,40,.06); border-radius: 8px; margin-bottom: 12px; }
.kd-portfolio-card-img-wrap picture { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.kd-portfolio-card-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.kd-portfolio-card-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(16,24,40,.88); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; font-weight: 300; margin-bottom: 10px; }
.kd-portfolio-card-label { font-size: 0.95rem; font-weight: 600; color: rgba(16,24,40,.9); text-align: center; }

.section-karl-dose.section-light { background: color-mix(in srgb, var(--kd-navy) 6%, #f8f8f8); }
.section-karl-dose .section-title h2 { color: var(--kd-navy); }
.section-karl-dose .section-title .underline { background: linear-gradient(90deg, var(--kd-amber), var(--naval)); }
.section-karl-dose .product-card { border-color: rgba(21,61,92,.18); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--kd-blue) 4%, #fff) 100%); }
.section-karl-dose .product-card:hover { border-color: rgba(232,155,44,.25); box-shadow: 0 14px 36px rgba(21,61,92,.12); }
.section-karl-dose .product-card .btn.primary,
.section-karl-dose .product-card .btn:hover { border-color: var(--kd-amber); background: color-mix(in srgb, var(--kd-amber) 18%, rgba(255,255,255,.9)); color: var(--kd-navy); }
.section-karl-dose .callout { border-color: rgba(21,61,92,.2); background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--naval) 6%, #fff)); }
.section-karl-dose .callout h3 { color: var(--kd-blue); }

/* Válvulas navales — Meson corporate colors */
.section-valvulas.vl-intro { padding: 56px 0 48px; }
.vl-intro-inner { max-width: 70ch; margin: 0 auto; }
.section-valvulas .page-title-partner-logo { width: auto; max-width: min(360px, 100%); max-height: 86px; margin: 0 auto 24px; display: block; }
.section-valvulas .page-title-brand { color: var(--vl-navy); margin-bottom: 12px; }
.section-valvulas .partner-tagline { color: var(--vl-nav-blend); margin-top: 0; margin-bottom: 20px; }
.vl-intro-text { margin: 0; margin-top: 20px; line-height: 1.65; max-width: 65ch; }
.section-valvulas.page-title { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, color-mix(in srgb, var(--vl-navy) 8%, #f8f8f8) 100%); }
.section-valvulas.section-light { background: color-mix(in srgb, var(--vl-navy) 6%, #f8f8f8); }
.section-valvulas .section-title h2 { color: var(--vl-navy); }
.section-valvulas .section-title .underline { background: linear-gradient(90deg, var(--vl-accent), var(--vl-blue)); }
.section-valvulas .product-card { border-color: rgba(26,61,82,.18); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--vl-blue) 4%, #fff) 100%); }
.section-valvulas .product-card:hover { border-color: rgba(196,61,45,.25); box-shadow: 0 14px 36px rgba(26,61,82,.12); }
.section-valvulas .product-card .btn.primary,
.section-valvulas .product-card .btn:hover { border-color: var(--vl-accent); background: color-mix(in srgb, var(--vl-accent) 18%, rgba(255,255,255,.9)); color: var(--vl-navy); }
.section-valvulas .callout { border-color: rgba(26,61,82,.2); background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--naval) 6%, #fff)); }
.section-valvulas .callout h3 { color: var(--vl-blue); }
.section-valvulas .valvulas-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 720px) { .section-valvulas .valvulas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .section-valvulas .valvulas-grid { grid-template-columns: repeat(3, 1fr); } }

/* Detegasa: tratamiento residuos */
.section-detegasa.dt-intro { padding: 56px 0 48px; }
.dt-intro-inner { max-width: 70ch; margin: 0 auto; }
.section-detegasa .page-title-partner-logo { width: auto; max-width: min(360px, 100%); max-height: 86px; margin: 0 auto 24px; display: block; }
.section-detegasa .page-title-brand { color: var(--dt-navy); margin-bottom: 12px; }
.section-detegasa .partner-tagline { color: var(--dt-nav-blend); margin-top: 0; margin-bottom: 20px; }
.dt-intro-text { margin: 0; margin-top: 20px; line-height: 1.65; max-width: 65ch; }
.section-detegasa.page-title { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, color-mix(in srgb, var(--dt-navy) 8%, #f8f8f8) 100%); }
.section-detegasa.section-light { background: color-mix(in srgb, var(--dt-navy) 6%, #f8f8f8); }
.section-detegasa .section-title h2 { color: var(--dt-navy); }
.section-detegasa .section-title .underline { background: linear-gradient(90deg, var(--dt-accent), var(--naval)); }
.section-detegasa .product-card { border-color: rgba(26,74,92,.18); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--dt-blue) 4%, #fff) 100%); }
.section-detegasa .product-card:hover { border-color: rgba(42,139,122,.25); box-shadow: 0 14px 36px rgba(26,74,92,.12); }
.section-detegasa .product-card .btn.primary,
.section-detegasa .product-card .btn:hover { border-color: var(--dt-accent); background: color-mix(in srgb, var(--dt-accent) 18%, rgba(255,255,255,.9)); color: var(--dt-navy); }
.section-detegasa .callout { border-color: rgba(26,74,92,.2); background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--naval) 6%, #fff)); }
.section-detegasa .callout h3 { color: var(--dt-blue); }
.section-detegasa .partner-products { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 720px) { .section-detegasa .partner-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .section-detegasa .partner-products { grid-template-columns: repeat(3, 1fr); } }

/* Üntel Kablo: misma estructura y colores que Karl Dose (estandarización partner) */
.section-untel-kablo.uk-intro { padding: 56px 0 48px; }
.uk-intro-inner { max-width: 70ch; margin: 0 auto; }
.section-untel-kablo .page-title-partner-logo { width: auto; max-width: min(360px, 100%); max-height: 86px; margin: 0 auto 24px; display: block; }
.section-untel-kablo .page-title-brand { color: var(--uk-navy); margin-bottom: 12px; }
.section-untel-kablo .partner-tagline { color: var(--uk-nav-blend); margin-top: 0; margin-bottom: 20px; }
.uk-intro-text { margin: 0; margin-top: 20px; line-height: 1.65; max-width: 65ch; }
.section-untel-kablo.page-title { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, color-mix(in srgb, var(--uk-navy) 8%, #f8f8f8) 100%); }
.section-untel-kablo.section-light { background: color-mix(in srgb, var(--uk-navy) 6%, #f8f8f8); }
.section-untel-kablo .section-title h2 { color: var(--uk-navy); }
.section-untel-kablo .section-title .underline { background: linear-gradient(90deg, var(--uk-accent), var(--naval)); }
.section-untel-kablo .product-card { border-color: rgba(26,69,96,.18); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--uk-blue) 4%, #fff) 100%); }
.section-untel-kablo .product-card:hover { border-color: rgba(30,122,107,.25); box-shadow: 0 14px 36px rgba(26,69,96,.12); }
.section-untel-kablo .product-card .btn.primary,
.section-untel-kablo .product-card .btn:hover { border-color: var(--uk-accent); background: color-mix(in srgb, var(--uk-accent) 18%, rgba(255,255,255,.9)); color: var(--uk-navy); }
.section-untel-kablo .callout { border-color: rgba(26,69,96,.2); background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--naval) 6%, #fff)); }
.section-untel-kablo .callout h3 { color: var(--uk-blue); }
/* Portfolio Üntel (4 categorías, mismo layout que Karl Dose) */
.uk-portfolio { padding-top: 32px; padding-bottom: 40px; }
.uk-portfolio-header { text-align: center; margin-bottom: 28px; }
.uk-portfolio-title { margin: 0; font-size: clamp(28px, 3.9vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: 2.1px; color: var(--uk-navy); text-transform: uppercase; text-wrap: balance; }
.uk-portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--max); margin: 0 auto; }
@media (max-width: 900px) { .uk-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .uk-portfolio-grid { grid-template-columns: 1fr; } }
.uk-portfolio-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(16,24,40,.1); transition: border-color 0.2s, box-shadow 0.2s; }
.uk-portfolio-card:hover { border-color: rgba(26,69,96,.25); box-shadow: 0 8px 24px rgba(26,69,96,.12); }
.uk-portfolio-card-img-wrap { width: 100%; aspect-ratio: 280/180; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(16,24,40,.06); border-radius: 8px; margin-bottom: 12px; }
.uk-portfolio-card-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.uk-portfolio-card-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(16,24,40,.88); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; font-weight: 300; margin-bottom: 10px; }
.uk-portfolio-card-label { font-size: 0.95rem; font-weight: 600; color: rgba(16,24,40,.9); text-align: center; }
/* Grid productos: mismo que Karl Dose (2 col 720px, 3 col 1000px) */
.section-untel-kablo .partner-products { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 720px) { .section-untel-kablo .partner-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .section-untel-kablo .partner-products { grid-template-columns: repeat(3, 1fr); } }


/* Banner de cookies */

.cookie-banner{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 16px var(--pad);
  background: linear-gradient(180deg, rgba(13,36,58,.97), rgba(10,27,43,.98));
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -8px 32px rgba(0,0,0,.25);
}
.cookie-banner-inner{
  max-width: var(--max);
  margin: 0 auto;
}
.cookie-banner-text{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
}
.cookie-banner-text a{
  color: var(--naval);
  text-decoration: underline;
}
.cookie-banner-text a:hover{
  color: #5ce0ff;
}
.cookie-banner-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cookie-banner-actions .btn{
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
}
.cookie-banner-actions .btn:hover{
  background: rgba(255,255,255,.14);
}
.cookie-banner-actions .btn.primary{
  border-color: rgba(54,211,255,.35);
  background: rgba(54,211,255,.18);
}
.cookie-banner-actions .btn.primary:hover{
  background: rgba(54,211,255,.28);
}
@media (max-width: 720px){
  .cookie-banner-actions{ flex-direction: column; }
  .cookie-banner-actions .btn{ width: 100%; }
}

/* ---------- Movimiento reducido ----------
   Respeta la preferencia del sistema: sin esto, el zoom del hero, la marquesina
   de logos y el scroll suave se ejecutan igual para quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html{ scroll-behavior: auto; }
  .partners-track,
  .clients-marquee .partners-track{ animation: none !important; transform: none !important; }
  .hero-slide img{ animation: none !important; }
}

/* Botón de pausa de la marquesina de clientes (sustituye al clic sobre el div) */
.marquee-pause{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.28);
  background: #fff;
  color: rgba(16,24,40,.86);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.marquee-pause:hover{ border-color: var(--focus-on-light); }
.marquee-pause:focus-visible{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
}
.marquee-pause-wrap{ display: flex; justify-content: center; }
.partners-marquee.is-paused .partners-track{ animation-play-state: paused !important; }

/* Aviso de consentimiento bajo el botón de envío */
.form-consent{
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(16,24,40,.66);
}
.form-consent a{ color: var(--link-on-light); text-decoration: underline; }


/* El botón de pausa del carrusel también detiene el zoom de la foto (WCAG 2.2.2) */
.hero-slider.is-paused .hero-slide img{ animation-play-state: paused !important; }

/* Foco visible donde antes había outline:none sin sustituto */
.contact-mini a:focus-visible,
.roadmap-input:focus,
.roadmap-select:focus{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
}

/* Flechas del carrusel: los botones estaban vacíos y sin glifo */
.hero-nav{ border-color: rgba(255,255,255,.55); }
.hero-nav::before{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-top: 2px solid rgba(255,255,255,.95);
  border-right: 2px solid rgba(255,255,255,.95);
}
.hero-prev::before{ transform: rotate(-135deg); margin-left: 20px; }
.hero-next::before{ transform: rotate(45deg); margin-right: 20px; }

/* Texto solo para lectores de pantalla */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mensaje de éxito del formulario: 2,97:1 -> 4,6:1 */
.form-status.ok{ color: rgba(17,122,56,.98); }


/* Idioma sin contraparte (solo la herramienta interna de roadmap) */
.lang-pill.is-unavailable{
  opacity: .45;
  cursor: default;
}
/* El foco de los enlaces de idioma tenía el mismo problema que el resto */
a.lang-pill:focus-visible{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
}


/* Escape cierra el submenú de escritorio aunque el puntero siga encima */
.nav-item.sub-force-closed .nav-sublist{
  opacity: 0 !important;
  visibility: hidden !important;
}


/* Mapa bajo demanda: sustituye al iframe que se cargaba siempre */
.map-placeholder{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  /* Las rayas diagonales se leian como una imagen a medio cargar. Un tono
     plano de la paleta deja claro que es un hueco a la espera de permiso. */
  background: color-mix(in srgb, var(--menuBlue) 7%, #f2f5f8);
}
.map-placeholder-address{
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(16,24,40,.90);
}
.map-placeholder-note{
  margin: 0;
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(16,24,40,.66);
}
.map-placeholder-link{
  font-size: 12px;
  color: var(--link-on-light);
  text-decoration: underline;
}
.map-placeholder-link:focus-visible,
.map-placeholder .btn:focus-visible{
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
}


/* Fichas breves de la página Partners */
.partner-briefs{
  display: grid;
  gap: 28px;
  margin-top: 8px;
}
.partner-brief{
  /* Hoja de datos, no tarjeta de marketing: cabecera y pie en banda, los
     campos con etiqueta y las familias y normas como marcas separadas. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.12);
  border-left: 3px solid var(--menuBlue);
  border-radius: 14px;
  background: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-left-color .16s ease;
}

/* ---- Cabecera: logo + nombre + rubro ---- */
.pb-cabecera{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--menuBlue) 5%, #f4f7fa);
  border-bottom: 1px solid rgba(16,24,40,.10);
}
.pb-logo{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 74px;
  height: 46px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(16,24,40,.10);
  background: #fff;
}
.pb-logo img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pb-logo-vacio{
  /* SCP Sintersa no tiene archivo de logo. Se dice, no se disimula. */
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  /* .55 daba 3,97:1 sobre el recuadro blanco, por debajo del minimo AA. */
  color: rgba(16,24,40,.70);
}
.pb-titulos{ min-width: 0; }
.pb-titulos h2{ margin: 0; font-size: 1.18rem; color: rgba(16,24,40,.94); }
.pb-categoria{
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(16,24,40,.68);
}

/* ---- Campos con etiqueta ---- */
.pb-datos{
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(16,24,40,.08);
}
.pb-fila{ display: flex; gap: 14px; align-items: baseline; }
.pb-fila + .pb-fila{ margin-top: 6px; }
.pb-fila dt{
  flex: 0 0 96px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(16,24,40,.62);
}
.pb-fila dd{ margin: 0; font-size: 15px; color: rgba(16,24,40,.88); }

/* ---- Cuerpo ---- */
.pb-cuerpo{ flex: 1 1 auto; padding: 18px 20px 20px; }
.pb-resumen{ margin: 0 0 16px; max-width: 60ch; }
.pb-rotulo{
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(16,24,40,.62);
}
.pb-marcas{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pb-marcas:last-child{ margin-bottom: 0; }
.pb-chip{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(16,24,40,.18);
  background: #fff;
  font-size: 13px;
  color: rgba(16,24,40,.82);
  text-decoration: none;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
a.pb-chip:hover, a.pb-chip:focus-visible{
  border-color: var(--link-on-light);
  color: var(--link-on-light);
  background: color-mix(in srgb, var(--link-on-light) 6%, #fff);
}
.pb-chip-norma{
  /* Las normas se distinguen del catalogo: son el dato que mira un jefe de
     compras. Dorado de marca en el filo, texto oscuro para llegar a AA. */
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(16,24,40,.18));
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  color: #6b4e00;
  font-weight: 650;
}

/* ---- Pie ---- */
.pb-pie{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: color-mix(in srgb, var(--menuBlue) 5%, #f4f7fa);
  border-top: 1px solid rgba(16,24,40,.10);
}
.pb-sitio{ font-size: 14px; color: var(--link-on-light); }

@media (max-width: 480px){
  .pb-cabecera, .pb-datos, .pb-cuerpo, .pb-pie{ padding-left: 14px; padding-right: 14px; }
  .pb-fila{ flex-direction: column; gap: 2px; }
  .pb-fila dt{ flex-basis: auto; }
}
/* Son <article> con enlaces dentro, no tarjetas enteras pulsables: la
   respuesta al puntero es discreta a proposito, para no prometer un clic que
   no existe. El filo izquierdo pasa al dorado de marca, que es el unico sitio
   de la pantalla donde ese color aparece. */
.partner-brief:hover,
.partner-brief:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(16,24,40,.10);
  border-left-color: var(--accent);
}
@media (prefers-reduced-motion: reduce){
  .partner-brief{ transition: none; }
  .partner-brief:hover,
  .partner-brief:focus-within{ transform: none; }
}
.partner-brief p{ line-height: 1.65; max-width: 68ch; }
@media (min-width: 900px){
  .partner-briefs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Relato de la página Nosotros */
.about-story{
  max-width: 68ch;
  /* Sin esto la columna de 68ch se queda pegada a la izquierda mientras el
     titulo de la seccion va centrado, y la pagina queda descompensada. */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-story p{
  margin: 0;
  line-height: 1.7;
  /* Esta seccion vive sobre fondo oscuro (.section). El color anterior
     (rgba(16,24,40,.82)) era el de las secciones claras y dejaba el texto
     invisible. Se alinea con el resto de la prosa sobre oscuro del sitio. */
  color: rgba(255,255,255,.84);
}

/* Marca "(opcional)" en las etiquetas de formulario: mismo color atenuado que
   el resto de texto secundario, para que no compita con el nombre del campo. */
.field-optional{
  font-weight: 400;
  opacity: .62;
  margin-left: .35ch;
}


/* ===========================================================================
   Ficha de fabricante — bloque generico
   Las cuatro primeras fichas (Untel, Karl Dose, Ferri, Norwegian Greentech)
   repiten cada una ~26 reglas identicas salvo el color. Este bloque hace lo
   mismo una sola vez, leyendo cuatro variables que fija la clase de marca.
   Las paginas antiguas siguen con sus clases propias; pueden migrar aqui sin
   prisa.
   =========================================================================== */
.section-partner{
  --pt-navy: var(--menuBlue);
  --pt-blue: #1a4560;
  --pt-accent: var(--naval);
  --pt-blend: color-mix(in srgb, var(--menuBlue) 55%, var(--naval) 45%);
}
.section-scp-sintersa{
  --pt-navy: var(--scp-navy); --pt-blue: var(--scp-blue);
  --pt-accent: var(--scp-accent); --pt-blend: var(--scp-nav-blend);
}
.section-wilson-walton{
  --pt-navy: var(--ww-navy); --pt-blue: var(--ww-blue);
  --pt-accent: var(--ww-accent); --pt-blend: var(--ww-nav-blend);
}
.section-detegasa-pt{
  --pt-navy: var(--dt-navy); --pt-blue: var(--dt-blue);
  --pt-accent: var(--dt-accent); --pt-blend: var(--dt-nav-blend);
}

.section-partner.pt-intro{ padding: 56px 0 48px; }
.section-partner.page-title{
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%,
              color-mix(in srgb, var(--pt-blue) 8%, #f8f8f8) 100%);
}
.section-partner.section-light{ background: color-mix(in srgb, var(--pt-navy) 6%, #f8f8f8); }
.section-partner .page-title-partner-logo{
  width: auto; max-width: min(360px, 100%); max-height: 86px;
  margin: 0 auto 24px; display: block;
}
.section-partner .page-title-brand{ color: var(--pt-navy); margin-bottom: 12px; }
.section-partner .partner-tagline{ color: var(--pt-blend); margin-top: 0; margin-bottom: 20px; }
.section-partner .section-title h2{ color: var(--pt-navy); }
.section-partner .section-title .underline{
  background: linear-gradient(90deg, var(--pt-accent), var(--naval));
}
.section-partner .partner-products{ display: grid; gap: 20px; align-items: stretch; }
.section-partner .product-card{
  border-color: color-mix(in srgb, var(--pt-blue) 18%, transparent);
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--pt-navy) 3%, #fff) 100%);
}
.section-partner .product-card:hover{
  border-color: color-mix(in srgb, var(--pt-accent) 30%, transparent);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--pt-blue) 12%, transparent);
}
.pt-intro-inner{ max-width: 70ch; margin: 0 auto; }
.pt-intro-text{ margin: 20px 0 0; line-height: 1.65; max-width: 65ch; }

.pt-portfolio{ padding-top: 32px; padding-bottom: 40px; }
.pt-portfolio-header{ text-align: center; margin-bottom: 28px; }
.pt-portfolio-title{
  margin: 0; font-size: clamp(28px, 3.9vw, 46px); font-weight: 800;
  line-height: 1.06; letter-spacing: 2.1px; color: var(--pt-navy);
  text-transform: uppercase; text-wrap: balance;
}
.pt-portfolio-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: var(--max); margin: 0 auto;
}
.pt-portfolio-card{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; padding: 18px 14px 16px; border-radius: 12px;
  border: 1px solid rgba(16,24,40,.12); background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pt-portfolio-card:hover{
  border-color: color-mix(in srgb, var(--pt-accent) 35%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--pt-blue) 12%, transparent);
  transform: translateY(-2px);
}
/* Contenedor de la imagen del acceso rapido. Sin esto la foto se deforma:
   los originales son 16:9 y la tarjeta los encajaba en una caja mas cuadrada. */
.pt-portfolio-card-img-wrap{
  width: 100%;
  aspect-ratio: 280 / 180;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pt-portfolio-card-img-wrap img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pt-portfolio-card-icon{
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(16,24,40,.88); color: #fff; font-weight: 700; font-size: 15px;
}
.pt-portfolio-card-label{
  font-size: .95rem; font-weight: 600; color: rgba(16,24,40,.9); text-align: center;
}

/* Hueco de imagen mientras el fabricante no envia su material.
   No es un <img> roto: es un panel deliberado con el nombre del producto, para
   que la pagina se pueda revisar entera antes de tener las fotos. */
.pt-img-pendiente{
  width: 100%; aspect-ratio: 400/225; display: grid; place-items: center;
  gap: 6px; padding: 12px; text-align: center; border-radius: 10px;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--pt-navy) 4%, #fff) 0 10px,
    color-mix(in srgb, var(--pt-navy) 7%, #fff) 10px 20px);
  border: 1px dashed color-mix(in srgb, var(--pt-blue) 28%, transparent);
  color: color-mix(in srgb, var(--pt-navy) 62%, #6b7a8c);
}
.pt-img-pendiente b{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pt-img-pendiente span{ font-size: 11px; opacity: .8; }
.pt-portfolio-card .pt-img-pendiente{ aspect-ratio: 280/180; }

@media (max-width: 900px){ .pt-portfolio-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .pt-portfolio-grid{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){
  .pt-portfolio-card{ transition: none; }
  .pt-portfolio-card:hover{ transform: none; }
}

/* Enlace a la ficha tecnica del fabricante. Va junto a Cotizar porque en
   industrial el PDF es la herramienta de venta: el comprador se lo reenvia a
   su ingeniero. Se abre en pestana nueva y se avisa a lectores de pantalla. */
.product-datasheet{
  display: inline-block; margin-left: 12px; font-size: 13px; font-weight: 600;
  color: var(--link-on-light); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link-on-light) 35%, transparent);
}
.product-datasheet:hover{ border-bottom-color: var(--link-on-light); }
.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;
}