/* Física SEDUC-CE 2026 — página de vendas · mobile-first, sem JS */
:root {
  --azul: #145aa0;          /* corfisica RGB 20,90,160 */
  --azul-escuro: #0d3d6e;
  --azul-claro: #eef3fa;
  --laranja: #f57c00;       /* CTA */
  --laranja-escuro: #e65100;
  --texto: #1c2733;
  --cinza: #5b6b7b;
  --borda: #dce4ee;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--texto);
  background: #fff;
}

img { max-width: 100%; height: auto; display: block; }

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(160deg, var(--azul-escuro), var(--azul) 60%, #1f6dbd);
  color: #fff;
  text-align: center;
  padding: 2.2rem 1.2rem 2.6rem;
}
.kicker {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #bcd6f2;
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: 1.7rem;
  line-height: 1.3;
  font-weight: 800;
  max-width: 720px;
  margin: 0 auto .9rem;
}
.hero h1 strong { color: #ffd27a; }
.sub {
  font-size: 1rem;
  color: #e3edf9;
  max-width: 680px;
  margin: 0 auto 1.6rem;
}
.capas {
  width: 100%;
  max-width: 520px;
  margin: 1.8rem auto 0;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* ---------- CTA ---------- */
.cta {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 1.4rem auto;
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, #ff9d2e, var(--laranja));
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  border-bottom: 4px solid var(--laranja-escuro);
  transition: transform .08s ease, filter .08s ease;
}
.cta:hover, .cta:focus { filter: brightness(1.06); transform: translateY(-1px); }
.cta.big { font-size: 1.3rem; padding: 1.15rem 1.2rem; }
.cta-note {
  font-size: .82rem;
  color: var(--cinza);
  text-align: center;
  margin: -0.7rem auto 0;
}
.hero .cta-note { color: #bcd6f2; }

/* ---------- BLOCOS ---------- */
.block {
  padding: 2.4rem 1.2rem;
  max-width: 760px;
  margin: 0 auto;
}
.block.alt { background: var(--azul-claro); }
h2 {
  color: var(--azul);
  font-size: 1.45rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* dor */
.dores { list-style: none; }
.dores li {
  padding: .55rem 0 .55rem 1.7rem;
  position: relative;
}
.dores li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: .6rem;
  color: #c0392b;
  font-weight: 800;
}
.punch {
  margin-top: 1.2rem;
  padding: .9rem 1rem;
  background: #fff4e5;
  border-left: 5px solid var(--laranja);
  border-radius: 6px;
  font-weight: 700;
}

/* solução */
.numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin: 1.2rem 0;
}
.numeros div {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .9rem .6rem;
  text-align: center;
}
.numeros strong {
  display: block;
  font-size: 1.9rem;
  color: var(--azul);
  line-height: 1.1;
}
.numeros span { font-size: .85rem; color: var(--cinza); }
.base { font-size: .95rem; }

/* o que recebe */
.item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--borda);
}
.item:last-of-type { border-bottom: none; }
.item img {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(13,61,110,.22);
}
.item h3 { color: var(--azul); font-size: 1.15rem; margin-bottom: .5rem; }
.item ul { padding-left: 1.2rem; }
.item li { margin-bottom: .45rem; font-size: .98rem; }
.item.bonus {
  background: #f2fbf4;
  border: 1px dashed #34a853;
  border-radius: 10px;
  padding: 1.1rem;
  margin-top: 1rem;
}
.item.bonus h3 { color: #1e7d3a; }

/* oferta */
.oferta { text-align: center; }
.tudo { margin-bottom: .6rem; }
.stack {
  list-style: none;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}
.stack li {
  padding: .5rem .2rem;
  border-bottom: 1px dashed var(--borda);
  font-size: .98rem;
}
s { color: #a33; }
.anchor { margin: .9rem 0 .2rem; color: var(--cinza); }
.preco { font-size: 1rem; }
.preco strong {
  font-size: 2.3rem;
  color: var(--azul);
}
.compara {
  font-size: .95rem;
  color: var(--cinza);
  margin-bottom: .4rem;
}
.urgencia {
  margin-top: 1.6rem;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 1.1rem;
  text-align: left;
}
.urgencia h3 { color: #c0392b; font-size: 1.05rem; margin-bottom: .5rem; }

/* garantia */
.block.alt .punch { background: #fff; }

/* FAQ */
details {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-bottom: .7rem;
  overflow: hidden;
}
summary {
  cursor: pointer;
  padding: .95rem 1rem;
  font-weight: 700;
  color: var(--azul-escuro);
  list-style: none;
  position: relative;
}
summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: .8rem;
  font-size: 1.3rem;
  color: var(--laranja);
}
details[open] summary::after { content: "–"; }
details p { padding: 0 1rem 1rem; font-size: .97rem; }

/* footer */
footer {
  background: var(--azul-escuro);
  color: #d7e4f4;
  text-align: center;
  padding: 2rem 1.2rem 2.4rem;
  font-size: .9rem;
}
footer .mini {
  font-size: .75rem;
  color: #9db8d6;
  margin-top: 1rem;
  line-height: 1.5;
}

/* ---------- DESKTOP ---------- */
@media (min-width: 700px) {
  body { font-size: 18px; }
  .hero h1 { font-size: 2.3rem; }
  .sub { font-size: 1.12rem; }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .item { flex-direction: row; align-items: flex-start; }
  .item img { flex: 0 0 240px; max-width: 240px; margin: 0; }
  .item.bonus { display: block; }
  .capas { max-width: 560px; }
}