/* Variáveis CSS para cores */
:root {
    --primary-color: #38e07b;
    --secondary-color: #111714;
    --background-color: #ffffff;
    --accent-color: #f0f4f2;
    --neutral-color: #648772;
    --header-bg-color: #1a1a1a;
    --header-text-color: #ffffff;
    --Red-color: #e80202;
    --greenlite-color: #929292;
    --primary-color-rgb: 56, 224, 123;
    /* Helper para cores RGB para opacidade no hover */

    /* Cores usadas no HTML para o corpo e texto principal */
    --body-bg-color: var(--background-color);
    --main-text-color: var(--secondary-color);
    --gray-bg-color: #f9fafb;
    /* Equivalente a bg-gray-50 */
    --text-gray-color: #4b5563;
    /* Equivalente a text-gray-600 */
    --text-dark-gray-color: #1f2937;
    /* Equivalente a text-gray-900 */
    --white-bg-color: #ffffff;
    /* Para seções bg-white */
}

/* ------------------------------------- */
/* ESTILOS BASE (MOBILE-FIRST) - Aplicam-se a todos os tamanhos de tela por padrão */
/* ------------------------------------- */

/* Estilo base para o corpo da página */
body {
    font-family: "Be Vietnam Pro", "Noto Sans", sans-serif;
    background-color: var(--body-bg-color);
    color: var(--main-text-color);
    margin: 0;
    padding: 0;
}

/* Base layout classes */
.site-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.layout-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

.main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Shared container for content within sections */
.container-content {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
}

/* --- Header --- */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* ALTERADO */
    white-space: nowrap;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    /* ALTERADO */
    padding-bottom: 0.75rem;
    /* ALTERADO */
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
}

.header-logo-container {
    display: flex;
    align-items: center;
}

.header-logo {
    height: 2.5rem;
    /* ALTERADO */
}

.header-whatsapp-container {
    display: flex;
    align-items: center;
}

.whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 120px;
    max-width: 480px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 9999px;
    height: 2.5rem;
    /* ALTERADO */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: 0.875rem;
    /* ALTERADO */
    font-weight: 700;
    letter-spacing: 0.015em;
    transition: background-color 0.15s ease-in-out;
    margin-left: 1rem;
    text-decoration: none;
}

.whatsapp-button:hover {
    background-color: rgba(var(--primary-color-rgb), 0.9);
}

/* --- Hero Section (Motos) --- */
.hero-section {
    width: 100%;
    background-image: url("./images/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: calc(100vh - 64px);
    /* ALTERADO */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-title {
    font-size: 2.25rem;
    font-weight: 900;
    color: white;
    line-height: 1.25;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hero-description {
    font-size: 1.125rem;
    color: #e2e8f0;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hero-button {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-size: 1.125rem;
    transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

.hero-button:hover {
    background-color: rgba(var(--primary-color-rgb), 0.9);
    transform: scale(1.05);
}

.hidden-sm {
    display: none;
}

/* --- About Section (Sobre Nós e Teq Motors Shineray) --- */
.about-section {
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: var(--white-bg-color);
    padding-top: 2.5rem;
    /* ALTERADO */
    padding-bottom: 2.5rem;
    /* ALTERADO */
}

.bg-white-section {
    background-color: var(--white-bg-color);
}

.section-title {
    color: var(--secondary-color);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-align: center;
}

.section-paragraph {
    color: var(--secondary-color);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625;
    margin-top: 1.5rem;
    text-align: center;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.section-location {
    margin-top: 1.5rem;
    color: var(--secondary-color);
    font-size: 0.875rem;
    text-align: center;
}

.font-bold-br {
    font-weight: 400;
    display: block;
}

/* Stats Grid */
.stats-grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
}

.stat-item {
    padding: 1rem;
    background-color: var(--gray-bg-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

.stat-number {
    color: var(--Red-color);
    font-size: 2.25rem;
    font-weight: 700;
}

.stat-label {
    color: var(--secondary-color);
    font-size: 1rem;
    /* ALTERADO */
    margin-top: 0.5rem;
}

/* --- Location Section --- */
.location-section {
    width: 100%;
    padding-top: 2.5rem;
    /* ALTERADO */
    padding-bottom: 2.5rem;
    /* ALTERADO */
    background-color: var(--accent-color);
}

.location-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.location-title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-dark-gray-color);
}

.location-description {
    max-width: 42rem;
    font-size: 1.125rem;
    color: var(--text-gray-color);
}

.map-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
}

.map-image {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.map-caption {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-gray-color);
}

/* --- Instagram Stores Section (Lojas em Tocantins) --- */
.instagram-stores-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--greenlite-color);
    border-top: 1px solid var(--greenlite-color);
}

.stores-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.instagram-grid {
    display: grid;
    /* ALTERADO */
    grid-template-columns: 1fr;
    gap: 1rem;
    justify-items: center;
}

.instagram-item {
    padding: 1rem;
    /* ALTERADO */
    background-color: var(--greenlite-color);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
}

.instagram-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: var(--secondary-color);
    gap: 0.75rem;
    /* ADICIONADO */
}

.instagram-icon {
    margin-right: 0.5rem;
    /* Pode ser removido se o 'gap' for suficiente */
    width: 18px;
    height: 18px;
}

.instagram-text {
    font-weight: 500;
}

/* --- Footer --- */
.main-footer {
    background-color: var(--greenlite-color);
    color: var(--header-text-color);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.footer-content-wrapper {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.footer-links-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.footer-copyright {
    font-size: 0.875rem;
}

/* ------------------------------------- */
/* MEDIA QUERIES PARA TELAS MAIORES */
/* ------------------------------------- */

/* Ajustes para Telas Pequenas (sm: 640px e acima) */
@media (min-width: 640px) {
    .container-content {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .main-header {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .header-logo {
        height: 2.5rem;
    }

    .whatsapp-button {
        height: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: .8rem;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-description {
        font-size: 1.25rem;
    }

    .hidden-sm {
        display: inline;
    }

    .about-section {
        margin-top: 1rem;
    }

    #sobre-nos.about-section {
        margin-bottom: 0;
    }

    .section-title {
        font-size: 2.25rem;
    }

    .section-paragraph {
        font-size: 1rem;
    }

    #teq-motors .section-paragraph {
        font-size: 1rem;
    }

    .instagram-stores-section {
        padding-top: 0;
        padding-bottom: 0;
    }

    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content-wrapper {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Ajustes para Telas Médias (md: 768px e acima) */
@media (min-width: 768px) {
    .header-logo {
        height: 6rem;
    }

    .whatsapp-button {
        height: 5rem;
        padding-left: 6rem;
        padding-right: 6rem;
        font-size: 2.5rem;
    }

    .hero-content {
        padding: 0rem;
        display: block;
        gap: 0px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-button {
        height: 5rem;
        padding-left: 5rem;
        padding-right: 6rem;
        font-size: 2.5rem;
        align-content: center;
    }

    .hero-title {
        font-size: 5rem;
    }

    .hero-description {
        font-size: 2rem;
        color: #e2e8f0;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .section-title {
        color: var(--secondary-color);
        font-size: 4rem;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.015em;
        text-align: center;
        margin-block-start: 0em;
    }

    .section-paragraph {
        font-size: 1.5rem;
        margin-block-start: 0.5em;
    }

    .section-paragraph2 {
        font-size: 1.5rem;
        margin-block-start: 0.5em;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .location-section {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .location-header {
        margin-bottom: 4rem;
    }

    .location-title {
        font-size: 4rem;
        margin-block-end: 0em;
    }

    .location-description {
        font-size: 1.5rem;
        margin-block-start: 0em;
    }

    .map-caption {
        font-size: 1.5rem;
    }

    .instagram-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .stores-title {
        font-size: 1.5rem;
    }

    .footer-links-copyright {
        flex-direction: row;
        justify-content: center;
    }
}

/* Ajustes para Telas Grandes (lg: 1024px e acima) */
@media (min-width: 1024px) {
    .header-logo {
        height: 2.8rem;
    }

    .whatsapp-button {
        height: 2.8rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-size: .9rem;
    }

    .location-section {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .location-title {
        font-size: 3rem;
    }

    .instagram-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Ajustes para Telas Extra Grandes (xl: 1280px e acima) */
@media (min-width: 1280px) {
    .container-content {
        max-width: 1280px;
    }

    .header-logo {
        height: 3rem;
    }

    .whatsapp-button {
        height: 3rem;
        padding-left: 2rem;
        padding-right: 2rem;
        font-size: 1rem;
    }

    .instagram-grid {
        grid-template-columns: repeat(6, 1fr);
        display: grid;
        align-items: center;
        justify-items: center;
    }

    .instagram-item {
        padding: 0.5rem;
    }
}

/* Ajustes para Telas 2XL (2xl: 1536px e acima) */
@media (min-width: 1536px) {
    .header-logo {
        height: 3.5rem;
    }

    .whatsapp-button {
        height: 3.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        font-size: 1.125rem;
    }

    .instagram-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}