:root {
  --cinza-escuro: #222;
  --branco-menor: #eaeaea;
  --cinza: #4e4e4e;
  --cinza-claro: #777777;
  --vermelho: #dc3545;
  --vermelho-escuro: #cc0000;
  --branco: #ffffff;
  --branco-escuro:#c8c8c8;
  --deg: linear-gradient(to bottom orangered , red);
  --transition-default: all 0.3s ease-in-out;
}
body {
    background-color: var(--branco-menor);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 1s ease, color 1s ease;
}

html {
  scroll-behavior:smooth; 
  }

.navbar-brand, .nav-link {
    color: var(--branco) !important;
    font-weight: 600;
}

.navbar-brand, .super-link {
    color: var(--branco) !important;
    font-weight: 600;
}

.hero {
    background: url(laser.png) center/cover no-repeat;
    color: var(--branco);
    padding: 120px 0;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.btn-red {
    background-color: var(--vermelho);
    color: white;
    border-radius: 50px;
    padding: 10px 25px;
    font-weight: bold;
}

.btn-red:hover {
    background-color: #c82333;
}

.grade {
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    background-color: var(--branco);
    padding: 30px;
    margin-top: 5%;
    transition: 1s;
}
.grade2 {
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    background-color: rgb(224, 224, 224);
    padding: 30px;
    margin-top: 5%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: 1s;
}

section h2 {
    color: var(--vermelho);
    font-weight: 700;
    margin-bottom: 20px;
    text-decoration: underline;
    text-decoration-skip: 10px;
}

footer {
    background-color: var(--vermelho-escuro);
    color: var(--branco);
    padding: 20px 0;
    text-align: center;
}

.navbar-red {
    background-color: transparent;
    transition: background-color 0.5s ease;
}

.navbar-red.navbar-shrink,
.navbar-red .navbar-collapse.show {
    background-color: var(--vermelho-escuro) !important;
}

/* Quando menu está aberto no mobile (colapsado) */
.navbar-red .navbar-collapse.show {
    background-color: darkred !important;
}

h1.sami{
    margin-left:10%;
    font-size: 200%;
}

.carousel {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 40%;
    margin: 0 auto;
    position: relative;
    transition: 1s;
}

.carousel-track {
    display: flex;
    width: 100%;
    animation: scroll 15s infinite ease-in-out;
}

.slide {
    flex: 1 0 100%;
    position: relative;
	height: 600px;
}

.carousel-img {
    transition: 1s;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    object-fit: cover;
    transition: transform 1s ease, filter 1s ease;
    filter: brightness(0.85) contrast(1.05);
}

.carousel-caption {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    z-index: 2;
    text-shadow: 3px 3px 10px rgba(0,0,0,0.8);
}

/* Animação para o carrossel */
@keyframes scroll {
    0% { transform: translateX(0%); }
    33% { transform: translateX(-100%); }
    66% { transform: translateX(-200%); }
    100% { transform: translateX(0%); }
}

.onda-inferior {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 101%;
    height: 125px;
    z-index: 1;
}

.onda-inferior2 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 101%;
    height: 100px;
    z-index: 1;
}

.onda-inferior3 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 101%;
    height: 75px;
    z-index: 1;
}

a.nav-link{
    font-size: 100%;
    color: gray !important;
    font-style: italic;
    text-wrap: balance;
    position:relative;
}

a.nav-link:hover{
    color:aliceblue !important;
    font-size: 110%;
    transition: 1s;
}

a.nav-link::after{
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, orange , yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

a.nav-link:hover::after{
    transform: scaleX(1);
}

a.super-link{
    font-size: 100%;
    color:rgb(184, 175, 175) !important;
    font-style: italic;
    text-wrap: balance;
    position:relative;
    text-decoration: none;
}

a.super-link:hover{
    color:aliceblue !important;
    font-size: 120%;
    transition: 1s;
}

a.super-link::after{
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 110%;
    height: 2px;
    background-image: linear-gradient(to right, orange , yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

a.super-link:hover::after{
    transform: scaleX(1);
}

.navbar-brand {
    margin-left: 20px;
}

.navbar-nav {
    margin-left: 2%;
}

.topo-section {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #a004049c;
    color: white;
    padding: 12px 18px;
    font-size: 16px;
    border-radius: 360pt;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    z-index: 100;
    transition: 1s;
}
.topo-section:hover{
    transition: 1s;
    padding: 18px 27px;
    font-size: 24px;
    background-color: #a00404;
}
.topo-section:active{
    transition: 0s;
    padding: 18px 27px;
    font-size: 24px;
    background-color: black;
    color:black;
}

.tema-escuro {
    transition: 1s;
    position: fixed;
    bottom: 20px;
    left: 20px;
    color:black;
    background-color: var(--branco);
    border-radius: 360pt;
    padding: 12px 15px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 100;
    border-color:black;
}

.tema-escuro:hover{
    transition: 1s;
    padding: 18px 23px;
    font-size: 24px;
    background-color: var(--cinza-escuro);
    color:white;
}

.texto1{
    color:black;
    font-family: 'Times New Roman', Times, serif;
    text-indent: 10px;
    font-size: larger;
}

.texto-rodape{
    color:aliceblue;
    font-size:18px;
}

.link-rodape{
    transition: 1s;
    color:rgb(194, 194, 194);
    font-size:18px;
}

.link-rodape:hover{
    color:rgb(223, 126, 0);
    font-size:20px;
    font-style: italic;
    transition: 1s;
}

a.navbar-brand:link{
    color: aliceblue;
    font-size: 100%;
}

a.navbar-brand:hover{
    color:red !important;
    font-size: 110%;
    text-shadow: 0 0 10px black;
    font-style: italic;
    transition: 1s;
}

div.hr{
    margin-inline: 10%;
}

hr{
    color:red;
    box-shadow: 0 0 5px black;
}

h1.produtos1{
    color: orangered;
    text-shadow: 0 0 10px black;
    font-size: 200%;
    margin-top:6px;
    font-style: italic;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

img.produto2 {
    border-radius: 18px;
    border: 3px solid #cfcfcf;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    background-color: #fff;
  }
  
  img.produto2:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    border-color: #dc3545; /* vermelho Samiflex no hover */
  }
  

.produto-link {
    background-color: rgb(224, 224, 224);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    height: 100%;
    text-align: center;
    position: relative;
    text-decoration:none!important;
  }
  
  .produto-link:hover {
    background-color: #dc3545; /* mantém o vermelho */
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  }
  
  /* Imagem com efeito zoom */
  
  img.produto {
    border-radius: 14px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    background-color: #fff;
  }
  
  .produto-link:hover img.produto {
    transform: scale(1.07);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  }
  
  /* Título com estilo elegante */
  .produto1 {
    color: #6b0000;
    font-size: 1.25rem;
    font-weight: bold;
    font-family: 'Roboto Slab', serif;
    margin-top: 15px;
    text-shadow: 1px 1px 1px #fff;
    transition: color 0.3s ease, font-size 0.3s ease;
  }
  
  .produto-link:hover .produto1 {
    color: #fff; /* contraste com fundo vermelho */
    font-size: 1.3rem;
  }
  
  /* Efeito lupa opcional (discreto) */
  .produto-link::after {
    content: "🔍";
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .produto-link:hover::after {
    opacity: 1;
  }
  
  .produto-link:hover::after {
    opacity: 1;
  }
  
  /* Responsivo para mobile */
  @media (max-width: 576px) {
    .produto-link {
      padding: 16px;
      margin-bottom: 20px;
    }
  
    .produto1 {
      font-size: 1.1rem;
    }
  
    .produto-link:hover .produto1 {
      font-size: 1.2rem;
    }
  }

  .produto-link a {
    text-decoration: none !important;
  }
  
  .produto-link a:hover,
  .produto-link:hover .produto1 {
    text-decoration: none !important;
  }
  
.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: darkred;
    font-weight: 900;
    margin-bottom: 30px;
    position: relative;
    text-transform: uppercase;
}

.section-title::after {
    content: "";
    width: 60px;
    height: 4px;
    background: darkred;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.hero-banner {
    height: 500px;
    overflow: hidden;
    transition: 1s;
  }
  
  .hero-banner-img {
    transition: 1s;
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: brightness(0.4);
  }
  
  .hero-banner-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
  }
  
  .hero-banner-caption h2 {
    font-size: 2.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  }
  
  .hero-banner-caption p {
    font-size: 1.3rem;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  }
  
  body.dark-theme {
    --cinza-escuro: #222;
    --branco: #eaeaea;
    --cinza: #4e4e4e;
    --cinza-claro: #777777;
    background-color: var(--cinza-escuro);
    color: var(--branco);
    transition: 1s;
}

body.dark-theme .grade {
    background-color: var(--cinza);
}

body.dark-theme .grade2 {
    background-color: var(--cinza-claro);
    color: var(--branco);
}

body.dark-theme .grade .texto1 {
    color: var(--branco);
}

body.dark-theme .grade h2 {
    color: rgb(196, 0, 0);
}

body.dark-theme .tema-escuro {
    color:var(--branco);
    background-color:var(--cinza-escuro);
    border-color:white;
}

body.dark-theme .tema-escuro:hover{
    transition: 1s;
    padding: 18px 23px;
    font-size: 24px;
    background-color: var(--branco) !important;
    color:black !important;
}

h5{
    color: var(--vermelho)
}

body.dark-theme h5{
    color: var(--vermelho-escuro)
}

.texto2{
    color:gray;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: larger;
    text-align: center;
}

.texto-contato{
    color:black;
    font-size:30px;
    text-align: left;
	text-decoration:none;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	margin-top: 10px;
}

body.dark-theme .texto-contato{
	color:white;
}

/* cada coluna vira um contêiner flex (empilha o conteúdo normalmente) */
.row.separacao > .col-sm-6{
  display: flex;
  flex-direction: column;           /* mantém ordem vertical interna         */
}

/* garante que o bloco interno ocupe toda a altura da coluna */
.row.separacao > .col-sm-6 > *{
  flex: 1 1 auto;                   /* cresce até preencher, mas não estoura */
}

.row.separacao {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px 60px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.row.separacao::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: red;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
  pointer-events: none;
}



/* garante que cada contato-item estique igualmente */
.row.separacao .contato-item{
  width:100%;
}


@media (max-width: 768px) {
  .row.separacao::before {
    display: none;
    
  }
}

@media (min-width: 576px){
  .row.separacao > .col-sm-6{
    flex: 0 0 calc(50% - 30px);   /* 30 px = metade do gap horizontal */
    max-width: calc(50% - 30px);  /* idem para garantir */
  }
}

@media (max-width: 575.98px) {
  .row.separacao > .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.row.separacao::before {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}

.grade2:hover {
    transition: 1s;
    transform: scale(1.05);
    box-shadow: 0 12px 20px rgba(0,0,0,0.25);
}

.grade:hover {
    transition: 1s;
    transform: scale(1.05);
    box-shadow: 0 12px 20px rgba(0,0,0,0.25);
}

.hero-banner-img:hover{
    transition: 1s;
    transform: scale(1.05);
    box-shadow: 0 12px 20px rgba(0,0,0,0.25);
}

.carousel-img:hover{
    transition: 1s;
    transform: scale(1.05);
    box-shadow: 0 12px 20px rgba(0,0,0,0.25);
}

.texto3 {
  color: black;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: left;
}

.texto3 ul {
  padding-left: 25px; /* recuo padrão */
  margin-top: 10px;
  margin-bottom: 10px;
}

.texto3 ul li {
  margin-left: 15px; /* aumenta recuo visual */
}

body.dark-theme .texto3{
	color:white;
}

body.dark-theme img.produto2 {
    border-color: #444;
    background-color: #1a1a1a;
  }
  
  body.dark-theme img.produto2:hover {
    border-color: #ffae00;
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.1);
  }

.contato-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(to right, white, rgb(255, 245, 245));
    padding: 20px 25px;
    margin: 25px 0;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .contato-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }
  
  .icone-contato {
    font-size: 38px;
    margin-top: 4px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  }
  
  .titulo-contato {
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
  }
  
  .link-contato {
    font-size: 18px;
    color: #555;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease, font-size 0.3s ease;
  }
  
  .link-contato:hover {
    color: #c0392b;
    font-size: 19px;
    text-decoration: underline;
  }
  
  /* Responsivo para dispositivos menores */
  @media (max-width: 768px) {
    .contato-item {
      flex-direction: column;
      align-items: flex-start;
      padding: 18px;
      margin: 20px 0;
    }
  
    .icone-contato {
      font-size: 32px;
      margin-bottom: 8px;
    }
  }
  
  /* Dark Theme */
  body.dark-theme .contato-item {
    background: linear-gradient(to right, #2a2a2a, #1a1a1a);
  }
  
  body.dark-theme .titulo-contato {
    color: #fafafa;
  }
  
  body.dark-theme .link-contato {
    color: #dcdcdc;
  }
  
  body.dark-theme .link-contato:hover {
    color: #ffb347;
  }

  .contato-item,
.link-contato,
.icone-contato {
  transition: var(--transition-default);
}

/* ========= PORTFOLIO / MODAIS ========= */
.portfolio-modal .modal-dialog {
    max-width: 800px;                 /* largura confortável em desktop   */
    margin: 60px auto;                /* respiro em cima/baixo            */
    transition: transform .4s ease;   /* animação de entrada              */
    transform: translateY(40px) scale(.95);
  }
  
  .portfolio-modal.show .modal-dialog {
    transform: none;                  /* efeito “slide‑up + zoom‑in”      */
  }
  
  .portfolio-modal .modal-content {
    border: none;                     /* sem borda padrão do Bootstrap    */
    border-radius: 22px;
    background: linear-gradient(145deg,#ffffff 0%,#f1f1f1 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
    overflow: hidden;                 /* cantos realmente arredondados    */
  }
  
  /* fundo esfumado escurecido */
  .portfolio-modal::before {
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(4px);
    background: rgba(0,0,0,.55);
    z-index: -1;
    animation: fadeBg .4s ease forwards;
  }
  @keyframes fadeBg { from{opacity:0;} to{opacity:1;} }
  
  /* --- cabeçalho da modal (fecha) --- */
  .close-modal {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 24px;
    color: #555;
    cursor: pointer;
    transition: color .3s ease, transform .3s ease;
    text-decoration: none !important;
  }
  
  .close-modal:hover {
    color: #dc3545;
    transform: rotate(90deg);
  }
  
  /* --- corpo da modal --- */
  .modal-body .titulo {
    font-size: 1.9rem;
    font-weight: 800;
    color: #6b0000;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  
  .modal-body img {
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    transition: transform .35s ease;
    width: 100%;
    height: auto;
  }
  
  .modal-body img:hover {
    transform: scale(1.04);
  }
  
  .modal-body ul {
    list-style: none; /* remove bullets padrão */
    padding-left: 0;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .modal-body ul li {
    position: relative;
    padding-left: 24px;
    margin-top: 12px;
    font-size: 1.05rem;
    color: #444;
    line-height: 1.5;
    margin-left:3%;
  }
  
  /* ícone customizado (flecha suave) */
  .modal-body ul li::before {
    content: "➥ ";
    position: absolute;
    left: 0;
    top: 0;
    color: #dc3545;
    font-size: 1rem;
    line-height: 1.4;
  }
  
  /* dark mode */
  body.dark-theme .modal-body ul li {
    color: #e0e0e0;
  }
  
  body.dark-theme .modal-body ul li::before {
    color: #ffae00;
  }
  
  
  /* --- Dark theme harmonização --- */
  body.dark-theme .portfolio-modal .modal-content {
    background: linear-gradient(145deg,#2d2d2d 0%,#1d1d1d 100%);
  }
  
  body.dark-theme .modal-body h2     { color: #dc3545; /* vermelho institucional */ };

  body.dark-theme .modal-body p { color:#e6e6e6; };

  body.dark-theme .close-modal       { color:#ddd; };

  body.dark-theme .close-modal:hover { color:#ffae00; };
  .form , .form-control{
    text-align: left;
  }
  .form-control:hover,
  .form-control:focus {
    border-color: #dc3545;          /* mesmo vermelho institucional */
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  /* se preferir dark‑theme harmonizado */
  body.dark-theme .form-control:hover,
  body.dark-theme .form-control:focus {
    border-color: #ffae00;
    box-shadow: 0 0 0 0.15rem rgba(255, 174, 0, 0.25);
  }

  button.enviar {
    display: inline-flex;
    align-items: center;
    gap: .55rem;                       /* espaço entre texto e ícone */
    padding: 12px 28px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff4b2b, #ff416c);  /* degradê vermelho‑laranja */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
    display: block;
    width: fit-content;
    margin: 15px auto 0 auto; /* centralizado horizontalmente */
    padding: 12px 28px;
  }
  
  button.enviar i {                    /* anima só o ícone */
    font-size: 1.25rem;
    transition: transform .3s ease;
  }
  
  /* HOVER – levita levemente e o ícone “anda” um pouco */
  button.enviar:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.35);
  }
  button.enviar:hover i {
    transform: translateX(4px);
  }
  
  /* ACTIVE – efeito de clique */
  button.enviar:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  /* ACESSIBILIDADE: foco visível no teclado */
  button.enviar:focus-visible {
    outline: 3px solid #ffae00;
    outline-offset: 4px;
  }
  
  /* -------- DARK THEME -------- */
  body.dark-theme button.enviar {
    background: linear-gradient(135deg, #e63946, #9d0208);
  }
  body.dark-theme button.enviar:hover {
    box-shadow: 0 9px 20px rgba(255, 174, 0, 0.3);
  }
  
  .slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 40%);
    z-index: 1;
  }
  
  footer img {
    width: 100%;
    max-width: 1000px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    filter: saturate(1.2) contrast(1.05);
    transition: transform 1s ease;
  }
  
  footer img:hover {
    transform: scale(1.02);
    transition: 1s;
  }