/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root{
  --ink:#181817;
  --ink-soft:#232322;
  --muted:#6B6862;
  --bg:#F9F7F5;               /* medido no PNG */
  --bg-warm:#F5F2ED;
  --surface:#FFFFFF;
  --surface-grey:#EDEBE6;
  --ph:#E4E2DD;
  --line:#E7E6E3;             /* medido no PNG (divisórias) */
  --line-strong:#CFCDC9;
  --line-mute:#B9B6B0;        /* números inactivos da paginação */
  --yellow:#E8E900;
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --gutter:20px;
  --maxw:1280px;
  --gap:16px;
}

/* =========================================================================
   2. RESET
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;padding:0;}
ul,ol{list-style:none;}
button,input{font:inherit;color:inherit;border-radius:0;}
button{cursor:pointer;border:0;background:none;padding:0;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* =========================================================================
   3. UTILITÁRIOS
   ========================================================================= */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Seta longa e fina — desenhada em CSS, como no mockup */
.a{
  display:inline-block;position:relative;flex:0 0 auto;
  width:22px;height:1px;background:currentColor;
  transition:width .18s ease;
}
.a::after{
  content:"";position:absolute;right:0;top:50%;
  width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translate(1px,-50%) rotate(45deg);
}
.arrow-link:hover .a,.btn:hover .a{width:30px;}

/* Etiquetas */
.kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;}

/* Regra global: traço amarelo por cima do nome de secção */
.section-label{display:block;}
.section-label::before{content:"";display:block;width:28px;height:2px;background:var(--yellow);margin-bottom:22px;}
.section-title{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;}

.arrow-link{
  display:inline-flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.arrow-link--underline{padding-bottom:6px;border-bottom:2px solid var(--yellow);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  padding:0 24px;height:44px;border:0;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;
}
.btn--black{background:var(--ink);color:#fff;}
.btn--black:hover{background:#000;}
.btn--yellow{background:var(--yellow);color:var(--ink);}
.btn--yellow:hover{background:#D6D700;}

/* Variantes só-mobile (activadas na secção 15) */
.dossie-out,.compras-afiliado{display:none;}
.brk{display:inline;}

/* Placeholders de imagem — trocar por <img> na passagem a WordPress */
.ph{background:var(--ph);width:100%;display:block;object-fit:cover;}

/* =========================================================================
   5. HERO + ESTA SEMANA
   ========================================================================= */
.hero{background:var(--bg);padding:24px 0 28px;}
.hero-grid{display:grid;grid-template-columns:1fr;gap:0;}
/* Mobile: os filhos do bloco de texto entram na grelha, para intercalar a
   fotografia entre o lead e a paginação (mockup 2). */
.hero-copy{display:contents;}
.hero-cat{order:1;}
.hero-title{order:2;}
.hero-lead{order:3;}
.hero-figure{order:4;}
.hero-pager{order:5;}
.hero-cta{order:6;}
.week{order:7;}

.hero-cat::before{content:"";display:block;width:41px;height:3px;background:var(--yellow);margin-bottom:20px;}
.hero-cat{margin-bottom:16px;}
.hero-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(32px,8.4vw,40px);line-height:1.04;letter-spacing:-.005em;
  margin-bottom:18px;
}
.hero-lead{font-size:14px;line-height:1.5;color:var(--muted);margin-bottom:22px;}

.hero-figure{position:relative;margin-bottom:10px;}
.hero-figure .ph{aspect-ratio:4/3;}
/* Post-it — no mockup faz parte da fotografia; aqui é sobreposto em HTML */
.postit{
  display:none;position:absolute;background:var(--yellow);color:var(--ink);
  align-items:center;justify-content:center;text-align:center;
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.65;
}

.hero-pager{display:flex;align-items:center;gap:0;padding-top:6px;}
.pager-nums{display:flex;align-items:center;gap:28px;}
.pager-nums button{
  font-size:13px;font-weight:600;letter-spacing:.15em;color:var(--line-mute);
  padding:0 0 8px;border-bottom:2px solid transparent;line-height:1;
}
.pager-nums button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--yellow);}
.pager-arrows{display:flex;align-items:center;gap:30px;margin-left:auto;}
.pager-arrows button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:20px;}
.pager-arrows svg{width:11px;height:18px;}

.hero-cta{margin-top:20px;}
.hero-cta .btn{width:100%;}

/* Esta Semana */
.week{border-top:1px solid var(--line);padding-top:24px;margin-top:26px;}
.week-label::before{width:28px;height:2px;margin-bottom:20px;}
.week ol{margin-top:24px;}
.week li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:22px 0;border-top:1px solid var(--line);}
.week li:first-child{border-top:0;padding-top:0;}
.week .num{font-size:20px;font-weight:700;letter-spacing:.02em;line-height:1.15;}
.week .txt{font-size:14px;line-height:1.71;color:var(--ink-soft);}
.week .txt:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--yellow);text-decoration-thickness:2px;}
.week-more{margin-top:26px;display:inline-flex;}

/* =========================================================================
   7. EM DESTAQUE + 8. DOSSIÊ (ordem trocada em mobile)
   ========================================================================= */
.flow{display:flex;flex-direction:column;}
.flow > .destaque{order:2;}
.flow > .dossie{order:1;}

.destaque{background:var(--surface);padding:34px 0 38px;}
.destaque-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);}
.dest-left{display:grid;gap:var(--gap);}
.dest-left-bottom{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}

.card{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;}
.card-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1 1 auto;}
.card-cat{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.card-title{font-family:var(--font-display);font-weight:400;line-height:1.14;letter-spacing:-.005em;font-size:19px;}
.card .arrow-link{margin-top:auto;align-self:flex-start;gap:10px;}
.card .arrow-link .a{width:16px;}

.card--a{display:grid;grid-template-columns:1fr 1fr;}
.card--a .card-body{justify-content:center;}
.card--a .ph{height:100%;min-height:150px;}
.card--a .card-title{font-size:22px;}
.card--b .ph{aspect-ratio:16/10;}
.card--c .ph{aspect-ratio:4/3;}
.card--d{display:grid;grid-template-columns:.85fr 1.15fr;}
.card--d .ph{height:100%;min-height:140px;aspect-ratio:auto;}
.card--d .card-body{justify-content:center;}
.card--d .card-title{font-size:20px;}

.dossie{background:var(--bg);padding:28px 0 26px;}
.dossie-module{display:grid;grid-template-columns:1fr;border:1px solid var(--line);background:var(--surface);}
.dossie-module .ph{aspect-ratio:16/10;}
.dossie-panel{padding:24px 20px 20px;display:flex;flex-direction:column;gap:14px;}
.dossie-title{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:-.015em;font-size:clamp(28px,7vw,32px);}
.dossie-text{font-size:14px;line-height:1.65;color:var(--muted);max-width:32em;}
.dossie-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px;}
.dossie-count{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted);}
.dossie-after{display:block;border-top:1px solid var(--line);margin-top:18px;padding-top:14px;}

/* =========================================================================
   9. QUIZ + MAIS LIDOS
   ========================================================================= */
.home-quiz{background:var(--bg-warm);padding:34px 0 38px;}
.home-quiz__layout{display:grid;gap:20px;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.home-quiz__card{background:var(--surface);padding:24px;}
.home-quiz__eyebrow,.home-most-read__eyebrow{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;line-height:1;text-transform:uppercase;
}
.home-quiz__eyebrow::before,.home-most-read__eyebrow::before{
  content:"";display:block;width:28px;height:2px;margin-bottom:18px;background:var(--yellow);
}
.home-quiz__body{display:grid;gap:18px;margin-top:22px;}
.home-quiz__figure{position:relative;margin:0;}
.home-quiz__figure .ph{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;}
.home-quiz__time{
  position:absolute;right:10px;bottom:10px;padding:7px 11px;background:var(--yellow);color:var(--ink);
  font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap;
}
.home-quiz__copy{display:flex;flex-direction:column;align-items:flex-start;}
.home-quiz__copy h2,.home-most-read__feature h3{
  margin:0;font-family:var(--font-display);font-size:32px;font-weight:400;line-height:1.04;letter-spacing:-.02em;
}
.home-quiz__copy > p{margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.5;}
.home-quiz__button{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:0;height:44px;margin-top:24px;padding:0 18px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:.2em;line-height:1;text-transform:uppercase;
}
.home-quiz__button .a{width:22px;}
.home-quiz__button:hover{background:#000;}

.home-most-read{padding:24px;background:var(--surface-grey);}
.home-most-read__feature{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;margin-top:26px;padding-bottom:20px;}
.home-most-read__number{font-family:var(--font-display);font-size:54px;font-weight:400;line-height:.8;letter-spacing:-.04em;}
.home-most-read__feature h3{font-size:22px;line-height:1.08;}
.home-most-read__article{
  display:inline-flex;align-items:center;gap:14px;margin-top:20px;padding-bottom:7px;border-bottom:2px solid var(--yellow);
  font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1;text-transform:uppercase;
}
.home-most-read__article .a{width:22px;}
.home-most-read__list{margin:0;padding:0;list-style:none;}
.home-most-read__list li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:13px 0;border-top:1px solid var(--line-strong);}
.home-most-read__list li > span{font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.4;}
.home-most-read__list a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;font-size:13px;line-height:1.4;}
.home-most-read__list a > span{min-width:0;}
.home-most-read__list .a{width:20px;}

@media (min-width:768px){
  .home-quiz__layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;gap:var(--gap);}
  .home-quiz__card,.home-most-read{min-height:430px;padding:26px;}
  .home-quiz__body{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:18px;margin-top:24px;}
  .home-quiz__figure,.home-quiz__figure .ph{height:330px;}
  .home-quiz__figure .ph{aspect-ratio:auto;}
  .home-quiz__time{top:0;right:auto;bottom:auto;left:calc(100% + 18px);}
  .home-quiz__copy{height:330px;padding-top:42px;}
  .home-quiz__copy h2{font-size:38px;line-height:.98;}
  .home-quiz__button{align-self:flex-end;margin-top:auto;}
  .home-most-read__feature{grid-template-columns:54px minmax(0,1fr);}
}

/* =========================================================================
   10. COMPRAS
   ========================================================================= */
.compras{background:var(--surface);padding:34px 0 38px;}
.compras-lead{font-size:14px;color:var(--muted);margin-bottom:22px;}
.produtos{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.produto{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;}
.produto .ph{aspect-ratio:1/1;}
.produto-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;}
.produto-nome{font-family:var(--font-display);font-weight:400;font-size:15px;line-height:1.2;}
.produto-preco{font-size:12px;color:var(--muted);}
.produto .arrow-link{margin-top:auto;padding-top:10px;align-self:flex-start;font-size:10px;letter-spacing:.14em;gap:10px;}
.produto .arrow-link .a{width:16px;}
.compras-after{margin-top:22px;}

/* =========================================================================
   11. RECURSOS + CLUBE DO LIVRO
   ========================================================================= */
.home-resources-books{background:var(--bg-warm);padding:52px 0;}
.home-resources-books__grid{display:grid;grid-template-columns:1.02fr 1fr;gap:28px;align-items:stretch;}
.home-resources-books__resources,.home-resources-books__books{display:flex;flex-direction:column;min-height:440px;padding:24px;border:1px solid var(--line);}
.home-resources-books__resources{background:var(--surface);}
.home-resources-books__books{background:linear-gradient(135deg,#f4f3f1 0%,#ecebe8 100%);}
.home-resources-books .section-label{margin:0 0 24px;line-height:1;}
.home-resources-books .section-label::before{width:42px;height:4px;margin-bottom:18px;}
.home-resources-books h2{max-width:11.5em;min-height:2.08em;margin:0;font-family:var(--font-display);font-size:clamp(34px,3.4vw,46px);font-weight:400;line-height:1.04;letter-spacing:-.04em;}
.home-resources-books__lead{max-width:620px;margin:20px 0 0;color:var(--muted);font-size:14px;line-height:1.55;}
.home-resources-books__index{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:85px;margin:20px 0 0;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);list-style:none;}
.home-resources-books__index li{min-height:52px;padding:0 14px;font-size:14px;line-height:1.45;}
.home-resources-books__index li:first-child{padding-left:0;}
.home-resources-books__index li + li{border-left:1px solid var(--line);}
.home-resources-books__index span{display:block;margin-bottom:8px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em;}
.home-resources-books__books .home-resources-books__index li{min-height:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.home-resources-books__button{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;gap:16px;min-height:44px;margin-top:auto;padding:0 24px;font-size:11px;font-weight:600;letter-spacing:.2em;line-height:1;text-decoration:none;text-transform:uppercase;}
.home-resources-books__button .a{width:18px;}
.home-resources-books__button--resources{background:var(--yellow);color:var(--ink);}
.home-resources-books__button--club{background:var(--ink);color:#fff;}

@media (max-width:767.98px){
  .home-resources-books{padding:32px 0;}
  .home-resources-books__grid{grid-template-columns:1fr;gap:20px;}
  .home-resources-books__resources,.home-resources-books__books{min-height:440px;padding:24px;}
  .home-resources-books .section-label{margin-bottom:24px;}
  .home-resources-books .section-label::before{margin-bottom:18px;}
  .home-resources-books h2{min-height:0;font-size:clamp(34px,9vw,44px);}
  .home-resources-books__lead{margin-top:26px;}
  .home-resources-books__index{grid-template-columns:1fr;height:auto;gap:12px;}
  .home-resources-books__index li,.home-resources-books__books .home-resources-books__index li{min-height:auto;padding:0;}
  .home-resources-books__index li + li{border-left:0;}
  .home-resources-books__button{width:auto;min-width:0;}
}

/* =========================================================================
   13. TABLET  >= 768px
   ========================================================================= */
@media (min-width:768px){
  :root{--gutter:32px;}
  .hero-grid{grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
  .hero-copy{display:block;grid-column:1;grid-row:1;}
  .hero-figure{grid-column:2;grid-row:1 / span 2;margin-bottom:0;}
  .hero-figure .ph{aspect-ratio:.908;}
  .week{grid-column:1;grid-row:2;margin-top:0;}
  .hero-cta .btn{width:auto;}
  /* Post-it: geometria medida no PNG (165×70 a -11,5° sobre foto de 442×487) */
  .postit{display:flex;left:5%;top:12.1%;width:37.3%;height:14.4%;transform:rotate(-11.5deg);}

	.destaque-grid{grid-template-columns:1.5fr 1fr;}
  .dest-left{grid-template-rows:auto auto;}
  .card--c{display:grid;grid-template-columns:.9fr 1.1fr;}
  .card--c .ph{height:100%;min-height:150px;aspect-ratio:auto;}
  .card--d{display:flex;flex-direction:column;height:100%;}
  .card--d .ph{aspect-ratio:4/3;min-height:0;height:auto;}
  .card--d .card-body{justify-content:flex-start;}
  .card--d .card-title{font-size:21px;}

  .dossie-module{grid-template-columns:1.15fr 1fr;}
  .dossie-module .ph{height:100%;aspect-ratio:auto;min-height:300px;}

  .produtos{grid-template-columns:repeat(4,1fr);}

}

/* =========================================================================
   14. DESKTOP  >= 1024px — medidas do mockup (referência: viewport 1198px)
   ========================================================================= */
@media (min-width:1024px){
  :root{--gutter:clamp(38px,4.35%,58px);--gap:16px;}

  /* --- Hero: 3 colunas 1.2 / 1.71 / 1 com goteira de 47px --- */
  .hero{padding:35px 0 33px;}
  .hero-grid{grid-template-columns:1.163fr 1.713fr 1fr;gap:47px;align-items:start;}
  .hero-copy{display:block;grid-column:1;grid-row:1;padding-top:18px;}
  .hero-figure{grid-column:2;grid-row:1;}
  .hero-figure .ph{aspect-ratio:.908;}
  .week{grid-column:3;grid-row:1;border-top:0;padding-top:16px;margin-top:0;}

  .hero-cat::before{width:41px;height:3px;margin-bottom:24px;}
  .hero-cat{font-size:13px;letter-spacing:.16em;margin-bottom:20px;}
  .hero-title{font-size:53px;line-height:1.04;margin-bottom:14px;}
  .hero-lead{font-size:14px;line-height:1.5;margin-bottom:22px;}
  .hero-cta{margin-top:0;margin-bottom:32px;}
  .hero-cta .btn{height:40px;padding:0 38px;}
  .hero-pager{padding-top:0;border-top:0;}
  .pager-arrows{margin-left:68px;}

  .week-label::before{margin-bottom:23px;}
  .week ol{margin-top:27px;}
  .week li{grid-template-columns:62px 1fr;padding:28px 0;}
  .week .num{font-size:22px;}
  .week .txt{font-size:15px;line-height:1.6;}
  .week-more{margin-top:30px;}

	/* --- Em Destaque volta a ficar antes do Dossiê --- */
  .flow > .destaque{order:1;}
  .flow > .dossie{order:2;}
  .destaque{padding:40px 0 38px;}
  .card-body{padding:20px;}
  .card--a .card-title{font-size:27px;}
  .card--a .ph{min-height:200px;}
  .card--b .ph{aspect-ratio:16/9;}
  .card--c .ph{min-height:170px;}
  .card--d .card-title{font-size:25px;}

  .dossie{padding:47px 0 34px;}
  .dossie-module{grid-template-columns:1.7fr 1fr;}
  .dossie-module .ph{min-height:330px;}
  .dossie-panel{padding:34px 34px 28px;}
  .dossie-title{font-size:40px;}

  .compras-after{display:none;}

	.compras{padding:42px 0 46px;}
	.produto-body{padding:16px;}
	.produto-nome{font-size:16px;}
	.home-resources-books{padding:52px 0;}
}

/* =========================================================================
   15. MOBILE  < 768px — medidas do mockup mobile (viewport de referência 390px)
   Cada valor abaixo foi medido nos PNG secção a secção.
   ========================================================================= */
@media (max-width:767.98px){
  :root{--gutter:22px;}
  .hero-title .brk{display:block;width:0;height:0;overflow:hidden;}
  /* --- Hero --- */
  .hero{padding:22px 0 16px;}
  .hero-cat::before{width:31px;height:2px;margin-bottom:18px;}
  .hero-cat{font-size:11px;letter-spacing:.16em;margin-bottom:16px;}
  .hero-title{font-size:clamp(27px,9vw,38px);line-height:1.12;margin-bottom:18px;}
  .hero-lead{font-size:14px;line-height:1.6;margin-bottom:24px;}
  .hero-figure{margin-bottom:0;}
  .hero-figure .ph{aspect-ratio:.985;}
  .hero-pager{padding-top:22px;}
  .pager-nums{gap:26px;}
  .pager-nums button{font-size:13px;}
  .pager-arrows{gap:24px;}
  .hero-cta{margin-top:18px;}
  .hero-cta .btn{height:50px;font-size:11px;letter-spacing:.2em;}

  /* --- Esta Semana: régua vertical entre número e texto, sem «Ver todas» --- */
  .week{border-top:0;margin-top:0;padding-top:34px;}
  .week-label::before{width:50px;height:3px;margin-bottom:20px;}
  .week ol{margin-top:22px;}
  .week li{grid-template-columns:45px 1fr;gap:0;padding:20px 0;border-top:0;border-bottom:1px solid var(--line);}
  .week li:first-child{padding-top:0;}
  .week .num{font-size:20px;font-weight:700;letter-spacing:.09em;line-height:1.3;}
  .week .txt{font-size:19px;line-height:1.55;border-left:1px solid var(--line);padding-left:22px;}
  .week-more{display:none;}

	/* --- Dossiê: etiqueta FORA do cartão --- */
  .dossie{padding:30px 0 26px;}
  .dossie-module{display:block;border:1px solid var(--line);}
  .dossie-module .ph{aspect-ratio:4/3;}
  .dossie-panel{padding:22px 22px 24px;gap:0;}
  .dossie-out{display:block;margin-bottom:20px;}
  .dossie-panel .section-label{display:none;}
  .dossie-title{font-size:clamp(26px,8.6vw,36px);line-height:1.1;margin-bottom:14px;}
  .dossie-text{font-size:14px;line-height:1.55;margin-bottom:22px;}
  .dossie-foot{margin-top:0;}
  .dossie-foot .btn{height:44px;padding:0 22px;}
  .dossie-after{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;}

  /* --- Em Destaque --- */
  .destaque{padding:30px 0 34px;}
  .section-head{margin-bottom:22px;}
  .card-title{font-size:22px;line-height:1.12;}
  .card-cat{font-size:10px;letter-spacing:.16em;}
  .card--b .card-cat,.card--c .card-cat,.card--d .card-cat{display:none;}
  /* peça 1: moldura editorial, texto à esquerda e fotografia mais alta à direita */
  .card--a{border:1px solid var(--line);grid-template-columns:1fr 1.12fr;gap:16px;align-items:center;}
  .card--a .card-body{padding:0;}
  .card--a .card-title{font-size:20px;}
  .card--a .ph{aspect-ratio:auto;height:100%;min-height:200px;}
  .dest-left-bottom{gap:14px;align-items:start;}
  .card--b .ph{aspect-ratio:4/3;}
  .card--c{margin-top:26px;}
  .card--c .ph{aspect-ratio:4/3;}
  .card--d{grid-template-columns:1fr 1.1fr;margin-top:14px;}
  .card--d .ph{min-height:150px;}
  .card--d .card-title{font-size:18px;}

  /* --- Compras: «Links de afiliado» no lugar do botão --- */
  .compras{padding:30px 0 34px;}
  .compras .btn--black{display:none;}
  .compras-afiliado{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
  .compras .section-label::before{margin-bottom:12px;}
  .compras-lead{font-size:14px;margin-bottom:18px;}
  .produtos{gap:14px;}
  .produto-nome{font-size:15px;}
  .compras-after{margin-top:20px;}

}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}

/* =========================================================================
   16. GUARDAS DE DIMENSÃO — conteúdo editorial dinâmico
   As imagens WordPress têm proporções variadas; cada módulo define a sua
   própria janela de recorte para que uma fotografia vertical não aumente
   a altura de toda a secção.
   ========================================================================= */
.hero-figure{aspect-ratio:4/3;overflow:hidden;}
.hero-figure .ph{width:100%;height:100%;aspect-ratio:auto;}

.card,.dossie-module,.produto{overflow:hidden;}
.card .ph,.dossie-module .ph,.produto .ph{height:auto;min-height:0;object-fit:cover;}
.card--a .ph{aspect-ratio:4/5;}
.card--b .ph,.card--c .ph,.card--d .ph{aspect-ratio:4/3;}
.dossie-module .ph{aspect-ratio:4/3;}

@media (min-width:768px){
  .hero-figure{aspect-ratio:.908;}
  .card--a .ph{aspect-ratio:1/1.08;}
  .card--c .ph{aspect-ratio:4/3;}
  .dossie-module .ph{aspect-ratio:1.3/1;}
}

@media (min-width:1024px){
  .hero-title--medium{font-size:clamp(43px,3.1vw,48px);line-height:1.03;}
  .hero-title--long{font-size:clamp(38px,2.85vw,44px);line-height:1.02;}
  /* Mosaico editorial: as duas linhas da coluna esquerda têm alturas
     controladas. Nenhuma imagem pode assim decidir a altura da grelha. */
  .destaque-grid{align-items:stretch;}
  .destaque .section-head{margin-bottom:10px;}
  /* More compact lead card; the two lower pieces take the recovered height. */
  .dest-left{grid-template-rows:clamp(250px,19vw,300px) clamp(280px,23vw,340px);min-height:0;}
  .dest-left-bottom{align-items:stretch;min-height:0;}
  .card{min-height:0;}
  .card-body{min-height:0;overflow:hidden;}
  .card--a{height:100%;}
  .card--a .ph{height:100%;min-height:0;aspect-ratio:auto;}
  .card--b{display:grid;grid-template-rows:1fr 1fr;height:100%;}
  .card--b .ph{height:100%;min-height:0;aspect-ratio:auto;}
  /* Peça central: fotografia vertical limitada à altura da segunda linha. */
  .card--c{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:1fr;height:100%;}
  .card--c .ph{width:100%;height:100%;min-height:0;aspect-ratio:auto;}
  /* Desktop: the right-hand photograph extends the column to the shared base. */
  .card--d{display:grid;grid-template-columns:1fr;grid-template-rows:62% 38%;height:calc(clamp(250px,19vw,300px) + clamp(280px,23vw,340px) + var(--gap));min-height:0;}
  .card--d .ph{width:100%;height:100%;min-height:0;aspect-ratio:auto;}
  /* No desktop o dossiê é panorâmico, como no mockup V4; a altura não pode
     crescer com a largura da coluna nem com o conteúdo do painel ao lado. */
  .dossie-module .ph{height:auto;min-height:0;aspect-ratio:2.35/1;}
}

/* Mobile V4: keep editorial cards compact with live WordPress titles. */
@media (max-width:767.98px){
  .card-title{font-size:18px;line-height:1.1;}
  .card--a .card-title{font-size:20px;}
  .card--d .card-title{font-size:18px;}
  .card .arrow-link{margin-top:10px;}
  .card--a .card-body{padding:18px 0 18px 18px;}
  .card--b .card-cat,.card--c .card-cat,.card--d .card-cat{display:block;}
  .dest-left-bottom{align-items:stretch;}
  .card--b,.card--c{height:100%;}
  /* The two central cards share the same top and bottom edge. */
  .card--c{margin-top:0;}
  /* The career image uses a taller crop, while the grid keeps both columns
     to the same card height without a circular 100%-height calculation. */
  .card--d{align-items:stretch;}
  .card--d .ph{width:100%;height:auto;min-height:0;aspect-ratio:4/5;}

}

/* Tablet: the weekly stories sit below the hero as three horizontal cards,
   avoiding the squeezed third desktop column. */
@media (min-width:768px) and (max-width:1199.98px){

  .hero{padding:28px 0 30px;}
  .hero-grid{grid-template-columns:1fr 1fr;gap:30px;}
  .hero-copy{display:block;grid-column:1;grid-row:1;padding-top:12px;}
  .hero-figure{grid-column:2;grid-row:1 / span 1;}
  /* End the hero image with the left-column pager, rather than below it. */
  .hero-figure .ph{aspect-ratio:1.25/1;}
  /* Separate the CTA from the pagination, as in the desktop hero. */
  .hero-cta{margin-bottom:18px;}
  .week{grid-column:1 / -1;grid-row:2;border-top:1px solid var(--line);padding-top:26px;margin-top:4px;}
  .week ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:20px;}
  .week li{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:0 18px;border-top:0;border-bottom:0;border-left:1px solid var(--line);}
  .week li:first-child{padding-left:0;border-left:0;}
  .week .num{font-size:20px;}
  .week .txt{font-size:14px;line-height:1.45;}
  .week-more{margin-top:24px;}

  /* Keep every CTA visible in the tablet mosaic when WordPress titles run long. */
  .destaque-grid{align-items:start;}
  .dest-left-bottom{align-items:start;}
  .card--b,.card--c{height:auto;min-height:0;overflow:visible;}
  .card--b .card-body,.card--c .card-body{min-height:0;overflow:visible;gap:14px;}
  .card--b .arrow-link,.card--c .arrow-link{display:inline-flex;margin-top:12px;}
  .card--c{display:flex;flex-direction:column;}
  .card--c .ph{width:100%;height:auto;min-height:0;aspect-ratio:4/3;}
  .card--d{height:auto;align-self:start;}
}