/* ============================================================
   SBMKT — PÁGINAS INTERNAS (componentes de página)
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:var(--text-tertiary); margin-bottom:26px; text-transform:uppercase;
}
.breadcrumb a{ color:var(--text-tertiary); transition:color .2s; }
.breadcrumb a:hover{ color:var(--brand-accent); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--brand-accent); }

/* ---------- Page Hero ---------- */
.page-hero{
  position:relative; padding:170px 0 90px; overflow:hidden;
}
.page-hero .bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 70% at 75% 10%, rgba(135,2,8,0.35), transparent 62%),
    radial-gradient(ellipse 45% 45% at 8% 95%, rgba(255,204,0,0.07), transparent 60%),
    linear-gradient(180deg, #0B0C0F 0%, #0D0F14 60%, #0B0C0F 100%);
}
.page-hero .bg::after{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 65% 65% at 72% 25%, black 5%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 65% 65% at 72% 25%, black 5%, transparent 70%);
}
.page-hero .inner{ position:relative; z-index:2; max-width:840px; }
.page-hero h1{
  font-size:clamp(32px,4.6vw,56px); line-height:1.08; letter-spacing:-0.015em; margin-top:18px;
}
.page-hero h1 .accent{ color:var(--brand-accent); }
.page-hero p.lead{
  margin-top:24px; font-size:18px; line-height:1.6; color:var(--text-secondary); max-width:640px;
}
.page-hero .ctas{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:768px){ .page-hero{ padding:140px 0 64px; } }

/* ---------- Feature split (texto + visual) ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.feature.reverse > :first-child{ order:2; }
@media (max-width:900px){
  .feature{ grid-template-columns:1fr; gap:36px; }
  .feature.reverse > :first-child{ order:0; }
}
.feature h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.15; }
.feature .txt p{ color:var(--text-secondary); font-size:16.5px; margin-top:16px; }
.feature .txt p strong{ color:var(--text-primary); font-weight:600; }

.media-ph{
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  min-height:300px; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--surface), var(--bg-soft));
}
.media-ph span{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-tertiary);
}

/* ---------- Checklist (2 colunas) ---------- */
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 32px; }
@media (max-width:700px){ .check-grid{ grid-template-columns:1fr; } }
.check-grid li{
  display:flex; gap:12px; align-items:flex-start; font-size:15.5px;
  color:var(--text-secondary); line-height:1.5;
}
.check-grid li::before{
  content:"✓"; flex:none; width:20px; height:20px; margin-top:2px;
  border-radius:50%; background:rgba(255,204,0,0.12); color:var(--brand-accent);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}

/* ---------- Chips / pill lists ---------- */
.pill-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-cloud span{
  font-family:var(--font-mono); font-size:13px; color:var(--text-primary);
  border:1px solid var(--border-strong); padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,0.02);
}

/* ---------- Ciclo / fluxo horizontal ---------- */
.cycle{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 10px; }
.cycle .step{
  font-family:var(--font-mono); font-size:13.5px; color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:10px; padding:12px 18px;
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  position:relative;
}
.cycle .arr{ color:var(--brand-accent); font-size:16px; }
.cycle--funnel .step{ counter-increment:cstep; }
.cycle--funnel .step::before{
  content:counter(cstep,decimal-leading-zero) " "; color:var(--brand-accent); font-size:11px;
}

/* ---------- Filosofia (tipografia grande) ---------- */
.philosophy li{
  font-family:var(--font-display); font-weight:600; font-size:clamp(22px,3vw,34px);
  line-height:1.25; padding:26px 0; border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; gap:20px; letter-spacing:-0.01em;
}
.philosophy li:first-child{ border-top:1px solid var(--border); }
.philosophy li .idx{ font-family:var(--font-mono); font-size:13px; color:var(--brand-accent); font-weight:400; }
.philosophy li em{ font-style:normal; color:var(--text-secondary); }

/* ---------- Método timeline vertical ---------- */
.method{ max-width:720px; }
.method li{ position:relative; padding:0 0 34px 44px; }
.method li::before{
  content:""; position:absolute; left:9px; top:22px; bottom:-2px; width:1px;
  background:var(--border-strong);
}
.method li:last-child::before{ display:none; }
.method li::after{
  content:""; position:absolute; left:0; top:6px; width:19px; height:19px; border-radius:50%;
  background:var(--bg); border:2px solid var(--brand-accent);
}
.method li h3{ font-size:20px; }
.method li p{ margin-top:6px; font-size:15px; color:var(--text-secondary); }
.method li .st{ font-family:var(--font-mono); font-size:11.5px; color:var(--brand-accent); letter-spacing:.08em; }

/* ---------- FAQ ---------- */
.faq{ max-width:800px; counter-reset:faq; }
.faq-item{
  border-bottom:1px solid var(--border);
  transition:background .35s var(--ease);
}
.faq-item:first-child{ border-top:1px solid var(--border); }
.faq-item.is-open{ background:linear-gradient(90deg, rgba(255,204,0,0.06), rgba(255,204,0,0) 55%); }
.faq-q{
  width:100%; background:none; border:none; cursor:pointer;
  color:var(--text-secondary);
  display:flex; align-items:center; gap:18px;
  padding:22px 4px; text-align:left;
  font-family:var(--font-display); font-size:17.5px; font-weight:600;
  counter-increment:faq;
  transition:color .25s var(--ease);
}
.faq-q:hover{ color:var(--text-primary); }
.faq-q::before{
  content:"0" counter(faq);
  flex:none; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--text-tertiary);
  border:1px solid var(--border); border-radius:50%;
  transition:all .25s var(--ease);
}
.faq-q:hover::before{ color:var(--brand-accent); border-color:rgba(255,204,0,.45); box-shadow:0 0 12px rgba(255,204,0,.15); }
.faq-item.is-open .faq-q{ color:var(--brand-accent); }
.faq-item.is-open .faq-q::before{
  color:#0B0C0F; background:var(--brand-accent); border-color:var(--brand-accent);
  box-shadow:0 0 16px rgba(255,204,0,.35);
}
.faq-q svg{
  flex:none; margin-left:auto; width:13px; height:13px;
  padding:8px; box-sizing:content-box;
  background:var(--surface); border:1px solid var(--border); border-radius:50%;
  transition:transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.faq-item.is-open .faq-q svg{
  transform:rotate(180deg);
  background:#FF1744; border-color:#FF1744; color:#fff;
  box-shadow:0 0 14px rgba(255,23,68,.4);
}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p{
  position:relative;
  padding:2px 4px 24px 58px;
  color:var(--text-secondary); font-size:15.5px; line-height:1.65; margin:0; max-width:680px;
}
.faq-a p::before{
  content:""; position:absolute; left:17px; top:6px; bottom:14px; width:1px;
  background:linear-gradient(180deg, var(--brand-accent), rgba(255,204,0,0));
  opacity:.55;
}
@media (max-width:640px){
  .faq-q{ font-size:16px; gap:14px; padding:18px 2px; }
  .faq-q::before{ width:30px; height:30px; font-size:11.5px; }
  .faq-q svg{ padding:6px; }
  .faq-a p{ padding:2px 2px 20px 48px; }
}

/* ---------- Formulários ---------- */
.form-shell{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(26px,4vw,48px); max-width:860px; margin:0 auto;
}
.form-shell fieldset{ border:none; margin:0 0 34px; padding:0; }
.form-shell legend{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--brand-accent); margin-bottom:18px; padding:0;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:13.5px; font-weight:600; color:var(--text-primary); }
.field label .req{ color:var(--brand-accent); }
.field input,.field select,.field textarea{
  background:var(--bg-soft); border:1px solid var(--border-strong); border-radius:10px;
  padding:13px 15px; color:var(--text-primary); font-family:var(--font-body); font-size:15px;
  transition:border-color .2s, box-shadow .2s; width:100%;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-accent);
  box-shadow:0 0 0 3px rgba(255,204,0,0.12);
}
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%); background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form-note{ font-size:13px; color:var(--text-tertiary); margin-top:16px; line-height:1.5; }
.form-alert{
  display:none; margin-top:18px; padding:14px 18px; border-radius:10px; font-size:14px; line-height:1.55;
}
.form-alert.is-visible{ display:block; }
.form-alert.is-success{
  background:rgba(46,158,91,0.12); border:1px solid rgba(46,158,91,0.45); color:#9FE3BC;
}
.form-alert.is-error{
  background:rgba(255,23,68,0.10); border:1px solid rgba(255,23,68,0.5); color:#FFC9D2;
}
.form-alert a{ color:#FFCC00; text-decoration:underline; }
.form-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:8px; }

/* ---------- Related services ---------- */
.related-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.related-head h2{ font-size:clamp(22px,2.8vw,30px); }
.related-head span{ font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.1em; }
.soon{ font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); border:1px solid var(--border); padding:3px 9px; border-radius:999px; margin-left:auto; }
.service-card.is-disabled{ opacity:.55; }
.service-card.is-disabled:hover{ background:var(--surface); }