/* Botones CTA — ver "System" en Figma (node 1:38 / 3005:2952) */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cta-gap);
  padding: var(--cta-padding-y) var(--cta-padding-x);
  border-radius: var(--radius-cta);
  border: none;
  cursor: pointer;
  font-family: var(--font-cta);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: var(--color-blanco);
  text-decoration: none;
  white-space: nowrap;
  /*
    `width: fit-content` es la salvaguarda clave: en Figma el CTA siempre es
    `shrink-0` (se ajusta a su texto). En CSS, un .cta dentro de un contenedor
    flex-column con el `align-items: stretch` por defecto se estiraba a todo el
    ancho — ése era el bug de "mal tamaño de botón" repetido en varias
    secciones. Con fit-content el ancho ya no depende del estiramiento, y
    `align-items: center` del padre sigue funcionando para centrarlo.
  */
  width: fit-content;
  max-width: 100%;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* CTA 1: fondo secundario por defecto, primario al hover */
.cta--1 {
  background-color: var(--color-secundario);
}
.cta--1:hover,
.cta--1:focus-visible {
  background-color: var(--color-primario);
}

/* CTA 2: fondo primario por defecto, secundario al hover */
.cta--2 {
  background-color: var(--color-primario);
}
.cta--2:hover,
.cta--2:focus-visible {
  background-color: var(--color-secundario);
}

/* En anchos reducidos el padding de 64px deja los botones sin espacio para el
   texto; se compacta sin cambiar la forma. */
@media (max-width: 767px) {
  .cta {
    padding: 16px 32px;
    gap: 16px;
    white-space: normal;
    text-align: center;
  }
}