/* ============================================================================
   COMPONENTES › BOTÓN
   ----------------------------------------------------------------------------
   Componente independiente: no sabe que vive dentro del hero. Por eso lo podés
   reutilizar en cualquier sección futura con solo poner class="boton".

   El hover elegante son 3 cosas sutiles a la vez, nunca un cambio brusco:
   se eleva apenas + gana un halo amarillo + un brillo diagonal lo cruza.
   ============================================================================ */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-acento);
  color: var(--color-negro);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 2px;
  text-decoration: none;
  overflow: hidden;                               /* recorta el brillo diagonal */
  transition: transform var(--transicion),
              box-shadow var(--transicion),
              background-color var(--transicion);
}

/* El brillo: una franja blanca inclinada que espera FUERA del botón
   (left:-120%) y al hacer hover lo cruza de lado a lado. */
.boton::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}

/* El mismo efecto se dispara con mouse Y con teclado (focus-visible):
   nadie queda afuera de la experiencia. */
.boton:hover,
.boton:focus-visible {
  transform: translateY(-3px);                    /* se eleva */
  background: #ffe600;                            /* amarillo un punto más vivo */
  box-shadow: 0 10px 28px var(--color-acento-suave);   /* halo */
}

.boton:hover::before { left: 120%; }              /* el brillo cruza */

.boton:active { transform: translateY(-1px); }    /* feedback al hacer click */