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

/* Base */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    /* linear-gradient não é válido para 'color'; se desejar um background gradient, use background */
    color: linear-gradient(to top, #6F008B, #AD28FF);
}

a {
    text-decoration: none;
    color: inherit;
}

/* Header */
header {
    background-color: #6F008B;
    padding: 20px;
}

.logo img {
    width: 300px;
    height: auto;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* Cabeçalho */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8em;
    font-weight: bold;
    color: #222;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    color: whitesmoke;
    font-size: 1.25rem;
    font-weight: 600;
    position: relative;
    align-items: center;
}

nav ul li a {
    z-index: 2;
}

nav ul li:after {
    content: "";
    width: 0%;
    height: 2px;
    background-color: #FFB12B;
    transition: all 0.25s ease-in;
}

nav ul li:hover:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #FFB12B;
}

nav ul li:hover:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFB12B;
    filter: blur(5rem);
    z-index: 1;
    box-shadow: inset 0px 0px 1px rgba(253, 198, 104, 0.25),
                0px 1px 4px rgba(253, 198, 104, 0.23),
                0px 3px 9px rgba(253, 198, 104, 0.20),
                0px 5px 16px rgba(253, 198, 104, 0.17),
                0px 8px 25px rgba(253, 198, 104, 0.15),
                0px 12px 36px rgba(253, 198, 104, 0.13),
                0px 16px 49px rgba(253, 198, 104, 0.10),
                0px 20px 64px rgba(253, 198, 104, 0.07),
                0px 26px 81px rgba(253, 198, 104, 0.05),
                0px 32px 100px rgba(253, 198, 104, 0.02);
}

nav ul li a:hover {
    color: #FFB12B;
}

nav ul li.active:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #FFB12B;
}

nav ul li.active {
    color: #FFB12B;
}

/* Banner Principal */
.hero {
    background-image: url("../images/main.webp");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 86vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    border-bottom: solid 0.3rem #AD28FF;
    box-shadow: 0px 0px 1px rgba(173, 40, 255, 0.03),
                0px 1px 4px rgba(173, 40, 255, 0.05),
                0px 3px 9px rgba(173, 40, 255, 0.08),
                0px 5px 16px rgba(173, 40, 255, 0.10),
                0px 8px 25px rgba(173, 40, 255, 0.13),
                0px 12px 36px rgba(173, 40, 255, 0.15),
                0px 16px 49px rgba(173, 40, 255, 0.18),
                0px 20px 64px rgba(173, 40, 255, 0.20),
                0px 26px 81px rgba(173, 40, 255, 0.23),
                0px 32px 100px rgba(173, 40, 255, 0.25);
}

.hero h1 {
    font-size: 2.5em;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    position: absolute;
    top: 60%;
}

.service-details summary {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block !important;
    width: 100%;
    padding: 10px 0;
    background-color: #FFB12B;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .service-details summary span {
    display: block;
    text-align: center;
  }
  
  /* Remover o marcador padrão */
  .service-details summary::-webkit-details-marker {
    display: none;
  }
  
  
  

  



.services {
    padding: 40px 0;
    background: rgb(111, 0, 139);
    background: linear-gradient(0deg, rgba(111, 0, 139, 1) 0%, rgba(146, 25, 182, 1) 100%);
}

.services h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 3em;
    /* Título em laranja (#FFB12B) */
    color: #FFB12B;
}

/* Classe para subtítulos (ex.: Galeria, Nossos Serviços) */
.subtitle, .subtitles {
    color: #FFB12B;
    font-size: 3em;
    text-align: center;
    margin-bottom: 20px;
}

.service-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


/* Service Cards: fundo roxo e textos em contraste */
.service-item {
    background: #6F008B;
    color: #fff;
    width: 350px;  /* alterado de 300px para 350px */
    margin: 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 4px 3px rgba(255, 177, 43, 0.15),
                0px 16px 13px rgba(255, 177, 43, 0.11),
                0px 36px 28px rgba(255, 177, 43, 0.07),
                0px 64px 50px rgba(255, 177, 43, 0.04);
    transition: all 0.5s ease;
    gap: 1rem;
}

/* Nova regra para os itens da lista de serviços inclusos */
.servicos-inclusos {
    list-style-position: inside; /* Faz com que os marcadores fiquem dentro do container */
    margin: 0.5rem 0;
    padding-left: 1rem;
}

.pros-contra{
    list-style-position: inside; /* Faz com que os marcadores fiquem dentro do container */
    margin: 0.5rem 0;
    padding-left: 1rem;
}

.service-item:hover {
    transform: scale(1.1);
}

.service-item h3 {
    margin-bottom: 0.5px;
    font-size: 1.5em;
    color: #FFB12B;
}

.service-item p {
    font-size: 0.95em;
    padding: 10px;
}

.services .btn {
    display: block;
    width: 400px;
    height: 40px;
    margin: 30px auto 0;
    text-align: center;
    padding-inline: 10px 10px;
    background-color: #FFB12B;
    color: #9219B6;
    border-radius: 5px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.services .btn:hover {
    background-color: #FFB12B;
}


/*  home  */
figure.vitrification-service {
    background-image: url("../images/vitrificacao.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}

/* ------ serviços card - lavagem*/ 

figure.lavagem-tradicional {
    background-image: url("../images/lavagem-tradicional.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.lavagem-tecnica {
    background-image: url("../images/lavagem-tecnica.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.lavagem-detalhada {
    background-image: url("../images/lavagem-detalhada.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}


/* - --- - higienização - - - - -*/


figure.int-hig-service {
    background-image: url("../images/hig-interna.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.forro-teto {
    background-image: url("../images/limpeza-forro-teto.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.bancos-couro {
    background-image: url("../images/limpeza-couro.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}


/* - --- - revitalização - - - - -*/

figure.plastico-interno {
    background-image: url("../images/farol.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.plastico-externo {
    background-image: url("../images/farol.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.service-rev-farol {
    background-image: url("../images/farol.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.hidratação-couro {
    background-image: url("../images/hidratacao-couro.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
/* - --- - proteção - - - - -*/

figure.selagem-pintura {
    background-image: url("../images/selagem-pintura.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.ceramic-coating {
    background-image: url("../images/vitrificacao.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}

figure.aplicacao-ppf {
    background-image: url("../images/ppf-image.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}

figure.carbosiloxy-coating {
    background-image: url("../images/carbo-coating.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}


figure.enceramento-cleaner {
    background-image: url("../images/enceramento-cleaner.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.enceramento-wax {
    background-image: url("../images/enceramento-wax.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}
figure.hidrovision {
    background-image: url("../images/vitrificacao.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}


/* - --- - outros - - - - -*/

figure.limpeza-motor {
    background-image: url("../images/limpeza-motor.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 15rem;
    width: 100%;
}






.service-item figure {
    border-radius: 5px;
}

/* Botão "saber mais" */
.saber-mais-btn {
    display: inline-block;
    padding: 8px 15px;
    background-color: #AD28FF;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.8em;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.saber-mais-btn:hover {
    background-color: #FFB12B;
}

.service-description {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    /* Para Firefox: */
    scrollbar-color: #FFB12B #6F008B; /* thumb e track */
    scrollbar-width: thin;
  }
  
  /* Para navegadores WebKit: */
  .service-description::-webkit-scrollbar {
    width: 8px;
  }
  
  .service-description::-webkit-scrollbar-track {
    background: #6F008B;  /* Cor do fundo */
  }
  
  .service-description::-webkit-scrollbar-thumb {
    background-color: #FFB12B; /* Cor da barra de rolagem */
    border-radius: 4px;
    border: 2px solid #6F008B; /* Cria um recuo entre a thumb e a track */
  }
  

/* =================== Accordion das Categorias =================== */
.categoria-details summary {
    list-style: none;
    cursor: pointer;
    background: #6F008B;
    
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.3s ease;

    display: grid;
    grid-template-columns: 1fr 3fr;
    & .categoria-img{
        width: 100%;
        height: 100%;
    }
}

.categoria-details summary:hover {
    transform: scale(1.02);
}

/* Cabeçalho do Accordion: Centralização total do título */
.categoria-header {
    position: relative;
    height: 100%; /* Altura do cabeçalho do accordion */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    z-index: 1 !important; 
}
.categoria-header img {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: auto;
}
.categoria-title {    
    width: 100%;
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    color: #fff;
}

/* Divisor sutil */
.categoria-divider {
    width: 80%;
    margin: 10px auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Seta de expansão abaixo do divisor */
.categoria-arrow {
    text-align: center;
}
.categoria-arrow .arrow {
    display: inline-block;
    transform: rotate(0deg);
    font-size: 1em;
    transition: transform 0.8s ease-in-out;
}
.categoria-details[open] summary .categoria-arrow .arrow {
    transform: rotate(180deg);
}

/* Transição suave para o conteúdo do accordion */
.categoria-conteudo {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.2s ease-in-out;
}
.categoria-details[open] .categoria-conteudo {
    max-height: 2000px; /* Valor alto o suficiente para o conteúdo */
}

/* =================== Footer =================== */
footer {
  background-color: #6F008B;
  padding: 20px 0;
  color: #fff;
}

.container-footer {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
}

.footer-links ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.footer-links ul li a {
  color: #fff;
  font-size: 1em;
  transition: color 0.3s ease;
}

.footer-links ul li a:hover {
  color: #FFB12B;
}

.footer-social {
  display: flex;
  gap: 15px;
}

.footer-social a {
  color: #fff;
  font-size: 1em;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #FFB12B;
}

.footer-bottom {
  text-align: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-bottom p {
  margin: 0;
  font-size: 0.9em;
}

/* =================== Responsividade =================== */

/* Tablets (landscape) e pequenos laptops */
@media (max-width: 1024px) {
    .container {
        max-width: 1000px;
    }
    nav ul {
        font-size: 1.1rem;
    }
    .hero h1 {
        font-size: 2.2em;
        top: 55%;
    }
    .service-item {
        width: 280px;
    }
    .services h2 {
        font-size: 2.8em;
    }
    .categoria-header img {
        width: 80px;
    }
    .categoria-title {
        font-size: 1.3em;
    }
}

/* Tablets (portrait) e grandes smartphones */
@media (max-width: 768px) {
    .header-container,
    .footer-content {
        flex-direction: column;
    }
    nav ul {
        flex-direction: column;
    }
    nav ul li {
        margin: 10px 0;
    }
    .service-items {
        flex-direction: column;
        align-items: center;
    }
}

/* Smartphones */
@media (max-width: 480px) {
    nav {
        width: 100vw;
    }
    nav ul {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 1rem;
        justify-content: space-around;
        align-items: center;
    }
    nav ul li a {
        font-size: 1.2rem;
    }
    .hero h1 {
        font-size: 1.8em;
        top: 50%;
    }
}

/* Aparelhos grandes / TVs */
@media (min-width: 1600px) {
    body {
        font-size: 1.2em;
    }
    .container {
        max-width: 1400px;
    }
    .hero {
        height: 90vh;
    }
    .hero h1 {
        font-size: 3em;
    }
    nav ul li {
        font-size: 1.5rem;
    }
    .service-item {
        width: 320px;
    }
    .services h2 {
        font-size: 3.5em;
    }
    .footer-bottom p {
        font-size: 1em;
    }
    .categoria-header img {
        width: 120px;
    }
    .categoria-title {
        font-size: 1.8em;
    }
}