/* ============================================================
   Hero Video Autoplay — Clínica Danas
   Widget: clinica_danas_video_autoplay_hero
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ── Wrapper ─────────────────────────────────────────────── */
.dav-wrapper {
    position: relative;
    width: 100%;
    height: 80vh;           /* Default; override via Elementor slider */
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0c0c0c; /* Fallback si el video aún no cargó */
}

/* ── Video de Fondo ──────────────────────────────────────── */
.dav-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    /* Evita parpadeo en Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ── Overlay ─────────────────────────────────────────────── */
.dav-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    pointer-events: none;
}

/* ── Contenido ───────────────────────────────────────────── */
.dav-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    width: 90%;
    text-align: center;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* ── Etiqueta Superior (Label) ───────────────────────────── */
/*
   clamp fluido: 0.65rem @ 320px → 1.5rem @ 1200px
   slope = (24 - 10.4) / (1200 - 320) = 0.01545  → 1.55vw
   intercept = 10.4 - (0.01545 × 320) = 5.46px    → 0.34rem
*/
.dav-label {
    font-family: "Inter", sans-serif;
    font-size: clamp(0.65rem, 1.55vw + 0.34rem, 1.5rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: clamp(2px, 0.6vw + 0.5px, 6px); /* letter-spacing también fluido */
    color: #FFFFFF;
    margin: 0;
    line-height: 1.4;
    text-wrap: balance;
}

/* ── Título Principal ────────────────────────────────────── */
/*
   clamp fluido: 1.3rem @ 320px → 2.5rem @ 1200px
   slope = (40 - 20.8) / (1200 - 320) = 0.02182  → 2.18vw
   intercept = 20.8 - (0.02182 × 320) = 13.82px  → 0.86rem
*/
.dav-title {
    font-family: "Inter", sans-serif;
    font-size: clamp(1.3rem, 2.18vw + 0.86rem, 2.5rem);
    font-weight: 400;
    line-height: 1.35; /* unitless: se escala automáticamente con el clamp */
    color: #FFFFFF;
    margin: 0;
    text-align: center;
    text-wrap: balance;
}

/* ── Botón CTA ───────────────────────────────────────────── */
/* Los estilos del botón los provee el CSS compartido         */
/* 'clinica-danas-button' → assets/css/button-widget.css      */
/* La clase usada es: .danas-btn                              */

/* ── Responsive: Tablet ──────────────────────────────────── */
/* font-size y line-height del label y título son fluidos con clamp()
   — no se necesitan overrides estáticos en este breakpoint. */
@media (max-width: 1024px) {
    /* reservado para ajustes de layout si fueran necesarios */
}

/* ── Responsive: Móvil ───────────────────────────────────── */
/* font-size del label y título: el clamp() ya maneja el rango 320–1200px.
   Solo ajustamos spacing y dimensiones de layout. */
@media (max-width: 767px) {
    .dav-wrapper {
        min-height: 500px;
    }

    .dav-content {
        gap: 1rem;
        padding: 1.5rem 1rem;
        width: 92%; /* ligeramente más ancho en móvil para aprovechar el espacio */
    }
}