@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ink: #0a0a0a;
  --ink-soft: #4f4b47;
  --cream: #f7f4f0;
  --paper: #ffffff;
  --orange: #ff8847;
  --orange-deep: #e65d20;
  --orange-light: #ffd2b9;
  /* WhatsApp's own brand green, and deliberately not part of the palette above.
     It is used in exactly one place — the floating dock — because that button is
     recognised by its colour before it is read. Do not reach for it anywhere else,
     and do not "correct" it to --orange. */
  --whatsapp: #25d366;
  --sand: #eee8e2;
  --line: rgba(10, 10, 10, 0.14);
  --shadow: 0 28px 70px rgba(10, 10, 10, 0.13);
  --radius: 24px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 10px 16px; color: white; background: var(--ink); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 100; top: 0; left: 0; right: 0; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); transition: .25s ease; }
.site-header.is-scrolled { background: rgba(255,254,249,.9); border-color: var(--line); box-shadow: 0 8px 30px rgba(16,33,29,.06); backdrop-filter: blur(16px); }
.site-header .container { width: min(calc(100% - 160px),1500px); max-width: none; }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-logo { width: 82px; height: 64px; display: block; background-position: center; background-repeat: no-repeat; background-size: contain; }
.brand-logo-light { background-image: url('assets/logo-claro-transparente.png'); }
.brand-logo-dark { background-image: url('assets/logo-escuro-transparente.png'); }
.main-nav { display: flex; align-items: center; gap: 27px; font-size: 14px; font-weight: 600; }
.main-nav > a:not(.button) { position: relative; }
.main-nav > a:not(.button)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .2s ease; }
.main-nav > a:not(.button):hover::after { right: 0; }
.menu-toggle { display: none; border: 0; background: transparent; width: 44px; height: 44px; padding: 10px; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: var(--ink); transition: .2s ease; }

.button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); background: var(--orange); border: 1px solid var(--orange); border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.2; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(230,93,32,.25); }
.button-small { min-height: 42px; padding-inline: 18px; }
.button-ghost { background: transparent; border-color: rgba(255,255,255,.25); color: white; }
.button-ghost:hover { background: rgba(255,255,255,.08); box-shadow: none; }
.button-light { background: var(--paper); border-color: var(--paper); }
.button-outline-light { color: white; background: transparent; border-color: rgba(255,255,255,.42); }
.button-outline-light:hover { background: rgba(255,255,255,.08); box-shadow: none; }

/* Page hero template. Every page's hero uses .page-hero + .page-hero-grid +
   .page-hero-copy. Per-page knob: --hero-media sets the media column width. */
.page-hero { --hero-media: .45fr; position: relative; overflow: hidden; min-height: 0; padding: 104px 0 36px; color: white; background: var(--ink); }
.page-hero .container { width: min(calc(100% - 160px),1500px); max-width: none; }
.page-hero::before { content: ''; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.page-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,var(--hero-media)); gap: 24px; align-items: center; }
.page-hero-copy { max-width: none; container-type: inline-size; }
.hero-glow { display: none; }
.eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 10px; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow span { width: 27px; height: 1px; background: currentColor; }
.eyebrow.dark { color: var(--orange-deep); }
.eyebrow.light { color: var(--orange); }
h1, h2, h3 { font-family: 'Manrope', sans-serif; line-height: 1.05; letter-spacing: -.045em; }
h1 { max-width: 760px; margin: 0; font-size: clamp(46px, 5.1vw, 66px); }
.page-hero .eyebrow { margin-bottom: 26px; }
.page-hero h1 { max-width: none; margin: 0; font-size: clamp(28px,3.9cqi,44px); }
.page-hero-copy > p:not(.eyebrow) { max-width: 690px; margin: 30px 0 34px; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-visual { position: relative; height: 360px; display: grid; place-items: center; }
.hero-visual::before { content: ''; position: absolute; width: min(82%,520px); aspect-ratio: 1; background: radial-gradient(circle, rgba(255,136,71,.13), transparent 67%); filter: blur(18px); }
.hero-brandmark { position: relative; width: min(96%,340px); height: auto; display: block; filter: drop-shadow(0 24px 50px rgba(0,0,0,.34)); }

/* Strip template. The divided band that sits directly under a page hero:
   .page-strip + .page-strip-grid, three cells of <marker> + <p><strong><small>. */
.page-strip { position: relative; z-index: 5; margin-top: -1px; color: white; background: #171717; border-top: 1px solid rgba(255,255,255,.08); }
.page-strip .container { width: min(calc(100% - 160px),1500px); max-width: none; }
.page-strip-grid { min-height: 92px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.page-strip-grid > div { min-height: 58px; padding: 0 35px; display: flex; align-items: center; gap: 16px; border-right: 1px solid rgba(255,255,255,.12); }
.page-strip-grid > div:first-child { padding-left: 0; }
.page-strip-grid > div:nth-child(2) { justify-content: center; }
.page-strip-grid > div:last-child { border: 0; padding-right: 0; justify-content: flex-end; }
.page-strip-grid p { margin: 0; display: flex; flex-direction: column; }
.page-strip-grid strong { font-size: 14px; }
.page-strip-grid small { color: rgba(255,255,255,.6); font-size: 12px; }
.trust-icon { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; color: var(--ink); background: var(--orange); border-radius: 50%; font-weight: 800; }

/* The page rhythm, and it is the home page's — 82px off whatever is above,
   96px before whatever is below. It used to be a symmetric 112 here with the
   82/96 stated only on `.segments`, so the home page ran to one measure and the
   six segment pages to another, and the difference showed at every section
   break. The asymmetry is deliberate: a section sits closer to the strip or the
   section that introduces it than to the one it hands off to. `.about` and
   `.contact` state their own values below and are the two exceptions on the
   home page, so both had to become explicit for this to be the default. */
.section { padding: 82px 0 96px; }
.segments { background: var(--cream); }
.section-heading { margin-bottom: 50px; }
.section-heading .eyebrow { margin-bottom: 25px; }
.section-heading h2 { max-width: 1160px; margin: 0; font-size: clamp(28px, 2.3vw, 32px); line-height: 1.16; letter-spacing: -.05em; }
.segments-explorer { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.segment-tabs { padding: 10px; display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; }
.segment-tab { width: 100%; min-height: 82px; padding: 14px 15px; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; color: var(--ink); text-align: left; background: transparent; border: 0; border-radius: 16px; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.segment-tab:hover { background: #f4efea; }
.segment-tab.is-active { color: white; background: var(--ink); }
.segment-tab-icon { width: 23px; height: 23px; color: var(--orange-deep); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.segment-tab.is-active .segment-tab-icon { color: var(--orange); transform: scale(1.05); }
.segment-tab > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.segment-tab strong { font: 700 17px 'Manrope'; letter-spacing: -.02em; }
.segment-tab small { margin-top: 3px; overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.segment-tab.is-active small { color: rgba(255,255,255,.52); }
.segment-tab b { color: var(--orange); font-size: 17px; font-weight: 500; transition: transform .2s ease; }
.segment-tab.is-active b { transform: translateX(3px); }
.segment-stage { min-width: 0; }
.segment-panel { min-height: 548px; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; color: white; background: var(--ink); border-radius: 26px; box-shadow: var(--shadow); animation: segment-panel-in .32s ease both; }
.segment-panel[hidden] { display: none; }
.segment-panel-image { position: relative; min-height: 548px; overflow: hidden; }
.segment-panel-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, rgba(10,10,10,.24)), linear-gradient(0deg, rgba(10,10,10,.22), transparent 42%); pointer-events: none; }
.segment-panel-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
#panel-automotivo .segment-panel-image img { object-position: 62% center; }
.segment-panel-content { min-width: 0; padding: 42px 38px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.segment-panel-kicker { margin: 0 0 17px !important; color: var(--orange) !important; font-size: 10px !important; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.segment-panel h3 { margin: 0 0 18px; font-size: clamp(35px, 4vw, 51px); }
.segment-panel-content > p:not(.segment-panel-kicker) { margin: 0; color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.65; }
.segment-tags { margin: 25px 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.segment-tags li { padding: 7px 10px; color: rgba(255,255,255,.74); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; font-size: 10px; font-weight: 600; }
.segment-panel-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.segment-panel-actions .button { min-height: 46px; }
@keyframes segment-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.about { padding: 78px 0; color: white; background: var(--ink); }
.about-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 74px; align-items: center; }
.about-copy { position: sticky; top: 112px; align-self: start; padding-top: 8px; }
.about-copy h2 { max-width: 500px; margin: 0 0 28px; font-size: clamp(40px, 4.2vw, 58px); }
.about-copy > p:not(.eyebrow) { max-width: 500px; color: rgba(255,255,255,.68); font-size: 17px; }
.advantage-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.advantage-card { position: relative; isolation: isolate; min-height: 225px; overflow: hidden; padding: 22px 24px 21px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.advantage-card::before { content: ''; position: absolute; z-index: -1; width: 190px; height: 190px; left: -100px; bottom: -125px; background: radial-gradient(circle, rgba(255,136,71,.08), transparent 68%); }
.advantage-card:hover { transform: translateY(-4px); border-color: rgba(255,136,71,.48); box-shadow: 0 18px 38px rgba(0,0,0,.25); }
.advantage-top { min-height: 42px; display: flex; align-items: flex-start; justify-content: flex-end; }
.advantage-card svg { width: 39px; height: 39px; fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.advantage-card h3 { max-width: 260px; margin: 12px 0 8px; font-size: 21px; letter-spacing: -.035em; }
.advantage-card p { margin: 0 0 15px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.5; }
.advantage-proof { width: fit-content; margin-top: auto; padding: 6px 9px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.advantage-card-service { background: linear-gradient(145deg, #1d1917, #111 68%); }
.advantage-card-stock { background: linear-gradient(145deg, #191817, #101010); }
.advantage-card-freedom { background: linear-gradient(145deg, #1b1918, #111); }
.advantage-card-conditions { background: linear-gradient(145deg, #211711, #111 72%); }
.text-link { margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; color: var(--orange); font-weight: 700; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

/* Wider than the 82/96 default, and stated rather than inherited. The panel is
   a full-bleed orange block, so it needs more air around it than a section of
   type does; and it is the last thing before the footer on every page, which is
   the one break where the extra room reads as a close. It has to come after
   `.section` — same specificity, source order is what decides. */
.contact { padding: 112px 0; background: var(--paper); }
.contact-panel { position: relative; overflow: hidden; padding: 66px 70px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center; color: white; background: var(--orange-deep); border-radius: 32px; }
.contact-panel::after { content: ''; position: absolute; width: 370px; height: 370px; right: -180px; top: -190px; border: 65px solid rgba(255,255,255,.08); border-radius: 50%; }
.contact-panel > * { position: relative; z-index: 2; }
.contact-panel h2 { margin: 0 0 18px; font-size: clamp(35px, 4vw, 53px); }
.contact-panel p:not(.eyebrow) { max-width: 650px; margin: 0; color: rgba(255,255,255,.75); }
.contact-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }

.site-footer { padding: 75px 0 25px; color: white; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 55px; }
.footer-grid > div:first-child p { max-width: 260px; color: rgba(255,255,255,.53); font-size: 13px; }
.footer-grid h3 { margin: 8px 0 17px; color: rgba(255,255,255,.45); font: 700 11px 'DM Sans'; letter-spacing: .13em; text-transform: uppercase; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 9px; }
.footer-grid a, .footer-grid span { color: rgba(255,255,255,.72); font-size: 13px; }
.footer-address { max-width: 230px; line-height: 1.55; }
.footer-grid a:hover { color: var(--orange); }
.footer-bottom { margin-top: 60px; padding-top: 22px; display: flex; justify-content: space-between; color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; }

.contact-dock { position: fixed; z-index: 90; right: 24px; bottom: 24px; display: flex; align-items: center; color: var(--ink); border-radius: 999px; filter: drop-shadow(0 14px 24px rgba(10,10,10,.24)); transition: opacity .25s ease, transform .25s ease, filter .25s ease; }
.contact-dock:hover { transform: translateY(-3px); filter: drop-shadow(0 18px 30px rgba(10,10,10,.3)); }
.contact-dock.is-hidden { opacity: 0; pointer-events: none; transform: translateY(18px); }
.contact-dock-prompt { display: none; }
/* The one element on the site that is not in the site's colours. It floats over
   every page and is recognised before it is read, so it wears WhatsApp's green:
   in orange it was one more brand-coloured pill among several, and said nothing
   about where the tap goes. The header's "Falar com a CJ" button is the same
   destination and stays orange on purpose — inside the page it is a call to
   action in the site's voice, not a platform badge.
   The label and the mark are ink, not white. WhatsApp's own pairing is white on
   this green, but that is ~2:1 and the 14px label swam in it; ink is ~10:1 and
   reads at a glance, which is the entire job of a button in the corner of the
   screen. So the green carries the recognition and the contrast does the reading.
   White outlined in ink was built and shipped as the middle way, then reverted
   as simply less legible — worth knowing before rebuilding it. It does work, but
   only via `paint-order: stroke fill`: a bare -webkit-text-stroke centres the
   stroke on the glyph edge, so half of it lands inside the letter and at 14px
   closes the counters. It also needs an eight-offset text-shadow fallback, since
   an outline that carries the contrast must not be the part that fails to load.
   That is three rules and a @supports block to end up harder to read than one
   colour keyword.
   The `color` is stated here rather than on .contact-dock so the mobile bar's own
   `color: white` on the parent, which the prompt beside the pill needs, is left
   alone. */
.contact-dock-action { min-height: 58px; padding: 8px 24px 8px 12px; display: flex; align-items: center; gap: 11px; color: var(--ink); background: var(--whatsapp); border: 1px solid rgba(10,10,10,.14); border-radius: 999px; }
/* No filter here: assets/whatsapp-cj.png is already a solid black glyph on
   transparency, so it matches the ink label as shipped. It briefly carried
   `brightness(0) invert(1)` to repaint it white — that is the recipe if a white
   mark is ever wanted again, and it works because brightness(0) flattens every
   pixel to black without touching the alpha before invert takes it to white. */
.contact-dock-action img { width: 39px; height: 39px; display: block; object-fit: contain; }
.contact-dock-action strong { font: 700 14px 'Manrope'; letter-spacing: -.02em; white-space: nowrap; }
.dock-label-mobile { display: none; }

/* Segment pages */
.laundry-hero { --hero-media: .75fr; }
.packaging-hero { --hero-media: .75fr; --hero-photo-position: 50% center; }
.pet-hero { --hero-media: .75fr; --hero-photo-position: 55% center; }
/* The air fryer and the borrifador sit right of centre in this frame; 68% keeps
   both inside the crop at every width instead of letting the sofa take over. */
.limpeza-hero { --hero-media: .75fr; --hero-photo-position: 68% center; }
.automotive-hero { --hero-media: .75fr; }
/* The strip's last cell is normally flush right so no dead space collects at
   the end of the row. That holds only while the three texts are comparable in
   length; this page's third one is roughly half the others, so flush right
   pushes the whole hole in behind the second divider instead. Centring splits
   it evenly and the row reads as three even cells again. */
.packaging-page .page-strip-grid > div:last-child { justify-content: center; }
.breadcrumb { margin-bottom: 27px; display: flex; flex-wrap: wrap; gap: 9px; color: rgba(255,255,255,.45); font-size: 12px; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb strong { color: rgba(255,255,255,.75); font-weight: 600; }
/* Hero photo treatment, shared by every segment page: the photo dissolves into
   the dark hero on its left edge so no hard rectangle cuts across the copy.
   Per-page knob: --hero-photo-position picks the part of the frame to keep. */
.hero-photo { position: relative; min-height: 360px; overflow: visible; opacity: .78; }
.hero-photo::before { content: ''; position: absolute; inset: 12% 8%; background: radial-gradient(circle, rgba(255,136,71,.13), transparent 66%); filter: blur(22px); pointer-events: none; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.6), transparent 26%), linear-gradient(0deg, rgba(10,10,10,.48), transparent 35%); pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 94%); mask-image: radial-gradient(ellipse at center, #000 48%, transparent 94%); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--hero-photo-position, 65% center); transform: scale(1.03); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.58) 13%, #000 34%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.58) 13%, #000 34%, #000 100%); }
.laundry-image-caption { display: none; }
.laundry-image-caption span { color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.laundry-image-caption strong { margin-top: 4px; color: white; font: 700 20px 'Manrope'; letter-spacing: -.03em; }
.benefit-icon { width: 30px; height: 30px; flex: 0 0 auto; color: var(--orange); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.benefit-icon .icon-fill { fill: currentColor; stroke: none; }
.laundry-products, .packaging-products, .pet-products, .limpeza-products, .automotive-products { background: var(--cream); }
/* Six columns of 1fr, each card spanning 2 — three per row, with half-column
   steps available so a short last row can be centred instead of left-aligned. */
.product-catalog-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.catalog-product { min-height: 278px; grid-column: span 2; display: grid; grid-template-columns: .82fr 1.18fr; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 19px; transition: transform .25s ease, box-shadow .25s ease; }
/* Last row of two (5 products): shift it in by one column. */
.catalog-product:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
/* Last row of one (4 products): centre it rather than leave it hanging left. */
.catalog-product:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
.catalog-product:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.catalog-product-image { min-height: 100%; padding: 0; display: grid; place-items: center; overflow: hidden; background: #fff; border-right: 1px solid #eee9e4; }
.catalog-product-image picture { display: block; width: 100%; height: 100%; }
.catalog-product-image img { width: 100%; height: 100%; max-height: none; padding: 10px 6px; display: block; object-fit: contain; object-position: center; filter: none; transform: none; cursor: zoom-in; transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .catalog-product:hover .catalog-product-image img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-product-image img, .image-viewer, .image-viewer-image { transition: none; }
}
.image-viewer[hidden] { display: none; }
.image-viewer { position: fixed; z-index: 1200; inset: 0; padding: 36px; display: grid; place-items: center; background: rgba(10,10,10,.82); backdrop-filter: blur(12px); opacity: 0; transition: opacity .22s ease; }
.image-viewer.is-open { opacity: 1; }
.image-viewer-image { width: auto; height: auto; max-width: min(88vw, 760px); max-height: 88vh; display: block; object-fit: contain; background: white; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.48); transform: scale(.94); transition: transform .25s ease; }
.image-viewer.is-open .image-viewer-image { transform: scale(1); }
.image-viewer-close { position: fixed; top: 22px; right: 22px; width: 44px; height: 44px; display: grid; place-items: center; color: white; background: rgba(10,10,10,.74); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font: 400 29px/1 Arial, sans-serif; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.image-viewer-close:hover, .image-viewer-close:focus-visible { color: var(--ink); background: var(--orange); transform: scale(1.06); }
body.image-viewer-open { overflow: hidden; }
.product-carousel { position: relative; isolation: isolate; }
.product-carousel-slide { position: absolute; inset: 0; margin: 0; }
.product-carousel-slide[hidden] { display: none; }
.product-carousel-slide img { position: absolute; inset: 0; }
.product-carousel-slide figcaption { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 7px; color: white; background: rgba(10,10,10,.78); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: 7px; font-weight: 700; letter-spacing: .04em; }
.product-carousel-control { position: absolute; z-index: 3; top: 50%; width: 25px; height: 25px; padding: 0 0 2px; display: grid; place-items: center; color: white; background: rgba(10,10,10,.76); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font: 500 20px/1 Arial, sans-serif; cursor: pointer; transform: translateY(-50%); transition: color .2s ease, background .2s ease, transform .2s ease; }
.product-carousel-control:hover, .product-carousel-control:focus-visible { color: var(--ink); background: var(--orange); outline: none; transform: translateY(-50%) scale(1.08); }
.product-carousel-prev { left: 7px; }
.product-carousel-next { right: 7px; }
.product-carousel-dots { position: absolute; z-index: 3; right: 0; bottom: 10px; left: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.product-carousel-dots button { width: 6px; height: 6px; padding: 0; background: rgba(10,10,10,.35); border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; transition: width .2s ease, background .2s ease; }
.product-carousel-dots button.is-active { width: 16px; background: var(--orange); border-radius: 999px; }
.catalog-product-content { min-width: 0; padding: 22px 17px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
/* .product-brand rides in .product-type's slot and shares its treatment: same
   size, weight, tracking and orange. It is a separate class because it is a
   different fact — the four older catalogs say what a product *is* under the
   name, automotivo says who *makes* it — and a selector named for the wrong one
   is what makes the next edit go in the wrong place. */
.product-type, .product-brand { order: 2; margin: 0 0 11px !important; color: var(--orange-deep) !important; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.catalog-product h3 { order: 1; margin: 0 0 7px; font-size: 25px; letter-spacing: -.045em; }
.catalog-product-content > p:not(.product-type):not(.product-brand) { order: 3; margin: 0; color: #2f2b28; font-size: 12px; line-height: 1.52; }

/* ── Catálogo por categoria — automotivo ──────────────────────────────────────
   Eleven categories and 109 products, so this page shows one category at a time
   rather than one grid thirty-odd rows deep. The pills carry data-segment-tab
   and the panels data-segment-panel — the same hooks the home page's segment
   explorer uses — so script.js already handles is-active, aria-selected, roving
   tabindex and the arrow keys, and this page added no JS at all. Only the skin
   is new: .segment-tab is a tall card in a vertical rail, this is a pill in a
   wrapping row, and the geometry is .floor-layout's retinted for a light
   surface.

   Eleven pills measure ~1420px against the 1180px container, so the row wraps to
   a second line on desktop. That is wanted, not tolerated: keeping every
   category readable at once is the whole reason these are tabs and not a
   <select>. .floor-layouts wraps the same way. */
.catalog-filters { margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 9px; }
.catalog-filter { min-height: 42px; padding: 0 20px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.catalog-filter:hover { color: var(--ink); border-color: rgba(10,10,10,.34); }
/* .is-active, not [aria-pressed] as the floor composer's buttons use: these are
   role="tab", so activateSegment writes aria-selected and toggles this class. */
.catalog-filter.is-active { color: white; background: var(--ink); border-color: var(--ink); }
/* Keep this even though .catalog-panel sets no display of its own today. Any
   display added to that class later would outrank the UA sheet's [hidden] rule
   and quietly render all eleven categories at once — .segment-panel[hidden]
   exists for exactly that reason. It is also what the page's <noscript> block
   overrides to unhide everything. */
.catalog-panel[hidden] { display: none; }
/* The same animation the home page's segment panels use, and unconditional for
   the same reason: it restarts whenever display goes from none back to block,
   which is precisely when a tab is switched. A .reveal here would never fire —
   a hidden panel has no layout box for the observer to intersect. */
.catalog-panel { animation: segment-panel-in .32s ease both; }
.catalog-panel-note { max-width: 640px; margin: 0 0 22px; color: var(--ink-soft); font-size: 14px; }
/* Shorter than the 278px the other four catalogs use, and scoped so they keep
   it. Those cards carry a description paragraph; these carry a name and a brand,
   and at 278px the extra height is empty white. The h3 comes down with it:
   automotive names run to 44 characters against embalagens' 26, so 25px would
   wrap most of them past three lines in a ~190px column. */
.automotive-products .catalog-product { min-height: 202px; }
.automotive-products .catalog-product h3 { font-size: 17px; line-height: 1.22; letter-spacing: -.03em; }
.automotive-products .catalog-product-content { padding: 18px 15px; }
/* A product whose photo has not been shot yet. The card is still worth showing —
   the name, the brand and the category are the information most visitors are
   after — so the image cell holds its space and says why it is empty rather than
   collapsing the grid or serving a broken <img>. */
.catalog-product-image.is-awaiting { padding: 12px; background: repeating-linear-gradient(135deg, #fbf9f7 0 9px, #f4f0ec 9px 18px); }
.catalog-product-image.is-awaiting span { color: #a9a19a; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.laundry-variants { background: white; }
.variants-heading { margin-bottom: 40px; display: grid; grid-template-columns: 1fr .7fr; gap: 70px; align-items: end; }
.variants-heading h2 { margin: 0; font-size: clamp(38px,4vw,55px); }
.variants-heading > p { max-width: 430px; margin: 0 0 6px; color: var(--ink-soft); }
.variant-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.variant-card { overflow: hidden; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; }
.variant-card img { width: 100%; aspect-ratio: 1/1; padding: 24px; display: block; object-fit: contain; background: radial-gradient(circle at 50% 45%, #fff 0 12%, #f5eee8 62%, #ece3dc 100%); filter: drop-shadow(0 15px 13px rgba(10,10,10,.12)); }
.variant-card img.variant-card-photo { padding: 0; object-fit: cover; filter: none; }
.variant-card div { padding: 19px; }
.variant-card h3 { margin: 0 0 4px; font-size: 18px; }
/* The line under a variant title is a category chip, not a sentence: the card's photo
   already shows the colours, so a description of them added nothing, and one word set
   in a bordered chip is scannable across six cards in a way six sentences are not.
   It is .advantage-proof inverted — same size, weight, tracking and caps, but tinted
   for the cream card rather than the dark one. */
.variant-card-tag { display: inline-block; margin-top: 9px; padding: 5px 9px; color: var(--ink-soft); background: rgba(10,10,10,.04); border: 1px solid var(--line); border-radius: 7px; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* Piso modular — the floor composer.
   ------------------------------------------------------------------------
   One product in nine colours, so this page has no product cards. Instead the
   visitor builds a floor: three colour roles fed in as custom properties, and
   a layout class that decides which cells use which role.

   The division of labour is the point. CSS owns the pattern — every rule below
   is a plain nth-child selector — and JS only ever sets --tile-a/b/c and swaps
   the layout class. Both defaults ship inline on the markup, so with JS off the
   page still renders a complete floor and the swatches still work as the colour
   chart. Renaming any class here cannot break the JS either; it reads only the
   data-* hooks (data-floor-composer, -preview, -swatch, -layout, -summary, -cta). */
.piso-hero { --hero-media: .75fr; --hero-photo-position: 50% center; }

/* Shorten the shared hero mask on this page only. .hero-photo img fades its left 34% to
   transparent so a photographed frame dissolves into the dark hero instead of butting
   against the copy as a hard rectangle -- but this hero is not a photographed frame. It
   is an authored image carrying the CJ mark on the wall at 11-31% of its width, which is
   exactly the span that fade eats, so the default dissolved the logo.

   Shortening it is safe *here* and would not be on the other pages: this image's left
   edge is already a dark wall at luma ~55, so it blends into the hero on its own content
   rather than needing 34% of the frame spent on it. Everything past 10% is left opaque. */
.piso-hero .hero-photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 4%, #000 10%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 4%, #000 10%, #000 100%); }
.piso-composer, .piso-install { color: white; background: var(--ink); }
.piso-composer .section-heading > p:not(.eyebrow),
.piso-install .section-heading > p:not(.eyebrow) { max-width: 720px; margin: 14px 0 0; color: rgba(255,255,255,.6); font-size: 15px; }
.piso-spaces { background: var(--cream); }
/* Six real installs, so three across reads better than the four .variant-grid
   defaults to — two full rows instead of a row of four and an orphan pair. */
.piso-spaces .variant-grid { grid-template-columns: repeat(3,1fr); }
/* Stacked is the base; the composer goes side by side from 1220px up. See the
   min-width block at the end of this section for why that number and not 980. */
.floor-composer { display: grid; gap: 22px; }
.floor-figure { margin: 0; }

/* A top view, the way you would sketch the job on squared paper.

   This was a room in perspective — `rotateX(50deg)` over a perspective distance,
   with a falloff gradient for depth — and the 3D cost more than it bought. The
   far rows compressed to a few pixels each, so half the grid was unreadable; the
   tiles' diagonal ribs moiréd against the skew; and the falloff meant an accent
   colour rendered darker at the back than at the front, which makes the one thing
   a visitor came here to judge the least trustworthy part of the picture. The
   tile photographs are already shot square-on, so laid flat they *are* the
   product, at one scale and one brightness across the whole floor.

   Nothing here sets a height, and that is the point. `.floor-row i` is
   `aspect-ratio: 1` inside a flex row, so ten columns of 1/10 the width give a
   floor exactly 8/10 as tall as it is wide at any stage width. No aspect-ratio,
   no min-height and no perspective distance left to keep in sync per breakpoint —
   the whole per-viewport tuning the 3D version needed is gone.

   The cap is the only knob, and it goes on the board rather than on the floor
   inside it — cap the floor alone and the dark frame still stretches the full
   container with the grid marooned in the middle of it. Uncapped, a stacked
   desktop floor would run 1134px wide and 907 tall; at 746 it reads as a plan
   drawn on a board. From 1220px up the column is narrower than the cap, so
   there the floor simply fills it. */
.floor-stage { max-inline-size: 746px; margin-inline: auto; padding: 12px; background: #0e0e10; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; }
/* The 1px gaps are the joint lines, not decoration: these tiles clip together and
   a real floor shows the seam. Without them a chequer of two dark colours merges
   into one field and the visitor cannot count the placas — which is half of what
   the preview is for, since the quote is by the metre. */
.floor { display: flex; flex-direction: column; gap: 1px; background: #050506; border-radius: 12px; overflow: hidden; }
.floor-row { display: flex; gap: 1px; }
.floor-row i { flex: 1 1 0; aspect-ratio: 1; background-image: var(--tile-a); background-size: 100% 100%; }
/* Two of the three layouts sit on a chequer field, so state it once as the
   exception rather than repeating it per layout.

   Both :where()s are load-bearing, not tidiness. The accent rule below has to
   win on the cells it covers, and it is a shorter selector than this one —
   without :where() the chequer scored (0,5,1) against its (0,4,1) and painted
   every second cell of the moldura border back to the base colour, so the frame
   came out dashed instead of solid. :where() contributes nothing to specificity,
   which drops this to (0,3,1) and puts the cascade in the same order as the
   intent: base colour, then chequer, then accent. */
.floor:where(:not(.layout-liso)) .floor-row:where(:nth-child(odd)) i:nth-child(even),
.floor:where(:not(.layout-liso)) .floor-row:where(:nth-child(even)) i:nth-child(odd) { background-image: var(--tile-b); }
/* Moldura: the accent runs round all four edges. */
.floor.layout-moldura .floor-row:first-child i,
.floor.layout-moldura .floor-row:last-child i,
.floor.layout-moldura .floor-row i:first-child,
.floor.layout-moldura .floor-row i:last-child { background-image: var(--tile-c); }
/* The tiles were shot flat against a wall, so each one carries the same faint
   lit corner. Repeated 80 times that reads as a printed pattern; rotating in a
   four-step cycle turns it into a weave, which is also what the real floor does
   because the ribs run diagonally. */
.floor-row i:nth-child(even) { transform: rotate(180deg); }
.floor-row:nth-child(even) i:nth-child(odd) { transform: rotate(90deg); }
.floor-row:nth-child(even) i:nth-child(even) { transform: rotate(270deg); }
/* No rule for the figcaption on purpose: it is .sr-only in the markup. It is the
   accessible description of the floor — the grid is 80 empty aria-hidden
   elements, so that aria-live caption is the only place a change is announced —
   but on screen it said a second time what the recap in the send band already
   shows, and it was also the one thing making the figure taller than the board.
   Hiding it rather than deleting it keeps the announcement and lets the two
   upper boxes match. */

.floor-controls { display: grid; gap: 20px; padding: 24px 26px 26px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
/* min-inline-size is the fieldset trap, not a reset for neatness. The UA sheet
   gives every fieldset `min-inline-size: min-content`, and the swatch row's
   min-content is the sum of its nine fixed columns — 810px. That floor propagated
   up through both grids and laid the whole composer, stage included, out 810px
   wide, hanging off the right of every phone. Overriding it is what lets the row
   scroll instead of the page. */
.floor-control { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.floor-control legend { padding: 0; margin-bottom: 12px; color: rgba(255,255,255,.48); font: 700 11px 'DM Sans'; letter-spacing: .13em; text-transform: uppercase; }
/* A colour role the current pattern does not paint with. Dimmed, not disabled:
   the choice is remembered and appears the moment the pattern changes. */
.floor-control { transition: opacity .25s ease; }
.floor-control.is-muted { opacity: .38; }
.floor-layouts { display: flex; flex-wrap: wrap; gap: 9px; }
.floor-layout { min-height: 42px; padding: 0 20px; color: rgba(255,255,255,.72); background: transparent; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.floor-swatches { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 9px; }
.floor-swatch { padding: 7px 6px 8px; display: grid; gap: 7px; justify-items: center; color: rgba(255,255,255,.6); background: transparent; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.floor-swatch > span:first-child { width: 100%; max-width: 104px; aspect-ratio: 1; background-size: 100% 100%; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.floor-layout:hover, .floor-swatch:hover { color: white; border-color: rgba(255,255,255,.34); }
.floor-swatch:hover { transform: translateY(-2px); }
.floor-layout[aria-pressed="true"], .floor-swatch[aria-pressed="true"] { color: var(--ink); background: var(--orange); border-color: var(--orange); }
/* The send band is its own box under both columns, not a footer inside the
   controls. Inside the controls it made the right-hand box taller than the
   floor beside it, which reads as the two halves being out of step; pulled out,
   it also gets the whole container width to sit the recap, the sentence and the
   button on one line. Same surface as .floor-controls so the three boxes are
   one family. */
.floor-send { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 20px 26px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
/* The note is two authored lines — the question, then the instruction — so the
   break is a block span rather than a <br>: it is a layout decision and it stays
   in the stylesheet where a breakpoint could relax it. Left-aligned even where
   the band centres its other children, so the two lines rag against each other
   rather than around a centre axis. */
.floor-send-note { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; text-align: left; }
.floor-send-note span { display: block; }
/* The receipt for the WhatsApp link: what is about to be sent, in one line,
   so the visitor confirms it without scrolling back through three palettes.
   The chips are var(--tile-*) like the floor itself, so JS writes the names
   and nothing else — and the two optional roles reuse the composer's own
   is-muted pass through data-floor-control. */
.floor-recap, .floor-size { display: grid; gap: 10px; justify-items: center; }
.floor-recap-title, .floor-size-title { margin: 0; color: rgba(255,255,255,.48); font: 700 11px 'DM Sans'; letter-spacing: .13em; text-transform: uppercase; }
.floor-recap-items { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
/* All four the same width, which matters in the 700–1220 band where this row
   is the only one that can wrap: the labels are different lengths, and at their
   natural widths a wrapped line sits under nothing in particular. */
.floor-recap-item { min-inline-size: 130px; display: flex; align-items: center; gap: 9px; transition: opacity .25s ease; }
.floor-recap-item.is-muted { opacity: .38; }
.floor-recap-chip { width: 27px; height: 27px; background-size: 100% 100%; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.floor-recap-chip.tile-a { background-image: var(--tile-a); }
.floor-recap-chip.tile-b { background-image: var(--tile-b); }
.floor-recap-chip.tile-c { background-image: var(--tile-c); }
.floor-recap-icon { width: 27px; height: 27px; color: var(--orange); fill: currentColor; }
.floor-recap-text { display: grid; gap: 1px; text-align: left; }
.floor-recap-text small, .floor-size-field > span { color: rgba(255,255,255,.42); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.floor-recap-text b { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 700; }
/* The placa count under a colour name. Orange because it is the answer the
   visitor came for; the colour name stays the item's headline at 13px. Needs
   the two-class selector to outscore `.floor-recap-text small` above, which
   would otherwise render it as another 10px uppercase label. */
.floor-recap-text .floor-recap-count { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
/* The `[hidden]` trap, the same one `.segment-panel[hidden]` exists for: the
   `display: flex` above is an author rule and outranks the UA sheet's
   `[hidden]`, so the total item would ship visible and empty without this. The
   count `<small>`s need no equivalent — nothing sets `display` on them. */
.floor-recap-item[hidden] { display: none; }

/* The measurement fields — the only inputs in the site, so there is no form
   vocabulary to inherit. Built from `.floor-swatch`'s instead (transparent
   fill, the same hairline border, the same hover lift in colour only) so they
   read as another composer control rather than a form dropped into one. */
.floor-size-fields { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 10px; min-inline-size: 0; }
.floor-size-field { display: grid; gap: 6px; justify-items: start; min-inline-size: 0; }
/* 16px is not a type choice: iOS Safari zooms the whole page in on focusing
   any input under 16px, and the composer is the last thing that should jump
   when a visitor taps a field in it. */
.floor-size-field input { width: 96px; min-height: 42px; padding: 0 12px; color: white; background: transparent; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; font-family: inherit; font-size: 16px; font-weight: 700; transition: border-color .2s ease; }
.floor-size-field input::placeholder { color: rgba(255,255,255,.26); font-weight: 600; }
.floor-size-field input:hover { border-color: rgba(255,255,255,.34); }
/* :focus, not :focus-visible — a text field shows focus however it was reached. */
.floor-size-field input:focus { outline: 2px solid var(--orange); outline-offset: 2px; border-color: var(--orange); }
/* Aligned to the bottom of the row and given the input's own height, so the
   glyphs centre against the fields rather than against the labels above them. */
.floor-size-x, .floor-size-unit { align-self: end; color: rgba(255,255,255,.42); font-size: 14px; font-weight: 700; line-height: 42px; }
/* Capped, because from 1220px up this group is an `auto` column and the hint is
   its widest child: uncapped, one sentence of it claimed 600px of a 1128px band
   and pushed the recap it explains into a two-line huddle on the right. */
.floor-size-hint { margin: 0; max-inline-size: 32ch; color: rgba(255,255,255,.42); font-size: 12px; }

/* Two actions, and the second is deliberately not a .button: one visitor in
   however many wants a desenho we do not draw, and giving that the same weight
   as "enviar" would suggest the three we do draw are the compromise. */
.floor-send-actions { display: grid; gap: 12px; justify-items: center; }
.floor-send-custom { color: rgba(255,255,255,.6); font-size: 13px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.floor-send-custom:hover { color: white; text-decoration: underline; }

/* Side by side: floor left, every control right.
   ------------------------------------------------------------------------
   Stacked, this section ran ~1300px tall on a 1280x800 screen — the stage took
   a third of it and the three swatch rows another 500px, so `Cor secundária`
   and `Destaque` sat below the fold with nothing on screen to say they existed.
   Side by side it is ~630px and the floor, all three colour roles and the CTA
   are visible together, which is the point of a composer.

   1220px, not the 980px the rest of the page breaks at, because that is where
   the container stops growing and parks at 1180. Every number below is derived
   from that: the column is exactly 577, so the floor is 551 wide — 10 tiles of
   55px — and each swatch column exactly 71. Below 1220 those shrink with the
   viewport and the names start overflowing into their neighbours, so under it
   the page keeps the stacked layout, which works at every width. */
@media (min-width: 1220px) {
  .floor-composer { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 26px; }
  /* The floor sizes itself from its width, so the figure is the shorter of the
     two. Stretch the board to the row height and centre the grid inside it, so
     neither box is ever taller than the other — the difference lands as dark
     margin around the floor, which is the one place it costs nothing. One row,
     not two: the figcaption is .sr-only and therefore out of flow, so the board
     is the figure's only in-flow child and gets the whole height. It is what
     the second row used to take that made this box end short of the controls. */
  .floor-figure { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 1fr; }
  /* Two things here are load-bearing, and both are about the board being a grid
     item now rather than a block. `margin-inline: auto` centres the board at
     narrower widths, but an auto margin cancels stretch alignment, so the item
     sizes to its own content instead — and the floor's cells are flex-basis 0,
     so that content measures 35px. The column here is already under the 746px
     cap, so the centring has nothing to do and the margin comes off. Then flex
     with justify-content, not the block flow it had, to hold the floor in the
     middle of a board stretched to the height of the controls beside it. */
  .floor-stage { margin-inline: 0; display: flex; flex-direction: column; justify-content: center; }
  /* align-content so the groups keep their own rhythm rather than being spread
     down a column stretched to match the stage beside them. */
  .floor-controls { align-content: start; gap: 18px; padding: 22px; }
  /* The chip is square and 1/7 of the column, so the column width sets the row
     height: ~59px here against ~155px at full container width, which is where
     the 500px went. The name stays under every chip — the swatches are also the
     colour chart, which is why this page needs no separate "our colours"
     section. At seven colours the column is wide enough to keep the 11px type;
     it took 10px back when there were nine. */
  .floor-swatches { gap: 6px; }
  .floor-swatch { padding: 6px 5px 7px; gap: 6px; border-radius: 11px; }
  .floor-swatch > span:first-child { border-radius: 7px; }
  /* Full width under both columns, and two rows rather than the one it had
     before the measurements arrived: input on the left spanning both rows, the
     receipt it feeds across the top right, then the note and the two actions
     under it. Reading order down the right column is therefore recap → note →
     button, which is the order the visitor acts in. */
  .floor-send { grid-column: 1 / -1; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; justify-items: stretch; gap: 18px 26px; text-align: left; }
  /* The rule is the two halves of the band: what you tell us, and what that
     comes to. The 39px the note used to carry did that job when the band was
     one row of three, and it cannot here — the note is no longer between the
     two things being separated. */
  .floor-size { grid-column: 1; grid-row: 1 / span 2; justify-items: start; align-content: center; padding-inline-end: 26px; border-inline-end: 1px solid rgba(255,255,255,.1); }
  .floor-recap { grid-column: 2; grid-row: 1; justify-items: start; }
  /* The band is one row per group here, so the items never wrap and the
     equal-width floor they need lower down would only pad the recap out. */
  .floor-recap-item { min-inline-size: 0; }
  /* Bottom-aligned so its last line and the link across the band land on one
     line. Row 2 is taller than the note — the measurements column spans both
     rows and is the tallest thing in the band, and the slack it leaves is
     shared out — so left to the band's `align-items: center` the note floated
     a few pixels above the row's foot while the actions beside it sat on it. */
  .floor-send-note { grid-column: 2; grid-row: 2; align-self: end; }
  /* Spans both rows and sits at the foot of them, which puts the "Quer um
     desenho diferente?" link on the same line as the last line of the note
     beside it — the two are a matched pair, one sentence closing each column.
     Centred in the span the stack floated between the recap and that line and
     matched neither. Pinned to row 2 instead it would bottom out in the same
     place, but the button would then size row 2 and push the note off centre;
     spanning lets the note keep the row and the actions hang off its foot. */
  .floor-send-actions { grid-column: 3; grid-row: 1 / span 2; align-self: end; justify-items: end; }
}

/* Install steps: .advantage-card unchanged, three across instead of two, with a
   number where the card normally carries an icon. */
.piso-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
.piso-step-number { width: 39px; height: 39px; display: grid; place-items: center; color: var(--orange); border: 1px solid rgba(255,136,71,.4); border-radius: 50%; font: 700 17px 'Manrope'; }

/* Privacy policy */
.legal-page { background: var(--cream); }
.legal-hero { position: relative; overflow: hidden; padding: 150px 0 76px; color: white; background: var(--ink); }
.legal-hero::before { content: ''; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, black, transparent 86%); }
.legal-hero .container { position: relative; width: min(calc(100% - 160px),1500px); max-width: none; }
.legal-hero .breadcrumb { margin-bottom: 42px; }
.legal-hero h1 { max-width: 900px; margin: 0; font-size: clamp(48px, 6vw, 76px); }
.legal-hero .container > p:not(.eyebrow) { max-width: 780px; margin: 24px 0 0; color: rgba(255,255,255,.68); font-size: 17px; }
.legal-update { margin-top: 30px; display: inline-flex; padding: 7px 10px; color: rgba(255,255,255,.65); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; font-size: 11px; font-weight: 600; }
.legal-section { padding: 78px 0 105px; }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 44px; align-items: start; }
.legal-index { position: sticky; top: 115px; padding: 22px; background: #171717; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; }
.legal-index > p { margin: 0 0 15px; color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.legal-index nav { display: flex; flex-direction: column; }
.legal-index a { padding: 7px 0; color: rgba(255,255,255,.58); border-bottom: 1px solid rgba(255,255,255,.06); font-size: 11px; line-height: 1.35; transition: color .2s ease, padding-left .2s ease; }
.legal-index a:last-child { border: 0; }
.legal-index a:hover { padding-left: 4px; color: var(--orange); }
.legal-content { padding: 48px 56px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 65px rgba(10,10,10,.08); }
.legal-content section { scroll-margin-top: 110px; }
.legal-content section + section { margin-top: 44px; padding-top: 42px; border-top: 1px solid var(--line); }
.legal-content h2 { margin: 0 0 20px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }
.legal-content p { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.legal-content ul { margin: 8px 0 18px; padding-left: 20px; color: var(--ink-soft); }
.legal-content li { margin-bottom: 10px; padding-left: 5px; font-size: 15px; line-height: 1.65; }
.legal-content li::marker { color: var(--orange-deep); }
.legal-content a:not(.button) { color: var(--orange-deep); border-bottom: 1px solid currentColor; font-weight: 700; }
.legal-contact-button { margin-top: 10px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

@media (max-width: 980px) {
  .page-hero .container, .legal-hero .container, .page-strip .container, .site-header .container { width: min(calc(100% - 40px),var(--container)); }
  .main-nav { position: fixed; top: 72px; left: 20px; right: 20px; padding: 25px; display: none; flex-direction: column; align-items: stretch; gap: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
  .main-nav.is-open { display: flex; }
  .main-nav .button { text-align: center; }
  .menu-toggle { display: block; }
  .menu-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-of-type(3) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }
  .page-hero { padding-top: 118px; }
  .page-hero-grid { grid-template-columns: 1.08fr .92fr; gap: 35px; }
  .page-hero h1 { font-size: clamp(46px,4.5vw,58px); }
  .page-hero-copy { max-width: 760px; }
  .hero-visual { width: min(100%, 430px); margin-inline: auto; }
  .hero-brandmark { width: min(58%,350px); }
  .page-strip-grid { padding-block: 20px; }
  .page-strip-grid > div { padding: 0 18px; }
  .segments-explorer { grid-template-columns: 260px minmax(0,1fr); }
  .segment-tab { min-height: 78px; padding-inline: 12px; }
  .segment-panel { grid-template-columns: 1fr; min-height: 610px; }
  .segment-panel-image { min-height: 300px; }
  .segment-panel-content { padding: 31px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-copy { position: static; padding-top: 0; }
  .contact-panel { grid-template-columns: 1fr; gap: 38px; }
  .contact-actions { flex-direction: row; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
  .hero-photo { width: min(100%,690px); min-height: 260px; margin-inline: auto; }
  /* Stacked, .hero-photo is a wide short band, and `cover` crops an authored image top
     and bottom -- on the piso hero that cut the CJ mark in half and lost the yellow
     faixa entirely. The other segment heroes are photographs, where any window is a
     fair window; this one is composed, so give it the frame it was composed in. */
  .piso-hero .hero-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .product-catalog-grid { grid-template-columns: repeat(2,1fr); }
  .catalog-product,
  .catalog-product:nth-last-child(2):nth-child(3n + 1),
  .catalog-product:last-child:nth-child(3n + 1) { grid-column: auto; }
  .catalog-product { grid-template-columns: .75fr 1.25fr; }
  .catalog-product-image { min-height: 278px; }
  /* The image cell's own min-height is what sets the card height here, so the
     shorter automotive card has to be restated or it springs back to 278px. */
  .automotive-products .catalog-product-image { min-height: 202px; }
  .variant-grid { grid-template-columns: repeat(2,1fr); }
  /* Needs restating: .piso-spaces .variant-grid outranks the rule above. */
  .piso-spaces .variant-grid { grid-template-columns: repeat(2,1fr); }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-index { position: static; }
  .legal-index nav { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 22px; }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .page-hero .container, .legal-hero .container, .page-strip .container, .site-header .container { width: min(calc(100% - 28px),var(--container)); }
  .header-inner { min-height: 72px; }
  .brand-logo { width: 72px; height: 58px; }
  .page-hero { min-height: auto; padding: 105px 0 42px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  h1 { font-size: clamp(43px, 13.5vw, 61px); }
  .page-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .hero-actions, .hero-actions .button { width: 100%; }
  .hero-visual { height: 185px; margin-top: 0; }
  .hero-brandmark { width: min(54%, 190px); }
  .trust-grid { grid-template-columns: repeat(3, minmax(235px, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .trust-grid > div, .trust-grid > div:first-child, .trust-grid > div:last-child { min-height: 92px; padding: 14px 20px 14px 0; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 0; scroll-snap-align: start; }
  .section { padding: 78px 0; }
  .section-heading { margin-bottom: 35px; }
  .section-heading .eyebrow { margin-bottom: 18px; }
  .section-heading h2 { font-size: 31px; line-height: 1.18; }
  .segments-explorer { display: block; }
  .segment-tabs { margin-bottom: 15px; padding: 7px; overflow-x: auto; flex-direction: row; gap: 6px; border-radius: 18px; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .segment-tab { min-width: 165px; min-height: 64px; padding: 10px 12px; grid-template-columns: 22px 1fr; scroll-snap-align: start; }
  .segment-tab small, .segment-tab b { display: none; }
  .segment-tab strong { font-size: 13px; }
  .segment-panel { min-height: 0; grid-template-columns: 1fr; border-radius: 22px; }
  .segment-panel-image { min-height: 245px; }
  .segment-panel-content { min-height: 390px; padding: 28px 24px; }
  .segment-panel h3 { font-size: 37px; }
  .segment-panel-actions { width: 100%; }
  .segment-panel-actions .button { width: 100%; }
  .about-copy h2 { font-size: 42px; }
  .advantage-grid { grid-template-columns: 1fr; }
  .advantage-card { min-height: 220px; }
  .contact-panel { padding: 43px 24px; border-radius: 24px; }
  .contact-actions { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 25px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { gap: 15px; flex-direction: column; }
  .hero-photo { min-height: 210px; }
  .strip-stack { grid-template-columns: 1fr; padding-block: 13px; }
  .strip-stack > div, .strip-stack > div:first-child { min-height: 105px; padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .strip-stack > div:nth-child(2), .strip-stack > div:last-child,
  .packaging-page .strip-stack > div:last-child { padding: 20px 0; justify-content: flex-start; }
  .product-catalog-grid { grid-template-columns: 1fr; }
  .catalog-product { min-height: 250px; grid-template-columns: .72fr 1.28fr; }
  .catalog-product-image { min-height: 250px; max-height: none; }
  .catalog-product-content { min-height: 0; padding: 17px 15px; }
  /* Eleven pills wrap to four or five stacked rows on a phone, which is most of
     the screen before a single product is on it. Scroll them instead — the same
     move .segment-tabs makes at this breakpoint. The negative margin plus
     matching padding lets the row bleed to both edges of the viewport, so the
     last pill does not look like the last category. */
  .catalog-filters { margin-inline: -20px; padding-inline: 20px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .catalog-filter { flex: 0 0 auto; scroll-snap-align: start; }
  .automotive-products .catalog-product { min-height: 190px; }
  .automotive-products .catalog-product-image { min-height: 190px; }
  .image-viewer { padding: 18px; }
  .image-viewer-image { max-width: 94vw; max-height: 84vh; border-radius: 14px; }
  .image-viewer-close { top: 14px; right: 14px; }
  .variants-heading { grid-template-columns: 1fr; gap: 17px; }
  .floor-stage { padding: 8px; }
  .floor-controls { padding: 18px; }
  /* Seven swatches will not fit across a phone with their names still legible, and
     the column count cannot drop without the group turning into ragged rows —
     three of those stacked is most of a screen. So each group becomes one
     swipeable row, the same move .segment-tabs and .trust-grid already make.

     min-width: 0 goes with the min-inline-size on .floor-control above: seven fixed
     82px columns give this row an intrinsic width of 630px, and every ancestor that
     honours that minimum drags the composer off the side of the phone instead of
     letting the row scroll. Waive it at both levels. */
  .floor-swatches { min-width: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82px; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .floor-swatch { scroll-snap-align: start; }
  .floor-send { padding: 18px; justify-items: stretch; }
  .floor-send .button { width: 100%; }
  /* Two by two rather than left to wrap. Four across need 562px of band, which
     runs out just under this breakpoint, and what follows is a ragged
     three-plus-one across most of the phone range. Two columns stay square all
     the way down. */
  .floor-recap-items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 14px; }
  .legal-hero { padding: 125px 0 58px; }
  .legal-hero .breadcrumb { margin-bottom: 30px; }
  .legal-hero h1 { font-size: 43px; }
  .legal-hero .container > p:not(.eyebrow) { font-size: 15px; }
  .legal-section { padding: 48px 0 78px; }
  .legal-index { padding: 19px; border-radius: 15px; }
  .legal-index nav { grid-template-columns: 1fr; }
  .legal-content { padding: 32px 23px; border-radius: 18px; }
  .legal-content section + section { margin-top: 34px; padding-top: 32px; }
  .legal-content h2 { font-size: 27px; }
  .contact-dock { left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); justify-content: space-between; gap: 12px; color: white; background: rgba(10,10,10,.97); border-radius: 0; filter: drop-shadow(0 -8px 22px rgba(10,10,10,.22)); backdrop-filter: blur(12px); }
  .contact-dock:hover { transform: none; filter: drop-shadow(0 -8px 22px rgba(10,10,10,.22)); }
  .contact-dock.is-hidden { transform: translateY(100%); }
  .contact-dock-prompt { min-width: 0; display: flex; flex-direction: column; }
  .contact-dock-prompt strong { font: 700 11px 'Manrope'; }
  .contact-dock-prompt small { overflow: hidden; color: rgba(255,255,255,.58); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .contact-dock-action { min-height: 44px; padding: 6px 15px 6px 8px; gap: 7px; flex: 0 0 auto; }
  .contact-dock-action img { width: 31px; height: 31px; }
  .contact-dock-action strong { font-size: 11px; }
  .dock-label-desktop { display: none; }
  .dock-label-mobile { display: inline; }
}

@media (max-width: 420px) {
  .hero-visual { margin-left: -10px; width: calc(100% + 20px); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:last-child { grid-column: auto; }
  .contact-dock-prompt small { max-width: 145px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}