@import url("./layout/grid.css");
@import url("./components/buttons.css");
@import url("./components/cards.css");
@import url("./components/sections.css");

.pg-hotpage {
    /* Mapeamento Oficial do Site */
    --color-primary-50: #f9f0ff;
    --color-primary-100: #f1d7ff;
    --color-primary-200: #e3b8ff;
    --color-primary-300: #d187ff;
    --color-primary-400: #c14bff;
    --color-primary-500: #ae01d9; /* Novo Tom Base */
    --color-primary-600: #9500b8;

    /* Variáveis Semânticas da Hotpage atreladas à Paleta Oficial */
    --hp-btn-bg: var(--color-primary-500);
    --hp-btn-hover: var(--color-primary-600);
    --hp-accent-light: var(--color-primary-50);
    --hp-border-color: var(--color-primary-200);
    /* Para elementos de alerta/perigo, utiliza o tom mais intenso da paleta oficial. */
    --hp-danger: var(--color-primary-600);
    --hp-status-safe: #16a34a;
    --hp-status-warning: #facc15;
    --hp-status-danger: #dc2626;
    --hp-status-warning-text: color-mix(in srgb, var(--hp-status-warning) 52%, var(--hp-text));

    --hp-primary: var(--color-primary-500);
    --hp-primary-contrast: var(--color-accent);
    --hp-text: var(--color-secondary);
    --hp-text-inverse: var(--color-accent);
    --hp-muted: color-mix(in srgb, var(--color-secondary) 62%, transparent);
    --hp-muted-inverse: color-mix(in srgb, var(--color-accent) 76%, transparent);
    --hp-surface: var(--color-background-1);
    --hp-surface-soft: var(--color-background-2);
    --hp-surface-dark: var(--color-background-8);
    --hp-surface-dark-2: var(--color-background-7);
    --hp-line: var(--color-stroke-2);
    --hp-line-dark: var(--color-stroke-7);
    --hp-warning: var(--color-primary-400);
    --hp-safe: var(--color-primary-300);
    --hp-info: var(--color-primary-200);
    --hp-shadow-soft: 0 24px 70px color-mix(in srgb, var(--color-secondary) 14%, transparent);
    --hp-shadow-tight: 0 16px 34px color-mix(in srgb, var(--color-secondary) 11%, transparent);
    --hp-radius-sm: var(--radius-lg);
    --hp-radius-md: var(--radius-2xl);
    --hp-radius-lg: var(--radius-4xl);
    --hp-section-y: clamp(72px, 9vw, 128px);
    color: var(--hp-text);
    background: var(--hp-surface);
}

.pg-hotpage .hp-main {
    overflow: hidden;
}

.pg-hotpage .hp-icon {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.pg-hotpage .hp-kicker {
    width: fit-content;
    margin: 0 0 18px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--hp-border-color) 72%, transparent);
    border-radius: 999px;
    color: var(--hp-danger);
    background: color-mix(in srgb, var(--hp-accent-light) 72%, transparent);
    font-size: var(--text-tagline-3);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.pg-hotpage .hp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 32px;
}

.pg-hotpage .hp-actions--center {
    justify-content: center;
}

@media (max-width: 720px) {
    .pg-hotpage .hp-actions {
        align-items: stretch;
        flex-direction: column;
    }
}