/* ==========================================================
   LP "Medicação (palestras)" — /contrate
   Usa os tokens e componentes do style.css (cores, .wrap, .wide,
   .head, .tag, .dm-title, .dm-btn, hero-*, sec-about-*).
   ========================================================== */

/* Etiqueta com acento: a Typewriter Inked não tem acentos */
.tag.tag-sans { font-family: var(--font); letter-spacing: 0; }

/* ---------- Seção 1 · Hero ---------- */
.lp-hero .hero-title { max-width: 620px; }
.lp-hero-text { margin-top: 26px; display: grid; gap: 14px; max-width: 590px; animation: hero-fadeUp 0.9s var(--ease) 0.8s both; }
.lp-hero-text p { font-size: 17px; line-height: 1.55; color: rgb(var(--bege-rgb) / 0.86); }
.lp-hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; animation: hero-fadeUp 0.9s var(--ease) 1s both; }
.lp-hero-ctas .dm-btn { padding: 20px 28px; }
.lp-cta-ghost { margin-top: 0; animation: none; }
.lp-hero .hero-crm i { margin-inline: 6px; }

/* Cartão sobre a foto do topo */
.lp-hero .hero-on-photo { background: rgb(var(--azul-rgb) / 0.55); }

/* ---------- Seção 2 · uma foto + cartão ---------- */
.lp-sentido-grid { margin-top: 50px; display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 30px; align-items: stretch; }
.lp-sentido-photo { position: relative; min-height: 460px; margin: 0; border-radius: 12px; overflow: hidden; }
.lp-sentido-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  padding: clamp(28px, 3.4vw, 50px);
  border-radius: 12px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.28);
}
.lp-sentido-text { display: grid; gap: 16px; font-size: 17px; line-height: 1.6; color: var(--text); }
.lp-highlight {
  display: grid; gap: 4px; padding: 24px 26px; border-radius: 8px;
  background: var(--azul); color: var(--bege);
  font-size: clamp(22px, 1.8vw, 30px); line-height: 1.25; letter-spacing: -0.01em;
}
.lp-highlight span:last-child { color: var(--areia); }

/* ---------- Seção 3 · livro ---------- */
.lp-livro { padding-top: 0; }
.lp-livro-card {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border-radius: 16px; background: var(--card);
}
.lp-livro-img {
  position: relative; margin: 0; min-height: 560px; display: grid; place-items: center; padding: clamp(28px, 4vw, 60px);
  background: radial-gradient(70% 60% at 50% 45%, rgb(255 255 255 / 0.7), transparent 70%), rgb(var(--areia-rgb) / 0.35);
}
.lp-livro-img img { width: min(100%, 380px); height: auto; border-radius: 4px; box-shadow: 0 40px 70px -30px rgb(var(--azul-rgb) / 0.55), 0 0 0 1px rgb(var(--azul-rgb) / 0.06); transform: rotate(-2deg); }
.lp-livro-body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(32px, 4vw, 64px); }
.lp-livro-body .dm-title { font-size: clamp(30px, 2.3vw, 42px); }
.lp-livro-text { margin-top: 22px; display: grid; gap: 14px; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.lp-lead { font-size: 19px; color: var(--azul); }
.lp-info { margin: 30px 0 0; width: 100%; display: grid; grid-template-columns: repeat(3, auto); gap: 10px; }
.lp-info div { padding: 14px 18px; border-radius: 8px; background: rgb(var(--bege-rgb) / 0.75); border: 1px solid var(--line); }
.lp-info dt { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lp-info dd { margin: 2px 0 0; font-size: 17px; color: var(--azul); }
.lp-info .lp-info-price { background: var(--azul); border-color: var(--azul); }
.lp-info .lp-info-price dt { color: rgb(var(--bege-rgb) / 0.6); }
.lp-info .lp-info-price dd { color: var(--bege); font-family: var(--font-mono); font-size: 20px; }
.lp-buy { margin-top: 28px; min-width: 240px; }

/* ---------- Seção 4 · dados ---------- */
.lp-data { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.lp-data-photo { position: relative; min-height: 490px; border-radius: 12px; overflow: hidden; color: var(--bege); display: flex; align-items: flex-end; }
.lp-data-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(var(--azul-rgb) / 0.92) 100%); }
.lp-data-photo-body { position: relative; z-index: 1; padding: 40px; width: 100%; }
.lp-data-photo-body h3 { font-size: clamp(22px, 1.7vw, 28px); line-height: 1.25; max-width: 440px; }
.lp-stat {
  margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; border-radius: 8px;
  background: rgb(var(--bege-rgb) / 0.1); border: 1px solid rgb(var(--bege-rgb) / 0.16); backdrop-filter: blur(10px);
}
.lp-stat strong { font-size: clamp(40px, 3.6vw, 58px); font-weight: 400; line-height: 1; color: var(--areia); letter-spacing: -0.02em; }
.lp-stat span { font-size: 15px; text-align: right; color: rgb(var(--bege-rgb) / 0.85); }

.lp-data-chart {
  display: flex; flex-direction: column; gap: 24px;
  padding: 40px; border-radius: 12px; background: var(--card);
}
.lp-data-chart h3 { font-size: clamp(22px, 1.7vw, 28px); text-align: center; }
.lp-chart-box { display: grid; justify-items: center; gap: 2px; padding: 18px; border-radius: 8px; border: 1px solid var(--line); background: rgb(var(--bege-rgb) / 0.6); }
.lp-chart-big { font-size: 28px; color: var(--terracota); font-family: var(--font-mono); }
.lp-chart-box span:last-child { font-size: 14px; color: var(--muted); }
.lp-bars { flex: 1; min-height: 190px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: end; padding-inline: 12%; }
.lp-bar { height: 100%; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 8px; }
.lp-bar-val { font-family: var(--font-mono); font-size: 14px; color: var(--azul); }
.lp-bar-fill {
  align-self: end; width: 100%; height: var(--h); min-height: 6px; border-radius: 6px 6px 2px 2px;
  background: rgb(var(--azul-rgb) / 0.28);
  transform-origin: bottom; transform: scaleY(0); transition: transform 1.4s var(--ease) 0.2s;
}
.lp-bar--hi .lp-bar-fill { background: linear-gradient(180deg, var(--terracota), rgb(var(--terracota-rgb) / 0.7)); }
.lp-bar--hi .lp-bar-val { color: var(--terracota); }
.lp-bar-year { font-size: 14px; color: var(--muted); }
.js .lp-data-chart[data-visible="true"] .lp-bar-fill, html:not(.js) .lp-bar-fill { transform: scaleY(1); }
.lp-source { font-size: 13.5px; line-height: 1.5; color: var(--muted); text-align: center; }

.lp-empresa-text { margin: 50px auto 0; max-width: 760px; display: grid; gap: 14px; text-align: center; font-size: 17px; line-height: 1.6; color: var(--text); }
.lp-empresa .sec-bar { margin-top: 44px; }

/* ---------- Seção 5 · serviços (faixa escura) ---------- */
.lp-servicos { padding-block: 100px; background: var(--azul); color: var(--bege); }
.lp-servicos-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 4vw, 70px); align-items: start; }
.lp-kicker { display: block; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--areia); font-family: var(--font-mono); }
.lp-kicker--dark { color: var(--terracota); }
.lp-servicos-title { font-size: clamp(34px, 3vw, 54px); line-height: 1.12; letter-spacing: -0.02em; }
.lp-servicos-left { position: sticky; top: 110px; display: grid; gap: 30px; }
.lp-palco { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgb(var(--bege-rgb) / 0.14); aspect-ratio: 4 / 3; }
.lp-palco img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; display: block; }
.lp-servicos-list { list-style: none; margin: 0; padding: 12px 30px; border-radius: 12px; background: rgb(var(--bege-rgb) / 0.05); border: 1px solid rgb(var(--bege-rgb) / 0.14); }
.lp-servicos-list li { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid rgb(var(--bege-rgb) / 0.12); }
.lp-servicos-list li:last-child { border-bottom: 0; }
.lp-num { font-family: var(--font-mono); font-size: 14px; color: var(--terracota); padding-top: 4px; }
.lp-servicos-list h3 { font-size: 15px; letter-spacing: 0.1em; color: var(--bege); }
.lp-servicos-list p { margin-top: 8px; font-size: 17px; line-height: 1.5; color: rgb(var(--bege-rgb) / 0.78); }
.lp-servicos-list li { transition: padding-left 0.4s var(--ease); }
.lp-servicos-list li:hover { padding-left: 8px; }

/* ---------- Seção 6 · livro + palestra ---------- */
.lp-combo-card {
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch; overflow: hidden;
  border-radius: 16px; background: var(--areia); color: var(--azul);
}
.lp-combo-body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(32px, 4vw, 60px); }
.lp-combo-body .dm-title { margin-top: 0; }
.lp-combo-body p { font-size: 18px; line-height: 1.55; max-width: 520px; color: rgb(var(--azul-rgb) / 0.85); }
.lp-combo-body .dm-btn { margin-top: 10px; }
.lp-combo-art { position: relative; min-height: 320px; display: grid; place-items: center; padding: 30px; background: rgb(var(--bege-rgb) / 0.35); }
.lp-combo-art > img:first-child { width: min(100%, 230px); height: auto; border-radius: 3px; box-shadow: 0 30px 50px -24px rgb(var(--azul-rgb) / 0.6); transform: rotate(3deg); }
.lp-combo-selo {
  position: absolute; left: -38px; bottom: 26px; width: 130px; height: auto; padding: 7px;
  border-radius: 50%; background: rgb(var(--bege-rgb) / 0.95); transform: rotate(-8deg);
  box-shadow: 0 16px 36px -20px rgb(var(--azul-rgb) / 0.6);
}

/* ---------- Seção 7 · sobre ---------- */
.lp-sobre .sec-about-card .dm-title { margin-top: 0; margin-bottom: 8px; }
.lp-sobre .sec-about-row { margin-top: 0; }

/* ---------- Seção 8 · formulário ---------- */
.lp-form-sec { background: linear-gradient(180deg, transparent, rgb(var(--areia-rgb) / 0.14)); }
.lp-form {
  margin: 50px auto 0; max-width: 920px; display: grid; gap: 28px;
  padding: clamp(24px, 4vw, 50px); border-radius: 16px;
  background: rgb(255 255 255 / 0.45); border: 1px solid var(--line);
  box-shadow: 0 40px 80px -60px rgb(var(--azul-rgb) / 0.45);
}
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.lp-field { display: grid; gap: 8px; }
.lp-field > span, .lp-choices legend { font-size: 14px; color: var(--azul); }
.lp-field b, .lp-choices legend b { color: var(--terracota); font-weight: 400; }
.lp-field input {
  width: 100%; height: 54px; padding: 0 16px; border-radius: 8px;
  border: 1px solid rgb(var(--azul-rgb) / 0.18); background: var(--bege); color: var(--azul);
  font: inherit; font-size: 16px; transition: border-color 0.25s, box-shadow 0.25s;
}
.lp-field input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgb(var(--azul-rgb) / 0.1); }
.lp-err { min-height: 0; font-size: 13px; color: #b3261e; }
.lp-err:empty { display: none; }
.is-invalid input { border-color: #b3261e; }
.lp-choices { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.lp-choices legend { float: none; width: auto; margin: 0 0 12px; padding: 0; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-chip { position: relative; cursor: pointer; }
.lp-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lp-chip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  border: 1px solid rgb(var(--azul-rgb) / 0.18); background: var(--bege); font-size: 15px; color: var(--azul);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.lp-chip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background-color 0.25s; }
.lp-chip:hover span { border-color: var(--azul); }
.lp-chip input:checked + span { background: var(--azul); border-color: var(--azul); color: var(--bege); }
.lp-chip input:checked + span::before { background: var(--terracota); border-color: var(--terracota); }
.lp-chip input:focus-visible + span { box-shadow: 0 0 0 4px rgb(var(--azul-rgb) / 0.15); }
.lp-choices.is-invalid .lp-chip span { border-color: #b3261e; }
.lp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.lp-submit { margin-top: 4px; }
.lp-submit[disabled] { opacity: 0.6; cursor: progress; }
.lp-form-note { text-align: center; font-size: 14px; color: var(--muted); }
.lp-form-note a { color: var(--terracota); text-decoration: underline; text-underline-offset: 3px; }
.lp-alert { padding: 16px 20px; border-radius: 8px; font-size: 15px; line-height: 1.45; }
.lp-alert--ok { background: rgb(var(--azul-rgb) / 0.08); border: 1px solid rgb(var(--azul-rgb) / 0.2); color: var(--azul); }
.lp-alert--err { background: #fbeae8; border: 1px solid #efc2bd; color: #8c1d18; }
.lp-alert[hidden] { display: none; }

/* ---------- Seção final ---------- */
.lp-final { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(110px, 12vw, 200px); color: var(--bege); background: var(--azul); }
.lp-final-sea { z-index: -2; }
.lp-final-dim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 50%, rgb(var(--azul-rgb) / 0.55), rgb(var(--azul-rgb) / 0.8)); }
.lp-final-text { max-width: 900px; margin-inline: auto; text-align: center; font-size: clamp(30px, 3.4vw, 56px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .lp-hero-ctas .dm-btn { width: 100%; }
  .lp-sentido-grid, .lp-livro-card, .lp-data, .lp-servicos-grid, .lp-combo-card { grid-template-columns: 1fr; }
  .lp-sentido-photo { min-height: 420px; }
  .lp-livro-img { min-height: 320px; }
  .lp-servicos-left { position: static; }
  .lp-combo-art { min-height: 260px; order: -1; }
  .lp-combo-selo { left: auto; right: 18px; bottom: -30px; width: 110px; }
  .lp-combo-body { padding-top: 48px; }
}
@media (max-width: 620px) {
  .lp-fields, .lp-row2 { grid-template-columns: 1fr; }
  .lp-info { grid-template-columns: 1fr 1fr; }
  .lp-info .lp-info-price { grid-column: 1 / -1; }
  .lp-data-photo-body, .lp-data-chart { padding: 26px 22px; }
  .lp-data-photo { min-height: 440px; }
  .lp-servicos { padding-block: 72px; }
  .lp-servicos-list { padding: 4px 20px; }
  .lp-servicos-list li { grid-template-columns: 40px 1fr; gap: 10px; }
  .lp-buy { width: 100%; }
  .lp-stat { flex-direction: column; align-items: flex-start; }
  .lp-stat span { text-align: left; }
}
