/* MARKE — Auditoria de Performance · estilos específicos dos blocos novos.
   Reaproveita o sistema base (sections.css / quiz.css / faq-closing.css). */

/* ===== HERO — ajustes AP ===== */
.ap-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--crimson-hi);
  max-width: none;
}
.hero-actions .hero-micro { font-size: 13.5px; color: var(--ink-4); line-height: 1.4; max-width: 210px; }
.hero-cred {
  display: flex; align-items: center; gap: 14px; margin-top: 30px;
  font-size: 14.5px; color: var(--ink-3); max-width: 460px; line-height: 1.5;
}
.hero-cred .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; box-shadow: 0 0 0 4px rgba(117,189,173,0.15); }

/* ===== BLOCO 2 — logo strip ===== */
.ap-proofstrip { padding-block: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line-soft); }
.ap-proofstrip-label { text-align: center; margin-bottom: 26px; }

/* ===== BLOCO 3 — problema ===== */
.ap-problem-punch {
  margin-top: 30px; padding: 18px 22px; border-radius: 14px;
  background: rgba(200,68,94,0.08); border: 1px solid rgba(200,68,94,0.22);
  color: var(--ink); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; max-width: 520px;
  font-style: italic;
}

/* ===== BLOCO 4 — virada · pilares ===== */
.ap-pivot .ap-pillars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: clamp(34px, 4.5vw, 56px) 0; text-align: left;
}
@media (max-width: 900px) { .ap-pivot .ap-pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ap-pivot .ap-pillars { grid-template-columns: 1fr; } }
.ap-pillar {
  padding: 24px 22px 26px; position: relative; overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.ap-pillar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--crimson), var(--teal));
  transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease);
}
.ap-pillar:hover { transform: translateY(-4px); border-color: var(--line); background: var(--panel-2); }
.ap-pillar:hover::before { transform: scaleY(1); }
.ap-pillar-n {
  font-family: var(--display); font-weight: 300; font-size: 15px; color: var(--crimson-hi);
  letter-spacing: 0.1em; display: block; margin-bottom: 14px;
}
.ap-pillar-name { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.01em; margin-bottom: 10px; }
.ap-pillar-body { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.ap-pivot-punch { margin-top: 8px; }

/* ===== BLOCO 5 — entrega ===== */
.ap-deliver-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .ap-deliver-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.ap-deliver-card {
  padding: 32px 30px 34px; position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.ap-deliver-card:hover { transform: translateY(-6px); border-color: var(--line); background: var(--panel-2); }
.ap-deliver-top { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ap-deliver-n {
  font-family: var(--display); font-weight: 300; font-size: clamp(40px, 4vw, 54px);
  line-height: 1; color: var(--crimson-hi); flex: none;
}
.ap-deliver-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,68,94,0.4), transparent); }
.ap-deliver-name { font-family: var(--display); font-weight: 400; font-size: clamp(23px, 2.2vw, 29px); letter-spacing: -0.01em; margin-bottom: 12px; }
.ap-deliver-body { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.ap-deliver-close {
  margin-top: clamp(34px, 4vw, 48px); text-align: center;
}
.ap-deliver-close .line {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 2vw, 24px); color: var(--ink); letter-spacing: -0.01em; text-wrap: balance;
}

/* ===== BLOCO 6 — benchmark ===== */
.ap-benchmark { background: var(--bg-2); }
.ap-bench-head { display: grid; grid-template-columns: 1fr 0.95fr; gap: clamp(30px, 5vw, 80px); align-items: end; }
@media (max-width: 880px) { .ap-bench-head { grid-template-columns: 1fr; gap: 24px; align-items: start; } }
.ap-bench-title { margin-top: 22px; }
.ap-bench-copy { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.ap-bench-punch {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.8vw, 22px); color: var(--ink); line-height: 1.4; letter-spacing: -0.01em;
}
.ap-bench-stats { margin-top: clamp(40px, 5vw, 68px); }

/* ===== BLOCO 8 — como funciona ===== */
.ap-process { background: var(--bg-2); }
.ap-steps {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 20px; margin-top: clamp(20px, 3vw, 36px);
}
@media (max-width: 900px) { .ap-steps { grid-template-columns: 1fr; gap: 0; } }
.ap-steps-line, .ap-steps-fill {
  position: absolute; left: 6%; right: 6%; top: 26px; height: 2px; border-radius: 2px;
}
.ap-steps-line { background: linear-gradient(90deg, var(--crimson), var(--teal)); opacity: 0.14; }
.ap-steps-fill { background: linear-gradient(90deg, var(--crimson), var(--teal)); transform-origin: left; transform: scaleX(0); }
@media (max-width: 900px) {
  .ap-steps-line, .ap-steps-fill { left: 25px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; }
  .ap-steps-fill { transform-origin: top; }
}
.ap-step { position: relative; z-index: 1; padding-top: 4px; }
@media (max-width: 900px) {
  .ap-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; padding: 20px 0; align-items: start; }
}
.ap-step-node {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 300; font-size: 20px; color: var(--ink-3);
  background: var(--bg-3); border: 1px solid var(--line); box-shadow: 0 0 0 6px var(--bg-2);
  margin-bottom: 20px; transition: border-color 0.45s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
@media (max-width: 900px) { .ap-step-node { margin-bottom: 0; } }
.ap-step-node.reached { border-color: var(--crimson); color: var(--ink); box-shadow: 0 0 0 6px var(--bg-2), 0 8px 24px -12px rgba(200,68,94,0.55); }
.ap-step-name {
  font-family: var(--display); font-weight: 400; font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.01em; margin-bottom: 8px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.ap-step-dur {
  font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal); padding: 3px 9px; border: 1px solid rgba(117,189,173,0.3); border-radius: 100px;
}
.ap-step-body { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); max-width: 240px; }
@media (max-width: 900px) { .ap-step-body { max-width: 520px; } }
.ap-process-seal {
  display: inline-flex; align-items: center; gap: 12px; margin: clamp(40px, 5vw, 60px) auto 0;
  padding: 15px 26px; border-radius: 100px; background: rgba(200,68,94,0.09);
  border: 1px solid rgba(200,68,94,0.28); color: var(--ink); font-weight: 600; font-size: clamp(14px, 1.3vw, 16px);
  justify-content: center; width: fit-content;
}
.ap-process .ap-process-seal { display: flex; }
.ap-seal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); flex: none; box-shadow: 0 0 0 4px rgba(200,68,94,0.15); animation: pulse 2.4s infinite; }

/* ===== BLOCO 9 — para quem é / não é ===== */
.ap-fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 940px; margin-inline: auto; }
@media (max-width: 780px) { .ap-fit-cols { grid-template-columns: 1fr; } }
.ap-fit-col { padding: 30px 30px 32px; }
.ap-fit-col.is-yes { border-color: rgba(117,189,173,0.28); }
.ap-fit-col.is-no { border-color: rgba(200,68,94,0.24); }
.ap-fit-label {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.ap-fit-label.is-yes { color: var(--teal); }
.ap-fit-label.is-no { color: var(--crimson-hi); }
.ap-fit-list { display: flex; flex-direction: column; gap: 16px; }
.ap-fit-row { display: flex; align-items: flex-start; gap: 15px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.ap-fit-mark { width: 26px; height: 26px; flex: none; border-radius: 50%; position: relative; display: grid; place-items: center; margin-top: 1px; }
.ap-fit-mark.yes { background: rgba(117,189,173,0.14); border: 1.5px solid rgba(117,189,173,0.4); }
.ap-fit-mark.yes svg { width: 15px; height: 15px; }
.ap-fit-mark.no { border: 1.5px solid rgba(200,68,94,0.45); }
.ap-fit-mark.no::before, .ap-fit-mark.no::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; background: var(--crimson); }
.ap-fit-mark.no::before { transform: translate(-50%,-50%) rotate(45deg); }
.ap-fit-mark.no::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* ===== BLOCO 11 — form ===== */
.ap-form-micro { margin-top: 16px; font-size: 12.5px; color: var(--ink-4); line-height: 1.5; }
.ap-form .capture-grid { grid-template-columns: 1fr 1fr; }

/* =========================================================
   MOBILE HARDENING
   ========================================================= */

/* Grid children must be allowed to shrink below their content's intrinsic
   (min-content) width — otherwise a long word/label forces the whole grid
   wider than the viewport and, with body overflow-x hidden, the content gets
   clipped at the right edge ("estoura a largura"). */
.hero-grid > *,
.mirror-grid > *,
.ap-bench-head > *,
.fit-grid > *,
.faq-grid > * { min-width: 0; }

.hero-text, .hero-visual, .hero-audit { min-width: 0; max-width: 100%; }
.hero-h1, .hero-sub, .hero-audit-q, .quiz-q { overflow-wrap: break-word; }

/* Process — stack vertically at the SAME breakpoint the hero stacks (≤940),
   eliminating the 901–940 dead zone where it stayed as 5 cramped columns. */
@media (max-width: 940px) {
  .ap-steps { grid-template-columns: 1fr; gap: 0; }
  .ap-steps-line { left: 25px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; opacity: 0.22; }
  .ap-steps-fill { display: none; }
  .ap-step { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 18px; padding: 20px 0; align-items: start; }
  /* explicit placement: node in col1 (spanning), name + body stacked in the wide col2.
     Without this the body auto-places into the 52px column and gets crushed. */
  .ap-step-node { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .ap-step-name { grid-column: 2; grid-row: 1; margin-top: 12px; }
  .ap-step-body { grid-column: 2; grid-row: 2; max-width: 560px; }
}

/* Keep the floating stat badge from poking past the right edge once the hero
   visual spans the full width. */
@media (max-width: 940px) {
  .hero-float.f2 { right: 0; }
}

/* True phone widths — give the headline a comfortable, guaranteed-fitting size
   and drop the decorative floats. */
@media (max-width: 540px) {
  .hero-h1 { font-size: clamp(27px, 8.2vw, 40px); }
  .hero-sub { font-size: 16px; }
  .hero-actions { gap: 14px; }
  .hero-actions .hero-micro { max-width: none; }
  .hero-float { display: none; }
  .ap-pivot .ap-pillars { gap: 12px; }
}

/* our .ap-form .capture-grid rule outranks quiz.css's mobile stack (≤620) —
   re-stack the contact fields on phones at the same breakpoint. */
@media (max-width: 620px) {
  .ap-form .capture-grid { grid-template-columns: 1fr; }
}