/* ============================================================
   MAVORA SANS — @font-face declarations
   ============================================================ */

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normalthin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normalextralight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normallight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normalregular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normalmedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normalsemibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normalbold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normalextrabold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mavora Sans';
  src: url('fonts/mavorasans-normalblack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   POWERKR® — HOMEPAGE STYLES
   Based on Figma design: fHkqYRlW0Zkb5s1LEz6xlV node 1:2
   Design dimensions: 1200px canvas
   ============================================================ */

/* ---- CUSTOM PROPERTIES ---- */
:root {
  --clr-bg:        #1E1E1E;
  --clr-bg-black:  #000000;
  --clr-surface:   #222222;
  --clr-card:      rgba(255, 255, 255, 0.05);
  --clr-accent:    #FF5D15;
  --clr-accent-lt: #FF7538;
  --clr-text:      #FFFFFF;
  --clr-text-dim:  rgba(255, 255, 255, 0.65);
  --clr-sep:       rgba(255, 255, 255, 0.15);

  --ff-head:   'Mavora Sans', sans-serif;
  --ff-body:   'Plus Jakarta Sans', Arial, Helvetica, sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Spacing from Figma (80px side padding, 1040px inner) */
  --max-w:        1200px;
  --inner-w:      1040px;
  --pad-x:        80px;
}

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
address { font-style: normal; }

/* ---- CONTAINER ---- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  border-radius: 99px;
  font-family: var(--ff-head);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.125;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn:hover { opacity: 0.92; transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); filter: brightness(0.96); }

/* Primary nav CTA — white bg, black text */
.btn--primary {
  background-color: var(--clr-text);
  color: #000000;
  padding: 8px 16px;
}

/* Orange CTA */
.btn--orange {
  background-color: var(--clr-accent);
  color: var(--clr-text);
  border: 1px solid #FF7538;
  box-shadow: 0 0 21px rgba(255,93,21,0.25);
}

/* ---- CARD BASE ---- */
.card {
  background: var(--clr-card);
  background-image: linear-gradient(
    to bottom right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.20) 100%
  );
  border-radius: 24px;
  padding: 24px;
  box-shadow: inset 1px 1px 5px rgba(255,255,255,0.1), 4px 4px 4px rgba(0,0,0,0.25);
}

/* ============================================================
   NAV BAR — 1200×80px, bg #1E1E1E, px 80px
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(30,30,30,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: 80px;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.navbar.is-scrolled {
  background-color: rgba(10,10,10,0.88);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  gap: 10px;
}

.navbar__logo { flex-shrink: 0; }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255,255,255,0.03);
  border-radius: 99px;
  padding: 0 16px;
  border: 1px solid #FFFFFF;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}
.navbar__links a {
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--clr-text);
  padding: 8px;
  transition: color 0.2s;
}
.navbar__links a:hover { color: var(--clr-accent); }
.navbar__sep {
  width: 1px;
  height: 13px;
  background-color: rgba(255,255,255,0.1);
}

/* ---- Hamburger button (mobile only) ---- */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  flex-shrink: 0;
}
.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--clr-text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobile menu overlay ---- */
.navbar__mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--clr-bg);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
}
.navbar__mobile-menu.is-open {
  display: flex;
}
.navbar__mobile-menu a {
  font-family: var(--ff-head);
  font-size: 26px;
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  transition: color 0.2s;
}
.navbar__mobile-menu a:hover { color: var(--clr-accent); }
.navbar__mobile-menu .navbar__link--active { color: var(--clr-accent); }
.navbar__mobile-menu .btn--primary {
  font-size: 16px;
  padding: 12px 32px;
  margin-top: 8px;
}
.navbar__mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--clr-text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

/* ============================================================
   HERO SECTION — 1200×1377px, bg #000, padT 128 padB 64 gap 72
   ============================================================ */
.hero {
  background-color: var(--clr-bg-black);
  background-image: url('images/hero-bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 128px;
  padding-bottom: 64px;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: var(--inner-w);
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  width: 100%;
  max-width: 876px;
}

.hero__headline-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-semibold);
  font-size: 88px;
  line-height: 1;
  letter-spacing: -2.64px;
  color: var(--clr-text);
}

.hero__subtitle {
  font-family: var(--ff-body);
  font-size: 24px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  max-width: 720px;
}

/* Hero image area */
.hero__image-wrapper {
  width: 100%;
  max-width: var(--inner-w);
  border-radius: 32px;
  overflow: hidden;
  line-height: 0;
}

.hero__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 32px;
}

/* ============================================================
   LOGOS CAROUSEL — carrossel infinito de parceiros
   Para adicionar logos: insira novos .logos-carousel__item no HTML.
   O JS clona o track automaticamente para o loop ser perfeito.
============================================================ */
.logos-carousel {
  overflow: hidden;
  padding: 40px 0;
  background: var(--clr-bg-black, #000);
}

.logos-carousel__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  gap: 56px;
  padding: 0 28px;
  animation: logos-scroll 28s linear infinite;
  will-change: transform;
}

.logos-carousel__inner:hover {
  animation-play-state: paused;
}

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logos-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logos-carousel__item img {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity .3s ease;
  display: block;
}

.logos-carousel__item img:hover {
  opacity: 1;
}

/* ============================================================
   SECTION DEFAULTS — padT 64-96, padB 64-96
   ============================================================ */
.section { width: 100%; }

.section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section__header {
  text-align: center;
  max-width: var(--inner-w);
  width: 100%;
}
.section__header--left { text-align: left; max-width: var(--inner-w); }

.section__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--clr-text);
  text-align: center;
}
.section__title--wide { max-width: 848px; }

.section__subtitle {
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--ff-body);
  font-size: 24px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  max-width: 838px;
  text-align: center;
}

/* Cards row — 3 equal columns with 24px gap */
.cards-row {
  display: flex;
  gap: 24px;
  width: 100%;
  max-width: var(--inner-w);
  align-items: stretch;
}
.cards-row .card { flex: 1; }

/* Generic card header */
.card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.card__icon {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 99px;
  background-color: var(--clr-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__icon--lg {
  width: 66px;
  height: 66px;
}

.card__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.24px;
  color: var(--clr-text);
}

.card__text {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.16px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   SECTION LIGHT VARIANT
   Aplique a classe "section--light" na tag <section> para
   alternar fundo claro e escuro entre seções.
   ============================================================ */
.section--light {
  background-color: #F5F5F5;
}

/* Títulos e subtítulos */
.section--light .section__title {
  color: #111111;
}
.section--light .section__subtitle {
  color: rgba(0,0,0,0.55);
}

/* Cards */
.section--light .card {
  background: #FFFFFF;
  background-image: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.section--light .card__icon {
  background-color: #F0F0F0;
}
.section--light .card__title {
  color: #111111;
}
.section--light .card__text {
  color: rgba(0,0,0,0.60);
}

/* Depoimentos */
.section--light .testimonial-card__info strong,
.section--light .testimonial-card__info span {
  color: #111111;
}
.section--light .stars span {
  color: var(--clr-accent);
}

/* Plataforma */
.section--light .feature-item__title {
  color: #111111;
}
.section--light .feature-item__desc {
  color: rgba(0,0,0,0.60);
}

/* FAQ / Accordion */
.section--light .accordion__item {
  background: #FFFFFF;
  background-image: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.section--light .accordion__trigger {
  color: #111111;
}
.section--light .accordion__trigger span {
  color: #111111;
}
.section--light .accordion__icon {
  background-color: #EEEEEE;
}
.section--light .accordion__body p {
  color: rgba(0,0,0,0.60);
}

/* Label do carrossel */
.logos-carousel__label {
  text-align: center;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 24px;
}

/* ============================================================
   REVEAL ANIMATIONS — scroll-triggered fade + slide
   Elementos com .reveal ficam invisíveis até entrar no viewport.
   O JS (IntersectionObserver) adiciona .is-visible quando entram.
   Use --delay (CSS var inline) para stagger.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(.16,1,.3,1), transform 0.65s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   O QUE É — padT 64 padB 88 gap 40
   ============================================================ */
.o-que-e {
  padding-top: 64px;
  padding-bottom: 88px;
}
.o-que-e .container { gap: 40px; }

/* ============================================================
   EMPRESAS FALHAM — padT 64 padB 64 gap 32
   ============================================================ */
.empresas-falham {
  padding-top: 64px;
  padding-bottom: 64px;
}
.empresas-falham .container { align-items: center; }

.stat-block {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: var(--inner-w);
}

.stat-block__number {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 183px;
  line-height: 0.7;
  letter-spacing: 1.83px;
  color: var(--clr-accent);
  flex-shrink: 0;
}

.stat-block__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 589px;
}

.stat-block__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--clr-text);
}

.stat-block__desc {
  font-family: var(--ff-body);
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   DEPOIMENTOS — padT 88 padB 88 gap 64
   ============================================================ */
.depoimentos {
  padding-top: 88px;
  padding-bottom: 88px;
}
.depoimentos .container { gap: 64px; }
.depoimentos .section__title { text-align: center; width: 100%; max-width: var(--inner-w); }

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-card__avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

.testimonial-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testimonial-card__info strong {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--clr-text);
}
.testimonial-card__info span {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
}

.stars {
  display: flex;
  gap: 8px;
}
.stars span {
  font-size: 28px;
  color: #EEB114;
  line-height: 1;
}

/* ============================================================
   ARQUITETURA DE NEGÓCIOS — padT 96 padB 72 gap 64
   ============================================================ */
.arquitetura {
  padding-top: 96px;
  padding-bottom: 72px;
}
.arquitetura .container { gap: 64px; }
.arquitetura .section__title { text-align: center; width: 100%; max-width: var(--inner-w); }

/* Bento Grid: 2 linhas assimétricas — Propósito (357px) + Finanças / Pessoas + Tecnologia (357px) */
.bento-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: var(--inner-w);
}

.bento-row {
  display: flex;
  gap: 32px;
}

.bento-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}

/* Linha 1: small=357px, large=flex-1 | Linha 2: large=flex-1, small=357px */
.bento-card--small { flex: 0 0 357px; min-height: 300px; }
.bento-card--large { flex: 1; min-height: 300px; }

.bento-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bento-card__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.24px;
  color: var(--clr-text);
}

.bento-card__desc {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.16px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   PLATAFORMA QUE TE ACOMPANHA — padT 88 padB 88 gap 80
   ============================================================ */
.plataforma {
  padding-top: 88px;
  padding-bottom: 88px;
}
.plataforma .container { gap: 80px; }
.plataforma .section__title { text-align: center; width: 100%; max-width: var(--inner-w); }

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
  max-width: var(--inner-w);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 88px;
}
.feature-item--reverse { flex-direction: row-reverse; }

.feature-item__image {
  flex: 0 0 476px;
  width: 476px;
  border-radius: 24px;
  overflow: hidden;
  line-height: 0;
}

.feature-item__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

.feature-item__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-item__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.32px;
  color: var(--clr-text);
}

.feature-item__desc {
  font-family: var(--ff-body);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   CRESCIMENTO DA SUA EMPRESA — padT 88 padB 144 gap 120
   ============================================================ */
.crescimento {
  padding-top: 88px;
  padding-bottom: 144px;
}
.crescimento .container { gap: 120px; }

/* Benefits Grid: 2 linhas × 2 itens, com padding horizontal de 176px em cada linha */
.benefits-grid {
  display: flex;
  flex-direction: column;
  gap: 118px;
  width: 100%;
  max-width: var(--inner-w);
}

.benefits-row {
  display: flex;
  gap: 64px;
  padding-left: 176px;
  padding-right: 176px;
  justify-content: space-between;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  text-align: center;
}

.benefit-item__icon {
  width: 66px;
  height: 66px;
  border-radius: 99px;
  background-color: rgba(255,255,255,0.05);
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.02));
  box-shadow: inset 0px 2px 3px rgba(255,255,255,0.25), 0px 4px 4px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex-shrink: 0;
}

.benefit-item__text {
  font-family: var(--ff-head);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   FAQ — padT 88 padB 88 gap 64
   ============================================================ */
.faq {
  padding-top: 88px;
  padding-bottom: 88px;
}
.faq .container { gap: 64px; align-items: flex-start; }
.faq .section__title { text-align: center; }

.accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--inner-w);
}

.accordion__item {
  background: var(--clr-card);
  background-image: linear-gradient(
    to bottom right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.20) 100%
  );
  border-radius: 28px;
  box-shadow: inset 1px 1px 5px rgba(255,255,255,0.1), 0px 4px 4px rgba(0,0,0,0.25);
  overflow: hidden;
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--clr-text);
  text-align: left;
  min-height: 60px;
}

.accordion__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 99px;
  background-color: var(--clr-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent);
  transition: background 0.2s;
}

.accordion__trigger span {
  font-family: var(--ff-head);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: var(--clr-text);
}

.accordion__body {
  display: none;
  padding: 0 10px 16px calc(10px + 40px + 16px);
}
.accordion__body p {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.16px;
  color: rgba(255,255,255,0.7);
}

.accordion__item--open .accordion__body { display: block; }

/* ============================================================
   FINAL CTA — padT 80 padB 80 gap 32, bg image + dark overlay
   ============================================================ */
.final-cta {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--clr-bg-black);
  background-image: url('images/final-cta-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.88) 100%);
  pointer-events: none;
}

.final-cta .container {
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  max-width: var(--inner-w);
}

.final-cta .section__title { max-width: 954px; }
.final-cta .section__subtitle { max-width: 730px; }

/* ============================================================
   FOOTER — padT 80 padB 64 gap 32
   ============================================================ */
.footer {
  padding-top: 80px;
  padding-bottom: 64px;
}
.footer .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: var(--max-w);
}

.footer__divider {
  width: 100%;
  height: 2px;
  background-color: var(--clr-text);
  opacity: 0.15;
}

.footer__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  gap: 152px;
}

.footer__logo-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 236px;
}

.footer__address {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.14px;
  color: rgba(255,255,255,0.6);
}

.footer__nav {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-top: 4px;
}
.footer__nav a {
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: 0.14px;
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--clr-accent); }

.footer__contact {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.14px;
  color: rgba(255,255,255,0.6);
}
.footer__contact p { margin: 0; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: 0.14px;
  color: rgba(255,255,255,0.4);
}

.footer__social {
  display: flex;
  gap: 8px;
}

.footer__social-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.footer__social-icon:hover { color: var(--clr-accent); }

.footer__design-credit {
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: 0.14px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.footer__jungle-logo {
  height: 22px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.9;
}

/* ============================================================
   RESPONSIVE — Tablet (≤1024px) · Mobile (≤768px) · XS (≤480px)
   ============================================================ */

/* ---- TABLET: ≤ 1024px ---- */
@media (max-width: 1024px) {
  :root { --pad-x: 40px; }

  /* Navbar: hide desktop links, show hamburger */
  .navbar__links     { display: none; }
  .navbar .btn--primary { display: none; }
  .navbar__hamburger { display: flex; }

  /* Hero */
  .hero__title    { font-size: 64px; }
  .hero__subtitle { font-size: 22px; }

  /* Stat block */
  .stat-block__number { font-size: 130px; }

  /* Bento grid: mantém 2 colunas assimétricas em 1024px */
  .bento-card--small { flex: 0 0 280px; }

  /* Feature items: tighter gap */
  .feature-item       { gap: 48px; }
  .feature-item__image { flex: 0 0 340px; width: 340px; }

  /* Benefits */
  .benefits-row { padding-left: 80px; padding-right: 80px; }

  /* Footer */
  .footer__top { gap: 48px; }
  .footer__nav { gap: 32px; }
}

/* ---- MOBILE: ≤ 768px ---- */
@media (max-width: 768px) {
  :root { --pad-x: 24px; }

  /* Navbar height */
  .navbar { height: 64px; }
  .navbar__inner { padding-inline: var(--pad-x); }

  /* Hero */
  .hero { padding-top: 72px; padding-bottom: 48px; }
  .hero .container { gap: 48px; }
  .hero__content  { gap: 36px; }
  .hero__text     { gap: 24px; }
  .hero__title    { font-size: 44px; letter-spacing: -1px; }
  .hero__subtitle { font-size: 17px; }
  /* Section typography */
  .section__title    { font-size: 32px; letter-spacing: -0.5px; }
  .section__subtitle { font-size: 17px; }

  /* O que é */
  .o-que-e { padding-top: 48px; padding-bottom: 56px; }
  .o-que-e .container { gap: 32px; }
  .cards-row { flex-direction: column; gap: 16px; }

  /* Empresas falham */
  .empresas-falham { padding-top: 48px; padding-bottom: 48px; }
  .stat-block      { flex-direction: column; gap: 16px; align-items: flex-start; }
  .stat-block__number { font-size: 96px; letter-spacing: -2px; }
  .stat-block__title  { font-size: 26px; }
  .stat-block__desc   { font-size: 16px; }

  /* Depoimentos */
  .depoimentos { padding-top: 56px; padding-bottom: 56px; }
  .depoimentos .container { gap: 40px; }

  /* Arquitetura / bento */
  .arquitetura { padding-top: 56px; padding-bottom: 48px; }
  .arquitetura .container { gap: 40px; }
  .bento-grid { gap: 16px; }
  .bento-row  { gap: 16px; flex-direction: column; }
  .bento-card--small,
  .bento-card--large { flex: none; width: 100%; min-height: 180px; }

  /* Plataforma */
  .plataforma { padding-top: 56px; padding-bottom: 56px; }
  .plataforma .container { gap: 48px; }
  .feature-list { gap: 40px; }
  .feature-item,
  .feature-item--reverse { flex-direction: column; gap: 24px; }
  .feature-item__image   { width: 100%; flex: none; max-width: 100%; }
  .feature-item__title   { font-size: 26px; }
  .feature-item__desc    { font-size: 17px; }

  /* Crescimento */
  .crescimento { padding-top: 56px; padding-bottom: 72px; }
  .crescimento .container { gap: 40px; }
  .benefits-grid { gap: 48px; }
  .benefits-row  { padding-left: 0; padding-right: 0; gap: 24px; }

  /* FAQ */
  .faq { padding-top: 56px; padding-bottom: 56px; }
  .faq .container { gap: 40px; }
  .accordion__trigger span { font-size: 17px; }

  /* Final CTA */
  .final-cta { padding-top: 60px; padding-bottom: 60px; }
  .final-cta .section__title    { font-size: 34px; }
  .final-cta .section__subtitle { font-size: 17px; }

  /* Footer */
  .footer { padding-top: 56px; padding-bottom: 40px; }
  .footer__top    { flex-direction: column; gap: 32px; }
  .footer__nav    { flex-wrap: wrap; gap: 20px; }
  .footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
}

/* ---- EXTRA SMALL: ≤ 480px ---- */
@media (max-width: 480px) {
  :root { --pad-x: 16px; }

  .hero__title { font-size: 36px; }

  .section__title { font-size: 28px; }

  .stat-block__number { font-size: 72px; }

  .bento-row  { flex-direction: column; }
  .bento-card--small,
  .bento-card--large { flex: none; width: 100%; }
  .benefits-row { flex-direction: column; gap: 16px; padding-left: 0; padding-right: 0; }

  .accordion__trigger span { font-size: 15px; }
  .accordion__trigger { padding: 8px 16px 8px 8px; }
}

/* ============================================================
   CONTATO PAGE
   Node 382:85 — 1200×1732px, bg #1E1E1E
   ============================================================ */

/* ---- Nav active link ---- */
.navbar__link--active {
  color: var(--clr-accent) !important;
}

/* ---- Contato Hero — 1200×425px, padT/B 128px ---- */
.contato-hero {
  position: relative;
  background-color: var(--clr-bg-black);
  min-height: 425px;
  display: flex;
  align-items: center;
}

.contato-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.50) 0%,
    rgba(0, 0, 0, 0.78) 100%
  );
  pointer-events: none;
}

.contato-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-top: 128px;
  padding-bottom: 128px;
}

.contato-hero__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--clr-text);
  text-align: center;
}

.contato-hero__subtitle {
  font-family: var(--ff-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--clr-text);
  max-width: 604px;
  text-align: center;
}

/* ---- Form Section — padT 64 padB 88 gap 32, cross CENTER ---- */
.contato-form-section {
  padding-top: 64px;
  padding-bottom: 88px;
}

.contato-form-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.contato-form-section__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 32px;
  line-height: 1.1;
  color: var(--clr-text);
  width: 100%;
  max-width: 628px;
  text-align: center;
}

/* ---- GHL iframe wrapper ---- */
.ghl-form-wrapper {
  width: 100%;
  min-height: 700px;
}

/* ---- Form card — 628px wide, bg same as index cards ---- */
.contato-form {
  width: 100%;
  max-width: 628px;
  background: var(--clr-card);
  background-image: linear-gradient(
    to bottom right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.20) 100%
  );
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- Two-column row ---- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ---- Field group (label + input) ---- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--clr-text);
}

/* Campos obrigatórios (Telefone, Localização) com label em vermelho — estado de erro */
.form-field--error .form-label {
  color: #FF1D1D;
}

/* ---- Input / Textarea ---- */
.form-input {
  width: 100%;
  background-color: #1D1E21;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 99px;
  padding: 8px 12px;
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--clr-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.40);
}

.form-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 93, 21, 0.18);
}

.form-field--error .form-input {
  border-color: rgba(255, 29, 29, 0.60);
}

/* Textarea — border-radius menor (19px) e altura correspondente ao Figma (173px) */
.form-textarea {
  border-radius: 19px;
  min-height: 173px;
  resize: vertical;
  line-height: 1.6;
  padding-top: 10px;
}

/* ---- Submit button — full width, white bg, pill shape ---- */
.form-submit {
  width: 100%;
  background-color: var(--clr-text);
  color: #000000;
  font-family: var(--ff-head);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.125;
  border: none;
  border-radius: 99px;
  padding: 10px 24px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.form-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.form-submit:active { transform: translateY(0); }
.form-submit:disabled { cursor: not-allowed; transform: none; }

/* ---- Contato Responsive ---- */
@media (max-width: 1024px) {
  .contato-hero__title { font-size: 52px; }
  .contato-form { max-width: 100%; }
  .contato-form-section__title { max-width: 100%; }
}

@media (max-width: 768px) {
  .contato-hero__content  { padding-top: 72px; padding-bottom: 72px; }
  .contato-hero__title    { font-size: 40px; letter-spacing: -1px; }
  .contato-hero__subtitle { font-size: 16px; }
  .contato-form-section   { padding-top: 48px; padding-bottom: 64px; }
  .contato-form-section__title { font-size: 26px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .contato-hero__title { font-size: 32px; }
  .contato-form-section__title { font-size: 22px; }
  .contato-form { padding: 20px 16px; }
}

/* ============================================================
   NOVIDADES PAGE
   Node 382:206 — 1200×2332px, bg #1E1E1E
   ============================================================ */

/* ---- Shared section heading — Mavora Sans 700 40px ---- */
.nov-section-title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--clr-text);
  text-align: center;
}

/* ---- Card base — same glass style as index.html cards ---- */
.nov-card {
  background: var(--clr-card);
  background-image: linear-gradient(
    to bottom right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.20) 100%
  );
  border-radius: 24px;
  padding: 16px;
}

/* ---- Author avatar — 32×32 circle rgba(255,255,255,0.5) ---- */
.nov-avatar {
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.50);
}

/* ---- Card image wrappers ---- */
.nov-card__img-wrap {
  overflow: hidden;
  border-radius: 16px;
  line-height: 0;
}

/* Tall: featured post 457×294 area */
.nov-card__img-wrap--tall {
  width: 100%;
  aspect-ratio: 457 / 294;
}

/* Thumbnail: side cards 207×126 */
.nov-card__img-wrap--thumb {
  flex-shrink: 0;
  width: 207px;
  height: 126px;
}

/* Grid post thumbnail 298×199 */
.nov-card__img-wrap--grid {
  width: 100%;
  aspect-ratio: 298 / 199;
  border-radius: 16px;
}

.nov-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Card body (title + desc) ---- */
.nov-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nov-card__title--lg {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.2;
  color: var(--clr-text);
}

.nov-card__title--md {
  font-family: var(--ff-head);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.2;
  color: var(--clr-text);
}

.nov-card__desc {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--clr-text);
  opacity: 0.85;
}

/* ---- Meta row: author + date ---- */
.nov-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nov-card__author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nov-card__author-name {
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--clr-text);
}

.nov-card__date {
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--clr-text);
  opacity: 0.70;
}

/* Vertical divider between author and date in grid cards */
.nov-card__meta-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
}

/* ============================================================
   HERO SECTION — 1200×792px
   HORIZONTAL layout, SPACE_BETWEEN, padT 128 padB 64 padL/R 80
   ============================================================ */
.nov-hero {
  padding-top: 128px;
  padding-bottom: 64px;
}

.nov-hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

/* Left column — Último Post (489px / ~47% inner) */
.nov-hero__col--featured {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 489px;
  max-width: 489px;
}

/* Right column — Em destaque (450px / ~43% inner) */
.nov-hero__col--sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 450px;
  max-width: 450px;
}

/* Featured post card — VERTICAL layout, gap 24px */
.nov-card--featured {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sidebar stack — gap 24px between mini cards */
.nov-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Side mini card — HORIZONTAL layout, gap 24px */
.nov-card--side {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  padding: 16px;
}

.nov-card__side-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.nov-card__side-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   ÚLTIMO POSTS SECTION — padT/B 88px, gap 40
   ============================================================ */
.nov-posts {
  padding-top: 88px;
  padding-bottom: 88px;
}

.nov-posts__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 3-column grid, rows auto, gap 24px */
.nov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

/* Grid post card — VERTICAL layout, gap 24px */
.nov-card--grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px;
}

.nov-card__grid-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
}

/* ============================================================
   RESPONSIVE — Novidades
   ============================================================ */
@media (max-width: 1024px) {
  .nov-hero__col--featured { flex: 1; max-width: 50%; }
  .nov-hero__col--sidebar  { flex: 1; max-width: 48%; }
  .nov-card__img-wrap--thumb { width: 160px; height: 100px; }
  .nov-section-title { font-size: 34px; }
}

@media (max-width: 768px) {
  .nov-hero { padding-top: 56px; padding-bottom: 48px; }
  .nov-hero__inner { flex-direction: column; gap: 40px; }
  .nov-hero__col--featured,
  .nov-hero__col--sidebar { flex: none; max-width: 100%; width: 100%; }
  .nov-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .nov-section-title { font-size: 28px; }
  .nov-posts { padding-top: 56px; padding-bottom: 56px; }
  .nov-posts__inner { gap: 28px; }
  .nov-card__img-wrap--thumb { width: 140px; height: 90px; }
}

@media (max-width: 480px) {
  .nov-card--side { flex-direction: column; }
  .nov-card__img-wrap--thumb { width: 100%; height: 180px; }
  .nov-grid { grid-template-columns: 1fr; }
  .nov-section-title { font-size: 24px; }
}

/* ============================================================
   POST PAGE (blog article)
   Node 382:416 — 1200×2134px, bg #1E1E1E
   ============================================================ */

/* ---- Hero Section — padT/B 128 padL/R 80 gap 40 VERTICAL ---- */
.post-hero {
  padding-top: 128px;
  padding-bottom: 128px;
}

.post-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Título block — max-width 654px, centered, gap 16 */
.post-hero__titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;
  max-width: 654px;
}

/* Date — Arial 400 16px rgba(255,255,255,0.70) lh=24px */
.post-hero__date {
  display: block;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
}

/* Category tag — pill, fill rgba(255,255,255,0.02) stroke rgba(255,255,255,0.10) */
.post-hero__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 4px 16px;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 99px;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
}

/* Post title — Mavora Sans 700 64px lh=70px */
.post-hero__title {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 64px;
  line-height: 1.09;
  letter-spacing: -1.5px;
  color: var(--clr-text);
  text-align: center;
}

/* Post subtitle — Arial 400 24px lh=36px rgba(255,255,255,0.70) */
.post-hero__subtitle {
  font-family: var(--ff-body);
  font-size: 24px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
  text-align: center;
}

/* Hero image — 1040×545px, radius 24px */
.post-hero__img-wrap {
  width: 100%;
  max-width: var(--inner-w);
  border-radius: 24px;
  overflow: hidden;
  line-height: 0;
}

.post-hero__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1040 / 545;
  object-fit: cover;
}

/* ---- Content Section — padB 64 padL/R 80 gap 40 VERTICAL ---- */
.post-content {
  padding-bottom: 64px;
}

.post-content__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Article container — max-width 836px (centered in 1040px) */
.post-article {
  width: 100%;
  max-width: 836px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Each content block — VERTICAL gap 24 */
.post-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* H1 heading — Mavora Sans 700 32px lh=35px */
.post-heading--h1 {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 32px;
  line-height: 1.09;
  color: var(--clr-text);
}

/* H2 heading — Mavora Sans 700 24px lh=29px */
.post-heading--h2 {
  font-family: var(--ff-head);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.2;
  color: var(--clr-text);
}

/* H3 heading — Mavora Sans 500 20px lh=24px */
.post-heading--h3 {
  font-family: var(--ff-head);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.2;
  color: var(--clr-text);
}

/* Body paragraph — Arial 400 20px lh=30px rgba(255,255,255,0.90) */
.post-body {
  font-family: var(--ff-body);
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.90);
}

/* ---- Post Responsive ---- */
@media (max-width: 1024px) {
  .post-hero__title { font-size: 52px; }
}

@media (max-width: 768px) {
  .post-hero          { padding-top: 64px; padding-bottom: 64px; }
  .post-hero__inner   { gap: 28px; }
  .post-hero__titulo  { max-width: 100%; }
  .post-hero__title   { font-size: 40px; letter-spacing: -1px; }
  .post-hero__subtitle { font-size: 18px; }
  .post-body          { font-size: 17px; }
  .post-content       { padding-bottom: 48px; }
}

@media (max-width: 480px) {
  .post-hero          { padding-top: 48px; padding-bottom: 48px; }
  .post-hero__title   { font-size: 32px; letter-spacing: -0.5px; }
  .post-hero__subtitle { font-size: 16px; }
  .post-heading--h1   { font-size: 26px; }
  .post-heading--h2   { font-size: 22px; }
  .post-body          { font-size: 16px; }
  .post-article       { gap: 28px; }
}