/* Decoración */ 
.receta-text-section {
    text-align: center;
}

.receta-title-section {
    color: var(--color-monaca-green2, #00ae42);
    font-size: 4.5em;
    font-weight: 700;
    margin-bottom: 5px;
}

.receta-deco {
    display: block;
    width: 33%;
    height: 5px;
    background-color: var(--color-monaca-green2, #00ae42);
    margin: 0 auto 130px;
}

/* Tarjeta del Carrusel (ficha-receta) ******************************************************/
.ficha-receta {
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 5px;
    outline: none;    
    display: inline-block; /* Ayuda a mantener la estructura cuando hay pocas */
}

.ficha-receta:hover {
    transform: translateY(-5px);
}    
    
/* Forzar que todas las imágenes de las tarjetas tengan el mismo tamaño */
.receta-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;    
    border-radius: 30px;  
} 

/* General para el carrusel ***************************************************************/
.receta-carousel-wrapper {
    position: relative;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 40px;
}

.receta-content {
    background: #f9f9f9;
}

.receta-slider {
    padding-bottom: 50px;
    display: block !important;
}

/* Contenedor principal de la tarjeta (para control de borde y fondo) */
.receta-card-inner {
    background: #f2f2f2;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s ease;
    height: 100%;
    /* Forzamos el ancho exacto para 4 columnas (25%) */    
    width: 380px !important; /* Un mínimo para que no se vean mal en pantallas medianas */
    max-width: 100%;
    margin: 0 auto;
    /*Paraquetodasmidanlomismo*/display: flex;
    flex-direction: column;
    padding: 18px;   
}

/* Imagen y Etiqueta de Categoría (Overlay) */
.receta-image-wrapper {
    position: relative;
    width: 100%;
}

.receta-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Estilo para carrusel con pocas recetas*/
.carousel-poco-contenido{
    width: 1700px !important;
    transform: none !important;
}

/* Forzamos el centrado del track cuando hay pocos elementos */
.slick-track.slick-center-custom {
    display: flex !important;
    justify-content: center !important;
    transform: none !important; /* Evita que Slick lo desplace a la izquierda */
    width: 100% !important;     /* Ocupa todo el ancho para que el centrado funcione */
    margin: 0 auto !important;
}

/* Aseguramos que las fichas no pierdan su tamaño base al estar en un flex container */
.slick-center-custom .ficha-receta {
    /* flex: grow | shrink | basis */
    flex: 0 0 25% !important; /* 0 grow, 0 shrink, 25% de base */
    max-width: 425px !important; /* El ancho máximo que tienen cuando hay 4 */
    min-width: 350px !important; /* Evita que se encojan como viste en el video */
    width: 425px !important; 
    box-sizing: border-box !important
}

/* Estilo para el mensaje cuando no hay resultados para mostrar */
.no-recetas-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 {
    opacity: 0.5;
    cursor: not-allowed !important;
    filter: grayscale(1);
}


/* Etiqueta semi-transparente "POSTRES" en esquina superior izquierda */
.category-tag-over-image {
    /*position: absolute;*/
    top: 15px;
    left: 15px;
    background-color: var(--color-text-menu, #9f9f9f); 
    color: white;
    padding: 4px 12px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;    
    z-index: 5;
    width: 50%;
    margin-bottom: 10px;
}

/* Bloque de Contenido (Texto y Botón) */
.receta-content-wrapper {
    padding: 15px;
    text-align: left;
    background: #f2f2f2;
    transition: 0.3s;
}

/* Título de la tarjeta */
.receta-title {
    font-size: 1.90em;
    color: #333;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 6px;
    height: 2.5em;
} /*ajustado*/

.receta-description-short {
    font-size: 1.2em;
    font-weight: 400;
    color: #333;
    line-height: 1.5;
    height: 9em; /* Limita el alto para que todas las tarjetas midan lo mismo */    
    overflow: hidden;
}/*ajustado*/

/* Botón "¡Quiero hacerla!" */
.btn-receta {
    background-color: var(--color-monaca-green2, #00ae42);
    color: white !important;
    border: none;    
    padding: 8px 18px;
    font-weight: 700;
    font-size: 1.2rem;    
    display: inline-block;
    text-decoration: none;
    width: fit-content;
    transition: 0.3s;
    margin: 0px auto 10px 0px;
    padding: 8px 25px;
    transition: 0.3s ease;
}

.btn-receta:hover {
    background-color: #006935; /* Un verde intermedio al pasar el mouse */
}

.btn-receta-align{
    text-align: right;
}

/* Clase para resaltar la receta seleccionada en el carrusel */
.receta-seleccionada .receta-card-inner {
    border: 2px solid var(--color-monaca-green2, #00ae42);
    box-shadow: 0 4px 15px rgba(0, 174, 66, 0.3);
    background: var(--color-monaca-green2, #00ae42);
}

/* Dinamismo de fondo para tarjetas seleccionadas */
.receta-seleccionada .receta-content-wrapper {
    background-color: var(--color-monaca-green2, #00ae42);
}

.receta-seleccionada .receta-title,
.receta-seleccionada .receta-description-short {
    color: white !important;
}

.receta-seleccionada .btn-receta {    
    color: white; 
    border: 2px solid white;
}

/* Contenedor del detalle de la receta SELECTED ********************************************/
.receta-detalle{
    margin-top: -180px;
}

#receta-detalle-container {
    display: none; /* Se muestra al hacer clic */
    background: #f8faed; 
    margin-top: 30px;
}

/* Imagen y Título sobre Imagen (Overlay) */
.receta-detail-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 65px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);   
}

.receta-container{
    max-width: 1700px;
    margin: 0 auto;
    padding-left: 40px;
    padding-top: 130px;
    padding-bottom: 100px;
}

/* El overlay del título sobre la imagen */
.receta-title-overlay {    
    padding: 10px 20px;
    background-color: var(--color-monaca-green2, #00ae42);
    color: white;
    border-radius: 0px 0px;
    max-width: 100%;   
    height: 12em;
}

.receta-name-over-image {
    font-size: 3.0rem;    
    font-weight: 700;
    margin: 15px;   
    text-align: left; 
}

/* Información Estructurada de la Receta *****************************************************/
.receta-info-right h3 {
    font-size: 2.0rem;
    font-weight: 700;
    font-style: italic;
    color: var(--color-monaca-green2, #00ae42);
    margin-bottom: 20px;       
    text-align: left; 
}

.receta-info-datos{
    font-size: 1.40em;
    color: #000000;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    text-align: left;
    white-space: pre-line; /* Mantiene los saltos de línea y ajusta el texto al ancho */
    text-align: left;      /* Asegura que la lista se alinee a la izquierda */
    padding-left: 20px;    /* Espacio opcional para que los guiones no peguen al borde */
    display: block;
}

/* Espaciado entre tarjetas dentro del slider */
.receta-slider .slick-slide {
    margin: 0 10px; /* Ajusta este valor según el aire que quieras entre fichas */
}

.receta-slider .slick-list {
    margin: 0 -10px; /* Compensa el margen de los slides */
}

/* Estilos de Listas para que se vean como en la referencia *******************************/
/* Asumimos que #det-ingredientes y #det-preparacion recibirán un string de HTML completo (<ul> y <ol>) */

/* Estilos de listas de ingredientes y pasos */
#det-ingredientes ul, #det-preparacion ol {
    padding-left: 0;
    list-style: none;
}

#det-ingredientes ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 12px;
    font-size: 1rem;
}

#det-ingredientes ul li::before {
    content: "•";
    color: #00a859;
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    top: -5px;
}

#det-preparacion ol {
    counter-reset: steps;
}

#det-preparacion ol li {
    position: relative;
    padding-left: 45px;
    margin-bottom: 20px;
    counter-increment: steps;
}

#det-preparacion ol li::before {
    content: counter(steps) ".";
    color: #00a859;
    font-size: 2.2rem;
    font-weight: 800;
    position: absolute;
    left: 0;
    top: -8px;
}
    
/* Estilos para los botones de filtro */
.btn-filter-custom {
        border: none;
        border-radius: 90px 0px;
        padding: 15px 50px;
        min-width: 420px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        cursor: pointer;        
        background-color: #004d26;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);       
}
.btn-img {
    height: 130px; 
    width: auto;
    object-fit: contain;
    position: absolute; 
    top: -18%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    /* Si las imágenes son oscuras y se quiere que se vean blancas en el botón descomentar: */
    /* filter: brightness(0) invert(1); */
}
.btn-tipo {
    position: relative; 
    padding: 10px 20px;
    font-size: 4.5em;
    font-weight: 700;
    color: white;
    margin-right: 50px;    
    margin-left: 50px;

}
/* Estado ACTIVO: Verde claro MONACA */
.btn-filter-custom.active {
    background-color: #00a859; /* Verde claro vibrante */
    transform: scale(1.08);    /* Un poco más grande para resaltar */
    box-shadow: 0 6px 15px rgba(0,168,89,0.3);
}
.btn-filter-custom:hover:not(.active) {
    background-color: #006b35; /* Un verde intermedio al pasar el mouse */
}
/* Estilo para controlar visibilidad*/
.inicio {
    display:none;
}

.siguenos{
    margin-top: 115px;
}



/* Contenedor de Redes Sociales */
.feed-social-container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 40px 100px 40px;
}

.instagram-card-wrapper {
    width: 100%;
    max-width: 400px; /* Ajusta según el diseño de la imagen */    
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.instagram-card-wrapper:hover {
    transform: translateY(-10px);
}

/* Imagen por defecto */
.default-social-card a {
    display: block;
    text-decoration: none;
    line-height: 0; /* Evita espacios debajo de la imagen dentro del link */
}

.default-social-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.default-social-card img:hover {
    opacity: 0.9; /* Efecto sutil al pasar el mouse si tiene link */
}

/* Ajuste para los embeds de Instagram */
.instagram-card-wrapper iframe {
    width: 100% !important;
    border: none !important;
    min-width: auto !important;
    margin: 0 !important;
}

.feed-deco {
    display: block;
    width: 33%;
    height: 5px;
    background-color: var(--color-monaca-green2, #00ae42);
    margin: 0 auto 70px;
}

/* Ajuste para móviles para que no se desborden */
@media (max-width: 576px) {
    .btn-filter-custom {
        min-width: 150px;
        padding: 10px 20px;
    }
    .btn-img {
        height: 25px;
    }
}