/* Paleta (ajuste se quiser) */
:root{
  --footer-bg-top: #eaf3fb;      /* gradiente topo */
  --footer-bg-bot: #f4f9ff;      /* gradiente base */
  --footer-title:  #083a63;      /* azul do título */
  --footer-text:   #3b4a5a;      /* texto secundário */
  --cta-color:     #083a63;      /* "Siga-nos" */
  --divider:       #f5a400;      /* laranja da barra */
  --icon-circle:   #0a6aa1;      /* fundo dos ícones */
  --icon-color:    #ffffff;      /* cor dos ícones */
}

/* Área do rodapé */
.cdp-footer{
  background: linear-gradient(180deg, var(--footer-bg-top), var(--footer-bg-bot));
  padding: 16px 0;
  width: 100%;
}

.cdp-footer__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Esquerda: logo + textos */
.cdp-footer__left{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.cdp-footer__logo{
  height: 54px;       /* ajuste conforme sua arte */
  width: auto;
}

.cdp-footer__text{
  line-height: 1.15;
}

.cdp-footer__title{
  margin: 0;
  font-size: 18px;
  color: var(--footer-title);
  font-weight: 700;
}

.cdp-footer__subtitle{
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--footer-text);
}

/* Direita: call + divisória + ícones */
.cdp-footer__right{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink: 0;
}

.cdp-footer__cta{
  font-weight: 700;
  color: var(--cta-color);
  white-space: nowrap;
}

.cdp-footer__divider{
  display:inline-block;
  width: 2px;
  height: 32px;
  background: var(--divider);
  border-radius: 2px;
}

/* Ícones circulares */
.cdp-footer__social{
  display:flex;
  align-items:center;
  gap:12px;
}

.cdp-social__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--icon-circle);
  text-decoration: none;
  transition: transform .15s ease;
}

.cdp-social__link:focus-visible{
  outline: 2px solid #1b90ff;
  outline-offset: 2px;
}

.cdp-social__link:hover{ transform: translateY(-1px); }

.cdp-social__icon{
  width: 18px;
  height: 18px;
  fill: var(--icon-color);
}

/* ===== Layout dos cards (responsivo) ===== */
.cards-cdp{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* ===== Card base ===== */
.card-cdp{
  --accent: #0a64b4;         /* cor da barra/topo e do ícone (variante muda) */
  --bg-top: #eaf3fb;         /* degradê do fundo (topo) */
  --bg-bot: #dfecf8;         /* degradê do fundo (base) */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: 22px 18px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Barra superior colorida */
.card-cdp::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:8px;
  background: var(--accent);
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}

/* Ícone (imagem acima do texto) */
.card__icon{
  width: 64px;               /* ajuste se suas imagens forem maiores/menores */
  height: 64px;
  object-fit: contain;
  margin: 10px 0 10px;
  /* se o ícone for SVG monocromático e quiser tingir: 
     filter: invert(28%) sepia(93%) saturate(1637%) hue-rotate(187deg) brightness(89%) contrast(91%);
     (remova se não precisar) */
}

/* Título */
.card__title{
  margin: 6px 0 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  color: #0a2942;            /* quase preto, como no print */
}

/* Hover/foco */
.card-cdp:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}
.card-cdp:focus-visible{
  outline: 3px solid #1b90ff;
  outline-offset: 2px;
  transform: translateY(-1px);
}

/* ===== Variantes de cor (azul/laranja) ===== */
.card--blue{
  --accent: #0a64b4;
  --bg-top: #eaf3fb;
  --bg-bot: #dfeaf6;
}
.card--orange{
  --accent: #ff8a00;
  --bg-top: #fff2e6;
  --bg-bot: #fee6cf;
}

/* ===== Ajustes responsivos ===== */
@media (max-width: 420px){
  .card__title{ font-size: 20px; }
  .card__icon{ width:56px; height:56px; }
}





/* Responsivo */
@media (max-width: 900px){
  .cdp-footer__container{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cdp-footer__right{ gap:12px; }
  .cdp-footer__divider{ height: 24px; }
}

@media (max-width: 540px){
  .cdp-footer__title{ font-size: 16px; }
  .cdp-footer__subtitle{ font-size: 13px; }
  .cdp-footer__cta{ font-size: 14px; }
  .cdp-social__link{ width: 34px; height: 34px; }
  .cdp-social__icon{ width: 17px; height: 17px; }
}