/* =========================================================
   NEXT STEP — LINKS
   Medidas tiradas dos frames de referência:
     · header  (HEADER NOVO)  4851x1453  — textos em SVG por cima
     · card    (CRM FRAME)    9116x3536  — proporção 2.578:1
       · respiro lateral 7.28% · faixa roxa 51% da largura
       · mockup ocupa os 48.7% da direita, de topo a base
   ========================================================= */

:root{
  --preto:      #000000;   /* fundo da página e do rodapé */
  --preto-2:    #0b0b0d;
  --preto-3:    #121216;
  --card:       #000000;
  --branco:     #ffffff;
  --cinza:      #a6a6ad;
  --cinza-2:    #6e6e75;
  --roxo:       #4d00ff;
  --roxo-claro: #6a00ff;   /* faixa do frame */
  --roxo-neon:  #8b5cff;
  --gutter:     clamp(14px, 3vw, 28px);
  --coluna:     min(46%, 700px);   /* largura dos cards */
  --display:    "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--preto);
  color:var(--branco);
  font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--roxo-neon);
  outline-offset:3px;
  border-radius:8px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{
  position:relative;
  width:100%;
  margin-inline:auto;
  padding-block-start:clamp(34px, 6vw, 92px);   /* o respiro fica aqui, senão sobra uma faixa clara abaixo do header */
  /* clareado de 5% saindo debaixo do header e morrendo no meio da seção */
  background:
    linear-gradient(to bottom, rgba(255,255,255,.085) 0%, rgba(255,255,255,.045) 20%, rgba(255,255,255,.016) 45%, rgba(255,255,255,0) 70%),
    var(--preto);
}



/* =========================================================
   HEADER — arte de ponta a ponta + textos em vetor
   ========================================================= */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  max-height:390px;          /* em tela larga a arte é cortada, não esticada */
  background:#000;
  line-height:0;
}
.hero__arte{
  position:relative;
  flex:none;
  width:100%;
  aspect-ratio:4851 / 1453;
}
.hero__img{ width:100%; height:100%; object-fit:cover; }

/* mesma posição/escala dos textos que estão na arte, só que em vetor */
.hero__texto{
  position:absolute;
  left:11.400%;      /*  553 / 4851  */
  top:36.752%;       /*  534 / 1453  */
  width:68.872%;     /* 3341 / 4851  */
  height:auto;
}

/* =========================================================
   CARDS  (proporções do CRM FRAME)
   ========================================================= */
.stack{
  width:var(--coluna);
  margin-inline:auto;
}

.cards{
  display:flex;
  flex-direction:column;
  gap:clamp(22px, 4vw, 54px);
}

.bloco{
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.9vw, 24px);
}

/* frase acima do card */
.chamada{
  width:min(100%, 680px);
  margin:0 auto;
  padding:0 8px;
  text-align:center;
  font-family:var(--display);
  font-size:clamp(15px, 1.35vw, 19px);
  font-weight:500;
  letter-spacing:.004em;
  line-height:1.35;
  text-wrap:balance;
  color:rgba(255,255,255,.9);
}

.card{
  container-type:inline-size;
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:9116 / 3536;
  border-radius:clamp(6px, .46cqw, 14px);
  background:var(--card);
  isolation:isolate;
}

/* traçado do frame: camada própria, acima do mockup e da faixa */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  pointer-events:none;
  transition:box-shadow .25s ease;
}
.card:hover::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.26); }

/* --- uma luz branca diluída no canto de cima do lado do mockup ---
   o centro do foco fica em cima do vértice: só o quarto de dentro aparece */
.card::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  width:68%;
  height:150%;
  pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.19) 0%, rgba(255,255,255,.075) 48%, rgba(255,255,255,0) 100%);
}
.card--direita::before{  right:0; transform:translate(50%, -50%); }
.card--esquerda::before{ left:0;  transform:translate(-50%, -50%); }

/* --- mockup (imagem do frame, fundo preto = emenda invisível) --- */
.card__mockup{
  position:absolute;
  z-index:1;
  top:0; right:0; bottom:0;
  width:48.66%;                /* 4436 / 9116 */
  pointer-events:none;
}
.card__mockup img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:left center;
}

/* --- faixa roxa do rodapé do card --- */
.card__faixa{
  position:absolute;
  z-index:4;
  left:0; bottom:0;
  width:51.02%;                /* 4651 / 9116 */
  height:2.369cqw;             /*  216 / 9116 */
  background:var(--roxo-claro);
}

/* --- textos --- */
.card__marca{
  position:absolute;
  z-index:3;
  left:7.284cqw;               /*  664 / 9116 */
  top:8.096cqw;                /*  738 / 9116 */
  height:1.119cqw;             /*  102 / 9116 */
  width:auto;
}

.card__titulo{
  position:absolute;
  z-index:3;
  left:7.284cqw;
  top:10.584cqw;
  margin:0;
  max-width:47%;
  font-family:var(--display);
  font-weight:700;
  font-size:6.636cqw;          /* altura de caixa alta = 432/9116 */
  line-height:1.046;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

.card__sub{
  position:absolute;
  z-index:3;
  left:7.284cqw;
  top:25.87cqw;
  margin:0;
  display:flex;
  align-items:center;
  gap:1.25em;
  max-width:47%;
  font-family:var(--display);
  font-weight:500;
  font-size:1.2242cqw;
  line-height:1;
  letter-spacing:.005em;
  word-spacing:.28em;
  text-transform:uppercase;
  white-space:nowrap;
}
.card__sub svg{
  width:1.35em; height:1.35em;
  flex:none;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.card:hover .card__sub svg{ transform:translateY(.28em); }

/* --- versão espelhada (mockup à esquerda) --- */
.card--esquerda .card__mockup{ right:auto; left:0; }
.card--esquerda .card__mockup img{ object-position:right center; }
.card--esquerda .card__faixa{ left:auto; right:0; }
.card--esquerda .card__marca,
.card--esquerda .card__titulo,
.card--esquerda .card__sub{ left:auto; right:7.284cqw; }
.card--esquerda .card__titulo{ text-align:right; }
.card--esquerda .card__sub{ justify-content:flex-end; }

/* --- mockup com fundo transparente (iPhone): desce e é cortado pela base --- */
.card--solto .card__mockup{
  top:12%; bottom:-18%;
  width:auto;
  z-index:5;               /* fica na frente da faixa */
}
/* a faixa corre por baixo do celular: quem corta ela é a silhueta dele */
.card--solto .card__faixa{ width:76%; }
.card--solto .card__mockup img{
  width:auto; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));
}
.card--solto.card--direita .card__mockup{ right:5%; }
.card--solto.card--esquerda .card__mockup{ left:5%; }

/* --- card sem mockup --- */
.card--simples .card__titulo,
.card--simples .card__sub{ max-width:80%; }

/* ---------- links simples ---------- */
.rows{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-block-start:clamp(16px, 3vw, 34px);
}
.rows:empty{ display:none; }

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px clamp(18px, 2.4vw, 26px);
  border-radius:12px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.row:hover{
  background:var(--preto-2);
  border-color:rgba(162,89,255,.55);
  transform:translateY(-2px);
}
.row__titulo{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:clamp(15px,1.7vw,19px);
}
.row__sub{
  margin:3px 0 0;
  font-family:var(--display);
  font-size:11px; color:var(--cinza);
  text-transform:uppercase; letter-spacing:.02em; word-spacing:.3em;
}
.row__seta{ flex:none; color:var(--branco); transition:transform .25s ease; }
.row:hover .row__seta{ transform:translateY(4px); }

/* =========================================================
   RODAPÉ — colunas, linha fina no topo e luz roxa na base
   ========================================================= */
.foot{
  position:relative;
  overflow:hidden;
  padding-block:clamp(56px, 7vw, 96px) clamp(64px, 8vw, 110px);
  padding-inline:var(--gutter);
  background:var(--preto);
}

.foot__interno{
  position:relative;
  width:min(100%, 1240px);
  margin-inline:auto;
  padding-block-start:clamp(46px, 5.4vw, 82px);
  border-top:1px solid rgba(255,255,255,.10);
}

.foot__grade{
  display:grid;
  grid-template-columns:1.5fr 1.2fr .72fr .95fr;
  gap:clamp(28px, 3.4vw, 56px);
  font-family:var(--display);
}

.foot__logo{
  width:clamp(112px, 10vw, 148px);
  height:auto;
  margin-bottom:clamp(18px, 2vw, 26px);
}

.foot__frase{
  margin:0;
  max-width:19em;
  font-size:clamp(14px, 1.05vw, 15px);
  font-weight:400;
  line-height:1.55;
  color:rgba(255,255,255,.92);
}

.foot__titulo{
  margin:0 0 clamp(16px, 1.8vw, 24px);
  font-size:clamp(14px, 1.1vw, 16px);
  font-weight:500;
  letter-spacing:0;
  color:#fff;
}

.foot__lista{
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1.1vw, 15px);
}

.foot__item{
  margin:0;
  font-size:clamp(14px, 1.05vw, 15px);
  font-weight:400;
  line-height:1.5;
  color:rgba(255,255,255,.58);
}
a.foot__item{ transition:color .2s ease; }
a.foot__item:hover{ color:#fff; }

/* =========================================================
   MOBILE — mesmo desenho do frame, texto num corpo maior
   ========================================================= */
@media (max-width: 860px){
  :root{ --coluna:100%; }

  .wrap{ padding-inline:var(--gutter); }

  /* mesma composição do frame, só com o texto num corpo maior */
  .card{
    aspect-ratio:343 / 132;
    border-radius:10px;
  }
  .card__marca{ top:6cqw; height:2.4cqw; }
  .card__titulo{ top:10.19cqw; font-size:6.8cqw; max-width:50%; }
  .card__sub{ top:27.6cqw; font-size:2.6cqw; gap:.9em; max-width:56%; }
  .card__faixa{ height:3.8cqw; }

  .chamada{ font-size:15px; }

  /* rodapé no celular: só a logo, centralizada */
  .foot{ padding-block:36px 44px; }
  .foot__interno{ padding-block-start:34px; }
  .foot__grade{ display:block; }
  .foot__frase,
  .foot__col{ display:none; }
  .foot__logo{ margin:0 auto; width:132px; }

}

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