/* ==========================================================
   boton.css — Botones reutilizables en todo el sitio
   Uso: <a class="boton boton--primario">...</a>
   ========================================================== */

   .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--espacio-1) var(--espacio-4);
    border: 1px solid transparent;
    border-radius: var(--radio);
    font: inherit;
    font-weight: var(--peso-normal);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion),
      border-color var(--transicion);
  }
  
  /* Acción principal: cotizar, enviar */
  .boton--primario {
    background: var(--color-acento-oscuro);
    color: #ffffff;
  }
  
  .boton--primario:hover {
    background: var(--color-acento);
    color: var(--color-fondo);
  }
  
  /* Acción secundaria: explorar */
  .boton--secundario {
    background: transparent;
    border-color: var(--color-borde);
    color: var(--color-texto);
  }
  
  .boton--secundario:hover {
    border-color: var(--color-acento);
    color: var(--color-acento);
  }