/* SergeiCartoons — papel branco, o laranja e o azul do mascote como acentos; a piada é o centro, sem ruído à volta. */
:root{
  --papel:#fff;--tinta:#1d2433;--lapis:#566072;--laranja:#f08a1c;--laranja-suave:#fff3e3;--azul:#1d4ea0;--azul-suave:#eaf0fb;
  --linha:#e4e7ec;--fundo2:#f6f7f9;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:1.0625rem/1.6 var(--sans);overflow-wrap:break-word}
a{color:var(--azul);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
h1,h2,h3{line-height:1.2;color:var(--tinta)}
h1{font:800 2rem/1.15 var(--display);margin:.4em 0 .25em;letter-spacing:-.01em}
h1 small{font:600 1rem var(--sans);color:var(--lapis);margin-left:.3em}
h2{font-size:1.3rem;margin:1.6em 0 .6em}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:30}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--laranja);outline-offset:2px;border-radius:3px}

/* topo */
.top{border-bottom:3px solid var(--laranja);background:var(--papel);position:relative;z-index:20}
.bar{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.brand img{border-radius:50%}
.brand span{font:700 1.45rem/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.brand b,.foot-brand b{color:var(--laranja)}
.brand small{display:block;font:600 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-top:3px}
.search{flex:1;display:flex;max-width:420px;margin-left:auto;border:2px solid var(--linha);border-radius:999px;overflow:hidden;background:var(--fundo2)}
.search:focus-within{border-color:var(--azul)}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:10px 4px 10px 16px;font:inherit;font-size:1rem;color:var(--tinta)}
.search input:focus{outline:none}
.search button{border:0;background:transparent;color:var(--azul);padding:0 14px;cursor:pointer;min-width:48px;min-height:44px}
.cats-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;background:var(--azul);color:#fff;font-weight:700;font-size:.95rem}
.cats-menu summary::-webkit-details-marker{display:none}
.cats-menu[open] summary{background:#163d80}
.cats-menu nav{position:absolute;left:0;right:0;top:100%;background:var(--papel);border-bottom:1px solid var(--linha);box-shadow:0 14px 28px rgba(29,36,51,.14)}
.cats-menu ul{list-style:none;max-width:1140px;margin:0 auto;padding:12px 16px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 14px}
.cats-menu li a{display:block;padding:9px 4px;color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linha)}
.cats-menu li a:hover{color:var(--azul)}
@media (max-width:720px){
  .bar{gap:10px;padding:10px 0}
  .brand span{font-size:1.25rem}
  .search{order:3;flex-basis:100%;max-width:none;margin:0}
  .cats-menu{margin-left:auto}
  .cats-menu summary span{display:none}
  .cats-menu summary{width:48px;justify-content:center;padding:0}
}

/* estrutura */
.layout{display:block}
@media (min-width:1080px){.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}}
.content{padding-bottom:40px;min-width:0;max-width:780px}
.home .content{max-width:none}
.side{display:none}
@media (min-width:1080px){.side{display:block;position:sticky;top:16px;padding-top:28px}}
.side-box{background:var(--fundo2);border-radius:12px;padding:16px 18px;margin-bottom:20px}
.side-box h2{font-size:1rem;margin:0 0 8px}
.side-box ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.side-box li{padding:5px 0;border-top:1px solid var(--linha)}
.side-box li:first-child{border-top:0}

.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 6px;margin:18px 0 0;padding:0;font-size:.85rem;color:var(--lapis)}
.crumbs li{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.crumbs li+li::before{content:"›";margin-right:6px;color:#9aa3b0}
.crumbs a{color:var(--lapis)}
.page-h{margin-bottom:10px}
.meta{margin:0;color:var(--lapis);font-size:.95rem}
.lead{font-size:1.1rem;color:#37414f;max-width:64ch;margin-top:0}
.sec{font:800 1.45rem/1.2 var(--display);margin:1.8em 0 .6em}
.more-link{font-weight:600}

/* piadas em lista */
.jokes{list-style:none;margin:0;padding:0}
.joke{padding:22px 0 20px;border-top:1px dashed #cfd5de}
.jokes>li:first-child .joke{border-top:0}
.joke-t{font:800 1.2rem/1.25 var(--display);margin:0 0 4px}
.joke-t a{color:var(--tinta);text-decoration:none}
.joke-t a:hover{color:var(--azul);text-decoration:underline}
.joke-c{margin:0 0 10px;font-size:.82rem}
.joke-c a{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--azul-suave);color:var(--azul);text-decoration:none;font-weight:600}
.joke-c a:hover{background:#d8e3f7}
.joke-x p{margin:0 0 .7em}
.joke-x p:last-child{margin-bottom:0}
.more{margin:8px 0 0;font-size:.95rem;font-weight:600}

/* página da piada */
.joke-page header h1{margin-bottom:6px}
.joke-x.big{font-size:1.22rem;line-height:1.65;background:var(--laranja-suave);border-left:5px solid var(--laranja);border-radius:0 12px 12px 0;padding:20px 22px;margin:18px 0}
.orig{margin:0 0 16px;font-size:.95rem}
.orig summary{cursor:pointer;color:var(--lapis);min-height:44px;display:flex;align-items:center}
.orig .joke-x{padding:12px 16px;background:var(--fundo2);border-radius:8px}
.joke-img{margin:20px 0}
.joke-img img{border-radius:10px;border:1px solid var(--linha)}
.joke-img figcaption{font-size:.8rem;color:var(--lapis);margin-top:6px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0;padding:0}
.tags a{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--fundo2);color:var(--lapis);text-decoration:none;font-size:.88rem}
.tags a:hover{background:var(--azul-suave);color:var(--azul)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.prevnext a{display:block;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;text-decoration:none;color:var(--tinta);font-weight:600;line-height:1.3}
.prevnext a:hover{border-color:var(--azul)}
.prevnext a[rel=next]{text-align:right}
.prevnext small{display:block;color:var(--lapis);font-weight:400;font-size:.8rem;margin-bottom:2px}

/* partilha */
.share{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px}
.sh{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--linha);background:var(--papel);color:var(--tinta);text-decoration:none;font:600 .92rem/1 var(--sans);cursor:pointer}
.sh:hover{border-color:#c5ccd5;background:var(--fundo2)}
.sh .ico{flex:none}
.sh.wa{background:#167a42;border-color:#167a42;color:#fff}
.sh.wa:hover{background:#11663a}
.sh.fb .ico{color:#1b4f9c}

/* home */
.home-h h1{font-size:2.2rem;margin-top:.6em}
.hero-card{display:grid;gap:20px;align-items:start;background:var(--fundo2);border-radius:16px;padding:18px}
@media (min-width:760px){.hero-card{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:22px}}
.hero-img img{border-radius:10px;width:100%}
.hero-txt .joke-x{font-size:1.1rem}
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.cats a{display:block;padding:12px 14px;border:1px solid var(--linha);border-radius:12px;text-decoration:none;color:var(--tinta);background:var(--papel)}
.cats a:hover{border-color:var(--laranja);background:var(--laranja-suave)}
.cats span{display:block;font-weight:700}
.cats small{color:var(--lapis)}
@media (min-width:1080px){.home .jokes{columns:2;column-gap:48px}.home .jokes>li{break-inside:avoid}.home .jokes .joke{border-top:1px dashed #cfd5de}}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.chips a{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid var(--linha);text-decoration:none;color:var(--tinta);font-size:.95rem}
.chips a:hover{border-color:var(--azul);color:var(--azul)}

/* temas curados e galeria */
.frases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.frase{margin:0;border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.frase figcaption{padding:12px 14px}
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.gallery a{display:block;text-decoration:none;color:var(--tinta);font-weight:700}
.gallery img{border-radius:12px;margin-bottom:6px}
.partners{list-style:none;padding:0}
.partners li{padding:10px 0;border-top:1px solid var(--linha)}
.partners p{margin:2px 0 0;color:var(--lapis);font-size:.95rem}
.prose{max-width:68ch}
.note{font-style:italic;color:var(--lapis)}
.empty{padding:30px 0}

/* paginação */
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:28px 0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--linha);text-decoration:none;color:var(--tinta);font-weight:600}
.pager a:hover{border-color:var(--azul);color:var(--azul)}
.pager span[aria-current]{background:var(--azul);border-color:var(--azul);color:#fff}

/* anúncios: altura reservada (CLS 0) */
.ad{position:relative;margin:24px auto;text-align:center;display:flex;justify-content:center;align-items:center;background:var(--fundo2);border-radius:8px}
.ad-l{position:absolute;top:2px;left:8px;font-size:.68rem;color:#8a93a0;text-transform:uppercase;letter-spacing:.06em}
.ad[data-ad=in]{min-height:280px;max-width:336px}
.ad.s250{min-height:250px;max-width:300px}
.ad[data-ad=tall]{min-height:600px;width:300px}
.ad ins{display:block}
.ad-li{list-style:none}

/* rodapé */
.foot{background:#1d2433;color:#cfd5de;padding:32px 0 26px;margin-top:20px}
.foot a{color:#fff}
.foot-brand{font:700 1.4rem var(--display);color:#fff;margin:0}
.foot-txt{margin:.3em 0 1em;max-width:60ch}
.foot-cats ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.92rem}
.foot-cats a{color:#cfd5de;text-decoration:none;display:inline-block;padding:4px 0}
.foot-cats a:hover{color:#fff;text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.95rem}
.foot-links a{display:inline-block;padding:6px 0}
.foot-copy{font-size:.85rem;color:#9aa3b0;margin:14px 0 0}