/* --- Estilos CSS - Tema Claro com Gradientes e Efeito Vidro (v2 - Gradientes Reforçados) --- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Aptos', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    /* --- Cores Base --- */
    --green-primary: #00a86b;
    --green-dark: #007d5a;
    --green-light: #6fcf97;
    --green-secondary: #27ae60;
    --green-secondary-light: #6fcf97;
    --orange-primary: #FE8206;
    --white: #ffffff;
    --black: #000000;

    /* --- Variáveis do Tema Claro (Padrão) --- */
    --bg-primary: #fdfdfd;
    --bg-secondary: var(--white);
    --bg-tertiary: #f8f9fa;
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-interactive: rgba(255, 255, 255, 0.75);
    --bg-interactive-accent: rgba(220, 255, 235, 0.6);
    /* Levemente mais opaco */
    --bg-header-footer: rgba(255, 255, 255, 0.85);

    --text-primary: #212529;
    --text-secondary: #495057;
    --text-tertiary: #6c757d;
    --text-muted: #6c757d;
    --text-link: var(--green-primary);
    --text-link-footer: var(--text-secondary);
    --text-button-primary: var(--white);
    --text-button-secondary: var(--green-primary);

    --border-primary: rgba(0, 0, 0, 0.08);
    --border-interactive: rgba(0, 0, 0, 0.12);
    --border-top-accent1: var(--green-primary);
    --border-top-accent2: var(--green-secondary);

    --shadow-primary: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.1);

    --backdrop-blur: blur(15px);

    /* --- Gradientes --- */
    /* Gradientes de Cor Sólida (para botões, ícones, etc.) */
    --gradient-green: linear-gradient(135deg, var(--green-primary) 0%, var(--green-light) 100%);
    --gradient-green-secondary: linear-gradient(135deg, var(--green-secondary) 0%, var(--green-secondary-light) 100%);
    --gradient-orange: linear-gradient(135deg, var(--orange-primary) 0%, #ffc994 100%);

    /* Gradientes para Texto */
    --gradient-text-title: linear-gradient(135deg, var(--text-primary) 0%, #5a6167 100%);
    --gradient-text-green: var(--gradient-green);
    /* Reutiliza o gradiente verde */
    --gradient-text-green-secondary: var(--gradient-green-secondary);
    /* Reutiliza o gradiente verde secundário */
    /* --gradient-step-number: linear-gradient(135deg, var(--text-primary) 0%, rgba(0, 0, 0, 0.5) 100%); -- Removido, usar text-primary ou text-secondary */

    /* Gradientes Radiais de Fundo (Opacidade levemente aumentada para visibilidade) */
    --radial-gradient-hero1: radial-gradient(circle at 30% 50%, rgba(0, 168, 107, 0.1) 0%, transparent 70%);
    /* Opacidade 0.1 */
    --radial-gradient-hero2: radial-gradient(circle at 70% 30%, rgba(39, 174, 96, 0.12) 0%, transparent 70%);
    /* Opacidade 0.12 */
    --radial-gradient-features: radial-gradient(circle at center, rgba(0, 168, 107, 0.06) 0%, transparent 70%);
    /* Opacidade 0.06 */
    --radial-gradient-calculator: radial-gradient(circle at 70% 30%, rgba(0, 168, 107, 0.08) 0%, transparent 70%);
    /* Opacidade 0.08 */
    --radial-gradient-faq: radial-gradient(circle at 30% 70%, rgba(39, 174, 96, 0.09) 0%, transparent 70%);
    /* Opacidade 0.09 */
    --radial-gradient-cta: radial-gradient(circle at center, rgba(0, 168, 107, 0.08) 0%, transparent 70%);
    /* Opacidade 0.08 */

    /* Inputs */
    --input-range-track: rgba(0, 168, 107, 0.15);
    --input-range-thumb: var(--green-primary);
    --input-bg: rgba(0, 0, 0, 0.04);
    --input-text: var(--text-primary);
    --input-border: var(--border-interactive);
    --input-accent: var(--green-primary);
}

/* --- Estilos Globais --- */
body {
    background-color: var(--bg-primary);
    /* Mantém como fallback */
    color: var(--text-primary);
    line-height: 1.6;
    /* Adiciona o gradiente */
    background-image: linear-gradient(to bottom, #e0fff0, #f0fff0);
    /* Verde bem claro para Verde bem claro */
    background-attachment: fixed;
    /* Faz o gradiente ficar fixo durante o scroll */
    background-size: cover;
    /* Garante que cubra toda a área */
    min-height: 100vh;
    /* Garante que o body ocupe pelo menos a altura da tela */
}

body.light-theme {
    /* Classe adicionada via JS */
}

main {
    display: block;
}

/* --- Estilos de Seção Padrão --- */
.section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Aplica gradientes radiais aos pseudo-elementos das seções */
.section::before,
.section::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    /* Atrás do conteúdo */
    pointer-events: none;
    /* Não interfere com cliques */
}

/* Atribui gradientes específicos por seção */
.section-hero::before {
    background: var(--radial-gradient-hero1);
}

.section-hero::after {
    background: var(--radial-gradient-hero2);
}

.section-features::before {
    background: var(--radial-gradient-features);
}

.section-calculator::before {
    background: var(--radial-gradient-calculator);
}

.section-faq::before {
    background: var(--radial-gradient-faq);
}

.section-cta::before {
    background: var(--radial-gradient-cta);
}


.section-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    /* Conteúdo acima dos gradientes radiais */
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    /* Aplica gradiente ao título */
    background: var(--gradient-text-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback para navegadores sem suporte */
    color: var(--text-primary);
}

.section-subhead {
    font-size: 1.2rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    font-weight: 300;
}

/* --- Header --- */
.global-header {
    background: rgba(255, 255, 255, 0.55);
    /* Fundo de vidro semitransparente */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    /* Simula o reflexo e a borda */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    /* Borda inferior clara */
}

#liquid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Place it behind the header content */
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* Ensure container is a positioning context */
    z-index: 9998;
    /* Increased z-index to ensure header content is above mobile nav */
}

.header-logo {
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--text-primary);
}

/* Aplica gradiente azul à parte 'energia' do logo */
.header-logo .logo-accent {
    background: var(--gradient-text-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-nav ul {
    display: flex;
    list-style: none;
}

.header-nav li {
    margin-left: 60px;
}

.header-nav a {
    text-decoration: none;
    color: var(--text-link);
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.header-nav a:hover {
    opacity: 0.7;
}

/* Botão 'Assine Agora' no Nav com gradiente */
.header-nav .nav-button {
    background: var(--gradient-orange);
    /* Usa gradiente laranja */
    color: var(--white);
    padding: 8px 18px;
    border-radius: 15px;
    transition: filter 0.3s ease;
    /* Transição no brilho */
    border: none;
    /* Remove borda padrão de link/botão */
}

.header-nav .nav-button:hover {
    filter: brightness(90%);
    /* Escurece levemente no hover */
    opacity: 1;
}

.header-logo {
    font-size: 2.0rem;
    /* Tamanho base do logo */
    font-weight: bold;
    text-decoration: none;
    color: var(--text-primary);
    display: inline-block;
    /* Necessário para o container relativo funcionar bem */
    position: relative;
    /* Permite posicionamento absoluto dentro dele */
    line-height: 1;
    /* Ajusta a altura da linha base */
}

/* Container para o texto, para referência de posicionamento */
.logo-text-container {
    display: inline-block;
    /* Mantém o fluxo */
    position: relative;
}

/* Estilo principal 'blue' (pode ter gradiente se desejar) */
.logo-main {
    display: inline-block;
    transform: scaleY(1.25);
    vertical-align: middle;
    background: var(--gradient-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--green-primary);
}

/* Estilo e posicionamento para 'TAE' */
.logo-suffix {
    display: inline-block;
    font-size: 0.35em;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentcolor;
    margin-left: -5.0px;
    padding-left: 8px;
    line-height: 0.9;
    vertical-align: middle;
    border-left: 1px solid var(--green-primary);
}

/* Estilo para tornar 'Energia' menor quando parte da marca */
.brand-suffix {
    font-size: 1em;
    /* 75% do tamanho do texto pai. Ajuste conforme necessário */
    font-weight: inherit;
    /* Herda o peso da fonte do pai */
    color: var(--text-muted);
    /* Define explicitamente a cor cinza muted */
    /* Garante que não herde gradientes indesejados */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentcolor;
    vertical-align: baseline;
}


/* Ajuste específico para o logo no header, se necessário */
.header-logo .brand-suffix {
    /* Pode precisar de ajustes finos de tamanho ou alinhamento aqui */
    /* Ex: font-size: 0.7em; */
    color: var(--text-primary);
    /* Garante a cor correta no header */
}

/* Ajuste específico para o copyright, se necessário */
.footer-legal-copyright .brand-suffix {
    color: var(--text-muted);
    /* Garante a cor correta no copyright */
    /* O gradiente no 'Blue' vem da classe .copyright-brand */
}

/* --- Estilos para Páginas Internas (Sobre, etc.) --- */

.section-page-content .section-title {
    margin-bottom: 15px;
    /* Ajuste se necessário */
}

.section-page-content .section-subhead {
    margin-bottom: 40px;
    /* Ajuste se necessário */
}

/* Grid para os Pilares na página Sobre */
.pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Garante 1 coluna por padrão (mobile) */
    gap: 25px;
    margin-top: 30px;
    margin-bottom: 1.5em;
    max-width: 900px;
    /* Mantém a largura máxima */
    margin-left: auto;
    margin-right: auto;
}

/* Media Query para telas maiores (ex: tablets e desktops) */
@media (min-width: 600px) {

    /* Ajuste o valor 600px se necessário */
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Define exatamente 2 colunas */
    }
}

/* Estilo dos Blocos dos Pilares (similar ao feature-item) */
.pillar-item {
    padding: 25px;
    /* Espaçamento interno */
    background: var(--bg-card);
    /* Fundo de vidro */
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-radius: 15px;
    /* Bordas arredondadas */
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-primary);
    min-width: 0;
    /* Adicionado para tentar evitar bugs de sizing */
    min-height: 0;
    /* Adicionado para tentar evitar bugs de sizing */
    text-align: center;
    /* Centraliza o texto dentro do bloco */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.pillar-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--green-primary);
    /* Cor azul para o título do pilar */
    margin-bottom: 10px;
}

.pillar-item p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Botão Hamburguer --- */
.menu-trigger {
    display: none;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 9999;
    /* Increased z-index to ensure it's on top */
    position: relative;
}

.menu-icon {
    display: block;
    width: 28px;
    height: 2px;
    background-color: var(--text-primary);
    position: relative;
    transition: background-color 0.3s ease;
}

.menu-icon::before,
.menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: transform 0.3s ease;
}

.menu-icon::before {
    top: -8px;
}

.menu-icon::after {
    bottom: -8px;
}

/* X quando aberto */
.menu-trigger[aria-expanded="true"] .menu-icon {
    background-color: transparent;
}

.menu-trigger[aria-expanded="true"] .menu-icon::before {
    transform: translateY(8px) rotate(45deg);
}

.menu-trigger[aria-expanded="true"] .menu-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Navegação Mobile --- */
.header-nav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: 100px;
    z-index: 100;
    text-align: center;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
}

.header-nav-mobile.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.header-nav-mobile ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.header-nav-mobile li {
    margin-bottom: 25px;
}

.header-nav-mobile a {
    text-decoration: none;
    color: var(--text-primary);
    font-size: 1.6rem;
    font-weight: 500;
    display: block;
    padding: 10px;
}

/* Mostra botão só em mobile */
@media (max-width: 768px) {
    .menu-trigger {
        display: block;
    }
}

/* --- Seção Hero --- */
.section-hero {
    background: #87cefa;
    padding-top: 20px;
    padding-bottom: 250px;
    text-align: center;
    /* Add background image properties */
    background-image: url('images/paineis-solares-farm.png');
    background-size: cover;
    /* Make the image cover the entire element */
    background-position: bottom -50px left;
    /* Start at the bottom and left corner */
    background-repeat: no-repeat;
}

/* Adjust background image for smaller screens */
@media (max-width: 767px) {
    .section-hero {
        background-position: center bottom -20px;
        /* Adjust position for mobile to show more of the farm */
        padding-bottom: 80px;
        /* Reduce bottom padding for a more compact look */
    }
}

/* Gradientes radiais já aplicados via .section::before/::after */

/* To ensure text is readable over the background image, we can add a slight overlay or text shadow.
   Given the background image has some opacity applied, further opacity might be in the pseudo-elements.
   Let's ensure the content (`.hero-content`) is above any background layers.
   The `.section::before` and `.section::after` already add radial gradients. We need to ensure the image is below these.
   For now, the image will be the primary background. If transparency is needed, we'll adjust the image or add an overlay.
*/

.hero-content {
    /* Herda de .section-content */
    position: relative;
    /* Ensure hero-content is positioned relative to layer above background */
    z-index: 3;
    /* Ensure it's above the background image and radial gradients (z-index 1, 2) */
}

.hero-text {
    max-width: 600px;
    margin: 0 auto;
    color: white;
}

.hero-text mark {
    background-color: white;
    color: black;
    padding: 0 4px;
    /* Optional: adds a little padding around the marked text */
}

.hero-secondary-title {
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Aplica gradiente azul ao span 'Azul' */
.text-gradient-green {
    background: var(--gradient-text-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text h1 {
    font-size: 4.5rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* Aplica gradiente amarelo ao span 'Economize até 25%' */
.text-highlight-green {
    background: var(--gradient-text-green-secondary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-highlight-orange {
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Estilo para o texto menor dentro do H1 (AGORA APLICA EM TODAS AS TELAS) */
.hero-text h1 .h1-suffix {
    font-size: 0.8em;
    /* 40% do tamanho do H1 - Ajuste se precisar menor ainda */
    font-weight: 400;
    color: var(--text-secondary);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentcolor;
    vertical-align: middle;
    /* Adiciona um pequeno espaço antes, se necessário */
    /* margin-left: 0.1em; */
}

.hero-text .subhead {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.footnote {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* --- Linha de bandeiras --- */
.linha-bandeiras {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 14px 28px;
    margin-top: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.bandeira {
    height: 45px;
    width: auto;
    border-radius: 8px;
    transition: transform 0.25s ease;
}

.bandeira:hover {
    transform: scale(1.08);
}


/* --- Botões --- */
.button {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* Botão Primário com Gradiente Azul */
.button-primary {
    background: var(--gradient-orange);
    color: var(--text-button-primary);
    border: none;
}

.button-primary:hover {
    filter: brightness(95%);
}

/* Botão Secundário com Efeito Vidro */
.button-secondary {
    background: var(--bg-interactive);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    color: var(--text-button-secondary);
    border: 1px solid var(--border-interactive);
}

.button-secondary:hover {
    background: rgba(0, 168, 107, 0.08);
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.button-large {
    padding: 15px 40px;
    font-size: 1.1rem;
}

/* --- Seção Features (Como Funciona) --- */
.section-how-it-works {
    background-color: var(--bg-secondary);
}

.step-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Responsive columns by default */
    gap: 30px;
    margin-top: 50px;
}

.step-card {
    padding: 30px;
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-radius: 20px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* Added for absolute positioning of children */
    overflow: hidden;
    /* Added to clip content at border-radius */
}

.step-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center bottom;
    /* More in the lower part */
    background-repeat: no-repeat;
    z-index: 0;
    border-radius: inherit;
}

.step-card:nth-child(1)::before {
    background-image: url('images/paineis-solares.png');
    background-size: 290px auto;
    opacity: 0.4;
}

.step-card:nth-child(2)::before {
    background-image: url('images/inversores.png');
    /* Assuming this image exists */
    background-size: 300px auto;
    /* Changed to make the image smaller, maintaining aspect ratio */
    opacity: 0.4;
}

.step-card:nth-child(3)::before {
    background-image: url('images/medidor.png');
    /* Assuming this image exists */
    background-size: 200px auto;
    /* Changed to make the image smaller, maintaining aspect ratio */
    opacity: 0.4;
}

.step-card:nth-child(4)::before {
    background-image: url('images/creditos.png');
    /* Assuming this image exists */
    background-size: 190px auto;
    opacity: 0.4;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.step-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--green-primary);
    margin-bottom: 15px;
    background: var(--gradient-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-details h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-weight: 600;
}

.step-details h4 {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 400;
}

.step-details p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 15px;
}

.step-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}

.step-details ul li {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    position: relative;
    padding-left: 20px;
}

.step-details ul li::before {
    content: '•';
    color: var(--green-primary);
    position: absolute;
    left: 0;
    top: 0;
}

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

/* --- Economy Steps Section --- */
.section-economy-steps {
    background-color: var(--bg-primary);
    /* Use primary background */
    padding: 80px 0;
    /* Standard section padding */
    position: relative;
    overflow: hidden;
}

/* Radial gradient for this section */
.section-economy-steps::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 70% 30%, rgba(39, 174, 96, 0.08) 0%, transparent 70%);
    /* Example gradient */
}

.economy-steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

@media (min-width: 768px) {
    .economy-steps-container {
        grid-template-columns: repeat(4, 1fr);
        /* Force 4 columns on larger screens */
    }
}

.economy-step-card {
    padding: 30px;
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-radius: 20px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.economy-step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.economy-step-card .step-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--orange-primary);
    /* Use orange for economy steps */
    margin-bottom: 15px;
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.economy-step-card .step-details h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-weight: 600;
}

.economy-step-card .step-details p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
    /* No margin-bottom if it's the last element */
}


/* Gradiente radial já aplicado via .section::before */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.feature-item {
    padding: 30px;
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-radius: 20px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

/* Ícone com Gradiente Amarelo */
.feature-icon {
    width: 100px;
    height: 100px;
    background: var(--gradient-green-secondary);
    /* Gradiente verde */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-item h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: 600;
}

.feature-item p {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.6;
}

/* --- Seção Calculadora --- */
.highlight {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Aplica gradiente azul aos destaques .blue */
.highlight.green {
    background: var(--gradient-text-green);
    /* Usa a variável de gradiente verde */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--green-primary);
    /* Fallback para navegadores antigos */
}

/* Aplica gradiente verde secundário aos destaques .green-secondary */
.highlight.green-secondary {
    background: var(--gradient-text-green-secondary);
    /* Usa a variável de gradiente verde secundário */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--green-secondary);
    /* Fallback para navegadores antigos */
}

/* aplica texto centralizado */
.texto-centralizado {
    text-align: center;
}

/* Aplicar a texto centralizado a todos os elementos dentro de um container */
.meu-container {
    text-align: center;
    /* Centraliza todo o texto dentro desta div */
}

/* Gradiente radial já aplicado via .section::before */

.calculator-wrapper {
    /* Herda de .section-content */
}

.calculator-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    margin: 50px auto 0;
    background: var(--bg-interactive);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-radius: 16px;
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-interactive);
    overflow: hidden;
}

.calculator-form,
.calculator-results {
    padding: 30px;
    width: 100%;
}

.calculator-form {
    border-bottom: 1px solid var(--border-interactive);
    border-top: 6px solid var(--border-top-accent1);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.calculator-results {
    display: none;
    flex-direction: column;
    border-top: 6px solid var(--border-top-accent2);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    text-align: left;
}

.calculator-form h3,
.calculator-results h3 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.5rem;
    font-weight: 600;
}

.calculator-form h3 {
    color: var(--green-primary);
}

.calculator-results h3 {
    color: var(--green-secondary);
}

.form-group {
    margin-bottom: 25px;
    text-align: left;
}

.form-label {
    font-weight: 500;
    margin-bottom: 12px;
    display: block;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.radio-group {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
}

input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle;
    accent-color: var(--input-accent);
    width: 16px;
    height: 16px;
}

.slider-container {
    /* Sem gradiente aqui */
}

input[type="range"] {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: var(--input-range-track);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 15px 0 10px;
    cursor: pointer;
    border: 1px solid var(--border-primary);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--input-range-thumb);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    border: none;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--input-range-thumb);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.slider-value {
    text-align: center;
    margin-top: 5px;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.input-extra {
    display: none;
    margin-top: 15px;
}

.input-extra label {
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: block;
    color: var(--text-secondary);
    text-align: left;
}

input[type="number"] {
    width: 100%;
    padding: 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--input-text);
    margin-top: 5px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.results-summary,
.results-details {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-primary);
}

.results-details {
    border-bottom: none;
    padding-bottom: 0;
}

.results-summary span,
.results-details span {
    display: block;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 1rem;
}

.results-summary span:last-child,
.results-details span:last-child {
    margin-bottom: 0;
}

.highlight {
    font-size: 1.1rem;
    font-weight: 600;
}

.green {
    color: var(--green-primary);
}

.green-secondary {
    color: var(--green-secondary);
}

/* Destaque 'verde' usa cor amarela */
.economy {
    margin-top: 15px;
}

.disclaimer {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 20px;
    text-align: center;
}

/* --- Seção FAQ --- */
.section-faq {
    background-color: var(--bg-secondary);
}

/* Gradiente radial já aplicado via .section::before */

.faq-wrapper {
    /* Herda de .section-content */
}

.faq-container {
    max-width: 800px;
    margin: 50px auto 0;
}

.faq-item {
    margin-bottom: 15px;
    background: var(--bg-interactive);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-primary);
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: var(--shadow-hover);
}

.faq-question {
    width: 100%;
    padding: 18px 50px 18px 25px;
    background: var(--bg-interactive-accent);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1.1rem;
    cursor: pointer;
    position: relative;
    border: none;
    text-align: left;
    transition: background-color 0.3s ease;
    font-family: inherit;
}

.faq-question:hover {
    background: rgba(0, 168, 107, 0.1);
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
    color: var(--text-muted);
    font-weight: 300;
}

.faq-question[aria-expanded="true"]::after {
    content: "−";
}

.faq-answer {
    color: var(--text-secondary);
    line-height: 1.6;
    font-weight: 300;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, margin-top 0.4s ease-out;
    padding-left: 25px;
    padding-right: 25px;
}

/* --- Seção CTA (Assine) --- */
.section-cta {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    text-align: center;
}

/* Gradiente radial já aplicado via .section::before */

.cta-content {
    /* Herda de .section-content */
}

.section-cta .section-title {
    /* Estilo padrão com gradiente */
}

.section-cta .section-subhead {
    margin-bottom: 40px;
}

.section-cta .button-primary {
    /* Estilo padrão com gradiente */
}

/* --- Footer --- */
.global-footer {
    background: var(--bg-header-footer);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    color: var(--text-secondary);
    padding: 10px 0 5px;
    border-top: 1px solid var(--border-primary);
    font-size: 0.9rem;
}

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

.footer-top {
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-primary);
}

.footer-shop {
    color: var(--text-tertiary);
}

.footer-shop a {
    color: var(--text-link);
    text-decoration: none;
}

.footer-shop a:hover {
    text-decoration: underline;
}

.footer-directory {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    text-align: center;
}

.footer-contact-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-contact-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.footer-contact-list li:last-child {
    flex-basis: 100%;
    text-align: center;
    margin-top: 10px;
}

.footer-directory-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 15px;
}

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

.footer-directory li {
    margin-bottom: 10px;
}

.footer-directory a {
    color: var(--text-link-footer);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-directory a:hover {
    color: var(--text-link);
    text-decoration: underline;
}

.footer-legal {
    padding-top: 30px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-legal-copyright {
    /* Sem gradiente */
}

.footer-legal-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal-links a:hover {
    color: var(--text-link);
    text-decoration: underline;
}

.footer-bottom {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    justify-content: flex-end; /* alinhado à direita em telas maiores */
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.8rem;
    color: var(--text-muted);
    width: 100%;
}

.footer-bottom a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: var(--text-link);
    text-decoration: underline;
}

.footer-powered-by {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
}

.footer-legal-links a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* ... outras regras do footer ... */

.footer-contact-list .social-link {
    display: inline-flex;
    /* Alinha ícone e texto na mesma linha */
    align-items: center;
    /* Centraliza verticalmente */
    gap: 8px;
    /* Espaço entre o ícone e o texto */
}

.footer-contact-list .social-icon {
    width: 20px;
    /* Ajuste o tamanho conforme necessário */
    height: 20px;
    /* Ajuste o tamanho conforme necessário */
    vertical-align: middle;
    /* Garante alinhamento vertical */
}

/* Ajusta a aparência do link quando tem ícone */
.footer-directory a.social-link {
    /* Mantém a cor padrão do link do footer */
    color: var(--text-link-footer);
}

.footer-directory a.social-link:hover {
    /* Mantém a cor de hover padrão */
    color: var(--text-link);
    text-decoration: underline;
    /* Mantém sublinhado no hover */
}

.footer-directory a.social-link:hover img {
    /* Pode adicionar um efeito no ícone no hover, se desejar */
    /* Ex: opacity: 0.8; */
}

.footer-legal {
    /* ... regras existentes ... */
    color: var(--text-muted);
    /* Garante que o resto do texto tenha a cor muted */
}

.footer-legal-copyright {
    /* Estilos gerais para o copyright, se necessário */
}

/* Aplica gradiente azul à marca no copyright */
.copyright-brand {
    background: var(--gradient-text-green);
    /* Usa a variável de gradiente verde */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--green-primary);
    /* Fallback */
    font-weight: 500;
    /* Opcional: Deixa a marca um pouco mais destacada */
}

/* --- Media Queries (Responsiveness) --- */
@media (min-width: 768px) {
    .section-title {
        font-size: 2.8rem;
    }

    .hero-text h1 {
        font-size: 4rem;
    }

    .hero-text .subhead {
        font-size: 1.6rem;
    }

    .section-hero {
        /* text-align: left; */
    }

    .hero-content {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .hero-text {
        margin: 0;
        max-width: none;
        flex: 1;
    }

    .cta-links {
        justify-content: center;
    }

    .calculator-container {
        flex-direction: row;
        gap: 0;
    }

    .calculator-form {
        width: 55%;
        border-bottom: none;
        border-right: 1px solid var(--border-interactive);
        border-top-right-radius: 0;
        border-bottom-left-radius: 16px;
    }

    .calculator-results {
        width: 45%;
        border-top-left-radius: 0;
        border-top-right-radius: 16px;
    }

    .footer-legal {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-legal-links {
        justify-content: flex-end;
    }

    /* Estilo para o texto menor dentro do H1 */
    hero-text h1 .h1-suffix {
        font-size: 0.4em;
        /* 40% do tamanho do H1 */
        font-weight: 400;
        color: var(--text-secondary);
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: currentcolor;
        vertical-align: middle;
    }

    .step-cards-container {
        grid-template-columns: repeat(4, 1fr);
        /* Forces 4 columns on one line for larger screens */
    }

    /* Styles for location section on larger screens */
    .location-details {
        flex-direction: row;
        /* Display map and address side-by-side */
        align-items: flex-start;
        /* Align items to the top */
        gap: 30px;
        /* Space between map and address */
    }

    .map {
        width: 70%;
        /* Map takes 70% width */
        min-height: 400px;
        /* Ensure a minimum height for the map container */
        height: 400px;
        /* Maintain height */
        margin-bottom: 0;
        /* Remove bottom margin when side-by-side */
    }

    .address {
        width: 30%;
        /* Address takes 30% width */
        max-width: none;
        /* Remove max-width restriction */
        text-align: left;
        /* Align text to left on desktop */
        margin-top: 0;
        /* Remove top margin */
        padding: 10px 15px;
        /* Reduced vertical padding for "slim" appearance */
    }
}

@media (max-width: 767px) {
    .section {
        padding: 60px 0;
    }

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

    .section-subhead {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .hero-text h1 {
        font-size: 2.8rem;
    }

    .hero-text .subhead {
        font-size: 1.3rem;
    }

    .section-hero {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .header-nav {
        display: none;
    }

    .menu-trigger {
        display: block;
    }

    .radio-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .radio-label {
        margin-bottom: 5px;
    }

    .footer-directory {
        text-align: center;
    }

    .footer-directory-column {
        margin-bottom: 20px;
    }

    /* Mobile-specific styles for location section */
    .location-details {
        display: flex;
        /* Make location-details a flex container */
        flex-direction: column;
        /* Stack children vertically */
        align-items: center;
        /* Center items horizontally */
    }

    .map {
        position: static;
        /* Let it flow normally */
        width: 100%;
        height: 300px;
        /* Specific height for mobile map */
        box-shadow: var(--shadow-primary);
        /* Keep shadow for mobile map */
        border: 1px solid var(--border-primary);
        /* Keep border for mobile map */
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 20px;
        /* Space between map and address */
    }

    .map iframe {
        position: static;
        /* Make iframe flow normally within its parent */
        width: 100%;
        height: 100%;
        /* Fill the map container */
        border-radius: 15px;
    }

    .address {
        position: static;
        /* Make address flow normally */
        width: 100%;
        /* Occupy full screen width */
        margin-top: 0;
        /* No extra margin since map has margin-bottom */
        top: auto;
        right: auto;
        text-align: center;
        background: var(--bg-card);
        padding: 10px 15px;
        /* Reduced vertical padding for "slim" appearance */
        border-radius: 10px;
        box-shadow: var(--shadow-primary);
        border: 1px solid var(--border-primary);
    }
}

/* --- Cookie Banner --- */
#cookie-banner {
    position: fixed;
    bottom: 20px;
    /* Positioned to the bottom */
    left: 50%;
    transform: translateX(-50%);
    /* Re-center horizontally */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(111, 207, 151, 0.5);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 600px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    z-index: 9999;
    animation: slideUp 0.6s ease;
    /* Will update this animation in the next step */
    flex-wrap: wrap;
}

/* Containers de texto e botões */
#cookie-banner div:first-child {
    flex: 1 1 60%;
}

#cookie-banner div:last-child {
    display: flex;
    /* <<< importante para os botões ficarem lado a lado */
    gap: 10px;
    flex: 0 1 auto;
}

/* Textos */
#cookie-banner h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

#cookie-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

#cookie-banner a {
    color: #00a86b;
    text-decoration: none;
    font-weight: 500;
}

/* Botões */
#accept-cookies {
    background: linear-gradient(135deg, #27ae60, #00a86b);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease;
}

#accept-cookies:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 168, 107, 0.4);
}

#reject-cookies {
    background: white;
    color: #5E5E5E;
    border: 1px solid rgba(111, 207, 151, 0.5);
    border-radius: 12px;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease;
}

#reject-cookies:hover {
    background: #f8f8f8;
    border-color: #bbb;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Responsividade Mobile */
@media (max-width: 480px) {
    #cookie-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 12px;
    }

    #cookie-banner div:first-child,
    #cookie-banner div:last-child {
        width: 100%;
    }

    #cookie-banner div:last-child {
        flex-direction: column;
        gap: 8px;
    }

    #cookie-banner button {
        width: 100%;
        padding: 10px 0;
        font-size: 14px;
    }

    #cookie-banner h3 {
        font-size: 15px;
    }

    #cookie-banner p {
        font-size: 13px;
        line-height: 1.3;
    }
}

/* --- Seção de Endereço e Mapa --- */
.section-location {
    background-color: var(--bg-tertiary);
}

.location-content {
    /* herda de section-content */
}

/* --- Scrolling Banner --- */
.scrolling-banner {
    width: 100%;
    height: 50px; /* Aumentado para 50px */
    background-color: #f0f0f0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
}

.scrolling-banner-inner {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* O dobro da largura para o loop */
    height: 100%;
    animation: scroll-left 20s linear infinite;
}

.scrolling-banner img {
    height: 100%;
    width: auto;
    margin-right: 20px; /* Espaço entre as imagens */
    object-fit: contain; /* Garante que a imagem caiba sem distorcer */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


.location-details {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center items horizontally in column layout */
}

.map {
    position: relative;
    /* Essential for positioning the address absolutely inside it */
    width: 100%;
    /* Ensure map takes full width */
    height: 400px;
    /* Or a suitable height */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-primary);
    margin-bottom: 20px;
    /* Space between map and address when stacked */
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.address {
    width: 90%;
    /* Responsive width */
    max-width: 350px;
    /* Max width for address block */
    background: var(--bg-card);
    /* Background to make it readable */
    padding: 15px;
    /* Reduced padding for smaller size */
    border-radius: 10px;
    /* Slightly smaller border-radius */
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-primary);
    text-align: center;
    /* Center text within the address block */
}

.address h3 {
    font-size: 1.2rem;
    /* Smaller font size */
    margin-bottom: 10px;
    color: var(--orange-primary);
}

.address p {
    font-size: 0.9rem;
    /* Smaller font size */
    line-height: 1.5;
    margin-bottom: 2px;
    /* Reduced margin-bottom */
}

@media (min-width: 768px) {
    /* No grid-template-columns here anymore */
}