/* ─────────────────────────────────────────────────────────────────────────
   Hero Slider Pro — Frontend Styles
   ───────────────────────────────────────────────────────────────────────── */

.hsp-slider-wrap *,
.hsp-slider-wrap *::before,
.hsp-slider-wrap *::after { box-sizing: border-box; }

/* ── Contenedor externo: controla el ANCHO (full vs. encajonado) ────────
   Ambos modos rompen el padding/margen heredado del contenedor padre
   (Elementor, page builders, temas) extendiéndose a todo el ancho real
   de la ventana; el modo "boxed" luego centra un contenido más angosto
   dentro de ese espacio, para poder ser más ancho que su columna original
   sin quedar limitado por ella. */
.hsp-slider-outer {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    left: 0;
    right: 0;
}

/* Evita el scroll horizontal que 100vw puede causar cuando el navegador
   muestra una barra de scroll vertical (100vw no descuenta su ancho). */
body:has(.hsp-slider-outer) {
    overflow-x: hidden;
}

/* ── Modificador: encajonado ──────────────────────────────────────────
   Centra el slider con un ancho máximo configurable (--hsp-boxed-width),
   en vez de ocupar todo el ancho de la ventana. */
.hsp-slider-outer.hsp-width-boxed {
    display: flex;
    justify-content: center;
}
.hsp-slider-outer.hsp-width-boxed .hsp-slider-wrap {
    width: 100%;
    max-width: var(--hsp-boxed-width, 1200px);
}

/* ── Contenedor interno: el banner en sí (alto, fondo, overflow) ───────── */
.hsp-slider-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: var(--hsp-height, 90vh);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #111;
}

/* ── Track ────────────────────────────────────────────────────────────── */
.hsp-track { position: relative; width: 100%; height: 100%; }

/* ── Slide ────────────────────────────────────────────────────────────── */
.hsp-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s ease;
    z-index: 1;
    overflow: hidden; /* recorta el fondo cuando el zoom/animación lo agranda más allá del slide */
}
.hsp-slide.hsp-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ── Contenedor de la foto (imagen de fondo + overlay oscuro) ───────────
   Agrupa .hsp-bg y .hsp-overlay para poder darle un alto propio en móvil
   (slides con formulario) sin afectar el resto del layout. En escritorio/
   tablet se comporta igual que antes: cubre todo el slide. */
.hsp-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   EFECTOS DE IMAGEN DE FONDO
   ═══════════════════════════════════════════════════════════════════════ */

.hsp-bg {
    position: absolute;
    inset: 0; /* la imagen cubre exactamente el slide; el zoom se controla con transform, no con inset */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    transform-origin: center center;
    /* --hsp-bg-zoom viene del shortcode por slide: 1 = sin recorte extra (más "alejado"),
       valores más altos = más cerca. Todos los efectos parten de este mismo nivel de zoom. */
    transform: scale(var(--hsp-bg-zoom, 1.1));
}

/* ── Sin efecto ───────────────────────────────────────────────────────── */
.hsp-bg-effect-none {
    transition: none;
}

/* ── Parallax (controlado por JS en scroll) ───────────────────────────── */
.hsp-bg-effect-parallax {
    transform: scale(var(--hsp-bg-zoom, 1.1)) translateY(0px);
    transition: transform .15s linear;
}

/* ── Zoom In / Ken Burns ──────────────────────────────────────────────── */
@keyframes hsp-kenburns {
    0%   { transform: scale(var(--hsp-bg-zoom, 1.1))                    translate(0px, 0px); }
    25%  { transform: scale(calc(var(--hsp-bg-zoom, 1.1) * 1.04)) translate(-1%, .5%); }
    50%  { transform: scale(calc(var(--hsp-bg-zoom, 1.1) * 1.08)) translate(.5%, -1%); }
    75%  { transform: scale(calc(var(--hsp-bg-zoom, 1.1) * 1.05)) translate(1%, .5%); }
    100% { transform: scale(var(--hsp-bg-zoom, 1.1))                    translate(0px, 0px); }
}
.hsp-slide.hsp-active .hsp-bg-effect-zoom-in {
    animation: hsp-kenburns 14s ease-in-out infinite;
}

/* ── Drift (movimiento lateral suave) ────────────────────────────────── */
@keyframes hsp-drift {
    0%   { transform: scale(var(--hsp-bg-zoom, 1.1)) translateX(0px); }
    50%  { transform: scale(var(--hsp-bg-zoom, 1.1)) translateX(-3%); }
    100% { transform: scale(var(--hsp-bg-zoom, 1.1)) translateX(0px); }
}
.hsp-slide.hsp-active .hsp-bg-effect-drift {
    animation: hsp-drift 10s ease-in-out infinite;
}

/* ── Pulse (respiración suave) ───────────────────────────────────────── */
@keyframes hsp-pulse {
    0%   { transform: scale(var(--hsp-bg-zoom, 1.1)); }
    50%  { transform: scale(calc(var(--hsp-bg-zoom, 1.1) * 1.06)); }
    100% { transform: scale(var(--hsp-bg-zoom, 1.1)); }
}
.hsp-slide.hsp-active .hsp-bg-effect-pulse {
    animation: hsp-pulse 6s ease-in-out infinite;
}

/* ── Overlay oscuro ───────────────────────────────────────────────────── */
.hsp-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA DEL CONTENIDO
   ═══════════════════════════════════════════════════════════════════════ */

/* Keyframes base */
@keyframes hsp-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hsp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hsp-slide-in-left {
    from { opacity: 0; transform: translateX(-36px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* El cuadro en sí aparece primero */
.hsp-text-box,
.hsp-form-box {
    opacity: 0;
}
.hsp-slide.hsp-active .hsp-text-box,
.hsp-slide.hsp-active .hsp-form-box {
    animation: hsp-fade-in .5s ease forwards;
    animation-delay: .1s;
}

/* Cada elemento interior animado en cascada */
.hsp-text-box .hsp-title,
.hsp-text-box .hsp-desc,
.hsp-text-box .hsp-btn,
.hsp-form-box .wpcf7-form {
    opacity: 0;
}

/* Cuando el slide es activo, disparar animaciones con delay escalonado */
.hsp-slide.hsp-active .hsp-text-box .hsp-title {
    animation: hsp-fade-up .6s cubic-bezier(.22,.68,0,1.2) forwards;
    animation-delay: .35s;
}
.hsp-slide.hsp-active .hsp-text-box .hsp-desc {
    animation: hsp-fade-up .6s cubic-bezier(.22,.68,0,1.1) forwards;
    animation-delay: .58s;
}
.hsp-slide.hsp-active .hsp-text-box .hsp-btn {
    animation: hsp-fade-up .55s cubic-bezier(.22,.68,0,1.3) forwards;
    animation-delay: .78s;
}
.hsp-slide.hsp-active .hsp-form-box .wpcf7-form {
    animation: hsp-fade-up .6s ease forwards;
    animation-delay: .4s;
}

/* Reset al salir (importante para que la animación se repita al volver) */
.hsp-slide:not(.hsp-active) .hsp-text-box,
.hsp-slide:not(.hsp-active) .hsp-form-box {
    opacity: 0;
    animation: none;
}
.hsp-slide:not(.hsp-active) .hsp-title,
.hsp-slide:not(.hsp-active) .hsp-desc,
.hsp-slide:not(.hsp-active) .hsp-btn,
.hsp-slide:not(.hsp-active) .wpcf7-form {
    opacity: 0;
    animation: none;
}

/* ── Contenido posicionado ─────────────────────────────────────────────── */
.hsp-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 40px clamp(20px, 5vw, 80px);
}
.hsp-pos-left   { justify-content: flex-start; }
.hsp-pos-center { justify-content: center; }
.hsp-pos-right  { justify-content: flex-end; }

/* ── Cuadro de texto ──────────────────────────────────────────────────── */
.hsp-text-box {
    width: var(--box-width, 45%);
    max-width: 660px;
    background: var(--box-bg, rgba(255,255,255,0.92));
    border-radius: var(--box-radius, 16px);
    padding: clamp(28px, 4vw, 52px) clamp(24px, 3.5vw, 48px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
}

.hsp-title {
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 .65em;
    letter-spacing: -.02em;
}
.hsp-desc {
    font-size: clamp(.9rem, 1.4vw, 1.05rem);
    line-height: 1.65;
    margin: 0 0 1.6em;
}

/* ── Botón ────────────────────────────────────────────────────────────── */
.hsp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .75em 1.6em;
    border-radius: 8px;
    font-weight: 700;
    font-size: clamp(.85rem, 1.2vw, 1rem);
    text-decoration: none;
    transition: opacity .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    cursor: pointer;
}
.hsp-btn:hover {
    opacity: .88;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.24);
    text-decoration: none;
}

/* ── Formulario ───────────────────────────────────────────────────────── */
.hsp-form-box {
    width: var(--box-width, 40%);
    max-width: 560px;
    background: var(--box-bg, rgba(255,255,255,0.95));
    border-radius: var(--box-radius, 16px);
    padding: clamp(24px, 3.5vw, 44px) clamp(20px, 3vw, 40px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
}
.hsp-form-box .wpcf7-form { margin: 0; }
.hsp-form-box .wpcf7-form p { margin: 0 0 .75em; }

/* ── Color de las etiquetas (labels) del formulario ─────────────────────
   --form-label-color viene del shortcode por slide. Cubre tanto el
   template clásico de CF7 (texto envuelto en <label>) como formularios
   que usan <p> como etiqueta directa del campo. */
.hsp-form-box .wpcf7-form label {
    color: var(--form-label-color, #333333);
}

.hsp-form-box .wpcf7-form input:not([type="submit"]),
.hsp-form-box .wpcf7-form textarea,
.hsp-form-box .wpcf7-form select {
    width: 100%; padding: .6em .85em;
    border: 1px solid #d1d5db; border-radius: 6px;
    font-size: .95rem; background: #fff;
    transition: border-color .2s;
}
.hsp-form-box .wpcf7-form input:focus,
.hsp-form-box .wpcf7-form textarea:focus {
    outline: none; border-color: #1e4fa3;
    box-shadow: 0 0 0 3px rgba(30,79,163,.15);
}
.hsp-form-box .wpcf7-form input[type="submit"] {
    background: #1e4fa3; color: #fff; border: none;
    border-radius: 6px; padding: .7em 1.8em;
    font-size: .95rem; font-weight: 700; cursor: pointer;
    transition: background .2s, transform .2s;
}
.hsp-form-box .wpcf7-form input[type="submit"]:hover {
    background: #163b80; transform: translateY(-1px);
}

/* ── Controles de navegación ──────────────────────────────────────────── */
.hsp-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255,255,255,.4); border-radius: 50%;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s, transform .2s; color: #fff;
}
.hsp-nav:hover { background: rgba(255,255,255,.32); transform: translateY(-50%) scale(1.08); }
.hsp-nav svg { width: 22px; height: 22px; }
.hsp-prev { left: clamp(10px, 2vw, 28px); }
.hsp-next { right: clamp(10px, 2vw, 28px); }

/* ── Puntos indicadores ───────────────────────────────────────────────── */
.hsp-dots {
    position: absolute; bottom: 22px; left: 50%;
    transform: translateX(-50%); z-index: 10;
    display: flex; gap: 8px; align-items: center;
}
.hsp-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,.45); border: none;
    cursor: pointer; padding: 0;
    transition: background .25s, transform .25s;
}
.hsp-dot-active { background: #fff; transform: scale(1.35); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hsp-text-box, .hsp-form-box {
        width: min(var(--box-width, 45%), 80%) !important;
        max-width: none;
    }
}
@media (max-width: 600px) {
    .hsp-slider-wrap { height: max(var(--hsp-height, 90vh), 520px); }
    .hsp-content { padding: 24px 16px; align-items: flex-end; padding-bottom: 64px; }
    .hsp-pos-left, .hsp-pos-center, .hsp-pos-right { justify-content: center; }
    .hsp-text-box, .hsp-form-box { width: 100% !important; max-width: 100%; }
    .hsp-nav { width: 38px; height: 38px; }
    .hsp-nav svg { width: 18px; height: 18px; }
    .hsp-prev { left: 8px; }
    .hsp-next { right: 8px; }

    /* ── Slides con formulario en móvil: la foto NO se tapa ─────────────
       En vez del layout de "tarjeta flotando sobre la imagen" (igual que
       los slides de texto), el formulario se apila DEBAJO de la foto en
       flujo normal. La foto se ve completa arriba y el slide crece en
       alto lo que haga falta para el formulario. Tablet y escritorio no
       se ven afectados por esta regla (solo aplica bajo 600px). */
    .hsp-slide.hsp-slide-type-form {
        position: relative;
        inset: auto;
        display: block;
        height: auto;
        overflow: visible;
    }
    .hsp-slide.hsp-slide-type-form:not(.hsp-active) {
        display: none; /* evita que los slides inactivos sumen alto extra al apilarse */
    }
    .hsp-slide-type-form .hsp-photo {
        position: relative;
        inset: auto;
        width: 100%;
        height: 260px; /* alto fijo de la foto; el overlay queda confinado a esta zona */
        overflow: hidden; /* recorta el zoom/efecto de la imagen dentro de este alto fijo */
    }
    .hsp-slide-type-form .hsp-content {
        position: relative;
        display: block;
        height: auto;
        padding: 20px 16px 28px;
    }
    .hsp-slide-type-form .hsp-form-box {
        margin: 0 auto;
    }

    /* El wrapper crece para acomodar foto + formulario apilados, y deja
       de recortar contenido; los controles de navegación/puntos se
       ocultan mientras el slide activo es de formulario, ya que quedarían
       mal ubicados sobre un contenedor de alto variable. */
    .hsp-slider-wrap:has(.hsp-slide.hsp-active.hsp-slide-type-form) {
        height: auto;
        overflow: visible;
    }
    .hsp-slider-wrap:has(.hsp-slide.hsp-active.hsp-slide-type-form) .hsp-nav,
    .hsp-slider-wrap:has(.hsp-slide.hsp-active.hsp-slide-type-form) .hsp-dots,
    .hsp-slider-wrap:has(.hsp-slide.hsp-active.hsp-slide-type-form) .hsp-divider {
        display: none;
    }
}

/* ── Reducir movimiento ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hsp-slide, .hsp-bg { transition: none !important; animation: none !important; }
    .hsp-text-box, .hsp-form-box,
    .hsp-title, .hsp-desc, .hsp-btn, .wpcf7-form { opacity: 1 !important; animation: none !important; }
    .hsp-btn:hover, .hsp-nav:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SEPARADOR DE FORMA (DIVIDER)
   ═══════════════════════════════════════════════════════════════════════ */
.hsp-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 4; /* encima de slides, overlay y botones de nav */
    line-height: 0;
    pointer-events: none; /* no bloquea clics en los controles */
}
.hsp-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Título del formulario ────────────────────────────────────────────────── */
.hsp-form-title {
    margin: 0 0 .75em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    /* color, font-size y font-family vienen como estilos inline desde el shortcode */
}

/* Animar el título igual que el contenido del slide de texto */
.hsp-slide:not(.hsp-active) .hsp-form-title {
    opacity: 0;
    animation: none;
}
.hsp-slide.hsp-active .hsp-form-box .hsp-form-title {
    opacity: 0;
    animation: hsp-fade-up .6s cubic-bezier(.22,.68,0,1.2) forwards;
    animation-delay: .3s;
}