/* Seção COR Moderna e Atraente */
#cor {
  position: relative;
  padding: 5rem 1rem;
  background: var(--main-gradient);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  overflow: hidden;
  color: #1e293b;
}

/* Elementos decorativos sutis */
#cor::before,
#cor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.25;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#cor::before {
  top: -4rem;
  left: -6rem;
  width: 14rem;
  height: 14rem;
  background: #06b6d4;
  animation-name: moveLight1;
  animation-duration: 12s;
}

#cor::after {
  bottom: -5rem;
  right: -5rem;
  width: 16rem;
  height: 16rem;
  background: #06b6d4;
  animation-name: moveLight2;
  animation-duration: 15s;
}

/* Animações decorativas */
@keyframes moveLight1 {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(15px) translateX(15px);
  }
}
@keyframes moveLight2 {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(-15px) translateX(-15px);
  }
}

/* Container glassmorphism moderno */
.cor-container {
  background: rgba(255, 255, 255, 0.55); /* mais leve */
  backdrop-filter: blur(14px) saturate(160%);
  position: relative;
  z-index: 1;
  padding: 3rem 3.5rem;
  border-radius: 2rem;
  box-shadow: 0 10px 15px rgb(4 88 151 / 0.1), 0 20px 30px rgb(4 88 151 / 0.15);
  transition: box-shadow 0.3s ease;
}
.cor-container:hover {
  box-shadow: 0 15px 25px rgb(3 105 161 / 0.18),
    0 30px 40px rgb(3 105 161 / 0.22);
}

/* Título e subtítulo */
.cor-title {
  font-size: 3rem;
  font-weight: 900;
  color: #01579b;
  margin-bottom: 0.75rem;
  letter-spacing: -1px;
  text-align: center;
  text-shadow: 0 2px 6px rgb(0 87 154 / 0.15);
}

.cor-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  color: #374151;
  max-width: 720px;
  margin: 0 auto 3rem auto;
  line-height: 1.7;
  text-align: center;
  opacity: 0.9;
}

/* Carrossel moderno */
.cor-swiper {
  border-radius: 1.5rem;
  overflow: hidden;
  border: 2px solid #81d4fa;
  box-shadow: 0 8px 20px rgb(3 169 244 / 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: grab;
}
.cor-swiper:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 14px 28px rgb(3 169 244 / 0.35);
}

.cor-carousel-image {
  width: 100%;
  height: 500px; /* altura ideal para desktop */
  object-fit: cover;
  aspect-ratio: 16 / 9;
  border-radius: 1.5rem;
  transition: transform 0.4s ease;
}

@media (max-width: 1199px) {
  .cor-carousel-image {
    height: 400px;
    aspect-ratio: 16 / 10;
  }
}

/* Contato comercial responsivo */
@media (max-width: 768px) {
  .cor-card .mt-4 > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    font-size: 0.85rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .cor-card .mt-4 > div > * {
    width: 100%;
  }

  .cor-card .mt-4 a,
  .cor-card .mt-4 span {
    display: block;
    white-space: normal;
    text-align: left;
  }
}


@media (max-width: 480px) {
  .cor-carousel-image {
    height: 240px;
    aspect-ratio: 4 / 3;
  }
}


.cor-carousel-image:hover {
  transform: scale(1.07);
}

/* Paginação e botões do swiper */
.cor-swiper .swiper-pagination-bullet {
  width: 0.9rem;
  height: 0.9rem;
  background: #0288d1;
  opacity: 0.5;
  margin: 0 7px;
  transition: all 0.3s ease;
}
.cor-swiper .swiper-pagination-bullet-active {
  background: #01579b;
  opacity: 1;
  transform: scale(1.3);
  box-shadow: 0 0 8px #01579b88;
}
.cor-swiper .swiper-button-prev,
.cor-swiper .swiper-button-next {
  color: #01579b;
  transition: transform 0.25s ease, color 0.25s ease;
}
.cor-swiper .swiper-button-prev:hover,
.cor-swiper .swiper-button-next:hover {
  color: #0288d1;
  transform: scale(1.15);
}

/* Card lateral com sombra e borda mais suave */
.cor-card {
  padding: 3rem 2.5rem;
  border-radius: 2rem;
  background: #ffffffcc;
  border: 1px solid #b3e5fc;
  box-shadow: 0 12px 24px rgb(3 169 244 / 0.15);
  font-size: 1.125rem;
  line-height: 1.7;
  color: #1e293b;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 30px rgb(3 169 244 / 0.3);
}
.cor-card h6 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #01579b;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

/* Lista de diferenciais com ícones Bootstrap Icons */
.cor-card ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 2.5rem;
}
.cor-card ul li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1.25rem;
  color: #333f58;
  font-weight: 600;
}
.cor-card ul li::before {
  content: "\f00c"; /* Unicode do check do Bootstrap Icons */
  font-family: "Bootstrap Icons";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #0288d1;
  font-size: 1.3rem;
  line-height: 1;
}

/* Contato comercial estilizado */
.cor-card .mt-4 {
  border-top: 2px solid #81d4fa;
  padding-top: 1.5rem;
  color: #01579b;
  font-weight: 600;
}
.cor-card p {
  margin-bottom: 0.5rem;
}
.cor-card a {
  color: #0288d1;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}
.cor-card a:hover {
  color: #01579b;
  text-decoration: underline;
}
.cor-card i {
  color: #0288d1;
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

/* Responsividade aprimorada */

  .cor-subtitle {
    font-size: 1.1rem;
  }
  .cor-card {
    padding: 2rem 1.8rem;
    font-size: 1rem;
  }
  .cor-title {
    font-size: 2.25rem;
  }

@media (max-width: 480px) {
  #cor {
    padding: 3.5rem 1rem;
  }
  .cor-carousel-image {
    height: 220px;
  }
  .cor-card {
    padding: 1.5rem 1rem;
    font-size: 0.95rem;
  }
  .cor-title {
    font-size: 1.8rem;
  }
  .cor-subtitle {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .cor-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* Diminui um pouco o tamanho da fonte dos contatos para evitar cortes */
.cor-card .mt-4 > div {
  font-size: 0.75rem; /* diminui a fonte um pouco */
  white-space: nowrap; /* mantém o texto numa linha, para evitar que quebre */
  overflow: hidden;
  text-overflow: ellipsis; /* adiciona '...' se o texto ainda for maior que o espaço */
}

/* Ajuste específico no ícone para diminuir o recuo */
.cor-card .mt-4 i {
  margin-right: 0.3rem; /* diminui o espaço entre o ícone e o texto */
}
.cor-card p,
.cor-card ul {
  text-align: justify;
}