:root {
    /* Fundo geral claro */
    --jan-bg-dark: #f3f3f3;
    --jan-bg-section: #ffffff;
    --jan-gray: #777777;
    --jan-light-gray: #b8b8b8;
    --jan-white: #ffffff;
}

html, body{
    scroll-behavior: smooth;
    background: var(--jan-bg-dark);
    color: #222222;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
}

/* NAVBAR */
.navbar {
    background: #111111;
    backdrop-filter: blur(6px);
}

.navbar-brand img {
    height: 100px;      /* aqui você controla o tamanho do logo */
    width: auto;
}

.logo_tada{
  animation-duration: 5s; /* ou 2s */
}

.logo_hero{
    animation-duration: 1s; /* ou 2s */
}

.nav-link {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: .08em;
    color: #dcdcdc !important;
}

.nav-link.active {
    color: #ffffff !important;
}

/* SEÇÕES */
section {
    padding: 80px 0;
}

.section-dark {
    background: #f3f3f3;
    color: #222222;
}

.section-alt {
    background: #ffffff;
    color: #222222;
}

.section-title {
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--jan-gray);
}

.section-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 30px;
    color: #111111;
}

/* HERO */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f3f3f3 60%, #ececec 100%);
}

#hero .hero-title {
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #111111;
}

#hero .hero-subtitle {
    max-width: 460px;
    color: #555555;
}

/* LOGO CIRCULAR NO HERO */
.hero-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo-circle {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: url("../img/janisonazul.avif") center center no-repeat;
    background-size: contain;
    opacity: 0.95;
}

@media (max-width: 767.98px) {
    .hero-logo-circle {
        width: 260px;
        height: 260px;
        margin-top: 24px;
    }
}

/* BOTÕES */
.btn-jan-primary {
    border-radius: 999px;
    padding: 0.7rem 1.8rem;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: .12em;
    border: 1px solid #111;
    color: #ffffff;
    background: #111111;
}

.btn-jan-primary:hover {
    background: #ffffff;
    color: #111111;
}

.btn-jan-outline {
    border-radius: 999px;
    padding: 0.7rem 1.8rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: .12em;
    border: 1px solid #aaaaaa;
    color: #555555;
    background: transparent;
}

.btn-jan-outline:hover {
    border-color: #111111;
    color: #111111;
    background: #ffffff;
}

/* CARDS SERVIÇOS / NÚMEROS */
.service-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px 22px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    height: 100%;
    color: #333333;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: #d0d0d0;
    box-shadow: 0 16px 40px rgba(0,0,0,0.07);
}

/* CARD CONTATO */
.contact-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}

/* FORM */
.form-control, .form-control:focus {
    background: #ffffff;
    border-color: #d0d0d0;
    color: #222222;
}

.form-control::placeholder {
    color: #999999;
}

/* CAROUSEL PORTFÓLIO (só pra ficar bonito) */
#portfolioCarousel .carousel-item img {
    border-radius: 18px;
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* FOOTER - garantir contraste e corrigir text-muted no fundo escuro */
footer{
  background: #111111;
  color: #e6e6e6;
}

footer .text-muted{
  color: #bdbdbd !important;  /* Bootstrap pisa, então força */
}

/* Links/ícones no footer (caso você tenha colocado) */
footer a{
  color: #e6e6e6;
  text-decoration: none;
}

footer a:hover{
  color: #ff5a00;
}

footer .footer-social a{
  color: #e6e6e6;
  font-size: 1.1rem;
  line-height: 1;
}
footer .footer-social a:hover{
  color: #ff5a00;
}



/* ANIMAÇÃO: fade das seções */
.fade-section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.fade-section.show {
    opacity: 1;
    transform: translateY(0);
}

/*Ajustes do paralax*/

.paralax-fade {
    background-image: url('../img/paralax4.jpg');
    min-height: 500px;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.paralax-port {
    background-image: url('../img/paralax4.jpg');
    min-height: 500px;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Splash screen */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #0b0f14; /* fundo escuro (ajusta se quiser) */
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}

.splash-logo {
  width: min(580px, 72vw);
  height: auto;
  animation: splashPulse 1.2s ease-in-out infinite;
}

/* quando for fechar */
.splash.hide {
  opacity: 0;
  visibility: hidden;
}

@keyframes splashPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.03); opacity: 1; }
}

/* acessibilidade: se o usuário prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  .splash-logo { animation: none; }
  .splash { transition: none; }
}

/*AJUSTES NOVOS HERO*/

/* Ajusta espaçamentos do bloco esquerdo */
#hero .hero-left{
  gap: 32px;                 /* espaço entre colunas 1 e 2 */
  margin-top: 12px;          /* controla aquele respiro geral */
}

/* Caixa de cada “coluninha” (logo/botão e serviços) */
#hero .hero-box{
  width: 240px;              /* garante mesma largura pros 2 lados */
}

/* As duas imagens ficam IGUAIS */
#hero .hero-media{
  width: 220px;              /* tamanho fixo igual pra ambas */
  height: 220px;             /* altura fixa pra padronizar */
  object-fit: contain;       /* não distorce, só encaixa */
}

/* Se você quer alinhar a imagem da coluna 2 na mesma altura do conteúdo da coluna 1 */
#hero .hero-box-spacer{
  height: 320px;              /* “desce” a imagem da coluna 2 (ajuste fino) */
}

/* Responsivo: no mobile não estoura */
@media (max-width: 991.98px){
  #hero .hero-box{
    width: 100%;
    max-width: 280px;
  }

  #hero .hero-media{
    width: 240px;
    height: 240px;
    margin-inline: auto;
  }

  #hero .hero-left{
    justify-content: center;
  }
}

/*Ajustes Modal*/

.portfolio-zoom{
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.portfolio-zoom:hover{
  transform: scale(1.04);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.modal-backdrop.show{
  opacity: .85;
}


/*Ajuste de texto vertical*/
/* H4 vertical (desktop) */
.portfolio-wrap{
  display: flex;
  align-items: center;          /* alinha o SERVIÇOS com os cards */
  gap: 40px;                    /* espaço entre SERVIÇOS e grid */
  width: 100%;
}

/* Mantém o SERVIÇOS exatamente como vertical (sem posição absoluta) */
.portfolio-vertical{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .25em;
  font-weight: 800;
  opacity: .9;               /* não deixa ele esmagar */
}

/* Aqui é a mágica: o grid vira “dono” do espaço todo */
.portfolio-content{
  flex: 1 1 auto;
  min-width: 0;                 /* evita overflow estranho */
  display: flex;
  justify-content: flex-start;  /* puxa pra esquerda do bloco (logo: mais pra direita na tela) */
}

/* A row ocupa 100% do espaço disponível */
.portfolio-grid{
  width: 100%;
  margin: 0;                    /* remove margens do row que podem centralizar */
}

/* Ajuste fino por tamanho de tela */
@media (max-width: 992px){
  .portfolio-wrap{ gap: 24px; }
}

@media (max-width: 768px){
  .portfolio-wrap{
    flex-direction: column;     /* no mobile, fica empilhado (mais bonito) */
    align-items: center;
  }

  .portfolio-vertical{
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: .08em;
  }

  .portfolio-content{
    width: 100%;
    justify-content: center;    /* centraliza no mobile */
  }
}

.portfolio-banner img{
  width: 100%;
  height: auto;
  display: block;
}

/*CSS do GRID*/

.portfolio-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* deixa tudo com o mesmo “tamanho visual” */
  border-radius: 12px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.portfolio-thumb {
  overflow: hidden;
  border-radius: 12px;
}

.portfolio-grid img:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.portfolio-card p {
  margin-bottom: 0;
}

/* Banner com altura “travada” e imagem preenchendo */
.portfolio-banner--match{
  height: 1000px;              /* ajuste principal p/ bater com o grid (print tá ~950) */
  border-radius: 18px;
  margin-top: -45px;
  overflow: hidden;
}

.portfolio-banner--match img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* preenche sem deformar */
  object-position: center;    /* centraliza o corte */
  display: block;
}

@media (max-width: 991.98px){
  .portfolio-banner--match{
    height: 420px; /* um tamanho bonito quando vira 1 coluna */
  }
}