/* Extra CSS — Metodologia Section (was inline in React component) */

#metodologia.metodologia-wix-container {
  min-height: 100vh;
  background-color: #000;
  position: relative;
  padding: 0 0 100px 0 !important;
}
.meto-bg-absolute { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.meto-bg-sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; }
.meto-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.meto-video-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); z-index: 1; }
.metodologia-wix-header { margin: 0 100px; padding: 80px 0 50px 0; position: relative; z-index: 10; }
.metodologia-wix-title { font-family: "IBM Plex Serif", Georgia, serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 500; color: #ffffff; line-height: 1.1; margin: 0; }
.metodologia-wix-title em { font-style: italic; font-weight: 400; color: #ffffff; }
.metodologia-wix-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(1480px, auto); height: 1480px; position: relative; z-index: 2; width: auto; margin: 0 100px; max-width: none; }
.meto-header-text { margin-top: 24px; margin-bottom: 0; width: 100%; white-space: nowrap; font-family: var(--font-body, "IBM Plex Sans", sans-serif); font-size: 20px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.meto-card { grid-area: 1 / 1 / 2 / 2; position: sticky; top: 90px; align-self: start; width: calc(33.333% - 33.33px); height: 380px; background: #ffffff; border-radius: 10px; padding: 40px; box-shadow: none; transition: box-shadow 0.3s ease; display: flex; flex-direction: column; text-align: left; }
.meto-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.meto-card-1 { margin-top: 101px; justify-self: start; margin-left: 0; }
.meto-card-2 { margin-top: 433px; justify-self: center; }
.meto-card-3 { margin-top: 866px; justify-self: end; margin-right: 0; }
.meto-icon { width: 40px; height: 40px; margin-bottom: 20px; stroke: #402715; fill: none; stroke-width: 1.5; }
.meto-card h3 { font-size: 24px; color: #402715; margin-bottom: 15px; font-weight: 600; }
.meto-card p { font-size: 16px; color: #402715; line-height: 1.6; text-align: left; }

@media (max-width: 1024px) {
  .metodologia-wix-header, .metodologia-wix-grid { margin: 0 30px; }
  .meto-header-text { width: 100%; }
}
@media (max-width: 768px) {
  .metodologia-wix-header { position: relative; top: auto; margin-bottom: 30px; }
  .metodologia-wix-grid { height: auto; grid-template-rows: auto; gap: 20px; padding: 0; padding-bottom: 100px; }
  .meto-card { position: relative; top: auto; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100%; justify-self: center !important; min-height: auto; grid-area: auto; }
}

/* WP Admin bar fix */
body.admin-bar nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar nav { top: 46px; } }

/* ============================================================
   AJUSTES METODOLOGIA — Sticky Header + Cards
   ============================================================ */

/* Título e subtítulo ficam fixos ao rolar */
.metodologia-wix-header {
  position: sticky !important;
  top: 96px !important;   /* logo abaixo do menu */
  z-index: 1 !important;
  padding-bottom: 30px !important;
  pointer-events: none;
}

/* Cards param na linha indicada no esboço (~250px do topo da viewport) */
.meto-card {
  top: 400px !important;
  z-index: 5 !important;  /* passam por cima do header ao subir */
}

/* ============================================================
   AJUSTES PLANOS — Stacking + Tamanho + Texto visível
   ============================================================ */

/* Container externo: empilhamento sem cortar conteúdo */
.plan-sticky {
  margin-bottom: 0 !important;
  height: calc(100vh - 96px) !important;
  top: 96px !important;
  overflow: visible !important; /* Permite que o inner cresça sem ser cortado */
  align-items: stretch !important;
}

/* Inner: ocupa 100% do container, sem limite de altura */
.plan-sticky-inner {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important; /* O próprio inner recorta as bordas */
}

/* Foto: menos padding = foto maior */
.plan-sticky-img {
  padding: 40px 30px !important;
}

/* Coluna de texto: scroll interno para não esconder nenhuma informação */
.plan-sticky-right {
  padding: 40px 60px !important;
  overflow-y: auto !important;        /* Texto rola dentro do card */
  height: 100% !important;
  max-height: 100% !important;
  scrollbar-width: thin !important;   /* Scrollbar fina visível */
  scrollbar-color: rgba(157,123,80,0.4) transparent !important;
}

.plan-sticky-right::-webkit-scrollbar {
  width: 4px !important;
  display: block !important;
}

.plan-sticky-right::-webkit-scrollbar-thumb {
  background: rgba(157,123,80,0.5) !important;
  border-radius: 4px !important;
}

/* ============================================================
   FIX: Remove overflow:hidden do elemento que anima (sticky)
   O clip fica apenas nos filhos que já estão posicionados
   ============================================================ */

/* ANTES: .plan-sticky tinha overflow:hidden → cortava conteúdo durante o scroll */
.plan-sticky {
  overflow: visible !important;  /* Sem clip no elemento que se move */
}

/* O inner: overflow visible para permitir scroll no filho */
.plan-sticky-inner {
  overflow: visible !important;  /* Não pode cortar o scroll do filho */
  border-radius: 0;
}

/* Coluna da foto: clip legítimo para manter o border-radius */
.plan-sticky-left {
  overflow: hidden !important;
}

/* Coluna de texto: scroll interno visível */
.plan-sticky-right {
  overflow: hidden !important;   /* Sem scroll vertical que possa conflitar */
  overflow-y: auto !important;
}

/* Padding-bottom generoso para o conteúdo do card não ficar apertado */
.plan-sticky-right {
  padding-bottom: 120px !important;  /* Mais espaço na base — especialmente no card 4 */
}

/* ============================================================
   FIX: Seção Stefani — foto completa + tamanhos corretos
   ============================================================ */

/* Section: altura definida pelo conteúdo, alinhamento ao topo */
#stefani {
  grid-template-columns: 45fr 55fr !important;
  align-items: start !important;
}

/* Coluna da foto: cola ao topo sem esticar */
#stefani .stefani-img-col {
  align-self: flex-start !important;
}

/* Foto: exibe completa sem cortar, respeita proporção original */
#stefani .stefani-img-col img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Parágrafos: 16px / line-height 1.55 / espaçamento reduzido entre eles */
#stefani .stefani-bio {
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin-bottom: 0.4rem !important; /* Espaço entre parágrafos da bio reduzido */
}

/* Lista de experiência: 15px / line-height 1.45 */
#stefani .stefani-exp-list li {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Separador e título de experiência: menos espaço */
#stefani .stefani-exp {
  margin-top: 0 !important;
  padding-top: 20px !important; /* Espaço acima da linha divisória reduzido */
}

/* Coluna de texto: começa mais alto e com menos espaço entre elementos */
#stefani .stefani-content {
  align-self: start !important;
  justify-content: flex-start !important;
  padding-top: 40px !important; /* Sobe o texto para o topo */
  gap: 12px !important;         /* Reduz espaço entre label, título e bio */
}

/* Remove margens extras do título para colar mais no label */
#stefani .stefani-title {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* ============================================================
   FIX: Sincronizar entrada de foto e texto nos plan cards
   O .plan-sticky-inner é o bloco visual único — ele entra junto
   ============================================================ */

/* O .plan-sticky apenas posiciona (sem clip, sem opacidade) */
.plan-sticky {
  overflow: visible !important;
}

/* O .plan-sticky-inner é o bloco visual que "aparece" como unidade */
.plan-sticky-inner {
  overflow: hidden !important;   /* Recorte visual seguro — não está em transição */
  /* Garante que foto e texto sempre entrem como um único bloco */
  will-change: transform;
}

/* Garante que as duas colunas nunca sejam renderizadas separadamente */
.plan-sticky-left,
.plan-sticky-right {
  will-change: auto !important;  /* Remove qualquer compositing layer separado */
  transform: none !important;    /* Zera qualquer translateY residual */
  opacity: 1 !important;         /* Força visibilidade total — sem fade individual */
  transition: none !important;   /* Sem transition individual em cada coluna */
}


/* ============================================================
   FIX: Viúva tipográfica — "O Significado do Nome"
   "antes." ficava sozinha na última linha
   ============================================================ */

/* text-wrap: balance redistribui as linhas automaticamente */
.nome-title {
  text-wrap: balance !important;
  max-width: 720px !important;  /* Aumenta levemente o container para encaixar a linha */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   FIX: Viúva no parágrafo "Significado do Nome"
   Reduz o max-width para forçar a quebra correta no texto vindo do ACF
   ============================================================ */
.nome-text {
  max-width: 820px !important;  /* Ajuste para evitar a palavra "antes." sozinha */
  text-wrap: balance !important; /* Ajuda a distribuir melhor as linhas */
}

/* ============================================================
   PADRONIZAÇÃO HEADINGS DO FOOTER
   ============================================================ */
.footer-col h4,
.footer-col h4 span {
  color: #a39c93 !important;      /* Cor padrão de 'NAVEGAÇÃO' */
  font-size: 10px !important;     /* Tamanho padrão */
  font-weight: 500 !important;    /* Peso padrão */
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* ============================================================
   FIX: Plan cards — labels dourados mais legíveis (13px)
   ============================================================ */

.plan-block-label,
.plan-model-label,
.plan-sticky-for strong {
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
}

/* ============================================================
   AJUSTE ALINHAMENTO LOGO FOOTER
   ============================================================ */
.footer-logo-img {
  margin-left: -8px !important;
}

/* ============================================================
   MOBILE — resets de regras do extra.css que quebravam ≤ 900px
   ============================================================ */

@media (max-width: 900px) {

  /* Destaque intro: inline padding override */
  #destaque-intro {
    padding: 80px 24px !important;
  }

  /* Metodologia: subtítulo pode quebrar linha normalmente */
  .meto-header-text {
    white-space: normal !important;
    font-size: 16px !important;
  }

  /* Plan cards: zera alturas e posição fixas do extra.css */
  .plan-sticky {
    height: auto !important;
    top: 0 !important;
    margin-bottom: 32px !important;
  }

  .plan-sticky-inner {
    height: auto !important;
    max-height: none !important;
  }

  .plan-sticky-img {
    padding: 20px 16px 8px !important;
  }

  .plan-sticky-right {
    padding: 32px 24px 48px !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

}

@media (max-width: 600px) {

  /* Destaque intro: padding ainda menor em telas pequenas */
  #destaque-intro {
    padding: 60px 20px !important;
  }

}

/* ============================================================
   MOBILE 768px — animações desativadas + stacking corrigido
   Todas as regras abaixo são exclusivas deste breakpoint.
   Desktop (> 768px) não é afetado.
   ============================================================ */

@media (max-width: 768px) {

  /* ── 0. Metodologia: cards e header sem sticky/z-index ── */

  .metodologia-wix-header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
  }

  .metodologia-wix-grid {
    height: auto !important;
  }

  .meto-card {
    position: relative !important;
    top: 0 !important;
    z-index: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    grid-area: auto !important;
  }

  /* ── 1. Animações de scroll: visibilidade imediata, sem delays ── */

  .fu,
  .fu.d1,
  .fu.d2,
  .fu.d3 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    transition-delay: 0s !important;
  }

  .dif-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .etica-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* svc-stack-card: sticky + fade-in animados → posição natural */
  .svc-stack-card {
    position: relative !important;
    top: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    margin-bottom: 20px !important;
  }

  /* svc-card (grid de serviços): sem fade inicial */
  .svc-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ── 2. Plan cards: sticky desativado, altura natural, sem sobreposição ── */

  .planos-stack {
    display: block !important;
    position: static !important;
  }

  .plan-sticky {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    margin-bottom: 24px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .plan-sticky-inner {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
  }

  /* ── Stefani: coluna única, foto com altura fixa, conteúdo normalizado ── */

  #stefani {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    min-height: unset !important;
  }

  #stefani .stefani-img-col {
    min-height: 360px !important;
    align-self: auto !important;
    overflow: hidden !important;
  }

  #stefani .stefani-img-col img {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  #stefani .stefani-content {
    align-self: auto !important;
    padding: 40px 20px !important;
    padding-top: 40px !important;
    gap: 16px !important;
  }

  /* ── 3. Padding geral: 40px vertical / 20px horizontal ── */

  #destaque-intro {
    padding: 40px 20px !important;
  }

  #sobre,
  #diferenciais,
  #nome,
  #etica,
  #blog,
  #contato {
    padding: 40px 20px !important;
  }

  .svc-section {
    padding: 40px 20px !important;
  }

  #metodologia.metodologia-wix-container {
    padding: 0 0 40px 0 !important;
  }

  #hero {
    padding: 0 20px 40px !important;
  }

  .nome-inner {
    padding: 30px 0 !important;
  }

}