/* =========================================================
   INITIO AG - Página "Ensayos de Productos"
   (se carga después de estilo-index.css y estilo-servicio.css)
   ========================================================= */

/* Portada: foto de fondo */
.pagina-ensayos .hero-servicio {
    background-image: url("../imagenes/servicio-ensayos.jpg");
}

/* =========================================================
   QUÉ INCLUYE - columna visual
   ========================================================= */
/* Columna visual: panel con la trampa cromática y foto debajo */
.incluye__visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.incluye__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    border-radius: var(--radio);
    background: radial-gradient(circle at 30% 20%, #F0F6F2 0%, var(--color-verde-suave) 60%, #D9EADF 100%);
}

.incluye__panel img {
    width: 100%;
    max-width: 420px;
    transition: transform 0.5s ease-out;
}

.incluye__panel:hover img {
    transform: translateY(-6px) rotate(-1.5deg);
}

.incluye__foto {
    margin: 0;
    height: 260px;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
}

.incluye__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .incluye__visual {
        flex-direction: row;
    }

    .incluye__panel,
    .incluye__foto {
        flex: 1;
        height: auto;
        min-height: 260px;
    }

}

@media (max-width: 767px) {
    .incluye__visual {
        flex-direction: column;
    }

    .incluye__panel {
        padding: 28px 20px;
    }

    .incluye__foto {
        height: 220px;
        min-height: 0;
    }

}