noscript{display:none}
/* ============================================================
   SKLO — Corporate stylesheet
   Brand: Montserrat + black + #FDDF08 yellow
   Shared by all pages.
   ============================================================ */

:root{
  /* Palette */
  --black:#0A0A0A;
  --black-2:#161616;
  --ink:#1A1A1A;
  --ink-soft:#444;
  --muted:#777;
  --line:rgba(10,10,10,0.10);
  --line-dark:rgba(255,255,255,0.10);
  --bg:#F7F7FB;            /* light section background */
  --white:#FFFFFF;
  --yellow:#FDDF08;
  --yellow-hover:#FFEA5A;

  /* Type */
  --font:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw:1320px;
  --pad:clamp(24px, 5vw, 80px);
  --radius:12px;
  --radius-s:8px;
  --radius-lg:16px;
  --radius-pill:999px;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--white);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:16px;line-height:1.65;font-weight:400}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;font-weight:700;letter-spacing:-0.005em;line-height:1.15}
p{margin:0}

.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ─── Display headlines (uppercase, with yellow accent) ─── */
.display{
  font-weight:600;letter-spacing:-0.018em;
  font-size:clamp(30px, 4.2vw, 56px);
  line-height:1.12;
}
.display .y{color:inherit}
.display-lg{
  font-weight:600;letter-spacing:-0.022em;
  font-size:clamp(38px, 5.8vw, 78px);
  line-height:1.08;
}
.display-lg .y{color:inherit}
.lead{font-size:17px;line-height:1.75;color:var(--ink-soft);max-width:56ch;font-weight:400}
.lead.dark-on-light{color:#333}

/* ─── Page numbers (slide style "X — 15") ─── */
.pagenum{font-weight:400;font-size:18px;letter-spacing:0.04em;color:#888}
.pagenum .sep{display:inline-block;margin:0 6px;color:#aaa}
.dark-section .pagenum{color:#888}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;border-radius:var(--radius-pill);
  font-weight:700;font-size:14px;letter-spacing:0.01em;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn .a{width:14px;height:14px;transition:transform .25s var(--ease)}
.btn:hover .a{transform:translateX(3px)}
.btn-yellow{background:var(--yellow);color:var(--black)}
.btn-yellow:hover{background:var(--yellow-hover);transform:none;box-shadow:none}
.btn-black{background:var(--black);color:var(--white)}
.btn-black:hover{background:#222}
.btn-outline{border:1.5px solid var(--black);color:var(--black)}
.btn-outline:hover{background:var(--black);color:#fff}
.btn-outline-light{border:1.5px solid rgba(255,255,255,0.5);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--black);border-color:#fff}
/* Quiet / de-emphasised button (header CTA) */
.btn-quiet{background:transparent;color:var(--ink);border:1.5px solid var(--line);padding:11px 20px;font-weight:600}
.btn-quiet:hover{background:transparent;border-color:var(--black);color:var(--black);transform:none;box-shadow:none}
.btn-quiet .a{opacity:.6}

/* ─── Section wrapper ─── */
section{padding:clamp(88px, 11vw, 160px) 0;position:relative}
.dark-section{background:var(--black);color:#fff}
.dark-section.dark-soft{background:var(--black)}
.dark-section .lead{color:rgba(255,255,255,0.78)}
.dark-section .display .y,
.dark-section .display-lg .y{color:inherit}
.light-section{background:var(--bg);color:var(--ink)}

/* ============================================================
   TOPBAR + HEADER
   ============================================================ */
/* header phone (replaces the old black top bar) */
.hd-phone{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-weight:600;font-size:13.5px;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;transition:color .2s var(--ease)}
.hd-phone svg{width:16px;height:16px;color:#1a8a4a;flex:none}
.hd-phone:hover{color:var(--black)}
@media (max-width:1120px){.hd-phone span{display:none}.hd-phone{margin-left:auto;padding:6px}}
@media (max-width:420px){.hd-phone{display:none}}
.topbar a{color:rgba(255,255,255,0.85);transition:color .2s var(--ease)}
.topbar a:hover{color:var(--yellow)}
.topbar-left{display:flex;gap:22px;align-items:center}
.topbar-left .dot{width:6px;height:6px;background:var(--yellow);border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}
.topbar-right{display:flex;gap:18px;align-items:center}
.lang{display:inline-flex;gap:0;border:1px solid rgba(255,255,255,0.18);border-radius:6px;padding:2px}
.lang button{padding:4px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:0.06em;color:rgba(255,255,255,0.7);transition:all .2s var(--ease)}
.lang button.is-active{background:var(--yellow);color:var(--black)}
@media (max-width:760px){.topbar-left .addr,.topbar-left .exp{display:none}}

.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,0.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:transform .5s var(--ease),opacity .5s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.header--hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.header--scrolled{background:rgba(255,255,255,0.72);box-shadow:0 12px 32px -24px rgba(10,10,10,0.5);border-bottom-color:transparent}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px;position:relative}
.logo{display:inline-flex;align-items:center;color:var(--black);transition:opacity .2s var(--ease)}
.logo:hover{opacity:.75}
.foot-brand .logo:hover{opacity:1;padding-left:0;transform:none}
.logo img{height:30px;width:auto;display:block}
.foot-brand .logo img{height:30px}
.hero-brand img{height:46px;width:auto;display:block;margin-bottom:30px}
.nav{display:flex;align-items:center;gap:28px}
.nav a, .nav-trigger{font-weight:500;font-size:12px;color:var(--ink);position:relative;padding:6px 0;text-transform:uppercase;letter-spacing:0.09em;transition:color .2s var(--ease)}
.nav a:hover, .nav-trigger:hover, .nav-item:hover .nav-trigger{color:var(--black)}
.nav a::after, .nav-trigger::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left center;transition:transform .26s var(--ease)}
.nav a:hover::after, .nav-trigger:hover::after, .nav-item:hover .nav-trigger::after{transform:scaleX(1)}
.nav a.is-active{color:var(--black);position:relative}
.nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow);transform:scaleX(1)}
.nav-item{position:static}
.nav-trigger{display:inline-flex;align-items:center;gap:6px}
/* keep hover alive across the empty band between the trigger and the header's
   bottom edge, where the mega panel takes over — hit area only, layout unchanged */
.nav-trigger{padding-bottom:34px;margin-bottom:-31px}
.nav-trigger::after{bottom:31px}
.nav-trigger svg{width:10px;height:10px;transition:transform .25s var(--ease)}
.nav-item:hover .nav-trigger svg{transform:rotate(180deg)}

/* ── Products mega-menu (full-width, image + title grid) ── */
.mega{
  position:absolute;left:0;right:0;top:100%;
  padding:14px var(--pad) 0;z-index:40;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s linear .24s;
}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s}
.mega-inner{
  max-width:var(--maxw);margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 44px 90px -44px rgba(10,10,10,0.30);
  padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px;align-items:start;
  width:min(900px,calc(100vw - 32px));
}
/* grouped 3-column mega menu */
.mega-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 10px 6px}
.nav .mega-card{
  display:flex;align-items:center;gap:12px;min-height:58px;
  padding:8px 10px;border-radius:10px;
  text-transform:none;letter-spacing:0;color:var(--ink);
  transition:background .18s var(--ease);
}
.nav .mega-card:hover{background:rgba(253,223,8,0.16);color:var(--ink)}
.nav .mega-card::after{display:none}
.mega-card .mc-img{flex:0 0 54px;width:54px;height:46px;border-radius:8px;overflow:hidden;background:#ececf2}
.mega-card .mc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.nav .mega-card:hover .mc-img img{transform:scale(1.07)}
.mega-card .mc-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mega-card .mc-t{font-weight:600;font-size:13px;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--ink)}
.mega-card .mc-s{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0.01em}
@media (max-width:1100px){.mega-inner{gap:8px 10px;width:min(740px,calc(100vw - 24px))}}

/* ===== Breadcrumb bar — subtle, pinned, borderless ===== */
/* ===== Breadcrumb bar — universal: same style & position on ALL pages ===== */
.crumb-bar{position:static;z-index:25;background:#fff}
.crumb-bar--flow{position:static;background:#fff}
/* blog index: blend breadcrumbs into the grey page bg, no white strip */
.crumb-bar--merge{position:static;background:transparent;border:0;backdrop-filter:none;margin:0 clamp(16px,2.4vw,28px)}
/* one standard: same distance from the header on every page that shows a plain crumb bar */
.crumb-bar .container{display:flex;align-items:center;min-height:0;padding-top:clamp(34px,3.6vw,40px);padding-bottom:clamp(10px,1.2vw,14px)}
.crumb-bar--merge .container{min-height:0;padding-top:clamp(34px,3.6vw,40px);padding-bottom:clamp(10px,1.2vw,14px)}
/* legal pages use a narrower 820px measure — keep the crumbs on the same left edge */
.crumb-bar--legal .container{max-width:820px}
.crumb-bar .breadcrumbs{margin:0;font-size:12px}
.crumb-bar .breadcrumbs a{color:var(--muted)}
.crumb-bar .breadcrumbs a:hover{color:var(--ink)}
.crumb-bar .breadcrumbs .sep{color:var(--line)}
.crumb-bar .breadcrumbs [aria-current]{color:var(--muted);font-weight:500}

/* desktop header row: logo · nav (centred in the free space) · phone · CTA */
@media (min-width:1121px){
  .header-inner{display:flex;align-items:center;justify-content:flex-start;gap:18px}
  .header-inner .logo{flex:none;justify-self:auto}
  .header-inner .nav{position:static;left:auto;top:auto;transform:none;margin:0 auto;flex:none}
  .header-inner .hd-phone{order:1;flex:none;margin:0}
  .header .btn-quiet{order:2;flex:none;justify-self:auto}
}
/* header CTA: grey outline + black text, fills brand-yellow on hover (matches Sobre page) */
.header .btn-quiet{justify-self:end;border:1.5px solid var(--line);background:transparent;color:var(--ink);padding:9px 18px;border-radius:var(--radius-pill);font-weight:600;font-size:12px;letter-spacing:0.04em}
.header .btn-quiet:hover{color:#0A0A0A;background:var(--yellow);border-color:var(--yellow)}
.header .btn-quiet .a{opacity:1;color:inherit}

/* burger — no border, three bars, bottom bar two-thirds */
.menu-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;border:0;background:transparent;padding:0;margin-left:4px}
/* transform-only morph: no width/top animation, so it never stutters */
.menu-toggle span{width:24px;height:2px;background:var(--black);position:relative;border-radius:2px;will-change:transform,opacity;transition:opacity .18s linear,transform .34s cubic-bezier(.4,0,.2,1)}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--black);border-radius:2px;transform-origin:50% 50%;will-change:transform;transition:transform .42s cubic-bezier(.34,1.1,.32,1)}
.menu-toggle span::before{top:-7px}
.menu-toggle span::after{top:7px;transform:translateX(-4px) scaleX(.6667)}  /* bottom bar ≈ two-thirds */
.menu-toggle:hover span::after{transform:none}
/* burger → X when open */
.menu-toggle.is-open span{background:transparent;transition:background .12s linear}
.menu-toggle.is-open span::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1120px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
}

/* ===== Full-screen mobile menu ===== */
.drawer{position:fixed;inset:0;background:transparent;z-index:70;visibility:hidden;transition:visibility 0s linear .52s}
.drawer.is-open{visibility:visible;transition:visibility 0s}
.drawer-inner{position:absolute;inset:0;width:100%;background:#fff;padding:62px clamp(24px,7vw,64px) 34px;overflow-y:auto;display:flex;flex-direction:column;transform:translateY(-100.5%);will-change:transform;transition:transform .52s cubic-bezier(.22,1,.36,1)}
.drawer.is-open .drawer-inner{transform:translateY(0)}
/* staggered reveal of the menu rows */
@keyframes drawerRow{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.drawer.is-open .drawer-acc>*,.drawer.is-open .drawer-foot{animation:drawerRow .52s cubic-bezier(.22,1,.36,1) both}
.drawer.is-open .drawer-acc>*:nth-child(1){animation-delay:.16s}
.drawer.is-open .drawer-acc>*:nth-child(2){animation-delay:.21s}
.drawer.is-open .drawer-acc>*:nth-child(3){animation-delay:.26s}
.drawer.is-open .drawer-acc>*:nth-child(4){animation-delay:.31s}
.drawer.is-open .drawer-acc>*:nth-child(5){animation-delay:.36s}
.drawer.is-open .drawer-acc>*:nth-child(6){animation-delay:.41s}
.drawer.is-open .drawer-acc>*:nth-child(7){animation-delay:.45s}
.drawer.is-open .drawer-acc>*:nth-child(n+8){animation-delay:.49s}
.drawer.is-open .drawer-foot{animation-delay:.5s}
@media (prefers-reduced-motion:reduce){.drawer-inner{transition-duration:.01s}.drawer.is-open .drawer-acc>*,.drawer.is-open .drawer-foot{animation:none}}
/* close control: same three bars, pinned where the burger sits, morphs into the X */
.drawer-x{display:inline-flex!important;position:fixed;top:16px;right:var(--pad);z-index:3;width:42px;height:42px;align-items:center;justify-content:center}
.drawer .drawer-close{display:none}
/* close mark: bare glyph, no filled pill */
.drawer-close{position:absolute;top:12px;right:clamp(16px,5vw,32px);width:44px;height:44px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:300;line-height:1;color:var(--black);transition:transform .28s var(--ease),color .2s var(--ease)}
.drawer-close:hover{background:transparent;color:var(--black);transform:rotate(90deg)}
.drawer-nav{display:flex;flex-direction:column}
.drawer-inner a:not(.btn){display:block;padding:15px 0;font-weight:600;font-size:clamp(21px,5.5vw,28px);line-height:1.15;letter-spacing:-0.012em;text-transform:none;color:var(--black);border-bottom:1px solid var(--line);transition:color .18s var(--ease)}
.drawer-inner a:not(.btn):hover{color:var(--black);opacity:.6}
.drawer-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:14px}
.drawer-foot .btn{width:100%;justify-content:center}
.drawer-foot .dphone{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;color:var(--ink)}
.drawer-foot .dphone svg{width:17px;height:17px;color:#1a8a4a}
.drawer-inner .drawer-foot .dphone{border-bottom:0;padding:0;font-size:15px}

/* ── Drawer accordion (compact mobile menu) ── */
.drawer-acc{display:flex;flex-direction:column;margin-top:6px}
.dgroup{border-bottom:1px solid var(--line)}
.dgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-weight:600;font-size:19px;letter-spacing:-0.01em;color:var(--black)}
.dgroup>summary::-webkit-details-marker{display:none}
.dgroup .dchev{width:15px;height:15px;color:var(--muted);transition:transform .25s var(--ease);flex:0 0 auto}
.dgroup[open]>summary .dchev{transform:rotate(180deg)}
.dsub{display:flex;flex-direction:column;padding:0 0 12px 2px;overflow:hidden;transition:height .34s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.dsub{transition:none}}
.drawer-inner .dsub a:not(.btn){padding:9px 0;font-size:16px;font-weight:500;color:#4a4a50;border-bottom:0;letter-spacing:0}
.drawer-inner .dsub a:not(.btn):hover{color:var(--black)}
.drawer-inner .drawer-acc>.dlink:not(.btn){padding:14px 0;font-size:19px;font-weight:600;color:var(--black);border-bottom:1px solid var(--line)}
/* keep the WhatsApp float from covering the open menu */
.drawer.is-open ~ .wa{opacity:0;visibility:hidden;pointer-events:none}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{position:relative;background:var(--black);color:#fff;overflow:hidden;min-height:clamp(420px,calc(100vh - 128px),620px);margin:16px clamp(16px,2.4vw,28px) 0;border-radius:16px}
.hero-bg{position:absolute;inset:0}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.45) 45%, rgba(10,10,10,0.85) 100%)}
.hero-inner{position:relative;padding-top:48px;padding-bottom:56px;display:block;min-height:auto;margin-left:auto;margin-right:auto}
.hero-inner > div{max-width:720px}
.hero-brand{display:inline-flex;align-items:center;color:#fff;margin-bottom:0}
.hero-brand img{height:46px;width:auto;display:block;margin-bottom:30px}
.hero h1{font-weight:600;font-size:clamp(34px, 4.6vw, 60px);line-height:1.12;letter-spacing:-0.02em;max-width:20ch}
.hero h1 .light{color:rgba(255,255,255,0.78);font-weight:400}
.hero h1 .y{color:inherit}
.hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,0.85);gap:18px;flex-wrap:wrap}
.hero-foot .center{display:flex;gap:34px;align-items:center}
.hero-foot a{transition:color .2s var(--ease)}
.hero-foot a:hover{color:var(--yellow)}

.review-stack{display:flex;flex-direction:column;gap:14px;justify-self:end;max-width:280px;width:100%}
.review-card{background:rgba(10,10,10,0.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:#fff;transition:transform .25s var(--ease)}
.review-card:hover{transform:translateY(-2px)}
.review-card .ico{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
.review-card .nm{font-size:13px;font-weight:600;color:rgba(255,255,255,0.9)}
.review-card .sc{font-size:22px;font-weight:700;letter-spacing:-0.01em;justify-self:end}
.review-card .stars{grid-column:1/-1;font-size:11px;color:var(--yellow);letter-spacing:1px;margin-top:2px}
.review-card.tp .stars{color:#00B67A}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .review-stack{justify-self:start;flex-direction:row;flex-wrap:wrap;max-width:none}
  .review-card{flex:1 1 240px}
  .hero-foot{position:static;margin-top:36px;padding:0}
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-eyebrow{
  display:inline-block;font-weight:600;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px
}
.dark-section .sec-eyebrow{color:rgba(255,255,255,0.55)}

.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:80px}
.sec-head .lead{margin-top:14px}
/* stacked variant: subheading sits under the title instead of off to the right */
.sec-head--stack{grid-template-columns:1fr;gap:18px;align-items:start;margin-bottom:64px}
.sec-head--stack .lead{margin-top:0;max-width:52ch}
@media (max-width:880px){.sec-head{grid-template-columns:1fr;gap:20px;margin-bottom:44px;align-items:start}}

/* ============================================================
   PRODUCT GRID  (home) — bigger, respectable, uniform sizing
   ============================================================ */
.product-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px}
.product-card{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;
  aspect-ratio:4/5;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 36px 70px -30px rgba(10,10,10,0.32)}
.product-card .img{position:absolute;inset:0;overflow:hidden;z-index:0}
.product-card .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);display:block}
.product-card:hover .img img{transform:scale(1.06)}
.product-card .grad{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.92) 100%);z-index:1}
.product-card .body{position:relative;z-index:2;padding:0 26px 26px;color:#fff;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end}
.product-card .num{position:absolute;top:18px;left:26px;color:rgba(255,255,255,0.85);font-weight:600;font-size:11px;letter-spacing:0.18em;z-index:2}
.product-card .yellow-tag{position:absolute;top:16px;right:16px;background:var(--yellow);color:var(--black);font-weight:700;font-size:11px;letter-spacing:0.08em;padding:6px 11px;border-radius:6px;text-transform:uppercase;z-index:2}
.product-card h3{font-weight:600;font-size:22px;line-height:1.14;letter-spacing:-0.012em;min-height:50px;display:flex;align-items:flex-end}
.product-card .sub{margin-top:10px;font-size:13px;color:rgba(255,255,255,0.85);font-weight:500;line-height:1.5;min-height:40px}
.product-card .arrow{position:absolute;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;background:var(--yellow);color:var(--black);display:inline-flex;align-items:center;justify-content:center;transform:translateX(60px) rotate(-45deg);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease);z-index:3}
.product-card:hover .arrow{transform:translateX(0) rotate(0deg);opacity:1}
.product-card .arrow svg{width:14px;height:14px}
.ph{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;background:repeating-linear-gradient(45deg, #1c1c1c 0 14px, #232323 14px 28px)}
@media (max-width:1080px){.product-grid{grid-template-columns:repeat(2, 1fr);gap:18px}.product-card{aspect-ratio:4/5}}
@media (max-width:520px){.product-grid{grid-template-columns:1fr;gap:14px}.product-card{aspect-ratio:5/6}.product-card h3{font-size:20px;min-height:auto}.product-card .body{min-height:auto;padding:0 22px 22px}.product-card .sub{min-height:auto}}

/* ============================================================
   PROJECTS GRID (slides 4-5 style: collaged cards)
   ============================================================ */
.projects-collage{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.pc-intro{grid-column:span 4;align-self:start;padding-top:8px}
.pc-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:0 22px 50px -28px rgba(10,10,10,0.22);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pc-card:hover{transform:translateY(-4px);box-shadow:0 30px 70px -28px rgba(10,10,10,0.32)}
.pc-card img,.pc-card .ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.pc-cap{padding:16px 4px 6px}
.pc-cap .loc{font-weight:700;font-size:15px;color:var(--black);margin-bottom:6px}
.pc-cap .desc{font-size:13px;color:#444;font-weight:500;line-height:1.55}
.pc-cap .desc b{font-weight:700;color:var(--black)}
/* offset cards for the collage look */
.pc-1{grid-column:1/span 4;margin-top:120px}
.pc-2{grid-column:5/span 4}
.pc-3{grid-column:9/span 4;margin-top:80px}
.pc-4{grid-column:5/span 4;margin-top:24px}
@media (max-width:980px){
  .pc-intro,.pc-1,.pc-2,.pc-3,.pc-4{grid-column:1/-1;margin-top:0}
  .pc-card+.pc-cap{padding-top:14px}
}

/* ============================================================
   PRODUCT PAGE TEMPLATE  (matches slides 6 & 7)
   ============================================================ */
.product-page{padding-top:60px;padding-bottom:80px}
.pp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:start}
.pp-title{font-weight:600;letter-spacing:-0.02em;font-size:clamp(34px, 4.6vw, 60px);line-height:1.08}
.pp-title .y{color:inherit}
.pp-text{margin-top:24px;font-size:15px;line-height:1.65;color:#333;max-width:50ch}
.pp-text + .pp-text{margin-top:18px}
.pp-text b{color:var(--black)}
.pp-systems{margin-top:38px;display:grid;grid-template-columns:repeat(4, 1fr);gap:14px}
.sys-card{background:#fff;border-radius:12px;padding:14px;text-align:center;box-shadow:0 14px 30px -22px rgba(10,10,10,0.25);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.sys-card:hover{transform:translateY(-2px);box-shadow:0 22px 40px -22px rgba(10,10,10,0.32)}
.sys-card .pic{width:100%;aspect-ratio:1/1;border-radius:8px;background:#F3F3F8;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:11px;overflow:hidden;margin-bottom:10px}
.sys-card .pic img{width:100%;height:100%;object-fit:contain;padding:14%}
.sys-card .nm{font-size:12px;font-weight:600;color:var(--black);letter-spacing:0}
.pp-sub{margin-top:36px;font-weight:600;font-size:18px;letter-spacing:-0.005em;color:var(--black)}
.pp-options{margin-top:18px;display:grid;grid-template-columns:repeat(4, 1fr);gap:14px}
.opt-card{background:#fff;border-radius:10px;padding:10px;text-align:center;box-shadow:0 10px 22px -18px rgba(10,10,10,0.2);transition:transform .2s var(--ease)}
.opt-card:hover{transform:translateY(-2px)}
.opt-card .pic{width:100%;aspect-ratio:1/1;border-radius:6px;background:#F3F3F8;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:10px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;overflow:hidden}
.opt-card .nm{margin-top:8px;font-size:11px;font-weight:600;color:#222}
.pp-features{margin-top:28px;display:grid;grid-template-columns:repeat(2, 1fr);gap:14px}
.feat-row{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:#fff;border-radius:12px;box-shadow:0 8px 18px -16px rgba(10,10,10,0.18)}
.feat-row .k{font-weight:700;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;width:80px;flex-shrink:0}
.feat-row .v{font-weight:700;font-size:14px;color:var(--black)}
.pp-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.pp-side{position:sticky;top:90px}
.pp-side .img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 60px -30px rgba(10,10,10,0.25)}
.pp-side .img img,.pp-side .img .ph{width:100%;aspect-ratio:3/4;object-fit:cover}
.pp-side .cap{margin-top:18px;text-align:right}
.pp-side .cap .tag{font-size:13px;color:#666;font-weight:500}
.pp-side .cap .nm{font-weight:700;font-size:16px;color:var(--black);margin-top:2px}
.pp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:56px}
@media (max-width:980px){
  .pp-grid{grid-template-columns:1fr;gap:36px}
  .pp-side{position:static}
  .pp-side .cap{text-align:left}
  .pp-systems,.pp-options{grid-template-columns:repeat(2,1fr)}
  .pp-features{grid-template-columns:1fr}
}

/* ============================================================
   "ABOUT / EXPERIÊNCIA" dark section
   ============================================================ */
.about-split{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.about-mission{margin-top:80px}
.partner-logos{margin-top:56px;display:flex;gap:36px;align-items:center;flex-wrap:wrap;opacity:0.92}
.partner-logos .pl{
  background:#fff;color:#000;font-weight:800;letter-spacing:0.02em;text-transform:uppercase;
  padding:10px 16px;border-radius:6px;font-size:13px;
  display:inline-flex;align-items:center;gap:8px;transition:transform .25s var(--ease)
}
.partner-logos .pl:hover{transform:translateY(-2px)}
.partner-logos .pl .badge{
  background:var(--black);color:#fff;font-weight:800;font-size:11px;padding:3px 6px;border-radius:3px
}
.partner-logos .pl.simple{background:transparent;color:#fff;font-weight:700}
@media (max-width:880px){.about-split{grid-template-columns:1fr;gap:24px}.about-mission{margin-top:0}}

/* ============================================================
   3-PILLAR (Design/Fabrico/Instalação) — dark
   ============================================================ */
.pillar-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:68px}
.pillar{padding:44px 28px 32px;border-radius:16px;transition:background .3s var(--ease)}
.pillar:hover{background:rgba(255,255,255,0.03)}
.pillar .num{font-weight:600;font-size:11px;letter-spacing:0.18em;color:rgba(255,255,255,0.55)}
.pillar .p-ic{display:inline-flex;width:48px;height:48px;border-radius:13px;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:var(--yellow)}
.pillar .p-ic svg{width:23px;height:23px}
.pillar .p-ic + h3{margin-top:20px}
.pillar h3{font-weight:600;font-size:27px;margin-top:14px;letter-spacing:-0.012em}
.pillar p{margin-top:16px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.72);max-width:34ch}
.pillar .more{margin-top:24px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--yellow)}
.pillar .more svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.pillar:hover .more svg{transform:translateX(4px)}
@media (max-width:880px){.pillar-strip{grid-template-columns:1fr;gap:4px}}

/* ============================================================
   CONSULTATION FORM
   ============================================================ */
.consult-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.consult .stats{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.consult .stat .v{font-weight:800;font-size:clamp(38px,4.4vw,56px);letter-spacing:-0.03em;line-height:1;white-space:nowrap}
.consult .stat .v .y{color:var(--yellow)}
.consult .stat .l{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#888;margin-top:8px;font-weight:600}
@media (max-width:520px){.consult .stats{grid-template-columns:1fr 1fr}}
.form{background:#fff;padding:38px;border-radius:14px;box-shadow:0 30px 60px -30px rgba(10,10,10,0.2)}
.form h3{font-weight:600;font-size:21px;letter-spacing:-0.012em}
.form .row{margin-top:18px}
.form label{display:block;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#666;margin-bottom:6px}
.form input{width:100%;padding:13px 14px;border:1.5px solid var(--line);background:#fff;border-radius:8px;font-family:inherit;font-size:14px;color:var(--ink);transition:border-color .2s var(--ease)}
.form input:focus{outline:none;border-color:var(--yellow)}
.form .submit{margin-top:24px;width:100%;background:var(--yellow);color:var(--black);padding:16px;border-radius:8px;font-weight:700;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;display:flex;justify-content:center;align-items:center;gap:10px;transition:background .2s var(--ease)}
.form .submit:hover{background:var(--yellow-hover)}
.form .fine{margin-top:10px;font-size:11px;color:#888;text-align:center}
@media (max-width:880px){.consult-grid{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   YOUTUBE / VIDEO SECTION (dark)
   ============================================================ */
.yt-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:50px;align-items:start}
.yt-window{background:#1c1c1c;border:1px solid var(--line-dark);border-radius:16px;padding:14px;position:relative}
.yt-chrome{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.yt-chrome .d{width:11px;height:11px;border-radius:50%;background:#444}
.yt-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.yt-card{background:#0e0e0e;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:16/9}
.yt-card .ph,.yt-card img{width:100%;height:100%;object-fit:cover;opacity:0.85}
.yt-card .yt-meta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px;color:#fff}
.yt-card .yt-title{font-weight:600;font-size:15px;line-height:1.16;letter-spacing:-0.008em;max-width:60%}
.yt-card .yt-title .y{color:inherit}
.yt-card .yt-play{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff}
.yt-card .yt-play svg{width:18px;height:18px;fill:#fff}
.yt-card .yt-wm{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.85)}
.yt-card .yt-wm svg{width:14px;height:14px}
@media (max-width:880px){.yt-grid{grid-template-columns:1fr;gap:24px}.yt-cards{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--black);color:rgba(255,255,255,0.78);padding:72px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.foot-grid h4{font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:18px}
.foot-grid a{display:block;padding:6px 0;font-size:14px;color:rgba(255,255,255,0.82);transition:color .2s var(--ease),padding-left .2s var(--ease)}
.foot-grid a:hover{color:var(--yellow);padding-left:5px}
.foot-grid a.foot-addr,.foot-grid a.foot-addr:hover{color:rgba(255,255,255,0.82);padding-left:0;cursor:pointer}
.foot-contact a[href^="tel:"],.foot-contact a[href^="tel:"]:hover,.foot-contact a.mail-guard,.foot-contact a.mail-guard:hover{color:rgba(255,255,255,0.82);padding-left:0}
.foot-brand p{margin-top:18px;font-size:13px;color:rgba(255,255,255,0.65);max-width:34ch}
.foot-deck{display:inline-flex !important;align-items:center;gap:8px;margin-top:20px;padding:2px 0 !important;border:0;font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#fff !important;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,0.45);transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.foot-deck svg{width:15px;height:15px;flex:none}
.foot-deck:hover{color:var(--yellow) !important;text-decoration-color:var(--yellow)}
.foot-deck:hover svg{transform:none}
.foot-social{display:flex;gap:10px;margin-top:22px}
.foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);display:inline-flex;align-items:center;justify-content:center;padding:0;transition:all .2s var(--ease)}
.foot-social a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--black);padding-left:0}
.foot-bottom{margin-top:54px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,0.45);gap:14px 24px;flex-wrap:wrap}
.foot-legal a{color:rgba(255,255,255,0.5);transition:color .2s var(--ease)}
.foot-legal a:hover{color:var(--yellow)}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:700px){
  .foot-contact{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;align-items:start}
  .foot-contact h4{grid-column:1/-1}
  .foot-contact a[href^="https"]{grid-column:1/-1}
}

/* WA float — official WhatsApp mark */
.wa{position:fixed;right:22px;bottom:22px;z-index:50;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 36px -8px rgba(37,211,102,0.55), 0 4px 14px -4px rgba(0,0,0,0.18);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.wa:hover{transform:scale(1.08);box-shadow:0 18px 44px -8px rgba(37,211,102,0.65)}
.wa svg{width:34px;height:34px;display:block}
@media (max-width:520px){.wa{width:54px;height:54px;right:16px;bottom:16px}.wa svg{width:30px;height:30px}}

/* ============================================================
   QUOTE MODAL — "Pedir uma chamada"
   ============================================================ */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,0.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s linear .25s;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-backdrop.is-open{opacity:1;visibility:visible;transition:opacity .25s var(--ease)}
.modal{position:relative;background:#fff;border-radius:16px;overflow:hidden;width:min(960px, 100%);max-height:calc(100vh - 48px);overflow-y:auto;display:grid;grid-template-columns:0.85fr 1fr;box-shadow:0 60px 120px -30px rgba(0,0,0,0.55);transform:translateY(20px) scale(0.98);transition:transform .35s var(--ease)}
.modal-backdrop.is-open .modal{transform:translateY(0) scale(1)}
.modal-side{position:relative;background:#1a1a1a;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:480px;overflow:hidden}
.modal-side .photo{position:absolute;inset:0;background-size:cover;background-position:center}
.modal-side .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.15) 30%, rgba(10,10,10,0.0) 60%)}
.modal-side .copy{position:relative;z-index:2;padding:36px 32px 26px}
.modal-side h3{font-weight:600;font-size:34px;line-height:1.1;letter-spacing:-0.018em}
.modal-side .copy p{margin-top:14px;font-size:14px;color:rgba(255,255,255,0.88);max-width:24ch;line-height:1.5;font-weight:500}
.modal-side .team{position:relative;background:var(--yellow);padding:18px 22px;display:flex;align-items:center;gap:14px;z-index:2}
.modal-side .team .team-avs{display:flex}
.modal-side .team .tav{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2.5px solid var(--yellow);margin-left:-13px;background:#1a1a1a;box-shadow:0 2px 7px rgba(0,0,0,.2)}
.modal-side .team .tav:first-child{margin-left:0}
.modal-side .team .tav img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block}
.modal-side .team .team-cap{font-weight:700;font-size:12.5px;color:#1a1a1a;line-height:1.32;max-width:18ch}
.modal-body{padding:32px 36px;position:relative}
.modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.94);display:flex;align-items:center;justify-content:center;font-size:17px;color:#111;z-index:6;transition:background .2s var(--ease);border:0;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.modal-close:hover{background:var(--yellow)}
.modal-body h3{font-weight:800;font-size:28px;letter-spacing:-0.01em;padding-right:46px}
.modal-body .sub{margin-top:8px;font-size:14px;color:#555;line-height:1.55;margin-bottom:22px}
.field{margin-bottom:14px;display:flex;flex-direction:column;min-width:0}
.field label{font-size:12px;font-weight:600;color:#333;margin-bottom:6px}
.field label .req{color:#e0492a}
.field input,.field select{appearance:none;-webkit-appearance:none;width:100%;padding:11px 13px;border:1.5px solid #e3e3e6;background:#F4F4F7;border-radius:8px;font-family:inherit;font-size:14px;color:#1a1a1a;transition:border-color .2s var(--ease),background .2s var(--ease)}
.field input::placeholder{color:#888}
.field input:focus,.field select:focus{outline:none;border-color:var(--yellow);background:#fff}
.field select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23555' stroke-width='1.6'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:14px;padding-right:36px;cursor:pointer}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-submit{margin-top:8px;width:100%;background:var(--yellow);color:#0a0a0a;padding:16px;border-radius:8px;font-weight:700;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;border:0;transition:background .2s var(--ease)}
.modal-submit:hover{background:var(--yellow-hover)}
.modal-fine{margin-top:12px;font-size:11px;color:#888;text-align:center}
body.modal-open{overflow:hidden}
@media (max-width:760px){
  .modal{grid-template-columns:1fr;max-height:calc(100vh - 32px)}
  .modal-side{min-height:0;padding-bottom:0}
  .modal-side .copy{padding:24px 22px 18px}
  .modal-side h3{font-size:26px}
  .modal-side .copy p{max-width:none}
  .modal-side .team{padding:14px 18px}
  .modal-body{padding:24px 22px}
  .field-row{grid-template-columns:1fr 1fr;gap:10px}
}

/* mobile niceties */
@media (max-width:760px){
  .header-inner{height:62px}
  .logo img{height:24px}
  .header .btn{padding:9px 14px;font-size:12px}
  .header .btn .a{display:none}
  .topbar a{font-size:11px}
  .hero{min-height:clamp(400px,64vh,500px)}
  .hero-inner{padding-top:36px;padding-bottom:36px;min-height:auto;gap:18px}
  .hero h1{font-size:24px !important;line-height:1.18 !important}
  .hero-brand img{height:34px}
  .hero-actions{gap:8px}
  .hero-actions .btn{padding:12px 16px;font-size:13px}
  section{padding:50px 0}
  .display-lg{font-size:30px !important}
  .display{font-size:24px !important}
}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   MOBILE HARDENING — global guards + small-screen refinements
   ============================================================ */
html,body{overflow-x:clip;max-width:100%}
img,video,iframe,svg{max-width:100%}
/* safety net: unsized inline SVG defaults to text size instead of the 300x150 replaced-element default */
svg:where(:not([width]):not([height])){width:1em;height:1em}

/* comfortable tap targets on touch */
@media (max-width:760px){
  .drawer-inner a{padding:14px 0}
  .lang button{padding:6px 12px}
  .btn{min-height:44px;display:inline-flex;align-items:center}
}

/* small phones (≤480px) */
@media (max-width:480px){
  /* topbar: keep only phone + lang, drop email to avoid crowding */
  .topbar-right a[href^="mailto:"]{display:none}
  .topbar-inner{gap:10px;height:36px}
  .topbar-right{gap:12px}
  /* article hero is now a full-bleed light band, keep it edge-to-edge */
  .article-hero{margin-left:0;margin-right:0}
  /* headlines never overflow */
  .hero h1{font-size:22px !important}
  .display-lg{font-size:26px !important}
  .display{font-size:22px !important}
  h1,h2,h3{overflow-wrap:break-word}
  /* full-width primary CTAs read better than cramped inline ones */
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  /* section rhythm tighter on tiny screens */
  section{padding:40px 0}
}

/* very small phones (≤360px) */
@media (max-width:360px){
  .hero h1{font-size:20px !important}
}

/* ============================================================
   MOBILE-ONLY REFINEMENTS (June) — header, headings, rhythm
   ============================================================ */
/* header language pill (mobile only) */
.header-lang{display:none;align-items:center;border:1px solid var(--line);border-radius:8px;padding:2px}
.header-lang button{padding:5px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:0.04em;color:var(--muted);transition:all .2s var(--ease)}
.header-lang button.is-active{background:var(--yellow);color:var(--black)}

@media (max-width:1120px){
  /* drop the black topbar (phone/email) on mobile; lang moves INTO the drawer */
  .topbar{display:none}
  .header-inner{display:flex;justify-content:flex-start;align-items:center;gap:9px}
  .header-inner .logo{margin-right:auto;justify-self:auto}
  .header-lang{display:none}
  .header .btn-quiet{order:2;justify-self:auto;margin:0;padding:6px 12px;font-size:11px;letter-spacing:0.02em;min-height:0}
  .menu-toggle{order:3;margin-left:0}
}

@media (max-width:760px){
  /* much larger hero + section headings */
  .hero h1{font-size:clamp(32px,8.6vw,44px) !important;line-height:1.08 !important;letter-spacing:-0.02em}
  .display{font-size:33px !important;line-height:1.1 !important;text-wrap:balance;overflow-wrap:break-word}
  .display-lg{font-size:33px !important}
  /* hero stats: tight, compact */
  .hero-stats{gap:6px 18px !important;font-size:14px !important;margin-top:18px !important}
  /* tighter vertical rhythm between product stripes */
  .stripe{margin-bottom:46px !important;gap:20px !important}
}
@media (max-width:480px){
  .hero h1{font-size:clamp(30px,9vw,38px) !important}
  .display,.display-lg{font-size:30px !important}
}




/* ── Read-next strip ── */
.read-next{border-top:1px solid var(--line);padding:clamp(30px,4vw,44px) 0 clamp(34px,4vw,48px)}
.read-next .container{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.read-next h2{font-weight:600;font-size:clamp(17px,1.7vw,20px);letter-spacing:-0.01em;margin:0}
.rn-list{display:flex;flex-direction:column;gap:2px}
.rn-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:15px;color:var(--ink);text-decoration:none;transition:color .18s var(--ease),padding-left .18s var(--ease)}
.rn-list a:first-child{border-top:1px solid var(--line)}
.rn-list a:hover{color:#000;padding-left:6px}
.rn-list a svg{width:15px;height:15px;flex:0 0 auto;color:var(--muted)}
.rn-list a:hover svg{color:var(--ink)}
@media (max-width:720px){.read-next .container{grid-template-columns:1fr;gap:14px}}

.page-head.hero-frame{position:relative;overflow:hidden}
.page-head.hero-frame>.container{position:relative;z-index:2}
.page-head.hero-frame .ph-bg{position:absolute;inset:0;z-index:0;border-radius:inherit}
.page-head.hero-frame .ph-bg img{width:100%;height:100%;object-fit:cover;display:block}
.page-head.hero-frame .ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,0.86) 0%,rgba(10,10,11,0.62) 50%,rgba(10,10,11,0.3) 100%)}
.ph-proof{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.ph-proof .pp{display:flex;align-items:center;gap:9px}
.ph-proof .pp-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:#fff}
.ph-proof .pp-v{display:flex;align-items:baseline;gap:6px}
.ph-proof .pp-n{font-size:16px;font-weight:700;color:#fff;line-height:1}
.ph-proof .pp-s{color:var(--yellow);font-size:10px;letter-spacing:1px}
.ph-proof .pp-l{font-size:10.5px;color:rgba(255,255,255,0.72);margin-top:3px;letter-spacing:.3px}
.ph-proof .pp-div{width:1px;height:30px;background:rgba(255,255,255,0.22)}
@media (max-width:700px){.ph-proof{gap:16px}.ph-proof .pp-div{display:none}}

/* ============================================================
   UNIFIED HERO FRAME — same container on Home / Products /
   Projectos / Sobre / Showroom / Contactos (desktop only).
   Full width between the layout pads, 16:9, height capped to the
   first screen (--hero-top is measured in app.js) so the video is
   always fully visible and never cropped vertically.
   Class is doubled so it wins over products.css regardless of order.
   ============================================================ */
:root{--hero-gap:clamp(16px,2.4vw,28px)}
@media (min-width:1025px){
  .hero-frame.hero-frame{position:relative;overflow:hidden;display:flex;align-items:flex-end;background:var(--black);color:#fff;margin:16px var(--hero-gap) 0;border-radius:16px;padding:0;width:auto;height:min(calc((100vw - 2 * var(--hero-gap)) * 0.5625),calc(100vh - var(--hero-top, 107px) - 16px));min-height:400px}
  .hero-frame.hero-frame > .container{position:relative;z-index:2;width:100%;padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(40px,4vw,64px)}
  .hero-frame.hero-frame .hero-bg,.hero-frame.hero-frame .ph-bg{position:absolute;inset:0;z-index:0;border-radius:inherit}
  .hero-frame.hero-frame video,.hero-frame.hero-frame .yt-embed{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;height:auto;max-height:none;object-fit:fill;border-radius:inherit}
  .hero-frame.hero-frame .ph-bg img,.hero-frame.hero-frame .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
  .hero-frame.hero-frame .ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,0.86) 0%,rgba(10,10,11,0.62) 50%,rgba(10,10,11,0.3) 100%)}
  .hero-frame.hero-frame .hero-bg::after{background:linear-gradient(180deg,rgba(10,10,10,0.5) 0%,rgba(10,10,10,0.42) 45%,rgba(10,10,10,0.82) 100%)}
  .hero-frame.hero-frame .ph-bg-overlay{border-radius:inherit;background:linear-gradient(90deg,rgba(10,10,11,0.82) 0%,rgba(10,10,11,0.6) 55%,rgba(10,10,11,0.38) 100%)}
  .hero-frame.hero-frame .hero-inner > div{max-width:720px}
}

/* ─── Site-wide consultation banner ─── */
.consult-banner{display:grid;grid-template-columns:1.2fr 1fr;gap:32px 64px;align-items:start;grid-template-areas:"text card" "team card";max-width:var(--maxw);margin:0 auto}
.consult-banner .cb-text{grid-area:text}
.consult-banner .cb-card{grid-area:card;align-self:center}
.consult-banner .cb-team{grid-area:team}
@media (max-width:880px){.consult-banner{grid-template-columns:1fr;gap:24px;grid-template-areas:"text" "card" "team"}}
@media (max-width:640px){.consult-banner>*{min-width:0}.ct-avatars .ct-av:nth-child(n+6){display:none}.consult-banner .cb-card{padding:30px 20px!important}}
@media (max-width:400px){.ct-avatars .ct-av:nth-child(n+5){display:none}}
.consult-team{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ct-avatars{display:flex}
.ct-av{width:66px;height:66px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 3px 10px rgba(10,10,10,0.14);margin-left:-15px;background:#d8d8dc}
.ct-av:first-child{margin-left:0}
.ct-av img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.ct-title{font-weight:700;font-size:14.5px;color:var(--ink);letter-spacing:-0.01em}
.ct-sub{margin-top:3px;font-size:13px;color:#56565c}
@media (max-width:560px){.ct-av{width:54px;height:54px;margin-left:-15px}}
@media (max-width:400px){.ct-av{width:46px;height:46px;margin-left:-13px}}

/* ─── Product/section cards (shared with home) ─── */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:var(--maxw);margin:0 auto}
.sec-card{background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:0 16px 36px -22px rgba(10,10,10,0.18);transition:transform .3s var(--ease),box-shadow .3s var(--ease);isolation:isolate}
.sec-card:hover{transform:translateY(-4px);box-shadow:0 28px 60px -22px rgba(10,10,10,0.28)}
.sec-img{aspect-ratio:5/3;overflow:hidden;background:#e8e8e8}
.sec-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);display:block}
.sec-card:hover .sec-img img{transform:scale(1.05)}
.sec-body{padding:26px 26px 28px;position:relative;flex:1;display:flex;flex-direction:column}
.sec-tag{font-weight:600;font-size:10px;letter-spacing:0.18em;color:#888;text-transform:uppercase;margin-bottom:10px}
.sec-card h3{font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-0.01em}
.sec-card p{margin-top:12px;font-size:14px;color:#555;line-height:1.6;flex:1}
.sec-arrow{margin-top:18px;width:36px;height:36px;border-radius:50%;background:#F4F4F7;color:#1a1a1a;display:inline-flex;align-items:center;justify-content:center;transition:background .25s var(--ease),color .25s var(--ease)}
.sec-arrow svg{width:13px;height:13px}
.sec-card:hover .sec-arrow{background:var(--yellow);color:#0a0a0a}
@media (max-width:980px){.sec-grid{grid-template-columns:1fr 1fr;gap:16px}}
@media (max-width:600px){.sec-grid{display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:none}.sec-grid::-webkit-scrollbar{display:none}.sec-card{flex:0 0 80%;scroll-snap-align:start}}

/* ─── Showroom / contact block (shared, dark + light) ─── */
.showroom{position:relative;overflow:hidden}
.showroom.dark-section{border-bottom:1px solid rgba(255,255,255,0.12)}
.showroom-block{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.showroom-block h2{font-weight:600;font-size:clamp(34px, 5vw, 58px);line-height:1.08;letter-spacing:-0.02em;color:#fff}
.showroom-block h2 .y{color:inherit}
.sr-info{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.sr-row{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,0.85);transition:color .2s var(--ease)}
.sr-row svg{width:24px;height:24px;flex:0 0 24px;margin-top:0;color:var(--yellow)}
a.sr-row:hover{color:#fff}
.sr-map{border-radius:var(--radius-lg);overflow:hidden;height:clamp(300px,34vw,420px);box-shadow:0 30px 70px -30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.12)}
.sr-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(0.2) contrast(1.05)}
.showroom-actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
/* light variant */
.showroom.on-light{background:var(--white);padding:clamp(48px,6vw,84px) 0}
.showroom.on-light .showroom-block h2{color:var(--black)}
.showroom.on-light .sr-row{color:#333}
.showroom.on-light .sr-row svg{color:#1a1a1a}
.showroom.on-light a.sr-row:hover{color:#000}
.showroom.on-light .lead{color:#333}
.showroom.on-light .sr-map{box-shadow:0 26px 60px -34px rgba(10,10,10,0.32);border:1px solid var(--line)}
.showroom.on-light .sr-map iframe{filter:none}
@media (max-width:880px){.showroom-block{grid-template-columns:1fr;gap:32px}}
/* ─── YouTube channel block (shared) ─── */
.ab-yt{background:var(--black);color:#fff;padding:clamp(48px,6vw,84px) 0}
.ab-yt-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:clamp(28px,4vw,64px);align-items:center}
.ab-yt h2{font-weight:600;font-size:clamp(28px,3.2vw,40px);line-height:1.14;letter-spacing:-.02em;margin:0}
.ab-yt h2 .y{color:var(--yellow)}
.ab-yt p{margin:16px 0 0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.76);max-width:44ch}
.ab-yt-link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-bottom:2px solid var(--yellow);padding-bottom:6px}
.ab-yt-link:hover{color:var(--yellow)}
.ab-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ab-thumb{position:relative;display:block;border-radius:var(--radius-s);overflow:hidden;aspect-ratio:16/9;background:#111}
.ab-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.ab-thumb:hover img{transform:scale(1.05)}
.ab-thumb::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(18,18,18,.5);border:1px solid rgba(255,255,255,.55)}
.ab-thumb i{position:absolute;left:50%;top:50%;width:0;height:0;margin:-7px 0 0 -4px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;z-index:1}
@media (max-width:980px){.ab-yt-grid{grid-template-columns:1fr}.ab-thumbs{grid-template-columns:1fr 1fr}}

/* ─── YouTube block: two-up, taller ─── */
.ab-yt.two-up .ab-yt-grid{grid-template-columns:1fr;gap:clamp(30px,3.4vw,48px);align-items:start}
.ab-yt.two-up .ab-yt-head{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:24px 48px;align-items:end}
.ab-yt.two-up .ab-yt-link{margin-top:0;white-space:nowrap}
.ab-yt.two-up .ab-thumbs{grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.ab-yt.two-up .ab-thumb{aspect-ratio:16/10}
.ab-yt.two-up .ab-thumb::after{width:58px;height:58px;margin:-29px 0 0 -29px}
.ab-yt.two-up .ab-thumb i{margin:-10px 0 0 -5px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
@media (max-width:880px){.ab-yt.two-up .ab-yt-head{grid-template-columns:1fr;align-items:start}.ab-yt.two-up .ab-yt-link{margin-top:6px}}
@media (max-width:560px){.ab-yt.two-up .ab-thumbs{grid-template-columns:1fr}}
/* ─── Social links row ─── */
.social-row{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.social-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:var(--radius-pill);border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-0.005em;transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease)}
.social-chip svg{width:19px;height:19px;flex:0 0 19px;color:#1a1a1a;transition:color .22s var(--ease)}
.social-chip:hover{border-color:var(--yellow);background:var(--yellow);color:#0a0a0a}
.social-chip:hover svg{color:#0a0a0a}
.dark-section .social-chip{border-color:rgba(255,255,255,0.18);background:transparent;color:rgba(255,255,255,0.9)}
.dark-section .social-chip svg{color:var(--yellow)}
.dark-section .social-chip:hover{border-color:var(--yellow);background:var(--yellow);color:#0a0a0a}
.dark-section .social-chip:hover svg{color:#0a0a0a}
@media (max-width:560px){.social-chip{padding:10px 15px 10px 12px;font-size:13px}}

/* ============================================================
   iPhone PASS — dynamic viewport, tap targets, small-screen rhythm
   ============================================================ */
@supports (height:100dvh){
  .hero{min-height:clamp(420px,calc(100dvh - 128px),620px)}
  .modal{max-height:calc(100dvh - 48px)}
}
@media (max-width:1120px){
  .header .btn-quiet{min-height:40px;padding:10px 14px;font-size:12px}
  .menu-toggle{width:44px;height:44px}
}
@media (max-width:760px){
  .drawer-acc a,.drawer-acc summary,.drawer-inner .drawer-nav a{min-height:44px;display:flex;align-items:center}
  footer a{display:inline-flex;align-items:center;min-height:34px}
  .footer-legal a,.foot-legal a{min-height:40px}
  @supports (height:100dvh){.hero{min-height:clamp(400px,64dvh,500px)}}
}
@media (max-width:480px){
  .hero .lead{font-size:15.5px!important;line-height:1.5;margin-top:14px!important}
  .hero-stats{margin-top:14px!important}
  .hero-actions{margin-top:16px!important}
  .ab-brandline .ab-brands{grid-template-columns:1fr 1fr!important}
}
/* notch-safe floating actions */
.wa{bottom:calc(22px + env(safe-area-inset-bottom))}
@media (max-width:520px){.wa{bottom:calc(16px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right))}}

/* ---- Global YouTube popup (any .ytc link, unless the page ships its own #vbox) ---- */
.ytbox{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:rgba(8,8,10,.86);opacity:0;transition:opacity .25s ease}
.ytbox.is-open{display:flex}
.ytbox.is-in{opacity:1}
.ytbox-frame{position:relative;width:min(1100px,100%);max-width:calc((100svh - clamp(96px,14vh,150px)) * 1.7778);aspect-ratio:16/9;max-height:calc(100svh - clamp(96px,14vh,150px));border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.ytbox-slot{position:absolute;inset:0}
.ytbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ytbox-close{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:rgba(12,12,14,.72);border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease}
.ytbox-close:hover{background:#fff;color:#141416}
.ytbox-close svg{width:17px;height:17px}