@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/AtkinsonHyperlegible-400-italic.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/AtkinsonHyperlegible-400-normal.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/AtkinsonHyperlegible-700-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Poppins-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Poppins-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Poppins-700-normal.woff2) format('woff2')}
@font-face{font-family:'Oferta do Dia';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/OfertaDoDia.ttf) format('truetype')}

:root{
  --orange:#e35f2b; --cream:#f2e8c8; --ink:#1e1e1d; --teal:#5aaaab; --pink:#e5308a;
  --tile:#e35f2b; --tile-ink:#1e1e1d; --focus:#1e1e1d; --link:#8a2a05; --line:#1e1e1d; --shadow:#1e1e1d;
  --btn:#e35f2b; --btn-ink:#1e1e1d; --track:#fffaf0;
  --font-d:'Oferta do Dia','Arial Black',Impact,sans-serif;
  --font-u:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-b:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
:root[data-contrast="alto"]{
  --orange:#000; --cream:#000; --ink:#fff; --teal:#000; --tile:#000; --tile-ink:#fff; --focus:#ffe600;
  --link:#ffe600; --line:#fff; --shadow:#ffe600; --btn:#ffe600; --btn-ink:#000; --track:#000; color-scheme:dark;
}
:root[data-size="1"]{font-size:118%}
:root[data-size="2"]{font-size:138%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--orange);color:var(--ink);font:400 1.125rem/1.65 var(--font-b);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 3rem}
.wrap{max-width:46rem;margin-inline:auto}
a{color:var(--link);text-underline-offset:.2em;text-decoration-thickness:.1em}
a:hover{text-decoration-thickness:.2em}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--cream);color:var(--ink);padding:.7rem 1rem;z-index:50;font:700 1rem var(--font-u);border:3px solid var(--line);border-radius:999px}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px));top:8px}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font:400 clamp(2.2rem,9.5vw,3.9rem)/.98 var(--font-d);text-transform:uppercase;letter-spacing:.01em}
h2{font:400 1.7rem/1.05 var(--font-d);text-transform:uppercase;letter-spacing:.01em}
p{margin:0}
.surf{background:var(--cream);color:var(--ink);border:3px solid var(--line);border-radius:1.6rem;box-shadow:5px 5px 0 var(--shadow);padding:1.3rem 1.3rem 1.4rem}
.surf a{color:var(--link)}
.btn{font:700 1rem/1.2 var(--font-u);min-height:48px;padding:.6rem 1.2rem;border:3px solid var(--line);border-radius:999px;background:var(--btn);color:var(--btn-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;text-decoration:none;box-shadow:3px 3px 0 var(--shadow)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn.ghost{background:var(--cream);color:var(--ink)}
.btn[aria-pressed="true"].ghost{background:var(--ink);color:var(--cream)}
.btn svg{width:1.3em;height:1.3em;flex:none}

/* cabecalho: pilula creme como no site */
.bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap;margin-top:max(14px,env(safe-area-inset-top,0px));background:var(--cream);border:3px solid var(--line);border-radius:999px;box-shadow:4px 4px 0 var(--shadow);padding:.55rem 1.3rem .55rem .9rem}
.bar img{height:3.6rem;width:auto;display:block}
.bar nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.bar nav a{font:700 1.05rem/1.2 var(--font-u);color:var(--ink);text-decoration:none;padding:.5rem .1rem;border-bottom:3px solid transparent}
.bar nav a:hover,.bar nav a[aria-current="page"]{border-bottom-color:var(--pink)}
.tools{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;padding-block:1rem .2rem}
.tools .btn{min-height:44px;padding:.35rem .95rem;font-size:.95rem;box-shadow:none}
.modelo-removido{background:transparent;border:3px dashed var(--ink);border-radius:1.2rem;padding:.7rem 1rem;margin-block:1rem 1.6rem;font-size:.95rem;display:grid;gap:.25rem}
.modelo-removido code{font:700 .9rem/1.4 ui-monospace,Consolas,monospace;background:var(--cream);padding:.1rem .4rem;border-radius:.4rem;overflow-wrap:anywhere}
.modelo-removido a{color:var(--ink)}
.crumbs{font:600 .95rem var(--font-u);margin-bottom:.9rem}
.crumbs a{color:var(--ink)}
.eyebrow{display:inline-block;font:700 .95rem/1.2 var(--font-u);background:var(--cream);border:3px solid var(--line);border-radius:999px;padding:.3rem .95rem;margin-bottom:.8rem}
article>*+*{margin-top:1.7rem}

/* player: bloco verde-agua com botao redondo */
.player{background:var(--teal);display:grid;gap:1rem}
.player h2{font-size:1.5rem}
.player .dur{font:600 1rem var(--font-u)}
.ctrls{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.play{width:4.4rem;height:4.4rem;padding:0;border-radius:50%;background:var(--ink);color:var(--cream);border-color:var(--ink)}
:root[data-contrast="alto"] .play{background:var(--btn);color:var(--btn-ink)}
.play svg{width:2rem;height:2rem}
.ctrls .rate{display:flex;align-items:center;gap:.5rem;font:600 1rem var(--font-u)}
.ctrls select{font:700 1rem var(--font-u);min-height:48px;padding:.4rem .8rem;border:3px solid var(--line);border-radius:999px;background:var(--cream);color:var(--ink)}
.seek{display:grid;gap:.3rem}
.seek input{width:100%;height:2.2rem;margin:0;background:transparent;accent-color:var(--ink);cursor:pointer}
.times{display:flex;justify-content:space-between;font:600 .95rem var(--font-u)}
.msg{font:600 .98rem var(--font-u);background:var(--cream);border:3px solid var(--line);border-radius:1rem;padding:.6rem .9rem}
figure{margin:0;display:grid;gap:1rem}
figure img{display:block;width:100%;height:auto;border:3px solid var(--line);border-radius:1.2rem;background:var(--cream);box-shadow:5px 5px 0 var(--shadow)}
.transc{display:grid;gap:1.05rem}
.transc .ficha{font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.8rem}
.tile{background:var(--tile);color:var(--tile-ink);border:3px solid var(--line);border-radius:1rem;padding:.7rem .9rem;display:grid;gap:.1rem;align-content:start;min-width:0}
.tile small{font:600 .85rem var(--font-u);text-transform:uppercase;letter-spacing:.06em}
.tile b{font:700 1.15rem/1.25 var(--font-u);overflow-wrap:anywhere}
.band{background:var(--teal);color:var(--ink);border:3px solid var(--line);border-radius:1.6rem;box-shadow:5px 5px 0 var(--shadow);padding:1.2rem}
.band h2{margin-bottom:.9rem}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:2rem}
.pn a{display:grid;gap:.15rem;padding:.85rem 1.1rem;text-decoration:none;color:var(--ink);min-height:48px;background:var(--cream);border:3px solid var(--line);border-radius:1.2rem;box-shadow:4px 4px 0 var(--shadow)}
.pn a:hover{background:#fff6dc}
:root[data-contrast="alto"] .pn a:hover{background:#222}
.pn small{font:700 .85rem var(--font-u);text-transform:uppercase;letter-spacing:.05em}
.pn b{font:600 1rem/1.3 var(--font-u);color:var(--link);overflow-wrap:anywhere}
.pn a:last-child{text-align:right}
.lead{font:500 1.2rem/1.5 var(--font-u);max-width:36rem;margin-top:.9rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.5rem}
[tabindex="-1"]:focus{outline:none}
.stat{background:var(--tile);color:var(--tile-ink);border:3px solid var(--line);border-radius:1rem;padding:.8rem .5rem;text-align:center;font:600 .95rem/1.2 var(--font-u)}
.stat b{display:block;font:400 2.2rem/1 var(--font-d);margin-bottom:.15rem}
.grp{margin-top:1.8rem}
.grp h2{margin-bottom:.8rem}
.grp ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.item{display:grid;grid-template-columns:5.4rem 1fr;gap:1rem;align-items:center;padding:.65rem;text-decoration:none;color:var(--ink);min-height:48px;background:var(--cream);border:3px solid var(--line);border-radius:1.3rem;box-shadow:4px 4px 0 var(--shadow)}
.item:hover{background:#fff6dc}
:root[data-contrast="alto"] .item:hover{background:#222}
.item img{width:5.4rem;height:5.4rem;object-fit:cover;display:block;border:3px solid var(--line);border-radius:.9rem}
.item b{display:block;font:600 1.05rem/1.3 var(--font-u);color:var(--link);overflow-wrap:anywhere}
.item span{font:500 .95rem var(--font-u)}
footer{margin-top:3rem;background:var(--cream);border:3px solid var(--line);border-radius:1.6rem;box-shadow:5px 5px 0 var(--shadow);padding:1.2rem 1.4rem;font-size:1rem;display:grid;gap:.6rem}
footer b{font-family:var(--font-u)}
@media (max-width:34rem){.pn{grid-template-columns:1fr}.pn a:last-child{text-align:left}.bar{border-radius:2rem}.stats{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.btn:hover,.btn:active{transform:none}}
