/* Linkd brand tokens and shared pieces. Served at linkd.com.br (Worker "linkd") and cobalt.codes/linkd/.
   Guide: Cobalt/projects/cobalt-auto/brand/BRAND.md */
:root{
  --cobalto:#1B3DD4;--cobalto-escuro:#132C9E;--tinta:#141A33;--ceu:#EEF2FC;--branco:#FFFFFF;
  --etiqueta:#FFC93C;--conversa:#12A150;--conversa-escuro:#0D7F3F;--cimento:#D5DAE6;--tinta-suave:#4A5170;
  --fonte:"Archivo",system-ui,sans-serif;
  --t-14:.875rem;--t-17:1.0625rem;--t-21:1.3125rem;--t-27:1.6875rem;--t-33:2.0625rem;--t-42:2.625rem;--t-52:3.25rem;--t-66:4.125rem;
  --raio:6px;--pagina:1120px;--leitura:680px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--branco);color:var(--tinta);font:400 var(--t-17)/1.55 var(--fonte);font-variation-settings:"wdth" 100}
img{max-width:100%;height:auto;display:block}
a{color:var(--cobalto)}
:focus-visible{outline:3px solid var(--etiqueta);outline-offset:3px}
.titulo{font-weight:800;font-stretch:118%;font-variation-settings:"wdth" 118;line-height:1.02;letter-spacing:-.01em;margin:0}

/* Logo: the wordmark and the slash of the address. On dark or cobalt backgrounds use .logo--claro. */
.logo{font-weight:900;font-variation-settings:"wdth" 125;font-stretch:125%;letter-spacing:-.035em;line-height:1;text-decoration:none;color:var(--tinta);white-space:nowrap}
.logo i{font-style:normal;color:var(--cobalto)}
.logo--claro{color:var(--branco)}
.logo--claro i{color:var(--etiqueta)}

/* The address: the one memorable element. linkd.com.br/ plus the customer's name. */
.endereco{display:inline-flex;align-items:center;max-width:100%;margin:0 0 24px;padding:.5em .95em;border-radius:999px;background:var(--branco);
  box-shadow:0 0 0 2px var(--tinta),0 6px 0 var(--tinta);font-weight:700;font-size:clamp(1.05rem,2.6vw,var(--t-27));white-space:nowrap;overflow:hidden}
.endereco__base{color:var(--tinta-suave);font-weight:600}
.endereco__barra{color:var(--cobalto);font-weight:900;margin:0 .06em}
.endereco__nome{color:var(--tinta);border-right:2px solid var(--cobalto);padding-right:2px}
@media (prefers-reduced-motion:no-preference){.endereco__nome{animation:cursor 1s steps(1) infinite}@keyframes cursor{50%{border-color:transparent}}}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 1.4em;border-radius:var(--raio);
  font:700 var(--t-17)/1 var(--fonte);text-decoration:none;border:2px solid transparent;cursor:pointer}
.botao--principal{background:var(--cobalto);color:var(--branco)}
.botao--principal:hover{background:var(--cobalto-escuro)}
.botao--whatsapp{background:var(--conversa);color:var(--branco)}
.botao--whatsapp:hover{background:var(--conversa-escuro)}
.botao--contorno{border-color:currentColor;color:inherit;background:transparent}

.etiqueta{display:inline-block;background:var(--etiqueta);color:var(--tinta);padding:.35em .7em .3em 1.1em;border-radius:3px 8px 8px 3px;position:relative;
  font-weight:900;font-variation-settings:"wdth" 125;font-stretch:125%;transform:rotate(-3deg)}
.etiqueta::before{content:"";position:absolute;left:.4em;top:50%;width:.38em;height:.38em;margin-top:-.19em;border-radius:50%;background:var(--branco)}

/* Phone mock: the one device drawing for every page and campaign piece (BRAND.md, "Mocks de celular").
   Screen is .fone__tela with an <img> or a scrolling .fone__rolar. Size with --l. */
.fone{--l:240px;position:relative;flex:none;width:var(--l);aspect-ratio:1/2.1;border-radius:calc(var(--l)*.165);padding:calc(var(--l)*.034);
  background:linear-gradient(150deg,#3A3F4B 0%,#15181F 45%,#2A2E38 100%);
  box-shadow:inset 0 0 0 1.5px #6B7180,inset 0 0 0 calc(var(--l)*.018) #0B0D12,0 50px 70px -36px rgba(10,20,60,.55),0 18px 28px -18px rgba(10,20,60,.4)}
.fone::before{content:"";position:absolute;top:calc(var(--l)*.07);left:50%;width:30%;height:calc(var(--l)*.085);transform:translateX(-50%);border-radius:99px;background:#050608;z-index:3}
.fone::after{content:"";position:absolute;right:calc(var(--l)*-.012);top:26%;width:calc(var(--l)*.014);height:13%;border-radius:0 3px 3px 0;background:#2A2E38}
.fone__tela{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--l)*.132);background:#fff;isolation:isolate}
.fone__tela::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 36%);pointer-events:none;z-index:2}
.fone__tela>img{width:100%;height:100%;object-fit:cover;object-position:top}
.fone__rolar{height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}
.fone__rolar::-webkit-scrollbar{display:none}
/* Option 7: tilted in 3D. The parent needs perspective (.cena does it). */
.fone--3d{transform:rotateY(-20deg) rotateX(7deg) rotateZ(3deg)}
/* Scenes: cobalt studio (options 6 and 7) and the yellow of the price tag (option 8). */
.cena{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:20px;perspective:1600px;container-type:inline-size}
.cena--cobalto{background:radial-gradient(120% 90% at 30% 0%,#2C52F0 0%,#1B3DD4 45%,#0E2596 100%);color:var(--branco)}
.cena--etiqueta{background:var(--etiqueta)}
.cena--cobalto::after{content:"";position:absolute;left:22%;right:22%;bottom:7%;height:24px;border-radius:50%;background:rgba(5,10,40,.4);filter:blur(16px)}
/* Option 8: three phones in a fan. */
.leque{position:relative;width:100%;height:100%}
.leque .fone{position:absolute;top:50%;--l:28cqw}
.leque .fone:nth-child(1){left:6%;transform:translateY(-46%) rotate(-8deg)}
.leque .fone:nth-child(3){right:6%;transform:translateY(-46%) rotate(8deg)}
.leque .fone:nth-child(2){left:50%;transform:translate(-50%,-52%);z-index:2}
/* Browser window for desktop captures. The address bar can carry the site's address. */
.navegador{border-radius:10px;overflow:hidden;background:var(--branco);box-shadow:0 40px 80px -36px rgba(5,10,40,.7),0 0 0 1px rgba(20,26,51,.12)}
.navegador__barra{height:26px;background:#E9ECF4;display:flex;align-items:center;gap:6px;padding:0 12px}
.navegador__barra i{width:8px;height:8px;border-radius:50%;background:#C7CCDA}
.navegador__barra span{margin-left:10px;flex:1;max-width:60%;height:14px;border-radius:5px;background:var(--branco)}
.navegador__barra span:not(:empty){height:18px;display:flex;align-items:center;padding:0 10px;font:600 11px/1 var(--fonte);color:var(--tinta-suave);white-space:nowrap;overflow:hidden}
.navegador img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* Site tabs: desktop and phone on the cobalt studio (mock option 7). */
.ramo-cena{aspect-ratio:16/10}
.ramo-cena .navegador{position:absolute;left:6%;top:10%;width:68%}
.ramo-cena .fone{position:absolute;right:9%;top:50%;--l:21cqw;transform:translateY(-50%) rotateY(-20deg) rotateX(7deg) rotateZ(3deg)}
@media (max-width:640px){
  .ramo-cena{aspect-ratio:4/5}
  .ramo-cena .navegador{left:6%;top:6%;width:88%}
  .ramo-cena .fone{--l:40cqw;right:8%;top:auto;bottom:-14%;transform:rotateY(-20deg) rotateX(7deg) rotateZ(3deg)}
}
.etiqueta--branca{background:var(--branco)}
.etiqueta--branca::before{background:var(--etiqueta)}

/* Plans: three products on one shelf, each with its price tag. A cobalt bar marks the recommended one. */
.planos{list-style:none;margin:0;padding:0;display:grid;border-bottom:6px solid var(--tinta)}
@media (min-width:880px){.planos{grid-template-columns:repeat(3,1fr)}}
.plano{position:relative;display:flex;flex-direction:column;gap:14px;padding:40px 28px 36px}
.plano+.plano{border-top:1px solid var(--cimento)}
@media (min-width:880px){.plano+.plano{border-top:0;border-left:1px solid var(--cimento)}}
.plano h3{margin:0;font-size:var(--t-27);font-weight:800;font-variation-settings:"wdth" 118;line-height:1.1}
.plano__quem{margin:0;font-weight:700;color:var(--cobalto)}
.plano__preco{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:4px 0}
.plano__preco .etiqueta{font-size:var(--t-27);background:var(--branco);box-shadow:0 0 0 2px var(--tinta)}
.plano__preco .etiqueta::before{background:var(--etiqueta);box-shadow:0 0 0 1.5px var(--tinta)}
.plano__preco small{font-size:var(--t-14);color:var(--tinta-suave);font-weight:600}
.plano ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--tinta-suave)}
.plano li{padding-left:22px;position:relative}
.plano li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--cobalto)}
.plano .botao{margin-top:auto;align-self:flex-start}
.plano--destaque{background:var(--ceu)}
.plano--destaque::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--cobalto)}
.plano--destaque .plano__preco .etiqueta{background:var(--etiqueta);box-shadow:none}
.plano--destaque .plano__preco .etiqueta::before{background:var(--branco);box-shadow:none}
.planos__nota{margin:20px 0 0;color:var(--tinta-suave);font-size:var(--t-14);max-width:68ch}