/* ============================================================
   HUB CATÓLICO · HOME
   Sistema visual do brandbook v1.0 — Akrobat + Inter + Source Serif.
   Mostarda patrimonial #D4A017 sobre grafite. A casa não usa vermelho.
   ============================================================ */

@font-face{ font-family:'Akrobat'; src:url('/assets/fonts/Akrobat-Black.otf') format('opentype'); font-weight:900; font-display:swap; }
@font-face{ font-family:'Akrobat'; src:url('/assets/fonts/Akrobat-ExtraBold.otf') format('opentype'); font-weight:800; font-display:swap; }
@font-face{ font-family:'Akrobat'; src:url('/assets/fonts/Akrobat-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Akrobat'; src:url('/assets/fonts/Akrobat-SemiBold.otf') format('opentype'); font-weight:600; font-display:swap; }

:root{
  --ink:#1A1A1A; --gold:#D4A017; --gold-deep:#A77E0F; --white:#fff;
  --cream:#F5F0E8; --taupe:#7A7066; --stone:#D0CCC4;
  --soft:rgba(26,26,26,.10); --strong:rgba(26,26,26,.20); --on-dark:rgba(255,255,255,.12);
  --c-patrono:#C42020; --c-dpa:#C0312B; --c-selo:#2F4F4F;
  --display:'Akrobat','Bebas Neue',impact,sans-serif;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:'Source Serif 4','Source Serif Pro',Georgia,serif;
  --container:1180px; --narrow:760px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:78px; -webkit-text-size-adjust:100%; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
body{
  background:var(--white); color:var(--ink); font-family:var(--sans);
  font-size:1.0625rem; line-height:1.7; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); }
.container--narrow{ max-width:var(--narrow); }

.eyebrow{ display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:1rem; }
.eyebrow--dark{ color:var(--gold); }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.sec-head__title{ font-size:clamp(1.7rem,3.2vw,2.6rem); font-weight:700; line-height:1.08; letter-spacing:-.02em; max-width:20ch; }
.sec-head__title--light{ color:var(--white); }
.sec-head__link{ font-size:.875rem; font-weight:600; color:var(--gold-deep); white-space:nowrap; padding-bottom:.3rem; }
.sec-head__link:hover{ color:var(--ink); }

/* ---- BOTÕES ---- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-size:.9375rem; font-weight:600; letter-spacing:.01em;
  padding:.85rem 1.5rem; border-radius:999px; border:1px solid transparent; transition:all 220ms var(--ease); cursor:pointer; }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--white); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.btn--ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ---- TOPNAV ---- */
.topnav{ position:fixed; inset:0 0 auto 0; z-index:100; transition:background 300ms,border-color 300ms;
  background:linear-gradient(to bottom,rgba(10,9,8,.55),transparent); }
.topnav.is-stuck{ background:rgba(255,255,255,.92); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--soft); }
.topnav__inner{ max-width:var(--container); margin-inline:auto; padding:.85rem clamp(1.25rem,5vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.topnav__logo-img{ height:30px; width:auto; filter:brightness(0) invert(1); transition:filter 300ms; }
.topnav.is-stuck .topnav__logo-img{ filter:none; }
.topnav__menu{ display:flex; gap:1.6rem; align-items:center; }
.topnav__menu a{ font-size:.875rem; font-weight:500; color:rgba(255,255,255,.82); letter-spacing:.01em; transition:color 200ms; white-space:nowrap; }
.topnav__menu a:hover{ color:#fff; }
.topnav.is-stuck .topnav__menu a{ color:var(--taupe); }
.topnav.is-stuck .topnav__menu a:hover{ color:var(--ink); }
.topnav__cta{ padding:.4rem 1rem; border:1px solid rgba(255,255,255,.45); border-radius:999px; }
.topnav.is-stuck .topnav__cta{ border-color:var(--gold); color:var(--gold-deep)!important; }
.topnav__cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink)!important; }
.topnav__burger{ display:none; width:30px; height:22px; flex-direction:column; justify-content:space-between; padding:3px 0; background:none; border:0; cursor:pointer; }
.topnav__burger span{ display:block; height:2px; background:#fff; transition:background 300ms; }
.topnav.is-stuck .topnav__burger span{ background:var(--ink); }

/* ---- HERO ---- */
.hero{ position:relative; height:100svh; min-height:620px; max-height:960px; overflow:hidden; background:#0a0908; }
.hero__stage{ position:absolute; inset:0; z-index:1; }
.hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1300ms var(--ease); }
.hero__slide.is-active{ opacity:1; }
.hero__parallax{ position:absolute; inset:-7%; will-change:transform; transition:transform 700ms var(--ease); }
.hero__img{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); }
.hero__slide.is-active .hero__img{ animation:kenburns 9s linear forwards; }
@keyframes kenburns{ from{transform:scale(1.05)} to{transform:scale(1.18)} }
.hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top,rgba(10,9,8,.95) 4%,rgba(10,9,8,.55) 34%,rgba(10,9,8,.12) 62%,rgba(10,9,8,.34) 100%); }
.hero__scrim::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 72% 16%,rgba(212,160,23,.14),transparent 55%); }
.hero__content{ position:absolute; inset:auto 0 0 0; z-index:3; padding-bottom:clamp(3.5rem,9vh,7rem); }
.hero__caption{ will-change:transform,opacity; transition:opacity 500ms var(--ease),transform 500ms var(--ease); max-width:46rem; }
.hero__caption.is-swapping{ opacity:0; transform:translateY(20px); }
.hero__ed{ display:inline-flex; align-items:center; gap:.65rem; font-size:.8125rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; }
.hero__ed::before{ content:''; width:28px; height:2px; background:currentColor; }
.hero__title{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.6rem); line-height:.92; letter-spacing:.005em; color:#fff;
  text-shadow:0 2px 50px rgba(0,0,0,.45); }
.hero__sub{ font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(255,255,255,.82); max-width:50ch; margin-top:1.4rem; line-height:1.6; }
.hero__actions{ display:flex; gap:.85rem; flex-wrap:wrap; margin-top:2rem; }
.hero__nav{ display:flex; align-items:center; gap:.6rem; margin-top:2.4rem; }
.hero__dot{ width:36px; height:3px; border-radius:2px; background:rgba(255,255,255,.28); overflow:hidden; position:relative; cursor:pointer; border:0; padding:0; }
.hero__dot::after{ content:''; position:absolute; inset:0; width:0; background:#fff; }
.hero__dot.is-active::after{ width:100%; transition:width var(--dur,7000ms) linear; }
.hero__dot:hover{ background:rgba(255,255,255,.5); }
.hero__cue{ position:absolute; right:clamp(1.25rem,5vw,2.5rem); bottom:clamp(2rem,5vh,3rem); z-index:3;
  font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6);
  writing-mode:vertical-rl; display:flex; align-items:center; gap:.8rem; }
.hero__cue::after{ content:''; width:1px; height:46px; background:linear-gradient(rgba(255,255,255,.6),transparent); animation:cue 2.2s ease infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.5); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---- MANIFESTO ---- */
.manifesto{ padding:clamp(5rem,10vw,8rem) 0; background:var(--cream); text-align:center; }
.manifesto__lead{ font-family:var(--serif); font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.32; letter-spacing:-.01em; color:var(--ink); }
.manifesto__body{ font-size:1.1875rem; line-height:1.75; color:#3a362f; max-width:62ch; margin:1.75rem auto 0; }
.manifesto__body em{ font-family:var(--serif); font-style:italic; color:var(--gold-deep); }
.manifesto__sign{ margin-top:2rem; font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); }

/* ---- FRENTES ---- */
.frentes{ padding:clamp(5rem,9vw,7.5rem) 0; }
.frentes__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.frente{ --c:var(--gold); position:relative; display:flex; flex-direction:column; padding:2.5rem 2rem 2rem;
  border:1px solid var(--soft); border-radius:10px; background:var(--white); overflow:hidden;
  transition:transform 280ms var(--ease),box-shadow 280ms,border-color 220ms; }
.frente[data-brand="patrono"]{ --c:var(--c-patrono); }
.frente[data-brand="dpa"]{ --c:var(--c-dpa); }
.frente[data-brand="selo"]{ --c:var(--c-selo); }
.frente:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(26,26,26,.10); border-color:var(--strong); }
.frente__bar{ position:absolute; inset:0 0 auto 0; height:5px; background:var(--c); }
.frente__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.75rem; }
.frente__tag{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--c); }
.frente__arrow{ font-size:1.25rem; color:var(--c); transform:translateX(-4px); opacity:0; transition:all 280ms var(--ease); }
.frente:hover .frente__arrow{ transform:translateX(0); opacity:1; }
.frente__name{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(2.2rem,4vw,3rem); line-height:.95; letter-spacing:.01em; }
.frente__desc{ color:var(--taupe); font-size:.9875rem; line-height:1.6; margin-top:1rem; flex:1; }
.frente__desc em{ font-family:var(--serif); font-style:italic; color:var(--ink); }
.frente__link{ margin-top:1.75rem; font-size:.8125rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c); }

/* ---- NO AR (DARK) ---- */
.noar{ padding:clamp(5rem,9vw,7.5rem) 0; background:var(--ink); color:#fff; }
.noar .sec-head__title{ color:#fff; }
.noar__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.tile{ position:relative; min-height:300px; display:flex; align-items:flex-end; border-radius:10px; overflow:hidden;
  border:1px solid var(--on-dark); background:#222018; transition:transform 280ms var(--ease),border-color 220ms; }
.tile::before{ content:''; position:absolute; inset:0; opacity:.5; transition:opacity 320ms; }
.tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,9,8,.92),rgba(10,9,8,.25) 70%); }
.tile--tsd::before{ background:radial-gradient(ellipse at 70% 20%,rgba(212,160,23,.5),transparent 60%),linear-gradient(135deg,#3a2d10,#1a1a1a); }
.tile--mart::before{ background:radial-gradient(ellipse at 30% 20%,rgba(196,32,32,.4),transparent 60%),linear-gradient(135deg,#2a1414,#1a1a1a); }
.tile--blog::before{ background:radial-gradient(ellipse at 60% 80%,rgba(122,112,102,.5),transparent 60%),linear-gradient(135deg,#2a2620,#1a1a1a); }
.tile:hover{ transform:translateY(-4px); border-color:rgba(212,160,23,.5); }
.tile:hover::before{ opacity:.8; }
.tile__body{ position:relative; z-index:2; padding:2rem 1.75rem 1.75rem; }
.tile__kicker{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.tile__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:2rem; line-height:.95; margin-top:.65rem; }
.tile__desc{ font-size:.9375rem; line-height:1.55; color:rgba(255,255,255,.74); margin-top:.75rem; max-width:34ch; }
.tile__cta{ display:inline-block; margin-top:1.25rem; font-size:.8125rem; font-weight:700; letter-spacing:.08em; color:#fff; }
.tile:hover .tile__cta{ color:var(--gold); }

/* ---- DO BLOG (DINÂMICO) ---- */
.frombog{ padding:clamp(5rem,9vw,7.5rem) 0; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--soft);
  border-radius:8px; overflow:hidden; transition:transform 250ms var(--ease),box-shadow 250ms,border-color 200ms; }
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(26,26,26,.08); border-color:var(--strong); }
.card__top{ height:5px; background:var(--c-accent,var(--gold)); }
.card__body{ padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.card__ed{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--c-accent,var(--gold-deep)); margin-bottom:.75rem; }
.card__title{ font-size:1.3rem; font-weight:700; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
.card:hover .card__title{ color:var(--c-accent,var(--gold-deep)); }
.card__excerpt{ font-size:.9375rem; color:var(--taupe); line-height:1.6; margin-top:.75rem; flex:1; }
.card__meta{ display:flex; align-items:center; gap:.5rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--soft); font-size:.8125rem; color:var(--taupe); }
.card__meta strong{ color:var(--ink); font-weight:600; }
.card__dot{ width:3px; height:3px; border-radius:50%; background:var(--stone); }
.blog-skeleton{ height:230px; border-radius:8px; background:linear-gradient(100deg,var(--cream) 30%,#efe9df 50%,var(--cream) 70%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.empty{ grid-column:1/-1; padding:3.5rem 2rem; text-align:center; background:var(--cream); border-radius:10px; border:1px dashed var(--strong); }
.empty p{ color:var(--taupe); }
.empty a{ color:var(--gold-deep); font-weight:600; }

/* ---- AUDIENCE ---- */
.audience{ padding:clamp(5rem,9vw,7.5rem) 0; background:var(--cream); }
.audience__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.aud{ padding:1.75rem 1.5rem; background:var(--white); border:1px solid var(--soft); border-radius:8px; border-top:3px solid var(--gold); }
.aud__t{ font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; }
.aud__d{ font-size:.9375rem; color:var(--taupe); line-height:1.55; margin-top:.5rem; }

/* ---- FOOTER ---- */
.footer{ background:var(--ink); color:#fff; padding-block:clamp(3.5rem,6vw,5rem); border-top:3px solid var(--gold); }
.footer__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
  padding-bottom:2rem; border-bottom:1px solid var(--on-dark); margin-bottom:2.5rem; }
.footer__logo{ height:42px; width:auto; }
.footer__tag{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--stone); }
.footer__nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-bottom:2.5rem; }
.footer__col h4{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; }
.footer__col a{ display:block; font-size:.9rem; color:var(--stone); padding:.22rem 0; transition:color 180ms; }
.footer__col a:hover{ color:#fff; }
.footer__meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.75rem; color:var(--taupe);
  padding-top:1.75rem; border-top:1px solid var(--on-dark); }

/* ---- REVEAL ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 700ms var(--ease),transform 700ms var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---- RESPONSIVO ---- */
@media (max-width:960px){
  .topnav__menu{ display:none; } .topnav__burger{ display:flex; }
  .topnav__menu.is-open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:rgba(255,255,255,.97); backdrop-filter:blur(18px); padding:1.25rem clamp(1.25rem,5vw,2.5rem); gap:1rem; border-bottom:1px solid var(--soft); }
  .topnav__menu.is-open a{ color:var(--taupe); }
  .topnav__menu.is-open .topnav__cta{ border-color:var(--gold); align-self:flex-start; }
  .frentes__grid,.noar__grid,.grid{ grid-template-columns:1fr 1fr; }
  .audience__grid{ grid-template-columns:1fr 1fr; }
  .footer__nav{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .frentes__grid,.noar__grid,.grid,.audience__grid{ grid-template-columns:1fr; }
  .hero__cue{ display:none; }
  .hero{ min-height:560px; }
}
@media (prefers-reduced-motion:reduce){
  .hero__slide.is-active .hero__img{ animation:none; transform:scale(1.05); }
  .hero__parallax{ transition:none; } .hero__dot.is-active::after{ transition:none; width:100%; }
  .hero__cue::after,.blog-skeleton{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}