/* Bloque hero-estudio — media pantalla de foto, media de color con un vídeo.
 *
 * La foto va a sangre por su mitad y el panel de color por la otra. En móvil
 * se apilan: primero el panel, que es el que lleva el mensaje, y la foto debajo.
 */

.bl-heroest { width: 100%; overflow: hidden; }
.bl-heroest-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 50vh; }
.bl-heroest[data-altura="completa"] .bl-heroest-grid { min-height: 100vh; }
.bl-heroest[data-altura="auto"]     .bl-heroest-grid { min-height: 0; }

/* ── La mitad de la foto ───────────────────────────────────────────── */
.bl-heroest-foto { position: relative; background: #e9e6e1; min-height: 320px; }
.bl-heroest-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-heroest-foto.es-hueco::after {
    content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(0,0,0,.28); border-radius: 14px;
}

/* ── La mitad de color ─────────────────────────────────────────────── */
.bl-heroest-panel {
    display: flex; align-items: center; gap: clamp(24px, 3.4vw, 56px);
    padding: clamp(36px, 5vw, 88px) clamp(24px, 4vw, 72px);
}
.bl-heroest-panel.sin-video { justify-content: center; text-align: center; }

.bl-heroest-video { flex: 0 0 auto; width: min(260px, 38%); }
.bl-heroest[data-forma="cuadrado"] .bl-heroest-video { width: min(320px, 46%); }
.bl-heroest[data-forma="apaisado"] .bl-heroest-video { width: min(400px, 56%); }
.bl-heroest-video-marco {
    border-radius: 22px; overflow: hidden; background: #fff;
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
    aspect-ratio: 9 / 16;
}
.bl-heroest[data-forma="cuadrado"] .bl-heroest-video-marco { aspect-ratio: 1; }
.bl-heroest[data-forma="apaisado"] .bl-heroest-video-marco { aspect-ratio: 16 / 9; }
.bl-heroest-video-marco video,
.bl-heroest-video-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-heroest-video-hueco {
    width: 100%; height: 100%; display: grid; place-items: center;
    background: rgba(255,255,255,.55); border: 1px dashed rgba(0,0,0,.28);
    font-size: 13px; color: #7a7a7a; text-align: center; padding: 12px; line-height: 1.4;
}

.bl-heroest-textos { flex: 1 1 auto; min-width: 0; }
.bl-heroest-antetitulo {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: clamp(13px, 1vw, 15px); letter-spacing: .04em; margin: 0 0 14px; opacity: .8;
}
.bl-heroest-antetitulo::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none;
}
.bl-heroest-titulo { font-size: clamp(26px, 2.9vw, 44px); line-height: 1.15; font-weight: 300; margin: 0 0 16px; }
.bl-heroest-titulo strong { font-weight: 700; }
.bl-heroest-texto { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; margin: 0; }
.bl-heroest-texto p { margin: 0 0 .8em; }
.bl-heroest-texto p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .bl-heroest-grid { grid-template-columns: 1fr; min-height: 0; }
    /* El panel primero: lleva el mensaje y el vídeo. */
    .bl-heroest-panel { order: -1; flex-direction: column; text-align: center; }
    .bl-heroest-video { width: min(240px, 70%); }
    .bl-heroest-foto { min-height: 60vw; }
    .bl-heroest-antetitulo { justify-content: center; }
}
/* Quien pide menos movimiento no ve el vídeo reproducirse solo. */
@media (prefers-reduced-motion: reduce) {
    .bl-heroest-video-marco video { display: none; }
}