/* Páginas internas: extensão das variáveis e componentes partilhados. */

/* Passagem contínua entre superfícies escuras e claras, sem linhas de secção.
   ref: @react-bits/Aurora, camadas de cor portadas para gradiente CSS estático. */
.page-shell {
    background: linear-gradient(180deg,
        var(--night) 0,
        #21170e calc(var(--transition-length) * .28),
        var(--transition) calc(var(--transition-length) * .56),
        #8d6a43 calc(var(--transition-length) * .78),
        #d8cbb9 var(--transition-length),
        var(--stone) calc(var(--transition-length) * 1.24),
        var(--stone) 100%);
}

.page-shell::before {
    position: fixed;
    z-index: 1;
    inset: 0;
    background-image: var(--grain);
    content: "";
    opacity: .12;
    pointer-events: none;
}


.page-shell {
    color: var(--on-night);
    background: var(--night);
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
    background:
        radial-gradient(36rem 26rem at 85% 10%, rgb(255 195 0 / .13), transparent 68%),
        linear-gradient(160deg, #17120b, var(--night) 66%);
}

.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(14rem, 4fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
}

.page-hero__copy {
    max-width: 48rem;
}

.page-kicker,
.legal-meta {
    margin-bottom: var(--space-4);
    color: var(--primary);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

/* contraste AA sobre --stone: kicker amarelo tinha 1,32:1 */
.art-split > .art-copy > .page-kicker { color: var(--primary-ink-warm); }

.page-title {
    max-width: 12ch;
    color: var(--on-night);
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.03;
    text-wrap: balance;
}

.page-lead {
    max-width: 58ch;
    margin-top: var(--space-6);
    color: var(--on-night-muted);
    font-size: var(--fs-lead);
}

.page-hero__art {
    display: grid;
    place-items: center;
    min-height: 14rem;
    margin: 0;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--line-night);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 50% 70%, rgb(255 195 0 / .18), transparent 55%),
        rgb(28 23 15 / .68);
}

.page-hero__art img {
    display: block;
    width: min(100%, 20rem);
    max-height: 20rem;
    object-fit: contain;
}

.page-hero__art--key img {
    width: min(100%, 24rem);
}

.page-section {
    padding-block: var(--section-y);
    color: var(--ink);
    background: var(--stone);
}

.page-section--stone-2 {
    background: var(--stone-2);
}

.page-section--night {
    color: var(--on-night);
    background:
        radial-gradient(42rem 28rem at 85% 15%, rgb(255 195 0 / .08), transparent 70%),
        var(--night);
}

.page-section__intro {
    max-width: 42rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.page-section__title {
    max-width: 18ch;
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: var(--lh-tight);
    text-wrap: balance;
}

.page-section__intro p,
.page-section__body {
    max-width: var(--measure);
    margin-top: var(--space-3);
    color: var(--ink-muted);
    font-size: var(--fs-lead);
}

.page-section--night .page-section__intro p,
.page-section--night .page-section__body {
    color: var(--on-night-muted);
}

.process-layout {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(2rem, 7vw, 6rem);
    align-items: start;
}

.process-rail {
    display: grid;
    gap: var(--space-6);
}

.process-card {
    position: relative;
    padding: var(--space-6) 0 var(--space-6) calc(var(--space-8) + .25rem);
    border-top: 1px solid var(--line-stone);
}

.process-card::before {
    position: absolute;
    top: var(--space-6);
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid rgb(22 19 14 / .26);
    border-radius: 50%;
    background: var(--primary);
    content: "";
}

.process-card h3,
.size-guide__item h3,
.contact-route h3,
.legal-content h2 {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -.015em;
}

.process-card p,
.size-guide__item p,
.contact-route p {
    margin-top: var(--space-2);
    color: var(--ink-muted);
}

.process-art {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    display: grid;
    place-items: center;
    min-height: 28rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 50% 75%, rgb(255 195 0 / .22), transparent 47%),
        linear-gradient(150deg, var(--night-2), var(--night));
}

.process-art img {
    display: block;
    width: min(100%, 23rem);
    max-height: 22rem;
    object-fit: contain;
}

.notice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    max-width: 58rem;
    padding: var(--space-6);
    border: 1px solid rgb(255 195 0 / .44);
    border-radius: var(--radius-md);
    background: rgb(255 195 0 / .1);
    color: var(--on-night);
}

.notice__mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--ink);
    font-weight: 800;
}

.notice p {
    color: var(--on-night-muted);
}

.size-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

.size-guide__item {
    min-height: 100%;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--stone-2);
    box-shadow: inset 0 0 0 1px var(--line-stone);
}

.size-guide__range {
    margin-bottom: var(--space-6);
    color: var(--primary-ink);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1;
}

.size-guide__list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-left: 1.2rem;
    color: var(--ink-muted);
}

.size-guide__list li::marker {
    color: var(--primary-ink);
}

.units-state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .8fr);
    gap: clamp(2rem, 7vw, 6rem);
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--line-night);
    border-radius: var(--radius-lg);
    background: rgb(28 23 15 / .62);
}

.units-state h2 {
    color: var(--on-night);
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: var(--lh-tight);
}

.units-state p {
    max-width: 48ch;
    margin-top: var(--space-4);
    color: var(--on-night-muted);
}

.units-state__art {
    display: grid;
    place-items: center;
    min-height: 14rem;
    background: radial-gradient(circle, rgb(255 195 0 / .14), transparent 65%);
}

.units-state__art img {
    width: min(100%, 18rem);
}

.faq-page {
    max-width: 52rem;
}

.faq-page .faq-answer {
    max-width: 62ch;
}

.contact-routes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.contact-route {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-stone);
}

.contact-route__status {
    display: inline-block;
    margin-top: var(--space-4);
    padding: .4rem .75rem;
    border-radius: var(--radius-full);
    background: rgb(22 19 14 / .07);
    color: var(--ink);
    font-size: var(--fs-caption);
    font-weight: 700;
}

.empty-state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .55fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: var(--radius-lg);
    background: var(--stone-2);
    box-shadow: inset 0 0 0 1px var(--line-stone);
}

.empty-state h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: var(--lh-tight);
}

.empty-state p {
    max-width: 50ch;
    margin-top: var(--space-4);
    color: var(--ink-muted);
}

.empty-state img {
    display: block;
    width: min(100%, 18rem);
    margin-inline: auto;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(13rem, .45fr) minmax(0, 1fr);
    gap: clamp(2rem, 8vw, 8rem);
    align-items: start;
}

.legal-nav {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    display: grid;
    gap: .25rem;
}

.legal-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    border-left: 2px solid transparent;
    color: var(--ink-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
}

.legal-nav a:hover,
.legal-nav a:focus-visible {
    border-left-color: var(--primary-ink);
    color: var(--ink);
}

.legal-content {
    max-width: 52rem;
}

.legal-content section + section {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.legal-content h2 {
    margin-bottom: var(--space-4);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.legal-content h3 {
    margin: var(--space-6) 0 var(--space-2);
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 700;
}

.legal-content p,
.legal-content li {
    color: var(--ink-muted);
}

.legal-content p + p {
    margin-top: var(--space-4);
}

.legal-content ul {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-left: 1.25rem;
}

.legal-content li::marker {
    color: var(--primary-ink);
}

.placeholder-field {
    color: var(--ink);
    font-weight: 650;
}

.not-found {
    display: grid;
    min-height: calc(100dvh - var(--nav-height));
    place-items: center;
    padding-block: var(--section-y);
    background:
        radial-gradient(35rem 25rem at 70% 32%, rgb(255 195 0 / .13), transparent 65%),
        var(--night);
}

.not-found__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, .7fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
}

.not-found__code {
    color: var(--primary);
    font-size: clamp(5rem, 14vw, 10rem);
    font-weight: 600;
    letter-spacing: -.08em;
    line-height: .85;
}

.not-found__content h1 {
    margin-top: var(--space-6);
    color: var(--on-night);
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: var(--lh-tight);
}

.not-found__content p {
    max-width: 44ch;
    margin-top: var(--space-4);
    color: var(--on-night-muted);
}

.not-found__art img {
    display: block;
    width: min(100%, 21rem);
    margin-inline: auto;
}

@media (min-width: 769px) {
    .footer-content {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (pointer: fine) {
    .size-guide__item {
        transition: transform .22s var(--ease), box-shadow .22s var(--ease);
    }

    .size-guide__item:hover {
        transform: translateY(-3px);
        box-shadow: inset 0 0 0 1px rgb(22 19 14 / .2), var(--shadow-card);
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding-block: 3.5rem 3rem;
    }

    .page-hero__grid,
    .process-layout,
    .units-state,
    .empty-state,
    .legal-layout,
    .not-found__content {
        grid-template-columns: 1fr;
    }

    .page-hero__art {
        order: -1;
        min-height: 11rem;
    }

    .page-hero__art img {
        max-height: 12rem;
    }

    .process-art,
    .legal-nav {
        position: static;
    }

    .process-art {
        min-height: 17rem;
    }

    .size-guide,
    .contact-routes {
        grid-template-columns: 1fr;
    }

    .page-section__intro {
        margin-bottom: var(--space-8);
    }

    .not-found {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .size-guide__item {
        transition: none;
    }
}