/* Botones del contenido con el mismo estilo que el botón "Contacto" del menú:
   píldora, Lato en negrita, sombra suave. Cada botón conserva su color. */

html body #Content a.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  border: 0 !important;
  font-family: "Lato", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35) !important;
  transition: filter .2s ease, translate .2s ease, box-shadow .2s ease;
  text-decoration: none !important;
}
/* Naranja de marca: sombra naranja, como el botón del menú */
html body #Content a.button[style*="ff9403"],
html body #Content a.button.boton {
  box-shadow: 0 6px 16px -6px rgba(255, 148, 3, .55) !important;
}
/* "translate" (y no "transform") para no pisar el centrado de los "Ver más" de la portada */
html body #Content a.button:hover {
  filter: brightness(.93);
  translate: 0 -1px;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35) !important;
}
html body #Content a.button[style*="ff9403"]:hover,
html body #Content a.button.boton:hover {
  box-shadow: 0 10px 20px -8px rgba(255, 148, 3, .6) !important;
}

/* Texto e icono dentro del botón */
html body #Content a.button .button_label {
  float: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}
html body #Content a.button .button_icon {
  float: none !important;
  position: static !important;
  order: 2;                       /* la flecha, a la derecha del texto */
  margin-left: 8px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}
html body #Content a.button .button_icon i { color: inherit !important; font-size: .85em; line-height: 1 !important; }

/* Tamaños: los grandes como el botón del menú, algo mayores */
html body #Content a.button.button_size_3,
html body #Content a.button.button_size_4 {
  height: 52px;
  padding: 0 34px !important;
  font-size: 18px !important;
}
/* "Ver más" de las tarjetas: un poco más grandes que antes (27px -> 38px) */
html body #Content a.button.button_size_2 {
  height: 38px;
  padding: 0 22px !important;
  font-size: 15.5px !important;
}
html body #Content a.button .button_label { white-space: nowrap; }
