/*
Colores Lennys
Amarillo: #fccb00 
Rojo: #e43618
Beige clarito: #efeee2
Negro plomo: #060e00 // abril 1d1d1d
Celeste: #10b3bb
beige: efeee2
Cocogoose-Pro-Regular-trial
*/


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'FreshMango';
}

@font-face {
  font-family: 'FreshMango';
  src: url('../fonts/freshmangoRegular.ttf') format('truetype');
}
@font-face {
  font-family: 'Cocogoose';
  src: url('../fonts/Cocogoose-Pro-Regular-trial.ttf') format('truetype');
}
@font-face {
  font-family: 'CocogooseBold';
  src: url('../fonts/Cocogoose-Pro-Bold-trial.ttf') format('truetype');
}
@font-face {
  font-family: 'CocogooseDark';
  src: url('../fonts/Cocogoose-Pro-Darkmode-trial.ttf') format('truetype');
}

.lead {
    font-family: 'FreshMango';
    font-size: 18px; 
    width: 75%;
}
.leadContacto {
    font-family: 'FreshMango';
    font-size: 18px;
    color: #efeee2;
    text-align: center;
    margin-top: 25px;

}
.fw-bold {
    font-family: 'Cocogoose'; 
    color: #1D1D1D;
}
.fw-boldBeige {
    font-family: 'Cocogoose'; 
    color: #efeee2;
}
.fw-boldBigNG {
    font-family: 'CocogooseBold'; 
    color: #000;	
}

.leadBeige {
    font-family: 'FreshMango';
    font-size: 18px; 
    width: 75%;
    color: #efeee2;
}
/* links generales
a {
  color: red;
  text-decoration: none; 
}

a:hover {
  text-decoration: underline; 
}
*/

/* Contenedor principal del Parallax */
        .parallax-section {
            /* 1. Imagen de fondo */
            background-image: url('../images/seccion1.jpg');

            /* 2. EFECTO PARALLAX */
            background-attachment: fixed; /* Esto crea el efecto */
            
            /* 3. Ajuste de imagen */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover; /* Cubre todo el ancho y alto */

            /* 4. Dimensiones */
            width: 100%; /* Ancho completo */
            height: 80vh; /* Altura: 80% de la pantalla. Puedes usar 100vh para pantalla completa. */

            /* 5. Centrado del contenido interior */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Capa oscura superpuesta para mejorar la legibilidad del texto (Opcional) */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 80vh; /* Misma altura que el contenedor */
            background-color: rgba(0, 0, 0, 0.4); /* Negro con 40% de opacidad */
            z-index: 1;
        }

        /* Estilos para el texto sobre el Parallax */
        .parallax-content {
            z-index: 2; /* Por encima de la capa oscura */
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        /* Optimización Responsiva para Móviles */
        @media (max-width: 768px) {
            .parallax-section {
                /* Muchos móviles no manejan bien background-attachment: fixed. */
                /* Lo cambiamos a 'scroll' en móviles para mejor rendimiento. */
                background-attachment: scroll;
                height: 50vh; /* Altura más baja en móviles */
            }
            .overlay {
                height: 50vh;
            }
        }




.container{
width:90%;
max-width:1200px;
margin:auto;
}

.header{
background: #1d1d1d;
color: #fccb00;
position:sticky;
top:0;
z-index:1000;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.menu ul{
display:flex;
gap:30px;
list-style:none;
}

.menu a{
color: #fccb00;
text-decoration:none;
font-family: 'FreshMango';
}

.menu a:hover{
color: #fff;
font-style: italic;
font-weight: 400;
	font-family: 'FreshMango';
}


.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
}

.hamburger span{
height:3px;
width:25px;
background:white;
margin-bottom:4px;
}

.hero{
position:relative;
height:80vh;
overflow:hidden;
}

.hero video{
width:100%;
height:100%;
object-fit:cover;
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*color:white;*/
text-align:center;
	 font-family: 'FreshMango';
	color: #fccb00;
}

.hero h1{
font-size:52px;
margin-bottom:20px;
}

.productos{
padding:80px 0;
}

.slider{
display:flex;
gap:40px;
justify-content:center;
flex-wrap:wrap;
}

.card{
text-align:center;
max-width:300px;
}

.card img{
width:100%;
}

.sabores{
background:#f5b400;
padding:70px 0;
text-align:center;
}

.sabores-grid{
margin-top:30px;
display:flex;
gap:30px;
justify-content:center;
font-weight:bold;
}

.stores{
padding:70px 0;
text-align:center;
}

.stores-grid{
display:flex;
flex-wrap:wrap;
gap:40px;
justify-content:center;
margin-top:30px;
}

.cta{
background:#10b3bb;
color: #1d1d1d;
text-align:center;
padding:80px 0;
}

.mapa{
padding:80px 0;
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.btn{
background:#d71920;
color:white;
padding:14px 30px;
text-decoration:none;
display:inline-block;
}

.btn-dark{
background: #1d1d1d;
color:white;
padding:12px 25px;
text-decoration:none;
}

footer{
background: #1d1d1d;
color:white;
padding:40px 0;
}

.footer{
display:grid;
grid-template-columns:1fr 1fr 1fr;
}

@media (max-width:900px){

.menu{
display:none;
position:absolute;
top:70px;
left:0;
background: #1d1d1d;
width:100%;
}

.menu ul{
flex-direction:column;
padding:20px;
}

.hamburger{
display:flex;
}

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

.hero h1{
font-size:34px;
}

.footer{
grid-template-columns: 1fr;
text-align:center;
gap:20px;
}

}


/* Configuración de la seccion con imagen de fondo */
.custom-bg-section {
   /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/fondoCrunchy.jpg'); */
	 background-image: url('../images/fondoCrunchy.jpg');
    background-size: cover;
    background-position: center;
   
/*	background-attachment: fixed;  Opcional: efecto parallax */
	
	background-attachment: scroll;
	
    min-height: 60vh; /* Altura maxima para que luzca bien en desktop */
    padding: 60px 0;    
    
}

/* Estilo del boton personalizado */
.btn-custome {
    background-color: #10b3bb; /* Celeste */
    color: #000;
    border: 3px solid #000; /* Bordes negros */
    border-radius: 18px; /* Bordes redondeados */
    padding: 5px 50px;
    transition: all 0.3s ease; /* Transición suave */
    text-decoration: none;
    display: inline-block;
	 font-family: 'FreshMango';
}

/* Efecto Hover (Pasar el cursor) */
.btn-custome:hover {
    background-color: #e43618; /* Rojo */
    color: #fff;
    border-color: #000;
}

/* Fondo rojo para toda la seccion */
.bg-red-custom {
    background-color: #e43618;
    color: white; /* Color de texto blanco para que contraste con el rojo */
}
/* Fondo rojo para toda la seccion */
.bg-black-custom {
    background-color: #1d1d1d;
    color: white; /* Color de texto blanco para que contraste con el rojo */
}

/* Estilo del boton personalizado */
.btn-customeBeige {
    background-color: #efeee2; /* Celeste */
    color: #1d1d1d;
    border: 3px solid #e43618; /* Bordes negros */
    border-radius: 18px; /* Bordes redondeados */
    padding: 5px 50px;
    transition: all 0.3s ease; /* Transición suave */
    text-decoration: none;
    display: inline-block;
	 font-family: 'FreshMango';
}

/* Efecto Hover (Pasar el cursor) */
.btn-customeBeige:hover {
    background-color: #e43618; /* Rojo */
    color: #efeee2;
    border-color: #efeee2;
}

/* Texto de tamaño 60px */
.text-custom-size {
    font-size: 60px;
	font-family: 'CocogooseDark';
    color: #efeee2;
    font-weight: bold;
    margin: 0;
    line-height: 1; /* Evita espacios extra arriba/abajo */
}

/* Ajuste para que las imágenes no se deformen y mantengan fluidez */
.custom-img {
    max-height: 200px; /* Puedes ajustar esto según tu necesidad */
    width: auto;
    object-fit: contain;
}

/* Ajuste responsivo para el texto en pantallas muy pequeñas */
@media (max-width: 576px) {
    .text-custom-size {
        font-size: 30px; /* Reducimos a la mitad para que no rompa el diseño en móviles */
    }
}

/* carrousel */



/* CONTENEDOR GENERAL CON FLECHAS AFUERA */
.carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

/*  CARRUSEL */
.logo-carousel-container {
    overflow: hidden;
    flex: 1;
}

/* TRACK */
.logo-track {
    display: flex;
  /*  width: max-content; */
}

/* 4 LOGOS */
.logo-item {
   /* flex: 0 0 25%; 
    display: flex;
    justify-content: center;
    align-items: center;*/
	  flex: 0 0 auto; /* IMPORTANTE */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* LOGOS GRANDES Y EN COLOR */
.logo-item img {
    max-height: 150px;
    width: auto;
    object-fit: contain;
   /* transition: 0.3s;  anterior que funciona*/
	 transition: transform 0.3s ease;
}

.logo-item img:hover {
    transform: scale(1.05);
}

/* FLECHAS NUEVAS */
.carousel-control {
    background: none;
    border: none;
    font-size: 48px;
    font-weight: 900;
    color: #000;
    cursor: pointer;
    line-height: 1;
    padding: 0 10px;
    user-select: none;
}

.carousel-control:hover {
    transform: scale(1.2);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .logo-item {
        flex: 0 0 33.33%;
    }
    .logo-item img {
        max-height: 120px;
    }
}

@media (max-width: 576px) {
    .logo-item {
        flex: 0 0 50%;
    }
    .logo-item img {
        max-height: 90px;
    }
    .carousel-control {
        font-size: 36px;
    }
}

/* Linea Titular 
.titular-custom {
    font-family: 'FreshMango', sans-serif;
    font-size: 40px;
    line-height: 38px;
    font-weight: 700;
}*/
.titular-custom {
    font-family: 'FreshMango', sans-serif;
   /* font-weight: 700; */
    font-size: clamp(24px, 4vw, 40px);
    line-height: clamp(26px, 3.8vw, 36px);
	color: #1d1d1d;
}

.titular-customYellow {
    font-family: 'FreshMango', sans-serif;
   /* font-weight: 700; */
    font-size: clamp(24px, 4vw, 40px);
    line-height: clamp(26px, 3.8vw, 36px);
	color: #fccb00;
}

.titular-customBeige {
    font-family: 'FreshMango', sans-serif;
   /* font-weight: 700; */
    font-size: clamp(28px, 4vw, 42px);
    line-height: clamp(30px, 3.8vw, 34px);
	color: #efeee2;
}

.titular-contact {
     font-family: 'CocogooseDark';
   font-weight: bold;
    font-size: clamp(24px, 4vw, 40px);
    line-height: clamp(40px, 3.6vw, 32px);
	color: #e43618;
}


/* seccion footer ew */

/* FONDO GENERAL */
.seccion-footer-bg {
    background: #10b3bb;
    padding-top: 0px 0px;
}

/*  BLOQUE NEGRO FULL WIDTH */
.footer-box {
    background: #1d1d1d;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding: 50px 0px;
    color: #fff;
    width: 100%;
    height: 100%;
}

/* CONTENIDO INTERNO CENTRADO */
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* GRID */
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* COLUMNAS */
.footer-col-1 { width: 40%; }
.footer-col-2 { width: 20%; }
.footer-col-3 { width: 20%; }
.footer-col-4 { width: 20%; }

/* LOGO */
.footer-logo img {
    max-width: 180px;
    width: 100%;
}

/* MENu */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 10px;
}

.footer-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.footer-menu a:hover {
    text-decoration: underline;
}

/* REDES */
.footer-social a {
    color: #fff;
    font-size: 20px;
    margin-right: 15px;
    transition: 0.3s;
}

.footer-social a:hover {
    transform: scale(1.2);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .footer-col-1 { width: 100%; margin-bottom: 30px; }
    .footer-col-2,
    .footer-col-3,
    .footer-col-4 { width: 33.33%; }
}

@media (max-width: 576px) {
    .footer-col-2,
    .footer-col-3,
    .footer-col-4 { width: 100%; margin-bottom: 20px; }
}


/* pita index */
/* Configuracion de la seccion con imagen de fondo */
.custom-pita-section {
   /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/fondoCrunchy.jpg'); */
	 background-image: url('../images/fondoOndas.jpg');
    background-size: cover;
    background-position: center;
   
/*	background-attachment: fixed;  Opcional: efecto parallax */
	
	background-attachment: scroll;
	
    min-height: 60vh; /* Altura máxima para que luzca bien en desktop */
    padding: 60px 0;
}

.redes{
padding:70px 0;
text-align:center;
	background-color: #1d1d1d;
	color: #fccb00;
	 background-image: url('../images/fondo-seccion-instagram.jpg');
    background-size: cover;
    background-position: center;
	background-attachment: scroll;
	
    min-height: 60vh; /* Altura máxima para que luzca bien en desktop */
   /*  padding: 60px 0; */
}

/* prueba efecto rompe la rutina */

.seccion-snacks-separada {
    background-color: #e43618;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'CocogooseDark';
}
.contenedor-layout {
    display: flex;
    width: 90%;
    max-width: 1100px;
    /* Esta es la clave: reparte el espacio y deja el área libre en medio */
    justify-content: space-between; 
    align-items: center;
}

.bloque-izquierdo, .bloque-derecho {
    flex: 1; /* Ambos ocupan el mismo espacio para forzar el vacío central */
    display: flex;
}

.bloque-izquierdo {
    justify-content: flex-start; /* Empuja el primer texto a la izquierda */
}

.bloque-derecho {
    justify-content: flex-end; /* Empuja el segundo texto a la derecha */
}

/* Estilo de Texto */
.texto-impacto {
    color: #fccb00;
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    line-height: 0.85;
    font-weight: 900;
    text-transform: uppercase;
}

.texto-impacto span {
    display: block;
}

/* --- ANIMACIÓN DE RUPTURA VIOLENTA --- */
.romper-extremo {
    animation: impactoViolento 3.5s ease-in-out infinite;
    transform-origin: center;
}

.romper-extremo i {
    display: inline-block;
    font-style: normal;
    animation: letrasVibrando 3.5s infinite;
}

@keyframes impactoViolento {
    0% { transform: translateX(150%) rotate(20deg); opacity: 0; }
    8% { transform: translateX(0) rotate(0deg); opacity: 1; }
    /* El choque violento */
    10% { transform: scale(1.4) translate(-20px, 10px) skewX(-15deg); filter: brightness(2); }
    12% { transform: scale(1.2) translate(20px, -10px) skewX(15deg); }
    14% { transform: scale(1.3) translate(-10px, -5px) rotate(-5deg); }
    16% { transform: scale(1.1) translate(0, 0) rotate(0deg); filter: brightness(1); }
    85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5); }
}

@keyframes letrasVibrando {
    0%, 8% { transform: translate(0,0) rotate(0); }
    /* Las letras se disparan en el impacto */
    10% { transform: translate(-5px, -10px) rotate(-20deg); color: #fff; }
    12% { transform: translate(8px, 5px) rotate(15deg); }
    14% { transform: translate(-3px, 8px) rotate(-10deg); }
    16% { transform: translate(0,0) rotate(0); color: #ffff00; }
}

/* Responsividad */
@media (max-width: 768px) {
    .contenedor-layout {
        width: 95%;
    }
    .texto-impacto {
        font-size: 1.5rem;
    }
}

/* seccion contacto  */

#contactFooter{
background:#efeee2;
color:white;
text-align:center;
padding:80px 0;
}

/* Links seccion CONTACT */
#contactFooter a {
  color: #e43618;
  text-decoration: none;
}

#contactFooter a:hover {
  text-decoration: underline;
}

/* form */
#contact {
  display: flex;
  justify-content: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #fccb00;
  background-color: #efeee2;
  color: #1d1d1d;
  font-size: 16px;
  outline: none;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

/*
.contact-form button {
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background-color: #e43618;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.contact-form button:hover {
  opacity: 0.9;
}
*/
.contact-form button  {
    background-color: #efeee2; /* Celeste */
    color: #000;
    border: 3px solid #e43618; /* Bordes negros */
    border-radius: 18px; /* Bordes redondeados */
    padding: 5px 50px;
    transition: all 0.3s ease; /* Transición suave */
    text-decoration: none;
    display: inline-block;
	 font-family: 'FreshMango';
}

/* Efecto Hover (Pasar el cursor) */
.contact-form button:hover {
    background-color: #e43618; /* Rojo */
    color: #fff;
    border-color: #efeee2;
}

/* seccion recetas */
.img-receta {
  border-radius: 20px;
  border: 4px solid #fccb00;       /* borde interno (más fino) */
  box-shadow: 0 0 0 10px #efeee2;  /* borde externo (más grueso) */
}

/* --- CODIGO PRODUCTOS DESDE AQUI --- */
/* --- CONTENEDOR PRINCIPAL --- */
        .products-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end; /* Alineados por la base inferior */
            width: 100%;
            /* El ancho máximo es menor a la suma de las 3 imágenes para obligar el solape en PC */
            max-width: 500px;      
           /* padding: 100px 20px;*/
			padding-bottom: 40px;
            box-sizing: border-box;
        }

        /* --- ENLACES / ENVOLTORIOS DE PRODUCTO --- */
        .product-link {
            text-decoration: none;
            display: block;
            
            /* MEDIDAS EXACTAS SOLICITADAS */
            width: 160px;
            height: 200px;
            flex: none; /* CRUCIAL: Evita que el navegador altere el tamaño o anule los márgenes */
            
            /* SOLAPAMIENTO: Margen negativo a los lados para encimarse (Ajusta este valor si quieres más o menos solape) */
            margin: 0 -35px; 
            
            position: relative;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.1s ease;
            z-index: 1; /* Capa base */
        }

        /* --- CONFIGURACIÓN DE LA IMAGEN CENTRAL (10% arriba por defecto) --- */
        .product-link.center-product {
            transform: translateY(-10%); /* Sube un 10% (30px) respecto a las laterales */
            z-index: 2; /* Por defecto pasa por encima de las dos de los lados */
        }

        /* --- ESTILO DE LAS IMÁGENES --- */
        .product-link img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain; /* Mantiene la proporción de tus productos sin recortar */
            margin: 0;
            padding: 0;
            filter: drop-shadow(0 15px 20px rgba(0,0,0,0.6)); /* Sombra proyectada sobre la imagen de atrás */
        }

        /* --- EFECTO HOVER (Al pasar el mouse) --- */
        
        /* Prioridad de capa: el producto seleccionado se va al frente de todos inmediatamente */
        .product-link:hover {
            z-index: 10 !important;
        }

        /* Interacción para las imágenes laterales */
        .product-link:not(.center-product):hover {
            transform: translateY(-25px) scale(1.15); /* Se eleva y se agranda un 15% */
        }

        /* Interacción para la imagen central */
        .product-link.center-product:hover {
            transform: translateY(calc(-10% - 25px)) scale(1.15); /* Mantiene su 10% base + el salto */
        }

        /* --- RESPONSIVE DESIGN (Celulares de todo tamaño) --- */
        @media (max-width: 768px) {
            .products-container {
                max-width: 100%;
                padding: 60px 10px;
            }

            /* En móviles reducimos proporcionalmente el tamaño para que sigan una al lado de la otra sin romperse */
            .product-link {
                width: 32vw;       /* Se adapta al ancho de pantalla del móvil */
                height: 40vw;      /* Mantiene la proporción aproximada */
                margin: 0 -4vw;    /* Mantiene el solapamiento de forma responsiva */
            }
            
            /* Ajuste del hover para pantallas táctiles */
            .product-link:not(.center-product):hover {
                transform: translateY(-10px) scale(1.08);
            }
            .product-link.center-product:hover {
                transform: translateY(calc(-10% - 10px)) scale(1.08);
            }
        }

/* --- CODIGO PRODUCTOS CRUNCHY DESDE AQUI --- */
/* --- CONTENEDOR PRINCIPAL --- */
        .products-containerC {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end; /* Alineados por la base inferior */
            width: 100%;
            /* El ancho máximo es menor a la suma de las 3 imágenes para obligar el solape en PC */
            max-width: 500px; 
			/* padding: 50px 10px;*/
			padding-bottom: 40px;
            box-sizing: border-box;
        }

        /* --- ENLACES / ENVOLTORIOS DE PRODUCTO --- */
        .product-linkC {
            text-decoration: none;
            display: block;
            
            /* MEDIDAS EXACTAS SOLICITADAS */
            width: 128px;
            height: 160px;
            flex: none; /* CRUCIAL: Evita que el navegador altere el tamaño o anule los márgenes */
            
            /* SOLAPAMIENTO: Margen negativo a los lados para encimarse (Ajusta este valor si quieres más o menos solape) */
            margin: 0 -35px; 
            
            position: relative;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.1s ease;
            z-index: 1; /* Capa base */
        }

        /* --- CONFIGURACIÓN DE LA IMAGEN CENTRAL (10% arriba por defecto) --- */
        .product-linkC.center-productC {
            transform: translateY(-10%); /* Sube un 10% (30px) respecto a las laterales */
            z-index: 2; /* Por defecto pasa por encima de las dos de los lados */
        }

        /* --- ESTILO DE LAS IMÁGENES --- */
        .product-linkC img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain; /* Mantiene la proporción de tus productos sin recortar */
            margin: 0;
            padding: 0;
            filter: drop-shadow(0 15px 20px rgba(0,0,0,0.6)); /* Sombra proyectada sobre la imagen de atrás */
        }

        /* --- EFECTO HOVER (Al pasar el mouse) --- */
        
        /* Prioridad de capa: el producto seleccionado se va al frente de todos inmediatamente */
        .product-linkC:hover {
            z-index: 10 !important;
        }

        /* Interacción para las imágenes laterales */
        .product-linkC:not(.center-product):hover {
            transform: translateY(-25px) scale(1.15); /* Se eleva y se agranda un 15% */
        }

        /* Interacción para la imagen central */
        .product-linkC.center-productC:hover {
            transform: translateY(calc(-10% - 25px)) scale(1.15); /* Mantiene su 10% base + el salto */
        }

        /* --- RESPONSIVE DESIGN (Celulares de todo tamaño) --- */
        @media (max-width: 768px) {
            .products-containerC {
                max-width: 100%;
                padding: 30px 10px;
            }

            /* En móviles reducimos proporcionalmente el tamaño para que sigan una al lado de la otra sin romperse */
            .product-linkC {
                width: 32vw;       /* Se adapta al ancho de pantalla del móvil */
                height: 40vw;      /* Mantiene la proporción aproximada */
                margin: 0 -4vw;    /* Mantiene el solapamiento de forma responsiva */
            }
            
            /* Ajuste del hover para pantallas táctiles */
            .product-linkC:not(.center-product):hover {
                transform: translateY(-10px) scale(1.08);
            }
            .product-linkC.center-productC:hover {
                transform: translateY(calc(-10% - 10px)) scale(1.08);
            }
        }

/* NOSOTROS */
.contenedor-txtNos {
 /*   border: 8px solid #fccb00;  Amarillo dorado 
     border-radius: 25px;
    padding: 25px;
    background: #fff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
	text-align: center;
	width: 70%;*/
	
	    width: 65%;
    margin: 40px auto;          /* Centra el contenedor horizontalmente */
    padding: 30px;

    border: 6px solid #fccb00;  /* Borde amarillo grueso */
    border-radius: 25px;        /* Bordes redondeados */

    background-color: #e6e6e6;

    text-align: center;         /* Centra el texto */
    box-sizing: border-box;
}
/* Configuracion de la seccion con imagen de fondo */
.custom-lennys-section {
   /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/fondoCrunchy.jpg'); */
	 background-image: url('../images/fondoBeigeOndasSmall552.jpg');
    background-size: cover;
    background-position: center;
   
/*	background-attachment: fixed;  Opcional: efecto parallax */
	
	background-attachment: scroll;
	
    min-height: 60vh; /* Altura máxima para que luzca bien en desktop */
    padding: 60px 0;
}

/* Ficha productos */
/* Contenedor principal de texto */
.contenedor-fichaProducto {
  position: relative; /* CRUCIAL: Permite que las imágenes se posicionen respecto a esta caja */
  background-color: #e6e6e6; /* Color de relleno gris (puedes usar un gris más claro como #f0f0f0 si lo deseas) */
  color: #000; /* Color del texto (blanco para que contraste con el gris oscuro) */
  border: 4px solid #fccb00;  /* Borde amarillo de 2px */
  border-radius: 15px; /* Bordes redondeados */
  padding: 30px; /* Espacio interno para que el texto no toque los bordes ni las imágenes */
  margin: 50px auto; /* Margen externo para separarlo de otros elementos */
  max-width: 800px; /* Ancho máximo opcional del contenedor */
}

/* Estilos base para todas las imágenes decorativas superpuestas */
.img-decorativa {
  position: absolute;
  z-index: 10; /* Hace que las imágenes queden por encima del borde y del texto */
 /* width: 60px;  Tamaño de muestra para las imágenes, ajústalo a tu gusto */
  height: auto;
}

/* 1. Imagen superior derecha torcida 20 grados */
.img-sup-der {
  top: -20px;     /* Sube la mitad de la imagen (asumiendo 60px de alto) para superponerla en el borde */
  right: -40px;   /* Saca la mitad de la imagen hacia la derecha */
  transform: rotate(10deg); /* Rota la imagen 20 grados en el sentido de las agujas del reloj */
}
.img-sup-derPita {
  top: -80px;     /* Sube la mitad de la imagen (asumiendo 60px de alto) para superponerla en el borde */
  right: -40px;   /* Saca la mitad de la imagen hacia la derecha */
  transform: rotate(10deg); /* Rota la imagen 20 grados en el sentido de las agujas del reloj */
}

/* 2. Imagen en el medio del borde izquierdo */
.img-medio-izq {
  left: -180px;    /* orig -30Saca la mitad de la imagen hacia la izquierda */
  top: 50%;       /* La baja al 50% de la altura del contenedor */
  transform: translateY(-50%); /* Centrado vertical matemático exacto */
}

/* 3. Imagen en el borde inferior derecho */
.img-inf-der {
  bottom: -70px;  /* Baja la mitad de la imagen para superponerla en el borde inferior */
  right: -30px;   /* Saca la mitad de la imagen hacia la derecha */
}

/* css variantes */
.contenedorVariantes {
 display: flex;
  flex-direction: row;
  justify-content: center; /* Centra los elementos horizontalmente */
  align-items: center;     /* Centra los elementos verticalmente (si el contenedor tiene altura) */
  gap: 60px;               /* Separación exacta de 40px entre ellos */
  width: 100%;
 /* min-height: 100vh;        Opcional: hace que el contenedor ocupe todo el alto de la pantalla para notar el centrado vertical */
}

.elemento {
  /* Eliminamos 'flex: 1' para que los elementos no se estiren a lo ancho de toda la pantalla y se mantengan centrados con su tamaño natural */
  padding: 20px;
  text-align: center;
  min-width: 150px;        /* Opcional: un ancho mínimo para que tengan consistencia */
}

/* 2. DISEÑO MÓVIL (Responsivo) */
@media (max-width: 768px) {
  .contenedorVariantes {
    flex-direction: column; /* Se apilan uno debajo del otro */
    min-height: auto;       /* En móvil es mejor que el alto se adapte al contenido */
    padding: 20px;          /* Margen de seguridad para pantallas pequeñas */
  }
}

/* recetas version final 3 filas */
/* Contenedor general */
.container-principal {
 /*   max-width: 1200px;*/
    margin: 0 auto;
    padding: 50px;
    background-color: #000000;
}

/* Fila 1: Encabezado (Ocupa todo el ancho arriba) */
.fila-header {
    text-align: center;
    margin-bottom: 40px; /* Espacio con la fila de abajo */
}

/* Fila 2: Contenedor Grid para las columnas (Desktop) */
.fila-columnas {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 10px; /* Espacio entre columnas */
}

/* Estilo de las columnas (Sin bordes ni fondos, solo centrado) */
.columna {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
    align-items: center;    /* Centrado horizontal */
    text-align: center;     /* Centrado de texto */
}

/* --- Versión Responsive (Móvil) --- */
@media (max-width: 768px) {
    .fila-columnas {
        grid-template-columns: 1fr; /* Se apilan una debajo de la otra */
    }
}

/* NUTRICIONAL TABLA 
Contenedor adaptativo para centrar la tabla*/
        .nutrition-panel {
            width: 100%;
            margin: 20px auto;
            padding: 5px;
            box-sizing: border-box;
            color: #060e00;
            background-color: #ffffff;
            font-family: 'Cocogoose';
        }

        /* Estructura general de la tabla */
        .nutrition-table {
            width: 100%;
            border-collapse: collapse;
          /*  font-size: 13.5px;*/
        }

        /* Aplicación de bordes oscuros idénticos a la imagen original */
        .nutrition-table, 
        .nutrition-table th, 
        .nutrition-table td {
            border: 1px solid #000000;
        }

        /* Celda del título principal */
        .main-header {
            text-align: center;
            padding: 4px 4px;
        }

        .main-header h3 {
            font-size: 16px;
            margin: 0;
            padding: 0;
            letter-spacing: -0.5px;
            font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        }

        /* Celda de la porción y el envase */
        .sub-header {
            text-align: center;
            font-size: 12px;
            padding: 2px 4px;
            font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        }

        /* Encabezados de las columnas (Para 100g, Por porción, %VD) */
        .column-headers th {
            font-size: 11px;
           /* font-weight: bold;*/
            padding: 2px 2px;
        }

        /* Formato general de celdas de datos */
        .nutrition-table td {
            padding: 2px 3px;
             font-size: 11px;
            vertical-align: middle;
            font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        }

        /* Alineaciones de texto */
        .text-left {
            text-align: left;
        }
.text-otraLetra {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
        }

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

        /* Estilos específicos de jerarquía de textos */
        .bold-text {
            font-weight: bold;
        }

        /* Sangría para sub-nutrientes como los azúcares y subtipos de grasas */
        .indent-text {
            padding-left: 16px !important;
        }

        /* Nota legal e informativa al pie de la tabla */
        .nutrition-footer {
            font-size: 10px;
            line-height: 1;
            padding: 5px 6px !important;
            text-align: left;
            font-weight: normal;
        }