/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

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

/* Header */
.header {
    background-color: #000;
    color: #fff;
    padding: 15px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 40px;
}

.promo-text {
    font-weight: 700;
    font-size: 18px;
    color: #ffd700;
}

/* Banner Principal */
.main-banner {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #000;
    padding: 30px 0;
}

.banner-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: center;
}

.banner-left h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.banner-left p {
    font-size: 16px;
    line-height: 1.5;
}

.payment-info h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.payment-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    
}

.payment-banner {
    max-width: 100%;
    height: auto;
    margin-top: 10px;

}

.payment-card {
    width: 50px;
    height: 32px;
    border-radius: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.payment-card.visa {
    background-color: #1a1f71;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Ctext x='50%25' y='50%25' fill='white' text-anchor='middle' dy='.3em' font-family='Arial' font-size='8' font-weight='bold'%3EVISA%3C/text%3E%3C/svg%3E");
}

.payment-card.mastercard {
    background-color: #eb001b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Ctext x='50%25' y='50%25' fill='white' text-anchor='middle' dy='.3em' font-family='Arial' font-size='6' font-weight='bold'%3EMaster%3C/text%3E%3C/svg%3E");
}

.payment-card.amex {
    background-color: #006fcf;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Ctext x='50%25' y='50%25' fill='white' text-anchor='middle' dy='.3em' font-family='Arial' font-size='7' font-weight='bold'%3EAMEX%3C/text%3E%3C/svg%3E");
}

.payment-card.elo {
    background-color: #ffcb05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Ctext x='50%25' y='50%25' fill='black' text-anchor='middle' dy='.3em' font-family='Arial' font-size='8' font-weight='bold'%3EELO%3C/text%3E%3C/svg%3E");
}

.payment-card.pix {
    background-color: #32bcad;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Ctext x='50%25' y='50%25' fill='white' text-anchor='middle' dy='.3em' font-family='Arial' font-size='8' font-weight='bold'%3EPIX%3C/text%3E%3C/svg%3E");
}

/* Benefícios */
.benefits {
    background-color: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}

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

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.benefit-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.benefit-icon.delivery {
    background-color: #28a745;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19 7h-3V6a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h1.5a2.5 2.5 0 0 0 5 0h3a2.5 2.5 0 0 0 5 0H21a1 1 0 0 0 1-1v-4a1 1 0 0 0-.293-.707l-2-2A1 1 0 0 0 19 7zM9 17.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm8 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1z'/%3E%3C/svg%3E");
}

.benefit-icon.credit-card {
    background-color: #007bff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM4 6h16v2H4V6zm0 4h16v8H4v-8z'/%3E%3C/svg%3E");
}

.benefit-icon.secure {
    background-color: #ffc107;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
}

.benefit-icon.whatsapp {
    background-color: #25d366;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488'/%3E%3C/svg%3E");
}

.benefit-text h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}

.benefit-text p {
    font-size: 12px;
    color: #666;
}

/* Oferta Principal */
.main-offer {
    background-color: #fff;
    padding: 60px 0;
}

.offer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.offer-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.offer-text h2 {
    font-size: 48px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
}

.offer-text h3 {
    font-size: 36px;
    font-weight: 800;
    color: #ff6b35;
    margin-bottom: 30px;
}

.offer-text p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.free-pot-highlight {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #2196f3;
    text-align: center;
}

.free-pot-highlight p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.strikethrough {
    text-decoration: line-through;
    color: #999;
}

.free-text {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #4caf50 !important;
}

/* Kits de Produtos */
.product-kits {
    background-color: #f8f9fa;
    padding: 60px 0;
}

.kit-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.kit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.kit-card.featured {
    border: 3px solid #ffd700;
}

.kit-card.popular {
    border: 3px solid #ff6b35;
}

.popular-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff6b35;
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}

.kit-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    padding: 30px;
    align-items: center;
}

.kit-image img {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.discount-badge {
    background: #28a745;
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
}

.no-discount-badge {
    background: #6c757d;
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
}

.kit-info h3 {
    font-size: 24px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
}

.economy {
    font-size: 16px;
    color: #28a745;
    font-weight: 600;
    margin-bottom: 20px;
}

.free-pot {
    font-size: 16px;
    color: #ff6b35;
    font-weight: 600;
    margin-bottom: 20px;
}

.delivery-info, .kit-content {
    margin-bottom: 20px;
}

.delivery-info h4, .kit-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.delivery-info p, .kit-content p {
    font-size: 14px;
    color: #666;
}

.kit-pricing {
    background: #f8f9fa;
    padding: 30px;
    border-top: 1px solid #eee;
}

.price-info {
    margin-bottom: 20px;
}

.original-price {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.installment {
    font-size: 28px;
    color: #28a745;
    font-weight: 900;
    margin-bottom: 10px;

}

.discounted-price {
    font-size: 18px;
    color: #666;
    font-weight: 600;
    margin-bottom: 5px;
}

.payment-note {
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
}

.buy-button {
    width: 100%;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.buy-button:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

/* Garantia */
.guarantee {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    padding: 60px 0;
    color: #000;
}

.guarantee-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
}

.guarantee-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.guarantee-text h2 {
    font-size: 32px;
    font-weight: 800;
    color: #333;
    margin-bottom: 20px;
}

.guarantee-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.guarantee-text a {
    color: #007bff;
    text-decoration: none;
}

.guarantee-text a:hover {
    text-decoration: underline;
}

/* Footer */
.footer {
  background-color: #000;
  color: #ccc;
  padding: 40px 20px;
}

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

.footer-section h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffd700;
}

.footer-section p,
.footer-section li {
  font-size: 14px;
  line-height: 1.6;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
  color: #ffd700;
}

.security-seals img {
  max-height: 80px;
  margin-right: 10px;
}

.footer-copy {
  text-align: center;
  font-size: 12px;
  color: #777;
}


/* Responsividade */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .promo-text {
        font-size: 16px;
    }
    
    .banner-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .banner-left h2 {
        font-size: 20px;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .offer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .offer-text h2 {
        font-size: 36px;
    }
    
    .offer-text h3 {
        font-size: 28px;
    }
    
    .kit-header {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    
    .guarantee-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .guarantee-text h2 {
        font-size: 24px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .offer-text h2 {
        font-size: 28px;
    }
    
    .offer-text h3 {
        font-size: 24px;
    }
    
    .kit-info h3 {
        font-size: 20px;
    }
    
    .discounted-price {
        font-size: 16px;
    }
    
    .installment {
        font-size: 20px;
        font-weight: 800;
        color: #28a745;
    }
    
    .buy-button {
        font-size: 16px;
        padding: 12px 24px;
    }
    
    .kit-pricing {
        text-align: center;
    }

    .buy-button {
        width: auto; /* para o botão não ficar 100% da largura */
        display: inline-block; /* centraliza o botão */
    }
}