/* Luana Hasse · Planilhas de treino — estilos base */

@font-face { font-family: 'Manjari'; src: url('../fonts/Manjari-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manjari'; src: url('../fonts/Manjari-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manjari'; src: url('../fonts/Manjari-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #FFFFFF; font-family: 'Manjari', sans-serif; color: #2A1E17; -webkit-font-smoothing: antialiased; }
a { color: #2A1E17; text-decoration: none; }
a:hover { color: #6E5242; }
img, video { display: block; }

@keyframes subirFotos { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes glassPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 10px 30px rgba(42,30,23,0.28), 0 0 0 0 rgba(194,166,144,0.55); background: rgba(255,255,255,0.14); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 30px rgba(42,30,23,0.28), 0 0 0 14px rgba(194,166,144,0); background: rgba(255,255,255,0.3); }
}
@keyframes glassSheen { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(240%) skewX(-18deg); } }

@media (min-width: 760px) { #br-prontos { display: none; } }
@media (max-width: 899px) { #resumo-planilha, #mockup-col { position: static !important; } }
@media (max-width: 759px) { #hero-foto-1 { object-position: 74% 30% !important; } }
@media (max-width: 759px) {
  #btn-foco { padding: 13px 18px 8px !important; }
  #btn-foco div { font-size: 11px !important; letter-spacing: 0.14em !important; }
  #topo-acoes { display: none !important; }
  #topo-barra { justify-content: center !important; }
}

video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }

/* esconde a barra de rolagem dos carrosseis */
.carrossel { scrollbar-width: none; -ms-overflow-style: none; }
.carrossel::-webkit-scrollbar { display: none; }

/* --- estados de hover (equivalentes ao style-hover do protótipo) --- */
.btn-escuro { transition: background .16s ease, color .16s ease, border-color .16s ease; }
.btn-escuro:hover { background: #C2A690 !important; color: #2A1E17 !important; border-color: #C2A690 !important; }

.btn-marrom { transition: background .16s ease, border-color .16s ease; }
.btn-marrom:hover { background: #6E5242 !important; border-color: #6E5242 !important; }

.btn-vidro { transition: background .25s ease, border-color .25s ease; }
.btn-vidro:hover { background: rgba(255,255,255,0.28) !important; border-color: rgba(255,255,255,0.75) !important; }

.seta { transition: background .16s ease, color .16s ease, border-color .16s ease; }
.seta:hover { background: #2A1E17 !important; color: #FFFFFF !important; border-color: #2A1E17 !important; }

.btn-contorno { transition: background .16s ease, color .16s ease; }
.btn-contorno:hover { background: #2A1E17 !important; color: #FFFFFF !important; }

.btn-bege { transition: background .16s ease, border-color .16s ease; }
.btn-bege:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; }

.btn-branco { transition: background .16s ease; }
.btn-branco:hover { background: #C2A690 !important; }

.link-marrom { transition: color .16s ease; }
.link-marrom:hover { color: #6E5242 !important; }

.link-bege { transition: color .16s ease; }
.link-bege:hover { color: #C2A690 !important; }

.faq-btn { transition: color .16s ease; }
.faq-btn:hover { color: #6E5242 !important; }

.wa-float { transition: transform .18s ease; }
.wa-float:hover { transform: scale(1.06); }

.fotos-rolando:hover { animation-play-state: paused; }

/* --- acessibilidade / foco visível --- */
:focus-visible { outline: 2px solid #C2A690; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fotos-rolando, #btn-foco, #btn-foco .sheen { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* --- chips do seletor (igual ao chip() do protótipo) --- */
.chip {
  font-family: 'Manjari', sans-serif; cursor: pointer; font-size: 13px; letter-spacing: 0.04em;
  padding: 15px 18px 13px; border-radius: 10px; text-align: center; transition: all .16s ease;
  background: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.35);
  box-shadow: none; font-weight: 400;
}
.chip.ativo {
  background: #2A1E17; color: #FFFFFF; border-color: #C2A690;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); font-weight: 700;
}

/* --- cards de duração (igual ao cardPlano() do protótipo) --- */
.card-plano {
  font-family: 'Manjari', sans-serif; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 27px 24px 25px; border-radius: 12px; transition: all .16s ease;
  background: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.35);
  box-shadow: none;
}
.card-plano.ativo {
  background: #2A1E17; color: #FFFFFF; border-color: #C2A690;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* --- passo "Escolha o foco": escondido na trilha Pós-parto --- */
#passo-foco[hidden] { display: none; }

/* --- avatar de depoimento (monograma até chegarem as fotos) --- */
.avatar-mono {
  width: 40px; height: 40px; flex: none; border-radius: 999px; background: #C2A690;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #2A1E17; padding-top: 5px;
}