/* Keep decorative animation overflow from changing viewport scrollbars. */
html { overflow-x: clip; }
/* Responsive corrections: preserve desktop artwork; reflow content at its natural limits. */
.header .logo { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.header .header-leaf { display: block; flex: none; width: 42px; height: 42px; object-fit: contain; }
@media (max-width: 700px) {
  .header .logo { gap: 1px; }
  .header .header-leaf { width: 28px; height: 28px; }
}
@media (max-width: 359px) {
  .header .logo { gap: 0; }
  .header .header-leaf { width: 26px; height: 26px; }
}
.wrap > *, .field-grid > *, .footer-top > *, .plan-card > * { min-width: 0; }
input, select, textarea { max-width: 100%; }
.section-title, .makers-lead, .footer-p, .plan-price { overflow-wrap: break-word; }
#solucoes .comparison-slider-handle { left: calc(100% - var(--comparison-position)); }
#solucoes .comparison-slider-guide { white-space: normal; }
#solucoes .comparison-slider-guide-icon { flex-shrink: 0; }
/* Foliage is decoration, clipped by its own paint box, never by the whole page. */
@media (max-width: 1050px) {
  #para-quem .eco-foliage { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
}
#planComparisonDialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.plan-table-scroll { max-width: 100%; }
.mobile-menu { max-height: calc(100dvh - 82px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1350px) {
  .steps-section .step, .steps-section .n-journey .step.n-step-active { height: auto; }
  .steps-section .step-flip-inner { display: grid; height: auto; }
  .steps-section .step-face { position: relative; inset: auto; grid-area: 1 / 1; min-height: 420px; }
  .steps-section .step-back { overflow: visible; }
  .steps-section .step-preview--calendar, .steps-section .step-preview--requests, .steps-section .step-preview--payment { right: 8px; }
}
@media (max-width: 850px) {
  #para-quem .eco-editorial { display: block; }
  #para-quem .eco-editorial .audience-heading { margin-bottom: 28px; }
  #para-quem .eco-board { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 240px 0 0; }
  #para-quem .eco-card { position: relative; inset: auto; width: auto; min-width: 0; padding: 18px; border-radius: 20px; }
  #para-quem .eco-core { top: 100px; width: 144px; }
  #para-quem .eco-core strong { font-size: 25px; }
  #para-quem .eco-core > span { font-size: 12px; }
  #para-quem .eco-leaf-mark { width: 38px; height: 38px; }
  #para-quem .eco-orbits { width: min(195px, 80%); top: 100px; }
  #para-quem .eco-foliage { height: 220px; }
  #para-quem .eco-connections, #para-quem .eco-satellites { display: block; }
  #para-quem .eco-connections { z-index: 0; }
  #para-quem .eco-card-heading { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  #para-quem .eco-card-icon { width: 34px; height: 34px; border-radius: 10px; }
  #para-quem .eco-card-icon svg { width: 22px; height: 22px; }
  #para-quem .eco-card h4 { font-size: 16px; margin: 0 0 7px; }
  #para-quem .eco-card p { font-size: 13px; line-height: 1.45; }
  #para-quem .eco-card-detail { font-size: 12px; margin-top: 14px; padding-top: 10px; }
  #para-quem .eco-card-arrow { display: none; }
  #para-quem .eco-status, #para-quem .eco-note, #para-quem .eco-pay, #para-quem .eco-pay b, #para-quem .eco-presence small { font-size: 11px; }
  #para-quem .eco-avatars span { width: 24px; height: 24px; font-size: 8px; }
  #para-quem .eco-presence, #para-quem .eco-pay { flex-wrap: wrap; gap: 8px; }
  #para-quem .eco-week { gap: 2px; }
  #para-quem .eco-week span { width: 23px; height: 25px; font-size: 10px; }
  #para-quem .eco-footer { width: auto; flex-wrap: wrap; font-size: 10px; letter-spacing: .08em; gap: 10px; }
  #para-quem .eco-satellite { width: 30px; height: 30px; }
  #para-quem .eco-satellite-face { border-radius: 9px; }
  #para-quem .eco-satellite-face svg { width: 18px; height: 18px; }
}
@media (max-width: 700px) {
  .header-inner { gap: 10px; padding-top: env(safe-area-inset-top, 0px); }
  .header-cta { gap: 4px; }
  .menu-button { min-width: 44px; min-height: 44px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; white-space: normal; text-align: center; }
  .feature-tabs .feature-tab, #para-quem .eco-tabs button { min-height: 44px; white-space: normal; }
  #solucoes .comparison-slider-label { font-size: 10px; }
  #solucoes .comparison-scene-art-badge, #solucoes .comparison-scene-before-badge-cover { display: none; }
  .steps-section .step-face { min-height: 460px; }
  .steps-section .step-front { padding: 110px 24px 190px; }
  .steps-section .step-preview--requests, .steps-section .step-preview--payment { bottom: 85px; }
  .steps-section .steps-route { display: block; top: -55px; height: 100px; }
  #contato .contact-field-control input, #contato .contact-field-control select { font-size: 16px; }
  #contato .contact-form button[type="submit"] { white-space: normal; padding-block: 14px; height: auto; }
  #contato .contact-form button[type="submit"] > span { min-width: 0; }
  #planos .plan-quantity__button { flex-basis: 44px; width: 44px; height: 44px; }
  #planos .plan-quantity input { font-size: 16px; }
  .footer-links { flex-wrap: wrap; gap: 24px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 36px; }
}
@media (max-width: 480px) {
  #para-quem .eco-board { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #para-quem .eco-tabs button { padding-inline: 8px; font-size: 11px; }
  #para-quem .eco-status-row { padding-block: 6px; }
  #para-quem .eco-week span { width: 25px; height: 25px; }
  #solucoes .comparison-slider-guide { font-size: 12px; line-height: 1.4; padding-right: 10px; }
}
@media (max-width: 359px) {
  .header-inner.wrap { width: calc(100% - 24px); gap: 6px; }
  .header .brand-wordmark { width: 100px; height: auto; }
  .header-cta .button { padding-inline: 9px; font-size: 10px; gap: 5px; }
  .header-cta .button .i { width: 15px; }
  .hero h1 { font-size: clamp(34px, 11vw, 42px); }
  .section .section-title { font-size: clamp(30px, 10vw, 36px); }
  #contato .contact-copy .section-title { font-size: 34px; }
  #contato .contact-form { padding: 24px 16px; }
  .makers .maker-card { grid-template-columns: 1fr; }
  .makers .maker-photo { width: 96px; height: 120px; }
  #para-quem .eco-tabs { border-radius: 18px; }
  #para-quem .eco-tabs button { flex-direction: column; gap: 4px; border-radius: 15px; }
  .steps-section .step-front { padding-inline: 20px; }
  .steps-section .step-back { padding: 24px 20px; }
  #planos .plan-card, #planos .plan-card.plan-card-featured { padding-inline: 18px; }
  #planos .plan-card .plan-price { font-size: clamp(30px, 10vw, 36px); flex-wrap: wrap; }
}
@media (max-height: 500px) {
  .mobile-menu { max-height: calc(100dvh - 72px); }
  #planComparisonDialog { margin-block: 8px; max-height: calc(100dvh - 16px); }
}
@media print {
  .scroll-reveal-ready .reveal-on-scroll { opacity: 1 !important; animation: none !important; }
}

@media (max-width: 1350px) {
  .steps-section .step-preview--map { right: 30px; }
  .steps-section .steps-route { overflow: hidden; }
}

/* Both comparison layers share an intrinsic grid track, so neither is cropped on mobile. */
@media (max-width: 900px) {
  #solucoes .comparison-slider-head { display: flex; height: auto; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  #solucoes .comparison-slider-legend { display: flex; justify-content: space-between; width: 100%; order: -1; }
  #solucoes .comparison-slider-label, #solucoes .comparison-slider-guide { position: static; transform: none; }
  #solucoes .comparison-slider-guide { width: 100%; max-width: 100%; }
  #solucoes .comparison-slider-stage { height: auto; aspect-ratio: auto; }
  #solucoes .comparison-slider-media { position: relative; inset: auto; display: grid; }
  #solucoes .comparison-slider-layer { position: relative; inset: auto; grid-area: 1 / 1; }
  #solucoes .comparison-scene { position: relative; inset: auto; display: flex; flex-direction: column; height: 100%; }
  #solucoes .comparison-scene-intro { display: block; position: relative; inset: auto; order: 0; width: auto; max-width: none; padding: 22px 18px 12px; }
  #solucoes .comparison-scene-intro h3 { font-size: clamp(27px, 7vw, 36px); }
  #solucoes .comparison-scene-reference, #solucoes .comparison-scene--after .comparison-scene-reference { position: relative; inset: auto; order: 1; display: block; width: 100%; height: auto; max-width: 100%; transform: none; clip-path: none; }
  #solucoes .comparison-scene-visual, #solucoes .comparison-scene--after .comparison-scene-visual { position: relative; inset: auto; order: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
  #solucoes .comparison-scene-card, #solucoes .comparison-scene--before .comparison-scene-card { position: relative; inset: auto; width: auto; height: auto; min-height: 90px; transform: none; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 10px; padding: 14px; }
  #solucoes .comparison-scene-card-copy strong { font-size: 15px; }
  #solucoes .comparison-scene-card-copy small { font-size: 12px; }
  #solucoes .comparison-scene-card-note { display: block; grid-column: 2; font-size: 11px; }
  #solucoes .comparison-scene-center, #solucoes .comparison-scene--before .comparison-scene-center { position: relative; inset: auto; order: -1; width: 120px; height: 120px; margin: 10px auto; transform: none; }
  #solucoes .comparison-scene-center small { font-size: 11px; }
  #solucoes .comparison-scene-paths { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: .25; }
}

@media (min-width: 481px) and (max-width: 900px) {
  #solucoes .comparison-scene-visual, #solucoes .comparison-scene--after .comparison-scene-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #solucoes .comparison-scene-center { grid-column: 1 / -1; }
  #solucoes .comparison-scene-reference, #solucoes .comparison-scene--after .comparison-scene-reference { max-height: 280px; object-fit: contain; }
}
@media (max-width: 900px) {
  #solucoes .comparison-scene-art-badge, #solucoes .comparison-scene-before-badge-cover { display: none; }
}
@media (max-width: 700px) {
  #produto .demo-filters { flex-wrap: wrap; }
  #produto .demo-filters > span { font-size: 12px; }
  #produto .demo-shift { font-size: 12px; }
  /* Mobile: a lateral vira uma barra de abas compacta (marca e perfil saem; os módulos continuam acessíveis). */
  #produto .demo-sidebar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 4px; padding: 12px 10px; }
  #produto .demo-sidebar > button { min-height: 44px; height: auto; margin: 0; padding: 8px 2px; font-size: 12px; text-align: center; box-shadow: none; }
  #produto .demo-sidebar > button.is-active { box-shadow: inset 0 -3px #91f0bd; animation: none; }
  #produto .demo-sidebar > small { grid-column: 1 / -1; margin: 0 0 4px 4px; padding: 0; }
  #produto .demo-sidebar > strong, #produto .demo-sidebar .demo-sidebar-profile { display: none; }
  .footer-cta .button { white-space: normal; text-align: center; }
}

@media (max-width: 850px) {
  #para-quem .eco-connections path { vector-effect: non-scaling-stroke; }
}

@media (max-width: 1350px) {
  .steps-section .steps-grid, .steps-section .steps-grid.n-journey { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 74px 24px; }
}
@media (max-width: 1150px) {
  #planos .plan-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}

@media (max-width: 850px) {
  #para-quem .eco-satellites { position: absolute; inset: 0; pointer-events: none; }
}

@media (max-width: 1350px) {
  .steps-section .step:hover, .steps-section .step:focus-within, .steps-section .n-journey .step.n-step-active:hover { transform: none !important; }
  .steps-section .step-flip-inner { pointer-events: none; }
  .steps-section .step-face { pointer-events: auto; transform-style: preserve-3d; }
  .steps-section .step-front { transform: translateZ(1px); }
  .steps-section .step-back { transform: rotateY(180deg) translateZ(1px); }
  .steps-section .step-face[aria-hidden="true"] { pointer-events: none; }
}

.steps-section .steps-route { overflow: hidden; }

@media (min-width: 1321px) and (max-width: 1423px) {
  #contato .contact-wrap { transform: translateX(clamp(0px, calc((100vw - 1328px) / 2 - 8px), 40px)); }
}

@media (max-width: 900px) {
  #solucoes .comparison-scene .comparison-scene-visual .comparison-scene-card { transform: none; }
}
@media (max-width: 850px) {
  #para-quem .eco-wire-glow path { stroke-width: 2; opacity: .35; }
  #para-quem .eco-wire-flow path { stroke-width: 2; }
}

/* Mobile navigation has an explicit surface/foreground pair, independent of header inheritance. */
.header .mobile-menu { background: #073c34; color: #effff7; top: 100%; z-index: 110; box-shadow: 0 18px 30px #002b2933; }
.header .mobile-menu a { display: flex; align-items: center; min-height: 46px; color: #effff7; opacity: 1; border-color: #a9e9ce33; padding: 10px 16px; }
.header .mobile-menu a:hover, .header .mobile-menu a:focus-visible, .header .mobile-menu a:active { color: #fff; background: #116650; outline-offset: -3px; }
.header .mobile-menu a[aria-current="location"] { color: #c5ff9a; background: #145a48; border-left: 3px solid #a9f57e; }
.comparison-control-track { display: none; }
.comparison-art-link { display: none; }
@media (max-width: 900px) {
  #solucoes .comparison-control-track { position: relative; display: block; height: 64px; margin: 0 6px 16px; border-radius: 999px; background: linear-gradient(90deg,#fff0eb,#d8f8e9); border: 1px solid #8cd9b8; touch-action: pan-y; }
  #solucoes .comparison-control-track .comparison-slider-handle { top: 50%; left: clamp(23px, calc(100% - var(--comparison-position)), calc(100% - 23px)); /* espelhado: "Antes" fica à esquerda, como o rótulo */ width: 46px; height: 46px; border-width: 3px; }
  #solucoes .comparison-slider-divider { display: none; }
  #solucoes .comparison-slider-layer--after { clip-path: none; }
  #solucoes .comparison-slider-layer { opacity: 0; visibility: hidden; transition: opacity .2s ease; pointer-events: none; }
  #solucoes .comparison-slider-layer.is-current { opacity: 1; visibility: visible; pointer-events: auto; }
  #solucoes .comparison-slider-stage { cursor: default; }
  #solucoes .comparison-art-link { display: inline-flex; align-self: center; align-items: center; justify-content: center; gap: 8px; order: 2; margin: 14px 18px 18px; padding: 10px 16px; min-height: 44px; border: 1px solid #91d9b9; border-radius: 999px; background: linear-gradient(120deg, #f7fff9, #dcf8e9); box-shadow: 0 6px 18px #087b5420; color: #075d46; font-size: 13px; font-weight: 750; text-align: center; text-decoration: none; }
  #solucoes .comparison-art-link::after,
  .makers-studio-link::after {
    content: '';
    display: inline-block;
    flex: none;
    width: .85em;
    height: .85em;
    margin-left: 4px;
    vertical-align: -.08em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #solucoes .comparison-art-link::after { width: 16px; height: 16px; margin-left: 0; }
  #solucoes .comparison-art-link:hover { background: #c9f3dc; }
  #solucoes .comparison-art-link:focus-visible { outline: 3px solid #087657; outline-offset: 3px; }
  #solucoes .comparison-scene--before .comparison-art-link { border-color: #f2ada5; background: linear-gradient(120deg, #fffafa, #ffe9e5); box-shadow: 0 6px 18px #b95a4a1c; color: #a23e35; }
  #solucoes .comparison-scene--before .comparison-art-link:hover { background: #ffddd7; }
  #solucoes .comparison-scene--before .comparison-art-link:focus-visible { outline-color: #b6473d; }
  #solucoes .comparison-scene-visual, #solucoes .comparison-scene--after .comparison-scene-visual { display: none; }
  #solucoes .comparison-scene-center, #solucoes .comparison-scene--before .comparison-scene-center { width: 96px; height: 96px; margin: 4px auto 16px; }
}

/* Keep the header CTA's established gradient while retaining its hover motion. */
.header-cta .button:hover {
  background: #79d4b3;
  background-image: linear-gradient(115deg, #7de5bd, #b8f36c);
  filter: none;
}

/* Selected feature tabs fade in place; the highlight never travels between buttons. */
.feature-tabs .feature-tab {
  position: relative;
  isolation: isolate;
  border-color: rgba(255,255,255,.76);
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(220,248,235,.54));
  transition: color .2s ease, border-color .2s ease, transform .18s ease;
}
.feature-tabs .feature-tab::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, #7de5bd, #b8f36c);
  opacity: 0;
  transition: opacity .22s ease;
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 9px 22px rgba(0,139,82,.27);
  pointer-events: none;
}
.feature-tabs .feature-tab[aria-selected="true"] {
  border-color: rgba(255,255,255,.9);
  color: #052f28;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(220,248,235,.54));
}
.feature-tabs .feature-tab[aria-selected="true"]::before { opacity: 1; }
/* Troca de aba sem piscar: o texto só desliza e escurece de leve (nunca some); a área visual não tem fade, quem anima é o painel interno. */
@keyframes feature-panel-enter { from { opacity: .72; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  #produto .pv-showcase.is-entering .pv-copy { animation: feature-panel-enter .35s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-tabs .feature-tab::before { transition: none; }
  #produto .pv-showcase.is-entering .pv-copy, #produto .pv-showcase.is-entering .pv-visual { animation: none !important; }
}

#solucoes .comparison-auto-pause { flex: none; min-height: 32px; padding: 4px 9px; border: 1px solid #62bb9a; border-radius: 99px; background: #e4faee; color: #07563e; font: inherit; cursor: pointer; }
#solucoes .comparison-auto-pause:focus-visible { outline: 3px solid #087657; outline-offset: 2px; }
.makers-studio-link { color: inherit; text-decoration-color: #85ebc7; text-underline-offset: 3px; }
.makers-studio-link:hover { color: #85ebc7; }
.makers-studio-link:focus-visible { outline: 2px solid #85ebc7; outline-offset: 3px; border-radius: 2px; }
.makers-studio-link::after {
  content: '';
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: 4px;
  vertical-align: -.08em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes studio-link-glow { 0%, 100% { color: #f3fff7; text-shadow: 0 0 0 transparent; } 50% { color: #8cf0c4; text-shadow: 0 0 8px #71e5aa7a; } }
@media (prefers-reduced-motion: no-preference) {
  .makers-studio-link { animation: studio-link-glow 1.8s ease-in-out infinite; }
}
#produto .pv-visual { scroll-margin-top: 96px; }
@media (max-width: 760px) {
  #planos .plan-comparison-dialog { overflow-x: hidden; overflow-y: auto; }
  #planos .plan-comparison-shell { max-height: none; }
  #planos .plan-comparison-dialog .plan-table-scroll { flex: none; min-height: auto; overflow-x: auto; overflow-y: hidden; }
  #planos .plan-comparison-head { min-height: 60px; }
  #planos .plan-comparison-dialog .plan-table tbody tr > * { height: 35px; padding-block: 3px; }
  #planos .plan-comparison-footnote { margin-top: 8px; }
}
@media (max-width: 560px) {
  #para-quem .eco-core > span { max-width: 110px; padding-inline: 3px; text-align: center; line-height: 1.2; font-size: 10px; }
  #para-quem .eco-foliage { left: 50%; top: 17px; width: min(74%, 250px); height: 185px; object-fit: contain; transform: translateX(-50%); }
  .steps-section.section { padding-block: 48px 64px; }
  .steps-section .steps-scene { margin-top: 42px; }
  .steps-section .steps-grid, .steps-section .steps-grid.n-journey { row-gap: 40px; }
  .steps-section .step:nth-child(3), .steps-section .step:nth-child(4) { height: auto; }
  .steps-section .step-face { min-height: 340px; }
  .steps-section .step-front { padding-top: 100px; padding-bottom: 50px; }
  .steps-section .step-icon { top: 16px; left: 24px; width: 64px; height: 64px; border-width: 7px; }
  .steps-section .step-icon .i { width: 27px; height: 27px; }
  .steps-section .step-number { top: 36px; left: 99px; }
  .steps-section .n-journey .n-step-select, .steps-section .n-journey .n-step-select[aria-pressed="true"] { bottom: 16px; }
  .steps-section .step-back { padding: 16px 20px; }
  .steps-section .step .step-back h3 { margin: 10px 0 6px; }
  .steps-section .step-back-label { margin: 10px 0 6px; }
  .steps-section .step-back-points { gap: 4px; margin-bottom: 8px; }
  .steps-section .step-back-points li { min-height: 27px; padding-block: 3px; }
  .steps-section .step-preview { transform-origin: right bottom; }
  .steps-section .step-preview--calendar { bottom: 2px; transform: scale(.66) rotate(-9deg); }
  .steps-section .step-preview--map { bottom: 2px; transform: scale(.66) rotate(11deg); }
  .steps-section .step-preview--requests { bottom: 8px; transform: scale(.64) rotate(-9deg); }
  .steps-section .step-preview--payment { bottom: 12px; transform: scale(.72) rotate(-8deg); }
}

/* Criadores: composição inspirada no mockup, isolada das demais seções. */
.makers.section { --wave-base: #00362f; overflow: visible; background: linear-gradient(180deg, var(--wave-base) 0, transparent 90px), radial-gradient(ellipse at 74% 46%, #075d4d 0%, #003d34 48%, #002d29 100%) !important; }
.makers.section::before { background: var(--wave-base); }
.makers.section > .wrap { position: relative; z-index: 1; }

.makers.section .wrap { max-width: 1270px; width: calc(100% - 24px); }
.makers-grid { grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); align-items: center; gap: clamp(36px, 5vw, 70px); }
.makers .kicker { color: #8df4cb !important; letter-spacing: .16em; }
.makers .section-title { max-width: none; margin: 25px 0 22px; color: #f7fff9; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.058em; }
.makers .section-title span { display: block; color: #8cf0c5; }
.makers-lead { max-width: 53ch; margin: 0; color: #e4f5ec; font-size: 16px; line-height: 1.68; }
.makers-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 600px; margin-top: 30px; padding-top: 27px; border-top: 1px solid #79d9b66b; }
.makers-value { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 12px; color: #e7f8ee; font-size: clamp(11px, .9vw, 13px); line-height: 1.45; }
.makers-value + .makers-value { padding-left: 14px; border-left: 1px solid #65cda04a; }
.makers-value-icon { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border: 1px solid #69eabc8c; border-radius: 16px; background: linear-gradient(145deg, #197f68aa, #00463d77); box-shadow: inset 0 1px 8px #8cffce3a, 0 8px 20px #001d1980; }
.makers-value-icon svg { width: 25px; height: 25px; fill: none; stroke: #9afbd4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.maker-list { gap: 14px; width: min(100%, 560px); justify-self: end; }
.makers .maker-card { position: relative; grid-template-columns: 128px minmax(0, 1fr); gap: 20px; align-items: center; min-height: 0; padding: 18px 70px 18px 18px; border: 1px solid #68e6b09c; border-radius: 26px; background: linear-gradient(135deg, #0a584a9c 0%, #00382fce 56%, #086c59a8 100%); box-shadow: inset 0 1px 0 #a4ffe074, inset 0 -8px 22px #28df9c18, 0 15px 34px #001f1b80; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.makers .maker-card:hover { transform: translateY(-4px); border-color: #a2ffd4; box-shadow: inset 0 1px 0 #d2ffe8a6, 0 20px 40px #001c19a8, 0 0 24px #38e5a134; }
.makers .maker-card::before { content: ''; position: absolute; top: 12px; right: 17px; width: 54px; height: 54px; background: url('img/folhasemfundo1.webp') center / contain no-repeat; opacity: .4; transform: rotate(25deg); pointer-events: none; }
.makers .maker-card::after { display: block; content: ''; position: absolute; right: 23px; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); border: 1px solid #6befb780; border-radius: 12px; background: #11856460; box-shadow: inset 0 1px 8px #adffdb40; pointer-events: none; }
.maker-person-icon { position: absolute; right: 32px; top: 50%; z-index: 1; width: 20px; height: 20px; transform: translateY(-50%); fill: #9af6cf; pointer-events: none; }
.makers .maker-photo { width: 100%; height: 100%; min-height: 150px; max-height: 150px; object-fit: cover; border: 2px solid #65f0bc; border-radius: 20px; box-shadow: 0 8px 24px #001b19a8; }
.makers .maker-card .maker-role { margin-bottom: 12px; color: #8ff3c4; font-size: 12px; font-weight: 750; }
.makers .maker-card h3 { margin-bottom: 14px; color: #fff; font-size: 24px; line-height: 1.1; }
.makers .maker-card p:last-child { color: #e2f3e9; font-size: 14px; line-height: 1.55; }
@media (max-width: 1150px) { .makers-grid { grid-template-columns: 1fr; gap: 42px; } .makers .section-title { max-width: 17ch; } .maker-list { max-width: 620px; justify-self: start; width: min(100%, 620px); } }
@media (max-width: 700px) { .makers .section-title { font-size: clamp(34px, 8vw, 42px); } .makers-values { gap: 13px; } .makers-value { flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 4px; } .makers-value + .makers-value { padding-left: 10px; } .makers-value-icon { width: 43px; height: 43px; border-radius: 12px; } .makers-value-icon svg { width: 23px; height: 23px; } .makers .maker-card { grid-template-columns: 96px minmax(0,1fr); gap: 15px; min-height: 0; padding: 15px; border-radius: 20px; } .makers .maker-photo { height: 112px; min-height: 112px; border-radius: 14px; } .makers .maker-card::after, .maker-person-icon { display: none; } .makers .maker-card::before { width: 35px; height: 35px; top: 5px; right: 7px; } }
@media (max-width: 420px) { .makers .maker-card { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; } .makers .maker-photo { height: 104px; min-height: 104px; } .makers .maker-card h3 { font-size: 21px; } .makers .maker-card p:last-child { font-size: 13px; } .makers-value { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .makers .maker-card { transition: none; } }

@media (max-width: 700px) { .makers.section .wrap { width: calc(100% - 36px); } }

.makers .maker-float { min-width: 0; }
.makers .maker-float .maker-card { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .makers .maker-float:first-child { animation: makers-breeze-one 8.7s cubic-bezier(.45,.04,.56,.96) infinite; }
  .makers .maker-float:last-child { animation: makers-breeze-two 10.9s cubic-bezier(.42,.02,.58,.98) -3.7s infinite; }
}
@keyframes makers-breeze-one { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 22% { transform: translate3d(2px,-6px,0) rotate(.5deg); } 48% { transform: translate3d(-3px,-3px,0) rotate(-.4deg); } 73% { transform: translate3d(1px,4px,0) rotate(.3deg); } }
@keyframes makers-breeze-two { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 18% { transform: translate3d(-2px,5px,0) rotate(-.45deg); } 43% { transform: translate3d(3px,-4px,0) rotate(.55deg); } 69% { transform: translate3d(-1px,-8px,0) rotate(-.3deg); } 85% { transform: translate3d(2px,-2px,0) rotate(.2deg); } }

/* Footer mint finish. */
.footer {
  --wave-base:#eafff6;
  color:#2d625e;
  padding:clamp(68px,6vw,94px) 0 clamp(85px,9vw,135px);
  border:0;
  background:linear-gradient(to bottom,#023d34 0 46px,#e9fff3 46px,#afe2cd 100%) !important;
  isolation:isolate;
  overflow:visible;
}
.footer::before {inset:0;width:100%;height:100%;z-index:0;mask-image:none;background:linear-gradient(145deg,#e9fff3 0%,#d0f3e2 48%,#afe2cd 100%);clip-path:polygon(0 24px,6% 31px,12% 37px,18% 39px,25% 34px,31% 27px,38% 21px,44% 19px,50% 21px,56% 27px,62% 34px,69% 38px,75% 35px,82% 28px,89% 21px,95% 19px,100% 24px,100% 100%,0 100%);}
.footer::after {display:none;}
.footer>.wrap {position:relative;top:-22px;z-index:1;max-width:1300px;}
@media(min-width:901px){.footer>.wrap {width:min(calc(100% - 48px),1300px);}}
.footer-cta {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,90px);padding:0 0 clamp(42px,5vw,76px);margin:0 0 clamp(32px,4vw,54px);border-bottom:1px solid #0b857c36;}
.footer-cta-copy p {max-width:16ch;margin:0;color:#043a36;font-size:clamp(32px,3.55vw,56px);font-weight:850;line-height:1.02;letter-spacing:-.065em;}
.footer-cta-copy p span {color:#00bd98;background:linear-gradient(95deg,#00bd9b,#00a585);background-clip:text;-webkit-text-fill-color:transparent;}
.footer-cta-copy>i {display:block;width:52px;height:4px;background:#05caa5;margin:25px 0 18px;}
.footer-cta-desc {display:block;max-width:52ch;font-size:clamp(15px,1.35vw,20px);line-height:1.65;color:#477b79;}
.footer-cta .button {display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-width:0;min-height:44px;padding:8px 14px;border-radius:17px;background:linear-gradient(105deg,#42d6b9,#baf982);color:#053c37;box-shadow:0 0 0 8px #76eec328,0 13px 28px #00a98739;font-size:13px;font-weight:850;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;}
@media(min-width:901px){.footer-cta .button {justify-self:center;}}
.footer-cta .button:hover {transform:translateY(-3px);box-shadow:0 0 0 12px #76eec33d,0 20px 42px #00a9874d;}
@keyframes footer-cta-float {
  0%,100% {translate:0 0;filter:brightness(1);}
  25% {translate:2px -5px;filter:brightness(1.04);}
  52% {translate:-2px -8px;filter:brightness(1.08);}
  76% {translate:1px -3px;filter:brightness(1.03);}
}
@keyframes footer-cta-halo {
  0%,100% {opacity:.35;scale:1;}
  50% {opacity:.8;scale:1.08;}
}
.footer-cta .button {position:relative;isolation:isolate;}
.footer-cta .button::before {content:"";position:absolute;inset:-7px;border:1px solid #12c9a4;border-radius:22px;box-shadow:0 0 17px #16d7a579;pointer-events:none;}
@media(prefers-reduced-motion:no-preference){
  .footer-cta .button {animation:footer-cta-float 5.4s ease-in-out infinite;}
  .footer-cta .button::before {animation:footer-cta-halo 3.4s ease-in-out infinite;}
}
.footer-cta .button span {font-size:1.55em;font-weight:400;line-height:1;}
.footer-top {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(45px,10vw,160px);padding-bottom:clamp(28px,4vw,50px);}
.footer .logo {display:inline-flex;align-items:center;}.footer .brand-wordmark {width:clamp(110px,9vw,130px);height:auto;filter:none;}
.footer-p {max-width:46ch;margin:20px 0 18px;color:#477b79;font-size:clamp(14px,1.15vw,17px);line-height:1.7;}
.footer .makers-studio-link {color:#075c50;text-decoration-color:#00ad8b;font-weight:800;}
@keyframes footer-studio-link-glow {0%,100% {color:#075c50;text-shadow:0 0 0 transparent;}50% {color:#00a782;text-shadow:0 0 8px #00be9080;}}
@media(prefers-reduced-motion:no-preference){.footer .makers-studio-link {animation:footer-studio-link-glow 1.8s ease-in-out infinite;}}
.footer-social {display:flex;flex-wrap:wrap;gap:9px;}
.footer-social-link {display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #ffffff70;border-radius:50%;color:#fff;text-decoration:none;box-shadow:0 4px 12px #005b4b1c;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;}
.footer-social-link svg {display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.footer-social-link--instagram {background:linear-gradient(135deg,#833ab4 5%,#c13584 42%,#e1306c 65%,#f77737 100%);}
.footer-social-link--linkedin {background:#0a66c2;}
.footer-social-link--youtube {background:#ff0033;}
.footer-social-link--github {background:#24292f;}
.footer-social-link--x {background:#111;}
.footer-social-link--email {background:linear-gradient(135deg,#008e78,#004e4b);}
.footer-links {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,55px);}
.footer-links>div {display:grid;align-content:start;gap:13px;font-size:clamp(13px,1.1vw,16px);}
.footer-links b {color:#063c38;font-size:clamp(15px,1.15vw,18px);font-weight:850;margin-bottom:6px;}
.footer-links a {color:#477b79;min-height:28px;text-decoration:none;transition:color .2s ease,transform .2s ease;}
.footer-links a:hover {color:#008669;transform:translateX(3px);}
.footer-bottom {border-top:1px solid #0b857c36;padding-top:22px;color:#477b79;font-size:13px;}
.footer :is(a,button):focus-visible {outline:3px solid #007c66;outline-offset:4px;}
@media(max-width:900px){.footer-cta {grid-template-columns:1fr;gap:32px;}.footer-cta .button {justify-self:start;}.footer-top {grid-template-columns:1fr;gap:34px;}.footer-links {max-width:650px;}}
@media(max-width:540px){.footer {padding-top:70px;padding-bottom:18px;}.footer-cta-copy p {font-size:clamp(30px,8vw,40px);}.footer-cta-copy p br,.footer-cta-desc br {display:none;}.footer-cta .button {width:100%;min-width:0;min-height:52px;border-radius:18px;}.footer-links {grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 18px;}.footer-social-link {width:38px;height:38px;}.footer::after {height:75px;}}
@media(prefers-reduced-motion:reduce){.footer-cta .button,.footer-links a {transition:none;}}
.footer .logo-footer {min-height:38px;width:max-content;padding:0;border:0;background:none;text-decoration:none;}
.footer .logo-footer .brand-wordmark {transform:translateX(-5px);filter:drop-shadow(0 1px 2px #034e40);}
.footer .logo-footer .header-leaf {width:28px;height:28px;object-fit:contain;}
.footer-cta-desc {max-width:65ch;}
.footer-social-link:hover {transform:translateY(-3px);box-shadow:0 8px 18px #005b4b40;filter:saturate(1.18);}
@media(max-width:540px){.footer-cta-copy p br,.footer-cta-desc br {display:block;}}
@media(prefers-reduced-motion:reduce){.footer-social-link {transition:none;}.footer-social-link:hover {transform:none;}}

/* Keep the footer transition mint-only and let the copyright sit at the page end. */
.footer {
  padding-bottom: 6px;
  background: linear-gradient(180deg, #e9fff3 0%, #d0f3e2 52%, #afe2cd 100%) !important;
}
.footer::before {
  inset: auto 0 auto;
  top: calc(-1 * var(--section-wave-size));
  width: 100%;
  height: var(--section-wave-size);
  background: #e9fff3;
  clip-path: none;
  mask-image: url("img/section-wave-mask.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.whatsapp-float {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 130;
  display: grid;
  width: 60px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #25d366, #08a86a);
  box-shadow: 0 8px 24px rgba(0, 111, 73, .3), 0 0 0 5px rgba(90, 230, 161, .13);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.whatsapp-float svg { width: 31px; height: 31px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.whatsapp-float:hover { transform: translateY(-3px) scale(1.04); filter: saturate(1.08); box-shadow: 0 12px 28px rgba(0, 111, 73, .36), 0 0 0 7px rgba(90, 230, 161, .16); }
.whatsapp-float:focus-visible { outline: 3px solid #073c34; outline-offset: 4px; }
@media (max-width: 700px) {
  .whatsapp-float { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; }
  .whatsapp-float svg { width: 29px; height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
}

/* Menu mobile: véu atrás, entrada suave, linhas compactas e "Contato" como botão */
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes menu-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1030px) {
  .header:has(.mobile-menu.open)::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: -1;
    background: rgba(0, 20, 15, .55); pointer-events: none;
  }
  .header .mobile-menu a { min-height: 44px; padding: 6px 16px; border-bottom: 1px solid rgba(169, 233, 206, .2); }
  .header .mobile-menu a[href="#contato"],
  .header .mobile-menu a[href="#contato"]:hover,
  .header .mobile-menu a[href="#contato"]:focus-visible {
    justify-content: center; margin-top: 12px; border: 0; border-radius: 12px;
    background: linear-gradient(90deg, #8ff0c0, #c1f26a); color: #06382d; font-weight: 800;
  }
  .header .mobile-menu a[href="#contato"]:hover,
  .header .mobile-menu a[href="#contato"]:focus-visible { filter: brightness(1.06); }
}
@media (max-width: 1030px) and (prefers-reduced-motion: no-preference) {
  .header .mobile-menu.open { animation: menu-in .22s cubic-bezier(.2, .7, .3, 1) both; }
  .header:has(.mobile-menu.open)::after { animation: menu-scrim-in .22s ease both; }
}

/* Header translúcido ao rolar (no topo permanece opaco, como antes; com o menu aberto também fica opaco) */
.header { transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease; }
.header.is-scrolled:not(:has(.mobile-menu.open)) {
  background: rgba(3, 40, 35, .58);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* Hero -> faixa de destaques: as duas áreas são escuras, então a onda virava uma mancha no fim da
   primeira tela. Em vez dela, um degradê suave com as cores da própria faixa. */
.value-strip::before {
  background: linear-gradient(115deg, #052f2b, #075447 55%, #06342e);
  mask-image: linear-gradient(to bottom, transparent, #000);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-size: 100% 100%;
  transform: none;
}

/* Faixa de destaques (desktop, 4 colunas): conteúdo centralizado em cada coluna, com o mesmo recuo em todas. */
@media (min-width: 1031px) {
  .value-strip .value-unit {
    grid-template-columns: 42px minmax(0, max-content);
    justify-content: center;
    padding-inline: 20px;
  }
}

/* Soluções: cabeçalho alinhado às bordas do comparativo abaixo (título mais à esquerda, texto até a borda direita). */
@media (min-width: 1031px) {
  #solucoes .story-top { width: min(100% - 80px, 1200px); }
  #solucoes .story-top .section-desc { max-width: none; justify-self: end; }
}

@media (max-width: 400px) {
  #produto .demo-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Comparar planos no celular: coluna de rótulos fixa e uma coluna de plano por vez, com encaixe ao rolar. */
@media (max-width: 760px) {
  #planos .plan-comparison-dialog .plan-table-scroll { scroll-snap-type: x proximity; scroll-padding-left: 124px; -webkit-overflow-scrolling: touch; }
  #planos .plan-comparison-dialog .plan-table { width: 812px; min-width: 812px; }
  #planos .plan-comparison-dialog .plan-table tr > :first-child { position: sticky; left: 0; z-index: 3; width: 124px; padding: 6px 6px 6px 10px; background-clip: padding-box; box-shadow: 1px 0 0 #dbe8e1, 8px 0 10px -8px rgba(16, 61, 52, .35); }
  #planos .plan-comparison-dialog .plan-table tr > :not(:first-child) { width: 172px; padding-inline: 6px; }
  #planos .plan-comparison-dialog .plan-table thead tr:first-child th:not(:first-child) { scroll-snap-align: start; }
  #planos .plan-comparison-dialog .plan-table tbody th { font-size: 12px; line-height: 1.25; }
  #planos .plan-comparison-dialog .plan-table tbody th .i { display: block; margin: 0 0 3px; }
  #planos .plan-comparison-dialog .plan-table tbody th span { display: block; }
  #planos .plan-comparison-dialog .plan-table tbody tr > * { height: 56px; }
  #planos .plan-comparison-dialog .plan-comparison-unavailable-note { max-width: 100%; }
}

/* Demo no celular: cada dia vira uma faixa com o rótulo em linha e os turnos lado a lado,
   em vez de uma coluna estreita com o dia ocupando a lateral. Moldura mais fina para devolver largura. */
@media (max-width: 700px) {
  #produto .demo-frame { padding: 8px; }
  #produto .demo-canvas { padding: 14px 10px; }
  #produto .demo-week { gap: 8px; }
  #produto .demo-week > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  #produto .demo-week > div h5 { grid-column: 1 / -1; grid-row: auto; display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; margin: 0 0 2px; padding: 0 2px 6px; font-size: 11px; line-height: 1.2; }
  #produto .demo-week > div h5 > span { display: inline; font-size: 16px; }
  #produto .demo-week > div > .demo-shift, #produto .demo-week > div > [data-vacancy] { grid-column: auto; }
  #produto .demo-week > div .demo-shift, #produto .demo-week > div:nth-child(3) .demo-shift, #produto .demo-week [data-vacancy] .demo-shift { margin: 0; padding: 8px; min-height: 0; }
  #produto .demo-week > div .demo-shift strong { margin: 3px 0; }
  #produto .demo-week > div > .demo-shift:only-of-type { grid-column: 1 / -1; }
}

/* O produto no celular: uma visão por vez (gestor ou colaborador), alternadas pelo seletor no topo.
   A semana vira colunas com deslize horizontal dentro da tela do gestor, como num app real. */
#produto .demo-view-switch { display: none; }
@keyframes demo-view-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 700px) {
  #produto .demo-view-switch { display: flex; grid-column: 1 / -1; width: 100%; margin: 0 0 14px; }
  #produto .demo-view-switch button { flex: 1; min-width: 0; gap: 6px; padding: 9px 6px; font-size: clamp(11px, 3.2vw, 13px); }
  #produto .demo-frame[data-view="gestor"] .demo-phone-column,
  #produto .demo-frame[data-view="colaborador"] .demo-workspace { display: none; }
  #produto .demo-stage { gap: 0; }
  #produto .demo-week { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(128px, 44%); gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  #produto .demo-week::-webkit-scrollbar { display: none; }
  #produto .demo-week > div, #produto .demo-week > div:last-child { display: block; grid-column: auto; scroll-snap-align: start; padding: 8px; }
  #produto .demo-week > div h5 { display: flex; justify-content: space-between; margin: 0 0 8px; }
  #produto .demo-week > div .demo-shift, #produto .demo-week > div:nth-child(3) .demo-shift, #produto .demo-week [data-vacancy] .demo-shift { margin: 0 0 6px; }
  #produto .demo-phone-column { padding: 6px 0 4px; }
  #produto .demo-phone-label { display: none; }
  #produto .demo-handset { width: min(100%, 264px); transform: none; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  #produto .demo-frame[data-view] .demo-workspace, #produto .demo-frame[data-view] .demo-phone-column { animation: demo-view-in .32s ease-out; }
  #produto .demo-frame[data-view] .demo-handset { animation: demo-float-phone 13s ease-in-out infinite; }
}
@media (max-width: 700px) {
  #produto .demo-view-switch button { white-space: nowrap; }
}
@media (max-width: 400px) {
  #produto .demo-view-switch button svg { display: none; }
}

/* Desempenho no touch (iOS/WebKit): desfoque de fundo em cards que flutuam obriga a refazer o blur a cada
   quadro e atrasa a pintura dos blocos durante a rolagem (áreas em branco). Os fundos desses cards já são
   quase opacos, então o visual praticamente não muda. O header mantém o vidro. O pulso do núcleo de
   "Para quem" fica estático no touch (ver profile-ecosystem.css). */
@media (hover: none), (pointer: coarse) {
  .story-card, .plan-card, .step, .contact-form, .units-panel, .maker-card, .makers .maker-card,
  .feature-tab, .faq details, .faq details:first-child, .aud-card, .plan-table-scroll, .plan-card:not(.plan-card-featured) {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* =====================================================================================
   O produto no celular — mockup aprovado (foto 1).
   Seção clara; cabeçalho; seletor em pílula; uma visão por vez (notebook do gestor ou celular do
   colaborador) com setas laterais, pontos e legenda. As abas de recurso e o texto longo dão lugar à
   sidebar do notebook, que navega pelos mesmos módulos. Nada disso aparece acima de 700px.
   ===================================================================================== */
#produto .demo-m-head, #produto .demo-m-arrow, #produto .demo-m-dots, #produto .demo-m-note { display: none; }
@media (max-width: 700px) {
  #produto.product-explorable { padding-block: 34px 56px; }
  #produto.product-explorable .feature-tabs, #produto.product-explorable .pv-copy { display: none; }
  #produto.product-explorable .pv-showcase { margin: 0; }
  #produto .demo-frame { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #produto .demo-caption { display: none; }

  /* Cabeçalho */
  #produto .demo-m-head { display: block; margin: 0 4px 22px; }
  #produto .demo-m-kicker { display: flex; align-items: center; gap: 12px; color: #0b7a57; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
  #produto .demo-m-kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: #0f9a6c; }
  #produto .demo-m-title { margin: 14px 0 8px; color: #0b2a2c; font-size: clamp(25px, 7.4vw, 30px); font-weight: 850; line-height: 1.1; letter-spacing: -.045em; }
  #produto .demo-m-title span { color: #15a968; }
  #produto .demo-m-sub { margin: 0; max-width: 34ch; color: #39545a; font-size: clamp(14px, 4vw, 15.5px); line-height: 1.5; }

  /* Seletor em pílula */
  #produto .demo-view-switch { display: flex; gap: 4px; margin: 0 0 26px; padding: 4px; border: 1px solid #d3efe1; border-radius: 999px; background: #f6fdf9; box-shadow: 0 10px 24px rgba(16, 104, 74, .12), inset 0 1px #fff; }
  #produto .demo-view-switch button { min-height: 44px; border-radius: 999px; color: #0b6a4b; font-size: clamp(11.5px, 3.4vw, 13.5px); font-weight: 750; }
  #produto .demo-view-switch button svg { display: block; width: 18px; height: 18px; }
  #produto .demo-view-switch button[aria-pressed="true"] { background: linear-gradient(135deg, #0f9466, #075a43 78%); color: #fff; box-shadow: 0 6px 16px rgba(5, 87, 62, .35), inset 0 1px rgba(255, 255, 255, .22); }
  #produto .demo-view-switch button:not([aria-pressed="true"]):hover { background: #e3f6ec; color: #075a43; }
  #produto .demo-view-switch button:focus-visible { outline: 3px solid #0f9466; outline-offset: 2px; }

  /* Palco com setas */
  #produto .demo-stage { position: relative; display: block; padding: 0 2px; }
  #produto .demo-m-arrow { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; border: 1px solid #d7efe3; border-radius: 50%; background: #fff; color: #0b6a4b; box-shadow: 0 6px 16px rgba(10, 80, 58, .18); cursor: pointer; }
  #produto .demo-m-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  #produto .demo-m-arrow--prev { left: -4px; }
  #produto .demo-m-arrow--next { right: -4px; }
  #produto .demo-m-arrow:focus-visible { outline: 3px solid #0f9466; outline-offset: 2px; }

  /* Notebook do gestor */
  #produto .demo-frame[data-view="gestor"] .demo-stage::after { content: ""; display: block; width: calc(100% - 8px); height: 11px; margin: -1px auto 0; border-radius: 1px 1px 12px 12px; background: linear-gradient(180deg, #f3f6f5 0%, #c9d3d0 55%, #9aa8a4 100%); box-shadow: 0 10px 18px rgba(8, 60, 44, .22); }
  #produto .demo-workspace { display: grid; grid-template-columns: 31% minmax(0, 1fr); width: calc(100% - 34px); height: clamp(220px, 64vw, 260px); margin: 0 auto; border: 7px solid #0b1f1b; border-bottom-width: 6px; border-radius: 14px 14px 3px 3px; background: #f2faf6; box-shadow: 0 18px 34px rgba(5, 60, 44, .22); transform: none; }
  #produto .demo-sidebar { display: flex; flex-direction: column; gap: 3px; padding: 12px 6px; background: linear-gradient(170deg, #0a4a3c, #062e28 80%); }
  #produto .demo-sidebar > strong { display: flex; margin: 0 4px 12px; min-height: 0; }
  #produto .demo-sidebar .demo-brand-wordmark { width: 62px; height: 22px; }
  #produto .demo-sidebar > small, #produto .demo-sidebar .demo-sidebar-profile { display: none; }
  #produto .demo-sidebar > button { min-height: 30px; margin: 0; padding: 6px 7px; border-radius: 6px; font-size: clamp(9px, 2.6vw, 10.5px); text-align: left; box-shadow: none; animation: none; }
  #produto .demo-sidebar > button.is-active { background: linear-gradient(110deg, #1a8a68, #0e6650); box-shadow: inset 2px 0 #91f0bd; }
  #produto .demo-canvas { min-width: 0; padding: 12px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  #produto .demo-canvas::-webkit-scrollbar { display: none; }
  #produto #previewOverline { display: none; }
  #produto #previewTitle { margin: 0; font-size: clamp(13px, 3.8vw, 15px); }
  #produto .demo-filters { gap: 4px; margin: 8px 0 10px; }
  #produto .demo-filters > span { padding: 3px 6px; border-radius: 5px; font-size: clamp(8px, 2.3vw, 9.5px); }
  #produto .demo-panel { padding: 0; border: 0; background: none; box-shadow: none; }
  #produto .demo-panel::before { content: none; }
  #produto .demo-week { grid-auto-columns: 46%; gap: 5px; }
  #produto .demo-week > div, #produto .demo-week > div:last-child { padding: 5px; border-radius: 6px; }
  #produto .demo-week > div h5 { margin: 0 0 5px; padding: 0 2px 4px; font-size: 9px; }
  #produto .demo-week > div h5 > span { font-size: 9px; }
  #produto .demo-week > div .demo-shift, #produto .demo-week > div:nth-child(3) .demo-shift, #produto .demo-week [data-vacancy] .demo-shift { margin: 0 0 4px; padding: 5px 5px 5px 6px; border-left-width: 2px; }
  #produto .demo-shift time, #produto .demo-shift strong { font-size: clamp(8px, 2.3vw, 9.5px); }
  #produto .demo-week > div .demo-shift strong { margin: 2px 0; }
  #produto .demo-shift > span { font-size: clamp(7.5px, 2.1vw, 8.5px); }
  #produto .demo-action { gap: 6px; margin-top: 8px; padding-top: 8px; }
  #produto .demo-action strong { font-size: 10px; }
  #produto .demo-action p { margin-top: 2px; font-size: 9px; }
  #produto .demo-action button { min-height: 32px; padding: 6px 8px; font-size: 10px; }
  #produto .demo-feedback { margin-top: 5px; font-size: 8.5px; min-height: 0; }
  #produto .demo-metrics { gap: 4px; margin-bottom: 8px; }
  #produto .demo-metrics > div { padding: 6px 8px; }
  #produto .demo-metrics span, #produto .demo-row, #produto .demo-status { font-size: 9px; }
  #produto .demo-metrics strong { font-size: 12px; }
  #produto .demo-row { padding: 6px; }
  #produto .demo-flow li { font-size: 9px; padding-top: 5px; }
  #produto .demo-request { padding: 8px; }
  #produto .demo-request h5 { margin: 4px 0 8px; font-size: 12px; }
  #produto .demo-request > div, #produto .demo-request p { font-size: 9px; }
  #produto .demo-finance { padding: 8px; margin-bottom: 6px; }
  #produto .demo-finance strong { margin-top: 3px; font-size: 18px; }
  #produto .demo-finance span, #produto .demo-finance p { font-size: 9px; }
  #produto .demo-gps { padding: 8px; gap: 8px; }
  #produto .demo-gps p, #produto .demo-gps strong { font-size: 9px; }

  /* Celular do colaborador */
  #produto .demo-phone-column { display: flex; justify-content: center; padding: 4px 0 10px; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9) 0 34%, rgba(150, 236, 196, .45) 35% 36%, rgba(150, 236, 196, .18) 37% 58%, transparent 59%); }
  #produto .demo-handset { width: clamp(176px, 52vw, 206px); border-width: 6px; border-radius: 30px; transform: none; box-shadow: 0 0 0 1px #9fd7bd, 0 18px 34px rgba(5, 60, 44, .3); }
  #produto .demo-handset-speaker { top: 7px; width: 52px; height: 13px; }
  #produto .demo-handset-header { padding: 26px 12px 14px; }
  #produto .demo-handset-header h5 { margin: 8px 0 5px; font-size: 16px; }
  #produto .demo-handset-header > span, #produto .demo-handset-header small { font-size: 8.5px; }
  #produto .demo-handset-body { padding: 9px; }
  #produto .demo-handset-main { padding: 9px; }
  #produto .demo-handset-main strong { margin: 5px 0; font-size: 18px; }
  #produto .demo-handset-main small, #produto .demo-handset-main > span, #produto .demo-handset-list > div, #produto [data-phone-feedback] { font-size: 9px; }
  #produto .demo-handset-list { margin: 6px 0; }
  #produto .demo-handset-list > div { padding: 6px 0 6px 12px; }
  #produto .demo-phone-action { min-height: 32px; padding: 7px; font-size: 10px; }
  #produto [data-phone-feedback] { min-height: 0; margin-top: 6px; }

  /* Pontos e legenda */
  #produto .demo-m-dots { display: flex; justify-content: center; gap: 4px; margin: 18px 0 20px; }
  #produto .demo-m-dots button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
  #produto .demo-m-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c6e6d6; transition: background .2s ease; }
  #produto .demo-m-dots button[aria-pressed="true"]::before { background: #12a067; box-shadow: 0 0 0 3px rgba(18, 160, 103, .18); }
  #produto .demo-m-dots button:focus-visible { outline: 2px solid #0f9466; border-radius: 50%; }
  #produto .demo-frame[data-view="gestor"] .demo-m-note[data-note="gestor"],
  #produto .demo-frame[data-view="colaborador"] .demo-m-note[data-note="colaborador"] { display: flex; }
  #produto .demo-m-note { align-items: center; gap: 16px; margin: 0 6px; }
  #produto .demo-m-note-icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(145deg, #e6f8ee, #d2f1e1); box-shadow: 0 6px 14px rgba(16, 104, 74, .12), inset 0 1px #fff; color: #0b6a4b; }
  #produto .demo-m-note-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  #produto .demo-m-note strong { display: block; color: #0b2a2c; font-size: clamp(16px, 4.6vw, 18px); font-weight: 850; letter-spacing: -.03em; }
  #produto .demo-m-note p { margin: 4px 0 0; color: #3f5a5e; font-size: clamp(13px, 3.7vw, 14.5px); line-height: 1.45; }
}

/* O produto no celular sobre o fundo verde-escuro original da seção: só cores, com a mesma paleta do desktop. */
@media (max-width: 700px) {
  #produto .demo-m-kicker { color: #94ebc6; }
  #produto .demo-m-kicker::before { background: #65e4b5; }
  #produto .demo-m-title { color: #f3fff7; }
  #produto .demo-m-title span { color: #72e2b8; }
  #produto .demo-m-sub { color: #c5e6d9; }
  #produto .demo-view-switch { border-color: #a6f8d84a; box-shadow: 0 10px 24px rgba(0, 20, 16, .28), inset 0 1px #fff; }
  #produto .demo-workspace { border-color: #021512; box-shadow: 0 0 0 1px #91d4ba40, 0 18px 34px rgba(0, 20, 16, .4); }
  #produto .demo-phone-column { background: radial-gradient(circle at 50% 50%, rgba(97, 229, 176, .2) 0 34%, rgba(166, 248, 216, .16) 35% 36%, rgba(24, 92, 76, .5) 37% 58%, transparent 59%); }
  #produto .demo-handset { box-shadow: 0 0 0 1px #98d0b6, 0 18px 34px rgba(0, 20, 16, .45); }
  #produto .demo-m-dots button::before { background: rgba(196, 230, 217, .35); }
  #produto .demo-m-dots button[aria-pressed="true"]::before { background: #61e5b0; box-shadow: 0 0 0 3px rgba(97, 229, 176, .22); }
  #produto .demo-m-dots button:focus-visible, #produto .demo-m-arrow:focus-visible, #produto .demo-view-switch button:focus-visible { outline-color: #a6f8d8; }
  #produto .demo-m-note-icon { background: #d5ffe91a; border: 1px solid #a6f8d84a; box-shadow: inset 0 1px #eafff01c; color: #94ebc6; }
  #produto .demo-m-note strong { color: #f3fff7; }
  #produto .demo-m-note p { color: #c5e6d9; }
}