/* =========================================================
   UP Educacao - Design System
   Tokens de tipografia/espacamento/raio: arquivos *-DESIGN.md
   Paleta institucional: HTML Open (laranja sobre base escura)
   ========================================================= */

:root{
  /* --- Cor (institucional Open) --- */
  --ink:        #0e0c0b;
  --ink-2:      #141110;
  --surface:    #1a1613;
  --surface-2:  #211b17;
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.16);

  --brand:      #ff5e29;
  --brand-2:    #ff7d4f;
  --brand-deep: #d13f11;
  --brand-soft: rgba(255,94,41,.12);

  --txt:        #f7f3f1;
  --muted:      #ada5a0;
  --dim:        #7b736e;

  /* --- Tipografia (Montserrat + Open Sans) --- */
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;

  /* --- Espacamento (space-1..space-10) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 30px; --s-8: 40px; --s-9: 66px; --s-10: 70px;

  /* --- Raios --- */
  --r-1: 6px; --r-2: 12px; --r-3: 16px; --r-4: 20px; --r-pill: 99px;

  --wrap: 1160px;
  --section: clamp(64px, 8vw, 110px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--ink);
  color:var(--txt);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Brilho ambiente - superficie plana, sem sombras (evidencia dos tokens) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(255,94,41,.10), transparent 60%),
    radial-gradient(760px 560px at -8% 38%, rgba(255,94,41,.05), transparent 55%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.14; letter-spacing:-.015em; }
h1{ font-size:clamp(38px, 5.4vw, 66px); }
h2{ font-size:clamp(28px, 3.6vw, 44px); }
h3{ font-size:clamp(20px, 2vw, 26px); }
p{ color:var(--muted); }
strong{ color:var(--txt); font-weight:600; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--s-6); position:relative; z-index:2; }
.section{ padding:var(--section) 0; }
.section--line{ border-top:1px solid var(--line); }
.brand-c{ color:var(--brand); }
.center{ text-align:center; }
.lead{ font-size:clamp(16px,1.35vw,19px); line-height:1.75; max-width:64ch; }
.narrow{ max-width:760px; }
.mt-6{ margin-top:var(--s-6); }
.mt-8{ margin-top:var(--s-8); }

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--font-head);
  font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--s-5);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.eyebrow.is-center{ justify-content:center; }

/* ---------- Botoes ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-head); font-size:14px; font-weight:700; letter-spacing:.01em;
  padding:15px 28px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ transform:scale(1.015); }
.btn--primary{ background:var(--brand); color:#180a04; }
.btn--primary:hover{ background:var(--brand-2); }
.btn--ghost{ border-color:var(--line-2); color:var(--txt); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn--block{ width:100%; }
.btn--sm{ padding:11px 20px; font-size:13px; }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,12,11,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:var(--s-6); }
.logo{ display:inline-flex; flex-direction:column; line-height:1; font-family:var(--font-head); }
.logo b{ font-weight:800; font-size:22px; letter-spacing:-.02em; }
.logo b span{ color:var(--brand); }
.logo small{ font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-top:5px; }

.nav{ display:flex; align-items:center; gap:var(--s-7); }
.nav a{
  font-family:var(--font-head); font-size:13px; font-weight:500; color:var(--muted);
  padding:6px 0; border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease;
}
.nav a:hover{ color:var(--txt); }
.nav a.is-active{ color:var(--txt); border-bottom-color:var(--brand); }

/* Link para a plataforma (app.openmatcon.com.br).
   Fica visualmente separado dos itens do site: quem procura o app
   encontra, mas ele nao compete com a navegacao institucional. */
.nav__app{
  position:relative;
  padding-left:var(--s-6) !important;
  color:var(--dim) !important;
  white-space:nowrap;
}
.nav__app::before{
  content:""; position:absolute; left:0; top:50%;
  width:1px; height:14px; margin-top:-7px;
  background:var(--line-2);
}
.nav__app:hover{ color:var(--txt) !important; }
/* Faixa em que a barra horizontal fica apertada (o menu sanduiche
   so entra em 900px): escondemos o link do app apenas aqui. Abaixo
   de 900px ele volta, ja dentro do menu sanduiche, que tem espaco. */
@media (min-width:901px) and (max-width:1180px){
  .nav__app{ display:none; }
}
@media (max-width:900px){
  .nav__app{ padding-left:0 !important; }
  .nav__app::before{ display:none; }
}
/* Botao do menu: mais respiro e corpo maior.
   O texto escuro sobre o laranja da marca da 6,35:1 (passa no WCAG AA);
   branco sobre o mesmo laranja daria so 3,05:1 e reprovaria. */
.nav .btn{
  color:#180a04;
  padding:13px 26px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
}
.nav .btn:hover{ color:#180a04; }

.burger{ display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r-1); width:44px; height:44px; cursor:pointer; }
.burger span{ display:block; width:18px; height:1.5px; background:var(--txt); margin:3.5px auto; }

@media (max-width:900px){
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line); padding:var(--s-5) var(--s-6) var(--s-7);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .nav a.is-active{ color:var(--brand); border-bottom-color:var(--line); }
  .nav .btn{ margin-top:var(--s-5); }
  .burger{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding:clamp(56px,7vw,96px) 0 clamp(52px,6vw,80px); }

/* Hero de tela cheia (home): cabe em uma tela, com o CTA visivel sem rolar */
.hero--cover{
  position:relative; overflow:hidden;
  min-height:calc(100svh - 74px);
  display:flex; align-items:center;
  padding:clamp(32px,5vh,64px) 0;
}
.hero--cover .hero__content{ max-width:940px; }
.hero--cover h1{
  font-size:clamp(30px, min(4.4vw, 6.4vh), 52px);
  margin-bottom:var(--s-5);
}
.hero--cover .lead{
  font-size:clamp(15px, min(1.15vw, 2.1vh), 18px);
  max-width:58ch; margin-bottom:var(--s-7);
}
.hero--cover .eyebrow{ margin-bottom:var(--s-4); }

/* Camada da imagem de fundo */
.hero__bg{ position:absolute; inset:0; z-index:0; background:var(--ink); }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(14,12,11,.94) 0%, rgba(14,12,11,.72) 46%, rgba(14,12,11,.35) 100%),
    linear-gradient(to top, rgba(14,12,11,.95), rgba(14,12,11,0) 45%);
}

.hero__stats{
  display:flex; flex-wrap:wrap; gap:var(--s-5) var(--s-8);
  margin-top:clamp(28px,4.5vh,var(--s-8));
  padding-top:clamp(20px,3vh,var(--s-6));
  border-top:1px solid var(--line);
}
.hero__stats li{ font-size:13px; color:var(--muted); display:flex; align-items:baseline; gap:8px; }
.hero__stats b{
  font-family:var(--font-head); font-weight:800; font-size:clamp(18px,2vh,22px);
  color:var(--brand); letter-spacing:-.02em;
}

/* Telas pequenas: comprime a hero para o CTA continuar acima da dobra */
@media (max-width:640px){
  .hero--cover{ padding:var(--s-7) 0; }
  .hero--cover .eyebrow{ font-size:10px; letter-spacing:.18em; margin-bottom:var(--s-3); }
  .hero--cover h1{ font-size:clamp(26px,7.2vw,34px); }
  .hero--cover .lead{ font-size:15px; line-height:1.6; margin-bottom:var(--s-6); }
  .hero--cover .hero__actions{ gap:12px; }
  .hero--cover .hero__actions .btn{ flex:1 1 100%; }
  .hero__stats{ gap:12px var(--s-6); margin-top:var(--s-6); padding-top:var(--s-5); }
  .hero__stats li{ font-size:12px; }
  .hero__stats b{ font-size:17px; }
}
.hero__grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1{ margin-bottom:var(--s-6); }
.hero .lead{ margin-bottom:var(--s-8); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; }
.hero__note{ font-size:13px; color:var(--dim); margin-top:var(--s-5); }
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; } }

.checklist{ display:grid; gap:var(--s-3); margin:var(--s-7) 0 var(--s-8); }
.checklist li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:15px; }
.checklist li::before{
  content:"+"; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand);
  font-size:12px; display:grid; place-items:center; margin-top:3px;
}

/* ---------- Cards ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-4); padding:clamp(24px,3vw,var(--s-8));
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--s-7); transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--line-2); background:var(--surface-2); transform:scale(1.01); }
.card h3{ margin-bottom:var(--s-3); }
.card p{ font-size:15px; }
.card__num{
  font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:.2em;
  color:var(--brand); display:block; margin-bottom:var(--s-4);
}
.card__tag{
  display:inline-block; font-family:var(--font-head); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
  background:var(--brand-soft); border-radius:var(--r-pill); padding:6px 14px; margin-bottom:var(--s-5);
}
.card__list{ display:grid; gap:10px; margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line); }
.card__list li{ font-size:14px; color:var(--muted); padding-left:16px; position:relative; }
.card__list li::before{ content:"\2014"; position:absolute; left:0; color:var(--brand); }

.grid{ display:grid; gap:var(--s-5); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.section__head{ max-width:800px; margin-bottom:clamp(36px,4vw,var(--s-9)); }
.section__head.is-center{ margin-left:auto; margin-right:auto; text-align:center; }
.section__head p{ margin-top:var(--s-5); font-size:17px; }

/* ---------- Numeros ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-4); overflow:hidden; }
.stats div{ background:var(--ink-2); padding:var(--s-7) var(--s-6); text-align:center; }
.stats b{ display:block; font-family:var(--font-head); font-size:clamp(28px,3.4vw,40px); font-weight:800; color:var(--brand); letter-spacing:-.02em; }
.stats span{ display:block; font-size:13px; color:var(--muted); margin-top:8px; }
@media (max-width:700px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Cases ---------- */
.case{ display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-7); }
.case__metric{ font-family:var(--font-head); font-size:clamp(24px,2.6vw,32px); font-weight:800; color:var(--brand); letter-spacing:-.02em; line-height:1.1; }
.case__metric small{ display:block; font-family:var(--font-body); font-size:13px; font-weight:400; color:var(--dim); letter-spacing:0; margin-top:8px; }
.case blockquote{ font-size:16px; line-height:1.7; color:var(--txt); }
.case__who{ display:flex; align-items:center; gap:12px; padding-top:var(--s-5); border-top:1px solid var(--line); }
.case__who b{ display:block; font-family:var(--font-head); font-size:14px; }
.case__who span{ display:block; font-size:13px; color:var(--dim); }
.avatar{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:14px; }

/* ---------- Etapas ---------- */
.steps{ display:grid; gap:var(--s-5); }
.step{ display:grid; grid-template-columns:70px 1fr; gap:var(--s-6); align-items:start;
  border-top:1px solid var(--line); padding-top:var(--s-6); }
.step__n{ font-family:var(--font-head); font-size:13px; font-weight:700; letter-spacing:.18em; color:var(--brand); padding-top:5px; }
.step h3{ margin-bottom:10px; }
@media (max-width:640px){ .step{ grid-template-columns:1fr; gap:var(--s-3); } }

/* ---------- Faixa CTA ---------- */
.cta{
  border:1px solid var(--line-2); border-radius:var(--r-4);
  background:linear-gradient(135deg, rgba(255,94,41,.14), rgba(255,94,41,.03) 55%, transparent);
  padding:clamp(32px,4.5vw,var(--s-10)); text-align:center;
}
.cta h2{ margin-bottom:var(--s-5); }
.cta p{ margin:0 auto var(--s-8); max-width:60ch; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:center; }

/* ---------- Formulario ---------- */
.form{ display:grid; gap:var(--s-5); }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--font-head); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-2);
  color:var(--txt); font-family:var(--font-body); font-size:15px; padding:14px var(--s-4);
  transition:border-color .18s ease;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); }
.field input::placeholder,.field textarea::placeholder{ color:var(--dim); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
/* iOS Safari da zoom sozinho ao focar campo com fonte < 16px. */
@media (max-width:640px){
  .field input,.field select,.field textarea{ font-size:16px; }
}
.form__note{ font-size:12px; color:var(--dim); }
.form__ok{ display:none; border:1px solid var(--brand); background:var(--brand-soft); color:var(--txt);
  border-radius:var(--r-2); padding:var(--s-4) var(--s-5); font-size:14px; }
.form__ok.is-visible{ display:block; }

/* ---------- Contato ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4vw,var(--s-9)); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ display:grid; gap:var(--s-5); margin-top:var(--s-8); }
.contact-list li{ border-top:1px solid var(--line); padding-top:var(--s-5); }
.contact-list b{ display:block; font-family:var(--font-head); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.contact-list a,.contact-list p{ color:var(--txt); font-size:16px; }
.contact-list a:hover{ color:var(--brand); }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:var(--s-3); }
.faq details{ border:1px solid var(--line); border-radius:var(--r-2); background:var(--surface); }
.faq summary{ cursor:pointer; list-style:none; padding:var(--s-5) var(--s-6); display:flex; justify-content:space-between; gap:var(--s-5);
  font-family:var(--font-head); font-weight:600; font-size:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--brand); font-size:20px; line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ padding:0 var(--s-6) var(--s-6); font-size:15px; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); background:var(--ink-2); padding:var(--s-10) 0 var(--s-7); margin-top:var(--section); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-8); }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:var(--s-5); }
.footer li{ margin-bottom:12px; }
.footer li a{ font-size:14px; color:var(--muted); }
.footer li a:hover{ color:var(--brand); }
.footer__about{ font-size:14px; margin-top:var(--s-5); max-width:38ch; }
.footer__bottom{ border-top:1px solid var(--line); margin-top:var(--s-9); padding-top:var(--s-6);
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; font-size:13px; color:var(--dim); }

/* =========================================================
   BLOCOS DE MIDIA E RESPIRO
   ========================================================= */

/* ---------- Slot de imagem ----------
   Para usar uma imagem real, troque o <span class="media__hint">
   por: <img src="assets/img/arquivo.jpg" alt="descricao">
------------------------------------------------------------ */
.media{
  position:relative; overflow:hidden;
  border-radius:var(--r-4); border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,94,41,.10), transparent 55%),
    var(--surface);
  aspect-ratio:16 / 9;
  display:grid; place-items:center;
}
.media img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.media--4x3{ aspect-ratio:4 / 3; }
.media--1x1{ aspect-ratio:1 / 1; }
.media--3x4{ aspect-ratio:3 / 4; }
.media--21x9{ aspect-ratio:21 / 9; }
.media--tall{ aspect-ratio:5 / 7; }

.media__hint{
  display:grid; gap:10px; justify-items:center; text-align:center;
  padding:var(--s-6); max-width:34ch;
}
.media__hint::before{
  content:""; width:44px; height:44px; border-radius:var(--r-2);
  border:1px solid var(--line-2); background:var(--brand-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5e29' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M20.5 15.5l-4.5-4.5L5 19.5'/%3E%3C/svg%3E");
  background-size:22px 22px; background-position:center; background-repeat:no-repeat;
  opacity:.9;
}
.media__hint b{
  font-family:var(--font-head); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.media__hint span{ font-size:13px; color:var(--dim); line-height:1.5; }

.media-caption{ font-size:13px; color:var(--dim); margin-top:var(--s-4); }

/* ---------- Faixa de imagem larga (full-bleed) ---------- */
.band{ padding:0; }
.band .media{ border-radius:0; border-left:0; border-right:0; }
.band__inner{ position:relative; }
.band__over{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(24px,4vw,var(--s-9));
  background:linear-gradient(to top, rgba(14,12,11,.92), rgba(14,12,11,0));
}
.band__over h3{ margin-bottom:8px; }
.band__over p{ max-width:60ch; font-size:15px; }

/* ---------- Split de imagem + texto ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,var(--s-9)); align-items:center; }
.split--wide-media{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.split--wide-text{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
@media (max-width:900px){
  .split,.split--wide-media,.split--wide-text{ grid-template-columns:1fr; }
  .split__media-first{ order:-1; }
}

/* ---------- Galeria ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-5); }
.gallery--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.gallery--mosaic{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); }
@media (max-width:900px){ .gallery,.gallery--mosaic{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery,.gallery--2,.gallery--mosaic{ grid-template-columns:1fr; } }
.gallery figure{ display:grid; gap:12px; }
.gallery figcaption{ font-size:13px; color:var(--dim); }

/* ---------- Secao de respiro ---------- */
.breather{
  padding:clamp(80px,12vw,170px) 0;
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.breather--plain{ border:0; }
.breather__mark{
  width:1px; height:clamp(40px,6vw,70px); margin:0 auto var(--s-8);
  background:linear-gradient(to bottom, transparent, var(--brand));
}
.breather p{
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(22px,3.1vw,38px); line-height:1.35; letter-spacing:-.015em;
  color:var(--txt); max-width:22ch; margin:0 auto;
}
.breather cite{
  display:block; font-family:var(--font-body); font-style:normal;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin-top:var(--s-8);
}
.breather__sub{ font-family:var(--font-body)!important; font-weight:400!important;
  font-size:17px!important; color:var(--muted)!important; max-width:60ch!important; margin-top:var(--s-6)!important; }

/* ---------- Espacadores ---------- */
.spacer{ height:clamp(48px,7vw,96px); }
.spacer--lg{ height:clamp(80px,11vw,150px); }
.rule{ height:1px; background:var(--line); }

/* ---------- Mural de logos ----------
   Logos COLORIDOS (decisao da lideranca). Como quase todo logo do setor
   tem arte escura, a celula tem de ser clara: logo colorido nao le sobre
   fundo escuro. Por isso o mural e a unica faixa clara do site. */
.logo-wall{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px;
  background:rgba(255,255,255,.14); border:1px solid var(--line-2);
  border-radius:var(--r-4); overflow:hidden;
}
@media (max-width:900px){ .logo-wall{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:640px){ .logo-wall{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:420px){ .logo-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.logo-wall div{
  background:#f4f2f0; aspect-ratio:2 / 1;
  display:grid; place-items:center; padding:var(--s-4) var(--s-4);
  transition:background .2s ease;
}
.logo-wall div:hover{ background:#fff; }
.logo-wall img{
  width:auto; height:auto;
  max-width:84%; max-height:50px;
  object-fit:contain;
}
@media (max-width:900px){ .logo-wall img{ max-height:42px; } }

/* ---------- Retratos (time / depoimentos) ---------- */
.people{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-6); }
@media (max-width:900px){ .people{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .people{ grid-template-columns:1fr; } }
.person figure{ margin-bottom:var(--s-5); }
.person .media{ border-radius:var(--r-3); }
.person b{ display:block; font-family:var(--font-head); font-size:16px; font-weight:700; }
.person span{ display:block; font-size:13px; color:var(--brand); margin-top:4px; }
.person p{ font-size:14px; margin-top:10px; }

/* ---------- Reveal ----------
   Progressive enhancement: o conteudo so e escondido quando o JS
   confirma que vai anima-lo (html.reveal-on). Sem JS, tudo aparece. */
.reveal-on .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal-on .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal-on .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .btn:hover,.card:hover{ transform:none; }
}

/* =========================================================
   POLIMENTO MOBILE (<= 560px)
   ========================================================= */
@media (max-width:560px){
  :root{ --section:clamp(48px,11vw,68px); }

  .wrap{ padding:0 var(--s-5); }

  h1{ font-size:clamp(30px,8.5vw,40px); }
  h2{ font-size:clamp(24px,6.6vw,30px); }
  h3{ font-size:clamp(19px,5vw,22px); }
  .lead{ font-size:16px; }
  .section__head p{ font-size:16px; }

  /* CTAs ocupam a largura toda e ficam faceis de tocar */
  .hero__actions,.cta__actions{ width:100%; }
  .hero__actions .btn,.cta__actions .btn{ width:100%; }
  .btn{ padding:16px 24px; }

  /* Cartoes e paineis com respiro interno menor */
  .card{ padding:var(--s-6); }
  .panel{ padding:var(--s-6); }
  .cta{ padding:var(--s-7) var(--s-6); }

  /* Numeros: 2 colunas com leitura confortavel */
  .stats div{ padding:var(--s-6) var(--s-4); }
  .stats b{ font-size:clamp(26px,8vw,34px); }

  /* Faixa de imagem: overlay legivel em tela curta */
  .band .media{ aspect-ratio:16 / 10; }
  .band__over{ padding:var(--s-5); }
  .band__over h3{ font-size:20px; }
  .band__over p{ font-size:14px; }

  /* Passos e FAQ mais compactos */
  .faq summary{ padding:var(--s-4) var(--s-5); font-size:15px; }
  .step h3{ font-size:19px; }

  /* Rodape: uma coluna com divisores discretos */
  .footer{ padding:var(--s-8) 0 var(--s-6); }
  .footer__bottom{ flex-direction:column; gap:6px; text-align:left; }
}

/* Mural de logos: 3 colunas em telas medias, 2 no celular pequeno */
@media (max-width:400px){
  .logo-wall div{ padding:var(--s-5) var(--s-4); }
  .logo-wall img{ max-height:44px; }
}

/* =========================================================
   LOGO E MICROINTERACOES - componentes GLOBAIS
   Vivem aqui porque TODAS as paginas carregam style.css.
   O immersive.css e carregado so pela home - estilo de
   componente global nunca deve ficar la.
   ========================================================= */

/* =========================================================
   13. LOGO (imagem real, substitui o lockup em texto)
   ========================================================= */
.logo img{
  display:block; width:auto; height:46px;
  /* a arte ja e branca+laranja sobre transparencia.
     Abaixo de ~44px a palavra "MATCON" fica ilegivel. */
}
.logo--footer img{ height:52px; }
@media (max-width:560px){
  .logo img{ height:38px; }
  .logo--footer img{ height:44px; }
}

/* =========================================================
   MICROINTERACOES DE HOVER
   Mantem a estetica plana do site: nada de sombra cinza pesada,
   apenas um brilho sutil na cor da marca ao passar o mouse.
   (So em telas com mouse - hover:hover - para nao "colar" no toque.)
   ========================================================= */
@media (hover:hover){
  .btn{ transition:transform .18s ease, background .18s ease,
                    border-color .18s ease, color .18s ease, box-shadow .25s ease; }
  .btn--primary:hover{
    box-shadow:0 8px 30px rgba(255,94,41,.34);
    transform:translateY(-1px) scale(1.015);
  }
  .btn--ghost:hover{ box-shadow:0 0 0 1px rgba(255,94,41,.35) inset; }

  /* Cards e cinemagraphs: leve elevacao + borda de marca */
  .card{ transition:border-color .25s ease, background .25s ease,
                     transform .25s ease, box-shadow .25s ease; }
  .card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,94,41,.45);
    box-shadow:0 14px 40px rgba(0,0,0,.35);
  }

  .cinemagraph video,.cinemagraph img{ transition:transform .5s ease, box-shadow .3s ease; }
  .cinemagraph:hover video,.cinemagraph:hover img{
    transform:scale(1.02);
    box-shadow:0 22px 54px rgba(0,0,0,.5);
  }

  /* Fotos da secao de historia: zoom suave dentro da moldura */
  .story__media img{ transition:transform .6s cubic-bezier(.2,.7,.3,1); }
  .story__media:hover img{ transform:scale(1.04); }

  /* Logos dos clientes: acende ao passar o mouse (ja havia opacidade) */
  .logo-wall div{ transition:background .25s ease, transform .25s ease; }
  .logo-wall div:hover{ transform:translateY(-2px); }
}

@media (prefers-reduced-motion:reduce){
  .masktext__media{ /* nada a animar aqui alem do proprio video */ }
  .card:hover,.btn:hover,.cinemagraph:hover video,
  .cinemagraph:hover img,.story__media:hover img{ transform:none; }
}


/* Armadilha anti-robo do formulario.
   Fica fora da tela em vez de display:none - alguns robos ignoram
   campos escondidos por display, mas preenchem este. Pessoa nenhuma
   ve ou tabula ate ele (aria-hidden + tabindex="-1" no HTML). */
.campo-site{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

/* Rede de seguranca para o atributo hidden. O navegador ja esconde
   [hidden] por padrao, mas qualquer regra nossa que declare display
   passaria por cima disso sem querer. O app.js usa isso para sumir
   com a secao do Instagram quando o feed nao responde. */
[hidden]{ display:none !important; }

/* =========================================================
   REDES SOCIAIS
   O Instagram aparece em dois lugares: um icone discreto no
   cabecalho, para quem quer ir direto, e os dois perfis por
   extenso no rodape. Componentes globais - por isso moram
   aqui, e nao no immersive.css (que so a home carrega).
   ========================================================= */
.nav__social{
  display:inline-grid; place-items:center;
  width:36px; height:36px; flex:0 0 auto;
  border-radius:50%;
  color:var(--dim);
  border:1px solid transparent;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.nav__social svg{ width:19px; height:19px; display:block; }
.nav__social:hover,
.nav__social:focus-visible{
  color:var(--brand);
  border-color:var(--line);
  background:rgba(255,255,255,.04);
}

.footer__social{
  display:flex; flex-direction:column; gap:10px;
  margin-top:var(--s-5);
}
.footer__social a{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--dim); font-size:14px; text-decoration:none;
  transition:color .25s ease;
}
.footer__social a:hover{ color:var(--brand); }
.footer__social svg{ width:17px; height:17px; flex:0 0 auto; }

/* No menu sanduiche o icone sozinho fica orfao: ali ele ganha
   rotulo e vira mais um item da lista. */
@media (max-width:900px){
  /* inline-flex, e nao grid: com grid o icone e o rotulo virariam
     duas linhas empilhadas em vez de ficarem lado a lado. */
  .nav__social{
    display:inline-flex; align-items:center; gap:10px;
    width:auto; height:auto;
    border:0; border-radius:0; background:none;
  }
  .nav__social::after{
    content:"Instagram";
    font-family:var(--font-head); font-weight:600;
  }
}

/* =========================================================
   PAGINA DE OBRIGADO
   Um cartao centralizado, sem foto: depois de enviar o
   formulario a pessoa quer confirmacao e um proximo passo,
   nao mais uma pagina de venda.
   ========================================================= */
.obrigado__card{
  max-width:640px; margin-inline:auto; text-align:center;
  position:relative; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-4);
  padding:clamp(32px,5vw,52px) clamp(24px,5vw,56px);
}
/* Brilho verde no topo do cartao: a mesma cor do caminho de
   conversao, fechando o ciclo que comecou no botao. */
.obrigado__card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(ellipse at 50% 0%, rgba(37,211,102,.12), transparent 62%);
}
.obrigado__card > *{ position:relative; z-index:1; }

.obrigado__card h1{ font-size:clamp(28px,4.2vw,44px); margin-bottom:var(--s-4); }
.obrigado__card > p{ max-width:46ch; margin-inline:auto; }

.obrigado__selo{
  display:grid; place-items:center;
  width:60px; height:60px; margin:0 auto var(--s-5);
  border-radius:50%;
  color:var(--lead);
  background:rgba(37,211,102,.14);
  border:1px solid rgba(37,211,102,.40);
}
.obrigado__selo svg{ width:28px; height:28px; }

/* Proximos passos: alinhados a esquerda de proposito. Lista
   numerada centralizada e dificil de ler. */
.passos{
  display:grid; gap:var(--s-4);
  text-align:left; max-width:440px;
  margin:var(--s-8) auto 0;
  padding:var(--s-7) 0 0;
  border-top:1px solid var(--line);
  list-style:none; counter-reset:none;
}
.passos li{ display:flex; align-items:flex-start; gap:var(--s-3); }
.passos li span:last-child{ color:var(--muted); font-size:15px; line-height:1.6; }
.passos__num{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:24px; height:24px; margin-top:2px;
  border-radius:50%;
  font-family:var(--font-head); font-size:11px; font-weight:700;
  color:var(--brand);
  background:var(--brand-soft);
  border:1px solid rgba(255,94,41,.38);
}

.obrigado__label{
  margin-top:var(--s-8);
  font-family:var(--font-head);
  font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}

.obrigado__acoes{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--s-4); margin-top:var(--s-5);
}

.obrigado__fina{
  margin-top:var(--s-6);
  color:var(--dim); font-size:13px;
}


/* =========================================================
   BOTAO DE CONVERSAO (verde) - estilo da landing page

   Verde e reservado para UMA coisa: o caminho que gera lead.
   Ou o botao leva ao formulario, ou ele envia o formulario.
   Qualquer outro botao continua laranja - inclusive os
   primarios que levam a Solucoes ou Cases. Se o verde
   aparecesse em tudo, ele deixaria de destacar.

   Gradiente + texto branco + brilho, como na LP. Sobre o
   ponto mais claro do gradiente o branco da 2,28:1, abaixo
   dos 4,5:1 do WCAG AA. Foi uma escolha de marca, feita com
   o numero na mesa: o verde que passaria (#008a17) e bem
   mais fechado e perderia o brilho do original.
   ========================================================= */
:root{
  --lead:       #22c55e;   /* topo do gradiente */
  --lead-deep:  #12864a;   /* base do gradiente */
  --lead-2:     #2fd96d;   /* hover, topo */
  --lead-2deep: #16a05a;   /* hover, base */
}

.btn--lead{
  background:linear-gradient(135deg, var(--lead), var(--lead-deep));
  color:#fff;
  border-color:transparent;
  border-radius:var(--r-2);
  box-shadow:0 8px 24px -8px rgba(34,197,94,.55);
}
.btn--lead:hover{
  background:linear-gradient(135deg, var(--lead-2), var(--lead-2deep));
  color:#fff;
  box-shadow:0 12px 32px -6px rgba(34,197,94,.7);
  filter:brightness(1.04);
}
.btn--lead:focus-visible{
  outline:2px solid var(--lead-2);
  outline-offset:3px;
}
/* Qualquer icone dentro de um botao tem tamanho fixo e nao estica.
   Sem isto, num botao de largura total (btn--block) o SVG cresce
   ate ocupar o botao inteiro - a seta virava um cartaz. */
.btn svg{ width:18px; height:18px; flex:0 0 auto; }

/* A seta anda um pouco quando o mouse chega, como na LP. */
.btn--lead .seta{ transition:transform .25s ease; }
.btn--lead:hover .seta{ transform:translateX(4px); }

/* O botao do menu tem regra propria de cor (.nav .btn), que
   venceria por especificidade. Repetimos para o branco valer
   tambem no cabecalho. */
.nav .btn--lead,
.nav .btn--lead:hover{ color:#fff; }

/* =========================================================
   CAMPOS DO FORMULARIO - estilo da landing page
   Fundo mais fundo que o painel, borda quase invisivel em
   repouso e verde no foco. O campo deixa de ser uma caixa
   desenhada e vira um poco escuro dentro do cartao.
   ========================================================= */
.field input,
.field select,
.field textarea{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-2);
  padding:16px var(--s-5);
  font-size:15px;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.34); }

.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:rgba(255,255,255,.14); }

/* Foco em verde, com um halo suave - mesma familia do botao. */
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--lead);
  background:rgba(0,0,0,.36);
  box-shadow:0 0 0 3px rgba(34,197,94,.16);
}

/* Logo abaixo do botao, em versalete espacado, como na LP:
   uma linha curta que tira o peso do clique. */
.form__selo{
  text-align:center;
  font-family:var(--font-head);
  font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
  margin-top:var(--s-4);
}

/* O aviso de consentimento continua em corpo de leitura: e texto
   juridico, e versalete espacado de 10px o tornaria ilegivel. */
.form__note{
  text-align:center;
  font-size:12px; line-height:1.5;
  color:var(--dim);
  margin-top:var(--s-4);
}

/* Confirmacao de envio tambem em verde, nao em laranja.
   A regra original usa borda inteira + fundo, entao os dois
   precisam mudar juntos - so a cor da borda ficaria pela metade. */
.form__ok{
  border-color:var(--lead);
  background:rgba(34,197,94,.10);
}

/* =========================================================
   MURAL DE LOGOS - CORTE NO CELULAR
   So vale para o mural marcado com --corte (a home). Em
   cases.html o mural continua inteiro, que e o lugar certo
   para ver todos.

   A grade fica sempre cheia: 6 logos em 3 colunas (2 linhas)
   e 8 logos em 2 colunas (4 linhas). Nada de linha capenga.
   ========================================================= */
.logo-wall__mais{ display:none; }

@media (max-width:640px){
  .logo-wall--corte div:nth-child(n+7){ display:none; }
  .logo-wall__mais{
    display:block; text-align:center; margin-top:var(--s-6);
  }
}
@media (max-width:420px){
  .logo-wall--corte div:nth-child(n+7){ display:grid; }
  .logo-wall--corte div:nth-child(n+9){ display:none; }
}