/* Contenedor del papiro y su contenido */
.pfp-scroll-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Imagen del papiro */
.pfp-background {
    height: 105vh;
    width: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Ajusta la imagen dentro del contenedor */
     pointer-events: none;
}

/* Contenedor principal del texto y la imagen */
.pfp-scroll-text-container {
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1023px; /* Ancho para el texto, ajusta si es necesario */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todos los elementos internos horizontalmente */
    text-align: center;
    z-index: 2;
}

/* Título de la receta */
.title-pfp-recipe {
    font-size: 1.3rem;
    font-weight: bold;
    color: black;
    text-shadow: none;
    padding-bottom:15px;
    line-height: 1.2;
}

/* Contenedor para el texto de la receta y el botón */
.content-pfp-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Espacio entre el texto y el botón */
    margin-bottom: 2rem;
}

/* Texto de la receta */
.content-pfp {
    max-width: 80%; /* Para que no ocupe todo el ancho */
    text-align: center; /* Centra el texto */
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom:35px;
    color: #444;
}

/* Contenedor para la imagen y el botón de copiar */
.image-pfp-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding-top:40px
}

/* Estilos de la imagen de ejemplo */
.pfp-example-image {
    width: 200px; /* Tamaño de la imagen, ajústalo como quieras */
    height: auto;
    border-radius: 10px;
}

/* Estilos para los botones de copiar */
.copy-image-button {
    min-height: 60px; 
    min-width:180px; 
    font-size: 1.2rem;
    margin:10px;
    background-color: #00d1b2;
    border: 2px solid #444;
    color: #444;
    border-radius: 15px;
    transition: transform 0.2s ease-in-out, background-color 0.3s, color 0.3s;
}

.copy-image-button:hover {
    cursor: pointer;
    background-color: #00d1b2;
    transform: scale(1.1);
    color: white;
    filter: drop-shadow(0 0 5px #ffdcbb) drop-shadow(0 0 15px #ffdcbb) drop-shadow(0 0 45px #ffdcbb) drop-shadow(0 0 160px #ffbd24); /* Resplandor al pasar el ratón */
}

.copy-button2 {
    min-height: 60px; 
    min-width: 180px; 
     margin:10px;
    font-size: 1.2rem;
    background-color: #00d1b2;
    border: 2px solid #444;
    color: #444;
    border-radius: 15px;
    transition: transform 0.2s ease-in-out, background-color 0.3s, color 0.3s;
}

.copy-button2:hover {
    cursor: pointer;
    background-color: #00d1b2;
    transform: scale(1.1);
    color: white;
    filter: drop-shadow(0 0 5px #ffdcbb) drop-shadow(0 0 15px #ffdcbb) drop-shadow(0 0 45px #ffdcbb) drop-shadow(0 0 160px #ffbd24); /* Resplandor al pasar el ratón */
}






/*THUMBS*/

/* Contenedor de la grilla */
.pfp-grid-container {
    max-width:1440px;
    margin:auto;

}

/* Contenedor individual de cada item de la grilla */
.pfp-item {
    position: relative;
    margin: -7rem; /* Reduce el espacio alrededor de cada imagen */
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

/* Wrapper para la imagen y el marco */
.pfp-item-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Truco para mantener la relación de aspecto 1:1 */
}

/* Imagen de PFP */
.pfp-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Marco que se superpone a la imagen */
.pfp-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66%; /* Tamaño del marco para que el borde se vea bien */
    height: 66%;
    z-index: 2;
    pointer-events: none; /* Permite hacer clic en los elementos de abajo */
    transition: transform 0.3s ease-in-out;
}

/* Contenido que aparece al hacer hover */
.pfp-hover-content {
    position: absolute;
    top: 18%;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 3;
}

/* Contenedor de los botones */
.pfp-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* EFECTOS AL HACER HOVER */
.pfp-item:hover .pfp-image {
    transform: translate(-50%, -50%) scale(1.15); /* Agranda la imagen */
    filter: drop-shadow(0 0 5px #ffdcbb) drop-shadow(0 0 15px #ffdcbb) drop-shadow(0 0 45px #ffdcbb) drop-shadow(0 0 160px #ffbd24); 
}

.pfp-item:hover .pfp-frame {
    transform: translate(-50%, -50%) scale(1.04); /* Agranda el marco */
    
}

.pfp-item:hover .pfp-hover-content {
    opacity: 1; /* Muestra el contenido */
    visibility: visible;
    
}

.download-button{
    border-radius: 30px / 30px;
    color: #ffffff;
    font-family: "Cinzel", serif;
    background-color: #00b9b9a8;
    padding:20px;
    filter: drop-shadow(0 0 5px #00c0b6)
}


@media (max-width: 1023px) {

.pfp-scroll-wrapper {
    left: 50%;
    transform: translate(-50%, -2%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170%;
    min-width:120%;
}

/* Imagen del papiro */
.pfp-background {
    height: 105vh;
    width: auto;
    min-width:1300px;
    display: block;
    margin: 0 auto;
    object-fit: contain; /* Ajusta la imagen dentro del contenedor */
}

    .pfp-scroll-text-container {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%; /* Ancho para el texto, ajusta si es necesario */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra todos los elementos internos horizontalmente */
        text-align: center;
        z-index: 2;
    }

    /* Texto de la receta */
    .content-pfp {
        max-width: 90%; /* Para que no ocupe todo el ancho */
        text-align: center; /* Centra el texto */
        font-size: 1.3vh;
        line-height: 1.5;
        padding-bottom:35px;
        color: #444;
    }

    /*Thumbs*/

    /* Contenedor de la grilla */
.pfp-grid-container {
    margin-top:100px;
    margin-left:-10%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    width:120%;
    gap: 270px;
}

.pfp-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.pfp-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Marco que se superpone a la imagen */
.pfp-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* Tamaño del marco para que el borde se vea bien */
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Permite hacer clic en los elementos de abajo */
    transition: transform 0.3s ease-in-out;
}



}