/* CSS personalizado de los elementos de la página 10 («Home»), sacado de Elementor Pro. */

/* cec95f0 (icon) */
.miCirculo {
  width: auto; /* Ajusta automáticamente */
  height: auto; /* Ajusta automáticamente */
  max-width: 100px; /* Tamaño original */
  max-height: 100px; /* Tamaño original */
  transition: transform 0.3s ease; /* Transición suave */
}

.agrandar {
  transform: scale(1.5); /* Aumenta el tamaño del SVG */
}

/* c803db3 (html) */
/* Estilo del botón */
.ctaa {
  position: relative;
  margin: auto;
  padding: 5px 12px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  font-family: 'Sarabun', sans-serif; /* Aplicar la tipografía Sarabun */
}

/* Estilo del fondo del botón */
.ctaa:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50px;
  background: transparent; /* Fondo transparente */
  border: 2px solid white; /* Borde blanco delgado */
  width: 40px;
  height: 40px;
  transition: all 0.3s ease;
}

/* Estilo del texto dentro del botón */
.ctaa span {
  position: relative;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: white; /* Color blanco para el texto */
}

/* Estilo del enlace dentro del botón */
.ctaa a {
  text-decoration: none;
  color: inherit; /* Heredar color del span */
}

/* Estilo del SVG dentro del botón */
.ctaa svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: white; /* Color blanco para el SVG */
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

/* Estilo cuando se pasa el mouse sobre el botón */
.ctaa:hover:before {
  background: white; /* Fondo blanco al hacer hover */
  border: none; /* Quitar el borde al hacer hover */
  width: 100%;
}

.ctaa:hover span {
  color: black; /* Texto negro al hacer hover */
}

.ctaa:hover svg {
  stroke: black; /* Color del SVG negro al hacer hover */
  transform: translateX(0);
}

/* Estilo cuando se hace clic en el botón */
.ctaa:active {
  transform: scale(0.95);
}

/* 8d53167 (html) */
/* Estilo del botón */
.ctab {
  position: relative;
  margin: auto;
  padding: 2px 14px;
  transition: all 0.4s ease;
  border: none;
  background: none;
  font-family: 'Sarabun', sans-serif; /* Aplicar la tipografía Sarabun */
  display: inline-flex; /* Asegura que el botón se ajuste al contenido y pueda alinearse a la izquierda */
  align-items: center; /* Alinea el contenido del botón verticalmente */
}

/* Estilo del fondo del botón */
.ctab:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50px;
  background: transparent; /* Fondo transparente */
  border: 1px solid #27436F; /* Borde del círculo con el color especificado */
  width: 40px;
  height: 40px;
  transition: all 0.4s ease;
}

/* Estilo del texto dentro del botón */
.ctab span {
  position: relative;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #27436F; /* Color del texto con el color especificado */
}

/* Estilo del enlace dentro del botón */
.ctab a {
  text-decoration: none;
  color: inherit; /* Heredar color del span */
}

/* Estilo del SVG dentro del botón */
.ctab svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #27436F; /* Color del SVG con el color especificado */
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

/* Estilo cuando se pasa el mouse sobre el botón */
.ctab:hover:before {
  background: #27436F; /* Fondo del botón con el color especificado al hacer hover */
  border: none; /* Quitar el borde al hacer hover */
  width: 100%;
}

.ctab:hover span {
  color: white; /* Texto blanco al hacer hover */
}

.ctab:hover svg {
  stroke: white; /* Color del SVG blanco al hacer hover */
  transform: translateX(0);
}

/* Estilo cuando se hace clic en el botón */
.ctab:active {
  transform: scale(0.95);
}