/* ============================================
   LRGZ — DESIGN TOKENS
   ============================================ */
:root{
  --black:#050505;
  --surface:#0c0c0b;
  --surface-2:#131311;
  --white:#f7f7f3;
  --gray:#8c8c86;
  --gray-dim:#57574f;
  --line:#232320;
  --line-soft:#1a1a17;
  --red:#ff3131;
  --cyan:#00e5ff;

  --font-display:'Unbounded', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --fs-hero: clamp(2rem, 10vw, 9.5rem);
  --fs-h1: clamp(1.7rem, 5.5vw, 4.6rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem);

  --container: 1500px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 84px;

  --ease: cubic-bezier(.16,.84,.32,1);
  --mx: 0.5;
  --my: 0.5;
}

*,*::before,*::after{ box-sizing:border-box; }
h1,h2,h3,h4,p,li,a,span,small{ overflow-wrap:break-word; }
img,svg,video{ max-width:100%; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:default;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--white); color:var(--black); }

:focus-visible{ outline:2px solid var(--white); outline-offset:4px; }

/* ============================================
   CURSOR
   ============================================ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:200;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--white); }
.cursor-ring{
  width:36px; height:36px; border:1px solid var(--gray);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--black);
}
.cursor-ring.is-hover{ width:74px; height:74px; background:var(--white); border-color:var(--white); }
.cursor-ring span{ opacity:0; transition:opacity .2s var(--ease); }
.cursor-ring.is-hover span{ opacity:1; }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ============================================
   NAV
   ============================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease), height .4s var(--ease);
}
.nav.is-scrolled{
  height:64px;
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-logo{
  font-family:var(--font-mono); font-weight:600; font-size:1.05rem; letter-spacing:.12em;
  display:flex; align-items:center; gap:.6rem; flex:none;
}
.nav-logo img{
  height:clamp(24px, 2.6vw, 34px); width:auto; display:block;
  max-width:44vw; object-fit:contain;
  transition: opacity .35s var(--ease);
}
.nav-logo:hover img{ opacity:.72; }
.nav-logo .dot{ width:6px; height:6px; background:var(--white); border-radius:50%; animation:blink 2.4s infinite; }
.nav-links{ display:flex; align-items:center; gap:2.4rem; }
.nav-links a{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray); position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--white);
  transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ width:100%; }
.nav-status{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray);
  display:flex; align-items:center; gap:.5rem;
}
.nav-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:blink 2.4s infinite; }
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav-burger span{ width:22px; height:1px; background:var(--white); display:block; }
.nav-links .nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 20px;
    border:3px solid #2f2f2f;
    border-radius:0px;
    color:#fff;
    background:transparent;
    letter-spacing:.12em;
    transition:.35s var(--ease);
}

.nav-links .nav-cta::after{
    display:none;
}

.nav-links .nav-cta--destaque{
    border-color:#fff;
    background:#fff;
    color:#050505;
    font-weight:600;
}
.nav-cta--destaque:hover{
    background:transparent;
    color:#fff;
    border-color:#fff;
}
.menu-destaque{
    border:2px solid #fff;
    padding:.5rem 1.1rem;
    align-self:flex-start;
    margin-bottom:.4rem;
}
.nav-cta:hover{
    border-color:#fff;
    background:rgba(255,255,255,.05);
}

@keyframes blink{ 0%,100%{ opacity:1;} 50%{ opacity:.25; } }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--black);
  display:flex; flex-direction:column; gap:clamp(.9rem,3.2vh,1.6rem);
  justify-content:center;
  justify-content:safe center;   /* nao deixa o topo ficar inalcancavel ao rolar */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:calc(var(--nav-h) + 1rem) var(--pad)
          calc(2rem + env(safe-area-inset-bottom, 0px));
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{
  font-family:var(--font-display); font-size:clamp(1.55rem,7.2vw,2.1rem); font-weight:500;
  line-height:1.15; padding-block:.15rem;
}
.mobile-menu .lang-toggle{
  align-self:flex-start; margin-top:clamp(.8rem,2.5vh,1.6rem);
  font-size:.88rem; gap:.45rem; padding:.85rem 1.15rem;
  min-height:48px; border-color:var(--gray-dim);
}
body.menu-open{ overflow:hidden; }

/* telas baixas (celular deitado, aparelhos pequenos): o menu encolhe
   para caber inteiro em vez de depender da rolagem */
@media (max-height:520px){
  .mobile-menu{ gap:.5rem; padding-top:calc(var(--nav-h) - .75rem); }
  .mobile-menu a{ font-size:clamp(1.1rem,5.4vh,1.6rem); }
  .mobile-menu .lang-toggle{
    margin-top:.7rem; min-height:44px; padding:.6rem .95rem; font-size:.8rem;
  }
}

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-status{ display:none; }
}

/* ============================================
   TOGGLE DE IDIOMA (PT / EN)
   Vive em tres lugares: no menu desktop (.nav-links),
   fixo na barra do topo no mobile (.lang-toggle--nav)
   e dentro do menu mobile. O JS do i18n cuida de todos.
   ============================================ */
.nav-actions{ display:flex; align-items:center; gap:clamp(.5rem,2.5vw,1.4rem); }

.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem; flex:none;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; font-weight:500;
  background:transparent; border:1px solid var(--line); color:var(--gray-dim);
  padding:.42rem .62rem; line-height:1; cursor:pointer;
  border-radius:0; -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.lang-toggle:hover{ border-color:var(--gray); }
.lang-toggle:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.lang-toggle .sep{ opacity:.4; }
.lang-toggle span.on{ color:var(--white); }

/* a copia da barra do topo so entra quando o menu desktop sai */
.lang-toggle--nav{ display:none; }

@media (max-width:860px){
  .lang-toggle--nav{
    display:inline-flex;
    min-height:44px; min-width:64px; padding:.6rem .8rem;
    font-size:.78rem; border-color:var(--gray-dim);
  }
  .nav-burger{ min-width:44px; min-height:44px; align-items:center; justify-content:center; padding:0; }
}

/* telas bem estreitas: encolhe a marca para a barra nunca apertar */
@media (max-width:400px){
  .nav-logo img{ height:22px; }
  .lang-toggle--nav{ min-width:58px; padding:.6rem .6rem; font-size:.72rem; }
}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding-top:var(--nav-h); overflow:hidden;
}
.hero-grid{
  position:absolute; inset:-20% -10%; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at calc(var(--mx)*100%) calc(var(--my)*100%), black 0%, transparent 55%);
  mask-image:radial-gradient(circle at calc(var(--mx)*100%) calc(var(--my)*100%), black 0%, transparent 55%);
  transform:translateY(calc(var(--sy, 0) * 1px));
}
.hero-inner{ position:relative; z-index:2; }
.hero-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; margin-bottom:2.5rem;
}
.hero-eyebrow{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); max-width:22ch; }
.hero-eyebrow b{ color:var(--white); font-weight:500; }

.badge{ position:relative; width:118px; height:118px; flex:none; }
.badge svg{ animation:spin 15s linear infinite; }
.badge text{ font-family:var(--font-mono); font-size:8.6px; letter-spacing:2px; fill:var(--gray); text-transform:uppercase; }
.badge-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================
   HERO TITLE — "REVELAÇÃO"
   Mecânica: o título nasce como um negativo granulado
   (referência à impressão analógica) e "revela" a versão
   nítida onde o cursor passa — como um papel fotográfico
   mergulhando no revelador. A borda do revelado ganha uma
   auréola cromática (vermelho/ciano) que ecoa o glitch
   digital usado no resto do site.
   ============================================ */
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

.hero-title{
  position:relative;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:var(--fs-hero); line-height:.94; letter-spacing:-.01em;
  --rx:50%; --ry:42%; --rr:clamp(120px,17vw,240px);
}
.htx-layer .htx-line{ display:block; }
.htx-line.htx-strong{ -webkit-text-stroke:1.5px currentColor; }
.htx-veil .htx-strong{ -webkit-text-stroke:1.5px var(--gray-dim); }

/* a camada "véu" fica no fluxo normal e define a altura real do título;
   as demais camadas se sobrepõem exatamente por cima dela */
.htx-veil{ position:relative; pointer-events:none; }
.htx-clear,.htx-fringe{ position:absolute; inset:0; pointer-events:none; }

/* estado "não revelado": contorno granulado, quase ilegível */
.htx-veil{
  color:transparent;
  -webkit-text-stroke:1px var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  -webkit-background-clip:text; background-clip:text;
  opacity:.6;
}

/* estado "revelado": tipografia nítida, recortada por um raio ao redor do cursor */
.htx-clear{
  color:var(--white);
  -webkit-mask-image:radial-gradient(circle at var(--rx) var(--ry), black 0, black var(--rr), transparent calc(var(--rr) + 100px));
  mask-image:radial-gradient(circle at var(--rx) var(--ry), black 0, black var(--rr), transparent calc(var(--rr) + 100px));
}

/* auréola cromática na borda do revelado */
.htx-fringe{ mix-blend-mode:screen; }
.htx-fringe-red{
  color:var(--red); transform:translate(-3px,-1px);
  -webkit-mask-image:radial-gradient(circle at var(--rx) var(--ry), transparent 0, transparent var(--rr), black calc(var(--rr) + 4px), black calc(var(--rr) + 30px), transparent calc(var(--rr) + 100px));
  mask-image:radial-gradient(circle at var(--rx) var(--ry), transparent 0, transparent var(--rr), black calc(var(--rr) + 4px), black calc(var(--rr) + 30px), transparent calc(var(--rr) + 100px));
}
.htx-fringe-cyan{
  color:var(--cyan); transform:translate(3px,2px);
  -webkit-mask-image:radial-gradient(circle at var(--rx) var(--ry), transparent 0, transparent calc(var(--rr) + 8px), black calc(var(--rr) + 14px), black calc(var(--rr) + 40px), transparent calc(var(--rr) + 100px));
  mask-image:radial-gradient(circle at var(--rx) var(--ry), transparent 0, transparent calc(var(--rr) + 8px), black calc(var(--rr) + 14px), black calc(var(--rr) + 40px), transparent calc(var(--rr) + 100px));
}

.hero-hint{
  position:absolute; left:0; bottom:-2.2rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray-dim); opacity:0; transition:opacity .6s var(--ease);
  display:flex; align-items:center; gap:.5rem;
}
.hero-hint::before{ content:''; width:6px; height:6px; border-radius:50%; border:1px solid var(--gray-dim); }
.hero-hint.is-visible{ opacity:1; }
.hero-hint.is-hidden{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .htx-veil{ display:none; }
  .htx-clear{ position:relative; -webkit-mask-image:none; mask-image:none; }
  .htx-fringe{ display:none; }
  .hero-hint{ display:none; }
}
@media (max-width:640px){
  .hero-title{ --rr:clamp(90px,32vw,150px); }
}

.hero-bottom{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(2.5rem,6vw,4.5rem); align-items:end;
}
.hero-lead{ font-size:var(--fs-lead); color:var(--gray); max-width:46ch; font-weight:300; }
.hero-lead strong{ color:var(--white); font-weight:500; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.8rem; }
.hero-meta{
  margin-top:1.6rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray-dim);
}

/* terminal */
.terminal{
  background:var(--surface); border:1px solid var(--line); font-family:var(--font-mono);
  font-size:.8rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.terminal-head{
  display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; border-bottom:1px solid var(--line);
}
.terminal-head span{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.terminal-head small{ margin-left:auto; color:var(--gray-dim); font-size:.65rem; letter-spacing:.08em; }
.terminal-body{ padding:1.1rem 1.1rem 1.3rem; min-height:150px; color:var(--gray); }
.terminal-body .ok{ color:var(--white); }
.terminal-body .cursor{ display:inline-block; width:7px; height:1em; background:var(--white); vertical-align:text-bottom; animation:blink .9s step-end infinite; }
.terminal-line{ min-height:1.5em; }

/* buttons */
.btn{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  padding:1rem 1.7rem; border:1px solid var(--white); background:var(--white); color:var(--black);
  display:inline-flex; align-items:center; gap:.6rem; transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ background:transparent; color:var(--white); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--white); }
.btn-outline:hover{ background:var(--white); color:var(--black); }

@media (max-width:900px){
  .hero-bottom{ grid-template-columns:1fr; }
  .hero-top{ align-items:center; }
}
@media (max-width:560px){
  .badge{ width:88px; height:88px; }
  .badge-center{ font-size:1rem; }
  .hero-top{ gap:1rem; }
  .hero-eyebrow{ font-size:.72rem; }
}
@media (max-width:420px){
  .badge{ width:72px; height:72px; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
}

/* ============================================
   MARQUEE
   ============================================ */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:1.1rem 0; background:var(--surface);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee-track span{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray); padding-right:2.4rem; white-space:nowrap;
}
.marquee-track span em{ font-style:normal; color:var(--white); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================
   ABOUT
   ============================================ */
.about{ overflow:hidden; }
.about-wm{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:800; font-size:min(32vw,22rem);
  color:transparent; -webkit-text-stroke:1px var(--line); z-index:0; user-select:none;
  white-space:nowrap; letter-spacing:-.02em;
}
.about-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,6rem);
}
.about-head{ align-self:start; }
.about-title{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-h1); line-height:1.05;
  text-transform:uppercase; margin-top:1.2rem;
}
.about-body{ font-size:var(--fs-lead); color:var(--gray); font-weight:300; max-width:52ch; }
.about-body strong{ color:var(--white); font-weight:500; }
.about-list{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1rem; }
.about-list li{
  font-family:var(--font-mono); font-size:.85rem; color:var(--gray); display:flex; gap:.8rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line-soft);
}
.about-list li b{ color:var(--white); font-weight:500; }
.about-list li::before{ content:'→'; color:var(--white); flex:none; }

@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }

/* ============================================
   SERVICES
   ============================================ */
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
@media (max-width:700px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:1.1rem; }
  .section-head > *{ min-width:0; }
  .section-title{ max-width:100%; }
  .section-note{ max-width:100%; }
}
.section-title{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-h1); line-height:1.05;
  text-transform:uppercase; margin-top:1rem; max-width:16ch;
}
.section-note{ font-size:.95rem; color:var(--gray); max-width:34ch; font-weight:300; }

.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(1.8rem,3vw,2.6rem); position:relative; overflow:hidden;
  transition:background .4s var(--ease);
}
.service-card:hover{ background:var(--surface); }
.service-card .num{ font-family:var(--font-mono); font-size:.72rem; color:var(--gray-dim); }
.service-card h3{
  font-family:var(--font-display); font-size:1.5rem; font-weight:500; text-transform:uppercase;
  margin-top:1.6rem; margin-bottom:.9rem;
}
.service-card p{ color:var(--gray); font-size:.94rem; font-weight:300; max-width:38ch; }
.service-card::after{
  content:''; position:absolute; right:1.6rem; top:1.8rem; width:22px; height:22px;
  border-top:1px solid var(--gray-dim); border-right:1px solid var(--gray-dim);
  opacity:0; transform:translate(-6px,6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.service-card:hover::after{ opacity:1; transform:translate(0,0); }

@media (max-width:700px){ .services-grid{ grid-template-columns:1fr; } }

/* ============================================
   PROCESS
   ============================================ */
.process-list{ margin-top:clamp(2.5rem,5vw,4rem); }
.process-item{
  display:grid; grid-template-columns:100px 1fr; gap:2rem; padding:2rem 0;
  border-top:1px solid var(--line); align-items:baseline;
}
.process-item:last-child{ border-bottom:1px solid var(--line); }
.process-item .num{ font-family:var(--font-mono); font-size:.85rem; color:var(--gray-dim); }
.process-item h3{
  font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:500; text-transform:uppercase;
  margin-bottom:.6rem;
}
.process-item p{ color:var(--gray); font-weight:300; max-width:56ch; font-size:.98rem; }
@media (max-width:600px){ .process-item{ grid-template-columns:1fr; gap:.6rem; } }

/* ============================================
   PORTFOLIO
   ============================================ */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.2rem); margin-top:clamp(2.5rem,5vw,4rem); }
.case-card{
  border:1px solid var(--line); background:var(--surface); position:relative;
  transition:transform .5s var(--ease), border-color .4s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.case-card:hover{ border-color:var(--gray-dim); }
.case-frame{
  border-bottom:1px solid var(--line); padding:.7rem .9rem; display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.68rem; color:var(--gray-dim);
}
.case-frame span{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.case-preview{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--black);
  border-bottom:1px solid var(--line);
}
.case-preview video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.mock{
    width:100%;
    height:100%;
    overflow:hidden;
}

.site-video{
    width:100%;
    height:100%;
    object-fit: contain;
    background:#000;
    display:block;
}
.case-preview .mock{ position:absolute; inset:0; padding:9%; display:flex; flex-direction:column; gap:8%; }
.case-preview .halftone{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--black) 35%, transparent 36%);
  background-size:6px 6px; opacity:.9; mix-blend-mode:difference;
  transition:opacity .6s var(--ease);
}
.case-card:hover .halftone{ opacity:0; }
.case-body{ padding:clamp(1.4rem,2.4vw,2rem); }
.case-body .tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-dim);
}
.case-body h3{
  font-family:var(--font-display); font-size:clamp(1.35rem,2.6vw,1.8rem); font-weight:500;
  text-transform:uppercase; margin-top:.6rem; margin-bottom:.8rem;
}
.case-body p{ color:var(--gray); font-weight:300; font-size:.92rem; margin-bottom:1.2rem; }
.case-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.case-chips span{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--gray); padding:.35rem .6rem;
}
@media (max-width:1100px){ .portfolio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px){ .portfolio-grid{ grid-template-columns:minmax(0,1fr); } }

/* ============================================
   CTA / CONTATO
   ============================================ */
.cta-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2.5rem,6vw,5rem); align-items:end; }
.cta-title{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,5.4vw,4.2rem); line-height:1.06;
  text-transform:uppercase;
}
.cta-body{ color:var(--gray); font-size:var(--fs-lead); font-weight:300; margin-top:1.4rem; max-width:44ch; }
.contact-list{ display:flex; flex-direction:column; }
.contact-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 0; border-top:1px solid var(--line);
}
.contact-list .contact-row:last-child{ border-bottom:1px solid var(--line); }
.contact-row .label{ font-family:var(--font-mono); font-size:.72rem; color:var(--gray-dim); text-transform:uppercase; letter-spacing:.08em; }
.contact-row .value{ font-family:var(--font-display); font-size:clamp(1rem,1.8vw,1.3rem); }
.contact-row .arrow{ font-family:var(--font-mono); color:var(--gray-dim); transition:transform .3s var(--ease), color .3s var(--ease); }
.contact-row:hover .arrow{ transform:translateX(4px); color:var(--white); }
.course-cover{
    width:100%;
    max-width:480px;
    margin:0 auto 2rem;
    display:block;

    object-fit:contain;

    transition:.4s ease;
}

.course-cover:hover{
    transform:translateY(-6px);
}

.cta-buy{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.4rem 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transition:.35s;
}

.buy-button{
    background:#fff;
    color:#000;

    padding:1rem 2.6rem;

    border-radius:0px;

    font-family:var(--font-display);
    font-size:clamp(1rem,1.8vw,1.3rem);
    font-weight:600;

    transition:.35s ease;
}

.cta-buy:hover .buy-button{

    transform:translateY(-3px);

    background:#f5f5f5;

    box-shadow:
    0 0 30px rgba(255,255,255,.18);

}

.cta-buy:hover .arrow{
    transform:translateX(8px);
}

.buy-button:active{
    transform:scale(.96);
}
@media (max-width:900px){ .cta-inner{ grid-template-columns:1fr; } }


/* ---- lista de contato: redes sociais + e-mail ---- */
.contact-list .contact-row{
  transition: padding-inline .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.contact-list .contact-row:hover{
  padding-inline:.9rem; border-color:var(--gray-dim); background:var(--surface);
}
.contact-id{ display:flex; align-items:center; gap:1rem; min-width:0; }
.contact-ico{
  width:40px; height:40px; flex:none; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--gray);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.contact-ico svg{ width:17px; height:17px; }
.contact-row:hover .contact-ico{ background:var(--white); border-color:var(--white); color:var(--black); }
.contact-text{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.contact-list .contact-row .value{ overflow-wrap:anywhere; }
.contact-list .contact-row:hover .value{ color:var(--white); }

/* ============================================
   CURSO / PÁGINA DE VENDAS
   ============================================ */
.course-inner{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.2rem,5vw,4.5rem); align-items:center;
}
.course-inner .course-cover{ margin:0 auto; max-width:520px; }
.course-info .tag{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray-dim);
}
.course-title{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.08; margin-top:.9rem;
}
.course-body{
  color:var(--gray); font-weight:300; font-size:var(--fs-lead);
  margin-top:1.1rem; max-width:46ch;
}
.course-points{ margin-top:1.8rem; display:flex; flex-direction:column; }
.course-points li{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:.85rem 0; border-top:1px solid var(--line-soft);
  color:var(--gray); font-size:.95rem; font-weight:300;
}
.course-points li::before{
  content:''; width:7px; height:7px; margin-top:.55rem; flex:none; background:var(--white);
}
.course-info .cta-buy{
  margin-top:2rem;
  padding:1.4rem clamp(1.1rem,2.4vw,1.6rem);
  border:1px solid rgba(0,229,255,.38);
  background:linear-gradient(100deg, rgba(0,229,255,.09), rgba(0,229,255,.025) 55%, transparent);
  animation:flagGlow 3.6s ease-in-out infinite;
}
.course-info .cta-buy:hover{ border-color:rgba(0,229,255,.72); }
@media (prefers-reduced-motion: reduce){ .course-info .cta-buy{ animation:none; } }
@media (max-width:900px){
  .course-inner{ grid-template-columns:1fr; }
  .course-media{ order:-1; }
}
@media (max-width:520px){
  .cta-buy .buy-button{ padding:.9rem 1.6rem; }
}

/* ============================================
   FOOTER
   ============================================ */
footer{ border-top:1px solid var(--line); padding:2.4rem 0; }
.footer-logo{ height:22px; width:auto; display:inline-block; vertical-align:-2px; margin-right:.7rem; opacity:.7; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; }
.footer-inner .fmono{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--gray-dim); }
.footer-links{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; }
.footer-links a{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--gray); text-transform:uppercase; }
.footer-links a:hover{ color:var(--white); }
.to-top{ border:1px solid var(--line); width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:none; color:var(--white); }
.to-top:hover{ background:var(--white); color:var(--black); }

.container{ max-width:var(--container); margin:0 auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block: clamp(5rem, 11vw, 9rem); border-top:1px solid var(--line); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gray);
  display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:''; width:7px; height:7px; background:var(--white); flex:none; }

/* grain overlay */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scroll reveal */
.js .reveal{ opacity:0; transform:translateY(28px); }
.reveal{
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}
/* ============================================
   LINK "VER SITE AO VIVO" NOS CARDS
   ============================================ */
.case-live{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--white); border-bottom:1px solid var(--gray-dim); padding-bottom:.3rem;
  transition:border-color .35s var(--ease), gap .35s var(--ease);
}
.case-live:hover{ border-color:var(--white); gap:.8rem; }
.case-live .ar{ transition:transform .35s var(--ease); }
.case-live:hover .ar{ transform:translate(2px,-2px); }

/* ============================================
   BOTAO FLUTUANTE DE WHATSAPP
   ============================================ */
.wa-float{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.9rem 1.25rem; border:1px solid var(--line); background:var(--black); color:var(--white);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease),
             background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.wa-float.is-on{ opacity:1; transform:translateY(0); pointer-events:auto; }
.wa-float:hover{ background:var(--white); color:var(--black); border-color:var(--white); }
.wa-float svg{ width:15px; height:15px; flex:none; }
@media (max-width:600px){
  .wa-float{ left:clamp(1rem,4vw,2rem); justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .wa-float{ transition:none; }
}

/* destaque do WhatsApp na lista de contato */
.contact-list .contact-row.is-primary .value{ color:var(--white); }
.contact-list .contact-row.is-primary .contact-ico{ border-color:var(--gray); color:var(--white); }

/* ============================================
   INVESTIMENTO
   ============================================ */
.price-box{
  margin-top:clamp(2.5rem,5vw,4rem);
  border:1px solid var(--line); background:var(--surface);
  padding:clamp(1.8rem,3.2vw,2.6rem);
  transition:border-color .4s var(--ease);
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.4rem); align-items:start;
}
@media (max-width:900px){ .price-box{ grid-template-columns:minmax(0,1fr); } }
.price-box:hover{ border-color:var(--gray-dim); }

.price-list .price-list-head{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-dim); margin-bottom:1.3rem;
}
.price-list ul{
  list-style:none; display:grid; grid-template-columns:minmax(0,1fr);
  gap:.85rem clamp(1.5rem,3vw,2.6rem); margin:0; padding:0;
}
.price-list li{
  color:var(--gray); font-weight:300; font-size:.92rem;
  display:flex; align-items:flex-start; gap:.7rem;
}
.price-list li::before{
  content:''; width:6px; height:6px; background:var(--white);
  flex:none; margin-top:.5em;
}

/* brilho ciano pulsante (usado no bloco de compra do curso) */
@keyframes flagGlow{
  0%,100%{ box-shadow:0 0 22px rgba(0,229,255,.10), inset 0 0 26px rgba(0,229,255,.04); }
  50%    { box-shadow:0 0 42px rgba(0,229,255,.22), inset 0 0 34px rgba(0,229,255,.09); }
}

/* card de preco */
.price-card{
  background:var(--black); border:1px solid var(--line);
  padding:clamp(1.5rem,2.6vw,2.1rem);
}
.pc-from{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray);
}
.pc-valor{ display:flex; align-items:flex-start; gap:.4rem; margin-top:.5rem; line-height:1; }
.pc-moeda{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.1rem,2vw,1.4rem); margin-top:.3em; }
.pc-num{ font-family:var(--font-display); font-weight:600; font-size:clamp(3rem,6vw,4.4rem); letter-spacing:-.02em; }
.pc-nota{ color:var(--gray); font-weight:300; font-size:.92rem; margin-top:1rem; }
.pc-linhas{ margin:1.5rem 0 0; }
.pc-linhas > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.95rem 0; border-top:1px solid var(--line);
}
.pc-linhas > div:last-child{ border-bottom:1px solid var(--line); }
/* o rotulo cede espaco: valores curtos ("1 ano gratis") ficam numa linha so */
.pc-linhas dt{ color:var(--gray); font-size:.9rem; font-weight:300; flex:1 1 0; min-width:0; }
.pc-linhas dd{ margin:0; color:var(--white); font-size:.9rem; font-weight:500; text-align:right; flex:0 1 auto; max-width:58%; }
.pc-cta{ width:100%; justify-content:center; text-align:center; margin-top:1.6rem; }
@media (max-width:600px){
  .pc-cta{ padding-inline:1rem; letter-spacing:.04em; }
}
/* tela bem estreita: rotulo em cima, valor embaixo, cada um com a largura toda */
@media (max-width:360px){
  .pc-linhas > div{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .pc-linhas dd{ text-align:left; max-width:none; }
}

/* ============================================
   MODAL DE ORÇAMENTO
   ============================================ */
.modal{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,2rem);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(5,5,5,.86); backdrop-filter:blur(3px); }
.modal-card{
  position:relative; z-index:1;
  width:min(560px,100%); max-height:88vh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(1.6rem,3.4vw,2.6rem);
  transform:translateY(16px); transition:transform .4s var(--ease);
}
.modal.is-open .modal-card{ transform:translateY(0); }
.modal-x{
  position:absolute; top:.9rem; right:.9rem;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); color:var(--gray);
  font-family:var(--font-mono); font-size:1rem; line-height:1; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.modal-x:hover{ border-color:var(--white); color:var(--white); }
.modal-card h3{
  font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.2rem,2.4vw,1.6rem); margin:.7rem 0 .6rem;
}
.modal-sub{ color:var(--gray); font-weight:300; font-size:.92rem; margin-bottom:1.8rem; }
.modal-form{ display:grid; gap:1.1rem; }
.modal-form label{ display:grid; gap:.5rem; }
.modal-form .lbl{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray-dim);
}
.modal-form input, .modal-form textarea, .modal-form select{
  font-family:var(--font-body); font-size:.95rem; font-weight:300;
  background:var(--black); border:1px solid var(--line); color:var(--white);
  padding:.8rem .9rem; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .3s var(--ease);
}
.modal-form select{ font-family:var(--font-mono); font-size:.8rem; cursor:pointer; }
.modal-form option{ background:var(--surface); }
.modal-form textarea{ resize:vertical; min-height:104px; line-height:1.6; }
.modal-form input::placeholder, .modal-form textarea::placeholder{ color:var(--gray-dim); }
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus{
  outline:none; border-color:var(--gray);
}
.modal-form input:focus-visible, .modal-form textarea:focus-visible, .modal-form select:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}
.modal-form .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.modal-fine{
  font-family:var(--font-mono); font-size:.68rem; line-height:1.6;
  color:var(--gray-dim); text-align:center;
}
@media (prefers-reduced-motion: reduce){
  .modal, .modal-card{ transition:none; }
}

/* ============================================
   "TESTAR AQUI" — o site do cliente numa janela por cima
   ============================================ */
.case-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin-top:1.3rem; }
.case-actions .case-live{ margin-top:0; }
.case-try{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:var(--white); border:1px solid var(--gray-dim);
  padding:.6rem .95rem; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.case-try:hover{ background:var(--white); border-color:var(--white); color:var(--black); }
.case-try:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
/* no celular a janela nao cabe: fica so o "Ver site ao vivo" */
@media (max-width:760px){ .case-try{ display:none; } }

.demo{
  position:fixed; inset:0; z-index:130;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.75rem,2.4vw,1.75rem);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.demo.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
/* o mouse dentro do iframe nao chega aqui: o cursor proprio ficaria congelado */
body.demo-aberta .cursor-dot, body.demo-aberta .cursor-ring{ opacity:0; }
.demo-backdrop{ position:absolute; inset:0; background:rgba(5,5,5,.9); backdrop-filter:blur(3px); }
.demo-win{
  position:relative; z-index:1; display:flex; flex-direction:column;
  width:min(1440px,100%); height:100%; max-height:940px;
  background:var(--surface); border:1px solid var(--line);
  transform:translateY(16px); transition:transform .4s var(--ease);
}
.demo.is-open .demo-win{ transform:translateY(0); }
.demo-bar{
  display:flex; align-items:center; gap:1rem; padding:.55rem .6rem .55rem 1rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
}
.demo-title{ flex:1; min-width:0; color:var(--gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo-title b{ color:var(--white); font-weight:500; }
.demo-dev{ display:flex; border:1px solid var(--line); }
.demo-dev button{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  background:none; border:0; color:var(--gray); padding:.55rem .9rem; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.demo-dev button + button{ border-left:1px solid var(--line); }
.demo-dev button[aria-pressed="true"]{ background:var(--white); color:var(--black); }
.demo-open{ color:var(--white); border-bottom:1px solid var(--gray-dim); padding-bottom:.2rem; white-space:nowrap; }
.demo-open:hover{ border-color:var(--white); }
.demo-x{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex:none;
  background:none; border:1px solid var(--line); color:var(--gray);
  font-family:var(--font-mono); font-size:1rem; line-height:1; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.demo-x:hover{ border-color:var(--white); color:var(--white); }
.demo-dev button:focus-visible, .demo-open:focus-visible, .demo-x:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.demo-stage{
  position:relative; flex:1; min-height:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--black);
}
.demo-load{
  position:absolute; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gray-dim);
}
.demo-stage iframe{
  position:relative; width:100%; height:100%; border:0; background:var(--black);
  opacity:0; transition:opacity .4s var(--ease), width .45s var(--ease), height .45s var(--ease);
}
.demo-stage.is-ready iframe{ opacity:1; }
/* modo celular: largura de um iPhone, moldura reta como o resto do site */
.demo-stage.is-phone iframe{
  width:390px; height:min(844px, calc(100% - 2.5rem));
  box-shadow:0 0 0 10px #151513, 0 0 0 11px var(--line);
}
.demo-bar .demo-hide-sm{ display:inline; }
@media (max-width:900px){ .demo-bar .demo-hide-sm{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .demo, .demo-win, .demo-stage iframe{ transition:none; }
}

/* opcoes de toque do orcamento */
.modal-form fieldset{ border:0; padding:0; margin:0; min-width:0; display:grid; gap:.6rem; }
.modal-form legend{ padding:0; margin-bottom:.6rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.chip span{
  display:inline-block; font-family:var(--font-body); font-size:.86rem; font-weight:300;
  padding:.6rem .85rem; border:1px solid var(--line); color:var(--gray);
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.chip:hover span{ border-color:var(--gray); color:var(--white); }
.chip input:checked + span{ background:var(--white); border-color:var(--white); color:var(--black); font-weight:400; }
.chip input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px; }

/* ============================================
   AJUSTES DE CELULAR
   ============================================ */
/* minmax(0,1fr) na grade + min-width:0 no card: sem isso uma palavra longa
   em caixa-alta (MICROPIGMENTACAO) estica a coluna e a pagina rola de lado */
.case-card{ min-width:0; container-type:inline-size; }
/* o titulo acompanha a largura do CARD, nao da tela: com 3 colunas o card
   fica estreito e MICROPIGMENTACAO nao cabia. Quem nao suporta cqi (iOS < 16)
   ignora a 2a linha e fica com o tamanho antigo */
.case-body h3{ font-size:clamp(1.35rem,2.6vw,1.8rem); font-size:clamp(1rem,6.1cqi,1.8rem);
  overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }

/* area de toque maior sem mudar o visual */
.case-live{ position:relative; }
.case-live::before{ content:''; position:absolute; inset:-12px -6px -10px; }

@media (max-width:600px), (pointer:coarse) and (max-height:500px){
  /* nada de texto abaixo de ~11,5px no celular */
  .case-body .tag, .case-chips span,
  .price-list .price-list-head{ font-size:.74rem; }
  .footer-links a{ display:inline-block; padding-block:.8rem; }
  .nav-logo{ padding-block:11px; }
}

/* ============================================
   PORTFOLIO: botao da home e pagina propria
   ============================================ */
.portfolio-more{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem;
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:clamp(1.8rem,3vw,2.4rem); border-top:1px solid var(--line); }
.portfolio-more p{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.portfolio-more p b{ color:var(--white); font-weight:500; }
@media (max-width:600px){ .portfolio-more .btn{ width:100%; justify-content:center; } }
.page-top{ border-top:0; padding-top:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem)); }
.page-top .section-title{ font-size:clamp(2rem,6vw,4.6rem); }
.nav-links a[aria-current="page"]{ color:var(--white); }
.pf-fim{ text-align:left; }
.pf-fim .section-title{ max-width:18ch; }
.pf-fim p.lead{ color:var(--gray); font-weight:300; max-width:46ch; margin:1.2rem 0 2rem; }
.pf-fim .ctas{ display:flex; flex-wrap:wrap; gap:1rem; }
@media (max-width:600px){ .pf-fim .ctas .btn{ width:100%; justify-content:center; } }