html{
  font-size:16px;
  background-color:   white;
}


/* Poppins Thin (100) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
/* Poppins Thin Italic (100) */
@font-face {
    font-family: 'Poppins';mo
    src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Poppins ExtraLight (200) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
/* Poppins ExtraLight Italic (200) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Poppins Light (300) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
/* Poppins Light Italic (300) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/*
 * PESOS NORMALES Y MEDIOS (400 - 500)
 */

/* Poppins Regular (400) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Poppins Italic (400) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Poppins Medium (500) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* Poppins Medium Italic (500) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/*
 * PESOS SEMI-FUERTES Y FUERTES (600 - 900)
 */

/* Poppins SemiBold (600) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* Poppins SemiBold Italic (600) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Poppins Bold (700) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Poppins Bold Italic (700) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Poppins ExtraBold (800) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
/* Poppins ExtraBold Italic (800) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Poppins Black (900) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
/* Poppins Black Italic (900) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
  --color-primary: #222222;
  --color-secondary: #2659FF;
  --color-secondary2: #59E600;
  --color-azul: #2659FF;
  --color-verde:#10662F;
  --color-rojo-intenso:#FF0000;
  --color-rojo-danper:#ED0000;
  --color-gris-oscuro: #040308A8;
  --color-marron-oscuro-danper: #D3C3BE;
  --color-marron-claro-danper: #F6F3F2;
  --color-anaranjado:#E4AE43;
  --color-verde-oscuro:#26b300;
  --color-verde-petroleo:#005c00;
  --font-base: 'Poppins', sans-serif;
  --font-secondary1:'Monserrat', sans-serif;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --white: white;
}

.verde{
  color:var(--color-verde);
}

.navbar-toggler-icon{
    filter: invert(1) brightness(2);

}

/* Eliminar avatar y texto de edición/admin en productos */
.single-productoasf .description figure.wp-block-image, 
.single-productoasf .description p:contains("adminEditar"),
.single-productoasf .description p:has(img[src*="gravatar"]) {
    display: none !important;
}

/* Basado en tu captura del inspector, esto debería funcionar: */
.wp-block-group.is-layout-flex figure, 
.wp-block-group.is-layout-flex p:last-child {
    display: none !important;
}

.navbar-toggler, .navbar-toggler.active{
  border:1px solid rgba(255,255,255,.0);
}

.nav-link{
  font-size:clamp(14px, 1.04vw, 16px);
}
.white{
  color:white!important;
}

.black{
  color:black!important;
}

.green{
  color:var(--color-secondary2);
}

.blue{
  color:var(--color-secondary);
}

.amarillo{
  color:var(--color-anaranjado);
}

.logo-blanco{
  width:auto;
  transition: .3s ease;
}

.logo-blanco-scroll{
  width:190px!important;
  transition: .3s ease;
  background: transparent;
  box-shadow:none;
  transition: ease .2s;
}

.fixed .logo-blanco-scroll{
    padding: 15px;
    background: transparent;
    border-radius: 20px;
    box-shadow: 0 5px 2.5px -3px rgba(0, 0, 0, 0.15);
        transition: ease .2s;
}

h1{
  font-size: clamp(36px, 3.71vw,57px);
  font-family: var(--font-base);
}

h1 span{
  color: var(--color-secondary);
  font-weight: 900;
}

hr{
  height: 6px;
  background-color  : #00A759;
  opacity:  1;
  width:  80px;
}

.h1-sec{
  font-size:clamp(28px,3.9vw ,60px);
}

.h1-sec span{
  color:var(--color-anaranjado);
}

h2{
  font-size:clamp(33px,3.4vw,60px);
  line-height: clamp(45px,3.85vw,70px);
  font-weight: 400;
  font-family: var(--font-base);
}

h2 span{
  font-weight: 700;
}

.descripcion-producto h2{
  font-size: clamp(20px,2.5vw,38px);
  font-weight: 600;
}

.swiper h2{
  font-weight: 500;
}

#compromiso h2 span{
  color:var(--color-verde);
}

.h2-2 span{
  color: var(--color-azul)!important;
}

h3{
  font-size: clamp(24px,2.34vw,36px);
  line-height: clamp(30px,3.125vw,48px);;
  font-weight: 400;
  font-family: var(--font-base)!important;
}

#contacto h3{
  font-size: clamp(24px,3vw,48px);
}

h3 span{
  color:var(--color-verde);
}

p{
  color:var(--color-primary);
  font-family: var(--font-secondary1);
}

section{
  background: white;
}

.description{
  color:var(--color-primary);
  font-family: var(--font-base);
  font-size: clamp(14px,1vw ,16px);
  letter-spacing: 0px;
}

.bk-white{
  background: white;
  border-radius: 40px;
  min-width: 190px;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary{
  background: #F5BF15 ;
  border-radius: 100px;
 /*der:   1px solid var(--color-verde);*/
  padding:15px 50px!important;
  display: inline-block;
  cursor: pointer;
  width: auto;
  z-index: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color:black;
  font-weight: 600;
  color:black;
  font-size: 14px;
}

.btn-primary:hover{
  background: #A2C533;
  color:black;
  transition: ease .5s;
}




.btn-primaryc{
  background: #00A759 ;
  border-radius: 100px;
  
  padding:15px 50px!important;
  display: inline-block;
  cursor: pointer;
  width: auto;
  z-index: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color:white;
  font-weight: 600;
  color:black;
  font-size: 14px;
}

.btn-primaryc:hover{
  background: #A2C533;
  color:white;
  transition: ease .5s;
}


.btn-primary2{
  background: transparent ;
  border-radius: 15px;
  border:   1px solid var(--color-verde);
  padding:15px 30px!important;
  display: inline-block;
  cursor: pointer;
  width: auto;
  z-index: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color:black;
  font-weight: 600;
  color:black;
}

.btn-primary2:hover{
  background: #A2C533;
  transition: ease .5s;
  color:black;
}

.btn-formulario{
  background: white;
  color:var(--color-primary);
}

#banner{
  height: 50vh;
}

#mision{
  height: 500px;
}

/* Estilo para el botón de idioma */
.btn-idioma {
    border: 1px solid #333; /* Color del borde de tu imagen */
    border-radius: 10px;    /* Bordes redondeados */
    padding: 5px 15px !important;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #333 !important;
    transition: all 0.3s ease;
}

.btn-idioma:hover {
    background-color: #f8f9fa;
    border-color: #000;
}

/* Quitar la flecha por defecto de Bootstrap si prefieres usar un icono */
.btn-idioma::after {
    display: none !important;
}


/* Ajuste para móviles */
@media (max-width: 991px) {
    .btn-idioma {
        display: inline-flex;
        margin-top: 10px;
    }
}


.banner-container{
  width: 100%;
      /*height: 100vh; /* Adjust as needed */
      position: relative; /* Important for positioning the navbar */
      overflow: hidden; /* To handle slider content */
      background: linear-gradient(to bottom, #4B363E, #221A1A);
}

.slider-container {
      width: 100%;
      height: 100vh; /* Adjust as needed */
      position: relative; /* Important for positioning the navbar */
      overflow: hidden; /* To handle slider content */
    }

.transparent-navbar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /*background-color: rgba(0,0,0,0.3); /* Or rgba(0,0,0,0.5) for semi-transparency */
      z-index: 100; /* Ensures it's above the slider */
      padding: 15px 0; /* Adjust padding as needed */
      padding-bottom: 7px;
      transition: ease .3s;
    }

.transparent-navbar.fixed {
  position: fixed!important;
  background-color: white; /* rojo al hacer scroll */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: ease .3s;
  height: 4.7vw;
  padding:0;
}

.container-white{
  background: white;
  border-radius: 20px;
  padding-bottom:7px;
}

.transparent-navbar.fixed .navbar-nav .nav-link,.transparent-navbar.fixed .navbar-nav .nav-link:hover, .transparent-navbar.fixed .navbar-nav .nav-link.active{
  color:black;
  text-decoration-color: #A2C533;
  text-underline-offset: 30px;
}

.red-navbar {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(206, 0, 0, 1); /* Or rgba(0,0,0,0.5) for semi-transparency */
      z-index: 100; /* Ensures it's above the slider */
      padding: 15px 0; /* Adjust padding as needed */
    }

.navbar a{
  color:#000000;
  font-weight: 200;
  font-family: var(--font-base);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
}

.navbar-nav .nav-link.active{
  color:#000000;
  font-weight: 400;
      text-decoration: underline;
    text-underline-offset: 29px;
    text-decoration-thickness: 5px;
    text-decoration-color: #00A759;

}

.navbar-nav .nav-link.show{
  color: #000000;
}

.nav-link:hover{
  text-decoration: underline;
  color:#000000;
  transition:0.5s ease;
  text-underline-offset: 5px;
}

.dropdown-menu{
  background: white;
}

.dropdown-menu {
    display: block !important;
    visibility: hidden;
    opacity: 0;
}

.dropdown-menu.show {
    visibility: visible;
    opacity: 1;
}

/* Forzar que el collapse no corte el dropdown */
.navbar-collapse {
    overflow: visible !important;
}


.img-hover{
  filter: grayscale(100%);
  opacity: 1; /* Opcional: para darle un toque más sutil */
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.img-hover:hover{
  filter: grayscale(0%);
  opacity: 1;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-banner {
  width: 100%;
  height: 100vh;
}

#banner h1{
  font-family: var(--font-secondary1);
  font-weight: 700;
}

.swiper-banner h2{
  font-weight: 600;
  font-size: clamp(30px, 3.9vw, 60px);;
  line-height: 60px;
  font-family: var(--font-secondary1);
  color:white;
  text-transform: uppercase;

  background-size: 200% auto; /* el fondo es el doble de ancho */
  animation: shine 8s linear infinite;
}




.swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

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

.swiper-button-next, .swiper-button-prev{
  color:white;
  padding:25px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border:0;
  background: rgb(0,0,0,.5);
}

.swiper-button-next:after, .swiper-button-prev:after{
  font-size: 20px;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5); /* Color gris/transparente */
  opacity: 1; /* Swiper por defecto usa opacidad menor */
  border-radius: 50%;
  transition: all 0.3s ease; /* Para una transición suave */
}

.swiper-pagination-bullet-active {
  width: 40px; /* Ancho de la cápsula */
  height: 12px; /* Un poco más grueso si deseas */
  background-color: #a3c644; /* El verde de tu imagen */
  border-radius: 10px; /* Redondeado tipo cápsula */
}



.mapa-container {
    position: relative;
}

/* El círculo del cultivo */
.cultivo-item {
    position: absolute;
    width: 70px;  /* Tamaño del círculo */
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cultivo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene el círculo sin deformarse */
}

/* Capa verde (Overlay) */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(123, 165, 34, 0.8); /* Verde con opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease;
}

.overlay-mango{
  background: rgba(223, 114, 11, 0.8);
}

.overlay-palta1{
  background: rgba(0, 107, 57, 0.8);
}

.overlay-uva{
  background: rgba(159, 40, 120, 0.8);
}

.overlay-arandano{
  background: rgba(47, 125, 193, 0.8);
}

.overlay-alcachofa{
  background: rgba(4, 121, 66, 0.8);
}

.overlay-pimiento{
  background: rgba(191, 0, 0, 0.8);
}

.overlay-palta2{
  background: rgba(29, 74, 53, 0.8);
}

.overlay-limon{
  background: rgba(112, 131, 0, 0.8);
}

.overlay span {
    color: white;
    font-weight: normal;
    font-family: var(--font-base);
    font-size: 11px;
    text-align: center;
}

/* Efectos al pasar el mouse */
.cultivo-item:hover {
    transform: scale(1.1); /* Agranda un poco el círculo */
}

.cultivo-item:hover .overlay {
    opacity: 1; /* Muestra la capa verde y el nombre */
}



.top-bar a{
  color:white;
  text-decoration: none;
  font-weight: 400;
  padding-left: 50px;
  font-size:16px;
}

.idiomas .active{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
}

.top-bar a::hover{
  color:white;
  text-decoration: underline;
  text-underline-offset: 5px;
  transition:.5s ease;
}

.contact-btn{
  margin-top:2px;
  border:1px solid white;
  border-radius: 100px;
  padding:5px 25px!important;
  background: transparent;
  
  cursor: pointer;
  text-align: center;
  z-index: 1;
  position: relative;
  overflow: hidden;
}

/* capa de agua */
.contact-btn::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  height: 100%;
  background: rgba(89, 230, 0, 0.10); /* color semitransparente como agua */
  z-index: -1; /* detrás del texto */
  transition: bottom 0.5s ease;
}

.contact-btn:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}


.contact-btn:hover{
  text-decoration: none!important;
}

.btn-verde {
  position: relative;
  overflow: hidden; /* oculta lo que se sale del botón */
  padding: 15px 40px;
  font-size: 16px;
  color: #000;
  background: rgba(89, 230, 0, 1);
  border: none;
  cursor: pointer;
  border-radius: 100px;
  z-index: 0; /* asegura el contexto del z-index */
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-secondary1);
  font-weight: 600;
}

.btn-verde::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%; /* empieza completamente fuera (debajo) */
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(191,233,165,1) 0%,
    rgba(191,233,165,1) 100%
  );
  clip-path: ellipse(150% 100% at 50% 100%); /* forma curva como agua */
  transition: top 0.6s ease;
  z-index: -1; /* debajo del texto, dentro del botón */
}

.btn-verde:hover::before {
  top: 0; /* sube y cubre el botón */
}

.section-1 {
  background: linear-gradient(
    to bottom, 
    rgba(75, 54, 62, 1) 0%, 
    rgba(34, 26, 29, 1) 90%,
    rgba(34, 26, 29, 1) 100%
  );
  
  
}

.section-1 .card img{
  height: 340px;
  object-fit: cover;
}

.section-2 {
  /*min-height: clamp(420vh,30.2vw,464vh); /* opcional, para ocupar toda la pantalla */
  /*background: #D2ECFF url("../img/muchik1.png") no-repeat bottom center;*/
  
  background-color: #D2ECFF; /* color base de respaldo */
  background-image:url("../img/muchik1.png"),
    linear-gradient(to bottom,#221a1d -5px, #221a1d 2.5%, #D2ECFF 2.5%, #D2ECFF 100%);
  background-repeat: no-repeat, no-repeat;
background-position: bottom center, top left;
background-size: 100% auto;
background-attachment: scroll;
padding-bottom: 7vh;
}



.container-testimonios{
  background: linear-gradient(
    to left, 
    #176511 0%, 
    #90DE7B 100%
  );
  border-radius: 40px;
  top:-100px;
  /*position: absolute;*/
}

.card{
  border:0;
  background: transparent;
  font-family: var(--font-base);
  
}


.card img{
  border-radius: 40px;
}

.card-body{
  padding-left:0;
  font-weight: 400;
}

.card-text{
  font-weight: 200;
  letter-spacing: 1.5px;
  line-height: 24px;
}

.card-title{
  font-size:20px;
  font-weight: 900;
}

.card .btn{
  padding:10px 30px;
  color:black;
  border-radius: 100px;
  border:0px;
  font-family: var(--font-secondary1);
  font-size: 16px;
  font-weight: 500;
}

.card .btn:hover{
  background: #f2be6d;
}


.card-testimonio{
  width: clamp(13vw, 20.38vw, 313px);
  box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  border-radius: 8px;
  background: white;
  font-family: var(--font-base);
}
.maintxt{
  color: #1f1f1f;
  font-weight: 500;
  font-size: 14.5px;
  font-family: var(--font-secondary1);
  color:#004600;
  line-height: 20px,;
}
.name{
  
  font-size: 16px;
  font-weight: bold;
  padding-left:15px;
  color:#004600;
}
.para{
  color: #8c8c8c;
  font-size: 12px;
  position: relative;
  bottom: 3px;
  padding-left:15px;
  font-family: var(--font-secondary1);
}

.scroll-box {
  max-height: 900px;      /* ajusta según lo que quieras mostrar */
  overflow-y: hidden;     /* permite desplazamiento vertical */
  padding-right: 10px;    /* evita que texto quede pegado */
}

/* Ocultar scrollbar en diferentes navegadores */
.scroll-box::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.scroll-box {
  -ms-overflow-style: none;  /* IE y Edge */
  scrollbar-width: none;     /* Firefox */
}

.btn-transparent{
  
  border:1px solid white;
  border-radius: 100px;
  padding:5px 25px!important;
  background: transparent;
  display: inline-block;
  cursor: pointer;
  width: auto;
  z-index: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color:white;
}

/* capa de agua */
.btn-transparent::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  padding:10px 25px;
  height: 100%;
  background: rgba(89, 230, 0, 0.08); /* color semitransparente como agua */
  z-index: -1; /* detrás del texto */
  transition: bottom 0.5s ease;

}

.btn-transparent:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}


.btn-transparent:hover{
  text-decoration: none!important;
}


#valores h4{
  color:var(--color-verde);
}

#valores img{
  height:65px;
}

.btn-transparent2{
  
  border:1px solid white;
  border-radius: 100px;
  padding:15px 40px!important;
  background: transparent;
  display: inline-block;
  cursor: pointer;
  width: auto;
  z-index: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color:white;
}

/* capa de agua */
.btn-transparent2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  padding:10px 25px;
  height: 100%;
  background: rgba(89, 230, 0, 0.08); /* color semitransparente como agua */
  z-index: -1; /* detrás del texto */
  transition: bottom 0.5s ease;

}

.btn-transparent2:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}


.btn-transparent2:hover{
  text-decoration: none!important;
}

.text-justify{
  text-align:   justify!important;
}

.btn-transparent3{
  
  border:1px solid black;
  border-radius: 100px;
  padding:5px 25px!important;
  background: transparent;
  display: inline-block;
  cursor: pointer;
  width: auto;
  z-index: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color:black;
}

/* capa de agua */
.btn-transparent3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  padding:10px 25px;
  height: 100%;
  background: rgba(89, 230, 0, 0.08); /* color semitransparente como agua */
  z-index: -1; /* detrás del texto */
  transition: bottom 0.5s ease;

}

.btn-transparent3:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}


.btn-transparent3:hover{
  text-decoration: none!important;
}




.btn-transparent4{
  
  border:1px solid white;
  border-radius: 100px;
  padding:15px 40px!important;
  background: transparent;
  display: inline-block;
  cursor: pointer;
  width: auto;
  z-index: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color:white;
}

@media(max-width:768px){
  .btn-transparent4{
    padding:15px 30px!important;
  }
}

/* capa de agua */
.btn-transparent4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  padding:10px 25px;
  height: 100%;
  background: #ED0000; /* color semitransparente como agua */
  z-index: -1; /* detrás del texto */
  transition: bottom 0.5s ease;

}

.btn-transparent4:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}


.btn-transparent4:hover{
  text-decoration: none!important;
  border:1px solid rgba(0,0,0,0);
  transition: ease 0.5s;
}



.btn-transparent5{
  
  border:1px solid white;
  border-radius: 100px;
  padding:15px 40px!important;
  background: transparent;
  display: inline-block;
  cursor: pointer;
  width: auto;
  z-index: 1;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color:white;
}

/* capa de agua */
.btn-transparent5::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  padding:10px 25px;
  height: 100%;
  background: white; /* color semitransparente como agua */
  z-index: -1; /* detrás del texto */
  transition: bottom 0.5s ease;

}

.btn-transparent5:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}


.btn-transparent5:hover{
  text-decoration: none!important;
  border:1px solid rgba(0,0,0,0);
  transition: ease 0.5s;
  color:black;
}




.cards-nosotros{
  
  min-height: 450px; 
  width: 100%;
  border-radius: 20px;
}

.cards-nosotros .flecha{
  position: absolute;
  width: 60px;
  height: 60px;
  background: white;
  border-radius:100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#375FFF;
  transition: transform 0.2s ease; /* Esto hace que el efecto de rotación sea suave */
    top:20px;
  transform: rotate(-45deg);
}

.cards-nosotros .flecha i{
  font-size: 25px;
  color:#375FFF;
}

.cards-nosotros h4{
  font-family: var(--font-base);
  font-weight: 600;
}

.cards-nosotros a{
  color:var(--color-primary);
  text-decoration: none;
  font-family: var(--font-secondary1);
  letter-spacing: 1.5px;
  font-weight: 600;
}

.cards-nosotros .flecha:hover {
  transform: rotate(0deg); /* Rota la flecha un 20% (20 grados) hacia arriba */
}

.cards-nosotros .contenedor{
  background: white;
  border-radius: 20px;
  
  width: 100%;
}




.section-3 {
    min-height: 100vh; /* opcional, para ocupar toda la pantalla */
    background: #8E9DA7  url("../img/frameazul.png") no-repeat bottom center;
    background-size: 100%; /* La imagen ocupará tanto el ancho como la altura */
}

.brand-slider .swiper-slide{
  background: transparent;
}

.container-agilidad{
  background: #0D4DE8;
  border-radius: 40px;
  top:-100px;
  position: absolute;
  padding:80px 120px;
}

.container-agilidad hr{
  border: none;
  height: 1px;        /* grosor */
  background: white;   /* color de la línea */
  width: 100%;
  margin: 1rem auto;
  border-radius: 999px;
  opacity: .8;
}

.container-agilidad .description{
  font-weight: 400;
  line-height: 26px;
}

.container-agilidad .transparent-btn{
  padding:10px 24px!important;
  color:white;
  text-decoration: none;
  font-size:16px;
  line-height: 24px;
  display: block;
  font-weight: 700;
}

.border-bottom-s{
  border-bottom: 1px solid white;
}

.container-agilidad .description{
  font-weight: 300;
}

.section-3 h2{
  font-weight: 400;
}

.section-3 .btn-primary{
  padding: 10px 24px!important;
  gap: 8px;
  min-width: 200px;
  font-size: 16px;
  color:black;
  border-radius: 100px;
  border:0;
}

.subtitle-1{
  color:#b29da4;
  font-weight: 900;
  font-family: var(--font-base);
  font-size: clamp(18px,1.3vw,20px);
  line-height: 28px;

}

.subtitle-1 span{
  color:white;
}

.subtitle-2{
  color:#94CDF4;
  font-weight: 900;
  font-family: var(--font-base);
  font-size: 20px;
  line-height: 28px;

}

.subtitle-2 span{
  color:white;
}

.cuentas{
  font-size: 28px;
  color:white;
  font-family: var(--font-base);
  line-height: 36px;
}

.cuentas span{
  color:var(--color-anaranjado);
}

.cuentas .mensaje{
  color:white;
  font-size: 14px;
  display: inline;
}

#reconocimientos{
  background: white;
}

#reconocimientos-valor{
  background: #D2ECFF;
}

#reconocimientos-valor h4 span{
  color:var(--color-verde-oscuro);
}

.test-div{
  min-height: 110vh;
}

.cuadros{
  
  border-radius: 20px;
  gap:5px;
  background: linear-gradient(to bottom, white 60%, #d4f9bb);
}


.img-full {
  /* Propiedades originales del contenedor y la imagen */
  width: 100%;
  height: 260px;
  /* IMPORTANTE: Oculta la parte de la imagen que crece más allá del contenedor */
  overflow: hidden; 
}

.img-full img {
  /* Asegura que la imagen ocupe todo el contenedor al inicio */
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* Añade una transición suave a la transformación */
  transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse */
.img-full:hover img {
  /* Aplica un factor de escala (por ejemplo, 1.1 o 110%) */
  transform: scale(1.2);
}



.frescos-divider {
    /* Establece el contenedor principal como flexbox para centrar todo */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Opcional, dependiendo de dónde lo coloques */
    height: 40px; /* Altura de referencia */
    position: relative; /* Importante para el posicionamiento de las líneas */
    margin: 20px 0; /* Margen para separarlo de otros elementos */
}

.frescos-label {
    /* Estilo del texto "FRESCOS" */
    font-size: 1.5em;
    font-weight: bold;
    color: #00A759;
    
    /* Estilo del fondo de la etiqueta */
    background-color: #EBF3DA;
    padding: 5px 20px;
    border-radius: 9999px; /* Alto valor para un redondeo completo (estilo "pill") */
    
    /* Posicionamiento y capas */
    position: relative;
    z-index: 2; /* Asegura que el texto esté por encima de las líneas */
}

/* --- Creación de las Líneas Divisorias --- */

.frescos-divider::before,
.frescos-divider::after {
    content: ""; /* Es necesario para que el pseudoelemento se muestre */
    flex-grow: 1; /* Ocupa todo el espacio disponible a cada lado */
    height: 6px; /* Grosor de la línea */
    background-color: #EBF3DA; /* Color de la línea (el mismo que el fondo de la etiqueta) */
    position: absolute; /* Permite posicionar libremente */
    z-index: 1; /* Asegura que las líneas estén detrás del texto */
    top: 50%; /* Centra verticalmente la línea */
    transform: translateY(-50%);
}

/* Línea izquierda */
.frescos-divider::before {
    left: 0;
    right: 50%; /* Termina justo a la mitad */
    margin-right: 50px; /* Ajusta este valor para crear espacio antes del texto */
}

/* Línea derecha */
.frescos-divider::after {
    left: 50%; /* Comienza justo a la mitad */
    right: 0;
    margin-left: 50px; /* Ajusta este valor para crear espacio después del texto */
}




.congelados-divider {
    /* Establece el contenedor principal como flexbox para centrar todo */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Opcional, dependiendo de dónde lo coloques */
    height: 40px; /* Altura de referencia */
    position: relative; /* Importante para el posicionamiento de las líneas */
    margin: 20px 0; /* Margen para separarlo de otros elementos */
}

.congelados-label {
    /* Estilo del texto "FRESCOS" */
    font-size: 1.5em;
    font-weight: bold;
    color: #2F7DC1;
    
    /* Estilo del fondo de la etiqueta */
    background-color: #E3EBF3;
    padding: 5px 20px;
    border-radius: 9999px; /* Alto valor para un redondeo completo (estilo "pill") */
    
    /* Posicionamiento y capas */
    position: relative;
    z-index: 2; /* Asegura que el texto esté por encima de las líneas */
}

/* --- Creación de las Líneas Divisorias --- */

.congelados-divider::before,
.congelados-divider::after {
    content: ""; /* Es necesario para que el pseudoelemento se muestre */
    flex-grow: 1; /* Ocupa todo el espacio disponible a cada lado */
    height: 6px; /* Grosor de la línea */
    background-color: #E3EBF3; /* Color de la línea (el mismo que el fondo de la etiqueta) */
    position: absolute; /* Permite posicionar libremente */
    z-index: 1; /* Asegura que las líneas estén detrás del texto */
    top: 50%; /* Centra verticalmente la línea */
    transform: translateY(-50%);
}

/* Línea izquierda */
.congelados-divider::before {
    left: 0;
    right: 50%; /* Termina justo a la mitad */
    margin-right: 50px; /* Ajusta este valor para crear espacio antes del texto */
}

/* Línea derecha */
.congelados-divider::after {
    left: 50%; /* Comienza justo a la mitad */
    right: 0;
    margin-left: 50px; /* Ajusta este valor para crear espacio después del texto */
}






.conserva-divider {
    /* Establece el contenedor principal como flexbox para centrar todo */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Opcional, dependiendo de dónde lo coloques */
    height: 40px; /* Altura de referencia */
    position: relative; /* Importante para el posicionamiento de las líneas */
    margin: 20px 0; /* Margen para separarlo de otros elementos */
}

.conserva-label {
    /* Estilo del texto "FRESCOS" */
    font-size: 1.5em;
    font-weight: bold;
    color: #9F2878;
    
    /* Estilo del fondo de la etiqueta */
    background-color: #ECE7EA;
    padding: 5px 20px;
    border-radius: 9999px; /* Alto valor para un redondeo completo (estilo "pill") */
    
    /* Posicionamiento y capas */
    position: relative;
    z-index: 2; /* Asegura que el texto esté por encima de las líneas */
}

/* --- Creación de las Líneas Divisorias --- */

.conserva-divider::before,
.conserva-divider::after {
    content: ""; /* Es necesario para que el pseudoelemento se muestre */
    flex-grow: 1; /* Ocupa todo el espacio disponible a cada lado */
    height: 6px; /* Grosor de la línea */
    background-color: #E3D3DD; /* Color de la línea (el mismo que el fondo de la etiqueta) */
    position: absolute; /* Permite posicionar libremente */
    z-index: 1; /* Asegura que las líneas estén detrás del texto */
    top: 50%; /* Centra verticalmente la línea */
    transform: translateY(-50%);
}

/* Línea izquierda */
.conserva-divider::before {
    left: 0;
    right: 50%; /* Termina justo a la mitad */
    margin-right: 50px; /* Ajusta este valor para crear espacio antes del texto */
}

/* Línea derecha */
.conserva-divider::after {
    left: 50%; /* Comienza justo a la mitad */
    right: 0;
    margin-left: 50px; /* Ajusta este valor para crear espacio después del texto */
}







.progress-tracker {
    /* Asegura que el contenedor de la lista esté centrado */
    padding: 0;
    margin: 0;
}

.tracker-item {
    /* Alinea el círculo y el texto verticalmente */
    text-align: center;
    /* Elimina el espacio entre los elementos si se usa list-inline-item */
    /* El d-flex justify-content-between en el <ul> se encarga de espaciar */
}

.border-5{
    border-radius:25px;
}

.check-circle {
    /* Tamaño y forma del círculo */
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Hace que sea un círculo perfecto */
    margin: 0 auto 5px; /* Centra el círculo y añade margen inferior */
    
    /* Centra el icono dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 14px; /* Tamaño del icono */
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    color: #FFF;
    transform: scale(1.1);
}

/* Ajuste para móviles si es necesario */
@media (max-width: 767px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
        font-size: 25px;
    }
}

/* --- Estado COMPLETADO (Círculo relleno verde) --- */
.check-circle.completed {
    background-color: #8CC63F;
    border: 1px solid #8CC63F;
    color: white; /* Color de la marca de verificación */
}

/* --- Estado PENDIENTE (Círculo hueco) --- */
.check-circle.pending {
    background-color: white; /* Fondo blanco */
    border: 2px solid #DEDEDE; /* Borde gris fino */
    /* Opcional: Para darle el contorno exacto que se ve en la imagen: */
    /* border: 1px solid var(--text-gray); */ 
}

.month-label {
    /* Estilo del texto del mes */
    color: #495057;
    font-size: 16px;
    font-weight: 500;
    margin-top: 5px;
}





.cuadros hr{
  width: 80px;
}

.linea-azul{
  background-color: #2F7DC1;
}

.linea-social{
  background-color: #9F2878;
}



#compromiso-calidad h4{
  font-family: var(--font-base);
  font-weight: 600;
}

#reconocimientos h4{
  font-family: var(--font-base);
  color:black;
  font-size: 18px;
  font-weight: 900!important;
  line-height: 24px;
}

#reconocimientos h4 span, #reconocimientos h2 span{
  color:#26b300!important;
}


#reconocimientos-valor .cuadros{
  
  background:   white;
}

.brand{
  background:transparent;
  border-radius: 20px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand img{
  width: 65px;
  height: auto;
}

#reconocimientos-valor .brand{
  border-radius: 0;
  background: white;
}

.btn-verde-claro{
  width: 100%;
  background: var(--color-secondary2);
  color:black;
  border-radius: 100px;
  padding-top:20px;
  padding-bottom: 20px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 2px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: block;
}

.container-form{
  background: linear-gradient(#394BEC,#5C6AED);
  border-radius: 40px;
}

.container-form h2{
  font-weight: 900;
}

.background-gris{
  background: #F6F3F2!important;
}

#blog h2 span, #redes h2 span{
  color: #394BEC;
  font-weight: 900;
}

.noticia{
  background: white;
  border-radius: 40px;
  height: 556px;
}

.noticia h4{
  font-size: 20px;
  font-weight: 900;
}

.noticia .seguir{
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  color:var(--color-primary);
  font-weight: 500;
}

.noticia .fecha{
  background: #F9F9F9;
  font-family: var(--font-base);  
  font-size:16px;
  top:0;
  border-bottom-right-radius: 20px;
  padding:10px 32px;
}

.noticia .fecha b{
  font-weight: 900;
}

 .mySwiper {
    padding-left: 10%; /* espacio a la izquierda del primer slide */
  }


footer{
  background:#00A759;
}

footer .description{
  font-size:14px;
}

footer i{
  font-size: 20px;
}

.subscription-form {
  display: flex; /* Para alinear el input y el botón en una fila */
  background-color: #c90000; /* Color de fondo rojo, similar a tu imagen */
  padding: 10px;
  border-radius: 50px; /* Bordes redondeados para el contenedor */
  width: 100%; /* Ancho máximo para el formulario */
  margin: 20px auto; /* Centrar el formulario */
  position: relative; /* Para posicionar el botón si es necesario */
  overflow: hidden; /* Asegura que el contenido no se salga */
}

.email-input {
  flex-grow: 1; /* El input tomará el espacio restante */
  border: none; /* Sin borde */
  background: transparent; /* Fondo transparente */
  padding: 10px 15px;
  font-size: 16px;
  color: #fff; /* Color del texto del input */
  outline: none; /* Eliminar el borde de enfoque por defecto */
}

.email-input::placeholder {
  color: rgba(255, 255, 255, 0.7); /* Color del placeholder */
}

.subscribe-button {
  background-color: transparent; /* Fondo transparente para el botón */
  border: 1px solid rgba(255, 255, 255, 0.7); /* Borde blanco semi-transparente */
  color: #fff; /* Color del texto del botón */
  padding: 10px 20px;
  border-radius: 50px; /* Bordes redondeados para el botón */
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Transición suave */
  /* Para lograr el efecto de "dentro" del input, podemos ajustar el padding del formulario
     o usar posicionamiento absoluto si fuera un diseño más complejo.
     En este caso, al estar dentro del contenedor flex, ya se ve "dentro". */
}

.subscribe-button:hover {
  background-color: white; /* Ligero cambio de fondo al pasar el ratón */
  border-color: #fff; /* Borde más sólido al pasar el ratón */
  color:black;
}


.footer-menu {
 /* background-color: #f44336; /* Color de fondo rojo, similar a tu imagen */
  color: #fff; /* Color del texto blanco para todo el footer */
  padding: 40px 20px; /* Espaciado interno superior/inferior y lateral */
  display: flex; /* Usamos flexbox para las columnas */
  justify-content: space-around; /* Distribuye las columnas uniformemente */
  flex-wrap: wrap; /* Permite que las columnas se envuelvan en pantallas pequeñas */
  gap: 30px; /* Espacio entre las columnas */
}

.footer-column {
  flex: 1; /* Permite que las columnas crezcan y se encojan */
  min-width: clamp(100px, 11.7vw, 220px); /* Ancho mínimo para cada columna antes de envolverse */
  margin: 0 10px; /* Espacio horizontal entre columnas (alternativa a gap en algunos casos) */
}

.footer-column h3 {
  font-size: 20px; /* Tamaño del título */
  font-weight: bold; /* Negrita para los títulos */
  margin-bottom: 20px; /* Espacio debajo del título */
  color: #fff; /* Asegurar que el título sea blanco */
}

.footer-column ul {
  list-style: none; /* Quitar los puntos de la lista */
  padding: 0; /* Quitar el padding por defecto de la lista */
  margin: 0; /* Quitar el margen por defecto de la lista */
}

.footer-column ul li {
  margin-bottom: 10px; /* Espacio entre los elementos de la lista */
}

.footer-column ul li a {
  color: #fff; /* Color del enlace blanco */
  text-decoration: none; /* Quitar el subrayado de los enlaces */
  font-size: 18px; /* Tamaño del texto de los enlaces */
  transition: color 0.3s ease; /* Transición suave para el hover */
}

.footer-column ul li a:hover {
  color: rgba(255, 255, 255, 0.7); /* Color ligeramente más claro al pasar el ratón */
}

/* Media Queries para responsividad (opcional pero recomendado) */
@media (max-width: 768px) {

  .stats{
    gap:0;
  }
  .footer-menu {
    flex-direction: column; /* Apilar las columnas en pantallas más pequeñas */
    align-items: flex-start; /* Alinear los elementos a la izquierda */
    padding: 5px;
    gap:0;
  }

  .footer-column {
    min-width: auto; /* Desactivar el ancho mínimo para que se ajusten mejor */
    margin: 0 0 20px 0; /* Espacio inferior entre columnas */
  }

  .footer-column:last-child {
    margin-bottom: 0; /* Eliminar el margen inferior de la última columna */
  }
}

.bottom-white{
  border-bottom: 1px solid rgb(255,255,255,.5);
}

footer h1{
  font-weight: 400;
  font-size: clamp(32px, 8.33vw, 128px);
  line-height: 120px;
  font-family: var(--font-base);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2) 0%,   /* 30% opaco a la izquierda */
    rgba(255, 255, 255, 0.5) 30%,  /* sube a 80% en el centro */
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.4) 70%,  /* mantiene 80% */
    rgba(255, 255, 255, 0.15) 100%  /* 30% a la derecha */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-size: 200% auto; /* el fondo es el doble de ancho */
  animation: shine 8s linear infinite;
}

/* Media Queries para responsividad (opcional pero recomendado) */
@media (max-width: 768px) {
  footer h1{
    font-size: 45px;
        line-height: 55px;
        text-align: left;
  }

  .swiper-banner h2{
    font-size:38px;
    line-height: 50px;
    overflow-wrap: break-word;
  }

  .swiper-banner .swiper-button-next,.swiper-banner .swiper-button-prev{
    top:28%;
  }

  h2{
    font-size: 33px;
    line-height: 35px;
  }

  .container-agilidad{
    background: #0D4DE8;
    border-radius: 40px;
    top:-100px;
    position: absolute;
    padding:20px 30px;
  }

  .contact-btn{
    font-size:14px;
  }

  .btn-verde{
    font-size: 14px;
    padding:15px 30px;
  }



  .description{
    font-size:14px;
    font-weight: 400;
    color:#282828;
  }

  .section-1{
    /*background: linear-gradient(to right, rgba(75, 54, 62, 1) 0%, rgba(34, 26, 29, 1) 100%);*/
    padding-bottom: 100px !important;

  }
}

/* Define la animación */
@keyframes shine {
  from {
    background-position: -200% center;
  }
  to {
    background-position: 200% center;
  }
}

.footer-links ul {
  display: flex; /* Alinea los elementos horizontalmente */
  list-style: none; /* Elimina los puntos de la lista */
  padding: 0;
  margin: 0;
  color: white;
}

.footer-links li {
  padding: 0 10px; /* Espaciado horizontal para separar el texto de las líneas */
  border-right: 1px solid white; /* Crea la línea vertical */
}

.footer-links li a{
  text-decoration: underline;
  color:white;
  text-underline-offset: 3px;
}

.footer-links li:last-child {
  border-right: none; /* Elimina la línea vertical del último elemento */
}

#productos .description{
  font-size:20px;
  color:var(--color-verde);
  letter-spacing: 0;
  font-weight: 500;
  text-align: center;
  text-decoration: none!important;
}

#productos a{
  text-decoration: none;
}

#productos .card img{
  height: 178px;
}

.bold{
    font-weight:600;
}




/* 🔽 Versión mobile */
@media (max-width: 767px) {
 .bwhitemb{
     background:white;
 }    
   .btn-primary-mb{
       width:100%;
       text-align:center;
   }    
    
  #productos .description{
      font-size:18px;
  }    
    
  .slider-mobile {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0px; /* Opcional: añade un pequeño espacio entre productos */
  }

  .slider-mobile > .col-6 {
    /* 100% / 2.5 = 40. Para dejar un pequeño margen, usamos un cálculo */
    flex: 0 0 44%; 
    max-width: 44%;
    scroll-snap-align: center; /* Mejor alineación para este efecto */
  }

  /* Ocultar barra de desplazamiento */
  .slider-mobile::-webkit-scrollbar {
    display: none;
  }

  .mySwiper1{
      height:80vh;
  }      
  
  .mySwiper1 .swiper-button-next{
      top:93%;
      right:20%;
  }
  
  .mySwiper1 .swiper-button-prev{
      top:93%;
      left:20%;
  }
  
  .mySwiper1 .swiper-pagination{
      top:91.5%;
  }
  
  .container-white{
      padding-bottom:0;
      width: 98%;
    border-radius: 10px;
  }    
    
  .footer-links ul {
    display: block; /* apila verticalmente */
    text-align: left;
  }

  .footer-links li {
    display: inline; /* mantiene flujo de texto */
    border-right: none; /* sin líneas verticales */
    padding: 0; /* elimina espaciado lateral */
  }

  .footer-links li::after {
    content: " "; /* separa visualmente los textos */
  }

  .footer-links li a {
    display: inline-block;
    margin-right: 4px;
  }
}
.banner-container h1{
  font-weight: 400;
  font-size: clamp(55px, 6.5vw, 92px);
  line-height: clamp(60px, 7vw, 100px);
  font-family: var(--font-base);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2) 0%,   /* 30% opaco a la izquierda */
    rgba(255, 255, 255, 0.5) 30%,  /* sube a 80% en el centro */
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.4) 70%,  /* mantiene 80% */
    rgba(255, 255, 255, 0.15) 100%  /* 30% a la derecha */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-size: 200% auto; /* el fondo es el doble de ancho */
  animation: shine 8s linear infinite;
}

.banner-container video{
  border-radius: 20px;
}

#mapa{
  /*background: linear-gradient(to bottom, #4daad3, #8cbdd4, transparent);*/
  background: linear-gradient(to bottom, #4daad3, #c6dce7);
}

#mapa h2{
  color:var(--color-secondary);
}

@media(max-width:768px){
  #mapa{
        background: #c5dde9;
  }


}

.map-container {
  position: relative;
  text-align: center;
  color: white;
}

.map-title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  font-weight: bold;
  z-index: 10;
}

.map-wrapper {
  position: relative; /* IMPORTANTE: tooltip se posiciona relativo a este */
  display: inline-block;
}

.map-svg {
  max-width: 100%;
  opacity: 0.8;
}

.map-point {
  position: absolute;
  width: 23px;            /* círculo interior */
  height: 23px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: rgb(255, 255, 255);
  border: 3px solid rgb(0, 168, 255);
  border-radius: 50%;
  animation: pulse-center 1.5s ease-in-out infinite;
}

/* Primer círculo externo */
.map-point::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 53px;
  height: 53px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(0, 168, 255);
  opacity: 0.3;
  animation: pulse-ring 1.5s ease-out infinite;
  z-index: -1;
}

/* Segundo círculo externo */
.map-point::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(0, 168, 255);
  opacity: 0.15;
  animation: pulse-ring 2s ease-out infinite;
  z-index: -2;
}

/* Animación del círculo central (opcional, pequeño pulso) */
@keyframes pulse-center {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* Animación de los anillos externos */
@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}

.tooltip {
  position: absolute;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  display: none;
  pointer-events: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 20;
  opacity: 1;
  width: 180px;
  height: 120px;
  border: 5px solid; /* ancho del borde */
  
  background:
    linear-gradient(white, white) padding-box,    /* fondo del contenido */
    linear-gradient(45deg, #90DE7B, #176511) border-box; /* gradiente del borde */
}

.tooltip h4{
  font-family: var(--font-base);
  color:var(--color-secondary);
  font-size: 1.5rem;
  font-weight: 900;
}

.tooltip .desc{
  font-family: var(--font-secondary1);
  font-size:12px;
  font-weight: 400;
  line-height: 16px;
  color:black;
}

.tooltip .desc span{
  color:var(--color-secondary);
}

.stats {
  display: flex;
  justify-content: space-between; /* espaciado horizontal */
  align-items: center;
  gap: 40px; /* opcional, espacio entre items */
  color:white;
}

.stat {
  color:var(--color-secondary);
  text-align: left;
  position: relative;
  flex: 1;
}

/* Agregar línea a la derecha excepto el último elemento */
.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;   /* grosor de la línea */
  height: 50%;  /* alto de la línea */
  background: linear-gradient(to bottom, #00f, #0ff); /* degradado */
}

.stats .number{
  font-size: 40px;
  font-family: var(--font-base);
}

.stats .label{
  font-size: 18px;
}



/* pagina de contacto */


/* 2. Formulario y Tarjeta */
.form-card {
    background-color: white; /* Asegura fondo blanco */
    max-width: 600px; /* Limita el ancho del formulario */
}

/* 3. Botones con colores exactos */
.custom-green-btn {
    background-color: var(--custom-green) !important;
    border-color: var(--custom-green) !important;
    font-weight: bold;
}

.custom-yellow-btn {
    background-color: var(--custom-yellow) !important;
    border-color: var(--custom-yellow) !important;
    color: #333; /* Texto oscuro en botón amarillo */
    font-weight: bold;
      background:rgba(245, 191, 21, 1)!important;
    border-radius:25px!important;
}

/* 4. Estilo de los inputs */
.form-control {
    border-radius: 25px; /* Bordes ligeramente más redondeados que el defecto */
    height: 50px; /* Un poco más altos para el diseño */
}

textarea.form-control {
    height: auto;
}


/* 5. Separador de Onda (Wave Separator) */
.wave-separator {
    background-color: var(--wave-bg);
    /* Estas propiedades simulan la forma de onda en la parte inferior */
    height: 100px; /* Altura de la sección de onda */
    width: 100%;
    /* Esto es complejo, la forma exacta de la onda requeriría SVG o un clip-path CSS muy específico.
       Por simplicidad responsive, aquí solo se aplica el fondo curvo: */
    border-top-left-radius: 50% 100px;
    border-top-right-radius: 50% 100px;
    margin-top: -50px; /* Levanta la sección para superponerla ligeramente */
    position: relative;
    z-index: 0;
}

/* fin contacto*/






@media (max-width: 768px) {

  .stats{
    gap:0;
  }

}

.cultura-container{
  /* Establece la altura del contenedor para que el degradado sea visible */
  min-height: 100vh; /* O la altura que necesites */
  width: 100%;
  
  /* Agrega la imagen de fondo */
  /*background-image: url('../img/muchik.png');*/
  background-size:100% ;
  background-position: top center;
  background-repeat: no-repeat;
  
  /* * Superpone el degradado verde sobre la imagen de fondo.
   * El primer color es transparente (a 0%), y el segundo es un verde (a 100%).
   */
  /*background-image: linear-gradient(to bottom, transparent 0, transparent 800px, #4b363e 890px, #221a1d), url('../img/muchik.png');*/
  background-color:   #4b363e;
  /*padding-top: 820px;*/
}

.cultura-container .description{
  font-size:clamp(16px,1.1vw,20px);
  font-family: var(--font-montserrat);
  letter-spacing: 1px;
  line-height:clamp(22px, 1.8vw,30px);
  font-weight: 400;
}

.cultura-container .img1{
  height: 250px;
  border-radius: 20px;

}

.cultura-container h3{
  font-size: clamp(22px,2.7vw,42px);
}

.border-right-white{
  border-right: 1px solid white;
}

#modelo{
  /*min-height: 100vh; /* o el alto que necesites */
  background: #bde1fc url("../img/marcas2.png") no-repeat bottom center;
  /*background-image: linear-gradient(to bottom, #bde1fc 0, #bde1fc 95%, white 5%), url('../img/marcas2.png');*/
  background-size: 100% auto; /* la imagen ocupa todo el ancho */
  padding-bottom: 500px;
}

.modelo-col h2 span{
  color:var(--color-secondary);
  font-weight: 900;
}

.fondo-azul{
  background:#0D4DE8;
  border-radius:  40px;
}

.fondo-blanco{
  background:   white;
  border-radius:  40px;
}

.border-bottom-white{
  border-bottom:  1px solid rgb(255,255,255,.8);
 }

.border-bottom-white-strong{

  border-bottom:  4px solid rgb(255,255,255,1);
}

#reconocimientos-valor h2 span{
    color:var(--color-verde-oscuro);
}

#marcas h2 span{
  color:var(--color-secondary);
}

#marcas .card {
  background: #F2F5F9; /* blanco azulado */
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 40px 30px;
  text-align: center;
  width: 280px;
  height: 150px;
  position: relative;
}

#marcas .logo img {
  max-width: 200px;
  height: auto;
  /*margin-bottom: 30px;*/
}

#marcas .btn1 {
  background: white;
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: absolute ;
  bottom: -20px;
  width: 140px;
  transform: translateX(40px);
}

#marcas .btn1:hover {
  background: #f0f0f0;
  
}

.btn-blue {
  width: 310px;
  color: #022E94;
  border: 1px solid #022E94;
  line-height: 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-secondary1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 25px;
  text-decoration: none;
  border-radius: 100px;
  position: relative;
  background: transparent; /* importante */
  overflow: hidden;        /* para que el pseudo no se salga */
  cursor: pointer;
  z-index: 1;
}

/* capa de agua */
.btn-blue::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  height: 100%;
  background: rgba(0, 61, 193, 1);
  z-index: -1;
  transition: bottom 0.5s ease;
}

.btn-blue:hover {
  color: white; /* cuando suba el agua, el texto se pone blanco */
}

.btn-blue:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}



.btn-white {
  width: 310px;
  color: black;
  border: 1px solid black;
  line-height: 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-secondary1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 25px;
  text-decoration: none;
  border-radius: 100px;
  position: relative;
  background: transparent; /* importante */
  overflow: hidden;        /* para que el pseudo no se salga */
  cursor: pointer;
  z-index: 1;
}

/* capa de agua */
.btn-white::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  height: 100%;
  background: black;
  z-index: -1;
  transition: bottom 0.5s ease;
}

.btn-white:hover {
  color: white; /* cuando suba el agua, el texto se pone blanco */
}

.btn-white:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}


/* boton fondo azul letras blancas*/
.btn-blue2 {
  width: 310px;
  color: #fff;
  /*border: 1px solid #022E94;*/
  line-height: 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-secondary1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 25px;
  text-decoration: none;
  border-radius: 100px;
  position: relative;
  background: rgba(38, 89, 255, 1); /* importante */
  overflow: hidden;        /* para que el pseudo no se salga */
  cursor: pointer;
  z-index: 1;
}

/* capa de agua */
.btn-blue2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%; /* inicia fuera del botón */
  width: 100%;
  height: 100%;
  background: rgba(0, 61, 193, 1);
  z-index: -1;
  transition: bottom 0.5s ease;
}

.btn-blue2:hover {
  color: white; /* cuando suba el agua, el texto se pone blanco */
}

.btn-blue2:hover::before {
  bottom: 0; /* sube hasta cubrir el botón */
}

#productos-destacan{
  background: white;
}

#swiper-productos .swiper-slide{
  background: white;
}

.product-card {
  border: 1px solid rgba(229, 219, 215, 1);
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease;
  width: 285px;
  height: 434px;
  padding: 16px;
  background: white;
}

.product-card .card-text, .product-card .card-title{
  text-align: left;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.product-card img {
  border-radius: 15px 15px 0 0;
  object-fit: cover;
  height: 210px;
  width: 100%;
}

.badge-product {
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 14px;
  background: #fff;
}

.product-link {
  display: inline-block;
  font-weight: 600;
  color: #000;
  text-decoration: none;
}

.product-link:hover {
  text-decoration: underline;
}


/* Personalizar flechas */
#swiper-productos .swiper-button-next,
#swiper-productos .swiper-button-prev {
  background: rgba(64, 45, 38, .5);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  color:white;
}

#swiper-productos .swiper-button-next{

}

#swiper-productos .swiper-button-next:after,
#swiper-productos .swiper-button-prev:after {
  font-size: 18px;
  color: #fff;
}

.equipo{
  /*background: linear-gradient(to bottom, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 70%, rgba(237, 0, 0, 1) 70.1%, rgba(237, 0, 0, 1) 100%);*/
  background: var(--color-rojo-danper);
  border-radius: 40px;
}

.equipo2{
  background:   var(--color-secondary)!important  ;
  border-radius: 40px;
}

#equipo{
  background: rgba(242, 242, 242, 1);
}

.bwhite{
  background:   white!important ;
}

#equipo img{
  border-top-right-radius:  40px;
  border-bottom-right-radius:  40px;
}


#equipo-valor{
  background: linear-gradient(to bottom, #D2ECFF 0%, #D2ECFF 70%, rgba(237, 0, 0, 1) 70.1%, rgba(237, 0, 0, 1) 100%);

}

#equipo-valor .container{
  border-radius: 40px;
}

#eventos .nav-pills .nav-link.active,#eventos .nav-pills .show>.nav-link{
  background: transparent;
  border-left: 1px solid rgba(26, 26, 26, 1);
  color:rgba(26, 26, 26, 1);
  font-size: 18px;
  line-height: 26px;
  font-family: var(--font-secondary1);
  border-radius: 0;
  margin-bottom: 15px;
  font-weight: 900;
  color: rgba(26, 26, 26, 1);
  text-align: left;
}
#eventos .nav-pills .nav-link{
  margin-bottom: 15px;
  color: #424242;
  text-align: left;

}

#eventos{
  background: rgba(242, 242, 242, 1);

}

#eventos h2 span{
  color: var(--color-secondary);
}

#eventos .noticia, .noticia{
  text-align:left;
  height:550px;
}

#eventos .mySwiper{
  padding-left:0;
}

#compromiso{
  background: #375FFF;
  font-family: var(--font-secondary1);
  font-size: 16px;
}

#compromiso .nav-tabs{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

@media(max-width:768px){
  #compromiso .nav-tabs{
    flex-wrap: nowrap;
  } 
}


#compromiso .nav-scroller{
  border-bottom: 1px solid white;
}

#compromiso .nav-pills .nav-link{
  background: transparent;
  color:white;
  border:0;
  padding-top:20px;
  padding: 19px;
  font-size: clamp(16px,1.56vw,24px);
  font-family: var(--font-base);
  border-radius: 0;
}
#compromiso .nav-pills.show .nav-link,#compromiso .nav-pills .nav-link.active{
  background: transparent;
  color:#A6FF0D;
  border: 0;
  border-bottom: 1px solid #A6FF0D;
  font-family: var(--font-base);
  padding-top:20px;
  padding-bottom: 19px;
  font-size: clamp(16px,1.56vw,24px);
  text-decoration:  none;
}

#productos{
  background: white;
}

#productos .card{
  background: #F7F4EE;
  border:2px solid #D1C3A0;
  padding:15px;
  border-radius: 20px;
  text-align: center;
  transition: ease .25s;
}

#productos .card img{
  transition: ease .25s;
}

#productos .card:hover img{
  transform:scale(1.05);
  transition: ease .25s;
}


@media(max-width:768px){
  #compromiso .nav-tabs .show .nav-link,#compromiso .nav-tabs .nav-link.active{
    padding-bottom:41px;
    text-decoration: none;
  } 
}

#compromiso .tab-pane{
  color: white;
}

#compromiso .description{
  font-size: clamp(16px,1.56vw,24px);
}

#compromiso h3{
  font-size: clamp(26px,2.8vw,44px);
}

.numbers{
  font-size: clamp(24px,2.8vw,45px);
  font-family: var(--font-base);
  color: #A6FF0D;
  font-weight: 400;
}

.testimonial-card {
  background: rgba(41, 57, 196, 0.3);
  border-radius: 40px;
  color: white;
}

.testimonial-card p{
  color:white;
  font-size: 16px;
  font-family: var(--font-secondary1);
  letter-spacing: 2px;
}

.testimonial-img {
  width: 80px;   /* Tamaño de la foto */
  height: auto;
  object-fit: cover;
  
}

.testimonial-card h5{
  font-weight: 600;
  font-family: var(--font-base);
}

.testimonial-card .nombre{
  font-size:16px;
  letter-spacing: 1px;
}

.card-proyecto {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-color: #375FFF;
  color: #333;
  max-width: 383px;
}

.card-proyecto .card-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}



.badge-proyecto {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #375FFF;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  padding: 16px 24px;
  border-radius: 50px;
  font-family: var(--font-base);
}

#compromiso .badge-proyecto{
  background:   white;
  color: var(--color-secondary);
}

.icono-proyecto {
   position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #375FFF;
    transition: transform 0.2s ease;
    top: 20px;
    right: 20px;
    transform: rotate(-45deg);
}

.card-proyecto .icono-proyecto i {
    font-size: 25px;
    color: #375FFF;
    font-weight: thin;
}

.card-proyecto .icono-proyecto:hover {
  transform: rotate(0deg); /* Rota la flecha un 20% (20 grados) hacia arriba */
}

.card-proyecto-body {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  position: absolute;
  margin-top: -50px; /* Para que suba sobre la imagen */
  margin-left: 20px;
  margin-right: 20px;
  bottom:20px;
}

.card-proyecto-body h5 {
  margin-bottom: 10px;
}

.leer-mas {
  text-decoration: none;
  font-weight: 600;
  color: #333;
}

.leer-mas i {
  margin-left: 5px;
}

#equipo2{
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 70%, rgba(237, 0, 0, 1) 70.1%, rgba(237, 0, 0, 1) 100%);

}

#equipo2 .container{
  border-radius: 40px;
}

#agua .testimonial-card{
  background: rgba(0, 125, 184, 1);
}

#equidad .testimonial-card{
  background: rgba(54, 47, 44, 0.3);
}

#suelo h3 span{
  color:rgba(13, 77, 232, 1);
}

.description-valor{
  font-family: var(--font-base);
  font-size: clamp(18px,1.5vw,24px);
  line-height: 32px;
  font-weight: 400;
}

.description-valor::first-letter {
  text-transform: uppercase; /* fuerza mayúscula */
  font-size: 60px;           /* mucho más grande */
   
}

.section-1-valor {
  background: linear-gradient(
    to bottom, 
    rgba(75, 54, 62, 1) 0%, 
    rgba(34, 26, 29, 1) 100%
  );
  
}

.section-1-valor .cita{
  font-size: 20px;
  line-height: 28px;
  font-weight: 900;
  color:white;
}

.section-1-valor .cita2{
  font-size: 16px;
  line-height: 24px;
  color:white;
  font-weight: 400;
}

#calidad-vida{
  background: linear-gradient(to right, rgba(38, 89, 255, 1), rgba(0, 61, 193, 1));

}

#calidad-vida h1{
  font-size: clamp(36px,3.9vw,60px);
  line-height: clamp(48px,4.5vw ,70px);
  font-family: var(--font-base);
  letter-spacing: 0.3px;
  font-weight: 400;
  color:white;
}

#calidad-vida h1 span{
  color: var(--color-anaranjado);
}


.mySwiperValor .card-custom {
  background: rgba(255, 179, 0, 1) url(../img/anillo.png);
  border-radius: 30px;
  padding: 20px;
  color: #000;
  font-family: Arial, sans-serif;
  transition: transform 0.3s ease;
  height: clamp(208px,24.8vw,382px);
  width: 285px;

}

.mySwiperValor .card-custom{
  background-repeat: no-repeat;
  background-position: top left;
  font-size: clamp(18px,1.8vw,28px);
  line-height: clamp(24px,2.3vw,36px);
  color:rgba(31, 31, 31, 1);
  text-align: left;
}

/* Numeración destacada */
.mySwiperValor .card-custom .number {
  display: inline-block;
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 45px;
  color:rgba(31, 31, 31, 1);
  top: 30px;
    left: 25px;
    position: absolute;
}

/* Alternancia de niveles */
.mySwiperValor .swiper-slide.odd {
  margin-top: 0px;
}
.mySwiperValor .swiper-slide.even {
  margin-top: 40px;
}

/* Hover animado */
.mySwiperValor .swiper-slide.odd:hover {
  transform: translateY(20px);
}
.mySwiperValor .swiper-slide.even:hover {
  transform: translateY(-20px);
}

/* Botones Swiper personalizados */
.mySwiperValor .swiper-button-next,
.mySwiperValor .swiper-button-prev {
  color: black;
      right: var(--swiper-navigation-sides-offset, 24px);
      top: var(--swiper-navigation-top-offset, 90%);
  background: white;
}

.mySwiperValor .swiper-button-next:after,.mySwiperValor .swiper-button-prev:after{
  font-family: var(--fa-style-family, 'Font Awesome 6 Free');
}

.mySwiperValor .swiper-button-prev:after{
  content: '';
}

.mySwiperValor .swiper-button-next:after{
  content: '';
}

#construimos{
  background: rgba(210, 236, 255, 1);
  min-height: 100vh;
}

#construimos h1{
  font-size: clamp(30px,3.7vw,57px);
  line-height: clamp(36px,4.1vw,64px);
  letter-spacing: 0.3px;
}

#estadisticas-valor h2 span{
  color:var(--color-verde);
}

/* Alternancia de niveles */

.compromisocard{
  width:clamp(350px, 24.7vw,380px);
  height: 585px;
  background-size: cover;
  background-repeat:  no-repeat ;
}
#construimos .compromisocard.even , .even{
  margin-top: 0px;
}
#construimos .compromisocard.odd , .odd{
  margin-top: 80px;
}

.list-products img{
  gap:20px;
  max-height: 294px;
}

.compromisocard h3{
  font-size:28px;
  font-family:  var(--font-base);
  line-height:  36px;
  text-align:   center  ;
  font-weight:  900;
}

/*tabs-iniciativas*/


.tabs-iniciativas .bg-light-blue {
  background-color: transparent; /* fondo celeste claro */
}

.tabs-iniciativas .nav-pills {
  display: flex;
  justify-content: space-between; /* distribuye */
  width: 100%;
  gap: 25px; /* espacio fijo entre botones */
  padding: 0;
  margin: 0 auto;
}

/* Hacer que cada li ocupe el mismo ancho */
.tabs-iniciativas .nav-pills .nav-item {
  flex: 1 1 0;
}

/* Botón dentro del li al 100% */
.tabs-iniciativas .nav-pills .nav-link {
  width: 100%;
  text-align: center;
}

/* Tabs estilo pills */
.tabs-iniciativas .nav-pills .nav-link {
  background-color: rgba(64, 45, 38, 1); /* marrón apagado por defecto */
  color: rgba(178, 157, 164, 1);
  transition: all 0.3s ease;
  font-family:var(--font-base);
}
.tabs-iniciativas .nav-pills .nav-link:hover {
  filter: brightness(0.9);
}
.tabs-iniciativas .nav-pills .nav-link.active {
  background-color: rgba(38, 89, 255, 1); /* azul intenso para el activo */
  font-family:var(--font-base);
  color: white;
}

/* Cards */
.tabs-iniciativas .card, .card-social .card {
  border-radius: 40px;
  overflow: hidden;
  background: white;

}

.tabs-iniciativas .card .card-title, .card-social .card .card-title{
  font-size: 24px;
  font-weight: 900;
}
.tabs-iniciativas .card-img-top, .card-social .card-img-top {
  height: 180px;
  object-fit: cover;
}

.tabs-iniciativas .card-text, .card-social .card-text{
  font-family: var(--font-secondary1);
  font-size:16px;
}
.tabs-iniciativas .card a, .card-social .card a {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-secondary1);
  font-size:14px;
  letter-spacing: 1px;
}

#valor-sostenibilidad{
  background: rgba(74, 90, 236, 1);
}

#estadisticas-valor{
  background: linear-gradient(to bottom, #4A5AEC 65%, #fff 65.1%);
}

#estadisticas-valor .description{
  font-size: 24px;
  line-height: 35px;
}

#objetivos h1{
  font-size: clamp(36,3.9vw,60px);
}

#lineas{
  background: linear-gradient(to bottom, rgba(34, 26, 26, 1), rgba(75, 54, 62, 1));
}


.tabs-lineas .bg-light-blue {
  background-color: transparent; /* fondo celeste claro */
}

.tabs-lineas .nav-pills {
  display: flex;
  justify-content: space-between; /* distribuye */
  width: 100%;
  gap: 25px; /* espacio fijo entre botones */
  padding: 0;
  margin: 0 auto;
}

/* Hacer que cada li ocupe el mismo ancho */
.tabs-lineas .nav-pills .nav-item {
  flex: 1 1 0;
}

/* Botón dentro del li al 100% */
.tabs-lineas .nav-pills .nav-link {
  width: 100%;
  text-align: center;
}

/* Tabs estilo pills */
.tabs-lineas .nav-pills .nav-link {
  background-color: rgba(50, 40, 44, 1); /* marrón apagado por defecto */
  color: rgba(178, 157, 164, 1);
  transition: all 0.3s ease;
  font-family:var(--font-base);
}
.tabs-lineas .nav-pills .nav-link:hover {
  filter: brightness(0.9);
}
.tabs-lineas .nav-pills .nav-link.active {
  background-color: var(--color-anaranjado); /* azul intenso para el activo */
  font-family:var(--font-base);
  color: rgba(31, 31, 31, 1);
  padding-top: 10px;
    padding-bottom: 10px;
}

/* Cards */
.tabs-lineas .card {
  border-radius: 40px;
  overflow: hidden;
  background: white;
  height: 450px;
  position:relative;
}

.tabs-lineas .card .card-bod{
  background: white;
  border-radius: 40px;
  padding:25px;
  font-size: clamp(12px,0.97vw,15px);
  color:#344054;
  height: 226px;
  display: grid;
}

.tabs-lineas .card-bod h4{
  font-size: 18px;
  font-weight: 900;
}

.section-white{
  background: white;
}

.section-white h1 span{
  color:#26B300;
  font-weight: 400;
}

.grilla-productos{
  margin-bottom:25px;
}

.grilla-productos .btn-blue{
  padding:10px 30px;
  width: auto;
  border:1px solid var(--color-verde-petroleo);
  color:  var(--color-verde-petroleo);
}

.grilla-productos h1{
  font-size: 36px;
}

.grilla-productos .card{
  border:1px solid #E5DBD7;
  border-radius: 40px;
  min-height: 464px;
  min-width: clamp(160px, 19.92vw, 304px);
  max-width: 306px;
}

.grilla-productos .card img{
  height: 210px;
}

.grilla-productos .card h2{
  color: #363636;
  font-size: 18px;
  line-height: 24px;
}

.grilla-productos .card h3{
  color: #363636;
  font-size: 16px;
  line-height: 24px;
}

.grilla-productos .card .hashtag{
  padding: 2px 8px;
  font-size: 14px;
  line-height: 20px;
  color: #0D0D0D;
  border:1px solid #D6D6D6;
  border-radius: 100px;
  margin-right: 5px;
  display: inline-block;
  margin-bottom: 5px;
}

.grilla-productos .card .boton{
  font-family: var(--font-secondary1);
  font-size: 14px;
  letter-spacing: 1px;
  color:#1f1f1f;
  line-height: 20px;
  padding: 10px 12px;
  text-decoration: none;
}

.grilla-productos .card .marca{
  background: #CCE69F;
  padding:8px 16px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  color:var(--color-primary);
  font-size: 16px;
  font-family: var(--font-secondary1);
  position: absolute;
  left:35px;
  top:0px;
}

.scroll-container {
  overflow-x: auto;
  scrollbar-width: thin;              /* Para Firefox */
  scrollbar-color: #fff transparent; /* color del thumb y el fondo */
  display: flex;
  gap:25px;
}

#certificaciones .scroll-container{
  gap:40px;
}

.mycustom-marque.style-2 {
        margin-top: 0;
        transform: rotate(0);
    }

.mycustom-marque.style-2 {
    
    background: var(--white);
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
    
    margin-top: -15px;
    position: relative;
    z-index: 9;
}

.scrolling-wrap {
    overflow: hidden;
    white-space: nowrap;
    display: flex
;
    gap: 0px;
    margin-top: -14px;
}

.scrolling-wrap .comm {
    display: flex;
    align-items: center;
    animation: scroll 60s linear infinite;
    gap: 0;
    cursor: pointer;
}
@media (max-width: 1399px) {
    .scrolling-wrap .comm {
        gap: 0;
    }
}

.mycustom-marque.style-2 .scrolling-wrap .comm .cmn-textslide {
    font-size: 30px;
    font-weight: 800;
    text-transform: capitalize;
    color: var(--header);
    padding-top: 10px;
}

.scrolling-wrap .comm .cmn-textslide {
    font-size: 60px;
    font-weight: 800;
    line-height: 80px;
    text-transform: capitalize;
    font-family: "Monserrat", sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scrolling-wrap:hover .comm {
    animation-play-state: paused;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}





@media(max-width:768px){

  .subscription-form{
    padding:5px;
  }

  .subscribe-button{
    padding:10px;
    font-size: 12px;
  }

  .grilla-productos .scroll-container{
    gap:15px;
  }
  .grilla-productos .btn-blue {
    padding: 10px 30px;
    width: 180px;
    height: 50px;
  }

  .grilla-productos h1{
    font-size:28px;
  }
}

/* Para Chrome, Edge y Safari */
.scroll-container::-webkit-scrollbar {
  height: 8px; /* altura de la barra horizontal */
}

.scroll-container::-webkit-scrollbar-track {
  background: transparent; /* Fondo del track */
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #D3C3BE; /* Color de la barra */
  border-radius: 10px;
}

.border-top-danper{
  border-top:1px solid var(--color-marron-oscuro-danper);
}

#nuestras-marcas{
  background: var(--color-marron-claro-danper);
}

.marca-card{
  background: white;
  min-height: 353px;
  text-align: left;
  border-radius: 20px;
}

.marca-card h2{
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
  color:#0E0F12;
}

.marca-card .mcard-body{
  font-size: 14px;
  color: rgba(14, 15, 18, 0.7);
  line-height: 22px;
}

#section-category{
  background:   white;
}

#section-category a{
  color:var(--color-primary);
  text-decoration:  none;
}

#section-category h1{
  font-size:57px;
  line-height:  64px;
  left:   0.3px;
  color:var(--color-primary);
}

.barra-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;          /* que ocupe todo el ancho */
  background-color: #F2F2F2; /* tu color */
  text-align: center;
  padding: 10px;
  font-weight: bold;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* opcional sombra */
  z-index: 9999; /* para que esté siempre encima */
}

#otros-productos{
  background:   white;
}

#section-producto{
  background:   white;
}

#section-producto .navigation {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb a{
  color:var(--color-gris-oscuro);
  text-decoration:  none;
}

.breadcrumb .active{
    color:var(--color-rojo-intenso)!important;
    font-weight:  500;
}

#section-producto .description{
  font-size: 16px;
}

#section-producto .icons-div img{
  height: fit-content;
}

.details{
  background: #EFF7DE;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom: 1px solid #0A4400;
  text-align: center;
  color: #0A4400;
  font-weight: 500;
}

#section-producto h1{
  font-size: 45px;
  line-height: 52px;
  color: #141313;
  font-weight: 400;
}

#section-producto h4{
  font-size: 20px;
  line-height: 28px;
  color:#402D26;
  font-weight: 400;
  font-family: var(--font-base);
}

#section-producto table{
  width: 80%;
  color:var(--color-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  font-family: var(--font-secondary1);
}

#section-producto table tr td{
  padding-top:15px;
}

#section-producto .hashtag{
  padding: 2px 8px;
  font-size: 14px;
  line-height: 20px;
  color: #0D0D0D;
  border:1px solid #D6D6D6;
  border-radius: 100px;
  margin-right: 5px;
  display: inline-block;
  margin-bottom: 5px;
}

#grilla-blog{
  background: #F2F2F2;
}

.swipernoticias {
      width: 100%;
      height: 496px;
      border-radius: 20px;
    }

   .swipernoticias .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: start;
      align-items: center;
      background-size:cover!important;
      background-repeat: no-repeat;
    }

  .swipernoticias  .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


@media only screen and (min-width: 992px){
  .swipernoticias .swiper-slide .noticia{
    width: 60%;
    height: 100%;
    background: transparent;
  }

}

.tabs-noticias .noticia{
  text-align:left;
  height:550px;
}

.tabs-noticias .description{
  letter-spacing: 1.5px;
}

.productos-destacados h1 span{
  color:var(--color-secondary);
  font-weight: 900;
}

#redes{
  background: #F6F3F2;
}

.descubrir-div{
  background: url("../img/personas.png") no-repeat bottom center;
}

@media (min-width: 768px) { /* Bootstrap's 'md' breakpoint */
      .h-md-100vh {
        height: 100vh !important;
      }

      .h-md-88vh{
        height:   94vh!important;
      }

    }

#cultura hr{
  display: none;
}

#cultura h3 span{
  color: var(--color-anaranjado);
}

#section-producto{
    padding-top: 50px;
  }

.absolute-mapa{
  bottom:0;
  left:0;
}

@media screen and (max-width:932px){

  hr{
    margin:0 auto;
  }

  .absolute-mapa{
    bottom:0px;
  }

  .stats .number{
    font-size: 25px;
  }

  #section-producto{
    padding-top: 90px;
  }
  #section-category h1{
    font-size:36px;
    line-height: 48px;
  }

  .descubrir-div{
    background: none;
  }

  .descubrir-div .btn-transparent{
    font-size: 14px;
    font-family: var(--font-secondary1);
    letter-spacing: 2px;
    font-weight: 700 ;
    padding:15px 20px!important ;
  }

  .container-testimonios{
    padding-bottom: 208px;
   
    background: 
    url("../img/personasmb.png") no-repeat bottom center, /* imagen abajo */
    linear-gradient(
    to left, 
    #176511 0%, 
    #90DE7B 100%
  ); /* color debajo */
  }

  .orgullo-div{
    padding-top:650px!important;
  }

  .orgullo-div h2{
    font-size: 36px;
    line-height: 48px;
    letter-spacing: 0.3px;
  }

  .grilla-productos .card img {
    height: 180px;
    }

  .grilla-productos .card h3{
      font-size:  12px;
  }

  .grilla-productos .card .hashtag  {
    font-size:  12px;
  }

  .section-2 {
    
    /*background: #D2ECFF url(../img/muchik1.png) no-repeat bottom center;*/
    background-size: auto;
  }

  .section-3{
    min-height:   auto;
    background:   url(../img/muchik2.png);
    background-size:  cover;
    background-position-x:  30%;
  }

  .section-3 h2{
    font-size:  40px;
  }

  .div-somos{
    padding-top:150px;
  }

  

  .swpcertif  .brand, .swpsocial  .brand, .swpamb  .brand{
    border-radius:  0;
  }

  .logo-blanco{
    width:80px;
  }

  .transparent-navbar.fixed{
    padding: 15px 0!important;
    height: 78px;
  }

  .navbar-toggler i{
    color:black;
  }

  .transparent-navbar.fixed .navbar-toggler i{
    color:#10662F;
  }

  .topb-mb{
    justify-content:  space-between;
  }

  .topb-mb .logo-blanco  {
            margin-left: 10px;
        width: 72px;
        /* margin-top: 10px; */
        /* margin-bottom: 10px; */
        padding-top: 7px;
  }

  .fixed .logo-blanco-scroll {
    
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 180px;
    padding:0!important;
    width: 180px!important;
}

  .navbar-nav .dropdown-menu {
    display:  block;
    
    background:   transparent;
    box-shadow:none;
    border:0;
  }

  .banner-container {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;
      background: linear-gradient(to bottom, #4B363E, #221A1A);
    }
  .banner-container .container-interno{
     height:  auto;
  }

  #mapa{
    height:   55vh;
  }

  .container-desc-mapa{
    padding-top:255px;
  }

  .stats .label{
    font-size:  13px;
    line-height: 18px;
  }

  .cultura-container{
    background-image: linear-gradient(to bottom, transparent 0, transparent 180px, #4b363e 200px), url(../img/muchik.png);
    /*padding-top: 260px;*/
  }

  .cultura-container .img1{
    height:170px;
  }

  #cultura hr {
    padding:0;
    margin-top: 50px;
    margin-bottom: 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1;
    display: block;
  }

  .txt-valores{
    font-size: 20px!important;
    padding-left:30px;
    padding-right: 30px;
    letter-spacing: 1px;
  }

  #modelo h2{
    font-size: 30px;
  }

  .border-bottom-white-strong {
    border-bottom: 3px solid rgb(255, 255, 255, 1);
  }

  #marcas .card{
    width: 100%;
  }

  #marcas .btn1{
    transform: translateX(50%);
  }

  #modelo{
    padding-bottom: 120px;
  }

  #productos-destacan .card{
    width: 325px;
    border-radius: 20px;
  }

  .card-title{
    font-size:18px;
  }

  .product-link{
    font-size: 14px;
  }

  #productos-destacan .badge-product{
    font-size: 12px;
  }

  #productos-destacan .card img{
    border-radius: 20px;
  }

  .nav-scroller {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* Scroll suave en móviles */
  }

  .nav-scroller::-webkit-scrollbar {
    display: none; /* Oculta la barra */
  }

  .description-valor{
    font-weight: 400;
    line-height: 24px;
  }

  .mySwiperValor .card-custom {
    background: rgba(255, 179, 0, 1) url(../img/circle-mb.png);
    background-repeat: no-repeat;
  }
  .mySwiperValor .card-custom .number {
    display: inline-block;
    font-family: var(--font-base);
    font-weight: bold;
    font-size: 24px;
    color: rgba(31, 31, 31, 1);
    top: 15px;
    left: 10px;
    position: absolute;
  }
  #construimos .compromisocard.odd {
  margin-top: 10px;
  }
  #objetivos{
    padding-top:570px;
  }


  .swiper-slide{
    align-items: center;
  }

  .tabs-iniciativas .card-text, .card-social .card-text{
    font-size: 14px;
  }

  .tabs-iniciativas .card-img-top, .card-social .card-img-top{
    height: 220px;
  }

  .btn-blue {
    font-size:14px;
    line-height:  14px;
  }

  .tabs-lineas .card-bod h4{
    font-size:  16px;
  }

  .tabs-lineas .card .card-bod{
    padding:20px;
  }

  .tabs-lineas  .card .card-bod div{
    display: -webkit-box;
    -webkit-line-clamp: 3; /* número de líneas a mostrar */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }


}

@media(max-width:576px){


  #mapa{
    height:   50vh;
  }  

  #objetivos{
    padding-top:400px;
  }

  .marca-card h2 {
    font-size: 16px;
    font-weight: 900;
    line-height: 25px;
    color: #0E0F12;
  }
}

@media(min-width:910px){
  .test-div{
    min-height: 60vh;
  }


}

@media(min-width:1200px){
  .test-div{
    min-height: 105vh;
  }
}

  /* Scroll horizontal solo en pantallas pequeñas */
  @media (max-width: 767.98px) {

    .swipernoticias .noticia{
      background: transparent;
    }

    .card-proyecto p{
      font-size:  14px;
    }

    .scroll-row {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 1rem; /* espacio entre cards */
      padding-bottom: 1rem;
      scroll-snap-type: x mandatory;
    }

    .scroll-row > .col-md-4 {
      flex: 0 0 80%; /* ancho de cada card en mobile (ajusta al gusto) */
      scroll-snap-align: start;
    }

    /* Oculta la barra de scroll visualmente */
    .scroll-row::-webkit-scrollbar {
      display: none;
    }
    .scroll-row {
      -ms-overflow-style: none; /* IE y Edge */
      scrollbar-width: none; /* Firefox */
    }

    .offcanvas .btn-verde {
      background:var(--color-rojo-danper);
      color:white;
    }

    .test-div{
      min-height: 60vh;
    }

  }




.swporgullo{ width:100%; padding:12px 0; background: transparent;}

.swporgullo .swiper-slide {
    
    border-radius: 8px;
    
    
    box-sizing: border-box;
    
    background: transparent;
  }

  .swporgullo .cards-nosotros {
      border-radius:  40px;
  }

.swptestimonios,.swpcertif, .swpsocial, .swpamb { width: 100%; padding: 12px 0; }
  .swptestimonios .swiper-slide {
    background: #fff;
    border-radius: 8px;
    
    padding: 18px;
    box-sizing: border-box;
    min-height: 120px;
    background: transparent;
  }
.swpcertif .swiper-slide, .swpsocial .swiper-slide, .swpamb .swiper-slide {
  background:   transparent;
}

.swptestimonios .card-testimonio{
  width: 260px;
  height: 410px;
}

.swptestimonios .card-testimonio img{
  width: 64px;
  height: 64px;
}

.swptestimonios .card-testimonio .name{
  font-size: 18px;
  width: 100%;
    display: block;
}

.swptestimonios .card-testimonio .para{
  font-size: 16px;
}

.offcanvas.show:not(.hiding), .offcanvas.showing{
  width: 100%;
  border:0;
}

.transparent-navbar, .transparent-navbar.fixed{
  /*padding-top:15px;
  padding-bottom:15px;*/
}


.offcanvas .nav-link {
  color: #fff;
  padding: 0.75rem 0;
}

.offcanvas .nav-link{
  color:var(--color-primary);
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
}

.offcanvas .nav-item{
  border-bottom: 1px solid #BDD0D9;
  padding-top:15px;
  padding-bottom: 15px;
}
.offcanvas .nav-link:hover,
.offcanvas .nav-link.active {
  color: var(--color-verde); /* o verde corporativo */
  text-decoration: none;
  font-weight: 700;
}

.offcanvas .dropdown-menu {
  background-color: transparent; /* oscuro */
  border: none;
}

.offcanvas .dropdown-item {
  color: #ddd;
  word-break: break-word;
  white-space: normal;
}

.offcanvas .dropdown-item:hover {
  color: #7aff00;
  background: transparent;
}

.offcanvas.offcanvas-start{
  border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.offcanvas.offcanvas-start .btn-verde {
  font-weight:  700;
}

#construimos{
  overflow-x: hidden;
}

@media(min-width:992px){
  .mision .title{
  transform:translateY(50px);
  transition: ease .3s;
  }

  .mision .description{
    opacity: 0;
    transition: ease .3s;
  }

  .hover1:hover .mision .description{
    opacity: 1;
    transition: ease .3s;
  }

  .hover1:hover .mision .title{
    transform:translateY(0);
    transition: ease .3s;
  }


  .vision .title{
  transform:translateY(50px);
  transition: ease .3s;
  }

  .vision .description{
    opacity: 0;
    transition: ease .3s;
  }

  .hover2:hover .vision .description{
    opacity: 1;
    transition: ease .3s;
  }

  .hover2:hover .vision .title{
    transform:translateY(0);
    transition: ease .3s;
  }

}


@media(min-width :1400px){
  .h-md-88vh{
        height:   98vh!important;
      }
  .cultura-container{
      /*padding-top:950px;*/
  }
}

#banner-producto, #banner2{
  min-height: 100vh;
}

#banner-producto h1{
  color:var(--color-anaranjado);
  font-size: 64px;
  font-weight: 700;
}

#banner-producto .nav-tabs .nav-item.show .nav-link, #banner-producto .nav-tabs .nav-link.active{
  min-width: 172px;
  border-radius: 100px;
  border:1px solid #E4AE43;
  background: #E4AE43;
  color:black;
}

#banner-producto .nav-tabs{
  border-bottom: none;
}

#banner-producto .nav-tabs .nav-link{
  border:1px solid #E4AE43;
  color:white;
  min-width: 172px;
  border-radius: 100px;
}

.months-container {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  gap: 1.1rem;
  
  font-family: "Poppins", sans-serif;
  color: #fff;
}

.month {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
}

.month .icon {
  width: 28px;
  height: 28px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: transparent;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

/* Estado activo (mes con check naranja) */
.month.active .icon {
  background-color: #f7941d; /* naranja */
  border-color: #f7941d;
  color: white;
}

/* Etiqueta debajo del círculo */
.month .label {
  font-weight: 500;
  font-size: 0.85rem;
}

/* Adaptable a pantallas pequeñas */
@media (max-width: 600px) {
  .months-container {
    gap: 1rem;
  }

  .month .icon {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .month .label {
    font-size: 0.75rem;
  }
}


#carousel .swiper {
    width: 100%;
    
  }

#carousel .mySwiper{
  padding-left: 0;
  border-radius: 0;
}

#carousel .mySwiper .swiper-slide img{
  border-radius: 0;
}



  /* Solo en mobile */
  @media (max-width: 768px) {
      
    .bk-white{
        min-width:160px;
        width:180px;
    }
    
    .bk-white h5{
        font-size:18px;
    }
      
    .SwPilares .swiper-slide{
        background:transparent;
    }  
    
    .SwPilares .swiper-slide img{
        width:47px;
    }
      
      
     .cultivo-item{
         width:64px;
         height:64px;
     }

    #carousel .mySwiper{
      padding-bottom: 100px;
    }

    #carousel .swiper-button-prev,
    #carousel .swiper-button-next {
      color: #fff !important; /* verde */
      bottom: 10px !important; /* abajo del carrusel */
      top: auto !important;
      background: #A2C533;
    }

    /* Centramos horizontalmente */
    #carousel .swiper-button-prev {
      left: 35%;
    }
    #carousel .swiper-button-next {
      right: 35%;
    }

    .no-border-mb{
      border-bottom: 0!important;
    }
  }





.border-white{
border-bottom: 1px solid white;
}

/* quiebres*/

@media(max-width: 1400px){
  .cards-nosotros .contenedor{
    height: 250px;
  }

  .section-1 {
    /*padding-bottom:200px!important;*/
  }


}

@media(max-width: 1280px){



  .cards-nosotros .contenedor{
    height: 250px;
  }

  .section-1 {
    padding-bottom:100px!important;
  }

  .section-2 {
        /*min-height: 350vh;*/
    }

  .test-div {
        min-height: 97vh;
    }
  .cultura-container{  
    background-image: linear-gradient(to bottom, transparent 0, transparent 600px, #4b363e 690px, #221a1d), url(../img/muchik.png);
  }
}

@media(min-width:993px){
  .navbar-expand-lg .offcanvas{
    display: none!important;
  }
}

@media(max-width: 992px){

  .siguenos .description{
    font-size: 16px;
    line-height: 20px;
  }

  .siguenos i{
    color:#10662F;
    font-size:32px;
  }

  #banner{
    height: 30vh;
  }

  #productos .card img{
    height: 120px;
  }

  .fixed .logo-blanco-scroll {
    
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 180px;
    padding:0!important;
    width: 180px!important;
}


  .cards-nosotros .contenedor{
    height: 370px;
  }

  .section-1 {
    padding-bottom:100px!important;
  }

  .section-2 {
        /*min-height: 200vh;*/
    }
      .cultura-container {
        background-image: linear-gradient(to bottom, transparent 0, transparent 190px, #4b363e  212px);
       /* padding-top: 260px;*/
    }
}

@media(max-width: 768px){
  .cards-nosotros .contenedor{
    height: 250px;
            text-align: left;
  }

  .section-2 {
       /* min-height: 410vh;*/
    }

  .grilla-productos .card{
    max-width:  325px;
  }
}



@media(max-width:576px){

  .cuentas .mensaje{
    display: block;
  }

  .swptestimonios{
    padding-top:0;
    padding-bottom: 20px;
  }

  #equipo img{
  border-top-right-radius:  0px;
  border-bottom-left-radius:  40px;
  border-bottom-right-radius:   40px;
    }

  .section-1 .card img{
    height:   290px;
    object-fit:   cover ;
  }

  .section-1  .card{

  }

  .slider-container{
    height: 80vh;
  }

  .swiper-banner{
    height: 96vh;
  }

  .orgullo-div{
    padding-top:220px!important;
  }


  .cards-nosotros .contenedor{
    height: 250px;
  }

  .section-1 {
    padding-bottom:100px!important;
  }

  .cuentas{
    font-size:30px;
  }


}

@media(max-width:380px){
  .orgullo-div{
    padding-top:380px!important;
  }

  .cuentas{
    font-size:28px;
  }

}

#contact-form {
  
  border-radius: 1rem;
  color: #fff;
}

#contact-form .form-control,
#contact-form .form-select {
  border-radius: 0.5rem;
}

#contact-form label {
  color: #fff;
}

#contact-form .btn{
  border-radius:  100px;
}


.mySWProductos{
position: relative;
  width: 100%;
}

.mySWProductos .swiper-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* evita bloquear interacciones con el slider */
}