/* V17 — revisão visual sistêmica: contraste, cards de resultado, logos e CTAs */

/* ---------- Base defensiva ---------- */
html,body{overflow-x:hidden}
img{max-width:100%}

/* Logo do rodapé: respeitar sempre a proporção original */
.footer img{
  display:block!important;
  width:110px!important;
  height:auto!important;
  max-height:82px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0 auto 12px!important;
}
.footer{padding-bottom:104px!important}
@media(min-width:700px){.footer{padding-bottom:92px!important}}

/* ---------- Antes e depois: 8 provas realmente alinhadas ---------- */
.results-section .results{align-items:stretch!important}
.results-section .result{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:100%!important;
  overflow:hidden!important;
}
.results-section .result > button{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-width:0!important;
  height:100%!important;
}
.results-section .result > button > img{
  display:block!important;
  width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:var(--paper)!important;
  flex:0 0 auto!important;
}
.results-section .result > button > .result-body{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
}
.results-section .result > .result-body{
  display:flex!important;
  align-items:flex-end!important;
  flex:0 0 auto!important;
  margin-top:auto!important;
  min-height:58px!important;
}
.results-section .result-cta,
.results-section .micro-cta{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  line-height:1.3!important;
  overflow-wrap:anywhere!important;
}
.results-section .result-cta img,
.results-section .micro-cta img{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  max-width:16px!important;
  aspect-ratio:1!important;
  object-fit:contain!important;
  background:transparent!important;
}

/* Altura visual uniforme: mantém a foto inteira sem desalinhar os cards */
@media(max-width:699px){
  .results-section .result > button > img{height:clamp(405px,112vw,500px)!important}
  .results-section .result > button > .result-body{min-height:112px!important}
  .results-section .result > .result-body{min-height:58px!important}
}
@media(min-width:700px) and (max-width:1099px){
  .results-section .result > button > img{height:clamp(440px,55vw,560px)!important}
  .results-section .result > button > .result-body{min-height:118px!important}
}
@media(min-width:1100px){
  .results-section .results{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:24px!important;
  }
  .results-section .result > button > img{height:clamp(365px,28.5vw,410px)!important}
  .results-section .result > button > .result-body{min-height:126px!important}
  .results-section .result > .result-body{min-height:62px!important}
}

/* ---------- LP educativa: blocos de contraste ---------- */
/* Nos temas escuros --brown-2 é branco. Não pode ser usado como background com texto branco. */
.theme-celine-manifesto .creme-callout,
.theme-celine-portrait .creme-callout,
.theme-dark .creme-callout{
  background:#f5eee8!important;
  color:#2f2018!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
.theme-celine-manifesto .creme-callout .label,
.theme-celine-portrait .creme-callout .label,
.theme-dark .creme-callout .label{color:#a96f4e!important}
.theme-celine-manifesto .creme-callout h3,
.theme-celine-portrait .creme-callout h3,
.theme-dark .creme-callout h3,
.theme-celine-manifesto .creme-callout strong,
.theme-celine-portrait .creme-callout strong,
.theme-dark .creme-callout strong{color:#2f2018!important}
.theme-celine-manifesto .creme-callout p,
.theme-celine-portrait .creme-callout p,
.theme-dark .creme-callout p{color:#655248!important}
.theme-celine-manifesto .creme-callout .mini,
.theme-celine-portrait .creme-callout .mini,
.theme-dark .creme-callout .mini{
  background:#eadfd5!important;
  color:#3d2a21!important;
  border-color:rgba(74,48,35,.12)!important;
}

/* AEO/GEO: caixas internas precisam acompanhar o tema, especialmente nos temas escuros */
.theme-celine-manifesto .quick-answer,
.theme-celine-manifesto .local-item,
.theme-celine-portrait .quick-answer,
.theme-celine-portrait .local-item,
.theme-dark .quick-answer,
.theme-dark .local-item{
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(255,255,255,.11)!important;
}
.theme-celine-manifesto .quick-answer dt,
.theme-celine-manifesto .local-item b,
.theme-celine-portrait .quick-answer dt,
.theme-celine-portrait .local-item b,
.theme-dark .quick-answer dt,
.theme-dark .local-item b{color:#fff7ef!important}
.theme-celine-manifesto .quick-answer dd,
.theme-celine-manifesto .local-item span,
.theme-celine-manifesto .local-item address,
.theme-celine-portrait .quick-answer dd,
.theme-celine-portrait .local-item span,
.theme-celine-portrait .local-item address,
.theme-dark .quick-answer dd,
.theme-dark .local-item span,
.theme-dark .local-item address{color:#d5c6bc!important}

/* ---------- Respiro e legibilidade ---------- */
.story-card,.myth-card,.edu,.video-card,.method-step,.authority-card,.offer-card,
.faq details,.article-card,.explain-card,.educational-offer,.creme-callout,
.answer-card,.local-card,.sources-card{min-width:0}

.result h3,.result p,.result-tag,.result-cta,.micro-cta,
.article-card h3,.article-card p,.explain-card h3,.explain-card p,
.creme-callout h3,.creme-callout p,.educational-offer h3,.educational-offer p{
  overflow-wrap:break-word;
}

@media(max-width:699px){
  .wrap{width:min(calc(100% - 40px),1180px)!important}
  .results-section.wrap{width:min(calc(100% - 32px),1180px)!important}
  .results-section .results{grid-auto-columns:92%!important;gap:16px!important;padding-inline:0!important}
  .results-section .result-body{padding:18px!important}
  .results-section .result > .result-body{padding-top:0!important}
  .creme-callout{padding:24px 21px!important}
}

/* Desktop: rodapé e CTA final não ficam disputando espaço com o botão flutuante */
@media(min-width:700px){
  .final{margin-bottom:18px!important}
}