/* ============================================================
   FER PELAYO PRESENTA — styles.css
   Paleta: Azul marino + Naranja + Negro cinematográfico
   Fuentes: Montserrat (display) + Inter (body)
   ============================================================ */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    /* Fondos */
    --fondo1:     #06090F;
    --fondo2:     #0D1B3E;
    --fondo3:     #1B2A5E;
    --fondo-card: #0A1220;
    --fondo-video: #080E1C;

    /* Degradados */
    --degradado-hero:     linear-gradient(135deg, #1B2F72 0%, #0D1B3E 55%, #080F22 100%);
    --degradado-naranja:  linear-gradient(135deg, #E8541A 0%, #C94010 100%);
    --degradado-ep-card:  linear-gradient(to bottom, rgba(6,9,15,0) 0%, rgba(6,9,15,0.82) 52%, #000000 100%);
    --degradado-oscuro:   linear-gradient(to bottom, rgba(6,9,15,0.96) 0%, #000000 100%);

    /* Naranja */
    --naranja1:      #E8541A;
    --naranja2:      #C94010;
    --naranja-opaco: rgba(232,84,26,0.12);
    --naranja-borde: rgba(232,84,26,0.35);
    --naranja-glow:  0 0 32px rgba(232,84,26,0.30);

    /* Textos */
    --gris1:      #8892AA;
    --gris2:      #C8D0E0;
    --gris-borde: rgba(255,255,255,0.08);
    --blanco:     #FFFFFF;
    --blanco-op1: rgba(255,255,255,0.88);
    --blanco-op2: rgba(255,255,255,0.55);
    --blanco-op3: rgba(255,255,255,0.08);

    /* Tipografía */
    --font-display: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    --font-body:    'Inter', 'Segoe UI', Arial, sans-serif;

    /* Escala fluid */
    --fs-2xs:  clamp(0.60rem, 0.9vw,  0.70rem);
    --fs-xs:   clamp(0.68rem, 1.1vw,  0.78rem);
    --fs-sm:   clamp(0.78rem, 1.4vw,  0.90rem);
    --fs-base: clamp(0.88rem, 1.7vw,  1.00rem);
    --fs-md:   clamp(1.00rem, 2.0vw,  1.10rem);
    --fs-lg:   clamp(1.10rem, 2.2vw,  1.30rem);
    --fs-xl:   clamp(1.30rem, 2.8vw,  1.65rem);
    --fs-2xl:  clamp(1.60rem, 3.2vw,  2.00rem);
    --fs-3xl:  clamp(2.00rem, 4.0vw,  2.60rem);
    --fs-hero: clamp(2.60rem, 5.8vw,  4.80rem);
    --fs-stat: clamp(2.80rem, 7.0vw,  5.00rem);

    --fw-light:     300;
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;
    --fw-black:     900;

    /* Espaciado */
    --gap-xs:  clamp(0.40rem, 0.8vw,  0.55rem);
    --gap-sm:  clamp(0.60rem, 1.2vw,  0.85rem);
    --gap-md:  clamp(0.90rem, 1.8vw,  1.30rem);
    --gap-lg:  clamp(1.40rem, 2.8vw,  2.00rem);
    --gap-xl:  clamp(2.20rem, 4.5vw,  3.20rem);
    --gap-2xl: clamp(3.50rem, 7.0vw,  5.50rem);

    --max-width:  1280px;
    --px-section: clamp(1.20rem, 5vw, 5.00rem);

    /* Radios */
    --radius-sm:   0.40rem;
    --radius-md:   0.85rem;
    --radius-lg:   1.40rem;
    --radius-card: 1.20rem;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm:      0 2px  8px  rgba(0,0,0,0.30);
    --shadow-md:      0 4px  20px rgba(0,0,0,0.45);
    --shadow-lg:      0 8px  40px rgba(0,0,0,0.65);
    --shadow-naranja: 0 4px  28px rgba(232,84,26,0.45);

    /* Transiciones */
    --t-fast: 0.15s ease;
    --t-mid:  0.28s ease;
    --t-slow: 0.50s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; line-height: 1.55; }
.hidden { display: none !important; }
html {
    scroll-behavior: smooth;
    font-size: 100%;
    background: var(--fondo1);
    overflow-x: hidden;
    min-width: 320px;
}
body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    color: var(--blanco);
    background: var(--fondo1);
    overflow-x: hidden;
    min-width: 320px;
}
img    { display: block; height: auto; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ============================================================
   PROGRESS BAR
   ============================================================ */
.D_ProgressBar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: var(--degradado-naranja);
    z-index: 200;
    transition: width 0.08s linear;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
}


/* ============================================================
   HEADER
   ============================================================ */
.Header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    padding: clamp(0.6rem, 1.5vw, 0.9rem) var(--px-section);
    transition: background var(--t-mid), box-shadow var(--t-mid), padding var(--t-mid);
}
.Header.scrolled {
    background: rgba(8, 14, 30, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(232,84,26,0.15), 0 4px 32px rgba(0,0,0,0.75);
    padding: clamp(0.45rem, 1vw, 0.65rem) var(--px-section);
}

/* Nav — 3 columnas: links | logo | acción */
.Nav_Principal {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--gap-lg);
}

/* Links izquierda */
.Ul_NavLinks {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
}
.A_Nav {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--blanco-op2);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 0.2rem 0;
    position: relative;
    transition: color var(--t-fast);
}
.A_Nav::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--degradado-naranja);
    transition: width var(--t-mid);
    border-radius: var(--radius-full);
}
.A_Nav:hover         { color: var(--blanco); }
.A_Nav:hover::after  { width: 100%; }

/* Logo central */
.A_NavLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--t-mid), opacity var(--t-fast);
}
.A_NavLogo:hover { transform: scale(1.04); opacity: 0.88; }
.A_NavLogo img {
    height: clamp(2.6rem, 5vw, 3.8rem);
    width: auto;
    object-fit: contain;
    transition: height var(--t-mid);
}
.Header.scrolled .A_NavLogo img { height: clamp(2.0rem, 3.5vw, 2.8rem); }

/* Derecha */
.D_NavDer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap-sm);
}
.A_Contacto {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: 1.5px solid var(--naranja1);
    color: var(--blanco);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.A_Contacto:hover {
    background: var(--naranja1);
    box-shadow: var(--shadow-naranja);
    transform: translateY(-1px);
}
.A_Contacto i { font-size: 0.85em; }

.Btn_MenuBars {
    display: none;
    color: var(--blanco);
    font-size: var(--fs-xl);
    line-height: 1;
    padding: 0.25rem;
    transition: color var(--t-fast);
}
.Btn_MenuBars:hover { color: var(--naranja1); }

/* Menú lateral móvil */
.Nav_RI {
    position: fixed;
    top: 0; right: -320px;
    width: 300px; height: 100dvh;
    background: var(--fondo2);
    z-index: 150;
    padding: var(--gap-xl) var(--gap-lg);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    transition: right var(--t-slow);
    box-shadow: -4px 0 40px rgba(0,0,0,0.80);
    border-left: 1px solid var(--naranja-borde);
    overflow-y: auto;
}
.Nav_RI.abierto { right: 0; }

/* Top row: logo + close button */
.Nav_RI_Top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Btn_MenuClose {
    color: var(--blanco-op2);
    font-size: var(--fs-xl);
    line-height: 1;
    padding: 0.25rem;
    transition: color var(--t-fast), transform var(--t-fast);
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
}
.Btn_MenuClose:hover {
    color: var(--naranja1);
    transform: rotate(90deg);
}

@media only screen and (max-width: 360px) {
    .Nav_RI {
        width: 100vw;
        right: -100vw;
        border-left: none;
    }
}

.A_NavRLogo { display: flex; align-items: center; justify-content: center; }
.A_NavRLogo img { height: 3rem; width: auto; object-fit: contain; }

.Nav_RI ul { display: flex; flex-direction: column; gap: var(--gap-md); }
.A_NavR {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--blanco-op2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--gris-borde);
    transition: color var(--t-fast);
}
.A_NavR:last-child { border-bottom: none; }
.A_NavR:hover { color: var(--blanco); }
.A_NavR i { color: var(--naranja1); font-size: 0.9em; width: 1.2em; }

.A_ContactoR {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--degradado-naranja);
    color: var(--blanco);
    font-weight: var(--fw-bold);
    padding: 0.7rem 1.6rem;
    border-radius: var(--radius-full);
    margin-top: var(--gap-xs);
    border-bottom: none !important;
}
.A_ContactoR:hover { opacity: 0.88; color: var(--blanco); }
.A_ContactoR i { color: var(--blanco) !important; }

.D_MenuOverlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 140;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-mid);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.D_MenuOverlay.activo { opacity: 1; pointer-events: all; }


/* ============================================================
   HERO
   ============================================================ */
.S_Hero {
    position: relative;
    min-height: 100vh;
    background: var(--degradado-hero);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(5.5rem, 10vw, 8rem) var(--px-section) 0;
}

/* Wrapper centrado — limita el ancho del contenido del hero */
.D_HeroInner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
}

/* Dot pattern superior derecho */
.S_Hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 58%; height: 68%;
    background-image: url('img/Fondo.png');
    background-size: cover;
    background-position: center;
    opacity: 0.20;
    z-index: 0;
    pointer-events: none;
}
/* Resplandor naranja inferior */
.S_Hero::after {
    content: '';
    position: absolute;
    bottom: -10%; left: 25%;
    width: 55%; height: 60%;
    background: radial-gradient(ellipse, rgba(232,84,26,0.06) 0%, transparent 65%);
    z-index: 0;
    pointer-events: none;
}

.D_HeroContenido {
    position: relative;
    z-index: 3;
    max-width: 46%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Badge */
.Span_HeroBadge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--naranja-opaco);
    border: 1px solid var(--naranja-borde);
    color: var(--gris2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    width: fit-content;
}
.Span_HeroBadge i { color: var(--naranja1); font-size: 0.9em; }

/* Audio wave animado */
.Span_AudioWave {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    margin-left: 4px;
}
.Span_AudioWave b {
    display: inline-block;
    width: 3px;
    background: var(--naranja1);
    border-radius: 2px;
    transform-origin: bottom center;
    animation: audioPulse var(--dur, 0.8s) ease-in-out infinite alternate;
}
.Span_AudioWave b:nth-child(1) { height: 35%; --dur: 0.65s; }
.Span_AudioWave b:nth-child(2) { height: 75%; --dur: 0.90s; }
.Span_AudioWave b:nth-child(3) { height: 100%; --dur: 0.55s; }
.Span_AudioWave b:nth-child(4) { height: 60%;  --dur: 1.05s; }
.Span_AudioWave b:nth-child(5) { height: 40%;  --dur: 0.75s; }
@keyframes audioPulse {
    from { transform: scaleY(0.35); opacity: 0.5; }
    to   { transform: scaleY(1);    opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
    .Span_AudioWave b { animation: none; height: 50% !important; }
}

/* H1 */
.H1_Hero {
    font-family: var(--font-display);
    font-size: clamp(2.90rem, 6.8vw, 5.60rem);
    font-weight: var(--fw-black);
    color: var(--blanco);
    line-height: 0.97;
    letter-spacing: 0.015em;
}
.Span_HeroPresenta {
    display: block;
    color: var(--naranja1);
    font-size: 0.88em;
    line-height: 1.08;
}

.P_HeroDesc {
    font-size: clamp(0.92rem, 1.5vw, 1.10rem);
    font-weight: var(--fw-regular);
    color: var(--gris2);
    letter-spacing: 0.04em;
}

/* Botones plataforma — mismo lenguaje visual, sin colores de marca que rompan */
.D_HeroBotones {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.A_BtnPlataforma {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.20);
    color: var(--blanco);
    font-size: clamp(0.78rem, 1.3vw, 0.92rem);
    font-weight: var(--fw-semibold);
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-full);
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.A_BtnPlataforma:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.12);
}
.A_BtnPlataforma i { font-size: 1.1em; }
.A_BtnPlataforma--yt i { color: var(--blanco); }
.A_BtnPlataforma--sp i { color: var(--blanco); }

/* CTA de scroll */
.A_HeroScroll {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--naranja1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.5rem;
    transition: gap var(--t-fast), opacity var(--t-fast);
    width: fit-content;
}
.A_HeroScroll:hover { gap: 0.85rem; opacity: 0.80; }
.A_HeroScroll i { animation: bounceDown 2s ease-in-out infinite; }
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}

/* Imagen derecha */
.D_HeroImagen {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 58%;
    z-index: 1;
    overflow: visible;
}
.D_HeroMicro {
    position: absolute;
    top: 50%; right: 5%;
    transform: translateY(-50%) scaleX(1.45);
    transform-origin: right center;
    height: 92%; width: auto;
    opacity: 0.50;
    z-index: 1;
    pointer-events: none;
    filter: brightness(0.75);
}
.D_HeroImg--landscape {
    position: absolute;
    left: 3%; bottom: -22px;
    height: 100%; width: auto;
    display: block;
    z-index: 2;
}
.D_HeroImg--portrait { 
    display: none; 
}

.D_HeroImagen hr{
    display: none;
}


/* ============================================================
   ESTADÍSTICAS
   ============================================================ */
.S_Stats {
    background: var(--fondo1);
    padding: var(--gap-xl) var(--px-section);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.D_StatsInner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.D_StatItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: var(--gap-md) var(--gap-lg);
}
.D_StatIcon {
    font-size: var(--fs-lg);
    color: var(--naranja-borde);
    margin-bottom: 0.2rem;
}
.P_StatLabel {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--blanco-op2);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.Span_StatNumero {
    font-family: var(--font-display);
    font-size: var(--fs-stat);
    font-weight: var(--fw-black);
    color: var(--naranja1);
    line-height: 1;
    letter-spacing: -0.025em;
}
.D_StatDivider {
    width: 1px;
    height: clamp(3.5rem, 9vw, 6.5rem);
    background: rgba(232,84,26,0.20);
    flex-shrink: 0;
}


/* ============================================================
   ÚLTIMO EPISODIO — Video
   ============================================================ */
.S_VideoDestacado {
    background: #080E1C;
    padding: var(--gap-2xl) var(--px-section);
    border-bottom: 1px solid rgba(232,84,26,0.10);
}
.D_VideoInner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--gap-2xl);
    align-items: center;
}

/* Columna texto */
.D_VideoTexto {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}
.Span_VideoEtiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--naranja1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.Span_VideoEtiqueta i { font-size: 1.05em; }

.H2_VideoTitulo {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    line-height: 1.30;
    letter-spacing: -0.015em;
}
.P_VideoDesc {
    font-size: var(--fs-base);
    color: var(--gris1);
    line-height: 1.80;
}
.D_VideoAcciones {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    margin-top: var(--gap-xs);
}
.A_VideoCTA {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    padding: 0.65rem 1.35rem;
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.A_VideoCTA:hover { transform: translateY(-2px); opacity: 0.88; }
.A_VideoCTA--yt { background: #D63B15; color: var(--blanco); }
.A_VideoCTA--yt:hover { box-shadow: 0 4px 20px rgba(214,59,21,0.50); opacity: 1; }
.A_VideoCTA--sp { background: transparent; border-color: rgba(29,185,84,0.55); color: #1DB954; }
.A_VideoCTA--sp:hover { background: rgba(29,185,84,0.10); }
.A_VideoCTA i { font-size: 1.05em; }

/* Columna video */
.D_VideoEmbed { width: 100%; }
.D_VideoWrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(232,84,26,0.18);
}
.D_VideoWrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: none;
}


/* ============================================================
   EPISODIOS DESTACADOS
   ============================================================ */
.S_Episodios {
    background: var(--fondo1);
    padding: var(--gap-2xl) var(--px-section);
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.03);
}

/* Heading secciones oscuras */
.H2_Seccion {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    text-align: center;
    margin-bottom: var(--gap-xl);
    letter-spacing: -0.015em;
}

.D_EpisodiosGrid {
    max-width: var(--max-width);
    margin: 0 auto var(--gap-lg);
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: var(--gap-md);
    align-items: stretch;   /* todas las cards igual altura */
}

.D_EpisodioCard {
    background: var(--fondo-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    height: 100%;           /* ocupa toda la altura de la celda */
    transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.D_EpisodioCard:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.70);
    border-color: var(--naranja-borde);
}
.D_EpisodioCard--destacado { border-color: rgba(232,84,26,0.22); box-shadow: 0 8px 40px rgba(232,84,26,0.12); }
.D_EpisodioCard--destacado:hover { box-shadow: 0 20px 60px rgba(232,84,26,0.28); }

.D_EpisodioImgWrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--fondo2);
}
.Img_Episodio {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform var(--t-slow);
}
.D_EpisodioCard:hover .Img_Episodio { transform: scale(1.05); }

.Span_EpisodioNum {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem; height: 1.8rem;
    border-radius: 50%;
    background: var(--degradado-naranja);
    color: var(--blanco);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    font-family: var(--font-display);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.D_EpisodioGradiente {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 58%;
    background: var(--degradado-ep-card);
    z-index: 1;
    pointer-events: none;
}

.D_EpisodioInfo {
    padding: var(--gap-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    flex: 1;
}
.D_EpisodioTituloRow {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.H3_Episodio {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    line-height: 1.3;
}
.P_EpisodioSub {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--naranja1);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.P_EpisodioSub i { font-size: 0.65em; }
.Span_EpisodioFecha {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-xs);
    color: var(--gris1);
    margin-bottom: 0.15rem;
}
.Span_EpisodioFecha i { color: var(--naranja1); font-size: 0.85em; }

.P_EpisodioDesc {
    font-size: var(--fs-xs);
    color: var(--gris1);
    line-height: 1.70;
    flex: 1;
}

.D_EpisodioMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--gap-sm);
    padding-top: var(--gap-sm);
    border-top: 1px solid rgba(255,255,255,0.07);
}
.D_EpisodioPlataformas {
    display: flex;
    gap: var(--gap-sm);
    align-items: center;
    font-size: var(--fs-lg);
}
.D_EpisodioPlataformas a { color: var(--gris1); transition: color var(--t-fast), transform var(--t-fast); }
.D_EpisodioPlataformas a:hover { transform: scale(1.15); }
.D_EpisodioPlataformas .fa-youtube:hover { color: #FF0000; }
.D_EpisodioPlataformas .fa-spotify:hover { color: #1DB954;  }

.Span_EpisodioViews {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--gris1);
    background: rgba(255,255,255,0.05);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
}
.Span_EpisodioViews i { color: var(--naranja1); }

/* CTA por card */
.A_EpisodioEscuchar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--gap-sm);
    background: var(--naranja-opaco);
    border: 1px solid var(--naranja-borde);
    color: var(--naranja1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.A_EpisodioEscuchar:hover {
    background: var(--degradado-naranja);
    color: var(--blanco);
    border-color: transparent;
}
.A_EpisodioEscuchar i { font-size: 0.9em; }

/* Ver todos — botón real */
.A_VerMasEpisodios {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: transparent;
    border: 1.5px solid var(--naranja1);
    color: var(--naranja1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-full);
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.A_VerMasEpisodios:hover {
    background: var(--naranja1);
    color: var(--blanco);
    box-shadow: var(--shadow-naranja);
    transform: translateY(-2px);
}
.A_VerMasEpisodios i { transition: transform var(--t-fast); }
.A_VerMasEpisodios:hover i { transform: translateX(4px); }

/* Separador entre Episodios y Quote */
.Hr_Separador {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: var(--gap-xl) var(--px-section) 0;
}

/* Descripción colapsada + botón ver más */
.P_EpisodioDesc--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.P_EpisodioDesc--clamp.expandido {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.Btn_VerMasDesc {
    background: none;
    border: none;
    color: var(--naranja1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    padding: 0.2rem 0;
    margin-top: 0.2rem;
    transition: opacity var(--t-fast);
    text-align: left;
}
.Btn_VerMasDesc:hover { opacity: 0.75; }



/* ── Carrusel Episodios Recientes ─────────────────────────── */
.D_RecientesSwiper {
    max-width: var(--max-width);
    margin: 0 auto var(--gap-lg);
    position: relative;
    padding: 0 3.6rem;
}

.swiper-Recientes {
    overflow: hidden;
}

/* Slide lateral más pequeño — efecto centrado */
.swiper-Recientes .swiper-slide {
    height: auto;
    display: flex;
    transition: transform 0.35s ease, opacity 0.35s ease;
    opacity: 0.70;
    transform: scale(0.92);
}
.swiper-Recientes .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

/* Paginación */
.swiper-Recientes-pag.swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: var(--gap-md);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.swiper-Recientes-pag .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: rgba(232,84,26,0.28);
    opacity: 1;
    border-radius: var(--radius-full);
    transition: background var(--t-mid), width var(--t-mid);
    margin: 0 !important;
}
.swiper-Recientes-pag .swiper-pagination-bullet-active {
    background: var(--naranja1);
    width: 26px;
    box-shadow: 0 0 10px rgba(232,84,26,0.55);
}

/* Flechas carrusel recientes */
.swiper-Recientes-prev,
.swiper-Recientes-next {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 1.2rem));
    z-index: 10;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background: var(--naranja-opaco);
    border: 1.5px solid var(--naranja-borde);
    color: var(--naranja1);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.swiper-Recientes-prev { left: 0.3rem; }
.swiper-Recientes-next { right: 0.3rem; }
.swiper-Recientes-prev:hover,
.swiper-Recientes-next:hover {
    background: var(--naranja1);
    border-color: var(--naranja1);
    color: var(--blanco);
    box-shadow: var(--shadow-naranja);
    transform: translateY(calc(-50% - 1.2rem)) scale(1.10);
}





/* ============================================================
   QUOTE / CITA
   ============================================================ */
.S_Quote {
    background: var(--fondo1);
    padding: clamp(3rem, 6vw, 5.5rem) var(--px-section);
    position: relative;
    overflow: visible;
    margin-top: -2px;
}
.S_Quote::before {
    content: '';
    position: absolute;
    top: 50%; left: 8%;
    transform: translateY(-50%);
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(232,84,26,0.06) 0%, transparent 65%);
    z-index: 0; pointer-events: none;
}

.D_QuoteInner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3rem, 6vw, 7rem);
    position: relative;
    z-index: 1;
}

/* Foto */
.D_QuoteFotoWrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 64px;
    margin: -64px;
}
.D_QuoteFoto {
    width:  clamp(200px, 20vw, 290px);
    height: clamp(200px, 20vw, 290px);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--naranja1);
    box-shadow: 0 0 0 7px rgba(232,84,26,0.12), var(--shadow-lg);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.D_QuoteFoto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* Anillos pulsantes */
@keyframes ring-pulse-1 {
    0%   { transform: translate(-50%,-50%) scale(1);    opacity: 0.50; }
    50%  { transform: translate(-50%,-50%) scale(1.07); opacity: 0.15; }
    100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.50; }
}
@keyframes ring-pulse-2 {
    0%   { transform: translate(-50%,-50%) scale(1);    opacity: 0.24; }
    50%  { transform: translate(-50%,-50%) scale(1.09); opacity: 0.06; }
    100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.24; }
}
.D_QuoteRing {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1.5px solid var(--naranja1);
    z-index: 1; pointer-events: none;
}
.D_QuoteRing--1 {
    width:  calc(clamp(200px, 20vw, 290px) + 56px);
    height: calc(clamp(200px, 20vw, 290px) + 56px);
    animation: ring-pulse-1 3.2s ease-in-out infinite;
}
.D_QuoteRing--2 {
    width:  calc(clamp(200px, 20vw, 290px) + 116px);
    height: calc(clamp(200px, 20vw, 290px) + 116px);
    animation: ring-pulse-2 3.2s ease-in-out infinite 0.75s;
}
@media (prefers-reduced-motion: reduce) { .D_QuoteRing { animation: none !important; } }

/* Texto */
.D_QuoteTexto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}
.Span_QuoteIcon {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(4rem, 7vw, 6rem);
    color: var(--naranja1);
    line-height: 0.55;
    display: block;
    margin-bottom: -0.4rem;
}
.P_QuoteTexto {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.2vw, 2.20rem);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    line-height: 1.50;
    letter-spacing: -0.02em;
}
.Em_Naranja { color: var(--naranja1); font-style: normal; font-weight: var(--fw-black); }
.Strong_QuoteAutor {
    font-family: var(--font-display);
    font-size: clamp(1.0rem, 1.8vw, 1.40rem);
    font-weight: var(--fw-bold);
    color: var(--naranja1);
    font-style: italic;
    letter-spacing: 0.02em;
    display: block;
}




/* ============================================================
   HOJA DE RUTA / VIAJE
   ============================================================ */
.S_HojaRuta {
    background: var(--fondo2);
    padding: var(--gap-2xl) var(--px-section);
    text-align: center;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.D_HojaRutaHeader {
    margin-bottom: var(--gap-2xl);
}
.Span_HojaRutaEtiqueta {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--naranja1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: var(--gap-sm);
    opacity: 0.85;
}
.H2_HojaRutaTitulo {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    letter-spacing: -0.01em;
}

.D_HojaRutaSteps {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-sm);
}

/* Línea conectora */
.D_HojaRutaSteps::before {
    content: '';
    position: absolute;
    top: calc(clamp(3rem, 5vw, 4rem) / 2);
    left: 12%; right: 12%;
    height: 2px;
    background: var(--degradado-naranja);
    z-index: 0;
    opacity: 0.55;
}

.D_HojaRutaStep {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0 0.4rem;
}

/* Icono circular — fondo opaco para tapar la línea conectora */
.D_HojaRutaIcon {
    width:  clamp(3rem, 5vw, 4rem);
    height: clamp(3rem, 5vw, 4rem);
    border-radius: 50%;
    background: var(--fondo2);
    border: 2px solid var(--naranja-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    color: var(--naranja1);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: background var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid);
}
.D_HojaRutaStep:hover .D_HojaRutaIcon {
    background: rgba(13,27,62,0.95);
    border-color: var(--naranja1);
    box-shadow: var(--naranja-glow);
    transform: scale(1.08);
}

.Span_HojaRutaNum {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: var(--fw-black);
    color: var(--naranja1);
    line-height: 1;
    display: block;
    margin-top: 0.2rem;
}
.H3_HojaRuta {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    letter-spacing: 0.01em;
    line-height: 1.3;
}
.P_HojaRuta {
    font-size: var(--fs-xs);
    color: var(--gris2);
    line-height: 1.65;
    max-width: 100%;
    opacity: 0.80;
}
/* Botón descarga PDF */
.D_HojaRutaDescarga {
    display: flex;
    justify-content: center;
    margin-top: var(--gap-2xl);
}
.A_HojaRutaDescarga {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: transparent;
    border: 1.5px solid var(--naranja1);
    color: var(--naranja1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.80rem 2.2rem;
    border-radius: var(--radius-full);
    transition: background var(--t-fast), color var(--t-fast),
                box-shadow var(--t-fast), transform var(--t-fast);
}
.A_HojaRutaDescarga:hover {
    background: var(--naranja1);
    color: var(--blanco);
    box-shadow: var(--shadow-naranja);
    transform: translateY(-2px);
}
.A_HojaRutaDescarga i { font-size: 1.1em; }
@keyframes descargaBounce {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(4px); }
    70%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}
.A_HojaRutaDescarga:hover i { animation: descargaBounce 0.5s ease; }
.Span_DescargaBadge {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-black);
    letter-spacing: 0.12em;
    background: var(--naranja-opaco);
    border: 1px solid var(--naranja-borde);
    color: var(--naranja1);
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.A_HojaRutaDescarga:hover .Span_DescargaBadge {
    background: rgba(255,255,255,0.18);
    color: var(--blanco);
    border-color: transparent;
}


/* ── Testimonios swiper — flechas fuera de las cards ────── */
.D_TestimoniosSwiper {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    padding: 0 3.6rem;
}
.swiper-Testimonios-prev,
.swiper-Testimonios-next {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 1.4rem));
    z-index: 10;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background: var(--naranja-opaco);
    border: 1.5px solid var(--naranja-borde);
    color: var(--naranja1);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.swiper-Testimonios-prev { left: 0.3rem; }
.swiper-Testimonios-next { right: 0.3rem; }
.swiper-Testimonios-prev:hover,
.swiper-Testimonios-next:hover {
    background: var(--naranja1);
    border-color: var(--naranja1);
    color: var(--blanco);
    box-shadow: var(--shadow-naranja);
    transform: translateY(calc(-50% - 1.4rem)) scale(1.10);
}
.swiper-button-disabled { opacity: 0.22 !important; pointer-events: none; }






/* ============================================================
   MARCAS COLABORADORAS
   ============================================================ */
.S_Marcas {
    padding: var(--gap-2xl) var(--px-section);
    background: var(--fondo2);
    position: relative;
    overflow: hidden;
}

/* Línea decorativa superior */
.S_Marcas::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 10vw, 120px);
    height: 2px;
    background: var(--degradado-naranja);
    border-radius: var(--radius-full);
}

.D_MarcasInner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
}

/* Cabecera */
.D_MarcasHeader {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
}

.Span_MarcasEtiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--naranja1);
    background: var(--naranja-opaco);
    border: 1px solid var(--naranja-borde);
    padding: 0.35em 1em;
    border-radius: var(--radius-full);
}

.H2_MarcasTitulo {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extrabold);
    color: var(--blanco);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.P_MarcasDesc {
    font-size: var(--fs-sm);
    color: var(--blanco-op2);
    max-width: 520px;
    text-align: center;
    line-height: 1.6;
}



/* Grid de logos */
.D_MarcasGrid,
.D_MarcasExtra {
    width: 100%;
    height: 10rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap-lg);
}

/* Card de cada marca */
.D_MarcaItem {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    aspect-ratio: 2 / 1;
    transition: transform var(--t-mid), opacity var(--t-mid);
    position: relative;
    overflow: visible;
}

.D_MarcaItem:hover {
    background: transparent;
    border-color: transparent;
    transform: translateY(-4px) scale(1.08);
    box-shadow: none;
}

.D_MarcaItem img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    opacity: 0.88;
    transition: opacity var(--t-mid);
}

.D_MarcaItem:hover img {
    opacity: 1;
    filter: none;
}

/* Skeleton loader */
.D_MarcaItem--skeleton {
    background: linear-gradient(
        90deg,
        var(--blanco-op3) 25%,
        rgba(255,255,255,0.05) 50%,
        var(--blanco-op3) 75%
    );
    background-size: 200% 100%;
    animation: marcas-shimmer 1.6s infinite;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radius-md);
    aspect-ratio: 16 / 7;
    pointer-events: none;
}

@keyframes marcas-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Estado vacío */
.D_MarcasVacio {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--gap-xl) 0;
    color: var(--blanco-op2);
    font-size: var(--fs-sm);
}

/* Extra — continúa el gap del grid principal */
.D_MarcasExtra {
    margin-top: calc(-1 * var(--gap-md));
}

/* Botón Ver Más */
.D_MarcasVerMasWrap {
    display: flex;
    justify-content: center;
    margin-top: calc(-1 * var(--gap-sm));
}

.Btn_MarcasVerMas {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--naranja1);
    background: var(--naranja-opaco);
    border: 1px solid var(--naranja-borde);
    border-radius: var(--radius-full);
    padding: 0.6em 1.6em;
    cursor: pointer;
    transition: background var(--t-mid), color var(--t-mid), transform var(--t-mid);
    letter-spacing: 0.04em;
}

.Btn_MarcasVerMas:hover {
    background: var(--naranja1);
    color: var(--blanco);
    transform: translateY(-2px);
}

.Btn_MarcasVerMas i {
    transition: transform var(--t-mid);
}

.Btn_MarcasVerMas[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Responsive Marcas */
@media (max-width: 900px) {
    .D_MarcasGrid,
    .D_MarcasExtra {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .D_MarcasGrid,
    .D_MarcasExtra {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gap-md);
    }
}

@media (max-width: 400px) {
    .D_MarcasGrid,
    .D_MarcasExtra {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   TESTIMONIOS — Carrusel Swiper
   ============================================================ */
.S_Testimonios {
    background: var(--fondo1);
    padding: var(--gap-2xl) var(--px-section);
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.03);
    /* sin overflow:hidden — las flechas deben salir del wrapper */
}
 
/* Wrapper: padding lateral = espacio reservado para las flechas externas */
.D_TestimoniosSwiper {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    padding: 0 3.6rem;
}
 
/* Slides misma altura */
.swiper-Testimonios .swiper-slide {
    height: auto;
    display: flex;
}
 
/* ---- Card ---- */
.D_TestimonioCard {
    background: var(--degradado-naranja);
    border-radius: var(--radius-lg);
    padding: var(--gap-lg) var(--gap-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    text-align: left;
    position: relative;
    overflow: hidden;
    flex: 1;
    transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.D_TestimonioCard::after {
    content: '';
    position: absolute;
    bottom: -2.5rem; right: -2.5rem;
    width: 9rem; height: 9rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
}
.D_TestimonioCard:hover { transform: translateY(-5px); box-shadow: var(--shadow-naranja); }
 
.D_TestimonioCard--centro {
    background: var(--fondo-card);
    border: 1px solid var(--naranja-borde);
}
 
.Span_TestimonioIcon {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-family: Georgia, serif;
    color: rgba(255,255,255,0.85);
    line-height: 0.8;
    display: block;
}
.D_TestimonioCard--centro .Span_TestimonioIcon { color: var(--naranja1); }
 
.P_Testimonio { font-size: var(--fs-sm); color: var(--blanco); line-height: 1.78; flex: 1; }
 
.Strong_TestimonioAutor {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    font-style: normal;
    display: block;
    line-height: 1.45;
}
.D_TestimonioCard--centro .Strong_TestimonioAutor { color: var(--naranja1); }
 
.Span_TestimonioCargo {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: rgba(255,255,255,0.60);
    margin-top: 0.15rem;
}
.D_TestimonioCard--centro .Span_TestimonioCargo { color: var(--gris1); }
 
/* ---- Paginación: puntos naranja elongados ---- */
.swiper-Testimonios-pag.swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: var(--gap-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.swiper-Testimonios-pag .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: rgba(232,84,26,0.28);
    opacity: 1;
    border-radius: var(--radius-full);
    transition: background var(--t-mid), width var(--t-mid);
    margin: 0 !important;
}
.swiper-Testimonios-pag .swiper-pagination-bullet-active {
    background: var(--naranja1);
    width: 26px;
    box-shadow: 0 0 10px rgba(232,84,26,0.55);
}
 
/* ---- Flechas: viven en el padding del wrapper, totalmente fuera de las cards ---- */
.swiper-Testimonios-prev,
.swiper-Testimonios-next {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 1.4rem)); /* -1.4rem: compensa la paginación */
    z-index: 10;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background: var(--naranja-opaco);
    border: 1.5px solid var(--naranja-borde);
    color: var(--naranja1);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
/* Pegadas al borde interior del padding — nunca encima de las cards */
.swiper-Testimonios-prev { left: 0.3rem; }
.swiper-Testimonios-next { right: 0.3rem; }
 
.swiper-Testimonios-prev:hover,
.swiper-Testimonios-next:hover {
    background: var(--naranja1);
    border-color: var(--naranja1);
    color: var(--blanco);
    box-shadow: var(--shadow-naranja);
    transform: translateY(calc(-50% - 1.4rem)) scale(1.10);
}
.swiper-button-disabled { opacity: 0.22 !important; pointer-events: none; }
 
 
/* ============================================================
   ACERCA DE
   ============================================================ */
.S_Acercade {
    background: var(--fondo2);
    padding: var(--gap-2xl) var(--px-section);
    border-top: 1px solid rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
}

/* Dots decorativos — lado izquierdo, espejo del hero */
.D_AcercadeDecoracion {
    position: absolute;
    top: 0; left: 0;
    width: 50%; height: 100%;
    background-image: url('img/Fondo.png');
    background-size: 55%;
    background-position: center left;
    opacity: 0.07;
    z-index: 0;
    pointer-events: none;
}

.D_Acercade {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--gap-2xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Columna imagen — logo centrado con glow */
.D_AcercadeImagen {
    display: flex;
    align-items: center;
    justify-content: center;
}
.D_AcercadeLogoWrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Img_LogoPodcast {
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform var(--t-slow);
}
.Img_LogoPodcast:hover { transform: scale(1.04) rotate(-1deg); }
.D_AcercadeLogoGlow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(ellipse, rgba(232,84,26,0.18) 0%, transparent 65%);
    z-index: 0;
    pointer-events: none;
    animation: logoGlow 4s ease-in-out infinite alternate;
}
@keyframes logoGlow {
    from { opacity: 0.60; transform: scale(0.95); }
    to   { opacity: 1.00; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .D_AcercadeLogoGlow { animation: none; } }

/* Columna texto */
.D_AcercadeTexto {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}
.Span_AcercadeEtiqueta {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--naranja1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.Span_AcercadeEtiqueta i { font-size: 1em; }

.H2_Acercade {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    line-height: 1.18;
    letter-spacing: -0.01em;
}
.H2_Acercade em { font-style: normal; color: var(--naranja1); }
.P_Acercade { font-size: var(--fs-base); color: var(--gris1); line-height: 1.82; }

/* Cita de pull quote */
.D_AcercadeCita {
    border-left: 3px solid var(--naranja1);
    padding: 0.65rem 0 0.65rem 1.2rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--gris2);
    font-style: italic;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.D_AcercadeCita i { color: var(--naranja1); font-size: 0.8em; margin-top: 0.3rem; flex-shrink: 0; }

.D_AcercadeAcciones {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    margin-top: var(--gap-xs);
}
.A_BtnVerMas {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--degradado-naranja);
    color: var(--blanco);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.A_BtnVerMas:hover { transform: translateY(-2px); box-shadow: var(--shadow-naranja); }
.A_BtnVerMasOutline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1.5px solid var(--naranja-borde);
    color: var(--naranja1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.A_BtnVerMasOutline:hover { background: var(--naranja-opaco); border-color: var(--naranja1); }


/* ============================================================
   CONTACTO
   ============================================================ */
.S_Contacto {
    background: var(--fondo1);
    padding: var(--gap-2xl) var(--px-section);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.D_ContactoInner {
    max-width: var(--max-width);
    margin: 0 auto;
}
.D_ContactoHeader {
    text-align: center;
    margin-bottom: var(--gap-2xl);
}
.Span_ContactoEtiqueta {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--naranja1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--gap-sm);
}
.H2_ContactoSub {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    color: var(--blanco);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.P_ContactoDesc {
    font-size: var(--fs-base);
    color: var(--gris1);
    margin-top: var(--gap-sm);
}

/* Layout contacto: info | formulario — más compacto */
.D_ContactoFlex {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: var(--gap-xl);
    align-items: start;
}

/* Info lateral */
.D_ContactoInfo {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}
.D_ContactoInfoItem {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
}
.D_ContactoInfoIcono {
    width: 3rem; height: 3rem;
    border-radius: var(--radius-md);
    background: var(--naranja-opaco);
    border: 1px solid var(--naranja-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    color: var(--naranja1);
    flex-shrink: 0;
    transition: background var(--t-fast), transform var(--t-fast);
}
.D_ContactoInfoItem:hover .D_ContactoInfoIcono { background: rgba(232,84,26,0.22); transform: scale(1.05); }
.D_ContactoInfoIcono--wa { color: #25D366; background: rgba(37,211,102,0.10); border-color: rgba(37,211,102,0.30); }
.D_ContactoInfoIcono--yt { color: #FF0000; background: rgba(255,0,0,0.10); border-color: rgba(255,0,0,0.25); }
.D_ContactoInfoIcono--ig { color: #E4405F; background: rgba(228,64,95,0.10); border-color: rgba(228,64,95,0.25); }

.P_ContactoInfoLabel {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--gris1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.A_ContactoInfoLink {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--blanco-op1);
    transition: color var(--t-fast);
    word-break: break-all;
}
.A_ContactoInfoLink:hover { color: var(--naranja1); }

/* Tarjeta formulario */
.D_ContactoCard {
    background: var(--fondo3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: var(--gap-xl);
}
.H3_ContactoTitulo {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--blanco);
    text-align: center;
    margin-bottom: var(--gap-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.H3_ContactoTitulo i { color: var(--naranja1); }

/* Formulario */
.F_Form { display: flex; flex-direction: column; gap: var(--gap-md); }
.F_Hp   { display: none !important; }
.F_Grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.F_Label {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--gris2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.F_Label span { display: flex; align-items: center; gap: 0.4rem; }
.F_Label i { color: var(--naranja1); font-size: 0.9em; }

.F_Input,
.F_Textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--blanco);
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
    -webkit-appearance: none;
}
.F_Input::placeholder,
.F_Textarea::placeholder { color: rgba(255,255,255,0.20); }
.F_Input:focus,
.F_Textarea:focus {
    border-color: var(--naranja1);
    background: rgba(232,84,26,0.06);
    box-shadow: 0 0 0 3px rgba(232,84,26,0.14);
}
.F_Textarea { resize: vertical; min-height: 130px; line-height: 1.65; }

.F_Actions { display: flex; justify-content: center; margin-top: var(--gap-xs); }
.F_BtnPrimario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: var(--degradado-naranja);
    color: var(--blanco);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.88rem 3rem;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.F_BtnPrimario:hover:not(:disabled) { transform: scale(1.03); box-shadow: var(--shadow-naranja); }
.F_BtnPrimario:disabled { opacity: 0.50; cursor: not-allowed; }

.F_Flash {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-mid), padding var(--t-mid);
    text-align: center;
}
.F_Flash:not(:empty) { padding: 0.85rem 1.1rem; max-height: 6rem; }
.F_Flash--ok  { background: rgba(29,185,84,0.10); border: 1px solid rgba(29,185,84,0.28); color: #4ADE80; }
.F_Flash--err { background: rgba(220,38,38,0.10); border: 1px solid rgba(220,38,38,0.30); color: #FCA5A5; }


/* ============================================================
   FOOTER
   ============================================================ */
.Footer {
    background: radial-gradient(ellipse at 50% 0%, #1B2F72 0%, #0D1B3E 50%, #080F22 100%);
    padding: var(--gap-lg) var(--px-section) var(--gap-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center;
}
.D_FooterLogo { display: flex; align-items: center; justify-content: center; transition: transform var(--t-fast), opacity var(--t-fast); }
.D_FooterLogo:hover { transform: scale(1.04); opacity: 0.85; }
.D_FooterLogo img { height: clamp(3rem, 8vw, 5rem); width: auto; object-fit: contain; }

.D_FooterSocial { display: flex; align-items: center; gap: var(--gap-sm); }
.A_FooterSocial {
    width: 2.8rem; height: 2.8rem;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--blanco-op2);
    font-size: var(--fs-md);
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.A_FooterSocial:hover { transform: translateY(-3px); }
.A_FooterSocial--yt:hover { border-color: #FF0000; color: #FF0000; background: rgba(255,0,0,0.10); }
.A_FooterSocial--ig:hover { border-color: #E4405F; color: #E4405F; background: rgba(228,64,95,0.10); }
.A_FooterSocial--tk:hover { border-color: #69C9D0; color: #69C9D0; background: rgba(105,201,208,0.10); }
.A_FooterSocial--fb:hover { border-color: #1877F2; color: #1877F2; background: rgba(24,119,242,0.10); }
.A_FooterSocial--sp:hover { border-color: #1DB954; color: #1DB954; background: rgba(29,185,84,0.10); }
.A_FooterSocial--wa:hover { border-color: #25D366; color: #25D366; background: rgba(37,211,102,0.10); }
.A_FooterSocial--em:hover { border-color: var(--naranja1); color: var(--naranja1); background: var(--naranja-opaco); }
.A_FooterSocial--wa:hover { border-color: #25D366; color: #25D366; background: rgba(37,211,102,0.10); }
.A_FooterSocial--em:hover { border-color: var(--naranja1); color: var(--naranja1); background: var(--naranja-opaco); }

.D_FooterNav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs) var(--gap-lg);
}
.D_FooterNav a {
    font-size: var(--fs-sm);
    color: var(--blanco-op2);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: var(--fw-medium);
    transition: color var(--t-fast);
}
.D_FooterNav a:hover { color: var(--blanco); }

.D_FooterHashtag {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--naranja1);
    letter-spacing: 0.08em;
    opacity: 0.70;
}

.P_FooterCopy { font-size: var(--fs-xs); color: var(--blanco-op2); opacity: 0.38; }


/* ============================================================
   BOTÓN FLOTANTE MÓVIL
   ============================================================ */
.A_FloatCTA {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--degradado-naranja);
    color: var(--blanco);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-naranja), 0 4px 20px rgba(0,0,0,0.40);
    transform: translateY(100px) scale(0.9);
    opacity: 0;
    transition: transform var(--t-mid), opacity var(--t-mid);
    pointer-events: none;
}
.A_FloatCTA.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}
.A_FloatCTA:hover { filter: brightness(1.08); transform: translateY(-2px) scale(1); }
.A_FloatCTA i { font-size: 0.9em; }

/* Solo mostrar en mobile/tablet */
@media only screen and (min-width: 1024px) { .A_FloatCTA { display: none; } }


/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */
.anim-derecha,
.anim-izquierda,
.anim-abajo {
    transition:
        opacity   0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anim-derecha   { opacity: 0; transform: translateX(70px);  }
.anim-izquierda { opacity: 0; transform: translateX(-70px); }
.anim-abajo     { opacity: 0; transform: translateY(50px);  }

.anim-delay-1 { transition-delay: 0.12s; }
.anim-delay-2 { transition-delay: 0.24s; }
.anim-delay-3 { transition-delay: 0.36s; }
.anim-delay-4 { transition-delay: 0.48s; }
.anim-delay-5 { transition-delay: 0.60s; }

.anim-visible.anim-derecha,
.anim-visible.anim-izquierda { opacity: 1; transform: translateX(0); }
.anim-visible.anim-abajo     { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .anim-derecha, .anim-izquierda, .anim-abajo {
        transition: opacity 0.3s ease !important;
        transform: none !important;
    }
    .A_HeroScroll i, @keyframes bounceDown { animation: none; }
    .Span_AudioWave b { animation: none; height: 50% !important; }
}


/* RESPONSIVE_______________________________________ */
/* ============================================================
   RESPONSIVE — PORTRAIT
   ============================================================ */
@media (orientation: portrait) {

    /* Stats */
    .D_StatsInner {
        flex-direction: column;
        gap: 0;
    }

    .D_StatDivider {
        width: clamp(5rem, 50vw, 12rem);
        height: 1px;
    }

    /* Video */
    .D_VideoInner {
        grid-template-columns: 1fr;
    }

    .D_VideoTexto {
        order: 2;
    }

    .D_VideoEmbed {
        order: 1;
    }

    /* Episodios */
    .D_EpisodiosGrid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    .D_EpisodioCard--destacado {
        order: -1;
    }

    /* Quote */
    .D_QuoteInner {
        flex-direction: column;
        text-align: center;
        gap: var(--gap-xl);
    }

    .D_QuoteFotoWrap {
        padding: 48px;
        margin: -48px;
    }

    .D_QuoteTexto {
        align-items: center;
    }

    .Span_QuoteIcon {
        text-align: center;
        margin-bottom: 0;
    }

    /* Hoja de Ruta */
    .D_HojaRutaSteps {
        flex-direction: column;
        max-width: 380px;
        margin: 0 auto;
        gap: var(--gap-lg);
    }

    .D_HojaRutaSteps::before {
        display: none;
    }

    .D_HojaRutaStep {
        flex-direction: row;
        text-align: left;
        gap: var(--gap-md);
    }

    .P_HojaRuta {
        max-width: 100%;
    }

    .Span_HojaRutaNum {
        margin-top: 0;
    }

    /* Acercade */
    .D_Acercade {
        grid-template-columns: 1fr;
    }

    .D_AcercadeImagen {
        order: 1;
    }

    .D_AcercadeTexto {
        order: 2;
    }

    /* Contacto */
    .D_ContactoFlex {
        grid-template-columns: 1fr;
    }

    .F_Grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .D_FooterNav ul {
        flex-direction: column;
        gap: var(--gap-sm);
    }
}


/* ============================================================
   ≤ 1024px
   ============================================================ */
@media only screen and (max-width: 1024px) {

    /* Hero */
    .S_Hero {
        min-height: 100svh;
        padding: 6rem var(--px-section) 2rem;
    }

    .D_HeroImagen {
        transform: translate(-5%, 20%);
        height: 85%;
    }

    .D_HeroContenido {
        max-width: 50%;
        z-index: 4;
        padding-bottom: 1rem;
    }

    .D_HeroMicro {
        right: -5%;
        height: 80%;
    }

    /* Otros */
    .D_VideoInner {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--gap-xl);
    }

    .D_Acercade {
        gap: var(--gap-xl);
    }

    .D_ContactoFlex {
        gap: var(--gap-xl);
    }
}


/* ============================================================
   ≤ 900px
   ============================================================ */
@media only screen and (max-width: 900px) {

    .Ul_NavLinks {
        display: none;
    }

    .Btn_MenuBars {
        display: flex;
    }

    .A_Contacto {
        display: none;
    }

    .Nav_Principal {
        grid-template-columns: auto 1fr;
        gap: var(--gap-md);
    }

    .A_NavLogo {
        grid-column: 1;
        justify-content: flex-start;
    }

    .D_NavDer {
        grid-column: 2;
    }

    /* Hero — layout vertical: imagen arriba, texto abajo, sin solapamiento */
    .S_Hero {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding-top: clamp(4rem, 9vw, 5.5rem);
        padding-bottom: 2.5rem;
        min-height: 100svh;
    }

    .S_Hero::before {
        width: 100%;
        height: 50%;
    }

    .D_HeroInner {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    /* Imagen sale del flujo absoluto y se coloca arriba con order */
    .D_HeroImagen {
        position: relative;
        inset: auto;
        transform: none;
        order: -1;
        width: 100%;
        height: clamp(220px, 48vw, 400px);
        overflow: visible;
    }

    .D_HeroImagen hr {
        display: block;
        position: absolute;
        bottom: -2px;
        left: 10%;
        z-index: 20;
        height: 4px;
        width: 80%;
        background: var(--degradado-naranja);
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 20px 4px var(--fondo-card);
    }

    .D_HeroImg--landscape {
        display: none;
    }

    .D_HeroImg--portrait {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        height: 100%;
        width: auto;
    }

    /* Contenido: ocupa todo el ancho, centrado */
    .D_HeroContenido {
        max-width: 100%;
        text-align: center;
        align-items: center;
        margin-top: 2.5rem;
    }

    .Span_HeroBadge {
        margin: 0 auto;
    }

    .D_HeroBotones {
        justify-content: center;
        margin: 0 auto;
    }

    .A_HeroScroll {
        justify-content: center;
        margin: 0 auto;
    }

    .D_HeroMicro {
        right: 50%;
        transform: translate(60%, -43%);
        height: 90%;
        width: auto;
        z-index: 0;
    }

    /* Otros */
    .D_EpisodiosGrid {
        grid-template-columns: 1fr 1fr;
    }

    .D_VideoInner {
        grid-template-columns: 1fr;
    }

    .D_VideoTexto {
        order: 2;
    }

    .D_VideoEmbed {
        order: 1;
    }
}

@media only screen and (max-width: 812px){
    .D_AcercadeTexto, .D_AcercadeTexto span, .D_AcercadeTexto blockquote, .D_AcercadeTexto div{
        text-align: center;
        margin: auto;
    }

}


/* ============================================================
   ≤ 768px
   ============================================================ */
@media only screen and (max-width: 768px) {

    .D_EpisodiosGrid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    .D_Acercade {
        grid-template-columns: 1fr;
    }

    .D_ContactoFlex {
        grid-template-columns: 1fr;
    }

    .F_Grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   ≤ 640px
   ============================================================ */
@media only screen and (max-width: 640px) {

    .H2_Seccion {
        font-size: var(--fs-2xl);
    }

    .H2_Acercade {
        font-size: var(--fs-2xl);
    }

    .P_QuoteTexto {
        font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    }

    .H2_VideoTitulo {
        font-size: var(--fs-xl);
    }
}


/* ============================================================
   ≤ 480px
   ============================================================ */
@media only screen and (max-width: 480px) {

    /* Hero */
    .S_Hero {
        padding-top: 3.8rem;
        padding-bottom: 1.5rem;
    }

    .D_HeroImagen {
        height: clamp(200px, 55vw, 320px);
    }

    .H1_Hero {
        font-size: clamp(2.3rem, 11vw, 3.3rem);
    }

    .P_HeroDesc {
        font-size: 0.95rem;
        max-width: 260px;
        margin: 0 auto;
    }

    /* Otros */
    :root {
        --px-section: clamp(1rem, 4.5vw, 1.5rem);
    }

    .Header {
        padding: 0.65rem var(--px-section);
    }

    .D_ContactoCard {
        padding: var(--gap-lg) var(--gap-md);
    }

    .F_BtnPrimario {
        padding: 0.85rem 2rem;
    }

    .D_QuoteFotoWrap {
        padding: 36px;
        margin: -36px;
    }

    .D_VideoAcciones {
        flex-direction: column;
    }


    .D_HojaRutaStep{
        flex-direction: column;
        text-align: center;
    }

    .D_FooterSocial {
        gap: var(--gap-xs);
    }

    /* Swiper testimonios: flechas más pequeñas en mobile */
    .D_TestimoniosSwiper {
        padding: 0 2.8rem;
    }

    .swiper-Testimonios-prev,
    .swiper-Testimonios-next {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.72rem;
    }

    .swiper-Testimonios-prev{
        left: -3%;
    }

    .swiper-Testimonios-next{
        right: -3%;
    }
}

/* ============================================================
   ≤ 320px
   ============================================================ */
@media only screen and (max-width: 320px) {

    .D_HeroImagen hr {
        width: 85%;
    }

}


/* ============================================================
   ≤ 450px — flechas de carruseles más pequeñas
   ============================================================ */
@media only screen and (max-width: 450px) {

    .swiper-Testimonios-prev,
    .swiper-Testimonios-next,
    .swiper-Recientes-prev,
    .swiper-Recientes-next {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.65rem;
    }

}


/* ============================================================
   ≥ 1025px — persona sobresale en la sección de stats
   ============================================================ */
/* @media only screen and (min-width: 1025px) {

    .S_Hero {
        overflow: visible;
    }

    .D_HeroImg--landscape {
        bottom: -80px;
        height: 112%;
    }

} */