/*
Theme Name: Mais Banana
Author: Mais Banana
Description: Tema institucional do Mais Banana.
Version: 2.0.15
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: mais-banana
*/

:root {
  --mb-green: #4C6310;
  --mb-yellow: #F5A503;
  --mb-cream: #FFFCEB;
  --mb-white: #FFFFFF;
  --mb-black: #101010;
  --mb-container: 1180px;
  --mb-section-space: 72px;
  --mb-statement-size: 68px;
  --mb-display-font: Georgia, "Times New Roman", serif;
  --mb-shadow: 0 16px 38px rgba(37, 49, 7, .17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--mb-black);
  background: var(--mb-cream);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
body.admin-bar .site-header { top: 32px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }
.font-display { font-family: var(--mb-display-font); font-weight: 900; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mb-container { width: min(calc(100% - 40px), var(--mb-container)); margin-inline: auto; }
.mb-section { position: relative; overflow: hidden; padding: var(--mb-section-space) 0; background-repeat: no-repeat; background-position: center; background-size: cover; }
#funcionalidades, #vantagens, #feedbacks, #downloads { scroll-margin-top: 110px; }
.mb-section-title {
  position: relative;
  z-index: 2;
  margin: 0 0 42px;
  color: var(--mb-green);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  text-align: center;
  font-weight: 900;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 252, 235, .98);
  border-bottom: 1px solid rgba(76, 99, 16, .08);
  box-shadow: 0 3px 14px rgba(55, 67, 18, .05);
  backdrop-filter: blur(10px);
}
.header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.site-branding { flex: 0 0 auto; }
.site-branding img { width: 122px; max-height: 70px; object-fit: contain; }
.custom-logo-link { display: block; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 38px); font-weight: 900; }
.site-nav > a:not(.mb-btn) { position: relative; padding: 9px 0; }
.site-nav > a:not(.mb-btn)::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 3px; border-radius: 99px; background: var(--mb-yellow); transition: width .2s ease; }
.site-nav > a:hover::after, .site-nav > a:focus-visible::after { width: 100%; }
.mb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 25px; color: var(--mb-white); background: var(--mb-green); border: 0; border-radius: 12px; font-weight: 900; box-shadow: 0 8px 20px rgba(76, 99, 16, .22); transition: transform .18s ease, filter .18s ease; }
.mb-btn:hover, .mb-btn:focus-visible { transform: translateY(-2px); filter: brightness(.92); }
.social-links { display: flex; align-items: center; gap: 9px; }
.social-links a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--mb-white); background: var(--mb-green); transition: transform .18s ease, background .18s ease; }
.social-links a:hover { transform: translateY(-2px); background: var(--mb-yellow); }
.social-links svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-links svg path { fill: currentColor; stroke: none; }
.social-links svg .play { fill: var(--mb-green); }
.social-links a:hover svg .play { fill: var(--mb-yellow); }
.menu-toggle { display: none; width: 44px; height: 42px; padding: 9px; border: 0; background: var(--mb-green); border-radius: 10px; cursor: pointer; }
.menu-toggle > span:not(.screen-reader-text) { display: block; height: 3px; margin: 4px 0; background: white; border-radius: 99px; }

/* Hero */
.hero { padding: 25px 0 52px; color: var(--mb-white); background: var(--mb-green); }
.hero-kicker { margin: 0 0 20px; text-align: center; font-size: clamp(1.25rem, 2.7vw, 2rem); font-weight: 900; }
.hero-kicker span { color: var(--mb-yellow); }
.hero-media { width: min(100%, 930px); margin-inline: auto; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; background: #000; border: 7px solid rgba(0,0,0,.5); border-radius: 4px; box-shadow: 0 16px 36px rgba(25, 35, 0, .25); }
.hero-media iframe, .hero-media video { width: 100%; height: 100%; border: 0; }
.hero-placeholder { padding: 20px; color: white; font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 900; text-align: center; }

/* Funcionalidades */
.features-main {
  min-height: 590px;
  background-color: var(--mb-cream);
  background-size: 125% auto;
  background-position: left 56%;
}
.feature-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(260px, .82fr) minmax(350px, 1.18fr); gap: clamp(36px, 7vw, 95px); align-items: center; }
.phone-stage { min-height: 430px; display: grid; place-items: center; }
.phone-stage img {
  position: relative;
  z-index: 3;
  width: min(100%, 315px);
  filter: drop-shadow(0 25px 18px rgba(44, 44, 15, .24));
}
.feature-copy { max-width: 640px; }
.feature-copy h3 { margin: 0 0 28px; font-size: clamp(1.75rem, 3vw, 2.7rem); line-height: 1.02; font-weight: 900; }
.feature-copy .statement { margin: 0; padding: 3px 0 7px 22px; border-left: 5px solid var(--mb-yellow); color: var(--mb-yellow); font-size: clamp(2.7rem, 5.2vw, var(--mb-statement-size)); line-height: .94; letter-spacing: -.025em; }

/* Tópicos */
.topics {
  min-height: 600px;
  color: var(--mb-white);
  background-color: var(--mb-green);
  background-size: 125% auto;
  background-position: right 56%;
}
.topics-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; }
.topics-copy h2 { margin: 0 0 32px; max-width: 680px; font-size: clamp(2.7rem, 5.3vw, 4.8rem); line-height: .92; letter-spacing: -.025em; }
.topic-tags { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 14px; max-width: 610px; }
.topic-tag { padding: 12px 17px; color: var(--mb-green); background: var(--mb-cream); border-radius: 9px; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 900; line-height: 1.05; box-shadow: 0 6px 0 rgba(29, 43, 0, .12); }
.topic-tag:nth-child(3), .topic-tag:nth-child(4) { grid-column: span 2; width: fit-content; }
.topic-tag:nth-child(4) { width: 100%; }
.topics-phone {
  position: relative;
  z-index: 3;
  justify-self: center;
  width: min(100%, 390px);
  filter: drop-shadow(0 26px 20px rgba(18, 31, 0, .28));
}

/* Vantagens */
.advantages { background-color: var(--mb-cream); background-repeat: repeat; background-size: cover; }
.advantages-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px 32px; align-items: center; }
.advantage-card { margin: 0; transition: transform .18s ease; }
.advantage-card:hover { transform: translateY(-4px); }
.advantage-card img { width: 100%; filter: drop-shadow(0 10px 15px rgba(41, 55, 6, .13)); }

/* Download */
.download {
  min-height: 590px;
  color: var(--mb-white);
  background-color: var(--mb-green);
  background-size: 125% auto;
  background-position: left 56%;
}
.download-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: center; }
.download-phone {
  position: relative;
  z-index: 3;
  width: min(100%, 330px);
  justify-self: center;
  filter: drop-shadow(0 25px 18px rgba(22, 31, 0, .28));
}
.download-copy h2 { margin: 0 0 12px; color: var(--mb-yellow); font-size: clamp(3rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.025em; }
.download-copy p { max-width: 650px; margin: 0 0 28px; font-size: clamp(1.35rem, 3vw, 2.2rem); line-height: 1.02; font-weight: 900; }
.download-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.qr-placeholder { width: 165px; aspect-ratio: 1; object-fit: contain; background: transparent; border: 0; }
.store-links { display: grid; gap: 9px; }
.store-badge { width: min(100%, 310px); border-radius: 5px; }
.store-links a { transition: transform .18s ease; }
.store-links a:hover { transform: translateX(4px); }

/* Depoimentos */
.testimonials { background-color: var(--mb-cream); background-repeat: repeat; background-size: cover; }
.testimonials-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonial { min-height: 145px; display: flex; flex-direction: column; justify-content: center; padding: 23px; color: var(--mb-white); background: var(--mb-green); border-radius: 17px; box-shadow: var(--mb-shadow); }
.testimonial blockquote { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.08; font-weight: 900; text-align: center; }
.testimonial cite { color: var(--mb-yellow); font-size: .85rem; font-style: normal; font-weight: 900; text-align: center; }

/* Rodapé */
.site-footer { padding: 32px 0 22px; color: var(--mb-white); background: var(--mb-green); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr auto 1.2fr; gap: 30px; align-items: center; }
.footer-logo img { width: 170px; max-height: 105px; object-fit: contain; }
.footer-tagline { max-width: 170px; font-size: 1.05rem; font-weight: 900; line-height: 1.05; }
.footer-download { background: var(--mb-cream); color: var(--mb-green); box-shadow: none; }
.footer-social { justify-self: end; }
.footer-social strong { display: block; margin-bottom: 7px; }
.footer-social a { display: block; color: var(--mb-white); font-size: .9rem; font-weight: 900; line-height: 1.5; }
.footer-social a span { color: var(--mb-yellow); }
.footer-meta { padding-top: 17px; margin-top: 21px; border-top: 1px solid rgba(255,255,255,.18); text-align: center; font-size: .8rem; opacity: .72; }
.default-content { padding: 80px 0; }

@media (max-width: 980px) {
  body.admin-bar .site-header { top: 46px; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: calc(100% + 1px); left: 20px; right: 20px; display: none; flex-direction: column; align-items: stretch; padding: 20px; background: var(--mb-cream); border-radius: 0 0 18px 18px; box-shadow: var(--mb-shadow); }
  .site-nav.is-open { display: flex; }
  .social-links { justify-content: center; }
  .feature-grid, .topics-grid, .download-grid { grid-template-columns: 1fr; }
  .features-main { background-size: 180% auto; background-position: left 23%; }
  .topics { background-size: 180% auto; background-position: right 69%; }
  .download { background-size: 180% auto; background-position: left 24%; }
  .phone-stage { min-height: 360px; }
  .feature-copy { max-width: 700px; margin-inline: auto; text-align: center; }
  .feature-copy .statement { display: inline-block; text-align: left; }
  .topics-copy { order: 1; }
  .topics-phone { order: 2; width: min(100%, 330px); }
  .topics-copy h2 { text-align: center; margin-inline: auto; }
  .topic-tags { margin-inline: auto; }
  .advantages-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .download-copy { text-align: center; }
  .download-copy p { margin-inline: auto; }
  .download-actions { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-social { justify-self: start; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 72px; }
  .mb-container { width: min(calc(100% - 28px), var(--mb-container)); }
  .mb-section { padding: 52px 0; }
  .header-inner { min-height: 70px; }
  .site-branding img { width: 104px; }
  .hero { padding: 20px 0 38px; }
  .hero-media { border-width: 4px; }
  .features-main, .topics, .download { min-height: 0; }
  .features-main { background-size: 245% auto; background-position: left 19%; }
  .topics { background-size: 245% auto; background-position: right 72%; }
  .download { background-size: 245% auto; background-position: left 18%; }
  .phone-stage { min-height: 320px; }
  .phone-stage img { width: min(100%, 250px); }
  .feature-copy h3 { font-size: 1.65rem; }
  .feature-copy .statement { font-size: clamp(2.45rem, 13vw, 3.7rem); padding-left: 16px; border-left-width: 4px; }
  .topics-copy h2 { font-size: clamp(2.65rem, 13vw, 3.7rem); }
  .topic-tags { grid-template-columns: 1fr; }
  .topic-tag, .topic-tag:nth-child(3), .topic-tag:nth-child(4) { grid-column: auto; width: 100%; }
  .advantages-grid, .testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
  .advantage-card { max-width: 470px; margin-inline: auto; }
  .download-phone { width: min(100%, 260px); }
  .download-copy h2 { font-size: clamp(3.2rem, 16vw, 4.5rem); }
  .download-actions { flex-direction: column; }
  .qr-placeholder { width: 145px; }
  .store-badge { width: 250px; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-logo img, .footer-tagline { margin-inline: auto; }
  .footer-social { justify-self: center; }
}


/* Animações e microinterações */
.site-nav > a.is-active:not(.mb-btn)::after { width: 100%; }
.site-nav > a.is-active:not(.mb-btn) { color: var(--mb-green); }
.site-nav > .mb-btn.is-active {
  box-shadow: 0 0 0 3px var(--mb-yellow), 0 10px 24px rgba(76, 99, 16, .26);
}

.mb-animations-enabled .site-branding img {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.mb-animations-enabled .site-branding a:hover img {
  transform: translateY(-2px) rotate(-1.5deg) scale(1.025);
  filter: drop-shadow(0 7px 7px rgba(76, 99, 16, .13));
}
.mb-animations-enabled .topic-tag {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
.mb-animations-enabled .topic-tag:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(29, 43, 0, .15);
}
.mb-animations-enabled .advantage-card {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), filter .28s ease;
}
.mb-animations-enabled .advantage-card:hover {
  transform: translateY(-7px) scale(1.018);
  filter: brightness(1.025);
}
.mb-animations-enabled .testimonial {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
}
.mb-animations-enabled .testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 42px rgba(37, 49, 7, .22);
}
.mb-animations-enabled .qr-placeholder,
.mb-animations-enabled .store-badge {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), filter .25s ease;
}
.mb-animations-enabled .qr-placeholder:hover { transform: scale(1.035); }
.mb-animations-enabled .store-links a:hover .store-badge {
  transform: translateX(5px) scale(1.015);
  filter: brightness(1.05);
}
.mb-animations-enabled .social-links a,
.mb-animations-enabled .mb-btn {
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), background .22s ease, box-shadow .22s ease, filter .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  html.js-ready .mb-animations-enabled .mb-reveal {
    opacity: 1;
    transform: none;
  }
}

/* Ajustes de animação 2.0.8: separa a entrada do movimento contínuo */
.topics-phone-stage,
.download-phone-stage {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 100%;
}
.topics-phone-stage .topics-phone,
.download-phone-stage .download-phone {
  justify-self: auto;
}

html.js-ready .mb-animations-enabled .mb-reveal {
  opacity: 0;
  transition: opacity .72s cubic-bezier(.22, 1, .36, 1) var(--mb-reveal-delay, 0ms),
              transform .72s cubic-bezier(.22, 1, .36, 1) var(--mb-reveal-delay, 0ms);
}
html.js-ready .mb-animations-enabled .mb-reveal-up { transform: translate3d(0, 30px, 0); }
html.js-ready .mb-animations-enabled .mb-reveal-down { transform: translate3d(0, -24px, 0); }
html.js-ready .mb-animations-enabled .mb-reveal-left { transform: translate3d(-32px, 0, 0); }
html.js-ready .mb-animations-enabled .mb-reveal-right { transform: translate3d(32px, 0, 0); }
html.js-ready .mb-animations-enabled .mb-reveal-scale { transform: scale(.96); }
html.js-ready .mb-animations-enabled .mb-reveal.is-visible { opacity: 1; transform: none; }

@keyframes mb-phone-float-v2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -11px, 0) rotate(.35deg); }
}
html.js-ready .mb-animations-enabled .mb-reveal.is-visible .mb-float-target {
  animation: mb-phone-float-v2 4.8s ease-in-out 1s infinite;
  transform-origin: 50% 60%;
}

@media (max-width: 980px) {
  .topics-phone-stage { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html.js-ready .mb-animations-enabled .mb-reveal.is-visible .mb-float-target {
    animation: none !important;
  }
}

/* 2.0.10: mobile layout stays in flow during entrance and floating. */
.feature-grid > *, .topics-grid > *, .download-grid > * { min-width: 0; }
.download-phone-stage { align-self: start; }
.download-phone { height: auto; }
.download-copy { position: relative; z-index: 4; }
.download-copy h2 { overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .download-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .download-phone-stage { padding: 14px 0; }
  .download-copy h2 { line-height: 1.12; }
}
@media (max-width: 640px) {
  .download-copy h2 { font-size: clamp(2.25rem, 12vw, 3.2rem); margin-bottom: 18px; }
  .download-phone { max-width: 260px; width: 100%; }
  .store-links { width: min(100%, 250px); }
  .store-badge { width: 100%; }
  html.js-ready .mb-animations-enabled .mb-reveal-left,
  html.js-ready .mb-animations-enabled .mb-reveal-right { transform: translate3d(0, 24px, 0); }
  html.js-ready .mb-animations-enabled .mb-reveal.is-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js-ready .mb-animations-enabled .mb-reveal { opacity: 1; transform: none; }
}

/* Preserve the supplied store badges without stretching. */
.store-badge { display: block; height: auto; object-fit: contain; }

/* Download badges: explicit track sizing prevents overlap and intrinsic sizing. */
.download-actions .store-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 286px;
  max-width: 100%;
  flex: 0 1 286px;
}
.download-actions .store-links a {
  display: block;
  width: 100%;
  line-height: 0;
  flex: none;
  overflow: hidden;
  border-radius: 10px;
}
.download-actions .store-badge {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  transform: none;
  border-radius: 10px;
}
.mb-animations-enabled .store-links a:hover .store-badge { transform: none; }
@media (max-width: 640px) {
  .download-actions .store-links { width: 250px; flex-basis: 250px; }
}

/* Instagram is the only active social profile. */
.footer-social a { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.footer-social .instagram-icon { width: 19px; height: 19px; flex: 0 0 19px; color: var(--mb-yellow); }
.footer-social .instagram-label { color: inherit; }

/* Compact download layout on phones. */
@media (max-width: 640px) {
  .download.mb-section { padding: 36px 0; }
  .download .download-grid { row-gap: 24px; }
  .download .download-phone-stage { padding: 0; }
  .download .download-phone { width: min(64vw, 230px); }
  .download .download-copy h2 { margin-bottom: 12px; line-height: 1.08; }
  .download .download-copy p { font-size: clamp(1.1rem, 4.8vw, 1.35rem); line-height: 1.2; margin-bottom: 20px; }
  .download .download-actions {
    display: grid;
    grid-template-columns: minmax(0, 104px) minmax(0, 210px);
    gap: 14px;
    align-items: center;
    justify-content: center;
    max-width: 100%;
  }
  .download .qr-placeholder { width: 100%; height: auto; }
  .download .download-actions .store-links { width: 100%; min-width: 0; gap: 10px; flex-basis: auto; }
  .download .download-actions .store-links a { border-radius: 6px; }
  .download .download-actions .store-badge { border-radius: 6px; }
}

/* Keep the yellow heading readable over mobile decorative backgrounds. */
@media (max-width: 980px) {
  .download .download-copy {
    background-color: var(--mb-green);
    box-shadow: 0 0 0 20px var(--mb-green);
    isolation: isolate;
  }
  .download .download-copy h2 { position: relative; color: var(--mb-yellow); }
}