:root {
	--verde-fuerte: #15361C;
	--verde-suave: #69991E;
	--rojo-fuerte: #D3100F;
	--rojo-suave: #D3100F;
  --rojo-pc-1: #CE3433;
  --rojo-pc-2: #D50100;
	--blanco-pc: #FAF7F0;
  --black-palcampo: #09150B;
}

body{
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  background: var(--blanco-pc);
  color: var(--black-palcampo);
}

.ff-opensans{
  font-family: 'Open Sans', sans-serif;
}

/* Contenedor de la imagen (El marco) */
.zoom-img {
  display: block;
  border-radius: 15px; /* Aquí controlas qué tan redondeados quieres los bordes */
  overflow: hidden;    /* Corta la imagen para que no se salga */
  
  /* 🔥 EL TRUCO: Esto obliga al navegador a mantener los bordes redondeados 
     mientras la imagen de adentro se está moviendo o agrandando */
  transform: translateZ(0); 
  -webkit-mask-image: -webkit-radial-gradient(white, black); 
}

/* Estado inicial de la imagen */
.zoom-img img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease; /* Suavidad del movimiento */
  filter: brightness(0.9);
}

/* Efecto Hover (Al pasar el mouse) */
.zoom-img:hover img {
  transform: scale(1.08); /* Zoom del 8% sin romper las esquinas */
  filter: brightness(1.1);
}

footer .custom-logo-link img {
  width: 80%;
}

.bg-verde-fuerte{
  background: var(--verde-fuerte) !important;
}

.bg-blanco-pc{
  background: var(--blanco-pc) !important;
}

.text-blanco-pc{
  color: var(--blanco-pc) !important;
}

.border-blanco-pc{
  border: 1px solid var(--blanco-pc) !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-extrabold {
  font-weight: 800 !important;
}

/* 1. Definir el SemiBold para que coincida con Raleway 600 */
.fw-semibold {
  font-weight: 600 !important;
}

.bg-verde-suave{
  background: var(--verde-suave) !important;
}

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

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

.border-verde-fuerte{
  border: 1px solid var(--verde-fuerte) !important;
}

.rounded-40{
  border-radius: 40px;
}

.badge-category{
  border: 1px solid var(--verde-suave) !important;
  cursor: pointer;
}

.category-selected{
  background: var(--verde-suave) !important;
}

h2{
  font-size: 40px !important;
  line-height: 48px !important;
}

.fs-16{
  font-size: 16px !important;
  line-height: 24px !important;
}

.fs-18{
  font-size: 18px !important;
  line-height: 26px !important;
}

.fs-20{
  font-size: 20px !important;
  line-height: 28px !important;
}

.fs-22{
  font-size: 22px !important;
  line-height: 30px !important;
}

.fs-24{
  font-size: 24px !important;
  line-height: 32px !important;
}

.fs-26{
  font-size: 26px !important;
  line-height: 34px !important;
}

.fs-32{
  font-size: 32px !important;
  line-height: 40px !important;
}

.fs-36{
  font-size: 36px !important;
  line-height: 44px !important;
}

.fs-40{
  font-size: 40px !important;
  line-height: 48px !important;
}

.fs-48{
  font-size: 48px !important;
  line-height: 56px !important;
}

.fs-68{
  font-size: 68px !important;
  line-height: 76px !important;
}

.py-100{
  padding-top: 100px;
  padding-bottom: 100px;
}

.py-160{
  padding-top: 160px;
  padding-bottom: 160px;
}

.pt-144{
  padding-top: 144px;
}

.post-thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 10; /* Controla la proporción de aspecto automáticamente */
    object-fit: cover;
    object-position: center;
}

/* 1. Quitamos los puntos blancos por defecto */
.vineta-verde-suave {
  list-style: none !important;
  padding-left: 0 !important;
}

/* 2. Preparamos el <li> para contener el SVG absoluto */
/*.vineta-verde-suave li {
  position: relative !important;
  padding-left: 1.5rem !important;
  margin-bottom: 0.5rem;
}*/

/* 3. Tu pseudoelemento (Corregido el escape de caracteres) */
/*.vineta-verde-suave li::before {
  content: url("data:image/svg+xml,%3Csvg width='13' height='15' viewBox='0 0 13 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5.46704C13.3333 6.23684 13.3333 8.16135 12 8.93115L3 14.1273C1.66667 14.8971 -7.31543e-07 13.9349 -6.64245e-07 12.3952L-2.09983e-07 2.00295C-1.42685e-07 0.463345 1.66667 -0.498908 3 0.270893L12 5.46704Z' fill='%2369991E'/%3E%3C/svg%3E") !important;
  position: absolute !important;
  left: 0 !important;
  top: -0.25rem !important;
  display: inline-block !important;
  width: 13px !important;
  height: 15px !important;
}*/

/* 2. Estilos específicos para los links del menú */
#navMenu .nav-link {
  font-size: 28px; /* Bajamos de 28px a 20px para que respire mejor */
  font-weight: 600 !important; 
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Un toque de sombra mejora la legibilidad sobre fondos claros */
  padding-left: 15px;
  padding-right: 15px;
  white-space: nowrap;
}

/* El efecto de la página seleccionada */
.nav-link.page-selected {
  position: relative;
  opacity: 1;
}

/* Opcional: una barrita abajo como indicador de selección */
/*.nav-link.page-selected::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 15px;
  right: 15px;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
}*/
.nav-link.page-selected {
    position: relative;
    /* Activa el subrayado nativo */
    text-decoration: underline;
    /* Cambia el estilo de la línea a ondulado */
    text-decoration-style: wavy;
    /* Define el color de la onda (Blanco en este caso) */
    text-decoration-color: #fff;
    /* Controla el grosor de la onda */
    text-decoration-thickness: 2px;
    /* Separa la onda del texto hacia abajo (ajusta los px a tu gusto) */
    text-underline-offset: 8px;
}

:root {
  --rojo-fuerte: #D3100F;
}

.nav-link.page-selected {
  position: relative;
  text-decoration: none;
  display: inline-block;
}

.nav-link.page-selected::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px; /* Mayor separación para compensar la amplitud */
  width: 100%;
  height: 12px;  /* Amplitud duplicada (de 6px a 12px) */
  
  /* SVG con curvas más pronunciadas y mayor resolución vertical */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path d="M 0 6 C 6 -2, 6 14, 12 6 C 18 -2, 18 14, 24 6" fill="none" stroke="%23D3100F" stroke-width="2.5" stroke-linecap="round"/></svg>');
  
  background-repeat: repeat-x;
  background-size: 24px 12px; /* Ancho y alto proporcionales */
  
  /* Movimiento más lento: 2.2 segundos por ciclo */
  animation: moveWave 8.2s linear infinite;
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes moveWave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 24px; /* Coincide exactamente con los 24px de background-size */
  }
}

/* Efecto hover suave para el resto */
.nav-link.text-white:not(.page-selected):hover {
  opacity: 0.7;
}

.custom-logo {
    width: 150px; /* Aquí fuerzas el ancho que tú quieras */
    height: auto; /* Mantienes la proporción para que no se deforme */
}

.bg-gradiente-verde-suave{
	background: conic-gradient(from 263.2deg at 110.43% 4.34%, #69991E -23.47deg, rgba(105, 153, 30, 0.15) 145.46deg, #69991E 336.53deg, rgba(105, 153, 30, 0.15) 505.46deg);
}

.bg-glass{
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(2.1px);
  border: 1px solid rgba(255, 255, 255, 0.38);
}

.bg-glass:hover{
  background: rgba(255, 255, 255, 0.2) !important;
}

.btn-rojo-pc-1{
  overflow: hidden;
  background: var(--rojo-pc-1) !important;
}

.btn-rojo-pc-1.hvr-bounce-to-right:before{
  background: var(--rojo-suave) !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

nav {
	position: absolute; top: 0; left: 0; right: 0; z-index: 10;
	display: flex; align-items: center; padding: 0 40px; height: 70px;
}

.banner-carousel { position: relative; width: 100%; height: 100%; overflow: hidden; }

.banner-carousel .slide {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity 1s ease; background-size: cover; background-position: center;
}
  .banner-carousel .slide.active { opacity: 1; }
  .banner-carousel .slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 100%);
  }

  .banner-carousel .slide-1 { background-color: #4a7c59; background-image: url('https://palcampo.akold.com/wp-content/uploads/2026/06/Slider1.webp'); }
  .banner-carousel .slide-2 { background-color: #3d6b47; background-image: url('https://palcampo.akold.com/wp-content/uploads/2026/06/Slider2.webp'); }
  .banner-carousel .slide-3 { background-color: #2e5e3a; background-image: url('https://palcampo.akold.com/wp-content/uploads/2026/06/Slider3.webp'); }
  
  .banner-carousel .slide-4 { background-color: #2e5e3a; background-image: url('https://palcampo.akold.com/wp-content/uploads/2026/05/TerraData-Destacada.webp'); }
  
  .banner-carousel .slide-5 { background-color: #2e5e3a; background-image: url('https://palcampo.akold.com/wp-content/uploads/2026/06/Destacada_Productos.webp'); }
  
  .banner-carousel .slide-6 { background-color: #2e5e3a; background-image: url('https://palcampo.akold.com/wp-content/uploads/2026/06/Destacada_Descubre.webp'); }
  
  .banner-carousel .slide-7 { background-color: #2e5e3a; background-image: url('https://palcampo.akold.com/wp-content/uploads/2026/06/Destacada_contacto.webp'); }

  .banner-carousel .slide-content {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 40px;
  }
  .banner-carousel .slide-content h1 {
    font-size: 68px; 
    line-height: 76px;
    font-weight: 900;
    color: #fff;
    /*max-width: 700px;*/
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .banner-carousel .slide-content p {
    font-size: 24px; 
    color: rgba(255,255,255,0.92);
    margin-top: 16px;
    /*max-width: 500px; */
    line-height: 32px; 
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }

  .banner-carousel .dots {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 10; display: flex; gap: 8px;
  }
  .banner-carousel .dot {
    width: 28px; height: 6px; border-radius: 3px; cursor: pointer;
    background: rgba(255,255,255,0.4); transition: background 0.3s;
    border: none;
  }
  .banner-carousel .dot.active { background: #4caf50; }

  .banner-carousel .arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10; background: rgba(255,255,255,0.15); border: none;
    color: #fff; font-size: 22px; width: 44px; height: 44px;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
  }
  .banner-carousel .arrow:hover { background: rgba(255,255,255,0.3); }
  .banner-carousel .arrow-left { left: 20px; }
  .banner-carousel .arrow-right { right: 20px; }

.bg-cream {
  background-color: #fbf9f4;
}

.frontera-verde{
  background: linear-gradient(180deg, rgba(11, 27, 14, 0) 0%, #15361C 95.11%);
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 250px;
}

/* .producto-item {
  transition: all 0.3s ease;
} */

@keyframes aparecerSuave {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.producto-item {
  /* Forzamos a que empiece invisible mientras espera su turno */
  opacity: 0; 
  animation: aparecerSuave 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Contenedor padre de las tarjetas */
#productos-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Esto iguala la altura de todas las tarjetas */
}

/* La tarjeta individual */
.producto-item {
  display: flex;
  flex-direction: column;
}

.producto-item .card {
  flex-grow: 1; /* Hace que la tarjeta ocupe toda la altura del contenedor */
  display: flex;
  flex-direction: column;
}

/* Contenedor de la imagen: fija una altura constante */
.product-image {
  height: 200px; /* Ajusta este valor según tu diseño */
  overflow: hidden;
  display: flex;
  align-items: center; /* Centra la imagen verticalmente */
  justify-content: center;
}

/* La etiqueta img: se ajusta para cubrir el espacio sin deformarse */
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Cambia a 'cover' si quieres que la imagen llene el recuadro recortando bordes */
}

/* Botón de cierre posicionado */
.btn-close-custom {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1055;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #1a3c34; /* Ajusta este color al de tu marca */
  cursor: pointer;
}

/* Ajustes para el modal */
.modal-fullscreen {
  max-width: 100%;
  margin: 0;
}

.modal-content {
  background-color: #fcf9f2; /* Color crema del fondo adjunto */
  min-height: 100vh;
}

.pdf-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.producto-contenido-renderizado,
.producto-contenido-renderizado *{
  font-size: 22px !important;
  line-height: 30px !important;
  color: var(--verde-fuerte);
  font-family: 'Open Sans', sans-serif;
}

/* Estilos para la flecha interactiva */
.dynamic-arrow::before {
  content: url("data:image/svg+xml,%3Csvg width='13' height='15' viewBox='0 0 13 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5.46704C13.3333 6.23684 13.3333 8.16135 12 8.93115L3 14.1273C1.66667 14.8971 -7.31543e-07 13.9349 -6.64245e-07 12.3952L-2.09983e-07 2.00295C-1.42685e-07 0.463345 1.66667 -0.498908 3 0.270893L12 5.46704Z' fill='%2369991E'/%3E%3C/svg%3E") !important;
  color: #28a745; /* Cambia esto por tu verde suave exacto (ej. #81c784) */
  font-size: 0.6em; /* Ajusta el tamaño de la flecha respecto al texto */
  margin-right: 12px;
  transition: transform 0.2s ease;
  display: inline-block;
}

/* Cuando el elemento está ABIERTO (no tiene la clase .collapsed) rotamos la flecha */
.dynamic-arrow:not(.collapsed)::before {
  transform: rotate(90deg); /* Apunta hacia abajo */
}

/* Quitar el efecto de borde/sombra azul molesto de Bootstrap al hacer click */
.dynamic-arrow:focus {
  box-shadow: none;
}

/* ==========================================================================
   SECCIÓN INTERACTIVA (ACORDEÓN FLEX) - CSS COMPLETO
   ========================================================================== */

/* --- 1. CONFIGURACIÓN BASE Y VALORES POR DEFECTO --- */
.section-innovacion .wrapper-flex-cards {
  display: flex;
  width: 100%;
  flex-direction: row;
}

.section-innovacion .custom-hover-card {
  position: relative;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  height: 450px;
  flex: 1 1 0%;
  min-width: 0;
  /* Animación suavizada de expansión con curva fluida */
  transition: flex 0.8s cubic-bezier(0.25, 1, 0.35, 1);
}

.section-innovacion .card-image-content {
  height: 100%;
  width: 100%;
  flex-shrink: 0;
  transition: width 0.8s cubic-bezier(0.25, 1, 0.35, 1), 
              min-width 0.8s cubic-bezier(0.25, 1, 0.35, 1);
}

/* Escala de grises por defecto */
.section-innovacion .image-grayscale {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.8s ease-in-out;
}

.section-innovacion .text-success-light {
  color: var(--verde-suave);
}

/* Panel Verde desplegable */
.section-innovacion .card-text-panel {
  flex-basis: 0%;
  width: 0%;
  height: 100%;
  background-color: var(--verde-fuerte);
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transition: flex-basis 0.8s cubic-bezier(0.25, 1, 0.35, 1),
              width 0.8s cubic-bezier(0.25, 1, 0.35, 1),
              padding 0.8s cubic-bezier(0.25, 1, 0.35, 1),
              opacity 0.6s ease-in-out,
              visibility 0.6s ease-in-out;
}

/* El contenido interno de texto */
.section-innovacion .text-content-stable {
  width: 100%;
  min-width: 250px !important;
  box-sizing: border-box;
  transition: opacity 0.5s ease-in-out 0.2s, 
              transform 0.6s cubic-bezier(0.25, 1, 0.35, 1);
}


/* ==========================================================================
   2. DESKTOP (min-width: 992px)
   ========================================================================== */
@media (min-width: 992px) {

  /* Tarjeta Activa (ya sea por Autoplay JS o por Hover) */
  .section-innovacion .wrapper-flex-cards:not(:hover) .custom-hover-card.active,
  .section-innovacion .wrapper-flex-cards .custom-hover-card:hover {
    flex: 3.5 1 0% !important;
  }

  /* La foto se ajusta al 35% del ancho disponible */
  .section-innovacion .wrapper-flex-cards:not(:hover) .custom-hover-card.active .card-image-content,
  .section-innovacion .wrapper-flex-cards .custom-hover-card:hover .card-image-content {
    width: 35% !important;
    min-width: 35% !important;
  }

  /* El panel verde toma el 65% del ancho */
  .section-innovacion .wrapper-flex-cards:not(:hover) .custom-hover-card.active .card-text-panel,
  .section-innovacion .wrapper-flex-cards .custom-hover-card:hover .card-text-panel {
    flex-basis: 65% !important;
    width: 65% !important;
    padding: 2rem !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Activa color full en la imagen activa */
  .section-innovacion .wrapper-flex-cards:not(:hover) .custom-hover-card.active .image-grayscale,
  .section-innovacion .wrapper-flex-cards .custom-hover-card:hover .image-grayscale {
    filter: grayscale(0%) !important;
  }
}


/* ==========================================================================
   3. RESPONSIVO: TABLETS (768px a 991.98px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

  .section-innovacion .wrapper-flex-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; 
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .section-innovacion .custom-hover-card {
    display: flex !important;
    flex-direction: row !important;
    height: 380px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.35, 1) !important;
  }

  .section-innovacion .card-image-content {
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    transform: none !important;
    transition: width 0.6s ease !important;
  }

  .section-innovacion .card-image-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .section-innovacion .card-text-panel {
    flex-basis: 0% !important;
    width: 0% !important;
    height: 100% !important;
    background-color: var(--verde-fuerte) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    transition: all 0.6s ease !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Estado activo por defecto en Tablet (Autoplay) */
  .section-innovacion .wrapper-flex-cards:not(:hover):has(.custom-hover-card.active) {
    grid-template-columns: 1.4fr 0.6fr !important;
  }

  .section-innovacion .wrapper-flex-cards:not(:hover) .custom-hover-card.active .card-image-content {
    width: 40% !important;
  }

  .section-innovacion .wrapper-flex-cards:not(:hover) .custom-hover-card.active .card-text-panel {
    flex-basis: 60% !important;
    width: 60% !important;
    padding: 1.25rem !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .section-innovacion .wrapper-flex-cards:not(:hover) .custom-hover-card.active .image-grayscale {
    filter: grayscale(0%) !important;
  }

  /* Hover en Tablet */
  .section-innovacion .wrapper-flex-cards:has(.custom-hover-card:nth-child(odd):hover) {
    grid-template-columns: 1.4fr 0.6fr !important;
  }

  .section-innovacion .wrapper-flex-cards:has(.custom-hover-card:nth-child(even):hover) {
    grid-template-columns: 0.6fr 1.4fr !important;
  }

  .section-innovacion .custom-hover-card:hover .card-image-content {
    width: 40% !important;
  }

  .section-innovacion .custom-hover-card:hover .card-text-panel {
    flex-basis: 60% !important;
    width: 60% !important;
    padding: 1.25rem !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .section-innovacion .custom-hover-card:hover .image-grayscale {
    filter: grayscale(0%) !important;
  }

  .section-innovacion .text-content-stable {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .section-innovacion .card-text-panel h3.fs-40 {
    font-size: 22px !important; 
    margin-bottom: 0.3rem !important;
    white-space: nowrap !important;
  }

  .section-innovacion .card-text-panel p.fs-22 {
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
  }
}


/* ==========================================================================
   4. RESPONSIVO: MOBILE (Menos de 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

  .section-innovacion .wrapper-flex-cards {
    display: flex !important;
    flex-direction: column !important;
  }

  .section-innovacion .custom-hover-card {
    flex-direction: column !important;
    height: auto !important;
    flex: none !important;
    width: 100% !important;
    overflow: hidden;
  }

  .section-innovacion .card-image-content {
    width: 100% !important;
    min-width: 100% !important;
    height: 450px !important;
  }

  .section-innovacion .card-image-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Todas las tarjetas visibles en lista */
  .section-innovacion .card-text-panel {
    width: 100% !important;
    flex-basis: auto !important;
    height: auto !important;
    padding: 1.5rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  .section-innovacion .text-content-stable {
    width: 100% !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .section-innovacion .card-text-panel h3.fs-40 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }

  .section-innovacion .card-text-panel p.fs-22 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
  }

  /* Fotos siempre a color en móvil */
  .section-innovacion .image-grayscale {
    filter: grayscale(0%) !important;
  }
}

/* --- NUEVOS ESTILOS PARA LA PAGINACIÓN BAJO EL TEXTO --- */
.seccion-swiper-split .swiper-pagination-custom {
  position: relative !important; /* Desactiva el absolute de Swiper */
  bottom: 0 !important;
  left: 0 !important;
  display: flex;
  gap: 6px;
  width: 100% !important;
  text-align: left !important;
  justify-content: flex-start !important;
  margin-top: 15px;
}

/* Estilo personalizado de los bullets */
.seccion-swiper-split .swiper-pagination-bullet {
  background: #c2cfb4 !important; /* Verde muy suave o gris para inactivos */
  opacity: 1 !important;
  width: 8px;
  height: 8px;
  margin: 0 !important;
  transition: all 0.3s ease;
}

/* Bullet activo estirado como cápsula */
.seccion-swiper-split .swiper-pagination-bullet-active {
  background: #629443 !important; /* Tu verde de marca */
  width: 24px !important;
  border-radius: 4px;
}

/* --- PAGINACIÓN FLOTANTE EXACTA EN LA COLUMNA DE TEXTO --- */
.seccion-swiper-split .swiper-pagination-custom {
  position: absolute !important;
  bottom: 30px !important; /* Distancia desde abajo en móvil */
  left: 0;
  width: 100% !important;
  display: flex;
  gap: 6px;
  justify-content: center !important; /* Centrado por defecto en móvil */
  z-index: 10;
  padding: 0 25px;
}

/* --- MODO ESCRITORIO (Pantallas de Laptop / PC) --- */
@media (min-width: 768px) {
  
  /* Estado inicial: las 4 columnas miden exactamente lo mismo */
  .section-innovacion .custom-hover-card {
    flex: 1;
  }

  .section-innovacion .card-image-content {
    width: 100%;
  }

  /* Fotos en blanco y negro por defecto */
  .section-innovacion .image-grayscale {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
  }

  /* El panel verde del texto inicia comprimido en ancho 0 e invisible */
  .section-innovacion .card-text-panel {
    flex-basis: 0%;
    width: 0;
    opacity: 0;
    overflow: hidden; /* Actúa como cortina tapando el texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    transition: flex-basis 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  }

  /* FIJA EL TEXTO: Mantiene el párrafo ordenado para que no se mueva raro al abrirse */
  .section-innovacion .text-content-stable {
    width: 280px; 
    min-width: 280px;
    display: block;
  }

  /* --- COMPORTAMIENTO HOVER (AL PASAR EL MOUSE) --- */

  /* 1. La columna seleccionada se estira al doble de tamaño */
  .section-innovacion .custom-hover-card:hover {
    flex: 2;
  }

  /* 2. La foto de la columna activa pasa a ocupar el 50% exacto de su nuevo tamaño */
  .section-innovacion .custom-hover-card:hover .card-image-content {
    width: 50%;
  }

  /* 3. La foto recupera sus colores originales */
  .section-innovacion .custom-hover-card:hover .image-grayscale {
    filter: grayscale(0%);
  }

  /* 4. La cortina se abre dándole el otro 50% al bloque verde del texto */
  .section-innovacion .custom-hover-card:hover .card-text-panel {
    flex-basis: 50%;
    opacity: 1;
  }
}

.col-content-mapa{
  min-height: 760px;
}

.bg-gradient-1{
  background: linear-gradient(96.58deg, rgba(21, 54, 28, 0.75) 40.07%, rgba(105, 153, 30, 0.75) 93%);
}

.bg-gradient-2{
  background: linear-gradient(276.58deg, rgba(21, 54, 28, 0.75) 40%, rgba(105, 153, 30, 0.75) 93%);
}

/* --- MODO CELULAR / MOBILE (Se desactiva la animación y se apilan) --- */
@media (max-width: 767.98px) {
  .py-160{
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }

  .bg-attachment-mobile{
    background-attachment: fixed !important;
  }

  .py-500{
    padding-top: 500px;
    padding-bottom: 500px;
  }

  .py-160{
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .fs-40 {
    font-size: 30px !important;
    line-height: 38px !important;
  }

  h2{
    font-size: 32px !important;
    line-height: 40px !important;
  }

  .fs-36 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .fs-32 {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  .fs-26 {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  .fs-24 {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .fs-22 {
    font-size: 18px !important;
    line-height: 26px !important;
  }

  .fs-20 {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .fs-18{
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .fs-16{
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .contenido-post p{
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .contenido-post strong {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  .col-12:not(.contenedor-imagen-slide, .not-px){
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .bg-doctors{
    background-position-x: 70% !important;
  }

  .py-100{
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .col-content-mapa{
    min-height: 350px;
  }

  .seccion-swiper-split .swiper-pagination-custom{
    bottom: 375px !important;
  }

  .section-innovacion .wrapper-flex-cards {
    flex-direction: column; /* Cambia a flujo vertical */
  }

  .section-innovacion .custom-hover-card {
    flex-direction: column;
    width: 100%;
    height: auto;
    /*margin-bottom: 1.5rem;*/
  }

  .section-innovacion .card-image-content {
    width: 100%;
    height: 400px; /* Altura cómoda de las imágenes en celular */
  }

  .section-innovacion .image-grayscale {
    filter: grayscale(0%); /* En celular siempre se ven a full color */
  }

  .section-innovacion .card-text-panel {
    width: 100%;
    padding: 1.5rem !important; /* Más espaciado para lectura táctil */
  }

  .pt-144{
    padding-top: 72px !important;
  }

  footer .custom-logo-link img{
    width: 46% !important;
  }
}

@media (max-width: 991px) {
    /* Fondo para el menú desplegable en móvil */
    .navbar-collapse {
        background-color: #ffffff; /* O el color de fondo de tu tema */
        padding: 20px;
        border-radius: 10px;
        /*box-shadow: 0 4px 6px rgba(0,0,0,0.1);*/
        margin-top: 15px;
    }

    .nav-link.page-selected::after{
      bottom: -10px;
    }

    /* Ajuste para que los links no se vean amontonados */
    .navbar-nav {
        margin-left: 0 !important;
        padding-left: 0 !important;
        gap: 1rem !important; /* Reducimos el gap que tenías de 5 */
        margin-top: 0 !important;
        /*background: var(--rojo-pc-1);*/
    }
}

/* ==========================================================================
   ESTILOS DE LA GALERÍA DINÁMICA (EXPANSIÓN HORIZONTAL)
   ========================================================================== */

.section-galeria-panoramica .wrapper-galeria-dinamica {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* Base de cada tarjeta */
.section-galeria-panoramica .tarjeta-galeria {
  position: relative;
  height: 380px; /* Controla la altura fija que deseas para tus tarjetas */
  /* Transición suave para el cambio de ancho */
  transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* El contenedor "ventana" que mantiene los bordes y sombras perfectos */
.section-galeria-panoramica .contenedor-recorte {
  width: 100%;
  height: 100%;
  border-radius: 20px; /* Bordes redondeados idénticos a tus capturas */
  overflow: hidden;
  
  /* Sombra sutil que se ve en tu diseño */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
  
  /* Fix definitivo para que Chrome/Safari no rompan las esquinas en la animación */
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Comportamiento de la imagen interna */
.section-galeria-panoramica .img-panoramica {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Clave: hace que la imagen llene el espacio sin deformarse */
  object-position: center;
  display: block;
  /* Pequeño zoom interno complementario para darle más dinamismo */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* --- COMPORTAMIENTO DESKTOP (Laptops y Computadoras) --- */
@media (min-width: 768px) {
  
  /* Estado inicial: Reparto equitativo (1 de 3 partes cada una) */
  .section-galeria-panoramica .tarjeta-galeria {
    flex: 1;
    padding: 0 12px; /* Simula el espaciado (gutter) de Bootstrap g-4 */
  }

  /* --- EFECTO HOVER --- */

  /* La tarjeta seleccionada se expande notablemente ocupando más espacio */
  .section-galeria-panoramica .tarjeta-galeria:hover {
    flex: 1.6; /* Proporción de crecimiento visual del elemento */
  }

  /* La imagen de la tarjeta activa hace un sutil zoom para profundizar el efecto */
  .section-galeria-panoramica .tarjeta-galeria:hover .img-panoramica {
    transform: scale(1.04);
  }
}

/* --- COMPORTAMIENTO MOBILE (Celulares) - CORREGIDO --- */
@media (max-width: 767.98px) {
  .fs-68{
    font-size: 34px !important;
    line-height: 42px !important;
  }
  .banner-carousel .slide-content h1{
    font-size: 32px;
    line-height: 40px;
  }
  .banner-carousel .slide-content p{
    font-size: 18px;
    line-height: 26px;
  }
  .section-galeria-panoramica .wrapper-galeria-dinamica {
    flex-direction: column; /* Apilado vertical */
    padding-left: 0 !important;   /* Limpia desfases heredados */
    padding-right: 0 !important;  /* Limpia desfases heredados */
    margin-left: 0 !important;    /* Resetea márgenes negativos de Bootstrap */
    margin-right: 0 !important;   /* Resetea márgenes negativos de Bootstrap */
    width: 100% !important;
  }

  .section-galeria-panoramica .tarjeta-galeria {
    width: 100% !important;     /* Fuerza a que ocupe todo el ancho disponible */
    height: 280px;              /* Altura ideal en móvil */
    padding: 0 !important;      /* Elimina los 12px de los lados que causaban el descuadre */
    margin-bottom: 1.5rem;      /* Separación balanceada entre las tarjetas */
  }
}

/* --- CONFIGURACIÓN DE ALTURA CORREGIDA Y DOTS --- */

.seccion-swiper-split .bg-crema-claro {
  background-color: #fcfaf2;
}

.seccion-swiper-split .swiper-slide {
  height: auto;
  display: flex;
}

/* Reducción drástica de la altura en Escritorio */
@media (min-width: 768px) {
  .seccion-swiper-split .swiper-slide .row {
    display: flex;
    align-items: stretch; 
  }
  
  /* Ajustamos el padding para recortar la altura del bloque de texto */
  .seccion-swiper-split .py-md-5 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* Control estricto de la altura de la imagen */
.seccion-swiper-split .contenedor-imagen-slide {
  height: 350px; /* Altura en móviles */
}

@media (min-width: 768px) {
  .seccion-swiper-split .contenedor-imagen-slide {
    height: 500px; /* Altura máxima controlada para pantallas grandes */
  }
}

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

@media (min-width: 768px) {
  .seccion-swiper-split .swiper-pagination-custom {
    bottom: 75px !important; /* Sube para encajar justo en el 'espacio-paginacion-desktop' */
    width: 50% !important;   /* Se limita estrictamente a la mitad del texto */
    padding-left: calc((100vw - 1140px) / 2 + 100vw * 0.12) !important; /* Alineación matemática con el col-xl-8 */
    /*justify-content: flex-start !important;*/
    justify-content: start !important; /* Alineado a la izquierda */
  }
}

/* En monitores extra grandes (Bootstrap container max-width: 1320px) */
@media (min-width: 1400px) {
  .seccion-swiper-split .swiper-pagination-custom {
    padding-left: calc((100vw - 1320px) / 2 + 155px) !important;
  }
}

/* --- ESTILOS DE LOS BULLETS (SE MANTIENEN IGUAL) --- */
.seccion-swiper-split .swiper-pagination-bullet {
  background: #c2cfb4 !important;
  opacity: 1 !important;
  width: 8px;
  height: 8px;
  margin: 0 !important;
  transition: all 0.3s ease;
}

.seccion-swiper-split .swiper-pagination-bullet-active {
  background: #629443 !important;
  width: 24px !important;
  border-radius: 4px;
}

.btn-palcampo .icono-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;  /* Forzamos un ancho y alto idénticos (cuadrado perfecto) */
    height: 1.2em; 
    transform-origin: center center; /* Obligamos a que rote exactamente en su centro */
    transition: transform 0.25s ease-in-out;
}

/* Estado HOVER: Gira perfectamente sobre su propio eje */
.btn-palcampo:hover .icono-flecha {
    transform: rotate(-45deg); 
}

.post-card-descubre:hover .post-title,
.post-card-descubre:hover .btn-palcampo{
  color: var(--verde-suave) !important;
}
.post-card-descubre:hover .icono-flecha{
  transform: rotate(-45deg); 
}


/* Fuerza a que tu clase fs-40 mantenga consistencia */
.fs-40 {
  font-size: 1.8rem; /* Puedes ajustarlo a los px exactos que uses */
}

/* --- COMPORTAMIENTO PARA MÓVILES (Pantallas pequeñas) --- */
@media (max-width: 767.98px) {
    .custom-card .card-initial-title {
        display: none !important; /* Ocultamos el texto absoluto flotante en móvil */
    }
    
    .custom-card .hover-overlay {
        background-color: var(--verde-fuerte); /* Fondo verde oscuro sólido */
        position: relative;        /* Se posiciona abajo de la imagen de forma natural */
        width: 100%;
        padding: 2rem 1rem;
    }
    
    /* En móvil cambiamos el título interno a blanco para mejor contraste */
    .custom-card .hover-overlay .text-success-light {
      /*color: #ffffff !important;*/
    }
}

/* --- COMPORTAMIENTO PARA ESCRITORIO (A partir de Tablets/PC >= 768px) --- */
@media (min-width: 768px) {
    .custom-card {
        overflow: hidden;
    }

    /* El texto inicial encima de la imagen se ve por defecto */
    .custom-card .card-initial-title {
        opacity: 1;
        transition: opacity 0.3s ease;
        z-index: 2;
    }

    /* La capa de hover se oculta por defecto usando opacidad */
    .custom-card .hover-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--verde-fuerte); /* Fondo verde oscuro con leve transparencia */
        opacity: 0;
        transition: opacity 0.75s ease;
        z-index: 3;
        overflow: hidden;
    }

    /* --- EFECTOS AL HACER HOVER --- */
    .custom-card:hover .hover-overlay {
        opacity: 1; /* Muestra el bloque verde */
    }

    .custom-card:hover .card-initial-title {
        opacity: 0; /* Desvanece limpiamente el texto blanco del fondo */
    }
}

/* 1. Aseguramos que la tarjeta ocupe todo el alto disponible */
.post-card {
    display: flex;
    flex-direction: column;
}

/* 2. Hacemos que el contenedor del texto crezca para ocupar el espacio libre */
.post-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Esto empuja todo el bloque hacia abajo */
}

/* 3. El truco maestro: margin-top: auto empuja el botón al fondo */
.read-more {
    margin-top: auto; 
    align-self: flex-start; /* Evita que el enlace se estire a lo ancho si no quieres */
}