/* ============================================
   Global — Reset & Base (Design System)
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

html, body {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

body {
    font-family: var(--inoxmilk-typography-family-body);
    font-size: var(--inoxmilk-typography-size-body);
    line-height: 1.6;
    color: var(--inoxmilk-color-semantic-text-main);
    background-color: var(--inoxmilk-color-semantic-background-default);
    font-weight: var(--inoxmilk-typography-weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Section container — usado em todas as páginas */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 768px) {
    .section-container {
        padding: 0 20px;
    }
}

/* ============================================
   Tipografia — Design System
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--inoxmilk-typography-family-heading);
    color: var(--inoxmilk-color-semantic-text-main);
    font-weight: var(--inoxmilk-typography-weight-bold);
    line-height: 1.15;
    margin-bottom: var(--inoxmilk-spacing-md);
}

h1 { font-size: var(--inoxmilk-typography-size-h1); }
h2 { font-size: var(--inoxmilk-typography-size-h2); }
h3 { font-size: var(--inoxmilk-typography-size-price); }
h4 { font-size: 18px; }

p {
    margin-bottom: var(--inoxmilk-spacing-sm);
}

a {
    transition: color 0.2s ease;
}



/* ============================================
   Botões — Design System
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--inoxmilk-spacing-md) var(--inoxmilk-spacing-lg);
    border-radius: var(--inoxmilk-border-radius-md);
    font-family: var(--inoxmilk-typography-family-heading);
    font-weight: var(--inoxmilk-typography-weight-bold);
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: scale(0.97);
}

/* Primary */
.btn-primary {
    background: var(--inoxmilk-color-semantic-action-primary-default);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(205, 0, 6, 0.25);
}

.btn-primary:hover {
    background: var(--inoxmilk-color-semantic-action-primary-hover);
    box-shadow: 0 6px 20px rgba(205, 0, 6, 0.35);
}

/* Secondary */
.btn-secondary {
    background: var(--inoxmilk-color-semantic-action-secondary-default);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(51, 65, 85, 0.25);
}

.btn-secondary:hover {
    background: var(--inoxmilk-color-semantic-action-secondary-hover);
    box-shadow: 0 6px 20px rgba(51, 65, 85, 0.35);
}

/* ============================================
   Scrollbar — Premium
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--inoxmilk-color-primitive-steel-50);
}

::-webkit-scrollbar-thumb {
    background: var(--inoxmilk-color-primitive-steel-400);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--inoxmilk-color-primitive-steel-900);
}