/* ---------- TOKENS ---------- */
:root {
    /* deixa transições de height chegarem em auto (acordeão do rodapé) */
    interpolate-size: allow-keywords;
    /* color */
    --red: #f02f2e;
    --red-dark: #aa1d1c;
    --accent: #ff1825;
    --black: #0a0a0a;
    --white: #ffffff;
    --gray-050: #fafafa;
    --gray-100: #f3f3f3;
    /* the ground the transparent product cut-outs are shot against */
    --mockup-ground: #e7e7e7;
    --gray-200: #e0e0e0;
    --gray-400: #9a9a9a;
    --gray-600: #666666;
    --gray-800: #3d3d3d;
    --gray-900: #252525;
    --ml-blue: #3483fa;
    --ml-yellow: #fee636;
    --shopee: #ee4d2d;
    --success: #0f8a4d;
    --danger: #c92a2a;

    /* text roles (contrast-checked on white) */
    --text: #141414;
    --text-muted: #5c5c5c;

    /* layout */
    --container: 1300px;
    --gap: clamp(16px, 3vw, 32px);
    /* the space between cards in a carousel row, one value for every track */
    --card-gap: clamp(12px, 1.6vw, 20px);
    --nav-h: 70px;
    --header-h: 70px;

    /* spacing scale (4px base) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* radius — the brand is hard-edged; radius is reserved for utility surfaces */
    --r-0: 0px;
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 12px;
    /* every control shares one corner: square, just off a hard 90deg */
    --r-btn: 2px;
    --r-full: 999px;

    /* elevation */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.08);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.22);

    /* motion */
    --dur-1: 160ms;   /* micro: color, border, opacity */
    --dur-2: 240ms;   /* controls: hover lift, pill swap */
    --dur-3: 420ms;   /* layout: reveal, panel, modal */
    --dur-4: 700ms;   /* scene: hero crossfade */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* focus */
    --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--red);
    --focus-ring-dark: 0 0 0 2px var(--black), 0 0 0 4px var(--red);

    /* type roles.
       Display and label stay on the brand faces; running text is SF Pro, per the
       brand guideline. SF Pro cannot be shipped as a webfont (Apple's licence
       limits it to platforms where it is already installed), so it is requested
       through the system stack: real SF Pro on Apple, the native UI face
       elsewhere. Every fallback here is a system font, so nothing is downloaded. */
    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                   "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "launch-black", var(--font-system);
    --font-label: "launch-bold", var(--font-system);
    --font-body: var(--font-system);
}

/* Archivo (Omnibus-Type, OFL) at the Expanded width replaces Specify PERSONAL
   Expanded, whose free cut stamped a licence watermark into every digit and
   was never licensed for commercial use anyway. One variable file serves all
   three roles: the descriptors below pin an instance per family, so the ~50
   rules that already say launch-black / launch-bold / launch-regular keep
   working untouched. Set width 125 measured at 1.03x the old face, so line
   breaks and the fixed-width chips hold. */
@font-face {
    font-family: "launch-black";
    src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
    font-weight: 900;
    font-stretch: 125%;
    font-display: swap;
}

@font-face {
    font-family: "launch-bold";
    src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
    font-weight: 700;
    font-stretch: 125%;
    font-display: swap;
}

/* the file it replaced was named "regular" but was actually the Medium cut */
@font-face {
    font-family: "launch-regular";
    src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
    font-weight: 500;
    font-stretch: 125%;
    font-display: swap;
}

/* a step below Medium, for the crumb behind you (wght axis runs 100-900) */
@font-face {
    font-family: "launch-light";
    src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
    font-weight: 300;
    font-stretch: 125%;
    font-display: swap;
}

@font-face {
    font-family: "nexa-bold";
    src: url("../fonts/nexa-bold.otf");
}

/* ---------- RESET ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text);
    background: var(--white);
    min-width: 320px;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

button {
    font-family: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

/* ---------- FOCUS (keyboard only) ---------- */
:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-btn);
}

/* on dark grounds the white halo would vanish; invert it */
.cookie-bar :focus-visible,
.menu :focus-visible,
.hero-slider :focus-visible,
footer :focus-visible,
.subfooter :focus-visible,
.collection-card:focus-visible {
    box-shadow: var(--focus-ring-dark);
}


/* ===========================================================
   LEGAL / LONG-FORM READING
   Read mode: the job is comprehension, so measure, rhythm and a
   way to jump beat expression. Sized off the Apple legal pages,
   which run ~62 characters at 21px.
   =========================================================== */
.legal-shell {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gap);
}

/* The one decisive move: the claim lands on the site's own black, at display
   scale. A privacy page exists to say one thing — "we do not track you" — and
   here it says it the way every other section of this store speaks. */
.legal-head {
    position: relative;
    background: var(--black);
    color: var(--white);
    padding-top: calc(var(--header-h) + var(--s-8));
    padding-bottom: var(--s-8);
    overflow: hidden;
}

.legal-head .legal-shell {
    position: relative;
    z-index: 1;
}

.legal-head .breadcrumb {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--s-5);
}

.legal-head h1 {
    font-family: var(--font-display);
    font-size: clamp(38px, 6.4vw, 76px);
    line-height: 0.96;
    text-transform: uppercase;
    max-width: 14ch;
    margin-bottom: var(--s-5);
}


.legal-body {
    padding-block: var(--s-8);
}

/* without the index column the table would stretch to the full container and
   its last column would drift far from the first */
.legal-prose {
    max-width: 980px;
}

/* The measure belongs to the prose, not to the column: capping the whole
   column squeezed the table into three cramped strips. Text is limited
   element by element; data gets the full width it needs. */
.legal-prose p,
.legal-prose h2,
.legal-list li {
    max-width: 68ch;
}

/* the ticks used to mark where a section began; spacing carries that alone now */
.legal-prose section + section {
    margin-top: var(--s-9);
}

/* Every other section of this store opens with the display face in caps. This
   page was the only one whispering; the red tick above is the same structural
   accent the tabs and the active chip already use. */
.legal-prose h2 {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: var(--s-4);
    scroll-margin-top: calc(var(--header-h) + var(--s-6));
}

.legal-prose section {
    scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

.legal-prose p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--text);
}

.legal-prose p + p {
    margin-top: var(--s-4);
}

.legal-list {
    list-style: none;
    display: grid;
    gap: var(--s-3);
}

.legal-list li {
    position: relative;
    padding-left: var(--s-5);
    font-size: 17px;
    line-height: 1.7;
}

.legal-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 7px;
    height: 7px;
    background: var(--red);
}

/* wide content scrolls inside itself; the page never scrolls sideways */
.legal-table-wrap {
    margin-top: var(--s-5);
    padding: var(--s-5);
    background: var(--gray-100);
    border-radius: var(--r-3);
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

.legal-table th,
.legal-table td {
    padding: var(--s-4) var(--s-4) var(--s-4) 0;
    border-bottom: 1px solid #e2e2e2;
    vertical-align: top;
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
    border-bottom: 0;
    padding-bottom: 0;
}

.legal-table thead th {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom-color: var(--black);
    padding-top: 0;
}

.legal-table tbody th {
    font-family: var(--font-label);
    font-size: 15px;
    color: var(--text);
    white-space: nowrap;
    padding-right: var(--s-5);
}

.legal-prose .bt-view-all {
    margin-top: var(--s-5);
}

@media (max-width: 620px) {
    /* with two columns the table fits a phone, but only if the label column
       stops refusing to wrap */
    .legal-table {
        min-width: 0;
    }

    .legal-table tbody th {
        white-space: normal;
        padding-right: var(--s-4);
    }
}

@media (max-width: 860px) {

}

/* ---------- SKIP LINK ---------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--s-4);
    z-index: 200;
    background: var(--red);
    color: var(--white);
    font-family: "launch-bold";
    font-size: 11px;
    letter-spacing: 1px;
    padding: var(--s-3) var(--s-5);
    transition: top var(--dur-2) var(--ease);
}

.skip-link:focus {
    top: var(--s-4);
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* the blanket rule above matches html through the universal selector and
       kills the smooth scroll; "voltar ao topo" was asked for with it */
    html {
        scroll-behavior: smooth !important;
    }

    /* movement removed, the fade stays so the reveal still reads as arriving */
    .reveal,
    /* a entrada por partes é o pedido; o que cai é o deslocamento, não a ordem.
       O atalho `transition` zerava também o delay de cada palavra. */
    .word-reveal {
        transform: none !important;
        transition-property: opacity !important;
        transition-duration: 0.55s !important;
        transition-timing-function: linear !important;
    }

    .hero-slide-bg {
        transform: none !important;
    }

    .hero-chip.is-active::after {
        animation-duration: 5s !important;
    }
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

/* the UA rule loses to any component display value; make it win */
[hidden] {
    display: none !important;
}

/* the default for any heading that does not name its own face: the brand pair,
   not the third face that predates it. Display for the big two, the label cut
   for the small ones, which are labels more than titles at their size. */
h1, h2 {
    font-family: var(--font-display);
}

h3, h4 {
    font-family: var(--font-label);
}

/* Every title on the site is set in caps. The transform is presentational: the
   HTML and data.js keep sentence case, so the copy stays readable to edit and
   screen readers still announce it as a normal word, not letter by letter. */
h1,
h2,
h3,
.hero-title,
.hero-big-title,
.collection-name,
.product-info-cols h4 {
    text-transform: uppercase;
}

/* caps need a little air at small sizes; the display face is already wide */
h3,
.product-info-cols h4 {
    letter-spacing: 0.4px;
}

/* the ads strip uses h4 for a full sentence, not for a heading */
.ads-text h4 {
    text-transform: none;
    letter-spacing: normal;
}

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

.f-500 { font-family: "launch-regular"; }
.f-700 { font-family: "launch-bold"; }
.f-800 { font-family: "launch-black"; }
.nexa { font-family: "nexa-bold"; }

/* ---------- HEADER ---------- */
.menu {
    position: fixed;
    inset: 0 0 auto 0;
    will-change: height;
    z-index: 99;
    height: var(--nav-h);
    padding-block: 0;
    background: var(--black);
    display: flex;
    align-items: center;
}

.menu .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Default: the full wordmark in white. Glassed: it gives way to the flame
   alone, in red. Both live in the anchor at once and cross-fade, and the
   anchor's own width is animated between them (90px measured at 30px tall,
   26px for the mark) so the row does not jump on the swap. */
.header-logo {
    position: relative;
    display: flex;
    align-items: center;
    width: 90px;
    height: 30px;
    transition: width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out);
}

.header-logo img {
    height: 100%;
    width: auto;
    display: block;
    transition: opacity var(--dur-2) var(--ease);
}

.header-mark {
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 26px;
    transform: translateY(-50%);
    background-color: var(--red);
    /* the solid flame as supplied: symbol-launch.svg is the outlined version
       and read as hollow at this size */
    -webkit-mask: url("../img/components/mark-launch-flame.svg") no-repeat center / contain;
    mask: url("../img/components/mark-launch-flame.svg") no-repeat center / contain;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
}

.menu.is-glass .header-logo {
    width: 30px;
    height: 26px;
}

.menu.is-glass .header-logo img {
    opacity: 0;
}

.menu.is-glass .header-mark {
    opacity: 1;
}

/* red flag block kept for brand moments (original header language) */
.flag-logo {
    width: 74px;
    height: 60px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    background: linear-gradient(to bottom, var(--red) 0%, var(--red-dark) 100%);
}

.flag-logo img {
    width: 44px;
}

/* A navegação não mora mais na barra: um painel só, atrás do hambúrguer,
   igual no desktop e no celular, com os links separados por assunto. */
.options-menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: var(--s-6) var(--s-5);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    padding: var(--s-6) max(var(--gap), calc((100% - var(--container)) / 2)) var(--s-7);
    background: var(--black);
    border-top: 1px solid #1f1f1f;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}

.nav-group {
    display: grid;
    align-content: start;
    gap: 2px;
}

.nav-group-title {
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid #1f1f1f;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gray-600);
}

.nav-foot {
    grid-column: 1 / -1;
    padding-top: var(--s-4);
    border-top: 1px solid #1f1f1f;
}

.nav-foot .link-action {
    color: var(--white);
}

/* o escurecido cobre a página e também fecha o menu ao ser tocado */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease);
}

#nav-toggle:checked ~ .options-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#nav-toggle:checked ~ .nav-scrim {
    opacity: 1;
    pointer-events: auto;
}

/* no desktop o hambúrguer abre a barra pela esquerda, antes da logo; no
   celular ele fica na direita, onde o polegar alcança */
@media (min-width: 621px) {
    .nav-toggle-label {
        order: -1;
        margin-left: -10px;
        margin-right: var(--s-4);
    }
}

/* quatro colunas só cabem no desktop: no tablet viram duas, no celular uma */
@media (max-width: 900px) {
    .options-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-5) var(--s-4);
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
}

.bt-favlink {
    position: relative;
}

/* signed in, the icon opens a menu instead of jumping to the account: the
   two places people actually want are one click away, and so is leaving */
.account-pop {
    position: relative;
}

.account-pop-menu {
    position: absolute;
    top: calc(100% + var(--s-2));
    right: 0;
    z-index: 120;
    min-width: 190px;
    padding: 0;
    background: var(--black);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-3);
}

.account-pop-who {
    padding: var(--s-3) var(--s-4);
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: var(--gray-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-pop-menu a,
.account-pop-menu button {
    display: block;
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: none;
    border: 0;
    text-align: left;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.86);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.account-pop-menu a:hover,
.account-pop-menu button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.account-pop-menu [data-logout] {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--red);
}

.account-pop-menu [data-logout]:hover {
    background: rgba(240, 47, 46, 0.12);
    color: var(--red);
}

.fav-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: var(--white);
    font-family: "nexa-bold";
    font-size: 9px;
    border-radius: var(--r-full);
    animation: fav-pop var(--dur-3) var(--ease-out);
}

/* ---------- PRODUCT BUY ROW ---------- */
.buy-row {
    display: flex;
    align-items: stretch;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.buy-row .bt-fav--inline {
    height: auto;
    align-self: stretch;
}

/* the way back to the rest of the line, after the buy decision is presented */
.see-collection {
    width: 100%;
    margin-top: var(--s-5);
}

.buy-note {
    font-size: 11px;
    color: var(--text-muted);
}

/* The primary buy button fills the row; the favourite heart keeps its square. */
.buy-row .bt-buy {
    flex: 1;
}

/* Marketplaces rank below the primary on purpose: an outline pair reads as
   "same product, other counter", not as a second offer competing for the click. */
.store-links {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--gray-200);
}

.store-links-label {
    font-family: "launch-bold";
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--s-3);
}

.store-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.bt-store {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 44px;
    padding-inline: var(--s-4);
    border: 1px solid var(--gray-400);
    background: var(--white);
    color: var(--text);
    font-size: 13px;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
        transform var(--dur-1) var(--ease-out);
}

.bt-store img {
    height: 22px;
    width: auto;
}

/* colour marks arrive on their own palette; nothing to recolour */

.bt-store:hover {
    border-color: var(--black);
    background: var(--gray-050);
    transform: translateY(-2px);
}

.bt-store:active {
    transform: translateY(0);
}

.option-item {
    display: flex;
    align-items: center;
    min-height: 38px;
    font-family: "launch-bold";
    font-size: 14px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.82);
    transition: color var(--dur-1) var(--ease);
}

.option-item:hover {
    color: var(--white);
}

.option-item.active {
    color: var(--red);
}

.nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: var(--s-2);
    padding: 0 10px;
    cursor: pointer;
    z-index: 61;
}

.nav-toggle-label span {
    height: 2px;
    width: 100%;
    background: var(--white);
    transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}

#nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
}

#nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

#nav-toggle {
    display: none;
}

/* ---------- HERO SLIDER (full-viewport, original banner language) ---------- */
.hero-slider {
    position: relative;
    /* stops short of the fold on purpose: the trust row below has to be visible
       without scrolling, so the page reads as continuing */
    min-height: calc(100vh - 96px);
    min-height: calc(100svh - 96px);
    background: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: var(--header-h);
    padding-bottom: 120px;
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.7s ease, transform 6s ease;
}

.hero-slide-bg.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.12) 100%),
                linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 30%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

/* The slide switch is anchored to the hero itself, not to the text column:
   titles wrap to one or two lines depending on the collection, and a flex
   sibling would re-centre the whole stack on every rotation. */
@media (min-width: 721px) {
    .hero-switch {
        position: absolute;
        right: var(--gap);
        top: 50%;
        transform: translateY(-50%);
        /* sized by the longest label, not a fixed 190px: the chips still share
           one width, but a wider face or a longer collection name widens the
           stack instead of clipping the word */
        width: max-content;
        max-width: 280px;
    }

    .hero-info {
        /* reserve two lines so the CTA below never jumps between slides */
        padding-right: 300px;
    }

    .hero-big-title {
        min-height: calc(2em * 0.98);
    }
}

.hero-info .hero-eyebrow {
    color: var(--white);
    letter-spacing: 6px;
    opacity: 0.85;
}

.hero-big-title {
    font-family: "launch-black";
    font-size: clamp(28px, 4vw, 52px);
    line-height: 0.98;
    text-transform: uppercase;
    margin: 12px 0 22px;
    /* one word per line: the names are two or three words and read as a stack,
       not as a sentence running the width of the photo */
    max-width: min-content;
}

.hero-switch {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-chip {
    display: flex;
    align-items: center;
    width: 100%;
    /* one line always: a wrapping label made the active chip taller than its
       siblings and the stack changed shape on every rotation */
    height: 52px;
    padding: 0 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    /* dimmed at rest so brightening on hover reads as a state change */
    color: rgba(255, 255, 255, 0.72);
    font-family: "launch-bold";
    font-size: 12px;
    letter-spacing: 1.2px;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid transparent;
    transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
                transform var(--dur-1) var(--ease);
}

.hero-chip:hover,
.hero-chip:focus-visible {
    color: var(--white);
    background: rgba(0, 0, 0, 0.92);
    transform: translateX(-5px);
}

/* the active slide is marked by the progress line alone; the transparent
   border stays only so the box keeps the same size in every state */
.hero-chip.is-active {
    color: var(--white);
    background: rgba(0, 0, 0, 0.92);
}

/* the brand symbol, outlined, sits before every eyebrow label — the lockup
   used across the identity (symbol in red, label in dark tracked caps) */
.flag-mark {
    display: inline-block;
    flex-shrink: 0;
    width: 26px;
    height: 23px;
    margin-right: 12px;
    vertical-align: -5px;
    color: var(--red);
    background-color: currentColor;
    -webkit-mask: url("../img/components/symbol-launch.svg") no-repeat center / contain;
    mask: url("../img/components/symbol-launch.svg") no-repeat center / contain;
}

/* active chip carries a 5s progress bar synced with the slider loop */
.hero-chip {
    position: relative;
    overflow: hidden;
}

.hero-chip.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--red);
    transform-origin: left;
    animation: chip-progress 5s linear;
}

@keyframes chip-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* visible countdown for the 5s auto-rotation */
.hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.hero-bottom .ads-strip {
    gap: 10px;
}

.hero-bottom .ads-area {
    min-height: 72px;
    padding-block: 0;
}

/* ---------- SECTION (centred head, like a shop landing) ---------- */
.shop-section {
    padding-block: clamp(48px, 7vw, 84px);
}

.shop-section--muted {
    background: var(--gray-050);
}

.section-head--center {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.section-head--center .eyebrow {
    justify-content: center;
}

/* on dark grounds the symbol keeps its red, the label goes light */
.hero-info .hero-eyebrow,
.collection-banner-eyebrow,
.page-head .hero-eyebrow {
    color: var(--white);
}

.section-head--center p.sub {
    margin-top: var(--s-3);
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- CATEGORY CARDS ---------- */
/* 8 categories: a 4-column grid fills two clean rows instead of 6 + 2 orphans */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s-3);
}

@media (min-width: 900px) {
    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.category-card {
    position: relative;
    /* matches the shots (1920x2559 and 1944x2591, both 3:4), so `cover` has
       nothing to crop and the product keeps its head and hem */
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-5);
    background: var(--gray-100);
    border-radius: var(--r-3);
    color: var(--text);
    overflow: hidden;
    transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease), outline-color var(--dur-2) var(--ease);
}

a.category-card {
    outline: 1px solid transparent;
    outline-offset: -1px;
}

a.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    /* gray-200 against the card's own gray-100 was a ring nobody could see */
    outline-color: var(--gray-400);
}

.cat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    position: relative;
    z-index: 2;
}

.category-card strong {
    font-family: var(--font-label);
    font-size: 15px;
    line-height: 1.2;
    font-weight: normal;
}

/* the round affordance from the reference: the whole card is the target, so
   this only has to look pressable, not be a second control */
.cat-go {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-btn);
    background: var(--gray-200);
    color: var(--text);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out),
        background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.cat-go svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a.category-card:hover .cat-go,
a.category-card:focus-within .cat-go {
    opacity: 1;
    transform: none;
    background: var(--black);
    color: var(--white);
}

/* the shot fills the whole card; the head floats over it */
.cat-shot {
    position: absolute;
    inset: 0;
    display: block;
}

.cat-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-3) var(--ease-out);
}

.cat-head {
    position: relative;
    z-index: 2;
}

/* The shot grows on every card, clickable or not — same gesture and same
   amount as the collection cards, so the two rows read as one family. The
   lift and shadow above stay on the <a> only: those imply an action, and a
   card that is not open yet must not pretend to have one. */
.category-card:hover .cat-shot img {
    transform: scale(1.07);
}

/* What is not on sale yet steps back, and stops answering the mouse: it is
   not a target. The fade is a filter, not `opacity`, because the arrival
   animation owns that property and would overwrite it on the way in. */
.category-card--soon,
.collection-card--soon {
    cursor: default;
    pointer-events: none;
    filter: opacity(0.5);
}

.category-card--soon {
    cursor: default;
}

.category-card .cat-cta {
    font-family: "launch-bold";
    font-size: 9px;
    letter-spacing: 2px;
    padding: var(--s-2) var(--s-3);
    white-space: nowrap;
    border-radius: var(--r-btn);
    background: var(--gray-200);
    color: var(--text-muted);
}

/* Same exact-fraction rule as the other tracks: whole cards per view, never a
   sliced one. The collection card is 4/5, so three across keeps the height the
   grid had. */
/* corre a tela inteira e deixa o próximo card cortado na borda: o .4 é o
   pedaço que aparece e diz que o carrossel continua */
.carousel--collections .carousel-track {
    --per-view: 3.4;
    gap: var(--card-gap);
    padding-block: 20px 40px;
    margin-block: -20px -40px;
}

.carousel--collections .collection-card {
    flex: 0 0 auto;
    width: calc((100% - (var(--per-view) - 1) * var(--card-gap)) / var(--per-view));
}

@media (max-width: 900px) {
    .carousel--collections .carousel-track { --per-view: 2; }
}

@media (max-width: 560px) {
    .carousel--collections .carousel-track { --per-view: 1; }
}

/* Full-bleed: the track runs the whole viewport, not the container. The
   negative margin resolves against .container's content box (its containing
   block), which is what carries it out to the screen edge; the width then
   fills it. The section clips horizontally because 100vw counts the vertical
   scrollbar and would otherwise add a sideways scroll of its width. */
.shop-section--bleed {
    overflow-x: clip;
}

/* Sangra dos dois lados: o trilho ocupa a tela inteira. Antes só o direito
   sangrava, e o card que saía pela esquerda ficava aparecendo pela metade na
   calha do container — lia como corte, não como carrossel. O recorte agora é
   a própria borda da tela; a folga de leitura vem do padding do trilho. */
.carousel--bleed {
    margin-inline: calc(50% - 50vw);
}

/* O trilho ocupa a tela, mas o primeiro card começa onde começa o texto da
   página: a calha do container vira padding do próprio trilho, e o snap usa a
   mesma medida para o card parar alinhado ao título. À direita fica só a
   calha, para o carrossel continuar correndo para fora. */
.carousel--bleed .carousel-track {
    --track-pad-x: max(var(--gap), calc(50vw - var(--container) / 2 + var(--gap)));
    margin-inline: 0;
    padding-right: var(--gap);
    scroll-padding-right: var(--gap);
}

.carousel--categories .carousel-track {
    gap: var(--card-gap);
    padding-block: 8px 30px;
    margin-block: -8px -30px;
}

.carousel--categories .category-card {
    width: 300px;
}

/* ---------- PROMO BANNERS ---------- */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3);
}

.promo-card {
    position: relative;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-2);
    padding: clamp(24px, 3vw, 40px);
    background: var(--gray-900);
    border: 1px solid #303030;
    color: var(--white);
    overflow: hidden;
    transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.promo-card:hover {
    transform: translateY(-4px);
    border-color: var(--red);
}

.promo-card--accent {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    border-color: transparent;
}

.promo-card strong {
    font-family: "launch-black";
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: normal;
    line-height: 1.1;
}

.promo-card span {
    font-size: 12px;
    opacity: 0.85;
}

.promo-card .promo-cta {
    margin-top: var(--s-4);
    align-self: flex-start;
    font-family: "launch-bold";
    font-size: 9px;
    letter-spacing: 2px;
    padding: var(--s-3) var(--s-5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease);
}

.promo-card:hover .promo-cta {
    background: var(--white);
    border-color: var(--white);
    color: var(--black);
}

/* ---------- SECTION HEAD WITH ACTION (title left, "see all" right) ---------- */
.section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: clamp(24px, 3vw, 40px);
}

.link-action {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: "launch-bold";
    font-size: 10px;
    letter-spacing: 2px;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--gray-200);
    white-space: nowrap;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease);
}

/* was the "→" character while every other arrow on the site is drawn: one
   icon system, so this is the same path at the same stroke */
.link-action svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur-2) var(--ease-out);
}

.link-action:hover,
.link-action:focus-visible {
    border-color: var(--red);
    color: var(--white);
}

.link-action:hover svg,
.link-action:focus-visible svg {
    transform: translateX(3px);
}

/* ---------- CRAFT / QUALIDADE ----------
   Uma subseção por assunto: o texto de um lado, a foto do outro, cada par com
   a altura da tela. A foto fica presa enquanto o texto ao lado passa, e o
   fundo dela é fixo em relação à tela — o quadro corre por cima da imagem em
   vez de arrastá-la junto, que é o que dá a profundidade. */
.craft {
    position: relative;
    z-index: 0;
    background: var(--black);
    color: var(--white);
    padding-block: 40px clamp(96px, 12vw, 180px);
}



.craft-lead {
    max-width: 46ch;
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
}


/* o par sai do container: esquerda alinhada à página, direita a 40px da tela */
.craft-steps {
    padding-left: max(var(--gap), calc(50vw - var(--container) / 2 + var(--gap)));
    padding-right: 40px;
}

.craft-step {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.craft-step + .craft-step {
    margin-top: 40px;
}

.craft-step-say {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-block: var(--s-7);
}

/* dentro da subseção o texto chega na ordem em que se lê: título, frase,
   ficha. O atraso é curto — quem rolou até aqui já está olhando. */
.craft-step-say .craft-lead {
    animation-delay: 90ms !important;
}

.craft-step-say .craft-spec {
    animation-delay: 180ms !important;
}

.craft-step-say .craft-spec + .craft-spec {
    animation-delay: 260ms !important;
}

.craft-step-say h3 {
    font-family: "launch-black";
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.05;
    margin-bottom: var(--s-4);
}

.craft-specs {
    margin-top: clamp(24px, 3vw, 40px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.craft-spec {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: var(--s-4);
    padding: clamp(16px, 2.2vw, 26px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.craft-spec dt {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    padding-top: 2px;
}

.craft-spec dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.craft-shot {
    position: sticky;
    top: 40px;
    height: calc(100vh - 80px);
    margin: 0;
    border-radius: var(--r-3);
    overflow: hidden;
    background-color: var(--gray-900);
    display: flex;
    align-items: flex-end;
    isolation: isolate;
}

/* A foto é fixa em relação à tela: o quadro corre por cima dela e revela
   outra parte a cada passo. Com o fundo preso à tela, porcentagem de tamanho
   mede contra a tela inteira e a peça sairia do quadro — a altura em pixels a
   amarra ao próprio quadro, e o 78% horizontal a joga para onde o quadro está.
   A foto entra pelo `style` do elemento: url() dentro de custom property
   resolve contra a folha de estilo e viraria /css/img/... */
.craft-shot {
    background-attachment: fixed;
    /* cada foto pode ajustar o próprio enquadramento: com o fundo preso à
       tela, o assunto precisa cair onde o quadro está, à direita */
    background-size: auto var(--shot-h, calc(100vh - 80px));
    background-position: var(--shot-x, 78%) var(--shot-y, center);
    background-repeat: no-repeat;
}


/* a cortina: a section clara sobe por cima da escura, com quina arredondada
   e a própria sombra dizendo qual das duas está na frente. Mesma passagem na
   home (ficha da peça → por que Launch) e no sobre (fogo → quem somos), para
   a transição virar linguagem e não efeito de uma página só. */
.craft + .section--tall,
.reveal-wrap + .area-sobre {
    position: relative;
    z-index: 1;
    /* a cortina precisa ser opaca: sem fundo próprio a quina arredondada
       aparecia recortando o vermelho de trás em vez de cobri-lo */
    background: var(--white);
    margin-top: clamp(-72px, -6vw, -40px);
    border-radius: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 0;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
    /* No celular a foto não gruda e o fundo não é fixo: iOS ignora
       `background-attachment: fixed` e Android trava o scroll com ele. Cada
       par vira uma tela só, foto acima do texto. */
    .craft-steps {
        padding-inline: var(--gap);
    }

    .craft-step {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
    }

    .craft-step + .craft-step {
        margin-top: clamp(40px, 9vw, 72px);
    }

    .craft-step-say {
        min-height: 0;
        padding-block: 0;
        order: 2;
    }

    /* as fotos são cenas largas: num quadro alto de celular o corte come a
       peça e sobra fundo. Quadro deitado mostra a mesma foto inteira. */
    .craft-shot {
        /* relative, não static: a foto é absoluta dentro do quadro e sem um
           ancestral posicionado ela se mede pela página inteira */
        position: relative;
        /* `relative` mantém a foto absoluta presa ao quadro, mas o `top: 40px`
           do sticky continuaria valendo e empurrava o quadro para cima do
           título seguinte */
        top: auto;
        height: 72vw;
        max-height: 420px;
        order: 1;
    }

    /* iOS ignora `background-attachment: fixed` e Android trava o scroll com
       ele: no celular a foto anda junto com o quadro. O recorte é próprio de
       cada foto, porque num quadro pequeno o assunto precisa vir para perto. */
    .craft-shot {
        background-attachment: scroll;
        background-size: var(--shot-mh, cover);
        background-position: var(--shot-mx, center) var(--shot-my, center);
    }

    .craft-spec {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: var(--s-3) 0;
    }
}

/* ---------- WHY US ---------- */
/* Quatro razões numa fileira só. O container desta seção é mais largo que o
   do resto da página de propósito: com a medida normal, a última coluna caía
   sozinha para a linha de baixo. */
.section--tall > .container {
    max-width: min(100% - 2 * var(--gap), 1560px);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding-top: clamp(28px, 3.4vw, 48px);
}

/* fio entre as colunas: separa sem virar card, e some na primeira */
.why-item {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-2) clamp(20px, 2.4vw, 40px);
    border-left: 1px solid var(--gray-200);
}

.why-item:first-child {
    padding-left: 0;
    border-left: 0;
}

.why-item:last-child {
    padding-right: 0;
}

.why-item .marker {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-btn);
    transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.why-item .marker svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--red);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--dur-2) var(--ease);
}

/* o marcador acende quando o olho chega na coluna */
.why-item:hover .marker {
    background: var(--black);
    border-color: var(--black);
}

.why-item:hover .marker svg {
    stroke: var(--white);
}

.why-item h3 {
    font-family: var(--font-label);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    text-wrap: balance;
    margin-bottom: var(--s-3);
}

.why-item p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 34ch;
    margin: 0;
}

@media (max-width: 1080px) {
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: clamp(28px, 4vw, 44px);
    }

    /* em duas colunas o fio da esquerda só faz sentido na segunda de cada par */
    .why-item {
        padding-inline: clamp(16px, 3vw, 32px);
    }

    .why-item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .why-item:nth-child(even) {
        padding-right: 0;
    }
}

@media (max-width: 620px) {
    /* A hero do celular guarda só a coleção: foto, título, botão e o trilho de
       garagens. Os selos saem de cima da foto e viram uma faixa própria logo
       abaixo, em cartas que se trocam com o polegar. */
    /* o degradê lateral não serve numa tela estreita: aqui a base é que
       precisa segurar o texto */
    .hero-slider::after {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.08) 78%);
    }

    .hero-content {
        gap: 20px;
    }

    .hero-big-title {
        font-size: clamp(30px, 9vw, 40px);
        line-height: 0.98;
    }

    .hero-info .hero-eyebrow {
        margin-bottom: 6px;
    }

    /* os três nomes cabem na largura da tela: o rótulo encolhe até o ponto em
       que "LAUNCH EXCLUSIVE" ainda entra sem rolagem lateral */
    .hero-chip {
        height: 32px;
        padding: 0 6px;
        font-size: 8px;
        letter-spacing: 0.2px;
    }

    .hero-switch {
        gap: 4px;
    }

    .hero-bottom {
        margin-top: var(--s-6);
        padding-block: var(--s-5);
        background: var(--black);
    }

    .hero-bottom .ads-area {
        min-height: 84px;
        padding-block: 0;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--r-3);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Título e setas empilham no celular; as setas ficam no canto direito,
       onde o polegar já está e onde o trilho continua. */
    .section-head--row {
        align-items: flex-start;
    }

    .section-head--row .head-nav {
        margin-left: auto;
    }

    /* No celular todo cabeçalho segue o mesmo padrão: título à esquerda e as
       setas na linha de baixo, à direita. Centrado, o título brigava com as
       setas absolutas, que caíam por cima do rótulo. */
    .section-head--center {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .section-head--center .eyebrow,
    .section-head--center p.sub {
        justify-content: flex-start;
        text-align: left;
    }

    /* a regra que ancora as setas no canto vem depois no arquivo; o seletor
       aqui precisa pesar mais para vencê-la */
    .shop-section .section-head--center .head-nav {
        position: static;
        align-self: flex-end;
        margin-top: var(--s-4);
    }

    /* empilhadas, as quatro razões viravam uma rolagem longa de texto solto.
       Como trilho, cada uma é uma carta que se lê inteira e se troca com o
       polegar — o mesmo gesto dos outros carrosséis da home. */
    .why-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0;
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
        scroll-padding-inline: var(--gap);
        scrollbar-width: none;
    }

    .why-grid::-webkit-scrollbar {
        display: none;
    }

    .why-item {
        flex: 0 0 auto;
        width: 78%;
        padding: 0 var(--s-5);
        scroll-snap-align: start;
    }

    .why-item:first-child {
        padding-left: 0;
    }

    .why-item:last-child {
        padding-right: var(--gap);
    }

    .why-item p {
        max-width: none;
    }
}

/* ---------- ASSINATURA ----------
   A última tela da home não vende nada: repete a frase da marca, do jeito que
   ela sai impressa na tag da peça. Fundo de traços correndo em outra
   velocidade, o fogo em cima, a frase embaixo. */
.ignite {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    color: var(--white);
    text-align: center;
    padding-block: clamp(56px, 8vw, 110px);
}

.ignite-bg {
    position: absolute;
    inset: -40% 0;
    z-index: -1;
    background: url("../img/general/bg-fire-stroke.png") center / cover no-repeat;
    will-change: transform;
}

/* os traços somem no meio da tela: é o que deixa a frase pousar em preto
   limpo sem apagar o desenho nas bordas */
.ignite::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 62% 58% at 50% 52%,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(10, 10, 10, 0.72) 45%,
        transparent 78%);
    pointer-events: none;
}

@supports (animation-timeline: view()) {
    .ignite {
        view-timeline-name: --ignite;
    }

    .ignite-bg {
        animation: ignite-parallax linear both;
        animation-timeline: --ignite;
        animation-range: entry 0% exit 100%;
    }

    @keyframes ignite-parallax {
        from { transform: translateY(-24%); }
        to   { transform: translateY(24%); }
    }

    /* A frase se monta enquanto a seção sobe: fogo, as duas primeiras
       palavras e, por último, a que dá nome à marca. É o momento autoral da
       home, então acontece uma vez e no ritmo do scroll. */
    .ignite-mark,
    .ignite-word {
        animation: ignite-in linear both;
        animation-timeline: --ignite;
    }

    /* Fatias sem sobreposição, medidas em `cover` e não em `entry`: com a
       seção do tamanho da tela, tudo terminava de chegar antes de ela estar
       enquadrada e o visitante só via o resultado. Em `cover`, 50% é a seção
       centrada — a frase se monta com ela já na frente dos olhos. */
    .ignite-mark  { animation-range: cover 26% cover 33%; }
    .ignite-word:nth-child(1) { animation-range: cover 34% cover 40%; }
    .ignite-word:nth-child(2) { animation-range: cover 41% cover 47%; }
    .ignite-word:nth-child(3) { animation-range: cover 48% cover 54%; }

    @keyframes ignite-in {
        from { opacity: 0; transform: translateY(26px); }
        to   { opacity: 1; transform: none; }
    }
}

/* o fogo é a marca recortada em máscara, para pegar a cor do token */
.ignite-mark {
    display: block;
    width: clamp(64px, 8vw, 124px);
    aspect-ratio: 619 / 541;
    margin: 0 auto clamp(24px, 3.5vw, 48px);
    background: var(--red);
    -webkit-mask: url("../img/components/mark-launch-flame.svg") no-repeat center / contain;
    mask: url("../img/components/mark-launch-flame.svg") no-repeat center / contain;
}

.ignite-line {
    font-family: "launch-black";
    font-size: clamp(30px, 5.4vw, 84px);
    line-height: 0.96;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0;
}

/* uma palavra por linha: a frase é um sinal, não um parágrafo */
.ignite-word {
    display: block;
}

.ignite-line em {
    font-style: normal;
    color: var(--red);
}

/* ---------- CAROUSEL (generic) ---------- */
.carousel {
    position: relative;
    display: block;
}

/* The track spans the container edge to edge. It still has to clip to scroll,
   so it is pushed out into the container gutter and padded back by the same
   amount: the cards line up with the section heading, and the clip boundary
   sits a whole gutter away from the nearest hover shadow. */
.carousel-track {
    --track-pad-x: var(--gap);
    min-width: 0;
    display: flex;
    margin-inline: calc(-1 * var(--track-pad-x));
    gap: var(--card-gap);
    overflow-x: auto;
    padding-inline: var(--track-pad-x);
    /* without this the snap target ignores the padding and the first card
       parks flush against the edge again, re-clipping its shadow */
    scroll-padding-inline: var(--track-pad-x);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-track > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
                opacity var(--dur-1) var(--ease);
}

.carousel-nav svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.carousel-nav:hover:not(:disabled) {
    background: var(--red);
    border-color: var(--red);
}

.carousel-nav:disabled {
    opacity: 0.25;
    cursor: default;
}

/* light-ground variant of the controls. The head-nav pair sits outside the
   carousel element, so the variant class no longer reaches it — it takes the
   light colours directly (this section is white ground). */
.carousel--light .carousel-nav,
.head-nav .carousel-nav {
    border-color: var(--gray-200);
    color: var(--text);
}

.carousel--light .carousel-nav:hover:not(:disabled),
.head-nav .carousel-nav:hover:not(:disabled) {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

/* product cards need a fixed rail width; the grid sizes them, a track cannot */
.carousel--products .carousel-track {
    gap: var(--card-gap);
    /* the track scrolls, so it clips: the hover shadow reaches ~58px below the
       card and was being cut in a hard line. Pad for it, then pull the same
       amount back with margin so the surrounding spacing is unchanged.
       Sideways the shadow reaches about blur/2 (40/2 = 20px), and that padding
       is NOT pulled back: a negative inline margin would slide the cards under
       the arrows sitting next to the track in the same flex row. */
    padding-block: 20px 40px;
    margin-block: -20px -40px;
}

/* Cards take an exact fraction of the track, so a view always holds whole
   cards and never a sliced one. Change --per-view to resize them; the width
   follows. */
.carousel--products .carousel-track {
    --per-view: 4;
}

.carousel--products .product-card {
    flex: 0 0 auto;
    width: calc((100% - (var(--per-view) - 1) * var(--card-gap)) / var(--per-view));
}

@media (max-width: 1100px) {
    .carousel--products .carousel-track { --per-view: 3; }
}

@media (max-width: 820px) {
    .carousel--products .carousel-track { --per-view: 2; }
}

@media (max-width: 560px) {
    .carousel--products .carousel-track { --per-view: 1; }
}

/* Sat at -32px, which is narrower than the 40px control: the arrow bled 8px
   onto the first card. Anchoring to the outside edge removes the arithmetic. */
.carousel-prev {
    right: 100%;
    margin-right: var(--s-2);
}

.carousel-next {
    left: 100%;
    margin-left: var(--s-2);
}

/* Anchoring outside only works while the container still has a gutter. Once
   the viewport stops being wider than the container plus two controls, the
   left one hangs off the screen (measured at -32px on a phone), so it comes
   inside like the right one already does. */
@media (max-width: 1340px) {
    .carousel-prev {
        right: auto;
        left: var(--gap);
        margin-right: 0;
    }
}

/* controls parked in the section head: side by side where the view-all link
   sat, not floated over the track */
.head-nav {
    display: flex;
    gap: var(--s-2);
}

.head-nav .carousel-nav {
    position: static;
    margin: 0;
}

/* same visibility rule as in-carousel controls: nothing to page, no arrows */
section:has(.carousel:not(.has-overflow)) .head-nav {
    display: none;
}

/* a section that holds most of the screen: the content centres in the height
   rather than sitting at the top of an empty band */
/* A altura vinha de um mínimo de 80vh e sobrava ar embaixo do bloco. Agora a
   seção termina onde o conteúdo termina, com respiro medido. */
.section--tall {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(56px, 8vw, 110px) clamp(64px, 9vw, 120px);
}

/* Fecho da seção: a última coisa da home não é uma promessa a mais, é a porta
   para perguntar. O fio de baixo espelha o de cima e fecha o quadro. */
.why-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: clamp(32px, 4vw, 56px);
    padding-top: clamp(20px, 2.4vw, 32px);
    border-top: 1px solid var(--gray-200);
}

.why-foot p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

@media (max-width: 620px) {
    .why-foot {
        justify-content: flex-start;
    }
}

/* the way out of a row: under it, centred, after the cards have been seen */
.section-foot {
    display: flex;
    justify-content: center;
    margin-top: var(--s-6);
}

/* a centred head keeps its title centred; the pair pins to the corner */
.section-head--center {
    position: relative;
}

.section-head--center .head-nav {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* the bleed leaves no room outside on the right, so that control comes back in */
.carousel--bleed .carousel-next {
    left: auto;
    right: var(--gap);
    margin-left: 0;
}

/* com a sangria dos dois lados, o controle da esquerda também volta para dentro */
.carousel--bleed .carousel-prev {
    left: var(--gap);
    margin-right: 0;
}

/* Scrolled to the end, the last card used to stop flush against the screen
   edge with the control sitting on it. This is trailing room, not padding for
   the shadow, so it is added on top of --track-pad-x and never pulled back. */
.carousel--bleed .carousel-track {
    padding-right: calc(var(--track-pad-x) + 88px);
}

/* on a light ground the control needs its own surface to stay legible if a
   card ever slides under it */
.carousel--light .carousel-nav {
    background: var(--white);
    box-shadow: var(--shadow-1);
}

.carousel-rail {
    position: relative;
    height: 3px;
    margin-top: var(--s-5);
    background: var(--gray-200);
    overflow: hidden;
}

.carousel-rail span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--text);
    transform-origin: left center;
    transform: scaleX(1);
}

/* nothing to page through: the rail would report a full row as full, which
   says nothing, so it goes with the controls */
.carousel:not(.has-overflow) .carousel-nav,
.carousel:not(.has-overflow) .carousel-rail {
    display: none;
}

/* O trilho corre até a borda da tela; a barra de progresso fica na medida do
   conteúdo, começando e terminando onde o texto da seção começa e termina —
   ela mede a seção, não a janela. (A regra antiga puxava só a direita com
   `50vw - 50%`, que virou zero quando o carrossel passou a sangrar dos dois
   lados: a barra ia de ponta a ponta da tela.) */
.carousel--bleed .carousel-rail {
    margin-inline: max(var(--gap), calc(50vw - var(--container) / 2 + var(--gap)));
}

/* ---------- COLABS SECTION ---------- */
.colabs-section {
    background: var(--black);
    color: var(--white);
}

.colabs-section .section-head .eyebrow,
.colabs-section .section-head h2 {
    color: var(--white);
}

.colabs-section .section-head .sub {
    color: rgba(255, 255, 255, 0.65);
}

.colabs-section .link-action {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--white);
}

/* the red wipe paints the hover here too, so the label and arrow stay white
   instead of inverting to ink on a white fill that no longer happens */
.colabs-section .link-action:hover,
.colabs-section .link-action:focus-visible {
    border-color: var(--red);
    color: var(--white);
}

/* ---------- CATEGORY PILLS ---------- */
.categories-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: clamp(28px, 4vw, 46px);
}

.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: "launch-bold";
    font-size: 10px;
    letter-spacing: 2px;
    background: var(--black);
    color: var(--white);
    transition: background 0.25s;
}

a.cat-pill:hover {
    background: var(--red);
}

.cat-pill--soon {
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
}

.cat-pill--soon em {
    font-style: normal;
    font-size: 8px;
    color: var(--red);
}

/* ---------- HERO / COLLECTIONS ---------- */
main {
    display: block;
}

.hero {
    padding-top: calc(var(--header-h) + 56px);
    padding-bottom: 56px;
    background: var(--white);
}

.hero-head {
    margin-bottom: clamp(24px, 4vw, 48px);
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    font-family: "launch-bold";
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--text);
    margin-bottom: 10px;
}

.hero-title {
    font-family: "launch-black";
    font-size: clamp(34px, 6vw, 68px);
    line-height: 1.02;
    max-width: 14ch;
}

.collections-grid {
    display: grid;
    /* the max stop matters: with a bare 1fr, a row holding two cards stretches
       them to half the container each, so Colabs rendered twice the size of the
       collection cards sitting right above it */
    /* fixed track count, not auto-fit: a row holding two cards must keep the
       same card width as a row holding three, never stretch to fill */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

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

@media (max-width: 560px) {
    .collections-grid { grid-template-columns: 1fr; }
}

.collection-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* --r-3 is the shared card corner: product, category and collection are the
       same kind of surface and were drifting at 12 / 8 / 0 */
    border-radius: var(--r-3);
    background-color: var(--gray-900);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    color: var(--white);
    isolation: isolate;
}

/* The photo is a CSS background, and background-image cannot be transformed.
   A pseudo inherits the same image and scales instead, clipped by the card's
   overflow, so the shot grows without the text moving with it. */
.collection-card:not(.collection-card--plain)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transition: transform var(--dur-4) var(--ease-out);
}

.collection-card:not(.collection-card--plain):hover::after {
    transform: scale(1.07);
}

/* scrim only exists to keep text legible over a photo */
.collection-card:not(.collection-card--plain)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
    z-index: -1;
}

/* placeholder state: no photography yet. Fill cardImage in data.js to swap in a
   photo and the card picks its own cardClass background back up. */
.collection-card--plain {
    background-image: none;
    background-color: var(--gray-900);
    border: 1px solid #303030;
}

.collection-card--plain:hover {
    border-color: var(--gray-600);
}

.collection-card--urban {
    background-image: url("../img/products/collections/urban/index/background-main.png");
}

.collection-card--fire-colors {
    background-image: url("../img/products/collections/fire-colors/index/background-main.png");
}

.collection-card--minimalist {
    background-color: var(--gray-900);
    background-image: none;
}

.collection-card--soon {
    cursor: default;
}

.collection-tag {
    font-family: "launch-bold";
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 8px;
    color: var(--white);
    opacity: 0.85;
}

.collection-name {
    font-family: "launch-black";
    font-size: clamp(17px, 1.6vw, 26px);
    line-height: 1.08;
    margin-bottom: 16px;
}

.collection-card--colabs {
    background-image: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
}

/* One arrow instead of a full button: the whole card is already the link, so a
   labelled CTA inside it was a second target saying the same thing. */
.collection-go {
    /* pinned to the card's top-right corner, out of the text column that stacks
       from the bottom; 28px matches the card's own padding */
    position: absolute;
    pointer-events: none;
    top: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--r-btn);
    color: var(--white);
    transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
        transform var(--dur-2) var(--ease-out);
}

.collection-go svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the card is the target; the arrow answers the card's hover by darkening,
   confirming where the click will land without becoming its own control */
.collection-card:hover .collection-go {
    background: rgba(10, 10, 10, 0.55);
    border-color: rgba(255, 255, 255, 0.8);
}

.collection-card .soon-badge {
    transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}

/* Partner mark sits top-left, opposite the arrow, instead of trailing the
   collection name. Nudged 7px below the card padding so its 30px height
   optically centres against the 44px arrow across from it. */
.collection-brands {
    position: absolute;
    top: 29px;
    left: 28px;
    display: flex;
    gap: 14px;
}

.collection-brands img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* a marca da T7 é um selo redondo: na mesma altura das assinaturas horizontais
   ela lê menor, então ganha o tamanho que iguala o peso óptico */
.collection-brands img[src*="logo-t7"] {
    height: 48px;
}

/* Partner marks that ship their own two-tone artwork must skip the flattening
   filter above, or the accent colour is bleached along with the wordmark. */
.collection-brands img[data-brand] {
    filter: none;
    opacity: 1;
}

/* keeps the original's shape (label block + flush red icon) at a smaller scale */
.bt-view-all {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 240px;
    max-width: 100%;
    height: 50px;
    background: var(--black);
    color: var(--white);
}

/* Hover wipes red across the button left to right on a slant. The angled edge
   reads as motion and runs the same direction as the arrow. The panel is
   inset past both ends because the skew pulls its corners in by
   height * tan(14deg) ~= 12px, which would otherwise leave the button's own
   corners uncovered mid-wipe.
   Shared by every labelled button that carries a trailing arrow. */
.link-action,
.bt-secondary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bt-view-all::before,
.link-action::before,
.bt-secondary::before {
    content: "";
    position: absolute;
    inset: 0 -14px;
    z-index: -1;
    background: var(--red);
    /* translate, not scaleX: scaling stretches the panel out of a line, which
       flattens the slant as it grows. Sliding a rigid panel in keeps the angle
       constant, so it reads as the colour being dragged across the button. */
    transform: translateX(-101%) skewX(-14deg);
    transition: transform var(--dur-3) var(--ease-out);
}

.bt-view-all:hover::before,
.bt-view-all:focus-visible::before,
.link-action:hover::before,
.link-action:focus-visible::before,
.bt-secondary:hover::before,
.bt-secondary:focus-visible::before {
    transform: translateX(0) skewX(-14deg);
}

.bt-view-all p,
.bt-direct-ml p {
    margin: 0;
    flex: 1;
    text-align: center;
    /* keeps a long label clear of the absolutely placed arrow */
    padding-inline: var(--s-6);
    color: inherit;
    font-family: "launch-bold";
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* bare arrow, no plate: the red now belongs to the hover sweep, so a red block
   sitting here permanently was competing with it */
/* absolute so the label can centre against the whole button instead of against
   whatever the arrow leaves behind */
.bt-view-all .area-icon-bt {
    position: absolute;
    right: var(--s-4);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.bt-view-all:hover .area-icon-bt,
.bt-view-all:focus-visible .area-icon-bt {
    transform: translate(3px, -50%);
}

.bt-view-all .area-icon-bt {
    transition: transform var(--dur-1) var(--ease-out);
}

.bt-view-all .area-icon-bt svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur-1) var(--ease-out);
}


/* On a black ground the primary button's black body disappears and only the red
   icon survives, so the label reads as loose text. Invert the body there: the
   two-part shape and the red icon stay, the button becomes visible again. */
.cta-band .bt-view-all,
.sobre-hero .bt-view-all,
.colabs-section .bt-view-all,
.hero-slider .bt-view-all,
.error-page .bt-view-all,
.cookie-bar .bt-view-all {
    background: var(--white);
    color: var(--black);
}

/* the wipe is what paints the hover now; a grey base would flash behind it */
.bt-view-all:hover,
.bt-view-all:focus-visible,
.cta-band .bt-view-all:hover,
.sobre-hero .bt-view-all:hover,
.colabs-section .bt-view-all:hover,
.hero-slider .bt-view-all:hover,
.error-page .bt-view-all:hover,
.cookie-bar .bt-view-all:hover {
    color: var(--white);
}

/* One corner for every control, applied in one place so a new button cannot
   quietly ship with a different radius. */
.bt-view-all,
.bt-secondary,
.bt-direct-ml,
.bt-store,
.carousel-nav,
.soon-badge,
.cat-pill,
.chip-filter {
    border-radius: var(--r-btn);
}

/* secondary button: outline pair of .bt-view-all */
.bt-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    max-width: 100%;
    height: 50px;
    background: transparent;
    border: 1px solid var(--black);
    color: var(--black);
    font-family: var(--font-label);
    /* matches .bt-view-all p: the two sit side by side and were 9px vs 12px */
    font-size: 12px;
    letter-spacing: 0.5px;
    /* every label in this button language is uppercase; casing it here means
       JS-built labels cannot ship in mixed case by accident */
    text-transform: uppercase;
    transition: background 0.25s, color 0.25s;
}

.bt-secondary:hover,
.bt-secondary:focus-visible {
    border-color: var(--red);
    color: var(--white);
}

.bt-secondary--light {
    border-color: var(--white);
    color: var(--white);
}

.bt-secondary--light:hover {
    background: var(--white);
    color: var(--black);
}

.soon-badge {
    font-family: "launch-bold";
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 8px 14px;
    align-self: flex-start;
}

/* ---------- ADS STRIP ---------- */
.ads-strip {
    display: grid;
    /* three slots on the strip: auto-fit at 260px only ever fitted two, so the
       count is stated and the minimum drops to what a third can hold */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2px;
}

@media (min-width: 900px) {
    .ads-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ads-area {
    /* media block and action button bleed to the edges; only the text is padded */
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 72px;
    overflow: hidden;
}

/* the strip sits on the hero photo: three panes of the same glass, so the row
   reads as one surface and the photo carries through all of it */
.ads-area {
    background: rgba(20, 20, 20, 0.34);
    color: var(--white);
    border-radius: var(--r-btn);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.ads-mercado-livre {
    justify-content: space-between;
}

/* the unboxing pane only ever answered on its thumbnail; the pane itself
   lifts like the marketplace one so the whole box reads as one target */
.ads-area {
    transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
        transform var(--dur-2) var(--ease-out);
}

.ads-unboxing:hover,
.ads-mercado-livre:hover,
.ads-slot:hover {
    background: rgba(20, 20, 20, 0.5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

/* third slot, same ground as the marketplace one so the row reads as a set */
.ads-slot-mark {
    color: var(--white);
}

.ads-slot-mark svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

/* the icon end is one step darker than the pane: it reads as the plate the
   mark sits on without going back to a solid panel inside the glass */
.ads-box {
    background: rgba(0, 0, 0, 0.28);
    width: 92px;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumb-video-ads {
    background: rgba(255, 255, 255, 0.1) center / cover no-repeat;
    background-image: url("../img/products/collections/exemple/thumb-video.jpg");
    position: relative;
}

.thumb-video-ads::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    transition: background var(--dur-2) var(--ease);
}

.ads-unboxing:hover .thumb-video-ads::after {
    background: rgba(0, 0, 0, 0.2);
}

.thumb-video-ads img {
    width: 13px;
    position: relative;
    z-index: 1;
    transition: transform var(--dur-2) var(--ease-out);
}

.ads-unboxing:hover .thumb-video-ads img {
    transform: scale(1.2);
}

/* One black plate for both marks instead of two brand colours fighting each
   other next to the blue action button. These are the same two files the dark
   footer uses, so they are already drawn for a dark ground. */
.ads-stores {
    width: auto;
    gap: var(--s-5);
    padding-inline: var(--s-5);
}

/* marks only, no wordmarks: sized by height so two different aspect ratios
   still sit on one optical line */
.ads-stores img {
    width: auto;
    height: 30px;
}

.ads-text {
    flex: 1;
    min-width: 0;
    align-self: center;
    padding: var(--s-3) var(--s-4);
}

.ads-text h4 {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    line-height: 1.4;
    max-width: 34ch;
}

/* bare arrow: the plate was a third colour block on a strip that already
   carries the store marks and the action */
.bt-go-mercado-livre {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-inline: var(--s-5);
    color: var(--white);
    transition: color var(--dur-1) var(--ease);
}

.bt-go-mercado-livre:hover {
    color: var(--red);
}

.bt-go-mercado-livre svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur-2) var(--ease-out);
}

.bt-go-mercado-livre:hover svg {
    transform: translateX(3px);
}

/* ---------- COLLECTION LISTING PAGE ---------- */
.collection-banner {
    /* the crumb sits at the top edge of the band, right under the fixed bar;
       the room the block needs opens below it instead of above */
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: clamp(28px, 3.8vw, 56px);
    /* a faixa é a primeira imagem da coleção: precisa de altura para a foto
       aparecer, mesmo quando o texto é curto */
    min-height: clamp(340px, 34vw, 480px);
    display: flex;
    color: var(--white);
    background-color: var(--gray-900);
    background-size: cover;
    background-position: center;
    position: relative;
    isolation: isolate;
}

/* o bloco de texto desce até a base da faixa; o breadcrumb fica no topo */
.collection-banner > .container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* a marca da garagem abre o bloco, logo acima do rótulo da coleção: assina a
   faixa sem disputar espaço com o título */
.banner-mark {
    order: 1;
    align-self: flex-start;
    height: 44px;
    width: auto;
    margin-top: auto;
    margin-bottom: var(--s-4);
}

/* o empurrão para a base passa a ser da marca; com dois `margin-top: auto` a
   sobra se dividiria entre eles e abriria um vão no meio do bloco */
.collection-banner > .container:has(.banner-mark) .collection-banner-eyebrow {
    margin-top: 0;
}

.collection-banner-eyebrow { order: 2; }
.collection-banner h1 { order: 3; }
.collection-banner > .container > p:not(.collection-banner-eyebrow) { order: 4; }

.collection-banner-eyebrow {
    margin-top: auto;
}

/* o véu fica entre a foto que anda e o texto */
.collection-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: -1;
}

.collection-banner-eyebrow {
    display: flex;
    align-items: center;
    font-family: "launch-bold";
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--white);
    margin-bottom: 6px;
}

.collection-banner h1 {
    font-family: "launch-black";
    font-size: clamp(32px, 6vw, 64px);
    line-height: 1.02;
}

/* a descrição, quando existe; o eyebrow é <p> também, por isso a exceção */
.collection-banner p:not(.collection-banner-eyebrow) {
    max-width: 60ch;
    margin-top: 10px;
    font-size: 15px;
    opacity: 0.85;
}

.product-list-section {
    padding-block: 60px;
}

.product-list-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 30px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
    align-items: stretch;
}

.product-card {
    position: relative;
    display: block;
    background: var(--gray-100);
    border-radius: var(--r-3);
    overflow: hidden;
}

/* The shot sits on the card's own ground with air around it, so a cut-out on
   white and a photo on grey both read as the same object. */
/* The shot is a transparent cut-out, so it sits straight on the card ground
   with air around it — no tile, no white rectangle to hide. */
/* Same affordance the collection and category cards carry: the whole card is
   the link, so this only has to look pressable. The favourite moved to the
   product page, where the inline heart next to the buy button already lives. */
.card-go {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-btn);
    background: var(--gray-200);
    color: var(--text);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out),
        background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.product-card:hover .card-go,
.product-card:focus-within .card-go {
    opacity: 1;
    transform: none;
    background: var(--black);
    color: var(--white);
}

.card-go svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-card .thumb-wrap {
    display: block;
    overflow: hidden;
    padding: 20px 10px 10px 10px;
}

/* the meta needs its own padded surface: without it the text sits flush
   against the card edge the moment the hover shadow draws a boundary */
.product-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: var(--s-3) var(--s-4) var(--s-5);
}

/* full width on purpose: the cut-out carries ~16% transparent margin of its
   own, which lands the visible garment at ~70% of the card — the reference
   proportion. A percentage here would shrink it twice. */
.product-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
}

.product-card:hover img {
    transform: scale(1.05);
}

.product-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-brand-tag {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: var(--s-1);
    /* one line always, so every card's title sits on the same baseline */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card h3 {
    font-size: 16px;
    line-height: 1.25;
    transition: color var(--dur-1) var(--ease);
}

.product-card:hover h3 {
    color: var(--red);
}

.product-card .product-price {
    margin-top: auto;
    padding-top: var(--s-3);
}

.product-card .area-colors {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-bottom: var(--s-3);
}

.product-card .bt-color {
    width: 12px;
    height: 12px;
}

.product-card .product-brand-tag {
    max-width: 100%;
}

.product-card .product-price {
    margin-top: var(--s-2);
    padding-top: 0;
}

.area-colors {
    display: flex;
    gap: 6px;
}

.bt-color {
    width: 22px;
    height: 22px;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
}

.color-white { background: var(--white); }
.color-black { background: var(--black); }
.color-red { background: var(--red); }

.product-price {
    display: block;
    margin-top: var(--s-3);
    font-family: "nexa-bold", var(--font-system);
    font-size: 17px;
}

.product-installments {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.empty-collection {
    padding-block: 100px;
    text-align: center;
    color: var(--gray-600);
}

/* ---------- PRODUCT DETAIL PAGE ---------- */
.product-detail {
    padding-top: var(--header-h);
    display: flex;
    flex-wrap: wrap;
}

.product-gallery {
    flex: 1 1 600px;
    background: linear-gradient(to bottom, var(--gray-100), var(--white));
    padding: 24px 24px 40px 24px;
    position: relative;
}

.product-gallery .breadcrumb {
    margin-bottom: var(--s-5);
}

.collection-banner .breadcrumb {
    margin-bottom: clamp(32px, 4.5vw, 68px);
}

/* catalogue spread: up to four equal tiles, two by two */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* the close-up is the odd fifth tile: a lone half box would leave a hole,
   so it runs the full width in a wider crop */
.gallery-cell:nth-child(5) {
    grid-column: 1 / -1;
    aspect-ratio: 720 / 420;
}

.gallery-cell:nth-child(5) img {
    object-fit: cover;
}

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

/* o anel vermelho padrão desenha uma moldura em volta da foto e parece erro;
   aqui a marca de foco é um traço fino por dentro do próprio box */
.gallery-cell:focus-visible {
    box-shadow: inset 0 0 0 2px var(--black);
}

.gallery-cell {
    border: 0;
    /* room around the garment: the cut-out reaches the tile edge otherwise
       and the four shots read as one block of fabric */
    padding: clamp(16px, 3vw, 36px);
    cursor: zoom-in;
    background: var(--mockup-ground);
    /* near the mockups' own 1181/1331, so cover crops almost nothing */
    aspect-ratio: 353 / 395;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-cell img {
    width: 100%;
    height: 100%;
    /* contain, not cover: with padding the box is no longer the photo's own
       proportion, and cover would crop the sleeves off */
    object-fit: contain;
    transition: transform var(--dur-3) var(--ease-out);
}

/* the tile opens the photo; the nudge on hover says so before the click */
.gallery-cell:hover img,
.gallery-cell:focus-visible img {
    transform: scale(1.04);
}


.brand-badge {
    position: absolute;
    right: -34px;
    top: 90px;
    width: 68px;
    height: 68px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

.brand-badge img {
    width: 55%;
}

.brand-badge-mark {
    width: 52%;
    aspect-ratio: 619 / 541;
    background-color: var(--black);
    -webkit-mask: url("../img/components/mark-launch-flame.svg") no-repeat center / contain;
    mask: url("../img/components/mark-launch-flame.svg") no-repeat center / contain;
}

.product-resume {
    flex: 1 1 420px;
    padding: clamp(30px, 5vw, 80px);
    position: sticky;
    /* the fixed bar would otherwise cover the top of the stuck column */
    top: var(--header-h);
    align-self: flex-start;
}

.product-resume .product-brand-tag {
    margin-bottom: 6px;
}

.product-resume h1 {
    font-family: "launch-black";
    font-size: clamp(26px, 3vw, 34px);
    margin-bottom: var(--s-2);
}

/* the code people quote when they write in about a piece */
.product-ref {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.area-colors-detail {
    margin-bottom: 20px;
}

.size-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    max-width: 320px;
}

.link-size-guide {
    background: none;
    border: 0;
    font-size: 13px;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-size-guide:hover {
    color: var(--red);
}

.area-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: 20px;
}

.bt-size {
    min-width: 52px;
    height: 42px;
    padding-inline: var(--s-3);
    background: var(--gray-100);
    border: 1px solid transparent;
    font-family: var(--font-label);
    font-size: 13px;
    color: var(--text);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease);
}

.bt-size:hover {
    border-color: var(--black);
}

.bt-size.is-active {
    background: var(--black);
    color: var(--white);
}

.area-colors-detail .bt-color {
    width: 46px;
    height: 46px;
    border-radius: 4px;
}

.box-value-product {
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 20px;
    max-width: 320px;
}

.box-value-product h2 {
    font-size: 17px;
}

/* "Em 3x de R$" is the setup, the number is the argument: the sentence runs
   light and hands the weight to the value */
.box-value-product p {
    font-family: "launch-light";
    font-size: 17px;
    color: var(--gray-600);
    margin-top: 4px;
}

.box-value-product p strong {
    font-family: var(--font-label);
    font-weight: normal;
    color: var(--text);
}

.bt-direct-ml {
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 340px;
    height: 52px;
    background: var(--black);
    transition: background 0.25s;
}

.bt-direct-ml:hover {
    background: rgb(32, 32, 32);
}

.bt-direct-ml .ml-badge {
    width: 74px;
    height: 100%;
    background: var(--ml-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bt-direct-ml .ml-badge img {
    width: 46px;
}

.bt-direct-ml p {
    flex: 1;
    text-align: center;
    color: var(--white);
    font-family: "launch-bold";
    font-size: 12px;
    letter-spacing: 0.5px;
    padding-inline: var(--s-3);
}

.label-small {
    font-size: 11px;
    color: var(--gray-600);
    margin-bottom: 6px;
}

.product-description {
    font-size: 12px;
    line-height: 1.7;
    color: #444;
    max-width: 46ch;
    margin-bottom: 20px;
}

.alert-freight {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.alert-freight img {
    width: 26px;
}

.alert-freight p {
    font-size: 12px;
}

.product-info {
    padding-block: 70px;
    background: var(--white);
}

.product-info-cols {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(30px, 5vw, 80px);
}

.product-info-cols h4 {
    margin-bottom: 12px;
}

.product-info-cols p,
.product-info-cols li {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    max-width: 58ch;
}

.product-info-cols ul {
    margin-top: 4px;
}

.product-info-cols li::before {
    content: "- ";
}

.product-info .watermark {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: min(46vw, 560px);
    filter: grayscale(1) opacity(0.07);
    pointer-events: none;
}

.area-unboxing {
    padding-block: 80px;
}

.box-video-unboxing {
    aspect-ratio: 16 / 8;
    background: var(--gray-900) center / cover no-repeat;
    background-image: url("../img/products/collections/exemple/thumb-video.jpg");
    cursor: pointer;
}

/* ---------- ABOUT ---------- */
.about-body {
    padding-block: 70px;
}

.about-body .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(30px, 5vw, 80px);
}

.about-text h3 {
    margin-bottom: 18px;
}

.about-text p {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 16px;
    max-width: 55ch;
}

.about-text .bt-view-all {
    margin-top: 10px;
}


/* o botão do formulário é item de grade: sem isso ele estica até a largura da
   coluna e o rótulo fica perdido no meio de uma barra preta */
.form-grid .bt-view-all,
.form-grid .bt-secondary {
    justify-self: start;
}

@media (max-width: 620px) {
    .form-grid .bt-view-all,
    .form-grid .bt-secondary {
        justify-self: stretch;
    }
}

/* ---------- FOOTER TOP ROW ---------- */
/* no desktop o link volta para o canto de cima do rodapé, na mesma linha da
   logo; no celular ele vira faixa centralizada (bloco de ≤620) */
footer .container {
    position: relative;
}

footer .to-top {
    position: absolute;
    top: 0;
    right: var(--gap);
}

.to-top {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray-600);
    transition: color var(--dur-1) var(--ease);
}

.to-top svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur-2) var(--ease-out);
}

.to-top:hover,
.to-top:focus-visible {
    color: var(--white);
}

.to-top:hover svg,
.to-top:focus-visible svg {
    transform: translateY(-3px);
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

.footer-social {
    display: flex;
    gap: var(--s-2);
}

@media (max-width: 560px) {
    .footer-top {
        gap: var(--s-5);
    }
}

/* ---------- FOOTER ---------- */
footer {
    background: var(--black);
    padding-block: 50px 30px;
}

.logo-footer {
    width: 150px;
}

.info-footer {
    border-top: 1px solid #2a2a2a;
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

.category-footer p {
    color: var(--white);
    font-family: "launch-bold";
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.link-footer {
    display: block;
    color: #ccc;
    font-size: 14px;
    margin-top: 6px;
}

.footer-icons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.bt-social,
.bt-plataform-pay {
    width: 56px;
    height: 56px;
    border: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s;
}

.bt-social:hover,
.bt-plataform-pay:hover {
    border-color: var(--red);
}

/* marks now, not wordmarks: the plate can be square like the social ones */
.bt-plataform-pay {
    width: 56px;
}

/* the art used to fill the box edge to edge, which is what made these read as
   oversized; it is inset now so the frame has room to be a frame */
/* matched to the store marks beside them: both sit at 26-28px of ink inside a
   56px plate, so the two groups read as one row */
.bt-social img {
    /* 46 inside a 56 plate leaves 5px of air on each side */
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* sized by height so two different aspect ratios sit on one optical line */
/* well under the social marks beside them: these are horizontal lockups and
   read heavier than a square icon at the same height */
.bt-plataform-pay img {
    width: auto;
    height: 22px;
}

/* second footer row, inside the container: the legal link on one end and the
   accepted payment flags on the other. Separated by a rule so it reads as a
   different order of information from the link columns above it. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid #1f1f1f;
}

.footer-legal .link-footer {
    margin-top: 0;
}

.payment-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

/* the flags arrive as brand artwork on their own grounds, so they keep their
   own colour and only share a height */
.payment-flags img {
    height: 24px;
    width: auto;
    border-radius: 3px;
}

/* ===========================================================
   COOKIE BAR
   The bar is a floating panel, not a full-width band: the panel is
   the .container itself, so it inherits the same max-width and side
   padding every other row on the page uses and lines up with them.
   .cookie-bar is only the fixed layer that positions it.
   =========================================================== */
.cookie-bar {
    position: fixed;
    inset-inline: 0;
    bottom: var(--s-4);
    padding-inline: var(--gap);
    z-index: 120;
    pointer-events: none;
}

.cookie-bar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-5);
    padding-block: var(--s-4);
    /* blur needs a value at rest, not none, or the transition has nothing
       to interpolate from */
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-3);
    pointer-events: auto;
    transform: translateY(calc(100% + var(--s-4)));
    opacity: 0;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease);
}

.cookie-bar.is-in .container {
    transform: translateY(0);
    opacity: 1;
}

.cookie-bar > .container > p {
    /* no measure cap: the notice runs the width the panel gives it so it
       lands in two lines instead of stacking beside an empty gap */
    flex: 1 1 420px;
    text-wrap: pretty;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

.cookie-bar > .container > p a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-bar > .container > p a:hover {
    color: var(--red);
}

/* 240px is the page-CTA size; in a bar two of them crowd out the sentence
   that explains what they answer */
.cookie-bar .bt-secondary,
.cookie-bar .bt-view-all {
    min-width: 150px;
}

.cookie-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
}

@media (max-width: 620px) {
    /* both buttons carry min-width: 240px, so side by side they overflow a
       phone-width panel; stacking is the only fit that keeps them full size */
    .cookie-actions {
        width: 100%;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .cookie-actions > * {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* animação por scroll não anda sozinha: quem move é a mão do usuário.
       A regra geral zera a duração e faria o fogo já nascer aberto. */
    .reveal-clip-path,
    .reveal-mask,
    .reveal-intro-bg,
    .reveal-content .sobre-hero-content,
    .reveal-intro .scroll-cue,
    .scroll-cue--red {
        animation-duration: auto !important;
    }

    /* a seta é o único convite ao scroll nessa tela: fica, mais devagar */
    .scroll-cue svg {
        animation-duration: 2.6s !important;
        animation-iteration-count: infinite !important;
    }

    .cookie-bar .container {
        transition-duration: 260ms !important;
    }

    .lightbox-stage img {
        transition-duration: 220ms !important;
    }

    .lightbox-lens {
        transition-duration: 120ms !important;
    }

    .gallery-cell img {
        transition-duration: 300ms !important;
    }

    .header-search-input {
        transition-duration: 420ms !important;
    }

    .gallery-cell:hover img {
        transform: scale(1.02);
    }
}

.subfooter {
    background: var(--black);
    border-top: 1px solid #1c1c1c;
    padding: var(--s-6) 0;
}

.subfooter .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
}

.subfooter p {
    /* every other 10px uppercase line on the site is the label face; this one
       was falling through to the system stack */
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-600);
}

/* no rule under it: the credit sits in a line of uppercase 10px text, where an
   underline reads as noise rather than as a link cue. Colour carries it. */
.subfooter a {
    color: var(--gray-400);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
}

.subfooter a:hover,
.subfooter a:focus-visible {
    color: var(--white);
}

/* ---------- TEXT / SCROLL ANIMATION ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.word-reveal {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    /* mais lento que o resto do site de propósito: é o único texto da página
       que o visitante encontra parado, esperando ser lido */
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.split-words.is-visible .word-reveal,
[data-split-words].is-visible .word-reveal {
    opacity: 1;
    transform: translateY(0);
}

.option-item {
    position: relative;
}

.option-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 6px;
    height: 1px;
    background: var(--red);
    transition: right var(--dur-2) var(--ease-out);
}

.option-item:hover::after {
    right: 12%;
}

.collection-card,
.collection-card:hover,
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* the card keeps its own grey on hover; the lift, the hairline ring and the
   arrow reveal do the separating. Outline, not border, so the box does not
   change size and nothing around it shifts. */
.product-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease,
        outline-color 0.35s ease;
    outline: 1px solid transparent;
    outline-offset: -1px;
}

.product-card:hover {
    outline-color: var(--gray-400);
}

.product-card:hover h3 {
    color: inherit;
}

/* ===========================================================
   COMPONENTS
   =========================================================== */

/* ---------- PRESSED STATE (all primary controls) ---------- */
.bt-view-all:active,
.bt-secondary:active,
.bt-direct-ml:active,
.cat-pill:active,
.hero-chip:active,
.chip-filter:active {
    transform: translateY(1px);
}

.bt-view-all,
.bt-secondary,
.bt-direct-ml {
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
                transform var(--dur-1) var(--ease);
}

/* ---------- BREADCRUMB ---------- */
.page-head .breadcrumb {
    margin-bottom: var(--s-6);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: var(--s-4);
}

/* the crumb behind you is the lighter weight; the bold belongs to the page
   you are actually on */
.breadcrumb a {
    font-family: "launch-light";
    color: inherit;
    opacity: 0.7;
    transition: opacity var(--dur-1) var(--ease);
}

.breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
}

.breadcrumb span[aria-current] {
    font-family: "launch-bold";
}

.breadcrumb .sep {
    opacity: 0.4;
}

/* ---------- FILTER / SORT BAR ---------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    /* centre, not baseline: the count is 12px text and the sort is a 40px
       control, so they only line up when measured from their middles */
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4) var(--s-5);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--gray-200);
}

.filter-bar .result-count {
    margin: 0;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    /* 8px was a gap for boxed chips; these are bare labels, so the space
       between them is the only thing separating one from the next */
    gap: var(--s-3) var(--s-6);
}

/* same language as the collection tabs: filled boxes competed with the product
   cards below and made a filter row look like a row of calls to action */
.chip-filter {
    position: relative;
    padding: 0 0 var(--s-3);
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: 0;
    transition: color var(--dur-1) var(--ease);
}

.chip-filter::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--black);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
}

.chip-filter:hover {
    color: var(--text);
    border-color: var(--gray-400);
}

.chip-filter[aria-pressed="true"] {
    color: var(--text);
}

.chip-filter[aria-pressed="true"]::after {
    transform: scaleX(1);
}

/* tab row: the active one carries a rule under it, the way the reference does,
   rather than a filled pill that would compete with the product cards */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    /* no padding here: the tab boxes have to reach the divider so the active
       rule can sit on it instead of floating 12px above */
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--s-4);
}

.filter-tab {
    position: relative;
    padding-bottom: var(--s-3);
    /* the collection names arrive already uppercase from the data while
       "Colabs" and "Ver tudo" are written sentence case; transforming here
       keeps the row one voice whatever the source string looks like */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    /* the whole row is one face: only .is-active carried it before, so the
       active tab was Archivo and its neighbours were the system sans */
    font-family: var(--font-label);
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease);
}

.filter-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--black);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
}

.filter-tab:hover {
    color: var(--text);
}

/* colour and the rule underneath carry the active state; the face no longer
   has to change to say it */
.filter-tab.is-active {
    color: var(--text);
}

.filter-tab.is-active::after {
    transform: scaleX(1);
}

/* echoes the active tab and doubles as the way to drop it */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--black);
    color: var(--white);
    border-radius: var(--r-btn);
    font-size: 12px;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
}

.filter-chip:hover {
    background: var(--red);
}

.filter-chip span {
    font-size: 15px;
    line-height: 1;
    opacity: 0.75;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    min-height: 34px;
}

.filter-field {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.sort-field {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.filter-field label,
.sort-field label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: var(--font-label);
    color: var(--text-muted);
}

/* The browser's own select chrome was the odd one out: rounded corner, its own
   grey chevron, body face. Stripped with appearance:none and rebuilt on the
   site's own control language — square 2px corner, label face, drawn chevron
   at the same stroke as every other arrow here. */
.select-field {
    appearance: none;
    -webkit-appearance: none;
    min-height: 40px;
    padding: var(--s-2) var(--s-7) var(--s-2) var(--s-4);
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-4) center;
    background-size: 14px;
    border: 1px solid var(--gray-400);
    border-radius: var(--r-btn);
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.select-field:hover {
    border-color: var(--black);
    background-color: var(--gray-050);
}

.select-field:hover {
    border-color: var(--gray-400);
}

.result-count {
    font-size: 14px;
    color: var(--text-muted);
}

/* ---------- FAVORITE BUTTON ---------- */
.bt-fav {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--r-btn);
    box-shadow: var(--shadow-1);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out),
                background var(--dur-1) var(--ease);
}

.product-card:hover .bt-fav,
.bt-fav:focus-visible,
.bt-fav[aria-pressed="true"] {
    opacity: 1;
    transform: scale(1);
}

.bt-fav:hover {
    background: var(--white);
}

.bt-fav svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--black);
    stroke-width: 1.8;
    transition: fill var(--dur-2) var(--ease), stroke var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease-out);
}

.bt-fav[aria-pressed="true"] svg {
    fill: var(--red);
    stroke: var(--red);
    animation: fav-pop var(--dur-3) var(--ease-out);
}

@keyframes fav-pop {
    40% { transform: scale(1.28); }
}

/* inline variant used on the product page next to the buy button */
.bt-fav--inline {
    position: static;
    opacity: 1;
    transform: none;
    width: 52px;
    height: 52px;
    border-radius: var(--r-btn);
    border: 1px solid var(--gray-200);
    background: var(--white);
    box-shadow: none;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

/* the card variant answers by appearing; this one is always on screen, so the
   answer is the border closing in and the heart leaning red */
.bt-fav--inline:hover {
    border-color: var(--black);
    background: var(--gray-050);
}

.bt-fav--inline:hover svg {
    stroke: var(--red);
    transform: scale(1.08);
}

.bt-fav--inline[aria-pressed="true"]:hover {
    border-color: var(--red);
}

/* ---------- SKELETON ---------- */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--gray-100);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    animation: shimmer 1.25s infinite;
}

@keyframes shimmer {
    to { transform: translateX(100%); }
}

.skeleton-card .sk-img {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: var(--s-4);
}

.skeleton-card .sk-line {
    height: 12px;
    margin-bottom: var(--s-2);
}

.skeleton-card .sk-line:nth-child(2) { width: 40%; }
.skeleton-card .sk-line:nth-child(3) { width: 75%; }
.skeleton-card .sk-line:nth-child(4) { width: 30%; }

/* ---------- EMPTY / ERROR STATE ---------- */
.state-block {
    max-width: 46ch;
    margin-inline: auto;
    padding-block: var(--s-9);
    text-align: center;
}

.state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--s-5);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gray-200);
    border-radius: var(--r-full);
}

.state-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--gray-400);
    fill: none;
    stroke-width: 1.6;
}

.state-block h2 {
    font-family: "launch-black";
    font-size: clamp(20px, 3vw, 28px);
    margin-bottom: var(--s-3);
}

.state-block > p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: var(--s-6);
}

.state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
}

/* the pair reads as one control stack, so both buttons share one width
   instead of each hugging its own label */
.state-actions .bt-view-all,
.state-actions .bt-secondary {
    width: 300px;
    max-width: 100%;
}

.state-block--error .state-icon {
    border-color: var(--red);
}

.state-block--error .state-icon svg {
    stroke: var(--red);
}

/* ---------- MODAL ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease);
}

.modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--white);
    padding: clamp(24px, 4vw, 44px);
    box-shadow: var(--shadow-3);
    transform: translateY(16px) scale(0.98);
    transition: transform var(--dur-3) var(--ease-out);
}

.modal.is-open .modal-panel {
    transform: translateY(0) scale(1);
}

.modal-panel h2 {
    font-family: "launch-black";
    font-size: 22px;
    margin-bottom: var(--s-2);
}

.modal-panel > p {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--s-5);
}

/* ---------- LIGHTBOX ---------- */
/* the photos carry their own pale ground, so the overlay matches it instead
   of the usual dark scrim: a dark frame would make every shirt look lit */
.modal--lightbox {
    padding: 0;
    /* the cut-outs are transparent: the overlay is the ground they stand on,
       so it is the mockup colour itself, opaque */
    background: var(--mockup-ground);
}

.lightbox-panel {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
}

.lightbox-stage {
    grid-row: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(48px, 6vw, 80px) clamp(56px, 8vw, 120px) var(--s-4);
}

.lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform var(--dur-3) var(--ease-out);
}

.lightbox-stage.is-zoomed {
    /* the scaled photo has to be clipped by the stage, not by the viewport */
    overflow: hidden;
}

.lightbox-stage.is-zoomed img {
    transform: scale(2.4);
    cursor: zoom-out;
}

/* the pointer carries its own affordance, so the system cursor steps aside */
.lightbox-stage:hover img {
    cursor: none;
}

.lightbox-lens {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    color: var(--text);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out);
}

.lightbox-lens.is-on {
    opacity: 1;
    transform: none;
}

.lightbox-lens svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* zoomed in, the next click goes back out: the plus drops off the glass */
.lightbox-stage.is-zoomed .lens-plus {
    d: path("M8 11h6");
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--text);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease);
}

.lightbox-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lightbox-nav:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.lightbox-prev { left: clamp(12px, 2vw, 28px); }
.lightbox-next { right: clamp(12px, 2vw, 28px); }

.lightbox-thumbs {
    grid-row: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: 0 var(--s-4) clamp(16px, 3vw, 32px);
}

.lightbox-thumb {
    width: 72px;
    aspect-ratio: 353 / 395;
    padding: 0;
    overflow: hidden;
    background: var(--mockup-ground);
    border: 1px solid var(--gray-200);
    opacity: 0.55;
    transition: opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-thumb:hover {
    opacity: 1;
}

.lightbox-thumb.is-active {
    opacity: 1;
    border-color: var(--black);
}

.modal--lightbox .bt-close-modal {
    top: clamp(12px, 2vw, 28px);
    right: clamp(12px, 2vw, 28px);
    border: 1px solid var(--gray-200);
    background: var(--white);
}

@media (max-width: 620px) {
    .lightbox-stage {
        padding: 64px var(--s-4) var(--s-3);
    }

    .lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .lightbox-thumb {
        width: 54px;
    }
}

.bt-close-modal {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    /* above the stage: a zoomed photo was painting over the way out */
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

/* the × glyph sits by its own baseline, which no amount of flex centring can
   move; a drawn cross is centred by geometry and matches every other icon */
.bt-close-modal svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.bt-close-modal:hover {
    color: var(--text);
    background: var(--gray-100);
}

/* ---------- TABLE (size guide) ---------- */
.size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.size-table th,
.size-table td {
    padding: var(--s-3);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.size-table th {
    font-family: "launch-bold";
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.size-table tbody tr:hover {
    background: var(--gray-050);
}

/* ---------- TOAST ---------- */
.toast-region {
    position: fixed;
    left: 50%;
    bottom: var(--s-6);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    align-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: var(--black);
    color: var(--white);
    font-size: 12px;
    box-shadow: var(--shadow-2);
    animation: toast-in var(--dur-3) var(--ease-out);
}

/* status reads from a dot, not a slab border on the edge */
.toast::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--gray-400);
}

.toast--success::before { background: var(--success); }
.toast--error::before { background: var(--danger); }

.toast.is-leaving {
    animation: toast-out var(--dur-2) var(--ease) forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(14px); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(8px); }
}

/* ---------- SEARCH ---------- */
/* the search stops being a link to a page and becomes the field itself: it
   posts straight to busca.html, so it works before any JS runs */
.header-search {
    display: flex;
    align-items: center;
    /* the icons are 44px boxes around 18px glyphs, so 4px between them reads
       as ~26px of air; the field has a real edge and needs the same optical
       distance, which the shared gap alone does not give it */
    margin-right: var(--s-3);
    height: 40px;
    padding-right: var(--s-3);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--r-btn);
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

/* the ring belongs on the box, not on the field inside it: the shared dark
   ring drew a red rectangle inside the border, one frame inside another */
.header-search:focus-within {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.menu .header-search-input:focus-visible,
.menu .header-search-go:focus-visible {
    box-shadow: none;
}

.header-search-go {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: 0;
    color: var(--gray-600);
    transition: color var(--dur-1) var(--ease);
}

.header-search:hover .header-search-go,
.header-search:focus-within .header-search-go {
    color: var(--white);
}

.header-search-input {
    width: 108px;
    height: 100%;
    background: none;
    border: 0;
    color: var(--white);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: width 420ms var(--ease-out);
}

.header-search-input::placeholder {
    color: var(--gray-600);
    opacity: 1;
}

.header-search-input:focus {
    outline: none;
    width: 200px;
}

/* the UA's own cross cannot be recoloured, so it is replaced by a masked one */
.header-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    cursor: pointer;
    background-color: var(--red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.bt-search {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: color var(--dur-1) var(--ease);
}

.bt-search:hover {
    color: var(--white);
}

.bt-search svg,
.header-search-go svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* the sort sits with the field it sorts, not orphaned under the chips */
.search-bar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    /* same rule the collection filter bar draws under itself */
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--gray-200);
}

.search-bar-row form {
    flex: 1 1 320px;
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
}

.search-field svg {
    position: absolute;
    left: var(--s-4);
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--gray-400);
    stroke-width: 2;
    pointer-events: none;
}

.input-field {
    width: 100%;
    min-height: 56px;
    padding: var(--s-4);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--gray-200);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.search-field .input-field {
    padding-left: 48px;
}

.input-field::placeholder {
    color: var(--gray-400);
}

.input-field:hover {
    border-color: var(--gray-400);
}

/* the shared ring draws a red rectangle around a field that already has a
   border, so the field's own border carries the focus instead */
.input-field:focus {
    border-color: var(--black);
}

.input-field:focus-visible {
    box-shadow: none;
    border-color: var(--black);
}

.input-field[aria-invalid="true"] {
    border-color: var(--danger);
}

/* ---------- FORM ---------- */
.form-grid {
    display: grid;
    gap: var(--s-5);
    max-width: 520px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.field label {
    font-family: "launch-bold";
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.field .hint,
.field .error {
    font-size: 11px;
    min-height: 15px;
}

.field .hint { color: var(--gray-400); }

.field .error {
    color: var(--danger);
    display: none;
}

.field[data-invalid="true"] .error { display: block; }
.field[data-invalid="true"] .hint { display: none; }

textarea.input-field {
    min-height: 130px;
    resize: vertical;
}

/* ---------- ACCORDION (FAQ) ---------- */
.accordion {
    border-top: 1px solid var(--gray-200);
}

.accordion-item {
    border-bottom: 1px solid var(--gray-200);
}

.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) 0;
    text-align: left;
    font-family: "nexa-bold";
    font-size: 15px;
    color: var(--text);
    transition: color var(--dur-1) var(--ease);
}

.accordion-trigger:hover {
    color: var(--red);
}

.accordion-trigger .plus {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    position: relative;
}

.accordion-trigger .plus::before,
.accordion-trigger .plus::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: var(--red);
    transition: transform var(--dur-2) var(--ease);
}

.accordion-trigger .plus::after {
    transform: rotate(90deg);
}

.accordion-trigger[aria-expanded="true"] .plus::after {
    transform: rotate(0deg);
}

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-3) var(--ease);
}

.accordion-trigger[aria-expanded="true"] + .accordion-panel {
    grid-template-rows: 1fr;
}

.accordion-panel > div {
    overflow: hidden;
}

/* prosa do acordeão — nunca o rótulo dentro de um botão, que herda a cor e o
   alinhamento do próprio botão */
.accordion-panel p:not(button p) {
    font-size: 13px;
    line-height: 1.75;
    color: var(--text-muted);
    padding-bottom: var(--s-5);
}

/* ---------- SECTION HEADS ---------- */
.section-head {
    margin-bottom: var(--s-6);
}

.section-head .eyebrow {
    display: flex;
    align-items: center;
    font-family: "launch-bold";
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--text);
    margin-bottom: var(--s-2);
}

.section-head h2 {
    font-family: "launch-black";
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.05;
}

/* the related strip is a footnote to the product, not a section of its own
   rank; the heading drops a step */
.product-related .section-head h2 {
    font-size: clamp(20px, 2.4vw, 26px);
}

/* ---------- ACCOUNT / AUTH ---------- */
/* the account head has no breadcrumb above it, so the lead carries more of
   the band on its own */
.page-head .page-lead {
    font-size: 17px;
}


/* form on the left, reason to fill it on the right: the aside answers the
   question the form raises instead of sitting under it */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.auth-form {
    max-width: 460px;
}

.auth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

/* nothing on the left any more: the link keeps to its own end */
.auth-row--end {
    justify-content: flex-end;
}

.check-line {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

.check-line input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--red);
}

.link-inline {
    color: var(--text);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-inline:hover {
    color: var(--red);
}

.auth-aside {
    padding: var(--s-6);
    background: var(--gray-100);
    border-radius: var(--r-3);
}

.auth-aside h2 {
    font-family: var(--font-label);
    font-size: 15px;
    margin-bottom: var(--s-3);
}

.auth-aside p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: var(--s-5);
}

.auth-note {
    margin-bottom: 0;
}

.auth-list {
    list-style: none;
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.auth-list li {
    position: relative;
    padding-left: var(--s-4);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}

.auth-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: var(--red);
}

/* the account itself: tabs over panels, one section on screen at a time */
/* the rule under the row is where the active mark has to land, so the space
   above it belongs to the tabs, not to the nav: with padding on the nav the
   two lines sat 16px apart and read as unrelated */
.account-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    /* four labels plus 32px gaps came to 437px inside a 436px column and
       dropped SAIR onto a line of its own */
    gap: var(--s-5);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--gray-200);
}

.account-tab {
    position: relative;
    padding: 0 0 var(--s-4);
    background: none;
    border: 0;
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    transition: color var(--dur-1) var(--ease);
}

.account-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    z-index: 1;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-2) var(--ease-out);
}

.account-tab:hover {
    color: var(--text);
}

.account-tab.is-active {
    color: var(--text);
}

.account-tab.is-active::after {
    transform: scaleX(1);
}

/* the tabs already announce the section, so the band above them can be
   shorter than the page-body default */
#account-root {
    padding-top: 40px;
}

/* the account is one column of settings, not a catalogue: a narrow measure
   centred on the page keeps the reading line short and the forms close to
   the tabs that switch them */
.page-head--center {
    text-align: center;
}

.page-head--center .page-lead {
    margin-inline: auto;
}

.account-shell {
    max-width: 500px;
    margin-inline: auto;
}

.account-accordion {
    max-width: none;
}

/* the account reuses the FAQ accordion, but each section is its own card:
   boxed on all sides and spaced, so the two jobs never read as one list */
.account-accordion {
    display: grid;
    gap: var(--s-3);
}

.account-accordion .accordion-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2);
    padding-inline: var(--s-5);
    transition: border-color var(--dur-1) var(--ease);
}

.account-accordion .accordion-trigger {
    padding-block: var(--s-4);
}

/* the shared ring is a rectangle drawn inside the card, so a focused header
   showed two edges at once: the card takes the mark instead */
.account-accordion .accordion-trigger:focus-visible {
    box-shadow: none;
}

.account-accordion .accordion-item:has(.accordion-trigger:focus-visible) {
    border-color: var(--red);
}

/* the padding has to sit on the content, not on the clipping wrapper: the
   wrapper is the grid item, so its own padding keeps the closed row 32px
   tall and lets the top of the form show through */
.account-accordion .accordion-panel form {
    padding-bottom: var(--s-6);
}

.account-hint {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: var(--s-5);
}

.account-panel {
    display: none;
}

.account-panel.is-active {
    display: block;
}

@media (max-width: 860px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .account-nav {
        gap: var(--s-5);
    }
}

/* ---------- PAGE SHELL (utility pages) ---------- */
/* toda faixa de topo usa a mesma arte; o preto fica atrás como base */
.page-head,
.legal-head {
    background: var(--black) url("../img/general/bg-ofc.jpg") center / cover no-repeat;
}

/* ---------- PARALLAX DAS FAIXAS DE TOPO ----------
   Toda mini hero do site — faixa de coleção, cabeçalho de página interna e o
   topo das páginas legais — corre a foto num ritmo bem diferente do da página.
   A camada é um pseudo que herda a mesma imagem do elemento (a faixa de
   coleção recebe a dela por JS) e é bem mais alta que a faixa: é essa sobra
   que dá o percurso. Ela cobre a foto estática do elemento por inteiro. */
.collection-banner,
.page-head,
.legal-head {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.collection-banner::after,
.page-head::after,
.legal-head::after {
    content: "";
    position: absolute;
    inset: -40% 0;
    z-index: -2;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    pointer-events: none;
}

@supports (animation-timeline: view()) {
    .collection-banner,
    .page-head,
    .legal-head {
        view-timeline-name: --minihero;
    }

    .collection-banner::after,
    .page-head::after,
    .legal-head::after {
        animation: minihero-parallax linear both;
        animation-timeline: --minihero;
        animation-range: entry 0% exit 100%;
    }

    @keyframes minihero-parallax {
        from { transform: translateY(-26%); }
        to   { transform: translateY(26%); }
    }
}

.page-head {
    padding-top: calc(var(--header-h) + var(--s-7));
    padding-bottom: var(--s-6);
    color: var(--white);
}

.page-head h1 {
    font-family: "launch-black";
    font-size: clamp(30px, 5vw, 54px);
    line-height: 1.03;
}

.page-head p {
    margin-top: var(--s-3);
    font-size: 15px;
    /* no cap: the lead is one sentence under the h1, and 58ch was breaking it
       in two with half the band empty beside it */
    text-wrap: balance;
    opacity: 0.8;
}

.page-body {
    padding-block: var(--s-8);
}

.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

/* ---------- 404 ---------- */
.error-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--black) url("../img/general/bg-error.jpg") center / cover no-repeat;
    color: var(--white);
    padding-top: var(--header-h);
    padding-bottom: var(--s-8);
}

/* photo as ground, copy over ink: the scrim is what keeps the message legible
   wherever the image happens to be bright */
.error-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.82) 50%, rgba(10, 10, 10, 0.55) 100%);
}

.error-page > * {
    position: relative;
    z-index: 1;
}

.error-code {
    font-family: "launch-black";
    font-size: clamp(96px, 22vw, 260px);
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 2px var(--red);
    margin: var(--s-3) 0 var(--s-5);
}

.error-page h2 {
    font-family: "launch-black";
    font-size: clamp(22px, 3.4vw, 34px);
    margin-bottom: var(--s-3);
}

.error-body {
    font-size: 14px;
    line-height: 1.7;
    max-width: 48ch;
    opacity: 0.8;
    margin-bottom: var(--s-6);
}

/* ---------- SUCCESS BLOCK ---------- */
.state-block--success {
    background: var(--gray-050);
    border: 1px solid var(--gray-200);
    padding: var(--s-5);
    max-width: none;
}

.state-block--success h2 {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: "nexa-bold";
    margin-bottom: var(--s-2);
}

/* the confirmation is carried by a check mark, not by an edge slab */
.state-block--success h2::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--r-full);
    background: var(--success)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E")
        center / 12px no-repeat;
}

/* ---------- A11Y UTILITY ---------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ---------- ABOUT PAGE ---------- */
/* ---------- SOBRE: o fogo que abre a página ----------
   Uma tela preta com o fogo vazado; rolando, o recorte cresce e o que aparece
   pela fresta é a própria seção vermelha. O efeito é puro CSS: a máscara é um
   clip-path SVG animado por scroll(). Onde `animation-timeline` não existe,
   nada disso se aplica e as duas partes viram seções empilhadas normais. */
.reveal-wrap {
    position: relative;
    background: var(--black);
}

.reveal-pin {
    position: relative;
}

.reveal-intro {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--s-7);
    background: var(--black);
    overflow: hidden;
}

/* no fim do scroll vira vermelho: o fogo tem recortes que nunca fecham só
   crescendo, e o fundo igual à seção esconde o que sobra fora da máscara */
.reveal-intro-bg {
    position: absolute;
    inset: 0;
    background: var(--red);
    opacity: 0;
}

.scroll-cue {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.scroll-cue svg {
    width: 18px;
    height: 18px;
    /* a seta pulsa para baixo enquanto a página espera o primeiro scroll */
    animation: cue-bounce 1.8s var(--ease) infinite;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes cue-bounce {
    0%, 55%, 100% { transform: translateY(0); opacity: 0.75; }
    25% { transform: translateY(7px); opacity: 1; }
}

/* no vermelho a dica fica presa na base da tela cheia */
.scroll-cue--red {
    position: absolute;
    left: 50%;
    /* acima da quina da cortina, que sobe 72px por cima desta tela */
    bottom: clamp(76px, 9vh, 116px);
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
}

.reveal-clip-defs {
    position: absolute;
    width: 0;
    height: 0;
}

.reveal-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding-block: var(--s-9);
    background: var(--red);
    color: var(--white);
    text-align: center;
    overflow: hidden;
}

@supports (animation-timeline: scroll()) {
    /* a altura extra é a pista do scroll; o miolo fica preso na tela */
    .reveal-wrap {
        height: 260vh;
    }

    .reveal-pin {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }

    .reveal-intro {
        position: absolute;
        inset: 0;
        min-height: auto;
        z-index: 1;
    }

    .reveal-mask {
        position: absolute;
        inset: 0;
        z-index: 2;
        clip-path: url("#flame-clip");
        animation: flame-open linear both;
        animation-timeline: scroll(root);
        animation-range: 0 900px;
    }

    /* no fim a máscara sai de cena: por maior que fique, o recorte do fogo
       tem vãos que cruzariam o texto. O corte é seco de propósito — acontece
       quando a forma já cobre quase tudo e o fundo atrás já virou vermelho. */
    @keyframes flame-open {
        0%, 92% { clip-path: url("#flame-clip"); }
        100% { clip-path: none; }
    }

    .reveal-content {
        position: absolute;
        inset: 0;
        min-height: auto;
        padding: 0;
    }

    .reveal-clip-path {
        transform: translate(50vw, 50vh) scale(0.2);
        animation: flame-grow linear both;
        animation-timeline: scroll(root);
        animation-range: 0 900px;
        will-change: transform;
    }

    @keyframes flame-grow {
        from { transform: translate(50vw, 50vh) scale(0.2); }
        to   { transform: translate(50vw, 50vh) scale(16); }
    }

    .reveal-intro-bg {
        animation: flame-ground linear both;
        animation-timeline: scroll(root);
        animation-range: 0 900px;
    }

    @keyframes flame-ground {
        0%, 74% { opacity: 0; }
        92% { opacity: 1; }
        100% { opacity: 1; }
    }

    .reveal-content .sobre-hero-content {
        opacity: 0;
        animation: flame-text linear both;
        animation-timeline: scroll(root);
        animation-range: 0 900px;
    }

    @keyframes flame-text {
        0%, 78% { opacity: 0; }
        100% { opacity: 1; }
    }

    .reveal-intro .scroll-cue {
        animation: flame-cue linear both;
        animation-timeline: scroll(root);
        animation-range: 0 900px;
    }

    /* a mesma dica, agora sobre o vermelho: entra junto com o texto */
    .scroll-cue--red {
        opacity: 0;
        animation: flame-text linear both;
        animation-timeline: scroll(root);
        animation-range: 0 900px;
    }

    @keyframes flame-cue {
        0% { opacity: 1; }
        30% { opacity: 0; }
        100% { opacity: 0; }
    }
}

.sobre-hero-content {
    position: relative;
    z-index: 1;
    max-width: 58ch;
    margin-inline: auto;
}

.reveal-content .hero-eyebrow {
    justify-content: center;
    color: var(--white);
}

.reveal-content h1 {
    font-family: "launch-black";
    font-size: clamp(38px, 7vw, 92px);
    line-height: 0.98;
    margin: var(--s-4) 0 var(--s-5);
}

.reveal-content .lead {
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
    max-width: 52ch;
    margin-inline: auto;
}

.area-sobre .two-col > div > p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: var(--s-4);
    max-width: 58ch;
}

/* a arte da marca entra como fundo: os cards brancos seguram a leitura */
.area-mvv {
    background: var(--black) url("../img/general/bg-ofc.jpg") center / cover no-repeat;
}

.mvv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3);
}

/* o card é a palavra; o texto só aparece quando alguém se interessa por ela */
.mvv-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    /* mesma quina dos cards da home */
    border-radius: var(--r-3);
    padding: clamp(24px, 3vw, 40px);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-3);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}

/* no hover o card inverte: preto cheio, texto claro */
.mvv-card:hover,
.mvv-card:focus-within {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
    transform: translateY(-4px);
    box-shadow: var(--shadow-1);
}

.mvv-card:hover .mvv-text > p,
.mvv-card:focus-within .mvv-text > p {
    color: rgba(255, 255, 255, 0.78);
}

/* mesma seta dos cards de coleção, em tinta porque o fundo aqui é branco */
.mvv-go {
    position: absolute;
    top: clamp(24px, 3vw, 40px);
    right: clamp(24px, 3vw, 40px);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-btn);
    color: var(--black);
    pointer-events: none;
    transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
        color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}

.mvv-go svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mvv-card:hover .mvv-go,
.mvv-card:focus-within .mvv-go {
    background: var(--white);
    border-color: var(--white);
    color: var(--black);
    transform: translateX(3px);
}

.mvv-card h3 {
    font-family: "launch-black";
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1;
    text-transform: uppercase;
}

/* fechado a 0fr, aberto a 1fr: o texto empurra o card em vez de sumir por baixo */
.mvv-text {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-3) var(--ease-out);
}

.mvv-text > p {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
}

.mvv-card:hover .mvv-text,
.mvv-card:focus-within .mvv-text {
    grid-template-rows: 1fr;
}

/* Sem mouse não existe hover — e numa coluna estreita esconder o texto atrás
   de um hover que talvez nunca aconteça é apostar contra o leitor. Até 1080px
   o texto fica aberto e o card abraça o conteúdo. */
@media (hover: none), (max-width: 1080px) {
    .mvv-text {
        grid-template-rows: 1fr;
    }

    .mvv-card {
        aspect-ratio: auto;
        justify-content: flex-start;
        padding-top: clamp(56px, 8vw, 72px);
    }

    .mvv-card h3 {
        font-size: clamp(26px, 4vw, 34px);
    }
}

/* ---------- SOBRE: manifesto ----------
   Uma frase só, em fundo claro, com as linhas escalonadas: o recuo é o que
   dá ritmo de leitura sem precisar de mais nada na tela. */
.statement {
    position: relative;
    background: var(--gray-050);
    /* uma tela inteira só para a frase: é o respiro entre a história da marca
       e a ficha de missão/visão/valores */
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-block: clamp(60px, 9vw, 130px);
}


.statement-line {
    font-family: "launch-black";
    font-size: clamp(28px, 5.6vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* sem timeline de scroll a linha inteira fica vermelha: a ênfase existe, só
   não caminha */
.statement-accent {
    color: var(--red);
}

.statement-phrase {
    display: inline-block;
}

@supports (animation-timeline: view()) {
    .statement-line {
        view-timeline-name: --statement;
    }

    /* o vermelho é do scroll, não da linha */
    .statement-accent {
        color: inherit;
    }

    .statement-phrase {
        animation: statement-hit linear both;
        animation-timeline: --statement;
        animation-range: contain calc(var(--i) * 100% / var(--n))
            contain calc((var(--i) + 1) * 100% / var(--n));
    }

    /* a frase acende no meio da sua fatia e devolve a vez nas bordas; a troca
       é seca de propósito, para ler como destaque e não como fade */
    @keyframes statement-hit {
        0%, 14% { color: var(--black); }
        /* degraus quase secos: entre um passo e outro o vermelho da marca não
           passa por tons intermediários apagados */
        15%, 85% { color: var(--red); }
        86%, 100% { color: var(--black); }
    }
}

/* cada linha é um bloco próprio: entram uma atrás da outra no scroll */
.statement-row {
    display: block;
}

/* o recuo cresce linha a linha, como no bloco de referência */
.statement-in {
    display: inline-block;
    padding-left: clamp(24px, 6vw, 96px);
}

.statement-in2 {
    display: inline-block;
    padding-left: clamp(12px, 3vw, 48px);
}

/* ---------- SOBRE: acabamento ---------- */
.quality-lead {
    max-width: 62ch;
    margin-bottom: var(--s-5);
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-muted);
}

.carousel--quality .carousel-track {
    gap: var(--card-gap);
    padding-block: 8px 30px;
    margin-block: -8px -30px;
}

/* fotos 16:9: uma e um pedaço na tela, o resto se puxa pelo carrossel */
.carousel--quality .quality-shot {
    flex: 0 0 auto;
    width: min(72%, 720px);
    margin: 0;
    border-radius: var(--r-3);
    overflow: hidden;
    background: var(--gray-100);
}

.carousel--quality .quality-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (max-width: 700px) {
    /* dentro de um trilho sangrado a porcentagem resolve contra uma caixa que
       não é a tela; a medida em vw é a que o olho espera */
    .carousel--quality .quality-shot {
        width: min(86vw, 460px);
    }
}

/* numbered process list */
.cta-band {
    /* a listra da marca corre atrás e o convite fica numa placa por cima:
       sem a placa, o texto brigaria com a listra */
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--black);
    color: var(--white);
    padding-block: clamp(48px, 7vw, 90px);
    text-align: center;
}

/* A listra é uma camada própria — elemento, não pseudo: em pseudo-elemento a
   `view()` ficou presa em 50% e a camada não andava. Fundo também não serve,
   porque background não se transforma. */
.cta-bg {
    position: absolute;
    /* bem mais alta que a seção: é essa sobra que permite a camada andar
       devagar enquanto a página anda rápido */
    inset: -45% 0;
    z-index: -1;
    background: url("../img/general/bg-fire.png") center / cover no-repeat;
    will-change: transform;
}

@supports (animation-timeline: view()) {
    /* o relógio é a seção, com nome: a `view()` anônima aqui ficava parada em
       50%, porque o sujeito seria a própria camada, que é absoluta e não tem
       percurso próprio para medir */
    .cta-band {
        view-timeline-name: --cta;
    }

    .cta-bg {
        animation: cta-parallax linear both;
        animation-timeline: --cta;
        animation-range: entry 0% exit 100%;
    }

    /* a listra percorre cerca de um terço do que a página percorre no mesmo
       trecho: é a diferença de velocidade que faz o fundo parecer mais longe */
    @keyframes cta-parallax {
        from { transform: translateY(-24%); }
        to   { transform: translateY(24%); }
    }
}

.cta-band > .container {
    position: relative;
    z-index: 1;
}

/* A placa é vidro escuro sobre a listra: o convite tem duas metades — o que
   é, à esquerda, e o que fazer, à direita. Centralizar tudo dava uma linha de
   texto de 1200px de largura, que ninguém lê. */
.cta-glass {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
    padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
    text-align: left;
    background:
        linear-gradient(135deg, rgba(240, 47, 46, 0.14), transparent 42%),
        rgba(10, 10, 10, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-3);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
        transform var(--dur-2) var(--ease-out);
}

/* microinteração: aproximar o mouse da placa acende a borda e o brilho da
   marca, como se o vidro pegasse a luz da listra atrás */
.cta-glass:hover,
.cta-glass:focus-within {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.55);
}

/* fio de luz na quina superior: é o que faz a placa ter espessura em vez de
   parecer um retângulo pintado */
.cta-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

/* a marca vaza do canto como brilho, não como desenho */
.cta-glass::after {
    content: "";
    position: absolute;
    right: -12%;
    bottom: -70%;
    width: 46%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(240, 47, 46, 0.34), transparent 62%);
    pointer-events: none;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease);
}

.cta-glass:hover::after,
.cta-glass:focus-within::after {
    transform: scale(1.18) translateY(-4%);
    opacity: 1.0;
}

.cta-copy {
    position: relative;
    z-index: 1;
}

.cta-do {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--s-4);
    justify-items: stretch;
}


@media (max-width: 860px) {
    .cta-glass {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }
}

.cta-band h2 {
    font-family: "launch-black";
    font-size: clamp(26px, 3.4vw, 42px);
    line-height: 1.03;
    letter-spacing: -0.015em;
    max-width: 18ch;
    margin-bottom: var(--s-4);
}

/* direct child only: the primary button's label is also a <p>, and this rule
   was reaching into it and blowing it up to 15px */
.cta-copy > p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .75);
    /* medida de leitura, não largura da placa */
    max-width: 54ch;
    margin: 0;
}

/* na placa os dois botões dividem a coluna da direita em partes iguais */
.cta-glass .state-actions {
    justify-content: stretch;
    gap: var(--s-3);
}

/* O primário carrega rótulo mais longo e ainda um selo de seta: pede base
   maior que o secundário, senão o texto passa por baixo da seta. */
.cta-glass .state-actions .bt-view-all {
    flex: 1 1 250px;
    width: auto;
    min-width: 0;
}

.cta-glass .state-actions .bt-secondary {
    flex: 1 1 170px;
    width: auto;
    min-width: 0;
}

@media (max-width: 520px) {
    .cta-glass .state-actions .bt-view-all,
    .cta-glass .state-actions .bt-secondary {
        flex-basis: 100%;
    }
}

@media (max-width: 720px) {
    .sobre-hero { min-height: auto; }
    .sobre-hero::after { opacity: 0.05; right: -22%; }
}

/* ---------- CONTACT CHANNEL LINKS ---------- */
/* Channels sit side by side across the container instead of stacking in a
   half-width column: three short cards read faster as a row of choices. */
.channel-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-3);
}

/* channels and form run side by side; the form gets the wider share because
   its fields set the floor for a usable column */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
}

/* input fields past ~60ch stop being comfortable to fill in */
.contact-form-col {
    max-width: 720px;
}

@media (max-width: 860px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-col {
        margin-top: var(--s-6);
    }
}

.channel {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--gray-200);
    transition: border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease);
}

.channel:hover {
    border-color: var(--black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
}

.channel img {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    /* the shipped icon set is white-on-dark for the footer; invert for light grounds */
    filter: invert(1);
}

.channel strong {
    display: block;
    font-family: "nexa-bold";
    font-size: 14px;
    font-weight: normal;
}

.channel span {
    font-size: 11px;
    color: var(--text-muted);
}

/* ===========================================================
   INTERACTION PASS
   Every clickable surface answers the pointer. One easing, one
   set of durations, so the whole page moves like a single thing.
   =========================================================== */

a,
button,
label,
summary,
[role="tab"] {
    transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease),
                transform var(--dur-2) var(--ease);
}

/* footer links slide and brighten instead of only changing colour */
.link-footer {
    position: relative;
    width: fit-content;
}

.link-footer:hover {
    color: var(--white);
    transform: translateX(3px);
}

/* payment + social tiles lift and tint their icon */
.bt-social img,
.bt-plataform-pay img {
    transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease);
    opacity: 0.85;
}

.bt-social:hover,
.bt-plataform-pay:hover {
    background: #151515;
    transform: translateY(-2px);
}

.bt-social:hover img,
.bt-plataform-pay:hover img {
    opacity: 1;
    transform: scale(1.08);
}

/* header icon buttons */
.bt-search svg {
    transition: transform var(--dur-2) var(--ease-out);
}

.bt-search:hover svg {
    transform: scale(1.12);
}

.header-logo img {
    transition: opacity var(--dur-1) var(--ease);
}

.header-logo:hover img {
    opacity: 0.75;
}

/* gallery thumbs answer before they are the active one */
/* colour swatches on the product page */
.bt-color {
    transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease),
                box-shadow var(--dur-1) var(--ease);
}

.area-colors-detail .bt-color:hover:not([disabled]) {
    transform: translateY(-2px);
    border-color: var(--gray-600);
    box-shadow: var(--shadow-1);
}

/* the swatch now changes the whole spread, so which one is active has to show */
.area-colors-detail .bt-color.is-active {
    border-color: var(--black);
    box-shadow: 0 0 0 2px var(--white) inset;
}

.bt-color[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.collection-card .collection-name {
    transition: transform var(--dur-2) var(--ease-out);
}

.collection-card:hover .collection-name {
    transform: translateY(-2px);
}

/* category card: label rises as the CTA fills */
.category-card strong {
    transition: transform var(--dur-2) var(--ease-out);
}

a.category-card:hover strong {
    transform: translateY(-3px);
}

/* promo cards */
.promo-card strong {
    transition: transform var(--dur-2) var(--ease-out);
}

.promo-card:hover strong {
    transform: translateX(3px);
}

/* accordion + breadcrumb rows */
.accordion-trigger:hover .plus::before,
.accordion-trigger:hover .plus::after {
    background: var(--black);
}

/* section head action already has an arrow; keep the chip family consistent */
.chip-filter:hover,
.cat-pill:hover {
    transform: translateY(-1px);
}

.chip-filter:hover {
    color: var(--text);
}

/* scroll polish: keep anchored sections clear of the fixed header */
:target,
section[id],
[id^="collections"] {
    scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

/* the fixed header itself should feel attached to the page, not floating */
.menu {
    /* blur(0) at rest is not decoration: backdrop-filter has no "none -> blur"
       interpolation, so without a real starting value the glass pops in while
       everything else eases. */
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    transition: height var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease),
        backdrop-filter var(--dur-3) var(--ease),
        -webkit-backdrop-filter var(--dur-3) var(--ease),
        box-shadow var(--dur-3) var(--ease);
}

.menu.is-stuck {
    box-shadow: 0 1px 0 #1f1f1f, 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Past the hero the bar stops being a solid lid and lets the page read
   through it. The blur is doing a job here, not decorating: the content
   underneath is photography, and plain transparency alone would leave the
   nav labels sitting on whatever happens to scroll by. */
.menu.is-glass {
    /* the bar condenses as it turns to glass: less of the page is covered
       exactly when there is page worth seeing behind it */
    height: 58px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* On the solid bar the icons can sit at grey and still read. Over glass the
   page shows through, so grey lands on whatever scrolls past and loses
   contrast — they go white and keep the hover as full white. */
.menu.is-glass .header-search {
    height: 34px;
}

.menu.is-glass .bt-search {
    color: rgba(255, 255, 255, 0.9);
}

.menu.is-glass .bt-search:hover,
.menu.is-glass .bt-search:focus-visible {
    color: var(--white);
}

/* without backdrop-filter the same transparency would strand the labels, so
   that engine keeps a solid bar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .menu.is-glass {
        background: rgba(10, 10, 10, 0.94);
    }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
    :root {
        --nav-h: 61px;
        --header-h: 61px;
    }

    /* Touch targets. These links are 17-22px tall on a phone, which is under
       any reasonable finger. The height comes from the box, not from the type,
       so nothing about the text changes — only the area that answers a tap. */
    .link-footer {
        display: flex;
        align-items: center;
        min-height: 40px;
        margin-top: 0;
    }

    .to-top {
        min-height: 40px;
        align-items: center;
    }

    .breadcrumb a,
    .breadcrumb span[aria-current] {
        padding-block: 7px;
    }

    .link-size-guide,
    .link-inline {
        padding-block: 8px;
    }

    /* the credit is 10px type in a 10px line; the tap area is not */
    .subfooter a {
        display: inline-block;
        padding-block: 8px;
    }

    .header-search-input,
    .header-search-input:focus {
        width: 0;
        padding: 0;
    }

    .header-search {
        padding-right: 0;
        border-color: transparent;
    }

    .header-actions {
        margin-left: auto;
        margin-right: var(--s-2);
    }

    .page-head { padding-top: calc(var(--header-h) + var(--s-6)); }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .sort-field { justify-content: space-between; }
    .select-field { flex: 1; }

    /* favourite stays visible on touch — there is no hover to reveal it */
    .bt-fav {
        opacity: 1;
        transform: none;
    }

    .buy-row .bt-direct-ml { flex: 1; }

    .toast-region {
        left: var(--s-4);
        right: var(--s-4);
        bottom: var(--s-4);
        transform: none;
    }

    .toast { width: 100%; }

    .two-col { gap: var(--s-7); }

    .flag-logo { width: 56px; height: 46px; }
    .flag-logo img { width: 34px; }

    /* no celular a altura da hero vem do conteúdo: 74vh sobraria acima da dobra */
    .hero-slider { min-height: auto; }

    .product-detail { flex-direction: column; }

    .gallery-grid { grid-template-columns: 1fr; }

    .product-resume { position: static; }

    /* na coluna, o flex-basis de 600px virava altura e sobrava um vão morto
       embaixo da galeria */
    .product-gallery,
    .product-resume { flex: none; }



    .hero-big-title {
        font-size: clamp(24px, 7.4vw, 34px);
    }

}


/* As abas de coleção quebravam em três linhas e empurravam a grade para fora
   da tela; viram um trilho que corre na horizontal, com alvo de 44px. */
@media (max-width: 900px) {
    .filter-tabs {
        flex-wrap: nowrap;
        gap: var(--s-4);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
        scroll-padding-inline: var(--gap);
        scrollbar-width: none;
    }

    .filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-tab {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-bottom: var(--s-3);
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

/* Áreas de toque: em tela sem mouse todo alvo tem pelo menos 40px de altura
   real, inclusive os links de texto, que por natureza têm a altura da linha. */
@media (max-width: 900px) {
    .link-footer,
    .link-size-guide,
    .to-top,
    .link-action {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .bt-close-modal,
    .lightbox-nav,
    .lightbox-close {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 620px) {
    .banner-mark {
        height: 34px;
        margin-bottom: var(--s-3);
    }
}

/* ===========================================================
   TABLET E CELULAR (≤900px)
   O que vale para as duas: a hero deita seus trilhos, os alvos crescem e nada
   pode encostar na borda da tela.
   =========================================================== */
@media (max-width: 900px) {
    /* A hero deixa de ser duas colunas: título e botão em cima, trilho de
       coleções embaixo. Em 820px o par lado a lado empurrava os chips por cima
       da foto e a faixa passava de 900px de altura. */
    .hero-slider {
        flex-direction: column;
        justify-content: center;
        padding-bottom: 0;
        min-height: auto;
    }

    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        width: 100%;
    }

    /* os selos de garantia são conversa de desktop: em tela de toque comiam
       a dobra inteira embaixo da hero */
    .hero-bottom {
        display: none;
    }

    /* Três nomes longos empilhados comiam 190px do topo. Aqui viram uma faixa
       que corre na horizontal, do jeito que se troca de aba no celular. */
    .hero-switch {
        /* a regra de ≥721px prende o trilho no canto direito com 280px: sem
           desfazer isso, no tablet as abas rolavam dentro de uma caixinha */
        position: static;
        transform: none;
        max-width: none;
        flex-direction: row;
        flex-wrap: nowrap;
        /* stretch, não width: 100% — a largura do container anularia a sangria
           e o trilho pararia na calha em vez de sangrar até a borda */
        align-self: stretch;
        width: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
        scroll-padding-inline: var(--gap);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hero-switch::-webkit-scrollbar {
        display: none;
    }

    .hero-chip {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        height: 46px;
        padding: 0 16px;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    /* A faixa de selos também deita: três caixas lado a lado a 820px quebravam
       o texto em cinco linhas e a seta subia por cima dele. */
    .ads-strip {
        display: flex;
        gap: var(--s-2);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
        scroll-padding-inline: var(--gap);
        scrollbar-width: none;
    }

    .ads-strip::-webkit-scrollbar {
        display: none;
    }

    .ads-area {
        flex: 0 0 auto;
        width: min(82%, 340px);
        scroll-snap-align: start;
    }

    /* o selo da garagem passava da borda direita e empurrava a página para
       fora da tela (839px de conteúdo numa janela de 820) */
    .brand-badge {
        right: var(--s-4);
        top: auto;
        bottom: var(--s-4);
        width: 52px;
        height: 52px;
    }

    /* filtros de categoria da busca: um trilho, não quatro linhas */
    .chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
        scroll-padding-inline: var(--gap);
        scrollbar-width: none;
    }

    .chip-row::-webkit-scrollbar {
        display: none;
    }

    .chip-row > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/* A hero do celular fecha a revisão: dois terços da tela para a foto e o texto
   pousado na base, como num cartaz. Precisa vir depois do bloco de ≤900px, que
   zera a altura mínima e centraliza o conteúdo. */
@media (max-width: 620px) {
    .hero-slider {
        /* quase a tela inteira: a faixa de selos entra na conta, então sobra
           uma dobra visível abaixo dela convidando a rolar */
        min-height: 90svh;
        justify-content: flex-end;
        padding-top: calc(var(--header-h) + var(--s-7));
        padding-bottom: var(--s-5);
    }

    /* a faixa de selos é o último filho da hero; sem isto o bloco de texto
       ficava colado no topo e sobrava foto vazia entre ele e os selos */
    .hero-content {
        margin-top: auto;
    }
}

/* Só no tablet: empilhada, a hero encolhia para a altura do texto e a foto
   virava uma tira. No celular a altura continua vindo do conteúdo — 74vh ali
   empurraria os produtos para muito abaixo da dobra. */
@media (min-width: 561px) and (max-width: 900px) {
    .hero-slider {
        min-height: 74vh;
    }
}

/* ===========================================================
   RISE REVEAL
   Two shapes. A block fades up as one piece; a heading rises
   word by word from behind its own line box, which is why each
   word needs a clipping wrapper of its own.
   =========================================================== */
.rv-b {
    opacity: 0;
    transform: translateY(34px);
}

.rv-b.is-in {
    animation: rv-bloco 0.8s var(--ease-out) forwards;
}

@keyframes rv-bloco {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: none; }
}

/* Section headings: same direction as the hero rise so the language is
   consistent, but a third of the travel, no per-word stagger, and half the
   duration. It reads as arriving without restaging the focal moment. */
.rv-q {
    opacity: 0;
    transform: translateY(12px);
}

.rv-q.is-in {
    animation: rv-quieto 0.42s var(--ease-out) forwards;
}

@keyframes rv-quieto {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* On a phone the whole entrance is shorter and travels less: the element
   crosses the viewport faster, so the same 34px and 0.85s read as lag. */
@media (max-width: 560px) {
    .rv-b {
        transform: translateY(20px);
    }

    .rv-b.is-in {
        animation-duration: 0.6s;
    }

    @keyframes rv-bloco {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: none; }
    }

    .rv-h.is-in .rv-w > span {
        animation-duration: 0.62s;
    }
}

/* A hero da home e as faixas de topo das outras páginas entram na mesma
   ordem: primeiro onde estou, depois o que é, depois o que fazer. Opacidade e
   deslocamento, um item por vez. */
.hero-info .hero-eyebrow,
.hero-info #hero-cta {
    opacity: 0;
}

.hero-info.is-entering .hero-eyebrow {
    animation: hero-item 0.8s var(--ease-out) 60ms both;
}

.hero-info.is-entering #hero-cta {
    animation: hero-item 0.8s var(--ease-out) 620ms both;
}

@keyframes hero-item {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* faixas internas: trilha, rótulo, título e descrição em sequência */
.page-head h1,
.collection-banner h1,
.product-resume h1 {
    --rv-base: 200ms;
}

.page-head p,
.collection-banner p:not(.collection-banner-eyebrow) {
    animation-delay: 460ms !important;
}

.page-head .hero-eyebrow,
.collection-banner-eyebrow {
    animation-delay: 120ms !important;
}

/* one wrapper per word: overflow clip is what makes the word appear to
   emerge from the line rather than slide in from empty space */
.rv-w {
    display: inline-block;
    overflow: hidden;
    overflow: clip;
    vertical-align: bottom;
    /* clip would crop descenders and accents at the exact line box, so the
       wrapper is grown downward and pulled back by the same amount */
    padding-bottom: 0.18em;
    margin-bottom: -0.18em;
}

.rv-w > span {
    display: inline-block;
    transform: translateY(115%);
    will-change: transform;
}

.rv-h.is-in .rv-w > span {
    animation: rv-palavra 0.85s var(--ease-out) forwards;
    /* --rv-base atrasa o título inteiro, para ele entrar depois da trilha e do
       rótulo em vez de junto com eles */
    animation-delay: calc(var(--rv-base, 0ms) + var(--rv-d, 0ms));
}

@keyframes rv-palavra {
    0%   { transform: translateY(115%); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

/* Reduced motion gets a reduced rise, not a cancelled one: the travel is cut
   to roughly a third so the arrival still reads, without the long sweep. */
@media (prefers-reduced-motion: reduce) {
    /* Reduced motion means less movement, not no feedback. The button wipe is
       the hover affordance itself, so it survives the blanket duration reset
       above at a shorter, flatter run. */
    .bt-view-all::before,
    .link-action::before,
    .bt-secondary::before {
        transition-duration: 220ms !important;
    }

    /* the header changes shape and material at once; snapping it is worse than
       a short ease, so it keeps one too */
    .menu,
    .header-logo,
    .header-logo img,
    .header-mark {
        transition-duration: 260ms !important;
    }


    /* smaller travel, still visible */
    .collection-card:not(.collection-card--plain)::after,
    .cat-shot img {
        transition-duration: 300ms !important;
    }

    .collection-card:not(.collection-card--plain):hover::after,
    .category-card:hover .cat-shot img {
        transform: scale(1.03);
    }

    .rv-q { transform: translateY(8px); }

    .rv-q.is-in {
        animation: rv-quieto 0.32s var(--ease) forwards !important;
        animation-duration: 0.32s !important;
    }

    .rv-b { transform: translateY(26px); }

    /* the blanket rule above zeroes every duration with !important, so the
       rise has to outrank it explicitly or it finishes before it is seen */
    .rv-b.is-in {
        animation: rv-bloco-soft 0.5s var(--ease) forwards !important;
        animation-duration: 0.5s !important;
    }

    @keyframes rv-bloco-soft {
        from { opacity: 0; transform: translateY(26px); }
        to   { opacity: 1; transform: none; }
    }

    /* o que acompanha a rolagem continua: quem move é a mão, não um timer */
    .statement-phrase,
    .cta-bg,
    .ignite-bg,
    .ignite-mark,
    .ignite-word,
    .collection-banner::after,
    .page-head::after,
    .legal-head::after {
        animation-duration: auto !important;
    }

    .hero-info.is-entering .hero-eyebrow,
    .hero-info.is-entering #hero-cta {
        animation-duration: 0.45s !important;
    }

    .rv-w > span { transform: translateY(90%); }

    .rv-h.is-in .rv-w > span {
        animation: rv-palavra-soft 0.7s var(--ease-out) forwards !important;
        animation-duration: 0.7s !important;
        animation-delay: var(--rv-d, 0ms) !important;
    }

    @keyframes rv-palavra-soft {
        from { transform: translateY(90%); }
        to   { transform: none; }
    }
}

/* At phone width the two store marks plus the action leave the copy about
   170px, which shreds it into one word per line. Give the plate and the
   action one row and hand the sentence the full width below. */
@media (max-width: 560px) {
    .ads-mercado-livre {
        flex-wrap: wrap;
    }

    .ads-mercado-livre .ads-text {
        flex-basis: 100%;
        order: 3;
        padding-block: var(--s-3);
    }

    .ads-mercado-livre .bt-go-mercado-livre {
        margin-left: auto;
    }
}


/* ===========================================================
   MAINTENANCE
   Standalone by design: no header, no nav. A page that says the
   site is down must not offer routes back into it — the only way
   out is the one channel that still answers.
   =========================================================== */
.maintenance {
    background: var(--black);
    color: var(--white);
}

.mt-stage {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-block: var(--s-8) var(--s-6);
    /* the same dark plate the 404 uses: a product hero reads as a shop that is
       open, which is the opposite of what this page says */
    background: var(--black) url("../img/general/bg-error.jpg") center / cover no-repeat;
}

/* the photo is ground, not subject: it stays behind a heavy scrim so the
   copy holds contrast wherever the image happens to be bright */
.mt-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.92) 42%, rgba(10, 10, 10, 0.55) 100%);
}

.mt-stage > * {
    position: relative;
    z-index: 1;
}

/* Bleeds off the right edge on purpose: cropped type reads as scale rather
   than as a word that failed to fit. */
.mt-oops {
    position: absolute;
    z-index: 0;
    right: -0.08em;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    /* sized to stay in the right half: any larger and the word crosses the
       copy column instead of sitting beside it */
    font-size: clamp(96px, 17vw, 260px);
    line-height: 0.8;
    letter-spacing: -0.03em;
    color: var(--red);
    opacity: 0.92;
    pointer-events: none;
    user-select: none;
}

.mt-content {
    max-width: 640px;
    margin-inline: 0;
    padding-inline: clamp(24px, 7vw, 110px);
}

.mt-eyebrow {
    display: flex;
    align-items: center;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: var(--s-4);
}

.mt-title {
    font-family: var(--font-display);
    font-size: clamp(38px, 5.4vw, 68px);
    line-height: 0.98;
    text-transform: uppercase;
    margin-bottom: var(--s-5);
}

.mt-lead {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 46ch;
    margin-bottom: var(--s-4);
}

.mt-cta {
    margin-top: var(--s-4);
    min-width: 280px;
    padding-left: var(--s-4);
}

/* the icon ships in ink for light grounds; the button body is black */
.mt-cta img {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

/* the brand mark stands in for the header: enough to say whose page this is,
   without offering navigation into a site that is down */
.mt-mark {
    position: absolute;
    top: var(--s-6);
    left: clamp(24px, 7vw, 110px);
    width: 34px;
    height: 30px;
    background-color: var(--red);
    -webkit-mask: url("../img/components/symbol-launch.svg") no-repeat center / contain;
    mask: url("../img/components/symbol-launch.svg") no-repeat center / contain;
}

/* the two groups take opposite ends, the way the reference lays them out */
.mt-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-6);
    margin-top: auto;
    padding-top: var(--s-8);
    padding-inline: clamp(24px, 7vw, 110px);
}

/* logotype on its own line under them, instead of floating over the icons */
.mt-bottom {
    display: flex;
    justify-content: center;
    padding-top: var(--s-6);
    padding-inline: clamp(24px, 7vw, 110px);
}

.mt-foot-group p {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: var(--s-3);
}

.mt-logo {
    height: 26px;
    width: auto;
    opacity: 0.9;
}

@media (max-width: 900px) {
    /* behind the copy instead of beside it: at this width there is no room
       for two columns, and a legible word beats a cropped one */
    .mt-oops {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.16;
    }

    .mt-foot {
        gap: var(--s-5);
    }
}

/* ===========================================================
   IGNITION — the one authored entrance
   The mark draws breath on black, then flies to the exact slot it
   occupies in the hero eyebrow. Shared-element continuity, not a splash:
   the animation ends with the brand already in place, so nothing about
   the page has to re-introduce itself.
   =========================================================== */
.ignition {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--black);
    /* the black lifts on its own curve, slower than the mark, so the page
       is already arriving while the flame is still travelling */
    transition: opacity 620ms var(--ease) 220ms;
}

.ignition.is-out {
    opacity: 0;
    pointer-events: none;
}

.ignition-anim {
    display: none;
    width: min(38vmin, 420px);
    height: auto;
}

/* the animation is the presentation; the static mark is the reduced-motion
   stand-in, so exactly one of the two is ever shown */
.ignition.is-anim .ignition-anim { display: block; }
.ignition.is-anim .ignition-mark { display: none; }

.ignition-mark {
    display: block;
    width: 132px;
    height: 117px;
    background: linear-gradient(150deg, var(--red) 0%, var(--red-dark) 100%);
    -webkit-mask: url("../img/components/symbol-launch.svg") no-repeat center / contain;
    mask: url("../img/components/symbol-launch.svg") no-repeat center / contain;
    transform-origin: center;
    animation: ignition-breath 620ms var(--ease-out) both;
    will-change: transform, opacity;
}

@keyframes ignition-breath {
    0%   { opacity: 0; transform: scale(0.62) translateY(14px); filter: blur(6px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    /* no flight, no blur: the mark simply appears and the black lifts */
    .ignition-mark {
        animation: ignition-fade 260ms var(--ease) both !important;
    }

    @keyframes ignition-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .ignition {
        transition-duration: 260ms !important;
        transition-delay: 60ms !important;
    }
}

/* ===========================================================
   CELULAR — AJUSTES FINAIS DE LAYOUT
   Bloco no fim do arquivo de propósito: precisa vencer o de ≤900px e o
   de ≤620px que vêm antes.
   =========================================================== */
@media (max-width: 620px) {
    /* a barra fica com logo, busca e menu; favoritos, carrinho e conta vivem
       na gaveta, onde têm nome em vez de só um desenho */
    .header-actions .bt-search {
        display: none;
    }

    .options-menu {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
        padding: var(--s-5) var(--gap) var(--s-7);
    }

    .options-menu .option-item {
        min-height: 44px;
        font-size: 13px;
        letter-spacing: 1px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-group .option-item:last-child {
        border-bottom: 0;
    }

    /* ---- hero ---- */
    .hero-slider {
        padding-bottom: var(--s-4);
    }

    .hero-info .hero-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }

    /* o trilho de coleções ocupa a tela toda, com calha nas pontas */
    .hero-switch {
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
    }

    .ads-box svg,
    .ads-box img {
        width: 22px;
        height: 22px;
    }

    /* ---- faixas e seções ---- */
    .collection-banner {
        min-height: 62svh;
    }

    .product-list-section {
        padding-top: var(--s-5);
    }

    .state-block {
        padding-block: var(--s-6) var(--s-8);
    }

    /* ---- galeria do produto vira carrossel ---- */
    .gallery-grid {
        display: flex;
        gap: var(--s-2);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-cell {
        flex: 0 0 auto;
        width: 86%;
        scroll-snap-align: center;
    }

    /* a quinta foto deixa de ocupar a linha inteira: no trilho todas são cartas
       do mesmo tamanho */
    .gallery-cell:nth-child(5) {
        grid-column: auto;
        aspect-ratio: 353 / 395;
    }

    /* ---- cards de produto mais baixos ---- */
    .product-card .thumb-wrap {
        padding: 12px 8px 6px;
    }

    .product-card .thumb-wrap img {
        aspect-ratio: 4 / 3;
        object-fit: contain;
    }

    /* ---- conta: abas lado a lado, com rolagem se faltar espaço ---- */
    .account-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--s-4);
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--gap));
        padding-inline: var(--gap);
    }

    .account-nav::-webkit-scrollbar {
        display: none;
    }

    .account-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 12px;
    }


}

/* ===========================================================
   CARRINHO E CHECKOUT
   Duas colunas: o que você escolheu de um lado, o que vai pagar do outro. O
   resumo gruda enquanto a lista rola, porque é a informação que a pessoa
   confere a cada mudança.
   =========================================================== */
.cart-shell,
.checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

.cart-lines {
    display: grid;
    gap: var(--s-3);
}

.cart-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-3);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-3);
}

.cart-thumb {
    display: block;
    background: var(--gray-100);
    border-radius: var(--r-2);
    overflow: hidden;
}

.cart-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.cart-line-meta {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.cart-line-body h3 {
    font-family: var(--font-label);
    font-size: 15px;
    margin-bottom: 4px;
}

.cart-line-price {
    font-family: "launch-bold";
    font-size: 14px;
}

.cart-line-actions {
    display: grid;
    justify-items: end;
    gap: var(--s-2);
}

.qty-field {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--r-btn);
}

.qty-field button {
    width: 36px;
    height: 36px;
    background: none;
    border: 0;
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
}

.qty-field button:hover {
    background: var(--gray-100);
}

.qty-field span {
    min-width: 28px;
    text-align: center;
    font-family: var(--font-label);
    font-size: 14px;
}

.cart-remove {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--dur-1) var(--ease);
}

.cart-remove:hover {
    color: var(--red);
}

.cart-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    display: grid;
    gap: var(--s-4);
    padding: clamp(20px, 2.6vw, 32px);
    background: var(--gray-050);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-3);
}

.cart-aside h2 {
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.coupon-row {
    display: flex;
    align-items: stretch;
    gap: var(--s-2);
}

.coupon-row .input-field {
    flex: 1 1 auto;
    min-width: 0;
}

.coupon-row .bt-secondary {
    flex: 0 0 auto;
    /* o botão carrega min-width e height próprios: ao lado do campo ele
       precisa da altura do campo, não da dele */
    min-width: 0;
    height: auto;
    align-self: stretch;
    padding-inline: var(--s-4);
}

.cart-sum {
    display: grid;
    gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--gray-200);
}

.sum-row {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    font-size: 14px;
}

.sum-row--off strong {
    color: var(--red);
}

.sum-row--total {
    padding-top: var(--s-3);
    border-top: 1px solid var(--gray-200);
    font-family: "launch-bold";
    font-size: 17px;
}

/* ---------- checkout ---------- */
.checkout-form {
    display: grid;
    gap: var(--s-5);
    max-width: 620px;
}

.pay-methods {
    display: grid;
    gap: var(--s-2);
    border: 0;
    padding: 0;
    margin: 0;
}

.pay-methods legend {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--s-3);
}

/* o cartão inteiro é o alvo, não só o disquinho do rádio */
.pay-option {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 62px;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--gray-200);
    border-radius: var(--r-2);
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.pay-option:hover {
    border-color: var(--black);
}

.pay-option:has(input:checked) {
    border-color: var(--black);
    background: var(--gray-050);
}

.pay-option > span {
    display: grid;
    gap: 2px;
}

.pay-option strong {
    font-family: var(--font-label);
    font-size: 14px;
}

.pay-option span span {
    font-size: 12px;
    color: var(--text-muted);
}

.card-fields {
    display: grid;
    gap: var(--s-4);
}

.card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

.pix-panel {
    padding: var(--s-4);
    background: var(--gray-050);
    border: 1px dashed var(--gray-200);
    border-radius: var(--r-2);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
}

.checkout-note {
    font-size: 12px;
    color: var(--text-muted);
}

.checkout-items {
    display: grid;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--gray-200);
}

.checkout-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.checkout-item img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: var(--gray-100);
    border-radius: var(--r-2);
}

.checkout-item span {
    display: grid;
    gap: 2px;
    font-size: 13px;
}

.checkout-item strong {
    font-family: var(--font-label);
}

.checkout-item span span {
    color: var(--text-muted);
    font-size: 12px;
}

/* o número na sacola do cabeçalho */
.bt-cart {
    position: relative;
}

.cart-count,
.fav-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    border-radius: 999px;
    font-family: var(--font-label);
    font-size: 9px;
    color: var(--white);
}

.bt-add-cart {
    width: 100%;
    margin-top: var(--s-3);
}

@media (max-width: 900px) {
    .cart-shell,
    .checkout-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .cart-aside {
        position: static;
    }
}

@media (max-width: 560px) {
    /* o botão trazia largura mínima própria e sobrava um campo de 48px */
    .coupon-row {
        flex-wrap: wrap;
    }

    .coupon-row .input-field {
        flex: 1 1 100%;
    }

    .coupon-row .bt-secondary {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cart-line {
        grid-template-columns: 72px minmax(0, 1fr);
        row-gap: var(--s-3);
    }

    .cart-line-actions {
        grid-column: 1 / -1;
        grid-auto-flow: column;
        justify-content: space-between;
        align-items: center;
    }

    .card-row {
        grid-template-columns: 1fr;
    }
}


/* ---------- RODAPÉ EM TELA DE TOQUE (celular e tablet) ---------- */
@media (max-width: 900px) {
    /* ---- rodapé: voltar ao topo acima da logo, categorias em acordeão ---- */
    footer .to-top {
        position: static;
        display: flex;
        justify-content: center;
        padding-bottom: var(--s-5);
        margin-bottom: var(--s-5);
        border-bottom: 1px solid #1f1f1f;
    }

    .footer-top {
        justify-content: center;
    }

    /* a lista é flex: sem virar grade de uma coluna, cada acordeão ficava com
       a largura do próprio texto em vez da linha inteira */
    .info-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .category-footer[data-footer-acc] {
        border-bottom: 1px solid #1f1f1f;
    }

    .category-footer[data-footer-acc] .footer-cat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        margin: 0;
        cursor: pointer;
    }

    /* o mais vira menos quando a categoria abre */
    .category-footer[data-footer-acc] .footer-cat::after {
        content: "";
        width: 12px;
        height: 12px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / contain;
        transition: transform var(--dur-2) var(--ease);
    }

    .category-footer[data-footer-acc].is-open .footer-cat::after {
        transform: rotate(135deg);
    }

    /* o truque do 0fr só fecha a primeira linha da grade, e cada link é uma
       linha: com vários filhos os demais continuavam à vista. height: 0 fecha
       todos, e interpolate-size deixa a volta para auto ser animada. */
    .footer-cat-links {
        display: grid;
        height: 0;
        overflow: hidden;
        transition: height var(--dur-3) var(--ease-out);
    }

    .category-footer[data-footer-acc].is-open .footer-cat-links {
        height: auto;
    }

    .footer-cat-links {
        gap: 0;
    }

    .category-footer[data-footer-acc] .link-footer {
        padding-block: 2px;
    }
}