/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}

html {
     scroll-behavior: smooth;
}

body {
     color: #666666;
     font-size: 14px;
     font-family: 'Playfair Display', 'Libre Bodoni', 'Cormorant Garamond', serif !important;
     /* Forzado */
     ;
     line-height: 1.80857;
     font-weight: normal;
     padding-left: 80px;
     padding-right: 80px;
     background-image: url(../css/paterncoazucar.gif);
     background-position: center top;
     background-repeat: repeat;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none !important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

:focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.layout_padding {
     padding-top: 90px;
     padding-bottom: 90px;
}

.layout_padding_2 {
     padding-top: 75px;
     padding-bottom: 75px;
}

.light_silver {
     background: #f9f9f9;
}

.theme_bg {
     background: #38c8a8;
}

.margin_top_30 {
     margin-top: 30px !important;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}

ul.btn {
     float: right;
}

ul.btn li {
     display: inline-block;
     padding: 0 25px;
}

ul.btn li a {
     color: #fff;
     font-size: 16px;
}

ul.btn li:last-child {
     padding-right: 0;
}

.login_btn {
     padding-left: 50px;
}

.login_btn a {
     background-color: #fff;
     display: inline-block;
     padding: 7px 35px;
     border-radius: 10px;
     color: #292e39 !important;
     font-size: 17px;
}

.login_btn a:hover {
     color: #fff !important;
     background: #0808ff;
}


/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/


/*-- navigation--*/

.navigation.navbar {
     float: right;
     padding-top: 15px !important;
     padding: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 0px 25px;
     text-transform: uppercase;
     color: #fff;
     font-size: 14.5px;
     line-height: 20px;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     color: #0f100f;
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     color: #2a3c2e;
}

.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

.padd_right {
     padding-right: 10px;
}

.sign_btn {
     padding-left: 50px;
}

.get_btn a {
     display: inline-block;
     padding: 8px 39px;
     color: #fff;
     font-size: 16px;
     background-color: #f4cb1e;
     text-transform: uppercase;
     margin-top: -10px;
     margin-left: 30px;
}

.get_btn a:hover {
     color: #fff;
     background-color: #d2d1d6;
}

@keyframes smokeAnimation {
     0% {
          background-position: 50% 50%;
          filter: (2px);
     }

     25% {
          background-position: 55% 45%;

          filter: (3px);
     }

     50% {
          background-position: 60% 40%;
          filter: (2px);
     }

     75% {
          background-position: 55% 45%;
          filter: (3px);
     }

     100% {
          background-position: 50% 50%;
          filter: (2px);
     }
}

.header {

     width: 100%;
     padding: 11px 20px;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);

     box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.8),
          /* Sombra fuerte interna */
          2px 2px 10px rgba(0, 0, 0, 0.5);
     /* Sombra externa ligera */
     background-color: #13110e;
     background-image: url('./nube-ahumado2.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     animation: smokeAnimation 10s infinite ease-in-out alternate;
}


.logo {
     position: relative;
     padding-left: 50%;
     padding-top: 0px;

}

#logo-alimenta {
     animation: carcomido 2s ease-in-out forwards;
     transform: translateX(-100px) scale(1.2);

     width: 60px;
     height: auto;
     margin-left: -65px !important;
     border: 2px solid black;

}

@keyframes carcomido {
     0% {
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          opacity: 0;
          filter: blur(5px);
     }

     50% {
          clip-path: polygon(5% 5%, 95% 5%, 90% 95%, 10% 90%);
          opacity: 0.5;
          filter: blur(2px);
     }

     100% {
          clip-path: polygon(10% 10%, 90% 10%, 85% 85%, 15% 85%);
          opacity: 1;
          filter: blur(0);
     }
}






/** banner section **/



.banner_main::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.5);
     /* Ajusta la intensidad y el color de la sombra */
     pointer-events: none;
     /* Permite que los elementos debajo sean interactivos */
}

/* Oculta el párrafo por defecto */
.hidden {
     display: none;
}

/* Animación de aparición */
@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(-10px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

/* Animación de desaparición */
@keyframes fadeOut {
     from {
          opacity: 1;
          transform: translateY(0);
     }

     to {
          opacity: 0;
          transform: translateY(-10px);
     }
}

/* Efecto cuando el texto aparece */
.show {
     display: block;
     animation: fadeIn 0.5s ease-in-out;
}

/* Efecto cuando el texto desaparece */
.hide {
     animation: fadeOut 0.5s ease-in-out;
}

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

.text-bg h1 {
     text-transform: uppercase;
     color: #fff;
     /* Color principal del texto */
     font-size: 110px;
     line-height: 120px;
     padding-bottom: 15px;
     font-weight: bold;

     /* Sombra del texto */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
     /* Ajusta el desplazamiento, desenfoque y color */

     /* Contorno o borde del texto */
}


.text-bg p {
     font-size: 17px;
     color: #fff;
     line-height: 28px;
     font-weight: 500;
     /* padding-bottom: 50px; */
     display: block;
}

.text-bg a {
     font-size: 17px;
     background-color: transparent;
     color: #fff;
     font-weight: 600;
     padding: 11px 0px;
     width: 100%;
     max-width: 230px;
     text-align: center;
     display: inline-block;
     border-radius: 30px;
     border: #ffffff solid 4px;
     transition: ease-in all 0.5s;
     background-color: #13110e;

}

.text-bg a:hover {
     background-color: #0000007e;

     color: #fff;
     transition: ease-in all 0.5s;
}


/** end banner section **/

.titlepage {
     text-align: center;
     padding-bottom: 60px;
}

.titlepage h2 {
     font-size: 50px;
     color: #090807;
     line-height: 62px;
     font-weight: bold;
     padding: 0;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.blu {
     color: #0808ff;
}

.read_more {
     font-size: 17px;
     background-color: #04724e;
     color: #fff;
     padding: 13px 0px;
     width: 100%;
     max-width: 190px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     z-index: 9999;
     position: relative;
     font-weight: 500;
}

.read_more:hover {
     background: #79bf88;
     color: #205d38;
     transition: ease-in all 0.5s;
}


/** three_box section **/

.three_box {
     margin-top: -160px;
}

.box_text {
     box-shadow: 0 0 95px rgba(13, 3, 3, 0.56);
}

.box_text figure {
     margin: 0;
}

.box_text figure img {
     width: 100%;
}


/** end three_box section **/


/** hottest section **/

.hottest {
     padding: 90px 0 0px 0;
}

.hottest .titlepage {
     padding-bottom: 0;
     text-align: left;
}

.hottest .titlepage h2 {
     color: #000;
}

.hottest .hottest_box {
     position: relative;
     background-color: #072e21;
}

.hottest .hottest_box::after {
     position: absolute;
     content: "";
     top: 0;
     bottom: 0;
     left: -30px;
     width: 31px;
     height: 100%;
     background: url(../images/h_cross.png);
     background-repeat: no-repeat;
     display: block;
     background-position: center center;
}

.hottest .hottest_box p {
     color: #fff;
     font-size: 17px;
     line-height: 32px;
     font-weight: 500;
}


/** end hottest section **/


/** choose  section **/

.choose {
     margin-top: 0px;
     background-color: #242323;
     padding: 20px 0 10px;
     position: relative;
}

.choose::after {
     position: absolute;
     content: "";
     bottom: 0;
     left: 0px;
     width: 100%;
     height: 195px;
     background-repeat: no-repeat;
     display: block;
     background-position: center center;
}

.choose .titlepage {
     text-align: left;
     padding-bottom: 0;
}

.choose .titlepage h2 {
     color: #fff;
}

.choose .titlepage p {
     color: #fff;
     display: block;
     font-size: 17px;
     padding-top: 20px;
     line-height: 32px;
}

.choose_img {
     background-color: #fff;
     padding: 20px;
     margin-left: 30px;
     margin-right: 40px;
}

.choose_img figure {
     margin: 0;
     margin-left: -50px;
}

.choose_img figure img {
     width: 100%;
}

.padding_with {
     max-width: 653px;
     float: right;
     width: 100%;
}

.choose_box {
     display: flex;
}

.choose_box i {
     float: left;
}

.choose_box i img {
     float: left;
     background-color: #04724e;
     width: 140px;
     padding: 10px;
     border-radius: 60px;
}

.choose_text {
     float: right;
     padding-left: 20px;
}

.choose_text h3 {
     color: #fff;
     font-size: 20px;
     line-height: 28px;
     font-weight: 600;
     padding-bottom: 10px;
}

.choose_text p {
     color: #fff;
     font-size: 17px;
     line-height: 30px;
}

.padding_bottom {
     padding-bottom: 30px;
}


/** end choose  section **/


/** product  section **/

.product_box {
     position: relative;
     margin-bottom: 30px;
     box-shadow: 0 0 51px rgba(13, 3, 3, 0.13);
}

.product_box figure {
     margin: 0;
}

.product_box figure img {
     width: 100%;
     height: 343px;
}

.product_box h3 {
     position: absolute;
     bottom: 15px;
     padding: 0;
     right: 50px;
     text-align: right;
     color: #fff;
     font-size: 30px;
     text-transform: uppercase;
     font-weight: 600;
}

.black {
     color: #242323 !important;
}

.padding_left0 {
     padding-left: 0;
}

.padding_right0 {
     padding-right: 0;
}


/** end product  section **/


/** about section **/

.about {
     padding: 60px 0px 140px 0px;
     background: #fff;
}

.about .titlepage p {
     color: #141629;
     line-height: 28px;
     font-weight: 500;
     font-size: 17px;
     padding-top: 20px;
}

.about_Carousel .carousel-caption {
     position: inherit;
     padding: 0;
     padding-top: 65px;
}

.about_box {
     text-align: center;
}

.test_box {
     padding: 30px 40px 40px 42px;
     background: url(../images/te.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     min-height: 367px;
}

.about_Carousel .test_box h4 {
     font-size: 30px;
     color: #1d1c1c;
     line-height: 18px;
     display: block;
     text-align: center;
     text-transform: uppercase;
     font-weight: 600;
     padding: 23px 0px 0px 0px;
     text-align: left;
}

.about_Carousel .test_box i {
     text-align: left;
     float: left;
     margin-bottom: -12px;
     margin-right: 20px;
     margin-top: -91px;
     box-shadow: #ddd 0px 0px 10px 0px;
     border-radius: 122px;
}

.about_Carousel .test_box p {
     font-size: 17px;
     line-height: 28px;
     color: #fff;
     text-align: left;
     padding-left: 100px;
     margin-top: 45px;
}

.about_Carousel .carousel-indicators {
     bottom: -50px;
}

.about_Carousel .carousel-indicators li {
     width: 56px;
     height: 15px;
     border-radius: 20px;
     background: #79bf88;
}

.about_Carousel .carousel-indicators li.active {
     background: #040403;
}

#myCarousel .carousel-control-next-icon,
#myCarousel .carousel-control-prev-icon {
     display: none;
}


/** end about section **/


/** footer **/

.footer {
     background: #212121;
     padding-top: 85px;
     text-align: center;
}

.footer .titlepage {
     text-align: left;
     padding-bottom: 0px;
}

.footer .titlepage h2 {
     color: #fff;
}

.main_form {
     padding: 50px 0px 50px 0px;
}

.main_form .contactus {
     border: inherit;
     padding: 0px 15px;
     margin-bottom: 20px;
     width: 100%;
     height: 45px;
     background: #ffffff;
     color: #777977;
     font-size: 18px;
     font-weight: normal;
     border-bottom: #ddd solid 1px;
}

.main_form .contactus1 {
     border: inherit;
     padding: 0px 15px;
     margin-bottom: 20px;
     padding-top: 21px;
     width: 100%;
     height: 80px;
     background: #ffffff;
     color: #777977;
     font-size: 18px;
     font-weight: normal;
     border-bottom: #ddd solid 1px;
}

.main_form .send_btn {
     font-size: 20px;
     transition: ease-in all 0.5s;
     background-color: #04724e;
     color: #ffffff;
     padding: 16px 0px;
     max-width: 333px;
     font-weight: 700;
     width: 100%;
     display: block;
     margin-top: 11px;
}

.main_form .send_btn:hover {
     background-color: #79bf88;
     transition: ease-in all 0.5s;
     color: #2b4932;
}

#request *::placeholder {
     color: #777977;
     opacity: 1;
}

ul.social_icon {
     padding-top: 6px;
}

ul.social_icon li {
     display: inline-block;
}

ul.social_icon li a {
     background: #04724e;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 25px;
     border-radius: 30px;
     margin: 0 3px;
}

ul.social_icon li a:hover {
     background-color: #79bf88;
     color: #fff;
}

.bottom_form h3 {
     font-weight: 600;
     font-size: 22px;
     text-align: left;
     color: #fff;
     padding-bottom: 15px;
}

ul.location_icon {
     padding-top: 12px;
     text-align: left;
}

ul.location_icon li {
     display: inline-block;
     font-size: 18px;
     line-height: 20px;
     color: #fff;
     padding-bottom: 25px;
}

ul.location_icon li a {
     font-size: 30px;
     color: #fff;
     line-height: 30px;
     padding-right: 15px;
}

ul.location_icon li a:hover {
     color: #00ff00;
}

.footer h3 {
     font-weight: 600;
     font-size: 22px;
     text-align: left;
     color: #fff;
     padding-bottom: 15px;
}

ul.link {
     text-align: left;
}

ul.link li a {
     color: #fff;
     font-size: 15px;
     line-height: 20px;
     padding-bottom: 15px;
     padding-left: 25px;
     display: block;
}

ul.link li a:hover {
     color: #79bf88;
}

ul.link li a::after {
     position: absolute;
     content: "";
     width: 12px;
     height: 12px;
     background-color: #fff;
     border-radius: 20px;
     left: 0;
     margin-top: 6px;
     margin-left: 15px;
}

.border_right {
     border-right: #fff solid 1px;
}

.bottom_form .enter {
     border: inherit;
     padding: 0px 19px;
     width: 100%;
     height: 53px;
     background: #fff;
     color: #000;
     font-size: 18px;
     font-weight: 600;
}

.sub_btn {
     font-size: 17px;
     transition: ease-in all 0.5s;
     background-color: #04724e;
     color: #fff;
     padding: 11px 0px;
     max-width: 200px;
     width: 100%;
     display: block;
     font-weight: 500;
     text-transform: uppercase;
     margin-top: 20px;
}

.sub_btn:hover {
     background-color: #79bf88;
     transition: ease-in all 0.5s;
     color: #205d38;
}

.copyright {
     margin-top: 70px;
     padding: 10px 0px;
     background-color: #04724e;
}

.copyright p {
     color: #fff;
     font-size: 13px;
     line-height: 22px;
     text-align: center;
}

.copyright a {
     color: #fff;
}

.copyright a:hover {
     color: #212121;
}


/** end footer **/

.products_page .product .titlepage {
     margin-top: 70px;
}

#parrafo-inicio {
     font-size: 22px;
     color: #fff;
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
     line-height: 1.8;
     text-align: center;
     opacity: 0;
     /* Inicialmente invisible */
}

.animate {
     animation: aparecer 1.5s ease-in-out forwards;
}

/* Definición de la animación */
@keyframes aparecer {
     0% {
          opacity: 0;
          transform: translateY(20px);
     }

     100% {
          opacity: 1;
          transform: translateY(0);
     }
}

/* Estilos base para las imágenes */
.box_text figure img {
     width: 100%;
     height: auto;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     /* Suaviza la animación */
     border-radius: 8px;
     /* Bordes redondeados para un toque más elegante */
}

/* Efecto cuando el cursor pasa por encima de la imagen */
.box_text figure img:hover {
     transform: scale(1.1);
     /* Aumenta el tamaño de la imagen */
     box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
     /* Añade una sombra suave */
}



.shadow-text {
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);

}




.navbar-nav .nav-item {
     background-color: #000;
     margin: 5px;
     overflow: hidden;
     position: relative;
     transition: all 0.3s ease-in-out;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
     /* Sombra suave */
}

.navbar-nav .nav-item:hover {
     box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.7);
     /* Efecto de sombra más intensa al pasar el mouse */
}

.navbar-nav .nav-link {
     color: white;
     padding: 10px 20px;
     font-weight: bold;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     position: relative;
     z-index: 2;
     transition: color 0.3s ease-in-out;
}

/* Efecto Neon Glow al pasar el mouse */
.navbar-nav .nav-item:hover {
     box-shadow: 0px 0px 10px rgba(0, 255, 128, 0.8);
}

/* Efecto de fondo animado */


.navbar-nav .nav-item:hover::before {
     left: 100%;
}

/* Efecto de icono de búsqueda */
.navbar-nav .nav-item.d_none .nav-link {
     font-size: 1.2rem;
     padding: 8px 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: background 0.3s ease-in-out, transform 0.2s;
}

.navbar-nav .nav-item.d_none:hover .nav-link {
     background: rgba(255, 255, 255, 0.2);
     transform: rotate(10deg);
}


.navbar-nav .nav-link {
     position: relative;
     /* Necesario para subrayados animados */
     display: inline-block;
     /* Asegura que el subrayado funcione correctamente */
     color: #333;
     /* Color inicial del texto */
     font-size: 16px;
     /* Tamaño inicial del texto */
     text-decoration: none;
     /* Quitar subrayado */
     transition: all 0.3s ease;
     /* Suaviza los cambios de estilo */
}

.navbar-nav .nav-link:hover {
     color: #007BFF;
     /* Cambia a un color diferente al pasar el cursor */
     font-size: 18px;
     /* Aumenta ligeramente el tamaño del texto */
     transform: scale(1.1);
     /* Amplía el enlace para dar un efecto de zoom */
}

/* Subrayado animado */
.navbar-nav .nav-link::after {
     content: '';
     /* Pseudo-elemento vacío para el subrayado */
     position: absolute;
     width: 0;
     height: 1px;
     /* Color del subrayado */
     bottom: 0;
     left: 0;
     transition: width 0.3s ease;
     /* Suaviza la expansión del subrayado */
}

.navbar-nav .nav-link:hover::after {
     width: 100%;
     /* Expande el subrayado al 100% al pasar el cursor */
}


#contenedor-product-css {
     height: 500px;
     width: auto;
     background-color: #e8e6e6;

     padding-bottom: 700px;

}


#contenedor-product-css {
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 8px;
     background-color: #f9f9f9;
}

.producto-image img {
     width: 100%;
     height: auto;
     border-radius: 8px;
}

.product-title {

     padding-bottom: 20px !important;


}


.container {

     padding-bottom: 7%;

}

/* Estilo general */
.hottest {
     padding: 50px 0;
     position: relative;
     overflow: hidden;

}

.container {
     position: relative;
     z-index: 1;
}

/* Efectos de título */
.titlepage h2 {
     font-size: 1.5rem;
     font-weight: bold;
     color: #222;
     /* animation: fadeIn 1.5s ease; */
}

/* Estilo del cuadro */
.hottest_box {
     position: relative;
     animation: fadeIn 1.5s ease;
     transition: transform 0.5s ease, box-shadow 0.5s ease;
     background: #f9f9f9;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     border-left: 5px solid #04724e;

}

.hottest_box p {
     font-size: 1.2rem;
     line-height: 1.8;
     color: #333;
     transition: box-shadow 0.3s ease;
     /* Transición suave de la sombra */
}

/* Animaciones al pasar el cursor */
.hottest_box:hover {
     transform: scale(1.05);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
     /* Sombra más pronunciada en el cuadro */
     border-left: 5px solid #04724e;
}

.hottest_box:hover p {
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
     /* Sombra del párrafo */
     padding: 5px 10px;
     /* Opcional: Añade un pequeño relleno al efecto */
}

/* Círculos decorativos flotantes */
.hottest::before,
.hottest::after {
     content: "";
     position: absolute;
     width: 150px;
     height: 150px;
     border-radius: 50%;
     background: #4caf50;
     opacity: 0.4;
     z-index: 0;
     animation: floatingShapes 6s infinite alternate ease-in-out;
}

.hottest::before {
     top: 60px;
     left: -30px;
}

.hottest::after {
     bottom: -50px;
     right: -30px;
}

/* Animaciones generales */
@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes floatingShapes {
     from {
          transform: translateY(0) scale(1);
     }

     to {
          transform: translateY(30px) scale(1.1);
     }
}


.choose_text h3 {
     font-size: 22px;
     color: #ffffff;
     /* Blanco puro */
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 10px;
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
     /* Sombra moderna */
     transition: all 0.3s ease-in-out;
}

.choose_text p {
     font-size: 16px;
     color: #ffffff;
     /* Blanco puro */
     line-height: 1.8;
     text-align: justify;
     margin-bottom: 15px;
     border-left: 4px solid #dab974;
     /* Amarillo cálido */
     padding-left: 10px;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
     /* Sombra suave */
     transition: all 0.3s ease-in-out;
}

.choose_box:hover .choose_text h3 {
     transform: scale(1.1);
     /* Efecto de agrandamiento */
     text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
     /* Sombra más pronunciada */
     transition: all 0.3s ease-in-out;
}

.choose_box:hover .choose_text p {
     transform: scale(1.05);
     /* Agrandamiento suave */
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
     /* Más profundidad */
     transition: all 0.3s ease-in-out;
}

.choose_box i img {
     width: 50px;
     height: 50px;
     margin-bottom: 10px;
     filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.7));
     /* Efecto de sombra */
     transition: all 0.3s ease-in-out;
}

.choose_box:hover i img {
     transform: scale(1.2);
     filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.9));
     /* Sombra más marcada */
     transition: all 0.3s ease-in-out;
}


/* Para dispositivos con un ancho entre 1529px y 1018px */
@media (max-width: 1529px) and (min-width: 1018px) {
     #logo-alimenta {
          /* La lógica aquí usa calc() para que el margen crezca al reducir el ancho */
          margin-left: calc((1529px - 140vw) / 10) !important;
     }
}

/* Para dispositivos con un ancho de exactamente 1202px o un rango cercano */
@media (max-width: 1210px) and (min-width: 1200px) {
     #logo-alimenta {
          margin-left: 20% !important;
          /* Aumenta el margen más a la izquierda */
     }
}

/* Para cualquier caso más allá de 1202px y hacia abajo */
@media (max-width: 1202px) {
     #logo-alimenta {
          margin-left: -22% !important
               /* Incremento adicional para pantallas más pequeñas */
     }
}

/* Ocultar .logo para dispositivos con un ancho entre 845px y 862px */
@media (max-width: 862px) and (min-width: 1024px) {
     .logo {
          display: none !important;
     }
}

/* Ocultar .logo para dispositivos con un ancho entre 1046px y 1199px */
@media (max-width: 1199px) and (min-width: 1046px) {
     .logo {
          display: none !important;

     }

}

/* Animaciones */
.animate-fade-in {
     animation: fade-in 1s ease forwards;
     opacity: 0;
}

.animate-slide-right {
     animation: slide-right 1s ease forwards;
     transform: translateX(-20px);
     opacity: 0;
}

.animate-slide-left {
     animation: slide-left 1s ease forwards;
     transform: translateX(20px);
     opacity: 0;
}

@keyframes fade-in {
     to {
          opacity: 1;
     }
}

@keyframes slide-right {
     to {
          transform: translateX(0);
          opacity: 1;
     }
}

@keyframes slide-left {
     to {
          transform: translateX(0);
          opacity: 1;
     }
}



/* Estilos para dispositivos móviles y tabletas */
@media only screen and (max-width: 1024px) {
     .container {
          flex-direction: column;
          gap: 20px;
     }

     .section-box {
          max-width: 90%;
          margin: 0 auto;
     }

     .section-image {
          display: none;
          max-width: 60px;
     }

     .section-title {
          font-size: 1.4rem;
     }

     .section-text,
     .valores-list {
          font-size: 1rem;
     }

     .valores-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0;
          margin: 0;
          list-style: none;
     }

     .valor-item {
          text-align: center;
          margin: 5px 0;
     }
}

/* Estilos específicos para pantallas móviles (teléfonos) */
@media only screen and (max-width: 768px) {
     .mision-vision-d, .inicio-d, .acerca-d, .productos-d, .clientes-prov-d, .noticias-d, .contact-d {
display: none !important;

     }

     .section-container {
          padding: 15px;
          /* Reducir padding del contenedor */
     }

     .section-box {
          padding: 15px;
          /* Ajustar el relleno interno */
     }

     .section-title {
          font-size: 1.2rem;
          /* Reducir título aún más para teléfonos */
     }

     .section-text {
          font-size: 0.9rem;
          /* Reducir texto para mejor legibilidad */
     }

     .section-image {
          max-width: 50px;
          /* Ajustar el tamaño del ícono */
     }
}




/* Sección Principal */
.personal_section {
     padding: 50px 20px;
     text-align: center;
     font-family: 'Playfair Display', 'Libre Bodoni', 'Cormorant Garamond', serif !important;
     /* Forzado */
     font-size: 4rem;
}

#title_about_us {
     margin-bottom: 40px;
}

#title_about_us h2 {
     font-size: 36px;
     font-weight: bold;
     color: #205d38;
}

#title_about_us p {
     font-size: 21px;
     color: #2a9841;
     margin-top: 10px;
}




/*  ESTILOS PARA SECCION DE ABOUT MIEMBROS */

#members_section {
     display: grid;
     margin: 0 auto;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     justify-items: center;
     padding: 10px;
     transition: all 0.3s ease;
}

/* Tarjetas de miembros */
.member_card {
     background-color: #ffffff;
     border-radius: 20px;
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     transition: transform 0.4s ease, box-shadow 0.3s ease;
     width: 100%;
     max-width: 200px;
     opacity: 0;
     animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fahdeInUp {
     from {
          transform: translateY(20px);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

.member_card:hover {
     transform: translateY(-15px);
     box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}

/* Círculos para las imágenes */
.member_image {
     position: relative;
     width: 150px;
     height: 150px;
     border-radius: 50%;
     margin: 0 auto;
     overflow: hidden;
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
     transition: transform 0.4s ease, box-shadow 0.3s ease;
     z-index: 2;
}

.member_card:hover .member_image {
     transform: scale(1.1);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.member_image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
}

.member_image:hover img {
     transform: scale(1.1);
}

/* Información del miembro */
.member_info {
     padding: 25px;
     background-color: #ecf0f1;
     border-radius: 0 0 20px 20px;
     position: relative;
     z-index: 1;
     transition: background-color 0.3s ease;
}

.member_card:hover .member_info {
     background-color: #bdc3c7;
}

.member_name {
     font-size: 24px;
     color: #2c3e50;
     font-weight: bold;
     margin-bottom: 10px;
     transition: color 0.3s ease;
}

.member_role {
     font-size: 18px;
     color: #16a085;
     margin-top: 5px;
     font-weight: normal;
     transition: color 0.3s ease;
}

.member_description {
     font-size: 14px;
     color: #1b1c1c;
     margin-top: 15px;
     line-height: 1.6;
     opacity: 0.85;
     transition: opacity 0.3s ease;
}

.member_card:hover .member_name {
     color: #16a085;
}

.member_card:hover .member_role {
     color: #2c3e50;
}

.member_card:hover .member_description {
     opacity: 1;
}

/* Animación para la tarjeta de miembro */
.member_card {
     opacity: 0;
     transform: translateY(30px);
     animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
     0% {
          transform: translateY(20px);
          opacity: 0;
     }

     100% {
          transform: translateY(0);
          opacity: 1;
     }
}



/* END   ESTILOS PARA SECCION DE ABOUT MIEMBROS */


.news-section {
     padding: 50px 20px;
     background: linear-gradient(135deg, #ffffff, #e9ecef);
}

.news-container {
     max-width: 1200px;
     margin: 0 auto;
     background: linear-gradient(to right, #fff, #a6a0a0);     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     padding: 20px;
}

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

.news-header h2 {
     font-size: 2rem;
     color: #205d38;
     font-weight: bold;
}

.news-content {
     text-align: justify;
     line-height: 1.6;
}

.news-content h3 {
     font-size: 1.5rem;
     color: #333;
     margin-bottom: 10px;
}

.news-content p {
     font-size: 1rem;
     color: #444;
     margin-bottom: 10px;
}

.news-images {
     display: flex;
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
}

.news-images img {
     width: calc(33.333% - 10px);
     height: 200px;
     object-fit: cover;
     border-radius: 8px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-images img:hover {
     transform: scale(1.05);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
     .news-images img {
          width: 100%;
     }


     #members_section {
     display: grid;
     gap: 30;
     margin: 0 auto;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     justify-items: center;
     padding: 20px;
     transition: all 0.3s ease;
}

/* Tarjetas de miembros */
.member_card {
     background-color: #ffffff;
     border-radius: 20px;
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     transition: transform 0.4s ease, box-shadow 0.3s ease;
     width: 100%;
     max-width: 350px;
     opacity: 0;
     animation: fadeInUp 0.6s ease-out forwards;
}
.member_image {
     position: relative;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     margin: 0 auto;
     overflow: hidden;
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
     transition: transform 0.4s ease, box-shadow 0.3s ease;
     z-index: 2;
}













}


.reglamento-container {
     padding: 20px;
     background-color: #f9f9f9;
     /* Fondo suave */
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     max-width: 400px;
     margin: 0 auto;
     text-align: center;
}

.reglamento-container p {
     font-size: 16px;
     color: #333;
     margin-bottom: 15px;
}

.reglamento-container strong {
     color: #2c3e50;
}

.download-btn {
     background-color: #4f6b4a;
     /* Color de fondo */
     color: white;
     /* Color del texto */
     font-size: 16px;
     padding: 12px 25px;
     /* Espaciado interno */
     border: none;
     border-radius: 5px;
     /* Bordes redondeados */
     cursor: pointer;
     /* Cambia el cursor al pasar por encima */
     transition: background-color 0.3s ease;
}

.download-btn:hover {
     background-color: #20321f;
     /* Color de fondo cuando se pasa el cursor */
}

/* PROVEEDORES  */
/* Estilos Generales */
.proveedores {
     padding: 3rem;
     background: linear-gradient(135deg, #030303, #224235);
     border-radius: 12px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     text-align: center;
}

.proveedores h2 {
     font-size: 2.5rem;
     color: #ffffff;
     margin-bottom: 2rem;
}

.proveedores-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1.5rem;
     justify-items: center;
}

.proveedor {
     background-color: #fff;
     border-radius: 12px;
     padding: 10px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     overflow: hidden;
     max-width: 220px;
}

.proveedor:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}




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

.proveedor:hover .proveedor-img {
     transform: scale(1.07);
}

/* Estilos Responsivos */
@media (max-width: 768px) {

     body {
          color: #666666;
          font-size: 14px;
          font-family: 'Playfair Display', 'Libre Bodoni', 'Cormorant Garamond', serif !important;
          /* Forzado */
          ;
          line-height: 1.80857;
          font-weight: normal;
          padding-left: 0px;
          padding-right: 0px;
          background-image: url(../css/paterncoazucar.gif);
          background-position: center top;
          background-repeat: repeat;
     }

     #content-box {
          background-color: #181e17e7;
          padding: 5px 20px !important;

     }

     .nav-item {
          writing-mode: horizontal-tb !important;
          text-align: center;
          transform: rotate(0deg) !important;
          transition: all 0.3sease;
     }

     #parrafo-inicio {
          font-size: 20px !important;
          color: #fff;
          text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
          line-height: 1.8;
          text-align: center;
          opacity: 0;
     }

     #titulo-inicio {
          font-size: 27px !important;
          line-height: 35px !important;
     }

     .col-md-4 .box_text figure img {
          width: 400px !important;
     }

     .choose_box img {
          display: none !important;
     }










     .proveedores-container {
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     }
}

@media (max-width: 480px) {
     .proveedores-container {
          grid-template-columns: 1fr;
     }

     .proveedor {
          max-width: 100%;
     }
}


#titulo-inicio {
     font-size: 70px;
     line-height: 50px;
}







/* CLIENTES  */
/* Estilos Generales */
.clientes {
     padding: 3rem;
     background: linear-gradient(135deg, #030303, #224235);
     border-radius: 12px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     text-align: center;
}

.clientes h2 {
     font-size: 2.5rem;
     color: #ffffff;
     margin-bottom: 2rem;
}

.clientes-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1rem;
     justify-items: center;
}

.cliente {
     background-color: #fff;
     border-radius: 12px;
     padding: 5px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     overflow: hidden;
     max-width: 200px;
}

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

.cliente:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.cliente:hover .cliente-img {
     transform: scale(1.04);
}

/* Estilos Responsivos */
@media (max-width: 768px) {
     .clientes-container {
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     }
}

@media (max-width: 480px) {
     .clientes-container {
          grid-template-columns: 1fr;
     }

     .cliente {
          max-width: 100%;
     }
}


/* Ocultar el menú de navegación entre 995px y 746px */
@media (max-width: 995px) and (min-width: 746px) {
     .navbar-collapse {
          display: none;
          /* Oculta el menú */
     }

     .navbar-toggler {
          display: block;
          /* Muestra el botón de hamburguesa */
     }
}


#figura-img {
     width: 80%;
     /* Ajusta el tamaño de la figura */
     margin: auto;
}

#imagen-cana {
     width: 100%;
     /* Ajusta la imagen dentro de la figura */
     height: auto;
}




.letter {
     opacity: 0;
     display: inline-block;
     transform: scale(0) rotate(0deg);
     animation: explode 0.5s forwards ease-out;
}

@keyframes explode {
     0% {
          opacity: 0;
          transform: scale(0) rotate(0deg) translate(0, 0);
     }

     50% {
          opacity: 1;
          transform: scale(1.5) rotate(20deg) translateY(-10px);
     }

     100% {
          opacity: 1;
          transform: scale(1) rotate(0deg) translateY(0);
     }
}


.banner_main {
     position: relative;
     /* Necesario para posicionar el pseudo-elemento */
     background-size: cover;
     background-image: url('./portadaalimeneta2.webp');



     /* Mantiene la proporción de la imagen */
     min-height: 780px;
     display: flex;
     justify-content: center;
     align-items: center;
}






.video-background {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -1;
}

.content {
     position: relative;
     color: white;
     text-align: center;
     z-index: 2;
}


/* Contenedor principal */


/* 🎭 Animación de escritura */
@keyframes typing {
     from {
          width: 0;
          opacity: 1;
     }

     to {
          width: 100%;
          opacity: 1;
     }
}

/* ✨ Delay progresivo en cada línea */
.news-content p span {
     display: block;
}

/* ✨ Última línea brilla al terminar */
.news-content p span:last-child {
     animation: typing 2.5s steps(40, end) forwards, glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
     from {
          color: #444;
     }

     to {
          color: #222;
          text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
     }
}



/*animations propiedades css - clientes y proveedores  */



/* 🏷️ Secciones */
.clientes,
.proveedores {
     margin: 50px auto;
     padding: 20px;
}

h2 {
     font-size: 2em;
     text-transform: uppercase;
     margin-bottom: 20px;
     opacity: 0;
     animation: fadeIn 1.5s ease-in-out forwards;
}

/* 📦 Contenedores */
.clientes-container,
.proveedores-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
}

/* 📌 Tarjetas de clientes y proveedores */

/* 🎭 Efecto "carcomido" en imágenes */
.cliente img,
.proveedor img {
     width: 70%;
     height: 100%;
     object-fit: contain;
     transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
     clip-path: polygon(5% 0%, 95% 0%, 100% 20%, 100% 80%,
               95% 100%, 5% 100%, 0% 80%, 0% 20%);
     filter: grayscale(40%);
}

/* 🌟 Hover con zoom y brillo */
.cliente:hover,
.proveedor:hover {
     transform: scale(1.1);
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.cliente:hover img,
.proveedor:hover img {
     transform: scale(1.2);
     filter: grayscale(0%) brightness(1.2);
}

/* 🎬 Animaciones */
@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(30px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}




/* ESTILOS PARA PRODUCTS.HTML */



/* Mueve el menú más abajo */
.navigation {
     top: 5%;
     /* Oculta el menú al inicio */
     z-index: 1000;
}

/* Cuando pases el cursor por el botón o los nav-items, el menú baja */


/* Ajustes para que los elementos del menú se vean bien */

.nav-item:hover {
     filter: brightness(1.2);
     /* Efecto al pasar el cursor */
}





.mision-vision-d,
.inicio-d,
.acerca-d,
.productos-d,
.clientes-prov-d,
.noticias-d,
.contact-d {
     writing-mode: horizontal-tb;
     transform: rotate(180deg) !important;


}


.nav-item {
     writing-mode: vertical-rl;
     /* Rota el texto 90° */
     text-align: center;
     transform: rotate(180deg);
     /* Asegura que el texto no esté al revés */
     transition: all 0.3s ease;
}

#parrafo-nav {

     padding: 10px !important;


}


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Libre+Bodoni:wght@500;700&family=Cormorant+Garamond:wght@500;700&display=swap');


#titulo-inicio {
     font-family: 'Playfair Display', 'Libre Bodoni', 'Cormorant Garamond', serif !important;
     /* Forzado */
     font-size: 4rem;
     color: white;
     /* Texto en blanco */
     background-color: #181e17e7;
     /* Fondo negro */

     display: inline-block;
     /* Para que el fondo solo ocupe el ancho del texto */
     padding: 10px 80px;
     /* Espaciado alrededor del texto */
     border-radius: 25px;

     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;




}



/* Animación sutil */
@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(-20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

#content-box {
     background-color: #181e17e7;
     /* Fondo negro */

     padding: 10px 80px;
     /* Espaciado alrededor del texto */
}

/* PRODUCTOS DE BOX PROPIEDADES CSS SOMBREADO */

.product_box {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2),
          -10px -10px 20px rgba(255, 255, 255, 0.1);
     /* Sombra paralela */
}

.product_box:hover {
     transform: translateY(-10px);
     box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3),
          -15px -15px 30px rgba(255, 255, 255, 0.1);
}

.product_box figure img {
     width: 100%;
     border-radius: 12px;
     transition: transform 0.5s ease;
}

.product_box:hover figure img {
     transform: scale(1.05);
}

.shadow-text {
     text-align: center;
     font-size: 1.5rem;
     font-weight: bold;
     color: white;
     text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
     /* Efecto de sombra en texto */
     animation: fadeIn 1s ease-in-out;
}

/* PRODUCTOS DE BOX PROPIEDADES CSS SOMBREADO */


/* Animación de aparición */
@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}


/* Estilos para el botón de Descúbrenos */
#btn-descubre {
     display: inline-block;
     background-color: #000000;
     color: rgb(0, 0, 0);
     padding: 10px 20px;
     border-radius: 5px;
     text-decoration: none;
     font-weight: bold;
     transition: background-color 0.3s ease-in-out;
 }
 
 #btn-descubre:hover {
     background-color: #145033;
 }
 /* Título principal */
.main-title {
     text-align: center;
     padding: 20px;
     background-color: #2980b9;
     color: #fff;
     font-size: 2rem;
   }
   
   /* Sección de noticias */
   .news-section {
     margin: 40px auto;
     padding: 20px;
     max-width: 1200px;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
     overflow: hidden;
     margin-bottom: 30px;
   }
   
   .section-title, .news-header h2 {
     text-align: center;
     margin-bottom: 15px;
     color: #2c3e50;
     font-weight: 600;
   }
   
   /* Contenedor de la noticia */

   /* Contenido de la noticia */
   .news-content {
     padding: 15px;
     text-align: justify;
   }
 
   
   /* Botón Leer Más */
   .read-more {
     display: inline-block;
     background-color: #2980b9;
     color: #fff;
     border: none;
     padding: 8px 15px;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     margin-bottom: 10px;
   }
   
   .read-more:hover {
     background-color: #1f618d;
   }
   
   /* Detalles de la noticia ocultos inicialmente */
   .news-details {
     font-size: 0.9rem;
     color: #444;
     margin-top: 10px;
     display: none;
   }
   
   /* Clase para ocultar elementos */
   .hidden {
     display: none;
   }
   
   /* Imágenes de noticias */
   .news-images {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     padding: 15px;
   }
   

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