/* ==================================================
   CTA Component (Global)
   Icon + arrow swap + elegant fill wipe
   ================================================== */

/* Wrapper base */
.c-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  text-decoration: none;
}

/* Texto */
.c-cta__text {
  white-space: nowrap;
}

/* --------------------------------------------------
   Icon block (cuadrado animado)
   -------------------------------------------------- */
.c-cta-icon {
  width: 1.75rem;
  height: 1.75rem;

  position: relative;
  overflow: hidden;

  display: grid;
  place-items: center;

  background-color: var(--primary);
  will-change: transform;
}

/* Capa de relleno (wipe desde abajo) */
.c-cta-icon__fill {
  position: absolute;
  inset: 0;
  background: var(--n-950);
  transform: translate3d(0, 110%, 0);
  will-change: transform;
  z-index: 0;
}

/* Flechas (capas A y B) */
.c-cta-icon__arrow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
  z-index: 1;
}

/* Flecha siempre blanca */
.c-cta-icon svg,
.c-cta-icon svg * {
  fill: var(--surface) !important;
  stroke: var(--surface) !important;
}

/* Tamaño del SVG */
.c-cta-icon svg {
  width: 0.62rem;
  height: 0.62rem;
  display: block;
}

/* --------------------------------------------------
   Icon only mode
   -------------------------------------------------- */
.c-cta.is-icon-only .c-cta__text {
  display: none;
}