:root{
--purple:#9b00b6;
--purple-dark:#730087;
--burgundy:#7d1028;
--ink:#17131a;
--muted:#6f6872;
--cream:#f7f3ee;
--white:#fff;
--line:#e8e0da;
--green:#1ed760;
--orange:#ff6600;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:Arial,Helvetica,sans-serif;
}

a{
color:inherit;
}

.wrap{
width:min(1120px,calc(100% - 40px));
margin:0 auto;
}

/* =========================
CABECERA
========================= */

.topbar{
background:#fff;
border-bottom:1px solid var(--line);
}

.topbar-inner{
min-height:74px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}

.brand{
text-decoration:none;
font-weight:900;
letter-spacing:.06em;
font-size:16px;
}

.brand span{
color:var(--purple);
}

nav{
display:flex;
gap:24px;
}

nav a{
text-decoration:none;
font-size:14px;
font-weight:700;
}

nav a:hover{
color:var(--purple);
}

/* =========================
HERO
========================= */

.hero{
padding:70px 0;
background:#fff;
}

.hero .wrap{
display:grid;
grid-template-columns:360px 1fr;
align-items:center;
gap:70px;
}

.logo-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.logo{
display:block;
width:100%;
height:auto;
}

.kicker{
margin:0 0 12px;
color:var(--purple);
font-size:12px;
font-weight:900;
letter-spacing:.12em;
}

h1,
h2{
font-family:Georgia,"Times New Roman",serif;
}

h1{
margin:0;
font-size:clamp(42px,6vw,76px);
line-height:.95;
}

h1 em,
h2 em{
color:var(--burgundy);
}

.intro{
max-width:650px;
color:var(--muted);
font-size:18px;
line-height:1.6;
margin:25px 0;
}

.hero-actions{
display:flex;
align-items:center;
gap:20px;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 22px;
border-radius:999px;
text-decoration:none;
font-size:13px;
font-weight:900;
}

.btn-purple{
background:var(--purple);
color:#fff;
}

.btn-purple:hover{
background:var(--purple-dark);
}

.text-link{
color:var(--purple);
font-weight:900;
text-decoration:none;
}

/* =========================
EPISODIOS
========================= */

.episodes-section{
padding:75px 0;
}

.section-heading{
margin-bottom:35px;
}

.section-heading h2{
margin:0;
font-size:42px;
}

.episode-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:30px;
}

.rss-note{
text-align:right;
}

.rss-note p{
margin:0;
color:var(--muted);
font-size:13px;
}

/* =========================
BOTÓN TODOS LOS EPISODIOS
========================= */

.previous-episodes-button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:12px !important;

margin-top:14px !important;
padding:13px 22px !important;

background:var(--purple) !important;
color:#fff !important;

border:0 !important;
border-radius:999px !important;

text-decoration:none !important;

font-size:13px !important;
font-weight:900 !important;
letter-spacing:.05em !important;

box-shadow:0 7px 20px rgba(155,0,182,.30) !important;

transition:
transform .2s ease,
background .2s ease,
box-shadow .2s ease !important;
}

.previous-episodes-button span{
color:#fff !important;
}

.previous-episodes-button strong{
color:#fff !important;
font-size:20px !important;
line-height:1 !important;
}

.previous-episodes-button:hover{
background:var(--purple-dark) !important;
color:#fff !important;
transform:translateY(-2px) !important;
box-shadow:0 10px 25px rgba(155,0,182,.38) !important;
}

/* =========================
GRID EPISODIOS
========================= */

.episodes-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
}

.loading-card{
padding:30px;
background:#fff;
border:1px solid var(--line);
border-radius:16px;
color:var(--muted);
}

/* =========================
TARJETAS EPISODIOS
========================= */

.episode-card{
background:#fff;
border:1px solid var(--line);
border-radius:16px;
padding:18px;
box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.episode-top{
display:flex;
gap:16px;
align-items:flex-start;
}

.episode-cover{
width:80px !important;
height:80px !important;
min-width:80px !important;
max-width:80px !important;
min-height:80px !important;
max-height:80px !important;
flex:0 0 80px !important;

overflow:hidden !important;
border-radius:8px;
}

.episode-cover img{
display:block !important;

width:80px !important;
height:80px !important;

min-width:80px !important;
max-width:80px !important;
min-height:80px !important;
max-height:80px !important;

object-fit:cover !important;
border-radius:8px;
}

.episode-art{
width:80px !important;
height:80px !important;
min-width:80px !important;
max-width:80px !important;
min-height:80px !important;
max-height:80px !important;

display:flex;
align-items:center;
justify-content:center;

background:var(--burgundy);
color:#fff;

font-family:Georgia,"Times New Roman",serif;
font-weight:900;
font-size:16px;
}

.episode-meta{
min-width:0;
}

.episode-meta h3{
margin:4px 0 7px;
font-family:Georgia,"Times New Roman",serif;
font-size:20px;
line-height:1.15;
}

.episode-meta p{
margin:0;
color:var(--muted);
font-size:12px;
}

.episode-card p{
line-height:1.5;
}

.episode-card .episode-description{
color:var(--muted);
font-size:14px;
margin:18px 0;
}

.episode-card a{
color:var(--purple);
font-weight:900;
}

/* =========================
ESCUCHAR
========================= */

.listen-section{
padding:75px 0;
background:#fff;
}

.platform-grid{
display:grid;
gap:18px;
}

.platform-grid-3{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.platform{
min-height:88px;
display:flex;
align-items:center;
gap:15px;

padding:18px;

background:#fff;
border:1px solid var(--line);
border-radius:16px;

text-decoration:none;

box-shadow:0 8px 25px rgba(0,0,0,.05);

transition:
transform .2s ease,
box-shadow .2s ease;
}

.platform:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,.10);
}

/* =========================
ICONOS PLATAFORMAS
========================= */

.platform-icon{
width:52px !important;
height:52px !important;
min-width:52px !important;
max-width:52px !important;

display:flex !important;
align-items:center !important;
justify-content:center !important;

border-radius:50% !important;

flex:0 0 52px !important;

font-weight:900;
}

.platform-icon svg{
display:block !important;
width:30px !important;
height:30px !important;
fill:currentColor !important;
}

.spotify-icon{
background:var(--green) !important;
color:#fff !important;
}

.ivoox-icon{
background:var(--orange) !important;
color:#fff !important;

font-family:Arial,Helvetica,sans-serif;
font-size:18px !important;
letter-spacing:-.08em;
}

.podcast-icon{
background:var(--purple) !important;
color:#fff !important;
}

.platform-text{
flex:1;
min-width:0;
}

.platform-text strong{
display:block;
font-size:16px;
line-height:1.2;
}

.platform-text small{
display:block;
color:var(--muted);
margin-top:4px;
font-size:12px;
}

.platform b{
color:var(--purple);
font-size:20px;
}

/* =========================
SOBRE EL PROGRAMA
========================= */

.about-section{
padding:80px 0;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:start;
}

.about-title h2{
margin:0;
font-size:42px;
line-height:1.05;
}

.about-copy{
color:var(--muted);
line-height:1.7;
font-size:16px;
}

.hosts{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-top:25px;

color:var(--ink);
font-weight:900;
font-size:12px;
letter-spacing:.06em;
}

.hosts i{
color:var(--purple);
}

/* =========================
CTA
========================= */

.cta-section{
padding:30px 0 80px;
}

.cta-box{
padding:40px;
background:var(--burgundy);
color:#fff;
border-radius:22px;

display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}

.cta-box .kicker{
color:#fff;
}

.cta-box h2{
margin:0;
font-size:36px;
}

.btn-white{
background:#fff;
color:var(--burgundy);
}

/* =========================
FOOTER
========================= */

footer{
background:#17131a;
color:#fff;
padding:25px 0;
}

.footer-inner{
display:flex;
justify-content:space-between;
gap:20px;

font-size:12px;
}

.footer-inner span{
color:#aaa;
}

/* =========================
MÓVIL
========================= */

@media (max-width:800px){

.hero .wrap{
grid-template-columns:1fr;
gap:35px;
}

.logo-card{
max-width:420px;
margin:0 auto;
}

.episode-heading{
align-items:flex-start;
flex-direction:column;
}

.rss-note{
text-align:left;
}

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

.platform-grid-3{
grid-template-columns:1fr;
}

.about-grid{
grid-template-columns:1fr;
gap:35px;
}

.cta-box{
flex-direction:column;
align-items:flex-start;
}

}

@media (max-width:600px){

.wrap{
width:min(100% - 28px,1120px);
}

.topbar-inner{
min-height:65px;
}

nav{
gap:12px;
}

nav a{
font-size:12px;
}

.hero{
padding:45px 0;
}

h1{
font-size:46px;
}

.section-heading h2{
font-size:34px;
}

.about-title h2{
font-size:34px;
}

.cta-box{
padding:30px;
}

.cta-box h2{
font-size:30px;
}

.footer-inner{
flex-direction:column;
}

/* BOTÓN EN MÓVIL */

.previous-episodes-button{
width:100% !important;
margin-top:14px !important;
padding:14px 18px !important;
}

/* PORTADAS EN MÓVIL */

.episode-cover{
width:80px !important;
height:80px !important;
min-width:80px !important;
max-width:80px !important;
min-height:80px !important;
max-height:80px !important;
flex:0 0 80px !important;
}

.episode-cover img{
width:80px !important;
height:80px !important;
min-width:80px !important;
max-width:80px !important;
min-height:80px !important;
max-height:80px !important;
}

.episode-art{
width:80px !important;
height:80px !important;
min-width:80px !important;
min-height:80px !important;
max-width:80px !important;
max-height:80px !important;
font-size:15px;
}

}