/* Edu.Place — BIO PRIME
   Conceito: abrir a caixa. Os colchetes do logo emolduram o produto na Hero e o orçamento no fim. */

:root {
  --aluminio: #F2F2F5;
  --caixa: #FFFFFF;
  --grafite: #1F1F27;
  --titanio: #5A5A68;
  --indigo: #4C55E0;
  --indigo-press: #3F47C8;
  --lilas: #E9E7FE;
  --borda: #D9D9E3;
  --marca-grad: linear-gradient(90deg, #5B8CF2, #A97BF7);

  --f: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;

  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 450ms;
  --motion-signature: 640ms;

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);

  --shift-sm: 8px;
  --shift-md: 14px;
  --press-scale: 0.98;

  --gutter: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-sm: 0px;
    --shift-md: 0px;
    --press-scale: 1;
    --motion-scene: 200ms;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  background: var(--aluminio);
  color: var(--grafite);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 6px;
}

.pular {
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: 12px;
  z-index: 40;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--grafite);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.pular:focus-visible { transform: none; }

.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.so-js { display: none; }
.js .so-js { display: block; }

/* ---------- colchetes da marca (assinatura) ---------- */

.colchete {
  display: block;
  height: 56px;
  padding: 5px 5px 0;
  border-radius: 30px 30px 0 0;
  background: var(--marca-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.colchete-base {
  padding: 0 5px 5px;
  border-radius: 0 0 30px 30px;
}

/* ---------- layout ---------- */

.hero,
main,
.rodape {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
}

/* ---------- hero ---------- */

.hero {
  padding-top: calc(18px + var(--safe-top));
  padding-bottom: 8px;
}

.marca { margin-left: -18px; }
.logo { width: 150px; height: auto; display: block; }
.logo-txt {
  font-family: var(--f);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.6px;
  fill: var(--grafite);
}

.caixa {
  position: relative;
  margin-top: 14px;
  padding: 14px 12px;
}
.caixa .colchete {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}
.caixa .colchete-topo { top: 0; }
.caixa .colchete-base { bottom: 0; }

.caixa-foto {
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 10 / 9;
  background: #E4E2EA;
}
.caixa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* a tampa sobe e a foto assenta: único movimento orquestrado da página */
@media (prefers-reduced-motion: no-preference) {
  .tampa {
    animation: tampa-abre var(--motion-signature) var(--ease-emphasis) 160ms both;
  }
  .caixa-foto img {
    animation: foto-assenta 900ms var(--ease-enter) both;
  }
}
@keyframes tampa-abre {
  from { transform: translateY(34px); }
  to { transform: none; }
}
@keyframes foto-assenta {
  from { transform: scale(1.035); }
  to { transform: none; }
}

.hero-texto { padding-top: 22px; }

h1 {
  font-size: clamp(31px, 8.6vw, 38px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero-apoio {
  margin-top: 14px;
  color: var(--titanio);
  max-width: 34ch;
}

.hero-local {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  font-size: 15px;
  color: var(--titanio);
}
.hero-local i { color: var(--indigo); }

.hero-ancora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 10px;
  color: var(--indigo);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  touch-action: manipulation;
}
.hero-ancora i { font-size: 14px; }

/* ---------- cenas ---------- */

.cena { padding-top: 76px; }

.cena-topo h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cena-topo p {
  margin-top: 10px;
  color: var(--titanio);
  max-width: 36ch;
}
.cena-topo .dica {
  margin-top: 8px;
  font-size: 15px;
  color: var(--indigo);
}

.grupo-titulo {
  margin: 30px 0 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--titanio);
}

/* reveal: só quando o JS existe */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--shift-md));
  transition:
    opacity var(--motion-scene) var(--ease-enter),
    transform var(--motion-scene) var(--ease-enter);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- prateleira ---------- */

.prateleira {
  display: grid;
  gap: 4px;
  margin-inline: -12px;
}

.item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 16px;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.item:active { transform: scale(var(--press-scale)); background: #E6E6EC; }

.item-ic {
  font-size: 21px;
  text-align: center;
  color: var(--grafite);
}

.item-txt { display: grid; }
.item-txt strong { font-size: 18px; font-weight: 500; }
.item-txt span { font-size: 15px; color: var(--titanio); }

.item-marca { display: none; }
.js .item-marca {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid #B9B9C6;
  border-radius: 50%;
  color: var(--titanio);
  font-size: 13px;
  transition:
    background-color var(--motion-standard) var(--ease-standard),
    border-color var(--motion-standard) var(--ease-standard),
    color var(--motion-standard) var(--ease-standard);
}
.js .item-marca::before {
  content: "\2b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.item[aria-pressed="true"] { background: var(--lilas); }
.item[aria-pressed="true"] .item-marca {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.item[aria-pressed="true"] .item-marca::before { content: "\f00c"; }

@media (hover: hover) and (pointer: fine) {
  .item:hover { background: #E9E9EF; }
  .item[aria-pressed="true"]:hover { background: var(--lilas); }
}

/* ---------- lacrado / seminovo ---------- */

.seletor {
  position: relative;
  grid-template-columns: 1fr 1fr;
  margin-top: 24px;
  padding: 6px;
  border-radius: 20px;
  background: var(--caixa);
}
.js .seletor { display: grid; }

.seletor-op {
  position: relative;
  z-index: 1;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--titanio);
  font: 500 17px/1 var(--f);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-standard) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.seletor-op:active { transform: scale(var(--press-scale)); }
.seletor-op[aria-selected="true"] { color: var(--grafite); }

.seletor-indicador {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  border-radius: 14px;
  background: var(--lilas);
  transition: transform var(--motion-emphasis) var(--ease-emphasis);
}
.seletor-indicador::before,
.seletor-indicador::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  height: 9px;
  background: var(--marca-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.seletor-indicador::before { top: 5px; padding: 2.5px 2.5px 0; border-radius: 8px 8px 0 0; }
.seletor-indicador::after { bottom: 5px; padding: 0 2.5px 2.5px; border-radius: 0 0 8px 8px; }
.seletor[data-ativo="1"] .seletor-indicador { transform: translateX(100%); }

.paineis {
  display: grid;
  gap: 40px;
  margin-top: 20px;
}
.js .paineis.is-abas { gap: 0; }
.js .paineis.is-abas .painel {
  grid-area: 1 / 1;
  transition:
    opacity var(--motion-emphasis) var(--ease-standard),
    visibility 0s linear var(--motion-emphasis);
}
.js .paineis.is-abas .painel[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
}
.js .paineis.is-abas .painel:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--motion-emphasis) var(--ease-standard), visibility 0s;
}

.painel img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 20px;
  background: #E4E2EA;
}
.painel-txt { padding-top: 18px; }
.painel-txt h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.painel-txt p { margin-top: 6px; color: var(--titanio); }
.painel-txt ul { display: grid; gap: 8px; margin-top: 14px; }
.painel-txt li { display: flex; gap: 10px; align-items: baseline; }
.painel-txt li i { color: var(--indigo); font-size: 14px; }

/* ---------- comprar tranquilo ---------- */

.garantias { display: grid; gap: 22px; margin-top: 28px; }
.garantias li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
}
.g-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--lilas);
  color: var(--indigo);
  font-size: 18px;
}
.garantias h3 { font-size: 17px; font-weight: 500; line-height: 1.35; padding-top: 2px; }
.garantias p { margin-top: 2px; font-size: 15px; color: var(--titanio); }

/* ---------- clientes ---------- */

.mural {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 8px;
  margin-top: 26px;
}
.mural img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  background: #E4E2EA;
}

.entregas {
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.entregas::-webkit-scrollbar { display: none; }
.entregas li { flex: 0 0 132px; scroll-snap-align: start; }
.entregas a {
  display: block;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.entrega-capa {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  background: #E4E2EA;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.entregas a:active .entrega-capa { transform: scale(var(--press-scale)); }
.entrega-capa img { width: 100%; height: 100%; object-fit: cover; }
.entrega-capa i {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(31 31 39 / 0.55);
  color: #fff;
  font-size: 11px;
}
.entrega-txt {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.link-sutil {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 14px;
  color: var(--indigo);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  touch-action: manipulation;
}
.link-sutil i { font-size: 19px; }

/* ---------- orçamento (CTA final) ---------- */

.orcamento { padding-bottom: 12px; }

.moldura {
  position: relative;
  margin-inline: -8px;
  padding: 10px;
}
.moldura .colchete {
  position: absolute;
  left: 0;
  right: 0;
  height: 72px;
}
.moldura .colchete-topo { top: 0; }
.moldura .colchete-base { bottom: 0; }

.moldura-corpo {
  padding: 28px 16px 22px;
  border-radius: 22px;
  background: var(--caixa);
}
.moldura-corpo h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.moldura-corpo > p {
  margin-top: 10px;
  color: var(--titanio);
}

.montador { margin-top: 26px; }
.montador fieldset {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.montador legend,
.campo label {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
}
.opcional { color: var(--titanio); font-weight: 400; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--grafite);
  transition:
    background-color var(--motion-standard) var(--ease-standard),
    border-color var(--motion-standard) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.chip span::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--indigo);
  display: none;
}
.chip input:checked + span {
  border-color: var(--indigo);
  background: var(--lilas);
}
.chip input:checked + span::before { display: inline; }
.chip input:active + span { transform: scale(var(--press-scale)); }
.chip input:focus-visible + span {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}

.campo { margin-bottom: 24px; }
.campo-troca { margin: 16px 0 0; }
.campo input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--borda);
  border-radius: 14px;
  background: var(--caixa);
  color: var(--grafite);
  font: 400 16px var(--f);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.campo input::placeholder { color: #7A7A88; }
.campo input:focus { border-color: var(--indigo); outline: none; }
.campo input:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }

.previa {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--aluminio);
}
.previa-rotulo { font-size: 14px; font-weight: 500; color: var(--titanio); }
.previa-txt {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
}

.btn-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 24px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgb(76 85 224 / 0.9);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.js .montador + .btn-principal { margin-top: 0; }
.btn-principal i { font-size: 22px; }
.btn-principal:active {
  transform: scale(var(--press-scale));
  background: var(--indigo-press);
  box-shadow: 0 4px 12px -8px rgb(76 85 224 / 0.9);
}
@media (hover: hover) and (pointer: fine) {
  .btn-principal:hover { background: var(--indigo-press); }
}

.nota {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--titanio);
}

/* ---------- CTA flutuante (Regra do CTA) ---------- */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(14px + var(--safe-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(calc(100% - 32px), 440px);
  min-height: 56px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgb(46 52 140 / 0.55);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  translate: -50% 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    translate var(--motion-standard) var(--ease-exit),
    scale var(--motion-fast) var(--ease-standard),
    visibility 0s linear var(--motion-standard);
}
.cta-flutuante.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 280ms var(--ease-enter),
    translate 280ms var(--ease-enter),
    scale var(--motion-fast) var(--ease-standard),
    visibility 0s;
}
.cta-flutuante:active { scale: var(--press-scale); }
.cta-flutuante i { font-size: 22px; }

.cta-contagem {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--indigo);
  font-size: 13px;
  font-weight: 600;
}
.cta-contagem[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cta-flutuante,
  .cta-flutuante.is-visivel { translate: -50% 0; }
}

/* ---------- rodapé ---------- */

.rodape {
  padding-top: 56px;
  padding-bottom: calc(28px + var(--safe-bottom));
  text-align: center;
  font-size: 14px;
  color: var(--titanio);
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--grafite);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--indigo);
  --seal-ring: 0;
  --seal-font: var(--f);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

/* ---------- reduced motion: cortes no lugar de deslocamentos ---------- */

@media (prefers-reduced-motion: reduce) {
  .seletor-indicador,
  .js .paineis.is-abas .painel,
  .js .paineis.is-abas .painel:not([hidden]) { transition: none; }
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------- telas largas ---------- */

@media (min-width: 600px) {
  .cena { padding-top: 96px; }
  .entregas { margin-inline: 0; padding-inline: 0; }
}