@charset "UTF-8";

/* Flight Support — Shared Styles (ASCII-safe) */
:root{
  /* Brand palette from logo */
  --primary: #0074C8;
  --primary-600: #005DA0;
  --accent: #00ADEE;
  --accent-600: #1091D9;
  --soft: #A9D6F0;

  --neutral-900: #0f172a;
  --neutral-800: #1f2937;
  --neutral-700: #334155;
  --neutral-600: #475569;
  --neutral-500: #64748b;
  --neutral-300: #cbd5e1;
  --neutral-200: #e2e8f0;
  --neutral-100: #f1f5f9;
  --white: #ffffff;
  --black: #000000;

  --radius-xl: 20px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-1: 0 10px 25px rgba(2, 6, 23, 0.08);
  --shadow-2: 0 12px 40px rgba(2, 6, 23, 0.12);
}

/* Base */
*{ box-sizing: border-box; }
.body{ height: 100%; padding-top: 94px;              /* ← este número quita el hueco */
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--neutral-900);
  background: var(--white);
  line-height: 1.6;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; height: auto; display: block; }
.container{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* antes tenías 100/90/etc.; usa estos números */

/* Header */
.header{
  position: fixed;
  top: 0;
  left: 0;               /* ← añade */
  right: 0;              /* ← añade */
  z-index: 50;
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 0;
}
.nav{ display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo{ height: 66px; width: auto; }
.menu{ display: flex; align-items: center; gap: 28px; }
.menu a{ font-weight: 600; color: var(--neutral-700); }
.menu a.active, .menu a:hover{ color: var(--primary); }
.lang-switch{ display: flex; align-items: center; gap: 8px; }
.btn-outline{ border: 1px solid var(--neutral-300); padding: 8px 12px; border-radius: 999px; font-weight: 600; color: var(--neutral-700); background: #ffffff; }
.btn-outline:hover{ border-color: var(--neutral-500); }
.hamburger{ display: none; background: none; border: 0; padding: 8px; border-radius: 10px; }
.mobile-panel{ display: none; border-top: 1px solid var(--neutral-200); padding: 12px 0; }
.mobile-panel a{ display: block; padding: 10px 6px; color: var(--neutral-700); font-weight: 600; }
.mobile-panel a:hover{ color: var(--primary); }

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-600));
  color: var(--white);
  border: 0; padding: 14px 18px; border-radius: 12px; font-weight: 700;
  box-shadow: var(--shadow-2); display: inline-block;
}
.btn-primary:hover{ filter: brightness(1.04); }
.btn-ghost{
  background: rgba(0,0,0,0.04);
  color: var(--neutral-800);
  border: 1px solid var(--neutral-200); padding: 12px 16px; border-radius: 12px; font-weight: 700; display: inline-block;
}
/* Hero */
.hero{ position: relative; margin-top: 0; min-height: 90vh; display: grid; place-items: center; background: var(--black); color: var(--white); overflow: hidden; }
.header + .hero{ margin-top: 0; }

.hero video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.65; }
.hero::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 50% 10%, rgba(0,173,238,0.35), transparent), linear-gradient(to top, rgba(0,93,160,0.75), rgba(0,93,160,0)); }
.hero-content{ position: relative; z-index: 5; text-align: center; padding: 56px 0; }
.eyebrow{ display: inline-block; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 800; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); padding: 8px 12px; border-radius: 999px; }

/* Sections */
.section{ padding: 64px 0; }
.section h1, .section h2{ margin: 0 0 8px; }
.section p.lead{ color: var(--neutral-700); max-width: 100%; }
.grid{ display: grid; gap: 20px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.card{ border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); overflow: hidden; background: var(--white); box-shadow: var(--shadow-1); }
.card .media{ height: 240px; overflow: hidden !important;
position: relative;
background: linear-gradient(180deg, rgba(0,173,238,0.22), rgba(0,93,160,0.16)); display: grid; place-items: center; }
/* La imagen ocupa el cuadro y recorta sobrante */
.card .media img{
  width: 100% !important;
height: auto !important;   /* si tenías height:100%, cámbialo a auto */
display: block;
  object-fit:cover;   /* si tu editor lo acepta, esto es lo ideal */
}
.card h3{ margin: 16px 16px 6px; }
.card p{ margin: 0 16px 18px; color: var(--neutral-700); }

/* Locations */
.locations{ background: linear-gradient(180deg, #f8fafc, #ffffff); }
.pill{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--neutral-100); border: 1px solid var(--neutral-200); font-weight: 600; color: var(--neutral-700); }

/* Contact */
.contact{ background: var(--neutral-100); border-top: 1px solid var(--neutral-200); }
.contact-grid{ display: grid; gap: 24px; grid-template-columns: 1.1fr 0.9fr; }
form{ display: grid; gap: 12px; }
label{ font-weight: 600; }
input, select, textarea{ width: 100%; padding: 12px 14px; border: 1px solid var(--neutral-300); border-radius: 12px; font: inherit; background: #ffffff; }
textarea{ min-height: 120px; resize: vertical; }
.helper{ font-size: 12px; color: var(--neutral-500); }
.form-row{ display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.required:after{ content: " *"; color: #e11d48; }
.notice{ font-size: 12px; color: var(--neutral-500); }

/* Footer */
.footer{ padding: 28px 0; color: var(--neutral-700); border-top: 1px solid var(--neutral-200); }
.footer a{ color: var(--neutral-700); }
.socials{ display: flex; gap: 12px; }

/* Responsive */
@media screen and (max-width: 960px){
  .menu{ display: none; }
  .hamburger{ display: inline-flex; }
  .grid-3{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}
/* Logo responsive sizes (no clamp) */
@media screen and (max-width: 1024px){ .logo{ height: 60px; } }
@media screen and (max-width: 768px){  .logo{ height: 54px; } }
@media screen and (max-width: 480px){  .logo{ height: 48px; } }

/* ===== Header fijo clásico (compat) ===== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; }

@media (max-width:1024px){ body{ padding-top: 82px; } }
@media (max-width:560px){  body{ padding-top: 76px; } }

/* ===== Menú móvil como overlay (no agranda el header) ===== */
@media (max-width: 960px){
  /* Oculto por defecto, SIN afectar el flujo del header */
  .mobile-panel{
    position: fixed;                   /* cuelga de la ventana, no del header */
    left: 0; right: 0;
    /* top se ajusta por JS al alto real del header */
    top: 86px;                         /* valor de respaldo; JS lo corrige */
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 12px 24px rgba(2,6,23,0.08);
    display: none;                     /* cerrado */
    max-height: 60vh;                  /* alto máximo al abrir */
    overflow-y: auto;
    padding: 8px 0;
  }
  /* Al abrir el menú (clase en <body>) */
  .nav-open .mobile-panel { display: block; }
  .mobile-panel a { display:block; padding:12px 16px; }
}

/* (Opcional) Quita cualquier regla previa que cambie display con .open */
.mobile-panel.open { /* sin efecto */ }
/* ===== About: Sub-hero (mitad de la altura del hero) ===== */
.subhero{
  margin-top: 0; 
  position: relative;
  height: 50vh;           /* ~la mitad de 72vh del hero principal */
  min-height: 260px;
  color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid #e2e8f0;
}
.header + .hero{ margin-top: 0; }
.subhero .container{ padding: 0px 20px; }
.subhero h1{ margin: 0 0 8px; font-size: 40px; }
.subhero .sublead{ margin: 0; font-size: 18px; opacity: .95; }
.breadcrumb{ font-size: 12px; margin: 0 0 10px; opacity:.85; }
.breadcrumb a{ color:#fff; text-decoration: underline; }

/* ===== About: Who we are + Snapshot (floats) ===== */
.about-who .container:after{ content:""; display:table; clear:both; }
.about-main{ float:left; width:58%; margin-right:2%;}
.about-main h2{ margin:0 0 8px; color:#0074C8;}
.about-aside{ float:left; width:40%; }
.kpi{ }
.kpi-item{
  border:1px solid #e2e8f0; border-radius:14px; padding:14px 16px; margin:0 0 12px;
  background:#ffffff; box-shadow: 0 10px 25px rgba(2,6,23,0.08);
}

/* ===== About: Mission & Vision ===== */
.mv-row{ font-size:0; }                    /* permite inline-block sin huecos */
.mv-card{
  display:inline-block; vertical-align:top; width:49%; font-size:16px;
  border:1px solid #e2e8f0; border-radius:20px; background:#fff;
  box-shadow:0 10px 25px rgba(2,6,23,0.08); padding:18px 18px 16px; margin:0;
}
.mv-card.mv-right{ margin-left:2%; width:49%; }
.mv-card h3{ margin:0 0 8px; color:#0074C8; }

/* ===== About: Values (6 tarjetas) ===== */
.values h2{ margin-top:0; }
.values-wrap{ font-size:0; }
.value-card{
  display:inline-block; vertical-align:top; width:32%; margin:0 2% 16px 0; font-size:16px;
  border:1px solid #e2e8f0; border-radius:14px; background:#fff; padding:14px 16px;
}
.value-card:nth-child(3n){ margin-right:0; } /* 3 por fila */
.value-card h4{ margin:0 0 6px; color:#0074C8; }

/* ===== Responsive ===== */
@media (max-width:960px){
  .about-main,.about-aside{ float:none; width:100%; margin-right:0; }
  .mv-card, .mv-card.mv-right{ display:block; width:100%; margin:0 0 12px; }
  .value-card{ width:100%; margin-right:0; }
  .subhero{ height: 32vh; min-height: 220px; }
}
.footer .copyright{
  font-size:12px;
  line-height:1.4;
  color:#64748b;   /* opcional: gris suave */
  display:inline-block;
}
@media (max-width:560px){
  .footer .copyright{ font-size:11px; }
}
/* Hero: socials inline, visibles encima del overlay */
.hero-content{ position: relative; z-index: 6; } /* asegura estar al frente */

.hero-socials-inline{
  margin-top: 14px;
  display: inline-block;           /* queda debajo de los botones */
}

.hero-socials-inline a{
  display: inline-block;
  margin-right: 10px;              /* separación (sin usar gap) */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-socials-inline img{
  display: block;
  width: 22px; height: 22px;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transition: none;
}

.hero-socials-inline a:hover img{ opacity: 0.9; }

/* Oculta el bloque vertical anterior solo en el hero (si aún existe) */
.hero .hero-socials{ display: none !important; }

/* Ajuste móvil */
@media (max-width:560px){
  .hero-socials-inline{ margin-top: 12px; }
  .hero-socials-inline a{ margin-right: 8px; }
  .hero-socials-inline img{ width: 20px; height: 20px; }
}
/* ===== Clients carousel (full width, ≤50px alto) ===== */
.clients{ padding: 36px 0 24px; background:#fff; }
.clients h2{ margin:0 0 12px; font-weight:700; }

.clients-marquee{
  width:100%;
  height:120px;                    /* banda total no supera 120px */
  overflow:hidden;
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
  background: linear-gradient(180deg,#f8fafc,#ffffff);
}

.clients-track{
  white-space:nowrap;
  display:inline-block;
  line-height:120px;               /* centra verticalmente sin flex */
  animation: clients-scroll 18s linear infinite;
}

.clients-track img{
  height:70px;                    /* ≤50px total (38px + márgenes) */
  width:auto;
  margin:6px 28px;                /* separa logos (sin gap) */
  vertical-align:middle;
  opacity:0.9;
  filter: grayscale(100%) contrast(1.1) brightness(1.08);
}
.clients-track img:hover{ opacity:1; filter:none; }

@keyframes clients-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* porque duplicamos logos */
}

/* Responsive: mantiene ≤50px */
@media (max-width:960px){
  .clients-track img{ height:34px; margin:6px 22px; }
}
@media (max-width:560px){
  .clients-track img{ height:30px; margin:5px 18px; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .clients-track{ animation:none; }
}
/* Clients carousel: fondo blanco */
.clients{ background:#fff; }
.clients-marquee{
  background:#fff !important;        /* reemplaza el degradado */
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
  box-shadow:none;                   /* opcional: sin sombra para fondo blanco plano */
}
/* --- FIX carrusel de clientes --- */
/* Asegura una sola línea y animación activa */
.clients-track{
  white-space: nowrap;
  display: inline-block;
  animation: clients-scroll 30s linear infinite !important;
  will-change: transform;
  line-height: 120px; /* o el alto que uses en .clients-marquee */
}

/* Cada logo como inline (no bloque), tamaño fijo y sin max-width:100% */
.clients-track img{
  display: inline-block !important;
  width: auto !important;
  height: 70px;               /* <=80px de banda total */
  max-height: 70px;
  margin: 6px 28px;           /* separación horizontal */
  vertical-align: middle;
  opacity: 0.95;
  filter: none;               /* deja a color si tus PNG tienen fondo */
}

/* Si tienes este media query, reduce altitos en móvil */
@media (max-width:560px){
  .clients-track img{ height: 30px; max-height: 30px; margin: 5px 18px; }
}

/* Evita que alguna regla global lo apague */
@media (prefers-reduced-motion: reduce){
  .clients-track{ animation: clients-scroll 18s linear infinite !important; }
}
/* Spacing para la sección de clientes */
.clients h2{
  margin: 0 0 40px !important;   /* más espacio entre Título y carrusel */
}

/* más espacio entre el carrusel y la siguiente sección (contacto) */
.clients{
  padding-top: 84px;             /* deja como está si ya te gusta */
  padding-bottom: 80px;          /* ↑ aumenta el “aire” debajo del carrusel */
}

/* Ajuste en móvil */
@media (max-width:560px){
  .clients h2{ margin-bottom: 16px !important; }
  .clients{ padding-bottom: 28px; }
}
/* Hero pegado abajo (texto, botones e íconos dentro de .hero-content) */
.hero{ display:block; } /* quita centrado por grid si aún quedaba */
.hero-content{
  position:absolute; left:0; right:0;
  bottom:64px;             /* ajusta 40–64 a gusto */
  z-index:6;
  text-align:center; padding:0;
}
@media (max-width:560px){ .hero-content{ bottom:32px; } }
/* 3 columnas en “What we do” (Home) */
.what-we-do .cards{ font-size:0; }
.what-we-do .cards .card{
  display:inline-block; vertical-align:top; font-size:16px;
  width:30%; margin:0 2% 20px 0; /* 32 + 2 + 32 + 2 + 32 = 100 */
}
.what-we-do .cards .card:nth-child(3n){ margin-right:0; }
/* Locations: apilar en móvil (mapa arriba, aeropuertos abajo) */
@media (max-width: 960px){
  .locations .grid{
    display: block !important;          /* anula el grid */
  }
  .locations .grid > div{
    width: 100% !important;
    margin: 0 0 16px 0;                  /* espacio entre tarjetas */
  }
  .locations .grid > div:last-child{ margin-bottom: 0; }
  .locations .grid img{ display:block; width:100%; height:auto; }

  /* por si queda activo el inline "grid-template-columns" */
  .locations .grid{ grid-template-columns: 1fr !important; }
}
/* Carrusel: pista continua y sin “brinco” */
.clients-track{
  display: inline-block;
  white-space: nowrap;
  line-height: 120px;                    /* coincide con .clients-marquee */
  will-change: transform;
  animation: clients-scroll 18s linear infinite !important;  /* 30s o el que prefieras */
}

/* Logos: margen SOLO a la derecha (sin margen izquierdo) */
.clients-track img{
  display: inline-block !important;
  width: auto !important;
  height: 70px; max-height: 70px;
  margin: 0 28px 0 0 !important;         /* ← clave: solo margen derecho */
  vertical-align: middle;
  opacity: 0.95; filter: none;
}

/* El último logo de la tira duplicada sin margen extra al final */
.clients-track img:last-child{ margin-right: 0 !important; }

/* Animación: recorre justo la mitad (porque hay 2 copias) */
@keyframes clients-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Clientes: loop continuo cross-browser (Safari/Edge) */
#clients .clients-track{
  display:inline-block;
  white-space:nowrap;
  line-height:120px;                 /* tu alto actual */
  will-change:transform;
  animation: clientsScrollX 20s linear infinite;
  -webkit-animation: clientsScrollX 20s linear infinite;
}

/* margen SOLO a la derecha; evita descuadres en el empalme */
#clients .clients-track img{
  display:inline-block !important;
  width:auto !important;
  height:70px; max-height:70px;
  margin:0 28px 0 0 !important;     /* solo derecha */
  vertical-align:middle;
}
#clients .clients-track img:last-child{ margin-right:0 !important; }

/* Keyframes (con prefijo) recorriendo 1/3 porque triplicamos la tira */
@-webkit-keyframes clientsScrollX{
  0%   { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  100% { -webkit-transform: translate3d(-33.3333%,0,0); transform: translate3d(-33.3333%,0,0); }
}
@keyframes clientsScrollX{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-33.3333%,0,0); }
}

/* móvil: más compacto para que quepan más logos en pantalla */
@media (max-width:560px){
  #clients .clients-track img{ height:30px; max-height:30px; margin:0 18px 0 0 !important; }
}
html, body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size-adjust: 0.525; /* aproxima x-height de Inter → menos “brinco” */
}
/* === HERO full-bleed + contenido abajo, sin solaparse con el header === */

/* espacio para el header fijo (ajusta si tu header es más alto) */
body{ padding-top:80px !important; overflow-x:hidden; }

/* ancho total de viewport (evita bandas negras) */
.hero{
  position:relative;
  margin:0;
  padding:0;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  min-height:78vh;              /* tu altura habitual */
  background:#0a0f14;           /* color de fondo por si el video tarda */
  border:0;
}
@supports (width:100dvw){
  .hero{ width:100dvw; margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); }
}

/* video a cobertura total y sin líneas de subpíxel */
.hero video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block; border:0; outline:0;
}

/* contenido del hero fijado ABAJO, por delante del video */
.hero-content{
  position:absolute; left:0; right:0;
  bottom:48px;                   /* baja/sube a gusto */
  z-index:6;                     /* por delante del video */
  text-align:center; padding:0;
}
/* móvil un poco más arriba para aire */
@media (max-width:560px){
  .hero-content{ bottom:32px; }
}
.nav-right{ display:flex; align-items:center; gap:12px; }

.lang-btn{
  font-weight:600;
  color: var(--neutral-700);
  text-decoration:none;
  padding:8px 0;
}
.lang-btn:hover{ color: var(--primary); }

.login-link{
  font-weight:600;
  color: var(--neutral-700);
  text-decoration:none;
  padding:8px 0;
}
.login-link:hover{ color: var(--primary); }
/* Idioma con borde (como antes) */
.lang-btn{
  display:inline-block;
  font-weight:600;
  color: var(--neutral-700);
  text-decoration:none;
  padding:8px 12px;
  border:1px solid var(--neutral-300);
  border-radius:999px;
  background:#fff;
}
.lang-btn:hover{ border-color: var(--neutral-500); color: var(--primary); }

/* Más separación entre Idioma y Login */
.login-link{
  display:inline-block;
  font-weight:600;
  color: var(--neutral-700);
  text-decoration:none;
  padding:8px 0;
  margin-left:30px;   /* ↑ ajusta 20–32px según prefieras */
}
.login-link:hover{ color: var(--primary); }
/* ABOUT — Mission & Vision */
.about-mv .mv-row{ font-size:0; } /* elimina espacios entre inline-blocks */
.about-mv .mv-card{
  display:inline-block; vertical-align:top; font-size:16px;
  width:48%; margin:0 4% 20px 0;           /* 48 + 4 + 48 = 100 */
}
.about-mv .mv-card.mv-right{ margin-right:0; }

/* Responsivo */
@media (max-width:960px){
  .about-mv .mv-card{ width:100%; margin:0 0 16px 0; }
}
/* ABOUT — Values grid */
.values .values-wrap{ font-size:0; }
.values .value-card{
  display:inline-block; vertical-align:top; font-size:16px;
  width:32%; margin:0 2% 18px 0;            /* 32 + 2 × 2 + 32 + 2 + 32 = 100 */
  border:1px solid var(--neutral-200); border-radius:12px; padding:16px; background:#fff;
}
.values .value-card:nth-child(3n){ margin-right:0; }

@media (max-width:960px){
  .values .value-card{ width:48%; margin:0 4% 16px 0; }
  .values .value-card:nth-child(2n){ margin-right:0; }
}
@media (max-width:560px){
  .values .value-card{ width:100%; margin:0 0 12px 0; }
}
/* ABOUT — Sub-hero a todo el ancho y sin bandas laterales */
.subhero{
  position:relative;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  min-height:40vh;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  overflow:hidden; border:0;
}
/* Contenido visible sobre el overlay */
.subhero .container{ position:relative; z-index:2; }
.subhero > span{ display:block; } /* evita líneas por subpíxel en el overlay */
/* ===== ABOUT — Mission & Vision a 2 columnas (floats) ===== */
.about-mv .mv-row::after{ content:""; display:table; clear:both; }

.about-mv .mv-card{
  float:left;
  width:48% !important;          /* 2 columnas */
  margin:0 4% 20px 0 !important; /* separa columnas */
  box-sizing:border-box;
}
.about-mv .mv-card.mv-right{ margin-right:0 !important; }

@media (max-width:960px){
  .about-mv .mv-card{
    float:none; width:100% !important; margin:0 0 16px 0 !important;
  }
}

/* ===== ABOUT — Values en 3/2/1 columnas (floats) ===== */
.values .values-wrap::after{ content:""; display:table; clear:both; }

.values .value-card{
  float:left;
  width:32% !important;          /* 3 por fila */
  margin:0 2% 18px 0 !important; /* 32 + 2 + 32 + 2 + 32 = 100 */
  box-sizing:border-box;
}
.values .value-card:nth-child(3n){ margin-right:0 !important; }

@media (max-width:960px){
  .values .value-card{
    width:48% !important;        /* 2 por fila */
    margin:0 4% 16px 0 !important;
  }
  .values .value-card:nth-child(2n){ margin-right:0 !important; }
}

@media (max-width:560px){
  .values .value-card{
    float:none; width:100% !important; margin:0 0 12px 0 !important;
  }
}
/* === ABOUT — Sub-hero responsive (full-bleed y cover en móvil) === */
.subhero{
  position:relative;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background-size:cover;           /* que siempre “llene” */
  background-position:center;      /* centrado en todos los devices */
  background-repeat:no-repeat;
  min-height:44vh;                 /* alto base en desktop */
  overflow:hidden;
  border:0;
}
.subhero > span{ display:block; position:absolute; inset:0; } /* overlay correcto */
.subhero .container{ position:relative; z-index:2; }

/* Tablet */
@media (max-width:960px){
  .subhero{ min-height:48vh; }
}

/* Móvil */
@media (max-width:560px){
  .subhero{ min-height:52vh; }     /* más alto para 16:9 en pantallas altas */
  .subhero .container{ padding:56px 16px 32px; text-align:center; }
  .subhero h1{ font-size:28px; line-height:1.15; margin-bottom:8px; }
  .subhero .sublead{ font-size:14px; line-height:1.4; }
}
/* ===== Marquee de doble pista (sin cortes) ===== */
.clients-marquee{
  position: relative;
  overflow: hidden;
  height: 120px;                /* tu banda */
  padding: 0;
}

.clients-track{
  display:inline-block;
  white-space:nowrap;
  line-height:120px;      /* centra vertical sin flex */
  will-change: transform;
  animation: clientsScroll 45s linear infinite;
  -webkit-animation: clientsScroll 45s linear infinite;
}
/* La segunda tira comienza a la derecha de la primera */
.clients-track.t2{ left: 100%; }

/* Logos: margen SOLO a la derecha para no desalinear el loop */
.clients-track img{
  display:inline-block;
  height:70px; max-height:70px; width:auto;
  margin:0 24px 0 0;      /* solo derecha */
  vertical-align:middle;
}

/* Recorremos exactamente la MITAD porque la pista está duplicada */
@-webkit-keyframes clientsScroll{
  0%   { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  100% { -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); }
}
@keyframes clientsScroll{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

/* Móvil: logos más compactos para que fluyan */
@media (max-width:560px){
  .clients-track img{ height:30px; max-height:30px; margin:0 18px 0 0; }
  .clients-track{ animation-duration:38s; -webkit-animation-duration:38s; }
}
/* Header compacto y estable */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; } /* ← ajusta 8–12px */
.logo{ height:66px; width:auto; }          /* tu altura estándar de logo */
.menu a, .lang-btn, .login-link{           /* que nada “engorde” el header */
  padding-top:6px; padding-bottom:6px; line-height:1;
}
.hamburger{ padding:6px; }                 /* idem botón hamburguesa */
/* Compensación mínima para el header fijo */
body{ padding-top: 70px !important; }      /* = altura real del header (mídela si hace falta) */

/* Baja un poco extra el hero sin alterar el header */
.header + .hero{ margin-top: 20px; }       /* ← ajusta 8–20px a gusto */
@media (max-width:560px){
  body{ padding-top: 86px !important; }    /* móvil suele ser un pelín menor */
  .header + .hero{ margin-top: 8px; }
}