/* ==========================================================================
   ACADEMIA INFÂNCIA — GUIA DE ESTILO
   Componentes reutilizáveis (btn, card, field, acc, tabs, alert, table, ...)
   + estilos de apresentação da própria página (prefixo .sg-).
   Consome apenas tokens de tokens.css. Nunca redefine valores.
   ========================================================================== */

/* ==========================================================================
   1. BASE — quando a página está no modo guia (body.ai-guide-page)
   ========================================================================== */
body.ai-guide-page {
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.ai-guide-page,
body.ai-guide-page input,
body.ai-guide-page select,
body.ai-guide-page textarea,
body.ai-guide-page button {
    font-family: var(--font-body);
}

/* Elementos base dentro do guia — com especificidade zero (:where) para que
   os componentes (.btn, .card, .alert, ...) possam sempre sobrepor-se. */
:where(.sg) :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
    font-weight: var(--fw-light);
    color: var(--c-ink);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    margin-block: 0;
}

/* dentro do guia o espaçamento dos títulos é controlado pelo layout */
:where(.sg) :where(h1, h2, h3, h4) { margin-block: 0 var(--sp-3); }

:where(.sg) p { margin: 0 0 var(--sp-4); }
:where(.sg) :where(p:last-child) { margin-bottom: 0; }

:where(.sg) a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(.sg) a:hover { color: var(--c-accent-700); }

:where(.sg) img { max-width: 100%; height: auto; display: block; }
body.ai-guide-page *,
body.ai-guide-page *::before,
body.ai-guide-page *::after { box-sizing: border-box; }

body.ai-guide-page :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* helper tipográfico */
.nowrap { white-space: nowrap; }
.mx-auto { margin-inline: auto; }
.muted { color: var(--c-muted); }
.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--sp-3);
}
.lead { font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--c-muted); }

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-lg { gap: var(--sp-7); }

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

.row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--sp-4); }


/* ==========================================================================
   13. APRESENTAÇÃO DA PÁGINA (prefixo .sg-)
   ========================================================================== */
.sg { background: var(--c-white); }

/* Hero */
.sg-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--c-offwhite); border-bottom: 1px solid var(--c-line); }
.sg-hero__inner { position: relative; z-index: 1; max-width: 72ch; }
.sg-hero h1 { font-size: var(--fs-4xl); margin-bottom: var(--sp-5); }
.sg-hero .lead { max-width: 60ch; }

/* Cabeçalho de secção */
.sg-sec { padding-block: clamp(2.75rem, 6vw, 5rem); border-bottom: 1px solid var(--c-line); }
.sg-sec--soft { background: var(--c-offwhite); }
.sg-sec__head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-7); max-width: 74ch; }
.sg-sec__num {
    flex: none;
    width: 2.6rem; height: 2.6rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1;
    padding-top: 2px;
    padding-left: 1px;
}
.sg-sec__head h2 { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); }
.sg-sec__head p { margin: 0; color: var(--c-muted); }

/* Blocos de amostra */
.sg-block {
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-white);
    padding: var(--sp-6);
}
.sg-block--pad-lg { padding: clamp(1.5rem, 4vw, 3rem); }
.sg-block__label {
    display: inline-block;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-muted);
}
.sg-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.sg-row--stretch { align-items: stretch; }
.sg-col { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Logos */
.sg-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.sg-logo-cell {
    position: relative;
    display: grid; place-items: center;
    aspect-ratio: 16/9;
    padding: var(--sp-6);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.sg-logo-cell img { max-height: 64px; width: auto; }
.sg-logo-cell__tag {
    position: absolute; top: var(--sp-4); left: var(--sp-4);
    font-size: var(--fs-xs); letter-spacing: var(--ls-caps);
    text-transform: uppercase; color: var(--c-muted);
}
.sg-logo-cell--white { background: var(--c-white); }
.sg-logo-cell--offwhite { background: var(--c-offwhite); border-color: transparent; }
.sg-logo-cell--primary { background: var(--c-primary); border-color: transparent; }
.sg-logo-cell--primary .sg-logo-cell__tag { color: rgba(255,255,255,.7); }
@media (max-width: 620px) { .sg-logo-grid { grid-template-columns: 1fr; } }

/* Paleta */
.sg-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .sg-swatches { grid-template-columns: repeat(2, 1fr); } }
.sg-swatch { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; background: var(--c-white); }
.sg-swatch__chip { height: 96px; }
.sg-swatch__meta { padding: var(--sp-4); }
.sg-swatch__name { font-weight: var(--fw-bold); color: var(--c-ink); }
.sg-swatch__hex { font-family: ui-monospace, monospace; font-size: var(--fs-sm); color: var(--c-muted); }
.sg-swatch__role { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-1); }

/* Tipografia */
.sg-type-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-5); align-items: baseline; padding: var(--sp-4) 0; border-bottom: 1px dashed var(--c-line); }
.sg-type-row:last-child { border-bottom: 0; }
.sg-type-row__meta { font-size: var(--fs-xs); color: var(--c-muted); font-family: ui-monospace, monospace; }
.sg-type-row__demo h1, .sg-type-row__demo h2, .sg-type-row__demo h3, .sg-type-row__demo h4 { margin: 0; }
@media (max-width: 620px) { .sg-type-row { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* Espaçamento */
.sg-space-row { display: grid; grid-template-columns: 72px 1fr 72px; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-2); }
.sg-space-row__name { font-family: ui-monospace, monospace; font-size: var(--fs-xs); color: var(--c-muted); }
.sg-space-row__bar { height: 18px; background: var(--c-accent-soft); border-radius: 4px; }
.sg-space-row__val { font-family: ui-monospace, monospace; font-size: var(--fs-xs); color: var(--c-muted); text-align: right; }

/* Galeria */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

figure.rounded { margin: 0 0 var(--sp-6); }
figure.rounded img { width: 100%; border-radius: var(--r-lg); }
figure.rounded figcaption { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-3); }

/* Placeholders de imagem */
.ph {
    display: grid; place-items: center;
    aspect-ratio: 4/3;
    border-radius: var(--r-md);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.ph--accent { background: var(--c-accent-soft); color: var(--c-accent); }
.ph--soft { background: var(--c-secondary); color: var(--c-muted); }

/* Ícones */
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-4); }
.sg-icon-cell {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-white);
    color: var(--c-primary);
    font-size: var(--fs-xs);
    text-align: center;
}
.sg-icon-cell svg { width: 26px; height: 26px; }

/* Rodapé (exemplo) */
.sg-footer-demo { background: var(--c-primary); color: rgba(255,255,255,.85); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 3rem); }
.sg-footer-demo h4 { color: var(--c-white); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; margin-bottom: var(--sp-4); }
.sg-footer-demo a { color: rgba(255,255,255,.85); text-decoration: none; }
.sg-footer-demo a:hover { color: var(--c-white); text-decoration: underline; }
.sg-footer-demo img { max-height: 64px; margin-bottom: var(--sp-4); }

/* Tokens */
.sg-tokens { min-width: 0; }
.sg-tokens td { font-family: ui-monospace, monospace; font-size: var(--fs-xs); }
.sg-token-chip { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: var(--sp-2); vertical-align: middle; border: 1px solid var(--c-line); }

/* ==========================================================================
   14. FOOTER REAL
   Os estilos do rodapé (.ai-footer) vivem agora em assets/footer.css, para
   serem carregados em todo o site. Aqui fica só a demo do guia (.sg-footer-demo).
   ========================================================================== */
@media (max-width: 960px) { .sg-footer-demo .grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sg-footer-demo .grid--4 { grid-template-columns: 1fr; } }

/* Mais respiro em mobile */
@media (max-width: 620px) {
    .sg-sec { padding-block: 3.5rem; }
    .sg-hero { padding-block: 4.5rem; }
    .sg-sec__head { margin-bottom: var(--sp-6); }
}

/* ==========================================================================
   18. REALCES DOURADOS
   O --c-accent passou a ser o dourado: ligações, ênfase e pequenos realces.
   O azul fica para o principal e para os círculos dos números de secção.
   ========================================================================== */
.eyebrow,
.sg-block__label,
blockquote cite,
.formador-profile__role { color: var(--c-gold-700); }

blockquote::before { color: var(--c-gold); }
blockquote cite::before { background: var(--c-gold); }

.badge--accent,
.badge--primary,
.badge--gold { background: var(--c-gold-soft); color: var(--c-gold-700); }

.sg mark { background: var(--c-gold-soft); color: var(--c-ink); }

.acc > summary:hover::after,
.acc[open] > summary::after { border-color: var(--c-gold); }

.modulo-item__num { background: var(--c-gold-soft); color: var(--c-gold-700); }
.progress__bar { background: var(--c-gold); }
.stat { color: var(--c-gold); }
.breadcrumb li:not(:last-child)::after { color: var(--c-gold); }
.field .req { color: var(--c-gold-700); }