/* ==========================================================================
   Doce Capricho — Base
   Reset enxuto, tipografia e componentes elementares.
   A biblioteca completa de componentes chega na Fase 1, vinda do Claude Design.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    min-height: 100vh;
    font-family: var(--fonte-texto);
    font-size: var(--txt-base);
    font-weight: var(--peso-medio);
    line-height: var(--altura-normal);
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select { font: inherit; color: inherit; }

/* --- Tipografia --------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--fonte-display);
    font-weight: var(--peso-regular);
    line-height: var(--altura-apertada);
    color: var(--cacau-800);
    text-wrap: balance;
}

h1 { font-size: var(--txt-4xl); }
h2 { font-size: var(--txt-3xl); }
h3 { font-size: var(--txt-2xl); }
h4 { font-size: var(--txt-xl); }

p { text-wrap: pretty; max-width: var(--largura-texto); }

a {
    color: var(--cor-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--transicao);
}

a:hover { color: var(--rosa-700); }

/* Foco visível e consistente — nunca remover sem substituir */
:focus-visible {
    outline: 2px solid var(--cor-foco);
    outline-offset: 3px;
    border-radius: var(--raio-sm);
}

/* Assinatura da marca: "doce" em serifa, "Capricho" em manuscrita */
.marca-script {
    font-family: var(--fonte-script);
    font-weight: var(--peso-bold);
    color: var(--cacau-700);
}

.marca-display {
    font-family: var(--fonte-display);
    color: var(--cacau-700);
}

.sobretitulo {
    font-family: var(--fonte-texto);
    font-size: var(--txt-xs);
    font-weight: var(--peso-semi);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--cacau-500);
}

/* --- Layout -------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.pilha > * + * { margin-top: var(--sp-4); }

/* --- Botões -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    min-height: 44px;              /* alvo de toque confortável */
    border: 1px solid transparent;
    border-radius: var(--raio-pill);
    font-size: var(--txt-base);
    font-weight: var(--peso-semi);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transicao), border-color var(--transicao),
                color var(--transicao), transform var(--transicao);
}

.btn:active { transform: translateY(1px); }

/* Fundo rosa-600 (5,19:1 com branco). O rosa-400 da marca reprova em AA. */
.btn--primario {
    background-color: var(--cor-acao);
    color: var(--cor-acao-texto);
}

.btn--primario:hover {
    background-color: var(--cor-acao-hover);
    color: var(--cor-acao-texto);
}

.btn--secundario {
    background-color: transparent;
    border-color: var(--cacau-300);
    color: var(--cacau-700);
}

.btn--secundario:hover {
    background-color: var(--creme-100);
    border-color: var(--cacau-500);
    color: var(--cacau-800);
}

/* --- Utilitários --------------------------------------------------------- */

.apenas-leitor-tela {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pular-para-conteudo {
    position: absolute;
    left: var(--sp-4);
    top: -100px;
    z-index: 100;
    padding: var(--sp-3) var(--sp-4);
    background: var(--cor-superficie);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    transition: top var(--transicao);
}

.pular-para-conteudo:focus { top: var(--sp-4); }

/* Ambiente de treino (App\Support\Ambiente): só existe no subdomínio de treino,
   nunca no site de verdade — por isso aqui, que vale para o site e o painel.
   Listrada para não se confundir com nenhuma faixa da loja. */
.faixa-treino {
    max-width: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 var(--sp-3);
    padding: var(--sp-2) var(--gutter, var(--sp-4));
    background: repeating-linear-gradient(-45deg, #FFE08A 0 14px, #FFD45C 14px 28px);
    color: #4C2810;
    font-size: var(--txt-sm);
    line-height: 1.35;
    text-align: center;
}
.faixa-treino strong { text-transform: uppercase; letter-spacing: .06em; }
.faixa-treino a { color: inherit; text-decoration: underline; }