/* ==================================================
   1. Reset CSS
   ================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 62.5%;
  line-height: 1.6;
  width: 100%;
  scroll-behavior: smooth;
  

}

main#main-content {
    min-height: calc(100vh - 644px);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  outline: none;
}

button {
  border: none;
}

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

ul {
  list-style: none;
}

p {
  margin-bottom: 0;
}


/* ==================================================
     2. Font‑weight utility classes
     ================================================== */
.poppins-light,
.poppins-regular,
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-style: normal;
}

.poppins-light {
  font-weight: 300;
}

.poppins-regular {
  font-weight: 400;
}

.poppins-bold {
  font-weight: 700;
}

.left {
  text-align: left !important;
}
.center {
  text-align: center !important;
}
.right {
  text-align: right !important;
}

/* ==================================================
     3. Design tokens & Dark/Light theme variables
     ================================================== */
:root {
  /* ── Dark mode (padrão) cores ── */
  --color-bg: #232323;
  /* fundo */
  --color-text: #ffffff;
  /* texto */

  --color-primary: #00CCFF;
  /* links, botões, destaques */
  --color-inverse: #ffffff;
  /* texto sobre primary */
  --border-color: #4C4C4C;
  --border-header: #333333;
  --branco-cw: #ffffff;
  --preto-cw: #232323;
  --azul-claro-cw: #80E5FF;
  --azul-escuro-cw: #0092B7;
  --cinza-cw: #F9F9F9;
  --cinza-escuro-cw: #4C4C4C;
  --preto-claro-cw: #2A2A2A;
  --bg-overlay: rgba(35, 35, 35, 0.85);

  /* ── Border Radius ── */

  --border-radius-xs: 1rem;
  --border-radius-md: 2rem;

  /* ── Espaçamentos ── */
  --space-xs: 0.4rem;
  /* 4px */
  --space-sm: 0.8rem;
  /* 8px */
  --space-md: 1.6rem;
  /* 16px */
  --space-mg: 2.4rem;
  /* 24px */
  --space-lg: 3.2rem;
  /* 32px */
  --space-xl: 6.4rem;
  /* 64px */

  /* ── Tipografia ── */
  --font-size-small: 1.2rem;
  /* 12px */
  --font-size-base: 1.4rem;
  /* 14px */
  --font-size-md: 1.6rem;
  /* 16px */
  --font-size-lg: 2rem;
  /* 20px */
  --font-size-xl: 2.4rem;
  /* 24px */

  /* ── Container ── */
  --container-max-width: 125rem;
  /* 1250px */
  /*--container-padding:   2rem;    20px */
}

[data-theme="light"] {
  /* ── Light mode overrides ── */
  --color-bg: #ffffff;
  --color-text: #232323;
  --color-primary: #00CCFF;
  --border-color: #4C4C4C;
  --cinza-cw: #F9F9F9;
  --border-header: #d7d7d7;
  --bg-overlay: rgba(255, 255, 255, 0.85);
}


/* ==================================================
     4. Base element styles
     ================================================== */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  transition: background-color 0.3s ease,
  color 0.3s ease;
  overflow-x: hidden;
}

a {
  color: var(--color-text);
  transition: all 0.3s ease;
}

a:hover {
  opacity: 0.8;
}

hr {
  border-color: var(--border-color);
}

/* Headings */
h1 {
  font-size: 5.6rem;
  margin-bottom: var(--space-md);
}

h2 {
  font-size: 4rem;
  margin-bottom: var(--space-md);
}

h3 {
  font-size: 2.4rem;
  margin-bottom: var(--space-sm);
  line-height: 1.5em;
}

h4 {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

@media (max-width: 1024px) {
  h1 {
    font-size: 4.8rem;
    margin-bottom: var(--space-sm);
  }

  h2 {
    font-size: 3.2rem;
    margin-bottom: var(--space-sm);
  }

  h3 {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
  }

  h4 {
    font-size: 1.8rem;
    margin-bottom: var(--space-sm);
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 3.2rem;
    margin-bottom: var(--space-sm);
  }

  h2 {
    font-size: 2.6rem;
    margin-bottom: var(--space-sm);
  }

  h3 {
    font-size: 1.6rem;
    margin-bottom: var(--space-xs);
  }

  h4 {
    font-size: 1.2rem;
    margin-bottom: var(--space-xs);
  }
}

.transparent-80 {
  opacity: 0.8;
}
.transparent-70 {
  opacity: 0.7;
}
.transparent-60 {
  opacity: 0.6;
}

.section {
  padding: 7rem 0;
}

.section-page {
  padding: 19.2rem 0;
  padding-bottom: 7rem;
}

@media (max-width: 1024px) {
  .section {
    padding: 5.6rem 0;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 4.8rem 0;
  }
  .section-page {
  padding: 14.2rem 0;
  padding-bottom: 4.8rem;
  }
}


/* ==================================================
     5. Components
     ================================================== */




/* Botões */
.btn {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  font-size: var(--font-size-md);
  border: none;
  border-radius: 10.4rem;
  cursor: pointer;
  background-color: var(--color-primary);
  color: var(--preto-cw);
  transition: all .3s ease;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
}

.btn:hover {
  opacity: 0.9;
  background-color: var(--color-text);
  color: var(--color-bg);
}

.underline {
  text-decoration: underline;
  background: transparent;
  color: var(--color-text);
  transition: all .3s ease;
}

.underline:hover {
  opacity: 0.8;
}

body.modal-open > :not(header):not(.cw-modal) {
  filter: blur(5px);
}

body.modal-open:not(.popup-open) header .header-navigation {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


.cw-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9990; 
  display: flex;
  visibility: hidden;
  transition: visibility 0.3s;
}
.cw-modal[aria-hidden="false"] {
  visibility: visible;
}

.cw-modal-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-overlay);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cw-modal[aria-hidden="false"] .cw-modal-overlay {
  opacity: 1;
}

.cw-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.modal-open header {
z-index: 10000;
}

.modal-open.popup-open header {
z-index: 999;
}

/* ==========================================================================
   Estilo 1: Menu Suspenso
   ========================================================================== */
.cw-modal:not(.cw-modal--popup) {
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(6rem + 6.3rem);
  pointer-events: none; 
}
.header-is-sticky .cw-modal:not(.cw-modal--popup) {
  padding-top: 9.3rem;
}

.cw-modal:not(.cw-modal--popup) .cw-modal-content,
.cw-modal:not(.cw-modal--popup) .cw-modal-overlay {
  pointer-events: auto;
}

.cw-modal:not(.cw-modal--popup) .cw-modal-content {
  max-width: 1250px;
  background: rgba(124, 124, 124, 0.05);
  backdrop-filter: blur(7.5px);
  border: 1px solid var(--border-header);
  border-top: none;
  border-radius: 0 0 20px 20px;
  padding: 2rem;
  transform: translateY(-50px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.cw-modal[aria-hidden="false"]:not(.cw-modal--popup) .cw-modal-content {
  transform: translateY(0);
  opacity: 1;
}


/* ==========================================================================
   Estilo 2: Popup Centralizado 
   ========================================================================== */
.cw-modal.cw-modal--popup {
  justify-content: center;
  align-items: center;
}

.cw-modal.cw-modal--popup .cw-modal-content {
  max-width: 500px;
  background: rgba(124, 124, 124, 0.05);
  backdrop-filter: blur(7.5px);
  border: 1px solid var(--border-header);
  border-radius: 20px;
  box-shadow: 0 20px 90px rgba(0, 0, 0, 0.1);
  padding: 4rem;
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 768px) {
  .cw-modal.cw-modal--popup .cw-modal-content {
    padding: 4rem 2rem;
  }
  .cw-modal:not(.cw-modal--popup) {
  padding-top: calc(6rem + 5.3rem);
}
}

.cw-modal.cw-modal--popup[aria-hidden="false"] .cw-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}


.cw-modal-content .cw-modal-close-btn {
  position: absolute;
  top: 1rem;       
  right: 1rem;     
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem; 
  line-height: 0;  
  z-index: 2;      
  color: var(--color-text); 
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cw-modal-content .cw-modal-close-btn:hover,
.cw-modal-content .cw-modal-close-btn:focus {
  transform: scale(1.1);
  opacity: 0.8;
  outline: none; 
}
.cw-modal-content .cw-modal-close-btn svg {
  display: block; 

}




/* ==================================================
     6. Layout utilities
     ================================================== */
.container {
  width: 90%;
  margin: 0 auto;
  --bs-gutter-x: 0;
  /*padding:      0 var(--container-padding);*/
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-max-width);
  }
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding: 0 2rem;
    margin: 0 auto;
  }

}

.slider-buttons {
    display: flex;
    gap: 2rem;
}

.cw-swiper-button-prev, .cw-swiper-button-next {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.3s ease;
    color: var(--color-text);
}

.swiper-button-disabled {
    opacity: 0.3;
}

.swiper-button-lock {
  display: none;
}

/* =================================================================================================
FAQ
================================================================================================= */
.faq h2 {
  margin-bottom: var(--space-xl)
}
.faq-grid {
  display: flex;
  gap: 2rem;
}

.faq-column {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.faq-column .accordion {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.accordion-item {
  background-color: transparent;
}

.accordion-item p {
  margin-bottom: 1.2rem;
}

.accordion-item:first-of-type, .accordion-item:last-of-type, .accordion-item:not(:first-of-type){
  border: 1px solid var(--cinza-escuro-cw);
  border-radius: var(--border-radius-md);
}

.accordion-button {
  font-size: 1.6rem;
  font-weight: 700;
  background-color: transparent;
  color: var(--color-text);
  padding: 2rem;
  box-shadow: none;
}

.accordion-button::after, .accordion-button:not(.collapsed)::after {
  background-image: url('../arrow-select-white.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1.8rem;
  height: 1.8rem;
}

[data-theme="light"] .accordion-button::after, [data-theme="light"].accordion-button:not(.collapsed)::after {
  background-image: url('../arrow-select-black.svg');
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--color-text);
  background-color: transparent;
  box-shadow: none;
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-body {
  padding: 0 2rem 0.8rem;
  color: var(--color-text)
}

.accordion-body hr {
  margin: 0 0 2rem;
  border-color: var(--cinza-escuro-cw);
  opacity: 1;
}

@media (max-width: 1024px) {
  .faq h2 {
    margin-bottom: var(--space-lg);
  }
  .faq-grid, .faq-column .accordion {
    gap: 1.6rem;
  }
}

@media (max-width: 768px) {
  .faq-grid {
    flex-direction: column;
  }
  .faq-column {
    flex: 1 1 100%;
  }
  .accordion-item h3 button {
    font-size: var(--font-size-base)
  }
}


/* MENSAGENS DE SUCESSO, WARNING E ERRO */
/* Estilos para as Notificações Toast */
.cw-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 40px 15px 20px;
    border-radius: 5px;
    color: #fff;
    font-family: sans-serif;
    z-index: 9999;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.cw-toast-success {
    background-color: #28a745;
}
.cw-toast-error {
    background-color: #dc3545;
}
.cw-toast-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}


.popup-services h4 {
  margin-bottom: 2.4rem;
  font-size: var(--font-size-lg);
}
.popup-services p {
  margin-bottom: 1.6rem;
}

.popup-services li {
    margin: 0.8rem 0;
}

.btn-popup-service {
  margin-top: 2.4rem;
  width: 100%;
}

.service-popup-content {
    max-height: 40rem;
    padding-right: 2rem;
    overflow-y: scroll;

    scrollbar-width: thin;             
    scrollbar-color: var(--color-bg) var(--color-text);         
}


.service-popup-content::-webkit-scrollbar {
    width: 5px;                         
}

.service-popup-content::-webkit-scrollbar-track {
    background: var(--color-text);                   
}

.service-popup-content::-webkit-scrollbar-thumb {
    background-color: var(--color-bg);                         
}