/* ═══════════════════════════════════════════════════════════
   HOME_VISITOR.CSS — estilos exclusivos da landing page (visitante)
   Depende de: base.css (carregar antes)
   ═══════════════════════════════════════════════════════════ */

/* ── HERO ── */
.hero {
  max-width: 1100px; margin: 0 auto;
  padding: 5rem 2rem 3rem;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 3rem;
}
.hero-text h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800; line-height: 1.15; color: var(--orange);
}
.hero-text h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-text p { margin-top: 1.1rem; font-size: 1.1rem; line-height: 1.7; color: #555; }
.hero-actions { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap; }

.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; }
.hero-circle {
  width: 340px; height: 340px; border-radius: 50%;
  background: linear-gradient(135deg, #fff7e6, #ffe0b2);
  border: 3px solid rgba(255,180,80,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 120px;
  box-shadow: 0 12px 40px rgba(255,150,0,.15);
  animation: heroFloat 3.5s ease-in-out infinite;
  position: relative; z-index: 2;
}
.badge-float {
  position: absolute; background: white;
  border-radius: var(--radius-md); padding: .5rem .9rem;
  font-size: .85rem; font-weight: 800;
  box-shadow: var(--card-shadow);
  display: flex; align-items: center; gap: .4rem;
  animation: badgeFloat 4s ease-in-out infinite;
}
.badge-1 { top: 20px;  left: -10px;  animation-delay: .5s;  color: #e05c00; }
.badge-2 { bottom: 30px; right: -20px; animation-delay: 1.2s; color: #7c3aed; }
.badge-3 { top: 60%;  left: -30px;  animation-delay: .8s;  color: #059669; }

/* ── SUBJECTS STRIP ── */
.subjects-strip { max-width: 1100px; margin: 1rem auto 0; padding: 0 2rem 3rem; }
.strip-label {
  font-size: .8rem; font-weight: 800; letter-spacing: 1.5px;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 1rem;
}
.subjects-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.subj-pill {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; background: white; border-radius: 50px;
  font-size: .9rem; font-weight: 700;
  box-shadow: var(--card-shadow); border: 1.5px solid rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s;
}
.subj-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* ── FEATURES ── */
.features { background: white; padding: 4rem 2rem; }
.features-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.feature-card {
  background: linear-gradient(160deg, #fffdf9, #fff8ee);
  border: 1.5px solid #ffe0b2; border-radius: var(--radius-lg);
  padding: 1.8rem 1.4rem; text-align: center;
  transition: transform .18s, box-shadow .18s;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow); }
.feature-icon { font-size: 48px; margin-bottom: .8rem; display: block; }
.feature-card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--orange); margin-bottom: .5rem; }
.feature-card p  { font-size: .9rem; color: #666; line-height: 1.6; }

/* ── MODES ── */
.modes {
  max-width: 1100px; margin: 0 auto;
  padding: 4rem 2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start;
}
.mode-card { border-radius: var(--radius-lg); padding: 2rem; position: relative; overflow: hidden; }
.mode-card.treino   { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); border: 2px solid #a5d6a7; }
.mode-card.simulado { background: linear-gradient(135deg,#e8eaf6,#c5cae9); border: 2px solid #9fa8da; }
.mode-emoji { font-size: 52px; display: block; margin-bottom: .8rem; }
.mode-card h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin-bottom: .6rem; }
.mode-card.treino   h3 { color: #2e7d32; }
.mode-card.simulado h3 { color: #283593; }
.mode-card p { font-size: .95rem; color: #444; line-height: 1.65; }
.mode-tag { display: inline-block; margin-top: 1rem; padding: .35rem .9rem; border-radius: 40px; font-size: .78rem; font-weight: 800; letter-spacing: .5px; }
.mode-card.treino   .mode-tag { background: #a5d6a7; color: #1b5e20; }
.mode-card.simulado .mode-tag { background: #9fa8da; color: #1a237e; }

/* ── PLANS ── */
.plans { background: white; padding: 4rem 2rem; }
.plans-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.plan-card {
  border-radius: var(--radius-lg); padding: 1.8rem 1.4rem;
  border: 2px solid #f0e0cc; background: #fffdf9;
  text-align: center; transition: transform .18s, box-shadow .18s; position: relative;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow); }
.plan-card.featured { background: linear-gradient(160deg,#fff8ee,#ffe0b2); border-color: var(--orange); box-shadow: 0 8px 30px rgba(232,93,0,.18); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--orange); color: white; padding: .25rem .9rem; border-radius: 40px; font-size: .72rem; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
.plan-name     { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--orange); margin-bottom: .3rem; }
.plan-children { font-size: .85rem; color: var(--text-muted); font-weight: 600; margin-bottom: 1rem; }
.plan-price    { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text); }
.plan-price sup  { font-size: 1rem; vertical-align: top; margin-top: .4rem; display: inline-block; }
.plan-price span { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.plan-features { list-style: none; margin: 1.2rem 0 1.5rem; text-align: left; }
.plan-features li { font-size: .88rem; padding: .35rem 0; color: #555; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid rgba(0,0,0,.05); }
.plan-features li:last-child { border-bottom: none; }

/* ── TESTIMONIALS ── */
.testimonials { max-width: 1000px; margin: 0 auto; padding: 4rem 2rem; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.testi-card { background: white; border-radius: var(--radius-lg); padding: 1.5rem; border: 1.5px solid #f0e0cc; box-shadow: var(--card-shadow); }
.testi-stars  { color: var(--yellow); font-size: 1rem; margin-bottom: .6rem; }
.testi-text   { font-size: .9rem; color: #555; line-height: 1.6; font-style: italic; }
.testi-author { margin-top: .8rem; font-size: .82rem; font-weight: 800; color: var(--orange); }

/* ── CTA FINAL ── */
.cta-section { background: linear-gradient(135deg, var(--orange), var(--orange-lt)); padding: 4rem 2rem; text-align: center; }
.cta-section h2 { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; color: white; margin-bottom: .8rem; }
.cta-section p  { color: rgba(255,255,255,.85); font-size: 1rem; margin-bottom: 2rem; }

/* ── RESPONSIVO ── */
@media (max-width: 768px) {
  .hero              { grid-template-columns: 1fr; text-align: center; }
  .hero-visual       { display: none; }
  .hero-actions      { justify-content: center; }
  .features-grid     { grid-template-columns: 1fr; }
  .modes             { grid-template-columns: 1fr; }
  .plans-grid        { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
}