/* ============================================================
   Responsive overrides para o protótipo
   ----------------------------------------------------------------
   O protótipo foi construído desktop-first com inline-styles
   (React). Este arquivo sobrescreve via media query +
   attribute-selector + !important. Quando o site for convertido
   para HTML/CSS puro na fase 2, este arquivo vira a base do CSS
   responsivo "de verdade" — sem necessidade de attribute hacks.
   ============================================================ */

/* ===============================================================
   DESKTOP TWEAKS — refinos pós-feedback "ainda desformatado"
   Aplicam em todas as larguras (sem media query).
   =============================================================== */

/* Header: integrar visualmente com o hero (sem costura) */
body>header[role="banner"] {
  background: #F4ECD8;
  /* mesmo paper do hero */
  position: relative;
  z-index: 10;
}

/* Hero: tirar padding-top do grid pra colar no header (header já tem 24px) */
section[data-screen-label="01 Hero"] [style*="grid-template-columns: 1.05fr 1fr"] {
  padding-top: 0 !important;
}

/* Manifesto (vermelho) — padding-top extra pra não cortar título gigante */
section[data-screen-label="03 Abordagem"]>div {
  padding-top: 96px !important;
}

/* CTA final ("Vamos transformar... juntos.") — reduzir tamanho do h2 pra não isolar 'juntos.' */
section[aria-label="Vamos transformar sua saúde"] h2,
footer[role="contentinfo"] h2 {
  font-size: clamp(48px, 7vw, 96px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

/* --------- Mobile (≤ 768px): pinta tudo em coluna --------- */
@media (max-width: 768px) {

  /* Rede de segurança global: ninguém ultrapassa o viewport */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  * {
    min-width: 0 !important;
    max-width: 100vw !important;
  }

  /* Texto: só quebra palavra se ela sozinha não couber na linha
     (overflow-wrap: break-word) — NUNCA quebra no meio sem necessidade.
     Não usar 'anywhere' nem 'word-break: break-word' (quebram "NUTRIÇÃO" → "NUTRIÇÃ-O"). */
  h1,
  h2,
  h3,
  h4,
  p,
  span,
  em,
  strong,
  a,
  blockquote,
  li,
  div {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* CTAs: permitir wrap pra não forçar min-width do botão */
  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* Hero: linha de descrição + CTA empilha */
  [style*="align-items: flex-end"][style*="gap: 56px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  /* Imagens: cap absoluto na viewport */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Section do hero: remove min-height fixo (deixa o conteúdo definir) */
  section[data-screen-label="01 Hero"] [style*="min-height: 720px"],
  section[data-screen-label="01 Hero"][style*="min-height: 720px"] {
    min-height: 0 !important;
  }

  /* Wrappers position:relative que envolvem fotos: largura explícita */
  div[style*="position: relative"]:has(> img) {
    width: 100% !important;
    height: auto !important;
  }

  /* Fallback para navegadores sem :has — wrappers de aspectRatio */
  div[style*="aspect-ratio: 4 / 5"],
  div[style*="aspect-ratio: 3 / 4"],
  div[style*="aspectRatio: 4 / 5"],
  div[style*="aspectRatio: 3 / 4"] {
    width: 100% !important;
  }

  /* Tipografia de display: caps no tamanho máximo via clamp */
  h1 {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  h2 {
    font-size: clamp(34px, 9vw, 56px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  /* "h3-like" — divs com fontFamily serif + fontSize grande */
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 88"],
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 80"],
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 76"],
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 72"],
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 84"],
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 92"],
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 104"],
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 124"],
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 168"] {
    font-size: clamp(34px, 9vw, 56px) !important;
    line-height: 1.05 !important;
  }

  /* Numerais "01", "02" em italic display (40-64px) */
  [style*="font-family: \"Instrument Serif\""][style*="font-style: italic"][style*="font-size: 64"],
  [style*="font-family: \"Instrument Serif\""][style*="font-style: italic"][style*="font-size: 56"],
  [style*="font-family: \"Instrument Serif\""][style*="font-style: italic"][style*="font-size: 44"],
  [style*="font-family: \"Instrument Serif\""][style*="font-style: italic"][style*="font-size: 40"],
  [style*="font-family: \"Instrument Serif\""][style*="font-style: italic"][style*="font-size: 36"] {
    font-size: 32px !important;
  }

  /* Citação grande nos depoimentos */
  section[data-screen-label="09 Depoimentos"] [style*="font-size: 24px"][style*="Instrument Serif"] {
    font-size: 18px !important;
  }

  /* --------- Grids: tudo vira 1 coluna --------- */
  [style*="grid-template-columns: repeat(2,"],
  [style*="grid-template-columns: repeat(3,"],
  [style*="grid-template-columns: repeat(4,"],
  [style*="grid-template-columns: repeat(5,"],
  [style*="grid-template-columns: repeat(6,"],
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Linhas de depoimento (numeral + texto + autor) viram coluna */
  [style*="grid-template-columns: 120px 1.4fr 1fr 60px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Masonry de depoimentos: 2 colunas viram 1 no mobile */
  [style*="column-count: 2"] {
    column-count: 1 !important;
  }

  /* "Como posso te ajudar": esconder a seta → órfã (era a 3ª coluna do grid desktop) */
  section[data-screen-label="02 Como posso te ajudar"] [style*="grid-template-columns: auto 1fr auto"]>span:last-child {
    display: none !important;
  }

  /* Serviços: normalizar células (no mobile, padding/bordas da lógica de 3 colunas desalinhavam) */
  section[data-screen-label="04 Serviços"] [style*="grid-template-columns: repeat(3"]>div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    border-right: none !important;
    border-bottom: 1px solid #D6C896 !important;
  }

  section[data-screen-label="04 Serviços"] [style*="grid-template-columns: repeat(3"]>div:last-child {
    border-bottom: none !important;
  }

  /* Linhas com auto/1fr/auto (depoimentos vertical antigo) */
  [style*="grid-template-columns: auto 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* --------- Padding e espaçamento --------- */
  [style*="padding: 72px 64px"],
  [style*="padding: 80px 64px"],
  [style*="padding: 64px 0px"],
  [style*="padding: 96px 64px 72px"],
  [style*="padding: 0px 48px 48px"],
  [style*="padding: 56px 64px"] {
    padding: 40px 20px !important;
  }

  [style*="padding: 24px 48px"],
  [style*="padding: 32px 48px"],
  [style*="padding: 48px 48px 0px 0px"] {
    padding: 20px 20px !important;
  }

  [style*="padding: 28px 64px"] {
    padding: 24px 20px !important;
  }

  [style*="padding: 20px 48px"] {
    padding: 16px 20px !important;
  }

  /* Faixa de credibilidade do hero: grid 2x2 estável (era flex-wrap irregular ~121px) */
  [style*="padding: 20px 48px"][style*="justify-content: space-between"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 16px !important;
    justify-content: initial !important;
    text-align: left !important;
    font-size: 11px !important;
  }

  /* --------- Flex com space-between vira coluna --------- */
  [style*="justify-content: space-between"][style*="align-items: flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* --------- Hero mobile: FOTO PRIMEIRO, depois texto (padrão mobile) --------- */
  /* Foto vira o primeiro elemento (order -1 no grid colapsado) */
  section[data-screen-label="01 Hero"] div[style*="grid-template-columns: 1.05fr 1fr"]>div[style*="position: relative"] {
    order: -1 !important;
    margin-bottom: 8px !important;
  }

  /* Foto: altura controlada e enquadrada no rosto */
  section[data-screen-label="01 Hero"] img[alt="Rosceli Brás"] {
    width: 100% !important;
    height: auto !important;
    max-height: 52vh !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }

  /* Coluna de texto ocupa largura total */
  section[data-screen-label="01 Hero"] div[style*="padding: 48px 48px 0px 0px"] {
    padding: 0 !important;
  }

  /* h1 do hero: FLUI na largura total (esconde os <br>; os espaços {" "} mantêm as palavras separadas) */
  section[data-screen-label="01 Hero"] h1 .hero-br {
    display: none !important;
  }

  section[data-screen-label="01 Hero"] h1 {
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: 1.05 !important;
  }

  /* Parágrafo + CTA: espaçamento natural abaixo do título */
  section[data-screen-label="01 Hero"] [style*="gap: 56px"] {
    margin-top: 20px !important;
  }

  /* --------- Selos sobre a foto: ocupam menos no mobile --------- */
  [style*="position: absolute"][style*="bottom: 24px"][style*="left: 24px"] {
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    max-width: none !important;
  }

  [style*="position: absolute"][style*="top: 24px"][style*="right: 24px"] {
    top: 16px !important;
    right: 16px !important;
  }

  /* --------- Headers de seção em coluna (eyebrow + meta direita) --------- */
  /* meta lateral "VOL · 01" / "3 de 47" são quase decorativos no mobile */
  /* (deixamos visíveis mas embaixo do título, já que flex empilha) */

  /* --------- Header do site (logo + nav + CTA) --------- */
  /* SiteHeader: flex space-between → empilha */
  header,
  [style*="padding: 24px 48px"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  /* Nav links escondidos no mobile (sem hambúrguer ainda — só pra não vazar) */
  nav[style*="gap: 28px"] {
    display: none !important;
  }

  /* --------- Process timeline horizontal vira vertical --------- */
  /* O <div style="position:absolute; top:28px; height:1px"> é a linha horizontal */
  section[data-screen-label="05 Processo da consulta"] [style*="position: absolute"][style*="height: 1px"] {
    display: none !important;
  }

  /* --------- PlansCards: o "featured" deixa de translatar --------- */
  [style*="transform: translateY(-16px)"] {
    transform: none !important;
  }

  /* --------- FAQ: aspas grandes ficam menos exibidas --------- */
  [style*="font-size: 80px"][style*="line-height: 0.6"] {
    font-size: 40px !important;
  }

  /* --------- Footer: 4 colunas vira 1 (2 colunas a 360px = 100px, espremido) --------- */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Footer: blocos que mantinham padding 48-64px no mobile (grid de colunas + bio) */
  footer [style*="padding: 48px 64px"] {
    padding: 32px 20px !important;
  }

  footer [style*="padding: 20px 64px"][style*="border-top"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 20px !important;
  }

  /* --------- Sobre: linha de assinatura (nome + cargo + CTA) empilha --------- */
  section[data-screen-label="07 Sobre"] [style*="padding-top: 28px"][style*="border-top"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  section[data-screen-label="07 Sobre"] [style*="padding-top: 28px"][style*="border-top"] [style*="margin-left: auto"] {
    margin-left: 0 !important;
  }

  /* --------- Manifesto: anular padding-top 96px (regra desktop) no mobile --------- */
  section[data-screen-label="03 Abordagem"]>div {
    padding-top: 40px !important;
  }

  /* --------- Depoimentos: pull-quotes proporcionais no mobile --------- */
  section[data-screen-label="09 Depoimentos"] [style*="font-size: 40px"] {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  section[data-screen-label="09 Depoimentos"] [style*="font-size: 26px"] {
    font-size: 22px !important;
  }

  /* --------- Header mobile: mostrar hambúrguer, esconder nav e CTA órfão --------- */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* CTA "Agendar consulta" do header some no mobile (vive dentro do menu hambúrguer) */
  header>a.cta-button[data-variant="tomato"] {
    display: none !important;
  }

  /* Header mobile: logo à esquerda, hambúrguer à direita */
  header[role="banner"] {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  /* --------- WhatsApp float menor no mobile (cobre menos conteúdo) --------- */
  .whatsapp-float {
    width: 50px !important;
    height: 50px !important;
    right: 16px !important;
    bottom: 16px !important;
  }

  .whatsapp-float svg {
    width: 26px !important;
    height: 26px !important;
  }

}

/* --------- Tablet (769–1024px): refina grids de 3+ colunas --------- */
@media (min-width: 769px) and (max-width: 1024px) {

  h1 {
    font-size: clamp(56px, 9vw, 96px) !important;
  }

  h2 {
    font-size: clamp(44px, 7vw, 84px) !important;
  }

  /* Grids de 5/6 colunas viram 2 */
  [style*="grid-template-columns: repeat(5,"],
  [style*="grid-template-columns: repeat(6,"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Grids de 3 colunas viram 2 */
  [style*="grid-template-columns: repeat(3,"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Grids de 4 colunas (manifesto) viram 2 */
  [style*="grid-template-columns: repeat(4,"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer de 4 colunas vira 2 */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  [style*="padding: 72px 64px"],
  [style*="padding: 80px 64px"],
  [style*="padding: 96px 64px 72px"] {
    padding: 56px 40px !important;
  }
}

@media (max-width: 1023px) {

  /* Responsividade mobile da plans (Planos) */

  #planos .planos-selecao {
    flex-direction: column;
  }
}

@media (max-width: 767px) {

  /* Responsividade mobile geral de elementos */
  #hero .hero-title,
  #ajuda .ajuda-title,
  #abordagem .abordagem-title,
  #servicos .servicos-title,
  #consulta .consulta-title,
  #planos .planos-title,
  #sobre .sobre-title,
  #formacao .formacao-title,
  #depoimentos .depoimentos-title,
  #faq .faq-title,
  #footer .footer-title {
    font-size: 51px !important;
  }

  #abordagem .abordagem-titles-wrapper,
  #abordagem .abordagem-title,
  #servicos .servicos-titles-wrapper,
  #servicos .servicos-title,
  #consulta .consulta-titles-wrapper,
  #consulta .consulta-title,
  #planos .planos-titles-wrapper,
  #planos .planos-title,
  #sobre .sobre-title,
  #formacao .formacao-titles-wrapper,
  #formacao .formacao-title,
  #depoimentos .depoimentos-titles-wrapper,
  #depoimentos .depoimentos-title,
  #faq .faq-titles-wrapper,
  #faq .faq-title,
  #footer .footer-titles-wrapper,
  #footer .footer-title {
    margin-bottom: 0 !important;
  }

  #abordagem .abordagem-cta-wrapper,
  #consulta .consulta-cta-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 0 !important
  }

  #hero .hero-br-mobile,
  #abordagem .abordagem-br-mobile,
  #servicos .servicos-br-mobile,
  #depoimentos .depoimentos-br-mobile,
  #faq .faq-br-mobile {
    display: block !important;
  }

  .cta-button {
    width: 100% !important;
    justify-content: center;
  }

  /* Responsividade mobile do #hero */
  #hero .hero-wrapper {
    padding: 20px !important;
  }

  #hero .hero-eyebrow {
    font-size: 12px !important;
  }

  #hero .hero-subtitle {
    margin-top: 0 !important;
  }

  /* Faixa de credibilidade do hero: grid 2x2 estável (era flex-wrap irregular ~121px) */
  [style*="padding: 20px 48px"][style*="justify-content: space-between"] {
    text-align: center !important;
  }

  /* Responsividade mobile da consulta (ProcessTimeLine) */

  #consulta .consulta-cta-text {
    font-size: 24px !important;
  }

  /* Responsividade mobile da sobre (AboutLetter) */

  #sobre .sobre-signature {
    align-items: center !important;
  }

  #sobre .sobre-signature-name {
    font-size: 40px !important;
  }

  #sobre .sobre-signature-credential {
    text-align: center;
  }

  /* Responsividade mobile do footer (FooterFinal) */

  #footer .footer-subtitle {
    font-size: 16px !important;
  }

  #footer .footer-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}