/* =========================
   IMAGENES
========================= */

.pasta_bechamel {
    float: left;                           /* hace que la imagen flote a la izquierda y el texto la rodee por la derecha */
    width: 400px;
    height: 400px;
    object-fit: cover;                     /* escala la imagen para llenar el área sin deformarla, recortando lo que sobre */
    object-position: 0% 115%;             /* ajusta qué parte se muestra; 0% horizontal, 115% vertical (más abajo de lo normal) */
    padding-right: 50px;                   /* espacio entre la imagen y el texto que la rodea */
}

.galletas_chocolate {
    float: left;
    width: 400px;
    height: 500px;
    object-fit: cover;
    object-position: 55% 0%;              /* muestra el centro-derecha de la imagen, desde arriba */
    padding-right: 50px;
}

.ponche_crema {
    float: right;                          /* la imagen flota a la derecha y el texto la rodea por la izquierda */
    height: 350px;
    object-fit: cover;
    object-position: 20% 0%;              /* muestra ligeramente a la izquierda del centro, desde arriba */
    padding-right: 50px;
}

.torta_chocolate {
    float: right;
    height: 320px;
    object-fit: cover;
    object-position: 0% 0%;              /* muestra la esquina superior izquierda de la imagen */
    padding-right: 50px;
}

/* =========================
   BOTONES MENUCITO CON TABS
========================= */

/* Contenedor de los botones que cambian la pestaña activa */
.tab_botones {
    display: flex;                         /* acomoda los botones en fila */
    gap: 8px;                              /* espacio entre cada botón */
    margin-bottom: 10px;                   /* espacio entre los botones y el contenido de la pestaña */
}

/* Estilo base de cada botón de pestaña */
.tab_btn {
    background: #e81123;
    color: white;
    border: none;                          /* elimina el borde por defecto de los botones */
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;                       /* muestra el cursor de mano */
    font-family: "NotoSans", sans-serif;   /* los <button> no heredan la fuente automáticamente, hay que declararla */
    transition: background-color 0.3s ease;
}

    .tab_btn:hover {
        background-color: #9e2722;
    }

    /* Estilo del botón actualmente seleccionado */
    .tab_btn.activo {
        background-color: #9e2722;
        outline: 2px solid white;          /* borde blanco para indicar visualmente cuál está activo */
    }

/* Por defecto todos los contenidos de pestaña están ocultos */
.tab_contenido {
    display: none;
}

    /* Solo el contenido con la clase "activo" se muestra */
    /* Esta clase se agrega y quita con JavaScript al hacer click en los botones */
    .tab_contenido.activo {
        display: block;
    }

/* =========================
   RESPONSIVO
   Ajustes para pantallas de 768px o menos
========================= */

@media (max-width: 768px) {

    /* Las imágenes de recetas dejan de flotar y se apilan con el texto */
    /* Sin esto la imagen flotante hace que el texto quede muy apretado en pantallas pequeñas */
    .ponche_crema,
    .galletas_chocolate,
    .torta_chocolate {
        float: none; /* elimina el float para que la imagen ocupe su propia línea */
        display: block;
        width: 100%; /* ocupa todo el ancho disponible */
        height: 250px; /* altura fija reducida para móvil */
        padding-right: 0; /* elimina el padding derecho que separaba la imagen del texto */
        margin-bottom: 20px; /* espacio debajo de la imagen antes del texto */
    }
    .pasta_bechamel {
        float: none; /* elimina el float para que la imagen ocupe su propia línea */
        display: block;
        width: 100%; /* ocupa todo el ancho disponible */
        height: 250px; /* altura fija reducida para móvil */
        padding-right: 0; /* elimina el padding derecho que separaba la imagen del texto */
        margin-bottom: 20px;
        object-position: 0% 75%;
    }
    /* Los botones de tabs se envuelven en varias filas si no caben en una sola línea */
    .tab_botones {
        flex-wrap: wrap;                           /* permite que los botones salten a la siguiente línea */
    }

    /* Los botones de tabs ocupan el espacio proporcional disponible */
    .tab_btn {
        flex: 1;                                   /* cada botón ocupa el mismo espacio proporcional */
        text-align: center;
    }

}