/* Estilos personalizados para el navbar */

body {
  background-color: #f7f7f7;
}
.navbar {
  transition: background-color 0.3s ease;
}

.navbar .nav-link {
  color: #ebe3e3 !important;             /* Texto blanco */
  transition: color 0.3s ease;
}

.navbar .nav-link:hover {
  color: #ffffff !important;          /* Amarillo al pasar el mouse */
}


.hero {
  position: relative;
  height: 100vh; /* ocupa toda la altura de la pantalla */
  overflow: hidden;
}

.video-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* se ajusta como fondo */
  z-index: -1; /* detrás del contenido */
}

.hero-content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: left;   /* 👈 texto alineado a la izquierda */
  max-width: 600px;   /* limita el ancho del texto */
  padding: 200px 50px; /* baja y separa del borde izquierdo */
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.hero-content .subtexto {
  font-size: 1.2rem;
  line-height: 1.5;
}

/* Botón con animación en hover */
.btn-animado {
  display: inline-block;
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  position: relative;
  background: #1e90ff; /* color fijo inicial */
  overflow: hidden;
  z-index: 1;
}

.btn-animado::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* empieza fuera del botón */
  width: 100%;
  height: 100%;
  background: #1766b4; /* color al hacer hover */
  transition: left 0.7s ease; /* animación de barrido */
  z-index: -1;
}

.btn-animado:hover::before {
  left: 0; /* el color cubre de izquierda a derecha */
}

.btn-animado:hover {
  color: #ffffff; /* cambia el color del texto al hover si quieres */
}

/* Sección Quiénes somos */
.quienes-somos {
  padding: 60px 20px;
  background: #f7f7f7;
}

.quienes-somos .container {
  max-width: 1200px;
  margin: 0 auto;
}

.quienes-somos .content {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.quienes-somos .textos {
  flex: 1 1 500px;
  text-align: left;
}

.quienes-somos h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #222;
}

.quienes-somos .intro {
  font-size: 1.1rem;
  margin-bottom: 40px;
  line-height: 1.6;
  color: #444;
}

.quienes-somos .row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.quienes-somos .col {
  flex: 1 1 250px;
}

.quienes-somos .col h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #111;
}

.quienes-somos .sub-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

.quienes-somos .imagen {
  flex: 1 1 400px;
  text-align: center;
}

.quienes-somos .imagen img {
  max-width: 100%;
  border-radius: 18px; /* 🔹 bordes más circulares */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 🔹 sombra suave y elegante */
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Efecto hover opcional (da sensación de profundidad) */
.quienes-somos .imagen img:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
}

/* ===== Sección Servicios con video de fondo ===== */
.servicios{
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  color: #e9f3f6;
}
.servicios-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.servicios-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,28,38,.75), rgba(5,28,38,.85));
  z-index: -1;
}

.servicios .kicker{
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
  color: #ffffff;
  font-weight: 600;
}
.servicios .titulo{
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: 800;
  margin-bottom: .75rem;
}
.servicios .desc{
  color: #ffffff;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  max-width: 52ch;
}

/* Botón FAQ estilo pastilla */
.btn-faq{
  background: rgba(149, 240, 255, .1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  padding: .75rem 1rem;
  border-radius: .75rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  text-decoration: none;
}
.btn-faq:hover{
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
  color: #e5fdff;
}

/* Tarjetas */

.svc-card{
  height: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 22px 20px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.svc-card:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.svc-icon{
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
  color: #ffffff;
  margin-bottom: 14px;
}
.svc-title{
  font-size: 1.05rem;
  letter-spacing: .02em;
  margin: 6px 0 6px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
}
.svc-text{
  font-size: .97rem;
  color: #d0e7ee;
  margin: 0;
}

/* Responsive pequeño */
@media (max-width: 991px){
  .servicios{ padding: 64px 0; }
}
@media (max-width: 575px){
  .svc-title{ font-size: 1rem; }
  .svc-text{ font-size: .95rem; }
}

/* ===== Testimonios ===== */
.testimonios{
  position: relative;
  padding: 90px 0;
  background: #ffffff;
  color: #2b2f33;
  /* suave degradado superior/inferior como en la captura */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0) 80%),
    linear-gradient(0deg, rgba(0,0,0,0.03), rgba(0,0,0,0) 80%);
}

.testi-title{
  font-weight: 800;
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  margin-bottom: .75rem;
  color: #000000;
}

.testi-underline{
  display: inline-block;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: #000000; /* celeste/teal */
  margin-bottom: 28px;
}

.testi-quote{
  max-width: 920px;
  margin: 0 auto 18px;
  font-size: clamp(1.2rem, 2.1vw, 1.8rem);
  line-height: 1.5;
  color: #222;
}

.testi-stars{
  display: inline-flex;
  gap: 8px;
  margin: 6px 0 18px;
  color: #000000; /* color estrellas */
}
.testi-stars .star{
  width: 22px; height: 22px;
}

.testi-name{
  font-weight: 600;
  margin-bottom: 2px;
  color: #2f3a40;
  font-size: 1.05rem;
}
.testi-role{
  color: #6c7a80;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 575px){
  .testimonios{ padding: 70px 0; }
  .testi-underline{ width: 64px; }
  .testi-stars .star{ width: 20px; height: 20px; }
}

/* Pista del carrusel centrada */
.logos-track{
  --gap: 64px;
  --speed: 52s;                  /* ⇦ más lento (sube este valor para más lentitud) */
  display: flex;
  align-items: center;
  gap: var(--gap);
  overflow: hidden;

  /* ancho centrado (no de extremo a extremo) */
  max-width: min(1100px, 92vw);
  margin: 0 auto;

  /* fade laterales dentro del ancho centrado */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);

  padding: 10px 0;
}

/* Grupo que se desplaza */
.logos-slide{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  animation: scroll-logos var(--speed) linear infinite;
  flex: 0 0 auto; /* evita que se estire */
}
.logos-track:hover .logos-slide{ animation-play-state: paused; }

/* Animación infinita (3 grupos = loop perfecto) */
@keyframes scroll-logos{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--gap))); }
}

/* Logos */
.logos img{
  height: 10px;              /* tamaño fijo más pequeño */
  width: auto;
  filter: grayscale(100%) contrast(95%);
  opacity: .85;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
  user-select: none;
  pointer-events: none;
}


.logos img:hover{
  filter: grayscale(0%) contrast(105%);
  opacity: 1;
  transform: translateY(-2px);
}

/* Móvil: aún más lento y más compacto */
@media (max-width: 576px){
  .logos-track{ --gap: 40px; --speed: 60s; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .logos-slide{ animation: none; }
  .logos-track{
    mask-image: none; -webkit-mask-image: none;
    justify-content: center; flex-wrap: wrap;
  }
  .logos img{ margin: 10px 22px; }
}

/* Fuerza tamaño de los logos del carrusel */
.logos .logo-item{
  height: 10px !important;   /* cambia aquí el tamaño que quieras */
  width: auto !important;
  max-height: 28px !important;
  object-fit: contain;
}

/* (opcional) ajusta la separación entre logos si quedaron chicos */
.logos-track{ --gap: 36px; }  /* antes 64px o 40px */

/* ===== Section solo video ===== */
.video-section{
  position: relative;
  width: 100%;
  height: 80vh; /* ajusta la altura: 100vh = toda la pantalla */
  overflow: hidden;
}

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

/* Texto / Link */
.video-link{
  font-size: 1rem;
  color: #000000;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.45);
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.video-link:hover{
  background: rgba(255, 255, 255, 0.85);
  color: #000;
  transform: scale(1.05);
}

/* ===== SECCIÓN CONVERSEMOS ===== */
.conversemos-section {
  position: relative;
  background: #f7f7f7; /* fondo gris claro */
  padding: 100px 0;
  color: #222;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.conversemos-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.conversemos-section .texto h2 {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.conversemos-section .texto p {
  font-size: 1.15rem;
  color: #555;
  margin: 0;
}

.btn-conversemos {
  display: inline-block;
  padding: 14px 34px;
  border: 3px solid #000000; /* celeste principal del sitio */
  color: #000000;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.35s ease;
  letter-spacing: 0.5px;
}

.btn-conversemos:hover {
  background: #000000;
  color: #fff;
  transform: translateY(-3px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .conversemos-section .container {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .conversemos-section .texto h2 {
    font-size: 2.1rem;
  }

  .btn-conversemos {
    padding: 12px 28px;
  }
}

/* ===== Footer ===== */
.site-footer{
  background: #1f2022;             /* gris oscuro elegante */
  color: #e7e7e7;
  padding-top: 60px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-brand .footer-logo{
  height: 40px; width: auto;
}

.logo-circle{
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #2b2c2f;
  color: #bfeaff;
  font-weight: 800;
  letter-spacing: .5px;
}

.site-footer h5,
.site-footer h6.footer-title{
  color: #ffffff;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 10px;
}

.site-footer .tagline{
  color: #cfcfcf;
  opacity: .9;
}

.footer-title{
  text-transform: uppercase;
  font-size: .95rem;
  margin-bottom: 12px;
  color: #dfe6ea;
}

.footer-links{
  list-style: none;
  padding: 0; margin: 0;
}
.footer-links li + li{ margin-top: 8px; }
.footer-links a{
  color: #cfd6da;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.footer-links a:hover{
  color: #ffffff;
  transform: translateX(2px);
}

.footer-mail{
  color: #e7f7ff;
  text-decoration: none;
  border-bottom: 1px dashed rgba(122, 209, 247, .5);
}
.footer-mail:hover{
  color: #ffffff;
  border-color: transparent;
}

/* Redes sociales */
.socials{
  display: flex; gap: 10px; margin-top: 10px;
}
.social-btn{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1.8px solid rgba(255,255,255,.55);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.social-btn:hover{
  transform: translateY(-2px);
  border-color: #ffffff;
  background: rgba(122, 209, 247, .12);
  color: #ffffff;
}

/* Barra inferior */
.footer-copy{
  margin-top: 40px;
  background: #1a1b1d;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 14px 0;
  font-size: .92rem;
  color: #bdbdbd;
}
.footer-copy a{
  color: #cfd6da; text-decoration: none;
}
.footer-copy a:hover{ color: #7ad1f7; }

/* Responsive */
@media (max-width: 768px){
  .site-footer{ padding-top: 48px; }
  .footer-copy{ text-align: center; }
  .footer-copy .container{ justify-content: center !important; }
}

/* === NAVBAR TRANSPARENTE SOBRE VIDEO === */
.navbar-hero{
  box-shadow: none;
  padding: 14px 0;
  z-index: 1000;
}
.navbar-hero .navbar-brand,
.navbar-hero .nav-link{ color:#fff !important; }
.navbar-hero .nav-link{
  font-weight:500;
  letter-spacing:.2px;
  padding: .3rem .75rem;
  position:relative;
}
.navbar-hero .nav-link::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:0; height:2px; background:#fff; transform:translateX(-50%);
  transition:width .25s ease;
}
.navbar-hero .nav-link:hover::after{ width:60%; }
.navbar-hero .navbar-toggler{ border:0; }
.navbar-hero .navbar-toggler-icon{ filter: invert(1); }
.dropdown-menu{ background:rgba(0,0,0,.85); border:none; }
.dropdown-item{ color:#fff; }
.dropdown-item:hover{ background:rgba(255,255,255,.1); color:#bfe9ff; }

/* === HERO VIDEO === */
.hero-slg{
  position: relative;
  height: 90vh;              /* ajusta si quieres más/menos alto */
  min-height: 520px;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); /* corte diagonal inferior */
  overflow: hidden;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
}

.hero-inner{
  height:100%;
  display:flex;
  align-items:center;
}
.hero-copy{
  color:#fff;
  max-width: 760px;
}
.hero-title{
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.6rem);
  letter-spacing:.4px;
  margin-bottom: 1rem;
  line-height:1.05;
  text-transform: uppercase;
}
.hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height:1.6;
  margin-bottom: 2rem;
  opacity:.95;
}

/* Botón “Conoce más”, color fijo y hover barrido izquierda→derecha SIN degradado */
.btn-hero{
  display: inline-block;
  padding: 16px 40px;              /* 🔹 más grande */
  border: 2px solid #ffffff;       /* borde blanco */
  color: #ffffff;                  /* texto blanco */
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;               /* 🔹 texto más grande */
  border-radius: 8px;
  background: transparent;         /* 🔹 fondo transparente */
  transition: all 0.35s ease;
}

/* Efecto al pasar el mouse */
.btn-hero:hover {
  background: #ffffff;             /* 🔹 fondo blanco */
  color: #000000;                  /* 🔹 texto negro */
  border-color: #ffffff;           /* 🔹 mantiene borde blanco */
  transform: translateY(-2px);     /* leve efecto de elevación */
}

/* Responsive: menú colapsado más legible */
/* ✅ Versión móvil sin forzar fondo del navbar */
@media (max-width: 991px){
  .navbar-hero{ background: transparent; }  /* transparente en hero */
  .dropdown-menu{ background:rgba(0,0,0,.9); } /* opcional */
}


/* ===== Navbar fijo y transiciones suaves ===== */
.navbar-hero {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  padding: 14px 0;
  transition: 
    background-color 0.6s ease,
    backdrop-filter 0.6s ease,
    padding 0.3s ease;
}

/* Transición del logo y textos */
.navbar-hero .brand-logo {
  height: 40px;
  transition: 
    height 0.3s ease,
    filter 0.5s ease,
    opacity 0.6s ease;
}
.navbar-hero .nav-link {
  font-size: 1rem;
  transition: color 0.5s ease, font-size 0.3s ease, opacity 0.5s ease;
}

/* Compacto al hacer scroll */
.navbar-hero.navbar--compact {
  padding: 6px 0;
}
.navbar-hero.navbar--compact .brand-logo {
  height: 38px;
}

/* Tema oscuro (texto blanco) */
.navbar-hero.navbar--on-dark .nav-link {
  color: #fff !important;
}
.navbar-hero.navbar--on-dark .nav-link:hover {
  color: #ddd !important;
}

/* Tema claro (texto negro) */
.navbar-hero.navbar--on-light .nav-link {
  color: hwb(0 0% 100%) !important;
}
.navbar-hero.navbar--on-light .nav-link:hover {
  color: #444 !important;
}

/* Transición suave del logo al cambiar */
.navbar-hero .brand-logo.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.navbar-hero .brand-logo.fade-in {
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* === Carrusel de logos (desde cero) === */
.brand-marquee{
  --max-width: min(1100px, 92vw); /* ancho centrado */
  --gap: 60px;                    /* separación entre logos */
  --logo-h: 34px;                 /* altura de cada logo */
  --speed: 38s;                   /* mayor = más lento */
  --side-fade: 9%;                /* difuminado lateral */
  padding: 24px 0 10px;
  background: #f7f7f7;
  color: #333;
  text-align: center;
}

.brand-marquee__title{
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 18px;
}

.brand-marquee__viewport{
  max-width: var(--max-width);
  margin: 0 auto;
  overflow: hidden;
  /* fade suave a los lados */
  mask-image: linear-gradient(to right,
    transparent,
    #000 var(--side-fade),
    #000 calc(100% - var(--side-fade)),
    transparent);
  -webkit-mask-image: linear-gradient(to right,
    transparent,
    #000 var(--side-fade),
    #000 calc(100% - var(--side-fade)),
    transparent);
}

.brand-marquee__track{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  padding: 8px 0;
  animation: bm-scroll var(--speed) linear infinite;
  will-change: transform;
}

/* pausa al pasar el mouse */
.brand-marquee__viewport:hover .brand-marquee__track{
  animation-play-state: paused;
}

.brand-marquee__logo{
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(95%);
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
  user-select: none;
  pointer-events: none; /* quítalo si quieres hover en logos */
}
.brand-marquee__logo:hover{
  filter: grayscale(0%) contrast(105%);
  opacity: 1;
  transform: translateY(-2px);
}

/* Animación infinita: el segundo grupo continúa al primero */
@keyframes bm-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); }
}

/* Responsive */
@media (max-width: 576px){
  .brand-marquee{ --gap: 38px; --logo-h: 24px; --speed: 42s; }
}
@media (prefers-reduced-motion: reduce){
  .brand-marquee__track{ animation: none; }
  .brand-marquee__viewport{
    mask-image: none; -webkit-mask-image: none;
  }
}

/* ===== Lámina de Contacto (slide-in) ===== */
body.no-scroll { overflow: hidden; }

.contact-sheet{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: #000000;                 /* azul/teal similar a la imagen */
  color: #e8f7fb;
  transform: translateX(100%);
  transition: transform .35s ease;
  z-index: 1500;
  box-shadow: -12px 0 28px rgba(0,0,0,.35);
  padding: 22px 24px 28px;
}
.contact-sheet.is-open{ transform: translateX(0); }

.contact-sheet__close{
  position: absolute; left: 12px; top: 8px;
  border: none; background: transparent; color: #e8f7fb;
  font-size: 34px; line-height: 1; cursor: pointer;
  opacity: .9; transition: opacity .2s ease, transform .2s ease;
}
.contact-sheet__close:hover{ opacity: 1; transform: scale(1.06); }

.contact-sheet__inner{
  margin-top: 34px;            /* espacio para la X */
  display: flex; flex-direction: column; gap: 22px;
}

.contact-sheet__brand{
  font-weight: 800; letter-spacing: .5px;
  margin: 8px 0 6px; color: #ffffff;
}

.contact-sheet__group{ margin-top: 8px; }
.contact-sheet__subtitle{
  font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; color: #eafcff;
}

.contact-sheet__line{
  margin: 0 0 6px; font-size: .98rem; color: #f1fbff;
  opacity: .95;
}

.contact-sheet__mail{
  color: #ffffff; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.5);
}
.contact-sheet__mail:hover{ border-bottom-color: transparent; }

/* Fondo oscurecido */
.contact-sheet-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1400;
  opacity: 0; transition: opacity .3s ease;
}
.contact-sheet-backdrop.is-open{ opacity: 1; }

/* === Sección de video con texto encima === */
.video-section {
  position: relative;
  overflow: hidden;
}

/* Video de fondo */
.video-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* video al fondo */
}

/* Overlay centrado encima del video */
.video-caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none; /* no bloquea clics en el video */
  z-index: 10; /* capa superior sobre el video */
}

.video-caption__inner {
  text-align: center;
  color: #ffffff;
  padding: 18px 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Título @INTRALOGISTICA */
.insta-title {
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  z-index: 1; /* texto encima de la franja */
}

/* Franja turquesa detrás del texto */
.insta-title::after {
  content: "";
  position: absolute;
  left: 6px;
  right: -6px;
  height: 0.42em;
  bottom: 0.12em;
  background: #313030;
  border-radius: 4px;
  z-index: -1; /* debajo del texto, encima del video */
}

/* Círculo del arroba */
.insta-at {
  display: inline-grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.18em;
  font-weight: 800;
  background: transparent;
}

/* Subtítulo */
.insta-sub {
  margin-top: 12px;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  opacity: 0.95;
}

.insta-sub a {
  color: #ffffff;
  text-decoration: underline;
  pointer-events: auto; /* hace clickeable el enlace */
}

/* Mejora de legibilidad en pantallas grandes */
@media (min-width: 768px) {
  .video-caption__inner {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  }
}


/* ===== Careers (3 imágenes + texto) — AISLADO ===== */
.careers-hero{
  --ink:#0f1216;
  --muted:#616b75;
  --panel:#ffffff;
  --bg:#fafbfd;
  --line:#e9eef3;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(72px, 9vw, 110px) 0;
  overflow:hidden; /* evita que sombras o imágenes sobresalgan hacia el footer */
}

.careers-container{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

.careers-wrap{
  display: grid;
  grid-template-columns: 1.05fr 1fr;  /* imágenes | texto */
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

/* Collage: 2 arriba, 1 abajo */
.careers-collage{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "a b"
    "c c";
  gap: 20px;
}
.collage-img{
  display:block;
  width: 100%;
  height: clamp(180px, 24vw, 260px);
  object-fit: cover;
  border-radius: 14px;
  background: #ddd;
  box-shadow:
    0 10px 20px rgba(15,18,22,0.07),
    0 4px 10px rgba(15,18,22,0.06);
}
.collage-img.a{ grid-area: a; }
.collage-img.b{ grid-area: b; }
.collage-img.c{ grid-area: c; height: clamp(200px, 26vw, 300px); }

/* Texto + CTAs */
.careers-copy .kicker{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 8px;
  font-size: .9rem;
}
.careers-copy h2{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
}
.careers-copy .sub{
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 60ch;
}

.cta-group{ display: grid; gap: 10px; }
.cta-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 2px solid var(--line);
  transition: color .25s ease, border-color .25s ease, transform .2s ease;
}
.cta-link:hover{
  color: #000;
  border-color: #000;
  transform: translateY(-1px);
}
.cta-icon{
  width: 28px; height: 28px; flex: 0 0 28px;
  stroke: currentColor; fill: none; stroke-width: 2;
  transition: transform .25s ease;
}
.cta-link:hover .cta-icon{ transform: translateX(3px); }

/* Responsive */
@media (max-width: 1024px){
  .careers-wrap{ grid-template-columns: 1fr; }
  .careers-collage{ order: 2; }
  .careers-copy{ order: 1; }
}
@media (max-width: 600px){
  .careers-collage{ gap: 14px; }
  .collage-img{ border-radius: 12px; }
}

/* 1) Nunca permitir desbordes horizontales */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* 2) Si por 1px no alcanza, que el fondo del hero sea negro */
.hero-slg {
  background: #000;
}

/* 3) El video realmente ocupa todo el hero en cualquier relación de aspecto */
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .navbar .navbar-toggler {
    border-width: 1px;
    border-style: solid;
    background: transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }

  .navbar .navbar-toggler:focus,
  .navbar .navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* --- FIX hamburguesa: no invertir colores --- */
.navbar-hero .navbar-toggler-icon{
  filter: none !important;
}

/* Asegura borde visible en móvil (tu JS cambia el color) */
@media (max-width: 991px){
  .navbar-hero .navbar-toggler{
    border-width: 1px !important;
    border-style: solid !important;
    background: transparent;
  }
}

/* --- FIX hamburguesa: no invertir colores --- */
.navbar-hero .navbar-toggler-icon{
  filter: none !important;
}

/* Asegura borde visible en móvil (tu JS cambia el color) */
@media (max-width: 991px){
  .navbar-hero .navbar-toggler{
    border-width: 1px !important;
    border-style: solid !important;
    background: transparent;
  }
}

/* ——— Single logo (sin carrusel) ——— */
.brand-marquee__track--single {
  display: grid;
  place-items: center;
  width: 100%;
  gap: 0;
  /* anula cualquier animación previa del carrusel */
  animation: none !important;
}

.brand-marquee__logo--single {
  width: clamp(120px, 14vw, 220px);
  height: auto;
  opacity: 0;
  filter: grayscale(100%) opacity(0.85);
  transform: translateY(10px) scale(0.98);
  animation: bm-fade-up 700ms ease-out forwards;
  transition: filter 300ms ease, transform 300ms ease;
}

/* Hover sutil */
.brand-marquee__logo--single:hover {
  filter: grayscale(0%) opacity(1);
  transform: translateY(0) scale(1.03);
}

/* Keyframe de entrada */
@keyframes bm-fade-up {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__logo--single {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ——— Sección de Confianza (Falabella) ——— */
.trust {
  padding: clamp(60px, 8vw, 120px) 0;
  background-color: #f8f9fa;
}

.trust__title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.trust__subtitle {
  color: #6b7280;
  max-width: 700px;
  margin-inline: auto;
  font-size: 1.05rem;
}

/* Logo Falabella */
.trust__logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: min(90%, 500px);
}

.trust__logo {
  width: clamp(160px, 18vw, 260px);
  height: auto;
  filter: grayscale(0%) opacity(0.95);
}

/* KPIs minimalistas */
.trust__kpi {
  text-align: center;
  padding: 10px 0;
}

.trust__value {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
}

.trust__label {
  color: #6b7280;
  font-size: 0.95rem;
  margin-top: 4px;
}

/* Espaciado más respirado en pantallas grandes */
@media (min-width: 992px) {
  .trust__kpi {
    padding: 16px 0;
  }
}

.trust { padding: clamp(60px, 8vw, 120px) 0; background:#f8f9fa; }
.trust__title { font-weight:700; letter-spacing:-0.02em; }
.trust__subtitle { color:#6b7280; max-width:700px; margin-inline:auto; font-size:1.05rem; }

.trust__logo-container { display:flex; justify-content:center; align-items:center; margin:0 auto; width:min(90%, 500px); }
.trust__logo { width:clamp(160px, 18vw, 260px); height:auto; filter:grayscale(0%) opacity(.95); }

.trust__kpi { text-align:center; padding:10px 0; }
.trust__value { font-size:clamp(24px, 3.5vw, 32px); font-weight:800; color:#111827; line-height:1.1; }
.trust__label { color:#6b7280; font-size:.95rem; margin-top:4px; }

/* === BOTÓN FLOTANTE DE WHATSAPP === */
.whatsapp-float {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  right: calc(env(safe-area-inset-right, 0px) + 36px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366; /* verde oficial de WhatsApp */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  z-index: 3000; /* por encima de navbar, overlays, etc. */
  transition: transform .3s ease, box-shadow .3s ease, opacity .25s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  color: #fff;
}

/* Ícono dentro del botón flotante */
.whatsapp-float i {
  font-size: 32px;
  line-height: 1;
}

/* Tamaño adaptado en pantallas pequeñas */
@media (max-width: 576px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    right: calc(env(safe-area-inset-right, 0px) + 22px);
  }
  .whatsapp-float i {
    font-size: 26px;
  }
}

/* Ocultar cuando se abre la lámina de contacto */
body.no-scroll .whatsapp-float {
  opacity: 0;
  pointer-events: none;
}


/* === ÍCONO WHATSAPP EN EL FOOTER === */
.social-btn i {
  font-size: 20px;
  line-height: 1;
  transition: color .3s ease, transform .3s ease;
}

/* Efecto verde al pasar el mouse */
.social-btn:hover i.fa-whatsapp {
  color: #25d366;
  transform: scale(1.1);
}

/* Hover rosado/naranja para Instagram */
.social-btn:hover i.fa-instagram {
  color: #e1306c;
}