/* =========================================================================
   Guincho Asa Norte — CSS diferido
   Painéis, páginas de conteúdo, formulários, modo escuro e impressão.
   ========================================================================= */

/* ---- Painéis deslizantes (folhas) --------------------------------------- */
.folha{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  max-width:min(520px,100vw);
  margin-inline:auto;
  background:linear-gradient(178deg,var(--metal-050),var(--metal-200));
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
  will-change:transform;
  box-shadow:0 -20px 50px -20px rgba(20,23,27,.55);
}
.folha[data-aberta="true"]{transform:translateY(0)}

.folha__topo{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
  background:linear-gradient(180deg,rgba(248,249,250,.98),rgba(241,243,245,.94));
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--metal-300);
}
.folha__topo h2{
  margin:0;
  flex:1;
  font-family:var(--fonte-titulo);
  font-weight:800;
  font-size:17px;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.folha__fechar{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 6px -2px rgba(20,23,27,.3);
  cursor:pointer;color:var(--grafite);
}
.folha__fechar svg{width:16px;height:16px}
.folha__corpo{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 22px);
}

.fundo-escuro{
  position:fixed;inset:0;z-index:39;
  background:rgba(20,23,27,.42);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.fundo-escuro[data-ativo="true"]{opacity:1;pointer-events:auto}

/* ---- Listas dentro dos painéis ------------------------------------------ */
.lista{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.lista__item{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--r-m);
  text-decoration:none;
  color:var(--grafite);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(232,237,241,.85));
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 6px -3px rgba(20,23,27,.3);
  transition:transform .12s ease;
}
.lista__item:active{transform:translateY(2px)}
.lista__item svg{width:26px;height:26px}
.lista__item b{display:block;font-size:14.5px;font-weight:700;line-height:1.2}
.lista__item span{display:block;font-size:12.5px;color:var(--grafite-55);line-height:1.3;margin-top:2px}
.lista__item .seta{width:14px;height:14px;opacity:.45}

.chip-linha{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px;padding:0;list-style:none}
.chip-linha a{
  display:inline-block;
  padding:7px 12px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  color:var(--grafite);
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 4px -1px rgba(20,23,27,.25);
}
.chip-linha a:hover{background:#fff}

/* ---- Blocos de texto ---------------------------------------------------- */
.bloco{margin:0 0 20px}
.bloco h3{
  margin:0 0 8px;
  font-family:var(--fonte-titulo);
  font-size:14px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--grafite-55);
}
.bloco p{margin:0 0 10px;font-size:14.5px;line-height:1.62;color:var(--grafite-80);text-wrap:pretty}
.bloco p:last-child{margin-bottom:0}

.marcadores{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.marcadores li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  line-height:1.5;
  color:var(--grafite-80);
}
.marcadores li::before{
  content:"";
  position:absolute;left:2px;top:.55em;
  width:8px;height:8px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,var(--sinal-claro),var(--sinal-escuro));
  border-radius:2px;
}

.passos{margin:0;padding:0;list-style:none;counter-reset:p;display:grid;gap:12px}
.passos li{
  counter-increment:p;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:12px;
  align-items:start;
}
.passos li::before{
  content:counter(p);
  display:grid;place-items:center;
  width:30px;height:30px;
  border-radius:9px;
  font-family:var(--fonte-titulo);
  font-weight:800;
  font-size:14px;
  color:var(--grafite);
  background:linear-gradient(180deg,var(--sinal-claro),var(--sinal-escuro));
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 5px -2px rgba(20,23,27,.5);
}
.passos b{display:block;font-size:14.5px;line-height:1.25}
.passos span{display:block;font-size:13.5px;line-height:1.5;color:var(--grafite-55);margin-top:2px}

/* ---- Acordeão de dúvidas ------------------------------------------------ */
.duvida{
  border-radius:var(--r-m);
  background:rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 4px -2px rgba(20,23,27,.3);
  margin-bottom:8px;
  overflow:hidden;
}
.duvida summary{
  padding:13px 15px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  cursor:pointer;
  list-style:none;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--fonte-titulo);
  font-size:19px;
  line-height:1;
  color:var(--sinal-escuro);
  transition:transform .2s ease;
}
.duvida[open] summary::after{transform:rotate(45deg)}
.duvida div{padding:0 15px 14px;font-size:14px;line-height:1.6;color:var(--grafite-80)}

/* ---- Páginas de conteúdo (com rolagem) ---------------------------------- */
.topo{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:11px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
  background:rgba(248,249,250,.9);
  backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid var(--metal-300);
}
.topo a.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--grafite)}
.topo img{width:34px;height:34px}
.topo .nome{font-family:var(--fonte-titulo);font-weight:800;font-size:14.5px;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.topo .sub{font-size:11px;color:var(--grafite-55);font-weight:500}
.topo .tel{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;
  background:linear-gradient(180deg,var(--whats-claro),var(--whats));
  color:#fff;font-weight:700;font-size:13px;text-decoration:none;
  box-shadow:0 2px 0 var(--whats-escuro),0 6px 12px -6px rgba(20,23,27,.6);
}
.topo .tel svg{width:16px;height:16px}

.pagina{
  max-width:760px;
  margin-inline:auto;
  padding:20px 16px 132px;
}
.migalhas{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 14px;padding:0;list-style:none;
  font-size:12px;color:var(--grafite-55);
}
.migalhas li::after{content:"›";margin-left:6px;opacity:.6}
.migalhas li:last-child::after{content:""}
.migalhas a{color:var(--grafite-55);text-decoration:none}
.migalhas a:hover{color:var(--grafite);text-decoration:underline}

.pagina h1{
  margin:0 0 10px;
  font-family:var(--fonte-titulo);
  font-weight:800;
  font-size:clamp(25px,6.6vw,38px);
  line-height:1.06;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.chamada{
  margin:0 0 22px;
  font-size:clamp(15.5px,4.1vw,18px);
  line-height:1.5;
  color:var(--grafite-80);
  text-wrap:pretty;
}
.pagina h2{
  margin:30px 0 10px;
  font-family:var(--fonte-titulo);
  font-weight:800;
  font-size:clamp(19px,4.8vw,24px);
  line-height:1.16;
  letter-spacing:-.014em;
  text-wrap:balance;
}
.pagina h3{
  margin:22px 0 8px;
  font-family:var(--fonte-titulo);
  font-size:15px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--grafite-55);
}
.pagina p{margin:0 0 13px;font-size:16px;line-height:1.68;color:var(--grafite-80);text-wrap:pretty}
.pagina a{color:var(--grafite);text-decoration-color:var(--sinal-escuro);text-underline-offset:3px}

.cartao{
  padding:16px 18px;
  border-radius:var(--r-g);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(232,237,241,.8));
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 3px 12px -6px rgba(20,23,27,.35);
  margin:0 0 18px;
}
.cartao--sinal{
  background:linear-gradient(180deg,#FFF6DA,#FBE9B0);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 3px 12px -6px rgba(160,120,10,.5);
}
.cartao--sinal p{color:#5A4406}
.cartao--sinal strong{color:#3D2E02}

.grade{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.grade a{
  display:block;
  padding:14px 16px;
  border-radius:var(--r-m);
  text-decoration:none;color:var(--grafite);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(232,237,241,.82));
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 2px 8px -4px rgba(20,23,27,.35);
  transition:transform .14s ease,box-shadow .14s ease;
}
.grade a:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 8px 18px -8px rgba(20,23,27,.45)}
.grade b{display:block;font-family:var(--fonte-titulo);font-weight:800;font-size:15.5px;line-height:1.2;margin-bottom:4px}
.grade span{display:block;font-size:13.5px;line-height:1.45;color:var(--grafite-55)}
.grade svg{width:28px;height:28px;margin-bottom:8px}

/* ---- Formulários -------------------------------------------------------- */
.form{display:grid;gap:12px}
.campo{display:grid;gap:5px}
.campo label{font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--grafite-55)}
.campo input,.campo select,.campo textarea{
  width:100%;
  padding:13px 14px;
  font:inherit;
  font-size:16px; /* 16px evita zoom automático no iOS */
  color:var(--grafite);
  background:rgba(255,255,255,.96);
  border:1px solid var(--metal-300);
  border-radius:var(--r-m);
  box-shadow:0 1px 2px rgba(20,23,27,.06) inset;
}
.campo textarea{min-height:96px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--sinal-escuro);
  outline:3px solid rgba(230,184,40,.32);
  outline-offset:0;
}
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 22px;
  border:0;border-radius:var(--r-m);
  font-family:var(--fonte-titulo);font-weight:800;font-size:15px;
  text-transform:uppercase;letter-spacing:.01em;
  color:#fff;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,var(--whats-claro),var(--whats) 55%,#17994A);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 4px 0 var(--whats-escuro),0 10px 18px -10px rgba(20,23,27,.6);
  transition:transform .1s ease,box-shadow .1s ease;
}
.botao:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 1px 0 var(--whats-escuro)}
.botao svg{width:19px;height:19px}
.botao[disabled]{opacity:.6;pointer-events:none}
.aviso{padding:12px 14px;border-radius:var(--r-m);font-size:14px;line-height:1.5}
.aviso--ok{background:#DFF5E6;color:#0F5B2D}
.aviso--erro{background:#FDE4E3;color:#8C1A16}

/* ---- Barra de ação fixa nas páginas de conteúdo ------------------------- */
.acao-fixa{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:35;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  max-width:min(520px,100vw);
  margin-inline:auto;
  padding:9px 12px calc(env(safe-area-inset-bottom,0px) + 9px);
  background:linear-gradient(180deg,rgba(241,243,245,.6),rgba(241,243,245,.97) 40%);
  backdrop-filter:blur(10px) saturate(1.3);
}
.acao-fixa .tecla{min-height:54px;border-radius:var(--r-m);padding:0 12px;grid-template-columns:auto 1fr}
.acao-fixa .tecla__texto strong{font-size:14.5px}
.acao-fixa .tecla__texto small{font-size:11px}

/* ---- Rodapé ------------------------------------------------------------- */
.rodape{
  padding:26px 16px calc(env(safe-area-inset-bottom,0px) + 96px);
  background:linear-gradient(180deg,transparent,rgba(211,218,224,.55));
  font-size:13.5px;
  color:var(--grafite-55);
}
.rodape__grade{
  max-width:760px;margin-inline:auto;
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.rodape h4{
  margin:0 0 9px;
  font-family:var(--fonte-titulo);font-size:12px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--grafite);
}
.rodape ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.rodape a{color:var(--grafite-55);text-decoration:none}
.rodape a:hover{color:var(--grafite);text-decoration:underline}
.rodape__base{
  max-width:760px;margin:22px auto 0;padding-top:16px;
  border-top:1px solid var(--metal-300);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:12px;
}

/* ---- Consentimento LGPD ------------------------------------------------- */
.consentimento{
  position:fixed;
  left:12px;right:12px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  z-index:50;
  max-width:min(496px,calc(100vw - 24px));
  margin-inline:auto;
  padding:14px 16px;
  border-radius:var(--r-m);
  background:rgba(20,23,27,.95);
  color:#fff;
  font-size:12.5px;
  line-height:1.45;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
  display:none;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.consentimento[data-visivel="true"]{display:flex}
.consentimento a{color:var(--sinal-claro)}
.consentimento button{
  border:0;border-radius:8px;padding:8px 14px;
  font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;
}
.consentimento .aceitar{background:var(--sinal);color:var(--grafite)}
.consentimento .recusar{background:rgba(255,255,255,.14);color:#fff}
.consentimento p{margin:0;flex:1 1 210px}

/* ---- Instalação do app -------------------------------------------------- */
.instalar{
  display:none;
  align-items:center;
  gap:9px;
  width:100%;
  margin-top:2px;
  padding:9px 13px;
  border:1px dashed var(--metal-400);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.6);
  font:inherit;font-size:12.5px;font-weight:600;color:var(--grafite-80);
  cursor:pointer;
}
.instalar[data-visivel="true"]{display:flex}
.instalar svg{width:16px;height:16px}

/* ---- Modo escuro: leitura noturna à beira da via ------------------------ */
@media (prefers-color-scheme:dark){
  :root{
    --metal-000:#22262B;
    --metal-050:#1E2227;
    --metal-100:#191D21;
    --metal-200:#15181C;
    --metal-300:#2C3238;
    --metal-400:#3C444C;
    --metal-500:#69737C;
    --grafite:#F2F5F7;
    --grafite-80:rgba(242,245,247,.82);
    --grafite-55:rgba(242,245,247,.58);
    --grafite-30:rgba(242,245,247,.3);
  }
  body{background:var(--metal-100)}
  body::before{
    background:
      repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.22) 1px 2px,rgba(255,255,255,0) 2px 3px),
      linear-gradient(163deg,#262B31 0%,#1B1F24 40%,#121519 100%);
    background-size:3px 100%,100% 100%;
  }
  body::after{
    background:
      radial-gradient(130% 70% at var(--lx) var(--ly),rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 55%),
      radial-gradient(120% 90% at 88% 108%,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 60%);
  }
  .marca h1,.marca .h1{text-shadow:0 1px 0 rgba(0,0,0,.6)}
  .ficha,.lista__item,.grade a,.cartao,.barra{
    background:linear-gradient(180deg,rgba(52,59,66,.9),rgba(33,38,43,.85));
    box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 2px 8px -4px rgba(0,0,0,.8);
  }
  .plantao{
    background:linear-gradient(180deg,rgba(52,59,66,.9),rgba(33,38,43,.85));
    border-color:rgba(255,255,255,.08);
  }
  .duvida,.chip-linha a,.campo input,.campo select,.campo textarea{
    background:rgba(40,46,52,.9);color:var(--grafite);
  }
  .folha{background:linear-gradient(178deg,#1E2227,#15181C)}
  .folha__topo{background:rgba(25,29,33,.96)}
  .folha__fechar{background:rgba(52,59,66,.95);color:var(--grafite)}
  .topo{background:rgba(25,29,33,.92)}
  .acao-fixa{background:linear-gradient(180deg,rgba(25,29,33,.5),rgba(25,29,33,.97) 40%)}
  .cartao--sinal{background:linear-gradient(180deg,#3A2F0C,#2B2208)}
  .cartao--sinal p{color:#F3DE9C}
  .cartao--sinal strong{color:#FFF3CE}
  .aviso--ok{background:#123522;color:#8EE7B0}
  .aviso--erro{background:#3B1512;color:#FFB3AE}
}

/* ---- Impressão: vira uma ficha de contato ------------------------------- */
@media print{
  .barra,.acoes,.acao-fixa,.consentimento,.folha,.fundo-escuro,.pular,.instalar{display:none !important}
  body::before,body::after{display:none}
  body{background:#fff;color:#000}
  .app{height:auto}
  .pagina{padding:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

/* ---- Mapa completo (painel e páginas) ----------------------------------- */
.mapa{
  margin:0 0 18px;
  border-radius:var(--r-m);
  overflow:hidden;
  background:linear-gradient(180deg,#fff,var(--metal-200));
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 3px 12px -6px rgba(20,23,27,.35);
}
.mapa svg{display:block;width:100%;height:auto}
.mapa figcaption{
  padding:10px 14px 12px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--grafite-55);
  border-top:1px solid var(--metal-300);
}
.mapa__zona{cursor:pointer}
.mapa__zona circle{transition:opacity .18s ease,r .18s ease}
.mapa__zona:hover circle:first-child,
.mapa__zona:focus-visible circle:first-child{opacity:.55}
.mapa__zona:focus-visible{outline:none}
.mapa__zona:focus-visible circle:nth-child(2){stroke-width:3}
.mapa__rotulo{
  font-family:var(--fonte-texto);
  font-size:9.6px;
  font-weight:700;
  letter-spacing:.01em;
  fill:#14171B;
  paint-order:stroke;
  stroke:rgba(255,255,255,.9);
  stroke-width:2.6px;
  stroke-linejoin:round;
  pointer-events:none;
}
.mapa__zona--principal .mapa__rotulo{font-size:11.4px;letter-spacing:.03em;text-transform:uppercase}
.mapa--compacto .mapa__rotulo{display:none}
.mapa--compacto .mapa__zona--principal .mapa__rotulo{display:block}

/* ---- Galeria de mídias --------------------------------------------------- */
.galeria{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));
  gap:8px;
}
.galeria__item{
  position:relative;
  display:block;
  padding:0;
  border:0;
  border-radius:var(--r-m);
  overflow:hidden;
  cursor:pointer;
  background:var(--metal-200);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 8px -4px rgba(20,23,27,.4);
  aspect-ratio:4/3;
}
.galeria__item img{width:100%;height:100%;object-fit:cover;display:block}
.galeria__item span{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 10px 8px;
  background:linear-gradient(180deg,transparent,rgba(20,23,27,.82));
  color:#fff;font-size:11.5px;font-weight:600;line-height:1.3;text-align:left;
}
.galeria__item:active{transform:translateY(2px)}

.lightbox{
  position:fixed;inset:0;z-index:60;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:24px 16px calc(env(safe-area-inset-bottom,0px) + 24px);
  background:rgba(12,14,17,.96);
}
.lightbox[data-aberto="true"]{display:flex}
.lightbox img{max-width:100%;max-height:78vh;border-radius:var(--r-m);object-fit:contain}
.lightbox p{margin:0;color:#E6E9EC;font-size:13.5px;text-align:center;max-width:52ch}
.lightbox__fechar{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;
  width:42px;height:42px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
}
.lightbox__fechar svg{width:18px;height:18px}

/* ---- Extras dos painéis -------------------------------------------------- */
.folha__secao{
  margin:0 0 10px;
  font-family:var(--fonte-titulo);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grafite-55);
}
.lista__item--estatico{grid-template-columns:38px 1fr;cursor:default}
.folha__rodape{
  margin:24px 0 0;
  padding-top:14px;
  border-top:1px solid var(--metal-300);
  font-size:12px;
  line-height:1.6;
  color:var(--grafite-55);
}

@media (prefers-color-scheme:dark){
  .mapa,.mapa-toque{background:linear-gradient(180deg,#252A30,#191D21)}
  .mapa figcaption{border-top-color:#2C3238}
  .mapa__rotulo{fill:#F2F5F7;stroke:rgba(15,18,21,.9)}
  .galeria__item{background:#252A30}
}

@media (prefers-color-scheme:dark){
  .mapa__fundo{fill:#1B1F24}
  .mapa__quadras{fill:#2E353C;stroke:#3B434B}
}