/* El contenido va en el flujo normal y el hero crece si no entra (min-height):
   con un título grande o mucho padding no se corta. La imagen es el fondo.
   El alto mínimo es el 80% de la pantalla, entre 420 y 800 px. */
.hero {
    min-height: clamp(420px, 80vh, 800px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: inherit;
    background: inherit;
}

.hero .hero-image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* La imagen de fondo cubre siempre todo el hero: se ignoran el ancho, la proporción, el radio,
   el borde y el espaciado que se le pongan desde el drawer (vienen en línea, por eso !important) */
.hero .hero-image-wrapper .element-image-wrapper {
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.hero .hero-image-wrapper img {
    display: block;
    width: 100% !important;
    height: 100%;
    aspect-ratio: auto !important;
    object-fit: cover;
    filter: brightness(0.5);
    border: 0 !important;
    border-radius: 0 !important;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    /* El hero ya centra el contenido en su alto: poco padding vertical. Los % se calculan
       sobre el ancho del contenedor (no vw: en el editor vw es la ventana, no el lienzo) */
    padding: clamp(24px, 5%, 48px) clamp(16px, 5%, 60px);
}

.hero-content .element-paragraph {
    font-size: 1.2rem;
    margin-bottom: 30px;
    font-weight: 300;
}

.hero-content .element-heading {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ── Responsive ── */
@container site (max-width: 1023px) {
    .hero-content .element-heading {
        font-size: 2.8rem;
    }
}

@container site (max-width: 767px) {
    .hero-content .element-heading {
        font-size: 2.5rem;
    }

    .hero-content .element-paragraph {
        font-size: 1rem;
    }
}