/* ============================================================
   online-rediseno.css
   Estilos específicos de la página Online Rediseño.
   Extraídos de bloques <style> y atributos style="" inline.
   ============================================================ */

/* ============================================================
   Fondos y overlays oscuros de sección
   ============================================================ */
.bg-dark-uvp {
    background: #1C0036;
}

.overlay-dark-30 {
    background: rgba(28, 0, 54, 0.3);
}

.overlay-dark-66 {
    background: rgba(28, 0, 54, 0.658);
}

/* ============================================================
   Banner: título desktop e móvil
   ============================================================ */
.banner-titulo-desktop {
    font-size: 58px;
    letter-spacing: -0.05em;
    line-height: 1.16;
}

.banner-subtitulo-desktop {
    font-size: 20px;
    letter-spacing: -0.03em;
    line-height: 1.5;
}

.banner-titulo-movil {
    font-size: 40px;
    letter-spacing: -2px;
    line-height: 1.16;
}

.banner-subtitulo-movil {
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 1.5;
}

.banner-padding-movil {
    padding: 48px 24px 16px;
}

.banner-btn-movil {
    padding: 16px 24px 32px;
}

/* ============================================================
   Calculadora de Becas: range slider y glow de fondo
   ============================================================ */
.beca-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #922CEC 0%, #922CEC 50%, rgba(255, 255, 255, 0.2) 50%);
    outline: none;
    cursor: pointer;
}

.beca-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.beca-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.beca-glow-right {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(146, 44, 236, 0.548) 0%, rgba(146, 44, 236, 0) 100%);
    left: calc(50% + 500px);
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: blur(60px);
}

@media (max-width: 900px) {
    .beca-glow-right {
        left: 50%;
        top: 75%;
        width: 450px;
        height: 450px;
        filter: blur(40px);
    }
}

/* ============================================================
   Acreditaciones: marquee infinito de logos
   ============================================================ */
.acreditaciones-track {
    width: max-content;
    animation: marquee-logos 28s linear infinite;
    will-change: transform;
}

@keyframes marquee-logos {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .acreditaciones-track {
        animation: none;
    }
}

/* Imagen individual de logo acreditación */
.logo-acreditacion {
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* ============================================================
   Historias de Éxito: glow y elementos de la sección
   ============================================================ */
.historias-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgb(146 44 236 / 22%) 0%, rgba(146, 44, 236, 0) 100%);
    left: 21%;
    top: 55%;
    transform: translate(-50%, -50%);
    z-index: 0;
    filter: blur(60px);
}

@media (max-width: 900px) {
    .historias-glow {
        left: 50%;
        top: 75%;
        width: 450px;
        height: 450px;
        filter: blur(40px);
    }
}

/* Línea decorativa arcoíris del encabezado de historias */
.historias-linea-arcoiris {
    background: linear-gradient(to right,
        #FFCC00 0%, #F49E0C 12%, #E87019 25%,
        #DD4125 37%, #D11331 50%, #B41856 63%, #5F0DA6 100%
    );
}

/* Fondo semitransparente de cada slide de testimonio */
.testimonio-slide-bg {
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   FAQ: hover, transiciones y animaciones de apertura
   ============================================================ */

.faq-item {
    transition: background-color 0.2s ease;
    overflow: hidden;
}

.faq-header {
    transition: background-color 0.2s ease, border-radius 0.2s ease;
}

/* ── HOVER: solo escritorio ── */
@media (hover: hover) {
    /* Cerrado: toda la card (el body tiene h=0, visualmente es solo el header) */
    .faq-item:not([data-open="1"]):hover {
        background-color: #daacd2 !important;
    }
    /* Abierto: solo el header */
    .faq-item[data-open="1"]:hover .faq-header {
        background-color: #daacd2 !important;
        border-radius: 0 0 20px 20px;
    }
}

/* ── CLIC: todos los dispositivos, siempre solo el header ── */
/* (cuando está cerrado el body tiene h=0, así que visualmente ocupa toda la card) */
.faq-item.faq-clicked .faq-header {
    background-color: #57174c !important;
    border-radius: 0 0 20px 20px;
    transition-duration: 0s;
}
.faq-item.faq-clicked .faq-header > p {
    color: #fff !important;
}

/* Grid rows: colapsa a 0 exacto sin espacio residual */
.faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

/* El div interno es el ítem del grid — overflow:hidden lo clipa a 0 exacto */
.faq-body > div {
    overflow: hidden;
    min-height: 0;
}

.faq-item[data-open="1"] .faq-body {
    grid-template-rows: 1fr;
}

.faq-vline {
    transition: opacity 0.2s;
}

.faq-item[data-open="1"] .faq-vline {
    opacity: 0;
}

.faq-chevron {
    transition: transform 0.25s ease;
}

.faq-item[data-open="1"] .faq-chevron {
    transform: rotate(180deg);
}