/* =====================================================================
   RV25 Relojería · BOTONES
   ---------------------------------------------------------------------
   .boton          botón principal (azul noche)
   .boton-claro    variante arena, para la acción secundaria
   .boton-crema    crema, sobre foto oscura
   .boton-contorno solo borde crema, sobre foto oscura
   .boton-contorno-oscuro  solo borde oscuro, sobre fondo claro
   .boton-comprar  COMPRAR (WhatsApp): el botón principal de cada reloj
   .boton-comprar-claro  el mismo, en crema, sobre azul noche (portada)
   .boton-wa       botón que abre WhatsApp
   .boton-ancho    ocupa todo el ancho disponible
   .enlace-wa      enlace de texto con el ícono de WhatsApp (tarjetas)

   Regla de identidad: TODO lo que abre WhatsApp lleva su ícono, así el
   cliente reconoce el camino de compra en cualquier parte de la página.
   ===================================================================== */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--radio-pildora);
  background: var(--noche); color: var(--fondo);
  font: 600 16px/1 var(--letra); text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.boton:hover  { background: var(--noche-hover); }
.boton:active { transform: scale(.97); }

.boton-claro       { background: var(--arena-2); color: var(--tinta); }
.boton-claro:hover { background: var(--arena-hover); }

/* Sobre fotos oscuras (portada): crema lleno y solo contorno */
.boton-crema       { background: var(--fondo); color: var(--tinta); }
.boton-crema:hover { background: #FFFFFF; }
.boton-contorno       { background: transparent; color: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--fondo); }
.boton-contorno:hover { background: rgba(245, 239, 230, .12); }

/* Solo borde oscuro, sobre fondos claros (ficha: "Hacer una pregunta") */
.boton-contorno-oscuro       { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.boton-contorno-oscuro:hover { background: var(--tinta); color: var(--fondo); }

/* COMPRAR: el botón principal de cada reloj (tarjetas, portada, ficha).
   Más alto y con el ícono de WhatsApp en verde, para que resalte.
   .boton-comprar-claro: versión crema, sobre el azul noche de la portada. */
.boton-comprar {
  min-height: 54px;
  background: var(--noche); color: var(--fondo);
  font-size: 16px; letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(6, 26, 40, .18);
}
.boton-comprar .icono { color: var(--ok-vivo); }
.boton-comprar:hover  { background: var(--noche-hover); box-shadow: 0 8px 20px rgba(6, 26, 40, .24); }
.boton-comprar-claro       { background: var(--fondo); color: var(--tinta); box-shadow: none; }
.boton-comprar-claro:hover { background: #FFFFFF; box-shadow: none; }
.boton-comprar-claro .icono { color: #1E9E5A; }

.boton-wa    { background: var(--noche); }
.boton-ancho { width: 100%; }
.boton-chico { min-height: 40px; padding: 0 16px; font-size: 14px; }
.boton-chico .icono { width: 17px; height: 17px; }
.boton .icono { width: 20px; height: 20px; flex: none; }

/* Enlace de texto que abre WhatsApp: ícono verde + texto subrayado fino */
.enlace-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  font: 600 15px/1.2 var(--letra); color: var(--tinta);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--arena-hover);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.enlace-wa .icono { width: 18px; height: 18px; flex: none; color: var(--ok); }
.enlace-wa:hover  { color: var(--acento-texto); text-decoration-color: currentColor; }