/* Variáveis de cores globais - Sistema de alternância */
:root {
    --white-ice: #fafbfc;        /* Branco gelo principal */
    --white-ice-soft: #f8fafc;   /* Branco gelo mais suave */
    --pure-white: #ffffff;       /* Branco puro */
    --soft-gray: #f1f5f9;        /* Cinza muito suave */
}

/* Importação de fontes */
@font-face {
    font-family: 'Chitos';
    src: url('../fonts/Chitos-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Melhor para LCP - mostra fallback imediatamente */
}

/* Fallback para Chitos com fontes seguras */
.font-chitos {
    font-family: 'Chitos', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Preload invisível para forçar carregamento imediato */
.font-preload {
    font-family: 'Chitos', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    visibility: hidden !important;
}

/* Sistema de prevenção de FOUC */
.prevent-fouc {
    visibility: hidden;
    opacity: 0;
}

.fonts-loaded .prevent-fouc {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Fallback crítico - exibe conteúdo se fontes não carregarem em 4s */
@media screen {
    .prevent-fouc {
        animation: show-fallback 0.1s forwards 4s;
    }
    
    @keyframes show-fallback {
        to {
            visibility: visible;
            opacity: 1;
        }
    }
}

/* Variáveis de cores e configurações */
:root {
    --brand: #A4C036;
    --brand-dark: #869C2A;
    --paper: #FCF7F0;
    --ink: #1b1b1b;
    
    /* Configurações do artboard/canvas */
    --art: clamp(520px, 44vw, 900px);      /* quadrado da arte à direita */
    --woman-w: clamp(420px, 36vw, 720px);  /* largura da mulher */
    
    /* Cor do semicírculo laranja */
    --bubble: #FF6745;
}

/* Animações */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
.float-animation { animation: float 6s ease-in-out infinite; }

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rotate-slow { animation: rotate 30s linear infinite; }
.rotate-slower { animation: rotate 60s linear infinite reverse; }

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.pulse-slow { animation: pulse 4s ease-in-out infinite; }

/* Estrutura da hero */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 88vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}

/* Prevenir overflow horizontal global */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    box-sizing: border-box;
}

.grain:before {
    content: "";
    position: absolute;
    inset: -20%;
    opacity: .05;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='6' cy='8' r='1' fill='%23000'/%3E%3Ccircle cx='90' cy='30' r='1' fill='%23000'/%3E%3Ccircle cx='60' cy='70' r='1' fill='%23000'/%3E%3Ccircle cx='120' cy='110' r='1' fill='%23000'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    mix-blend-mode: multiply;
}

.wave {
    position: absolute;
    left: 0;
    bottom: -1px; /* Desloca 1px para baixo para eliminar o gap */
    width: 100%;
    z-index: 16;
}

/* Painel da arte: mantém mulher + formas sempre alinhados */
.artboard {
    position: relative;
    width: var(--art);
    aspect-ratio: 1/1;
    isolation: isolate;
}

.woman {
    position: absolute;
    inset: auto 0 0 0;
    margin: auto;
    width: var(--woman-w);
    max-width: 92%;
    height: auto;
    z-index: 15;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.16));
}

/* Semicírculo */
.semicircle {
    position: absolute;
    right: -30%;
    width: 120%;
    height: 140%;
    top: -20%;
    background: var(--bubble);
    border-radius: 50% 0 0 50% / 50% 0 0 50%;
    overflow: hidden;
    z-index: 1;
}
 
/* O semicírculo é sempre exibido */
.semicircle {display: block}

/* Título principal do hero com fonte Chitos */
.hero-title {
    font-family: 'Chitos', system-ui, -apple-system, sans-serif;
    font-weight: 400 !important;
}

/* Mobile: foca no texto */
@media (max-width: 768px) { 
    .artboard {display: none} 
    .hero {min-height: 96vh} 
}

/* Botões */
.btn { border-radius: 12px; padding: .7rem 1.1rem; font-weight: 700; border:1px solid #0001; background:#fff; box-shadow:0 2px 8px #0001; }
.btn-primary { background: #A4C036; color: #fff; border-color: color-mix(in oklab, #A4C036, #000 10%); }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d7d7d7; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #c5c5c5; }

/* Voltar ao topo */
.back-to-top {
    position: fixed; bottom: 20px; right: 20px; z-index: 40;
    width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #A4C036; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.2);
    opacity: 0; visibility: hidden; transition: .25s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; }

/* Sistema de Alternância de Seções - Tons de Ternura */
body {
    background: var(--white-ice);
}

/* Seção Hero - mantém design atual com gradiente */
/* Seção Sobre (Nosso Impacto) - mantém background original roxo */
/* .impact-section - removido override, mantém estilo original */

/* Seção Objetivos (2ª seção) - Branco Gelo */
#objetivos-cozinha-solidaria {
    background: var(--white-ice) !important;
    --bg: var(--white-ice) !important;
}

/* Seção Galeria (3ª seção) - Branco Puro */
#galeria {
    background: var(--pure-white) !important;
}

/* Seção Parceiros (4ª seção) - Branco Gelo Suave */
#parceiros-section {
    background: var(--white-ice-soft) !important;
}

/* Footer - Tons mais escuros para contrastar */
footer {
    background: var(--soft-gray) !important;
}

/* Ajustes de transição suave entre seções */
section {
    transition: background-color 0.3s ease;
}

/* Respeita preferências de movimento */
@media (prefers-reduced-motion: reduce){
    .thumb-wrap>img, .gallery-item::after { transition: none !important; }
}

.glass { backdrop-filter: saturate(160%) blur(8px); background: rgba(252,247,240,.86); }
.focus-ring:focus-visible { outline: 3px solid color-mix(in oklab, var(--brand), white 35%); outline-offset: 2px; }