/* ===== Footer ===== */
.footer{
  position: relative;
  overflow: visible;        /* para que pueda “subir” el degradado */
  border-radius: 0;         /* en Figma NO tiene bordes redondeados */
  margin-top: 0;
  color:#F2F0FF;
  padding: clamp(34px, 5vw, 48px) 0 clamp(18px, 3vw, 28px);
}

/* La “banda” morada que sube por detrás del CTA */
.footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0%;                      /* parte justo en el borde superior del footer */
  height: clamp(240px, 100vw, 520px);/* qué tanto sube (responsive) */
  pointer-events:none;
  z-index:-1;

  /* Gradiente con transparencia arriba para que se funda con el fondo del CTA */
  background:linear-gradient(180deg, #FFF 0%, #5F38CF 56.25%);
}



/* fade que sube al CTA (ajusta --lift si quieres más/menos) */
.footer__fade{
  --lift: 52%;                       /* cuánto invade el CTA */
  position:absolute; inset:0 0 auto 0;
  height: clamp(220px, 30vw, 430px);
  transform: translateY(calc(-1 * var(--lift)));
  pointer-events:none; z-index:0;
}

/* grid y proporciones */
.footer__grid{
  position:relative; z-index:1;
  display: flex;
  align-items:start;
  justify-content: space-between;
}

/* marca */
.footer__brand img{
	height: 32px;
	width:auto;
	display:block;
	margin-bottom: 14px;
}
.footer__brand-copy{
	margin:0 0 14px;
	max-width: 443px;
	color:#fff;
}
.footer__hr{
  height:1px; border:0; margin: 14px 0 10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.36) 18%,
    rgba(255,255,255,0) 100%);
}
.footer__legal{
  font-size:12px; color:#F1EFFF; opacity:.86;
}

/* columnas */
.footer__cols {
	gap: 70px;
	display: flex;
}
.footer__title{
	margin: 8px 0 12px;
	font-family: var(--font-family-body);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	color:#FFFFFF;
}
.footer__list{
	list-style:none; margin:0; padding:0;
	display:grid; gap: 6px;
}
.footer__list a{
	text-decoration:none;
	color: var(--primary--purple-extra-light, #E1DFFF);
	/* Body/Normal medium */
	font-family: var(--font-family-body);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.footer__list a:hover{ text-decoration: underline; }

/* redes */
.footer__social{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
}
.footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  transition: background .2s ease, transform .15s ease;
}

/* responsive */
@media (max-width: 980px){
  .footer__grid{ grid-template-columns: 1fr 1fr;
  display: grid;
  }
}
@media (max-width: 700px){
  .footer{ border-top-left-radius: 32px; border-top-right-radius: 32px; }
  .footer__grid{ grid-template-columns: 1fr;
    margin-bottom: 20px;
  }
  .footer__brand-copy{ max-width: none; }
  .footer::before {
    height: 250vw;
  }
  .footer__cols {
    display: grid;
    gap: 20px;
    margin-top: 14px;
  }
  .footer__social svg {
    width: 34px;
    height: 34px;
  }
}

/* responsive */
@media (max-width: 980px){
  .footer__grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px){
  .footer{
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
  }
  .footer__grid{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .footer__social{ margin-top: 6px; }
}