/* Estilos Generales y Reseteo */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
}

/* Otros */
.title {
    font-size: 3em;
    color: #34a853; /* Color verde */
    margin-bottom: 20px;
    line-height: 1.1;
    font-weight: bold;
}

.text {
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
}  
        
.image-main {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;    
}

.image-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre las imágenes superior e inferior */
}

.image-top,
.image-bottom {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.image-top img,
.image-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.container {
  display: flex; /* Activa el modelo Flexbox */
  /*gap: 20px; /* Espacio entre columnas (opcional) */
  padding: 20px;
  max-width: 100%;
}

/* Estilo del Título de Sección */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

/* */

body {
    max-width: 100%;
    overflow-x: hidden; /* Esto corta cualquier desbordamiento lateral */
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-background);
}

.container-site {
    width: 100%;    
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 60px 0;
}

/* --- Botón Primario --- */
.btn-primary {
    display: inline-block;
    background-color: var(--color-monaca-green);
    color: var(--color-text-light);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #004c26; /* Tono más oscuro de verde */
}

/* ====================  Botón Subir ==================== */
.toTop {
  border: none;
  display: flex;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
  /* posición */
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
}
.toTop:not(.is-visible) {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2rem);
}
.toTop svg {
  stroke-width: 3px;
  stroke: currentColor;
  fill: none;
  width: 24px;
}
/* Personalizar */
.toTop {
  background-color: var(--color-monaca-green2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius:  50px 50px 50px 50px;
  padding: 0.75rem;
  color: #fff;  
}


/* ==================== HEADER / NAVEGACIÓN ==================== */
.main-header {
    background-color: var(--color-text-light);    
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
    overflow: hidden;    
    padding: 10px 0;
    transition: all 0.3s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: 100%;
}

.logo {
    width: 250px; /* Tamaño ajustado para el logo */
    height: auto;
}

.main-nav ul {
    list-style: none;
    display: flex;
    margin-bottom: initial;
}

.main-nav ul li a {
    text-decoration: none;
    color: var(--color-text-menu);
    padding: 10px 15px;
    font-weight: 600;   
    border-bottom: 0px solid none; /* Grosor, estilo y color */
    display: inline-block; /* Para que el borde se ajuste al ancho del texto */    
}

.main-nav ul li a:hover {
    color: var(--color-text-hover-menu);
    border-bottom: 2px solid var(--color-text-hover-menu); /* Grosor, estilo y color */
    display: inline-block; /* Para que el borde se ajuste al ancho del texto */
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.copyright{
    text-align: right;
    font-size: 1.1rem;
}

/* Clase que aplicaremos dinámicamente para identificar en donde se ubica el usuario*/
.active-menu {
    color: var(--color-text-hover-menu) !important;
    border-bottom: 4px solid var(--color-text-hover-menu) !important;
}

/* Distancia entre link del menú */
.nav-item {
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--color-text-menu);
}

/* ====================  CINTILLO 60 AÑOS  ==================== */
.cintillo-section {
    background-color: var(--color-background);
    padding: 20px 0;
    /* padding: 10px 0px 10px 0px; */
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.cintillo-grid {
    display: flex;
    justify-content: center; /* Centramos el bloque completo */
    align-items: center;    
    gap: 200px;
}

.cintillo-item {
    /*flex: 0 1 auto; /* No obligamos a que crezcan, sino que respeten su tamaño */
    /*display: flex;
    justify-content: center;   */
    position: relative;
}

.cintillo-item img {
    width: 100%;    
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.cintillo-item img:hover {
    transform: scale(1.1); /* Efecto de crecimiento al pasar el mouse */
}

/* Opcional: Si quieres que las imágenes se centren perfectamente en el flujo */
#cintillo .row {
    display: flex;
    flex-wrap: wrap;
}


/* ====================  CARRUSEL DE IMAGENES  ==================== */

.carousel-indicators li {
  width: 12px; /* Ajusta el tamaño según necesites */
  height: 12px; /* Ajusta el tamaño según necesites */
  border-radius: 50%; /* Esto hace que sean redondos */
  background-color: var(--color-text-menu); /* Color de fondo por defecto */
  /* border: 2px solid #ccc; /* Borde para mejor apariencia */
  margin: 0 5px; /* Espaciado entre indicadores */
}

.carousel-indicators li.active {
  background-color: var(--color-monaca-green2); /* Color de fondo para el indicador activo */
  /*border-color: #007bff; */
}

/* Contenedor principal del carrusel */
/* Fuerza al carrusel a ignorar el contenedor padre si existe */
.carousel-sup {           
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;           
}
/* O para mantener el forzado del ancho total: */
.carousel-full {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


/* Si se elige la transición 'Fade' (desvanecido) */
.carousel-fade .carousel-item {
    transition-duration: 0.6s;
    transition-property: opacity;
}

/* ==================== SECCIÓN PRINCIPAL / HERO ==================== */
.hero-section {
    background-color: var(--color-text-light);
    padding: 10px 0;
    text-align: center;
}

.subtitle-hero {
    font-size: 1.2em;
    color: var(--color-text-dark);
    margin-bottom: 5px;
    font-weight: normal;
    letter-spacing: 2px;
}

.title-hero {
    font-size: 4em;
    color: var(--color-monaca-green);
    margin-bottom: 15px;
    line-height: 1.1;
    font-weight: 900;
}

.tagline-hero {
    font-size: 1.5em;
    margin-bottom: 40px;
    color: var(--color-monaca-yellow);
    font-weight: bold;
    letter-spacing: 3px;
}

/* ==================== SECCIÓN NOSOTROS ==================== */
#nosotros {
    /*padding: 60px 20px; /* Asegura margen en los bordes en móvil */
    overflow: hidden;    /* Evita que imágenes grandes creen scroll horizontal */
}
.container-about {
  padding: 20px;
  max-width: 100%;
}

.section-title {
    text-align: center;
    font-size: 4.5em;    
    color: var(--color-text-light);
    font-weight: 700;    
    line-height: 1.1;    
}

/* Imagen de fondo */
.about-background-container {
    width: 100%;
    line-height: 0; /* Elimina espacios residuales debajo de la imagen */
}

.about-bg-img {
    width: 100%;
    height: auto; /* Esto hace que el alto de la sección sea el de la imagen */
    display: block;
}
/* Fin: Imagen de fondo */

.about-section {
    background-color: var(--color-monaca-green);
    overflow: hidden;
    display: block;
    width: 100%;
}

.about-content {
    display: grid;    
    gap: 40px;
    justify-content: center;
}

.about-content-overlay {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%; 
    display: flex;
    flex-direction: column; /* Alinea hijos verticalmente */
    justify-content: center; /* Centra verticalmente */
    align-items: center;    /* Centra horizontalmente */
    z-index: 2;
}

.about-text {
    grid-column: 1 / 2;
    text-align: justify;
}

.about-p{
    color: var(--color-text-light);
    font-size: 1.55em;
    font-weight: 500;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-word;
    margin-left: 150px;
    margin-right: 150px;   
    padding-top: 15px; 
}
.about-p1{
   margin-top: 20px; 
}

.about-p2{
   margin-top: 20px; 
}

.about-image {
    grid-column: 2 / 3;
    display: flex;
    align-items: flex-start; /* Alinea la imagen a la parte superior */
    justify-content: center;
}

.deco-about {
    display: block;
    width: 25%;
    color: var(--color-text-light);
    border-bottom: 3px solid var(--color-text-light);
    padding-bottom: 25px;
    margin: 0 auto;
}

/**/
.map-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.mv-card {
    flex: 1;
    padding: 30px;
    background-color: var(--color-text-light);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.mv-card h3 {
    color: var(--color-monaca-green);
    margin-bottom: 15px;
    font-size: 1.5em;
    border-bottom: 2px solid var(--color-monaca-yellow);
    padding-bottom: 5px;
}

/* ==================== SECCIÓN COMPROMETIDOS ==================== */
.comprometidos-container {
    grid-column: 1 / 3;
    display: flex;
    gap: 30px;
    margin-top: 40px;
}
.comp-align{
    display: block;
    overflow: hidden;
}

.left-section {
    flex: 1;
    padding: 140px 40px 40px 100px;
    display: flex;
    flex-direction: column;    
    min-width: 300px;
}

.right-section {
    flex: 1.2; /* Permite que la sección derecha ocupe más espacio */
    display: flex;
    padding: 15px 45px 45px 45px;
    gap: 20px; /* Espacio entre la imagen principal y el grid de imágenes */
    min-width: 400px; /* Ancho mínimo para la sección derecha */
}

.container-comp {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    max-width: none;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;        
    overflow: hidden; /* Asegura que las esquinas redondeadas se apliquen a todo el contenedor */
}

.title-comp{
    font-size: 4.5em;
    color: var(--color-monaca-green2);    
    margin-bottom: 5px;     
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

.p-comp{
    font-size: 1.70em;
    color: var(--color-monaca-green2);    
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    text-align: justify;
}

.text2 {
    font-size: 4.5em;
    margin-bottom: 40px;
    color: var(--color-monaca-green2);       
    line-height: 1.1;
    display: inline-block;
    padding-bottom: 20px;
    font-weight: 700;
}

/* 2. Estilos del Título (SPAN) */
.text2-title {    
    display: block; 
    width: 50%; /* <<-- ESTO DIBUJA SOLO LA MITAD DE LA LÍNEA -->> */    
    color: var(--color-monaca-green2);     
    border-bottom: 3px solid var(--color-monaca-green2); 
    padding-bottom: 25px; 
}

.image-main img {
    width: 100%;
    height: 100%;    
    object-fit: scale-down;
    display: block;
}

/* ====================  SECCIÓN MISIÓN - VISIÓN  ==================== */

.mission-vision-container {   
    display: flex;
    gap: 30px;
    overflow: hidden;
}

.misvis-container{
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    width: 100%;      
    overflow: hidden;
}


.title-misvis{
    font-size: 4.5em;
    margin-bottom: 40px;
    color: var(--color-text-light);
    line-height: 1.1;    
    padding-bottom: 20px;
    font-weight: 600;
    text-align: center;
}

.deco-misvis{
    display: block;
    width: 30%;
    color: var(--color-text-light);
    border-bottom: 3px solid var(--color-text-light);
    padding-bottom: 25px;
    margin: 0 auto;
}
.left-section-misvis{
    flex: 1;
    padding: 120px 40px 120px 100px;
    display: flex;
    flex-direction: column;
    min-width: 300px;
    background-color: var(--color-monaca-green2);
    background-repeat: no-repeat;
    background-position: left top; /* Posiciona la imagen a la izquierda y arriba verticalmente */
    background-size: 25%; /* Ajusta el tamaño de la imagen, puedes probar 30% o 'auto' */
}

.right-section-misvis{
    flex: 1;    
    padding: 120px 40px 120px 100px;
    gap: 20px;
    min-width: 300px;
    background-color: var(--color-monaca-green);
    background-repeat: no-repeat;
    background-position: right bottom; /* Posiciona la imagen abajo a la derecha */
    background-size: 30%; /* Ajusta el tamaño */
}

.p-misvis{
    font-size: 1.70em;
    color: var(--color-text-light);
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    text-align: justify;
    max-width: 90%; /* Limita el ancho del texto para legibilidad */
}

/* ==================== SECCIÓN JUNTOS ==================== */
.juntos-image {
    width: 100%;
    height: auto;    
    object-fit: cover;
    display: block;
}

/* ==================== SECCIÓN MARCAS ==================== */

/* Estilos del carrusel de Marcas ************************************************/
/* ==================== SECCIÓN MARCAS ==================== */

/* Estilos de carrusel de Marcas ************************************************/

/* Contenedor del Slider */
.slider-marcas {
    padding: 20px 50px;
    opacity: 0; /* Evita destello antes de cargar JS */
    transition: opacity 0.5s;
}

.slider-marcas.slick-initialized {
    opacity: 1;
    margin-top: 30px;
}
.marca-item-slick {
    display: flex !important;
    justify-content: center;
    align-items: center;
    outline: none;
}

.marca-item-slick img:hover { transform: scale(1.1); }

/* Ajuste del Slider */
.slider-marcas {
    padding: 20px 0 60px 0; /* Espacio para que respiren los logos */
}
.marca-item-slick {
    outline: none;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.marca-item-slick img:hover {
    transform: scale(1.1);
}

.brands-section {
    text-align: center;
    background-color: var(--color-monaca-green);
    width: 100%;
    overflow: hidden;
}

.brands-content{
    padding: 60px 0px 0px 0px;
    display: block;
    margin: 0 auto;
    width: 100%;
}

.brands-text{
    text-align: center;
}

.brands-title{
    text-align: center;
    font-size: 4.5em;
    color: var(--color-text-light);
    font-weight: 700;
    line-height: 1.1;
    display: inline-block;
}  

/* Línea decorativa blanca debajo del título */
.brands-deco{
    display: block;
    width: 15%;
    color: var(--color-text-light);
    border-bottom: 3px solid var(--color-text-light);
    padding-bottom: 25px;
    margin: 0 auto;
}
/* Contenedor de la Cuadrícula de Marcas - cuando era una tabla de imagenes */
.brands-grid {
    display: grid;
    /* Divide el contenedor en 5 columnas de igual ancho (1fr) */
    grid-template-columns: repeat(5, 1fr);
}

/* Estilo para cada Marca */
.brand-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    height: 150px; /* Altura fija para la fila de logos */
}

/* Quitar la línea divisoria del último elemento */
.brands-grid .brand-item:last-child {
    border-right: none;
}

.brand-item img {
    max-width: 80%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

/* Patrón Decorativo Inferior */
.brands-pattern-bottom {
    line-height: 0; /* Elimina el espacio extra debajo de la imagen */
    width: 100%;
}

/* ==================== SECCIÓN RECETAS ==================== */
.recipes-section {
    background-color: var(--color-background);
    text-align: center;
    overflow: hidden;
}

.recipes-content{
    display: grid;
    gap: 40px;
    justify-content: center;
    width: 100%;
}

/* Estilos del Título de Recetas (Color Verde) */
.recipes-text {
    text-align: center;
}

.recipes-title {
    color: var(--color-monaca-green2, #00ae42); /* Verde claro */
    font-size: 4.5em;
    font-weight: 700;
    margin-bottom: 5px;
}

.recipes-deco {
    display: block;
    width: 18%;
    height: 3px;
    background-color: var(--color-monaca-green2, #00ae42);
    margin: 0 auto 40px;
}

.recipess-btn-all{
    text-align: center;
    margin: 0 auto;
}

/* Contenedor del Carrusel */
.recipes-carousel-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px; /* Espacio para las flechas de navegación */
}

/* Contenedor interno que agrupa 3 tarjetas */
.recipe-group {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    padding: 0 10px;
}

/* Tarjeta Principal de la Receta */
.recipe-card {
    flex: 1;
    position: relative;
    overflow: hidden;
    /*Importanteparaocultarelexcedentedelborde*/background-color: var(--color-text-light, #ffffff);
    border-radius: 90px 0px 90px 0px;
    /*Bordesredondeadosenlapartesuperior*/box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /*Ledamosunbordegeneralverdeparalailusióndeunmarco*/border: 1px solid rgba(0, 0, 0, 0);
    margin-right: 30px;
}

/* Contenedor de la Imagen (Ocupa la mayoría del espacio) */
.recipe-image-wrapper {
    width: 100%;
    height: 400px; /* Altura fija para la imagen */
    overflow: hidden;
    /* Usamos un border-radius para el corte inferior de la imagen */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 30px; /* Corte sutil en la esquina derecha */
    position: relative;
}

.recipe-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contenido Inferior (El "Envoltorio" Verde) */
.recipe-info {
    /* Aquí creamos el color verde de fondo y el corte inclinado */
    background-color: var(--color-monaca-green2, #00ae42);
    color: var(--color-text-light, #ffffff);
    padding: 20px 15px;
    height: 12em; /* Limita el alto del titulo para que todas las tarjetas midan lo mismo */ 
    /* El truco del corte diagonal (usando clip-path) */
    /* Corta la esquina inferior derecha */
    /*clip-path: polygon(0 20px, 100% 0, 100% 100%, 0% 100%);*/
    position: relative;
    z-index: 2; /* Asegura que esté por encima de la imagen si se superponen */
    border-radius: 90px 0px;
    /* Alineación del texto y los elementos */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-top: -80px; /* Superpone el info box sobre el borde inferior de la imagen */
}

.recipe-info p {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;    
    text-align: left;
    margin: 30px
}

.recipe-info:hover {
    background-color: var(--color-text-light, #ffffff);
    color: var(--color-monaca-green2, #00ae42);
    border: 2px solid var(--color-monaca-green2, #00ae42);
}

/* Botón "Ver más" de la Receta (Estilo inverso) */
.btn-recipe {
    display: inline-block;
    background-color: var(--color-text-light, #ffffff);
    border: 2px solid var(--color-text-light, #ffffff);
    color: var(--color-monaca-green2, #00ae42);
    padding: 0px 20px;
    font-weight: bold;
    transition: all 0.3s;
    align-items: start;
    margin-left: 30px;
}

.btn-recipe:hover {
    background-color: var(--color-monaca-green2, #00ae42);
    border-color: var(--color-monaca-green2, #00ae42);
    color: var(--color-text-light, #ffffff);
    text-decoration: none;
}

/* Botón "Ver todas las recetas" */
.btn-recipes-all {
    display: inline-block;
    background-color: var(--color-monaca-green2, #00ae42);
    color: var(--color-text-light, #ffffff);
    padding: 8px 30px;
    text-decoration: none;    
    font-weight: bold;
    font-size: 20px;
    transition: all 0.3s;
    margin-top: 10px;
    cursor: pointer;
}

.btn-recipes-all:hover {   
    background-color: transparent;
    border: 2px solid var(--color-monaca-green2, #00ae42);
    color: var(--color-monaca-green2, #00ae42);
    text-decoration: none;    
}

/* Botones de Navegación del Carrusel de Recetas */
.recipe-nav-btn {
    position: absolute;
    top: 50%; /* Ajusta la posición vertical para que quede en el área de la imagen */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    z-index: 10;
    opacity: 1;
}

/* Sobrescribir el ícono por defecto (Verde Claro) */
.recipe-nav-btn .carousel-control-prev-icon,
.recipe-nav-btn .carousel-control-next-icon {
    /* Filtro para el color verde claro (#00ae42) */
    filter: invert(35%) sepia(85%) saturate(300%) hue-rotate(90deg) brightness(80%) contrast(100%);
}

/* Modo especial cuando hay pocas recetas y no usamos Slick */
.recipe-slider.flex-center-mode {
    display: flex !important;
    flex-direction: row !important; /* Asegura que se pongan una al lado de la otra */
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding: 30px 0 !important;
}

/* Evitamos que las tarjetas se deformen */
.recipe-slider.flex-center-mode .recipe-card {
    flex: 0 0 350px !important;
    width: 350px !important;
    max-width: 350px !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
}

/* Ajuste para que la imagen interna no se rompa */
.recipe-slider.flex-center-mode .recipe-card img {
    width: 100% !important;    
    border-radius: 30px !important;
}

/* Esto asegura que el mensaje ocupe todo el ancho y no los 22px */
.recipe-slider.no-recipes-mode {
    display: block !important;
    width: 100% !important;
    text-align: center;
    padding: 40px 0;    
}

.recipe-slider.no-recipes-mode p {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
}

.no-recipe-arrow {
    display: none !important;
}


/* Estilo para el mensaje cuando no hay resultados para mostrar */
.no-recipe-msg {
    width: 100% !important;
    text-align: center;
    font-size: 2em;
    color: #666;
    padding: 50px 0;
    display: block !important; /* Evita que flexbox lo achique */
}

/* Estado visual para botones deshabilitados cuando no hay resultados para mostrar */
.disabled-filter-recipes-btn {
    opacity: 0.5;
    cursor: not-allowed !important;
    filter: grayscale(1);
}



/* ==================== SECCIÓN NOTICIAS ==================== */

.news-section-padding {
    padding: 30px 0;
}

.news-section {    
    overflow: hidden;
    background-color: var(--color-background);
    text-align: center;
}

.news-text {
    text-align: center;
}

.news-content{
    display: grid;
    gap: 40px;
    justify-content: center;
    width: 100%;
}

.news-title {
    color: var(--color-monaca-green2, #00ae42); /* Verde claro */
    font-size: 4.5em;
    font-weight: 700;
    margin-bottom: 5px;
}

.news-deco {
    display: block;
    width: 15%;
    height: 3px;
    background-color: var(--color-monaca-green2, #00ae42);
    margin: 0 auto 40px;
    margin-bottom: 10px;
}

.news-btn-all{
    text-align: center;
    margin: 0 auto;
}

.news-alternating-rows {
    /* Limita el ancho del contenido */
    width: 1300px;    
    margin: -25px 0px 0px 0px;
}

/* Contenedor de cada fila (usa Flexbox) */
.news-row {
    display: flex;
    gap: 30px; /* Espacio entre las tarjetas */
    margin-bottom: 30px; /* Separación entre filas */
    /*width: 1200px;*/
}

/* Definición de la proporción de las tarjetas */
/* Las tarjetas grandes ocuparán 60% del ancho (flex: 1.5) */
.news-card.news-large {
    flex: 1.5; 
}

/* Las tarjetas pequeñas ocuparán 40% del ancho (flex: 1) */
.news-card.news-small {
    flex: 1; 
}

/* Estilos comunes para todas las tarjetas */
.news-card {
    background-color: var(--color-text-light, #ffffff);
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: auto;
    position: relative;    
}

.news-link-item {
    text-decoration: none;
    color: inherit;
    display: block;    
    height: 350px;
    position: relative; /* Asegura que el overlay no se salga si la tarjeta es muy compleja */
    z-index: 100; /* Asegura que el área de hover esté arriba */
    overflow: hidden;
}

/* Efecto Hover: Mostrar el overlay */
.news-card:hover .card-info {
    opacity:0.9; 
    visibility: visible;
    transition-delay: 0s; 
}

.news-card:hover img {
    transform: scale(1.05); 
}

/* Aseguramos que la imagen cubra completamente */
.news-card img {
    width: 100%;
    height: 100%; /* Ajustamos a 100% para que cubra la altura de la tarjeta */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease-in-out; /* Animación sutil de la imagen */
}

/* Tarjeta GRANDE: Imagen grande y altura variable */
.news-large img,
.news-small img {
    width: 100%;
    height: 350px; /* Altura para la imagen principal */
    object-fit: cover;
    display: block;
    /* Aseguramos que la imagen está en la capa 1 */
    z-index: 1; 
    position: relative; /* Necesario para que z-index funcione correctamente */
    transition: transform 0.3s ease-in-out;
}

/* Cuerpo de texto (solo en tarjetas grandes) */
.news-large p {
    /* Cambia el color a blanco */
    color: var(--color-text-light, #ffffff); 
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
}

/* Contenido de la Tarjeta (Superpuesto) */
.news-card .card-info {
    position: absolute;
    top: 0;    
    left: 0; 
    width: 100%; 
    height: 100%; /* Cubre la imagen verticalmente */
    
    /* Fondo semitransparente para legibilidad */
    background-color: var(--color-monaca-green2, #00ae42);
    padding: 30px;    
    /* Para que el contenido no desborde */
    box-sizing: border-box; /* Asegura que el padding se incluya en el 100% del width */

    z-index: 200;   

    /* Control de animación y visibilidad */
    opacity: 0; 
    visibility: hidden; 
    /* La visibilidad se oculta *después* de que la opacidad haya terminado de animarse */
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;  
   
    /* Ajustes para el texto (todo en blanco) */
    color: var(--color-text-light, #ffffff); 
    display: flex;
    flex-direction: column; 
    text-align: left;
   
    padding-top: 80px;

}

.news-card .news-link-item { /* Usamos .news-card para mayor especificidad */
    text-decoration: none;
    color: inherit;
    display: block; 
    height: 350px; 
    position: relative; 
    z-index: 100; 
    overflow: hidden; 
}

.news-card:hover .news-link-item {
    text-decoration: none;
}

.news-card .card-info h3,
.news-card .card-info h4,
.news-card .card-info p {
    text-decoration: none;
}


.news-large .card-info {
    padding: 20px;
}

.news-large h3 {
    color: var(--color-text-light, #ffffff);
    font-size: 1.8em;
    font-weight: 500;
    margin-bottom: 10px;
    padding-top: 80px;
}

.news-small h4 {
    color: var(--color-text-light, #ffffff);
    font-size: 1.6em;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 10px;    
    padding-top: 80px;

}

/* Tarjeta PEQUEÑA: Imagen más pequeña y altura de tarjeta más controlada */
/*.news-small {
    /* Forzamos que la altura de la tarjeta pequeña sea igual a la grande */
    /* Esto es difícil con contenido variable, pero establecer un max-height ayuda a mantener la línea. */
    /* Aquí permitiremos que la tarjeta pequeña sea más corta si tiene menos texto. */
/*} */



.news-small p {
    color: var(--color-text-light, #ffffff);
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
}

.news-small .card-info {
    padding: 15px;
}

/* Fecha (Mantener el color de acento o cambiar a blanco para mayor contraste) */
.news-date {
    font-size: 0.8em;
    font-weight: 700;
    /* Usamos el amarillo como acento sobre el negro */
    color: var(--color-monaca-yellow, #ffdd00); 
    margin-bottom: 5px;
}

.news-link {
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.news-link a {
    color: var(--color-monaca-green);
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px;
}

/* Botón "Ver más" */
.btn-primary-inverse {
    display: inline-block;
    background-color: var(--color-text-light, #ffffff);
    color: var(--color-monaca-green2, #006935);
    border: 2px solid var(--color-monaca-green2, #006935);
    padding: 0px 15px;
    text-decoration: none;
    font-weight: 600;    
    transition: all 0.3s;
    width: 110px;
    bottom: 60px;
}

/* Botón "Ver todas las noticias" */
.btn-new-all {
    display: inline-block;
    background-color: var(--color-monaca-green2, #00ae42);
    color: var(--color-text-light, #ffffff);
    padding: 8px 30px;
    text-decoration: none;    
    font-weight: bold;
    font-size: 20px;
    transition: all 0.3s;
    margin-top: 10px;
}

.btn-new-all:hover {   
    background-color: transparent;
    border: 2px solid var(--color-monaca-green2, #00ae42);
    color: var(--color-monaca-green2, #00ae42);
    text-decoration: none;    
}

/* ==================== SECCIÓN EMPLEO ==================== */
.empl-formu-container {
    display: flex;
    min-height: 800px; /* Altura generosa para tu monitor */
    width: 100%;
    overflow: hidden;
}

.left-section-empl {
    flex: 1; /* Ocupa el 50% */
    background-color: var(--color-monaca-green2);
    padding: 100px 60px 100px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-section-empl {
    flex: 1; /* Ocupa el otro 50% */
    position: relative;
    overflow: hidden;
}

.empl-img-back {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto hace que la imagen llene el espacio sin deformarse */
    display: block;
}

.empl-title {
    color: #ffffff;
    font-size: 4.2em;
    font-weight: 700;
    margin-bottom: 40px;
}

/* Layout del Formulario en 2 columnas */
.empl-column-wrapper {
    display: flex;
    gap: 40px;
}

.empl-col {
    flex: 1;
}

.empl-form-group {
    margin-bottom: 25px;
}

.empl-form-group label {
    display: block;
    font-weight: 600;
    font-size: 1.4em;
    color: #ffffff;
    margin-bottom: 10px;
}

.empl-form input, 
.empl-form textarea {
    width: 100%;
    padding: 15px 20px !important;
    border-radius: 30px; /* Estilo redondeado de MONACA */
    border: none;
    background-color: var(--color-monaca-green3);
    color: white;    
}

.empl-form textarea {
    height: 220px;
    border-radius: 20px;
    resize: none;
}

.empl-select{
    padding: 15px 20px;
    border-radius: 30px; /* Estilo redondeado de MONACA */
    border: none;
    background-color: var(--color-monaca-green3);
    color: white;
    font-size: 1.1em;
}

.btn-empl-container {
    display: flex;
    justify-content: flex-end; /* Alinea el botón a la derecha de su columna */
    margin-top: 70px;
}

.emplbtn-submit {
    background-color: var(--color-light-gray);
    color: var(--color-monaca-green2);
    border: none;
    padding: 12px 50px;    
    font-size: 1.3em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.emplbtn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* FIN - EMPLEOS  ************************************************************/



/* ==================== FOOTER ==================== */

/* Contenedor Flex para alinear los círculos horizontalmente */
.social-icons-wrapper {
    display: flex;
    gap: 15px; /* Espaciado entre los círculos */
    flex-wrap: wrap; /* Para que se ajusten en móviles */
    justify-content: flex-start; /* Alineados a la izquierda en escritorio */
}

/* El Círculo Blanco */
.social-circle-item {
    display: flex;          /* Activamos flexbox dentro del círculo */
    justify-content: center; /* Centrado horizontal del icono */
    align-items: center;     /* Centrado vertical del icono */ 
    border-radius: 50%;     /* Esto crea el círculo perfecto */    
    text-decoration: none;  /* Quitamos subrayado del enlace */
    transition: transform 0.3s ease, box-shadow 0.3s ease;    
    /* Pequeña sombra para darle profundidad (opcional, pero se ve bien) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* El Icono dentro del Círculo */
.social-circle-item i {
    /* IMPORTANTE: El color del icono debe ser el verde del fondo */
    color: var(--color-monaca-green);    
    /* Aseguramos que el icono no tenga márgenes que lo descentren */
    margin: 0;
    padding: 0;
    line-height: 1; /* Vital para FontAwesome/Socicon */
}

/* Efecto Hover (al pasar el ratón) */
.social-circle-item:hover {
    transform: scale(1.08); /* Pequeño efecto de crecimiento */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);    
}

/* Efecto Hover en el icono (opcional) */
.social-circle-item:hover i {
    /* El icono cambia a verde oscuro al hover sobre amarillo */
    color: #004c26; 
}

.main-footer {
    background-color: var(--color-monaca-green);
    color: var(--color-text-light);
    padding: 30px 0; /* Ajusta el padding vertical general */
    width: 100%;
    overflow: hidden;
}

.pattern-footer {
    width: 100%;
    height: auto;
    line-height: 0; /* Elimina espacio debajo de la imagen */
}

.footer-pattern {
    width: 100%;
    height: auto;
    display: block;
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Distribuye los 3 bloques */
    align-items: center; /* Centra verticalmente los elementos de diferente altura */
    min-height: 12rem;      /* Altura mínima para que respire, similar a la actual */
    font-size: 0.9em;
    padding: 20px 80px  20px 80px;
    background-color: var(--color-monaca-green); /* Asegura el fondo oscuro bajo el patrón */
}

/* Bloque de Redes Sociales */
.footer-social-block {
    flex: 1; /* Ocupa 1/3 del espacio para alinear a la izquierda */
    display: flex;
    justify-content: flex-start; /* Alinea los iconos a la izquierda del bloque */
}

.social-icons-footer {
    display: flex;
    gap: 15px; /* Espaciado horizontal entre iconos */
    flex-wrap: wrap; /* Si hay más de 4, se envolverán elegantemente */
    max-width: 200px; /* Ancho máximo para el bloque de iconos */
}

.social-icon-item {
    font-size: 1.8rem; /* Tamaño de los iconos */
    color: #fff;       /* Color blanco para los iconos */
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.social-icon-item:hover {
    transform: scale(1.1); /* Pequeño efecto de crecimiento */
    color: var(--color-monaca-yellow); /* Cambia al amarillo corporativo */
    text-decoration: none;
}

/* Bloque del Logo Central */

.footer-logo-block {
    flex: 1; /* Ocupa 1/3 para mantenerse centrado */
    display: flex;
    justify-content: center; /* Centra el logo dentro de su bloque */
}

.footer-logo-img {
    max-width: 100%; /* Asegura que no desborde en pantallas pequeñas */
    /* El ancho y alto automático se aplican con style in-line en el HTML */
    object-fit: contain; /* Mantiene la proporción */
}

/* 3. Bloque de Copyright Derecho */
.footer-copyright-block {
    flex: 1; /* Ocupa 1/3 para alinear a la derecha */
    display: flex;
    justify-content: flex-end; /* Alinea el texto a la derecha del bloque */
}

.copyright-lines {
    text-align: right; /* Alineación del texto a la derecha */
    font-size: 0.95rem;  /* Tamaño de fuente similar al actual */
    line-height: 1.4;
}

/* Opcional: Darle más peso a la línea del RIF si lo deseas */
.copyright-lines .RIF-line {
    font-weight: 600;
}