/* =========================================================
   DESIGN SYSTEM — APPLY LAYER
   Maps --ds-* tokens onto existing section classes.
   ONLY editable sections. Never: hero, #programs-showcase, #podcast-section.
   ========================================================= */

/* ---------------------------------------------------------
   PILLARS SECTION (white) — spacing, eyebrow, rhythm
   --------------------------------------------------------- */
.pillars-section {
    padding-top: var(--ds-section-y);
    padding-bottom: var(--ds-section-y);
    background: var(--ds-bg-light);
}

.pillars-header {
    font-family: 'Inter', sans-serif;
    font-size: var(--ds-eyebrow);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ds-accent);
    margin-bottom: 28px;
}

.pillars-header .dot {
    color: var(--ds-accent);
}

/* ---------------------------------------------------------
   TESTIMONIALS CINEMATIC SLIDER (dark theme)
   Full-bleed section: NO section padding change (fixed height).
   Refine overlay depth + quote hierarchy + avatar hover.
   --------------------------------------------------------- */

/* Deeper overlay for cinematic contrast + bottom vignette */
.tony-cinematic-slider .bg-overlay {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.85) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 45%);
}

@media (min-width: 992px) {
    .tony-cinematic-slider .bg-overlay {
        background:
            linear-gradient(90deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 28%,
                rgba(0, 0, 0, 0.65) 58%,
                rgba(0, 0, 0, 0.96) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4) 100%);
    }
}

/* Accent bar above the quote — adds editorial authority (TR style).
   Placed on .content-layer (flex column) to avoid the grid-stacked wrapper. */
.tony-cinematic-slider .content-layer::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--ds-accent);
    margin: 0 auto 24px;
}

@media (min-width: 992px) {
    .tony-cinematic-slider .content-layer::before {
        margin: 0 0 24px;
    }
}

/* Tighten quote to the system's display feel */
.tony-cinematic-slider .sync-quote {
    letter-spacing: -0.03em;
}

/* Micro-interaction: inactive avatars respond to hover */
.tony-cinematic-slider .avatar-nav-item {
    cursor: pointer;
}

@media (min-width: 992px) {
    .tony-cinematic-slider .avatar-nav-item:not(.active) .avatar-nav-img {
        transition: transform 0.3s var(--ds-ease), filter 0.3s var(--ds-ease), border-color 0.3s var(--ds-ease);
    }

    .tony-cinematic-slider .avatar-nav-item:not(.active):hover .avatar-nav-img {
        filter: grayscale(35%);
        transform: scale(1.06);
        border-color: rgba(255, 255, 255, 0.4);
    }
}

/* ---------------------------------------------------------
   RADAR DE INNOVACIÓN (.news-radar-section) — white bg kept.
   Fixes: brand accent = ORANGE #ff4500, Inter typography,
   system spacing, token micro-interactions.
   --------------------------------------------------------- */

/* Spacing → system (keep white background, no theme) */
.news-radar-section {
    padding-top: var(--ds-section-y);
    padding-bottom: var(--ds-section-y);
    font-family: 'Inter', sans-serif;
}

/* Eyebrow → ds-eyebrow style with orange accent */
.news-radar-section .news-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--ds-eyebrow);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tr-gold);
}

/* Title → ds-title treatment */
.news-radar-section .news-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.03;
}

/* Accent color: cyan #00bcd4 → brand orange #ff4500 */
.news-radar-section .news-meta {
    color: var(--tr-gold);
}

.news-radar-section .news-source {
    color: #000;
    /* keep source label black */
}

.news-radar-section .news-link-sm {
    color: var(--tr-gold);
}

.news-radar-section .news-link-action {
    border-bottom-color: var(--tr-gold);
    transition: background-color 0.3s var(--ds-ease), color 0.3s var(--ds-ease);
}

.news-radar-section .news-link-action:hover {
    background-color: var(--tr-gold);
    color: #fff;
}

.news-radar-section .news-slider-track::-webkit-scrollbar-thumb {
    background: var(--tr-gold);
}

/* Pill button + link fonts → Inter, token transitions */
.news-radar-section .btn-news-pill {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    transition: transform 0.3s var(--ds-ease), box-shadow 0.3s var(--ds-ease),
        background-color 0.3s var(--ds-ease), color 0.3s var(--ds-ease);
}

.news-radar-section .btn-news-pill:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-soft);
}

.news-radar-section .news-link-action {
    font-family: 'Inter', sans-serif;
}

/* ---------------------------------------------------------
   FACE MASTER (.face-master-section) — CREAM theme.
   System spacing + cream background + card micro-interactions.
   Keeps existing grid layout & Inter 800 title.
   --------------------------------------------------------- */

/* White background (reverted from cream) + system spacing */
.face-master-section {
    background-color: #ffffff;
    padding-top: var(--ds-section-y);
    padding-bottom: var(--ds-section-y);
}

/* Lead paragraph → muted-on-light for consistency */
.face-master-section .face-description p {
    color: var(--ds-muted-on-light);
    font-size: var(--ds-subtitle);
    line-height: 1.6;
}

/* Cards: lift on hover (they had none) + coherent radius/shadow */
.face-master-section .face-image-card,
.face-master-section .face-video-card {
    transition: transform 0.4s var(--ds-ease), box-shadow 0.4s var(--ds-ease);
}

.face-master-section .face-image-card:hover,
.face-master-section .face-video-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ds-shadow-soft);
}

/* Image inside the card: subtle zoom on hover (like other sections) */
.face-master-section .face-image-card .face-img {
    transition: transform 0.6s var(--ds-ease);
}

.face-master-section .face-image-card:hover .face-img {
    transform: scale(1.04);
}

/* Pill button: give it presence + token hover */
.face-master-section .face-pill-btn {
    background-color: #000;
    color: #fff;
    transition: transform 0.3s var(--ds-ease), box-shadow 0.3s var(--ds-ease), background-color 0.3s var(--ds-ease);
}

.face-master-section .face-pill-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-soft);
    background-color: var(--tr-blue);
}

/* ---------------------------------------------------------
   WHITE RESULTS (.white-results-section) — LIGHT theme (bg kept white).
   System spacing + Inter numerals + muted lead + button presence.
   --------------------------------------------------------- */

.white-results-section {
    padding-top: var(--ds-section-y);
    padding-bottom: var(--ds-section-y);
    font-family: 'Inter', sans-serif;
}

/* Lead → system subtitle + muted */
.white-results-section .results-lead {
    color: var(--ds-muted-on-light);
    font-size: var(--ds-subtitle);
    line-height: 1.6;
}

/* Big stat numerals → Inter (was Oswald), keep the subtle gradient */
.white-results-section .stat-num-large {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Source label → muted-on-light */
.white-results-section .stat-source-small {
    color: var(--ds-muted-on-light);
}

/* CTA button: presence + token hover */
.white-results-section .results-cta-btn {
    background-color: #000;
    color: #fff;
    transition: transform 0.3s var(--ds-ease), box-shadow 0.3s var(--ds-ease), background-color 0.3s var(--ds-ease);
}

.white-results-section .results-cta-btn:hover {
    background-color: var(--tr-blue);
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-soft);
}

/* Video card: lift on hover */
.white-results-section .video-portrait-container {
    transition: transform 0.4s var(--ds-ease), box-shadow 0.4s var(--ds-ease);
}

.white-results-section .video-portrait-container:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}