/* ---------- Theme tokens ---------- */
:root{
    --bg: #fffefa;
    --ink: #222;
    --muted: #6b7280;

    /* Brand family */
    --brand: #00c6a2;

    /* Section colors */
    --c-podcast:   #23CD89;
    --c-noticias:  #FFB400;
    --c-personajes:#FF5058;
    --c-biblio:    #0BC5B7;

    /* Surfaces */
    --card: #ffffff;
    --card-shadow: 0 4px 20px rgba(0,0,0,.08);

    /* Sizes */
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;

    /* Focus */
    --focus: #1a73e8;

    /* Accent (sliders, audio, inputs) */
    accent-color: var(--brand);
}

/* Reduced motion friendly */
@media (prefers-reduced-motion: no-preference){
    :root { --hover-raise: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
    :root { --hover-raise: none; }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    margin:0;
    color:var(--ink);
    line-height:1.5;
}

/* Helpful for kids: larger default size */
body{ font-size: 18px; }

/* Links */
a{
    color:#045b62;
    text-decoration: underline;
    font-weight:600;
}
a:hover{ text-decoration:underline }
a:focus-visible{
    outline:3px solid var(--focus);
    outline-offset:2px;
    border-radius:6px;
}

/* ---------- Header & Brand ---------- */
header{
    background: linear-gradient(180deg, var(--brand), #06b899);
    padding: 12px 16px 18px;
    text-align:center;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
header p{margin: 0; padding: 0;}
header img{ max-width:300px; height:auto }

/* ---------- Navigation (big, tappable chips) ---------- */
nav{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}

nav a{
    --btn-bg:#fff;
    --btn-fg:#000;
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.7rem 1rem;
    border-radius: 999px;
    font-weight:800;
    letter-spacing:.2px;
    background:var(--btn-bg);
    color:#fff !important;
    border:3px solid rgba(255,255,255,.9);
    box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08);
    transform: translateY(0);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
}
nav a:hover{
    transform: var(--hover-raise);
    text-decoration: none;
    box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.12);
}
nav a:focus-visible{ outline:4px solid #fff; outline-offset:3px }

nav .btnpodcast   { --btn-bg: var(--c-podcast);    color:#072b1a }
nav .btnnoticias  { --btn-bg: var(--c-noticias);   color:#3a2500 }
nav .btnpersonajes{ --btn-bg: var(--c-personajes); color:#3a0003 }
nav .btnbiblioteca{ --btn-bg: var(--c-biblio);     color:#053a37 }

/* ---------- Main layout ---------- */
main{
    padding: 24px 16px 64px;
    max-width: 960px;
    margin: 0 auto;
}
h1,h2{
    color:#053a40;
    line-height:1.2;
    margin: 0 0 .6rem;
}
h1{ font-size: clamp(1.6rem, 2.4vw + 1rem, 2.2rem); }
h2{ font-size: clamp(1.3rem, 1.6vw + .9rem, 1.6rem); }

/* Section color accents (keep your existing class hooks) */
h1.podcast, h2.podcast{ color: var(--c-podcast); }
h1.noticias, h2.noticias{ color: var(--c-noticias); }
h1.personajes, h2.personajes{ color: var(--c-personajes); }
h1.biblioteca, h2.biblioteca{ color: var(--c-biblio); }

/* ---------- Cards / Articles ---------- */
article{
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin: 18px 0;
    box-shadow: var(--card-shadow);
    border: 4px solid transparent;
    position:relative;
    overflow:hidden;
}

article .ntitle{
    font-weight:900;
    font-size: 1.1rem;
    display:flex; align-items:center; gap:.6rem;
    margin: 0 0 .4rem;
}
article .nbody{ margin:.4rem 0 .6rem }
article .ninfo{
    background:#FFF4E0;
    padding:.8rem 1rem;
    border-radius: var(--radius-md);
    font-size:.98rem;
}
article .nimage{ text-align:center; margin: .8rem 0 }
article .nimage img{
    max-width:100%; height:auto; display:inline-block;
    border-radius: var(--radius-md);
}
article .ndate{
    font-size:.9rem; color:var(--muted);
    text-align:right; margin-top:.6rem;
}

/* Section-specific tints and borders (same class names you already use) */
article.podcast   { border-color: color-mix(in oklab, var(--c-podcast) 60%, white); background: oklch(98% .02 180); }
article.noticia   { border-color: color-mix(in oklab, var(--c-noticias) 60%, white); background: oklch(98% .03 95); }
article.personaje { border-color: color-mix(in oklab, var(--c-personajes) 60%, white); background: oklch(98% .03 25); }
article.biblioteca{ border-color: color-mix(in oklab, var(--c-biblio) 60%, white); background: oklch(98% .02 195); }

article.podcast   .ntitle{ color: var(--c-podcast); }
article.noticia   .ntitle{ color: var(--c-noticias); }
article.personaje .ntitle{ color: var(--c-personajes); }
article.biblioteca .ntitle{ color: var(--c-biblio); }

/* ---------- Buttons (generic) ---------- */
button{
    --btn:#ffd84d;
    background: var(--btn);
    color:#111;
    border:none;
    padding:.7rem 1rem;
    font-weight:800;
    font-size:1rem;
    border-radius: 999px;
    cursor:pointer;
    display:inline-flex; align-items:center; gap:.6rem;
    box-shadow: 0 3px 0 rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.12);
    transform: translateY(0);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    margin: .8rem 0;
}
button:hover{
    transform: var(--hover-raise);
    text-decoration:none;
    box-shadow: 0 4px 0 rgba(0,0,0,.16), 0 10px 22px rgba(0,0,0,.14);
    filter: brightness(1.02);
}
button:focus-visible{ outline:4px solid var(--focus); outline-offset:3px }
.fa{ font-size:1rem }

/* ---------- Audio player ---------- */
audio{
    width:100%;
    display:block;
    margin-top:.6rem;
    border-radius: var(--radius-md);
    background:#f0faf7;
    outline:none;
}
audio::-webkit-media-controls-panel{
    background: linear-gradient(180deg, #ffffff, #f6fffb);
}
audio:focus-visible{
    outline:4px solid var(--focus);
    outline-offset:3px;
}

/* ---------- Footer ---------- */
footer{
    background: linear-gradient(180deg, #06b899, var(--brand));
    color:#fff;
    text-align:center;
    padding: 20px 16px;
    font-size:.95rem;
}
footer a{ color:#fff; text-decoration: none; text-underline-offset:3px }

/* ---------- Utilities ---------- */
.small{ font-size:.9rem; color:var(--muted) }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 720px){
    body{ font-size: 17px }
    header img{ max-width: 180px }
    nav{ gap:8px }
    main{ padding: 18px 12px 56px }
    article{ padding:14px }
    button{ width:100%; justify-content:center }
}

/* ---------- Safety: high-contrast mode ---------- */
@media (forced-colors: active){
    nav a, button { border: 2px solid ButtonText }
    a, a:hover{ text-decoration: underline }
}