@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }

  .button--primary { background: var(--senal); color: var(--petroleo-hondo); }
  .button--primary:hover { background: #ffc61f; }

  .button--ghost { border-color: rgb(255 255 255 / .75); color: var(--blanco); }
  .button--ghost:hover { background: var(--blanco); color: var(--petroleo-hondo); border-color: var(--blanco); }

  .icon-arrow { flex: none; transition: translate var(--t-base) var(--ease); }
  .icon-arrow--back { rotate: 180deg; }
  a:hover > .icon-arrow:not(.icon-arrow--back),
  a:focus-visible > .icon-arrow:not(.icon-arrow--back) { translate: 0.4rem 0; }
  a:hover > .icon-arrow--back,
  a:focus-visible > .icon-arrow--back { translate: 0.4rem 0; }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.35rem;
    font-weight: 600;
    color: var(--petroleo);
    text-decoration: none;
    border-bottom: 2px solid var(--senal);
  }
  .text-link:hover { color: var(--petroleo-hondo); }
}