/* ============================================
   RESET E VARIÁVEIS GLOBAIS
   ============================================ */

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

:root {
    --primary-blue: #003d82;
    --primary-blue-light: #0052a3;
    --accent-orange: #ff6600;
    --accent-orange-light: #ff8533;
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --bg-light: #f5f5f5;
    --bg-white: #ffffff;
    --border-color: #e0e0e0;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-white);
    line-height: 1.6;
}


/* === FAB === */
.whats-fab{
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 9999px; border: none; cursor: pointer;
  background: #22C55E; color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,.18);
  display: grid; place-items: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.whats-fab:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.2); }
.whats-fab:active{ transform: translateY(0); }
.whats-fab svg{ display:block; }

/* === MODAL === */
.whats-modal[aria-hidden="true"]{ display:none; }
.whats-modal{ position: fixed; inset: 0; z-index: 10000; }
.whats-backdrop{
  position:absolute; inset:0; background: rgba(17,24,39,.6);
  backdrop-filter: blur(2px);
}
.whats-dialog{
  position: relative; margin: 6vh auto 0; max-width: 520px;
  background: #fff; border-radius: 16px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.whats-close{
  position:absolute; top:10px; right:12px; border:none; background:transparent;
  font-size: 28px; line-height: 1; cursor: pointer; color:#374151;
}
#whats-title{ font-size: 1.25rem; margin: 6px 24px 4px 2px; color:#111827; }
.whats-sub{ margin: 0 0 14px; color:#6B7280; }

.whats-list{ display: grid; gap: 10px; }
.whats-item{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  border:1px solid #E5E7EB; border-radius: 12px; padding: 12px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  color: inherit;
}
.whats-item:hover{ background:#F9FAFB; border-color:#D1D5DB; transform: translateY(-1px); }
.whats-avatar{
  width:40px; height:40px; border-radius: 12px; background:#DCFCE7; color:#065F46;
  display:grid; place-items:center; font-weight:700;
}
.whats-info strong{ display:block; color:#111827; }
.whats-info span{ display:block; font-size:.875rem; color:#6B7280; }
.whats-cta{
  margin-left:auto; font-size:.875rem; font-weight:600; color:#16A34A;
}

/* Mobile */
@media (max-width: 520px){
  .whats-dialog{ margin: 10vh 14px 0; padding: 16px; }
}
.no-scroll{ overflow: hidden; }

/* ============================================
   CONTAINER E LAYOUT
   ============================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}

/* ============================================
   BOTÕES
   ============================================ */

.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    background-color: var(--accent-orange);
    color: white;
}

.btn-primary:hover {
    background-color: var(--accent-orange-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: var(--accent-orange);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--accent-orange-light);
}

.btn-outline {
    background-color: transparent;
    color: var(--text-dark);
    border: 2px solid var(--border-color);
}

.btn-outline:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
    color: white;
    padding: 60px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }
}

.badge {
    display: inline-block;
    background-color: rgba(255, 102, 0, 0.2);
    color: var(--accent-orange);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 36px;
    }
}

.hero h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .hero h2 {
        font-size: 20px;
    }
}

.hero .subtitle {
    font-size: 18px;
    margin-bottom: 16px;
}

.hero .description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    line-height: 1.6;
}

.highlight {
    color: var(--accent-orange);
}

.highlight-blue {
    color: var(--primary-blue);
}

.highlight-orange {
    color: var(--accent-orange);
}

/* Hero Image */
.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-placeholder {
    width: 457px;
    height: 490px;
     background: url("imagens/craveiro.jpg") center/cover no-repeat; 
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
}

@media (max-width: 768px) {
    .image-placeholder {
        width: 250px;
        height: 250px;
        font-size: 100px;
    }
}

.certificate-badge {
    position: absolute;
    bottom: -20px;
    right: -18px;
    background-color: var(--accent-orange);
    color: white;
    padding: 16px 21px;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.certificate-badge .badge-text {
    font-size: 12px;
    font-weight: 600;
}

.certificate-badge .badge-title {
    font-size: 24px;
    font-weight: 700;
}

/* Stats */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .stats {
        gap: 20px;
    }
    .certificate-badge .badge-title {
        font-size: 18px;
        font-weight: 700;
    }
    .certificate-badge {
        right: 4px;
        padding: 16px 16px;
    }
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-orange);
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .stat-number {
        font-size: 28px;
    }
}

.stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   WHY LEARN SECTION
   ============================================ */

.why-learn {
    padding: 80px 0;
    background-color: var(--bg-white);
}

@media (max-width: 768px) {
    .why-learn {
        padding: 60px 0;
    }
}

.why-learn h2 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .why-learn h2 {
        font-size: 28px;
    }
}

.section-subtitle {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 48px;
    font-size: 16px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.card p {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================
   HIGHLIGHT SECTION
   ============================================ */

.highlight-section {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

@media (max-width: 768px) {
    .highlight-section {
        padding: 60px 0;
    }
}

.highlight-content {
    max-width: 600px;
    margin: 0 auto;
}

.big-number {
    font-size: 96px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1;
}

@media (max-width: 768px) {
    .big-number {
        font-size: 72px;
    }
}

.highlight-section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .highlight-section h2 {
        font-size: 24px;
    }

}

.highlight-section p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* ============================================
   CONTENT SECTION (ACCORDION)
   ============================================ */

.content-section {
    padding: 80px 0;
    background-color: var(--bg-white);
}

@media (max-width: 768px) {
    .content-section {
        padding: 60px 0;
    }
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-badge {
    display: inline-block;
    background-color: rgba(255, 102, 0, 0.1);
    color: var(--accent-orange);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.section-header h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .section-header h2 {
        font-size: 28px;
    }
}

.section-header p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* Accordion */
/* Accordion */
.accordion { margin-bottom: 32px; }

.accordion-item {
  margin-bottom: 16px;
  border-left: 4px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--bg-light);
  transition: all 0.3s ease;
}

/* Paleta por capítulo (0–11) */
.accordion-item[data-index="0"] { border-left-color:#4ade80; background-color:#f0fdf4; }
.accordion-item[data-index="1"] { border-left-color:#3b82f6; background-color:#eff6ff; }
.accordion-item[data-index="2"] { border-left-color:#f97316; background-color:#fff7ed; }
.accordion-item[data-index="3"] { border-left-color:#3b82f6; background-color:#eff6ff; }
.accordion-item[data-index="4"] { border-left-color:#f97316; background-color:#fff7ed; }
.accordion-item[data-index="5"] { border-left-color:#a855f7; background-color:#faf5ff; }
.accordion-item[data-index="6"] { border-left-color:#22c55e; background-color:#f0fdf4; }
.accordion-item[data-index="7"] { border-left-color:#2563eb; background-color:#eff6ff; }
.accordion-item[data-index="8"] { border-left-color:#ea580c; background-color:#fff7ed; }
.accordion-item[data-index="9"] { border-left-color:#1d4ed8; background-color:#eff6ff; }
.accordion-item[data-index="10"]{ border-left-color:#f59e0b; background-color:#fff7ed; }
.accordion-item[data-index="11"]{ border-left-color:#334155; background-color:#f8fafc; }

.accordion-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.accordion-header:hover { background-color: rgba(0, 0, 0, 0.02); }

.accordion-icon { font-size: 32px; flex-shrink: 0; }
.accordion-title { flex: 1; }
.accordion-title h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.accordion-preview { font-size: 14px; color: var(--text-light); margin: 0; }

.accordion-toggle {
  font-size: 28px; font-weight: 300; color: var(--text-light);
  flex-shrink: 0; transition: transform 0.3s ease;
}
.accordion-item.active .accordion-toggle { transform: rotate(45deg); }

/* >>> Mudança importante: altura dinâmica controlada via JS */
.accordion-content {
  height: 0;                /* em vez de max-height */
  overflow: hidden;
  transition: height 0.3s ease;  /* anima suavemente conforme scrollHeight */
  padding: 0 20px;
}
.accordion-item.active .accordion-content {
  /* padding-bottom aplicado em linha pelo JS para evitar pulo */
}

/* Texto interno */
.accordion-content p { color: var(--text-light); font-size: 14px; line-height: 1.6; }

/* Listas dentro do conteúdo */
.accordion-content ul {
  margin: 10px 0 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--text-light);
  line-height: 1.55;
}
.accordion-content li + li { margin-top: 4px; }





/* Bonus Box */
.bonus-box {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin-top: 32px;
}

.bonus-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bonus-box h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.bonus-box p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

.testimonials-section {
    padding: 80px 0;
    background-color: var(--bg-light);
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 60px 0;
    }
}

.testimonials-section h2 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .testimonials-section h2 {
        font-size: 28px;
    }
}

.testimonials-carousel {
    margin: 48px 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.testimonial-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.testimonial-avatar {
    font-size: 40px;
    flex-shrink: 0;
}

.testimonial-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.testimonial-info p {
    font-size: 13px;
    color: var(--text-light);
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.testimonial-rating span {
    font-size: 16px;
}

.testimonial-text {
    font-size: 14px;
    color: var(--text-dark);
    font-style: italic;
    line-height: 1.6;
}

.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.testimonials-count {
    text-align: center;
    color: var(--text-light);
    margin-top: 32px;
}

/* ============================================
   OFFER SECTION
   ============================================ */

.offer-section {
    padding: 80px 0;
    background-color: var(--bg-white);
}

@media (max-width: 768px) {
    .offer-section {
        padding: 60px 0;
    }
}

.offer-header {
    text-align: center;
    margin-bottom: 48px;
}

.offer-header h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .offer-header h2 {
        font-size: 28px;
    }
}

.offer-header p {
    color: var(--text-light);
}

/* Countdown */
.countdown {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-light) 100%);
    color: white;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 48px;
    text-align: center;
}

.countdown-label {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
}

.countdown-timer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .countdown-timer {
        gap: 12px;
    }
}

.countdown-item {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
}

.countdown-number {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .countdown-number {
        font-size: 36px;
    }
}

.countdown-item .countdown-label {
    font-size: 12px;
    margin: 0;
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.pricing-box {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px;
}

.pricing-box h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* Grade com 2 colunas: incluído (esq) + opções (dir) */
.pricing-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Cartões de opção */
.price-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.option-card {
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(2,6,23,.05);
}
.option-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.option-head .badge {
  font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px; color:#fff;
  background: linear-gradient(135deg,#2563eb,#0ea5e9);
}
.option-head .badge.outline { background:transparent; color:#2563eb; border:1px solid #2563eb; }
.option-price { margin: 10px 0 12px; }
.option-price .price-amount { font-size: 2rem; font-weight: 800; letter-spacing:-.02em; }
.option-list { list-style:none; padding:0; margin:10px 0 16px; color:#475569; }
.option-list li + li { margin-top:6px; }
.btn-large { width:100%; height:52px; font-weight:700; border-radius:10px; }
.btn-primary { background: linear-gradient(135deg,#2563eb,#0ea5e9); color:#fff; border:none; }
.btn-secondary { background:#fff; color:#1f2937; border:1px solid rgba(2,6,23,.12); }
.secure { color:#64748b; font-size:13px; margin-top:10px; }

@media (max-width: 900px){
  .pricing-grid { grid-template-columns: 1fr; }
}


.included-list {
    list-style: none;
}

.included-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-dark);
}

.included-list li:last-child {
    border-bottom: none;
}

.included-list li::before {
    content: "✓ ";
    color: var(--accent-orange);
    font-weight: 700;
}

/* Price Box */
.price-box {
    background: linear-gradient(135deg, #fff7ed 0%, #ffe4cc 100%);
    border: 2px solid var(--accent-orange);
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.price-original {
    font-size: 14px;
    color: var(--text-light);
    text-decoration: line-through;
    margin-bottom: 8px;
}

.price-installment {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.price-main {
    font-size: 48px;
    font-weight: 700;
    color: var(--accent-orange);
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .price-main {
        font-size: 36px;
    }
}

.price-alt {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 24px;
}

.price-box .btn {
    margin-bottom: 24px;
    width: 100%;
}

.security-info {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.security-info p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.security-info p:last-child {
    margin-bottom: 0;
}

.guarantee-text {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
    margin-top: 8px;
}

/* Bonuses Box */
.bonuses-box {
    background-color: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 32px;
}

.bonuses-box h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
}

.bonuses-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bonus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #fed7aa;
    font-size: 14px;
}

.bonus-item:last-child {
    border-bottom: none;
}

.bonus-price {
    color: var(--accent-orange);
    font-weight: 700;
}

.bonus-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 0;
    border-top: 2px solid #fed7aa;
    font-size: 16px;
    font-weight: 700;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
    color: white;
    padding: 60px 0 20px;
}

@media (max-width: 768px) {
    .footer {
        padding: 40px 0 20px;
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .footer-grid {
        gap: 30px;
    }
}

.footer-column h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.footer-column p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 16px;
}

.footer-badge {
    display: inline-block;
    background-color: var(--accent-orange);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact p {
    margin: 0;
    font-size: 14px;
}

.footer-column .btn {
    width: 100%;
    margin-top: 12px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}
/* .mec-badge{
  position: absolute;
  top: clamp(12px, 6vh, 96px);
  right: clamp(65px, 19vw, 358px);
  width: clamp(96px, 12vw, 160px);
  height: auto;
  z-index: 5;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
  pointer-events: none;
} */

/* ===== DESKTOP GRANDE (>= 1400px) ===== */
.mec-badge {
  position: absolute;
  top: 60px;
  right: 362px;
  width: 130px;
  height: auto;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

/* ===== NOTEBOOKS MÉDIOS (1024px–1399px) ===== */
@media (max-width: 1399px) {
  .mec-badge {
    top: 48px;
    right: 120px;
    width: 120px;
  }
}

/* ===== TABLETS (768px–1023px) ===== */
@media (max-width: 1023px) {
  .mec-badge {
    top: 40px;
    right: 40px;
    width: 110px;
  }
}
.seats-remaining{
  display:flex; align-items:center; gap:.5rem;
  background: #fff7ed; border:1px solid #fed7aa; color:#7c2d12;
  padding:.75rem 1rem; border-radius:.75rem; font-weight:600;
  width: fit-content; margin: 12px 0;
  font-size: 35px;
}
.seats-remaining .dot{
  width:.6rem; height:.6rem; border-radius:999px; background:#f97316;
  box-shadow:0 0 0 .25rem rgba(249,115,22,.15);
}
.seats-remaining.low{ border-color:#fecaca; color:#991b1b; background:#fff1f2; }
.seats-remaining.low .dot{ background:#ef4444; box-shadow:0 0 0 .25rem rgba(239,68,68,.15); }

/* ===== CELULARES GRANDES (641px–767px) ===== */
@media (max-width: 767px) {
  .mec-badge {
    top: 320px;
    right: 20px;
    width: 120px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.20));
  }
}

/* ===== CELULARES PEQUENOS (< 640px) ===== */
@media (max-width: 640px) {
  .mec-badge {
    top: 484px;
    right: 22px;
    width: 101px;
    bottom: auto;
    margin: 0;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.18));
  }
}

.videos-section { padding: 72px 0; background: #fff; }
.videos-section h2 { text-align: center; margin-bottom: 6px; }
.videos-section .section-subtitle { text-align: center; color: #64748b; margin-bottom: 20px; }

.videos-carousel { position: relative; }
.videos-viewport {
  overflow-x: auto;          /* ← tem que rolar aqui, não no track */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding: 20px;
}
.videos-track {
  display: flex;
  gap: 24px;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-padding: 20px;
}

.video-card {
  flex: 0 0 100%; /* um por vez */
  scroll-snap-align: center;
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(2,6,23,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.video-media {
  position: relative;
  aspect-ratio: 16 / 9; /* garante proporção */
  background: #0b1220;
}

.video-media video,
.video-media iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.play-overlay {
  position: absolute; inset: 0; display:grid; place-items:center;
  background: linear-gradient(0deg, rgba(15,23,42,.45), rgba(15,23,42,.15));
  cursor: pointer;
}
.play-overlay .play-btn {
  width: 64px; height: 64px; border-radius: 999px;
  background: #fff; display:grid; place-items:center;
  box-shadow: 0 12px 32px rgba(2,6,23,.25);
}
.play-overlay .play-btn::before {
  content: ""; display:block; width: 0; height: 0;
  border-left: 18px solid #0f172a;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  margin-left: 3px;
}

.video-body { padding: 14px 16px 16px; }
.video-title { margin: 0 0 6px; font-weight: 700; font-size: 1rem; color: #0f172a; }
.video-meta  { margin: 0; color: #64748b; font-size: .9rem; }

.carousel-controls { display:flex; gap: 10px; justify-content:center; margin-top: 14px; }

.videos-count { text-align:center; color:#475569; margin-top: 12px; }

/* Responsivo */
@media (max-width: 1024px) {
  .videos-track { grid-auto-columns: calc(50% - 12px); }
}
@media (max-width: 640px) {
  .videos-track { grid-auto-columns: 100%; }
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .hero h1 {
        font-size: 28px;
    }

    .hero h2 {
        font-size: 18px;
    }

    .hero .subtitle {
        font-size: 16px;
    }

    .btn-large {
        padding: 14px 24px;
        font-size: 16px;
    }

    .stat-number {
        font-size: 24px;
    }

    .big-number {
        font-size: 56px;
    }

    .countdown-number {
        font-size: 28px;
    }

    .price-main {
        font-size: 32px;
    }
}