/* ==========================================================================
   Voraxus — styles.css (moderno, fluido, acessível, responsivo)
   ========================================================================== */

/* ===== Design tokens ===== */
:root{
  --fg: #e7e7ea;
  --muted: #b7b7c0;
  --bgA: #070914;              /* fundo mais azul-marinho */
  --bgB: #0c0f1e;

  --line: rgba(255,255,255,.12);
  --glass: rgba(255,255,255,.06);
  --soft: rgba(255,255,255,.08);
  --hover: rgba(255,255,255,.14);

  /* >>> Cores da logo */
  --brandA: #0a0e3a;           /* azul-marinho */
  --brandB: #ff6a00;           /* laranja */
  --brandC: #ff9a3d;           /* laranja claro de apoio */
  --accent: #ff6a00;           /* usado em focos e ênfases */

  --radius: 16px;
  --radius-lg: 22px;
  --shadow-1: 0 6px 24px rgba(0,0,0,.28);
  --shadow-2: 0 12px 36px rgba(0,0,0,.35);
}

/* ===== Base ===== */
*,
*::before,
*::after{ box-sizing: border-box }

html,body{ height:100% }

body.vrs-body{
  margin:0;
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* fundo com camadas e leve vinheta */
  background:
    radial-gradient(1200px 600px at 10% -10%, #1b1b2c 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, #281428 0%, transparent 60%),
    linear-gradient(180deg, var(--bgA), var(--bgB));
}

/* rolagem suave */
html:focus-within{ scroll-behavior: smooth }

/* ===== Helpers ===== */
.vrs-container{ width:100%; max-width: 1160px; margin: 0 auto; padding: 0 1.25rem }
.row{ display:flex; align-items:center }
.vrs-hidden{ display:none !important }
.ml2{ margin-left:.5rem }
.vrs-muted{ color: var(--muted) }
.vrs-error{ color: #ff8a8a }

/* ===== Espaçamentos fluidos (para consistência visual) ===== */
:root{
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --space-6: 2.25rem;
}

/* ===== Header / Nav ===== */
.vrs-nav{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(120%) blur(12px);
  background: color-mix(in hsl, #0b0b12 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.vrs-nav__in{
  height: 64px; display:flex; align-items:center; justify-content:space-between;
}
.vrs-brand{ display:flex; align-items:center; gap:.6rem }
.vrs-brand__dot{
  width: 32px; height: 32px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brandA), var(--brandB), var(--brandC));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 20px rgba(99,102,241,.35);
}

.vrs-logo-main {
  width: 34px; 
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.vrs-brand__name{ font-weight:600; letter-spacing:.2px }
.vrs-badge{
  margin-left:.5rem;
  font-size:.78rem; line-height: 1;
  color:#fff; opacity:.9;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  padding:.32rem .55rem; border-radius: 15px;
}

.vrs-links{ display:none; gap:1rem }
.vrs-links button{
  appearance:none; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.72);
  padding:.3rem .4rem; border-radius: 10px;
  transition: color .18s ease, background .18s ease;
}
.vrs-links button:hover{ color:#fff; background: rgba(255,255,255,.06) }

.vrs-cta{ display:flex; gap:.5rem; align-items:center }

@media (min-width: 768px){ .vrs-links{ display:flex } }

/* ===== Botões / Links ===== */
.vrs-btn{
  --pad-x: .95rem; --pad-y: 5px;
  appearance:none;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:#fff; padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius); cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s, box-shadow .2s;
  box-shadow: var(--shadow-1);
  text-decoration: none !important;
}
.vrs-btn:hover{
  transform: translateY(-1px);
  background: var(--hover);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--shadow-2);
}
.vrs-btn:active{ transform: translateY(0) scale(.99) }

.vrs-btn--ghost{ background: transparent }
.vrs-btn--soft{ background: rgba(255,255,255,.10) }

.vrs-link{
  color:#c9d4ff; text-decoration:none;
  transition: color .18s ease, opacity .18s ease, text-underline-offset .18s;
  text-underline-offset: 2px;
  margin-left: 10px;
}
.vrs-link:hover{ text-decoration: underline; text-underline-offset: 3px }

/* ===== Ícones (biblioteca <iconify-icon>) ===== */
iconify-icon.ico{
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  color: currentColor;
}

/* ===== Ícones (máscaras CSS — compatível com HTML atual) ===== */
[class^="vrs-ico-"], [class*=" vrs-ico-"]{
  display:inline-block; width:18px; height:18px; background: currentColor;
  mask-size: cover; -webkit-mask-size: cover;
}
/* (as máscaras SVG específicas permanecem iguais às já usadas no seu CSS) */

/* ===== Hero ===== */
.vrs-hero{ position:relative; overflow:hidden }
.vrs-hero__in{ padding: clamp(40px, 5vw, 100px) 0 48px }
.vrs-hero__title{
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 800; letter-spacing: .2px;
  opacity:0; transform: translateY(18px);
  animation: vrs-rise .6s ease forwards;
  margin: 20px;
}
.vrs-hero__lead{
  margin-top: .8rem; max-width: 46ch; color: rgba(255,255,255,.74);
  opacity:0; transform: translateY(10px);
  animation: vrs-rise .6s ease .08s forwards;
  margin: 20px;
}
.vrs-hero__actions{
  margin-top: 1.25rem; display:flex; gap:.75rem; flex-wrap:wrap;
  opacity:0; transform: translateY(10px);
  animation: vrs-rise .6s ease .16s forwards;
  margin: 20px;
}

/* blobs de cor */
.vrs-blob{
  position:absolute; filter: blur(120px); opacity:.25; pointer-events:none;
  width: 38rem; height:38rem; border-radius: 999px;
}
.vrs-blob--a{ left:-30%; top:-30%; background: var(--brandA); }
.vrs-blob--b{ right:-30%; bottom:-35%; background: var(--brandB); }

@keyframes vrs-rise{ to{ opacity:1; transform: translateY(0) } }

/* ===== Cards ===== */
.vrs-card{
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  padding: 1rem;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.vrs-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  background: color-mix(in hsl, var(--glass) 70%, #ffffff 3%);
  border-color: rgba(255,255,255,.18);
}
.vrs-card--panel{ padding: 1.15rem 1.15rem }
.vrs-card--site{ overflow:hidden }

/* ===== KPI / Features ===== */
.vrs-kpis{
  display:grid; grid-template-columns: repeat(1,minmax(0,1fr)); gap: .9rem;
  margin-top: -24px;
}
@media (min-width: 640px){ .vrs-kpis{ grid-template-columns: repeat(3,1fr) } }

.vrs-kpi__ico{
  width: 40px; height:40px; border-radius: 12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.10); margin-bottom:.55rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.vrs-kpi__title{ font-size:1.02rem; margin:.2rem 0 .25rem }
.vrs-kpi__desc{ color: var(--muted); font-size:.97rem }

/* ===== Sections / Títulos ============================================================= */
.vrs-section{ padding: clamp(48px, 7vw, 72px) 0 }
.vrs-sec__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom: .9rem;
}
.vrs-sec__title{
  display:flex; align-items:center; gap:.6rem;
  font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 800;
}

/* ===== Grids =========================================================================== */
.vrs-grid{
  display:grid; gap:.9rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width:768px){
  .vrs-grid{ grid-template-columns: repeat(3, 1fr) }
}

/* ===== Carrossel horizontal com snap ===== */
.vrs-carousel{
  /* layout base */
  --card-w: clamp(260px, 30vw, 360px);   /* largura fixa dos cards no carrossel */
  --media-h: clamp(150px, 22vw, 220px);  /* ALTURA do conteúdo (medida padrão) */
  display:flex; gap:.9rem; overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.vrs-carousel::-webkit-scrollbar{ display:none }

/* cada item vira “slide” com largura fixa */
.vrs-carousel > *{
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
}

/* ===== Card de site (aplica tanto em grid quanto carrossel) ===== */
.vrs-card.vrs-card--site{
  display:flex; flex-direction:column; gap:.6rem;
}

/* Caixa de mídia com medida fixa (sem corte) */
.vrs-card--site .vrs-thumb{
  width:100%;
  height: var(--media-h);       /* <<< altura CONTROLADA (sua “medida certa”) */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08)),
    #0b0c12;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* quando a thumb é IMG, ela se AJUSTA dentro do box sem cortar */
.vrs-card--site .vrs-thumb.vrs-thumb:not(.vrs-thumb--ph){
  padding: 8px; /* respiro pra não encostar nas bordas */
}
.vrs-card--site .vrs-thumb img,
.vrs-card--site img.vrs-thumb{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* <<< NUNCA corta */
  object-position: center;  /* foca no centro */
  display:block;
}

/* placeholder mantém a mesma medida */
.vrs-card--site .vrs-thumb--ph{
  color: rgba(255,255,255,.7);
  font-weight:600;
  letter-spacing:.2px;
}

/* Títulos/links */
.vrs-card--site .vrs-card__title{ margin:0 }
.vrs-card--site .vrs-muted{ margin:0 }

/* ===== Responsividade extra ===== */
/* Em telas menores, aumente a altura do box se quiser dar mais destaque */
@media (max-width: 540px){
  .vrs-carousel{
    --card-w: min(86vw, 360px);
    --media-h: clamp(160px, 50vw, 240px);
  }
}

/* (opcional) Usar aspect-ratio em vez de altura fixa:
   descomente se preferir 16:10 mantendo sem corte (com contain) */
/*
.vrs-card--site .vrs-thumb{
  height: auto;
  aspect-ratio: 16 / 10;
}
*/

/* ===== Serviços ===== ========================================================*/
.vrs-services{
  display:grid; gap: var(--space-5); grid-template-columns: 1fr;
}
.vrs-services__cards{
  display:grid; gap: .9rem; grid-template-columns: repeat(2,1fr);
}
@media (min-width: 1024px){ .vrs-services{ grid-template-columns: 1.25fr .9fr } }

/* ===== Sobre / Stats / Legal ===== */
.vrs-about{
  display:grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 1024px){ .vrs-about{ grid-template-columns: 1.2fr .8fr } }

.vrs-stats{
  margin-top: .95rem;
  display:grid; gap: .9rem; grid-template-columns: repeat(2,1fr);
}

.vrs-legal{
  display:grid; grid-template-columns: 1fr 1fr; gap: .6rem .5rem;
}
.kv span{ color: var(--muted); display:block }
.kv strong{ font-weight:100; font-size: 90%}

/* ===== Contato ===== */
.vrs-contact{
  display:grid; gap: 1.25rem; grid-template-columns: 1fr;
}
@media (min-width: 1024px){
  .vrs-contact{ grid-template-columns: 1.1fr .9fr }
}

.vrs-contact__lines .row{ gap:.55rem; margin:.45rem 0 }

.vrs-form{ display:grid; gap:.7rem }

/* Inputs e selects unificados */
.vrs-input,
select.vrs-input{
  width:100%;
  border-radius: var(--radius);
  padding:.78rem .95rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.065);
  color:#fff;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  appearance: none; /* remove aparência padrão do select */
}

.vrs-input:hover,
select.vrs-input:hover{
  background: rgba(255,255,255,.085);
}

.vrs-input:focus,
select.vrs-input:focus{
  outline: none;
  border-color: color-mix(in hsl, var(--brandA) 45%, white 10%);
  box-shadow: 0 0 0 4px color-mix(in hsl, var(--brandA) 18%, transparent);
  background: #202230;
}

/* seta customizada para selects */
select.vrs-input{
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 14px;
  padding-right: 2rem; /* espaço para a seta */
}

/* ===== Thumbs / Logos ===== */
.vrs-thumb{
  width:100%; height: 180px; object-fit: cover; border-radius: 14px; opacity:.95;
  transition: transform .25s ease, opacity .25s ease;
}
.vrs-card:hover .vrs-thumb{ transform: scale(1.02); opacity:1 }

.vrs-thumb--ph{
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.65);
}

.vrs-logo{
  width:42px; height:42px; object-fit:contain; border-radius:10px;
}
.vrs-logo--placeholder{
  width:42px; height:42px; border-radius:10px;
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}

/* ===== Footer ===== */
.vrs-footer{ border-top: 1px solid var(--line) }
.vrs-footer__in{
  padding: 28px 0; display:flex; flex-direction:column; gap:.8rem;
}
@media (min-width: 768px){
  .vrs-footer__in{ flex-direction: row; align-items:center; justify-content:space-between }
}
.vrs-footer__links {
    display: flex;
    gap: 15px;
    flex-direction: row;
    justify-content: center;
}
.rodape {
    text-align: center;
    font-size: 15px;
    color: var(--muted);
    margin: 5px;
    padding: 12px;
    margin-bottom: -10px;
}
.rodape div + div {
  margin-top: 6px;
  font-size: 14px;
  color: #fff;             /* cor mais forte que o muted */
  font-weight: 600;        /* negrito */
  letter-spacing: 0.3px;   /* espaçamento sutil */
}

/* ===== Acessibilidade / Focus ===== */
button:focus, a:focus{
  outline: 2px solid color-mix(in hsl, var(--brandA) 55%, white 5%);
  outline-offset: 2px;
}
input:focus, textarea:focus{ outline: none }

/* ===== Animações "reveal" opcionais ===== */
.vrs-reveal{
  opacity:0; transform: translateY(14px) scale(.985);
  animation: vrs-show .5s cubic-bezier(.2,.6,.2,1) var(--d,0ms) forwards;
}
@keyframes vrs-show{ to{ opacity:1; transform: none } }

/* ===== Preferências do usuário ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}

/* ===== Scrollbar (WebKit) — sutil ===== */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22) }

/* ===== Ícones (máscaras SVG já presentes no seu projeto) ===== */
/* Copie suas definições .vrs-ico-* atuais aqui se ainda não estiverem incluídas.
   Ex.: .vrs-ico-phone, .vrs-ico-mail, .vrs-ico-quote, etc.
   (mantive no HTML a opção com <iconify-icon>, então ambas funcionam) */

/* ===== Ajustes específicos para este projeto ========================================================================= */
/* WhatsApp: layout básico */
#waTop{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
#waTop .ico{ font-size: 18px; line-height: 1 }

/* Em telas pequenas, mostrar só o ícone */
@media (max-width: 540px){
  #waTop span{ display: none }
  #waTop {
    padding-inline: .6rem;
    padding: 10px;
    margin-left: 5px;
  }
  .vrs-blob--b {
    right: -120%;
    bottom: -35%;
    background: var(--brandB);
  }
}

/* ===== Links do ADM no rodapé ===== */
.vrs-adm {
  display: inline-flex;
  gap: 10px;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px dashed var(--line);
}
.vrs-adm a {
  color: #ffc38a;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 166, 77, .10);
  border: 1px solid rgba(255, 166, 77, .25);
  text-decoration: none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.vrs-adm a:hover {
  transform: translateY(-1px);
  background: rgba(255, 166, 77, .16);
  border-color: rgba(255, 166, 77, .32);
}


/* ===== TEAM BANNER ===== ========================================================================================*/
.vrs-team { padding-top: 0 } /* gruda no hero com respiro do container */
.vrs-team__head { margin-bottom: 12px }
.vrs-team__head .vrs-sec__title { display: flex; align-items: center; gap: .5rem }

.vrs-team__banner{
  position: relative;
  width: 100%;
  /* desktop ultra-wide: 4:1 (≈ 100 x 25) */
  aspect-ratio: 2 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  background: #0b0c12;
}

/* a imagem preenche tudo e, conforme a tela estreita, corta só as laterais */
.vrs-team__banner img{
  width: 100%;
  height: 130%;
  object-fit: cover;        /* cobre o container inteiro */
  object-position: 50% 50%; /* foca no centro (ajuste se quiser subir/descer) */
  display: block;
}

/* leve máscara p/ legibilidade e “peso” visual */
.vrs-team__banner::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28) 60%, rgba(0,0,0,.36));
  pointer-events: none;
}

/* legenda discreta no canto */
.vrs-team__caption{
  position: absolute; left: 14px; bottom: 10px;
  font-size: .9rem; letter-spacing: .3px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

figure.vrs-team__banner {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* breakpoints: estreitando o aspect, até ficar quadrado no mobile */
@media (max-width: 1200px){
  .vrs-team__banner{ aspect-ratio: 2 / 1; /* display: contents; */ }
}
@media (max-width: 960px){
  .vrs-team__banner{ aspect-ratio: 2 / 1; /* display: contents; */ }
}
@media (max-width: 760px){
  .vrs-team__banner{ aspect-ratio: 1 / 1; /* display: contents; */ }
}

/* (opcional) caso a área de interesse fique ligeiramente acima do centro,
   troque o foco vertical aqui, ex.: 45% */
@media (max-width: 760px){
  .vrs-team__banner img{ object-position: 50% 50%; } /* ajuste fininho do foco */
}