@font-face{
  font-family: "InterVar";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter.var.woff2") format("woff2");
}

/* 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;
  --brand2: #a78bfa;
  --accent: #f2c200;
  --topbar: #1f2e3d;
  --topbar-h: 36px;
  /* 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;
  /* Header: logo lo más grande posible sin deformar */
  --header-h: 104px;
  --logo-h: 82px;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --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) 55%, var(--naval) 45%);
  /* Ü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) 55%, var(--naval) 45%);
  /* 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) 55%, var(--naval) 45%);
  /* 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) 55%, var(--naval) 45%);
}

*{ 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 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--line);
  color: var(--text);
}
.skip-link:focus{ left: 10px; z-index: 9999; }

/* 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);
  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;
  height: 100%;
  padding: 0 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-mark{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.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: none;
  box-shadow: 0 0 0 4px rgba(54,211,255,.22), 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));
}

.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{
  border-color: rgba(110,231,255,.25);
  background: linear-gradient(135deg, rgba(110,231,255,.16), rgba(167,139,250,.14));
}
.btn.primary:hover{
  border-color: rgba(110,231,255,.40);
}
.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: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  padding: 0;
  cursor: pointer;
}
.dot-btn[aria-current="true"]{
  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,.35), rgba(11,18,32,.55));
  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-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 h1{
  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: 850;
  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: 900; 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: 900; 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 {
  max-height: 78px;
  --logo-scale: 1.1;
}

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

.section{
  padding: clamp(56px, 7vw, 92px) 0;
}
/* 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{
  border-color: rgba(54,211,255,.28);
  background: linear-gradient(135deg, rgba(54,211,255,.18), rgba(167,139,250,.14));
}

.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: 900;
  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 rgba(11,92,255,.35);
  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: 900;
  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;
  font-size: clamp(30px, 4vw, 44px);
  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 */
  background: linear-gradient(135deg, rgba(169,169,169,.34) 0%, rgba(140,140,140,.24) 60%), linear-gradient(180deg, rgba(190,190,190,.2), rgba(128,128,128,.31));
}
.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;
  text-shadow:
    0 0 12px rgba(0,0,0,.9),
    0 0 24px rgba(0,0,0,.7),
    0 2px 4px rgba(0,0,0,.9),
    0 4px 8px rgba(0,0,0,.8),
    1px 1px 0 rgba(0,0,0,1),
    -1px -1px 0 rgba(0,0,0,.8);
  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{
  border: 2px solid #fff;
  background: linear-gradient(135deg, #36d3ff, #0d243a);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.08em;
  box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.2);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.productos-hero-ctas .btn.primary:hover{
  border-color: #36d3ff;
  background: linear-gradient(135deg, #5adcff, #153d5c);
  color: #fff;
  box-shadow: 0 6px 28px rgba(0,0,0,.5), 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(167,139,250,.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: 850;
  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(167,139,250,.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;
  color: rgba(255,255,255,.96);
  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: none;
  box-shadow: 0 0 0 4px rgba(54,211,255,.22), 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: rgba(54,211,255,.28);
  background: linear-gradient(135deg, rgba(54,211,255,.22), rgba(167,139,250,.18));
}
.about-hero .btn.primary:hover{
  border-color: rgba(54,211,255,.42);
  background: linear-gradient(135deg, rgba(54,211,255,.28), rgba(167,139,250,.22));
}

/* 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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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{
  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{
  display: grid;
  /* Layout premium y consistente: 2 filas (6 logos) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
  align-items: center;
  justify-items: center;
  margin: 18px auto 0;
  padding: 12px 0;
  max-width: 980px;
}
.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-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{
  --logo-scale: 1;
  width: auto;
  max-width: min(320px, 100%);
  max-height: 72px;
  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);
}

.partners-logos img[alt="Ghenova"],
.partners-logos img[alt="GHENOVA"]{
  --logo-scale: 1.22;
}

.partners-logos img[alt="DOSE"],
.partners-logos img[alt="Dose"]{
  --logo-scale: 1.18;
}

.partners-logos img[alt="Sealand Global"],
.partners-logos img[alt="SEALAND"]{
  --logo-scale: 1.38;
}

.partners-logos img[alt="Norwegian Greentech"]{
  --logo-scale: 1.12;
}

/* (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;
  align-items: stretch;
}
.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;
  font-size: 22px;
  letter-spacing: .2px;
  font-weight: 850;
}
.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,.16);
  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,.46);
}
.contact-saas .field input:hover,
.contact-saas .field textarea:hover{
  border-color: rgba(16,24,40,.24);
}
.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;
  background: transparent;
  color: rgba(13,36,58,.95);
  border: 1.5px solid rgba(13,36,58,.32);
  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: rgba(13,36,58,.06);
  border-color: rgba(13,36,58,.45);
  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: none;
  border-color: rgba(54,211,255,.55);
  box-shadow:
    0 0 0 4px rgba(54,211,255,.22),
    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: 850;
  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: 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;
}
.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);
  min-height: 360px;
}
.contact-mapbox iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Pin simple (custom) */
.contact-pin{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -100%);
  border-radius: 999px 999px 999px 0;
  rotate: -45deg;
  background: linear-gradient(135deg, rgba(54,211,255,.92), rgba(167,139,250,.88));
  box-shadow: 0 14px 34px rgba(16,24,40,.16);
}
.contact-pin::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}

.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,.14);
  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: rgba(54,211,255,.45);
  box-shadow: 0 0 0 4px rgba(54,211,255,.16);
}
.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 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-logos{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .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){
  .partners-logos{ grid-template-columns: 1fr; }
  .partner-item{ min-height: 96px; padding: 12px 10px; }
}

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

@media (max-width: 720px){
  :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; }
  .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; }
  .partners-logos{ grid-template-columns: repeat(2, minmax(0, 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,.14);
  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(167,139,250,.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(--naval); 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: 900; 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: 900; 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%; }
}