/*============================================================================
  Urbe & Co. — v5 "Clean editorial" (camada visual sobre o tema Rio)
  Referência de estilo: beroc.com.br. Fundo claro, tipografia forte em caixa
  alta, cabeçalho transparente sobre o banner da home e trilhos deslizantes.
  Carregado depois de style-async.scss e antes do CSS personalizado do admin.
  Fonte Sora servida pelo tema (static/fonts), declarada em layout.tpl.
  Backup da versão anterior (escura): _backup-v4-dark-premium/
==============================================================================*/

:root {
  --u-bg: #ffffff;
  --u-soft: #f4f3f0;
  --u-soft-2: #ebe9e4;
  --u-line: #e4e2dd;
  --u-ink: #111111;
  --u-ink-2: #2a2a2a;
  --u-muted: #6e6b66;
  --u-gold: #b8955a;
  --u-dark: #0e0e0e;
  --u-radius: 14px;
  --u-radius-sm: 8px;
  --u-pill: 999px;
  --u-ease: cubic-bezier(.22, .61, .36, 1);
  --u-ease-out: cubic-bezier(.16, 1, .3, 1);
  --u-gutter: clamp(16px, 4vw, 56px);
  --u-space: clamp(64px, 9vw, 128px);
  --u-max: 1440px;
  --u-head-h: 76px;

  /* Tokens do tema Rio no modo claro */
  --heading-font: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --body-font: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --main-background: #ffffff;
  --main-foreground: #111111;
  --main-background-opacity-20: rgba(255, 255, 255, .2);
  --main-background-opacity-30: rgba(255, 255, 255, .3);
  --main-background-opacity-50: rgba(255, 255, 255, .5);
  --main-background-opacity-60: rgba(255, 255, 255, .6);
  --main-background-opacity-80: rgba(255, 255, 255, .8);
  --main-background-opacity-90: rgba(255, 255, 255, .9);
  --main-foreground-opacity-05: rgba(17, 17, 17, .05);
  --main-foreground-opacity-08: rgba(17, 17, 17, .08);
  --main-foreground-opacity-10: rgba(17, 17, 17, .1);
  --main-foreground-opacity-20: rgba(17, 17, 17, .2);
  --main-foreground-opacity-30: rgba(17, 17, 17, .3);
  --main-foreground-opacity-40: rgba(17, 17, 17, .4);
  --main-foreground-opacity-50: rgba(17, 17, 17, .5);
  --main-foreground-opacity-60: rgba(17, 17, 17, .6);
  --main-foreground-opacity-80: rgba(17, 17, 17, .8);
  --main-foreground-opacity-90: rgba(17, 17, 17, .9);
  --accent-color: #111111;
  --accent-color-opacity-20: rgba(17, 17, 17, .2);
  --button-background: #111111;
  --button-foreground: #ffffff;
  --label-background: #111111;
  --label-foreground: #ffffff;
  --adbar-background: #111111;
  --adbar-foreground: #ffffff;
  --header-background: #0e0e0e;
  --header-foreground: #ffffff;
  --header-background-opacity-50: rgba(14, 14, 14, .5);
  --header-foreground-opacity-20: rgba(255, 255, 255, .2);
  --header-foreground-opacity-30: rgba(255, 255, 255, .3);
  --footer-background: #0e0e0e;
  --footer-foreground: #ffffff;
  --footer-foreground-opacity-20: rgba(255, 255, 255, .2);
  --footer-foreground-opacity-30: rgba(255, 255, 255, .3);
  --footer-foreground-opacity-50: rgba(255, 255, 255, .5);
  --footer-foreground-opacity-60: rgba(255, 255, 255, .6);
  --footer-foreground-opacity-80: rgba(255, 255, 255, .8);
  --newsletter-background: #f4f3f0;
  --newsletter-foreground: #111111;
  --newsletter-foreground-opacity-80: rgba(17, 17, 17, .8);
}

html { scroll-behavior: smooth; background: var(--u-bg); }

body {
  background: var(--u-bg);
  color: var(--u-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--u-ink); color: #fff; }

a { transition: color .25s var(--u-ease), opacity .25s var(--u-ease); }

:focus-visible { outline: 2px solid var(--u-ink); outline-offset: 3px; }

/*------------------------------ Barra de anúncios ------------------------------*/

.section-adbar {
  background: var(--u-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 9px 0;
}
.section-adbar a { color: inherit; }

/*------------------------------ Cabeçalho ------------------------------*/

.head-main {
  background: var(--u-dark);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background-color .45s var(--u-ease), border-color .45s var(--u-ease), box-shadow .45s var(--u-ease), transform .45s var(--u-ease);
}
.head-main .svg-icon-text { fill: #fff; transition: fill .25s var(--u-ease); }
.head-main .col-utility a:hover .svg-icon-text { fill: var(--u-gold); }
.head-main .logo-img { max-height: 46px; margin: 14px 0; transition: max-height .4s var(--u-ease), margin .4s var(--u-ease); }
.urbe-scrolled .head-main .logo-img { max-height: 38px; margin: 10px 0; }
.head-main .nav-list-link,
.head-main .nav-list-link:hover { color: #fff; }
.head-main .nav-list-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.urbe-scrolled .head-main { box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }

/* Home: cabeçalho transparente sobre o banner, fica sólido ao rolar */
.template-home .head-main {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 100%);
  border-bottom-color: transparent;
}
.template-home .head-main .section-adbar { transition: margin .45s var(--u-ease); }

.urbe-scrolled .template-home .head-main {
  background: rgba(14, 14, 14, .94);
  border-bottom-color: rgba(255, 255, 255, .08);
}
@supports (backdrop-filter: blur(8px)) {
  .urbe-scrolled .template-home .head-main {
    background: rgba(14, 14, 14, .78);
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
  }
}

/*------------------------------ Tipografia, botões e formulários ------------------------------*/

h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--u-ink); letter-spacing: -.01em; }

.section-title {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: clamp(28px, 3.5vw, 48px) !important;
}

.btn,
.btn-primary {
  border-radius: var(--u-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .3s var(--u-ease), color .3s var(--u-ease), border-color .3s var(--u-ease), transform .3s var(--u-ease);
}
.btn-primary { background: var(--u-ink); color: #fff; border-color: var(--u-ink); }
.btn-primary:hover { background: var(--u-ink-2); color: #fff; }
.btn-primary:active { transform: scale(.98); }
.btn-secondary { border-color: var(--u-ink); color: var(--u-ink); }

.form-control,
.form-select {
  border-color: var(--u-line);
  border-radius: var(--u-radius-sm);
  transition: border-color .25s var(--u-ease), box-shadow .25s var(--u-ease);
}
.form-control:focus { border-color: var(--u-ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, .08); }

/*------------------------------ Cards de produto ------------------------------*/

.item-product { margin-bottom: 40px; }
.item-product .item-image {
  background: var(--u-soft);
  border-radius: var(--u-radius);
  overflow: hidden;
}
.item-product .item-image img { transition: transform 1.1s var(--u-ease-out), opacity .5s var(--u-ease); }
.item-product:hover .item-image img { transform: scale(1.05); }
.item-product .item-description { padding-top: 16px; text-align: left; }
.item-product .item-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--u-ink);
}
.item-product .item-link:hover .item-name { color: var(--u-muted); }
.item-product .item-price { font-size: 16px; font-weight: 700; color: var(--u-ink); }
.item-product .price-compare { color: var(--u-muted); font-size: 13px; margin-right: 6px; }
.label {
  border-radius: var(--u-pill);
  background: var(--u-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
}

/*------------------------------ Rodapé ------------------------------*/

footer { background: var(--u-dark); color: #fff; padding-top: clamp(56px, 7vw, 96px); }
footer .subtitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
footer .footer-menu-link,
footer .contact-link { color: rgba(255, 255, 255, .62); font-size: 13px; }
footer .footer-menu-link:hover,
footer .contact-link:hover { color: #fff; }
footer .svg-icon-text { fill: #fff; }
.footer-payments-shipping-logos .icon-logo { height: 24px; width: auto; margin: 0 3px 6px; border-radius: 4px; }
.footer-legal { background: var(--u-dark); border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; color: rgba(255, 255, 255, .5); }
.footer-legal a { color: rgba(255, 255, 255, .7); }

/*============================================================================
  Revelar ao rolar (só quando o JS está ativo — ver layout.tpl)
==============================================================================*/

.urbe-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1s var(--u-ease-out), transform 1.1s var(--u-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Trava de segurança: se o script de rolagem não rodar, o conteúdo aparece em 3s */
.urbe-js:not(.urbe-io) [data-reveal] { animation: urbe-failsafe 0s 3s forwards; }
.urbe-js [data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes urbe-failsafe { to { opacity: 1; transform: none; } }

/*============================================================================
  Home
==============================================================================*/

.urbe-home { overflow: hidden; background: var(--u-bg); color: var(--u-ink); }
.urbe-container { max-width: var(--u-max); margin: 0 auto; padding: 0 var(--u-gutter); }
.urbe-section { padding: var(--u-space) 0; }
.urbe-center { text-align: center; margin: 8px 0 0; padding-bottom: var(--u-space); }

.urbe-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); }
.urbe-head-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  text-align: left;
}
.urbe-title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--u-ink);
  text-wrap: balance;
}
.urbe-subtitle { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--u-muted); }
.urbe-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--u-gold);
}
.urbe-kicker-light { color: rgba(255, 255, 255, .8); }

.urbe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  border: 1.5px solid transparent;
  border-radius: var(--u-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .35s var(--u-ease), color .35s var(--u-ease), border-color .35s var(--u-ease), transform .35s var(--u-ease-out);
}
.urbe-btn:hover { transform: translateY(-2px); }
.urbe-btn:active { transform: scale(.98); }
.urbe-btn-dark { background: var(--u-ink); color: #fff; border-color: var(--u-ink); }
.urbe-btn-dark:hover { background: #fff; color: var(--u-ink); }
.urbe-btn-white { background: #fff; color: var(--u-ink); border-color: #fff; }
.urbe-btn-white:hover { background: transparent; color: #fff; }
.urbe-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.urbe-btn-ghost:hover { background: #fff; color: var(--u-ink); border-color: #fff; }

.urbe-link {
  display: inline-block;
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-ink);
  text-decoration: none;
  transition: background-size .45s var(--u-ease-out);
}
a:hover .urbe-link,
.urbe-link:hover { background-size: 35% 1.5px; }

.urbe-round {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--u-line);
  border-radius: 50%;
  background: #fff;
  color: var(--u-ink);
  cursor: pointer;
  transition: background-color .3s var(--u-ease), border-color .3s var(--u-ease), color .3s var(--u-ease);
}
.urbe-round:hover { background: var(--u-ink); border-color: var(--u-ink); color: #fff; }
.urbe-round svg,
.urbe-hero-scroll svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/*------------------------------ Hero ------------------------------*/

.urbe-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 1100px;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.urbe-hero-slides { position: absolute; inset: 0; }
.urbe-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s var(--u-ease), visibility 0s linear 1.4s;
}
.urbe-hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.4s var(--u-ease); z-index: 1; }
.urbe-hero-media,
.urbe-hero-media img { display: block; width: 100%; height: 100%; }
.urbe-hero-media img {
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(1.12);
  transition: transform 9s var(--u-ease);
}
.urbe-hero-slide.is-active .urbe-hero-media img { transform: scale(1); }
.urbe-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .3) 100%);
  pointer-events: none;
}
.urbe-hero-content {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(120px, 17vh, 180px);
  width: min(920px, calc(100% - 2 * var(--u-gutter)));
  transform: translateX(-50%);
  text-align: center;
}
.urbe-hero-content > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1s var(--u-ease-out), transform 1.1s var(--u-ease-out);
}
.urbe-hero-slide.is-active .urbe-hero-content > * { opacity: 1; transform: none; }
.urbe-hero-slide.is-active .urbe-hero-content > :nth-child(1) { transition-delay: .35s; }
.urbe-hero-slide.is-active .urbe-hero-content > :nth-child(2) { transition-delay: .5s; }
.urbe-hero-slide.is-active .urbe-hero-content > :nth-child(3) { transition-delay: .65s; }
.urbe-hero-slide.is-active .urbe-hero-content > :nth-child(4) { transition-delay: .8s; }
.urbe-hero-eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.urbe-hero-title {
  margin: 0 0 20px;
  font-size: clamp(40px, 7.4vw, 112px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.urbe-hero-text { max-width: 520px; margin: 0 auto 34px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.urbe-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Posição do texto por banner (editor: "Texto do banner 1..5"). Só no computador; no celular fica centralizado embaixo. */
@media (min-width: 768px) {
  .urbe-hero-align-left .urbe-hero-content,
  .urbe-hero-align-right .urbe-hero-content {
    width: min(640px, 52%);
    transform: none;
  }
  .urbe-hero-align-left .urbe-hero-content { left: max(var(--u-gutter), calc((100vw - var(--u-max)) / 2 + var(--u-gutter))); text-align: left; }
  .urbe-hero-align-right .urbe-hero-content { left: auto; right: max(var(--u-gutter), calc((100vw - var(--u-max)) / 2 + var(--u-gutter))); text-align: right; }
  .urbe-hero-align-left .urbe-hero-title,
  .urbe-hero-align-right .urbe-hero-title { font-size: clamp(40px, 5.6vw, 88px); }
  .urbe-hero-align-left .urbe-hero-text { margin-left: 0; }
  .urbe-hero-align-right .urbe-hero-text { margin-right: 0; }
  .urbe-hero-align-left .urbe-hero-actions { justify-content: flex-start; }
  .urbe-hero-align-right .urbe-hero-actions { justify-content: flex-end; }
  /* Véu mais escuro do lado do texto */
  .urbe-hero-align-left::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 42%, rgba(0, 0, 0, .05) 75%),
                linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 40%);
  }
  .urbe-hero-align-right::after {
    background: linear-gradient(270deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 42%, rgba(0, 0, 0, .05) 75%),
                linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 40%);
  }
}

.urbe-hero-dots {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 96px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.urbe-hero-dots button {
  position: relative;
  width: 44px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.urbe-hero-dots button span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
}
.urbe-hero-dots button span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.urbe-hero-dots button.is-active span::after { transform: scaleX(1); }
.urbe-hero.is-timing .urbe-hero-dots button.is-active span::after {
  transform: scaleX(0);
  animation: urbe-progress var(--hero-delay, 6500ms) linear forwards;
}
@keyframes urbe-progress { to { transform: scaleX(1); } }

.urbe-hero-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border-radius: 50%;
  background: #fff;
  color: var(--u-ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  animation: urbe-bounce 2.4s var(--u-ease) infinite;
}
.urbe-hero-scroll:hover { color: var(--u-ink); }
@keyframes urbe-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/*------------------------------ Faixa em movimento ------------------------------*/

.urbe-marquee { background: var(--u-ink); color: #fff; overflow: hidden; }
.urbe-marquee-track { display: flex; width: max-content; animation: urbe-marquee 40s linear infinite; }
.urbe-marquee:hover .urbe-marquee-track { animation-play-state: paused; }
.urbe-marquee-list { display: flex; margin: 0; padding: 0; list-style: none; }
.urbe-marquee-list li {
  display: flex;
  align-items: center;
  padding: 15px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.urbe-marquee-list li::after { content: "✦"; margin: 0 32px; font-size: 10px; color: var(--u-gold); }
@keyframes urbe-marquee { to { transform: translateX(-50%); } }

/*------------------------------ Categorias (trilho) ------------------------------*/

.urbe-rail-wrap { position: relative; }
.urbe-rail {
  --rail-pad: max(var(--u-gutter), calc((100vw - var(--u-max)) / 2 + var(--u-gutter)));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 23vw, 340px);
  gap: 16px;
  padding: 0 var(--rail-pad) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--rail-pad);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.urbe-rail::-webkit-scrollbar { display: none; }
.urbe-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.urbe-rail.is-dragging .urbe-cat { pointer-events: none; }

.urbe-cat {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--u-radius);
  background: var(--u-soft);
  color: #fff;
  text-decoration: none;
  scroll-snap-align: start;
  isolation: isolate;
  user-select: none;
}
.urbe-cat:hover { color: #fff; }
.urbe-cat-media { display: block; position: relative; }
.urbe-cat-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4.2;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform 1.4s var(--u-ease-out);
}
.urbe-cat:hover .urbe-cat-media img { transform: scale(1.06); }
.urbe-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .12) 42%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}
.urbe-cat-label {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.urbe-cat-name { font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.urbe-cat-cta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  transform: translateY(6px);
  opacity: .8;
  transition: transform .5s var(--u-ease-out), opacity .5s var(--u-ease);
}
.urbe-cat:hover .urbe-cat-cta { transform: none; opacity: 1; }

.urbe-rail-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--u-max);
  margin: 28px auto 0;
  padding: 0 var(--u-gutter);
}
.urbe-rail-progress { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--u-line); overflow: hidden; order: -1; }
.urbe-rail-progress span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--u-ink); transition: transform .2s linear; }

/*------------------------------ Produtos ------------------------------*/

.urbe-products { background: var(--u-bg); }
.urbe-products .section-featured-home { padding-top: 8px; }
.urbe-products .section-featured-home + .section-featured-home { padding-top: var(--u-space); }
.urbe-products .container-fluid { max-width: var(--u-max); padding-left: var(--u-gutter); padding-right: var(--u-gutter); }
/* Poucos produtos: grade centralizada em vez de colada à esquerda */
.urbe-products .js-products-home-grid.row { justify-content: center; }

/*------------------------------ Vídeos dos produtos (YouTube Shorts) ------------------------------*/

.urbe-videos { padding-top: 0; }
.urbe-video-rail { grid-auto-columns: clamp(210px, 19vw, 280px); }
.urbe-video { display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; min-width: 0; }
.urbe-video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: var(--u-radius);
  overflow: hidden;
  background: #111;
  cursor: pointer;
  isolation: isolate;
  transition: transform .5s var(--u-ease-out), box-shadow .5s var(--u-ease);
}
.urbe-video-frame:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
/* A miniatura do YouTube é 4:3 com o vídeo vertical no meio: "cover" mostra só o vídeo */
.urbe-video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--u-ease); }
.urbe-video-player { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Iframe mais alto que o cartão: esconde a barra de título do YouTube */
.urbe-video-player iframe { position: absolute; left: 0; top: -64px; width: 100%; height: calc(100% + 128px); border: 0; }
.is-playing .urbe-video-thumb { opacity: 0; }
.urbe-video-play,
.urbe-video-sound {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--u-ink);
  transition: opacity .4s var(--u-ease), transform .4s var(--u-ease-out);
}
.urbe-video-play { left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.urbe-video-play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.urbe-video-frame:hover .urbe-video-play { transform: scale(1.08); }
.is-playing .urbe-video-play { opacity: 0; }
.urbe-video-sound { right: 12px; bottom: 12px; width: 34px; height: 34px; opacity: 0; }
.urbe-video-sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-playing .urbe-video-sound { opacity: 1; }
.urbe-video-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--u-ink); text-decoration: none; }
.urbe-video-info:hover { color: var(--u-ink); }
.urbe-video-info strong { font-size: 13px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }

.urbe-modal-open, .urbe-modal-open body { overflow: hidden; }
.urbe-video-modal {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .82);
  animation: urbe-fade .3s var(--u-ease);
}
.urbe-video-modal[hidden] { display: none; }
@keyframes urbe-fade { from { opacity: 0; } to { opacity: 1; } }
.urbe-video-modal-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.urbe-video-modal-player {
  width: min(92vw, calc((100vh - 140px) * 9 / 16), 440px);
  aspect-ratio: 9 / 16;
  border-radius: var(--u-radius);
  overflow: hidden;
  background: #000;
}
.urbe-video-modal-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.urbe-video-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--u-ink);
  cursor: pointer;
}
.urbe-video-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.urbe-video-modal-cta[hidden] { display: none; }

@media (max-width: 767px) {
  .urbe-video-rail { grid-auto-columns: 58%; }
}

/*------------------------------ Shop the look ------------------------------*/

.urbe-looks { background: var(--u-soft); }
.urbe-tabs {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--u-pill);
  background: #fff;
  border: 1px solid var(--u-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.urbe-tabs::-webkit-scrollbar { display: none; }
.urbe-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--u-pill);
  background: transparent;
  color: var(--u-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .35s var(--u-ease), color .35s var(--u-ease);
}
.urbe-tab.is-active { background: var(--u-ink); color: #fff; }

.urbe-look { position: relative; }
.urbe-look[hidden] { display: none; }
.urbe-look.is-active { animation: urbe-look-in .8s var(--u-ease-out); }
@keyframes urbe-look-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.urbe-look-media { position: relative; overflow: hidden; border-radius: var(--u-radius); background: var(--u-soft-2); }
.urbe-look-media > a { display: block; }
.urbe-look-media img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 900; object-fit: cover; }

.urbe-spot {
  position: absolute;
  z-index: 2;
  left: calc(var(--sx, 50) * 1%);
  top: calc(var(--sy, 50) * 1%);
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.urbe-spot span { position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.urbe-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: urbe-pulse 2.2s var(--u-ease) infinite;
}
@keyframes urbe-pulse { from { transform: scale(.9); opacity: .9; } to { transform: scale(2); opacity: 0; } }

.urbe-look-card {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  display: flex;
  gap: 16px;
  align-items: center;
  width: min(420px, 44%);
  padding: 14px;
  border-radius: var(--u-radius);
  background: rgba(255, 255, 255, .96);
  color: var(--u-ink);
  text-decoration: none;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  transition: transform .5s var(--u-ease-out), box-shadow .5s var(--u-ease);
}
.urbe-look-card:hover { color: var(--u-ink); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.urbe-look-thumb { flex: 0 0 104px; overflow: hidden; border-radius: var(--u-radius-sm); background: var(--u-soft); }
.urbe-look-thumb img { display: block; width: 104px; height: 104px; object-fit: cover; }
.urbe-look-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.urbe-badge {
  padding: 4px 9px;
  border-radius: var(--u-pill);
  background: var(--u-ink);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.urbe-look-name { font-size: 15px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.urbe-look-text { font-size: 13px; line-height: 1.5; color: var(--u-muted); }

/*------------------------------ Manifesto ------------------------------*/

.urbe-manifesto {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 80vh, 820px);
  padding: var(--u-space) var(--u-gutter);
  overflow: hidden;
  background: #000;
  color: #fff;
  text-align: center;
}
.urbe-manifesto-media { position: absolute; inset: -12% 0; will-change: transform; }
.urbe-manifesto-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.urbe-manifesto::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.urbe-manifesto-content { position: relative; z-index: 2; max-width: 820px; }
.urbe-manifesto-title {
  margin: 0 0 22px;
  font-size: clamp(34px, 5.4vw, 80px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.urbe-manifesto-text { max-width: 540px; margin: 0 auto 34px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .82); }

/*------------------------------ Benefícios ------------------------------*/

.urbe-benefits { padding: clamp(56px, 7vw, 96px) 0; background: var(--u-bg); border-bottom: 1px solid var(--u-line); }
.urbe-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.urbe-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 28px 24px;
  border-radius: var(--u-radius);
  background: var(--u-soft);
  transition: background-color .4s var(--u-ease), transform .5s var(--u-ease-out);
}
.urbe-benefit:hover { background: var(--u-soft-2); transform: translateY(-4px); }
.urbe-benefit-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #fff;
}
.urbe-benefit svg { width: 22px; height: 22px; fill: none; stroke: var(--u-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.urbe-benefit strong { font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--u-ink); }
.urbe-benefit span { font-size: 13px; line-height: 1.5; color: var(--u-muted); }

/*------------------------------ Comunidade ------------------------------*/

.urbe-community {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  max-width: var(--u-max);
  margin: 0 auto;
  padding: var(--u-space) var(--u-gutter);
}
.urbe-community-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.urbe-community-img { display: block; overflow: hidden; border-radius: var(--u-radius); background: var(--u-soft); }
.urbe-community-img:nth-child(2) { transform: translateY(32px); }
.urbe-community-img:nth-child(4) { transform: translateY(32px); }
.urbe-js .urbe-community-img:nth-child(2n)[data-reveal].is-visible { transform: translateY(32px); }
.urbe-community-img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1.2s var(--u-ease-out); }
.urbe-community-img:hover img { transform: scale(1.06); }
.urbe-community-content .urbe-subtitle { margin-bottom: 32px; max-width: 420px; }
/* Feed do Instagram (preenchido pela Nuvemshop) no lugar das 4 fotos padrão */
.js-urbe-insta-fallback[hidden] { display: none; }
.urbe-insta-link { display: block; height: 100%; }
.urbe-insta-feed img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1.2s var(--u-ease-out); }
.urbe-insta-item:hover img { transform: scale(1.06); }
.urbe-insta-feed > :nth-child(n+5) { display: none; }

/*============================================================================
  Página de produto — layout Editorial (templates/product.tpl)
==============================================================================*/

.urbe-pd { background: var(--u-bg); }

/* Mosaico de fotos (computador) */
.urbe-pd-hero { position: relative; display: grid; gap: 8px; height: min(76vh, 740px); min-height: 420px; }
.urbe-pd-hero-1 { grid-template-columns: 1fr; }
.urbe-pd-hero-2 { grid-template-columns: 1fr 1fr; }
.urbe-pd-hero-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.urbe-pd-hero-3 .urbe-pd-shot:first-child { grid-row: span 2; }
.urbe-pd-shot { position: relative; display: block; min-height: 0; overflow: hidden; background: var(--u-soft); cursor: zoom-in; }
.urbe-pd-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--u-ease-out), opacity .35s var(--u-ease); }
/* Fundo branco das fotos de produto vira o cinza-claro da página */
.urbe-pd-shot img,
.urbe-pd-rio-gallery .js-product-slide-img { mix-blend-mode: multiply; }
.urbe-pd-shot:hover img { transform: scale(1.03); }
.urbe-pd-shot img.is-swapping { opacity: .35; }
.urbe-pd-more {
  position: absolute;
  left: var(--u-gutter);
  bottom: 24px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--u-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--u-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
/* Galeria do tema: só no celular */
.urbe-pd-rio-gallery { display: none; }

/* Corpo: história à esquerda, cartão de compra à direita */
.urbe-pd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  grid-template-areas: "story card";
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  max-width: var(--u-max);
  margin: 0 auto;
  padding: 40px var(--u-gutter) 0;
}
.urbe-pd-card {
  grid-area: card;
  position: relative;
  z-index: 5;
  padding: 28px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}
.urbe-pd-hero ~ .urbe-pd-body .urbe-pd-card { margin-top: -160px; }
.urbe-pd-story { grid-area: story; padding-top: 24px; }
.urbe-pd-story-title {
  margin: 0 0 32px;
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.urbe-pd-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.urbe-pd-feats div { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; background: var(--u-soft); }
.urbe-pd-feats svg { width: 26px; height: 26px; margin-bottom: 6px; fill: none; stroke: var(--u-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.urbe-pd-feats b { font-size: 13px; text-transform: uppercase; }
.urbe-pd-feats span { font-size: 13px; line-height: 1.5; color: var(--u-muted); }

/* Elementos do formulário do tema dentro do cartão */
.urbe-pd-card .breadcrumbs { margin-bottom: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--u-muted); }
.urbe-pd-card .breadcrumbs a { color: var(--u-muted); }
.urbe-pd-card .breadcrumbs .crumb.active { color: var(--u-ink); font-weight: 600; }
.urbe-pd-card h1,
.urbe-pd-card .page-header h1,
.urbe-pd-card .h1 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.urbe-pd-card .js-price-display { font-size: 28px; font-weight: 700; color: var(--u-ink); }
.urbe-pd-card .price-compare { color: var(--u-muted); font-size: 15px; }
.urbe-pd-card .form-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.urbe-pd-card .btn-variant {
  min-width: 64px;
  margin: 0 6px 8px 0;
  padding: 10px 16px;
  border: 1.5px solid var(--u-line);
  border-radius: var(--u-pill);
  background: #fff;
  color: var(--u-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .25s var(--u-ease), background-color .25s var(--u-ease), color .25s var(--u-ease);
}
.urbe-pd-card .btn-variant:hover { border-color: var(--u-ink); }
.urbe-pd-card .btn-variant.selected { border-color: var(--u-ink); background: var(--u-ink); color: #fff; }
.urbe-pd-card .js-form-quantity-container .form-row,
.urbe-pd-card .form-quantity { border-radius: var(--u-pill); }
.urbe-pd-card .js-addtocart { min-height: 54px; border-radius: var(--u-pill); font-size: 12px; letter-spacing: .12em; }
.urbe-pd-card .divider { border-color: var(--u-line); background: var(--u-line); }
.urbe-pd-card .form-control { min-height: 48px; border-radius: var(--u-pill); padding-left: 18px; }
.urbe-pd-card .product-description { font-size: 14px; line-height: 1.7; color: var(--u-ink-2); }
.urbe-pd-card .product-description img { border-radius: 12px; }

/* Opções de cor e tamanho mais compactas (ajuste 02/10) */
.urbe-pd-card .js-product-variants { padding-top: 4px !important; }
.urbe-pd-card .js-product-variants-group { margin-bottom: 14px !important; }
/* Título da opção acima dos botões ("Cor: Azul") */
.urbe-pd-card .js-product-variants-group > .row { display: block; margin: 0; }
.urbe-pd-card .js-product-variants-group > .row > .col-auto,
.urbe-pd-card .js-product-variants-group > .row > .col { flex: none; width: auto; max-width: none; padding: 0 !important; }
.urbe-pd-card .js-product-variants-group .form-label { display: block !important; margin: 0 0 8px !important; font-size: 11px; color: var(--u-ink); }
/* Tamanho e outras opções: botões baixos */
.urbe-pd-card .btn-variant {
  min-width: 52px;
  min-height: 36px;
  margin: 0 6px 6px 0;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.2;
}
/* Cor: bolinhas com anel na escolhida */
.urbe-pd-card .btn-variant.btn-variant-color {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0 8px 6px 0;
  padding: 3px;
  border: 1.5px solid var(--u-line);
  border-radius: 50%;
  background: #fff !important;
}
.urbe-pd-card .btn-variant.btn-variant-color:hover { border-color: var(--u-muted); }
.urbe-pd-card .btn-variant.btn-variant-color.selected { border-color: var(--u-ink); background: #fff !important; box-shadow: 0 0 0 1px var(--u-ink); }
.urbe-pd-card .btn-variant.btn-variant-color { box-sizing: border-box; }
.urbe-pd-card .btn-variant-color .btn-variant-content,
.urbe-pd-card .btn-variant-color.selected .btn-variant-content { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50%; }
/* Quantidade e comprar mais compactos */
.urbe-pd-card .js-addtocart { min-height: 48px; }
/* Caixa de quantidade: "− 1 +" centralizado na altura e mesma borda dos outros botões */
.urbe-pd-card .form-quantity {
  display: flex;
  align-items: center;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid var(--u-line);
  border-radius: var(--u-pill);
  background: #fff;
}
.urbe-pd-card .form-quantity > .form-row { flex: 1; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.urbe-pd-card .form-quantity .form-quantity-icon { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer; }
.urbe-pd-card .form-quantity .form-quantity-icon:hover { background: var(--u-soft); }
.urbe-pd-card .form-quantity .form-control-container { padding: 0; }
.urbe-pd-card .form-quantity .form-control { height: auto; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.2; }

/* Descrição em largura total */
.urbe-pd-desc {
  margin-top: var(--u-space);
  padding: clamp(48px, 6vw, 88px) max(var(--u-gutter), calc((100vw - var(--u-max)) / 2 + var(--u-gutter)));
  background: var(--u-soft);
}
.urbe-pd-desc-head { margin-bottom: clamp(24px, 3vw, 40px); }
.urbe-pd-desc-title { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; }
.urbe-pd-desc #product-description { margin-top: 0 !important; }
.urbe-pd-desc .product-description { font-size: 15px; line-height: 1.75; color: var(--u-ink-2); }
.urbe-pd-desc .product-description p { margin: 0 0 1em; }
.urbe-pd-desc .product-description h2,
.urbe-pd-desc .product-description h3,
.urbe-pd-desc .product-description strong { color: var(--u-ink); }
.urbe-pd-desc .product-description img { border-radius: 14px; }

/* Abas da descrição */
.urbe-pd-tabs {
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 28px;
  padding: 5px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-pill);
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
}
.urbe-pd-tabs[hidden] { display: none; }
.urbe-pd-tabs::-webkit-scrollbar { display: none; }
.urbe-pd-tab {
  flex: 0 0 auto;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--u-pill);
  background: transparent;
  color: var(--u-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--u-ease), color .3s var(--u-ease);
}
.urbe-pd-tab:hover { color: var(--u-ink); }
.urbe-pd-tab.is-on { background: var(--u-ink); color: #fff; }
.urbe-pd-panel { max-width: 920px; font-size: 15px; line-height: 1.75; color: var(--u-ink-2); animation: urbe-tab-in .5s var(--u-ease-out); }
.urbe-pd-panel[hidden] { display: none; }
@keyframes urbe-tab-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.urbe-pd-panel p { margin: 0 0 1em; }
.urbe-pd-panel strong, .urbe-pd-panel b, .urbe-pd-panel h3, .urbe-pd-panel h4 { color: var(--u-ink); }
.urbe-pd-panel img { border-radius: 14px; }
.urbe-pd-panel ul { padding-left: 20px; }
/* Caixas cinza que vêm do editor de descrição viram cartões brancos */
.urbe-pd-panel > div[style] { margin: 0 0 14px !important; padding: 22px 24px !important; border-radius: 16px !important; background: #fff !important; }
.urbe-pd-panel table { width: 100%; max-width: 560px; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
.urbe-pd-panel th, .urbe-pd-panel td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--u-line); }
.urbe-pd-panel th { background: var(--u-ink); color: #fff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.urbe-pd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.urbe-pd-steps div { padding: 22px; border-radius: 16px; background: #fff; }
.urbe-pd-steps em { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: var(--u-ink); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
.urbe-pd-steps b { display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; }
.urbe-pd-steps span { font-size: 13px; line-height: 1.55; color: var(--u-muted); }
.urbe-pd-faq details { border-bottom: 1px solid var(--u-line); }
.urbe-pd-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; color: var(--u-ink); font-weight: 600; cursor: pointer; list-style: none; }
.urbe-pd-faq summary::-webkit-details-marker { display: none; }
.urbe-pd-faq summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .3s var(--u-ease); }
.urbe-pd-faq details[open] summary::after { transform: rotate(45deg); }
.urbe-pd-faq details p { margin: 0 0 18px; }
@media (max-width: 767px) {
  .urbe-pd-steps { grid-template-columns: 1fr; }
  .urbe-pd-panel > div[style] { padding: 18px !important; }
}

/* Faixa escura */
.urbe-pd-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--u-max);
  margin: var(--u-space) auto 0;
  padding: 0 var(--u-gutter);
}
.urbe-pd-band-media { overflow: hidden; border-radius: 20px 0 0 20px; background: var(--u-soft); }
.urbe-pd-band-media img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.urbe-pd-band-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 5vw, 72px);
  border-radius: 0 20px 20px 0;
  background: var(--u-dark);
  color: rgba(255, 255, 255, .78);
}
.urbe-pd-band-content:first-child { grid-column: 1 / -1; border-radius: 20px; }
.urbe-pd-band-title { margin: 0 0 14px; color: #fff; font-size: clamp(24px, 3vw, 40px); font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.urbe-pd-band-content p { max-width: 460px; margin: 0 0 26px; }

.urbe-pd-related { padding: var(--u-space) 0; }

@media (max-width: 991px) {
  .urbe-pd-body { grid-template-columns: 1fr; grid-template-areas: "card" "story"; }
  .urbe-pd-hero ~ .urbe-pd-body .urbe-pd-card { margin-top: -100px; }
  .urbe-pd-band { grid-template-columns: 1fr; }
  .urbe-pd-band-media { border-radius: 20px 20px 0 0; }
  .urbe-pd-band-media img { min-height: 0; aspect-ratio: 4 / 3; }
  .urbe-pd-band-content { border-radius: 0 0 20px 20px; }
}

@media (max-width: 767px) {
  .urbe-pd-hero { display: none; }
  .urbe-pd-rio-gallery { display: block; }
  .urbe-pd-rio-gallery .swiper-container { border-radius: 0 0 20px 20px; background: var(--u-soft); }
  .urbe-pd-body { padding-top: 20px; gap: 32px; }
  .urbe-pd-hero ~ .urbe-pd-body .urbe-pd-card,
  .urbe-pd-card { margin-top: 0; padding: 0; box-shadow: none; }
  .urbe-pd-story { padding-top: 0; }
  .urbe-pd-story-title { display: none; }
  .urbe-pd-feats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .urbe-pd-feats div { padding: 16px; }
}

/*------------------------------ Responsivo ------------------------------*/

@media (max-width: 991px) {
  .urbe-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .urbe-community { grid-template-columns: 1fr; }
  .urbe-community-content { text-align: center; }
  .urbe-community-content .urbe-subtitle { margin-left: auto; margin-right: auto; }
  .urbe-look-card { position: relative; right: auto; bottom: auto; width: auto; margin: -40px 16px 0; }
}

@media (max-width: 767px) {
  .urbe-hero { min-height: 560px; }
  .urbe-hero-media img { object-position: var(--focus-mobile, var(--focus, 50% 50%)); }
  .urbe-hero-content { bottom: 128px; }
  .urbe-hero-text { font-size: 14px; margin-bottom: 26px; }
  .urbe-hero-actions .urbe-btn { min-height: 48px; padding: 0 26px; }
  .urbe-hero-dots { bottom: 88px; }
  .urbe-head-split { flex-direction: column; align-items: flex-start; }
  .urbe-rail { grid-auto-columns: 72%; gap: 12px; }
  .urbe-rail-nav .urbe-round { display: none; }
  .urbe-look-media img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
  /* Foto 1920x900 recortada em 4:3 no centro: mostra 62,5% da largura */
  .urbe-spot { left: calc((var(--sx, 50) - 18.75) / .625 * 1%); }
  .urbe-look-card { margin: -32px 10px 0; padding: 12px; }
  .urbe-look-thumb, .urbe-look-thumb img { flex-basis: 84px; width: 84px; height: 84px; }
  .urbe-look-text { display: none; }
  .urbe-benefits-grid { gap: 10px; }
  .urbe-benefit { padding: 20px 16px; }
  .urbe-community-img:nth-child(2n),
  .urbe-js .urbe-community-img:nth-child(2n)[data-reveal].is-visible { transform: translateY(20px); }
}

@media (max-width: 420px) {
  .urbe-benefits-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .urbe-marquee-track, .urbe-hero-scroll, .urbe-spot::before { animation: none; }
  .urbe-hero-media img, .urbe-hero-content > *, .urbe-cat-media img, .urbe-community-img img, .item-product .item-image img { transition: none !important; transform: none !important; }
  .urbe-hero-slide { transition: none; }
  .urbe-manifesto-media { transform: none !important; }
}