/* Tarjetas de producto de la portada: "Ver más" pasa de botón naranja a enlace discreto
   en el color de cada producto, y toda la tarjeta se puede pulsar (productos.js pone --card). */

html body #Content .producto {
  --card: #229896;
  --card-text: color-mix(in srgb, var(--card) 78%, #000);  /* algo más oscuro: se lee mejor (amarillo, verde) */
  border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease;
}
html body #Content .producto.hm-clickable { cursor: pointer; }
html body #Content .producto.hm-clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(20, 40, 40, .35);
}

/* Enlace "Ver más →" */
html body #Content .producto a.button.boton,
html body #Content .producto a.button.boton:hover {
  background: transparent !important;
  box-shadow: none !important;
  filter: none;
  translate: none;
  height: auto;
  padding: 6px 4px !important;
  color: var(--card-text) !important;
  font-size: 16px !important;
  font-weight: 700;
}
html body #Content .producto a.button.boton .button_label {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 3px !important;
  transition: background-size .25s ease;
}
html body #Content .producto a.button.boton .button_icon { margin-left: 6px; transition: transform .25s ease; }
/* Al pasar por la tarjeta: subrayado y flecha que avanza */
html body #Content .producto:hover a.button.boton .button_label { background-size: 100% 2px; }
html body #Content .producto:hover a.button.boton .button_icon { transform: translateX(4px); }
html body #Content .producto a.button.boton:focus-visible { outline: 2px solid var(--card-text); outline-offset: 4px; border-radius: 6px !important; }