/* Base */
:root {
    --brand-blue: #0057A3; /* fundo principal */
    --brand-blue-700: #004987;
    --brand-yellow: #FFD34D; /* CTA */
    --brand-yellow-700: #E6BD33;
    --brand-purple: #5B1EB3; /* barra roxa */
    --brand-purple-800: #4A1798;
    --brand-cream: #FFF4CC; /* faixa de fundo amarela clara */
    --brand-red: #E53935; /* destaque "Nova solução" */
    --text-dark: #0f172a;
    --text-light: #ffffff;
    --text-muted: #334155;
    --border: #e2e8f0;
    --surface: #ffffff;
    --surface-alt: #f8fafc;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text-dark);
    background: var(--surface);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
    z-index: 50;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-weight: 700; font-size: 18px; }
.brand img { display: block; height: 40px; width: auto; }
.main-nav { position: relative; }
.nav-toggle { display: none; background: transparent; border: 1px solid #cbd5e1; padding: 8px 12px; border-radius: 8px; }
.nav-menu { display: flex; gap: 16px; align-items: center; list-style: none; padding: 0; margin: 0; }
.nav-menu a { text-decoration: none; color: var(--text-dark); padding: 8px 10px; border-radius: 8px; }
.nav-menu a:hover { background: #f1f5f9; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-weight: 600; }
.btn-sm { padding: 8px 12px; font-size: 14px; }
.btn-primary { background: var(--brand-yellow); color: #1f2937; }
.btn-primary:hover { background: var(--brand-yellow-700); }
.btn-outline { background: #ffffff; color: #0f172a; border-color: #cbd5e1; }
.btn-outline:hover { background: #f8fafc; }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }

/* Hero */
.hero { background: var(--brand-blue); padding: 56px 0 32px; color: var(--text-light); }
.hero-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; }
.hero-copy h1 { margin: 0 0 12px; font-size: 40px; line-height: 1.15; color: var(--text-light); }
.hero-copy p { margin: 0 0 16px; color: #E6EEF7; }
.hero-cta { display: flex; gap: 12px; margin: 16px 0 8px; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 24px 0 0; list-style: none; }
.badges li { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); color: #fff; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid rgba(255,255,255,0.2); }
.hero-img { border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.hero-media .media-placeholder { background: #e2e8f0; border: 2px dashed #94a3b8; border-radius: 16px; height: 260px; display: flex; align-items: center; justify-content: center; color: #475569; }

/* Sections */
.section { padding: 48px 0; }
.section.alt { background: var(--surface-alt); }
.section h2 { margin: 0 0 12px; font-size: 28px; }
.section p.note { color: #475569; font-size: 14px; }

/* Cuidados */
.cuidados h2 { text-align: center; color: var(--brand-purple-800); margin-bottom: 8px; }
.care-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 16px; align-items: start; }
.care-item { text-align: center; padding: 8px 12px; }
.care-item h3 { font-size: 15px; margin: 10px 0 6px; color: var(--brand-purple-800); font-weight: 800; }
.care-item p { margin: 0; color: #475569; font-size: 13px; max-width: 260px; margin-left: auto; margin-right: auto; line-height: 1.45; }
.care-icon { width: 48px; height: 48px; border-radius: 999px; display: inline-grid; place-items: center; margin-bottom: 10px; font-size: 24px; font-weight: 900; color: var(--brand-purple); background: #ffffff; border: 2px solid var(--brand-purple); }
.care-icon.care-accent { color: #e11d48; border-color: #e11d48; background: #ffffff; }

@media (max-width: 960px) {
  .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .care-grid { grid-template-columns: 1fr; }
}

/* Efeitos section */
.efeitos { background: var(--brand-cream); }
.efeitos-head { text-align: center; margin-bottom: 12px; }
.efeitos-icon { width: 44px; height: 44px; border-radius: 999px; display: inline-grid; place-items: center; margin: 0 auto 8px; font-weight: 900; color: var(--brand-purple); background: #f3e8ff; border: 2px solid var(--brand-purple); }
.efeitos h2 { color: var(--brand-purple-800); font-size: 26px; margin-top: 0; }
.efeitos .grid-2 { align-items: start; gap: 24px; }
.efeitos-img { width: 100%; max-width: 320px; height: auto; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); display: block; }

/* Nao usar (aviso) */
.nao-usar .warn-card { background: var(--brand-cream); border-radius: 16px; padding: 16px 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.nao-usar h2 { margin: 4px 0 10px; color: var(--brand-purple-800); text-align: center; }
.warn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.warn-list li { position: relative; padding-left: 22px; color: #374151; }
.warn-list li::before { content: "❯"; position: absolute; left: 0; top: 0; color: #e11d48; font-weight: 900; }

/* Serve section */
.serve .center { text-align: center; padding: 12px 0 8px; }
.serve .center h2 { color: var(--brand-purple-800); font-size: 28px; margin: 6px 0 4px; }
.serve .lead { color: #4c5567; max-width: 760px; margin: 6px auto 0; font-size: 13.5px; }
.serve-mark { width: 44px; height: 44px; display: block; margin: 0 auto 10px; }
.serve-band { background: var(--brand-cream); padding: 20px 0; }
.feature-bar { background: linear-gradient(180deg, #5B1EB3 0%, #4A1798 100%); color: #fff; border-radius: 18px; padding: 12px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; max-width: 980px; margin: 0 auto; box-shadow: 0 10px 28px rgba(74,23,152,0.28); }
.feature-item { padding: 10px 12px; text-align: center; }
.feature-item h3 { margin: 0 0 2px; font-size: 13px; font-weight: 900; color: #ffffff; letter-spacing: 0.1px; }
.feature-item p { margin: 0; font-size: 11.5px; line-height: 1.35; color: #ede7f6; }
.feature-plus { width: 30px; height: 30px; border-radius: 999px; background: #fff; color: var(--brand-purple); display: grid; place-items: center; font-weight: 900; font-size: 16px; }

@media (max-width: 960px) {
    .feature-bar { grid-template-columns: 1fr; }
    .feature-plus { display: none; }
}

/* Func section */
.func { background: var(--brand-cream); }
.func-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: start; }
.func-media img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.func-copy h2 { color: var(--brand-purple-800); font-size: 30px; }
.func-copy p { color: #4b5563; }
.func-sub { margin-top: 16px; color: var(--brand-purple-800); }
.func-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.func-item { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; text-align: center; }
.func-item h4 { margin: 6px 0; font-size: 16px; color: var(--brand-purple-800); }
.func-item p { margin: 0; font-size: 14px; color: #475569; }
.func-icon { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 999px; background: #efe7fb; color: var(--brand-purple-800); font-size: 18px; font-weight: 700; }

@media (max-width: 960px) {
    .func-grid { grid-template-columns: 1fr; }
    .func-features { grid-template-columns: 1fr; }
}

/* Use timeline */
.use .use-intro { color: #4b5563; max-width: 960px; }
.use-sub { text-align: center; color: var(--brand-purple-800); margin-top: 8px; }
.use-timeline { position: relative; margin-top: 16px; }
.use-line { position: absolute; left: 216px; top: 0; bottom: 0; width: 2px; background: #e11d48; }
.use-step { display: grid; grid-template-columns: 80px 120px 1fr; gap: 16px; align-items: center; position: relative; padding: 16px 0; }
.use-index { font-size: 32px; font-weight: 900; color: #e11d48; text-align: right; padding-right: 12px; }
.use-fig img { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.use-text p { margin: 0; color: #374151; }

@media (max-width: 960px) {
  .use-line { display: none; }
  .use-step { grid-template-columns: 60px 140px 1fr; }
  .use-fig img { width: 120px; height: 80px; }
}

/* Cards and grids */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: #ffffff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card.mini h3 { font-size: 16px; }
.card.mini p { font-size: 14px; color: #475569; }

/* Doses table */
.doses-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.doses-table .row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.doses-table .row.header { background: #eaf2ff; color: #003A6E; font-weight: 700; }
.doses-table .cell { padding: 12px; border-bottom: 1px solid #e2e8f0; }
.doses-table .row:last-child .cell { border-bottom: none; }

/* Products */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product-card { background: #ffffff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: 200px auto; }
.product-media { background: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #475569; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 12px; }
.price { font-weight: 700; color: #0f172a; }

/* Steps */
.steps { counter-reset: step; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.steps li { position: relative; padding-left: 40px; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 12px 40px; }
.steps li::before { content: counter(step); counter-increment: step; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 999px; background: var(--brand-blue); color: #fff; display: grid; place-items: center; font-weight: 700; }

/* FAQ */
.faq details { background: #ffffff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 600; }

/* New FAQ (numbered list) */
.faq2 h2 { text-align: center; color: var(--brand-purple-800); margin-bottom: 12px; }
.qa-list { display: grid; gap: 16px; }
.qa-item { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 6px 12px 10px; box-shadow: 0 6px 16px rgba(0,0,0,0.04); }
.qa-head { display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.qa-head::-webkit-details-marker { display: none; }
.qa-num { width: 32px; height: 32px; border-radius: 999px; background: #ede7f6; color: var(--brand-purple-800); display: grid; place-items: center; font-weight: 900; }
.qa-title { margin: 0; color: var(--brand-purple-800); font-size: 18px; }
.qa-pin { width: 14px; height: 14px; border-radius: 999px; background: var(--brand-purple); justify-self: end; transition: transform .2s ease; }
.qa-body { margin-top: 10px; color: #374151; }
.qa-body ul { margin: 8px 0 0; padding-left: 18px; }
.qa-body li { margin: 2px 0; }

.qa-item[open] .qa-pin { transform: rotate(45deg); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: #ffffff; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.footer-inner a { color: #334155; text-decoration: none; }
.footer-inner a:hover { text-decoration: underline; }

/* Contact section */
.contact .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
.contact-media img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.contact-copy h2 { color: var(--brand-purple-800); margin: 0 0 6px; }
.contact-copy p { color: #475569; margin: 0 0 12px; }
.wa-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: #22c55e; color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 6px 18px rgba(34,197,94,0.28); }
.wa-btn:hover { background: #16a34a; }
.wa-icon { width: 28px; height: 28px; border-radius: 999px; background: #fff; color: #22c55e; display: inline-grid; place-items: center; font-weight: 900; }

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

/* Responsive */
@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-copy h1 { font-size: 32px; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .product-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .nav-toggle { display: inline-flex; }
    .nav-menu { display: none; position: absolute; right: 0; top: 56px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px; flex-direction: column; min-width: 220px; }
    .nav-menu.open { display: flex; }
    .grid-4 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .header-inner { height: 56px; }
    .brand img { height: 36px; }
}

/* Doses flow */
.doses-flow { position: relative; margin-top: 24px; }
.flow-track { position: absolute; left: 0; right: 0; top: 72px; height: 2px; background: #e5e7eb; }
.flow-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; position: relative; }
.flow-step { text-align: center; position: relative; padding-top: 24px; }
.flow-step .pin { width: 10px; height: 10px; background: #6b7280; border-radius: 999px; position: absolute; top: 68px; left: 50%; transform: translateX(-50%); border: 3px solid #fff; box-shadow: 0 0 0 2px #e5e7eb; }
.dose-badge { display: inline-block; min-width: 96px; padding: 10px 12px; border-radius: 12px; color: #fff; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.dose-badge .dose { font-size: 18px; line-height: 1; }
.dose-badge .dose span { font-size: 12px; font-weight: 700; }
.dose-badge .sub { font-size: 11px; font-weight: 600; opacity: 0.9; }
.dose-gray { background: #6b7280; }
.dose-purple { background: #7c3aed; }
.dose-green { background: #10b981; }
.dose-pink { background: #ec4899; }
.dose-blue { background: #3b82f6; }
.dose-red { background: #ef4444; }
.mini { margin-top: 8px; padding: 6px 10px; font-size: 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.08); background: #f8fafc; color: #334155; cursor: default; }
.mini-green { background: #dcfce7; color: #166534; border-color: #86efac; }
.mini-outline { background: #fff; color: #ef4444; border-color: #fecaca; }
.month { margin-top: 8px; font-size: 12px; color: #64748b; font-weight: 600; }

@media (max-width: 960px) {
  .flow-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .flow-track { display: none; }
}


/* Back to top button */
#back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
    color: #111827;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    z-index: 100;
}
#back-to-top:hover { background: #f8fafc; }
#back-to-top.show { display: inline-flex; }

/* Extra small screens */
@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .header-inner { height: 52px; }
    .brand img { height: 32px; }

    .hero { padding: 40px 0 24px; }
    .hero-copy h1 { font-size: 28px; }
    .hero-inner { gap: 16px; }
    .hero-copy p { font-size: 14px; }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .badges { gap: 8px; }
    .badges li { font-size: 12px; padding: 6px 10px; }

    .func-copy h2 { font-size: 24px; }
    .func-item h4 { font-size: 15px; }
    .func-item p { font-size: 13px; }

    .product-card { grid-template-rows: 160px auto; }

    .footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .footer-inner .disclaimer, .footer-inner .links { text-align: left; }

    #back-to-top { right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* Media elements should not overflow */
img, video { max-width: 100%; height: auto; }