/* ============================================================
   MEI.br.com — style.css (Versao 3 Bold Modern)
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Space Grotesk',system-ui,sans-serif; color:#1a1a2e; background:#fff; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }

/* --- Header --- */
.header { background:#fff; padding:14px 0; position:sticky; top:0; z-index:100; box-shadow:0 1px 0 rgba(0,0,0,0.06); }
.header-inner { max-width:1100px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
.header-logo { height:44px; padding:8px 14px; background:#0b3d2e; border-radius:10px; object-fit:contain; }
.header nav { display:flex; align-items:center; gap:0; }
.header nav a { color:#1a1a2e; font-size:14px; font-weight:500; margin-left:28px; transition:color .2s; }
.header nav a:hover { color:#0b3d2e; }
.nav-cta { background:#0b3d2e !important; color:#fff !important; padding:10px 22px !important; border-radius:8px !important; font-weight:600 !important; }
.nav-cta:hover { background:#145a3e !important; }

/* --- Hero (Index) --- */
.hero { background:#0b3d2e; padding:80px 24px 100px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-50%; right:-20%; width:600px; height:600px; background:radial-gradient(circle, rgba(245,197,24,0.15) 0%, transparent 70%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-50%; left:-20%; width:500px; height:500px; background:radial-gradient(circle, rgba(26,122,82,0.3) 0%, transparent 70%); pointer-events:none; }
.hero-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; position:relative; z-index:2; }
.hero-text h1 { font-family:'Outfit',sans-serif; font-size:clamp(32px,4.5vw,52px); font-weight:900; color:#fff; line-height:1.08; margin-bottom:20px; }
.hero-text h1 .highlight { display:inline-block; background:#f5c518; color:#0b3d2e; padding:2px 14px; border-radius:6px; transform:rotate(-1deg); }
.hero-text p { color:rgba(255,255,255,0.6); font-size:17px; line-height:1.6; margin-bottom:36px; }
.search-box { display:flex; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 24px 48px rgba(0,0,0,0.2); }
.search-box input { flex:1; border:none; padding:20px 24px; font-size:16px; font-family:inherit; outline:none; color:#1a1a2e; min-width:0; }
.search-box input::placeholder { color:#aaa; }
.search-box button { background:#f5c518; border:none; padding:20px 32px; font-size:15px; font-weight:700; color:#0b3d2e; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .2s; }
.search-box button:hover { background:#e0b400; }
.hero-hint { color:rgba(255,255,255,0.3); font-size:13px; margin-top:12px; }
.hero-right { display:flex; flex-direction:column; align-items:center; gap:20px; }
.hero-right > img { width:100%; max-width:380px; }
.price-badge { background:rgba(245,197,24,0.15); border:2px solid rgba(245,197,24,0.3); border-radius:16px; padding:20px 32px; text-align:center; }
.price-badge .from { color:rgba(255,255,255,0.5); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; }
.price-badge .amount { font-family:'Outfit',sans-serif; font-size:44px; font-weight:900; color:#f5c518; }
.price-badge .amount small { font-size:24px; }
.price-badge .unit { color:rgba(255,255,255,0.4); font-size:14px; }

/* --- Features (Index) --- */
.features { padding:80px 24px; background:#f8faf9; }
.features-inner { max-width:1100px; margin:0 auto; }
.features h2 { font-family:'Outfit',sans-serif; font-size:36px; font-weight:800; text-align:center; margin-bottom:48px; color:#0b3d2e; }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#e0e0e0; border-radius:20px; overflow:hidden; }
.feat { background:#fff; padding:40px 32px; }
.feat-emoji { font-size:32px; margin-bottom:16px; }
.feat h3 { font-size:18px; font-weight:700; color:#0b3d2e; margin-bottom:8px; }
.feat p { color:#666; font-size:14px; line-height:1.6; }
.feat .feat-price { margin-top:16px; font-family:'Outfit',sans-serif; font-size:28px; font-weight:800; color:#0b3d2e; }
.feat .feat-price span { color:#f5c518; }

/* --- Banner --- */
.banner { background:linear-gradient(90deg,#f5c518,#e0b400); padding:48px 24px; text-align:center; }
.banner h2 { font-family:'Outfit',sans-serif; font-size:28px; font-weight:800; color:#0b3d2e; margin-bottom:8px; }
.banner p { color:rgba(11,61,46,0.7); margin-bottom:24px; }
.banner-btn { display:inline-block; background:#0b3d2e; color:#fff; padding:16px 36px; border-radius:10px; font-weight:700; font-size:16px; transition:background .2s; }
.banner-btn:hover { background:#145a3e; }

/* --- Result Page --- */
.result-page { padding:60px 24px 80px; background:#f8faf9; min-height:60vh; }
.result-container { max-width:800px; margin:0 auto; }
.result-card { text-align:center; padding:48px 32px; background:#fff; border-radius:20px; box-shadow:0 4px 24px rgba(0,0,0,0.06); margin-bottom:32px; }
.result-card.success { border-top:4px solid #0b3d2e; }
.result-icon { font-size:56px; color:#0b3d2e; margin-bottom:16px; font-weight:900; }
.result-card h1 { font-family:'Outfit',sans-serif; font-size:24px; font-weight:700; color:#1a1a2e; margin-bottom:8px; }
.result-card h1 strong { color:#0b3d2e; }
.result-card p { color:#666; font-size:16px; }
.result-options { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.result-option { background:#fff; border-radius:16px; padding:32px 24px; text-align:center; box-shadow:0 4px 24px rgba(0,0,0,0.06); position:relative; border:2px solid transparent; transition:border-color .2s; }
.result-option:hover { border-color:#0b3d2e; }
.result-option.combo { border-color:#f5c518; }
.combo-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#f5c518; color:#0b3d2e; font-size:12px; font-weight:700; padding:4px 16px; border-radius:20px; white-space:nowrap; }
.result-option h3 { font-family:'Outfit',sans-serif; font-size:20px; font-weight:700; margin-bottom:8px; color:#0b3d2e; }
.result-option p { color:#666; font-size:14px; margin-bottom:16px; }
.result-price { font-family:'Outfit',sans-serif; font-size:32px; font-weight:800; color:#0b3d2e; margin-bottom:20px; }
.btn-primary, .btn-combo { display:inline-block; padding:14px 28px; border-radius:10px; font-weight:700; font-size:15px; transition:all .2s; }
.btn-primary { background:#0b3d2e; color:#fff; }
.btn-primary:hover { background:#145a3e; }
.btn-combo { background:#f5c518; color:#0b3d2e; }
.btn-combo:hover { background:#e0b400; }

/* --- Form Page (Cadastro) --- */
.form-page { padding:60px 24px 80px; background:#f8faf9; min-height:60vh; }
.form-container { max-width:960px; margin:0 auto; display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; }
.form-main { background:#fff; border-radius:20px; padding:40px 36px; box-shadow:0 4px 24px rgba(0,0,0,0.06); }
.form-main h1 { font-family:'Outfit',sans-serif; font-size:24px; font-weight:800; color:#0b3d2e; margin-bottom:28px; }
.form-erro { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:12px 16px; border-radius:10px; margin-bottom:20px; font-size:14px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:6px; }
.form-group input, .form-group select { width:100%; padding:14px 16px; border:2px solid #e5e7eb; border-radius:10px; font-size:15px; font-family:inherit; color:#1a1a2e; transition:border-color .2s; outline:none; background:#fff; }
.form-group input:focus, .form-group select:focus { border-color:#0b3d2e; }
.form-group input.readonly { background:#f3f4f6; color:#666; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.btn-submit { width:100%; padding:18px; background:#0b3d2e; color:#fff; border:none; border-radius:12px; font-size:17px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .2s; margin-top:8px; }
.btn-submit:hover { background:#145a3e; }
.form-sidebar { background:#0b3d2e; border-radius:20px; padding:32px 24px; color:#fff; position:sticky; top:100px; }
.form-sidebar h3 { font-family:'Outfit',sans-serif; font-size:18px; font-weight:700; margin-bottom:20px; }
.sidebar-item { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.1); font-size:14px; }
.sidebar-item span:first-child { color:rgba(255,255,255,0.6); }
.sidebar-total { display:flex; justify-content:space-between; padding:16px 0 0; font-size:20px; font-weight:700; color:#f5c518; }
.sidebar-domain { margin-top:16px; padding:12px; background:rgba(245,197,24,0.1); border:1px solid rgba(245,197,24,0.3); border-radius:10px; text-align:center; font-weight:600; font-size:15px; color:#f5c518; word-break:break-all; }

/* --- Payment Page --- */
.payment-page { padding:60px 24px 80px; background:#f8faf9; min-height:60vh; }
.payment-container { max-width:960px; margin:0 auto; display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; }
.payment-main { background:#fff; border-radius:20px; padding:40px 36px; box-shadow:0 4px 24px rgba(0,0,0,0.06); }
.payment-main h1 { font-family:'Outfit',sans-serif; font-size:24px; font-weight:800; color:#0b3d2e; margin-bottom:8px; }
.payment-subtitle { color:#666; margin-bottom:32px; font-size:16px; }
.pix-section { display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap; margin-bottom:32px; }
.qr-placeholder { flex-shrink:0; }
.qr-box { border:2px dashed #ddd; border-radius:16px; padding:16px; display:inline-block; }
.pix-code-section { flex:1; min-width:240px; }
.pix-code-section label { display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:8px; }
.pix-code-box { display:flex; gap:8px; }
.pix-code-box input { flex:1; padding:14px 16px; border:2px solid #e5e7eb; border-radius:10px; font-size:12px; font-family:monospace; color:#666; outline:none; background:#f9fafb; }
.pix-code-box button { padding:14px 20px; background:#0b3d2e; color:#fff; border:none; border-radius:10px; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; transition:background .2s; }
.pix-code-box button:hover { background:#145a3e; }
.payment-info { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; padding:20px; }
.payment-info p { color:#166534; font-size:14px; line-height:1.6; margin-bottom:4px; }
.payment-info p:last-child { margin-bottom:0; }
.payment-sidebar { background:#0b3d2e; border-radius:20px; padding:32px 24px; color:#fff; position:sticky; top:100px; }
.payment-sidebar h3 { font-family:'Outfit',sans-serif; font-size:18px; font-weight:700; margin-bottom:20px; }

/* --- Servicos Page --- */
.servicos-hero { background:#0b3d2e; padding:80px 24px; text-align:center; position:relative; overflow:hidden; }
.servicos-hero::before { content:''; position:absolute; top:-30%; right:-10%; width:500px; height:500px; background:radial-gradient(circle, rgba(245,197,24,0.12) 0%, transparent 70%); pointer-events:none; }
.servicos-hero-inner { position:relative; z-index:2; max-width:700px; margin:0 auto; }
.servicos-hero h1 { font-family:'Outfit',sans-serif; font-size:clamp(28px,4vw,44px); font-weight:900; color:#fff; line-height:1.1; margin-bottom:20px; }
.servicos-hero p { color:rgba(255,255,255,0.6); font-size:17px; margin-bottom:36px; line-height:1.6; }
.btn-primary-lg { display:inline-block; background:#f5c518; color:#0b3d2e; padding:18px 40px; border-radius:12px; font-size:17px; font-weight:800; transition:background .2s; }
.btn-primary-lg:hover { background:#e0b400; }
.servicos-details { padding:80px 24px; }
.servicos-inner { max-width:1000px; margin:0 auto; }
.servicos-inner h2 { font-family:'Outfit',sans-serif; font-size:32px; font-weight:800; color:#0b3d2e; text-align:center; margin-bottom:48px; }
.servicos-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-bottom:60px; }
.servico-card { background:#f8faf9; border-radius:16px; padding:32px 24px; text-align:center; border:1px solid #e5e7eb; transition:border-color .2s, box-shadow .2s; }
.servico-card:hover { border-color:#0b3d2e; box-shadow:0 8px 32px rgba(0,0,0,0.08); }
.servico-icon { font-size:36px; margin-bottom:16px; }
.servico-card h3 { font-size:17px; font-weight:700; color:#0b3d2e; margin-bottom:8px; }
.servico-card p { color:#666; font-size:14px; line-height:1.6; }
.servicos-cta { text-align:center; }
.servicos-price-card { display:inline-block; background:#0b3d2e; border-radius:20px; padding:40px 48px; text-align:center; color:#fff; }
.price-label { font-size:14px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; }
.price-value { font-family:'Outfit',sans-serif; font-size:48px; font-weight:900; color:#f5c518; margin-bottom:4px; }
.price-desc { color:rgba(255,255,255,0.5); font-size:14px; margin-bottom:24px; }
.servicos-cta .btn-primary { font-size:17px; padding:16px 40px; }

/* --- Footer --- */
footer { background:#071f17; padding:40px 24px; text-align:center; }
footer .footer-logo { height:36px; padding:6px 10px; background:rgba(255,255,255,0.05); border-radius:8px; margin-bottom:16px; object-fit:contain; }
footer p { color:rgba(255,255,255,0.3); font-size:12px; line-height:1.8; }

/* --- Responsive --- */
@media (max-width:768px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-text p { margin-bottom:28px; }
  .hero-right { margin-top:20px; }
  .hero-right > img { max-width:260px; }
  .feat-grid { grid-template-columns:1fr; }
  .result-options { grid-template-columns:1fr; }
  .form-container { grid-template-columns:1fr; }
  .form-sidebar { position:static; }
  .form-row { grid-template-columns:1fr; }
  .payment-container { grid-template-columns:1fr; }
  .payment-sidebar { position:static; }
  .pix-section { flex-direction:column; align-items:center; }
  .servicos-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .header nav a:not(.nav-cta) { display:none; }
  .search-box { flex-direction:column; border-radius:14px; }
  .search-box button { border-radius:0 0 14px 14px; }
  .servicos-grid { grid-template-columns:1fr; }
}


/* --- Result Page: Warning & Error states --- */
.result-card.warning { border-top:4px solid #f5c518; }
.result-card.error { border-top:4px solid #dc2626; }

.result-retry { max-width:580px; margin:0 auto 32px; }
.search-box-retry { display:flex; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.08); border:2px solid #e5e7eb; }
.search-box-retry input { flex:1; border:none; padding:18px 24px; font-size:16px; font-family:inherit; outline:none; color:#1a1a2e; min-width:0; }
.search-box-retry input::placeholder { color:#aaa; }
.search-box-retry button { background:#0b3d2e; border:none; padding:18px 28px; font-size:15px; font-weight:700; color:#fff; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .2s; }
.search-box-retry button:hover { background:#145a3e; }

.result-suggestions { max-width:580px; margin:0 auto; background:#fff; border-radius:16px; padding:28px 32px; box-shadow:0 4px 24px rgba(0,0,0,0.06); }
.result-suggestions p { font-weight:700; color:#0b3d2e; margin-bottom:12px; font-size:15px; }
.result-suggestions ul { list-style:none; padding:0; }
.result-suggestions li { padding:8px 0; color:#666; font-size:14px; border-bottom:1px solid #f3f4f6; }
.result-suggestions li:last-child { border-bottom:none; }
.result-suggestions li::before { content:'\2192'; margin-right:10px; color:#0b3d2e; font-weight:700; }