* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
body { background: #f5f2f2; color: #111; }

.hero { 
    max-width: 500px; 
    margin: 0 auto; 
    background: #f7f3f0; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    position: relative;
}

/* HEADER COMPACTO */
.top { 
    background: linear-gradient(180deg, #4a0012, #60051b); 
    color: #fff; 
    text-align: center; 
    padding: 12px 10px 10px;
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}
.top-header .fire { font-size: 1.4rem; }
.top h1 { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.5px; line-height: 1; }
.top p { font-size: 0.65rem; opacity: .6; letter-spacing: 1px; margin-top: 2px; }

.countdown-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 4px;
}
.top h2 { font-size: 0.65rem; font-weight: bold; opacity: 0.9; }
.countdown { display: flex; align-items: center; gap: 4px; }
.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 26px; }
.countdown span { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.countdown small { font-size: .42rem; opacity: 0.7; margin-top: 1px; }
.separator { font-size: 0.85rem; font-weight: bold; line-height: 1; margin-bottom: 4px; opacity: 0.4; }

.limited { 
    margin-top: 4px; 
    border-top: 1px solid rgba(255,255,255,.15); 
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.65rem;
}
.limited svg { opacity: 0.8; width: 11px; height: 11px; }
.limited strong { font-weight: 800; }

/* ÁREA DE CONTEÚDO INTEGRADA COM A MODELO DE FUNDO */
.content { 
    padding: 30px 20px 20px;
    /* Transformamos a modelo em imagem de fundo posicionada na direita inferior */
    background-image: url('modelo.png');
    background-repeat: no-repeat;
    /* Ajustado o recuo para a direita (-20px) para afastar a sacola do texto */
    background-position: right -20px bottom 70px; 
    background-size: 260px auto; /* Tamanho perfeito da modelo */
}

.brand { 
    font-size: 0.75rem;
    letter-spacing: 3px; 
    color: #8c6d75; 
    margin-bottom: 12px; 
    font-weight: bold;
}

/* AJUSTE AQUI: Texto encurtado para forçar a quebra perfeita antes da sacola */
.content h3 { 
    font-size: 1.45rem; 
    line-height: 1.15; 
    font-weight: 800;
    color: #1a1a1a;
    max-width: 145px; /* Reduzido de 200px para 165px para o "COM ATÉ" quebrar de linha antes */
}
.content h3 span { color: #a6264e; }

/* AJUSTE AQUI: Texto descritivo encurtado para acompanhar o mesmo alinhamento sutil */
.text { 
    margin: 15px 0 0px; 
    font-size: 0.85rem; 
    line-height: 1.4; 
    color: #4a4a4a;
    max-width: 165px; /* Reduzido de 180px para 165px */
}

/* Ocultamos a tag img antiga do HTML para ela não duplicar ou empurrar o botão */
.img-modelo-flutuante, .model-box {
    display: none !important;
}

/* BOTÃO TOTALMENTE GRUDADO NA BASE DA IMAGEM */
.cta-wrapper {
    margin-top: 25px; /* Espaço exato para o botão nascer logo abaixo das sacolas */
    padding: 0 0px 10px;
}

.cta { 
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #4a0d20; 
    color: #fff; 
    text-decoration: none; 
    padding: 15px 20px; 
    border-radius: 50px; 
    font-size: 0.95rem; 
    font-weight: 700; 
    width: 100%;
    box-shadow: 0 6px 20px rgba(74, 13, 32, 0.4);
}
.cta svg { width: 16px; height: 16px; }

/* SEÇÃO DE BENEFÍCIOS TOTALMENTE COLADA */
.benefits-wrapper {
    background: #f7f3f0;
    padding: 20px;
    border-top: 1px solid rgba(0,0,0,0.03);
}

h4 { 
    text-align: center; 
    letter-spacing: 3px; 
    color: #8a7076; 
    margin-bottom: 25px; 
    font-size: 0.8rem;
    font-weight: 700;
}

.benefits { 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card { 
    text-align: center; 
    padding-bottom: 20px; 
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card:last-child { border-bottom: none; }

.icon-circle {
    width: 48px;
    height: 48px;
    background-color: #4a0d20;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}
.icon-circle svg { width: 18px; height: 18px; }

.card h5 { font-size: 0.95rem; margin-bottom: 6px; font-weight: 800; color: #222; }
.card p { font-size: 0.85rem; color: #666; line-height: 1.35; }

@media(min-width: 769px) {
    .hero { max-width: 450px; border-radius: 20px; margin: 20px auto; }
}