/* Familia y stack de fallbacks */
:root{
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
               sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Activar variable font y tamaño óptico si está disponible */
html { font-variation-settings: normal; }
/* Botón flotante de WhatsApp */
.wapp-float{
  position: fixed;
  right: 7rem;
  bottom: 90px;
  width: 24px;
  height: 24px;
  z-index: 9999;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.wapp-float svg{
  width: 24%;
  height: 24%;
  display: block;
}
.wapp-float:hover{
  transform: translateY(-2px) scale(0.9);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  filter: saturate(1.1);
}

/* Tamaño más chico en mobile */
@media (max-width: 576px){
      .wapp-float {
        right: 3rem;
        bottom: 25px;
        width: 56px;
        height: 56px;
    }
    .wapp-float svg{
      width: 10%;
      height: 10%;
    }
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto; /* usa 'opsz' si la fuente lo soporta */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Fuente de títulos */
:root{
  --font-heading: "Satoshi", system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, "Noto Sans",
                  "Liberation Sans", sans-serif;
}

/* Aplica Satoshi SOLO a títulos */
h1, h2, h3, h4, h5, h6,
.section-title,
.custom-title {
  font-family: var(--font-heading);
  font-weight: 800;              /* ajustá: 700/800/900 según diseño */
  letter-spacing: .005em;        /* un pelín de tracking */
}

/* Utilidad opcional por si querés usarlo en algún bloque específico */
.heading-satoshi { font-family: var(--font-heading) !important; }

/* Pesos útiles rápidos (si los necesitás) */
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* Escalas responsivas opcionales para títulos */
h1, .custom-title { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.08; }
h2, .section-title { font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.12; }

.boton-custom{
  background-color:#FFF1F0;color:#AD0A04;border-radius:46px;padding-top:10px;font-weight: 500;
}
.fondo-custom{
  background-color:#FAFAFA !important;
}

/* Pesos disponibles (200–800) */
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; } /* Regular */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }


.fs-25 { font-size: 1.5625rem; }
.fs-18 { font-size: 1.2rem; }


/* sm */ @media (min-width: 576px){}
/* md */ @media (min-width: 768px){}
/* lg */ @media (min-width: 992px){}
/* xl */ @media (min-width:1200px){}
/* xxl*/ @media (min-width:1400px){}



/* Estilos rápidos */
.italic { font-style: italic; }
.no-italic { font-style: normal; }

/* Sugerencia de uso para tipografía de interfaz */
h1,h2,h3 { font-weight: 700; }
h4,h5,h6 { font-weight: 600; }
small, .small { font-weight: 400; }

/* Si usás Bootstrap y querés que todo el sitio use esta fuente: */
:root {
  --bs-body-font-family: var(--font-sans);
}
.texto{
  font-size: 1rem;
  color: black;
}
:root{
  --brand:#AD0A04; /* rojo ejemplo */
  --brand-600:#AD0A04;
  --text:#111;
  --boton:#FFF1F0;
}

body{ font-optical-sizing:auto; }

.fw-800{ font-weight:800; }
.lh-tight{ line-height:1.05; }
.section{ padding: clamp(64px, 6vw, 112px) 0; }

/* Header */
.navbar .nav-link{ padding: .5rem 1rem; }
.navbar .nav-link.active{ color: var(--brand); }
/* Estado inicial (sobre hero): fondo transparente, texto/blanco */
#navbar{
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
#navbar .nav-link{ color:#fff; }
#navbar .nav-link.active{ color:#fff; opacity:.85; }
#navbar .btn-nav{ 
  background: transparent; 
  color:#fff; 
  border:2px solid #fff;
}

/* Al scrollear: fondo blanco, texto/negro */
#navbar.scrolled{
  background:#fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
#navbar.scrolled .nav-link{ color:#111; }
#navbar.scrolled .nav-link.active{ color:#111; opacity:1; }
#navbar.scrolled .btn-nav{
  background: var(--brand, #AD0A04);
  color:#fff;
  border-color: var(--brand,#AD0A04);
}
.text-body-secondary{
  color: black !important;
}
/* Opcional: alternar logo claro/oscuro con data attrs o clases */
.navbar-brand img.logo-light{ display:block; }
.navbar-brand img.logo-dark{ display:none; }
#navbar.scrolled .navbar-brand img.logo-light{ display:none; }
#navbar.scrolled .navbar-brand img.logo-dark{ display:block; }

/* Mobile: al abrir el menú, usá esquema oscuro sobre fondo blanco */
@media (max-width: 991.98px){
  #navbar,
  #navbar.scrolled,
  #navContent.show{ background:#fff; }
  #navContent.show .nav-link{ color:#111; }
  #navContent.show .btn-nav{
    background: var(--brand, #AD0A04);
    color:#fff;
    border-color: var(--brand, #AD0A04);
  }
}


/* Hero */
.hero{ min-height: 88vh; position:relative; }
.hero{
  position: relative;
  overflow: hidden;
}

/* Contenedor del video */
.hero .hero-bg{
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Video full cover */
.hero .hero-bg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

/* Overlay oscuro para legibilidad */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.4);
  z-index: 0;
}

/* Asegura que el contenido quede arriba */
.hero > .container{
  position: relative;
  z-index: 1;
}

.hero h1{ text-shadow: 0 1px 2px rgba(0,0,0,.1); }


.jv-agro {
  background-image: url(../img/jv-agro/banner-jvagro.png);
  background-size: cover;
  background-position: center;
  position: relative; /* necesario */
  z-index: 1;
}

.jv-agro::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: rgba(0,0,0,0.1); /* negro con opacidad */
  z-index: 2;
}




/* Valores */
.value-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem; border:1px solid rgba(0,0,0,.06);
  border-radius: .75rem; background: #fff;
}

/* Partner cards */
.partner-card{
  background:#fff; border-radius:.75rem; padding:1rem;
  border:1px solid rgba(0,0,0,.06); box-shadow: 0 4px 16px rgba(0,0,0,.04);
  height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;
}

.to-top{
  position:fixed; left:1rem; bottom:1rem; width:46px; height:46px; display:none;
}

/* Brand */
.btn-primary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-600); --bs-btn-hover-border-color:var(--brand-600);
}
.link-primary{ color:var(--brand); }
.text-primary{ color:var(--brand) !important; }

/* Helpers */
.object-fit-cover{ object-fit:cover; }

.titulo{

color: Black;
font-size: 48px;
line-height: 55px;
text-align: center;
font-weight: 900;
}


/* Carousel continuo, sin controles */
.soft-swiper{
  --h: clamp(180px, 22vw, 320px); /* ← altura responsive: ajustá a tu diseño */
  width: 100%;
  height: 500px;
  border-radius: 12px;          /* opcional */
  overflow: hidden;
}
.soft-swiper .swiper-slide{
  width: 100%;
  height: 100%;
}
.soft-swiper img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* ocupa todo sin deformar */
  display: block;
}
/* Saca el bloque del container y lo hace 100vw */
.full-bleed{
  width: 100vw;
  position: relative;
  left: 49%;
  right: 49%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Carousel suave de 3 imágenes */
.soft-swiper.three{
  --h: clamp(220px, 28vw, 340px); /* ajustá para calzar con Figma */
  height: var(--h);
  width: 100%;
  padding-inline: 4px;           /* “gutter” lateral similar al diseño */
}

.soft-swiper.three .swiper-wrapper{
  transition-timing-function: linear !important; /* movimiento parejo */
  
}

.soft-swiper.three .swiper-slide{
  height: 100%;
}

.soft-swiper.three img{
  width: 504px;
  height: 373px;
  object-fit: cover;
  border-radius: 0px;            /* radios en cada imagen */
  display: block;
}

/* gap y gutters coherentes */
.soft-swiper.three{
  --h: clamp(504px, 28vw, 340px);
  --gap: 24px;
  height: var(--h);
  width: 100%;
  padding-inline: var(--gap);   /* gutter a los lados */
}

.soft-swiper.three .swiper-wrapper{
  transition-timing-function: linear !important;
}

.soft-swiper.three .swiper-slide{
  height: 100%;
}

.soft-swiper.three img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
  display: block;
}


.texto-rojo{
  color: #c11414;
  font-weight: 900;
}
:root{
  --brand:#AD0A04;
  --card-bd: rgba(0,0,0,.06);
}

.partner-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  height: 100%;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--card-bd);
  border-radius: .9rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden; /* para la línea superior */
}
.partner-card:hover,
.partner-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  outline: none;
}

/* Línea roja animada (estilo diseño) */
.partner-topline{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;                    /* grosor de la línea */
  background: transparent;        /* fondo transparente */
}
.partner-topline::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.partner-card:hover .partner-topline::before,
.partner-card:focus-visible .partner-topline::before{
  transform: scaleX(1);
}

/* CTA flechita (opcional) */
.partner-cta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: #111;
}
.partner-cta::after{
  content: "›";
  transition: transform .25s ease;
}
.partner-card:hover .partner-cta::after,
.partner-card:focus-visible .partner-cta::after{
  transform: translateX(3px);
}

/* Respeta usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  .partner-card,
  .partner-topline::before,
  .partner-cta::after{ transition: none !important; }
}
:root{
  --brand: #AD0A04;
  --card-bd: rgba(0,0,0,.08);
  --radius: 16px;
}

/* Contenedor de cada empresa */
.company-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Caja blanca del logo (con línea roja arriba) */
.logo-box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 180px;                 /* alto consistente */
  background: #fff;
 
  border-radius: 0px 0px 16px 16px;
  padding: 18px;
  
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.logo-box:hover{
  transform: translateY(-2px);
  
}

/* Línea roja animada */
.logo-box .topline{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  
}
.logo-box .topline::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.logo-box:hover .topline::before{ transform: scaleX(1); }

/* Imagen del logo */
.logo-box img{
  max-width: 60%;
  height: auto;
  object-fit: contain;
}

/* Texto debajo (fuera de la caja blanca) */
.company-body{ padding-top: 14px; }
.company-body h5{ font-weight: 700; }
.link-more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-weight: 700;
  color: #111;
  text-decoration: none;
}
.link-more::after{
  content: "›";
  transition: transform .2s ease;
}
.link-more:hover::after{ transform: translateX(3px); }


/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .logo-box, .logo-box .topline::before, .link-more::after { transition: none !important; }
}




.section-title{
  color: black;
  font-size: 3rem;
  font-weight: 900;
}
.custom-title{
  font-size: 5rem;
}

.custom-icon{
  height: 158px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.custom-icon img{

  width: 48px;
  height: 48px;

}

.custom-icon p{
  font-weight: 600;
  font-size: 18px;
  color: black;
}

.company-body h5{
  font-size: 1.4rem;
  color: black !important;
  font-weight: 600;
}
.company-body p{
  color: black !important;
  font-size: 1.1rem;
  font-weight: 400;
}
.company-body a{
  color: black !important;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}
.company-body{
  display: flex;
  flex-direction: column;
  gap: 12px;                           /* 12px entre hijos */
}


/* Chip "Ubicación" */
.location-badge{
  background: #FFE8E6;          /* rosado suave */
  color: #AD0A04;               /* rojo marca */
  border-radius: 999px;
  padding: .45rem 1rem;
  font-weight: 600;
  line-height: 1;
}

/* Pin rojo */
.loc-pin{
  display: inline-flex;
  align-items: center;
}

/* Card del mapa */
.map-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  overflow: hidden;
}
.map-card .ratio{ border-radius: 16px; }
/* Tarjeta de contacto */
.contact-card{
  background: #fff;
  
 
  padding: 24px 28px;
  
}

/* Lista con íconos en pill */
.contact-list{ display: grid; gap: 14px; }
.contact-list li{ padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,.06); }
.contact-list li:last-child{ border-bottom: 0; }

.icon-pill{
  width: 40px; height: 40px;

  background: #AD0A04;
  color: #fff;
  display: grid; place-items: center;
 
  border-radius:16px ;
  width: 48px;
  height: 48px;
 
}

.contact-link{
  color: #111; text-decoration: none;
}
.contact-link:hover{ text-decoration: underline; }

/* Opcional: inputs si en algún momento volvés al formulario */
.form-control{
  border-radius: 12px;
  border-color: rgba(0,0,0,.14);
}
.form-control:focus{
  border-color: var(--brand, #AD0A04);
  box-shadow: 0 0 0 .2rem rgba(227,29,29,.15);
}
.contact-band img{
  width: 100%;
}

.footer{
  background-color: #AD0A04;
}

.contacto-custom h3{
  color: #AD0A04 !important;
  font-size: 3rem;
  font-weight: 900;
}

.contacto-custom p{
  color: black !important;
}


/* ==== Base = MOBILE ==== */
.custom-title{ font-size: 2.2rem; line-height: 1.1; }
.section-title{ font-size: 1.8rem; }
.fs-25{ font-size: 1.05rem; }   /* tu helper, más chico en cel */
.fs-18{ font-size: .95rem; }
.hero{ min-height: 68vh; }
.contact-card{ padding: 20px; }
.soft-swiper{ height: 240px; }

/* Cambiar imagen de fondo en mobile (si querés otra) */
.hero .hero-bg{
  background-image: url("../img/imagen-principal-mobile.png");
  background-position: center;
  background-size: cover;
}

/* ==== sm+ (>=576px) ==== */
@media (min-width:576px){
  .custom-title{ font-size: 2.8rem; }
  .section-title{ font-size: 2.2rem; }
  .soft-swiper{ height: 300px; }
}

/* ==== md+ (>=768px) ==== */
@media (min-width:768px){
  .custom-title{ font-size: 3.6rem; }
  .section-title{ font-size: 2.6rem; }
  .hero{ min-height: 80vh; }
  .contact-card{ padding: 32px; }
  /* En desktop volvés a la imagen grande */
  .hero .hero-bg{ background-image: url("../img/imagen-principal.png"); }
}

/* ==== lg+ (>=992px) ==== */
@media (min-width:992px){
  .custom-title{ font-size: 4.2rem; }
  .section-title{ font-size: 3rem; }
  .soft-swiper{ height: 380px; }
}

/* ==== xl+ (>=1200px) ==== */
@media (min-width:1200px){
  .custom-title{ font-size: 5rem; }
}
/* === TOP LINE SIEMPRE VISIBLE (sin animación) === */

/* Variante antigua con partner-card */
.partner-topline{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--brand);   /* línea roja fija */
}

/* Variante actual con logo-box */
.logo-box .topline{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--brand);   /* línea roja fija */
}

/* anular animaciones previas si quedaron */
.partner-topline::before,
.logo-box .topline::before{
  content: none !important;
  transition: none !important;
  transform: none !important;
}

/* === EFECTO ZOOM EN HOVER (card) === */

/* partner-card */
.partner-card{
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.partner-card:hover,
.partner-card:focus-visible{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* logo-box (la caja blanca del logo) */
.logo-box{
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.logo-box:hover,
.logo-box:focus-visible{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* Opcional: leve zoom del logo dentro para acompañar */
.logo-box:hover img,
.logo-box:focus-visible img{
  transform: scale(1.03);
  transition: transform .25s ease;
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce){
  .partner-card,
  .logo-box,
  .logo-box img{
    transition: none !important;
    transform: none !important;
  }
}
/* Botón del hero: borde blanco, fondo transparente */
.btn-hero{
  --hero-border: #fff;
  color: #fff;
  background: transparent;
  border-color: var(--hero-border);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
/* Hover: fondo blanco, texto color marca */
.btn-hero:hover,
.btn-hero:focus{
  background: #fff;
  color: var(--brand);        /* usa #AD0A04 desde :root */
  border-color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Active: un pelín más oscuro si querés */
.btn-hero:active{
  background: #fff;
  color: var(--brand-600);
  transform: translateY(0);
}

/* Opcional: para usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  .btn-hero{ transition: none; }
}
/* Carrusel continuo */
.auto-carousel{
  height: clamp(220px, 28vw, 340px);
  width: 100%;
  overflow: hidden;
  padding-inline: 12px;   /* leve gutter lateral */
}

.auto-carousel .swiper-wrapper{
  transition-timing-function: linear !important; /* movimiento parejo */
  will-change: transform;
  transform: translateZ(0); /* acelera GPU */
}

.auto-carousel .swiper-slide{
  height: 100%;
  /* ancho flexible según breakpoint */
}

.auto-carousel img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;        /* sin radios, dejalo si querés recto */
}

/* Cuántas se ven por viewport */
@media (max-width: 575.98px){
  .auto-carousel .swiper-slide{ width: 88%; }  /* ~1.1 por vista */
}
@media (min-width: 576px) and (max-width: 991.98px){
  .auto-carousel .swiper-slide{ width: calc(50% - 12px); } /* 2 por vista */
}
@media (min-width: 992px){
  .auto-carousel .swiper-slide{ width: calc(33.333% - 16px); } /* 3 por vista */
}
.contacto{
  background: #fff;
}

.contacto__row{
  min-height: 600px;
  align-items: stretch;
}

/* Izquierda: padding vertical, alineado al container */
.contacto__content{
  display: flex;
  align-items: center;
  padding: clamp(64px, 6vw, 112px) 0;
}

/* “inner” para controlar aire hacia la imagen sin romper container */
.contacto__inner{
  width: 100%;
  padding-right: clamp(24px, 3vw, 72px);
}

/* Derecha: la imagen ocupa toda la altura */


/* 🔥 Full-bleed SOLO en desktop:
   hacemos que esta columna mida 50vw y “salga” del container hacia la derecha */
@media (min-width: 992px){
  
}

/* Mobile: apila */
@media (max-width: 991.98px){
  .contacto__row{
    min-height: auto;
  }

  .contacto__content{
    padding: 40px 0;
  }

  .contacto__inner{
    padding-right: 0;
  }

 
}
.contacto{
  background:#fff;
}
.contacto__wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.contacto__title{
  margin: 0 0 14px 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--brand);
  font-family: var(--font-heading);
}
.contacto__lead{
  margin: 0 0 36px 0;
  color: #2f3640;
  font-size: 14px;
}
.contacto__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.contacto__item{
  display:flex;
  gap:16px;
}
.contacto__icon{
  width:44px;
  height:44px;
  background:var(--brand);
  border-radius:8px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.contacto__icon i{
  color:#fff;
  font-size:20px;
}
.contacto__label{
  font-weight:700;
  font-size:14px;
  color:#3f4a5a;
  margin-bottom:2px;
}
.contacto__value{
  font-size:14px;
  color: #5f6b7a;
  text-decoration:none;
  line-height:1.4;
  display:block;
}
a.contacto__value:hover{ text-decoration: underline; }

.contacto__media{
  background-image: url(/assets/img/contacto.png);
}

/* =========================================================
   RESPONSIVE MEJORAS PARA INDEX.HTML - MOBILE
   ========================================================= */

/* Hero responsive */
@media (max-width: 575.98px) {
  .hero {
    min-height: 70vh;
    padding-top: 100px;
  }
  
  .hero .container {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .custom-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .fs-25 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  
  .fs-18 {
    font-size: 0.9rem !important;
  }
  
  .btn-hero {
    font-size: 0.95rem !important;
    padding: 0.75rem 1.25rem !important;
    width: 100%;
  }
}

/* Secciones responsive */
@media (max-width: 575.98px) {
  .section {
    padding: 3rem 0 !important;
  }
  
  .titulo {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-top: 1.5rem !important;
  }
  
  .texto {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  .location-badge {
    font-size: 0.85rem !important;
    padding: 0.35rem 0.85rem !important;
  }
}

/* Empresas responsive */
@media (max-width: 575.98px) {
  .company-item {
    margin-bottom: 1.5rem;
  }
  
  .logo-box {
    min-height: 140px !important;
    padding: 1rem !important;
  }
  
  .logo-box img {
    max-width: 40% !important;
  }
  
  .company-body h5 {
    font-size: 1.2rem !important;
  }
  
  .company-body p {
    font-size: 0.95rem !important;
  }
}

/* Visión/Valores responsive */
@media (max-width: 767.98px) {
  .value-item {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  
  .custom-icon {
    height: auto !important;
    min-height: 100px;
  }
  
  .custom-icon img {
    width: 40px !important;
    height: 40px !important;
  }
  
  .custom-icon p {
    font-size: 0.95rem !important;
  }
}

/* Ubicación responsive */
@media (max-width: 575.98px) {
  .location-list li {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  
  .loc-pin {
    align-self: flex-start;
  }
  
  .map-card {
    border-radius: 12px !important;
  }
  
  .map-card .ratio {
    border-radius: 12px !important;
  }
  
  .ratio-21x9 {
    --bs-aspect-ratio: 75% !important;
  }
}

/* Contacto responsive */
@media (max-width: 991.98px) {
  .contacto__row {
    flex-direction: column;
  }
  
  .contacto__content {
    padding: 2rem 0 !important;
  }
  
  .contacto__inner {
    padding-right: 0 !important;
  }
  
  .contacto__title {
    font-size: 2rem !important;
  }
  
  .contacto__lead {
    font-size: 0.9rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .contacto__list {
    gap: 1.25rem !important;
  }
  
  .contacto__item {
    gap: 0.75rem !important;
  }
  
  .contacto__icon {
    width: 40px !important;
    height: 40px !important;
  }
  
  .contacto__icon i {
    font-size: 18px !important;
  }
  
  .contacto__label,
  .contacto__value {
    font-size: 0.85rem !important;
  }
  
 
}

/* Footer responsive */
@media (max-width: 575.98px) {
  .footer {
    padding: 1.5rem 0 !important;
  }
  
  .footer .container {
    gap: 1rem !important;
    text-align: center !important;
  }
  
  .footer img {
    max-width: 120px !important;
    margin: 0 auto;
  }
  
  .footer .small {
    font-size: 0.75rem !important;
  }
}

/* Navbar responsive */
@media (max-width: 991.98px) {
  .navbar-brand img {
    max-height: 40px;
  }
  
  #navbar .btn-primary {
    width: 100%;
    margin-top: 0.5rem;
    justify-content: center;
  }
}

/* Botón back to top responsive */
@media (max-width: 575.98px) {
  .to-top {
    width: 40px !important;
    height: 40px !important;
    left: 0.75rem !important;
    bottom: 0.75rem !important;
    font-size: 1.2rem !important;
  }
}

/* Ajustes generales mobile */
@media (max-width: 575.98px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .mb-5 {
    margin-bottom: 2rem !important;
  }
  
  .mt-5 {
    margin-top: 2rem !important;
  }
  
  .gap-3 {
    gap: 0.75rem !important;
  }
  
  .gap-4 {
    gap: 1rem !important;
  }
  
  .gap-5 {
    gap: 1.25rem !important;
  }
  
  /* Evitar overflow horizontal */
  body {
    overflow-x: hidden;
  }
  
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* Textos más legibles */
  p, .text-body-secondary {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  /* Títulos más pequeños pero legibles */
  h2.section-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  /* Botones más pequeños */
  .btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.95rem !important;
  }
}

/* Mejoras para tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero {
    min-height: 75vh;
  }
  
  .custom-title {
    font-size: 2.5rem !important;
  }
  
  .section-title {
    font-size: 2rem !important;
  }
  
  .section {
    padding: 4rem 0 !important;
  }
}

/* Correcciones adicionales para mobile */
@media (max-width: 575.98px) {
  /* Navbar logo */
  .navbar-brand img {
    max-height: 35px;
  }
  
  /* Hero mejoras */
  .hero .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero h1 {
    margin-bottom: 1rem !important;
  }
  
  .hero p {
    margin-bottom: 1rem !important;
  }
  
  /* Sección Quiénes Somos */
  .col-lg-8 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* Empresas - mejor espaciado */
  .company-item {
    margin-bottom: 2rem;
  }
  
  .logo-box {
    margin-bottom: 1rem;
  }
  
  /* Visión - mejor layout */
  #vision .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  #vision .col-lg-6 {
    margin-bottom: 2rem;
  }
  
  /* Valores - mejor alineación */
  .value-item {
    padding: 1rem !important;
    margin-bottom: 0.75rem;
  }
  
  .custom-icon {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
  
  .custom-icon img {
    width: 32px !important;
    height: 32px !important;
    margin-right: 0 !important;
  }
  
  .custom-icon p {
    margin: 0 !important;
    font-size: 0.9rem !important;
  }
  
  /* Ubicación */
  .location-list li {
    margin-bottom: 1.5rem !important;
  }
  
  .map-card {
    margin-top: 1.5rem;
  }
  
  /* Contacto - mejor padding */
  .contacto__content {
    padding: 2rem 1rem !important;
  }
  
  .contacto__inner {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  
  .contacto__title {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .contacto__lead {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .contacto__list {
    gap: 1rem !important;
  }
  
  .contacto__item {
    gap: 0.75rem !important;
    align-items: flex-start !important;
  }
  
  .contacto__icon {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
  }
  
  .contacto__icon i {
    font-size: 16px !important;
  }
  
  .contacto__label {
    font-size: 0.8rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .contacto__value {
    font-size: 0.85rem !important;
    word-break: break-word;
  }
  
  
  
  /* Footer mejoras */
  .footer .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .footer img {
    max-width: 100px !important;
  }
  
  .footer .small {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
  }
  
  /* WhatsApp flotante */
  .wapp-float {
    right: 1rem !important;
    bottom: 1rem !important;
    width: 50px !important;
    height: 50px !important;
  }
  
  .wapp-float img {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Back to top */
  .to-top {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
    bottom: 5.5rem !important;
  }
}

.contacto-mobile{
  width: 100%;
  padding: 0px  ;
  margin: 0;
}

.contacto{
  position: relative;
  background: #fff;
  overflow-x: clip; /* blindaje final */
  min-height: 600px;
}

/* FILA IZQUIERDA */
.contacto__row{
  min-height: 600px;
}

.contacto__content{
  display: flex;
  align-items: center;
  padding: clamp(64px, 6vw, 112px) 0;
}

.contacto__inner{
  width: 100%;
  padding-right: clamp(24px, 3vw, 72px);
}

/* IMAGEN DERECHA */
.contacto__media{
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100%;
  background-image: url("../img/contacto.png");
  background-size: cover;
  background-position: center;
}

/* Mobile: imagen abajo */
@media (max-width: 991.98px){
  .contacto{
    min-height: auto;
  }

  .contacto__media{
    position: relative;
    width: 100%;
    height: 280px;
  }

  .contacto__content{
    padding: 40px 0;
  }

  .contacto__inner{
    padding-right: 0;
  }
}
/* --- Logos swap --- */
.navbar .brand-logo{
  display: block;
  height: auto;
  transition: opacity .2s ease, transform .2s ease;
}

.navbar .brand-logo--dark{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
}

/* Para que el absoluto no rompa layout */
.navbar .navbar-brand{
  position: relative;
  display: inline-block;
}

/* Estado scrolleado */
.navbar.nav-scrolled{
  background: #fff;               /* tu fondo blanco */
  box-shadow: 0 10px 30px rgba(0,0,0,.08); /* opcional */
}

.navbar.nav-scrolled .brand-logo--light{
  opacity: 0;
  pointer-events: none;
}

.navbar.nav-scrolled .brand-logo--dark{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* (Opcional) links oscuros cuando el fondo es blanco */
.navbar.nav-scrolled .nav-link{
  color: #0b1b33 !important;
}

/* (Opcional) si usás data-bs-theme="dark", al scrollear lo pasamos a light por JS */
/* 1) En desktop: que el menú NO haga wrap */
@media (min-width: 992px){
  #navbar .navbar-nav{
    flex-wrap: nowrap;       /* clave */
    gap: 12px;               /* opcional: separa items */
  }

  /* 2) Que los botones NO se corten en 2 líneas */
  #navbar .navbar-nav .btn{
    white-space: nowrap;     /* clave */
    flex: 0 0 auto;
  }

  /* 3) Que el collapse use todo el ancho y empuje todo a la derecha */
  #navbar .navbar-collapse{
    flex-grow: 1;
    justify-content: flex-end;
  }
}