/*
 * Biblioteca técnica (/tecnico/)
 * Page-only styles for the brand-neutral /tecnico pages. Loaded after
 * styles/pages/main.css; every rule is scoped to .tec-* or to the
 * .tecnico-page body class, so no other page changes. Colours, spacing
 * and type come from styles/base/variables.css.
 */

.tecnico-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.tecnico-page main {
    flex: 1 0 auto;
}

.tec-container {
    width: 100%;
    max-width: calc(var(--container-md) + 2 * var(--space-lg));
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ===== Wordmark (text only, no company name) ===== */

.tec-wordmark {
    font-size: var(--text-lg);
    white-space: nowrap;
}

/* The text wordmark is wider than the logo image the navbar caps for. */
.tecnico-page .nav-logo {
    max-width: none;
}

/* Narrow desktop: leave room for the five nav items next to the wordmark. */
@media (min-width: 769px) and (max-width: 900px) {
    .tec-wordmark {
        font-size: var(--text-base);
    }
}

/* ===== Hero ===== */

.tec-hero {
    background: var(--gradient-hero);
    padding: calc(72px + var(--space-3xl)) 0 var(--space-3xl); /* fixed navbar is 72px */
}

.tec-eyebrow {
    margin: 0 0 var(--space-md);
    color: var(--color-warning);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tec-title {
    margin: 0 0 var(--space-md);
    color: var(--text-white);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    letter-spacing: -.02em;
}

.tec-lead {
    margin: 0;
    max-width: 640px;
    color: var(--text-on-dark);
    font-size: var(--text-lg);
    line-height: var(--line-height-relaxed);
    text-wrap: pretty;
}

/* ===== Body ===== */

.tec-body {
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.tec-section-title {
    margin: 0 0 var(--space-lg);
    color: var(--primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
}

/* ===== Index: page list ===== */

.tec-pages {
    display: grid;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tec-page-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-xl);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.tec-page-card:hover,
.tec-page-card:focus-visible {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.tec-page-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.tec-page-card__title {
    color: var(--primary);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
}

.tec-page-card__text {
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
}

/* ===== Decoder: search ===== */

.tec-search {
    margin-bottom: var(--space-lg);
}

.tec-search[hidden] {
    display: none;
}

.tec-search__label {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.tec-search__input {
    width: 100%;
    height: 52px;
    padding: 0 var(--space-md);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--border-radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: var(--font-weight-normal) var(--text-base) var(--font-primary);
}

.tec-search__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.tec-search__status {
    min-height: 1.5em;
    margin: var(--space-sm) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.tec-search__hint {
    margin: var(--space-sm) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
}

/* ===== Decoder: a pasted description, part by part ===== */

.tec-decode {
    margin-top: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    background: var(--bg-secondary);
}

.tec-decode[hidden] {
    display: none;
}

.tec-decode__line {
    margin: 0 0 var(--space-md);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.tec-decode__label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.tec-decode__original {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: var(--font-weight-bold);
}

.tec-decode__parts {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tec-part {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-sm) var(--space-md);
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius-md);
    background: var(--bg-primary);
}

.tec-part--espessura {
    border-left-color: var(--primary-light);
}

.tec-part--nao_conferido {
    border-left-color: var(--border-dark);
    border-left-style: dashed;
}

.tec-part__text {
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.tec-part__note {
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}

.tec-part--nao_conferido .tec-part__note {
    color: var(--text-secondary);
    font-style: italic;
}

.tec-part__code {
    font-weight: var(--font-weight-semibold);
}

/* A designation's status: "histórica", "situação não conferida". */
.tec-tag {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: 0 var(--space-sm);
    border: 1px solid var(--border-medium);
    border-radius: var(--border-radius-full);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: 0.1em;
}

/* ===== Decoder: group index ===== */

.tec-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0 0 var(--space-xl);
    padding: 0;
    list-style: none;
}

.tec-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-full);
    background: var(--bg-secondary);
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.tec-toc a:hover,
.tec-toc a:focus-visible {
    border-color: var(--primary);
    text-decoration: none;
}

.tec-toc[hidden] {
    display: none;
}

/* ===== Decoder: groups and codes ===== */

.tec-group {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--border-light);
    scroll-margin-top: calc(72px + var(--space-md));
}

.tec-group[hidden] {
    display: none;
}

.tec-group__title {
    margin: 0 0 var(--space-xs);
    color: var(--primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
}

.tec-group__intro {
    margin: 0 0 var(--space-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
}

.tec-codes {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
}

.tec-code {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    background: var(--bg-secondary);
}

.tec-code[hidden] {
    display: none;
}

.tec-code dt {
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.tec-code dd {
    margin: 0;
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}

.tec-empty {
    margin: var(--space-xl) 0 0;
    padding: var(--space-lg);
    border: 1px dashed var(--border-medium);
    border-radius: var(--border-radius-lg);
    color: var(--text-secondary);
}

.tec-empty[hidden] {
    display: none;
}

/* ===== Calculadora de peso: form ===== */

.tec-calc {
    display: grid;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-xl);
    background: var(--bg-secondary);
}

.tec-calc[hidden],
.tec-calc [hidden] {
    display: none;
}

.tec-choice {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tec-choice__legend {
    margin-bottom: var(--space-sm);
    padding: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.tec-choice__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Pill-shaped radio labels; the native radio stays visible for clarity. */
.tec-choice__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: 0 var(--space-md);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--border-radius-full);
    background: var(--bg-primary);
    color: var(--primary);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.tec-choice__option input {
    -webkit-appearance: radio; /* reset.css strips every input's appearance */
    appearance: auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.tec-choice__option:has(input:checked) {
    border-color: var(--primary);
    background: var(--accent-light);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.tec-choice__option:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tec-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.tec-field__label {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.tec-field__input {
    width: 100%;
    height: 52px;
    padding: 0 var(--space-md);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--border-radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: var(--font-weight-normal) var(--text-base) var(--font-primary);
    font-variant-numeric: tabular-nums;
}

.tec-field__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.tec-field__input[aria-invalid="true"] {
    border-color: var(--color-error-text);
}

.tec-field__error {
    margin: var(--space-xs) 0 0;
    color: var(--color-error-text);
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
}

.tec-field__error:empty {
    display: none;
}

.tec-btn--calc {
    justify-self: start;
    border: 0;
    font-family: var(--font-primary);
    cursor: pointer;
}

/* ===== Calculadora de peso: result ===== */

.tec-result {
    padding: var(--space-lg);
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius-lg);
    background: var(--bg-primary);
}

.tec-result__label {
    margin: 0 0 var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.tec-result__value {
    margin: 0 0 var(--space-sm);
    color: var(--primary);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.tec-result__measures {
    margin: 0 0 var(--space-md);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.tec-result__note {
    margin: 0;
    max-width: 640px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
}

/* ===== Calculadora de peso: formulas ===== */

.tec-formulas {
    margin-top: var(--space-2xl);
}

.tec-formulas p {
    margin: 0 0 var(--space-md);
    max-width: 720px;
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}

.tec-formula-list {
    display: grid;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md);
}

.tec-formula {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    background: var(--bg-secondary);
}

.tec-formula dt {
    color: var(--primary);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
}

.tec-formula dd {
    margin: 0;
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}

.tec-formula__math {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.tec-formulas p.tec-formulas__example {
    color: var(--text-secondary);
}

/* ===== CTA (the only branded element) ===== */

.tec-cta {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    border: 2px solid var(--border-accent);
    border-radius: var(--border-radius-xl);
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
}

.tec-cta__sponsor {
    margin: 0 0 var(--space-sm);
    color: var(--accent-hover);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tec-cta__title {
    margin: 0 0 var(--space-sm);
    color: var(--primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -.01em;
}

.tec-cta__text {
    margin: 0 0 var(--space-lg);
    max-width: 560px;
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: var(--line-height-relaxed);
}

/* Same shape as Envie sua lista's primary button (.envie-btn--primary). */
.tec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 var(--space-xl);
    border-radius: var(--border-radius-full);
    background: var(--gradient-accent);
    box-shadow: var(--shadow-md);
    color: var(--text-white);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    text-decoration: none;
    transition: filter var(--duration-fast) var(--ease-out);
}

.tec-btn:hover,
.tec-btn:focus-visible {
    color: var(--text-white);
    filter: brightness(1.06);
    text-decoration: none;
}

.tec-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ===== Como especificar: checklist ===== */

.tec-note {
    margin: 0 0 var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    border-left: 4px solid var(--accent);
    border-radius: var(--border-radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}

.tec-checklist,
.tec-reasons {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
}

.tec-check,
.tec-reason {
    display: grid;
    grid-template-columns: 1.5rem 13rem minmax(0, 1fr);
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    background: var(--bg-secondary);
}

/* A drawn tick, decorative only: the list is not a form. */
.tec-check::before {
    content: "";
    width: .75rem;
    height: .4rem;
    margin-left: .3rem;
    border-left: 3px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    transform: translateY(-.2em) rotate(-45deg);
}

.tec-reason {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
}

.tec-check dt,
.tec-reason dt {
    color: var(--primary);
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.tec-check dd,
.tec-reason dd {
    margin: 0;
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}

/* Inline links in body text: the darker accent for contrast, and an
   underline so the link is not marked by colour alone. */
.tec-check dd a,
.tec-text a {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tec-check dd a:hover,
.tec-text a:hover {
    color: var(--primary);
}

.tec-check dd a:focus-visible,
.tec-text a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== Escoamento e resistência: running text, figure, example ===== */

.tec-text {
    margin: 0 0 var(--space-md);
    max-width: 680px;
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}

.tec-text:last-child {
    margin-bottom: 0;
}

/* A paragraph that follows a list of cards. */
.tec-text--after {
    margin-top: var(--space-lg);
}

.tec-text sub {
    font-size: .75em;
    line-height: 0;
}

.tec-figure {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    background: var(--bg-primary);
}

.tec-figure svg {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
}

.tec-figure figcaption {
    margin-top: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
    text-align: center;
}

/* The curve is drawn in a 320-unit-wide box, so one unit is close to one
   pixel on a 360 px screen: the text sizes below stay readable there. */
.tec-curve__axis {
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tec-curve__guide {
    stroke: var(--border-dark);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.tec-curve__line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tec-curve__point {
    fill: var(--accent);
    stroke: var(--bg-primary);
    stroke-width: 2;
}

.tec-curve__break {
    fill: none;
    stroke: var(--accent-hover);
    stroke-width: 3;
    stroke-linecap: round;
}

.tec-curve__zone {
    fill: var(--bg-steel);
}

.tec-curve__zone--mid {
    fill: var(--accent-light);
}

.tec-curve__label {
    fill: var(--primary);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.tec-curve__text {
    fill: var(--text-primary);
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
}

.tec-curve__axis-label {
    fill: var(--text-secondary);
    font-size: 12px;
}

/* The one illustrative example: set apart so it is not read as a property. */
.tec-example {
    margin: 0 0 var(--space-md);
    max-width: 680px;
    padding: var(--space-md) var(--space-lg);
    border: 1px dashed var(--border-dark);
    border-radius: var(--border-radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}

.tec-example__label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--accent-hover);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .tec-note {
        padding: var(--space-md);
    }

    .tec-figure {
        padding: var(--space-sm);
    }

    .tec-example {
        padding: var(--space-md);
    }

    .tec-check {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: var(--space-xs) var(--space-sm);
        padding: var(--space-md);
    }

    .tec-check dd {
        grid-column: 2;
    }

    .tec-reason {
        padding: var(--space-md);
    }
}

/* ===== Footer (brand-neutral) ===== */

.tec-footer {
    padding: var(--space-xl) 0;
    background: var(--bg-dark);
    color: var(--text-on-dark);
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
}

.tec-footer p {
    margin: 0 0 var(--space-sm);
}

.tec-footer p:last-child {
    margin-bottom: 0;
}

.tec-footer a {
    color: var(--text-white);
}

/* ===== Phone ===== */

@media (max-width: 768px) {
    .tec-container {
        padding: 0 var(--space-md);
    }

    .tec-hero {
        padding: calc(64px + var(--space-xl)) 0 var(--space-xl); /* fixed navbar is 64px here */
    }

    .tec-lead {
        font-size: var(--text-base);
    }

    .tec-group {
        scroll-margin-top: calc(64px + var(--space-md));
    }

    .tec-code {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xs);
        padding: var(--space-md);
    }

    .tec-decode {
        padding: var(--space-md);
    }

    .tec-part {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xs);
    }

    .tec-calc {
        padding: var(--space-lg) var(--space-md);
    }

    .tec-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .tec-btn--calc {
        justify-self: stretch;
    }

    .tec-formula {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xs);
        padding: var(--space-md);
    }

    .tec-cta {
        padding: var(--space-lg);
    }

    .tec-cta__title {
        font-size: var(--text-2xl);
    }

    .tec-btn {
        width: 100%;
    }
}