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

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

/* ── Contenedor principal ─────────────────────────────────────────────── */
.hsp-slider-wrap {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    height: var(--hsp-height, 90vh);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #111;
    /* Técnica "full-bleed": rompe cualquier padding/margen heredado de
       contenedores padre (Elementor, page builders, temas) y se extiende
       a todo el ancho real de la ventana, sin importar dónde esté anidado. */
    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-wrap) {
    overflow-x: hidden;
}

/* ── 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; /* evita que el inset negativo del fondo se desborde y muestre franjas blancas */
}
.hsp-slide.hsp-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

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

.hsp-bg {
    position: absolute;
    inset: -8% -2%; /* margen extra para los efectos de movimiento, sin desbordar visualmente gracias al overflow:hidden del padre */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    transform-origin: center center;
}

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

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

/* ── Zoom In / Ken Burns ──────────────────────────────────────────────── */
@keyframes hsp-kenburns {
    0%   { transform: scale(1)    translate(0px, 0px); }
    25%  { transform: scale(1.04) translate(-1%, .5%); }
    50%  { transform: scale(1.08) translate(.5%, -1%); }
    75%  { transform: scale(1.05) translate(1%, .5%); }
    100% { transform: scale(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(1.12) translateX(0px); }
    50%  { transform: scale(1.12) translateX(-3%); }
    100% { transform: scale(1.12) 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(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(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; }
.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; }
}

/* ── 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; }
}