/* =================================================================
   Aída Franques · Psicologia Bariátrica
   Persona A — Editorial Premium
   Identidade do cliente: marsala #782430 (logo). Sem marca Digital Bloom.
   ================================================================= */

:root{
  --marsala:#782430;
  --marsala-deep:#5C1A24;
  --vinho:#78303C;
  --blush:#D9A9AE;
  --rose:#F0E4E4;
  --creme:#FBF6F2;
  --neutro:#F2E9E2;
  --tinta:#3A2A2C;
  --tinta-suave:#6B5A5C;
  --branco:#FFFFFF;

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw:1180px;
  --gut:clamp(1.25rem, 4vw, 2.5rem);
  --sec-y:clamp(3rem, 6vw, 5rem);
  --radius:3px;
  --shadow:0 18px 50px -24px rgba(92,26,36,.45);
  --hair:rgba(120,36,48,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;       /* 17px, confortável para público 60+ */
  line-height:1.7;
  color:var(--tinta);
  background:var(--creme);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;line-height:1.12;font-weight:600}
p{margin:0 0 1rem}
.display{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ---------- Grão editorial sobre todo o fundo ---------- */
.grain{
  position:fixed;inset:0;width:100%;height:100%;
  opacity:.04;pointer-events:none;z-index:1;mix-blend-mode:multiply;
}

/* ---------- Filete divisor com nó central (criativo, minimalista) ---------- */
.rule{
  position:relative;border:0;height:18px;
  width:min(var(--maxw), calc(100% - 2 * var(--gut)));margin:0 auto;
  background:linear-gradient(90deg, transparent, rgba(120,36,48,.28) 22%, rgba(120,36,48,.28) 78%, transparent) center/100% 1px no-repeat;
}
.rule::after{
  content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;
  background:var(--marsala);box-shadow:0 0 0 4px var(--creme);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  padding:.85rem 1.6rem;border-radius:var(--radius);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  min-height:48px;
}
.btn--solid{background:var(--marsala);color:var(--branco)}
.btn--solid:hover{background:var(--marsala-deep);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--marsala);border-color:var(--hair)}
.btn--ghost:hover{border-color:var(--marsala);transform:translateY(-2px)}
.btn--light{background:var(--creme);color:var(--marsala)}
.btn--light:hover{background:var(--branco);transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(0,0,0,.4)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:1.1rem 0;
}
.site-header.scrolled{
  background:rgba(251,246,242,.92);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 var(--hair);
  padding:.6rem 0;
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.7rem}
.brand__logo{height:46px;width:auto;object-fit:contain;display:block;transition:height .3s ease}
.site-header.scrolled .brand__logo{height:40px}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--marsala)}
.brand__role{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-suave)}

.nav{display:flex;align-items:center;gap:2rem}
.nav__list{display:flex;gap:1.6rem}
.nav__list a{font-size:.92rem;font-weight:500;color:var(--tinta);position:relative;padding:.2rem 0}
.nav__list a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--marsala);transition:width .25s ease}
.nav__list a:hover,.nav__list a.active{color:var(--marsala)}
.nav__list a:hover::after,.nav__list a.active::after{width:100%}
.nav__cta{padding:.6rem 1.3rem;min-height:42px}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;background:none;border:0;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--marsala);transition:transform .3s ease,opacity .3s ease;margin:0 auto}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Seção base ---------- */
.section{position:relative;padding-block:var(--sec-y);z-index:2}
.section__head{margin-bottom:clamp(2rem,5vw,3.5rem);max-width:760px}
.section__index{
  font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--blush);
  letter-spacing:.2em;display:block;margin-bottom:.4rem;
}
.section__title{font-size:clamp(2.1rem,5vw,3.4rem);color:var(--marsala)}
.section__intro{margin-top:1rem;color:var(--tinta-suave);font-size:1.1rem;max-width:60ch}
.note{margin-top:1.25rem;font-size:.9rem;color:var(--tinta-suave);font-style:italic}

/* =================================================================
   HERO
   ================================================================= */
.hero{position:relative;padding-top:clamp(8rem,16vw,11rem);padding-bottom:var(--sec-y);overflow:hidden;z-index:2}
.hero__decor{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__rings{position:absolute;top:-8%;right:-12%;width:min(70vw,620px);color:var(--blush);opacity:.5}
.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.eyebrow{
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vinho);font-weight:600;margin-bottom:1.1rem;
}
.hero__title{font-size:clamp(3.2rem,9vw,6rem);color:var(--marsala);margin-bottom:1.2rem}
.hero__lead{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.35;color:var(--tinta);font-style:italic;margin-bottom:1.2rem}
.hero__sub{font-size:1.1rem;color:var(--tinta-suave);max-width:48ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem}
.hero__crp{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}

/* ---------- Moldura editorial com filete deslocado (offset frame) ---------- */
.offset-frame{position:relative;margin:0}
.offset-frame::before{
  content:'';position:absolute;inset:0;
  border:1.5px solid var(--marsala);border-radius:var(--radius);
  transform:translate(16px,16px);z-index:0;transition:transform .4s ease;
}
.offset-frame img{position:relative;z-index:1;border-radius:var(--radius);box-shadow:var(--shadow)}
.offset-frame:hover::before{transform:translate(10px,10px)}
.offset-frame:hover img{transform:scale(1.015)}
.offset-frame img{transition:transform .5s ease}
.offset-frame--left::before{transform:translate(-16px,16px)}
.offset-frame--left:hover::before{transform:translate(-10px,10px)}

.hero__figure{width:100%;max-width:420px;justify-self:end}

/* =================================================================
   SOBRE
   ================================================================= */
.pullquote{
  margin:0 0 clamp(2.5rem,6vw,4rem);
  border-left:3px solid var(--marsala);
  padding-left:clamp(1.2rem,3vw,2.2rem);max-width:880px;
}
.pullquote p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.3;color:var(--marsala);margin:0;
}
.sobre__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.sobre__figure{width:100%;max-width:380px}
.sobre__body p{color:var(--tinta);margin-bottom:1.2rem}

.stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--hair)}
.stats li{display:flex;flex-direction:column}
.stats__num{font-family:var(--serif);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:700;color:var(--marsala);line-height:1}
.stats__label{font-size:.85rem;color:var(--tinta-suave);max-width:14ch;margin-top:.3rem}

/* =================================================================
   ATENDIMENTOS — lista editorial com filetes
   ================================================================= */
.editorial-list{border-top:1px solid var(--hair)}
.editorial-list__item{
  display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:1rem 2.5rem;
  padding:1.8rem 0;border-bottom:1px solid var(--hair);align-items:baseline;
}
.editorial-list__title{display:flex;align-items:center;gap:.8rem;color:var(--marsala)}
.editorial-list__title h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--marsala)}
.editorial-list__title svg{flex:0 0 auto;color:var(--vinho)}
.editorial-list__item p{margin:0;color:var(--tinta-suave)}

/* =================================================================
   COMO FUNCIONA — passos com filete conector
   ================================================================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2rem);position:relative}
.steps::before{content:'';position:absolute;top:24px;left:6%;right:6%;height:1px;background:var(--hair);z-index:0}
.steps__item{position:relative;z-index:1}
.steps__num{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--creme);border:1.5px solid var(--marsala);
  font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--marsala);
  margin-bottom:1.2rem;
}
.steps__item h3{font-family:var(--serif);font-size:1.45rem;color:var(--marsala);margin-bottom:.5rem}
.steps__item p{font-size:.98rem;color:var(--tinta-suave);margin:0}

/* =================================================================
   GRUPOS
   ================================================================= */
.grupos__inner{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.grupos__lead{color:var(--tinta-suave);font-size:1.1rem;margin:1.2rem 0 1.8rem}
.grupos__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem)}
.grupos__card{background:var(--branco);border:1px solid var(--hair);border-radius:var(--radius);padding:1.8rem;box-shadow:0 16px 40px -30px rgba(92,26,36,.5)}
.grupos__card h3{font-family:var(--serif);font-size:1.5rem;color:var(--marsala);margin-bottom:1rem}
.ticklist li{position:relative;padding-left:1.7rem;margin-bottom:.7rem;color:var(--tinta);font-size:.98rem}
.ticklist li::before{
  content:'';position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--blush);border:1.5px solid var(--marsala);
}

/* =================================================================
   LIVROS
   ================================================================= */
.livros__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}
.livro{margin:0;display:flex;flex-direction:column;gap:1.2rem}
.livro__cover{width:100%;max-width:230px}
.livro__cover img{width:100%;background:var(--branco)}
.livro figcaption h3{font-family:var(--serif);font-size:1.3rem;color:var(--marsala);margin-bottom:.4rem;line-height:1.2}
.livro figcaption p{font-size:.9rem;color:var(--tinta-suave);margin:0}
.livros__more{margin-top:clamp(2rem,5vw,3.2rem);padding-top:1.6rem;border-top:1px solid var(--hair);color:var(--tinta-suave);max-width:70ch;font-size:1.02rem}

/* =================================================================
   DIFERENCIAIS — número gigante
   ================================================================= */
.bignum{display:grid;gap:0}
.bignum__item{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,4vw,3rem);align-items:center;
  padding:2rem 0;border-bottom:1px solid var(--hair);
}
.bignum__item:first-child{border-top:1px solid var(--hair)}
.bignum__n{font-family:var(--serif);font-size:clamp(3.5rem,9vw,6rem);font-weight:700;color:var(--rose);line-height:.8}
.bignum__item h3{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);color:var(--marsala);margin-bottom:.4rem}
.bignum__item p{margin:0;color:var(--tinta-suave);max-width:60ch}

/* =================================================================
   CTA BAND — bloco âncora marsala
   ================================================================= */
.cta-band{position:relative;background:var(--marsala);color:var(--creme);overflow:hidden;padding-block:clamp(4rem,8vw,6.5rem);z-index:2}
.cta-band__decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cta-band__mark{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(40vw,360px);opacity:.10;filter:brightness(0) invert(1)}
.cta-band__inner{position:relative;z-index:1;text-align:center;max-width:720px}
.cta-band h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1rem;color:var(--creme)}
.cta-band p{color:rgba(251,246,242,.85);font-size:1.12rem;margin-bottom:2rem;margin-inline:auto;max-width:54ch}

/* =================================================================
   FAQ
   ================================================================= */
.accordion{max-width:860px;border-top:1px solid var(--hair)}
.accordion__item{border-bottom:1px solid var(--hair)}
.accordion__trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:1.4rem 0;font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:600;color:var(--marsala);
}
.accordion__icon{flex:0 0 auto;transition:transform .3s ease;color:var(--vinho)}
.accordion__trigger[aria-expanded="true"] .accordion__icon{transform:rotate(180deg)}
.accordion__panel{overflow:hidden;max-height:0;transition:max-height .35s ease}
.accordion__panel p{margin:0;padding:0 0 1.5rem;color:var(--tinta-suave);max-width:70ch}

/* =================================================================
   CONTATO + FORM
   ================================================================= */
.contato__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contato__info .section__index{position:static}
.contato__info > p{color:var(--tinta-suave);margin-bottom:1.6rem;max-width:46ch}

.contatos{display:flex;flex-direction:column;gap:.4rem;margin-bottom:2rem}
.contatos a{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;color:var(--tinta);font-weight:500}
.contatos a:hover{color:var(--marsala)}
.contatos svg{flex:0 0 auto;color:var(--marsala)}

.enderecos{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;padding-top:1.6rem;border-top:1px solid var(--hair)}
.enderecos h3{font-family:var(--serif);font-size:1.2rem;color:var(--marsala);margin-bottom:.2rem}
.enderecos p{margin:0;color:var(--tinta-suave);font-size:.96rem}

.form{background:var(--branco);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.4rem);box-shadow:0 20px 50px -34px rgba(92,26,36,.6)}
.form__field{margin-bottom:1.1rem}
.form__field label{display:block;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.4rem}
.form input,.form textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--tinta);
  padding:.8rem .9rem;border:1.5px solid var(--hair);border-radius:var(--radius);background:var(--creme);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--marsala);box-shadow:0 0 0 3px var(--rose)}
.form textarea{resize:vertical}
.form__error{display:block;min-height:1rem;font-size:.8rem;color:#b3261e;margin-top:.3rem}
.form__consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--tinta-suave);margin:.4rem 0 1.2rem}
.form__consent input{width:auto;margin-top:.25rem;accent-color:var(--marsala)}
.form__consent a{color:var(--marsala);text-decoration:underline}
.form__submit{width:100%}
.form__feedback{margin:1rem 0 0;font-size:.92rem;text-align:center;min-height:1.2rem}
.form__feedback.ok{color:var(--marsala);font-weight:600}
.form__feedback.err{color:#b3261e}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{position:relative;background:var(--marsala-deep);color:rgba(251,246,242,.8);z-index:2;padding-top:clamp(3rem,6vw,4.5rem)}
.site-footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:clamp(2rem,5vw,3.5rem);padding-bottom:2.5rem}
.site-footer__brand img{width:240px;max-width:80%;margin-bottom:1.2rem}
.site-footer__brand p{font-size:.95rem;max-width:42ch;color:rgba(251,246,242,.75)}
.site-footer h3{font-family:var(--serif);font-size:1.2rem;color:var(--creme);margin-bottom:1rem}
.site-footer__nav ul{display:flex;flex-direction:column;gap:.55rem}
.site-footer__nav a{font-size:.95rem;color:rgba(251,246,242,.8)}
.site-footer__nav a:hover{color:var(--branco)}
.contatos--footer a{color:rgba(251,246,242,.85)}
.contatos--footer svg{color:var(--blush)}
.contatos--footer a:hover{color:var(--branco)}
.site-footer__crp{margin-top:1rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,246,242,.6)}
.site-footer__bottom{border-top:1px solid rgba(251,246,242,.16);padding-block:1.4rem}
.site-footer__bottom-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.82rem;color:rgba(251,246,242,.65)}
.site-footer__bottom-inner p{margin:0}
.site-footer__links a{color:rgba(251,246,242,.8);text-decoration:underline;text-underline-offset:2px}
.site-footer__links a:hover{color:var(--branco)}
.site-footer__links span{margin:0 .4rem}

/* =================================================================
   WHATSAPP FLUTUANTE
   ================================================================= */
.wa-float{
  position:fixed;bottom:2rem;right:2rem;z-index:900;
  width:58px;height:58px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);
  animation:wa-float 3.2s ease-in-out infinite, wa-pulse 2.8s ease-out 1.2s infinite;
  will-change:transform,box-shadow;
}
.wa-float:hover{animation-play-state:paused;transform:scale(1.13)}
@keyframes wa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes wa-pulse{0%{box-shadow:0 10px 30px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 10px 30px -8px rgba(37,211,102,.6),0 0 0 20px rgba(37,211,102,0)}100%{box-shadow:0 10px 30px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,0)}}

/* =================================================================
   MOVIMENTO — reveal, stagger, deriva, parallax
   ================================================================= */
.anim{opacity:0;transform:translateY(12px);animation:anim-in .7s ease-out forwards;animation-delay:calc(var(--i,0) * 110ms + .15s)}
@keyframes anim-in{to{opacity:1;transform:none}}

.animate-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .7s ease-out, transform .7s ease-out;transition-delay:calc(var(--i,0) * 90ms)}
.animate-on-scroll.visible{opacity:1;transform:none}

@keyframes drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0) rotate(1.2deg)}100%{transform:translate3d(0,0,0)}}
.decor-drift{animation:drift 20s ease-in-out infinite;will-change:transform}

/* =================================================================
   RESPONSIVO
   ================================================================= */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:2.5rem}
  .hero__figure{order:-1;max-width:340px;justify-self:start}
  .sobre__grid{grid-template-columns:1fr;gap:2rem}
  .sobre__figure{max-width:340px}
  .grupos__inner{grid-template-columns:1fr}
  .contato__inner{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
}

@media (max-width:760px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.5rem;
    background:var(--creme);padding:6rem 2rem 2rem;
    transform:translateX(100%);transition:transform .35s ease;
    box-shadow:-20px 0 60px -30px rgba(0,0,0,.5);z-index:95;
  }
  .nav.open{transform:translateX(0)}
  .nav__list{flex-direction:column;gap:1.2rem}
  .nav__list a{font-size:1.1rem}
  .nav__cta{width:100%}
  .nav-toggle{display:flex;z-index:110}
  .livros__grid{grid-template-columns:1fr 1fr}
  .grupos__cols{grid-template-columns:1fr}
  .editorial-list__item{grid-template-columns:1fr;gap:.6rem}
  .site-footer__inner{grid-template-columns:1fr;gap:2rem}
}

@media (max-width:480px){
  body{font-size:1rem}
  .steps{grid-template-columns:1fr}
  .livros__grid{grid-template-columns:1fr 1fr}
  .stats{gap:1.4rem}
  .wa-float{bottom:1.2rem;right:1.2rem}
  .offset-frame::before{transform:translate(10px,10px)}
  .offset-frame--left::before{transform:translate(-10px,10px)}
}

/* =================================================================
   PREFERS REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .anim,.animate-on-scroll{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .decor-drift{animation:none!important}
  [data-parallax]{transform:none!important}
  .wa-float{animation:none!important}
}

/* ============ Blog — chamada na home ============ */
/* Cards de convite (placeholder). Quando a plataforma publica, o bloco
   entre BLOG-CHAMADA:INICIO/FIM é reescrito com os artigos reais. */
.blog-preview{
  list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,3vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.blog-preview__card{
  display:flex;flex-direction:column;background:var(--branco);
  border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 10px 30px -22px rgba(92,26,36,.4);transition:transform .3s ease,box-shadow .3s ease;
}
.blog-preview__card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-preview__capa{display:block;aspect-ratio:3/2;background:
  linear-gradient(135deg,var(--rose),var(--blush));}
.blog-preview__body{display:flex;flex-direction:column;gap:.6rem;padding:1.3rem 1.4rem 1.5rem}
.blog-preview__selo{
  align-self:flex-start;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--marsala);
  background:var(--rose);padding:.3rem .7rem;border-radius:999px;
}
.blog-preview__titulo{font-family:var(--serif);font-size:1.3rem;line-height:1.25;color:var(--marsala-deep)}
.blog-preview__acao{margin-top:clamp(1.5rem,4vw,2.5rem);text-align:center}