/* 
 * Histopathus - Design System & CSS Global Reset
 * Modernizado: Mais sombras, bordas suaves, e gradientes.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Cores do Sistema de Design */
    --color-primary: #23909A;
    --color-primary-dark: #1A6C74;
    --color-primary-light: #EBF4F5;
    
    --color-highlight: #D2E28B;
    --color-highlight-hover: #C0D178;
    --color-highlight-light: #F7FAEB;
    
    --color-base: #FEFEFE;
    --color-base-dark: #1F2937;
    --color-base-light: #F9FAFB;
    
    --color-gray-border: #E5E7EB;
    --color-gray-text: #4B5563;
    --color-gray-light: #9CA3AF;
    
    /* Fontes */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Grid & Layout */
    --max-width-container: 1280px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 32px;
    
    /* Efeitos Modernos */
    --box-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
    --box-shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.08);
    --box-shadow-float: 0 20px 40px rgba(35, 144, 154, 0.15);
    --box-shadow-highlight: 0 10px 25px rgba(210, 226, 139, 0.6);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset CSS */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    background-color: var(--color-base-light);
    color: var(--color-base-dark);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
}

/* Utilitários Globais */
.container {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* Grid & Flex */
.grid {
    display: grid;
    gap: 32px;
}

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

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .container { padding: 0 16px; }
}

/* =========================================================================
   MOBILE — Centralização global (≤768px)
   Textos, botões e elementos em coluna única centrados.
   ========================================================================= */
@media (max-width: 768px) {

    /* Títulos e parágrafos das seções */
    .section-header,
    .section-header h2,
    .section-header p { text-align: center; }

    /* Hero */
    .hero-content        { text-align: center; }
    .hero-content p      { max-width: 100%; }
    .hero-stats          { justify-content: center; flex-wrap: wrap; }
    .hero-buttons        { justify-content: center; }

    /* Page headers internos */
    .page-header h1,
    .page-header p       { text-align: center; }

    /* Cards genéricos — centraliza apenas o ícone e título, não afeta listas internas */
    .card-diferencial    { text-align: center; }
    .card-diferencial ul,
    .card-diferencial li { text-align: left; }

    /* CTA de coleta */
    .cta-coleta-content  { text-align: center; }
    .cta-coleta-content ul { text-align: left; }

    /* Faixas de stats com flex-wrap: cada item centralizado */
    .faixa-separator { display: none !important; }

    /* Footer bottom */
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* Textos e Títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-base-dark);
    line-height: 1.25;
}

.text-center { text-align: center; }
.color-primary { color: var(--color-primary); }
.color-highlight { color: var(--color-highlight); }