/* =============================================
   pages/index-fresh-footer.css
   Inicio, parte 3/3: carrusel "Descubre mas", franja de
   publicidad, redes sociales, CTA final, botones .home-btn
   compartidos, el cruce con el boton claro/oscuro del sitio y
   la transicion de pagina (view-transition) de Inicio. Dividido
   desde index-fresh.css (fase de reorganizacion de arquitectura
   CSS, 2026-08-13) -- mismo contenido, sin cambios de valores.
   Viene de pages/index-fresh-content.css.
   ============================================= */

/* --- 9. "Descubre mas": contenido interno de cada .carousel-item de
       Bootstrap (la logica de slide/autoplay es de Bootstrap, ver
       components/carousel.css), sobre banda oscura. --- */
.spotlight-slide {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: 420px;
}

.spotlight-media {
    flex: 0 0 auto;
    align-self: stretch;
    aspect-ratio: 1 / 1;
    background-color: var(--ps-surface-dark-elevated);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.spotlight-copy {
    flex: 1 1 auto;
    max-width: 560px;
    color: var(--ps-on-dark);
}

.spotlight-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: var(--ps-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #04121c;
    background: var(--show-accent, var(--ps-primary));
    margin-bottom: var(--space-3);
}

.spotlight-copy h3 {
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    font-weight: 300;
    margin-bottom: var(--space-1);
}

.spotlight-subtitle {
    color: var(--show-accent, var(--ps-link-dark));
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: var(--space-3) !important;
}

.spotlight-copy p {
    color: var(--ps-body-dark);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    max-width: 46ch;
}

/* --- 10. Publicidad / anunciantes: la unica banda azul de la
       pagina — el "momento de accion" del sistema. --- */
.home-ads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.ps-band--blue .section-eyebrow { color: rgba(255, 255, 255, 0.75); }

.home-ads h2 {
    max-width: 28ch;
    margin-bottom: var(--space-5);
    color: var(--ps-on-dark);
}

.home-ads-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
}

.home-ads-list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ps-on-dark);
    font-weight: 500;
}

.home-ads-list i {
    width: 18px;
    height: 18px;
    color: var(--ps-on-dark);
}

.home-ads-action {
    flex-shrink: 0;
}

/* --- 11. Redes sociales: botones de vidrio con relieve 3D.
       Cada boton arranca como un cuadro con solo el logotipo y se
       despliega mostrando el nombre al pasar el cursor, inclinandose y
       encendiendose con el color de su red (--clr, inline en el markup
       de index.php). --- */
.home-social-grid {
    /* El vidrio se define con tokens propios y no con blanco fijo: la
       banda que los aloja es azul en tema oscuro pero BLANCA en tema
       claro, donde un boton blanco sobre blanco desaparecia por
       completo. Los valores para tema claro estan mas abajo. */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-edge: rgba(255, 255, 255, 0.22);
    --glass-icon: rgba(255, 255, 255, 0.75);
    --glass-label: #ffffff;
    --glass-drop: rgba(0, 0, 0, 0.45);

    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    /* La perspectiva vive en el contenedor: es lo que convierte los
       rotateX/rotateY de cada boton en una inclinacion real y no en un
       simple sesgo plano. */
    perspective: 1000px;
}

body.light-theme .home-social-grid {
    --glass-bg: rgba(15, 23, 42, 0.035);
    --glass-edge: rgba(15, 23, 42, 0.16);
    --glass-icon: rgba(15, 23, 42, 0.55);
    --glass-label: #0f172a;
    /* La sombra de apoyo baja de negro a tinta azulada translucida: sobre
       blanco, el negro al 45% se leia como una mancha sucia debajo del
       boton en vez de como profundidad. */
    --glass-drop: rgba(15, 23, 42, 0.18);
}

.glass-social {
    position: relative;
    /* flex:none es imprescindible: como hijos de un contenedor flex, los
       botones se encogian por debajo de sus 75px cuando la banda quedaba
       angosta y el logotipo se recortaba contra el borde. */
    flex: none;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-radius: 20px;
    border: 1px solid var(--glass-edge);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s ease,
                border-color 0.5s ease;
}

.glass-social-box {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.glass-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    color: var(--glass-icon);
    transition: color 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}

.glass-social-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.glass-social-text {
    color: var(--glass-label);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.8px;
    white-space: nowrap;
    opacity: 0;
    transform: translateZ(20px) translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Estado desplegado. Se declara para :focus-visible fuera de la consulta
   de hover para que quien navega con teclado lo reciba igual, aunque su
   dispositivo no tenga puntero fino. */
.glass-social:focus-visible {
    width: 200px;
    border-color: var(--clr);
    box-shadow: 0 20px 30px var(--glass-drop), 0 0 25px var(--clr);
    /* El contorno de foco sigue al texto: blanco sobre la banda azul,
       tinta oscura sobre la banda blanca del tema claro. */
    outline: 2px solid var(--glass-label);
    outline-offset: 3px;
}

.glass-social:focus-visible .glass-social-icon {
    color: var(--clr);
    filter: drop-shadow(0 0 8px var(--clr));
}

.glass-social:focus-visible .glass-social-text {
    opacity: 1;
    transform: translateZ(25px) translateX(0);
}

@media (hover: hover) and (pointer: fine) {
    .glass-social:hover {
        width: 200px;
        border-color: var(--clr);
        transform: translateY(-10px) rotateX(15deg) rotateY(-10deg) translateZ(10px);
        box-shadow: 0 20px 30px var(--glass-drop), 0 0 25px var(--clr);
    }

    .glass-social:hover .glass-social-icon {
        color: var(--clr);
        transform: translateZ(30px) scale(1.1);
        filter: drop-shadow(0 0 8px var(--clr));
    }

    .glass-social:hover .glass-social-text {
        opacity: 1;
        transform: translateZ(25px) translateX(0);
    }
}

/* Sin puntero fino no hay hover que revele el nombre: en tactil los
   botones se quedan desplegados desde el inicio en vez de ser cuatro
   cuadros sin etiqueta. */
@media (hover: none), (pointer: coarse) {
    .glass-social {
        width: auto;
        height: 64px;
        padding: 0 20px;
    }

    .glass-social-text {
        opacity: 1;
        transform: none;
    }

    .glass-social-icon {
        color: var(--glass-label);
    }
}

@media (prefers-reduced-motion: reduce) {
    .glass-social {
        transition: width 0.2s linear, border-color 0.2s linear;
    }

    /* Se conserva el despliegue (comunica el nombre) y se retira solo la
       inclinacion 3D, que es puramente decorativa. */
    .glass-social:hover,
    .glass-social:focus-visible {
        transform: none;
    }

    .glass-social:hover .glass-social-icon,
    .glass-social:focus-visible .glass-social-icon {
        transform: none;
    }

    .glass-social-text {
        transition: opacity 0.2s linear;
        transform: none;
    }
}

/* --- 11b. Boton de TikTok: en vez de un solo color usa la firma
       cromatica de la marca — magenta (--clr, #fe2c55) y cian
       (--clr-2, #25f4ee) desdoblados, como el logotipo. El resplandor
       apila ambos colores y el icono proyecta una sombra doble
       (cian a un lado, magenta al otro). --- */
.glass-social--tiktok:focus-visible,
.glass-social--tiktok:hover {
    border-color: var(--clr-2);
    box-shadow: 0 20px 30px var(--glass-drop),
                -6px 0 22px var(--clr-2),
                6px 0 22px var(--clr);
}

.glass-social--tiktok:focus-visible .glass-social-icon,
.glass-social--tiktok:hover .glass-social-icon {
    color: #ffffff;
    filter: drop-shadow(-2px 0 0 var(--clr-2)) drop-shadow(2px 0 0 var(--clr));
}

body.light-theme .glass-social--tiktok:focus-visible .glass-social-icon,
body.light-theme .glass-social--tiktok:hover .glass-social-icon {
    color: #000000;
}

@media (prefers-reduced-motion: reduce) {
    .glass-social--tiktok:hover,
    .glass-social--tiktok:focus-visible {
        box-shadow: 0 0 18px var(--clr), 0 0 18px var(--clr-2);
    }
}

/* --- 12. CTA final: sobre banda oscura, sin panel degradado. --- */
.home-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--ps-hairline-dark);
}

.home-cta h2 {
    font-size: 2rem;
    margin-bottom: var(--space-2);
    max-width: 16ch;
    color: var(--ps-on-dark);
}

.home-cta p {
    color: var(--ps-body-dark);
    max-width: 42ch;
}

.home-cta-actions {
    flex-shrink: 0;
}

/* --- Botones compartidos del home: siempre en pildora
       (rounded-full), tipografia button-lg (18px/700). --- */
.home-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 28px;
    min-height: 48px;
    border-radius: var(--ps-radius-full);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.45px;
    cursor: pointer;
    border: none;
    transition: background var(--duration-base) var(--ease-out);
    text-decoration: none;
}

.home-btn--primary {
    background: var(--ps-primary);
    color: var(--ps-on-dark);
}

.home-btn--ghost {
    background: transparent;
    color: var(--ps-on-dark);
    border: 1px solid color-mix(in srgb, var(--ps-primary) 55%, transparent);
}

.home-btn--on-blue {
    background: var(--ps-canvas-light);
    color: var(--ps-primary);
}

@media (hover: hover) and (pointer: fine) {
    .home-btn--primary:hover {
        background: var(--ps-primary-pressed);
    }
    .home-btn--ghost:hover {
        border-color: var(--ps-on-dark);
    }
    .home-btn--on-blue:hover {
        background: var(--ps-surface-soft);
    }
}

.home-btn--primary:active { background: var(--ps-primary-active); }

/* --- Stagger para rejillas: cada hijo entra un poco despues del
       anterior cuando la seccion se revela (ver index.php, que
       agrega --stagger a cada item). --- */
[data-reveal].is-visible .home-hosts > *,
[data-reveal].is-visible .home-podcast-grid > *,
[data-reveal].is-visible .home-stats > *,
[data-reveal].is-visible .home-events > * {
    animation: home-stagger-in 0.9s var(--ease-out) both;
    animation-delay: calc(var(--stagger, 0) * 110ms);
}

@keyframes home-stagger-in {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .home-player-wave span {
        animation: none;
        height: 60%;
    }
    [data-reveal].is-visible .home-hosts > *,
    [data-reveal].is-visible .home-podcast-grid > *,
    [data-reveal].is-visible .home-stats > *,
    [data-reveal].is-visible .home-events > * {
        animation: none;
    }
}

/* =========================================================
   Cruce con el boton claro/oscuro del sitio (body.light-theme,
   ver theme.js): el sistema de bandas nacio con negro/blanco/azul
   PlayStation fijos, pero el azul es el color de la estacion, asi
   que cada banda "presta" su lado neutro al azul segun el tema:
   - Tema oscuro (por defecto, sin .light-theme): bandas claras ->
     azul rey en vez de blanco.
   - Tema claro (.light-theme): bandas oscuras -> azul celeste en
     vez de negro.
   Los rincones que ya eran "tarjeta oscura fija" dentro de una banda
   (reproductor, fila activa de la parrilla, la banda azul de
   Publicidad, las diapositivas con foto de "Descubre mas", el boton
   primario) vuelven a fijar su propio texto claro para no perder
   contraste con el swap.
   ========================================================= */

body:not(.light-theme) .home-main {
    --ps-canvas-light: #0b3d91;
    --ps-ink: #ffffff;
    --ps-body-light: rgba(255, 255, 255, 0.75);
    --ps-mute-light: rgba(255, 255, 255, 0.6);
    --ps-hairline-light: rgba(255, 255, 255, 0.2);
    --ps-link-light: #7ec3ff;
}

/* La fecha del ticket de evento es una tarjeta clara fija: sigue en
   tinta oscura aunque la banda de fondo pase a azul rey. */
body:not(.light-theme) .home-event-ticket-date {
    --ps-ink: #000000;
}

body.light-theme .home-main {
    --ps-canvas-dark: #38bdf8;
    --ps-on-dark: #04121c;
    --ps-body-dark: rgba(4, 18, 28, 0.75);
    --ps-mute-dark: rgba(4, 18, 28, 0.55);
    --ps-hairline-dark: rgba(4, 18, 28, 0.18);
    --ps-link-dark: #01477e;
}

body.light-theme .ps-band--blue,
body.light-theme .home-player,
body.light-theme .home-comments-card,
body.light-theme .home-schedule-row.is-current,
body.light-theme .home-btn--primary {
    --ps-on-dark: #ffffff;
    --ps-body-dark: rgba(255, 255, 255, 0.7);
    --ps-mute-dark: rgba(229, 229, 229, 0.55);
    --ps-hairline-dark: rgba(229, 229, 229, 0.2);
    --ps-link-dark: #53b1ff;
    /* No solo la custom property: tambien el color heredable en si,
       para los textos hijos que no declaran su propio var(--ps-on-dark)
       (ej. home-player-station) y de otro modo heredarian el valor ya
       calculado (oscuro) de la banda celeste que los envuelve. */
    color: var(--ps-on-dark);
}

@media (max-width: 1024px) {
    .ps-band {
        padding-block: 64px;
        padding-inline: 32px;
    }
}

@media (max-width: 980px) {
    .home-hero {
        grid-template-columns: 1fr;
    }

    .home-story-grid {
        grid-template-columns: 1fr;
    }

    .home-story-media {
        order: -1;
    }

    .home-schedule-row {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .home-schedule-host {
        display: none;
    }

    .home-announce-track {
        min-height: 0;
    }

    .home-announce-slide {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-5);
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .home-announce-slide.is-active {
        display: flex;
    }

    .home-announce-media {
        aspect-ratio: auto;
        width: 100%;
        height: 260px;
    }

    .spotlight-slide {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-5);
        height: auto;
    }

    .spotlight-media {
        aspect-ratio: auto;
        width: 100%;
        height: 260px;
    }

    .spotlight-copy {
        max-width: none;
    }

    .home-cta,
    .home-ads {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .ps-band {
        padding-block: 48px;
        padding-inline: 20px;
    }

    .ps-band--hero {
        padding-top: 120px;
    }

    .home-stat {
        flex: 1 1 45%;
    }
}

/* =========================================================
   PAGE TRANSITION (llegada) — Inicio es el "centro" del sitio:
   zoom-in sutil + fade, como si la pagina se acercara hacia ti.
   La pantalla anterior se aleja (scale down) y se desvanece.
   Ver assets/css/components/page-transitions.css para el default
   y assets/js/core/page-transitions.js para el fallback sin
   soporte nativo.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: pt-inicio-exit var(--duration-slow) var(--ease-out);
    }

    ::view-transition-new(root) {
        animation: pt-inicio-enter var(--duration-slow) var(--ease-out);
    }

    @keyframes pt-inicio-exit {
        to { opacity: 0; transform: scale(0.97); }
    }

    @keyframes pt-inicio-enter {
        from { opacity: 0; transform: scale(1.03); }
    }
}

/* =========================================================
   SUGERENCIA DE SCROLL — tarjeta flotante fija sobre el boton del
   chatbot (misma esquina, mismo --sticky-player-offset que
   .doliv-bot-launcher en components/chatbot.css) que propone una
   seccion al azar y se llena con el scroll del visitante (ver
   assets/js/pages/index.js, #scrollTip). Oculta hasta pasar el
   reproductor; z-index por debajo del chatbot (2800) para que el
   panel del chat la tape sin taparla ella al chatbot.
   ========================================================= */
.home-scroll-tip {
    position: fixed;
    right: 22px;
    bottom: calc(24px + 68px + 14px + var(--sticky-player-offset, 0px));
    z-index: 2700;
    display: flex;
    align-items: center;
    width: min(288px, calc(100vw - 44px));
    padding: 14px 16px 16px 22px;
    border-radius: 14px;
    background: #15181e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.25s var(--ease-out), visibility 0.25s var(--ease-out), transform 0.25s var(--ease-out), bottom 0.2s ease;
}

.home-scroll-tip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* La tarjeta entera es el enlace: un leve realce al pasar el cursor. */
.home-scroll-tip.is-visible:hover {
    transform: translateY(-2px) scale(1);
}

/* Cinta de acento: barra vertical cian pegada al canto izquierdo, sin
   llegar a las esquinas para no pelear con el radio de la tarjeta. */
.home-scroll-tip-accent {
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-cyan, #00d4ff);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
}

.home-scroll-tip-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    color: #ffffff;
    text-decoration: none;
}

/* Columna interna: pildora arriba, titulo debajo. */
.home-scroll-tip-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Pildora con punto que late: el gancho llamativo del aviso. */
.home-scroll-tip-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-full, 999px);
    background: rgba(0, 212, 255, 0.14);
    font-family: var(--font-display, "Space Grotesk", sans-serif);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4fd8ff;
    white-space: nowrap;
}

.home-scroll-tip-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #4fd8ff;
    animation: scroll-tip-dot 1.4s ease-in-out infinite;
}

@keyframes scroll-tip-dot {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1); }
}

.home-scroll-tip-headline {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

/* Chevron: seniala que el clic lleva a otra seccion; avanza en hover. */
.home-scroll-tip-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #4fd8ff;
    transition: transform 0.2s var(--ease-out);
}

.home-scroll-tip:hover .home-scroll-tip-chevron {
    transform: translateX(3px);
}

.home-scroll-tip-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: #22262e;
    color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 3;
    transition: background 0.15s ease, color 0.15s ease;
}

.home-scroll-tip-close i {
    width: 14px;
    height: 14px;
}

.home-scroll-tip-close:hover {
    background: #2c313b;
    color: #ffffff;
}

/* Barra de progreso: vive fuera del flujo (absolute, ancla en el
   position:fixed de .home-scroll-tip), pegada al borde inferior de la
   tarjeta para no empujar el contenido. */
.home-scroll-tip-track {
    position: absolute;
    left: 22px;
    right: 16px;
    bottom: 8px;
    height: 3px;
    border-radius: var(--ps-radius-full, 9999px);
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.home-scroll-tip-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2775ff, #00c8f8);
    border-radius: inherit;
    box-shadow: 0 0 8px rgba(0, 200, 248, 0.6);
    transition: width 0.12s linear;
}

@media (prefers-reduced-motion: reduce) {
    .home-scroll-tip-dot { animation: none; }
    .home-scroll-tip-chevron { transition: none; }
}

@media (max-width: 768px) {
    .home-scroll-tip {
        right: 16px;
        bottom: calc(18px + 62px + 12px);
        width: min(260px, calc(100vw - 32px));
    }
}