/* ==========================================================================
   ACADEMIA INFÂNCIA — COMPONENTES
   Componentes reutilizáveis (layout, botões, badges, cards, formulários,
   alertas, acordeão, abas, tabelas, citações, curso-card, formador-profile,
   tree, price, breadcrumb, pagination, ...).
   Extraído de hello-elementor-child/assets/guia.css (secções 2 a 12 e 18;
   a apresentação do guia, .sg-*, ficou de fora).
   Consome apenas tokens de tokens.css.
   ========================================================================== */

/* ==========================================================================
   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); }

/* ==========================================================================
   3. BOTÕES
   ========================================================================== */
.btn,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    --btn-bg: var(--c-primary);
    --btn-fg: var(--c-white);
    --btn-bd: var(--c-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: .9em 1.7em;
    min-height: var(--control-h);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover { background: var(--c-primary-700); border-color: var(--c-primary-700); color: var(--c-white); box-shadow: var(--sh-md); }

.btn--accent { --btn-bg: var(--c-accent); --btn-bd: var(--c-accent); }
.btn--accent:hover { background: var(--c-accent-700); border-color: var(--c-accent-700); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-primary); --btn-bd: var(--c-primary); border-width: 2px; }
.btn--outline:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-primary); --btn-bd: transparent; }
.btn--ghost:hover { background: var(--c-primary-soft); border-color: transparent; color: var(--c-primary); box-shadow: none; }

.btn--soft { --btn-bg: var(--c-primary-soft); --btn-fg: var(--c-primary); --btn-bd: transparent; }
.btn--soft:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

/* Botão claro para fundos escuros: fundo branco, texto invertido */
.btn--light { --btn-bg: var(--c-white); --btn-fg: var(--c-primary); --btn-bd: var(--c-white); }
.btn--light:hover { background: var(--c-offwhite); border-color: var(--c-offwhite); color: var(--c-primary); }

.btn--sm { padding: .6em 1.2em; font-size: var(--fs-xs); min-height: 0; }
.btn--lg { padding: 1.1em 2.1em; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: .8em; aspect-ratio: 1; min-height: 0; }

.btn.is-disabled,
.btn[disabled] { opacity: .45; pointer-events: none; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-weight: var(--fw-medium);
    color: var(--c-accent);
    text-decoration: none;
}
.link-arrow::after {
    content: "";
    width: .42em;
    height: .42em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--tr-fast);
}
.link-arrow:hover::after { transform: translateX(4px) rotate(-45deg); }

/* ==========================================================================
   4. BADGES E SELOS
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3em .8em;
    border-radius: var(--r-pill);
    background: var(--c-secondary);
    color: var(--c-text);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    line-height: 1.4;
    white-space: nowrap;
}
.badge--primary { background: var(--c-primary-soft); color: var(--c-primary); }
.badge--accent  { background: var(--c-accent-soft); color: var(--c-accent); }
.badge--dark    { background: var(--c-primary); color: var(--c-white); }
/* Desconto (preço de campanha, pack, etc.) — dourado da marca com letra branca,
   igual ao botão de realce (`.btn--accent`); não é um estado de erro. */
.badge--discount { background: var(--c-gold); color: var(--c-white); }
.badge--outline { background: transparent; border: 1px solid var(--c-line-strong); color: var(--c-muted); }
.badge--success { background: var(--c-success-soft); color: var(--c-success); }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.badge--danger  { background: var(--c-danger-soft); color: var(--c-danger); }
.badge--dot::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.badge--lg { padding: .45em 1em; font-size: var(--fs-sm); }

/* ==========================================================================
   5. CARDS
   ========================================================================== */
.card {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--sh-sm);
}
.card h3 { color: var(--c-ink); }
.card--soft { background: var(--c-offwhite); border-color: transparent; }
.card--primary { background: var(--c-primary-soft); border-color: transparent; }
.card--accent { background: var(--c-accent-soft); border-color: transparent; }
.card--dark { background: var(--c-primary); border-color: transparent; color: rgba(255,255,255,.9); }
.card--dark h1, .card--dark h2, .card--dark h3, .card--dark h4 { color: var(--c-white); }
.card--dark a:not(.btn) { color: var(--c-white); }
.card--flat { box-shadow: none; }
.card--hover { transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-line-strong); }

.card-media { padding: 0; overflow: hidden; }
.card-media > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card-media__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }

.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); }

/* estatística */
.stat { font-family: var(--font-heading); font-size: var(--fs-4xl); font-weight: var(--fw-light); color: var(--c-primary); line-height: 1; margin: 0; }
.stat__label { font-size: var(--fs-sm); color: var(--c-muted); margin: var(--sp-2) 0 0; }

/* ==========================================================================
   6. FORMULÁRIOS
   ========================================================================== */
/* Campos de formulário genéricos: herdam o desenho do tema por defeito */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    padding: .85em 1em;
    min-height: var(--control-h);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-md);
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.4;
}

.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field > label,
.field legend {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}
.field .req { color: var(--c-danger); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.field select,
.field textarea {
    width: 100%;
    padding: .85em 1em;
    margin: 0;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-md);
    background: var(--c-white);
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: 1.4;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
    -webkit-appearance: none;
    appearance: none;
}
.field select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%236B6B6B%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    padding-right: 2.5em;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); }
.field input::placeholder,
.field textarea::placeholder { color: var(--c-gray); }
.field input:disabled,
.field select:disabled,
.field textarea:disabled { background: var(--c-secondary-soft); color: var(--c-muted); cursor: not-allowed; }
.field textarea { min-height: 140px; resize: vertical; }

/* ==========================================================================
   Campo com botão integrado (ex.: aplicar cupão).
   O campo adopta o mesmo box model do botão (.9em / --fs-sm / line-height 1)
   para ficarem exactamente com a mesma altura.
   ========================================================================== */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.input-group > :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select) {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > :is(.btn, .button, button, input[type="submit"]) {
    flex: 0 0 auto;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > :is(input, select):focus { position: relative; z-index: 1; }
.field__help { font-size: var(--fs-xs); color: var(--c-muted); }
.field__error { display: flex; align-items: center; gap: .4em; font-size: var(--fs-xs); color: var(--c-danger); }
.field .is-error { border-color: var(--c-danger) !important; }
.field .is-error:focus { box-shadow: 0 0 0 3px var(--c-danger-soft), 0 0 0 1px var(--c-danger); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
fieldset legend { margin-bottom: var(--sp-3); }

/* Escolhas — checkbox/radio com toda a área (controlo + label) clicável */
.choice {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.choice:hover { background: var(--c-offwhite); border-color: var(--c-line-strong); }
.choice:has(input:checked) { background: var(--c-primary-soft); }
.choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.choice input[type="checkbox"],
.choice input[type="radio"] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--c-primary);
    cursor: pointer;
}

/* barra de progresso */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--c-secondary); overflow: hidden; }
.progress__bar { height: 100%; background: var(--c-accent); border-radius: inherit; }
.progress__meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-2); }

/* ==========================================================================
   7. ALERTAS
   ========================================================================== */
.alert {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: var(--c-offwhite);
    font-size: var(--fs-sm);
    color: var(--c-text);
}
.alert__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
}
.alert__icon svg { width: 1.9em; height: 1.9em; display: block; }
.alert__body { flex: 1; line-height: 1.5; transform: translateY(1px); }
.alert--info    { background: var(--c-info-soft);    color: var(--c-primary); }
.alert--success { background: var(--c-success-soft); color: var(--c-success); }
.alert--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.alert--error   { background: var(--c-danger-soft);  color: var(--c-danger); }

/* ==========================================================================
   8. ACORDEÃO (details/summary, sem JS)
   ========================================================================== */
/* Base — chevron discreto */
.acc {
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-white);
    margin-bottom: var(--sp-3);
    overflow: hidden;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.acc[open] { border-color: var(--c-line-strong); box-shadow: var(--sh-sm); }
.acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
    list-style: none;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after,
.acc[open] > summary::after {
    content: "";
    flex: none;
    display: block;
    width: .6em; height: .6em;
    background: none;
    border: 0;
    border-right: 2px solid var(--c-muted);
    border-bottom: 2px solid var(--c-muted);
    border-radius: 0;
    transform: rotate(45deg);
    transition: transform var(--tr), border-color var(--tr);
    margin-right: .25em;
}
.acc > summary:hover::after { border-color: var(--c-accent); }
.acc[open] > summary::after { transform: rotate(-135deg); border-color: var(--c-primary); }
.acc__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-muted); }
.acc__body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   9. ABAS (apenas CSS)
   ========================================================================== */
.tabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tabs__list { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: 1px solid var(--c-line); }
.tabs__list label {
    padding: .8em 1.2em;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--tr-fast), border-color var(--tr-fast);
}
.tabs__list label:hover { color: var(--c-primary); }
.tabs__panels { padding-top: var(--sp-5); }
.tabs__panel { display: none; }
.tabs > input:nth-of-type(1):checked ~ .tabs__list label:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ .tabs__list label:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .tabs__list label:nth-of-type(3),
.tabs > input:nth-of-type(4):checked ~ .tabs__list label:nth-of-type(4),
.tabs > input:nth-of-type(5):checked ~ .tabs__list label:nth-of-type(5),
.tabs > input:nth-of-type(6):checked ~ .tabs__list label:nth-of-type(6),
.tabs > input:nth-of-type(7):checked ~ .tabs__list label:nth-of-type(7),
.tabs > input:nth-of-type(8):checked ~ .tabs__list label:nth-of-type(8) { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tabs > input:nth-of-type(1):checked ~ .tabs__panels [data-tab="1"],
.tabs > input:nth-of-type(2):checked ~ .tabs__panels [data-tab="2"],
.tabs > input:nth-of-type(3):checked ~ .tabs__panels [data-tab="3"],
.tabs > input:nth-of-type(4):checked ~ .tabs__panels [data-tab="4"],
.tabs > input:nth-of-type(5):checked ~ .tabs__panels [data-tab="5"],
.tabs > input:nth-of-type(6):checked ~ .tabs__panels [data-tab="6"],
.tabs > input:nth-of-type(7):checked ~ .tabs__panels [data-tab="7"],
.tabs > input:nth-of-type(8):checked ~ .tabs__panels [data-tab="8"] { display: block; }

/* ==========================================================================
   10. TABELAS
   ========================================================================== */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.table-wrap table,
.table { min-width: 560px; }

/* Tabelas: o estilo do tema aplica-se a qualquer <table> por defeito */
table,
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
table th,
table td,
.table th,
.table td {
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    border-bottom: 1px solid var(--c-line);
    background: none;
}
table thead th,
.table thead th {
    background: var(--c-offwhite);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-muted);
}
table tbody tr:last-child td,
.table tbody tr:last-child td { border-bottom: 0; }
table tbody tr:hover td,
.table tbody tr:hover td { background: var(--c-offwhite); }
.table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
table tfoot th,
table tfoot td,
.table tfoot th,
.table tfoot td {
    background: none;
    border-top: 2px solid var(--c-line-strong);
    border-bottom: 0;
    font-weight: var(--fw-bold);
    color: var(--c-ink);
}

/* ==========================================================================
   11. CITAÇÕES E CONTEÚDO LONGO
   ========================================================================== */
blockquote {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: var(--sp-8) var(--sp-4) 0;
    background: none;
    border: 0;
    text-align: center;
}
blockquote::before {
    content: "\201C";
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: clamp(7rem, 13vw, 11rem);
    line-height: .8;
    color: var(--c-accent);
    opacity: .12;
    z-index: -1;
    pointer-events: none;
}
blockquote p {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-weight: var(--fw-light);
    font-size: var(--fs-xl);
    line-height: 1.45;
    color: var(--c-ink);
    max-width: 46ch;
    margin: 0 auto;
}
blockquote cite {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: var(--sp-5);
    font-size: var(--fs-xs);
    font-style: normal;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-muted);
}
blockquote cite::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin: 0 auto var(--sp-4);
    background: var(--c-accent);
}

/* Variante alinhada à esquerda */
blockquote.quote--left {
    text-align: left;
    padding-right: 0;
    padding-left: var(--sp-6);
}
blockquote.quote--left::before { left: 0; transform: none; }
blockquote.quote--left p { margin-left: 0; margin-right: auto; }
blockquote.quote--left cite::before { margin-left: 0; }
:where(.sg) mark { background: var(--c-accent-soft); color: var(--c-primary); padding: 0 .25em; border-radius: 3px; }
:where(.sg) code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--c-secondary); padding: .15em .45em; border-radius: 4px; }
:where(.sg) pre { background: var(--c-ink); color: #E6E6E6; padding: var(--sp-5); border-radius: var(--r-md); overflow-x: auto; }
:where(.sg) pre code { background: none; padding: 0; color: inherit; }
:where(.sg) hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-6) 0; }
:where(.sg) :where(ul, ol) { padding-left: 1.3em; margin: 0 0 var(--sp-4); }
:where(.sg) li { margin-bottom: var(--sp-2); }
/* Sub-listas dentro de um item: espaço simétrico em cima e em baixo */
:where(.sg) :where(li > ul, li > ol) { margin-top: var(--sp-2); margin-bottom: var(--sp-2); }

/* ==========================================================================
   12. COMPONENTES REAIS DO SITE — card de curso, preço, formador
   ========================================================================== */
.curso-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform var(--tr), box-shadow var(--tr);
    height: 100%;
}
.curso-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.curso-card__media { position: relative; }
.curso-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.curso-card__badges { position: absolute; top: var(--sp-4); left: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.curso-card__badges .badge { box-shadow: 0 2px 6px rgba(17, 17, 17, .28); }
.curso-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.curso-card__title { font-size: var(--fs-lg); line-height: var(--lh-snug); margin-bottom: var(--sp-2); }
.curso-card__title a { color: var(--c-ink); text-decoration: none; }
.curso-card__title a:hover { color: var(--c-accent); }
/* Cartão inteiro clicável: o link do título estica-se por cima do cartão. */
.curso-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.curso-card:has(.curso-card__title a:focus-visible) { box-shadow: var(--focus-ring); }
.curso-card__desc { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-4); }
.curso-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-5); }
.curso-card__meta span { display: inline-flex; align-items: center; gap: .4em; }
.curso-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

.price { display: flex; align-items: baseline; gap: var(--sp-2); font-family: var(--font-heading); color: var(--c-primary); }
.price__amount { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.price__del { font-size: var(--fs-sm); color: var(--c-muted); text-decoration: line-through; }
.price__note { font-size: var(--fs-xs); color: var(--c-muted); }

/* Perfil de formador */
.formador-profile {
    display: flex;
    gap: var(--sp-7);
    align-items: center;
    padding: var(--sp-6);
    background: var(--c-offwhite);
    border-radius: var(--r-lg);
}
.formador-profile__image { flex: 0 0 180px; }
.formador-profile__image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-pill); }
.formador-profile__body { flex: 1; }
.formador-profile__body h3 { margin-bottom: var(--sp-1); }
.formador-profile__role { font-size: var(--fs-sm); color: var(--c-accent); font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }
.formador-profile__desc { font-size: var(--fs-sm); margin: 0; }
@media (max-width: 720px) {
    .formador-profile { flex-direction: column; align-items: center; text-align: center; }
    .formador-profile__image { flex: none; max-width: 160px; }
}

/* Árvore de módulos / submódulos */
.curso-tree__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.curso-tree__head h3 { margin: 0; }
.tree { font-size: var(--fs-sm); }
.tree__list { list-style: none; margin: 0; padding: 0; }
.tree__item { margin: 0; }
.tree__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .55em .7em;
    border-radius: var(--r-sm);
    color: var(--c-ink);
    cursor: pointer;
    list-style: none;
    transition: background var(--tr-fast);
}
.tree__row::-webkit-details-marker { display: none; }
.tree__row:hover { background: var(--c-offwhite); }
.tree__row--leaf { cursor: default; }
.tree__row--leaf:hover { background: transparent; }
.tree__caret {
    flex: none;
    width: .45em; height: .45em;
    border-right: 2px solid var(--c-accent);
    border-bottom: 2px solid var(--c-accent);
    transform: rotate(-45deg);
    transition: transform var(--tr);
    margin-left: .1em;
}
.tree__node[open] > .tree__row .tree__caret { transform: rotate(45deg); }
.tree__dot {
    flex: none;
    width: .4em; height: .4em;
    border-radius: 50%;
    background: var(--c-accent);
    margin-left: .25em;
}
.tree__title { flex: 1; }
.tree__count {
    flex: none;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    background: var(--c-secondary);
    border-radius: var(--r-pill);
    padding: .1em .6em;
    font-variant-numeric: tabular-nums;
}
.tree__children {
    margin: var(--sp-1) 0 var(--sp-2) 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--c-line);
}

/* Módulo de curso */
.modulo-item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-white);
}
.modulo-item__num {
    flex: none;
    display: grid; place-items: center;
    width: 2.2em; height: 2.2em;
    border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}
.modulo-item__title { flex: 1; font-weight: var(--fw-medium); color: var(--c-ink); }
.modulo-item__dur { font-size: var(--fs-xs); color: var(--c-muted); }

/* Passos / breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-muted); list-style: none; padding: 0; margin: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--sp-2); color: var(--c-gray); }
.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent); }

/* Paginação */
.pagination { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.pagination a, .pagination span {
    display: grid; place-items: center;
    min-width: 2.4em; height: 2.4em;
    padding: 0 .5em;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--c-text);
    text-decoration: none;
}
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pagination .current { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }


/* ==========================================================================
   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,
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); }

/* O Painel do Formando tem CSS próprio: assets/painel.css (carregado só nas
   páginas 322/378). As abas genéricas (.tabs) ficam na secção 9. */

/* ==========================================================================
   GALERIA — miniaturas com lightbox reutilizável
   ========================================================================== */
.ai-gallery {
    width: 100%;
}

.ai-gallery__strip {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding: var(--sp-1) 0 var(--sp-2);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.ai-gallery__strip::-webkit-scrollbar {
    height: 6px;
}

.ai-gallery__strip::-webkit-scrollbar-thumb {
    background: var(--c-line-strong);
    border-radius: var(--r-pill);
}

.ai-gallery__thumb {
    flex: 0 0 auto;
    width: 86px;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-primary-soft);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .15s ease, transform .15s ease;
}

.ai-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-gallery__thumb:hover {
    border-color: var(--c-line-strong);
}

.ai-gallery__thumb.is-active {
    border-color: var(--c-gold);
}

.ai-gallery__thumb:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* Lightbox */
.ai-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3.5rem);
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility .2s ease;
}

.ai-gallery-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}

.ai-gallery-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 14, .92);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.ai-gallery-lightbox__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    width: min(1100px, 100%);
    max-height: 100%;
}

.ai-gallery-lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 10rem);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.ai-gallery-lightbox__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
    min-height: 1.5em;
    color: rgba(255, 255, 255, .78);
    font-size: var(--fs-sm);
    text-align: center;
}

.ai-gallery-lightbox__counter {
    color: var(--c-white);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
}

.ai-gallery-lightbox__caption:empty {
    display: none;
}

.ai-gallery-lightbox__close,
.ai-gallery-lightbox__nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--c-white);
    font-family: var(--font-body);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ai-gallery-lightbox__close:hover,
.ai-gallery-lightbox__nav:hover,
.ai-gallery-lightbox__close:focus-visible,
.ai-gallery-lightbox__nav:focus-visible {
    background: var(--c-white);
    color: var(--c-ink);
    border-color: var(--c-white);
    outline: 0;
}

.ai-gallery-lightbox__close {
    top: clamp(.75rem, 2vw, 1.5rem);
    right: clamp(.75rem, 2vw, 1.5rem);
    font-size: 26px;
}

.ai-gallery-lightbox__nav--prev {
    top: 50%;
    left: clamp(.5rem, 2vw, 1.75rem);
    transform: translateY(-50%);
}

.ai-gallery-lightbox__nav--next {
    top: 50%;
    right: clamp(.5rem, 2vw, 1.75rem);
    transform: translateY(-50%);
}

.ai-gallery-lightbox__nav[hidden] {
    display: none;
}

body.ai-gallery-open {
    overflow: hidden;
}

@media (max-width: 620px) {
    .ai-gallery-lightbox {
        padding: .75rem;
    }

    .ai-gallery-lightbox__img {
        max-height: calc(100vh - 12rem);
    }

    .ai-gallery-lightbox__nav {
        width: 42px;
        height: 42px;
        font-size: 26px;
    }
}

/* ==========================================================================
   COMPATIBILIDADE — markup legado com classes do Elementor (plugin)
   O plugin ainda emite .elementor-button em botoes de curso/acesso.
   ========================================================================== */
.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: var(--control-h);
    padding: 0 var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--c-primary);
    color: var(--c-white) !important;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background var(--tr-fast), box-shadow var(--tr-fast);
}
.elementor-button:hover {
    background: var(--c-primary-700);
    box-shadow: var(--sh-md);
    color: var(--c-white) !important;
}