/* NeoMacro BR · base: page-specific adjustments on top of the shared files. */

/* Hero fits in one screen: smaller headline, lines never wrap (the dot stays with "copia"),
   art capped so text and image sit side by side. */
.hero { padding-top: 112px; padding-bottom: 32px; gap: 0; }
.hero .display { font-size: clamp(2.3rem, 4.6vw, 4.8rem); line-height: .98; }
.hero .display .line > span { white-space: nowrap; }
.hero .lead { margin-top: 22px; font-size: clamp(1.08rem, min(1.5vw, 2.5vh), 1.4rem); max-width: 36em; }
.hero__actions { margin-top: 26px; }
.hero__grid { align-items: center; }
.hero__art { max-width: 560px; justify-self: end; width: 100%; }

/* Full-screen menu: keep the header (and its close button) above the menu while it is open,
   and give the menu's button back its own padding and letter-spacing. */
.menu-open .header { z-index: 130; transform: none; }
.menu .btn { padding: 1.05em 1.2em 1.05em 1.7em; font-size: 1rem; line-height: 1; letter-spacing: -.01em; }

@media (max-width: 1000px) {
  .hero .display { font-size: clamp(2.2rem, 8vw, 3.6rem); }
  .hero__art { justify-self: center; max-width: 440px; }
}

/* Formula: pill words always readable (they sit on a layer above all three pills),
   and the closing line stays on one line on desktop. */
.formula .mark__label text { paint-order: stroke; stroke: rgba(19, 30, 41, .18); stroke-width: 6px; stroke-linejoin: round; }
.formula__result { font-size: clamp(1.2rem, 2.4vw, 2.1rem); }


/* Quick check-up (v2 layout) sits right below the two doors of "Para quem". */
.signs-block { margin-top: clamp(80px, 10vw, 130px); }



/* Hero headline in Sora: "Seu negócio é único." / "Seu e-commerce" / "também deveria ser." ("único" in the logo gradient). */
.hero .display.hl { font-weight: 700; font-size: clamp(2.2rem, min(5.4vw, 8.6vh), 5.8rem); line-height: 1; letter-spacing: -.045em; }
/* the gradient word needs a little room on the right, or its last letter gets clipped */
.hero .display .grad { padding-right: .08em; margin-right: -.08em; }
@media (max-width: 1000px) {
  .hero .display.hl { font-size: clamp(2rem, min(7.6vw, 6vh), 3.4rem); }
}

/* Quick check-up, more compact: smaller question title, tighter spacing, narrower grid. */
.signs-block .title { font-size: clamp(1.9rem, 3.4vw, 3.1rem); margin-bottom: .3em; }
.signs-block .story__text { margin-bottom: 0; font-size: 1.02rem; }
.signs-block .signs { max-width: 980px; margin-top: 26px; gap: 12px; }
.signs-block .sign { padding: 16px 18px 17px; font-size: .95rem; }
.signs-block .signs__result { margin-top: 24px; }

/* Phones: the headline may wrap, and the art shrinks so text and buttons stay above the fold. */
@media (max-width: 640px) {
  .hero { padding-top: 96px; }
  .hero .display .line > span { white-space: normal; }
  .hero .display.hl { font-size: clamp(1.9rem, min(8.6vw, 5.4vh), 2.8rem); }
  .hero .lead { margin-top: 16px; }
  .hero__actions { margin-top: 20px; }
  .hero__art { max-width: 300px; }
}

/* Hero buttons side by side (as in the English version): slightly tighter so the longer Portuguese labels fit one row. */
.hero__actions { flex-wrap: nowrap; gap: 10px; }
.hero__actions .btn { padding: .95em 1em .95em 1.4em; font-size: .94rem; white-space: nowrap; }
@media (max-width: 640px) {
  .hero__actions { flex-wrap: wrap; }
}

/* Diagnóstico: centred subtitle */
.signs-block .story__text { margin-left: auto; margin-right: auto; }

/* Como trabalhamos: the line can be clicked or dragged with the mouse to move the dot back and forth */
.serve__track { cursor: pointer; touch-action: pan-y; }
.serve__track::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.serve__dot { cursor: grab; }
.serve-wrap.is-dragging .serve__dot { cursor: grabbing; }
.serve-wrap[data-manual] .serve__fill { width: calc(var(--mp) * 100%); transition: width .5s var(--ease); }
.serve-wrap[data-manual] .serve__dot { left: calc(var(--mp) * 100%); transition: left .5s var(--ease); }
.serve-wrap.is-dragging .serve__fill, .serve-wrap.is-dragging .serve__dot { transition: none; }

/* Footer without the "Mais NeoMacro" column: three columns instead of four. */
.footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------- Mobile pass ---------- */
@media (max-width: 1000px) {
  /* "O jeito NeoMacro": the two columns stack (a later desktop rule kept them side by side on phones),
     and the NeoMacro list goes to one column */
  .compare { grid-template-columns: 1fr; gap: 18px; }
  .compare__col--line { transform: none; opacity: 1; }
  .compare__col--chef ul { grid-template-columns: 1fr; row-gap: 18px; }
}
@media (max-width: 760px) {
  /* nothing may poke past the screen edge: otherwise phones zoom the whole page out (smaller text, header shifted) */
  main > section, .footer { overflow-x: clip; }
  .menu { overflow: hidden; }
  /* Fórmula: shorter scroll on phones, so the pills come together without a long empty stretch */
  .formula { height: 220vh; }
}

/* Language switcher: on phones the header has no room for logo + PT/EN/ES + menu button,
   so the switcher moves into the full-screen menu (below "Fale com a gente"). */
.lang--menu { display: none; }
@media (max-width: 640px) {
  .header .lang { display: none; }
  .lang--menu { display: inline-flex; align-self: flex-start; margin: 26px 0 0; background: rgba(255, 255, 255, .08); opacity: 0; transition: opacity .6s .6s; }
  .menu-open .lang--menu { opacity: 1; }
  .lang--menu button { color: #fff; font-size: .9rem; padding: .55em 1em; }
}
@media (max-width: 640px) { .header .burger { flex: none; margin-left: auto; } }
@media (max-width: 400px) {
  .logo__mark { height: 38px; }
  .logo__word img { height: 23px; }
}

/* ---------- Mobile hero: image first ----------
   On phones the brand art (three photo pills) used to sit below the fold, so the first screen was text only.
   Here it moves to the top, capped at about a quarter of the screen height, and the text
   below is tightened so headline + buttons still fit in the first screen. */
@media (max-width: 640px) {
  .hero { padding-top: 88px; padding-bottom: 24px; justify-content: flex-start; }
  .hero__grid { gap: 0; }
  /* art aligned right and bleeding off the edge: the dot leaves the frame, so it reads as photos, not as a
     second logo right under the header one */
  .hero__art { --aw: min(88vw, calc(22svh * 1.725)); order: -1; justify-self: end; width: var(--aw); max-width: none; margin: 0 calc(var(--aw) * -.3) 10px 0; }
  .hero .kicker { font-size: .66rem; }
  .hero .display.hl { margin-top: 10px; }
  .hero .lead { margin-top: 12px; font-size: .98rem; line-height: 1.5; }
  .hero__actions { margin-top: 18px; gap: 8px; }
  .hero__actions .btn { padding: .85em 1em .85em 1.3em; font-size: .9rem; }
}

/* ---------- Tudo incluso on phones ----------
   Store on top, the eight pieces in a tidy 2-column grid below it. base.js plays --m from 0 to 1 when the
   pieces come into view: each piece lights up and gets its check, the store fills with colour, then
   "Pedido aprovado" pops. Without JS --m stays 1 (everything connected). */
@media (max-width: 640px) {
  .plug__stage { padding: 80px 0 72px; }
  .plug__actions { gap: 12px 18px; }
  .plug__scene { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; }
  .plug__scene .shop { order: -1; grid-column: 1 / -1; height: 210px; margin-bottom: 10px; }
  .plug__col { display: contents; }
  .plug .pp {
    --a: clamp(0, calc((var(--m, 1) - var(--d)) / .2), 1);
    display: flex; justify-content: flex-start; gap: 10px; width: 100%; padding: .95em .9em; border-radius: 14px;
    white-space: normal; font-size: .84rem; line-height: 1.15; box-shadow: 0 8px 22px rgba(19, 30, 41, .07);
    opacity: calc(.38 + var(--a) * .62); transform: translateY(calc((1 - var(--a)) * 8px));
    transition: box-shadow .4s;
  }
  .plug .pp span { flex: 1; }
  .plug .pp i { transform: rotate(30deg) scale(calc(.7 + var(--a) * .3)); filter: grayscale(calc(1 - var(--a))); }
  .plug .pp--o i { transform: rotate(-30deg) scale(calc(.7 + var(--a) * .3)); }
  .plug .pp::after {
    display: grid; place-items: center; content: "\2713"; position: static; flex: none; width: 18px; height: 18px; margin: 0;
    border-radius: 50%; background: #2bb673; color: #fff; font: 700 11px/1 var(--display);
    transform: scale(var(--a)); opacity: var(--a);
  }
  .plug__scene .shop__hero { opacity: calc(.2 + var(--m, 1) * .8); }
  .plug .shop__toast--plug { --t: clamp(0, calc((var(--m, 1) - .84) / .1), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 14px)) scale(calc(.85 + var(--t) * .15)); }
}

/* ---------- Segmentos on phones ----------
   The 8 chips were a tall 4-row block of pills, so after choosing one you had to scroll to see the answer.
   Now all 8 stay visible as small buttons in a 2-column grid (~160px) and the answer panel sits right below.
   The mini store is hidden here: the "Tudo incluso" section just above already shows it. */
@media (max-width: 640px) {
  .seg { gap: 14px; }
  .seg__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .seg__chips button { justify-content: flex-start; gap: 8px; padding: .7em .7em .7em .75em; border-radius: 12px; font-size: .8rem; line-height: 1.1; text-align: left; }
  .seg__chips button::before { flex: none; width: 7px; height: 14px; }
  .seg__chips button:hover { transform: none; }
  .seg__panel { min-height: 0; padding: 22px 20px 24px; gap: 0; }
  .seg__mock { display: none; }
  .seg__copy h3 { font-size: 1.35rem; margin-bottom: .6em; }
  .seg__list { gap: 9px; margin-bottom: 20px; font-size: .95rem; }
}

/* ---------- Como trabalhamos on phones: compact cards (icon on the left, text on the right) ---------- */
@media (max-width: 640px) {
  .serve { gap: 10px; }
  .serve .serve__card { display: grid; grid-template-columns: 58px 1fr; column-gap: 16px; align-items: start; padding: 18px 18px 20px; }
  .serve__plate { grid-row: span 2; width: 58px; height: 58px; margin: 0; }
  .serve__plate .ico { width: 44px; height: 44px; }
  .serve__card.is-active .serve__plate { box-shadow: 0 0 0 5px rgba(255, 195, 0, .18); }
  .serve__num { right: 14px; top: 8px; font-size: 2.2rem; }
  .serve__card h3 { margin: 6px 0 .3em; padding-right: 48px; font-size: 1.12rem; }
  .serve__card p { font-size: .9rem; line-height: 1.45; }
}

/* ---------- Contato on phones: shorter, even form ----------
   Less space between intro and form, the same 16px inside the form on every side, Nome + Empresa side by
   side, slimmer fields and a full-width send button. */
@media (max-width: 640px) {
  .contact { gap: 26px; }
  .contact-sec .display { font-size: clamp(2.2rem, 10.4vw, 3rem); }
  .contact-sec .lead { margin-top: 16px; font-size: 1rem; }
  .contact__mail { margin-top: 14px; font-size: 1.1rem; }
  .form { gap: 10px; padding: 16px; border-radius: 22px; }
  .form__row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 1.5em .9em .5em; border-radius: 14px; }
  .field select { padding-right: 2.4em; text-overflow: ellipsis; }
  .field > span { left: .95em; top: .7em; font-size: .64rem; }
  .field textarea { min-height: 92px; }
  .check { font-size: .8rem; gap: 10px; padding: 2px 2px 0; }
  .check input { width: 18px; height: 18px; }
  .form .btn { justify-self: stretch; justify-content: space-between; margin-top: 4px; }
  .form__msg:empty { display: none; }
}

/* ---------- Footer on phones: shorter ----------
   Smaller logo, Navegue and Contato side by side (Navegue only as wide as its links), tighter spacing. */
@media (max-width: 640px) {
  .footer { padding: 52px 0 24px; font-size: .88rem; }
  .footer__top { grid-template-columns: auto 1fr; gap: 26px 34px; padding-bottom: 28px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__logo img { height: 32px; }
  .footer__brand p { margin-top: 12px; }
  .footer__h { margin-bottom: 12px; font-size: .68rem; }
  .footer__col { gap: 8px; min-width: 0; }
  .footer__col a { overflow-wrap: anywhere; }
  .footer__bottom { padding-top: 18px; font-size: .78rem; gap: 6px 18px; }
}

/* ---------- Spacing between sections on phones ----------
   Sections kept their 90px top + 90px bottom padding, so two of them stacked ~180px of empty paper. */
@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .plug .plug__stage { padding: 64px 0 24px; }
  .hero { min-height: 0; }
  .section__head { gap: 14px; margin-bottom: 26px; }
}

/* ---------- Sócios on phones: one tidy card per partner ----------
   The tall pill photo sat beside a long paragraph and the name floated above it. Now each partner is a white
   card: small pill photo with name + role beside it, and the bio below across the full width. */
@media (max-width: 640px) {
  .founders { gap: 12px; }
  .founder { grid-template-columns: 74px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 0; align-items: center; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(19, 30, 41, .06); }
  .founder > div { display: contents; }
  .founder .pill-photo { grid-row: 1 / span 2; width: 74px; height: 104px; }
  .founder h3 { grid-column: 2; align-self: end; margin: 0; font-size: 1.2rem; }
  .founder__role { grid-column: 2; align-self: start; margin: .55em 0 0; font-size: .68rem; line-height: 1.3; }
  .founder p:last-child { grid-column: 1 / -1; margin-top: 14px; font-size: .9rem; line-height: 1.55; }
}

/* ---------- Mobile hero: the whole N, big and edge to edge, text below (phones only; desktop keeps its layout) ----------
   The full logo mark, uncropped (three pills + dot), across the whole screen width, with the photos showing
   through each pill and drifting slowly. The text sits below it on the paper. */
@media (max-width: 640px) {
  .hero { padding-top: 88px; }
  .hero__grid { position: static; grid-template-columns: minmax(0, 1fr); }
  .hero__art {
    --aw: 100vw;
    position: relative; order: -1; justify-self: start; width: var(--aw); max-width: none; margin: 0 0 16px calc(var(--gutter) * -1); transform: none;
  }
  .hero__art .tint { opacity: .62; }
  .hero__art image { transform-box: fill-box; transform-origin: center; animation: hero-drift 16s ease-in-out infinite alternate; }
  .hero__art .mark__pill--o image { animation-duration: 19s; animation-direction: alternate-reverse; }
  .hero__art .mark__pill--r image { animation-duration: 22s; }
  .hero__copy { position: relative; z-index: 1; }
  .hero .kicker { margin-bottom: 1em; }
}
@keyframes hero-drift { from { transform: scale(1.08) translate(-2%, 2%); } to { transform: scale(1.18) translate(2%, -3%); } }
@media (prefers-reduced-motion: reduce) { .hero__art image { animation: none; } }


/* Logo do topo: sem o efeito de afastar as capsulas no hover (pedido do Alex, 2026-11-07) */
.header .logo:hover .logo__mark g { transform: none; }

/* Banner de cookies (Google Analytics/Ads so carrega depois do "Aceitar", ver base.js) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9992; max-width: 620px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: 22px; background: var(--ink); color: rgba(255, 255, 255, .86); box-shadow: 0 18px 50px rgba(19, 30, 41, .28); font-size: .9rem; line-height: 1.5; }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 300px; margin: 0; }
.consent a { color: var(--y); }
.consent__actions { display: flex; gap: 8px; margin-left: auto; }
.consent button { font: 600 .88rem/1 var(--display); padding: .85em 1.4em; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .35); background: none; color: #fff; cursor: pointer; }
.consent button[data-consent="granted"] { background: var(--y); border-color: var(--y); color: var(--ink); }
.consent button:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.link-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: color .3s; }
.link-btn:hover { color: #fff; }