* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--rb-ink);
  background: var(--rb-paper);
  font: 400 1rem/1.5 var(--rb-font-body);
  overflow-x: hidden;
}

button, input, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
fieldset { min-width: 0; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1rem;
  color: var(--rb-ink);
  background: var(--rb-yellow);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--rb-cyan); outline-offset: 3px; }

.topbar {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem clamp(1rem, 4vw, 4.5rem);
  color: rgba(255,255,255,.76);
  background: var(--rb-ink);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topbar p { margin: 0; }
.topbar span { color: var(--rb-yellow); font-weight: 600; }

.site-header {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: .65rem clamp(1rem, 4vw, 4.5rem);
  background: var(--rb-white);
  border-bottom: var(--rb-border);
  position: relative;
  z-index: 30;
}
.brand { display: block; width: 58px; height: 58px; }
.brand img { width: 100%; height: 100%; object-fit: contain; }
.desktop-nav { justify-self: center; display: flex; gap: clamp(1.2rem, 3vw, 2.8rem); }
.desktop-nav a { text-decoration: none; font-weight: 600; font-size: .92rem; }
.desktop-nav a:hover { color: #087f8d; }
.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: .8rem 1rem;
  border: 2px solid var(--rb-ink);
  border-radius: var(--rb-radius-control);
  background: var(--rb-yellow);
  box-shadow: 4px 4px 0 var(--rb-ink);
  text-decoration: none;
  font-weight: 700;
  transition: transform var(--rb-duration-fast) var(--rb-ease), box-shadow var(--rb-duration-fast) var(--rb-ease);
}
.header-action:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--rb-ink); }
.menu-button { display: none; padding: .65rem .8rem; border: 1px solid var(--rb-ink); background: var(--rb-white); }
.mobile-nav { padding: .8rem 1rem; background: var(--rb-white); border-bottom: var(--rb-border); }
.mobile-nav a { display: block; padding: .7rem 0; text-decoration: none; font-weight: 600; }

.configurator {
  min-height: calc(100vh - 112px);
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(470px, 1.65fr) minmax(340px, .92fr);
  background: var(--rb-cyan);
}

.product-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 4.5rem) clamp(1.4rem, 3vw, 3rem);
  border-right: 1px solid rgba(7,17,29,.18);
}
.eyebrow {
  margin: 0 0 .8rem;
  font: 700 .72rem/1 var(--rb-font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--rb-font-display); }
h1 {
  max-width: 8.5ch;
  margin: 0;
  font-size: clamp(2.55rem, 4.4vw, 5.7rem);
  line-height: .91;
  letter-spacing: -.07em;
}
h1 em { color: var(--rb-white); font-style: normal; }
.rail-intro > p:last-child { max-width: 34ch; margin: 1.35rem 0 0; }

.product-picker { margin: 0; padding: 0; border: 0; }
.product-picker legend { margin-bottom: .55rem; font-weight: 700; }
.product-picker label { display: block; cursor: pointer; }
.product-picker input { position: absolute; opacity: 0; pointer-events: none; }
.product-picker label > span {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: .6rem;
  min-height: 58px;
  padding: .65rem .4rem;
  border-top: 1px solid rgba(7,17,29,.25);
  transition: padding var(--rb-duration-fast) var(--rb-ease), background var(--rb-duration-fast) var(--rb-ease);
}
.product-picker label:last-child > span { border-bottom: 1px solid rgba(7,17,29,.25); }
.product-picker b { font: 600 .7rem var(--rb-font-display); }
.product-picker strong { line-height: 1.15; }
.product-picker small { color: rgba(7,17,29,.62); font-size: .68rem; white-space: nowrap; }
.product-picker input:checked + span { padding-left: .85rem; background: var(--rb-yellow); }
.product-picker input:focus-visible + span { outline: 3px solid var(--rb-ink); outline-offset: -3px; }

.preview-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.2vw, 2.2rem);
  background: var(--rb-mist);
}
.preview-heading, .stage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.preview-heading { margin-bottom: .9rem; }
.preview-heading > div { display: flex; flex-direction: column; }
.preview-heading span, .stage-meta {
  font-size: .69rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.preview-heading strong { font: 700 1.05rem var(--rb-font-display); }
.live-label { display: flex; align-items: center; gap: .5rem; }
.live-label i { width: 7px; height: 7px; background: var(--rb-cyan); border-radius: 50%; }

.mockup-stage {
  --logo-x: 50%;
  --logo-y: 54%;
  --logo-size: 15%;
  --ink-one: #ffffff;
  --ink-two: #ffd52a;
  position: relative;
  flex: 1;
  min-height: 420px;
  overflow: hidden;
  border: 2px solid var(--rb-ink);
  border-radius: var(--rb-radius-card);
  background: #e2e7ea;
  box-shadow: var(--rb-shadow-graphic);
}
.mockup-stage > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.silk-preview {
  position: absolute;
  left: var(--logo-x);
  top: var(--logo-y);
  width: var(--logo-size);
  height: var(--logo-height, auto);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  opacity: .86;
  filter: saturate(.86) contrast(.94) blur(.08px);
  pointer-events: none;
}
.logo-ink {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--ink-one);
  -webkit-mask: url("assets/brand/rb-silk-logo-black.svg") center / contain no-repeat;
  mask: url("assets/brand/rb-silk-logo-black.svg") center / contain no-repeat;
}
.logo-ink::before,
.logo-ink::after {
  content: "";
  position: absolute;
  inset: 0;
}
.logo-ink::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");
  background-size: 72px 72px;
  mix-blend-mode: multiply;
  opacity: .34;
}
.logo-ink::after {
  background:
    repeating-radial-gradient(circle at 40% 35%, rgba(255,255,255,.24) 0 .45px, rgba(0,0,0,.2) .7px 1px, transparent 1.25px 2.35px),
    linear-gradient(112deg, rgba(255,255,255,.18), transparent 34%, rgba(0,0,0,.12) 72%, rgba(255,255,255,.08));
  background-size: 3.2px 3.2px, 100% 100%;
  mix-blend-mode: soft-light;
  opacity: .72;
}
.logo-ink-secondary {
  display: none;
  background: var(--ink-two);
  clip-path: inset(0 0 0 62%);
}
.mockup-stage[data-ink-count="2"] .logo-ink-secondary { display: block; }
.mockup-stage[data-stage="lixo-car"] { --logo-x: 49.8%; --logo-y: 54.6%; --logo-size: 14.65%; }
.mockup-stage[data-stage="sacola-tnt"] { --logo-x: 51%; --logo-y: 52%; --logo-size: 15%; }
.mockup-stage[data-stage="sacola-tnt-palmas"] { --logo-x: 49%; --logo-y: 61%; --logo-size: 16%; }
.mockup-stage[data-stage="ecobag-personalizada"] { --logo-x: 50%; --logo-y: 55%; --logo-size: 15%; }
.stage-meta {
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .7rem;
  color: rgba(7,17,29,.6);
}
.product-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 1.2rem; background: #c8d2da; }
.product-facts div { padding: .75rem .9rem; background: var(--rb-paper); }
.product-facts span { display: block; color: var(--rb-muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; }
.product-facts strong { display: block; margin-top: .18rem; font-size: .84rem; }

.controls {
  min-width: 0;
  padding: clamp(1.5rem, 2.7vw, 2.8rem);
  background: var(--rb-white);
  overflow: auto;
}
.controls-title h2 { margin: 0 0 1.6rem; font-size: clamp(1.8rem, 2.5vw, 2.7rem); line-height: 1; letter-spacing: -.05em; }
.controls fieldset { margin: 0 0 1.15rem; padding: 0 0 1.15rem; border: 0; border-bottom: var(--rb-border); }
.controls legend { width: 100%; margin-bottom: .75rem; font: 700 .86rem var(--rb-font-display); }
.controls legend span { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: .5rem; color: var(--rb-white); background: var(--rb-navy); font-size: .7rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .72rem; }
.swatches label { cursor: pointer; text-align: center; }
.swatches label.is-unavailable { cursor: not-allowed; opacity: .34; }
.swatches label.is-unavailable .swatch-dot { position: relative; }
.swatches label.is-unavailable .swatch-dot::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  background: var(--rb-ink);
  transform: rotate(-45deg);
}
.swatches input, .segmented input, .quantity-options input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-dot {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto .25rem;
  border: 1px solid #b8c4cc;
  border-radius: 50%;
  background: var(--swatch);
}
.swatches small { display: block; max-width: 4.5rem; overflow: hidden; color: var(--rb-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.swatches input:checked + .swatch-dot { outline: 3px solid var(--rb-ink); outline-offset: 2px; }
.swatches input:focus-visible + .swatch-dot { outline: 3px solid var(--rb-cyan); outline-offset: 3px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.segmented span, .quantity-options span {
  min-height: 41px;
  display: grid;
  place-items: center;
  padding: .5rem;
  border: 1px solid #c8d2da;
  border-radius: var(--rb-radius-control);
  font-weight: 700;
  cursor: pointer;
}
.segmented input:checked + span, .quantity-options input:checked + span { color: var(--rb-white); background: var(--rb-navy); border-color: var(--rb-navy); }
.ink-control { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ink-control small { display: block; margin-bottom: .5rem; color: var(--rb-muted); }
.ink-swatches .swatch-dot { width: 28px; height: 28px; margin-bottom: 0; }
.ink-swatches small { display: none; }
.quantity-options { display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem; }

.artwork-options { display: grid; gap: .45rem; }
.artwork-options label { display: block; cursor: pointer; }
.artwork-options input { position: absolute; opacity: 0; pointer-events: none; }
.artwork-options label > span {
  display: block;
  padding: .8rem .9rem;
  border: 1px solid #c8d2da;
  background: var(--rb-white);
  transition: border-color var(--rb-duration-fast) var(--rb-ease), background var(--rb-duration-fast) var(--rb-ease);
}
.artwork-options strong, .artwork-options small { display: block; }
.artwork-options strong { font-size: .83rem; }
.artwork-options small { margin-top: .15rem; color: var(--rb-muted); font-size: .7rem; }
.artwork-options input:checked + span { border-color: var(--rb-navy); box-shadow: inset 4px 0 0 var(--rb-cyan); }
.artwork-options input:focus-visible + span { outline: 3px solid var(--rb-cyan); outline-offset: 2px; }
.artwork-upsell > span { background: color-mix(in srgb, var(--rb-yellow) 18%, var(--rb-white)); }
.template-download {
  display: inline-flex;
  margin-top: .7rem;
  color: #087f8d;
  font-size: .76rem;
  font-weight: 700;
  text-underline-offset: 3px;
}
.artwork-note { margin: .55rem 0 0; color: var(--rb-muted); font-size: .69rem; line-height: 1.45; }

.order-summary { padding: .9rem 1rem; border-left: 4px solid var(--rb-cyan); background: var(--rb-paper); }
.order-summary > span { color: var(--rb-muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.order-summary strong { display: block; margin-top: .15rem; font: 700 1rem var(--rb-font-display); }
.order-summary p { margin: .15rem 0; font-size: .82rem; }
.order-summary small { color: var(--rb-muted); font-size: .72rem; }
.whatsapp-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .8rem;
  padding: 1rem;
  color: var(--rb-white);
  background: var(--rb-navy);
  border-radius: var(--rb-radius-control);
  text-decoration: none;
  font-weight: 700;
  transition: background var(--rb-duration-fast) var(--rb-ease);
}
.whatsapp-button:hover { background: #087f8d; }
.form-note { margin: .45rem 0 0; color: var(--rb-muted); font-size: .69rem; line-height: 1.4; }

.catalog-section, .reference-section, .process-section { padding: clamp(4rem,8vw,8rem) clamp(1rem,4vw,4.5rem); }
.catalog-section { background: var(--rb-navy); color: var(--rb-white); }
.section-heading {
  display: grid;
  grid-template-columns: 1.5fr .7fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(2.5rem,5vw,5rem);
}
.section-heading h2, .reference-intro h2, .process-section h2 {
  margin: 0;
  font-size: clamp(2.8rem,6vw,6.8rem);
  line-height: .9;
  letter-spacing: -.065em;
}
.section-heading > p { max-width: 38ch; margin: 0; color: rgba(255,255,255,.65); }
.catalog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.15rem; align-items: stretch; }
.product-card { min-width: 0; display: flex; flex-direction: column; background: var(--rb-white); color: var(--rb-ink); }
.product-card-featured { grid-column: span 2; grid-row: span 2; }
.product-card-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--rb-mist); }
.product-card-featured .product-card-image { aspect-ratio: 16 / 10; }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--rb-ease); }
.product-card:hover .product-card-image img { transform: scale(1.025); }
.product-card-copy { display: flex; flex-direction: column; flex: 1; padding: clamp(1rem,2vw,1.6rem); border-top: var(--rb-border); }
.product-card-copy > span { color: var(--rb-muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.product-card h3 { margin: .3rem 0 .8rem; font-size: clamp(1.55rem,2.4vw,2.8rem); line-height: .95; letter-spacing: -.05em; }
.product-card p { max-width: 44ch; margin: 0 0 1.5rem; color: var(--rb-muted); }
.product-card .starting-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem; margin-top: auto; margin-bottom: 1.2rem; color: var(--rb-ink); }
.starting-price small { flex-basis: 100%; color: var(--rb-muted); font-size: .75rem; }
.starting-price strong { font: 700 1.35rem var(--rb-font-display); }
.starting-price span { color: var(--rb-muted); font-size: .8rem; }
.product-card button { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; padding: .8rem 0 0; border: 0; border-top: 1px solid #cbd3d8; background: transparent; font-weight: 700; cursor: pointer; }
.product-card button:hover { color: #087f8d; }

.reference-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem,6vw,7rem); background: var(--rb-paper); }
.reference-intro { position: sticky; top: 2rem; align-self: start; }
.reference-intro h2 { max-width: 8ch; font-size: clamp(2.8rem,5.4vw,5.8rem); }
.reference-intro > p:last-child { max-width: 38ch; margin-top: 1.5rem; color: var(--rb-muted); }
.reference-panel { min-width: 0; }
.reference-product { padding: clamp(1.4rem,3vw,2.5rem); color: var(--rb-white); background: var(--rb-cyan); border: 2px solid var(--rb-ink); box-shadow: var(--rb-shadow-graphic); }
.reference-product > span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.reference-product > strong { display: block; margin: .15rem 0 1.5rem; font: 700 clamp(2rem,4vw,4rem)/1 var(--rb-font-display); letter-spacing: -.055em; }
.reference-product dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(7,17,29,.25); }
.reference-product dl div { padding: .85rem 0; border-bottom: 1px solid rgba(7,17,29,.25); }
.reference-product dl div:nth-child(odd) { padding-right: 1rem; border-right: 1px solid rgba(7,17,29,.25); }
.reference-product dl div:nth-child(even) { padding-left: 1rem; }
.reference-product dt { opacity: .68; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.reference-product dd { margin: .15rem 0 0; font-weight: 700; }
.price-table-wrap { margin-top: 1.5rem; border: var(--rb-border); background: var(--rb-white); }
.price-table-wrap table { width: 100%; border-collapse: collapse; }
.price-table-wrap caption { padding: 1rem; text-align: left; font: 700 1rem var(--rb-font-display); }
.price-table-wrap th, .price-table-wrap td { padding: .75rem 1rem; border-top: 1px solid #d2d9de; text-align: left; font-variant-numeric: tabular-nums; }
.price-table-wrap thead th { color: var(--rb-muted); background: var(--rb-mist); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.price-table-wrap tbody th { font-weight: 600; }
.price-table-wrap > p { margin: 0; padding: .9rem 1rem; color: var(--rb-muted); background: var(--rb-paper); border-top: 1px solid #d2d9de; font-size: .72rem; }

.process-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,7vw,8rem); color: var(--rb-white); background: var(--rb-cyan); }
.process-section h2 { max-width: 8ch; font-size: clamp(2.8rem,5vw,5.8rem); }
.process-section ol { margin: 0; padding: 0; list-style: none; }
.process-section li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .25rem 1rem; padding: 1.2rem 0; border-top: 1px solid rgba(255,255,255,.35); }
.process-section li:last-child { border-bottom: 1px solid rgba(255,255,255,.35); }
.process-section li > span { grid-row: span 2; color: var(--rb-yellow); font: 700 .75rem var(--rb-font-display); }
.process-section li strong { font: 700 1.25rem var(--rb-font-display); }
.process-section li p { margin: 0; color: rgba(255,255,255,.68); }
.site-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 1.4rem clamp(1rem,4vw,4.5rem); background: var(--rb-white); }
.site-footer img { width: 42px; height: 42px; }
.site-footer p, .site-footer small { margin: 0; color: var(--rb-muted); }
.footer-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.footer-contact p { flex-basis: 100%; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-contact a { color: var(--rb-ink); font-size: .88rem; font-weight: 600; text-underline-offset: 3px; }
.footer-contact a:hover { color: #087f8d; }
.footer-contact address { flex-basis: 100%; margin-top: .25rem; font-style: normal; }
.footer-contact address a { color: var(--rb-muted); font-size: .76rem; font-weight: 500; }
.site-footer small { justify-self: end; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; max-width: min(360px,calc(100vw - 2rem)); padding: .9rem 1rem; color: var(--rb-white); background: var(--rb-navy); box-shadow: var(--rb-shadow); }

@media (max-width: 1180px) {
  .configurator { grid-template-columns: minmax(230px,.75fr) minmax(460px,1.5fr); }
  .controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,1fr); gap: 0 2rem; }
  .controls-title, .order-summary, .whatsapp-button, .form-note { grid-column: 1 / -1; }
  .catalog-grid { grid-template-columns: repeat(2,1fr); }
  .product-card-featured { grid-row: auto; }
}

@media (max-width: 780px) {
  .topbar { flex-direction: column; justify-content: center; gap: .15rem; text-align: center; }
  .desktop-nav, .header-action { display: none; }
  .site-header { grid-template-columns: 1fr auto; min-height: 70px; }
  .brand { width: 48px; height: 48px; }
  .menu-button { display: block; }
  .configurator { grid-template-columns: 1fr; }
  .product-rail { min-height: auto; padding-bottom: 1.3rem; }
  h1 { max-width: 9ch; font-size: clamp(3rem,14vw,5rem); }
  .product-picker label > span { grid-template-columns: 2rem 1fr; }
  .product-picker small { grid-column: 2; }
  .preview-column { padding: 1rem; }
  .mockup-stage { min-height: auto; aspect-ratio: 16 / 9; }
  .controls { grid-column: auto; display: block; }
  .section-heading, .reference-section, .process-section { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .product-card-featured { grid-column: auto; }
  .reference-intro { position: static; }
  .site-footer { grid-template-columns: auto 1fr; }
  .site-footer small { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 480px) {
  .product-facts { grid-template-columns: 1fr; }
  .ink-control { grid-template-columns: 1fr; }
  .quantity-options { grid-template-columns: repeat(3,1fr); }
  .stage-meta { font-size: .58rem; }
}

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