/* Variaveis */
:root {
    --color-bg-white: #f2f1ef;
    --color-bg-gray: #d6d6d6;
    --color-darkblue: #29204a;
    --color-mainorange: #f6783a;
    --color-mainpink: #d23b89;
    --color-gradient: linear-gradient(45deg,#d23b89 0%,#d23b89 40%,#f6783a 60%, #f6783a 100%);


    --font-primary: 'Roboto', sans-serif;
    --font-title: 'Bebas Neue', sans-serif;
    --font-display: 'Anton', sans-serif;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    --space-xs: 0.6rem;
    --space-sm: 1.2rem;
    --space-md: 2rem;
    --space-lg: 4rem;

}

/* Reset Parametters */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
  min-width: 300px;
}

/* Classes de Configuração */
.max-size-page {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.half-width-page{
    flex: 1 1 48%;
    min-width: 260px;
    max-width: 600px;
}

.eithy-width-page{
    width: 80%;
}

.centralized-column-page{
    display:flex;
    flex-direction: column;
    gap: 1rem;
}

.centralized-row-page{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.gap-standard{
    gap: 1rem;
}

.padding-page{
    padding: 1.2rem 1.2rem;
}

.padding-standard{
    padding: 1.2rem 0;
}

.padding-light{
    padding: 0.6rem 0;
}

.jc-space-between{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.jc-flex-end{
    display: flex;
    justify-content: flex-end;
}

.ai-flex-end{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}


.jc-center{
    display: flex;
    justify-content: center;
}

.align-items-center{
    align-items: center;
}

.text-align-center{
    text-align: left;
}

.text-align-right{
    text-align: right;
}

.light-page {
    width: 100%;
    background-image: url(assets/background/light-page.png);
    background-size: cover;       /* cobre todo o container, mantendo proporção */
    background-position: center;  /* centraliza a imagem */
    background-repeat: no-repeat; /* evita repetição */
}

.dark-page{
    width: 100%;
    background-image: url(assets/background/dark-page.png);
    background-size: cover;       /* cobre todo o container, mantendo proporção */
    background-position: center;  /* centraliza a imagem */
    background-repeat: no-repeat; /* evita repetição */
}

.dark-page-hearth{
    width: 100%;
    background-image: url(assets/background/dark-page-hearth.png);
    background-size: cover;       /* cobre todo o container, mantendo proporção */
    background-position: center;  /* centraliza a imagem */
    background-repeat: no-repeat; /* evita repetição */
}

/* Header */

header{
    width: 100%;

    display: flex;
    justify-content: center;
    position: fixed;

    z-index: 10;

    background-color: white;
    box-shadow: 0rem .1rem 1rem rgba(0, 0, 0, 0.2);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem 1rem;
    height: 6.5rem;
    gap: .75rem;
}

main{
  padding-top: 6.5rem;
}

.nav-container {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

a{
  text-decoration: none; /* remove sublinhado */
  color: black;         /* herda a cor do elemento pai */
  cursor: pointer;        /* opcional, muda o cursor para mãozinha */
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;

  transition: transform 0.3s ease;
}

.nav-item:hover{
  transform: scale(1.05);
}

.nav-title {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size: .8rem;
    margin-right: .3rem;
    text-decoration: none;
    text-align: left;
}

.nav-text {
    font-family: var(--font-primary);
    font-weight: var(--weight-light);
    font-size: 1rem;
    margin-right: .3rem;
    text-decoration: none;
    text-align: left;
}

.nav-icon{
    width: 2.5rem;;
}

.main-logo-img{
    width: 12rem;
}

/* Carrosseis */
/* Main Carrossel */

.main-carrossel-img{
    width: 100%;
    height: 25vw;
    min-height: 400px;
    object-fit: cover;
    object-position: center;

    user-select: none;
    -webkit-user-drag: none;     /* Safari/Chrome */
    -khtml-user-drag: none;      /* alguns navegadores antigos */
    -moz-user-drag: none;        /* Firefox antigo */
    -o-user-drag: none;
    pointer-events: auto;
}

.main-carrossel{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carrossel-img-container{
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slides-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    background-color: rgb(54, 54, 54);
}

.carrossel-img-container a{
    user-select: none;
    -webkit-user-drag: none;     /* Safari/Chrome */
    -khtml-user-drag: none;      /* alguns navegadores antigos */
    -moz-user-drag: none;        /* Firefox antigo */
    -o-user-drag: none;
    pointer-events: auto;
}

.slide{
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.carrossel-dots{
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.dot{
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background-color: gray;
    cursor: pointer;
    transition: background-color 0.3s ease;
    transition: transform 0.3s ease;
}

.active-dot{
    background-color: var(--color-mainorange);
}

/* Images parameters */


.products-carrossel{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.products-carrossel-img-container{
    display: flex;
    gap: 2rem;
    padding: 1rem;
    overflow: hidden;
    width: 100%;
}

.product{
    background-color: white;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border-radius: 2rem;

    flex: 0 0 calc((100% - ((var(--products-per-slide) - 1) * 2rem)) / var(--products-per-slide));
    transition: all 0.2s ease;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 1rem .5rem;
}

.product-title-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.product h3{
  display: inline-block;
  font-family: var(--font-title);
  color: var(--color-darkblue);
  font-size: clamp(1.6rem,3vw,2.5rem);
  text-align: center;
}

.product a{
  width: 80%;
  max-width: 200px;
  height: 15%;
  color: white;
  font-family: var(--font-title);
  font-size: clamp(1.5rem,8vw,2rem);
  background-color: rgb(255, 153, 0);
  border-color: transparent;
  border-radius: 5rem;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.322);
  transition: transform 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product a:hover{
  transform: scale(1.05);
}

.product-img-container{
  display: flex;
  justify-content: center;
  gap: .5rem;
  width: 95%;
  padding: .5vh 0;
}

.product-img-container img{
  width: 50%;
  flex: 0 1 auto;
  padding: .7rem 0;
  object-fit: contain;
}

.feedback-intro{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feedback-intro p {
  display: inline-block;
  text-align: center;
}

.intro-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.divisoria-img{
    max-width: 22rem;
    opacity: 0.3;
}

.title-icon-img{
    width: 5vw;
    max-width: 4rem;
    min-width: 2rem;
}

.main-image-rounded {
  min-width: 265px;
  max-height: 300px;
  width: 100%;
  object-fit: cover;
  border-radius: 3rem;

  transition: transform 0.3s ease;
}

.main-image-rounded:hover{
  transform: scale(1.02);
}

.model-class {
  display: flex;
  justify-content: center;
}

.bar-background{
  background-image: url(assets/black-background-2.png);
  
  border-bottom-left-radius: 5rem;
  border-bottom-right-radius: .5rem;
  border-top-right-radius: 5rem;
  border-top-left-radius: .5rem;

  width: 100%;
  height: auto;
  min-height: 250px;
  min-width: 300px;

  padding: 1.5rem 1.5rem;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.bar-container{
  display: flex;
  gap: .5rem;
}

.bar-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 1rem;
}

.bar-img{
  width: 6rem;
  height: 6rem;
  max-width: 100%;
}

.bar-text-container{
  display: flex;
  flex-direction: column;
  text-align: center;
}

.bar-text-container .bar-title{
  color: white;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: .7rem;
  max-width: 100%;
  min-width: 115px;
}

.bar-text-container .bar-text{
  color: rgb(216, 216, 216);
  font-family: var(--font-primary);
  font-size: .6rem;
  max-width: 100%;
  min-width: 115px;
}

/* ----------------------------------------- */
.bar-img {
  --border-width: 0.45rem;
  --radius: 10rem;

  position: relative;
  display: inline-block;
  border-radius: var(--radius);
  overflow: visible; /* deixa a borda girar sem cortar */

}

/* pseudo-elemento da borda animada */
.bar-img::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-sizing: border-box;
  padding: var(--border-width);

  /* Gradiente suave, duplicando a primeira cor no final */
  background: conic-gradient(
    #f6783a 0deg,
    #d23b89 90deg,
    #f6783a 360deg
  );

  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  pointer-events: none;
  transform-origin: center;
  animation: spin .5s linear infinite;
  z-index: 1;
}

/* imagem fica **fora do pseudo-elemento**, acima da borda */
.bar-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  position: relative;
  z-index: 2; /* acima da borda */
}

/* keyframes da rotação da borda */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* exemplo de dessincronização */
.bar-container:first-child .bar-item:nth-child(1) .bar-img::before { animation-delay: 0s; }
.bar-container:first-child .bar-item:nth-child(2) .bar-img::before { animation-delay: 0.25s; }
.bar-container:last-child .bar-item:nth-child(1) .bar-img::before { animation-delay: 0.5s; }
.bar-container:last-child .bar-item:nth-child(2) .bar-img::before { animation-delay: 0.75s; }

/* Pages */

h2 {
    display: inline-block;
    font-family: var(--font-title);
    font-size: clamp(2.3rem,3.5vw,3.5rem);
}

h1 {
    display: inline-block;
    font-family: var(--font-title);
    font-size: clamp(2.3rem,8vw,5rem);
}

.primary-text-style {
    width: 100%;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-darkblue);
    overflow-wrap: break-word;
    hyphens: auto;
    display: inline-block;
}

/* Cartões dos serviços */

.services-grid {
  display: grid;
  gap: 4vw;
  grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); /* 250px */
  justify-content: center;
  list-style: none;
  padding: 2rem 0;
  margin: 0;
}

.service-card {
  max-width: 15.625rem; /* 250px */
  margin: 0 auto;
  text-align: left;
  text-decoration: none;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.service-card:hover{
  transform: scale(1.05);
}

.service-card h3 {
  font-family: var(--font-title);
  font-size: 1.75rem;
  color: var(--color-darkblue);
  padding: 0 0;
}

.service-card p {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--color-darkblue);
}

.service-card img:first-of-type {
  display: block;
  max-width: 4rem; /* opcional: define um limite pro tamanho */
}

.service-card img:last-of-type {
  display: block;
  max-width: 4rem; /* opcional: define um limite pro tamanho */
  width: 100%;
  height: auto;
}

/* Color parametters */

.text-gradient {
  background: linear-gradient(45deg, #d23b89 0%, #d23b89 40%, #f6783a 60%, #f6783a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* New Classes */

.section-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* row tipo "título com imagens laterais" - garante título centrado independentemente dos lados */
.section-title-row {
    display: flex;
    justify-content: center; /* centraliza horizontalmente todo o conteúdo */
    align-items: center;     /* alinha verticalmente */
    gap: 2rem;               /* mantém o espaçamento entre itens */
}

.section-title-row img {
    width: 2.5rem;
}

/* garante que o título fique centralizado na coluna do meio */
.section-title-row h1,
.section-title-row h2 {
  justify-self: center;   /* centraliza dentro da coluna do meio */
  width: fit-content;     /* mantém gradient sem esticar */
  margin: 0;
}

/* imagem responsiva reutilizável */
.img-fluid {
  display: block;
  width: 100%;
  height: auto;
  max-width: 22rem; /* ajuste se quiser menor/maior (rem = responsivo) */
}

/* utilitário para listas de feedback */
.feedback-list-desktop {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  padding: 1rem 0;
  margin: 0;
}

.feedback-list-mobile {
  list-style: none;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.feedback-list-mobile-img-container {
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
}

.feedback-slide {
  flex: 0 0 100%;       /* cada slide ocupa 100% do container */
  display: flex;
  justify-content: center; /* centraliza a imagem dentro */
}

.feedback-slide img {
  max-width: 22rem;  /* limite que você queria */
  width: 100%;       /* ocupa o espaço do slide */
  height: auto;      /* não distorce */
}

/* dividers (linha decorativa central) */
.divider {
  display: block;
  width: 100%;
  max-width: 25rem;
  opacity: 0.3;
}

/* Form */

.form-orcamento {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 1rem 0;
}

.form-row {
  display: flex;
  width: 100%;
  gap: 1rem;
}

.label-col {
  width: 25%;
  min-width: 125px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--font-display);
  color: var(--color-darkblue);
  font-size: 1.2rem;
  cursor: pointer;
}

.input-col {
  width: 75%;
  max-width: 600px;
  display: flex;
  align-items: center;
}

.option-text {
    min-width: 125px;
    font-size: 1.4rem;
    font-family: var(--font-primary);
    text-transform: uppercase;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
}

.input-col input[type="text"],
.input-col input[type="email"],
.input-col input[type="tel"] {
  width: 100%;
  height: 3rem;
  border-radius: .5rem;
  border: .12rem solid rgba(0, 0, 0, 0.432);
}

input{
    text-align: left;
    padding-left: 1rem;
    color: var(--color-darkblue);
    font-family: var(--font-primary);
    font-size: 1rem;
}

input::placeholder{
    text-align: center;
    color: rgba(0, 0, 0, 0.233);
    font-family: var(--font-primary);
    font-size: 1rem;
}

.centralized-title{
    margin: 0 auto;
    text-align: center;
}

.options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.options label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 0.95rem;
}

.form-submit {
  width: 100%;
  display: flex;
  justify-content: center;
}

.form-submit button {
  width: 12rem;
  height: 3.5rem;
  border-radius: 2rem;
  border-color: transparent;
  background-color: rgb(240, 128, 0);
  color: white;
  font-family: var(--font-display);
  font-size: 1.4rem;
  box-shadow: 0rem 0.2rem .5rem rgba(0, 0, 0, 0.541);

  cursor: pointer;
  transition: all 0.3s ease;
}

.form-submit button:hover{
  transform: scale(1.2);
  background-color: rgb(255, 150, 29);
  box-shadow: none;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 0;
}

.social-icons img {
  width: 3.2rem;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.social-icons img:hover {
  transform: scale(1.2); /* efeito hover opcional */
}

.footer-container {
  display: flex;
  gap: 2rem;
}

/* Coluna esquerda */
.footer-left {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2rem;
  padding: 1rem 0;
}

.footer-divider {
  width: 16rem;
  max-width: 350px;
  opacity: 0.3;
}

.footer-logo-block img {
  width: 2.5rem; /* ajuste conforme necessidade */
  height: auto;
}

.footer-logo-block{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .8rem;
}

.footer-copy {
  font-size: 0.8rem;
}

/* Coluna direita */
.footer-right {
  flex: 2 1 600px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
}

.full-width{
  display: flex;
  justify-content: center;
}

.footer-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-description {
  text-align: justify;
}

/* Benefícios */
.footer-benefits {
  display: flex;
  flex-direction: column;
  gap: 1rem 0;
  align-items: flex-start;
}

.footer-benefits .benefit {
  display: flex;
  align-items: center;
  padding-left: 1rem;
}

.footer-benefits .benefit img {
  width: 1.5rem;
  height: auto;
}

.footer-benefits .benefit span {
  text-align: left;
  padding-left: .5rem
}

.hidden {
  display: none;
}

.left-block-enter {
  opacity: 0;
  transform: translateX(-20px); /* menos deslocamento */
  transition: all 0.6s ease-out;
}

.right-block-enter {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.6s ease-out;
}

.left-block-enter.visible,
.right-block-enter.visible {
  opacity: 1;
  transform: translateX(0);
}

.block-container{
  overflow-x: hidden;
}

@media (max-width: 670px){
  .main-logo-img{
    width: 8rem;
  }
}

@media (max-width: 370px){
  .main-logo-img{
    width: 6rem;
  }
}

@media (max-width: 600px){
  .nav-container{
    display: flex;
    flex-direction: column;
  }

  .nav-text, .nav-title{
    font-size: .9rem;
  }

  .nav-icon{
    width: 2.1rem;
  }
}

@media (max-width: 450px){

  .nav-container{
    gap: .2rem;
  }

  .nav-text, .nav-title{
    font-size: .75rem;
  }

  .nav-icon{
    width: 1.8rem;
  }
}

@media (max-width: 580px){
  p{
    text-align: center;
  }

  h1{
    text-align: center;
  }

  h2{
    text-align: center;
  }

  .text-align-center{
    text-align: center;
  }

  .ai-flex-end{
    align-items: center;
  }

  .centralized-row-page{
    justify-content: center;
  }

  .form-row{
    flex-direction: column;
  }

  .label-col{
    justify-content: flex-start;
  }

  .input-col{
    width: 98%;
  }

  .service-card{
    text-align: center;
  }

  .footer-description{
    text-align: center;
  }

}

@media (max-width: 799px){
  .img-fluid{
    max-width: 450px;
  }

  .footer-container{
    flex-direction: column-reverse;
    gap: 0;
  }

  .footer-right{
    flex: 1 1 300px;
  }

  .footer-left{
    flex: 1 1 300px;
  }
}