/**
 * Hero Option 04 — Immersive (DESKTOP)
 * Migrado desde assets/css/hero-option04.css (reglas base, sin los bloques
 * @media que ahora son mobile/hero.css).
 */
.hero-option04 {
    position: relative;
    min-height: 94vh;
    display: flex;
    align-items: center;
    overflow: hidden; /* máscara del área visible del Hero, no recorte automático: ver comentario de abajo */
}

.hero04-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden; /* viewport/máscara real de la foto -- ver hero-option04-desktop.js */
}

/* Encuadre manual: el administrador decide el recorte desde el panel
   (slider de zoom + arrastre), no un cálculo automático -- ver
   pintarCampoEncuadre() en admin/pagina/pagina.js y cómo se arman estas
   variables en hero-option04-desktop.php.

   CORRECCIÓN (reporte real del usuario con captura, 2026-09-08, turno 2):
   width/height/transform de ESTA regla son sólo el FALLBACK para el
   instante antes de que corra hero-option04-desktop.js (o si JS está
   deshabilitado) -- mismo aspecto de siempre (object-fit:cover +
   object-position:top = llena el Hero, ancla arriba, centrado horizontal).
   La geometría real que ve el administrador la calcula ese script a partir
   del tamaño NATURAL de la foto, porque object-fit:cover recorta ANTES de
   cualquier transform: un scale(<1) sobre esta regla sólo achica ese
   recorte ya fijo (dejaba ver fondo vacío alrededor, no revelaba más foto
   real -- el bug reportado). El script reemplaza width/height/left/top/
   transform por su propio cálculo (imagen sin recortar, del tamaño real
   necesario para cubrir el Hero a escala 1, con el mismo zoom aplicado
   después) y dispara con cada cambio de --hero04-img-scale/-x/-y (ver
   aplicarEstado() en admin/pagina/pagina_preview.php). */
.hero04-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: translate(var(--hero04-img-x, 0%), var(--hero04-img-y, 0%)) scale(var(--hero04-img-scale, 1));
    transform-origin: center;
}

.hero04-content-wrap {
    position: relative;
    z-index: 1;
    padding-block: 100px 60px;
}

.hero04-content { max-width: 680px; }
.hero04-content h1 { margin: 16px 0 20px; }
.hero04-content .text-lead { margin-bottom: 32px; }

.hero04-stats {
    margin-top: clamp(48px, 8vw, 96px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 220px));
    gap: 20px;
}

.hero04-stat {
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}