/* ==========================================================================
   Banda «Hablemos de tu proyecto» — plantilla del pie (1617)
   --------------------------------------------------------------------------
   Video de fondo bajo un velo azul al 71 %, el micrófono, la frase con la
   palabra que rota y el botón que abre el popup «Agendar cita».
   ========================================================================== */
.cid-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 200px;
  background-color: var(--azul);
  text-align: center;
}

.cid-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--azul);
  opacity: .71;
}

.cid-cta-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.cid-cta-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cid-cta-icono { padding-bottom: 7px; color: var(--blanco); }

.cid-cta-icono svg { width: 35px; height: 50px; }

.cid-cta-texto { font-size: 24px; line-height: 1.5; color: var(--blanco); }

.cid-cta-despues { font-size: 20px; }

.cid-animada {
  display: inline-block;
  color: var(--rojo);
  font-weight: 600;
  perspective: 300px;
}

/* fx10 de JetElements: cada letra entra girando sobre su eje X. */
.cid-letra {
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 0;
  animation: cid-letra-entra .5s cubic-bezier(.215, .61, .355, 1) forwards;
}

@keyframes cid-letra-entra {
  from { opacity: 0; transform: rotateX(-90deg) translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.cid-cta-titulo {
  color: var(--blanco);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.cid-cta-boton {
  margin-top: 50px;
  padding: 15px 35px;
  border-radius: 5px;
  background: var(--rojo);
  color: var(--blanco);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  transition: background .3s, color .3s;
}

.cid-cta-boton:hover,
.cid-cta-boton:focus { background: var(--blanco); color: var(--rojo); animation: cid-pulso .3s linear infinite alternate; }

/* «pulse-grow» de Elementor */
@keyframes cid-pulso { to { transform: scale(1.1); } }