/* AREA DE MASSAGEM  hero-section-unhas*/

   :root {
       --text-dark: #1d2731;
       --bg-light-blue: #ffefd3;
       --bg-light-pink: #fdf0ec;
       --bg-gray: #f8f9fa;
   }

   body {
       font-family: 'Plus Jakarta Sans', sans-serif;
       color: var(--text-dark);
       overflow-x: hidden;
   }

   h1,
   h2,
   h3,
   .font-serif {
       font-family: 'Playfair Display', serif;
       color: var(--primary-color);
   }

   .btn-custom-dark {
       background-color: var(--primary-color);
       color: white;
       padding: 10px 30px;
       border-radius: 4px;
       font-weight: 500;
       border: none;
       transition: all 0.3s ease;
   }

   .btn-custom-dark:hover {
       background-color: #07253a;
       color: white;
       opacity: 0.9;
   }

   .btn-outline-custom {
       border: 1px solid var(--primary-color);
       color: var(--primary-color);
       background: transparent;
       padding: 6px 20px;
       border-radius: 20px;
       font-size: 0.9rem;
       margin-right: 10px;
       margin-bottom: 10px;
       transition: all 0.2s ease;
   }

   .btn-outline-custom.active,
   .btn-outline-custom:hover {
       background-color: var(--primary-color);
       color: white;
   }

   /* Seções Customizadas */
   .bg-light-blue {
       background-color: var(--bg-light-blue);
   }

   .bg-light-pink {
       background-color: var(--bg-light-pink);
   }

   .bg-gray {
       background-color: var(--bg-gray);
   }

   .img-cover {
       width: 100%;
       height: 100%;
       object-fit: cover;
       min-height: 400px;
   }

   .rounded-custom {
       border-radius: 24px;
   }

   /* Estilização Customizada do Accordion do Vue */
   .accordion-item-custom {
       border-bottom: 1px solid #ccc;
       padding: 15px 0;
   }

   .accordion-header-custom {
       cursor: pointer;
       font-weight: 600;
       display: flex;
       justify-content: space-between;
       align-items: center;
       color: var(--primary-color);
   }

   .accordion-body-custom {
       padding-top: 10px;
       color: #555;
       font-size: 0.95rem;
   }

   /* FIM AREA DE MASSAGEM */

   /* AREA DE ESTETICA */

   :root {
       --primary-navy: #2B2B2B;
       --secondary-blue: #cc912c;
       --text-dark: #2B2B2B;
       --bg-light: #F7F9FB;
       --accent-soft: #E2E8F0;
   }




   /* Hero Section */

   /* Hero Section */
   .hero-section-estetica {
       position: relative;
       min-height: 80vh;

       display: flex;
       align-items: center;
       color: #fff;
       overflow: hidden;
   }

   /* Imagem + gradiente */
   .hero-section-estetica::before {
       content: "";
       position: absolute;
       inset: 0;

       background:
           linear-gradient(90deg,
               rgba(0, 0, 0, 1) 0%,
               rgba(0, 0, 0, 0.85) 40%,
               rgba(0, 0, 0, 0.1) 100%),
           url('../img/servicos/estetica2.jpeg') center center no-repeat;

       background-size: cover;
       animation: zoomHero 15s ease-in-out infinite alternate;
       z-index: 1;
   }

   /* Conteúdo fica acima da imagem */
   .hero-section-estetica>* {
       position: relative;
       z-index: 2;
   }
 




   /* Hero Section */
   .hero-section-beleza {
       position: relative;
       min-height: 80vh;

       display: flex;
       align-items: center;
       color: #fff;
       overflow: hidden;
   }

   /* Imagem + gradiente */
   .hero-section-beleza::before {
       content: "";
       position: absolute;
       inset: 0;

       background:
           linear-gradient(90deg,
               rgba(0, 0, 0, 1) 0%,
               rgba(0, 0, 0, 0.85) 40%,
               rgba(0, 0, 0, 0.1) 100%),
           url('../img/spa2.png') center center no-repeat;

       background-size: cover;
       animation: zoomHero 15s ease-in-out infinite alternate;
       z-index: 1;
   }

   /* Conteúdo fica acima da imagem */
   .hero-section-beleza>* {
       position: relative;
       z-index: 2;
   }

   @media (max-width: 768px) {
       .hero-section-beleza {
           min-height: 100dvh;
       }
  .hero-section-estetica {
           min-height: 100dvh;
       }

       
   }

   @keyframes zoomHero {
       from {
           transform: scale(1);
       }

       to {
           transform: scale(1.15);
       }
   }







   /* Hero Section */
   .hero-section-cabelo {
       position: relative;
       min-height: 80vh;
       display: flex;
       align-items: center;
       color: #fff;
       overflow: hidden;
   }

   /* Imagem + gradiente */
   .hero-section-cabelo::before {
       content: "";
       position: absolute;
       inset: 0;

       background:
           linear-gradient(90deg,
               rgba(0, 0, 0, 1) 0%,
               rgba(0, 0, 0, 0.85) 40%,
               rgba(0, 0, 0, 0.1) 100%),
           url('../img/servicos/cabelo2.jpeg') center center no-repeat;

       background-size: cover;
       animation: zoomHero 15s ease-in-out infinite alternate;
       z-index: 1;
   }

   /* Conteúdo fica acima da imagem */
   .hero-section-cabelo>* {
       position: relative;
       z-index: 2;
   }

   @media (max-width: 768px) {
       .hero-section-cabelo {
           min-height: 100dvh;
       }
   }

   /* Hero Section */
   .hero-section-unhas {
       position: relative;
       min-height: 80vh;
       display: flex;
       align-items: center;
       color: #fff;
       overflow: hidden;
   }

   /* Imagem + gradiente */
   .hero-section-unhas::before {
       content: "";
       position: absolute;
       inset: 0;

       background:
           linear-gradient(90deg,
               rgba(0, 0, 0, 1) 0%,
               rgba(0, 0, 0, 0.85) 40%,
               rgba(0, 0, 0, 0.1) 100%),
           url('../img/servicos/unhas-capa.jpg') center center no-repeat;

       background-size: cover;
       animation: zoomHero 15s ease-in-out infinite alternate;
       z-index: 1;
   }

   /* Conteúdo fica acima da imagem */
   .hero-section-unhas>* {
       position: relative;
       z-index: 2;
   }

   @media (max-width: 768px) {
       .hero-section-unhas {
           min-height: 100dvh;
       }
   .hero-title {
       font-size: 1.5rem;
       font-weight: 400;
   }

   }
 

   @keyframes zoomHero {
       from {
           transform: scale(1);
       }

       to {
           transform: scale(1.15);
       }
   }



   .hero-title {
       font-size: 3.5rem;
       font-weight: 400;
   }

     @media (max-width: 768px) {
     
   .hero-title {
       font-size: 1.8rem;
       font-weight: 400;
   }

   }

   .hero-title em {
       font-style: italic;
   }

   /* Custom Buttons */
   .btn-custom-white {
       background-color: #ffffff;
       color: var(--primary-navy);
       border: 1px solid #ffffff;
       padding: 10px 28px;
       font-weight: 500;
       border-radius: 4px;
       transition: all 0.3s;
   }

   .btn-custom-white:hover {
       background-color: transparent;
       color: #ffffff;
   }

   .btn-custom-outline {
       background-color: transparent;
       color: #ffffff;
       border: 1px solid #cc912c;
       padding: 10px 28px;
       font-weight: 500;
       border-radius: 4px;
       transition: all 0.3s;
   }

   .btn-custom-outline:hover {
       background-color: #cc912c;
       color: var(--primary-navy);
   }

   .btn-navy {
       background-color: var(--primary-navy);
       color: #ffffff;
       padding: 10px 28px;
       border-radius: 4px;
       font-weight: 500;
       border: 1px solid var(--primary-navy);
       transition: all 0.3s;
   }

   .btn-navy:hover {
       background-color: var(--secondary-blue);
       border-color: var(--secondary-blue);
       color: #ffffff;
   }

   .btn-outline-navy {
       background-color: transparent;
       border: 1px solid var(--primary-navy);
       color: var(--primary-navy);
       padding: 10px px;
       border-radius: 4px;
       font-weight: 500;
   }

   /* Botões de Alternância (Abas) */
   .btn-toggle {
       background-color: transparent;
       border: 1px solid #ffd285;
       ;
       color: #cc912c;
       ;
       padding: 10px 35px;
       border-radius: 30px;
       font-weight: 500;
       transition: all 0.3s ease;
       margin: 0 4px;
   }

   .btn-toggle.active,
   .btn-toggle:hover {
       background-color: #cc912c;
       ;
       color: #ffffff;
       outline: none;
       box-shadow: none;
   }

   /* Sections */
   .section-padding {
       padding: 80px 0;
   }

   .bg-light-section {
       background-color: var(--bg-light);
   }

   .section-title {
       color: var(--primary-navy);
       font-size: 2.5rem;
       margin-bottom: 20px;
   }

   .subtitle-mini {
       text-transform: uppercase;
       font-size: 0.8rem;
       letter-spacing: 2px;
       font-weight: 600;
       color: var(--secondary-blue);
       display: block;
       margin-bottom: 15px;
   }

   /* Split Promo Section */
   .split-image {
       background: url('../img/servicos/estetica7.jpg') no-repeat center center;
       background-size: cover;
       min-height: 450px;
   }

   .split-image2 {
       background: url('../img/servicos/cabelo.jpeg') no-repeat center center;
       background-size: cover;
       min-height: 450px;
   }

   .split-image3 {
       background: url('../img/servicos/unhas2.jpeg') no-repeat center center;
       background-size: cover;
       min-height: 450px;
   }

   .split-text-box {
       background-color: var(--primary-navy);
       color: #ffffff;
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: 60px;
   }

   /* Treatment Cards/Rows */
   .treatment-img {
       border-radius: 16px;
       width: 100%;
       height: 380px;
       object-fit: cover;
   }

   .badge-feature {
       background-color: #fcefd8;
       color: var(--secondary-blue);
       padding: 6px 14px;
       border-radius: 4px;
       font-size: 0.85rem;
       margin-right: 10px;
       margin-bottom: 10px;
       display: inline-block;
       font-weight: 500;
   }

   /* FIM AREA DE ESTETICA */








   /* --- MODAL  --- */


   .btn-abrir {
       padding: 12px 24px;
       font-size: 16px;
       background-color: #42b983;
       color: white;
       border: none;
       border-radius: 4px;
       cursor: pointer;
       transition: background 0.3s;
   }

   .btn-abrir:hover {
       background-color: #35495e;
   }

   /* --- Estilos do Modal (Fundo Fixo) --- */
   .modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.9);
       /* O fundo escurece */
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 9999;
       /* A transição do fundo permanece um fade suave */
       transition: opacity 0.5s ease;
   }

   /* --- Estilos do Conteúdo do Modal (O que move) --- */
   .modal-container {
       padding: 30px;
       border-radius: 8px;

       max-width: 100%;
       text-align: center;
       /* Definimos a transição padrão do movimento aqui também */
       transition: transform 0.5s ease-out, opacity 0.5s ease-out;
   }

   .close-btn {
       position: fixed;
       top: 20px;
       right: 20px;
       width: 45px;
       height: 45px;
       border: none;
       border-radius: 50%;
       background: #ff4d4f;
       color: #fff;
       font-size: 24px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
       transition: all .3s ease;
       z-index: 9999;
   }

   .close-btn:hover {
       background: #d9363e;
       transform: scale(1.1);
   }

   /* --- NOVAS Classes de Animação Direcional do Vue (Slide-Side) --- */

   /* 1. Definição da Animação (Ativa durante todo o processo) */
   .slide-side-enter-active,
   .slide-side-leave-active {
       transition: all 0.5s ease-in-out;
       opacity: 1;
       /* Garante opacidade total no estado ativo */
   }

   /* 2. ESTADO INICIAL DE ENTRADA (Vem da Esquerda) */
   .slide-side-enter {
       transform: translateX(-100%);
       /* Começa totalmente fora da tela à esquerda */
       opacity: 0;
       /* Começa invisível */
   }

   /* 3. ESTADO FINAL DE SAÍDA (Vai para a Direita) */
   .slide-side-leave-to {
       transform: translateX(100%);
       /* Termina totalmente fora da tela à direita */
       opacity: 0;
       /* Termina invisível */
   }

   /* Nota: Não precisamos definir .slide-side-enter-to ou .slide-side-leave
           pois o estado padrão do modal centralizado (transform: translateX(0)) 
           é o que queremos quando ele está visível. */


   /* --- FIM MODAL  --- */

   /* --- PREÇARIO  --- */

 
:root{
    --primary:#d79d39;
    --secondary:#fd7e14;
}

.hero{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:white;
    padding:100px 20px;
    text-align:center;
}

.hero h1{
    font-weight:700;
    font-size:3rem;
}

.hero p{
    opacity:.9;
    margin-top:10px;
}

.search-box{
    margin-top:-40px;
}

.search-card{
    border:none;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.category-title{
    color:var(--primary);
    font-weight:700;
    margin-bottom:25px;
}

.service-card{
    border:none;
    border-radius:20px;
    overflow:hidden;
    transition:.3s;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.service-card:hover{
    transform:translateY(-8px);
}

.service-card .card-header{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:white;
    font-weight:600;
    border:none;
}

.price{
    color:var(--primary);
    font-size:1.5rem;
    font-weight:700;
}

.summary-card{
    border:none;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.badge-services{
    background:var(--primary);
    font-size:.9rem;
}

.empty{
    text-align:center;
    padding:80px 20px;
}

@media(max-width:768px){

    .hero h1{
        font-size:2rem;
    }

}

 


      /* --- FIM PREÇARIO  --- */