/* ...existing code... */

/* Fondo igual que portfolio para contact.html */
body.contact-bg {
    background-color: #F4F1ED;
    background-image: url('../images/fondoPiscina.webp');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: #222;
}

/* Fondo para portfolio en pantallas grandes: repetido horizontalmente, no se estira */
body.bg-\[\#F4F1ED\] {
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto;
    background-attachment: fixed;
}

/* Portfolio: estilos para las cajas */
.post-container {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07), 0 1.5px 6px 0 rgba(0,0,0,0.03);
    padding: 2rem 0.5rem 0.5rem 0.5rem; /* Mitad lateral e inferior */
    margin-bottom: 2rem;
    transition: box-shadow 0.3s, transform 0.3s;
}
.post-container:last-child {
    margin-bottom: 0;
}
.project-description {
    margin-bottom: 1rem;
}
.main-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.media-container {
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f4f1ed;
    margin-bottom: 0.375rem; /* Mitad del anterior */
}
.media-container:last-child {
    margin-bottom: 0;
}
.media-container img,
.media-container iframe {
    width: 100%;
    display: block;
    border-radius: 0.75rem;
    margin-bottom: 0;
}
.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 0.375rem; /* Mitad del anterior */
}
.responsive-iframe-container:last-child {
    margin-bottom: 0;
}
.responsive-iframe-container iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    margin-bottom: 0;
}

/* Espaciado entre elementos dentro de las cajas */
.post-container > .flex > .media-container,
.post-container > .flex > .responsive-iframe-container {
    margin-bottom: 0.1875rem; /* Mitad del anterior */
}
.post-container > .flex > .media-container:last-child,
.post-container > .flex > .responsive-iframe-container:last-child {
    margin-bottom: 0;
}

/* Animación de aparición */
.opacity-0 { opacity: 0 !important; }
.opacity-100 { opacity: 1 !important; }
.translate-y-8 { transform: translateY(2rem) !important; }
.translate-y-0 { transform: translateY(0) !important; }
.transition-all { transition: all 0.7s cubic-bezier(.4,0,.2,1); }
.duration-700 { transition-duration: 0.7s; }

/* Responsive: móviles */
@media (max-width: 767px) {
    body.bg-\[\#F4F1ED\] {
        background-image: url('../images/fondoPiscina.webp') !important;
        background-size: 100vw auto !important;
        background-position: top center !important;
        background-repeat: repeat-y !important;
        background-attachment: scroll !important;
    }
    .max-w-xl {
        padding-top: 10rem !important;
    }
    .post-container:first-child {
        margin-top: -42px !important;
    }
    .post-container {
        padding: 1rem 0.75rem 0.5rem 0.75rem;
        margin-bottom: 1rem;
    }
    .project-description {
        margin-bottom: 0.75rem;
    }
    .media-container,
    .responsive-iframe-container {
        margin-bottom: 0.25rem;
    }
    .media-container:last-child,
    .responsive-iframe-container:last-child {
        margin-bottom: 0;
    }
    .post-container > .flex > .media-container,
    .post-container > .flex > .responsive-iframe-container {
        margin-bottom: 0.125rem;
    }
    .post-container > .flex > .media-container:last-child,
    .post-container > .flex > .responsive-iframe-container:last-child {
        margin-bottom: 0;
    }
}
@media (max-width: 480px) {
    body.bg-\[\#F4F1ED\] {
        background-image: url('../images/fondoPiscina.webp') !important;
        background-size: 100vw auto !important;
        background-position: top center !important;
        background-repeat: repeat-y !important;
        background-attachment: scroll !important;
    }
    .post-container {
        padding: 0.75rem 0.5rem 0.25rem 0.5rem;
        margin-bottom: 0.75rem;
    }
    .project-description {
        margin-bottom: 0.5rem;
    }
    .media-container,
    .responsive-iframe-container {
        margin-bottom: 0.125rem;
    }
    .media-container:last-child,
    .responsive-iframe-container:last-child {
        margin-bottom: 0;
    }
    .post-container > .flex > .media-container,
    .post-container > .flex > .responsive-iframe-container {
        margin-bottom: 0.0625rem;
    }
    .post-container > .flex > .media-container:last-child,
    .post-container > .flex > .responsive-iframe-container:last-child {
        margin-bottom: 0;
    }
}

/* ...existing code... */