/*
===============================================================================
 CSS VERDE RESPONSIVO PARA SITES COM BOOTSTRAP
===============================================================================
Como usar:
1. Salve como estilo-verde.css.
2. Carregue o Bootstrap ANTES deste arquivo:
   <link rel="stylesheet" href="bootstrap.min.css">
   <link rel="stylesheet" href="css/estilo-verde.css">
3. Adicione class="gv-site" ao body para ativar os estilos gerais.
4. Use as classes gv-* nos elementos. O prefixo reduz conflitos com Bootstrap.

Este CSS complementa o Bootstrap; não substitui o JavaScript do Bootstrap.
Menus, modais e dropdowns continuam dependendo do HTML/JS desses componentes.
Foi projetado com abordagem mobile-first e respeita a preferência por reduzir
movimento configurada no dispositivo do visitante.
===============================================================================
*/

/* 1. PALETA E VARIÁVEIS GLOBAIS
   Edite estas variáveis para personalizar a identidade visual do site. */
:root {
    --gv-green-950: #073b2a;
    --gv-green-900: #0b4f36;
    --gv-green-800: #126344;
    --gv-green-700: #16804f;
    --gv-green-600: #1b995d;
    --gv-green-500: #27ae60;
    --gv-green-400: #4fc17a;
    --gv-green-300: #83d69e;
    --gv-green-200: #b7e8c5;
    --gv-green-100: #dcf5e3;
    --gv-green-50: #f2fbf4;

    --gv-white: #fff;
    --gv-gray-50: #f8faf9;
    --gv-gray-100: #eef2ef;
    --gv-gray-200: #dce5df;
    --gv-gray-300: #c5d2c9;
    --gv-gray-500: #6b7b71;
    --gv-gray-700: #34483b;
    --gv-gray-900: #18251d;

    --gv-success: #16804f;
    --gv-success-bg: #e7f7ec;
    --gv-warning: #936400;
    --gv-warning-bg: #fff6d9;
    --gv-danger: #b42332;
    --gv-danger-bg: #fff0f1;
    --gv-info: #176b78;
    --gv-info-bg: #e8f7fa;

    --gv-page-bg: #f7faf8;
    --gv-surface: #fff;
    --gv-text: #24352a;
    --gv-text-muted: #617166;
    --gv-border: #dce7df;

    --gv-gradient-main: linear-gradient(135deg, #0b4f36 0%, #16804f 55%, #27ae60 100%);
    --gv-gradient-soft: linear-gradient(135deg, #f2fbf4 0%, #dcf5e3 100%);
    --gv-gradient-dark: linear-gradient(135deg, #073b2a 0%, #0b4f36 100%);

    --gv-radius-sm: .375rem;
    --gv-radius-md: .75rem;
    --gv-radius-lg: 1rem;
    --gv-radius-xl: 1.5rem;
    --gv-radius-pill: 999px;

    --gv-shadow-sm: 0 2px 8px rgba(7, 59, 42, .07);
    --gv-shadow-md: 0 8px 24px rgba(7, 59, 42, .11);
    --gv-shadow-lg: 0 16px 42px rgba(7, 59, 42, .16);

    --gv-transition-fast: 160ms ease;
    --gv-transition-normal: 260ms ease;
    --gv-transition-slow: 420ms ease;
    --gv-touch-target: 44px;
    --gv-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. BASE, RESET LEVE E ACESSIBILIDADE */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body.gv-site {
    margin: 0;
    background: var(--gv-page-bg);
    color: var(--gv-text);
    font-family: var(--gv-font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.gv-site img, .gv-site video, .gv-site iframe, .gv-site svg { max-width: 100%; }
.gv-img-fluid { display: block; width: 100%; height: auto; }
.gv-site a {
    color: var(--gv-green-700);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
    transition: color var(--gv-transition-fast);
}
.gv-site a:hover { color: var(--gv-green-950); }
.gv-site :focus-visible {
    outline: 3px solid var(--gv-green-400);
    outline-offset: 3px;
    border-radius: 3px;
}
.gv-anchor { scroll-margin-top: 5.5rem; }
.gv-site ::selection { background: var(--gv-green-200); color: var(--gv-green-950); }

/* 3. TIPOGRAFIA: títulos, subtítulos e textos auxiliares */
.gv-title {
    color: var(--gv-green-950);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.15;
    margin-bottom: .75rem;
}
.gv-subtitle {
    color: var(--gv-text-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 48rem;
}
.gv-eyebrow {
    display: inline-block;
    margin-bottom: .6rem;
    color: var(--gv-green-700);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.gv-text-muted { color: var(--gv-text-muted) !important; }
.gv-text-green { color: var(--gv-green-700) !important; }
.gv-text-dark-green { color: var(--gv-green-950) !important; }
.gv-text-small { font-size: .875rem; }
.gv-lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.7; }

/* 4. UTILITÁRIOS DE COR, BORDAS, CANTOS E SOMBRAS */
.gv-bg-white { background-color: var(--gv-white) !important; }
.gv-bg-soft { background-color: var(--gv-green-50) !important; }
.gv-bg-green-100 { background-color: var(--gv-green-100) !important; }
.gv-bg-green-200 { background-color: var(--gv-green-200) !important; }
.gv-bg-green-700 { background-color: var(--gv-green-700) !important; }
.gv-bg-green-900 { background-color: var(--gv-green-900) !important; }
.gv-bg-dark-green { background-color: var(--gv-green-950) !important; }
.gv-bg-gradient { background: var(--gv-gradient-main) !important; }
.gv-bg-gradient-soft { background: var(--gv-gradient-soft) !important; }
.gv-border { border: 1px solid var(--gv-border) !important; }
.gv-border-green { border: 1px solid var(--gv-green-300) !important; }
.gv-border-left-green { border-left: 4px solid var(--gv-green-600) !important; }
.gv-rounded-sm { border-radius: var(--gv-radius-sm) !important; }
.gv-rounded { border-radius: var(--gv-radius-md) !important; }
.gv-rounded-lg { border-radius: var(--gv-radius-lg) !important; }
.gv-rounded-xl { border-radius: var(--gv-radius-xl) !important; }
.gv-rounded-pill { border-radius: var(--gv-radius-pill) !important; }
.gv-shadow-sm { box-shadow: var(--gv-shadow-sm) !important; }
.gv-shadow { box-shadow: var(--gv-shadow-md) !important; }
.gv-shadow-lg { box-shadow: var(--gv-shadow-lg) !important; }

/* 5. CABEÇALHO E NAVEGAÇÃO
   As classes podem ser combinadas com .navbar do Bootstrap. */
.gv-navbar {
    position: relative;
    z-index: 1000;
    background: var(--gv-white);
    border-bottom: 1px solid rgba(22, 128, 79, .12);
    box-shadow: 0 3px 16px rgba(7, 59, 42, .05);
}
.gv-navbar.gv-navbar-dark {
    color: var(--gv-white);
    background: var(--gv-gradient-dark);
    border-bottom-color: rgba(255, 255, 255, .12);
}
.gv-navbar-sticky { position: sticky; top: 0; }
.gv-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--gv-green-900) !important;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    text-decoration: none !important;
}
.gv-navbar-dark .gv-brand { color: var(--gv-white) !important; }
.gv-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--gv-white);
    background: var(--gv-gradient-main);
    border-radius: .8rem;
    box-shadow: var(--gv-shadow-sm);
}
.gv-nav-link {
    display: flex;
    align-items: center;
    min-height: var(--gv-touch-target);
    padding: .65rem .85rem;
    color: var(--gv-gray-700) !important;
    font-weight: 650;
    text-decoration: none !important;
    border-radius: var(--gv-radius-md);
    transition: color var(--gv-transition-fast), background-color var(--gv-transition-fast),
                transform var(--gv-transition-fast);
}
.gv-nav-link:hover, .gv-nav-link.active {
    color: var(--gv-green-800) !important;
    background: var(--gv-green-50);
}
.gv-navbar-dark .gv-nav-link { color: rgba(255,255,255,.88) !important; }
.gv-navbar-dark .gv-nav-link:hover, .gv-navbar-dark .gv-nav-link.active {
    color: var(--gv-white) !important;
    background: rgba(255,255,255,.12);
}
.gv-menu-toggle {
    display: inline-grid;
    place-items: center;
    min-width: var(--gv-touch-target);
    min-height: var(--gv-touch-target);
    padding: .5rem;
    color: var(--gv-green-900);
    background: var(--gv-green-50);
    border: 1px solid var(--gv-green-200);
    border-radius: var(--gv-radius-md);
}

/* 6. BANNER PRINCIPAL / HERO */
.gv-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.5rem, 7vw, 6rem) 0;
    color: var(--gv-white);
    background: var(--gv-gradient-main);
}
.gv-hero::before, .gv-hero::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
    border-radius: 50%;
}
.gv-hero::before {
    top: -8rem; right: -6rem;
    width: clamp(15rem, 38vw, 32rem);
    height: clamp(15rem, 38vw, 32rem);
    background: rgba(255,255,255,.09);
}
.gv-hero::after {
    right: 22%; bottom: -11rem;
    width: 22rem; height: 22rem;
    background: rgba(5,45,30,.12);
}
.gv-hero .gv-title, .gv-hero h1, .gv-hero h2 { color: var(--gv-white); }
.gv-hero .gv-subtitle { color: rgba(255,255,255,.86); }
.gv-hero-panel {
    padding: clamp(1.25rem, 4vw, 2rem);
    color: var(--gv-text);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--gv-radius-xl);
    box-shadow: var(--gv-shadow-lg);
}

/* 7. BOTÕES: podem ser usados junto com a classe .btn do Bootstrap. */
.gv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--gv-touch-target);
    padding: .7rem 1.1rem;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none !important;
    border: 1px solid transparent;
    border-radius: var(--gv-radius-md);
    cursor: pointer;
    user-select: none;
    transition: color var(--gv-transition-fast), background-color var(--gv-transition-fast),
                border-color var(--gv-transition-fast), box-shadow var(--gv-transition-fast),
                transform var(--gv-transition-fast);
}
.gv-btn:hover { transform: translateY(-2px); }
.gv-btn:active { transform: translateY(0) scale(.98); }
.gv-btn-primary {
    color: var(--gv-white) !important;
    background: var(--gv-gradient-main);
    border-color: var(--gv-green-700);
    box-shadow: 0 5px 14px rgba(22,128,79,.18);
}
.gv-btn-primary:hover {
    color: var(--gv-white) !important;
    box-shadow: 0 9px 20px rgba(22,128,79,.25);
    filter: saturate(1.08);
}
.gv-btn-outline {
    color: var(--gv-green-800) !important;
    background: transparent;
    border-color: var(--gv-green-600);
}
.gv-btn-outline:hover { color: var(--gv-green-950) !important; background: var(--gv-green-50); }
.gv-btn-light {
    color: var(--gv-green-900) !important;
    background: var(--gv-white);
    border-color: var(--gv-gray-200);
}
.gv-btn-light:hover { background: var(--gv-green-50); border-color: var(--gv-green-300); }
.gv-btn-danger { color: var(--gv-white) !important; background: #c93645; border-color: #b42332; }
.gv-btn-block { display: flex; width: 100%; }

/* Reflexo animado opcional: use gv-btn-shine em botões importantes. */
.gv-btn-shine { position: relative; overflow: hidden; }
.gv-btn-shine::after {
    position: absolute; top: -50%; left: -80%;
    width: 45%; height: 200%; content: "";
    background: rgba(255,255,255,.24);
    transform: rotate(20deg);
    transition: left 600ms ease;
    pointer-events: none;
}
.gv-btn-shine:hover::after { left: 140%; }

/* 8. CARTÕES E PRODUTOS */
.gv-card {
    height: 100%;
    overflow: hidden;
    background: var(--gv-surface);
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius-lg);
    box-shadow: var(--gv-shadow-sm);
    transition: transform var(--gv-transition-normal), box-shadow var(--gv-transition-normal),
                border-color var(--gv-transition-normal);
}
.gv-card:hover {
    transform: translateY(-4px);
    border-color: var(--gv-green-200);
    box-shadow: var(--gv-shadow-md);
}
.gv-card-body { padding: clamp(1rem, 3vw, 1.5rem); }
.gv-card-header {
    padding: 1rem 1.25rem;
    color: var(--gv-green-950);
    background: var(--gv-green-50);
    border-bottom: 1px solid var(--gv-border);
    font-weight: 750;
}
.gv-card-footer {
    padding: 1rem 1.25rem;
    background: var(--gv-gray-50);
    border-top: 1px solid var(--gv-border);
}
.gv-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--gv-green-50);
}
.gv-card-product .gv-card-image { aspect-ratio: 1; object-fit: contain; padding: .75rem; }
.gv-card-product .gv-product-name {
    color: var(--gv-green-950); font-size: 1rem; font-weight: 750; line-height: 1.35;
}
.gv-price { color: var(--gv-green-800); font-size: clamp(1.2rem, 4vw, 1.55rem); font-weight: 850; }
.gv-price-old { color: var(--gv-gray-500); font-size: .9rem; text-decoration: line-through; }
.gv-card-interactive { cursor: pointer; }
.gv-card-interactive:focus-within { outline: 3px solid var(--gv-green-300); outline-offset: 3px; }

/* 9. ETIQUETAS / BADGES */
.gv-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .65rem;
    color: var(--gv-green-800); background: var(--gv-green-100);
    border: 1px solid var(--gv-green-200); border-radius: var(--gv-radius-pill);
    font-size: .78rem; font-weight: 750; line-height: 1.2;
}
.gv-badge-success { color: #12633b; background: #e4f7eb; border-color: #b7e8c5; }
.gv-badge-warning { color: #795300; background: var(--gv-warning-bg); border-color: #f1dda0; }
.gv-badge-danger { color: #9d1c2b; background: var(--gv-danger-bg); border-color: #f3c4ca; }
.gv-badge-neutral { color: var(--gv-gray-700); background: var(--gv-gray-100); border-color: var(--gv-gray-200); }

/* 10. FORMULÁRIOS: compatível com .form-control/.form-select do Bootstrap. */
.gv-form-label {
    display: inline-block; margin-bottom: .4rem;
    color: var(--gv-green-950); font-size: .92rem; font-weight: 700;
}
.gv-form-control, .gv-site .form-control, .gv-site .form-select {
    width: 100%; min-height: var(--gv-touch-target); padding: .7rem .85rem;
    color: var(--gv-text); background: var(--gv-white);
    border: 1px solid var(--gv-gray-300); border-radius: var(--gv-radius-md);
    box-shadow: none;
    transition: border-color var(--gv-transition-fast), box-shadow var(--gv-transition-fast);
}
.gv-form-control::placeholder, .gv-site .form-control::placeholder { color: #829087; opacity: 1; }
.gv-form-control:focus, .gv-site .form-control:focus, .gv-site .form-select:focus {
    color: var(--gv-text); background: var(--gv-white); border-color: var(--gv-green-500);
    box-shadow: 0 0 0 .22rem rgba(39,174,96,.16); outline: 0;
}
.gv-form-help { display: block; margin-top: .35rem; color: var(--gv-text-muted); font-size: .82rem; }
.gv-site .form-check-input { width: 1.15rem; height: 1.15rem; border-color: var(--gv-gray-300); cursor: pointer; }
.gv-site .form-check-input:checked { background-color: var(--gv-green-700); border-color: var(--gv-green-700); }
.gv-search-box { position: relative; }
.gv-search-box input { padding-left: 2.8rem; }
.gv-search-box .gv-search-icon {
    position: absolute; top: 50%; left: .95rem; color: var(--gv-gray-500);
    transform: translateY(-50%); pointer-events: none;
}

/* 11. ALERTAS E MENSAGENS DE ESTADO */
.gv-alert { padding: 1rem 1.1rem; border: 1px solid transparent; border-left-width: 4px; border-radius: var(--gv-radius-md); }
.gv-alert-success { color: #145c37; background: var(--gv-success-bg); border-color: #b7e8c5; border-left-color: var(--gv-success); }
.gv-alert-warning { color: #795300; background: var(--gv-warning-bg); border-color: #f1dda0; border-left-color: #c58a00; }
.gv-alert-danger { color: #8e1d2a; background: var(--gv-danger-bg); border-color: #f3c4ca; border-left-color: var(--gv-danger); }
.gv-alert-info { color: #155b66; background: var(--gv-info-bg); border-color: #b7e5ec; border-left-color: var(--gv-info); }

/* 12. TABELAS
   Em celular, coloque tabelas largas dentro de .gv-table-wrap ou
   .table-responsive do Bootstrap para permitir rolagem horizontal. */
.gv-table-wrap {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gv-border); border-radius: var(--gv-radius-md); background: var(--gv-white);
}
.gv-table { width: 100%; margin-bottom: 0; color: var(--gv-text); border-collapse: separate; border-spacing: 0; }
.gv-table thead th {
    padding: .85rem 1rem; color: var(--gv-green-950); background: var(--gv-green-100);
    border-bottom: 1px solid var(--gv-green-200); font-size: .86rem; font-weight: 800; white-space: nowrap;
}
.gv-table tbody td { padding: .85rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--gv-gray-100); }
.gv-table tbody tr:last-child td { border-bottom: 0; }
.gv-table tbody tr:hover { background: var(--gv-green-50); }

/* 13. PAGINAÇÃO, ABAS E NAVEGAÇÃO SECUNDÁRIA */
.gv-pagination { display: flex; flex-wrap: wrap; gap: .4rem; padding-left: 0; list-style: none; }
.gv-page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--gv-touch-target); min-height: var(--gv-touch-target); padding: .5rem .75rem;
    color: var(--gv-green-800) !important; background: var(--gv-white);
    border: 1px solid var(--gv-border); border-radius: var(--gv-radius-md); text-decoration: none !important;
}
.gv-page-link:hover, .gv-page-link.active { color: var(--gv-white) !important; background: var(--gv-green-700); border-color: var(--gv-green-700); }
.gv-tabs {
    display: flex; gap: .35rem; overflow-x: auto; padding: .25rem;
    background: var(--gv-gray-100); border-radius: var(--gv-radius-lg); -webkit-overflow-scrolling: touch;
}
.gv-tab { flex: 0 0 auto; min-height: var(--gv-touch-target); padding: .65rem 1rem; color: var(--gv-gray-700); background: transparent; border: 0; border-radius: var(--gv-radius-md); font-weight: 700; }
.gv-tab.active { color: var(--gv-green-900); background: var(--gv-white); box-shadow: var(--gv-shadow-sm); }
.gv-breadcrumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; color: var(--gv-text-muted); font-size: .875rem; }
.gv-breadcrumbs > * + *::before { margin-right: .45rem; color: var(--gv-gray-500); content: "/"; }

/* 14. MODAIS E MENUS DROPDOWN DO BOOTSTRAP */
.gv-site .modal-content { overflow: hidden; border: 1px solid var(--gv-border); border-radius: var(--gv-radius-xl); box-shadow: var(--gv-shadow-lg); }
.gv-site .modal-header { color: var(--gv-green-950); background: var(--gv-green-50); border-bottom-color: var(--gv-border); }
.gv-site .modal-footer { background: var(--gv-gray-50); border-top-color: var(--gv-border); }
.gv-site .dropdown-menu { padding: .4rem; border: 1px solid var(--gv-border); border-radius: var(--gv-radius-md); box-shadow: var(--gv-shadow-md); }
.gv-site .dropdown-item { min-height: var(--gv-touch-target); display: flex; align-items: center; border-radius: var(--gv-radius-sm); }
.gv-site .dropdown-item:hover, .gv-site .dropdown-item:focus { color: var(--gv-green-900); background: var(--gv-green-50); }

/* 15. BARRAS DE PROGRESSO E CARTÕES ESTATÍSTICOS */
.gv-progress { width: 100%; height: .7rem; overflow: hidden; background: var(--gv-gray-100); border-radius: var(--gv-radius-pill); }
.gv-progress-bar { height: 100%; width: var(--gv-progress, 0%); background: var(--gv-gradient-main); border-radius: inherit; transition: width 700ms ease; }
.gv-stat { padding: 1.25rem; background: var(--gv-white); border: 1px solid var(--gv-border); border-radius: var(--gv-radius-lg); box-shadow: var(--gv-shadow-sm); }
.gv-stat-label { color: var(--gv-text-muted); font-size: .85rem; font-weight: 650; }
.gv-stat-value { display: block; margin-top: .25rem; color: var(--gv-green-900); font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 850; letter-spacing: -.04em; }

/* 16. RODAPÉ */
.gv-footer { margin-top: 3rem; padding: 2.5rem 0 1.5rem; color: rgba(255,255,255,.82); background: var(--gv-green-950); }
.gv-footer h2, .gv-footer h3, .gv-footer h4, .gv-footer .gv-title { color: var(--gv-white); }
.gv-footer a { color: #b7e8c5; text-decoration: none; }
.gv-footer a:hover { color: var(--gv-white); text-decoration: underline; }
.gv-footer-bottom { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.66); font-size: .85rem; }

/* 17. ANIMAÇÕES
   Estas classes animam elementos ao renderizar. Animação ao rolar a página
   normalmente exige JavaScript/IntersectionObserver ou uma biblioteca. */
@keyframes gv-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gv-fade-right { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gv-zoom-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes gv-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes gv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes gv-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -180% 0; } }
@keyframes gv-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.gv-animate-fade-up { animation: gv-fade-up 600ms ease both; }
.gv-animate-fade-right { animation: gv-fade-right 600ms ease both; }
.gv-animate-zoom-in { animation: gv-zoom-in 450ms ease both; }
.gv-animate-pulse { animation: gv-pulse 2.2s ease-in-out infinite; }
.gv-animate-float { animation: gv-float 3.5s ease-in-out infinite; }
.gv-delay-1 { animation-delay: 100ms; }
.gv-delay-2 { animation-delay: 200ms; }
.gv-delay-3 { animation-delay: 300ms; }
.gv-delay-4 { animation-delay: 400ms; }
.gv-skeleton {
    color: transparent !important;
    background: linear-gradient(90deg, var(--gv-gray-100) 25%, var(--gv-green-100) 50%, var(--gv-gray-100) 75%);
    background-size: 200% 100%; animation: gv-shimmer 1.5s linear infinite; border-radius: var(--gv-radius-sm);
}
.gv-hover-lift { transition: transform var(--gv-transition-normal), box-shadow var(--gv-transition-normal); }
.gv-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--gv-shadow-md); }
.gv-hover-grow { transition: transform var(--gv-transition-normal); }
.gv-hover-grow:hover { transform: scale(1.025); }

/* 18. ESTADOS DE CARREGAMENTO E CONTROLES DESABILITADOS */
.gv-is-loading { position: relative; color: transparent !important; pointer-events: none; }
.gv-is-loading::after {
    position: absolute; top: 50%; left: 50%; width: 1.15rem; height: 1.15rem;
    content: ""; border: 2px solid var(--gv-green-700); border-right-color: transparent;
    border-radius: 50%; transform: translate(-50%, -50%); animation: gv-spin 700ms linear infinite;
}
.gv-btn:disabled, .gv-btn.disabled, .gv-site button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* 19. DIVISORES, ÍCONES E AVISOS DECORATIVOS */
.gv-divider { width: 100%; height: 1px; margin: 1.5rem 0; background: var(--gv-border); border: 0; }
.gv-divider-green { width: 4rem; height: 4px; margin: 1rem 0; background: var(--gv-gradient-main); border: 0; border-radius: var(--gv-radius-pill); }
.gv-icon-box { display: inline-grid; place-items: center; width: 3rem; height: 3rem; color: var(--gv-green-800); background: var(--gv-green-100); border: 1px solid var(--gv-green-200); border-radius: var(--gv-radius-lg); }
.gv-notice { padding: 1rem; color: var(--gv-green-950); background: var(--gv-gradient-soft); border: 1px solid var(--gv-green-200); border-radius: var(--gv-radius-lg); }

/* 20. LAYOUTS AUXILIARES */
.gv-stack { display: flex; flex-direction: column; gap: 1rem; }
.gv-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.gv-section { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.gv-section-compact { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.gv-content-narrow { width: 100%; max-width: 48rem; margin-right: auto; margin-left: auto; }
.gv-content-wide { width: 100%; max-width: 75rem; margin-right: auto; margin-left: auto; }
.gv-aspect-video { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--gv-radius-lg); background: var(--gv-gray-100); }
.gv-aspect-video > img, .gv-aspect-video > video, .gv-aspect-video > iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }

/* 21. RESPONSIVIDADE PARA CELULAR, TABLET E COMPUTADOR */
@media (max-width: 575.98px) {
    body.gv-site { font-size: .96rem; }
    .gv-section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
    .gv-hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .gv-card-body { padding: 1rem; }
    .gv-mobile-buttons .gv-btn, .gv-mobile-buttons .btn { width: 100%; }
    .gv-break-word { overflow-wrap: anywhere; word-break: normal; }
    .gv-table-wrap table { min-width: 36rem; }
    .gv-hide-mobile { display: none !important; }
}
@media (min-width: 576px) {
    .gv-only-mobile { display: none !important; }
}
@media (min-width: 992px) {
    .gv-nav-link:hover { transform: translateY(-1px); }
    .gv-section { padding-top: 4rem; padding-bottom: 4rem; }
}

/* 22. ACESSIBILIDADE: reduzir movimento se essa preferência estiver ativa. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 23. EXEMPLO DE HTML (MANTIDO COMO COMENTÁRIO)
<body class="gv-site">
  <nav class="navbar gv-navbar gv-navbar-sticky">
    <div class="container">
      <a class="gv-brand" href="/">
        <span class="gv-brand-mark">V</span> Minha Marca
      </a>
    </div>
  </nav>

  <header class="gv-hero">
    <div class="container">
      <span class="gv-eyebrow">Bem-vindo</span>
      <h1 class="gv-title">Seu próximo projeto começa aqui</h1>
      <p class="gv-subtitle">Uma apresentação moderna e adaptada ao celular.</p>
      <a class="btn gv-btn gv-btn-primary gv-btn-shine" href="#conteudo">Saiba mais</a>
    </div>
  </header>

  <main class="container gv-section" id="conteudo">
    <div class="row g-3">
      <div class="col-12 col-md-6 col-lg-4">
        <article class="gv-card gv-animate-fade-up">
          <img class="gv-card-image" src="imagem.jpg" alt="Descrição da imagem">
          <div class="gv-card-body">
            <span class="gv-badge">Novidade</span>
            <h2 class="gv-title h5 mt-3">Título do cartão</h2>
            <p>Descrição breve.</p>
            <a href="#" class="btn gv-btn gv-btn-primary">Ver detalhes</a>
          </div>
        </article>
      </div>
    </div>
  </main>
  <footer class="gv-footer"><div class="container">© 2026 Minha Marca</div></footer>
</body>

Notas:
- Troque os textos, imagens e links pelos dados reais.
- O Bootstrap 4 e o Bootstrap 5 têm algumas diferenças nas classes utilitárias.
- A animação inicial não significa que o elemento será animado ao entrar na tela
  durante a rolagem; para isso, implemente um observador JavaScript.
*/