/* ============================================================
   Página de unidade (landing rica) — reaproveita os componentes
   reais do site (mk-hero, sobre__grid, prod-item, servico, feat,
   ie, conversao). Só o que falta vive aqui. Prefixo .u-
   ============================================================ */

/* ---------- Hero: selos + números dentro do mk-hero ---------- */
.u-hero__selos { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.u-selo {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5em 1em; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: .82rem; font-weight: 600;
}
.u-selo::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #ff5a5a; }

.u-hero__stats {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 52px);
  margin-top: clamp(24px, 3.5vw, 40px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid rgba(255,255,255,.2);
}
.u-stat { display: flex; flex-direction: column; }
.u-stat__num { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1; color: #fff; }
.u-stat__label { margin-top: .5rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mk-hero .btn, .mk-hero .amb { margin-top: 1.9rem; }

/* ---------- Malha "planta técnica" 46px (assinatura, do timeline) ---------- */
.mesh { position: relative; overflow: hidden; }
.mesh::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 26%, #000 42%, transparent 82%);
          mask-image: radial-gradient(120% 92% at 50% 26%, #000 42%, transparent 82%);
}
/* sobre superfície escura a malha vira clara */
.surface--dark.mesh::before, .surface--char.mesh::before, .surface--red.mesh::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
}
.mesh > .container { position: relative; z-index: 1; }

/* ---------- Segmentos: mini-cards com ícone (reaproveita a linguagem do .feat) ---------- */
.u-seg-grid { grid-template-columns: repeat(3, 1fr); }
.u-seg {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.4rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.u-seg:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d8d8d8; }
.u-seg__ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 11px; color: var(--red); background: rgba(166,3,3,.08);
}
.u-seg__ic svg { width: 22px; height: 22px; }
.u-seg__name { font-weight: 700; font-size: 1.02rem; color: var(--ink); line-height: 1.2; }
@media (max-width: 820px) { .u-seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .u-seg-grid { grid-template-columns: 1fr; } }

/* ---------- Categoria de produto (mesmo bloco da página de produtos) ---------- */
.u-cat + .u-cat { margin-top: clamp(40px, 5vw, 68px); }
.u-cat__head { margin-bottom: 1.6rem; }
.u-cat__head h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 1rem; }
.u-catnote { margin-top: clamp(28px, 3vw, 44px); font-size: .95rem; color: var(--gray); }

/* ---------- Galeria: grade de fotos arredondadas com zoom no hover ---------- */
.u-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.u-gal__item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--ink); box-shadow: var(--shadow); }
.u-gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-weight); }
.u-gal__item:hover img { transform: scale(1.06); }
.u-gal__item--wide { grid-column: span 2; }
@media (max-width: 760px) { .u-gal { grid-template-columns: repeat(2, 1fr); } .u-gal__item--wide { grid-column: span 2; } }
@media (max-width: 480px) { .u-gal { grid-template-columns: 1fr; } .u-gal__item--wide { grid-column: auto; } }

/* ---------- Atuação / logística ---------- */
.u-atuacao__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.u-atuacao__tags { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.u-atuacao__tags li { padding: .5em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); font-size: .9rem; font-weight: 600; }
.u-frota { margin-top: 1.6rem; font-size: .95rem; color: rgba(255,255,255,.78); }
.u-atuacao__card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }
.u-atuacao__card h3 { font-size: 1.2rem; color: #fff; }
.u-atuacao__card p { margin-top: .7rem; color: rgba(255,255,255,.78); font-size: .96rem; }
@media (max-width: 820px) { .u-atuacao__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ (acordeão limpo, arredondado) ---------- */
.u-faq { max-width: 860px; }
.u-faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); margin-bottom: .9rem; overflow: hidden; }
.u-faq__q { width: 100%; text-align: left; padding: 1.2rem 1.5rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.u-faq__q::after { content: "+"; flex: 0 0 auto; color: var(--red); font-size: 1.4rem; line-height: 1; transition: transform .25s var(--ease-weight); }
.u-faq__item.is-open .u-faq__q::after { transform: rotate(45deg); }
.u-faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-weight); }
.u-faq__item.is-open .u-faq__a { max-height: 500px; }
.u-faq__a p { padding: 0 1.5rem 1.3rem; color: #4a4a4a; max-width: 68ch; }

/* ---------- Contato da unidade ---------- */
.u-contato__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.u-legal { margin-top: 1.6rem; font-size: .82rem; color: var(--gray); line-height: 1.5; }
@media (max-width: 760px) { .u-contato__grid { grid-template-columns: 1fr; } }

/* ---------- Como chegar (mapa) ---------- */
.u-mapa { margin-top: clamp(32px, 4.5vw, 56px); }
.u-mapa__label { margin-bottom: .9rem; }
.u-mapa__canvas { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.u-mapa__canvas iframe { display: block; width: 100%; height: clamp(300px, 42vw, 440px); border: 0; }
.u-mapa__route { position: absolute; right: clamp(14px, 2vw, 22px); bottom: clamp(14px, 2vw, 22px); z-index: 2; box-shadow: 0 12px 26px -10px rgba(13,13,13,.55); }

/* ============================================================
   HERO com dois cards de imagem (ex-protótipo 3) — texto/números à
   esquerda, dois cards rotacionados à direita sobre a malha clara.
   ============================================================ */
.rr3-hero { position: relative; overflow: hidden; background: #fff; }
.rr3-hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 120% at 50% 45%, #000 55%, transparent 88%);
          mask-image: radial-gradient(130% 120% at 50% 45%, #000 55%, transparent 88%); }
.rr3-hero::before { content: ""; position: absolute; left: 30%; top: 42%;
  width: min(820px, 70vw); height: 520px; transform: translate(-50%, -42%);
  background: radial-gradient(closest-side, rgba(166,3,3,.13), rgba(166,3,3,.03) 60%, transparent 78%);
  filter: blur(52px); z-index: 0; pointer-events: none; }
.rr3-inner { position: relative; z-index: 1; display: flex; align-items: center;
  gap: clamp(30px, 5vw, 88px); min-height: clamp(560px, 84vh, 860px);
  padding-block: clamp(44px, 7vh, 84px); padding-inline: clamp(24px, 5vw, 96px); }
.rr3-left { width: 50%; display: flex; flex-direction: column; }
.rr3-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -.025em; color: var(--ink); max-width: 15ch; }
.rr3-title .accent { background: none; color: var(--red); padding: 0; border-radius: 0; }
.rr3-bar { width: clamp(64px, 6vw, 88px); height: 5px; border-radius: 999px; background: var(--red); margin: clamp(18px, 2.4vw, 30px) 0; }
.rr3-sub { max-width: 48ch; color: #4a4a4a; font-size: clamp(1rem, 1.15vw, 1.14rem); line-height: 1.6; }
.rr3-actions { margin-top: clamp(24px, 3vw, 34px); }
.rr3-stats { display: flex; flex-wrap: wrap; gap: clamp(30px, 3.4vw, 58px);
  margin-top: clamp(26px, 3.4vw, 40px); padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--line); }
.rr3-stat { display: flex; flex-direction: column; }
.rr3-stat__num { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1; color: var(--red); }
.rr3-stat__label { margin-top: .5rem; font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--gray); white-space: nowrap; }
.rr3-right { width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rr3-cards { position: relative; width: 100%; height: clamp(380px, 44vw, 540px); }
.rr3-card { position: absolute; top: 50%; left: 50%;
  width: clamp(268px, 31vw, 460px); aspect-ratio: 4 / 3;
  border-radius: 20px; overflow: hidden; background: #fff; border: 6px solid #fff;
  box-shadow: 0 34px 60px -22px rgba(13,13,13,.42), 0 12px 26px rgba(0,0,0,.14);
  opacity: 0; transition: transform .5s var(--ease-weight), box-shadow .4s var(--ease-weight), opacity .6s ease; }
.rr3-card img:not(.rr3-card__logo) { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr3-card__logo { position: absolute; z-index: 3; right: clamp(10px, 1.3vw, 16px); bottom: clamp(10px, 1.3vw, 16px);
  height: clamp(34px, 3.4vw, 56px); width: auto; display: block;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.55)); pointer-events: none; }
.rr3-card--back  { transform: translate(-50%, -50%) translateX(27%) rotate(-6deg); z-index: 1; }
.rr3-card--front { transform: translate(-50%, -50%) translateX(-27%) rotate(6deg); z-index: 2; }
.rr3-cards:not(.is-in) .rr3-card--back  { transform: translate(-50%, -50%) translateX(66%) rotate(-11deg); }
.rr3-cards:not(.is-in) .rr3-card--front { transform: translate(-50%, -50%) translateX(30%) rotate(1deg); }
.rr3-cards.is-in .rr3-card { opacity: 1; }
.rr3-cards.is-in .rr3-card--front { transition-delay: .12s; }
@media (hover: hover) {
  .rr3-cards.is-in .rr3-card--back:hover  { transform: translate(-50%, -50%) translateX(27%) rotate(-3deg) translateY(-12px); z-index: 3; }
  .rr3-cards.is-in .rr3-card--front:hover { transform: translate(-50%, -50%) translateX(-27%) rotate(3deg) translateY(-12px); z-index: 4; }
}
.rr3-rise { opacity: 0; animation: rr3-risek .7s var(--ease-weight) both; }
.rr3-rise--1 { animation-delay: .04s; } .rr3-rise--2 { animation-delay: .12s; }
.rr3-rise--3 { animation-delay: .2s; } .rr3-rise--4 { animation-delay: .3s; } .rr3-rise--5 { animation-delay: .42s; }
@keyframes rr3-risek { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .rr3-inner { flex-direction: column; align-items: stretch; min-height: 0; gap: clamp(28px, 6vw, 40px); }
  .rr3-left, .rr3-right { width: 100%; }
  .rr3-cards { height: clamp(340px, 80vw, 470px); }
  .rr3-card { width: clamp(230px, 62vw, 360px); }
}
@media (max-width: 420px) {
  .rr3-card--back  { transform: translate(-50%, -50%) translateX(30%) rotate(-6deg); }
  .rr3-card--front { transform: translate(-50%, -50%) translateX(-20%) rotate(6deg); }
  .rr3-cards:not(.is-in) .rr3-card--back  { transform: translate(-50%, -50%) translateX(66%) rotate(-10deg); }
  .rr3-cards:not(.is-in) .rr3-card--front { transform: translate(-50%, -50%) translateX(30%) rotate(1deg); }
}

/* ============================================================
   PORTFÓLIO com abas (ex-protótipo 3) — abas em UMA linha só
   (fitTabs reduz --rr-fs até caber) + grid de produtos por linha.
   ============================================================ */
.rr-cat { position: relative; }
.rr-cnav { display: flex; flex-wrap: nowrap; overflow-x: auto; column-gap: calc(var(--rr-fs, 1.25rem) * .85); margin-top: clamp(28px, 3.6vw, 46px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.rr-cnav::-webkit-scrollbar { display: none; }
.rr-ctab { flex: 0 0 auto; position: relative; margin-bottom: -1px; padding: .75rem .1rem; white-space: nowrap; font-family: var(--display); font-weight: 400; letter-spacing: -.01em; font-size: var(--rr-fs, clamp(1rem, 1.5vw, 1.3rem)); color: #b3b3b3; border-bottom: 3px solid transparent; transition: color .25s var(--ease-weight); }
.rr-ctab.is-active { color: var(--ink); border-bottom-color: var(--red); }
.rr-ctab:hover { color: #6a6a6a; }
.rr-ctab.is-active:hover { color: var(--ink); }
.rr-cpanel { display: none; }
.rr-cpanel.is-active { display: block; animation: rr-fade .4s var(--ease-weight) both; }
@keyframes rr-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(22px, 2.6vw, 32px); }
.rr-prod { background: #fff; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .28s var(--ease-weight), box-shadow .28s var(--ease-weight); }
.rr-prod:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rr-prod__media { aspect-ratio: 4/3; background: #fff; overflow: hidden; display: grid; place-items: center; padding: clamp(12px, 1.4vw, 18px); border-bottom: 1px solid var(--line); }
.rr-prod__media img { max-width: min(100%, 168px); max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.rr-prod__body { padding: clamp(13px, 1.4vw, 17px) clamp(14px, 1.5vw, 18px) clamp(16px, 1.7vw, 20px); }
.rr-prod__name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.rr-prod__desc { margin-top: .35rem; font-size: .85rem; line-height: 1.45; color: #5a5a5a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rr-cpanel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(20px, 2.4vw, 30px); }
.rr-cpanel__note { font-size: .84rem; color: var(--gray); max-width: 52ch; }
@media (max-width: 900px) { .rr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rr-grid { grid-template-columns: 1fr 1fr; } .rr-prod__desc { -webkit-line-clamp: 2; } }