/* ===================================================================
   NEPTUNUS — Design B: "Aqua Glass" — Apple Liquid-Glass Style
   Palette: white + pastel sky blue. Elegant, corporate typography.
   =================================================================== */

/* ---- Tipografía autoalojada ----
   Antes venía de fonts.googleapis.com por @import, lo que enviaba la IP de
   cada visitante a Google antes de cualquier interacción. Los archivos son
   los mismos que servía Google (Manrope e Inter variables), con los mismos
   unicode-range, así que el render no cambia: el navegador sigue bajando
   solo el subconjunto que necesita. Se conserva el cirílico porque el sitio
   se publica en ruso. El chino nunca lo cubrieron estas familias: sigue
   recayendo en la fuente del sistema, igual que antes. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-greek-ext.woff2') format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/inter-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/manrope-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/manrope-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/manrope-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}

:root{
  --blue:#3E86C9;
  --blue-deep:#2A6AAB;
  --blue-ink:#1B3A5B;
  --sky:#9CC8EE;
  --pastel:#E7F1FB;
  --pastel-2:#D4E7F8;
  --ink:#1D2A3A;
  --muted:#5E7184;
  --white:#ffffff;
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.70);
  --glass-border:rgba(255,255,255,.7);
  --radius:26px;
  --radius-lg:34px;
  --shadow:0 30px 60px -28px rgba(43,106,171,.45);
  --shadow-sm:0 14px 34px -20px rgba(43,106,171,.5);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Con Lenis activo el suavizado nativo sobra: dos sistemas actuando sobre
   el mismo desplazamiento es justo lo que produce sensación de arrastre. */
html.lenis,
html.lenis-smooth{scroll-behavior:auto}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;
  background:#F4F9FF;position:relative;overflow-x:hidden;
}
/* animated pastel background blobs */
.bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-orbs::before,.bg-orbs::after,.bg-orbs i{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;
}
.bg-orbs::before{width:520px;height:520px;background:#BcdCF5;top:-160px;left:-120px;
  background:radial-gradient(circle,#bcd9f6,transparent 70%);animation:float1 22s ease-in-out infinite}
.bg-orbs::after{width:480px;height:480px;background:radial-gradient(circle,#cfe6fb,transparent 70%);
  bottom:-180px;right:-120px;animation:float2 26s ease-in-out infinite}
.bg-orbs i{width:360px;height:360px;background:radial-gradient(circle,#e3f0fc,transparent 70%);
  top:38%;left:55%;animation:float1 30s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,50px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-70px,-40px)}}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Manrope',sans-serif;line-height:1.14;font-weight:700;letter-spacing:-.02em;color:var(--blue-ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{
  font-family:'Manrope',sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
}
.section{padding:104px 0}
.section-sm{padding:66px 0}
.center{text-align:center}
.lead{font-size:1.07rem;color:var(--muted);max-width:600px}
.center .lead{margin-left:auto;margin-right:auto}

/* ---- Glass primitive ---- */
.glass{
  background:var(--glass-strong);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:var(--radius);
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.95rem;
  padding:.92rem 1.75rem;border-radius:999px;transition:.28s ease;cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(135deg,#5aa0db,#2f72b4);color:#fff;
  box-shadow:0 12px 26px -12px rgba(43,106,171,.7),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(43,106,171,.8)}
/* Botón del navbar más compacto y proporcional */
.nav-cta .btn-primary{
  padding:.62rem 1.25rem;
  font-size:.86rem;
  letter-spacing:.01em;
}
.btn-glass{
  background:var(--glass-strong);
  border:1px solid var(--glass-border);color:var(--blue-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-glass:hover{transform:translateY(-2px);background:#fff}
.btn-ghost{border:1.4px solid rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}

/* ---- Hero "Contact us" — same glass pill as navbar ---- */
.hero-actions .btn-glass{
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  color:var(--blue-ink);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-actions .btn-glass:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.85);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---- Header — floating glass pill ---- */
/* Navbar full-width edge-to-edge */
.nav{
  position:sticky;top:0;z-index:100;padding:0;
  background:var(--glass-strong);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-sm);
}
.nav-inner{
  max-width:1280px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;height:74px;padding:0 38px;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  gap:20px;
}
.nav-logo img{height:46px}
.nav-links{display:flex;align-items:center;gap:8px;list-style:none}
.nav-links a{
  font-family:'Manrope',sans-serif;font-weight:500;font-size:.92rem;color:var(--blue-ink);
  padding:.5rem .95rem;border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .22s ease, color .22s ease, box-shadow .22s ease;
  position:relative;
}
.nav-links a:hover{
  transform:translateY(-2px);
  background:rgba(110,165,217,.10);
  color:var(--blue-deep);
  box-shadow:0 6px 14px -10px rgba(43,106,171,.4);
}
.nav-links a.active{background:linear-gradient(135deg,#5aa0db,#2f72b4);color:#fff}
.nav-links a.active:hover{transform:translateY(-2px);color:#fff}
.nav-cta{display:flex;align-items:center;gap:10px}

/* ---- Language selector (iOS 3D-touch glass menu) ---- */
.lang-wrap{position:relative;display:inline-flex;align-items:center}
.lang-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.86rem;color:var(--blue-ink);
  padding:.5rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid var(--glass-border);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:.22s ease;
}
.lang-btn:hover{background:rgba(255,255,255,.85);transform:translateY(-1px)}
.lang-btn .globe{font-size:.95rem;line-height:1}
.lang-btn .chev{transition:.25s;font-size:.6rem;opacity:.65;margin-left:.1rem}
.lang-btn.open .chev{transform:rotate(180deg)}

.lang-menu{
  position:absolute;top:calc(100% + 20px);right:0;min-width:200px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);border-radius:24px;
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.95);
  padding:6px;
  opacity:0;pointer-events:none;
  transform:scale(.88) translateY(-8px);
  transform-origin:top right;
  transition:opacity .18s ease, transform .26s cubic-bezier(.18,1.25,.4,1);
  z-index:200;
}
.lang-menu.open{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}
/* Cerrado, tampoco en el orden de tabulación (sus 5 botones eran paradas invisibles) */
.lang-menu:not(.open){visibility:hidden}
.lang-option{
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.7rem .85rem;border:0;background:transparent;border-radius:12px;
  font-family:'Manrope',sans-serif;font-size:.92rem;color:var(--blue-ink);font-weight:500;
  cursor:pointer;text-align:left;transition:.15s;
}
.lang-option + .lang-option{margin-top:2px}
.lang-option:hover{background:rgba(255,255,255,.75)}
.lang-option.active{
  background:linear-gradient(135deg,rgba(110,165,217,.22),rgba(47,114,180,.28));
  color:var(--blue-deep);font-weight:600;
}
.lang-option .flag{font-size:1.15rem;line-height:1}
.lang-option .check{margin-left:auto;color:var(--blue-deep);opacity:0;font-weight:700;transition:.15s}
.lang-option.active .check{opacity:1}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:22px;height:2px;background:var(--blue-ink);border-radius:2px}

/* ---- Hero ---- */
.hero{
  padding:216px 0 150px;margin-top:-86px;
  position:relative;overflow:hidden;isolation:isolate;
  min-height:846px;display:flex;align-items:center;
}
.hero::before{
  content:"";position:absolute;inset:-10px;z-index:-3;
  background:url('/img/hero-home-desktop-v2.jpg') center 35%/cover no-repeat;
  filter:saturate(1.08);
}
.hero-video{
  position:absolute;inset:-10px;z-index:-2;
  width:calc(100% + 20px);height:calc(100% + 20px);
  object-fit:cover;object-position:center 35%;
  filter:saturate(1.08);
  pointer-events:none;
}
/* Movimiento reducido: sin reproducción continua. Al ocultar el vídeo queda
   a la vista .hero::before, que es exactamente el mismo fotograma que el
   póster y con el mismo encuadre: ni salto de imagen ni CLS. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(5,14,24,.44) 0%,
    rgba(5,14,24,.34) 10%,
    rgba(5,14,24,.30) 32%,
    rgba(5,14,24,.28) 58%,
    rgba(5,14,24,.34) 100%);
}
.hero-inner{max-width:860px;margin:0 auto;text-align:center;width:100%;position:relative;z-index:1}
.hero h1{text-shadow:0 2px 14px rgba(244,249,255,.85), 0 1px 2px rgba(255,255,255,.6)}
.hero h1 .grad{
  text-shadow:none;
  background:linear-gradient(120deg,#3E86C9,#2A6AAB 55%,#1B3A5B);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--blue-ink);font-weight:500;text-shadow:0 1px 8px rgba(244,249,255,.9)}
.hero .pill{
  display:inline-flex;align-items:center;gap:.5rem;font-family:'Manrope',sans-serif;
  font-size:.8rem;font-weight:600;color:var(--blue-deep);
  background:var(--glass-strong);border:1px solid var(--glass-border);
  padding:.5rem 1.1rem;border-radius:999px;margin-bottom:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.hero h1{
  font-size:clamp(2.6rem,6.3vw,4.7rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.04;margin-bottom:22px;
}
.hero h1 .grad{
  background:linear-gradient(120deg,#6aa9de,#2f72b4 60%,#1B3A5B);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{font-size:1.18rem;color:var(--muted);max-width:560px;margin:0 auto 32px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-visual{
  margin:54px auto 0;max-width:980px;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--glass-border);box-shadow:var(--shadow);
  position:relative;
}
.hero-visual img{width:100%;height:420px;object-fit:cover}
.hero-visual .glass-strip{
  position:absolute;left:24px;right:24px;bottom:24px;
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  background:var(--glass);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);border-radius:20px;padding:18px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.hero-visual .glass-strip div{text-align:center;flex:1;min-width:110px}
.hero-visual .glass-strip strong{
  display:block;font-family:'Manrope',sans-serif;font-size:1.5rem;color:#fff;font-weight:800;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.hero-visual .glass-strip span{font-size:.78rem;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* ---- Mission as overlay hero ---- */
.mission-hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:740px;
  display:flex;align-items:flex-start;
}
.mission-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('/img/photo-output.jpeg') center 35%/cover no-repeat;
}
.mission-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(244,249,255,.84) 0%,
    rgba(244,249,255,.78) 30%,
    rgba(244,249,255,.74) 55%,
    rgba(244,249,255,.76) 100%);
}
.mission-hero .wrap{
  position:relative;z-index:1;width:100%;
  padding-top:80px;padding-bottom:80px;
}
.mission-hero-text{max-width:560px}
.mission-hero-text h2{
  text-shadow:0 1px 8px rgba(244,249,255,.7);
}
.mission-hero-text p{
  color:var(--blue-ink);
  font-weight:500;
  text-shadow:0 1px 8px rgba(244,249,255,.9);
}

/* ---- Products page top area (hero-boats bg + stats card) ---- */
.products-top-bg{
  position:relative;overflow:hidden;isolation:isolate;
  /* sube el bloque para que el fondo cubra detrás del navbar */
  margin-top:-110px;
  padding-top:110px;
  /* altura mínima reducida para que stats quede más cerca de productos */
  min-height: 52vw;
}
.products-top-bg::before{
  content:"";position:absolute;inset:0;z-index:-2;
  /* cover + center top: llena todo el wrapper, preserva la parte superior de la foto */
  background:url('/img/hero-boats.jpg') center top/cover no-repeat;
  filter:saturate(1.08);
}
.products-top-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(244,249,255,.88) 0%,
    rgba(244,249,255,.82) 30%,
    rgba(244,249,255,.78) 55%,
    rgba(244,249,255,.86) 75%,
    rgba(244,249,255,.96) 90%,
    rgba(244,249,255,1) 100%);
}
.products-top-bg .wrap{position:relative;z-index:1}
.page-hero-text{
  max-width:760px;margin:0 auto;text-align:center;
  padding:40px 0 20px;
}
.page-hero-text h1{
  font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.08;margin:14px 0 18px;
  text-shadow:0 2px 14px rgba(244,249,255,.85),0 1px 2px rgba(255,255,255,.6);
}
.page-hero-text h1 .grad{
  text-shadow:none;
  background:linear-gradient(120deg,#6aa9de,#2f72b4 60%,#1B3A5B);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero-text p{
  color:var(--blue-ink);font-weight:500;font-size:1.05rem;
  text-shadow:0 1px 8px rgba(244,249,255,.9);
  max-width:620px;margin:0 auto;
}

/* ---- Products bottom area (grid + why) — fondo limpio como about us ---- */
.products-bottom-bg{
  position:relative;
  /* fondo base del sitio (mismo que body / about us) */
  background:#F4F9FF;
}
.products-bottom-bg .wrap{position:relative;z-index:1}

/* ---- Catalogue with image background ---- */
.catalog-section{
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:80px;padding-bottom:80px;
}
.catalog-section::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('/img/photo-output%202.jpeg') center center/cover no-repeat;
}
.catalog-section::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(244,249,255,.86) 0%,
    rgba(244,249,255,.80) 30%,
    rgba(244,249,255,.76) 55%,
    rgba(244,249,255,.78) 100%);
}
.catalog-section .wrap{position:relative;z-index:1}
.catalog-section .sec-head h2{text-shadow:0 1px 8px rgba(244,249,255,.7)}
.catalog-section .sec-head .lead{text-shadow:0 1px 6px rgba(244,249,255,.7)}

/* ---- Countries + CTA — shared image background with bottom fade-out ---- */
.countries-section{
  position:relative;overflow:hidden;isolation:isolate;
}
.countries-section::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('/img/photo-output%205.jpeg') center center/cover no-repeat;
}
.countries-section::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Transición progresiva mapa → blanco antes del footer */
  background:linear-gradient(180deg,
    rgba(244,249,255,.78) 0%,
    rgba(244,249,255,.80) 35%,
    rgba(255,255,255,.92) 70%,
    rgba(255,255,255,1) 100%);
}
.countries-section .wrap{position:relative;z-index:1}
.countries-section .sec-head h2{text-shadow:0 1px 8px rgba(244,249,255,.7)}
/* Keep countries glass at .50 — image needs to breathe through */
.countries-section .glass{background:rgba(255,255,255,.50)}

/* ---- Section heading ---- */
.sec-head{max-width:640px;margin-bottom:50px}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(2rem,3.7vw,2.9rem);margin:14px 0 14px}

/* ---- Split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--glass-border);box-shadow:var(--shadow)}
.split-media img{width:100%;height:100%;object-fit:cover;min-height:340px}

/* ---- Product cards (glass frame matching navbar pill) ---- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prod-card{
  padding:0;border-radius:32px;overflow:hidden;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);
  transition:.32s cubic-bezier(.2,.7,.2,1);
}
.prod-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.prod-thumb{
  aspect-ratio:4/3;background:transparent;overflow:hidden;
  border-radius:0;
}
.prod-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s;display:block}
.prod-card:hover .prod-thumb img{transform:scale(1.06)}
.prod-body{padding:22px 24px 26px}

/* ---- Products page expanded cards (XL with formats list) ---- */
.prod-card-xl{
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;
  margin-bottom:28px;align-items:stretch;
}
/* Los hijos de un grid llevan min-width:auto, así que .prod-thumb crecía
   hasta el tamaño intrínseco de la fotografía (hasta 792px) y se salía de
   su columna de 420px, tapando título, texto, listas y botones. Con
   min-width:0 la caja se queda dentro de su pista y el recorte lo hace
   object-fit, sin deformar la imagen. */
.prod-card-xl > .prod-thumb,
.prod-card-xl > .prod-body{min-width:0}
.prod-card-xl .prod-thumb{
  aspect-ratio:auto;height:100%;min-height:340px;
  width:100%;max-width:100%;overflow:hidden;
}
.prod-card-xl .prod-thumb img{
  width:100%;height:100%;max-width:100%;
  object-fit:cover;display:block;
}
.prod-card-xl .prod-body{padding:36px 38px;display:flex;flex-direction:column;justify-content:center}
.prod-card-xl .prod-body h2{font-size:clamp(1.6rem,2.4vw,2rem);margin-bottom:4px;color:var(--blue-ink)}
.prod-card-xl .prod-body .prod-sci{font-size:.95rem;margin-bottom:18px}
.prod-card-xl .prod-body p{font-size:.98rem;line-height:1.65;color:var(--blue-ink);margin-bottom:18px}
.prod-format-title{
  font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--blue-deep);margin:6px 0 10px;
}
.prod-formats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.prod-formats li{
  position:relative;padding-left:22px;font-size:.92rem;color:var(--blue-ink);
}
.prod-formats li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#6aa9de,#2f72b4);
}
.prod-thumb-fallback{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#E7F1FB,#C9E0F3);
  font-size:6rem;color:rgba(43,106,171,.3);
}
.prod-card-cta{
  grid-template-columns:1fr;background:linear-gradient(135deg,rgba(110,165,217,.18),rgba(47,114,180,.10));
}
.prod-card-cta .prod-body{padding:60px 40px;text-align:center}

/* ---- Quick stats strip ---- */
.prod-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:28px 32px;text-align:center;
}
.prod-stats > div{display:flex;flex-direction:column;gap:4px}
.prod-stats strong{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(1.6rem,2.6vw,2.2rem);
  color:var(--blue-deep);letter-spacing:-.02em;
}
.prod-stats span{font-size:.84rem;color:var(--blue-ink);letter-spacing:.03em}

/* ---- Why Neptunus cards ---- */
.prod-why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.why-card{padding:30px 26px;text-align:left}
.why-ic{font-size:2.2rem;margin-bottom:14px}
.why-card h3{font-size:1.1rem;margin-bottom:8px;color:var(--blue-ink)}
.why-card p{font-size:.9rem;color:var(--muted);line-height:1.6}

/* ---- FAQ ---- */
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:880px;margin:0 auto}
.faq-item{padding:0;overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 28px;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:1.02rem;
  color:var(--blue-ink);display:flex;align-items:center;justify-content:space-between;
  gap:18px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:1.6rem;font-weight:400;color:var(--blue);
  transition:.25s;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 28px 24px;color:var(--blue-ink);line-height:1.7;font-size:.95rem;margin:0}
.faq-item a{color:var(--blue-deep);font-weight:600}
.prod-body h3{font-size:1.2rem;margin-bottom:3px}
.prod-sci{font-size:.8rem;color:var(--blue);font-style:italic;margin-bottom:9px}
.prod-body p{font-size:.92rem;color:var(--muted)}
.prod-tag{
  display:inline-block;margin-top:13px;font-family:'Manrope',sans-serif;
  font-size:.74rem;font-weight:600;color:var(--blue-deep);
  background:var(--pastel);border-radius:999px;padding:.32rem .82rem;
}

/* ---- Feature / value tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{padding:32px;border-radius:var(--radius)}
.tile-ic{
  width:54px;height:54px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem;margin-bottom:16px;
  background:linear-gradient(135deg,#dcebfb,#bcd9f6);
  background:linear-gradient(135deg,#e3f0fc,#bcd9f6);
  border:1px solid rgba(255,255,255,.8);
}
.tile h3{font-size:1.12rem;margin-bottom:7px}
.tile p{font-size:.92rem;color:var(--muted)}

/* ---- Stats glass row ---- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:8px}
.statrow .s{text-align:center;padding:30px 14px;border-right:1px solid rgba(255,255,255,.6)}
.statrow .s:last-child{border-right:0}
.statrow .s strong{
  font-family:'Manrope',sans-serif;font-size:2.5rem;font-weight:800;
  background:linear-gradient(120deg,#6aa9de,#2f72b4);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:block;
}
.statrow .s span{font-size:.84rem;color:var(--muted)}

/* ---- Countries ---- */
.flags{display:flex;flex-wrap:wrap;gap:24px 34px;justify-content:center;align-items:flex-start;padding:42px 30px}
.flag-item{display:flex;flex-direction:column;align-items:center;gap:10px;width:94px}
.flag-item img{
  width:60px;height:40px;object-fit:cover;border-radius:8px;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 22px -10px rgba(43,106,171,.6);transition:.25s ease;
}
.flag-item:hover img{transform:translateY(-4px) scale(1.04)}
.flag-item span{font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:600;color:var(--blue-ink)}

/* ---- Quotes ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{padding:32px}
.quote .stars{color:var(--blue);font-size:1rem;letter-spacing:.15em;margin-bottom:14px}
.quote p{font-size:.97rem;margin-bottom:18px}
.quote cite{font-family:'Manrope',sans-serif;font-style:normal;font-weight:700;font-size:.9rem;color:var(--blue-ink)}
.quote cite span{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}

/* ---- Process ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{padding:16px;border-radius:var(--radius)}
.step img{border-radius:18px;aspect-ratio:16/10;object-fit:cover;width:100%}
.step-body{padding:20px 14px 10px}
.step-num{font-family:'Manrope',sans-serif;font-weight:700;font-size:.78rem;color:var(--blue);letter-spacing:.1em}
.step-body h3{font-size:1.15rem;margin:6px 0 7px}
.step-body p{font-size:.92rem;color:var(--muted)}

/* ---- Certifications ---- */
.certs{display:flex;flex-wrap:wrap;gap:30px 46px;justify-content:center;align-items:center;padding:40px 30px}
.certs img{height:72px;width:auto;object-fit:contain;opacity:.85;transition:.3s}
.certs img:hover{opacity:1;transform:scale(1.04)}

/* ---- CTA ---- */
.cta{
  position:relative;overflow:hidden;text-align:center;
  padding:72px 50px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(110,165,217,.92),rgba(47,114,180,.95));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.4);
}
.cta::before{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.18);filter:blur(40px);top:-100px;right:-60px;
}
.cta h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:14px;position:relative}
.cta p{color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 28px;position:relative}
.cta .btn{position:relative}

/* ---- Page hero ---- */
.page-hero{padding:54px 0 30px;text-align:center}
.page-hero .inner{
  max-width:820px;margin:0 auto;padding:64px 40px;border-radius:var(--radius-lg);
}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.7rem);margin:14px 0 12px}
.page-hero h1 .grad{
  background:linear-gradient(120deg,#6aa9de,#2f72b4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero p{color:var(--muted);max-width:540px;margin:0 auto;font-size:1.06rem}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.info-stack{display:grid;gap:16px}
.info-card{padding:24px 26px;display:flex;gap:16px;align-items:flex-start}
.info-card .tile-ic{margin-bottom:0;flex-shrink:0;width:48px;height:48px;font-size:1.25rem}
.info-card h3{font-size:1.02rem;margin-bottom:3px}
.info-card p,.info-card a{font-size:.92rem;color:var(--muted)}
.form{padding:38px}
.form h3{font-size:1.45rem;margin-bottom:6px}
.field{margin-top:16px}
.field label{font-family:'Manrope',sans-serif;font-size:.84rem;font-weight:600;display:block;margin-bottom:6px;color:var(--blue-ink)}
.field input,.field textarea{
  width:100%;border:1px solid rgba(255,255,255,.8);border-radius:14px;
  padding:.85rem 1rem;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);
  background:rgba(255,255,255,.7);transition:.2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.map{margin-top:24px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}
.map iframe{width:100%;height:300px;border:0;display:block}

/* ---- Footer ---- */
/* ===== Footer premium B2B integrado (fondo claro, dentro de la paleta) ===== */
.footer{
  position:relative;
  background:#ffffff;
  color:var(--blue-ink);
  padding:64px 0 28px;
  margin-top:0;
  border-top:1px solid rgba(47,114,180,.10);
}
.footer-inner{
  max-width:1280px;margin:0 auto;padding:0 38px;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:64px;margin-bottom:44px}
/* El archivo mide 420x96 y los atributos del <img> fijaban ese ancho
   mientras el CSS forzaba 42px de alto: salía aplastado (proporción 10
   en vez de 4.375). Se controla el ancho y el alto queda libre. */
.footer img.flogo{
  width:184px;height:auto;max-width:100%;
  object-fit:contain;margin-bottom:18px;display:block;
}
.footer p{font-size:.93rem;color:var(--muted);line-height:1.7;max-width:400px}
.footer h4{
  font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:700;
  margin-bottom:20px;color:var(--blue-deep);letter-spacing:.12em;text-transform:uppercase;
}
.footer ul{list-style:none}
.footer ul li{margin-bottom:11px}
.footer ul a,.footer ul li{font-size:.93rem;color:var(--muted);line-height:1.6;transition:.2s}
.footer ul a:hover{color:var(--blue-deep)}
.footer-bottom{
  border-top:1px solid rgba(47,114,180,.10);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.82rem;color:var(--muted);
}
/* Footer responsive */
@media (max-width:900px){
  .footer{padding:56px 0 24px}
  .footer-inner{padding:0 28px}
  .footer-grid{grid-template-columns:1fr;gap:34px;margin-bottom:32px}
  .footer p{max-width:none}
}
@media (max-width:600px){
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(28px);transition:.75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---- Responsive ---- */
@media(max-width:1149px){
  .nav-links{
    position:absolute;top:calc(100% + 3px);right:18px;left:auto;
    min-width:230px;flex-direction:column;gap:0;
    padding:6px;border-radius:24px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.95);
    opacity:0;pointer-events:none;
    transform:scale(.88) translateY(-8px);
    transform-origin:top right;
    transition:opacity .18s ease, transform .26s cubic-bezier(.18,1.25,.4,1);
    z-index:200;
  }
  .nav-links.open{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}
  .nav-links li{width:100%;list-style:none}
  .nav-links li + li{margin-top:2px}
  .nav-links a{
    display:flex;align-items:center;justify-content:flex-start;width:100%;
    padding:.75rem .9rem;border-radius:12px;
    font-family:'Manrope',sans-serif;font-size:.95rem;font-weight:500;
    color:var(--blue-ink);text-align:left;transition:.15s;
  }
  .nav-links a:hover{background:rgba(255,255,255,.75)}
  .nav-links a.active{
    background:linear-gradient(135deg,rgba(110,165,217,.22),rgba(47,114,180,.28));
    color:var(--blue-deep);font-weight:600;
  }
  .burger{display:flex}
  .nav-cta .btn{display:none}
  /* ===== Mobile: logo a la izquierda, lang+burger circulares liquid glass a la derecha ===== */
  .nav-inner{padding:0 14px;gap:10px}
  .nav-cta{gap:10px}
  /* Botón idiomas circular liquid glass */
  .lang-btn{
    width:44px;height:44px;
    padding:0;border-radius:50%;
    justify-content:center;
    gap:0;
    font-size:.74rem;font-weight:700;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:
      0 8px 18px -8px rgba(31,73,128,.28),
      0 2px 6px -2px rgba(31,73,128,.12),
      inset 0 1.5px 0 rgba(255,255,255,1),
      inset 0 -1px 2px rgba(31,73,128,.06);
  }
  .lang-btn .globe{display:none}
  .lang-btn .chev{display:none}
  .lang-btn .lang-cur{font-size:.78rem;letter-spacing:.02em}
  /* Burger circular liquid glass */
  .burger{
    width:44px;height:44px;
    border-radius:50%;
    align-items:center;justify-content:center;
    gap:4px;padding:0;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:
      0 8px 18px -8px rgba(31,73,128,.28),
      0 2px 6px -2px rgba(31,73,128,.12),
      inset 0 1.5px 0 rgba(255,255,255,1),
      inset 0 -1px 2px rgba(31,73,128,.06);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
  }
  .burger span{width:18px;height:2px}
}

@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:34px}
  .mission-hero{min-height:560px}
  .mission-hero .wrap{padding-top:50px;padding-bottom:50px}
  .mission-hero-text{max-width:100%}
  .prod-grid,.tiles,.quotes,.steps{grid-template-columns:1fr 1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .statrow .s:nth-child(2){border-right:0}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .prod-card-xl{grid-template-columns:1fr}
  .prod-card-xl .prod-thumb{aspect-ratio:16/10;min-height:auto;height:auto}
  .prod-card-xl .prod-body{padding:28px 28px 32px}
  .prod-why{grid-template-columns:repeat(2,minmax(0,1fr))}   /* two equal halves: 1fr alone widened to the longest word */
  .prod-stats{grid-template-columns:repeat(2,1fr)}
}
/* Por qué elegirnos, móvil estrecho: en FR/RU/ES hay palabras más anchas que
   media columna («conditionnements», «прослеживается»). Solo ellas se cortan
   con guion (las de 11 letras o más, nunca en EN, donde ya caben); break-word
   evita cualquier desborde si el navegador no tiene diccionario. */
@media(max-width:420px){
  .why-card h3,.why-card p{overflow-wrap:break-word}
  html:not(:lang(en)) .why-card h3,html:not(:lang(en)) .why-card p{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:11 4 4}
}
@media(max-width:600px){
  .section{padding:72px 0}
  .prod-grid,.tiles,.quotes,.steps,.footer-grid{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .hero-visual img{height:280px}
  .cta{padding:50px 26px}
  .page-hero .inner,.footer-inner{padding:44px 24px}
  .form{padding:26px}
  /* Home: solo mostrar la primera card (pota) en mobile. Desktop/iPad ven las 3 */
  .catalog-section .prod-grid .prod-card:nth-child(n+2){display:none}
}

/* ============== Safari / iOS rendering hints (sin cambios estéticos) ============== */
/* Hardware acceleration en elementos con backdrop-filter para que iOS Safari no recalcule cada frame */
.nav-inner,
.glass,
.lang-menu,
.footer-inner,
.info-card,
.mobile-nav-links{
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:backdrop-filter;
}
/* iOS Safari respeta esta prop para imágenes grandes */
img{
  content-visibility:auto;
}

/* ===== Badges inline (para cards de products.html) ===== */
.prod-badges-inline{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
.prod-card-xl .prod-format-title{
  font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:22px;margin-bottom:12px;
}
.prod-card-xl .btn-outline-blue{
  margin-top:26px;
}
.prod-card-xl .prod-sci em{font-style:italic}

/* ===== Cajones de catálogo Home — versión flagship con badges ===== */
.prod-card-v2{
  position:relative;
  background:#fff;
  border:1px solid rgba(47,114,180,.08);
  border-radius:26px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 12px 36px -16px rgba(31,73,128,.18), 0 2px 6px -2px rgba(31,73,128,.06);
  transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease;
}
.prod-card-v2:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px -18px rgba(31,73,128,.28), 0 4px 10px -2px rgba(31,73,128,.08);
}
.prod-card-v2 .prod-thumb{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  background:#f4f9ff;
}
.prod-card-v2 .prod-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.prod-badges{
  position:absolute;top:16px;left:16px;
  display:flex;flex-wrap:wrap;gap:6px;
  z-index:2;
}
.prod-badge{
  font-family:'Manrope',sans-serif;
  font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  line-height:1;
}
.prod-badge-primary{
  background:var(--blue-deep);color:#fff;
  box-shadow:0 4px 10px -3px rgba(13,35,66,.35);
}
.prod-badge-secondary{
  background:rgba(255,255,255,.95);
  color:var(--blue-deep);
  border:1px solid rgba(47,114,180,.18);
  box-shadow:0 4px 10px -4px rgba(31,73,128,.18);
}
.prod-card-v2 .prod-body{
  padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;
}
.prod-card-v2 .prod-body h3{
  font-family:'Manrope',sans-serif;
  font-size:1.42rem;font-weight:800;color:var(--blue-deep);
  margin:0 0 6px;letter-spacing:-.01em;
}
.prod-card-v2 .prod-sci{
  font-style:italic;color:var(--blue);font-size:.92rem;margin-bottom:16px;
  line-height:1.4;
}
.prod-card-v2 .prod-body p{
  color:var(--muted);font-size:.93rem;line-height:1.65;margin:0 0 24px;flex:1;
}
.btn-outline-blue{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.88rem;
  padding:.78rem 1.5rem;border-radius:999px;
  background:transparent;
  color:var(--blue-deep);
  border:1.5px solid rgba(47,114,180,.30);
  transition:.24s ease;
  text-decoration:none;
  width:fit-content;
  cursor:pointer;
}
.btn-outline-blue:hover{
  background:rgba(110,165,217,.10);
  border-color:var(--blue-deep);
  transform:translateY(-2px);
  box-shadow:0 8px 18px -10px rgba(43,106,171,.4);
}
@media (max-width:600px){
  .prod-card-v2 .prod-body{padding:22px 22px 24px}
  .prod-card-v2 .prod-body h3{font-size:1.25rem}
}

/* ===== Flags como píldoras individuales (Global reach) ===== */
.flags-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  max-width:1100px;margin:0 auto;
}
.flag-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;border-radius:999px;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.95rem;
  color:var(--blue-ink);
  transition:.22s ease;
}
.flag-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
.flag-pill img{width:24px;height:18px;object-fit:cover;border-radius:3px;display:block}


/* ===================================================================
   NEPTUNUS — variante "identidad original + vidrio plano"
   -------------------------------------------------------------------
   Combina dos fuentes de verdad:
     · neptunus.com.pe  -> identidad y geometría (paleta, tipografía,
       escala, alturas, espaciados, anchos, radios). Valores tomados de
       los estilos calculados de producción, no de memoria.
     · localhost:4321   -> comportamiento, accesibilidad y materialidad
       plana (vidrio ligero, sin relieve, cabecera progresiva por
       secciones, menú accesible, foco, AA, movimiento reducido).

   Cuando ambas chocan gana la materialidad plana: el original usa
   degradados, sombras y luces interiores en botones y vidrio; aquí se
   conserva su geometría y su color, pero planos.
   =================================================================== */

:root{
  /* ---- Paleta original (medida en producción) ---- */
  --o-bg:#F4F9FF;          /* fondo general */
  --o-text:#1D2A3A;        /* texto general */
  --o-head:#1B3A5B;        /* titulares */
  --o-muted:#5E7184;       /* texto secundario */
  --o-blue:#3E86C9;        /* azul principal */
  /* Azul de acción: el principal (#3E86C9) da 3.85:1 con texto blanco,
     por debajo de AA. Este llega a 4.69:1 y es el que se usa en toda
     superficie azul con texto blanco encima. */
  --o-blue-cta:#3178B4;
  --o-blue-deep:#2F72B4;   /* azul profundo */
  --o-blue-light:#5AA0DB;  /* azul claro */
  --o-blue-mid:#2A6AAB;    /* azul de titulares de ficha */
  /* El azul principal original (#3E86C9) da 3.6-3.9:1 como TEXTO
     pequeño: el propio sitio original no cumple AA ahí. Para esos usos
     se emplea el azul profundo, que también es de la paleta original y
     alcanza 5.0:1 sobre blanco. El #3E86C9 se conserva íntegro en
     rellenos, botones y elementos no textuales. */
  --o-blue-text:#2F72B4;
  --o-white:#fff;

  /* ---- Vidrio plano (heredado de 4321) ---- */
  --glass-light:rgba(255,255,255,.54);
  --glass-light-sm:rgba(255,255,255,.50);
  --glass-navy:rgba(27,58,91,.52);      /* solo si hay sección oscura */
  --glass-navy-sm:rgba(27,58,91,.44);
  --hairline-light:rgba(255,255,255,.10);
  --hairline-dark:rgba(27,58,91,.10);

  --blur-lg:16px;
  --blur-sm:12px;
  --sat:115%;

  --shadow-soft:0 6px 18px -12px rgba(31,73,128,.26);
  --shadow-card:0 4px 14px -10px rgba(31,73,128,.20);

  /* ---- Geometría original ---- */
  --o-maxw:1180px;         /* contenedor general */
  --o-maxw-header:1280px;  /* contenido del header */
  --o-pad-x:26px;
  --o-pad-header:38px;
  --o-header-h:75px;
  --o-radius-card:26px;    /* radio original de las fichas */
  --radius-v3:16px;        /* paneles de vidrio nuevos */
  --radius-pill:999px;     /* botones y controles */
  --radius-control:8px;
  --ease-v3:cubic-bezier(.2,.7,.2,1);
}

/* ===== Accesibilidad global ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--o-blue-deep);
  outline-offset:3px;
}
.field input:focus-visible,
.field textarea:focus-visible{
  outline:3px solid var(--o-blue-deep);
  outline-offset:2px;
  border-color:var(--o-blue-deep);
}
.v3 .nav.nav-on-dark :focus-visible{outline-color:#8FD0F0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .bg-orbs{display:none}
}

.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;
}

/* ===================================================================
   Base — identidad original
   =================================================================== */
body.v3{background:var(--o-bg);color:var(--o-text)}
.v3 h1,.v3 h2,.v3 h3,.v3 h4{color:var(--o-head)}
.v3 .lead{font-size:17.12px;line-height:28.25px;color:var(--o-muted)}
.v3 .eyebrow{font-size:12.16px;letter-spacing:2.432px;color:var(--o-blue-text)}
.v3 .wrap{max-width:var(--o-maxw);padding:0 var(--o-pad-x)}

/* Manchas de fondo quietas y muy tenues. */
/* Sin filter: un blur(120px) sobre una capa fija a pantalla completa se
   repinta con el scroll. Los degradados radiales ya son suaves por sí
   mismos, así que el aspecto no cambia y el coste desaparece. */
.v3 .bg-orbs::before,
.v3 .bg-orbs::after,
.v3 .bg-orbs i{opacity:.16;filter:none;animation:none}
.v3 .bg-orbs::before{background:radial-gradient(circle,#cfe3f7,transparent 70%)}
.v3 .bg-orbs::after{background:radial-gradient(circle,#dceafa,transparent 70%)}
.v3 .bg-orbs i{background:radial-gradient(circle,#e8f1fd,transparent 70%)}

/* ---- Primitiva de vidrio plano ---- */
.v3 .glass,
.v3 .glass-panel{
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-lg)) saturate(var(--sat));
  border:0;
  border-radius:var(--radius-v3);
  box-shadow:inset 0 0 0 1px var(--hairline-light);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .v3 .glass,.v3 .glass-panel,.v3 .trust-panel{background:rgba(255,255,255,.94)}
  .v3 .nav::before{background:rgba(255,255,255,.95)}
  .v3 .nav-links{background:rgba(255,255,255,.96)}
}

/* ===================================================================
   Cabecera — geometría original, materialidad plana, comportamiento 4321
   -------------------------------------------------------------------
   Altura 75px y padding horizontal de 38px como en producción; fondo a
   sangre sin cápsula ni radio; contenido centrado a 1280px.
   =================================================================== */
.v3 .nav{
  --nav-p:0;
  --nav-light:1;   /* el hero de esta variante es CLARO */
  --nav-tint:1;
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0;
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* Relleno LISO (mismo color arriba y abajo: sin degradado de fondo).
   El color va en la misma capa que el desenfoque y nunca se usa
   `opacity` aquí: ambas cosas anulan el backdrop-filter en Chromium. */
.v3 .nav::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* Tinte .58 (antes .50): ocho puntos mas de blanco para que el texto
       del navbar alcance AA sobre el hero oscuro (4,16 -> 4,91). El
       desenfoque (16px) y la saturacion (115%) NO cambian. */
    linear-gradient(rgba(255,255,255, calc(.58 * var(--nav-p) * var(--nav-tint))),
                    rgba(255,255,255, calc(.58 * var(--nav-p) * var(--nav-tint)))),
    linear-gradient(rgba(27,58,91, calc(.46 * var(--nav-p) * (1 - var(--nav-tint)))),
                    rgba(27,58,91, calc(.46 * var(--nav-p) * (1 - var(--nav-tint)))));
  /* 16px es el tope del rango acordado: cuanto más desenfoque, más se
     promedian las fotos de producto que cruzan por debajo y menos
     extremos de luminancia llegan al texto. */
  -webkit-backdrop-filter:blur(calc(16px * var(--nav-q, 0))) saturate(calc(100% + 15% * var(--nav-q, 0)));
          backdrop-filter:blur(calc(16px * var(--nav-q, 0))) saturate(calc(100% + 15% * var(--nav-q, 0)));
  will-change:backdrop-filter;
}
/* Separación inferior mínima: un filete de 1px y una sombra muy suave.
   Sin borde completo, sin reflejo superior, sin sombras apiladas. */
.v3 .nav::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:var(--nav-p);
  box-shadow:
    inset 0 -1px 0 rgba(27,58,91, calc(.10 + .06 * (1 - var(--nav-light)))),
    0 6px 16px -14px rgba(31,73,128,.26);
}
.v3 .nav-inner{
  position:relative;z-index:1;
  max-width:var(--o-maxw-header);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;
  /* En pasos: animar la altura con el progreso continuo rehacía el
     layout del header en cada fotograma del scroll. */
  height:calc(var(--o-header-h) - 9px * var(--nav-q, 0));
  padding:0 var(--o-pad-header);
  background:transparent;border:0;box-shadow:none;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  will-change:auto;transform:none;-webkit-transform:none;
}
.v3 .nav-inner::before,.v3 .nav-inner::after{content:none}
.v3 .nav-inner > :not(.nav-links){position:relative;z-index:1}
.v3 .nav-links{z-index:1}

/* ---- Logotipo: 201x46 como en el original ----
   Relevo sin solapamiento: se desvanece, se cambia el recurso a
   opacidad cero y reaparece. En esta variante el hero es claro, así
   que arriba se muestra SIEMPRE el logo original a color. */
.v3 .nav-logo{
  position:relative;display:block;flex:0 0 auto;
  width:201px;height:calc(46px - 5px * var(--nav-p));
}
.v3 .nav-logo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:left center;
  transition:opacity 110ms linear;
}
.v3 .nav-logo img.is-swapping{opacity:0}

/* ---- Enlaces: Manrope 14.72px, pastilla plana de 36px ---- */
.v3 .nav-links{display:flex;align-items:center;gap:8px;list-style:none}
.v3 .nav-links a{
  font-family:'Manrope',sans-serif;font-weight:500;font-size:14.72px;
  display:inline-flex;align-items:center;
  height:36px;padding:0 .95rem;border-radius:var(--radius-pill);
  transition:background-color .2s ease,color .2s ease,text-shadow .2s ease;
}
/* Los enlaces usan el texto general del original (#1D2A3A) en vez del
   azul de titulares (#1B3A5B): cuando la cabecera cruza sobre las fotos
   de producto, el vidrio claro deja pasar tonos medios y el azul de
   titulares se quedaba en 4.0:1. Ambos son colores de la paleta
   original; este es el que sostiene AA en todo el recorrido. */
/* Azul marino de la navegación en estado claro, común a las cinco
   páginas. Antes usaba el gris de texto general (#1D2A3A). */
.v3{--o-nav-link:#004373}
.v3 .nav.nav-on-light .nav-links a{color:var(--o-nav-link)}
.v3 .nav.nav-on-light .lang-btn,
.v3 .nav.nav-on-light .lang-cur{color:var(--o-nav-link)}
/* Sobre el vídeo, el blanco necesita un apoyo: sombra mínima que solo
   existe en nav-on-dark. Al entrar el vidrio la clase cambia a
   nav-on-light y la sombra desaparece con la misma transición. */
.v3 .nav.nav-on-dark .nav-links a{color:#fff;text-shadow:0 1px 2px rgba(5,14,24,.55)}
.v3 .nav.nav-on-dark .lang-btn,
.v3 .nav.nav-on-dark .lang-cur{text-shadow:0 1px 2px rgba(5,14,24,.55)}
.v3 .nav.nav-on-light .nav-links a:hover{background:rgba(62,134,201,.12)}
.v3 .nav.nav-on-dark .nav-links a:hover{background:rgba(255,255,255,.14)}
/* Activo: azul original SÓLIDO, sin degradado ni sombra. */
.v3 .nav-links a.active,
.v3 .nav.nav-on-light .nav-links a.active,
.v3 .nav.nav-on-dark .nav-links a.active{
  background:var(--o-blue-cta);color:#fff;box-shadow:none;
}
.v3 .nav-links a.active:hover{background:var(--o-blue-deep);color:#fff}
.v3 .nav-cta{display:flex;align-items:center;gap:10px}
.v3 .nav-links .nav-mobile-cta{display:none}

/* ---- Selector de idioma: superficie localizada y plana ---- */
.v3 .lang-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:13.76px;
  height:38px;padding:0 .8rem;border-radius:var(--radius-pill);cursor:pointer;
  border:0;
  transition:background-color .2s ease;
}
.v3 .nav.nav-on-light .lang-btn{
  color:var(--o-text);
  background:var(--glass-light-sm);
  box-shadow:inset 0 0 0 1px var(--hairline-dark);
}
.v3 .nav.nav-on-light .lang-btn:hover{background:rgba(255,255,255,.78)}
.v3 .nav.nav-on-dark .lang-btn{
  color:#fff;
  background:var(--glass-navy-sm);
  box-shadow:inset 0 0 0 1px var(--hairline-light);
}
.v3 .nav.nav-on-dark .lang-btn:hover{background:rgba(27,58,91,.62)}
.v3 .lang-btn:hover{transform:none}

.v3 .lang-menu{
  background:rgba(255,255,255,.84);   /* seis puntos menos de tinte */
  border:0;border-radius:var(--radius-v3);
  box-shadow:inset 0 0 0 1px var(--hairline-dark), var(--shadow-soft);
}
/* Vidrio real solo mientras el menú está abierto; cerrado no cuesta nada. */
.v3 .lang-menu.open{
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(var(--sat));
          backdrop-filter:blur(var(--blur-lg)) saturate(var(--sat));
}
.v3 .lang-option{color:var(--o-head);border-radius:var(--radius-control)}
.v3 .lang-option:hover{background:rgba(62,134,201,.12)}
.v3 .lang-option.active{background:var(--o-blue-cta);color:#fff}
.v3 .lang-option .check{color:#fff}

/* ---- Botones: geometría original, materia plana ---- */
.v3 .btn{
  border-radius:var(--radius-pill);
  font-family:'Manrope',sans-serif;font-weight:600;
}
.v3 .btn-primary{
  background:var(--o-blue-cta);      /* azul de acción: AA con texto blanco */
  color:#fff;border:0;box-shadow:none;
  transition:background-color .2s ease;
}
.v3 .btn-primary:hover{background:var(--o-blue-deep);transform:none;box-shadow:none}
.v3 .nav-cta .btn-primary{height:45px;padding:0 20px;font-size:13.76px;display:inline-flex;align-items:center}

/* Secundario: vidrio claro plano con filete discreto. */
.v3 .btn-glass,
.v3 .hero-actions .btn-glass{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(62,134,201,.28);
  color:var(--o-head);
  box-shadow:none;
  transition:background-color .2s ease;
}
.v3 .btn-glass:hover,
.v3 .hero-actions .btn-glass:hover{background:rgba(255,255,255,.78);transform:none}

/* ===================================================================
   Hero — composición original: fotografía muy clara con velo blanco
   azulado, titular azul oscuro y texto gris azulado.
   =================================================================== */
.v3 .hero{
  margin-top:0;
  /* El total de padding se mantiene constante (366px), así que la
     altura del hero no cambia: solo se desplaza su centro hacia arriba
     --hero-subida, que calcula main.js para que el grupo quede centrado
     entre el borde inferior del header y el borde superior del panel. */
  --hero-subida:0px;
  padding:calc(202px - var(--hero-subida)) 0 calc(164px + var(--hero-subida));
  min-height:846px;
  display:flex;align-items:center;
  position:relative;overflow:clip;isolation:isolate;
}
.v3 .hero::before{
  background:url('../img/hero-home-desktop-v2.jpg') center 35%/cover no-repeat,
             linear-gradient(160deg,#cfe3f7,#eaf3fd);
  filter:saturate(1.08);
}
/* El hero de Products tiene su propio fotograma de reserva: es el mismo
   que ve quien navega con movimiento reducido, así que debe coincidir
   con el primer fotograma de su vídeo, no con el del Home. */
.v3 .hero-products::before{
  background:url('../img/hero-products-v1.jpg') center 45%/cover no-repeat,
             linear-gradient(160deg,#dbe7f2,#f0f5fa);
}
/* Velo blanco azulado del original. */
/* Gafas de sol, no pintura: el vídeo se ve, solo baja de luminancia lo
   justo para que el texto blanco tenga contraste. Arriba algo más denso
   por la cabecera, el centro es el tramo más transparente. */
/* ===================================================================
   Hero — vidrio esmerilado oscuro
   -------------------------------------------------------------------
   La capa lechosa de la primera versión funcionaba porque el fondo
   quedaba deliberadamente suavizado y el primer plano perfectamente
   nítido. Aquí está la misma óptica invertida: en vez de leche, noche.

   Y sin desenfocar nada. Un intento anterior difuminaba el vídeo 1,8px
   para tapar sus carencias, y el resultado era justo el contrario del
   que se busca: no parecía un cristal delante, parecía un vídeo malo.
   El cristal lo hace la CAPA, no el fondo. Tres piezas, todas estáticas
   —no cuestan un repintado por fotograma— y ninguna toca al primer
   plano:
   · un reflejo diagonal larguísimo y casi invisible, que es lo que
     delata la presencia del cristal;
   · una viñeta radial, que aporta la profundidad;
   · el tinte ahumado en azul de noche.
   Sobre el vídeo solo queda `saturate`/`brightness`: cambian cómo se
   percibe el color, que es lo que hace un cristal tintado, sin tocar un
   solo píxel de detalle. Titular, párrafo, cabecera, logotipo, botón de
   sonido y panel de confianza quedan intactos por construcción.
   =================================================================== */
.v3 .hero-video,
.v3 .hero::before{
  /* Sin desenfoque. El vídeo conserva su detalle real; lo único que se
     toca es la percepción del color, que es lo que hace un cristal
     tintado: baja un punto la saturación y otro la luminosidad. */
  filter:saturate(.96) brightness(.97);
}
.v3 .hero::after{
  background:
    /* 1. El reflejo. Una banda de luz larguísima y muy tenue cruzando en
       diagonal: es lo que delata que hay un cristal delante y no
       simplemente una imagen oscura. Sin esto el conjunto se lee como
       "vídeo apagado"; con esto, como "vídeo visto a través de algo". */
    linear-gradient(104deg,
      rgba(206,228,250,.075)   0%,
      rgba(206,228,250,.030)  27%,
      rgba(206,228,250,0)     47%,
      rgba(206,228,250,0)     71%,
      rgba(206,228,250,.048) 100%),
    /* 2. La viñeta: profundidad y foco hacia el centro. */
    radial-gradient(125% 88% at 50% 38%,
      rgba(4,12,22,0)    0%,
      rgba(4,12,22,.12) 52%,
      rgba(4,12,22,.30) 82%,
      rgba(4,12,22,.44) 100%),
    /* 3. El tinte ahumado, en azul de noche y no en gris. */
    linear-gradient(180deg,
      rgba(6,17,30,.50)   0%,
      rgba(6,17,30,.40)  12%,
      rgba(6,17,30,.36)  34%,
      rgba(6,17,30,.35)  58%,
      rgba(6,17,30,.43) 100%);
}
.v3 .hero-inner{max-width:860px;margin:0 auto;text-align:center}
.v3 .hero h1{
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-size:75.2px;font-weight:800;line-height:78.21px;
  letter-spacing:-.03em;
  text-shadow:none;
  margin-bottom:0;
}
/* "from Peru": mismo degradado a 120deg y misma familia de azules,
   remapeados a la mitad clara para que lean sobre el vídeo oscuro. */
.v3 .hero h1 .grad{
  background:linear-gradient(120deg,#8FC7EE,#C4E1F7 60%,#FFFFFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
}
.v3 .hero p{
  color:rgba(255,255,255,.90);
  font-family:'Inter',system-ui,sans-serif;
  font-size:18.88px;font-weight:500;line-height:31.15px;
  max-width:560px;margin:18px auto 32px;
  text-shadow:none;
}
.v3 .hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.v3 .hero-actions .btn{
  height:57px;padding:0 28px;font-size:15.2px;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ===================================================================
   Panel de confianza — no existe en el original.
   Se conserva contenido y estructura, con los colores originales, la
   materialidad plana y una escala que armoniza con los espaciados
   originales. Nada de medidas "originales" inventadas.
   =================================================================== */
/* El panel debe quedar centrado sobre la unión hero/catálogo:
   subiéndolo la mitad de su propia altura, su centro cae exactamente
   en hero.bottom. --alto-panel lo mide main.js y lo actualiza al
   redimensionar, así que la relación se mantiene en cualquier ventana. */
.v3 .trust-strip{
  position:relative;z-index:2;
  --alto-panel:219px;
  --subida-panel:109.5px;
  margin-top:calc(-1 * var(--subida-panel));
  padding:0 0 8px;
}
.v3 .trust-panel{
  position:relative;
  padding:54px 30px 34px;
}

/* ===================================================================
   Vidrio original — componente único
   -------------------------------------------------------------------
   Las mismas declaraciones para todas las superficies de vidrio: el
   panel del Home, el panel de estadísticas de Products y el cuerpo de
   las tres fichas del catálogo. No son copias parecidas: comparten
   literalmente la regla, así que tinte, transparencia, desenfoque,
   saturación, borde, radio y sombra plana son idénticos.
   =================================================================== */
.v3 .trust-panel,
.v3 .glass,
.v3 .glass-panel,
.v3 .prod-stats,
.v3 .prod-card-v2 .prod-body{
  background:rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(var(--sat));
          backdrop-filter:blur(var(--blur-lg)) saturate(var(--sat));
  border:0;
  border-radius:var(--radius-v3);
  box-shadow:inset 0 0 0 1px var(--hairline-light), var(--shadow-soft);
}
.v3 .trust-grid{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
.v3 .trust-item{
  display:flex;flex-direction:column;gap:6px;
  padding-left:18px;
  /* Solo los tres divisores internos: el borde de la primera columna
     dibujaba una raya suelta por fuera del panel. */
  border-left:1px solid rgba(62,134,201,.24);
  min-width:0;
}
.v3 .trust-item:first-child{border-left:0;padding-left:0}
.v3 .trust-item:last-child{border-right:0}
.v3 .trust-figure{
  font-family:'Manrope',sans-serif;font-weight:800;
  /* Las cuatro columnas comparten tamaño, peso, altura de línea y alto
     reservado. "9+" deja de tratarse como cifra grande de contador. */
  font-size:20px;line-height:1.05;letter-spacing:-.01em;
  color:var(--o-blue-mid);
  min-height:21px;
}
/* Sin excepciones para .is-text: ya no hay diferencia de tamaño que
   compensar. */
.v3 .trust-label{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;color:var(--o-head)}
.v3 .trust-desc{font-size:14px;line-height:1.55;color:var(--o-muted);overflow-wrap:anywhere}

/* ===================================================================
   Catálogo — padding y escala originales, fichas planas de radio 26px
   =================================================================== */
/* `overflow:clip` y no `hidden`: hidden convierte la sección en
   contenedor de scroll y entonces `animation-timeline:view()` deja de
   medirse contra el documento (las fichas nacían ya terminadas).
   clip recorta igual pero no crea contenedor. */
.v3 .catalog-section{
  padding:80px 0;
  position:relative;overflow:clip;
  /* isolation:auto, no basta con omitirla: la capa v2 la declara y ganaba.
     Aislar aquí creaba una raíz de backdrop que NO contiene la fotografía
     (vive en .zona-catalogo::before), y el vidrio de las fichas se quedaba
     sin nada que muestrear, leyéndose como blanco plano. */
  isolation:auto;
}
/* El fondo del catálogo ya no vive aquí: lo lleva .zona-catalogo, que
   abarca también el panel de confianza para que la fotografía empiece
   exactamente donde acaba el hero, sin franja intermedia. */
.v3 .catalog-section::before,
.v3 .catalog-section::after{content:none}

/* ---- Capa de cielo ----
   Solo se mueve el cielo. La máscara deja pasar únicamente la franja
   superior (0-12% opaca, difuminada hasta 20%), que en esta fotografía
   queda POR ENCIMA de las grúas más altas, así que puerto, contenedores
   y barcos no se desplazan ni un píxel.

   La máscara vive en el contenedor y la deriva en el hijo: si moviera
   el elemento enmascarado, la propia franja viajaría y asomaría la base.
   Copia exacta del encuadre del fondo (mismo box, mismo cover), así que
   ambas capas quedan alineadas. */
.v3 .zona-catalogo .cielo{
  /* Igual que el mar: el desvanecido inferior va en el alfa del PNG, no en
     una mask-image que habría que reaplicar en cada fotograma. */
  position:absolute;
  top:var(--desfase-fondo, 0px);
  left:0;right:0;bottom:auto;
  height:calc((100% - var(--desfase-fondo, 0px)) * .2);
  z-index:0;pointer-events:none;overflow:clip;
  opacity:0;transition:opacity .8s ease;
}
.v3 .zona-catalogo .cielo.activa{opacity:1}
.v3 .zona-catalogo .cielo i{
  position:absolute;top:0;bottom:0;left:-25%;width:150%;display:block;
  /* Una sola capa de nubes ya rasterizada: difuminado y desvanecido
     horneados en el alfa. Ni partículas, ni filtros, ni máscara CSS. */
  background:url('../img/cielo-nubes.png') center center/100% 100% no-repeat;
  animation:np-cielo 23s ease-in-out infinite alternate;
  animation-play-state:paused;     /* solo corre con la sección a la vista */
  will-change:auto;
}
.v3 .zona-catalogo .cielo.activa i{animation-play-state:running;will-change:transform}
/* Recorrido corto (1.4%) y escala mínima: deriva de bruma, no un
   desplazamiento perceptible. `alternate` evita el salto al reiniciar. */
/* La capa mide el 150% de la sección, así que un 1% de su ancho equivale
   a un 1.5% del ancho de la sección: dentro del margen pedido.
   `alternate` evita cualquier salto al reiniciar el bucle. */
@keyframes np-cielo{
  /* La capa mide el 150% de la sección: un 1.7% suyo son unos 37px,
     alrededor del 2.6% del ancho de la sección. */
  from{transform:translate3d(-1.7%,0,0);opacity:.82}
  to  {transform:translate3d( 1.7%,0,0);opacity:1}
}

/* ---- Zona compartida: panel de confianza + catálogo ----
   .trust-strip arranca 48px ANTES de que termine el hero (margin-top
   negativo), así que el fondo se desplaza esos mismos 48px hacia abajo
   para que su borde superior coincida con hero.bottom. Una sola
   instancia de la imagen, un solo encuadre. */
.v3 .zona-catalogo{
  position:relative;
  isolation:isolate;
  /* Igual al margen negativo del panel: así la fotografía arranca
     exactamente en hero.bottom y no aparece franja. */
  --alto-panel:219px;
  --subida-panel:109.5px;
  --desfase-fondo:var(--subida-panel);
}
.v3 .zona-catalogo::before{
  content:"";position:absolute;
  top:var(--desfase-fondo);right:0;bottom:0;left:0;
  z-index:-2;
  background:url('../img/catalogo-fondo.jpg') center center/cover no-repeat;
}
.v3 .zona-catalogo::after{
  content:"";position:absolute;
  top:var(--desfase-fondo);right:0;bottom:0;left:0;
  z-index:-1;
  /* El último tramo sube hasta opacidad total: así el pie de esta
     fotografía llega al mismo tono que la cabecera del mapa y el paso
     de una imagen a otra deja de leerse como un escalón. */
  /* El tramo central se aligera: es la franja donde se apoyan las tres
     fichas y, con el velo anterior, el vidrio de su cuerpo captaba un
     gris plano en vez del mar. El arranque y el remate no cambian, para
     no tocar la costura con el hero ni con el mapa. */
  background:linear-gradient(180deg,
    rgba(244,249,255,.86) 0%,
    rgba(244,249,255,.82) 22%,
    rgba(244,249,255,.70) 55%,
    rgba(244,249,255,.72) 86%,
    rgba(244,249,255,1) 100%);
}
.v3 .sec-head h2{
  font-family:'Manrope',sans-serif;
  font-size:46.4px;font-weight:700;color:var(--o-head);
  text-shadow:none;
}
.v3 .catalog-section .sec-head .lead{text-shadow:none}

.v3 .prod-card-v2{
  /* Transparente: si la carcasa fuera blanca opaca, el vidrio del
     cuerpo desenfocaría ese blanco y volvería a leerse como una caja
     sólida. La fotografía sigue siendo opaca y nítida: va por encima. */
  background:transparent;
  border:0;
  border-radius:var(--o-radius-card);      /* radio original */
  overflow:hidden;
  display:flex;flex-direction:column;
  /* Mismo filete y misma sombra plana que el vidrio original. */
  box-shadow:inset 0 0 0 1px var(--hairline-light), var(--shadow-soft);
  transition:box-shadow .2s ease;
}
.v3 .prod-card-v2:hover{border-color:rgba(62,134,201,.38);transform:none;box-shadow:var(--shadow-card)}
.v3 .prod-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e8f1fd}
.v3 .prod-thumb img{width:100%;height:100%;object-fit:cover}
.v3 .prod-card-v2:hover .prod-thumb img{transform:none}
.v3 .prod-badges{position:absolute;top:14px;left:14px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
.v3 .prod-badge{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  padding:.34rem .6rem;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.90);border:0;box-shadow:none;
  color:var(--o-head);
}
.v3 .prod-badge-primary{background:var(--o-blue-cta);color:#fff}
.v3 .prod-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
/* El radio y el filete los pone la carcasa; el cuerpo solo aporta el vidrio. */
.v3 .prod-card-v2 .prod-body{border-radius:0;box-shadow:none}

/* ===================================================================
   Fila de catálogo interactiva
   -------------------------------------------------------------------
   Principio de interacción propio: la ficha activa se ensancha y las
   otras dos ceden espacio. Solo se anima grid-template-columns, que el
   motor compone sin repintar contenido; ni transform, ni filtros, ni
   sombras, ni cambios de altura.
   =================================================================== */
.v3 .prod-video{
  display:block;width:100%;height:100%;
  object-fit:cover;
  /* Doble red bajo el vídeo. Arriba, el atributo poster con el primer
     fotograma real. Debajo, ese mismo fotograma como fondo del elemento:
     si la red falla, el vídeo se aborta o Safari rechaza play(), lo que se
     ve sigue siendo la imagen y nunca el color desnudo. El gris queda como
     último recurso, solo si tampoco cargara la imagen. */
  background-color:#dfe7f0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.v3 .prod-video[poster$="frame-giant-squid.jpg"]{background-image:url('../img/frame-giant-squid.jpg')}
.v3 .prod-video[poster$="frame-scallops.jpg"]{background-image:url('../img/frame-scallops.jpg')}
.v3 .prod-video[poster$="frame-hake.jpg"]{background-image:url('../img/frame-hake.jpg')}

/* Panel de diagnóstico. Solo se inserta con ?videoDebug=1, así que un
   visitante normal nunca lo ve: no hay regla que lo oculte porque el
   elemento sencillamente no existe. */
.v3 .prod-thumb .video-debug{
  position:absolute;left:8px;top:8px;right:8px;
  z-index:6;
  padding:8px 10px;
  font:500 11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;
  word-break:break-word;
  color:#eaf3ff;
  background:rgba(6,20,34,.86);
  border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events:none;
  overflow:hidden;
}

/* Respaldo cuando Safari rechaza la reproducción automática: modo de bajo
   consumo, ahorro de datos o la política de autoplay. En vez de dejar un
   hueco muerto sobre el poster, aparece un botón discreto que invita a
   tocar; el toque sí lleva gesto del usuario y arranca el vídeo. */
.v3 .prod-thumb.sin-autoplay::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:56px;height:56px;
  margin:-28px 0 0 -28px;
  border-radius:50%;
  background:rgba(12,32,52,.52);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  pointer-events:none;
  z-index:3;
}
.v3 .prod-thumb.sin-autoplay::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  margin:-9px 0 0 -4px;
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
  pointer-events:none;
  z-index:4;
}
@media (prefers-reduced-motion:reduce){
  .v3 .prod-thumb.sin-autoplay::after,
  .v3 .prod-thumb.sin-autoplay::before{transition:none;animation:none}
}
/* Por debajo de 1328px la fila deja de medir 1280 y, al estrechar una
   ficha, la descripción gana una línea: la fila daría un salto de alto.
   Se reserva esa línea, de modo que el alto no cambia en ningún estado.
   Por encima de ese ancho no hace falta: el párrafo mide siempre igual. */
@media (min-width:1025px) and (max-width:1327px){
  .v3 .prod-card-v2 .prod-body p{min-height:124px}
}
/* Entre 901 y 1024px la fila ya es horizontal pero cada ficha mide poco
   más de 300px, así que el 1.35 de escritorio estrecharía demasiado a las
   otras dos. Aquí la expansión es moderada. El texto lleva altura
   reservada para que al ceder ancho gane líneas sin mover la fila. */
@media (min-width:901px) and (max-width:1024px) and (hover:hover) and (pointer:fine){
  .v3 .prod-grid[data-anim="fila"]{grid-template-columns:var(--c1,1fr) var(--c2,1fr) var(--c3,1fr)}
  .js-anim .v3 .prod-grid[data-anim="fila"]{
    transition:opacity .95s var(--cine-fila),
               transform 1.02s var(--cine-fila),
               grid-template-columns 650ms cubic-bezier(.16,1,.3,1);
  }
  .v3 .prod-grid[data-anim="fila"].activa-1{--c1:1.18fr;--c2:.91fr;--c3:.91fr}
  .v3 .prod-grid[data-anim="fila"].activa-2{--c1:.91fr;--c2:1.18fr;--c3:.91fr}
  .v3 .prod-grid[data-anim="fila"].activa-3{--c1:.91fr;--c2:.91fr;--c3:1.18fr}
  /* La miniatura conserva la altura de reposo: sin esto, al ensanchar
     una columna crecería también de alto y la fila daría un salto. Es la
     misma fórmula que usa escritorio. */
  .v3 .prod-grid[data-anim="fila"] .prod-thumb{
    aspect-ratio:auto;
    height:calc((var(--fila-ancho) - 44px) / 3 * .75);
  }
  .v3 .prod-card-v2 .prod-body p{min-height:159px}
}
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  /* Alto fijo de la fotografía: con aspect-ratio, al ensanchar una
     columna crecería también su altura y la fila daría un salto. Este
     valor es exactamente el que tiene en reposo. */
  .v3 .prod-grid .prod-thumb{
    aspect-ratio:auto;
    height:calc((var(--fila-ancho) - 44px) / 3 * .75);
  }
  /* Especificidad por encima de la regla base de .prod-grid y de la
     transición de entrada, que vive en el mismo elemento: si no, la
     entrada sustituye a esta transición y las columnas no se mueven. */
  .v3 .prod-grid[data-anim="fila"]{
    grid-template-columns:var(--c1, 1fr) var(--c2, 1fr) var(--c3, 1fr);
  }
  .js-anim .v3 .prod-grid[data-anim="fila"]{
    transition:opacity .95s var(--cine-fila),
               transform 1.02s var(--cine-fila),
               grid-template-columns 650ms cubic-bezier(.16,1,.3,1);
  }
  /* La expansión no altera el ancho total de la fila: el borde izquierdo
     de la primera y el derecho de la tercera quedan donde están. */
  .v3 .prod-grid[data-anim="fila"].activa-1{--c1:1.35fr;--c2:.825fr;--c3:.825fr}
  .v3 .prod-grid[data-anim="fila"].activa-2{--c1:.825fr;--c2:1.35fr;--c3:.825fr}
  .v3 .prod-grid[data-anim="fila"].activa-3{--c1:.825fr;--c2:.825fr;--c3:1.35fr}
}
@media (prefers-reduced-motion:reduce){
  .v3 .prod-grid{transition:none}
  .v3 .prod-grid[data-anim="fila"].activa-1,
  .v3 .prod-grid[data-anim="fila"].activa-2,
  .v3 .prod-grid[data-anim="fila"].activa-3{--c1:1fr;--c2:1fr;--c3:1fr}
}
@media (hover:none),(pointer:coarse){
  /* Sin hover no hay expansión: la disposición se queda como está. */
  .v3 .prod-grid[data-anim="fila"].activa-1,
  .v3 .prod-grid[data-anim="fila"].activa-2,
  .v3 .prod-grid[data-anim="fila"].activa-3{--c1:1fr;--c2:1fr;--c3:1fr}
}
/* El vidrio compone sobre la fotografía en torno a rgb(195,200,206), y
   ahí el gris secundario (#5E7184) caía a 2.99:1 y el azul del nombre
   científico a 2.98:1. Estos tonos dejan margen incluso cuando el fondo
   se oscurece al desplazarse. */
.v3 .prod-card-v2 .prod-body p{color:#334454}
.v3 .prod-card-v2 .prod-sci{color:#17405F}
.v3 .prod-body h3{
  font-family:'Manrope',sans-serif;
  font-size:22.72px;font-weight:800;color:var(--o-blue-mid);margin-bottom:2px;
}
.v3 .prod-sci{font-size:14.72px;color:var(--o-blue-text);margin-bottom:12px;font-weight:500}
.v3 .prod-body p{font-size:15px;line-height:1.65;color:var(--o-muted);margin-bottom:20px}
.v3 .btn-outline-blue{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;
  color:var(--o-blue-deep);
  height:44px;padding:0 1.15rem;border-radius:var(--radius-pill);
  border:1px solid rgba(62,134,201,.35);
  background:var(--o-white);box-shadow:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.v3 .btn-outline-blue:hover{background:rgba(62,134,201,.08);border-color:var(--o-blue);color:var(--o-head)}

/* ===================================================================
   Alcance global y cierre
   =================================================================== */
.v3 .countries-section{
  position:relative;overflow:clip;isolation:isolate;
  background:var(--o-bg);
}
.v3 .countries-section::before{
  content:"";position:absolute;inset:0;z-index:-2;display:block;
  background:url('../img/paises-fondo.jpg') center center/cover no-repeat;
  opacity:1;              /* nunca se anima: es el fondo base */
}
/* Solape de 2px: ningún redondeo de subpíxel puede abrir una línea. */
.v3 .countries-section{margin-top:-2px}
/* Fundido corto en la cabecera del mapa, para rematar el paso. */
.v3 .countries-section .mezcla-superior{
  position:absolute;top:0;left:0;right:0;height:16px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(244,249,255,1) 0%,
    rgba(244,249,255,.45) 60%,
    rgba(244,249,255,0) 100%);
}
/* Transición progresiva mapa -> blanco antes del pie, como el original. */
.v3 .countries-section::after{
  content:"";position:absolute;inset:0;z-index:-1;display:block;
  background:linear-gradient(180deg,
    rgba(244,249,255,.78) 0%,
    rgba(244,249,255,.80) 35%,
    rgba(255,255,255,.92) 70%,
    rgba(255,255,255,1) 100%);
}
/* ---- Mar: reflejos prerenderizados sobre máscara estática ---- */
.v3 .zona-catalogo .agua{
  /* Sin mask-image: una máscara CSS sobre el contenedor obliga a repintar
     toda el área enmascarada en cada fotograma, y era el mayor coste de la
     página (27 de 32 fotogramas largos). Ahora el recorte va horneado en el
     alfa de cada PNG, erosionado con margen sobre el desplazamiento máximo
     (±26px), así que ningún reflejo puede alcanzar el barco ni la estela.
     Lo que queda por fotograma es un transform compuesto en la GPU. */
  position:absolute;
  top:var(--desfase-fondo, 0px);right:0;bottom:0;left:0;
  z-index:0;pointer-events:none;overflow:clip;
  opacity:0;transition:opacity .8s ease;
}
.v3 .zona-catalogo .agua.activa{opacity:1}
/* Tres capas, tres animaciones en total. Cada una anima solo transform y
   opacity, que se componen en la GPU y no repintan nada. */
.v3 .agua i{
  position:absolute;inset:0;display:block;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  animation-play-state:paused;      /* solo corre con la sección a la vista */
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
}
.v3 .agua.activa i{animation-play-state:running}
/* will-change solo mientras la capa está encendida. */
.v3 .agua.activa i{will-change:transform,opacity}
.v3 .agua .deriva-a{background-image:url('../img/mar-reflejos-1.png');
  animation-name:np-mar;animation-duration:13.5s;animation-delay:0s}
.v3 .agua .deriva-b{background-image:url('../img/mar-reflejos-2.png');
  animation-name:np-mar;animation-duration:13.5s;animation-delay:-4.5s}
.v3 .agua .deriva-c{background-image:url('../img/mar-reflejos-3.png');
  animation-name:np-mar;animation-duration:13.5s;animation-delay:-9s}
/* Sentidos y ritmos distintos: es el desfase entre las tres capas, no un
   parpadeo por destello, lo que impide que se lea como una mancha única. */
/* Reflejos especulares intermitentes: cada capa cruza de un lado al otro
   y vuelve (por eso el bucle no salta), y enciende dos veces por ciclo en
   momentos distintos. Nunca brillan las tres a la vez: picos cortos y
   descansos largos, como el sol iluminando zonas sueltas del agua. */
/* Un reflejo por capa y por ciclo: se enciende, se desplaza un poco y
   se apaga. Las tres capas comparten duración y van desfasadas un tercio
   con animation-delay, así que solo una alcanza el máximo cada vez y hay
   un destello cada 4.5s. El resto del ciclo la capa está a opacidad 0 y
   vuelve invisible a su punto de partida, por eso el bucle no salta. */
@keyframes np-mar{
  0%  {transform:translate3d(-14px,0,0);opacity:0}
  6%  {transform:translate3d(-9px,0,0); opacity:.4}
  12% {transform:translate3d(-4px,0,0); opacity:1}
  18% {transform:translate3d(2px,0,0);  opacity:.55}
  26% {transform:translate3d(8px,0,0);  opacity:0}
  100%{transform:translate3d(-14px,0,0);opacity:0}
}
@media (max-width:900px){
  .v3 .zona-catalogo .agua.activa{opacity:.5}
  .v3 .agua.activa i{will-change:auto}
  .v3 .agua .deriva-a,
  .v3 .agua .deriva-b,
  .v3 .agua .deriva-c{animation-duration:16s}
}
@media (prefers-reduced-motion:reduce){
  /* Misma especificidad que las reglas que asignan animation-name; si no,
     la forma abreviada pierde y el nombre seguía aplicándose. */
  .v3 .agua .deriva-a,
  .v3 .agua .deriva-b,
  .v3 .agua .deriva-c{animation:none}
}

/* ---- Catálogo en flujo normal ----
   Sin sticky, sin retención y sin separador: las fichas entran una vez
   con su animación y a partir de ahí suben con el documento, como
   cualquier otro contenido. La fotografía de fondo no se mueve; solo
   las nubes y los reflejos del agua. */

/* La capa v2 de esta sección pide /img/photo-output 2.jpeg, que no existe
   en el repositorio: devolvía un 404 en cada carga. En v3 esa capa queda
   tapada por la fotografía de .zona-catalogo, así que se anula aquí sin
   tocar la base, que comparten las otras cuatro páginas. */
/* Fondos de la capa v2 que apuntaban a archivos ausentes del repositorio
   y devolvían 404 en cada carga. Se reapuntan a recursos locales que ya
   existen, dentro de la capa v3 (que ahora es la de todo el sitio). */
/* El header va fijo, así que no reserva sitio en el flujo. La portada lo
   absorbe con su hero a pantalla completa; las páginas interiores
   necesitan compensarlo para que nada quede por debajo. */
.v3 .page-hero{padding-top:calc(var(--o-header-h) + 34px)}

/* Banda CTA de las páginas interiores. El degradado de la capa v2
   arrancaba en rgb(110,165,217): con texto blanco encima daba 3.95:1,
   por debajo de AA. Se lleva a un azul profundo (5.3:1) y se le quita
   el reflejo interior y la mancha desenfocada, coherente con la
   materialidad plana del resto del sitio. */
.v3 .cta{
  background:linear-gradient(135deg,#2C6FA8,#235C8E);
  border:0;
  box-shadow:none;
}
.v3 .cta::before,
.v3 .cta::after{display:none}
@media (max-width:900px){ .v3 .page-hero{padding-top:calc(var(--o-header-h) + 20px)} }

.v3 .catalog-section::before{background-image:none}
/* ===================================================================
   Hero de Products — fotografía completa, a todo el ancho y bajo el header
   -------------------------------------------------------------------
   La imagen es un <img> real: el marco toma su proporción, así que la
   altura sale del ancho y no hay altura fija que obligue a recortar ni a
   rellenar. Arranca en y=0, detrás del header, que queda por encima y
   transparente en el inicio.
   =================================================================== */
.v3 .products-top-bg::before{content:none}
.v3 .products-top-bg::after{content:none}
.v3 .products-top-bg{
  /* Solo compensa el margen negativo de la banda: la fotografía empieza
     en el origen del documento, no por debajo del header. */
  padding-top:110px;
  min-height:0;
  position:relative;
}
/* El marco mide exactamente lo que la fotografía, así que sirve de
   referencia para colocar el texto sin números atados a una anchura. */
.v3 .products-hero-marco{position:relative;width:100%}
.v3 .products-hero-media{
  position:relative;display:block;margin:0;padding:0;
  width:100%;
  aspect-ratio:900 / 504;
}
.v3 .products-hero-foto{display:block;width:100%;height:auto;margin:0;border:0}
/* Velo independiente sobre la fotografía: no altera sus dimensiones. */
.v3 .products-hero-velo{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(244,249,255,.62) 0%,
    rgba(244,249,255,.56) 40%,
    rgba(244,249,255,.60) 78%,
    rgba(244,249,255,.86) 94%,
    rgba(244,249,255,1) 100%);
}
@media (min-width:901px){
  /* Texto y panel son UNA composición y se colocan juntos. Su posición no
     depende del borde inferior de la fotografía ni del centro del marco:
     se alinea el centro del h1 con el del Home, que es la referencia. El
     ajuste fino lo calcula el JS una vez por carga y por redimensionado
     —nunca por fotograma— porque CSS no puede leer la caja de otro
     elemento. --hero-desplazamiento es lo único que se escribe. */
  .v3 .products-hero-conjunto{
    position:absolute;left:0;right:0;
    top:var(--hero-desplazamiento, 150px);
    z-index:1;
  }
  .v3 .products-hero-conjunto > .page-hero{padding-top:0;padding-bottom:0}
  /* Resto del maquetado anterior: 20px de relleno inferior que sumaban
     al hueco y lo dejaban en 76px en vez de 56. */
  .v3 .products-hero-conjunto .page-hero-text{padding-bottom:0}
  /* Separación histórica entre la descripción y el panel: 56px. Antes
     venía de un style en línea con padding-top:0, que ganaba a la hoja. */
  .v3 .products-hero-conjunto > .seccion-panel{padding-top:56px;padding-bottom:0}
}
@media (max-width:900px){
  /* En vertical la composición va apilada bajo la fotografía. */
  .v3 .products-hero-conjunto > .page-hero{padding-top:34px}
  .v3 .products-hero-conjunto > .seccion-panel{padding-top:40px;padding-bottom:20px}
}
}
}
}
/* El panel de estadísticas cae entre el 80% y el 97% de esta banda, justo
   donde el velo de la capa v2 llegaba a opacidad total y borraba la
   fotografía: por eso el vidrio se leía como una caja blanca aunque sus
   estilos fueran idénticos a los del panel del Home. Se suaviza ese tramo
   para que la foto se perciba a través del panel. */
.v3 .products-top-bg::after{
  /* La fotografía nueva es de por sí muy clara (planta de procesamiento,
     potas blancas bajo luz fría) y con el velo anterior se perdía por
     completo. Se aligera el tramo alto y medio para que se reconozca la
     planta; el remate final se mantiene para no dejar salto de banda. */
  background:linear-gradient(180deg,
    rgba(244,249,255,.76) 0%,
    rgba(244,249,255,.70) 30%,
    rgba(244,249,255,.64) 55%,
    rgba(244,249,255,.64) 84%,
    /* El último tramo sí sube a opacidad total: si se queda por debajo,
       el borde inferior de la banda deja un salto visible contra el fondo
       de la página. El panel termina al 97.5%, así que la subida arranca
       justo después. */
    rgba(244,249,255,.80) 95%,
    rgba(244,249,255,1) 100%);
}
.v3 .mission-hero::before{background-image:url('../img/photo-output.jpeg')}

.v3 .caja-cierre{margin-top:40px;margin-bottom:8px}
@media (max-width:900px){ .v3 .caja-cierre{margin-top:32px} }

/* ---- Cargueros saliendo de Perú ---- */
.v3 .countries-section .wrap{position:relative;z-index:1}   /* pastillas por encima */
/* Continuación del mapa: recupera la altura del segmento que ocupaba el
   CTA eliminado, medida reinsertando el bloque original. No es una caja
   aparte: pertenece a la sección, así que sobre ella siguen la
   fotografía, el velo, las rutas y los barcos. */
.v3 .countries-map-continuation{
  display:block;
  height:473px;
  pointer-events:none;
}
@media (max-width:900px){
  .v3 .countries-map-continuation{height:497px}
}

/* El contenido frontal del mapa baja un poco como un solo conjunto. La
   fotografía de fondo, las rutas y los barcos no se tocan. */
/* Solo baja el contenido frontal. Antes se hacía subiendo el padding de
   la sección, y eso cambiaba su altura y con ella el encuadre de la
   fotografía del mapa: la geometría de la sección vuelve a ser la de
   antes y el desplazamiento pasa a un transform, que no toca el flujo
   ni las dimensiones. */
.v3 .countries-section > .section-sm:first-of-type > .wrap{
  transform:translateY(32px);
}
@media (max-width:900px){
  .v3 .countries-section > .section-sm:first-of-type > .wrap{transform:translateY(20px)}
}
.v3 .countries-section .rutas{
  /* Sobre el velo blanco (::after, z-index:-1): debajo de él el mapa queda
     lavado y no se vería nada. Bajo el contenido, nunca encima. */
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1s ease;
}
.v3 .countries-section .rutas.activa{opacity:1}

/* Los colores del carguero van como atributos en el símbolo: dentro de
   un <use> las clases del documento no alcanzan al árbol clonado.
   El acento es blanco, no dorado: el dorado sigue siendo del logo. */

.v3 .rutas .barco{
  /* transform-box:view-box y origen en 0,0 hacen que el punto (0,0) del
     símbolo —su centro— sea el que viaja sobre el trazado. */
  transform-box:view-box;
  transform-origin:0 0;
  offset-rotate:auto;                  /* se orienta sola siguiendo la curva */
  opacity:0;
  animation-name:np-carguero;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-play-state:paused;         /* solo corre con la sección a la vista */
}
.v3 .rutas.activa .barco{animation-play-state:running}
.v3 .rutas .barco > use{transform:scale(var(--barco-escala, .75))}

.v3 .rutas .barco-norteamerica{
  offset-path:path("M565,886 Q432,706 380,620");
  animation-duration:20s;animation-delay:.4s;
}
.v3 .rutas .barco-europa{
  offset-path:path("M565,886 Q742,566 880,580");
  animation-duration:25s;animation-delay:3.2s;
}
.v3 .rutas .barco-asia{
  offset-path:path("M565,886 Q1046,566 1450,640");
  animation-duration:29s;animation-delay:6.8s;
}
/* Sale del nodo, recorre la ruta, se desvanece al llegar y descansa antes
   de volver a zarpar. Tres barcos en total, nunca más. */
@keyframes np-carguero{
  0%  {offset-distance:0%;   opacity:0}
  6%  {offset-distance:6%;   opacity:1}
  64% {offset-distance:92%;  opacity:1}
  72% {offset-distance:100%; opacity:0}
  100%{offset-distance:100%; opacity:0}
}

/* Tráfico ambiental: más pequeño, más tenue y sin destino visible.
   La ruta y los puntos de inicio y desaparición los fija el JS una vez
   por recorrido; aquí solo se interpola offset-distance. */
.v3 .rutas .barco-amb{
  animation-name:np-carguero-amb;
}
.v3 .rutas .barco-amb > use{transform:scale(var(--barco-escala-amb, .5))}
/* Ventana visible corta (poco más de un tercio del ciclo) y fases
   repartidas: con seis barcos eso deja dos o tres en pantalla, cuatro
   como mucho. El resto del ciclo descansan fuera de vista. */
@keyframes np-carguero-amb{
  0%  {offset-distance:var(--ini, 0%);  opacity:0}
  5%  {opacity:var(--op, .5)}
  40% {opacity:var(--op, .5)}
  48% {offset-distance:var(--fin, 80%); opacity:0}
  100%{offset-distance:var(--fin, 80%); opacity:0}
}

/* Un único pulso discreto en el nodo de Perú. */
.v3 .rutas .anillo{
  fill:none;stroke:rgba(30,140,185,.55);stroke-width:4;
  transform-box:fill-box;transform-origin:center;
  animation:np-nodo 4.6s ease-out infinite;
  animation-play-state:paused;
}
.v3 .rutas.activa .anillo{animation-play-state:running}
@keyframes np-nodo{
  0%  {transform:scale(.45);opacity:.7}
  70% {opacity:0}
  100%{transform:scale(2.7);opacity:0}
}
@media (max-width:900px){
  /* En móvil el SVG se escala por altura y el barco salía a 46px:
     con 0.5 queda en unos 20px, dentro de lo pedido. */
  .v3 .rutas .barco > use{transform:scale(var(--barco-escala, .5))}
  .v3 .rutas .barco-amb > use{transform:scale(var(--barco-escala-amb, .34))}
}
@media (prefers-reduced-motion:reduce){
  .v3 .rutas .barco,.v3 .rutas .anillo{animation:none}
  .v3 .rutas .barco{opacity:0}
  /* Misma especificidad que la regla que asigna el nombre; con la
     abreviada sola perdía y el nombre seguía aplicándose. */
  .v3 .zona-catalogo .cielo i{animation:none}
}

.v3 .countries-section .sec-head h2{text-shadow:none}
.v3 .flag-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  height:40px;padding:0 .9rem;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.72);
  border:0;box-shadow:inset 0 0 0 1px var(--hairline-dark);
  font-size:14px;font-weight:500;color:var(--o-head);
}
.v3 .flag-pill:hover{transform:none;box-shadow:inset 0 0 0 1px var(--hairline-dark)}
.v3 .flag-pill img{width:22px;height:15px;object-fit:cover;border-radius:2px}
.v3 .cta-actions{margin-top:28px;display:flex;justify-content:center}
.v3 .cta-actions .btn{height:57px;padding:0 28px;font-size:15.2px;display:inline-flex;align-items:center}

/* ===================================================================
   Responsive — comprobado a 390px, no solo copiado de escritorio
   =================================================================== */
@media (max-width:1040px){
  .v3 .trust-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:1149px){
  .v3 .nav-inner{height:calc(var(--o-header-h) - 8px * var(--nav-p));padding:0 14px;gap:10px}
  .v3 .nav::before{
    -webkit-backdrop-filter:blur(calc(12px * var(--nav-q, 0))) saturate(calc(100% + 12% * var(--nav-q, 0)));
    backdrop-filter:blur(calc(12px * var(--nav-q, 0))) saturate(calc(100% + 12% * var(--nav-q, 0)));
  }
  /* El original mantiene 201x46 también en móvil. */
  .v3 .nav-logo{width:201px;height:calc(46px - 4px * var(--nav-p))}
  .v3 .nav-cta{gap:6px}
  .v3 .nav-cta .btn-primary{display:none}   /* el CTA vive en el menú */
  .v3 .lang-btn{height:44px;padding:0 .6rem;font-size:13px}

  .v3 .nav-links{
    position:absolute;top:calc(100% + 8px);right:0;left:0;
    min-width:0;flex-direction:column;gap:0;
    border:0;border-radius:var(--radius-v3);padding:8px;
    visibility:hidden;
    transition:opacity .18s ease,
               transform .26s cubic-bezier(.18,1.25,.4,1),
               visibility 0s linear .2s;
  }
  .v3 .nav.nav-on-light .nav-links{
    background:rgba(255,255,255,.82);
    box-shadow:inset 0 0 0 1px var(--hairline-dark), var(--shadow-soft);
  }
  .v3 .nav.nav-on-dark .nav-links{
    background:rgba(27,58,91,.72);
    box-shadow:inset 0 0 0 1px var(--hairline-light), var(--shadow-soft);
  }
  .v3 .nav-links.open{visibility:visible;transition-delay:0s}
  .v3 .nav-links li{width:100%}
  .v3 .nav.nav-on-light .nav-links li + li{border-top:1px solid rgba(27,58,91,.08)}
  .v3 .nav.nav-on-dark .nav-links li + li{border-top:1px solid rgba(255,255,255,.08)}
  .v3 .nav-links a{
    display:flex;align-items:center;
    height:auto;min-height:44px;      /* nunca por debajo del objetivo táctil */
    padding:.75rem .9rem;             /* da ~49px, como las filas del original */
    border-radius:12px;               /* radio del original en móvil */
    font-size:15.2px;
  }
  .v3 .nav.nav-on-light .nav-links a{color:var(--o-head)}
  .v3 .nav.nav-on-dark .nav-links a{color:#fff}
  .v3 .nav-links .nav-mobile-cta{display:list-item;margin-top:8px;border-top:0}
  .v3 .nav.nav-on-light .nav-links .nav-mobile-cta,
  .v3 .nav.nav-on-dark .nav-links .nav-mobile-cta{border-top:0}
  .v3 .nav-links .nav-mobile-cta a{
    justify-content:center;border-radius:var(--radius-pill);
    background:var(--o-blue);color:#fff;font-weight:600;box-shadow:none;
  }
  .v3 .nav-links .nav-mobile-cta a:hover{background:var(--o-blue-deep);color:#fff}

  .v3 .burger{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:10px;border:0;
    -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(var(--sat));
    backdrop-filter:blur(var(--blur-sm)) saturate(var(--sat));
  }
  .v3 .nav.nav-on-light .burger{background:var(--glass-light-sm);box-shadow:inset 0 0 0 1px var(--hairline-dark)}
  .v3 .nav.nav-on-light .burger span{background:var(--o-head)}
  .v3 .nav.nav-on-dark .burger{background:var(--glass-navy-sm);box-shadow:inset 0 0 0 1px var(--hairline-light)}
  .v3 .nav.nav-on-dark .burger span{background:#fff}
}

@media (max-width:900px){
  /* Hero a 390px: el original mantiene 846px de alto y baja el h1. */
  .v3 .hero{padding:150px 0 96px;min-height:846px}
  .v3 .hero h1{font-size:41.6px;line-height:43.26px}
  .v3 .hero p{font-size:18.88px;line-height:31.15px;margin:16px auto 28px}
  .v3 .sec-head h2{font-size:32px}
  /* En móvil el panel es mucho más alto (columnas apiladas): centrarlo
     sobre la costura lo metería demasiado dentro del hero, así que se
     limita la subida. El fondo sigue el mismo valor para no abrir
     franja. */
  /* Móvil: main.js ya limita --subida-panel al espacio libre. */
  .v3 .trust-panel{padding:40px 20px 26px}
  /* En vertical los divisores se leen como rayas sueltas: se sustituyen
     por un filete horizontal discreto entre columnas. */
  .v3 .trust-item{border-left:0;padding-left:0;padding-top:18px;border-top:1px solid rgba(62,134,201,.18)}
  .v3 .trust-item:first-child{border-top:0;padding-top:0}
  .v3 .trust-figure{min-height:0}
  .v3 .prod-body h3{font-size:20px}
  .v3 .catalog-section{padding:72px 0}
}
@media (max-width:640px){
  .v3 .trust-grid{grid-template-columns:1fr;gap:20px}
  .v3 .hero{padding:132px 0 80px}
  .v3 .hero-actions{flex-direction:column;align-items:stretch}
  .v3 .hero-actions .btn{width:100%}
  .v3 .prod-body{padding:20px 20px 24px}
  .v3 .trust-panel{padding:36px 18px 22px}
}

.v3 [id]{scroll-margin-top:96px}

/* ===================================================================
   Movimiento — Neptunus (sistema híbrido)
   -------------------------------------------------------------------
   Composición y código propios.

   Por qué híbrido: atar opacidad, posición y escala al progreso de
   `view-timeline` hace que un delta grande de rueda mueva el documento
   cientos de píxeles, el timeline salte y la animación aparezca ya
   terminada. Alargar el rango no lo arregla, porque no cambia la
   velocidad real del documento.

   Reparto de responsabilidades:
   · El SCROLL decide CUÁNDO empieza cada escena (IntersectionObserver).
   · Una TRANSICIÓN TEMPORAL decide cuánto dura (~0.9-1.1s), así que se
     ve entera aunque la rueda dé un salto enorme.
   · Al scroll solo le queda un parallax corto (<=30px), que sí puede
     seguir el recorrido sin riesgo.

   Seguridad: todo cuelga de .js-anim (script en línea antes de pintar).
   Sin JS, el contenido se ve entero. prefers-reduced-motion lo anula.
   =================================================================== */

.v3{--cine:cubic-bezier(.16,1,.3,1);--cine-fila:cubic-bezier(.42,.12,.28,1)}
/* clip en vez de hidden: hidden convierte al cuerpo en contenedor de
   scroll y con eso position:sticky deja de fijarse. clip recorta igual
   sin crear scrollport. Solo en la portada v3. */
body.v3{overflow-x:clip}

/* ===================================================================
   Sección de catálogo — flujo vertical normal, sin fijación
   =================================================================== */
.v3 .catalog-section{overflow:clip}

/* Marco a sangre: recorta a propósito los extremos de la fila. */
.v3 .fila-marco{
  position:relative;
  width:100%;
  overflow:clip;
  margin-top:52px;
  display:flex;justify-content:center;
}
/* Sin parallax no hay nada que promocionar, y will-change:transform
   también crea raíz de backdrop. */
.v3 .fila-parallax{will-change:auto}

/* La fila se comporta como UN SOLO conjunto: el viaje principal es
   suyo, no de cada ficha. Al entrar se ensancha de verdad (se anima el
   ancho, no scaleX, para no deformar fotos ni textos). */
.v3 .prod-grid{
  --fila-ancho:min(1280px, calc(100vw - 48px));
  width:var(--fila-ancho);
  max-width:none;flex:0 0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  position:relative;
}
/* Al bajar la fila a 1280px deja de sobresalir del viewport: ya no hay
   sangrado que compensar, así que se retiran las zonas seguras que
   protegían el contenido de las fichas exteriores. El marco conserva
   overflow:clip porque durante la entrada la fila sí se desplaza a la
   derecha y no debe empujar la página. */

/* ===================================================================
   Estados de partida (solo con JS activo)
   =================================================================== */
/* La cabecera ya no entra como un bloque de 26px: era un recorrido tan
   corto que se leía como estática. Ahora el contenedor no se mueve y
   entran por separado el eyebrow, el título y el párrafo, escalonados. */
.js-anim .v3 [data-anim="cabecera"]{opacity:1;transform:none}
.js-anim .v3 [data-anim="cabecera"] > .eyebrow,
.js-anim .v3 [data-anim="cabecera"] > h2,
.js-anim .v3 [data-anim="cabecera"] > .lead{
  opacity:0;transform:translateY(52px);
}
.js-anim .v3 [data-anim="cierre-catalogo"]{opacity:0;transform:translateY(26px)}
.js-anim .v3 [data-anim="fila"]{
  opacity:0;
  /* El ancho es el definitivo desde el primer fotograma. Antes se animaba
     de 94% a 100%, y animar width rehace el layout de las tres fichas en
     cada fotograma. La expansión cinematográfica ahora la da una escala
     del 1.5%, imperceptible sobre el texto y compuesta en la GPU. */
  /* Recorrido perceptible con el nuevo Lenis: la fila llega de verdad
     desde la derecha en vez de insinuarlo. Solo transform y opacity. */
  transform:translateX(130px) translateY(55px) scale(.985);
  transform-origin:50% 50%;
}
.js-anim .v3 [data-anim="panel"]{opacity:0;transform:translateY(70px) scale(.98)}
.js-anim .v3 .trust-item{opacity:0;transform:translateY(18px)}
.js-anim .v3 [data-anim="paises"]{opacity:0;transform:translateY(48px)}
.js-anim .v3 .flags-linea .flag-pill{opacity:0;transform:translateY(48px)}

/* ===================================================================
   Transiciones temporales — el gesto de rueda no puede saltárselas
   =================================================================== */
/* Secuencia de la escena del catálogo. El scroll solo decide cuándo
   arranca; a partir de ahí manda el reloj, así que un golpe de rueda
   grande no puede saltársela. Se asienta cerca de 1.15s. */
.js-anim .v3 [data-anim="cabecera"] > .eyebrow,
.js-anim .v3 [data-anim="cabecera"] > h2,
.js-anim .v3 [data-anim="cabecera"] > .lead{
  transition:opacity .8s var(--cine), transform .85s var(--cine);
}
.js-anim .v3 [data-anim="cabecera"] > h2{
  transition-duration:.86s, .9s;
}
.js-anim .v3 [data-anim="cabecera"] > .lead{
  transition-duration:.86s, .9s;
}
.js-anim .v3 [data-anim="cabecera"].is-entering > .eyebrow{transition-delay:0ms, 0ms}
.js-anim .v3 [data-anim="cabecera"].is-entering > h2{transition-delay:80ms, 80ms}
.js-anim .v3 [data-anim="cabecera"].is-entering > .lead{transition-delay:190ms, 190ms}
.js-anim .v3 [data-anim="cabecera"].is-entering > .eyebrow,
.js-anim .v3 [data-anim="cabecera"].is-entering > h2,
.js-anim .v3 [data-anim="cabecera"].is-entering > .lead{opacity:1;transform:none}

.js-anim .v3 [data-anim="cierre-catalogo"]{
  transition:opacity .55s var(--cine), transform .6s var(--cine);
}
.js-anim .v3 [data-anim="cierre-catalogo"].is-entering{
  opacity:1;transform:none;transition-delay:540ms, 540ms;
}
.js-anim .v3 [data-anim="fila"]{
  /* Curva propia para la fila: --cine es muy adelantada y a medio
     segundo la fila ya estaba prácticamente puesta. Esta reparte el
     recorrido para que el viaje se vea, y sigue frenando suave. */
  transition:opacity 1s var(--cine-fila), transform 1.08s var(--cine-fila);
}
/* Entra después de la cabecera: es el cuarto paso de la secuencia. */
.js-anim .v3 [data-anim="fila"].is-entering{transition-delay:110ms, 110ms}
.js-anim .v3 [data-anim="panel"]{
  transition:opacity .9s var(--cine), transform .9s var(--cine);
}
.js-anim .v3 .trust-item{
  transition:opacity .8s var(--cine), transform .8s var(--cine);
}
.js-anim .v3 [data-anim="paises"]{
  transition:opacity .85s var(--cine), transform .85s var(--cine);
}
.js-anim .v3 .flags-linea .flag-pill{
  transition:opacity .8s var(--cine), transform .8s var(--cine);
}

/* Estado final */
.js-anim .v3 [data-anim="cabecera"].is-entering,
.js-anim .v3 [data-anim="panel"].is-entering,
.js-anim .v3 .trust-item.is-entering,
.js-anim .v3 [data-anim="paises"].is-entering,
.js-anim .v3 .flags-linea .flag-pill.is-entering{opacity:1;transform:none}
.js-anim .v3 [data-anim="fila"].is-entering{
  opacity:1;
  /* none, no la identidad: un transform aunque sea neutro convierte al
     elemento en raíz de backdrop y deja sin fotografía que muestrear al
     backdrop-filter del cuerpo de las fichas. */
  transform:none;
}

/* Cascada de refuerzo, de derecha a izquierda: Hake, Scallops y por
   último Giant Squid. No son tres viajes: solo opacidad y un empujón
   corto que subraya la lectura. */
@media (min-width:901px){
  .js-anim .v3 [data-anim="fila"] > [data-anim="ficha"]{
    opacity:0;transform:translateX(38px);
    transition:opacity .72s var(--cine-fila), transform .78s var(--cine-fila);
  }
  .js-anim .v3 [data-anim="fila"].is-entering > [data-anim="ficha"]{
    opacity:1;transform:none;
  }
  /* Hake, Scallops y por último Giant Squid, sobre el retardo de la
     fila: una sola fila llegando, con cascada interna dentro. */
  .js-anim .v3 [data-anim="fila"].is-entering > [data-anim="ficha"]:nth-child(3){transition-delay:110ms}
  .js-anim .v3 [data-anim="fila"].is-entering > [data-anim="ficha"]:nth-child(2){transition-delay:210ms}
  .js-anim .v3 [data-anim="fila"].is-entering > [data-anim="ficha"]:nth-child(1){transition-delay:310ms}
}

/* ===================================================================
   Sin parallax: las fotografías base no se mueven
   -------------------------------------------------------------------
   Se retiraron np-parallax (desplazaba la fila sobre una fotografía
   quieta, y con la retención sticky eso se leía como si la foto
   resbalase) y np-parallax-mapa (desplazaba la fotografía base del
   mapa). Las únicas capas que se mueven son las nubes y los reflejos
   del agua, que son independientes de la fotografía.
   =================================================================== */
.v3 .fila-parallax{will-change:auto;transform:none}

/* ===================================================================
   Banderas: iconos algo mayores y dos filas centradas 7 + 4
   =================================================================== */
.v3 .flags-row{display:flex;flex-direction:column;gap:14px;align-items:center}
.v3 .flags-linea{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:100%}
.v3 .flag-pill{
  height:42px;padding:0 .95rem;gap:8px;
  border-radius:var(--radius-pill);
  background:var(--glass-light);
  border:0;box-shadow:inset 0 0 0 1px var(--hairline-dark);
  font-size:14px;font-weight:500;color:var(--o-head);
}
.v3 .flag-pill img{width:26px;height:18px;object-fit:cover;border-radius:2px;display:block;flex:0 0 auto}

/* ===================================================================
   Móvil: columna natural, sin marco desbordante, sin fijación
   =================================================================== */
@media (max-width:900px){
  .v3 .flags-row{gap:10px}
  .v3 .flags-linea{gap:10px}
  .v3 .flag-pill{height:38px;padding:0 .8rem;gap:8px;font-size:13.5px}
  .v3 .flag-pill img{width:24px;height:17px}

  .v3 .fila-marco{margin-top:36px;overflow:visible}
  .v3 .prod-grid{
    --fila-ancho:100%;
    width:100%;
    grid-template-columns:1fr;gap:22px;
    padding:0 var(--o-pad-x);
  }
  /* La fila deja de animarse como bloque: entra ficha a ficha. */
  .js-anim .v3 [data-anim="fila"]{
    opacity:1;width:100%;transform:none;transition:none;
  }
  .js-anim .v3 [data-anim="ficha"]{
    opacity:0;transform:translateX(28px) translateY(32px);
    transition:opacity .8s var(--cine), transform .85s var(--cine);
  }
  .js-anim .v3 [data-anim="ficha"].is-entering{opacity:1;transform:none}
  .js-anim .v3 [data-anim="panel"]{transform:translateY(48px) scale(.985)}
  .js-anim .v3 [data-anim="paises"]{transform:translateY(34px)}
  .js-anim .v3 .flags-linea .flag-pill{transform:translateY(30px)}
  .v3 .fila-parallax{animation:none !important;transform:none !important}
}

/* ===================================================================
   Movimiento reducido: todo visible al instante
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  /* Con movimiento reducido, solo la fotografía estática. */
  .v3 .zona-catalogo .cielo{display:none !important}
  .js-anim .v3 [data-anim="cabecera"],
  .js-anim .v3 [data-anim="cabecera"] > .eyebrow,
  .js-anim .v3 [data-anim="cabecera"] > h2,
  .js-anim .v3 [data-anim="cabecera"] > .lead,
  .js-anim .v3 [data-anim="cierre-catalogo"],
  .js-anim .v3 [data-anim="fila"],
  .js-anim .v3 [data-anim="ficha"],
  .js-anim .v3 [data-anim="panel"],
  .js-anim .v3 .trust-item,
  .js-anim .v3 [data-anim="paises"],
  .js-anim .v3 .flags-linea .flag-pill{
    opacity:1 !important;transform:none !important;transition:none !important;animation:none !important;
  }
  .js-anim .v3 [data-anim="fila"]{width:var(--fila-ancho) !important}
  .js-anim .v3 .countries-section::before{opacity:1 !important;animation:none !important;transform:none !important}
  .v3 .fila-parallax{animation:none !important;transform:none !important}
}

/* ============================================================
   3D EXPLORERᴮᴱᵀᴬ  —  integración corporativa (2026-09-08)
   Bloque autocontenido: para revertir, borrar de esta cabecera
   hasta el final del archivo. No modifica ninguna regla previa.
   ============================================================ */

/* La marca BETA vive DENTRO del <a>: hereda color y no genera un
   segundo objetivo de clic ni de foco. line-height:0 evita que el
   superíndice altere la altura de la píldora de 36px ni la del header. */
.beta-tag{
  font-size:.62em;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  vertical-align:super;
  line-height:0;
  margin-left:.3em;
  opacity:.62;
  pointer-events:none;
}
/* En el activo y sobre foto el enlace es blanco: subimos algo la
   opacidad para que BETA no se pierda sobre fondo saturado. */
.v3 .nav-links a.active .beta-tag,
.v3 .nav.nav-on-dark .nav-links a .beta-tag{opacity:1}

/* Seguridad: el atributo hidden debe ganar al display:flex del <ul>
   y al width:100% del <li> en el menú móvil. */
.nav-links li[hidden],
.v3 .nav-links li[hidden]{display:none !important}

/* Con un sexto enlace la barra se estrecha, y entre ~1050px y ~1250px
   "About us" partía en dos líneas dentro de su píldora de 36px. Los
   rótulos de navegación no deben partirse nunca: son de una sola línea
   por diseño. Esto además corrige el mismo corte que ya ocurría por
   debajo de 1024px antes de este cambio. */
.v3 .nav-links a{white-space:nowrap}

/* ---- CTA "Explore in 3D" en las fichas de producto ---- */
/* Enlace discreto: no compite con el botón de cotización. */
/* .prod-body es un flex column: sin align-self el enlace se estira a
   todo el ancho de la ficha y deja ~500px de zona de clic invisible.
   Se encoge a su contenido y baja bajo el botón de cotización. */
.prod-3d{
  align-self:flex-start;
  display:inline-flex;align-items:center;
  margin-top:.55rem;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.92rem;
  color:var(--o-blue-cta,#2f72b4);
  text-decoration:none;
  border-radius:var(--radius-pill,999px);
  padding:.35rem .1rem;
  transition:color .2s ease,opacity .2s ease;
}
.prod-3d:hover{color:var(--o-blue-deep,#1b3a5b);text-decoration:underline}
.prod-3d:focus-visible{outline:2px solid var(--o-blue-cta,#2f72b4);outline-offset:3px}
.prod-3d .arrow{margin-left:.3em;transition:transform .2s ease}
.prod-3d:hover .arrow{transform:translateX(2px)}
.prod-3d[hidden]{display:none !important}

/* ---- Página /explorer/ ---- */
/* Tres tarjetas de vidrio que se reordenan solas: mismo lenguaje que
   .faq-item, sin introducir un sistema de rejilla nuevo. */
.exp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:22px;align-items:start;
}
.exp-card{padding:28px 26px}
.exp-card h2{font-size:1.22rem;margin:0 0 .65rem}
.exp-card p{margin:0 0 .9rem}
.exp-card .prod-formats{margin:0}
.exp-card .btn-outline-blue{margin-top:.2rem}

/* ============================================================
   Cabecera en tres zonas (2026-09-09)
   Bloque autocontenido: para revertir, borrar desde esta cabecera
   hasta el final del archivo.
   ============================================================ */

/* El header deja de compartir el ancho del contenido (1280) y pasa a ocupar
   todo el viewport con sangría propia, para que el logotipo y los controles
   respiren hacia los extremos. El contenedor general (--o-maxw) NO se toca:
   el hero y las secciones siguen igual.

   La rejilla 1fr / auto / 1fr es lo que centra la navegación respecto al
   VIEWPORT y no respecto al hueco que dejan los extremos: las dos columnas
   elásticas se reparten el sobrante por igual, así que la del medio queda
   en el eje aunque el logotipo y el bloque de la derecha midan distinto.

   El umbral es 1150px, no 900: por debajo de ~1080 las tres zonas ya no caben
   y las columnas elásticas se encogían por detrás del logotipo y del bloque
   derecho, que acababan solapando la navegación (medido: -21px de holgura a
   1024 y -76px a 905). Entre 901 y 1149 se conserva el reparto flexible de
   siempre, que no colisiona; por debajo de 900 el menú es hamburguesa y
   .nav-links se posiciona en absoluto, así que la rejilla no debe intervenir. */
@media (min-width:1150px){
  .v3 .nav-inner{
    max-width:none;
    padding:0 clamp(16px, 4.4vw, 72px);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:18px;
  }
  .v3 .nav-inner > .nav-logo{justify-self:start}
  .v3 .nav-inner > .nav-links{justify-self:center}
  .v3 .nav-inner > .nav-cta{justify-self:end}
}

/* ---- BETA: un punto más pequeño y un pelín más alto ----
   8px exactos en vez de .62em (9.13px), y 2px de elevación extra sobre el
   superíndice. position:relative no altera el flujo, así que la píldora de
   36px y la altura del header se quedan como estaban. Sigue dentro del <a>,
   sin foco propio y con pointer-events:none. */
.beta-tag{
  font-size:8px;
  margin-left:2px;
  position:relative;
  top:-2px;
}

/* ============================================================
   BETA en dorado (2026-09-09)
   ============================================================ */

/* ---- BETA en el dorado del logotipo ----
   #EFB700 muestreado del propio PNG del logotipo. Se sube la opacidad a 1:
   con .62 el dorado se apagaba a un ocre sucio sobre la cabecera clara. */
.beta-tag{
  color:inherit;
  opacity:1;
}

/* Al quitar los dos botones del hero, el párrafo se quedaba con los 32px de
   margen inferior que los separaba. Solo cuando el párrafo es el último
   elemento del grupo (portada) se recorta, para que el centrado vertical que
   calcula main.js coincida con lo que realmente se ve. Los héroes de las
   demás páginas no se tocan. */
.v3 .hero .hero-inner > p:last-child{margin-bottom:0}

/* ============================================================
   Cabecera: huecos internos iguales y color de marca (2026-09-09)
   Bloque autocontenido: para revertir, borrar desde esta cabecera
   hasta el final del archivo.
   ============================================================ */

/* Simetría exterior (2026-09-23): el logotipo arranca en la sangría
   izquierda y el CTA termina en la derecha (justify-self start/end de la
   rejilla original, más arriba), así que los dos márgenes exteriores son la
   misma sangría. La navegación sigue centrada en el viewport porque las
   columnas laterales son 1fr y 1fr. El PNG del logotipo trae 33/420 de
   margen transparente a la izquierda: se compensa para que el trazo
   visible, y no la caja, empiece en la sangría. */
@media (min-width:1150px){
  .v3 .nav-inner{column-gap:clamp(24px, 4.4vw, 72px)}
  .v3 .nav-inner > .nav-logo{margin-left:calc(-33 / 420 * 210px)}
}

/* ---- Logotipo un punto mayor: 210x48 (mismo 4.375 de proporción) ----
   Se aplica también en móvil, donde antes medía 201x46: a 390px sigue
   sobrando sitio (58px hasta el selector de idioma) y la cabecera se queda
   en 75px. La segunda regla repite el tamaño dentro del tramo móvil solo
   para devolverle su encogido propio al hacer scroll (4px, no 5px), que
   esta regla global habría pisado. */
.v3 .nav-logo{width:210px;height:calc(48px - 5px * var(--nav-p))}
@media (max-width:1149px){
  .v3 .nav-logo{width:210px;height:calc(48px - 4px * var(--nav-p))}
}

/* ---- Idioma y CTA a la misma altura ----
   El selector de idioma mide 38px; el botón medía 45px. Se igualan sin tocar
   el tamaño de letra ni el radio. */
.v3 .nav-cta .btn-primary{height:38px}

/* El experimento de color de navegación (#133250 + píldora activa clara) se
   retira por decisión del propietario. Al no declarar nada aquí vuelven a
   mandar las reglas originales, intactas más arriba en este mismo archivo:
   --o-nav-link:#004373 para los enlaces y, para el activo,
   background:var(--o-blue-cta) con texto blanco y su hover en --o-blue-deep.
   No se reescriben esos valores: simplemente se deja de pisarlos.

   3D Explorer nunca lleva .active en el sitio corporativo (su página es la
   aplicación de Astra, con cabecera propia), así que BETA no llega a caer
   nunca sobre la píldora azul y no hace falta ninguna regla de ruta. */

/* ---- BETA en el azul de referencia del propietario ---- */
.beta-tag{color:inherit}

/* ============================================================
   CABECERA MÓVIL — un solo panel de vidrio, dos modos (2026-09-09)
   ------------------------------------------------------------
   Bloque autocontenido: para revertir, borrar desde esta cabecera
   hasta el final del archivo. Nada de aquí aplica por encima de
   1149px, así que la cabecera de escritorio aprobada no se toca.
   ============================================================ */

/* El panel y el globo vectorial sólo existen en móvil. */
.mhp{display:none}
.lang-btn .globe-svg{display:none}

@media (max-width:1149px){

  /* ---- 1. Cabecera cerrada: logo | globo | hamburguesa ---- */
  /* El logotipo se acerca al borde; el margen mínimo lo fija el
     área segura del dispositivo, no un número fijo. */
  .nav-inner,
  .v3 .nav-inner{
    padding-left:calc(4px + env(safe-area-inset-left));
    padding-right:calc(10px + env(safe-area-inset-right));
  }

  /* Globo: icono vectorial del proyecto, sin etiqueta "EN".
     Sin cápsula: el control flota sobre la cabecera. */
  .v3 .nav .lang-btn,
  .nav .lang-btn{
    width:44px;height:44px;min-width:44px;
    padding:0;border:0;border-radius:0;
    display:flex;align-items:center;justify-content:center;
    background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .lang-btn .lang-cur,
  .lang-btn .globe,
  .lang-btn .chev{display:none}
  .lang-btn .globe-svg{display:block}
  .v3 .nav.nav-on-light .lang-btn,
  .v3 .nav.nav-on-dark .lang-btn{background:none;box-shadow:none}
  .v3 .nav.nav-on-light .lang-btn{color:var(--o-nav-link)}
  .v3 .nav.nav-on-dark .lang-btn{color:#fff}

  /* Hamburguesa: tres líneas, sin círculo, borde ni fondo. */
  .v3 .nav .burger,
  .nav .burger{
    width:44px;height:44px;min-width:44px;
    padding:0;border:0;border-radius:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;
    background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .v3 .nav.nav-on-light .burger,
  .v3 .nav.nav-on-dark .burger{background:none;box-shadow:none}
  .burger span{width:20px;height:2px;border-radius:2px;transition:transform .24s ease,opacity .18s ease}
  .v3 .nav.nav-on-light .burger span{background:var(--o-nav-link)}
  .v3 .nav.nav-on-dark .burger span{background:#fff}
  .nav-cta{gap:2px}

  /* Estado activo simétrico: el control abierto se convierte en una
     equis; el otro conserva su icono, así ningún lado pesa más. */
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .lang-btn[aria-expanded="true"] .globe-svg{opacity:0;position:absolute}
  .lang-btn::before,.lang-btn::after{
    content:"";position:absolute;width:20px;height:2px;border-radius:2px;
    background:currentColor;opacity:0;transition:opacity .18s ease;
  }
  .lang-btn[aria-expanded="true"]::before{opacity:1;transform:rotate(45deg)}
  .lang-btn[aria-expanded="true"]::after{opacity:1;transform:rotate(-45deg)}
  .lang-wrap{position:relative}
  .lang-btn{position:relative}

  /* El menú antiguo de escritorio no participa en móvil. */
  .nav-links,
  .lang-menu{display:none !important}

  /* ---- 2. Panel compartido ---- */
  /* left/right idénticos en ambos modos: la X y el ancho no pueden
     diferir porque no dependen del contenido. */
  .mhp{
    display:block;
    position:absolute;
    top:100%;
    left:calc(10px + env(safe-area-inset-left));
    right:calc(10px + env(safe-area-inset-right));
    margin-top:6px;
    z-index:200;
    border-radius:var(--radius-v3,16px);
    overflow:hidden;
    /* Mismo material que la cabecera cuando el usuario baja: tinte
       .50, desenfoque 16px, saturación 115%, filete y sombra suave. */
    background:rgba(255,255,255,.50);
    -webkit-backdrop-filter:blur(16px) saturate(115%);
            backdrop-filter:blur(16px) saturate(115%);
    box-shadow:
      inset 0 0 0 1px rgba(27,58,91,.10),
      0 6px 16px -14px rgba(31,73,128,.26);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .22s ease, transform .26s ease;
  }
  .mhp.open{opacity:1;transform:none;pointer-events:auto}

  /* Sin backdrop-filter el panel se vuelve opaco, como el resto del sitio. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .mhp{background:rgba(255,255,255,.96)}
  }

  /* Un modo a la vez dentro de la MISMA superficie. */
  .mhp .mhp-nav,
  .mhp .mhp-lang{display:none}
  .mhp[data-mode="nav"] .mhp-nav{display:block}
  .mhp[data-mode="lang"] .mhp-lang{display:flex;justify-content:center}

  /* ---- 3. Modo navegación: composición editorial, sin píldoras ---- */
  .mhp-nav{list-style:none;margin:0;padding:14px 26px 18px}
  .mhp-nav li{list-style:none}
  .mhp-nav a{
    display:flex;align-items:center;min-height:44px;
    padding:4px 0;
    font-family:'Manrope',sans-serif;
    font-size:17px;font-weight:600;letter-spacing:.005em;line-height:1.3;
    color:var(--o-nav-link,#004373);
    text-decoration:none;background:none;border-radius:0;
    transition:color .18s ease;
  }
  .mhp-nav a:hover{background:none;color:var(--o-blue-cta,#3178B4)}
  /* Página actual: peso, color y un filete corto. Nada de píldora. */
  .mhp-nav a.current{color:var(--o-blue-cta,#3178B4);font-weight:700}
  /* Indicador breve, no una píldora: un filete tras el texto. */
  .mhp-nav a.current::after{
    content:"";flex:none;width:20px;height:2px;margin-left:10px;
    background:currentColor;border-radius:2px;
  }
  .mhp-nav a:focus-visible{outline:2px solid var(--o-blue-cta,#3178B4);outline-offset:3px;border-radius:6px}

  /* ---- 4. Modo idioma: bandera + nombre, columna fija, grupo centrado ---- */
  .mhp-lang{padding:14px 26px 18px;width:100%}
  /* inline-block => el grupo mide lo que el nombre más largo y se
     centra completo; los nombres no se centran uno a uno. */
  .mhp-lang-inner{display:inline-block}
  .mhp-lang-option{
    display:grid;
    grid-template-columns:26px auto 16px;   /* columna de bandera fija */
    align-items:center;gap:0 14px;
    width:100%;
    /* Cinco idiomas frente a seis destinos: la fila de idioma respira
       algo más para que las dos alturas del panel casi coincidan. */
    min-height:53px;
    padding:4px 0;margin:0;border:0;background:none;cursor:pointer;
    font-family:'Manrope',sans-serif;
    font-size:16px;font-weight:500;line-height:1.3;
    color:var(--o-nav-link,#004373);text-align:left;
  }
  .mhp-flag{
    width:26px;height:18px;object-fit:cover;border-radius:2px;display:block;
    box-shadow:inset 0 0 0 1px rgba(27,58,91,.12);
  }
  .mhp-lang-name{justify-self:start}
  /* La marca ocupa siempre su columna, visible o no, para que todas
     las filas midan igual y los nombres arranquen en la misma X. */
  .mhp-lang-option::after{
    content:"✓";justify-self:end;
    font-size:13px;line-height:1;opacity:0;
  }
  .mhp-lang-option.active{color:#4B98D2;font-weight:700}
  .mhp-lang-option.active::after{opacity:1}
  .mhp-lang-option:focus-visible{outline:2px solid var(--o-blue-cta,#3178B4);outline-offset:3px;border-radius:6px}

  /* BETA conserva su tratamiento en el panel. */
  .mhp-nav .beta-tag{font-size:8px;margin-left:2px;position:relative;top:-2px;color:inherit;opacity:1}
}

/* Movimiento reducido: el panel aparece sin desplazamiento. */
@media (prefers-reduced-motion:reduce){
  .mhp{transition:opacity .01ms linear;transform:none}
  .mhp.open{transform:none}
  .burger span{transition:none}
}

/* ---- Mapa bajo consentimiento ----
   Ocupa exactamente el hueco que ocupaba el iframe, para que la maqueta de
   la pagina de contacto no se mueva. Al pulsar, el iframe sustituye al
   marcador dentro del mismo contenedor. */
.map-consent{display:flex;align-items:center;justify-content:center}
.map-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:28px 24px;text-align:center;max-width:420px;
}
.map-placeholder .map-address{
  margin:0;font-family:'Manrope',sans-serif;font-size:.95rem;font-weight:600;
  color:var(--blue-ink);line-height:1.5;
}
.map-placeholder .map-note{
  margin:0;font-size:.8rem;line-height:1.5;color:var(--muted);max-width:34ch;
}
.map-consent iframe{width:100%;height:100%;border:0;display:block}

/* ============================================================
   Formulario de contacto — trampa anti-bot y estado de envío
   (2026-09-10). Bloque autocontenido: para revertir, borrar
   desde esta cabecera hasta el final del archivo.
   ============================================================ */

/* Trampa: fuera de la pantalla, nunca display:none (los bots que
   ignoran el CSS la rellenan; los lectores de pantalla la saltan
   porque el contenedor es aria-hidden y no es focalizable). */
.v3 .form .hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.v3 .form .form-status {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.v3 .form .form-status.is-busy {
  color: var(--blue-deep);
  background: rgba(20, 92, 158, .07);
  border-color: rgba(20, 92, 158, .18);
}

.v3 .form .form-status.is-ok {
  color: #0f5c3f;
  background: rgba(22, 138, 96, .09);
  border-color: rgba(22, 138, 96, .24);
}

.v3 .form .form-status.is-error {
  color: #7a2718;
  background: rgba(176, 58, 34, .08);
  border-color: rgba(176, 58, 34, .22);
}

/* Botón deshabilitado mientras el envío está en curso. */
.v3 .form button[type="submit"][disabled] {
  opacity: .6;
  cursor: progress;
}

/* ============================================================
   MENÚS DE NAVEGACIÓN — dropdown de idioma y panel móvil
   (2026-09-10). Bloque autocontenido: para revertir, borrar
   desde esta cabecera hasta el final del archivo.
   ============================================================ */

/* ---- Escritorio y tablet: el desplegable de idioma ----
   Antes: 200x232, anclado a la derecha (centro 61px a la izquierda
   del centro de la píldora) y con un "pop" de escala con rebote.
   Ahora: centrado bajo la píldora, más compacto y con una apertura
   vertical corta, sin escala ni rebote. */
.v3 .lang-wrap .lang-menu{
  top:calc(100% + 10px);
  left:50%;
  right:auto;
  min-width:168px;
  padding:5px;
  border-radius:14px;
  transform-origin:top center;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .20s cubic-bezier(.22,.61,.36,1),
             transform .24s cubic-bezier(.22,.61,.36,1),
             visibility 0s linear .20s;       /* se oculta al terminar el fundido */
}
.v3 .lang-wrap .lang-menu.open{
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.v3 .lang-wrap .lang-option{
  gap:.5rem;
  padding:.42rem .6rem;
  font-size:.86rem;
  border-radius:10px;
}
.v3 .lang-wrap .lang-option + .lang-option{margin-top:1px}

@media (prefers-reduced-motion:reduce){
  .v3 .lang-wrap .lang-menu{
    transition:opacity .01ms linear;
    transform:translateX(-50%) translateY(0);
  }
}

/* ---- Móvil: el panel deja de ser una tarjeta flotante ----
   Antes: left/right 10px, margin-top 6px y radio completo, es decir
   una burbuja despegada de la cabecera. Ahora ocupa todo el ancho,
   nace pegado al borde inferior del header y se revela hacia abajo:
   la propia cabecera creciendo, no un bloque que aparece debajo. */
@media (max-width:1149px){

  .mhp{
    left:0;
    right:0;
    margin-top:0;
    border-radius:0 0 var(--radius-v3,16px) var(--radius-v3,16px);
    /* Arriba del todo la cabecera es transparente: el tinte del panel
       arranca en ese mismo valor (--nav-p = 0) y alcanza el vidrio en
       26px. Ya con scroll (--nav-p = 1) es plano y continúa el navbar. */
    background:linear-gradient(180deg,
      rgba(255,255,255, calc(.58 * var(--nav-p, 1))) 0,
      rgba(255,255,255,.58) 26px);
    -webkit-backdrop-filter:blur(16px) saturate(115%);
            backdrop-filter:blur(16px) saturate(115%);
    /* Filete sólo abajo: un anillo completo dibujaría una línea en el
       borde superior y volvería a despegar el panel de la cabecera. */
    box-shadow:
      inset 0 -1px 0 rgba(27,58,91,.10),
      0 10px 24px -18px rgba(31,73,128,.30);
    opacity:1;
    transform:none;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .34s cubic-bezier(.22,.61,.36,1);
  }
  .mhp.open{
    clip-path:inset(0 0 0 0);
  }
  /* El contenido acompaña la revelación con un desplazamiento corto:
     se despliega hacia abajo, no aparece de golpe. */
  .mhp .mhp-nav,
  .mhp .mhp-lang{
    transform:translateY(-12px);
    transition:transform .34s cubic-bezier(.22,.61,.36,1);
  }
  .mhp.open .mhp-nav,
  .mhp.open .mhp-lang{transform:none}

  /* La superficie va a sangre; el contenido respeta el área segura. */
  .mhp-nav,
  .mhp-lang{
    padding:18px calc(26px + env(safe-area-inset-right))
            20px calc(26px + env(safe-area-inset-left));
  }

  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .mhp{background:rgba(255,255,255,.96)}
  }
}

@media (prefers-reduced-motion:reduce){
  .mhp{transition:none}
  .mhp .mhp-nav,
  .mhp .mhp-lang{transition:none;transform:none}
}

/* ===================================================================
   Hero — origen responsive del vídeo y control de sonido
   -------------------------------------------------------------------
   Dos piezas nuevas y nada más:
   1. Por debajo de 900px el hero del Home reproduce la toma vertical, y
      el fotograma de reserva (el que se ve con movimiento reducido y
      mientras el vídeo no ha pintado) tiene que ser el de esa misma
      toma, o habría un salto de encuadre.
   2. Un botón de sonido, porque estos vídeos sí llevan pista de audio.
      Arranca siempre silenciado: es la condición del autoplay fiable.
   =================================================================== */
@media (max-width:900px){
  .v3 .hero::before{
    background:url('../img/hero-home-mobile-v1.jpg') center 35%/cover no-repeat,
               linear-gradient(160deg,#cfe3f7,#eaf3fd);
  }
  /* Products no tiene toma vertical: sigue con la apaisada recortada. */
  .v3 .hero-products::before{
    background:url('../img/hero-products-v1.jpg') center 45%/cover no-repeat,
               linear-gradient(160deg,#dbe7f2,#f0f5fa);
  }
}

/* ---- Botón de sonido ---- */
/* El círculo visible mide 36px; el objetivo táctil, 48px. Se separan a
   propósito: el dedo necesita más superficie de la que el diseño quiere
   mostrar. Vive en la esquina inferior derecha del hero, lejos del copy
   centrado, por debajo de la cabecera y por encima del velo. */
/* El botón cuelga del CTA, no del borde inferior del hero: se coloca
   con las mismas variables que usa la cabecera —ancho máximo y relleno
   horizontal—, así que sigue al CTA («Get a Quote») sin fijar un solo
   breakpoint. Un poco por debajo y un poco hacia dentro: la diagonal.
   Se mide contra el 100% del hero y no contra 100vw para que la barra de
   desplazamiento no lo descoloque. */
.v3 .hero-sound{
  position:absolute; z-index:3;
  top:calc(var(--o-header-h) + clamp(26px, 3.4vw, 52px));
  right:calc(max(0px, (100% - var(--o-maxw-header)) / 2)
             + var(--o-pad-header)
             + clamp(6px, 2.4vw, 34px)
             + env(safe-area-inset-right, 0px));
  bottom:auto;
  /* 44x44 es el mínimo táctil recomendado; el círculo visible es más
     pequeño que el área que se puede tocar, a propósito. */
  width:44px; height:44px;
  display:grid; place-items:center;
  margin:0; padding:0; border:0; background:none; color:#fff;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none; appearance:none;
}
.v3 .hero-sound-ico{
  width:31px; height:31px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.13));
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  backdrop-filter:blur(12px) saturate(115%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),
             inset 0 1px 0 rgba(255,255,255,.42),
             0 2px 10px rgba(5,14,24,.22);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.v3 .hero-sound:hover .hero-sound-ico{
  background:linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.20));
}
.v3 .hero-sound:active .hero-sound-ico{ transform:scale(.94) }
.v3 .hero-sound:focus{ outline:0 }
.v3 .hero-sound:focus-visible .hero-sound-ico{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 3px rgba(255,255,255,.85);
}
.v3 .hero-sound svg{ display:block }
/* El icono cuenta el ESTADO ACTUAL: con el vídeo en silencio se ve el
   aspa, y al activarlo pasa a las ondas. */
.v3 .hero-sound .ico-on{ display:none }
.v3 .hero-sound[aria-pressed="true"] .ico-off{ display:none }
.v3 .hero-sound[aria-pressed="true"] .ico-on{ display:block }

@media (max-width:900px){
  /* En vertical la cabecera cambia de estructura (hamburguesa y globo),
     así que el botón no persigue al CTA: se queda arriba a la derecha,
     por debajo del header y muy por encima del titular. */
  .v3 .hero-sound{
    top:calc(var(--o-header-h) + clamp(18px, 4vw, 34px));
    right:calc(10px + env(safe-area-inset-right, 0px));
    bottom:auto;
  }
  .v3 .hero-sound-ico{ width:30px; height:30px }
}

/* Movimiento reducido: el vídeo no se reproduce, así que un control de
   sonido sería una promesa falsa. Desaparece con él. */
@media (prefers-reduced-motion:reduce){
  .v3 .hero-sound{ display:none }
}

/* ===================================================================
   Hero de Products — mismo sistema que el del Home
   -------------------------------------------------------------------
   Reutiliza .hero, .hero-video, .hero::after y .hero-inner tal cual.
   Solo cambian tres cosas, y las tres por razones medidas:
   · El velo es bastante más denso. La toma de planta es MUY clara
     —luminancia relativa media 0,776 frente a 0,178 de la del Home—, y
     con el velo del Home el texto blanco se quedaba en 1,8:1. Es la
     "microvariación por luminancia": mismo color, mismo degradado,
     distinta densidad.
   · El h1 conserva su escala actual: el titular de Products es mucho
     más largo que el del Home y con 75px se desbordaba.
   · El antetítulo pasa a blanco, como el resto del primer plano.
   =================================================================== */
/* Products comparte el sistema; solo cambia la densidad, porque su toma
   es 4,8x más luminosa (0,86 de luminancia relativa detrás del párrafo
   frente a 0,18 en el Home). El desenfoque y la viñeta permiten bajar el
   velo de .85 a .78 en la banda del texto: la planta se ve más que
   antes y el texto sigue por encima de 4,5:1. */
/* El de Products es cristal ahumado NEGRO, no azul. El azul de noche
   funciona sobre un puerto al atardecer, pero sobre una planta de
   proceso teñía de frío las batas, los mandiles y el propio producto.
   Aquí el tinte y la viñeta son negro puro, y el reflejo pasa a blanco
   neutro: oscurece y controla las altas luces sin cambiar el color de
   la escena. Las opacidades son las mismas; el negro es algo más denso
   que el azul marino a igual alfa, así que el texto gana un poco. */
.v3 .hero-products::after{
  background:
    linear-gradient(104deg,
      rgba(255,255,255,.055)   0%,
      rgba(255,255,255,.022)  27%,
      rgba(255,255,255,0)     47%,
      rgba(255,255,255,0)     71%,
      rgba(255,255,255,.034) 100%),
    radial-gradient(125% 88% at 50% 40%,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,.09) 50%,
      rgba(0,0,0,.22) 82%,
      rgba(0,0,0,.34) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.50)   0%,
      rgba(0,0,0,.63)  16%,
      rgba(0,0,0,.70)  32%,
      rgba(0,0,0,.70)  64%,
      rgba(0,0,0,.59)  86%,
      rgba(0,0,0,.50) 100%);
}
/* Y su fondo no se desatura ni se enfría: la planta conserva su color. */
.v3 .hero-products .hero-video,
.v3 .hero-products::before{
  filter:brightness(.97);
}
.v3 .hero-products h1{
  font-size:clamp(2.2rem, 4.5vw, 3.4rem);
  line-height:1.08;
  letter-spacing:-.03em;
}
.v3 .hero-products p{ max-width:620px }
.v3 .hero-products .eyebrow{
  display:block;
  color:rgba(255,255,255,.78);
  margin-bottom:14px;
}

/* La banda superior de Products ya no envuelve al hero —ahora es una
   sección propia, igual que en el Home—, así que deja de compensar la
   altura de la cabecera. Solo le queda el panel de cifras, que se monta
   sobre la costura como el panel de confianza del Home. */
.v3 .products-top-bg{ margin-top:0; padding-top:0 }
/* El solape es deliberadamente corto: solo el borde superior del vidrio
   —sus 28px de relleno, sin texto— pisa el vídeo. Con un solape mayor
   las cifras caían sobre el velo oscuro y el azul marino dejaba de
   leerse; el panel del Home puede permitírselo porque su velo es la
   mitad de denso. */
.v3 .products-top-bg > .seccion-panel{
  padding-top:0; padding-bottom:0;
  margin-top:-18px; position:relative; z-index:2;
}
@media (max-width:900px){
  .v3 .products-top-bg > .seccion-panel{ margin-top:-14px }
}

/* ============================================================
   Cabecera con News: menú de siete entradas (2026-09-22)
   ------------------------------------------------------------
   La séptima entrada no cabía en el tramo estrecho de la rejilla:
   medido sin este bloque, a 1150px el logotipo quedaba 11px fuera en
   EN y el botón 75px fuera en ES; en ES/FR/RU (etiquetas largas) el
   problema llegaba hasta ~1340px. Solo ahí se estrechan las pastillas
   y el hueco lateral. La simetría no cambia: el hueco a cada lado
   sigue siendo el column-gap. Por encima de 1280 (EN/ZH) y 1380
   (ES/FR/RU) la cabecera aprobada queda intacta.
   Para revertir, borrar este bloque.
   ============================================================ */
@media (min-width:1150px) and (max-width:1279px){
  .v3 .nav-links{gap:2px}
  .v3 .nav-links a{padding:0 .68rem}
  .v3 .nav-inner{column-gap:clamp(20px,2.4vw,34px)}
}
@media (min-width:1280px) and (max-width:1379px){
  html:is(:lang(es),:lang(fr),:lang(ru)) .v3 .nav-links{gap:2px}
  html:is(:lang(es),:lang(fr),:lang(ru)) .v3 .nav-links a{padding:0 .68rem}
  html:is(:lang(es),:lang(fr),:lang(ru)) .v3 .nav-inner{column-gap:clamp(20px,2.4vw,34px)}
}
/* "Preguntas frecuentes" es la etiqueta más larga del menú. */
@media (min-width:1150px) and (max-width:1239px){
  html:lang(es) .v3 .nav-links a{padding:0 .45rem}
}

/* Product cards are link targets from News (/products.html#giant-squid…):
   land below the fixed header. No visual change. */
.prod-card-xl[id]{scroll-margin-top:96px}

/* ============================================================
   CABECERA — cápsulas navy mate, sobrias (2026-09-23, owner review final)
   ------------------------------------------------------------
   Enlace activo, idioma y CTA: color SÓLIDO mate, sin transparencia, sin
   degradado, sin brillo ni filete blanco, sin blur. El navy se deriva de
   #1B3A5B (el titular de Home «Three flagship species…», --o-head): mismo
   tono y saturación, menos luminosidad. Igual sobre el hero y al hacer
   scroll: lo que cambia es la cabecera, no las cápsulas. Forma: la cápsula
   original (radio, alto y padding de 67e7d7b), solo cambia el color. El CTA
   se distingue con un filete del mismo tono (+10 % de luminosidad), no
   con más brillo ni con otro peso (que cambiaría su ancho).
   Para revertir, borrar este bloque.
   ============================================================ */
.v3{--pill:#152D47;--pill-line:#21466E;--pill-hover:#1D354E}
.v3 .nav-links a.active,
.v3 .nav.nav-on-light .nav-links a.active,
.v3 .nav.nav-on-dark .nav-links a.active,
.v3 .nav-cta .btn-primary{
  color:#fff;background:var(--pill);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color .2s ease;
}
.v3 .nav-links a.active:hover{background:var(--pill-hover);color:#fff}
.v3 .nav.nav-on-light .nav-links a:not(.active):hover{background:rgba(27,58,91,.08)}
.v3 .nav-cta .btn-primary{
  white-space:nowrap;                           /* nunca dos líneas en la píldora de 38px */
  box-shadow:inset 0 0 0 1px var(--pill-line);
}
.v3 .nav-cta .btn-primary:hover{background:var(--pill-hover);transform:none;box-shadow:inset 0 0 0 1px var(--pill-line)}
@media (min-width:1150px){                     /* en móvil el globo sigue sin cápsula */
  .v3 .nav.nav-on-light .lang-btn,
  .v3 .nav.nav-on-dark .lang-btn{
    color:#fff;background:var(--pill);box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none;
    transition:background-color .2s ease;
  }
  .v3 .nav.nav-on-light .lang-btn .lang-cur,
  .v3 .nav.nav-on-dark .lang-btn .lang-cur{color:#fff;text-shadow:none}
  .v3 .nav.nav-on-light .lang-btn:hover,
  .v3 .nav.nav-on-dark .lang-btn:hover{background:var(--pill-hover)}
}
/* Entre 1150 y 1279 la zona derecha no admite «Obtenir un devis» /
   «Запросить цену» a 13.76px: versión compacta del CTA. */
@media (min-width:1150px) and (max-width:1279px){
  html:is(:lang(fr),:lang(ru)) .v3 .nav-cta .btn-primary{padding:0 14px;font-size:12.5px}
}
.v3 .lang-option:hover{background:rgba(27,58,91,.08)}
.v3 .lang-option.active{background:var(--pill)}
@media (max-width:1149px){
  /* Móvil: el panel sigue claro; solo el acento usa el navy oscuro */
  .mhp-nav a:hover,.mhp-nav a.current,.mhp-lang-option.active{color:var(--pill)}
  .mhp-nav a:focus-visible,.mhp-lang-option:focus-visible{outline-color:var(--pill)}
}
@media (prefers-reduced-motion:reduce){
  .v3 .nav-links a.active,.v3 .nav-cta .btn-primary,.v3 .lang-btn{transition:none}
}