/* Reset básico e fontes */
body, h1, h2, h3, p, button, input, select, label, span, strong, div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.3;
}

body {
    background-color: #f8f5f5;
    color: #333;
    font-size: 16px;
}

/* Ícones */
.input-icon,
.select-arrow,
.advantage-icon i,
.feature-icon,
.title-icon-container .fa-layers {
    display: inline-block;
    vertical-align: middle;
}

.h-14 {
    height: 6.5rem !important;
}

/* --- Cabeçalho Responsivo Corrigido --- */

.responsive-header {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;

    /* Define a imagem padrão (Mobile First) */
    /* ATENÇÃO: Confirme se o nome do seu arquivo de imagem mobile é 'header.jpg' */
    background-image: url('header.jpg');
}

.header-aspect-ratio {
    display: block;
    width: 100%;
    /* Valor calculado para a imagem mobile: (745 / 750) * 100 = 99.33% */
    padding-top: 99.33%;
}

/* Media Query para telas maiores (PCs - a partir de 768px) */
@media (min-width: 768px) {
    .responsive-header {
        /* Troca a imagem para a versão de PC */
        /* ATENÇÃO: Confirme se o nome do seu arquivo de imagem desktop é 'header-pc.png' */
        background-image: url('header-pc.png');
    }

    .header-aspect-ratio {
        /* Valor calculado para a imagem de PC: (220 / 1200) * 100 = 18.33% */
        padding-top: 18.33%;
    }
}

/* --- Fim do Cabeçalho Responsivo --- */

/* Área principal */
.content-area { padding: 10px 15px; }


/* Planos */
.plans { text-align: center; padding-top: 20px; padding-bottom: 20px; }
.plans h2 { color: #d9232d; margin-bottom: 25px; font-size: 1.5em; font-weight: bold; line-height: 1.2; }
.plan-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.plan-card { background-color: #d9232d; color: #fff; border-radius: 8px; padding: 15px 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; }
.plan-card h3 { font-size: 1.5em; font-weight: bold; margin-bottom: 5px; }
.plan-card .per-month { font-size: 0.7em; font-weight: normal; }
.plan-card p { font-size: 0.85em; line-height: 1.3; margin-bottom: 10px; flex-grow: 1; }
.plan-card p strong { font-size: 1.1em; font-weight: bold; }
.plan-card button { background-color: #fff; color: #d9232d; border: none; padding: 10px 15px; font-size: 0.9em; font-weight: bold; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; align-self: center; width: 90%; }
.plan-card button:hover { background-color: #eee; }

/* Vantagens */
.advantages { padding-top: 20px; padding-bottom: 20px; }
.advantages h2 { text-align: center; margin-bottom: 30px; color: #333; font-size: 1.5em; font-weight: bold; }
.advantages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 15px; align-items: start; }
.advantage-item { display: flex; align-items: center; gap: 10px; }
.advantage-item.advantage-item-fullwidth { grid-column: 1 / -1; }
.advantage-icon { font-size: 2.2em; color: #d9232d; flex-shrink: 0; line-height: 1; text-align: center; width: 1.5em; }
.advantage-icon i { color: #d9232d; }
.advantage-text h3 { font-size: 1.1em; margin-bottom: 5px; color: #333; font-weight: bold; }
.advantage-text p { font-size: 0.9em; line-height: 1.4; color: #555; }

/* Formulário de Contato */
.contact-form-section { padding-top: 20px; padding-bottom: 20px; }
.form-title-container { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.contact-form-section h2 {  color: #d9232d; font-size: 1.6em; font-weight: bold; line-height: 1.1; margin: 0; }

/* === CONTAINER DO ÍCONE DO TÍTULO ATUALIZADO === */
.title-icon-container {
    background-color: #d9232c00;
    color: white;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.title-icon-image {
    display: block;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
/* === FIM DA ATUALIZAÇÃO DO ÍCONE === */

.form-container { background-color: #fff; padding: 25px 25px 30px 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.contact-form-section form { display: flex; flex-direction: column; gap: 0; }

.input-group { display: flex; align-items: center; border-bottom: 1px solid #eee; margin-bottom: 18px; padding-bottom: 12px; position: relative; }
.input-group:last-of-type { margin-bottom: 30px; }

.input-icon { color: #999; font-size: 1.1em; margin-right: 15px; flex-shrink: 0; text-align: center; width: 1.2em; }

.contact-form-section input[type="text"],
.contact-form-section input[type="email"],
.contact-form-section input[type="tel"],
.contact-form-section select.custom-select {
    width: 100%;
    border: none;
    background-color: transparent;
    padding: 5px 0;
    padding-left: 45px;
    font-size: 1em;
    color: #333;
    flex-grow: 1;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.contact-form-section input::placeholder { color: #aaa; font-size: 0.95em; }

.custom-select:required:invalid { color: #aaa; font-size: 0.95em; }
.custom-select option { color: #333; font-size: 1em; }

.input-group-select { position: relative; }
.select-arrow { color: #999; font-size: 0.9em; margin-left: 10px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }

.contact-form-section button[type="submit"] { background-color: #d9232d; color: #fff; border: none; padding: 15px; font-size: 1.1em; font-weight: bold; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; width: 100%; margin-top: 10px; }
.contact-form-section button[type="submit"]:hover { background-color: #b01d25; }

/* Rodapé */
footer { text-align: center; padding: 25px 15px; background-color: #33333300; color: #ccc; }
.footer-logo { max-width: 250px; height: auto; margin-bottom: 8px; }
footer p { font-size: 0.85em; color: #fff; margin-bottom: 5px; font-weight: bold; letter-spacing: 0.5px; }
footer span { font-size: 0.8em; color: #aaa; }

/* Media Queries */
@media (min-width: 768px) {
    .plan-container { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .advantages-grid { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
    .advantage-item.advantage-item-fullwidth { grid-column: auto; }
    .form-title-container { flex-wrap: nowrap; }
}