/*========== RESET / NORMALIZAÇÃO BÁSICA ==========*/
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*========== VARIÁVEIS DE CORES ==========*/
:root {
  --color-primary:    #005EB8;
  --color-secondary:  #B9D9EB;
  --color-support-1:  #9CAF88;
  --color-support-2:  #DDCBA4;
  --color-support-3:  #4A7729;
  --color-dark:       #2D2926;
  --color-grey:       #54585A;
  --color-light:      #FFFFFF;
  --color-light-grey: #F5F5F5;
}

/*========== ESTILOS GLOBAIS ==========*/

html, body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--color-light);
  color: var(--color-primary);
  line-height: 1.4;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  font-size: 14px; /* base mobile */
}
@media (min-width: 600px) {
  html, body {
    font-size: 16px;
  }
}
@media (min-width: 900px) {
  html, body {
    font-size: 18px;
  }
}
header {
  position: fixed;     /* prende em relação à viewport */
  top: 0;              /* gruda no topo */
  left: 0;             /* fica esticado da esquerda */
  width: 100%;         /* ocupa toda a largura */
  z-index: 1000;       /* acima do restante do conteúdo */
  background-color: var(--color-light); /* para não ficar transparente */
  padding: 0 1rem; /* espaçamento interno */
}
a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: bold;
  display: inline-block;
  padding: 0.25rem; /* área de toque maior */
  word-break: break-word;
}
/*========== BOTÕES PILLS ==========*/
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 1rem;
}
@media (max-width: 600px) {
  .btn {
    padding: 0.5rem 1rem;
    margin: 1.5rem 0 3rem;
    font-size: 0.9rem;
  }
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-light);
  border: none;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}

.btn-hero {
  background-color: #25d366;
  color: var(--color-light);
  border: none;
}
.btn-hero:hover,
.btn-hero:focus {
  background-color: #dcf8c6;
  color: var(--color-dark);
}

.btn-block {
  width: 100%;
}

.g-recaptcha {
  display: flex;
  justify-content: start;
  margin-bottom: 1rem;
}
/*========== HEADER ==========*/
.nav {
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}
@media (max-width: 600px) {
  .nav {
    height: auto;
    padding: 0.5rem 1rem;
  }
}

.brand-header svg {
  width: 150px;
}
@media (max-width: 600px) {
  .brand-header svg {
    width: 120px;
  }
}

.btn-header {
  align-self: center;
  margin: 0;
}
@media (max-width: 600px) {
  .btn-header {
    margin: 0;
  }
}
/*========== HERO SPLIT ==========*/
.hero-split {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--color-light);
  padding-bottom: 2rem;
  margin-top: 6rem;
}
@media (max-width: 768px) {
  .hero-split {
    flex-direction: column;
    margin-top: 5rem;
    padding-bottom: 1rem;
  }
}

.hero-left,
.hero-right {
  flex: 1 1 50%;
  position: relative;
}
@media (max-width: 768px) {
  .hero-left,
  .hero-right {
    flex: 1 1 100%;
  }
}

.hero-left {
  background-color: #0076e4;
  border-radius: 0 4rem 4rem 0;
  color: var(--color-light);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 7rem 10rem 7rem 8rem;
  z-index: 2;
}
@media (max-width: 900px) {
  .hero-left {
    padding: 5rem 5rem 5rem 4rem;
    border-radius: 0 3rem 3rem 0;
  }
}
@media (max-width: 600px) {
  .hero-left {
    padding: 3rem 2rem;
    border-radius: 0 2rem 2rem 0;
  }
}

.hero-left h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .hero-left h1 {
    font-size: 1.9rem;
  }
}

.hero-left p {
  margin-bottom: 2rem;
}
@media (max-width: 600px) {
  .hero-left p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }
}

.hero-left .btn-hero {
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .btn-hero {
    font-size: 1.5rem;
  }
}

.hero-subtext {
  margin-top: 0.5rem;
  max-width: 500px;
  color: var(--color-light);
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.8;
}
@media (max-width: 600px) {
  .hero-subtext {
    max-width: 100%;
    font-size: 0.85rem;
  }
}

.hero-left .hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2rem;
}
@media (max-width: 600px) {
  .hero-left .hero-image {
    margin-top: 1rem;
  }
}

.hero-left .hero-image img {
  max-width: 100%;
  border-radius: 0 4rem 4rem 4rem;
  display: block;
}
@media (max-width: 900px) {
  .hero-left {
    border-radius: 0 0 3rem 3rem;
  }
  .hero-image img {
    border-radius: 0 3rem 3rem 3rem;
  }
}
@media (max-width: 600px) {
  .hero-left {
    border-radius: 0 0 1.5rem 1.5rem;
  }
  .hero-image img {
    border-radius: 0 1.5rem 1.5rem 1.5rem;
  }
}

.hero-right {
  background-color: var(--color-light);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 2rem;
  z-index: 1;
}
@media (max-width: 600px) {
  .hero-right {
    padding: 2rem 1rem;
  }
}
/*========== FORMULÁRIO ==========*/
.form-card {
  background-color: var(--color-light);
  border-radius: 4rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .form-card {
    padding: 1.5rem;
    border-radius: 2rem;
    max-width: 95%;
  }
}
@media (max-width: 480px) {
  .form-card {
    padding: 1rem;
    border-radius: 1.5rem;
  }
}

.form-card h2 {
  padding-bottom: 2rem;
}
@media (max-width: 480px) {
  .form-card h2 {
    font-size: 1.25rem;
    padding-bottom: 1rem;
  }
}

/*========== FORMULÁRIO – LABELS DIRETOS (inputs e selects) ==========*/
.form-card form > label {
  display: block;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: 1rem;
}
@media (max-width: 480px) {
  .form-card form > label {
    font-size: 0.9rem;
  }
}

.obrigatorio {
  color: rgba(255, 0, 0, 0.622);
  font-weight: bold;
}

.form-card form legend {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--color-primary);
}
@media (max-width: 480px) {
  .form-card form legend {
    font-size: 0.95rem;
  }
}

.form-card form input,
.form-card form select,
.form-card form textarea {
  width: 100%;
  font-family: 'Poppins', sans-serif;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1.5px solid rgba(0, 0, 0, 0.250);
  border-radius: 0.5rem;
  background-color: var(--color-light-grey);
  color: var(--color-primary);
  font-size: 1rem;
  opacity: 1;
}
@media (max-width: 480px) {
  .form-card form input,
  .form-card form select,
  .form-card form textarea {
    padding: 0.6rem;
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
}

.form-card form input::placeholder,
.form-card form textarea::placeholder {
  color: var(--color-primary);
  opacity: 0.5;
}

.form-card form textarea {
  min-height: 150px;
}

.form-card input[type="submit"] {
  display: none;
}

.form-card button[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-light);
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  transform: scale(1.3);
  margin-left: 2rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .form-card button[type="submit"] {
    padding: 0.6rem 1.2rem;
    margin: 0 0 1rem 0;
    text-align: center;
    transform: translateX(10.5%);
    font-size: 1.4rem;
  }
}

.form-card button[type="submit"]:hover {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}

/*========== CHECKBOXES – LABELS DENTRO DE FIELDSET ==========*/
.form-card form fieldset > label {
  display: grid;                   /* checkbox + texto lado a lado */
  grid-template-columns: auto 1fr; /* caixa em col 1, texto em col 2 */
  align-items: center;             /* alinha verticalmente */
  gap: 0.5rem;                     /* espaço entre caixa e texto */
  border: none;                    /* remove qualquer borda residual */
  padding: 0;                      /* zera padding residual */
}
@media (max-width: 480px) {
  .form-card form fieldset > label {
    grid-template-columns: auto 1fr;
    font-size: 0.95rem;
  }
}

.form-card form fieldset > label input[type="checkbox"] {
  margin: 0;                       /* limpa margens extras */
  flex-shrink: 0;                  /* não deixa checkbox encolher */
}

/*========== REMOVER BORDAS DE FIELDSETS E LEGENDS ==========*/
.form-card form fieldset {
  border: none;         /* remove a borda ao redor do grupo */
  padding: 0;           /* zera o padding padrão */
  margin: 0 0 1.5rem;   /* mantém espaçamento inferior */
}

.form-card form fieldset legend {
  border: none;         /* remove linha do legend */
  padding: 0;           /* zera o padding padrão */
  margin-bottom: 0.5rem;/* mantém espaçamento antes dos campos */
}

/*========== CONSENT LABEL – GRID PARA INPUT + TODO O TEXTO ==========*/
.consent-label {
  display: grid;
  grid-template-columns: auto 1fr;  /* checkbox em col 1, texto em col 2 */
  align-items: flex-start;               /* alinha o topo do texto com o checkbox */
  gap: 0.5rem;                      /* espaçamento entre caixa e texto */
  margin-bottom: 1rem;           /* mesmo espaçamento do resto dos fieldsets */
}
@media (max-width: 480px) {
  .consent-label {
    font-size: 0.95rem;
  }
}

.notice-consent {
  line-height: 1.5rem;
}

.consent-label input[type="checkbox"] {
  flex-shrink: 0;                   /* não encolhe a caixa */
  align-self: flex-start;       /* garante que a caixa fique no topo */
  transform: translateY(0.4rem);  /* “empurra” a caixa para baixo 0.2rem */
}
/*========== SEÇÃO DE DESTAQUES ==========*/
.highlights {
  padding: 7rem 2rem;
  background-color: var(--color-light);
}
.highlights .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}
.highlight-subtitle {
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.highlight-title {
  font-size: 1.75rem;
  color: var(--color-dark);
  margin: 0 9rem 2rem;
}
@media (max-width: 992px) {
  .highlight-title {
    font-size: 1.5rem;
    margin: 0 2rem 3rem;
  }
}
@media (max-width: 600px) {
  .highlight-title {
    font-size: 1.25rem;
    margin: 0 1rem 3rem;
  }
}

/* agora em flex, com espaços de 18px e quebra automática */
.highlight-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 18px;
  margin-bottom: 2.5rem;
  padding: 0;
}
@media (max-width: 768px) {
  .highlight-list {
    justify-content: center;
    gap: 1rem;
  }
}

/* cada item ocupa cerca de 20% menos gap */
.highlight-item {
  flex: 1 1 calc(20% - 18px);
  max-width: calc(20% - 18px);
  background-color: var(--color-light-grey);
  color: var(--color-primary);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: start;
}
@media (max-width: 768px) {
  .highlight-item {
    flex: 1 1 calc(45% - 18px);
    max-width: calc(45% - 18px);
  }
}
@media (max-width: 480px) {
  .highlight-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

#more-time svg,
#request-quote svg {
  fill: var(--color-primary);
}
#rocket-launch svg,
#support-agent svg {
  fill: var(--color-light);
}

.highlight-item p {
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 1rem;
  text-align: left;
}
@media (max-width: 600px) {
  .highlight-item p {
    font-size: 0.95rem;
  }
}

/* itens alternados com fundo de destaque */
.highlight-item--accent {
  background-color: #25d366;
  color: var(--color-light);
}
.highlight-item--accent p {
  color: var(--color-light);
}

/* botão full-width ajustado */
.highlights .btn-block {
  max-width: 300px;
  margin: 0 auto;
  display: block;
  text-decoration: none;
}
@media (max-width: 480px) {
  .highlights .btn-block {
    font-size: 1.2rem;
  }
}
/*========== SEÇÃO FAQ ==========*/
.faq-section {
  padding: 10rem 2rem 4rem;
  background: var(--color-light);
}
@media (max-width: 768px) {
  .faq-section {
    padding: 8rem 1.5rem 3rem;
  }
}
@media (max-width: 480px) {
  .faq-section {
    padding: 6rem 1rem 2rem;
  }
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
}
@media (max-width: 992px) {
  .faq-container {
    flex-direction: column;
    gap: 3rem;
  }
}

/* ––– Coluna Esquerda ––– */
.faq-media {
  flex: 1 1 40%;
  position: sticky;
  top: 2rem;
  align-self: flex-start;
}
@media (max-width: 992px) {
  .faq-media {
    position: relative;
    top: auto;
    align-self: center;
  }
}

.video-wrapper {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
}
.video-wrapper video {
  display: block;
  width: 100%;
  border-radius: 1.5rem;
  object-fit: cover;
}

.video-cta {
  margin: 1.5rem 10px;
  max-width: 280px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
@media (max-width: 480px) {
  .video-cta {
    margin: 1rem auto;
    max-width: 100%;
    text-align: center;
  }
}

/* Container inline-flex para ícone + texto */
#faq-rocket-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 10px;
  font-size: 0.95rem;
  color: var(--color-grey);
}

#faq-rocket-launch svg {
  fill: var(--color-primary);
  flex-shrink: 0;
}

#faq-rocket-launch .video-caption {
  margin: 0;
  font-size: 0.95rem;
  display: inline;
}

.video-caption {
  color: var(--color-grey);
  position: absolute;
  padding-top: 0.7rem;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.material-symbols-rounded {
  transform: scale(7);
  color: rgba(255,255,255,0.9);
}

@keyframes floatY {
  0%   { transform: translateY(0) translateX(0); }
  25%  { transform: translateY(-5px) translateX(5px); }
  50%  { transform: translateY(0) translateX(-5px); }
  75%  { transform: translateY(5px) translateX(0); }
  100% { transform: translateY(0) translateX(0); }
}

.faq-video,
.play-btn {
  padding: 10px;
  display: block;
  animation: floatY 10s ease-in-out infinite;
}

.faq-video.no-float,
.play-btn.no-float {
  animation: none !important;
}

/* ––– Coluna Direita ––– */
.faq-accordion {
  flex: 1 1 60%;
}

.faq-title {
  font-size: 1.5rem;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 0.5rem;
}
@media (max-width: 480px) {
  .faq-title {
    font-size: 1.5rem;
  }
}

.faq-subtitle {
  color: var(--color-dark);
  font-size: 1.75rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
}
@media (max-width: 480px) {
  .faq-subtitle {
    font-size: 1.5rem;
  }
}

/* ––– Accordion ––– */
.accordion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 600px) {
  .accordion-list {
    margin: 0;
  }
}

.accordion-item + .accordion-item {
  margin-top: 1rem;
}

.accordion-toggle {
  font-family: 'Poppins', sans-serif;
  text-align: left;
  width: 100%;
  background: none;
  border: none;
  padding: 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.accordion-toggle::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  height: 2px; width: 100%;
  background: var(--color-secondary);
}

.accordion-toggle .icon {
  color: var(--color-primary);
  font-size: 1.5rem;
  transition: transform 0.3s;
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
}

.accordion-panel p {
  margin: 1rem 0;
  line-height: 1.5;
  color: var(--color-dark);
}

.accordion-item.open .accordion-panel {
  max-height: 500px;
  padding: 0.5rem 0;
}

.accordion-item.open .accordion-toggle .icon {
  transform: rotate(45deg);
}
/* ========== SEÇÃO INTEGRAÇÕES ========== */
.integrations {
  padding: 10rem 2rem 2rem;
  background-color: #0076e4;
  text-align: center;
}
@media (max-width: 768px) {
  .integrations { padding: 8rem 1.5rem 2rem; }
}
@media (max-width: 480px) {
  .integrations { padding: 6rem 1rem 1rem; }
}

.integrations .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.integrations-title {
  font-size: 2rem;
  color: var(--color-light);
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .integrations-title { margin-bottom: 0.75rem; }
}

.integrations-intro {
  font-size: 1rem;
  color: var(--color-light);
  line-height: 1.6;
  max-width: 1000px;
  margin: 0 auto 2.5rem;
}
@media (max-width: 600px) {
  .integrations-intro { margin-bottom: 1.5rem; }
}

.element-divider {
  width: 100%;
  height: 1px;
  display: block;
  margin: 2rem 0;
  stroke: var(--color-light);
}

/* Swiper de logos */
.integrations-swiper {
  position: relative;
  overflow: hidden;
  padding: 0 1rem;
}
.integrations-swiper .swiper-wrapper {
  display: flex;
}
.integrations-swiper .swiper-slide {
  flex: 0 0 auto;
  /* let Swiper JS control slide width */
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ensure slides fill available space per JS slidesPerView */
.integrations-swiper .swiper-slide img {
  max-height: 6rem;
  width: auto;
  object-fit: contain;
}
@media (max-width: 1024px) {
  .integrations-swiper .swiper-slide img {
    max-height: 5rem;
  }
}
@media (max-width: 768px) {
  .integrations-swiper .swiper-slide img {
    max-height: 4rem;
  }
}
@media (max-width: 480px) {
  .integrations-swiper .swiper-slide img {
    max-height: 3.5rem;
  }
}

.btn-integrations-cta {
  background-color: #25d366;
  color: var(--color-light);
  margin: 2rem 0 5rem;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  font-size: 1.2rem;
}
.btn-integrations-cta:hover,
.btn-integrations-cta:focus {
  background-color: #dcf8c6;
  color: var(--color-dark);
}
/* ========== PLANOS ========== */
.plans {
  background-color: var(--color-light);
  padding: 0 2rem;
  padding-top: 10rem;
  padding-bottom: 4rem;
  text-align: center;
}

/* layout flexível para cards independentes */
.plan-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;      /* garante que cada card não seja esticado pelo flex */
  max-width: 1000px;
  margin: 0 auto;
}
/* define largura e flex-grow para 3 colunas, adaptando em breakpoints */
.plan-list > .plan-card {
  flex: 1 1 calc((100% - 4rem) / 3);
  max-width: calc((100% - 4rem) / 3);
}
@media (max-width: 768px) {
  .plan-list > .plan-card {
    flex: 1 1 calc((100% - 2rem) / 2);
    max-width: calc((100% - 2rem) / 2);
  }
}
@media (max-width: 480px) {
  .plan-list > .plan-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* card base */
.plan-card {
  background-color: var(--color-light);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 6px 30px 6px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.plan-card--highlight {
  background-color: #00319b;
  color: var(--color-light);
}
.plan-card--highlight .plan-name,
.plan-card--highlight .plan-price {
  color: var(--color-light);
}

/* título do plano */
.plan-name {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}
.plan-card--highlight .plan-name {
  color: var(--color-light);
}

/* descrição */
.plan-description {
  font-size: 0.9rem;
  color: var(--color-dark);
  margin-bottom: 1rem;
  text-align: start;
}
.plan-card--highlight .plan-description {
  color: var(--color-light);
}

.plan-card .element-divider {
  stroke: var(--color-dark);
  margin: 0 0 1.5rem 0;
}
.plan-card--highlight .element-divider {
  stroke: var(--color-light);
}

/* FEATURES responsivas */
.plan-features {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;          /* permite múltiplas linhas */
  gap: 0.5rem;
  text-align: start;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 0.9rem;
}
.plan-features li {
  flex: 0 1 auto;           /* encolhe e cresce conforme espaço */
  display: inline;
  width: fit-content;       /* ajusta à largura do texto */
  background: #d9edff;
  color: var(--color-dark);
  border-radius: 0.5rem;
  white-space: normal;      /* permite quebra de texto */
  padding: 0.15rem 0.6rem;
  position: relative;
  max-width: 100%;
  word-break: break-word;
}
.plan-features li:nth-child(2) {
  background: #66ff9e;
  cursor: pointer;
}
.plan-features li:nth-child(2)::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: -1.9rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #66ff9e;
  color: var(--color-dark);
  font-size: 0.9rem;
  border-radius: 0.25rem;
  transition: transform 0.3s ease;
  transform-origin: center;
}
.plan-features li:nth-child(2).rotated::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ajustes de responsividade */
@media (max-width: 768px) {
  .plan-features {
    gap: 0.4rem;
  }
  .plan-features li {
    padding: 0.1rem 0.5rem;
    font-size: 0.85rem;
  }
}
@media (max-width: 480px) {
  .plan-features {
    gap: 0.3rem;
  }
  .plan-features li {
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
  }
}
/* ─── SUBDESCRIÇÃO (detalhes extras) ─── */
.plan-details {
  font-size: 0.85rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
  line-height: 1.5rem;
  color: var(--color-dark);
  opacity: 0.9;
}

.plan-card--highlight .plan-details {
  color: var(--color-light);
  opacity: 1;
}

.plan-card.open .plan-details {
  max-height: 500px;
  padding: 1rem 0;
}

/* preço */
.plan-price-label {
  margin-bottom: 0.7rem;
  font-size: 1rem;
  color: var(--color-dark);
}
.plan-card--highlight .plan-price-label {
  color: var(--color-light);
}
.plan-price {
  font-size: 2rem;
  font-weight: 600;
  color: #0076e4;
}
.plan-price-obs {
  text-align: left;
  font-size: 0.5rem;
  color: var(--color-dark);
  margin-top: 0.1rem;
  margin-bottom: 1.5rem;
}
.plan-price-obs--highlight {
  text-align: left;
  font-size: 0.5rem;
  color: var(--color-light);
  margin-top: 0.1rem;
  margin-bottom: 1.5rem;
}
.plan-period {
  font-size: 1rem;
  font-weight: normal;
  margin-left: 0.25rem;
}
.plan-price--contact {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0076e4;
  margin-bottom: 1.5rem;
}

/* botão interno */
.plan-cta {
  align-self: stretch;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 1.2rem;
}
.plan-card--highlight .plan-cta {
  background-color: #25d366;
  color: var(--color-light);
}
.plan-cta:hover {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}
.plan-card--highlight .plan-cta:hover {
  background-color: #dcf8c6;
  color: var(--color-dark);
}

/*========== FOOTER ==========*/
footer {
  padding: 2rem 0 0 0;
  background-color: #0076e4;
}
.footer-content {
  display: flex;
  max-width: 1250px;
  margin: 0 auto;
  align-items: flex-start;
  color: var(--color-light);
  height: 6rem;
  margin-top: 2rem;
}
.brand-footer {
  margin-right: 7rem;
  margin-left: 2rem;
}
.brand-footer svg {
  display: inline-flex;
  width: 170px;
}
.address {
  display: inline-flex;
  margin-right: 2rem;
}
.address p {
  margin: 0;
  color: var(--color-light);
  line-height: 1.4;
  text-align: left;
  position: relative;
}
.copyright p {
  text-align: center;
  color: var(--color-light);
  font-size: small;
  opacity: 0.7;
  padding-top: 2rem;
}
.social-icons svg {
  margin-right: 1rem;
  margin-left: auto;
  fill: var(--color-light);
  transition: fill 0.3s ease;
  display: inline-flex;
  width: 36px;
  position: relative;
}
.social-icons {
  display: inline-flex;
  margin-left: auto;
  margin-right: 2rem;
  text-align: right;
}

/* Responsividade do Footer */
@media (max-width: 1024px) {
  .footer-content {
    height: auto;
    flex-wrap: wrap;
  }
  .brand-footer,
  .address,
  .social-icons {
    margin: 0 auto 1.5rem;
  }
}
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .brand-footer,
  .address,
  .social-icons {
    margin-bottom: 1rem;
  }
  .address p {
    text-align: center;
  }
}
@media (max-width: 480px) {
  .brand-footer svg {
    width: 140px;
  }
  .address p {
    font-size: 0.9rem;
  }
  .social-icons svg {
    width: 30px;
  }
  .copyright p {
    font-size: x-small;
  }
}

/*========== BANNER DE COOKIES ==========*/
.cookie-consent {
  position: fixed;
  bottom: 20px;
  left: 50%;
  /* começamos escondidos, 40px abaixo */
  transform: translateX(-50%) translateY(40px);
  opacity: 0;
  background: #fafbfc;           /* fundo branco */
  border: 1px solid #c5cddb;     /* borda cinza clara */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: "Poppins", sans-serif;
  color: #2D2926;                /* texto em cinza escuro */
  padding: 16px 24px;
  max-width: 500px;
  width: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  z-index: 10000;
  pointer-events: none;
}

/* Estado “visível” */
.cookie-consent.show {
  pointer-events: auto;
  animation: slideIn 0.5s ease-out forwards;
  animation-delay: 1s;
}

/* Estado “saindo” */
.cookie-consent.hide {
  pointer-events: none;
  animation: slideOut 0.4s ease-in forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
  }
}

.cookie-consent--title {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;           /* Semi-bold, como no exemplo */
  font-size: 20px;         /* ~28px — ajuste se quiser maior/menor */
  line-height: 1.2;           /* espaçamento confortável */
  color: #005EB8;             /* azul principal da PROS-C */
  border: 2px dashed #c5cddb;
  padding: 3px;          /* espaçamento interno */
  margin-left: -3px; /* para alinhar com a borda */
}
.cookie-consent--title::after {
  content: "";
  display: block;
  width: 2px;           /* espessura da barra */
  height: 1.3em;          /* altura igual à fonte */
  background: #c5cddb;  /* cor da barra */
  margin: 0 4px;     /* espaçamento antes e depois dela */
}
.cookie-consent p {
  flex: 1 1 auto;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.4;
}
.cookie-consent p a {
  padding-left: 0;
  color: #0076e4;
  font-weight: 500;
}
.cookie-consent p span {
  font-weight: 600;
}

.cookie-consent-buttons {
  display: flex;
  margin-left: auto;
  flex-shrink: 0;
}
.cookie-consent .btn {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  min-width: 96px;
  text-align: center;
}
.cookie-consent .btn.accept {
  font-weight: 600;
  background: #0076e4;
  color: #fafbfc;
  margin-left: 16px;

}
.cookie-consent .btn.decline {
  background: #fafbfc;
  border: 2px solid #c5cddb;
  color: #2D2926;
}

/* Tablets / small desktops */
@media (max-width: 600px) {
  .cookie-consent {
    max-width: 90%;
    padding: 0.8rem 1rem;
  }
  .cookie-consent--title {
    font-size: clamp(16px, 2.5vw, 22px);
  }
  .cookie-consent-buttons {
    margin-left: 0;
    gap: 0.4em;
  }
}

/* Celulares estreitos */
@media (max-width: 400px) {
  .cookie-consent {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  .cookie-consent--title {
    justify-content: center;
    margin-bottom: 0.5em;
    margin-left: 0;
  }
  .cookie-consent-buttons {
    justify-content: center;
    margin-top: 0.5em;
  }
  .cookie-consent .btn {
    flex: 1 1 40%;
    margin: 0.3em;
  }
}
/*========== UTILITÁRIAS ==========*/
.divider {
  border-bottom: 1px solid #ccc;
}