/* Landing "Movimiento Bisí" - Figma v2 */

.bisi-page {
    --bisi-verde: #079A6A;
    --bisi-verde-hover: #06845B;
    --bisi-lima: #8BD65C;
    --bisi-gris: #6E6E6E;
    --bisi-titulo: #2D2D2D;
    --bisi-oscuro: #0B0D0C;
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--bisi-titulo);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
.bisi-page *, .bisi-page *::before, .bisi-page *::after { box-sizing: border-box; }
.bisi-page img { max-width: 100%; }

/* ---------- Tipografía común ---------- */
.bisi-page .hl { color: var(--bisi-lima); }
.bisi-page .bisi-eyebrow {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 14px;
    color: var(--bisi-verde);
    margin: 0 0 12px;
}
.bisi-page .bisi-titulo {
    font-weight: 700;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.1;
    color: var(--bisi-titulo);
    margin: 0 0 18px;
}
.bisi-page .bisi-texto {
    font-size: 17px;
    line-height: 1.55;
    color: var(--bisi-gris);
    margin: 0 0 16px;
}
.bisi-page .bisi-texto .hl { color: var(--bisi-verde); font-weight: 700; }
.bisi-page .bisi-playlist .bisi-texto .hl { color: var(--bisi-lima); }
.bisi-page .bisi-divider {
    position: relative;
    display: block;
    width: 150px;
    height: 2px;
    background: var(--bisi-lima);
    margin: 18px 0 26px;
}
.bisi-page .bisi-divider::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bisi-lima);
}

/* ---------- Botones ---------- */
.bisi-page .bisi-btn {
    display: inline-block;
    padding: 16px 38px;
    border-radius: 999px;
    background: var(--bisi-verde);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    transition: background .2s ease, transform .2s ease;
}
.bisi-page .bisi-btn:hover { background: var(--bisi-verde-hover); color: #fff; transform: translateY(-1px); text-decoration: none; }
.bisi-page .bisi-btn--spotify { background: var(--bisi-lima); color: var(--bisi-oscuro); }
.bisi-page .bisi-btn--spotify:hover { background: #7BC74D; color: var(--bisi-oscuro); }

/* ---------- Nav ---------- */
.bisi-page .bisi-nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    padding: 28px 44px;
}
.bisi-page .bisi-nav__logo img { height: 46px; }

/* ---------- Hero ---------- */
.bisi-page .bisi-hero { position: relative; background: var(--bisi-oscuro); }
.bisi-page .bisi-hero__slide {
    position: relative;
    height: clamp(560px, 48vw, 780px);
    background-size: cover;
    background-position: center;
    display: flex !important;
    align-items: center;
}
.bisi-page .bisi-hero__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 70%);
}
.bisi-page .bisi-hero__content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 90px 6vw 40px 10vw;
}
@media (min-width: 992px) {
    .bisi-page .bisi-hero__title { white-space: nowrap; }
}
.bisi-page .bisi-hero__eyebrow {
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 600;
    margin: 0;
}
.bisi-page .bisi-hero__title {
    font-weight: 900;
    font-size: clamp(56px, 7vw, 112px);
    line-height: .95;
    letter-spacing: -.02em;
    color: #fff;
    margin: 4px 0 0;
}
.bisi-page .bisi-hero__title--xl { font-size: clamp(90px, 12vw, 180px); }
.bisi-page .bisi-hero__texto {
    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 600;
    max-width: 480px;
    margin: 0 0 30px;
}
.bisi-page .bisi-hero__sponsor {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--bisi-lima);
    margin: 28px 0 0;
}
.bisi-page .bisi-hero .slick-dots {
    position: absolute;
    right: 6%;
    bottom: 34px;
    z-index: 3;
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bisi-page .bisi-hero .slick-dots li { margin: 0; }
.bisi-page .bisi-hero .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    border: 0;
    background: rgba(255, 255, 255, .6);
    font-size: 0;
    padding: 0;
    cursor: pointer;
    transition: width .2s ease;
}
.bisi-page .bisi-hero .slick-dots li.slick-active button { background: var(--bisi-verde); width: 30px; }
.bisi-page .bisi-hero .slick-arrow { display: none !important; }

/* ---------- Movimiento Bisí / Hábitos (imagen de fondo + texto encima) ---------- */
.bisi-page .bisi-intro__media,
.bisi-page .bisi-habitos__media {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}
.bisi-page .bisi-intro__media { aspect-ratio: 1440 / 765; background-color: #F2F4F0; }
.bisi-page .bisi-habitos__media { aspect-ratio: 1440 / 685; background-color: #fff; }
.bisi-page .bisi-intro__content,
.bisi-page .bisi-habitos__content {
    width: 100%;
    padding: 40px 8% 40px 49%;
}
.bisi-page .bisi-intro .bisi-eyebrow {
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(28px, 3vw, 44px);
    margin: 0;
}
.bisi-page .bisi-titulo--xl {
    font-weight: 900;
    font-size: clamp(72px, 9vw, 140px);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--bisi-verde);
    margin: 0;
}
.bisi-page .bisi-intro .bisi-texto { max-width: 470px; }

/* ---------- Hábitos ---------- */
.bisi-page .bisi-habitos__lista { list-style: none; margin: 26px 0 0; padding: 0; max-width: 480px; }
.bisi-page .bisi-habito { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.bisi-page .bisi-habito__icono { flex: 0 0 58px; }
.bisi-page .bisi-habito__icono img { width: 58px; height: 58px; display: block; }
.bisi-page .bisi-habito h4 { font-size: 17px; font-weight: 600; color: var(--bisi-titulo); margin: 4px 0 6px; }
.bisi-page .bisi-habito p { font-size: 14px; line-height: 1.5; color: var(--bisi-gris); margin: 0; }

/* ---------- Sorteo ---------- */
.bisi-page .bisi-sorteo {
    padding: 100px 0;
    background: linear-gradient(120deg, #EEF9EF 0%, #DCF1E3 55%, #E6F7E2 100%);
}
.bisi-page .bisi-premios__titulo {
    display: flex;
    align-items: center;
    gap: 16px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: var(--bisi-verde);
    margin: 34px 0 10px;
}
.bisi-page .bisi-premios__titulo .bisi-divider { flex: 1; width: auto; margin: 0; }
.bisi-page .bisi-premios__img { display: block; width: 100%; max-width: 520px; }

.bisi-page .bisi-sorteo__card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 16px 16px 0 #CDEFC3, 0 20px 40px rgba(7, 154, 106, .08);
    overflow: hidden;
}
.bisi-page .bisi-stepper {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 22px 32px;
    border-bottom: 1px solid #E6E6E6;
}
.bisi-page .bisi-stepper li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #9A9A9A;
}
.bisi-page .bisi-stepper li::after { content: '\203A'; margin-left: auto; font-size: 22px; color: var(--bisi-titulo); }
.bisi-page .bisi-stepper li span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E4E4E4;
    color: #8A8A8A;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bisi-page .bisi-stepper li.active { color: var(--bisi-titulo); }
.bisi-page .bisi-stepper li.active span { background: var(--bisi-lima); color: #fff; }

.bisi-page .bisi-sorteo__head { text-align: center; padding: 30px 40px 6px; }
.bisi-page .bisi-sorteo__head h3 { font-size: 26px; font-weight: 600; color: var(--bisi-titulo); margin: 0 0 10px; }
.bisi-page .bisi-sorteo__head p { font-size: 14px; color: var(--bisi-gris); margin: 0; }

/* Formulario dinámico (markup de helper_graph_formularios) */
.bisi-page .bisi-sorteo__form { padding: 10px 40px 34px; }
.bisi-page .bisi-sorteo__form form > .row:first-of-type,
.bisi-page .bisi-sorteo__form hr.horizontal-rule { display: none; }
.bisi-page .bisi-sorteo__form fieldset { border: 0; margin: 0; padding: 0; }
.bisi-page .bisi-sorteo__form .form-group { margin: 18px 0 0; }
.bisi-page .bisi-sorteo__form label { font-size: 13px; color: #8A8A8A; margin: 0; }
.bisi-page .bisi-sorteo__form .form-control {
    border: 0;
    border-bottom: 1px solid #BDBDBD;
    border-radius: 0;
    padding: 6px 0;
    height: auto;
    background: transparent;
    box-shadow: none;
}
.bisi-page .bisi-sorteo__form .form-control:focus { border-bottom-color: var(--bisi-verde); box-shadow: none; }
.bisi-page .bisi-sorteo__form textarea.form-control { min-height: 90px; resize: vertical; }

/* Validación de campos (ver formularios.js): borde rojo + texto de error debajo, sin depender del navegador ni de PHP */
.bisi-page .bisi-sorteo__form .form-control.is-invalid { background-image: none; border-bottom-color: #dc3545; }
.bisi-page .bisi-sorteo__form .invalid-feedback { display: block; font-size: 12px; color: #dc3545; margin: 4px 0 0; }

/* Opciones de los componentes cajas_de_seleccion_unica/multiple del formulario: tarjetas en 2 columnas */
.bisi-page .bisi-sorteo__form .form-check.form-check-inline {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 10px 8px 0 0;
    padding: 12px 14px;
    background: #F5F6F5;
    border: 1px solid #F5F6F5;
    border-radius: 10px;
}
.bisi-page .bisi-sorteo__form .form-check.form-check-inline .form-check-input {
    position: static;
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    flex-shrink: 0;
    accent-color: var(--bisi-verde);
}
.bisi-page .bisi-sorteo__form .form-check.form-check-inline .form-check-label {
    font-size: 14px;
    color: var(--bisi-titulo);
    margin: 0;
}
.bisi-page .bisi-sorteo__form .form-check.form-check-inline:has(.form-check-input:checked) {
    background: #fff;
    border-color: var(--bisi-verde);
}

.bisi-page .bisi-sorteo__form .row:last-child { margin-top: 30px; }
.bisi-page .bisi-sorteo__form .enviar-formulario,
.bisi-page .bisi-sorteo__form .paso-siguiente {
    background: var(--bisi-verde);
    border: 0;
    border-radius: 999px;
    padding: 13px 34px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}
.bisi-page .bisi-sorteo__form .paso-anterior {
    background: transparent;
    border: 0;
    color: var(--bisi-gris);
    padding: 13px 20px;
    margin-right: 8px;
}

.bisi-page .bisi-sorteo__gracias { text-align: center; padding: 60px 40px; }
.bisi-page .bisi-sorteo__gracias img { width: 84px; height: 84px; margin-bottom: 20px; }
.bisi-page .bisi-sorteo__gracias h3 { font-size: 26px; font-weight: 700; color: var(--bisi-titulo); margin: 0 0 12px; }
.bisi-page .bisi-sorteo__gracias p { font-size: 16px; color: var(--bisi-gris); margin: 0; }

/* ---------- Playlist ---------- */
.bisi-page .bisi-playlist {
    padding: 110px 0;
    color: #fff;
    background: var(--bisi-oscuro) url('../../images/sitio/bisi/spotify.png') center bottom / cover no-repeat;
}
.bisi-page .bisi-playlist .bisi-eyebrow { color: var(--bisi-lima); }
.bisi-page .bisi-playlist .bisi-titulo { color: #fff; }
.bisi-page .bisi-playlist .bisi-texto { color: #E3E3E3; }
.bisi-page .bisi-playlist__tracks {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    overflow: hidden;
}
.bisi-page .bisi-playlist__tracks li {
    display: flex;
    justify-content: space-between;
    padding: 15px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 14px;
}
.bisi-page .bisi-playlist__tracks li:last-child { border-bottom: 0; }
.bisi-page .bisi-playlist__tracks li span:last-child { color: var(--bisi-lima); font-weight: 600; }

/* ---------- Footer ---------- */
.bisi-page .bisi-footer {
    padding: 80px 0 60px;
    background: #F4F4F4;
    color: var(--bisi-gris);
}
.bisi-page .bisi-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 50px;
}
.bisi-page .bisi-footer__marca { display: flex; align-items: center; gap: 40px; }
.bisi-page .bisi-footer__logo { height: 58px; }
.bisi-page .bisi-footer__redes { display: flex; align-items: center; gap: 14px; }
.bisi-page .bisi-footer__redes a { color: var(--bisi-lima); display: block; transition: color .2s ease; }
.bisi-page .bisi-footer__redes a:hover { color: var(--bisi-verde); }
.bisi-page .bisi-footer__redes svg { width: 24px; height: 24px; display: block; }
.bisi-page .bisi-footer__contacto { text-align: right; }
.bisi-page .bisi-footer__contacto p { margin: 0 0 4px; font-size: 15px; color: var(--bisi-verde); }
.bisi-page .bisi-footer__contacto a { color: inherit; text-decoration: none; }
.bisi-page .bisi-footer__contacto a:hover { text-decoration: underline; }
.bisi-page .bisi-footer__legales { font-size: 12px; line-height: 1.55; color: #7A7A7A; }
.bisi-page .bisi-footer__legales p { margin: 0 0 18px; }
.bisi-page .bisi-footer__legales strong { color: #555; font-weight: 700; }
.bisi-page .bisi-footer__direccion { font-size: 12px; color: #7A7A7A; margin: 34px 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .bisi-page .bisi-nav { padding: 18px 20px; }
    .bisi-page .bisi-nav__logo img { height: 36px; }
    .bisi-page .bisi-hero__slide { height: auto; min-height: 560px; }
    .bisi-page .bisi-hero__slide::before { background: linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .35)); }
    .bisi-page .bisi-hero__content { padding: 110px 24px 80px; }

    .bisi-page .bisi-intro__media,
    .bisi-page .bisi-habitos__media {
        aspect-ratio: auto;
        display: block;
        background-size: 170% auto;
        background-position: left top;
        padding-top: 88vw;
    }
    .bisi-page .bisi-intro__content,
    .bisi-page .bisi-habitos__content { padding: 10px 24px 50px; }

    .bisi-page .bisi-sorteo { padding: 60px 0; }
    .bisi-page .bisi-sorteo__card { margin-top: 40px; box-shadow: 8px 8px 0 #CDEFC3; }
    .bisi-page .bisi-stepper { padding: 18px 20px; gap: 20px; }
    .bisi-page .bisi-sorteo__head { padding: 24px 20px 4px; }
    .bisi-page .bisi-sorteo__form { padding: 6px 20px 28px; }

    .bisi-page .bisi-playlist { padding: 70px 0; }
    .bisi-page .bisi-playlist__tracks { margin-top: 36px; }
}
@media (max-width: 767px) {
    .bisi-page .bisi-footer { padding: 50px 0 40px; }
    .bisi-page .bisi-footer__top { flex-direction: column; align-items: center; text-align: center; }
    .bisi-page .bisi-footer__marca { flex-direction: column; gap: 20px; }
    .bisi-page .bisi-footer__contacto { text-align: center; }
}