/* =====================================================================
   CARGO PLUS — ESTILOS
   Manual de identidad: rojo #AC1519 · rojo oscuro #740C12 · gris #808085
   Tipografía: Archivo (titulares) · Open Sans (cuerpo)
   ===================================================================== */

/* =====================================================================
   VARIABLES CORPORATIVAS
   ===================================================================== */
:root {
  /* Paleta de marca (Manual de Identidad Cargo Plus) */
  --color-rojo:          #AC1519;  /* P 49-16 C  — primario */
  --color-rojo-oscuro:   #740C12;  /* P 56-16 C  — hover y estados activos */
  --color-gris:          #808085;  /* 10389 C    — acento secundario */
  --color-azul:          #02425E;  /* 485 C      — acento profundo */
  --color-negro:         #000000;

  /* Tonos de interfaz (tema claro industrial premium) */
  --fondo-principal:     #f1f2f6;  /* gris frío principal */
  --fondo-secundario:    #e8eaef;  /* secciones alternas y tarjetas */
  --fondo-terciario:     #dfe1e8;  /* tarjetas en hover y paneles profundos */
  --color-linea:         #ced1da;  /* bordes y separadores */
  --color-texto:         #0d0f14;  /* texto principal */
  --color-texto-suave:   #5a6275;  /* texto secundario y etiquetas */

  /* Utilitarios de layout */
  --ancho-maximo:        1240px;
  --radio-borde:         4px;
}

/* =====================================================================
   RESET Y BASE
   ===================================================================== */
* {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Al saltar desde el menú, la sección arranca justo debajo del header
   sticky: 79px = 78px de alto de la barra + 1px de su borde inferior.
   Ojo: no añadir además scroll-padding-top en html — se suman. */
section[id] {
  scroll-margin-top: 79px;
}

body {
  font-family:             'Open Sans', Arial, sans-serif;
  background:              var(--fondo-principal);
  color:                   var(--color-texto);
  line-height:             1.65;
  overflow-x:              hidden;
  -webkit-font-smoothing:  antialiased;
}

h1, h2, h3, h4 {
  font-family:    'Archivo', sans-serif;
  font-weight:    800;
  line-height:    1.08;
  letter-spacing: -0.02em;
}

/* =====================================================================
   TIPOGRAFÍA DE TEXTO CORRIDO
   Reglas transversales de legibilidad. No tocan tamaños ni colores:
   solo cómo se reparten las líneas. Los navegadores que no soporten
   alguna propiedad la ignoran sin romper nada.
   ===================================================================== */

/* Reparte las líneas evitando que la última quede con una sola
   palabra colgando (viudas) */
p {
  text-wrap: pretty;
}

/* Los titulares equilibran sus líneas en vez de dejar una suelta */
h1, h2, h3, h4,
.servicio-gancho,
.zona-franca-subtitulo,
.proyecto-tab b,
.zf-beneficio-boton h4 {
  text-wrap: balance;
}

/* Ninguna palabra larga debe desbordar su columna */
p, li, h1, h2, h3, h4 {
  overflow-wrap: break-word;
}

/* Bloques anchos: texto justificado con partición de palabras.
   El justificado sin guiones abre ríos de espacio entre palabras,
   por eso las dos propiedades van siempre juntas. El idioma sale
   del atributo lang del <html>, que app.js cambia con el selector. */
.zona-franca-descripcion p,
.faq-respuesta p,
.proyecto-detalle p {
  text-align:            justify;
  text-align-last:       start;
  -webkit-hyphens:       auto;
  hyphens:               auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Los bloques centrados no se justifican: se equilibran, para que las
   dos o tres líneas queden de largo parecido bajo el titular */
.cta-final p,
.certificacion p {
  text-wrap: balance;
}

a {
  color:           inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display:   block;
}

/* =====================================================================
   SALTO AL CONTENIDO
   Primer elemento enfocable de la página: permite a quien navega con
   teclado saltarse el menú. Solo se ve al recibir el foco.
   ===================================================================== */
.salto-contenido {
  position:      absolute;
  left:          -9999px;
  top:           0;
  z-index:       100;
  background:    var(--color-rojo);
  color:         #ffffff;
  font-family:   'Archivo', sans-serif;
  font-weight:   700;
  font-size:     14px;
  padding:       12px 20px;
  border-radius: 0 0 var(--radio-borde) 0;
}

.salto-contenido:focus {
  left: 0;
}

/* =====================================================================
   CONTENEDOR PRINCIPAL
   ===================================================================== */
.contenedor {
  max-width: var(--ancho-maximo);
  margin:    0 auto;
  padding:   0 28px;
}

/* =====================================================================
   BARRA DE ANUNCIO SUPERIOR
   ===================================================================== */
.topbar {
  background:     var(--color-rojo-oscuro);
  font-size:      13px;
  letter-spacing: 0.4px;
  text-align:     center;
  padding:        7px 16px;
  color:          #f3dcdd;
}

.topbar b {
  color: #fff;
}

/* =====================================================================
   HEADER Y NAVEGACIÓN
   ===================================================================== */
header {
  position:        sticky;
  top:             0;
  z-index:         60;
  background:      rgba(241, 242, 246, 0.90);
  backdrop-filter: blur(16px);
  border-bottom:   1px solid var(--color-linea);
  transition:      background 0.3s;
}

.nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          78px;
}

.nav .logo {
  height:  60px;
  width:   auto;
  display: block;
}

/* Cinco enlaces más el botón. Si se agrega otro habrá que volver a
   comprimir tamaño y espaciado, o adelantar el menú de hamburguesa. */
.menu-principal {
  display:     flex;
  gap:         22px;
  align-items: center;
}

.menu-principal a {
  font-size:      14px;
  font-weight:    600;
  color:          var(--color-texto-suave);
  transition:     color 0.2s;
  position:       relative;
  white-space:    nowrap;
}

.menu-principal a::after {
  content:    '';
  position:   absolute;
  left:       0;
  bottom:     -6px;
  width:      0;
  height:     2px;
  background: var(--color-rojo);
  transition: width 0.25s;
}

.menu-principal a:hover,
.menu-principal a.activo {
  color: var(--color-texto);
}

.menu-principal a:hover::after,
.menu-principal a.activo::after {
  width: 100%;
}

/* La sección activa se marca en rojo de marca para diferenciarla del hover */
.menu-principal a.activo {
  color: var(--color-rojo);
}

.menu-principal a.btn {
  color: #fff;
}

.menu-principal a.btn:hover {
  color: #fff;
}

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            9px;
  background:     var(--color-rojo);
  color:          #fff;
  font-weight:    700;
  font-family:    'Archivo', sans-serif;
  padding:        13px 24px;
  border-radius:  var(--radio-borde);
  font-size:      14.5px;
  border:         none;
  cursor:         pointer;
  transition:     background 0.2s, transform 0.15s;
  letter-spacing: 0.2px;
}

.btn:hover {
  background: var(--color-rojo-oscuro);
  transform:  translateY(-2px);
}

.btn.ghost {
  background: transparent;
  border:     1.5px solid var(--color-linea);
  color:      var(--color-texto);
}

.btn.ghost:hover {
  border-color: var(--color-rojo);
  background:   transparent;
}

.boton-menu {
  display:         none;
  background:      none;
  border:          none;
  color:           var(--color-texto);
  font-size:       26px;
  cursor:          pointer;
  /* Área táctil de 44px: el glifo solo daba unos 26 de ancho, que en
     el móvil obliga a apuntar. */
  width:           44px;
  height:          44px;
  padding:         0;
  line-height:     1;
  align-items:     center;
  justify-content: center;
  border-radius:   8px;
  transition:      background 0.2s;
}

.boton-menu:hover,
.boton-menu[aria-expanded="true"] {
  background: rgba(172, 21, 25, 0.10);
  color:      var(--color-rojo);
}

/* =====================================================================
   SECCIÓN HERO
   ===================================================================== */
.hero {
  position:   relative;
  padding:    60px 0 50px;
  overflow:   hidden;
  min-height: 62vh;
  display:    flex;
  align-items: center;
}

/* Video de fondo */
.hero-video-fondo {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
  filter:     brightness(0.55) saturate(0.7);
}

/* Capa de color encima del video */
.hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    1;
  background:
    rgba(255, 255, 255, 0.45);
}

.hero .contenedor {
  position: relative;
  z-index:  2;
  width:    100%;
}


.hero-cuadricula {
  display:               grid;
  grid-template-columns: minmax(0, 760px);
  align-items:           center;
}

.kicker {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-family:    'Archivo', sans-serif;
  font-weight:    700;
  font-size:      12.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--color-rojo);
  margin-bottom:  22px;
}

.kicker::before {
  content:    '';
  width:      34px;
  height:     2px;
  background: var(--color-rojo);
}

.hero h1 {
  font-size:     clamp(34px, 5vw, 62px);
  font-weight:   900;
  margin-bottom: 20px;
}

.hero h1 span {
  color: #ffffff;
}

.hero p.descripcion-hero {
  font-size:     18px;
  color:         #ffffff;
  max-width:     540px;
  margin-bottom: 32px;
}

.hero-cta {
  display:       flex;
  gap:           14px;
  flex-wrap:     wrap;
  margin-bottom: 38px;
}

.hero-stats {
  display:   flex;
  gap:       38px;
  flex-wrap: wrap;
}

.estadistica b {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size:   30px;
  color:       var(--color-texto);
  display:     block;
  line-height: 1;
}

.estadistica small {
  font-size:      12.5px;
  color:          var(--color-texto-suave);
  letter-spacing: 0.5px;
}

.hero .estadistica b {
  color: #0d0f14;
}

.hero .estadistica small {
  color: #ffffff;
}

/* =====================================================================
   TICKER (banda de texto continuo)
   ===================================================================== */
.ticker {
  background:  var(--color-rojo);
  overflow:    hidden;
  white-space: nowrap;
  padding:     13px 0;
  position:    relative;
}

.ticker-pista {
  display:   inline-flex;
  gap:       54px;
  animation: desplazar-ticker 28s linear infinite;
}

.ticker-pista span {
  font-family:    'Archivo', sans-serif;
  font-weight:    700;
  font-size:      14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          #fff;
  display:        inline-flex;
  align-items:    center;
  gap:            54px;
}

.ticker-pista span::after {
  content:   '◆';
  color:     rgba(255, 255, 255, 0.5);
  font-size: 9px;
}

@keyframes desplazar-ticker {
  to { transform: translateX(-50%); }
}

/* =====================================================================
   SECCIONES GENÉRICAS
   ===================================================================== */
section.seccion-bloque {
  padding: 56px 0;
}

.encabezado-seccion {
  max-width:     680px;
  margin-bottom: 40px;
}

.encabezado-seccion .kicker {
  margin-bottom: 16px;
}

.encabezado-seccion h2 {
  font-size:     clamp(28px, 3.6vw, 44px);
  margin-bottom: 16px;
}

.encabezado-seccion p {
  color:       var(--color-texto-suave);
  font-size:   16.5px;
  line-height: 1.7;
  /* La línea deja de pasarse de largo: por encima de ~70 caracteres
     el ojo pierde el renglón al volver al margen izquierdo */
  max-width:   62ch;
}

/* =====================================================================
   SERVICIOS
   ===================================================================== */
.grid-servicios {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--color-linea);
  border:                1px solid var(--color-linea);
  border-radius:         8px;
  overflow:              hidden;
}

.tarjeta-servicio {
  background: var(--fondo-secundario);
  padding:    38px 32px;
  position:   relative;
  transition: background 0.3s;
  overflow:   hidden;
}

.tarjeta-servicio::before {
  content:    '';
  position:   absolute;
  left:       0;
  bottom:     0;
  width:      0;
  height:     3px;
  background: var(--color-rojo);
  transition: width 0.35s;
}

.tarjeta-servicio:hover {
  background: var(--fondo-terciario);
}

.tarjeta-servicio:hover::before {
  width: 100%;
}

/* Ícono vectorial — solo lo usa la tarjeta de Proyectos Especiales */
.icono-servicio {
  width:           50px;
  height:          50px;
  border-radius:   6px;
  background:      rgba(172, 21, 25, 0.10);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   20px;
  color:           var(--color-rojo);
}

.icono-servicio svg {
  width:  26px;
  height: 26px;
}

/* Fotografía recortada en círculo, en el lugar del antiguo ícono.
   Los archivos img/servicio-*-icono.jpg ya vienen recortados en
   cuadrado a 400px: así el navegador reduce poco y se ven nítidos
   también en pantallas de alta densidad. */
.servicio-foto {
  width:         84px;
  height:        84px;
  border-radius: 50%;
  overflow:      hidden;
  margin-bottom: 20px;
  background:    var(--fondo-terciario);
  border:        2px solid rgba(172, 21, 25, 0.35);
  transition:    border-color 0.25s, transform 0.25s;
}

.servicio-foto img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.tarjeta-servicio:hover .servicio-foto {
  border-color: var(--color-rojo);
  transform:    scale(1.05);
}

.tarjeta-servicio h3 {
  font-size:     20px;
  margin-bottom: 10px;
  color:         var(--color-texto);
}

.tarjeta-servicio p {
  font-size: 14.5px;
  color:     var(--color-texto-suave);
}

/* Frase gancho del servicio */
.servicio-gancho {
  font-family:   'Archivo', sans-serif;
  font-weight:   700;
  font-size:     15px !important;
  color:         var(--color-texto) !important;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------------
   TARJETAS DESTACADAS
   Zona Franca ZOFIVA y Proyectos Especiales ocupan más espacio en la
   cuadrícula y tienen tratamiento visual propio.
   --------------------------------------------------------------------- */
.tarjeta-servicio.destacada {
  padding: 0;
}

.tarjeta-servicio.destacada .servicio-cuerpo {
  padding: 38px 32px;
}

.tarjeta-servicio.destacada h3 {
  font-size: 23px;
}

/* --- Destacada: bodega en zona franca (con fotografía) --- */
.destacada-zofiva {
  grid-column: span 2;
  display:     grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.servicio-media {
  position:   relative;
  min-height: 260px;
  overflow:   hidden;
  background: var(--fondo-terciario);
}

.servicio-media img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.destacada-zofiva:hover .servicio-media img {
  transform: scale(1.04);
}

.servicio-media::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, rgba(13, 15, 20, 0) 45%, rgba(13, 15, 20, 0.78) 100%);
}

.servicio-distintivo {
  position:       absolute;
  left:           18px;
  bottom:         18px;
  z-index:        2;
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     var(--color-rojo);
  color:          #fff;
  font-family:    'Archivo', sans-serif;
  font-weight:    700;
  font-size:      12.5px;
  letter-spacing: 0.4px;
  padding:        8px 14px;
  border-radius:  20px;
}

.servicio-cta {
  display:        inline-block;
  margin-top:     18px;
  font-family:    'Archivo', sans-serif;
  font-weight:    700;
  font-size:      14px;
  color:          var(--color-rojo);
  transition:     transform 0.25s;
}

.servicio-cta:hover {
  transform: translateX(4px);
}

/* --- Destacada: proyectos especiales (banda a todo el ancho) --- */
.destacada-proyectos {
  grid-column: span 3;
  display:     grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  background:  var(--fondo-terciario);
  position:    relative;
}

/* Sobre el fondo más oscuro de la banda, el ícono va en rojo pleno */
.destacada-proyectos .icono-servicio {
  background: var(--color-rojo);
  color:      #fff;
}

.destacada-proyectos::after {
  content:    '';
  position:   absolute;
  inset:      0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 12%, rgba(172, 21, 25, 0.13), transparent 55%);
}

.servicio-capacidades {
  padding:     38px 32px;
  border-left: 1px solid var(--color-linea);
  position:    relative;
  z-index:     1;
}

.servicio-capacidades ul {
  list-style:    none;
  margin-bottom: 22px;
}

.servicio-capacidades li {
  position:      relative;
  padding-left:  22px;
  padding-block: 7px;
  font-size:     14.5px;
  color:         var(--color-texto);
  border-bottom: 1px solid var(--color-linea);
}

.servicio-capacidades li:last-child {
  border-bottom: none;
}

/* Acciones de la tarjeta de proyectos especiales */
.servicio-acciones {
  display:     flex;
  align-items: center;
  gap:         12px 24px;
  flex-wrap:   wrap;
}

/* Botón principal: baja a la sección de casos reales */
.btn-ver-proyectos {
  position:       relative;
  display:        inline-flex;
  align-items:    center;
  gap:            12px;
  padding:        13px 16px 13px 22px;
  border-radius:  var(--radio-borde);
  background:     linear-gradient(135deg, #c31c21 0%, var(--color-rojo) 48%, var(--color-rojo-oscuro) 100%);
  color:          #ffffff;
  font-family:    'Archivo', sans-serif;
  font-weight:    700;
  font-size:      14.5px;
  letter-spacing: 0.2px;
  overflow:       hidden;
  box-shadow:     0 10px 24px -10px rgba(172, 21, 25, 0.85);
  transition:     transform 0.25s, box-shadow 0.25s;
}

/* Destello que cruza el botón al pasar el cursor */
.btn-ver-proyectos::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -70%;
  width:      45%;
  height:     100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform:  skewX(-18deg);
  transition: left 0.6s ease;
}

.btn-ver-proyectos:hover {
  transform:  translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(172, 21, 25, 0.95);
}

.btn-ver-proyectos:hover::before {
  left: 120%;
}

.btn-ver-proyectos:focus-visible {
  outline:        2px solid var(--color-rojo);
  outline-offset: 3px;
}

.btn-ver-proyectos-flecha {
  flex:            none;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.18);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  transition:      transform 0.25s, background 0.25s;
}

.btn-ver-proyectos-flecha svg {
  width:  14px;
  height: 14px;
}

.btn-ver-proyectos:hover .btn-ver-proyectos-flecha {
  transform:  translateX(3px);
  background: rgba(255, 255, 255, 0.32);
}

.servicio-capacidades li::before {
  content:     '';
  position:    absolute;
  left:        0;
  top:         50%;
  width:       9px;
  height:      9px;
  margin-top:  -4px;
  border:      2px solid var(--color-rojo);
  border-radius: 50%;
}

/* "Conocer más" es un enlace real a WhatsApp: tiene que verse siempre.
   Antes estaba en opacity 0 y solo aparecía al pasar el cursor, algo
   que en móvil —donde no hay hover— lo dejaba invisible pero pulsable. */
.enlace-mas {
  display:     inline-block;
  margin-top:  16px;
  font-size:   13px;
  font-weight: 700;
  color:       var(--color-rojo);
  opacity:     0.8;
  transition:  opacity 0.3s, transform 0.3s;
}

.tarjeta-servicio:hover .enlace-mas,
.enlace-mas:hover {
  opacity:   1;
  transform: translateX(4px);
}

.enlace-mas:focus-visible {
  outline:        2px solid var(--color-rojo);
  outline-offset: 3px;
  opacity:        1;
}

/* =====================================================================
   DIFERENCIADORES
   ===================================================================== */
.seccion-diferenciadores {
  background: #ffffff;
}

.grid-diferenciadores {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   30px;
}

.diferenciador {
  padding-top: 24px;
  border-top:  2px solid var(--color-rojo);
}

.diferenciador-numero {
  font-family:    'Archivo', sans-serif;
  font-weight:    900;
  font-size:      13px;
  color:          var(--color-rojo);
  letter-spacing: 1px;
  margin-bottom:  14px;
}

.diferenciador h3 {
  font-size:     19px;
  color:         var(--color-texto);
  margin-bottom: 8px;
}

.diferenciador p {
  font-size: 14px;
  color:     var(--color-texto-suave);
}

/* =====================================================================
   CALCULADORA DE ESTIMADOS
   ===================================================================== */
/* =====================================================================
   PROCESO — Cómo trabajamos
   ===================================================================== */
/* =====================================================================
   PROYECTOS ESPECIALES — casos reales en pestañas
   Única sección en fondo oscuro: marca el bloque como escaparate y,
   de paso, rompe la cadena de alternancia blanco/gris sin desajustarla.
   ===================================================================== */
.seccion-proyectos {
  background: #0d0f14;
  color:      #ffffff;
}

.seccion-proyectos .encabezado-seccion h2 {
  color: #ffffff;
}

.seccion-proyectos .encabezado-seccion p {
  color: rgba(255, 255, 255, 0.66);
}

.seccion-proyectos .kicker {
  color: #ffffff;
}

.seccion-proyectos .kicker::before {
  background: var(--color-rojo);
}

/* --- Pestañas --- */
.proyectos-tabs {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   1px;
  background:            rgba(255, 255, 255, 0.12);
  border:                1px solid rgba(255, 255, 255, 0.12);
  border-radius:         6px;
  overflow:              hidden;
  margin-bottom:         34px;
}

.proyecto-tab {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  align-items:    flex-start;
  text-align:     left;
  background:     #14171e;
  border:         none;
  cursor:         pointer;
  padding:        16px 18px;
  transition:     background 0.25s, box-shadow 0.25s;
  box-shadow:     inset 0 -3px 0 transparent;
}

.proyecto-tab b {
  font-family: 'Archivo', sans-serif;
  font-size:   14px;
  font-weight: 700;
  color:       rgba(255, 255, 255, 0.72);
  line-height: 1.3;
  transition:  color 0.25s;
}

.proyecto-tab small {
  font-size:      11.5px;
  letter-spacing: 0.3px;
  color:          rgba(255, 255, 255, 0.4);
  transition:     color 0.25s;
}

.proyecto-tab:hover {
  background: #1a1e27;
}

.proyecto-tab:hover b {
  color: #ffffff;
}

.proyecto-tab.activo {
  background:  #1d222c;
  box-shadow:  inset 0 -3px 0 var(--color-rojo);
}

.proyecto-tab.activo b {
  color: #ffffff;
}

.proyecto-tab.activo small {
  color: var(--color-rojo);
}

.proyecto-tab:focus-visible {
  outline:        2px solid var(--color-rojo);
  outline-offset: -2px;
}

/* --- Panel del caso --- */
.proyecto-panel {
  display:               grid;
  grid-template-columns: 1.25fr 1fr;
  gap:                   30px;
  align-items:           start;
}

.proyecto-panel[hidden] {
  display: none;
}

.proyecto-galeria {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.proyecto-galeria.sencilla {
  grid-template-columns: 1fr;
}

.proyecto-foto {
  position:      relative;
  overflow:      hidden;
  border-radius: 6px;
  background:    #14171e;
  aspect-ratio:  4 / 3;
}

.proyecto-galeria.sencilla .proyecto-foto {
  aspect-ratio: 16 / 9;
}

.proyecto-foto img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.6s ease;
}

.proyecto-foto:hover img {
  transform: scale(1.05);
}

.proyecto-ruta {
  display:        inline-block;
  font-family:    'Archivo', sans-serif;
  font-weight:    700;
  font-size:      12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color:          #ffffff;
  background:     var(--color-rojo);
  padding:        6px 13px;
  border-radius:  20px;
  margin-bottom:  16px;
}

.proyecto-detalle h3 {
  font-size:     24px;
  color:         #ffffff;
  margin-bottom: 12px;
}

.proyecto-detalle p {
  font-size:   14.5px;
  color:       rgba(255, 255, 255, 0.66);
  line-height: 1.72;
}

.proyecto-detalle p + p {
  margin-top: 14px;
}

/* Cifras destacadas de la operación */
.proyecto-datos {
  list-style: none;
  display:    grid;
  gap:        12px;
  margin:     24px 0;
}

.proyecto-datos li {
  border-left: 2px solid var(--color-rojo);
  padding-left: 14px;
}

.proyecto-datos b {
  display:        block;
  font-family:    'Archivo', sans-serif;
  font-weight:    900;
  font-size:      19px;
  color:          #ffffff;
  line-height:    1.2;
  letter-spacing: 0.2px;
}

.proyecto-datos span {
  font-size: 12.5px;
  color:     rgba(255, 255, 255, 0.5);
}

.proyecto-detalle .btn {
  margin-top: 4px;
}

/* Alternancia de fondos según el orden de la página:
   zona franca (blanco) · servicios · diferenciadores (blanco) ·
   certificaciones · proyectos (oscuro) · FAQ (gris).
   Entre Certificaciones y FAQ se usa --fondo-secundario en vez del gris
   habitual: contra el blanco anterior el salto de #f1f2f6 era tan leve
   que las dos secciones se leían como una sola. */
.seccion-faq {
  background: var(--fondo-secundario);
}

/* =====================================================================
   CERTIFICACIONES
   ===================================================================== */
.seccion-certificaciones {
  background: var(--fondo-principal);
}

.grid-certificaciones {
  display: grid;
  /* Dos tarjetas desde que salió JCTrans. Con columnas automáticas la
     rejilla se adapta sola si vuelve a cambiar el número. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   24px;
  max-width:             840px;
  margin:                0 auto;
}

.certificacion {
  /* Blancas sobre el gris de la sección: así el certificado resalta */
  background:    #ffffff;
  border:        1px solid var(--color-linea);
  border-radius: 10px;
  padding:       26px;
  text-align:    center;
  transition:    border-color 0.25s, transform 0.25s;
}

.certificacion:hover {
  border-color: var(--color-rojo);
  transform:    translateY(-4px);
}

.certificacion-imagen {
  height:          200px;
  background:      #fff;
  border-radius:   6px;
  overflow:        hidden;
  margin-bottom:   18px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.certificacion-imagen img {
  height:          100%;
  width:           100%;
  object-fit:      cover;
  object-position: top;
}

.certificacion h3 {
  font-size:     17px;
  color:         var(--color-texto);
  margin-bottom: 4px;
}

.certificacion p {
  font-size: 13px;
  color:     var(--color-texto-suave);
}

.certificacion-codigo {
  font-size:      11.5px;
  color:          var(--color-rojo);
  font-weight:    700;
  letter-spacing: 0.5px;
  margin-top:     8px;
}

/* =====================================================================
   CTA FINAL
   ===================================================================== */
.cta-final {
  position:   relative;
  text-align: center;
  padding:    80px 0;
  overflow:   hidden;
  /* Fondo de respaldo mientras el video se carga (llega diferido) */
  background: #0d0f14;
}

.cta-video-fondo {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
  filter:     brightness(0.45) saturate(0.7);
  transform:  scale(1.08);
}

.cta-final-velo {
  display: none;
}

.cta-final h2 {
  font-size:     clamp(28px, 4vw, 46px);
  color:         #fff;
  margin-bottom: 16px;
}

.cta-final p {
  color:         rgba(255, 255, 255, 0.9);
  font-size:     17px;
  max-width:     560px;
  margin:        0 auto 30px;
}

.cta-final .btn {
  background: #fff;
  color:      var(--color-rojo-oscuro);
}

.cta-final .btn:hover {
  background: #1a1c21;
  color:      #fff;
  transform:  translateY(-2px);
}

/* =====================================================================
   FOOTER — fondo oscuro intencional para separación visual
   ===================================================================== */
footer {
  background:  #1a1c21;
  color:       #c4c8d2;
  padding:     64px 0 30px;
  border-top:  1px solid rgba(255, 255, 255, 0.06);
}

.footer-cuadricula {
  display:               grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap:                   40px;
  margin-bottom:         44px;
}

.footer-cuadricula .logo {
  height:        48px;
  width:         auto;
  display:       block;
  margin-bottom: 18px;
}

.footer-cuadricula p {
  color:     #8a9099;
  font-size: 14px;
  max-width: 300px;
}

.footer-columna h3 {
  font-size:      13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          #e8eaef;
  margin-bottom:  18px;
  font-family:    'Archivo', sans-serif;
}

.footer-columna a,
.footer-columna span {
  display:       block;
  color:         #8a9099;
  font-size:     14px;
  margin-bottom: 11px;
  transition:    color 0.2s;
}

.footer-columna a:hover {
  color: var(--color-rojo);
}

.sellos-certificacion {
  display:       flex;
  align-items:   center;
  gap:           22px;
  flex-wrap:     wrap;
  padding:       26px 0;
  border-top:    1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sellos-etiqueta {
  font-size:      12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          #5a6070;
}

.sello {
  font-family:    'Archivo', sans-serif;
  font-weight:    900;
  font-size:      15px;
  color:          var(--color-gris);
  letter-spacing: 0.5px;
  opacity:        0.6;
  transition:     opacity 0.2s;
}

.sello:hover {
  opacity: 1;
}

.footer-redes {
  display:         flex;
  justify-content: center;
  gap:             16px;
  padding:         24px 0 16px;
}

.red-social {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.07);
  color:           #a0a4b0;
  transition:      background 0.2s, color 0.2s, transform 0.2s;
}

.red-social svg {
  width:  18px;
  height: 18px;
}

.red-social:hover {
  background: var(--color-rojo);
  color:      #ffffff;
  transform:  translateY(-3px);
}

.pie-copyright {
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             10px;
  padding-top:     24px;
  font-size:       12.5px;
  color:           #5a6070;
}

.pie-copyright a:hover {
  color: var(--color-rojo);
}

/* =====================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ===================================================================== */
.boton-flotante-whatsapp {
  position:        fixed;
  bottom:          32px;
  right:           32px;
  z-index:         999;
  width:           58px;
  height:          58px;
  border-radius:   50%;
  background:      #25D366;
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 6px 24px rgba(37, 211, 102, 0.45);
  transition:      transform 0.2s, box-shadow 0.2s;
}

.boton-flotante-whatsapp svg {
  width:  28px;
  height: 28px;
}

.boton-flotante-whatsapp:hover {
  transform:  translateY(-4px) scale(1.06);
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.55);
}

/* =====================================================================
   RESPONSIVE — Escritorio angosto (981px – 1180px)
   Con seis enlaces el menú queda justo: se comprime antes de pasar
   al menú de hamburguesa.
   ===================================================================== */
@media (max-width: 1180px) and (min-width: 981px) {
  .menu-principal {
    gap: 13px;
  }

  .menu-principal a {
    font-size: 12.5px;
  }

  .menu-principal a.btn {
    padding: 10px 14px;
  }

  .nav .logo {
    height: 46px;
  }
}

/* =====================================================================
   RESPONSIVE — Tablet (≤ 980px)
   ===================================================================== */
@media (max-width: 980px) {
  .hero-cuadricula {
    grid-template-columns: 1fr;
    gap:                   40px;
  }

  .grid-servicios {
    grid-template-columns: 1fr 1fr;
  }

  .destacada-zofiva,
  .destacada-proyectos {
    grid-column: span 2;
  }

  .destacada-proyectos {
    grid-template-columns: 1fr;
  }

  .servicio-capacidades {
    border-left: none;
    border-top:  1px solid var(--color-linea);
    padding-top: 24px;
  }

  .grid-diferenciadores {
    grid-template-columns: 1fr 1fr;
  }

  /* Proyectos: pestañas en dos columnas y panel apilado */
  .proyectos-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .proyecto-panel {
    grid-template-columns: 1fr;
    gap:                   26px;
  }

  .footer-cuadricula {
    grid-template-columns: 1fr 1fr;
  }

  .menu-principal {
    position:       fixed;
    /* 79px = los 78 de la barra más su línea inferior */
    inset:          79px 0 auto 0;
    flex-direction: column;
    align-items:    stretch;
    background:     var(--fondo-secundario);
    border-bottom:  1px solid var(--color-linea);
    padding:        8px 22px 22px;
    gap:            0;
    display:        none;
    /* Con el móvil en horizontal el menú no cabía y no había forma de
       llegar a los últimos enlaces. */
    max-height:     calc(100vh - 79px);
    overflow-y:     auto;
    box-shadow:     0 18px 40px rgba(0,0,0,0.14);
  }

  /* Cada enlace, una franja de 48px separada por una línea: en
     vertical el objetivo táctil lo da el alto de la fila, no el largo
     de la palabra, y sin separador las filas se leían como un bloque. */
  .menu-principal a:not(.btn) {
    display:       flex;
    align-items:   center;
    min-height:    48px;
    font-size:     15.5px;
    /* En horizontal los enlaces no pueden partirse; aquí sí, o un
       rótulo largo se saldría de la fila. */
    white-space:   normal;
    border-bottom: 1px solid var(--color-linea);
  }

  /* El subrayado del scrollspy cuelga 6px por debajo del texto: en una
     fila vertical caía sobre el separador. En la lista la sección
     activa se marca con una barra roja a la izquierda. */
  .menu-principal a:not(.btn)::after {
    display: none;
  }

  .menu-principal a.activo:not(.btn) {
    color:        var(--color-rojo);
    box-shadow:   inset 3px 0 0 var(--color-rojo);
    padding-left: 12px;
  }

  /* El botón es inline-flex: sin justify-content su rótulo se queda
     pegado a la izquierda al estirarse a todo el ancho. */
  .menu-principal .btn {
    margin-top:      18px;
    justify-content: center;
  }

  .menu-principal.abierto {
    display: flex;
  }

  .boton-menu {
    display: flex;
  }
}

/* =====================================================================
   RESPONSIVE — Móvil (≤ 640px)
   ===================================================================== */
@media (max-width: 640px) {
  .grid-servicios {
    grid-template-columns: 1fr;
  }

  .destacada-zofiva,
  .destacada-proyectos {
    grid-column:           span 1;
    grid-template-columns: 1fr;
  }

  .servicio-media {
    min-height: 210px;
  }

  /* Proyectos: una pestaña por fila y galería apilada */
  .proyectos-tabs {
    grid-template-columns: 1fr;
  }

  .proyecto-tab {
    padding: 13px 16px;
  }

  .proyecto-galeria {
    grid-template-columns: 1fr;
  }

  .proyecto-detalle h3 {
    font-size: 21px;
  }

  .tarjeta-servicio.destacada .servicio-cuerpo,
  .servicio-capacidades {
    padding: 30px 24px;
  }

  .grid-diferenciadores {
    grid-template-columns: 1fr;
  }

  .grid-certificaciones {
    grid-template-columns: 1fr;
  }

  .footer-cuadricula {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    gap: 24px;
  }

  section.seccion-bloque {
    padding: 36px 0;
  }

  /* El logo a 60px ocupa 180px de ancho: junto al selector de idioma y
     la hamburguesa no cabía en una pantalla de 360px. */
  .nav .logo {
    height: 44px;
  }

  /* La barra de anuncios tiene 144 caracteres: a 13px se iba a cuatro
     renglones y empujaba la página entera hacia abajo. */
  .topbar {
    font-size:      11px;
    line-height:    1.5;
    letter-spacing: 0.2px;
    padding:        6px 14px;
  }

  /* 28px a cada lado es mucho margen cuando solo hay 360 de ancho */
  .contenedor {
    padding: 0 18px;
  }
}

/* =====================================================================
   MODAL DE CERTIFICACIONES
   ===================================================================== */
/* =====================================================================
   PTEE — pestaña lateral y modal
   La pestaña va pegada al borde DERECHO, a media altura, para no chocar
   con el botón de WhatsApp de la esquina inferior. En reposo solo se ve
   el escudo: la pestaña está casi entera fuera de cuadro y solo asoma
   su extremo izquierdo. Al pasar el cursor entra completa, con la sigla
   y el nombre del programa.
   ===================================================================== */
.pestana-ptee {
  position:        fixed;
  right:           0;
  top:             50%;
  z-index:         700;
  display:         flex;
  align-items:     center;
  gap:             11px;
  padding:         14px 18px 14px 13px;
  border:          none;
  border-radius:   10px 0 0 10px;
  background:      var(--color-rojo);
  color:           #ffffff;
  font-family:     'Archivo', sans-serif;
  font-weight:     700;
  font-size:       13px;
  letter-spacing:  1.8px;
  cursor:          pointer;
  white-space:     nowrap;
  box-shadow:      -5px 6px 22px rgba(0,0,0,0.26);
  /* Lo único que queda dentro de la pantalla son 44px: el padding
     izquierdo más el escudo. La medida sale de ahí, no al ojo. */
  transform:       translate(calc(100% - 44px), -50%);
  transition:      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                   background 0.25s,
                   box-shadow 0.25s;
}

.pestana-ptee:hover,
.pestana-ptee:focus-visible {
  transform:  translate(0, -50%);
  background: var(--color-rojo-oscuro);
  box-shadow: -8px 8px 30px rgba(0,0,0,0.34);
}

.pestana-ptee-icono {
  width:       19px;
  height:      19px;
  flex-shrink: 0;
}

.pestana-ptee-sigla {
  line-height: 1;
}

/* El nombre completo se abre a la vez que entra la pestaña */
.pestana-ptee-nombre {
  max-width:      0;
  overflow:       hidden;
  opacity:        0;
  font-family:    'Open Sans', sans-serif;
  font-size:      11.5px;
  font-weight:    600;
  letter-spacing: 0.3px;
  text-transform: none;
  transition:     max-width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.24s 0.08s;
}

.pestana-ptee:hover .pestana-ptee-nombre,
.pestana-ptee:focus-visible .pestana-ptee-nombre {
  max-width: 340px;
  opacity:   0.92;
}

/* Sin cursor no hay hover, así que la pestaña se queda como en reposo:
   solo el escudo. Quien lo toque abre el modal, que es donde está la
   explicación completa. */
@media (hover: none) {
  .pestana-ptee {
    padding:   13px 16px 13px 12px;
    transform: translate(calc(100% - 40px), -50%);
  }
  .pestana-ptee-icono { width: 18px; height: 18px; }
}

/* --- Modal: la lámina manda y las acciones van en una columna angosta --- */
#modal-ptee {
  position:        fixed;
  inset:           0;
  z-index:         1010;
  background:      rgba(13, 15, 20, 0.88);
  backdrop-filter: blur(6px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.3s ease;
}

#modal-ptee.visible {
  opacity:        1;
  pointer-events: all;
}

.modal-marco-ptee {
  display:               grid;
  grid-template-columns: auto 290px;
  width:                 auto;
  max-width:             min(97vw, 1320px);
  max-height:            calc(100vh - 32px);
}

#modal-ptee.visible .modal-marco {
  transform: translateY(0) scale(1);
}

/* La pieza es 2:3: manda la altura. Se le da todo el alto disponible
   para que la letra pequeña se alcance a leer sin abrir el archivo. */
.ptee-lamina {
  position:   relative;
  display:    block;
  background: #0d0f14;
  line-height: 0;
}

.ptee-lamina img {
  display:    block;
  /* Todo el alto que deja el fondo oscurecido, con tope en el tamaño
     real del archivo (1024 × 1536): más allá solo se ampliaría y se
     vería peor de lo que ya está. */
  height:     calc(100vh - 32px);
  max-height: 1536px;
  width:      auto;
  max-width:  100%;
  object-fit: contain;
}

/* Aviso de que la pieza se puede abrir en su tamaño original */
.ptee-lupa {
  position:       absolute;
  left:           50%;
  bottom:         16px;
  transform:      translateX(-50%) translateY(6px);
  background:     rgba(13,15,20,0.82);
  color:          #ffffff;
  font-family:    'Open Sans', sans-serif;
  font-size:      12px;
  line-height:    1.2;
  padding:        9px 15px;
  border-radius:  999px;
  white-space:    nowrap;
  opacity:        0;
  transition:     opacity 0.22s ease, transform 0.22s ease;
}

.ptee-lamina:hover .ptee-lupa,
.ptee-lamina:focus-visible .ptee-lupa {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* Sin hover el aviso se queda fijo: si no, nadie sabría que se amplía */
@media (hover: none) {
  .ptee-lupa { opacity: 1; transform: translateX(-50%); }
}

.ptee-acciones {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             14px;
  padding:         30px 26px;
  overflow-y:      auto;
}

.ptee-acciones h3 {
  font-family: 'Archivo', sans-serif;
  font-size:   19px;
  line-height: 1.25;
  color:       var(--color-texto);
  margin:      0;
}

.ptee-acciones > p {
  font-size:   13.5px;
  line-height: 1.65;
  color:       var(--color-texto-suave);
  margin:      0;
}

.ptee-acciones .btn {
  align-self: flex-start;
  margin-top: 4px;
}

.ptee-nota {
  font-size: 12.5px !important;
}

.ptee-canal {
  margin-top:  6px;
  padding-top: 16px;
  border-top:  1px solid var(--color-linea);
  font-size:   12.5px;
  color:       var(--color-texto-suave);
}

.ptee-canal span {
  display:        block;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size:      11px;
  color:          var(--color-texto);
  margin-bottom:  4px;
}

.ptee-canal a {
  color:           var(--color-rojo);
  text-decoration: none;
  word-break:      break-all;
}

.ptee-canal a:hover {
  text-decoration: underline;
}

/* Cuando la pieza a pantalla completa ya no deja sitio para la columna
   de acciones, estas pasan debajo y el marco entero se hace scrollable. */
@media (max-width: 1000px) {
  .modal-marco-ptee {
    grid-template-columns: 1fr;
    max-width:             min(96vw, 560px);
    overflow-y:            auto;
  }
  .ptee-lamina img {
    height:    auto;
    width:     100%;
    max-width: none;
  }
  .ptee-acciones {
    padding:    24px 22px 28px;
    overflow-y: visible;
  }
}

#modal-certificacion {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  background:      rgba(13, 15, 20, 0.80);
  backdrop-filter: blur(6px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.3s ease;
}

#modal-certificacion.visible {
  opacity:        1;
  pointer-events: all;
}

.modal-marco {
  position:      relative;
  background:    #ffffff;
  border-radius: 12px;
  box-shadow:    0 24px 64px rgba(0, 0, 0, 0.35);
  width:         fit-content;
  max-width:     min(90vw, 900px);
  max-height:    92vh;
  overflow-y:    auto;
  transform:     translateY(20px) scale(0.97);
  transition:    transform 0.3s ease;
}

#modal-certificacion.visible .modal-marco {
  transform: translateY(0) scale(1);
}

.modal-cerrar {
  position:   absolute;
  top:        12px;
  right:      12px;
  z-index:    10;
  width:      44px;
  height:     44px;
  border:     none;
  border-radius: 50%;
  background: rgba(13, 15, 20, 0.08);
  cursor:     pointer;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.modal-cerrar:hover {
  background: rgba(172, 21, 25, 0.12);
  color:      var(--color-rojo);
}

.modal-cerrar svg {
  width:  18px;
  height: 18px;
}

.modal-imagen-contenedor {
  background: var(--fondo-secundario);
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    40px 48px;
  border-bottom: 1px solid var(--color-linea);
}

.modal-imagen-contenedor img {
  max-width:  100%;
  max-height: 82vh;
  width:      auto;
  height:     auto;
  object-fit: contain;
  border-radius: 4px;
}

.modal-info {
  padding: 28px 32px 32px;
}

.modal-info h3 {
  font-family: 'Archivo', sans-serif;
  font-size:   22px;
  font-weight: 800;
  color:       var(--color-texto);
  margin-bottom: 8px;
}

.modal-info p {
  color:       var(--color-texto-suave);
  font-size:   15px;
  margin-bottom: 14px;
}

.modal-info span {
  display:     inline-block;
  font-size:   12px;
  font-weight: 600;
  color:       var(--color-rojo);
  letter-spacing: 0.5px;
}

/* Ícono lupa sobre la imagen de la tarjeta */
.certificacion-imagen {
  position: relative;
}

.certificacion-lupa {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items: center;
  justify-content: center;
  background: rgba(172, 21, 25, 0.0);
  border-radius: 4px;
  opacity:    0;
  transition: opacity 0.25s, background 0.25s;
}

.certificacion-lupa svg {
  width:  32px;
  height: 32px;
  color:  #ffffff;
}

.certificacion:hover .certificacion-lupa {
  opacity:    1;
  background: rgba(172, 21, 25, 0.55);
}

.certificacion { cursor: pointer; }

@media (max-width: 600px) {
  .modal-imagen-contenedor { padding: 28px 24px; }
  .modal-info              { padding: 22px 24px 28px; }
}

/* =====================================================================
   FAQ — Acordeón de preguntas frecuentes
   ===================================================================== */
#faq {
  background: var(--fondo-principal);
}

.faq-lista {
  max-width: 780px;
  margin:    40px auto 0;
}

.faq-elemento {
  border-bottom: 1px solid var(--color-linea);
}

.faq-elemento:first-child {
  border-top: 1px solid var(--color-linea);
}

.faq-boton {
  width:           100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  padding:         22px 4px;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  font-family:     'Archivo', sans-serif;
  font-size:       16px;
  font-weight:     600;
  color:           var(--color-texto);
  transition:      color 0.2s;
}

.faq-boton:hover {
  color: var(--color-rojo);
}

.faq-icono {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  color:       var(--color-gris);
  transition:  transform 0.35s ease, color 0.2s;
}

.faq-elemento.abierto .faq-icono {
  transform: rotate(180deg);
  color:     var(--color-rojo);
}

.faq-respuesta {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.38s ease;
}

.faq-elemento.abierto .faq-respuesta {
  max-height: 600px;
}

.faq-respuesta p {
  padding:     0 4px 24px;
  color:       var(--color-texto-suave);
  line-height: 1.75;
  font-size:   15px;
}

@media (max-width: 600px) {
  .faq-boton { font-size: 15px; padding: 18px 4px; }
}

/* =====================================================================
   ZONA FRANCA — Sección ZOFIVA
   ===================================================================== */
.seccion-zona-franca {
  background: #ffffff;
}

.zona-franca-cuadricula {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         64px;
  align-items: center;
}

/* El kicker usa el estilo general (.kicker), con su guion rojo delante.
   Antes había aquí un display:inline-block que anulaba el ::before. */

.zona-franca-texto h2 {
  font-size:     clamp(1.6rem, 2.6vw, 2.2rem);
  line-height:   1.25;
  margin-bottom: 12px;
  color:         var(--color-texto);
}

/* Subtítulo: enlaza el titular con los párrafos */
.zona-franca-subtitulo {
  font-size:     18.5px;
  line-height:   1.45;
  color:         var(--color-texto);
  margin-bottom: 22px;
  max-width:     34ch;
}

.zona-franca-texto h2 span {
  color: var(--color-rojo);
}

.zona-franca-descripcion p {
  color:       var(--color-texto-suave);
  line-height: 1.75;
  font-size:   15px;
  max-width:   66ch;
}

.zona-franca-descripcion p + p {
  margin-top: 16px;
}

.zona-franca-descripcion {
  margin-bottom: 28px;
}

/* Beneficios — banda a todo el ancho bajo el texto y el video */
.zona-franca-beneficios {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
  margin-top:            56px;
  padding-top:           44px;
  border-top:            1px solid var(--color-linea);
}

/* Cada beneficio es un desplegable: se ve el título y el texto
   aparece al tocarlo. Así la sección no arranca con un muro de texto. */
.zf-beneficio {
  border:        1px solid var(--color-linea);
  border-radius: 8px;
  background:    var(--fondo-secundario);
  overflow:      hidden;
  align-self:    start;
  transition:    border-color 0.25s, box-shadow 0.25s;
}

.zf-beneficio:hover {
  border-color: rgba(172, 21, 25, 0.45);
}

.zf-beneficio.abierto {
  border-color: var(--color-rojo);
  box-shadow:   0 8px 24px -14px rgba(0, 0, 0, 0.5);
}

.zf-beneficio-boton {
  width:       100%;
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     16px 18px;
  background:  none;
  border:      none;
  cursor:      pointer;
  text-align:  left;
  font-family: inherit;
}

.zf-beneficio-icono {
  flex-shrink:    0;
  width:          40px;
  height:         40px;
  border-radius:  10px;
  background:     rgba(172, 21, 25, 0.10);
  display:        flex;
  align-items:    center;
  justify-content: center;
  color:          var(--color-rojo);
  transition:     background 0.25s, color 0.25s;
}

.zf-beneficio.abierto .zf-beneficio-icono {
  background: var(--color-rojo);
  color:      #ffffff;
}

.zf-beneficio-icono svg {
  width:  20px;
  height: 20px;
}

.zf-beneficio-boton h4 {
  flex:        1;
  font-size:   15px;
  font-weight: 700;
  color:       var(--color-texto);
  line-height: 1.35;
}

.zf-beneficio-flecha {
  flex-shrink: 0;
  width:       17px;
  height:      17px;
  color:       var(--color-rojo);
  transition:  transform 0.3s;
}

.zf-beneficio.abierto .zf-beneficio-flecha {
  transform: rotate(180deg);
}

.zf-beneficio-detalle {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.38s ease;
}

.zf-beneficio.abierto .zf-beneficio-detalle {
  max-height: 520px;
}

.zf-beneficio-detalle p {
  padding:     0 18px 18px 72px;
  font-size:   13.5px;
  color:       var(--color-texto-suave);
  line-height: 1.65;
}

/* Puntos destacados dentro del texto desplegado */
.zf-beneficio-detalle strong {
  color:       var(--color-texto);
  font-weight: 700;
}

/* Recorrido panorámico de la bodega.
   El video es 16/9: recortarlo a un formato más alto anularía la
   panorámica, así que el panel toma la proporción del material. */
.zona-franca-video {
  position:      relative;
  margin:        0;
  border-radius: 16px;
  overflow:      hidden;
  /* Sombra en dos capas: una corta y cerrada que despega el panel del
     fondo blanco, y una larga y difusa que le da el peso que pidió
     gerencia sin que se vea como un borde gris. */
  box-shadow:    0 6px 16px rgba(0,0,0,0.16),
                 0 34px 74px rgba(0,0,0,0.42);
  aspect-ratio:  16 / 9;
  background:    #0d0f14;
}

.zona-franca-video video {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Pie sobre un degradado: se lee encima del video sin taparlo */
.zona-franca-video-pie {
  position:       absolute;
  left:           0;
  right:          0;
  bottom:         0;
  margin:         0;
  padding:        40px 20px 16px;
  background:     linear-gradient(to top, rgba(13,15,20,0.82), rgba(13,15,20,0));
  color:          rgba(255,255,255,0.9);
  font-size:      13px;
  letter-spacing: 0.02em;
  text-align:     center;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1100px) {
  .zona-franca-beneficios {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .zona-franca-cuadricula {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .zona-franca-beneficios {
    margin-top:  44px;
    padding-top: 36px;
  }
}

@media (max-width: 600px) {
  .zona-franca-beneficios {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .zf-beneficio-boton {
    padding: 14px 15px;
    gap:     12px;
  }

  .zf-beneficio-detalle p {
    padding: 0 15px 16px 15px;
  }
}

/* =====================================================================
   PANTALLA DE CARGA
   Overlay de bienvenida con animación de avión aterrizando.
   Se muestra una sola vez por sesión (controlado desde app.js).
   ===================================================================== */
#pantalla-carga {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  background:      #0d0f14;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      opacity 0.55s ease;
}

#pantalla-carga.ocultar {
  opacity:        0;
  pointer-events: none;
}

.loader-escena {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            34px;
  padding:        0 24px;
}

/* Contenedor que agrupa avión + pista */
.loader-pista-contenedor {
  position:  relative;
  width:     380px;
  max-width: 82vw;
}

/* ---------------------------------------------------------------------
   El aterrizaje se reparte en dos capas para que cada movimiento tenga
   su propia curva de tiempo:
   · .loader-avion-vuelo  → trayectoria (descenso, toma de contacto, rodaje)
   · .loader-avion        → cabeceo (aproximación, flare, derrotación)
   El eje de giro se sitúa sobre el tren principal, de modo que al levantar
   el morro la rueda de morro se despega del suelo como en un aterrizaje real.
   --------------------------------------------------------------------- */
.loader-avion-vuelo {
  opacity:     0;
  will-change: transform, opacity;
  animation:   aterrizaje-trayectoria 2.5s linear forwards;
}

.loader-avion {
  display:          block;
  width:            270px;
  max-width:        74%;
  height:           auto;
  margin-left:      22px;
  transform-origin: 40.5% 86%;
  animation:        aterrizaje-cabeceo 2.5s linear forwards;
}

/* Trayectoria: senda de planeo constante, flare, contacto y frenado */
@keyframes aterrizaje-trayectoria {
  0% {
    transform: translate3d(-300px, -138px, 0) scale(0.88);
    opacity:   0;
    animation-timing-function: linear;
  }
  7% {
    opacity:   1;
    animation-timing-function: linear;
  }
  50% {
    transform: translate3d(-78px, -34px, 0) scale(1);
    animation-timing-function: cubic-bezier(0.33, 0, 0.5, 1);
  }
  62% {
    /* Flare: el avión nivela y el descenso casi se detiene */
    transform: translate3d(-32px, -7px, 0) scale(1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1);
  }
  70% {
    /* Toma de contacto del tren principal */
    transform: translate3d(0, 0, 0) scale(1);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
  }
  74% {
    /* Rebote breve de la amortiguación */
    transform: translate3d(15px, -5px, 0) scale(1);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6);
  }
  79% {
    transform: translate3d(29px, 0, 0) scale(1);
    animation-timing-function: cubic-bezier(0.08, 0.6, 0.2, 1);
  }
  100% {
    /* Rodaje con deceleración progresiva hasta detenerse */
    transform: translate3d(76px, 0, 0) scale(1);
    opacity:   1;
  }
}

/* Cabeceo: morro ligeramente bajo en aproximación, arriba en el flare,
   y descenso del morro (derrotación) ya sobre la pista */
@keyframes aterrizaje-cabeceo {
  0%, 44% {
    /* Aproximación: morro ligeramente arriba sobre la senda de planeo */
    transform: rotate(-1.5deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }
  58% {
    /* Flare: se levanta el morro para frenar el descenso */
    transform: rotate(-6deg);
    animation-timing-function: ease-out;
  }
  70% {
    /* Toma de contacto: solo apoya el tren principal */
    transform: rotate(-5.5deg);
    animation-timing-function: ease-in;
  }
  76% {
    transform: rotate(-4.6deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.4, 1);
  }
  87% {
    /* Derrotación: baja la rueda de morro */
    transform: rotate(-0.6deg);
    animation-timing-function: ease-out;
  }
  93%, 100% {
    transform: rotate(0deg);
  }
}

/* Inversores de empuje: solo se despliegan tras tocar pista */
.loader-inversor {
  opacity:   0;
  animation: desplegar-inversores 2.5s linear forwards;
}

@keyframes desplegar-inversores {
  0%, 71%   { opacity: 0; }
  76%       { opacity: 1; }
  92%       { opacity: 1; }
  100%      { opacity: 0; }
}

/* Humo del contacto de las ruedas con la pista */
.loader-humo {
  position:      absolute;
  bottom:        14px;
  width:         30px;
  height:        13px;
  border-radius: 50%;
  background:    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 70%);
  opacity:       0;
  pointer-events: none;
}

.loader-humo-a {
  left:      118px;
  animation: humo-toque 1.05s ease-out 1.74s forwards;
}

.loader-humo-b {
  left:      140px;
  animation: humo-toque 1.2s ease-out 1.82s forwards;
}

@keyframes humo-toque {
  0%   { opacity: 0;    transform: translateX(0)     scale(0.35, 0.5); }
  18%  { opacity: 0.8;  transform: translateX(-2px)  scale(1, 1); }
  100% { opacity: 0;    transform: translateX(-14px) scale(2.4, 2); }
}

/* Línea de pista con barra de progreso roja */
.loader-pista-linea {
  width:         100%;
  height:        3px;
  background:    rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  margin-top:    -6px;
  overflow:      hidden;
}

.loader-pista-linea::after {
  content:       '';
  display:       block;
  height:        100%;
  width:         0;
  background:    var(--color-rojo);
  border-radius: 2px;
  animation:     progreso-pista 2.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes progreso-pista {
  0%   { width: 0%; }
  100% { width: 100%; }
}

/* Marcas de umbral de pista */
.loader-marcas-pista {
  display:         flex;
  gap:             14px;
  margin-top:      11px;
  justify-content: center;
}

.loader-marcas-pista span {
  display:       block;
  width:         26px;
  height:        4px;
  background:    rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

/* Logo — aparece cuando el avión ya rueda por la pista */
.loader-logo {
  display:   block;
  width:     230px;
  max-width: 74vw;
  opacity:   0;
  animation: aparecer-logo-carga 0.7s ease 1.95s forwards;
}

/* Accesibilidad: sin animación de vuelo si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  .loader-avion-vuelo {
    opacity:   1;
    animation: none;
  }

  .loader-avion,
  .loader-inversor {
    animation: none;
  }

  .loader-inversor { opacity: 0; }
  .loader-humo     { display: none; }

  .loader-logo               { animation-delay: 0.2s; }
  .loader-pista-linea::after { animation-duration: 0.8s; }
}

/* =====================================================================
   SELECTOR DE IDIOMA
   ===================================================================== */
.lang-toggle {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-right: 8px;
}

.lang-btn {
  background:     none;
  border:         none;
  cursor:         pointer;
  font-family:    'Archivo', sans-serif;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          var(--color-texto-suave);
  padding:        4px 6px;
  border-radius:  4px;
  transition:     color 0.2s, background 0.2s;
}

.lang-btn.activo {
  color:      var(--color-rojo);
  background: rgba(172, 21, 25, 0.08);
}

.lang-btn:hover:not(.activo) {
  color: var(--color-texto);
}

.lang-sep {
  color:       var(--color-linea);
  font-size:   12px;
  user-select: none;
}

@media (max-width: 768px) {
  .lang-toggle { margin-right: 2px; }
  /* Se mantiene la letra pequeña, pero el botón crece para poder
     tocarlo: antes eran unos 25x21 px. */
  .lang-btn {
    font-size:       11.5px;
    padding:         0;
    min-width:       34px;
    height:          40px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
  }
}

@keyframes aparecer-logo-carga {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =====================================================================
   EL AVIÓN DEL MENÚ
   El avión se posa encima de la palabra de la sección que el cliente
   está leyendo. Siempre viaja en el mismo sentido: entra por la
   izquierda al empezar la sección y sale por la derecha al terminarla.
   Mismo lenguaje que el loader — la navegación es el viaje de la carga.
   La posición y el giro los calcula app.js.
   ===================================================================== */
/* Se posa ENCIMA de la palabra: por eso se ancla al centro vertical
   del menú y se sube por encima del texto del enlace. */
.nav-avion {
  position:       absolute;
  left:           0;
  top:            50%;
  margin-top:     -28px;
  margin-left:    -7.5px;
  width:          15px;
  height:         15px;
  color:          var(--color-rojo);
  pointer-events: none;
  opacity:        0;
}

.nav-avion svg {
  width:   100%;
  height:  100%;
  display: block;
}

/* En vuelo el avión se agranda un punto y proyecta sombra */
.nav-avion.en-vuelo {
  filter: drop-shadow(0 3px 5px rgba(172, 21, 25, 0.45));
}

/* El menú es el marco de referencia de la posición del avión.
   OJO: va limitada a escritorio a propósito. Esta regla está escrita
   después del bloque de móvil y con la misma especificidad, así que
   sin el media query le ganaba al position:fixed del panel
   desplegable y el menú se quedaba encajado dentro de la barra. */
@media (min-width: 981px) {
  .menu-principal {
    position: relative;
  }
}

/* En el menú de hamburguesa los enlaces se apilan en vertical:
   ahí el vuelo horizontal no tiene sentido */
@media (max-width: 980px) {
  .nav-avion { display: none; }
}

/* Sin vuelo para quien pide menos movimiento: el avión se queda posado */
@media (prefers-reduced-motion: reduce) {
  .nav-avion { transition: none; }
}

/* =====================================================================
   DESPLAZAMIENTO CON INERCIA (Lenis)
   Reglas que la librería necesita. La clase .lenis-smooth la pone ella
   misma en el <html> al activarse: anula el scroll-behavior nativo para
   que los dos sistemas no peleen. Si Lenis no carga, el CSS de arriba
   sigue mandando y los saltos del menú funcionan como siempre.
   ===================================================================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}