html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Previene el scroll horizontal */
  margin: 0;
  padding: 0;
  position: relative;
  -ms-overflow-style: none;  /* IE y Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Ocultar scrollbar para Chrome, Safari y Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Asegúrate de que todas las secciones de ancho completo tengan estos estilos */
section {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  left: 0;
  right: 0;
}

/* Para contenedores que necesitan ancho completo */
.full-width-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
}

/* Header general */
header {
  width: 100%;
  padding: 15px 0;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 80px;
}

/* Base styles for mobile/desktop visibility */
.mobile-header {
  display: none;
}

.desktop-menu {
  display: flex;
}

/* Estilos móviles */
@media (max-width: 767px) {
  /* Header móvil */
  header {
    background-color: transparent !important;
    box-shadow: none !important;
    height: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: none !important;
  }

  /* Header general */
.mobile-header {
  display: flex; /* Muestra el header solo en móviles */
  justify-content: space-between; /* Espacio entre el logo y el menú */
  align-items: center; /* Centra verticalmente los elementos */
  padding: 20px 20px; /* Espaciado interno para el header */
  background-color: #FDFCF0; /* Fondo blanco */
  position: fixed; /* Fija el header en la parte superior */
  top: 0;
  left: 0;
  right: 0;
  z-index: 2001; /* Asegura que el header esté por encima del contenido */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Agrega sombra */
  width: 100%; /* Se asegura de que ocupe todo el ancho */
}

/* Opcional: Ajuste del icono del menú */
.mobile-header .menu-icon {
  height: 24px; /* Tamaño del icono del menú */
  width: 24px;
}

  /* Primera sección en móvil */
  .fullscreen-section {
    /* Opción 1: Usar la URL directamente */
    background-image: url('../img/fondoMovil.png') !important;
    /* O Opción 2: Mantener la variable pero asegurar la ruta completa */
    /* background-image: var(--mobile-bg) !important; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 120vh;
    width: 100%;
    position: relative;
  }

  /* Ocultar la imagen de fondo de desktop */
  .fullscreen-section .fullscreen-image {
    display: none;
  }

  /* Asegurar que la imagen de fondo cubra toda la pantalla */
  .fullscreen-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .fullscreen-section .overlay-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding: 0 20px 0 0;
    margin-top: 10px; /* Ajustado para mover contenido más arriba */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .elemento-decorativo {
    position: relative;
    bottom: auto;
    right: auto;
    max-width: 80px !important;
    z-index: 10;
    display: block;
    left: 50%; /* Cambiado a 50% para centrar */
    transform: translateX(-50%); /* Mantiene la transformación para centrado */
    margin: 0;
    margin-bottom: -150px !important; /* Reducido para que no baje tanto */
  }

  .fullscreen-section .overlay-content .texto-verde,
  .fullscreen-section .overlay-content .texto-blanco {
    font-size: 24px !important; /* Texto más pequeño */
    margin-bottom: 3px !important;
    text-align: center;
    width: 100%;
  }

  .desktop-menu {
    display: none !important;
  }

  /* Aseguramos que el menú móvil esté por encima */
  .mobile-menu {
    z-index: 2000;
  }

  /* Ajuste para el botón de hamburguesa */
  .hamburger-btn {
    font-size: 28px; /* Botón más grande */
    padding: 10px;
    color: #217632; /* Color verde del logo */
  }
}

/* Ajustar el contenido dentro del header */
.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
}

/* Barra de navegación */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  height: 100%;
}

/* Container */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding-left: 0;
  margin: 0 auto;
  max-width: 1200px;
  transform: translateX(80px);
}

/* Logo */
.logo {
  flex-shrink: 0;
  margin-left: -20px;
  display: flex;
  align-items: center;
  height: 100%;
}

.logo img {
  max-height: 80px;
  width: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Logo en el header solo versión desktop */
@media (min-width: 768px) {
  .container.desktop-menu .logo img {
    width: auto !important;
    height: 95px !important;
    max-width: 300px !important;
    object-fit: contain !important;
  }
}

/* Tamaño normal para móvil */
.container.desktop-menu .logo img {
  width: auto;
  height: 70px;
  object-fit: contain;
}

/* Menú de navegación */
.nav-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  gap: 40px;
  margin-left: 60px;
}

.nav-links li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 5px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #4caf50;
}

/* Mobile Header Styles */

.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #217632; /* Color verde del logo */
  transition: all 0.3s ease;
}

/* Media Queries */
@media (max-width: 768px) {
  .desktop-menu {
      display: none;
  }

  .mobile-header {
      display: flex;
  }
}

/* Mobile Menu Styles */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: white;
  z-index: 999;
  padding: 20px 20px;
}

.mobile-menu.active {
  display: block;
}

.mobile-menu .mobile-logo img {
  width: 90px !important;
  height: auto !important;
  margin-top: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mobile-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  margin-top: 20px;
}

.mobile-nav-links li {
  margin: 35px 0; /* Aumentado de 15px a 25px para más separación vertical */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mobile-nav-links a {
  color: #142F1C;
  text-decoration: none;
  font-size: 16px; /* Aumentado de 16px a 20px */
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 2px; /* Aumentado de 8px a 12px para más separación con el triángulo */
  letter-spacing: 1px; /* Añadido para separar las letras */
}

/* Efecto hover */
.mobile-nav-links a:hover {
  color: #CBCD00; /* Color naranja al hacer hover */
}

/* Triángulo naranja antes de cada enlace */
.mobile-nav-links a::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #EA5B0C; /* Mantenemos el color naranja original del triángulo */
  border-bottom-left-radius: 100%;
  border-top-left-radius: 0;
  display: inline-block;
  margin-right: 8px;
  position: relative;
  transform: rotate(360deg);
}

/* Footer del menú móvil */
.mobile-footer {
  position: absolute;
  bottom: 110px;
  left: 0;
  right: 0;
  padding: 0 20px;
  text-align: center;
}

/* Triángulo decorativo */
.triangle-decorator {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #EA5B0C;
  margin: 30px auto 0; /* Añadido margen superior de 30px */
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative; /* Añadido */
  top: 10px; /* Añadido para crear espacio */
}

/* Opcional: efecto hover para mejor feedback visual */
.triangle-decorator:hover {
  transform: scale(1.1);
}

/* Línea separadora */
.separator {
  height: 3px;
  background-color: #EA5B0C;
  margin: 30px auto 15px; /* Reducido los márgenes */
  width: 70%;
  position: relative;
  margin-bottom: -25px;
}

/* Iconos sociales */
.social-icons-mobile {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px; /* Reducido el margen inferior */
  margin-top: 20px;
}

.social-icon-mobile {
  width: 35px;
  height: 35px;
  background-color: #217632;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Quita el subrayado */
  margin-top: 40px; /* Aumenta el espacio superior */
}

.social-icon-mobile i {
  color: #FFF;
  font-size: 20px;
  text-decoration: none; /* Asegura que no haya subrayado en el ícono */
}

/* Ubicaciones y contacto */
.locations-mobile, .contact-mobile {
  color: #142F1C;
  font-size: 14px;
  margin: 3px 0; /* Reducido el margen */
}

/* Figura del cuarto de círculo */
.quarter-circle {
  width: 8px;
  height: 8px;
  background-color: #f57c00;
  border-bottom-left-radius: 100%;
  border-top-left-radius: 0;
  display: inline-block;
  margin-right: 8px;
  position: relative;
  transform: rotate(360deg);
}

/* Imagen principal */
.fullscreen-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.fullscreen-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: #000;
  margin-top: -80px;
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-25%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  z-index: 5;
  margin-top: -80px;
}

/* Logo blanco y textos */
.fullscreen-section .overlay-content {
  .logo-blanco {
    max-width: 200px !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: -15px;
    position: relative;
    top: 5px;
  }

  .texto-verde, .texto-blanco {
    font-size: 50px !important;
    display: block !important;
    margin-bottom: -18px !important;
  }

  .texto-verde {
    color: #CBCD00;
  }

  .texto-blanco {
    color: #FFFFFF;
  }
}

/* textos de la primera sección */

.fullscreen-section .overlay-content .texto-verde {
  color: #CBCD00;
  display: block;
  margin-bottom: -25px;
}

.fullscreen-section .overlay-content .texto-blanco {
  color: #FFFFFF;
  display: block;
  margin-bottom: -25px;
}

.elemento-decorativo {
  position: absolute;
  bottom: 58%;
  right: 7%;
  max-width: 120px;
  z-index: 10;
}

/* Contenedor para la imagen debajo del border radius */
.decorative-image {
  position: absolute;
  bottom: -100px;
  left: 150px;
  width: 200px;
  height: auto;
  z-index: -1;
  transform: rotate(270deg);
}


/* Estilos para el header móvil */


.hamburger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #217632;
  padding: 10px;
}

/* Estilos para el menú móvil */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fdfbed;
  z-index: 2000;
  padding: 40px 20px;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.mobile-menu.active {
  display: flex !important;
}

/* Carrusel de tecnología */
.carrusel-tecnologia {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 0.5rem;
  height: 100%;
  padding: 50px 0;
  position: relative;
  margin: 0 auto;
  background-color: #fff;
  min-height: 400px;
}


.titulo-seccion-tecnologia {
  font-size: 48px;
  font-weight: bold;
  color: #142E1C;
  position: relative;
  width: 50%;
  margin-bottom: 1px; /* Añadido para reducir el espacio */
}

/* Contenedor con el fondo beige */
.background-wrapper {
  width: 100%;
  background-color: #FAF9E8;
  position: relative;
  padding-top: 1px;  /* Para evitar margin collapse */
}

/* Contenedor del carrusel */
.carrusel-section-wrapper {
  width: 100%;
  height: 110vh;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: none;
  border: none;
  border-bottom-left-radius: 300px;
  margin-bottom: -1px;
  padding-top: 0; /* O el valor positivo que necesites */
  z-index: 100;
}


/* Fondo de color debajo del carrusel */
.carrusel-section-wrapper::after {
  content: '';
  position: absolute;
  bottom: -1px;        /* Para evitar líneas entre las secciones */
  left: 0;
  width: 100%;
  height: 150px;      /* Altura suficiente para ver el color bajo la curva */
  background-color: #FAF9E8;
  z-index: -1;        /* Coloca el fondo detrás del contenedor principal */
}

/* Elementos decorativos */
.decorative-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  margin-top: -40px;
}

/* Elemento 1: Rotado 360 grados */
.vector-green {
  position: absolute;
  top: 5%;
  left: 0%;
  width: 80px; /* Tamaño ajustado */
  transform: rotate(360deg); /* Rotación a 360 grados */
  opacity: 1; /* Sin efectos */
}

/* Elemento 2: Cerca de la imagen, arriba derecha */
.decorative-top-right {
  position: absolute;
  top: 8%; /* Más arriba */
  right: 12%; /* Más cerca de la imagen */
  width: 60px; /* Tamaño ajustado */
  transform: translateY(-20px);
}

/* Elemento 3: Hojas más pequeñas y diseño original */
.decorative-bottom-center {
  position: absolute;
  width: 4%; /* Más pequeño */
  height: 4%;
  left: 50%;
  top: 600px; /* Más arriba para evitar que se corte */
  transform: translateX(-50%) translateY(-30px);
  z-index: 2;
}

.vector-bottom-1 {
  width: 100%;
  height: auto;
  opacity: 0.8;
}

/* Flechas de navegación triangulares */
.orange-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  cursor: pointer;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);
}

.orange-arrow.left {
  border-width: 25px 30px 20px 0;
  border-color: transparent #FF6B00 transparent transparent;
  left: -100px;
}

.orange-arrow.right {
  border-width: 25px 0 20px 30px;
  border-color: transparent transparent transparent #FF6B00;
  right: -100px;
}

.orange-arrow:hover {
  filter: brightness(0.9);
}

/* Contenido (lado izquierdo) */
.contenido {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  position: relative;
  padding-right: 0.2rem;
  max-width: 1000px;
  margin-left: 15rem;
  padding-top: 0;
  margin-top: -30px;
}

.descripcion-seccion {
  width: 80%;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #000;
}

#descripcion-adicional {
  margin-top: 0; /* Elimina el margen superior */
}

/* Imagen (lado derecho) */
.imagen-carrusel {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 830px;
  padding-top: 1rem;
  margin-right: 2rem;
  background-color: #fff; /* Fondo blanco uniforme */
  margin-top: -20px;
}

.imagen-seccion {
  height: 60%;
  width: 75%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: none; /* Elimina sombras de la imagen */
}

.imagen-carrusel img {
  max-height: 80%;
  max-width: 100%;
  object-fit: contain;
}

/* Estilos generales */
body {
  font-family: 'Arial', sans-serif;
  background-color: #FAF9E8;
  margin: 0;
  overflow-x: hidden;
  padding-top: 0;
  position: relative;
}

/* Media queries */
@media (max-width: 768px) {
  /* Estilos móviles */
  header {
    background-color: white !important;
    height: 90px;
  }

  /* Primera sección en móvil */
  .fullscreen-section {
    background: url('img/fondoMovil.png') no-repeat center center;
    background-size: cover;
    height: 100vh;
    padding-top: 100px;
  }

  /* Ocultar la imagen de fondo de desktop */
  .fullscreen-section .fullscreen-image {
    display: none;
  }

  .container {
    flex-direction: column;
    gap: 20px;
  }
  
  .nav-links {
    flex-direction: column;
    gap: 15px;
  }
  
  .navbar {
    padding: 20px;
  }
  
  .logo {
    margin-left: 0;
  }
  
  .desktop-menu {
    display: none !important;
  }

  .hamburger-btn {
    display: block;
  }

  .carrusel-tecnologia {
    grid-template-columns: 1fr;
    padding: 2rem;
  }

  .decorative-elements {
    display: none;
  }

  .imagen-carrusel {
    height: 300px;
  }

  .decorative-elements img {
    width: 80px;
  }
}

@media (max-width: 767px) {
  .carrusel-section-wrapper {
    width: 100%;
    height: 1000px; /* Altura fija en lugar de vh */
    position: relative;
    overflow: hidden;
    background-color: #fff;
    margin: 0 auto;
    box-shadow: none;
    border: none;
    border-bottom-left-radius: 180px;
    margin-bottom: -100px;
    padding-bottom: 100px;
    z-index: 100;
  }

  .carrusel-tecnologia {
    display: flex;
    flex-direction: column;
    background: #FFF;
    min-height: auto;
    border-radius: 100px;
    position: relative !important;
    overflow: visible !important;
    height: 1000px;
    padding-left: 0px;
  }

  .imagen-carrusel {
    width: 100%;
    height: auto;
    order: 1;
  }

  .imagen-carrusel img {
    width: 65%;
    height: auto;
    margin: 0;
    display: block;
    margin-top: -30px;
  }

  .contenido {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    order: 2;
  }

  .titulo-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Cambiado a flex-start */
    width: 100%;
    position: relative;
    z-index: 2;
    min-height: 120px; /* Altura mínima */
  }

  .titulo-seccion-tecnologia {
    font-size: 36px;
    text-align: center;
    width: 50%;
    color: #142E1C;
    font-weight: bold;
    margin: 0;
    margin-top: -100px;
    height: 100px; /* Altura fija */
    overflow: hidden; /* Para contener el texto */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 50px; /* Altura de línea específica */
    padding: 0 10px; /* Espacio para el texto */
  }

  .descripcion-seccion {
    font-size: 16px !important;
    line-height: 1.5;
    margin-bottom: 55px;
    width: 82%;
    text-align: center;
    color: #333;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    margin-top: -120px;
    transition: all 1.9s ease;
  }

  #descripcion-adicional {
    margin-bottom: 20px; /* Ajuste para el segundo párrafo */
    position: relative;
  }

  /* Ocultar elementos decorativos y flechas en móvil */
  .decorative-elements {
    display: none;
  }

  /* Ajustar el contenedor principal */
  .carrusel-container {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .orange-arrow.left1 {
    position: relative !important;
    cursor: pointer;
    z-index: 9999 !important;
    width: 0 !important;
    height: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    margin-top: -100px; /* Ajustado para subir la flecha */
  }

  .orange-arrow.right1 {
    position: relative !important;
    cursor: pointer;
    z-index: 9999 !important;
    width: 0 !important;
    height: 0 !important;
    display: block !important;
    margin-top: -100px; /* Ajustado para subir la flecha */
  }

  .orange-arrow.left1::before,
  .orange-arrow.right1::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    transform: translateY(-50%);
  }

  .orange-arrow.left1::before {
    border-width: 12px 15px 12px 0;
    border-color: transparent #FF6B00 transparent transparent;
    left: 50px;
  }

  .orange-arrow.right1::before {
    border-width: 12px 0 12px 15px;
    border-color: transparent transparent transparent #FF6B00;
    right: 600px;
  }
}

/* Cosechas */
.cosechas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FAF9E8;
  z-index: -1;
}

.cosechas {
  position: relative;
  width: 100%;
  height: 110vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  margin-top: -150px;
  margin-bottom: 60px;
}

/* Decoración (más arriba) */
.decoracion-izquierda {
  position: absolute !important;
  z-index: 999 !important; /* Número más alto para asegurar que esté arriba */
  top: -100px !important;
  left: 0 !important;
  width: 250px !important;
  height: auto !important;
  pointer-events: none !important;
  display: block !important;
  transform: none !important;
}

/* Contenedor padre */
section:has(.decoracion-izquierda) {
  position: relative;
  overflow: visible;
  z-index: 99;
  padding-top: 120px; /* Añadir espacio superior para la decoración */
}

.contenido-cosechas {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
  padding-top: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  transform: translateY(-50px);
  position: relative;
  z-index: 2; 
}

.contenido-cosechas h2 {
  font-size: 2.5rem;
  color: #142E1C;
  margin-bottom: 15px;
}

.contenido-cosechas p {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 30px;
}

/* Opción 1: Selector más específico */
.cosechas .contenido-cosechas {
  transform: translateY(-50px) !important; /* Usa transform en lugar de margin */
  position: relative !important;
}

section.cosechas .contenido-cosechas .titulo-cosechas {
  font-size: 50px !important;
  text-align: center !important;
  transform: translateX(40px);
}

.descripcion-cosechas {
  font-size: 23px !important;
  text-align: center !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  line-height: 1.3 !important;
  margin-bottom: 20px !important;
  transform: translateX(40px);
}

/* Nuevo contenedor blanco */
.productos-wrapper {
  background-color: white;
  padding: 40px 60px;
  border-radius: 30px;
  width: 90%;
  max-width: 1000px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  margin: 30px auto 0;
  z-index: 2;
  position: relative;
}

/* Contenedor de productos */
.productos-contenedor {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 20px 0;
}

/* Cada producto individual */
.producto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 280px;
}

/* Fondo circular */
.producto-imagen-container {
  width: 220px;
  height: 220px;
  background-color: #F5F4D4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative; /* Importante para el efecto overflow */
  overflow: visible; /* Permite que la imagen sobresalga */
  z-index: 3;
}

/* Contenedor de la imagen del producto */
.producto-imagen-container {
  width: 220px;
  height: 220px;
  background-color: #F5F4D4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  overflow: visible; /* Cambiado de hidden a visible para permitir que la imagen se expanda */
}

/* Imágenes de productos */
.imagen-producto {
  width: 60%;
  height: auto;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 4;
  display: block;
}

/* Tamaños relativos reales: el pepino europeo es un pepino grande/alargado
   y el persa es chico. Se controla el tamaño en pantalla con el ancho (%),
   ya que ambas fotos actuales comparten el mismo encuadre/proporción.
   Se usan clases (no el atributo alt) para que funcione igual en la
   versión en inglés, donde el texto alt es distinto.
   Se limita a min-width:769px para no interferir con el ancho fijo
   (120px) que ya usa el carrusel de móvil para .imagen-producto. */
@media (min-width: 769px) {
  .imagen-producto.imagen-pepino-europeo {
    width: 55%;
  }

  .imagen-producto.imagen-pepino-persa {
    width: 35%;
  }

  .imagen-producto.imagen-chile-habanero {
    width: 40%;
  }
}

/* Imágenes de productos */
.imagen-producto {
  width: 60%;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  display: block;
  margin: 0 auto; /* Centrar la imagen */
}

/* Efecto hover */
.producto-imagen-container:hover .imagen-producto {
  transform: scale(1.2); /* Escala la imagen */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); /* Sombra */
}


/* Asegurar que el contenedor permita el overflow de la imagen */
.producto-imagen-container {
  overflow: visible !important;
  transition: transform 0.3s ease;
}

/* Asegurar que el hover funcione en dispositivos táctiles */
@media (hover: hover) {
  .producto-imagen-container:hover .imagen-producto {
    transform: scale(1.2);
  }
}

/* Textos */
.producto h3 {
  font-size: 1.6rem;
  color: #142E1C;
  margin: 10px 0 5px;
}

.producto p {
  font-size: 1rem;
  color: #000;
  margin: 0;
}

/* Decoraciones */
.decoracion {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.decoracion-derecha {
  width: 80px;
  position: absolute;
  right: 0;
  top: 190px;
}

/* Mapa interactivo */
.diseño-cultivo {
  position: relative;
  margin-top: -10px;
  background-color: #217632;
  width: 89.5%;
  height: calc(100vh + 40px);
  border-top-left-radius: 300px;
  border-bottom-right-radius: 300px;
  padding: 60px 80px;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 100px;
}

.mapa-container {
  position: relative;
  display: grid;
  grid-template-columns: 42% 28% 30%;
  height: 85%;
  gap: 20px;
  padding: 20px;
}

/* Columna izquierda */
.left-column {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.texto {
  color: white;
  margin-bottom: 20px;
}
.zona-titulo {
  height: 100px; /* Altura fija para dos líneas */
  width:60%;
  font-size: 2.8rem;
  color: white;
  margin-bottom: 50px;
  line-height: 1;
}

.zona-nombre {
  font-size: 2.2rem;
  color: #CBCD00;
  height: 80px; /* Altura fija para dos líneas */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
}

.mapa {
  flex: 1;
  position: relative;
  width: 110%;
  height: 65%;
}

.mapa-img {
  width: 100%;
  height: auto;
  display: block;
}

.logotipo-mapa {
  position: absolute;
  top: 80%;
  bottom: 0;
  left: 0;
  width: 110px;
  height: auto;
}

/* Columna central */
.center-column {
  display: flex;
  align-items: flex-start;
  padding-top: 120px;
}

.zona-descripcion {
  color: white;
  font-size: 1.4rem;
  line-height: 1.4;
  max-width: 55%;
}

/* Columna derecha */
.right-column {
  display: flex;
  flex-direction: column;
  align-items: center; /* Cambiado a center para los elementos internos */
  gap: 20px;
  margin-right: 20px;
}

.imagen-contexto {
  height: 500px;
  width: auto;
  overflow: hidden;
  transform: translateX(-120px);
  margin-top: -50px;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.4));
}

.imagen-contexto img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* Estilos para los puntos del mapa SVG */
.punto-mapa {
  fill: #EA5B0C !important; /* Color naranja */
  stroke: #142E1C !important; /* Borde negro */
  stroke-width: 0.4 !important; /* Grosor del borde */
  cursor: pointer !important;
  transition: fill 0.3s ease !important; /* Solo transición del color */
}

.punto-mapa:hover {
  fill: #ff6b00 !important; /* Naranja más brillante al hover */
}

/* Estado activo sin transformaciones */
.punto-mapa.activo {
  fill: #CBCD00 !important;
  stroke: #142E1C !important;
  stroke-width: 0.4 !important;
}

/* Animación de pulsación sin mover el punto */
.punto-mapa.pulsando {
  animation: pulsar 0.5s ease-out !important;
}

@keyframes pulsar {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* Efecto radar: anillo que se expande y desvanece sobre el punto activo */
.punto-ping {
  fill: none;
  stroke: #CBCD00;
  stroke-width: 0.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: radarPing 1.4s ease-out infinite;
}

@keyframes radarPing {
  0% {
    r: 0.9;
    opacity: 0.8;
  }
  100% {
    r: 3.2;
    opacity: 0;
  }
}

.puntos-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.punto-mapa {
  pointer-events: auto;
}

/* Navegación por zona: franja de tabs de ancho completo */
.zonas-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
  padding: 0 40px;
  position: relative;
  z-index: 3;
}

.zona-chip {
  font-family: inherit;
  font-size: 0.85rem;
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.zona-chip:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.zona-chip.activo {
  background-color: #CBCD00;
  border-color: #CBCD00;
  color: #142E1C;
  font-weight: 600;
}
.mapa-carrusel {
  position: relative;
  overflow: hidden;
}


/* Estilos de la Sección de Certificaciones */
.certificaciones {
  text-align: center;
  padding: 50px 0px;
  background-color: #FFF;
  margin-top: -100px;
  position: relative;
  z-index: 1; 
  max-width: 1200px;
  margin: 0 auto;
}

.certificaciones h2 {
  font-size: 2.8em;
  color: #217632;
  margin-bottom: 10px;
  margin-top: 110px;
}

.certificaciones p {
  font-size: 1.2em;
  color: #000;
  margin-bottom: 40px;
}

/* Alineación horizontal en escritorio */
.certificaciones-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  padding: 0 40px;
  justify-content: center;
  align-items: center;
}


.certificacion {
  max-width: 200px;
  padding: 20px;
  text-align: center;
  background: white;
  border-radius: 10px;
  border: 1px solid #217632;
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.certificacion img {
  max-width: 180px;
  height: auto;
  margin-bottom: 20px;
}

.certificacion-img2 {
  width: 50%;
  height: 100%;
  object-fit: contain;
}	

.certificacion p {
  flex-grow: 1;
  margin-bottom: 20px;
}


.btn-conocer {
  margin-top: auto;
  align-self: center;
}

.certificaciones-descripcion {
  max-width: 430px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.3;
}

.btn-conocer {
  text-decoration: none;
  color: #217632; /* Color verde, ajusta el código de color según tu paleta */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-weight: bold;
}

.btn-conocer i {
  font-size: 14px; /* Ajusta el tamaño del ícono según necesites */
  color: #142E1C; 
}

.btn-conocer:hover {
  opacity: 0.8;
}

.certificaciones-nav {
  display: none;
}

/* Carrusel para dispositivos móviles */
@media (max-width: 768px) {
  .certificaciones-section {
    position: relative;
    width: 95%;
    margin: 0 auto;
    padding: 40px 0;
    margin-top: -100px;
    background-color: #fff;
    z-index: 0;
  }

  .certificaciones {
    position: relative;
    z-index: 3; /* Mayor que el fondo verde */
    width: 89.5%;
    margin: 0 auto;
  }

  /* Asegurar que todo el contenido esté visible */
  .certificaciones h2,
  .certificaciones-descripcion,
  .certificaciones-container,
  .carousel-controls {
    position: relative;
    z-index: 3;
  }

  .certificaciones h2 {
    font-size: 30px;
    color: #217632;
    margin-bottom: 15px;
  }

  .certificaciones-descripcion {
    font-size: 14px;
    width: 85%; /* Ancho ajustado al 60% */
    margin: 0 auto 30px;
    line-height: 1.4;
  }

  .certificacion {
    max-width: 250px;
    padding: 15px 10px;
    text-align: center;
    background: #FFF;
    border-radius: 10px;
    border: 1px solid #FFF;
    height: 240px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    position: relative;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
    box-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.1),
      0 0 0 1px #FFF,
      0 0 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .certificacion-img2 {
    width: 100px !important; /* Reducido de 120px a 100px específicamente para Fair Trade */
    height: auto;
    margin-bottom: 15px;
  }

  .certificacion p {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 50px; /* Aumentado de 40px a 50px para ajustar el espacio */
  }

  .certificacion .btn-conocer {
    position: absolute;
    bottom: 25px; /* Aumentado de 15px a 25px para subirlo */
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
  }
  
  /* Efecto hover para el cuadro de certificación */
  .certificacion:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.15));
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.12),
      0 0 0 1px #FFF,
      0 0 30px rgba(0, 0, 0, 0.1);
  }

  /* Para pantallas muy pequeñas */
  @media (max-width: 375px) {
    .certificacion {
      width: 90%;
      padding: 30px 20px;
    }
  }

  /* Para pantallas medianas */
  @media (min-width: 376px) and (max-width: 576px) {
    .certificacion {
      width: 85%;
    }
  }
  .certificacion.active {
    display: flex; /* Mostrar solo la certificación activa */
  }

  /* Mantener solo las flechas naranjas */
  .carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 30px;
  }

  .flecha-certificaciones {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 100%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
  }

  .flecha-certificaciones.izquierda {
    border-width: 15px 25px 15px 0;
    border-color: transparent #FF6B00 transparent transparent;
    left: 100px;
  }

  .flecha-certificaciones.derecha {
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #FF6B00;
    right: 100px;
  }

  .certificacion img {
    width: 120px;
    height: auto;
    margin-bottom: 20px;
  }

  .certificacion p {
    font-size: 14px;
    margin: 15px auto;
    width: 60%; /* Ancho ajustado al 60% */
    text-align: center;
    line-height: 1.4;
  }

  .btn-conocer {
    margin-top: 15px;
    font-size: 14px;
  }
  .separator-line {
    width: 85%;
    max-width: 280px;
    height: 2px;
    background-color: #EA5B0C;
    margin: 15px auto;
  }
}

/* CSS para el carrusel de Responsabilidad Social */
.responsabilidad-social {
  width: 100%;
  background-color: #FFF;
  position: relative;
  display: block;
  margin: 0;
  padding: 40px 0;
}

.rs-carousel-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.rs-content-container {
  display: flex;
  width: 100%;
}

@media (max-width: 768px) {
  .responsabilidad-social {
    padding: 20px 0;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: visible !important;
    touch-action: auto !important;
    height: auto;
  }

  .rs-header h1 {
    font-size: 0;
    visibility: hidden;
  }

  .rs-header h1::after {
    content: 'Responsabilidad con valores';
    font-size: 38px;
    color: #217632;
    text-align: center;
    visibility: visible;
    display: block;
    margin: 0 auto 40px;
  }

  .rs-carousel-container {
    width: 100%;
    max-width: 350px; /* Limitar el ancho máximo */
    padding: 0 20px;
    position: relative;
    margin: 0 auto; /* Centrar el contenedor */
  }

  .rs-content-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 30px; /* Espacio para las flechas */
  }

  .rs-image-container {
    width: 100%;
    height: 150px; /* Reducir altura de la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .rs-image-container img {
    width: auto !important;
    height: 100% !important;
    max-width: 200px; /* Limitar el ancho máximo de la imagen */
    object-fit: contain; /* Cambiar a contain para mantener proporciones */
    border-radius: 10px;
  }

  .rs-text-content {
    width: 100%;
    text-align: center;
    position: relative;
    padding: 0;
  }

  .rs-text-content h3 {
    color: #EA5B0C;
    font-size: 24px;
    margin: 0 auto;
    width: 100%; /* Ajustar al ancho completo */
    text-align: center;
  }

  .rs-text-content p {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin: 15px auto 0;
    width: 100%; /* Ajustar al ancho completo */
    max-width: 280px; /* Limitar el ancho máximo del texto */
    text-align: center;
  }

  .rs-mobile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    width: 100%;
    background-color: #FFF;
  }

  /* Flechas naranjas */
  .flecha-rs {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    cursor: pointer;
  }

  .flecha-rs.izquierda {
    left: 80px;
    border-width: 15px 25px 15px 0;
    border-color: transparent #FF6B00 transparent transparent;
  }

  .flecha-rs.derecha {
    right: 80px;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #FF6B00;
  }

}
/* Encabezado y línea separadora */
.rs-header {
  margin-top: 0;
  text-align: center;
  position: relative;
}

/* Estilo para desktop */
.rs-header h1 {
  font-size: 30px;
  color: #217632;
  width: 100%;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 80px;
}


.separator-line {
  width: 850px;
  height: 2px;
  background-color: #EA5B0C;
  margin: 20px auto;
}

.rs-carousel-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden; /* Previene que el contenido afecte el layout */
  margin-top: -40px;
}

.rs-carousel {
  width: 100%;
  transition: transform 0.3s ease;
  position: relative;
}

.rs-carousel-item {
  min-width: 100%;
  flex: 0 0 100%;
}

.rs-content-container {
  width: 100%;
  padding: 0 60px; /* Espacio para las flechas */
  box-sizing: border-box;
}

.rs-content-container.image-right {
  flex-direction: row-reverse;
}

/* Estilos del contenido */
.rs-text-content {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 350px;
}

.rs-text-content h3 {
  font-size: 32px;
  color: #EA5B0C;
  font-weight: bold;
  margin-top: 0;
}

.rs-text-content p {
  font-size: 18px;
  line-height: 1.5;
  color: #142E1C;
  max-width: 330px;
}

/* Estilos de la imagen */
.rs-image-container {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 350px;
  padding-top: 20px;
}

.rs-image-container img {
  width: auto;
  height: 280px;
  object-fit: contain;
  border-radius: 20px;
}

.rs-current-image,
.rs-current-title,
.rs-current-description {
  transition: opacity 0.15s ease-in-out;
  opacity: 1;
}

.fade-out {
  opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Mismo tiempo que el producto */
}

.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.responsabilidad-social .rs-carousel-container .flecha-rs {
  position: absolute;
  cursor: pointer;
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  top: 45%;
  transform: translateY(-50%);
}

.responsabilidad-social .rs-carousel-container .flecha-rs.izquierda {
  left: -60px;
  border-width: 15px 20px 15px 0;
  border-color: transparent #FF6B00 transparent transparent;
}

.responsabilidad-social .rs-carousel-container .flecha-rs.derecha {
  right: -55px;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #FF6B00;
}

/* Para cuando el texto está a la derecha */
.rs-content-container.image-right .rs-text-content {
  padding: 0 0 0 20px;
}

/* Cuando la imagen está a la derecha */
.rs-content-container:not(.image-right) {
  justify-content: center;
  margin: 0 auto;
}

/* Cuando el texto está a la izquierda (imagen a la derecha) */
.rs-content-container:not(.image-right) .rs-text-content {
  padding-left: 6rem;
  padding-right: 0;
  transform: translateX(-4rem);
}

.rs-content-container:not(.image-right) .rs-image-container {
  padding-left: 0;
  padding-right: 3rem;
}

.rs-image-container {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 350px;
  padding-top: 0;
}

.rs-text-content {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  text-align: left;
  padding-top: 0;
}

/* Aseguramos que las imágenes mantengan el mismo tamaño en ambas direcciones */
.rs-content-container.image-right .rs-image-container img,
.rs-content-container:not(.image-right) .rs-image-container img {
  width: auto;
  height: 280px;
  object-fit: contain;
}

/* Ajustes generales del contenedor */
.rs-content-container {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0;
  justify-content: center;
  min-height: 45vh;
}

/* Contenedor de texto */
.rs-text-content {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  text-align: left;
  padding-top: 0;
}

/* Estilos específicos del título y descripción */
.rs-text-content h3 {
  margin: 0;
  padding: 0;
  font-size: 32px;
  color: #EA5B0C;
  text-align: left;
  width: 100%;
}

.rs-text-content p {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
  max-width: 310px;
}

/* Cuando el texto está a la izquierda */
.rs-content-container:not(.image-right) .rs-text-content {
  padding-left: 6rem;
  padding-right: 0;
  transform: translateX(-4rem);
}

/* Cuando el texto está a la derecha */
.rs-content-container.image-right .rs-text-content {
  padding-left: 0;
  padding-right: 3rem;
  transform: translateX(4rem);
}

/* Contenedor de imagen estandarizado */
.rs-image-container {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 350px;
  padding-top: 0;
}

/* Tamaño estandarizado para todas las imágenes */
.rs-image-container img {
  width: auto;
  height: 280px;
  object-fit: contain;
  border-radius: 20px;
  margin-top: 20px;
}

/* Posicionamiento estandarizado para imágenes */
.rs-content-container:not(.image-right) .rs-image-container {
  padding-left: 0;
  padding-right: 3rem;
}

.rs-content-container.image-right .rs-image-container {
  padding-left: 3rem;
  padding-right: 0;
}


/* Framework base para responsividad */
.rs-mobile-container {
  display: none;
}

@media (max-width: 768px) {
  /* Ocultar versión desktop */
  .rs-content-container {
    display: none;
  }

  /* Contenedor principal */
  .rs-mobile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    width: 100%;
    background-color: #FFF;
    min-height: 80vh;
    overflow-y: visible;
    position: relative;
  }

  /* Título principal "Responsabilidad con valores" */
  .rs-mobile-title {
    font-size: 38px;
    color: #217632;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: lowercase; /* Todo en minúsculas */
  }

  .rs-mobile-title::first-letter {
    text-transform: uppercase; /* Primera letra mayúscula */
  }

  /* Imagen siempre primero */
  .rs-mobile-image {
    width: 90%;
    max-width: 350px;
    position: relative;
    margin-bottom: 2rem;
    order: 1; /* Asegura que la imagen va primero */
  }

  .rs-mobile-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
  }

  /* Navegación con título naranja y flechas */
  .rs-mobile-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    margin: 1rem 0;
    position: relative;
    order: 2;
  }

  /* Título naranja */
  .rs-mobile-nav h3 {
    font-size: 28px;
    color: #EA5B0C;
    text-align: center;
    margin: 0;
    width: 100%;
    padding: 0 120px;
  }

  /* Flechas naranjas más pequeñas y centradas */
  .orange-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    cursor: pointer;
  }

  .orange-arrow.left {
    left: 80px; /* Más cerca del centro */
    border-width: 8px 12px 8px 0; /* Flechas más pequeñas */
    border-color: transparent #FF6B00 transparent transparent;
  }

  .orange-arrow.right {
    right: 80px; /* Más cerca del centro */
    border-width: 8px 0 8px 12px; /* Flechas más pequeñas */
    border-color: transparent transparent transparent #FF6B00;
  }

  /* Descripción con altura fija */
  .rs-mobile-description {
    text-align: center;
    padding: 0 2rem;
    margin-top: 1rem;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    max-width: 300px;
    order: 3;
    min-height: 120px; /* Altura fija basada en el texto más largo */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Ajustes para desktop */
@media (min-width: 769px) {
  .responsabilidad-social {
    min-height: 85vh;
    padding: 2rem 0;
    margin: 0;
    background-color: #FFF;
  }

  .rs-header {
    margin-bottom: 3rem;
  }

  /* Asegurar que las secciones no se encimen */
  .rs-carousel-container {
    position: relative;
    overflow: visible;
    margin-bottom: 2rem;
  }

  /* Mantener espaciado consistente */
  .rs-content-container {
    margin-bottom: 2rem;
  }
}

 /* Carrusel de imagenes */
.image-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: auto;
  overflow: visible;
}

.image-carousel img {
  width: 100%;
  height: auto;
  display: block;
}

.image-carousel .arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  cursor: pointer;
  z-index: 999;
  background: transparent;
  padding: 0;
  outline: none;
  border: none;
  top: 50%;
  transform: translateY(-50%);
}

.image-carousel .left-arrow {
  border-width: 25px 30px 20px 0;
  border-color: transparent #FF6B00 transparent transparent;
  left: 60px;
}

.image-carousel .right-arrow {
  border-width: 25px 0 20px 30px;
  border-color: transparent transparent transparent #FF6B00;
  right: 60px;
}

.image-carousel .arrow:hover {
  filter: brightness(0.9);
}

.image-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* Reducido de 100px a 40px para menor separación */
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.carousel-img {
  width: auto;
  height: auto;
  max-width: 45%; /* Aumentado de 30% a 45% para imágenes más grandes */
  max-height: 600px; /* Aumentado de 500px a 600px */
  object-fit: contain;
  display: block;
}

.separator-image {
  width: 100%;
  height: auto;
  display: block;
  background-color: #FFF;
}

.top-separator {
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
  background-color: #FFF;
}

.bottom-separator {
  margin-top: 80px;
  position: relative;
  z-index: 1;
  background-color: #FFF;
}

/* Asegurar que el fondo blanco cubra todo el espacio */
.top-separator::after,
.bottom-separator::after {
  content: '';
  position: absolute;
  top: -80px; /* Igual al margen */
  left: 0;
  right: 0;
  bottom: -80px; /* Igual al margen */
  background-color: #FFF;
  z-index: -1;
}

/* Aseguramos que la sección siguiente mantenga su posición */
.image-carousel-section {
  margin-top: -10px; /* Ajusta este valor para mover la sección más arriba */
  position: relative;
  z-index: 1;
  background-color: #FFF;
}

.image-carousel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50px;
  position: relative;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  cursor: pointer;
  z-index: 999;
  background: none;
  border: none;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
}

.left-arrow {
  border-width: 25px 30px 20px 0;
  border-color: transparent #FF6B00 transparent transparent;
  left: -60px;
}

.right-arrow {
  border-width: 25px 0 20px 30px;
  border-color: transparent transparent transparent #FF6B00;
  right: -60px;
}


/* Flechas triangulares para la sección de responsabilidad social */
.responsabilidad-social .orange-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  cursor: pointer;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);
}

.responsabilidad-social .orange-arrow.left {
  border-width: 25px 30px 20px 0;
  border-color: transparent #FF6B00 transparent transparent;
  left: 40px;
}

.responsabilidad-social .orange-arrow.right {
  border-width: 25px 0 20px 30px;
  border-color: transparent transparent transparent #FF6B00;
  right: 40px;
}

.responsabilidad-social .orange-arrow:hover {
  filter: brightness(0.9);
}

.image-carousel-section .orange-arrow {
  position: absolute;
  cursor: pointer;
  z-index: 1000;
  background: none;
  padding: 0;
  border: none;
  outline: none;
  width: 0;
  height: 0;
}

.image-carousel-section .orange-arrow.left::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 20px 15px 0;
  border-color: transparent #FF6B00 transparent transparent;
  left: 25px;
}

.image-carousel-section .orange-arrow.right::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #FF6B00;
  right: 25px;
}

/* Aseguramos que el header esté por encima */
header {
  position: fixed;
  width: 100%;
  z-index: 1000; /* Un valor alto para estar por encima */
}

/* Ajustamos el z-index de las flechas del carrusel */
.image-carousel .orange-arrow {
  z-index: 100; /* Un valor menor que el header */
  position: absolute; /* Aseguramos que la posición absoluta está establecida */
}

/* Si es necesario, también ajustamos el contenedor del carrusel */
.image-carousel {
  position: relative;
  z-index: 100; /* Mismo valor que las flechas */
}

.orange-arrow.left1 {
  position: absolute;
  cursor: pointer;
  z-index: 999;
  top: 30%;
  transform: translateY(-50%);
  left: -105px;
  background: none;
  padding: 0;
  border: none;
  outline: none;
  width: 0;
  height: 0;
}

.orange-arrow.left1::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 20px 15px 0;
  border-color: transparent #FF6B00 transparent transparent;
}

.orange-arrow.right1 {
  position: absolute;
  cursor: pointer;
  z-index: 999;
  top: 30%;
  transform: translateY(-50%);
  right: -650px; /* Ajustado para que esté después de la imagen */
  background: none;
  padding: 0;
  border: none;
  outline: none;
  width: 0;
  height: 0;
}

.orange-arrow.right1::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #FF6B00;
}

/* Formulario de contacto */
.contact-form-section {
  background-color: #CACC00;
  padding: 100px 80px 40px 73px; /* Ajustado el padding lateral */
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-height: calc(100vh - 100px);
  height: calc(100vh - 100px);
  width: 90%;
  margin: 0 auto;
}

/* Sección de texto */
.form-text {
  flex: 1;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 20px;
  text-align: center;
}

.chada-logo-form {
  width: 120px;
  height: auto;
  margin-bottom: -10px;
}

.form-text h2 {
  font-size: 40px;
  color: #000;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: -30px;
  text-align: left;
}

.form-text p {
  font-size: 40px;
  color: #000;
  line-height: 1.2;
  margin-bottom: 30px;
  text-align: left;
}

/* Línea naranja decorativa */
.form-text::after {
  content: '';
  position: absolute;
  bottom: 140px;
  left: 0;
  width: 450px;
  height: 4px;
  background-color: #FF6B00;
}

/* Contenedor del formulario */
.form-container {
  flex: 1;
  max-width: 40%;
  padding-right: 30px;
  transform: translateX(50px); /* Cambiado de -50px a 50px para mover a la derecha */
  margin-top: 20px;
  margin-right: 5%;   /* Reducido el margen derecho */
  margin-left: 15%;   /* Aumentado el margen izquierdo */
}

/* Estilos del formulario */
#contactForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin: 0;
  position: relative;
}

.form-group {
  position: relative;
}

#contactForm input,
#contactForm textarea {
  width: 100%;
  padding: 22px 20px 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: white;
  font-size: 16px;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#contactForm input:focus,
#contactForm textarea:focus {
  outline: none;
  border-color: #6b8e23;
  box-shadow: 0 2px 8px rgba(107,142,35,0.3);
}

#contactForm textarea {
  height: 120px;
  resize: none;
}

.form-group label {
  position: absolute;
  left: 20px;
  top: 8px;
  font-size: 11px;
  font-weight: bold;
  color: #6b8e23;
  pointer-events: none;
  transition: color 0.2s ease;
}

.form-group input:focus + label,
.form-group textarea:focus + label {
  color: #4a5d23;
}

#contactForm button {
  background-color: #142F1C;
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  align-self: flex-start;
  margin-top: 10px;
}

#contactForm button:hover {
  background-color: #0f2315;
}

.required-asterisk {
  color: #FF6B00;
}

/* Toast de confirmación del formulario */
.form-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef7e3;
  border-left: 4px solid #6b8e23;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 4px;
  color: #2c3d14;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
}

.form-toast.form-toast-visible {
  opacity: 1;
  max-height: 60px;
}

.form-toast.form-toast-error {
  background: #fbeaea;
  border-left-color: #d84a3a;
  color: #5c1c14;
}

.form-toast svg {
  flex-shrink: 0;
}

/* Sistema de Grid Responsive */
:root {
  --container-width: 1200px;
  --grid-columns: 12;
  --grid-gap: 20px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--grid-gap) / 2);
}

/* Clases de columnas responsive */
[class*="col-"] {
  padding: 0 calc(var(--grid-gap) / 2);
  flex: 0 0 auto;
}

/* Breakpoints principales */
@media (min-width: 1200px) {
  .col-xl-1 { width: 8.33%; }
  .col-xl-2 { width: 16.66%; }
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.33%; }
  .col-xl-6 { width: 50%; }
  .col-xl-8 { width: 66.66%; }
  .col-xl-12 { width: 100%; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --container-width: 960px;
  }
  
  .col-lg-1 { width: 8.33%; }
  .col-lg-2 { width: 16.66%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33%; }
  .col-lg-6 { width: 50%; }
  .col-lg-12 { width: 100%; }

  /* Ajustes de fuentes */
  h1 { font-size: calc(2.5rem * 0.9); }
  h2 { font-size: calc(2rem * 0.9); }
  p { font-size: calc(1rem * 0.95); }
}

@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --container-width: 720px;
  }
  
  .col-md-1 { width: 8.33%; }
  .col-md-2 { width: 16.66%; }
  .col-md-4 { width: 33.33%; }
  .col-md-6 { width: 50%; }
  .col-md-12 { width: 100%; }

  /* Ajustes de espaciado */
  .section { padding: 60px 0; }
  .container { padding: 0 20px; }
}

@media (max-width: 767px) {
  :root {
    --container-width: 100%;
    --grid-gap: 15px;
  }
  
  [class*="col-"] {
    width: 100%;
  }

  /* Ajustes móviles */
  h1 { font-size: calc(2.5rem * 0.7); }
  h2 { font-size: calc(2rem * 0.7); }
  p { font-size: calc(1rem * 0.9); }
  
  .section { padding: 40px 0; }
  .container { padding: 0 15px; }

  /* Ajustes específicos para móvil */
  .hide-mobile { display: none; }
  .show-mobile { display: block; }
  
  /* Ajustes de márgenes y paddings */
  .m-mobile-0 { margin: 0 !important; }
  .p-mobile-0 { padding: 0 !important; }
  
  /* Ajustes de texto */
  .text-mobile-center { text-align: center; }
  .text-mobile-left { text-align: left; }
}

/* Utilidades responsive */
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }

/* Espaciado responsive */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* Ajustes de imagen responsive */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Control de aspectos ratio */
.ratio-16-9 {
  position: relative;
  padding-bottom: 56.25%;
}

.ratio-4-3 {
  position: relative;
  padding-bottom: 75%;
}

@media (max-width: 768px) {
    .contact-form-section {
        background-color: #CBCD00;
        padding: 25px 0 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-height: 92vh;
    }



    .form-text {
        text-align: center;
        margin: 0 auto 10px;
    width: 85%;
    max-width: 280px;
    }

    .form-text img.chada-logo-form {
      width: 75px;
      margin: -10px auto 0px; /* Añade margen superior y centra con auto */
      display: block;
    }

    .form-text h2 {
      font-size: 20px;
      line-height: 1.2;
      margin-bottom: 0; /* Elimina el espacio negativo */
      color: #0A2614;
      padding: 0;
      text-align: center;
      width: 85%;
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
  }

  .form-text p {
      font-size: 20px;
      color: #0A2614;
      line-height: 1.2;
      margin-top: 5px; /* Pequeño espacio entre los textos */
      margin-bottom: 15px;
      text-align: center;
      width: 85%;
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
  }

  .form-text::after {
    content: '';
    display: block;
    height: 2px;
    background-color: #FF6B00;
    width: 85%;
    max-width: 280px;
    position: absolute;
    left:55%;
    transform: translateX(-50%);
    bottom: 5px;
    text-align: center;
}

.required-asterisk {
  color: #FF6B00;
}

    .form-container {
      width: 85%; /* Mismo ancho que el texto */
      max-width: 280px; /* Mismo max-width que el texto */
      margin: 0px auto 0; /* Ajusta la posición vertical */
      transform: none;
        display: flex;
        justify-content: center; /* Centrado horizontal */
    }

  .form-container input {
        width: 90%;
        padding: 16px 8px 6px;
        border: 2px solid transparent;
        border-radius: 5px;
        background-color: white;
        font-size: 10px;
        margin-bottom: 5px;
        box-sizing: border-box;
  }

  .form-container .form-group label {
        font-size: 8px;
        left: 8px;
        top: 5px;
  }

  .form-container textarea {
        width: 100%;
        padding: 18px 8px 6px;
        border: 2px solid transparent;
        border-radius: 5px;
        background-color: white;
    font-size: 12px;
    height: 80px;
        resize: none;
        margin-bottom: 10px;
        box-sizing: border-box;
  }

  .form-container button {
        width: 100%;
        background-color: #0A2614;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 5px;
        font-size: 12px;
        height: 35px;
        margin-top: 2px;
        text-align: center;
  }

  #form-separator {
    scroll-margin-top: 59px;  /* Ajusta este valor según necesites */
    position: relative;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }
}
  /* Ajustes generales para todas las secciones */
  section {
    overflow: hidden; /* Previene desbordamiento */
    position: relative; /* Para posicionamiento correcto */
    width: 100%;
    margin: 0;
  }

  /* Asegurar espaciado entre secciones */
  section + section {
    margin-top: 40px;
  }

  /* Ajustes de altura mínima para secciones con contenido dinámico */
  .section-with-dynamic-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

/* Ajustes para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Ajustes similares pero con valores diferentes */
  section {
    padding: 60px 40px;
  }

  .section-with-dynamic-content {
    min-height: 80vh;
  }

  /* Ajustes específicos para cada sección en tablet */
  .certificaciones-container {
    gap: 20px;
  }

  .rs-content-container {
    padding: 30px;
  }
}

/* Ajustes para asegurar la separación vertical en todos los breakpoints */
section {
  position: relative;
  z-index: 1;
}

/* Prevenir superposición con el header */
section:first-of-type {
  margin-top: 80px; /* Altura del header */
}

/* Asegurar que las imágenes de fondo no causen problemas */
section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Contenedores flexibles para mejor organización */
.section-content {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Espacio específico entre los dos párrafos de descripción */
#descripcion {
  margin-bottom: 1px;
}


.footer {
    background-color: #0A2614;
    padding: 50px 40px;
    color: #CBCD00;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Columna izquierda */
.footer-left {
    text-align: left;
}

.locations {
    color: #CBCD00;
    margin-bottom: 15px;
    font-size: 16px;
}

.address {
    color: #CBCD00;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    width: 70%;
}

/* Columna central */
.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-logo img {
    height: 75px;
    width: auto;
    margin-top: 0px;
}

/* Columna derecha */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: center; /* Cambiado a center para los elementos internos */
    gap: 20px;
    margin-right: -200px !important;
}

.social-icons {
    display: flex;
    gap: 40px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #CACC00;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.social-icon i {
    font-size: 25px;
    color: #252525;
}

.social-icon:hover {
    transform: scale(1.1);
}

.email-container {
    text-align: center;
    width: 100%; /* Asegura que el contenedor tome el ancho completo */
}

.email {
    color: #CBCD00;
    text-decoration: none;
    font-size: 16px;
    margin-top: 20px; /* Ajustado el margen superior */
    display: inline-block; /* Ayuda con el centrado */
}

.privacy {
    text-align: center;
    margin-top: -20px; /* Ajustado para subir el aviso de privacidad */
}

.privacy a {
    color: #CBCD00;
    text-decoration: none;
    font-size: 16px;
}

/* Media query para móvil */
@media (max-width: 768px) {
  .footer {
      padding: 30px 20px;
  }

  .footer-content {
      display: flex;
      flex-direction: column;
      gap: 25px;
      text-align: center;
  }

  /* Reordenar elementos */
  .footer-left {
      order: 3;
      text-align: center;
  }

  .footer-center {
    order: 1;
    gap: 0; /* Eliminar gap para separar logo y aviso */
}

  .footer-right {
      order: 2;
      justify-content: center;
      align-items: center;
      width: 100%;
  }

.footer-logo img {
  height: 70px;
  margin-top: 0;
  margin-bottom: 0;
  order: 1;
}

  .social-icons {
      gap: 20px;
      justify-content: center; /* Asegura que los íconos estén centrados */
      order: 2;
  }

  .social-icon {
      width: 35px;
      height: 35px;
  }

  .social-icon i {
      font-size: 20px;
  }

  .locations {
      margin-bottom: 10px;
      font-size: 14px;
      order: 3;
  }

  .email-container {
      width: 100%;
      text-align: center;
      order: 4;
  }

  .email {
      font-size: 14px;
      margin-bottom: 8px;
      margin-top: 10px; /* Espacio después de locations */
      order: 4;
  }

  .address {
      color: #CBCD00;
      font-size: 14px;
      line-height: 1.4;
      margin: 0 auto; /* Añadido auto para centrar */
      width: 85%; /* Aumentado el ancho para mejor legibilidad */
      text-align: center;
  }


  .privacy {
      margin-top: 5px;
  }

   /* Mover el aviso de privacidad al final */
   .privacy {
    position: relative;
    width: 100%;
    text-align: center;
    order: 4;
    margin-top: 20px;
}

.privacy a {
    font-size: 14px;
}
}

/* Asegurar que no haya otros estilos sobrescribiendo */
.logo img[src*="logo"],
.mobile-header img[src*="logo"] {
  height: 50px !important;
  width: auto !important;
}

/* Estilos para el botón hamburguesa */
.hamburger-btn {
  position: fixed !important;
  top: 20px;
  right: 20px;
  z-index: 1001; /* Aumentado para asegurar que esté sobre el menú */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
}

/* Asegurar que el ícono sea visible */
.hamburger-btn i {
  font-size: 24px; /* Tamaño del ícono */
  color: #000; /* Color del ícono */
}

/* Cuando el menú está activo */
.mobile-menu.active + .hamburger-btn i.fa-times,
.hamburger-btn i.fa-times {
  color: #fff; /* Color blanco para la X cuando el menú está abierto */
}

/* Estilos del menú móvil */
.mobile-menu {
  z-index: 1000;
}

/* Mantener los estilos del scrollbar */
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

@media screen and (max-width: 768px) {
  .fullscreen-section {
    background-image: var(--mobile-bg);
    background-size: cover;
    background-position: center;
  }

  .fullscreen-section .fullscreen-image {
    display: none; /* Oculta la imagen desktop */
  }
}

.fullscreen-section {
  --mobile-bg: url(''); /* Inicializa la variable vacía */
}

/* Cuando el menú móvil está activo */
body.menu-open .mobile-header {
  display: none !important;
}

.mobile-menu.active {
  display: flex !important;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  padding-left: 0px;
}

/* Estilos base */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* Estilos base para certificaciones */
#certificaciones {
  position: absolute;
  top: 180px; /* Ajusta este valor según necesites que esté más arriba */
  left: 0;
  width: 100%;
  height: 1px; /* Altura mínima para que sea invisible */
  visibility: hidden; /* Lo hace invisible pero mantiene su función de anclaje */
}

.certificaciones-section {
  width: 100%;
  background-color: #fff;
  padding-top: 0;
  margin-top: -250px;
  position: relative;
}

.certificaciones {
  padding: 30px 0 50px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.certificaciones h2 {
  color: #217632;
  margin-bottom: 20px;
  margin-top: 280px;
}

.certificaciones p {
  color: #333;
  max-width: 800px;
  margin: 0 auto 40px;
}

.certificaciones-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 0 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.certificacion {
  flex: 0 1 300px; /* base de 300px pero permite reducción */
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 300px;
}

/* Deshabilitar scroll solo en las secciones específicas */
.image-carousel-section,
.responsabilidad-social {
  overflow: hidden !important;
  touch-action: none;
}

.carrusel-container {
  overflow: hidden;
  position: relative;
  height: auto; /* Altura fija basada en el contenido más alto */
  min-height: 400px; /* Ajusta este valor según tus necesidades */
}

.contenido-carrusel {
  position: absolute;
  width: 100%;
  transition: opacity 0.3s ease-in-out;
  top: 0;
  left: 0;
}

/* Asegurarse que las imágenes mantengan proporciones consistentes */
.contenido-carrusel img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Mantiene la proporción de la imagen */
}

/* Mantener el texto con altura consistente */
.contenido-carrusel h2,
.contenido-carrusel p {
  min-height: fit-content; /* Mantiene una altura mínima consistente */
}

/* Estilos para las transiciones del mapa */
#zonaTitulo,
#zonaNombre,
#zonaDescripcion {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#zonaImagen {
  transition: opacity 0.35s ease, transform 0.5s ease;
}

.mapa-img {
  transition: opacity 0.35s ease-in-out;
}

.mapa-container {
  position: relative;
}

.mapa {
  position: relative;
  width: 100%;
  height: auto;
}

.mapa-img {
  width: 100%;
  height: auto;
  display: block;
}

#zonaNombre {
  min-height: 100px; /* Altura para dos líneas de texto */
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 1.2;
  font-size: 30px; /* Ajusta según tu diseño */
  width: 55%;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .diseño-cultivo {
    position: relative;
    margin-top: 0;
    width: 92%; /* Mismo ancho que las demás secciones */
    height: auto;
    min-height: 100vh;
    border-top-left-radius: 150px;
    border-bottom-right-radius: 150px;
    padding: 30px 20px;
    z-index: 1;
    margin-left: auto; /* Centrar el contenedor */
    margin-right: auto; /* Centrar el contenedor */
    background-color: #217632;
  }

  .mapa-container {
    grid-template-columns: 1fr;
    height: auto;
    gap: 20px;
    padding: 20px 0;
    width: 100%;
  }

  #zonaNombre,
  .zona-nombre {
      font-size: 30px !important;
      width: 100% !important;
      text-align: center !important;
      margin: 0 auto !important;
      display: block !important;
      color: #CBCD00;
      top: 10px;
      height: 70px;
  }

  .zona-titulo {
    text-align: center;
    width: 100%;

  }

  .mapa-img {
    width: 100%;
    height: auto;
    display: block;
  }

  .imagen-contexto {
    height: 450px;
    width: auto;
    overflow: hidden;
    transform: translateX(-80px); /* Reducido para menor separación */
    margin-top: -260px; /* Ajustado para estar debajo del mapa */
    position: relative;
    float: left;
    margin-left: -30px;
  }
  
  .imagen-contexto img {
    height: 66%;
    width: auto;
    object-fit: cover;
    margin-top: 58px;
  }

  .zona-descripcion {
    color: white;
    font-size: 1.1rem;
    line-height: 1.4;
    width: 35%;
    text-align: left; /* Cambiado a left */
    position: absolute; /* Posicionamiento absoluto */
    right: 20px; /* Alinear a la derecha */
    margin-top: -65px; /* Mismo margen que la imagen */
  }

  .zonas-nav {
    max-width: 100%;
    margin-top: 16px;
    padding: 0 10px;
  }

  /* Ajustar la posición del logo */
  .logotipo-mapa {
    position: absolute;
    top: 179%;
    left: 15%;
    transform: translateX(-50%);
    width: 100px;
    height: auto;
  }

  .fullscreen-section .overlay-content .texto-blanco,
  .fullscreen-section .overlay-content .texto-verde {
    font-size: 2rem !important;
  }
  .fullscreen-section .overlay-content .titulo-seccion {
    font-size: calc(2.5rem* 0.5);
  }
}

/* Estilos para desktop (> 768px) */
@media (min-width: 769px) {
  .certificaciones-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 30px;
    width: 100%;
  }

  .certificacion {
    display: flex !important; /* Forzar visualización */
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Mostrar todos los productos en desktop */
@media (min-width: 769px) {
  .productos-contenedor {
    display: flex;
    flex-direction: row;
    gap: 100px;
    width: 100%;
    transform: none !important;
  }

  .producto {
    width: 300px;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .punto {
    display: none;
  }
}

/* Estilos base para vista desktop */
@media (min-width: 769px) {
  html {
    font-size: 16px; /* Tamaño base para cálculos */
  }

  body {
    overflow-x: hidden;
  }

  /* Contenedor principal que se reducirá proporcionalmente */
  .container, 
  .section, 
  .wrapper,
  [class*="col-"] {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    transform-origin: top center;
    transform: scale(var(--scale-factor, 1));
  }

  /* Calcular factor de escala basado en el ancho de la ventana */
  @media (max-width: 1200px) {
    :root {
      --scale-factor: calc(100vw / 1200);
    }

    .container, 
    .section, 
    .wrapper,
    [class*="col-"] {
      transform: scale(var(--scale-factor));
      height: calc(100% * var(--scale-factor));
      margin-bottom: calc((1 - var(--scale-factor)) * -100%);
    }
  }
}

/* Vista Mobile - mantener como está */
@media (max-width: 768px) {
  /* Resetear cualquier escala */
  :root {
    --scale-factor: 1;
  }

  .container,
  .section,
  .wrapper {
    transform: none;
    width: 100% !important;
    min-width: 320px !important;
    max-width: 768px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .cosechas {
    margin-top: 80px;
    margin-bottom: -50px;
    width: 89%;
    background-color: #FAF9E8;
  }

  .contenido-cosechas {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: none !important; /* Eliminar transformación del contenedor padre */
    padding-top: 10px;
  }

  #contactForm button {
    background-color: #142F1C;
    color: white;
    padding: 10px 40px 10px 40px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    align-self: flex-start;
    margin-top: 10px;
    width: 319px;
    margin: 0 auto;
  }

  .decoracion-izquierda {
    position: absolute !important;
    z-index: 99 !important;
    top: 80px !important;
    left: -30px !important;
    width: 120px !important;
    height: auto !important;
    pointer-events: none !important;
    display: block !important;
    transform: none !important;
  }

  .titulo-cosechas {
    font-size: 1.8rem;
    color: #142E1C;
    margin: 0 auto 5px;
    text-align: center;
    width: 100%;
    max-width: 300px;
    transform: none !important; /* Eliminar cualquier transformación previa */
    position: relative;
    left: 0;
    right: 0;
  }

  .descripcion-cosechas {
    font-size: 0.8rem;
    color: #142E1C;
    margin: 0 auto 30px;
    text-align: center;
    width: 100%;
    max-width: 300px;
    transform: none !important; /* Eliminar cualquier transformación previa */
    position: relative;
    left: 0;
    right: 0;
  }

  .productos-wrapper {
    background: white;
    width: 80%;
    margin: 0 auto;
    border-radius: 20px;
    padding: 30px 15px;
    min-height: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 103;
  }

  .productos-contenedor {
    width: 100%;
    display: flex;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .producto {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .producto-imagen-container {
    width: 200px;
    height: 200px;
    background-color: #F5F4D4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .producto-imagen-container:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .imagen-producto {
    width: 120px;
    height: auto;
  }

  .producto.active {
    display: flex; /* Solo el producto activo se mostrará */
    flex-direction: column;
    align-items: center;
  }

  .producto-info {
    text-align: center;
  }

  .producto-info h3 {
    color: #142E1C;
    font-size: 38px;
    margin: 10px auto 5px; /* Cambiado: usando auto en los márgenes laterales */
    font-weight: 600;
    font-size: bold;
    width: 60%;
    text-align: center;
    display: block; /* Añadido: asegura que el elemento sea bloque */
    margin-bottom: 20px;
  }

  .producto-info p {
    font-size: 18px;
    color: #142E1C;
    margin: 5px auto; /* Cambiado: usando auto en los márgenes laterales */
    line-height: 1.3;
    width: 60%;
  text-align: center;
    display: block; /* Añadido: asegura que el elemento sea bloque */
  }

.slide-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  position: static; /* Mantiene los indicadores en su lugar */
  bottom: 20px;
  width: 100%;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: static; /* Mantiene cada indicador en su lugar */
  padding: 0;
  border: none;
  margin: 0 5px;
  z-index: 100;
}

.indicator.active {
  background: #142E1C;
}

.productos-contenedor {
  position: relative;
  width: 100%;
}

.producto {
  position: absolute; /* Posicionamiento absoluto para los slides */
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
}

.producto.active {
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* El slide activo usa posición relativa */
}

/* Hacer el área clickeable más grande */
.indicator:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Asegurar que los productos se muestren/oculten correctamente */
.producto {
  display: none;
}

.producto.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.decoracion-derecha {
    display: none;
  }
}

/* Flechas específicas para la sección de responsabilidad social */
.responsabilidad-social .orange-arrow.left {
  border-width: 25px 30px 20px 0;
  border-color: transparent #FF6B00 transparent transparent;
  left: 40px;
  position: absolute;
  z-index: 1000;
}

.responsabilidad-social .orange-arrow.right {
  border-width: 25px 0 20px 30px;
  border-color: transparent transparent transparent #FF6B00;
  right: 40px;
  position: absolute;
  z-index: 1000;
}

/* Restaurar flechas en desktop */
@media (min-width: 769px) {
.certificaciones-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
  }

.certificacion {
    display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Ajustar las flechas para que sean visibles en desktop */
.orange-arrow {
  display: block !important; /* Forzar visualización */
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  cursor: pointer;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);
}

.image-carousel-section {
  background-color: #FFF;
  width: 100%;
  position: relative;
  min-height: auto;
  overflow-y: visible;
  touch-action: auto;
}

.separator-image {
  width: 100%;
    height: auto;
  display: block;
}

@media (max-width: 768px) {
  .separator-image {
    width: 200% !important; /* Reducido el ancho */
    margin-left: -50% !important; /* Centrado ajustado */
    height: 35px !important; /* Altura aumentada */
    object-fit: cover !important;
    display: block !important;
  }

  .image-carousel {
    padding: 5px 0 40px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
  }

  .image-carousel .mobile-carousel-img,
  .image-carousel .carousel-img {
    width: 192px !important;
    height: 300px !important; /* Imágenes más alargadas */
    object-fit: contain !important;
    margin: 0 5px !important;
  }

  .image-carousel .image-pair {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 0 !important;
    margin-bottom: 15px !important;
  }

  .top-separator {
    margin-bottom: 3px !important;
  }

  .bottom-separator {
    margin-top: 3px !important;
  }

  .slide-counter {
    position: absolute !important;
    bottom: 30px !important; /* Cambiado de top a bottom */
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 18px !important;
    color: #142E1C !important;
    z-index: 999 !important;
    padding: 5px 15px !important;
  }

  /* Ajustar posición de las flechas */
  .image-carousel .orange-arrow.left,
  .image-carousel .orange-arrow.right {
    position: absolute !important; /* Alinear con el contador */
    top: 84% !important; /* Remover posicionamiento superior */
    transform: none !important;
  }

  .image-carousel .orange-arrow.left {
    left: 20% !important;
  }

  .image-carousel .orange-arrow.right {
    right: 20% !important;
  }
}

/* Ocultar contador en desktop */
@media (min-width: 769px) {
  .slide-counter {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

@media (min-width: 769px) {
  .rs-mobile-container {
    display: none;
  }
}

/* Estilos para las transiciones de los carruseles */
.titulo-seccion-tecnologia,
.descripcion-seccion,
.imagen-seccion {
  opacity: 1;
  transition: all 0.8s ease;
  transform: translateY(0);
}

.fade-out {
  opacity: 0 !important;
  transform: translateY(20px) !important;
}

.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Estilos para las transiciones del carrusel de responsabilidad social */
.rs-mobile-image img,
.rs-mobile-nav h3,
.rs-mobile-description,
#rs-current-image,
#rs-current-title,
#rs-current-description {
  transition: opacity 0.3s ease-in-out;
}

/* Estilos para las transiciones del carrusel de imágenes */
.carousel-img {
  transition: opacity 0.3s ease-in-out;
}

/* Language Switcher Styles */
.language-switcher {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.lang-link {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  padding: 5px;
  transition: color 0.3s ease;
}

.lang-link:hover {
  color: #FF6B00;
}

.lang-link.active {
  color: #FF6B00;
  font-weight: bold;
}

.lang-separator {
  margin: 0 5px;
  color: #333;
}

/* Mobile language switcher */
.mobile-language-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}

.mobile-language-switcher .lang-link {
  color: #fff;
  font-size: 16px;
}

.mobile-language-switcher .lang-separator {
  color: #fff;
}

.mobile-language-switcher .lang-link.active {
  color: #FF6B00;
}
/* ============================================
   Sección Ubicaciones — Mapa interactivo Google Maps
   ============================================ */
.ubicaciones-mapa {
  background-color: #FAF9E8;
  padding: 80px 0 320px;
  /* padding-bottom ampliado: la sección de Certificaciones se monta -250px
     encima de esta sección (ver .certificaciones-section). Con 7 ubicaciones
     (3 filas de tarjetas) el contenido llega hasta el borde inferior y la
     superposición tapaba la tarjeta de Mérida. Este colchón deja margen de
     sobra (70px extra sobre los 250px de superposición) para que, si se
     agrega alguna ubicación más adelante, no se repita el mismo problema. */
}

.ubicaciones-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ubicaciones-header {
  text-align: center;
  margin-bottom: 32px;
}

.ubicaciones-titulo {
  font-size: 2.5rem;
  font-weight: 700;
  color: #142E1C;
  margin-bottom: 20px;
}

.ubicaciones-leyenda {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.leyenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: #142E1C;
}

.leyenda-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dot-invernadero { background-color: #217632; }
.dot-campo { background-color: #F5C518; }
.dot-oficina { background-color: #EA5B0C; }

.mapa-ubicaciones {
  width: 100%;
  height: 480px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 32px;
  background-color: #e8e7cf; /* Placeholder mientras carga el mapa */
}

.ubicaciones-tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ubicacion-tarjeta {
  display: flex;
  gap: 14px;
  background-color: #FFFFFF;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.ubicacion-tarjeta.tarjeta-activa,
.ubicacion-tarjeta:hover {
  box-shadow: 0 6px 18px rgba(33, 118, 50, 0.18);
  transform: translateY(-2px);
}

.tarjeta-icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  margin-top: 2px;
}

.tarjeta-icono.tipo-invernadero { background-color: rgba(33, 118, 50, 0.12); border: 2px solid #217632; }
.tarjeta-icono.tipo-campo { background-color: rgba(245, 197, 24, 0.18); border: 2px solid #F5C518; }
.tarjeta-icono.tipo-oficina { background-color: rgba(234, 91, 12, 0.12); border: 2px solid #EA5B0C; }

.tarjeta-nombre {
  font-size: 1.05rem;
  font-weight: 700;
  color: #142E1C;
  margin: 0 0 4px 0;
}

.tarjeta-detalle {
  font-size: 0.85rem;
  color: #4A4A4A;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.tarjeta-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.badge-invernadero { background-color: rgba(33, 118, 50, 0.14); color: #217632; }
.badge-campo { background-color: rgba(245, 197, 24, 0.22); color: #8a6d00; }
.badge-oficina { background-color: rgba(234, 91, 12, 0.14); color: #EA5B0C; }

/* Contenido del InfoWindow que se muestra al hacer clic en un marcador del mapa.
   Google Maps inyecta este HTML dentro de su propio contenedor (.gm-style-iw),
   por eso el ancho se fija aquí en vez de heredarlo del contenedor padre. */
.infowindow-ubicacion {
  display: flex;
  flex-direction: column;
  width: 180px;
  font-family: inherit;
}

.infowindow-ubicacion-imagen {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.infowindow-ubicacion-texto h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #142E1C;
}

.infowindow-ubicacion-texto p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #333;
}

/* Tablet */
@media (max-width: 992px) {
  .ubicaciones-tarjetas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móvil: mapa arriba, tarjetas apiladas debajo (orden natural del documento) */
@media (max-width: 768px) {
  .ubicaciones-mapa {
    padding: 50px 0;
  }

  .ubicaciones-titulo {
    font-size: 1.8rem;
  }

  .ubicaciones-leyenda {
    gap: 14px;
    font-size: 0.85rem;
  }

  .mapa-ubicaciones {
    height: 320px;
    border-radius: 14px;
  }

  .ubicaciones-tarjetas {
    grid-template-columns: 1fr;
  }
}