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

/* bed1f59 (html) */
/* Estilo del botón */
.ctab {
  position: relative;
  margin: auto;
  padding: 5px 16px;
  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: 16px;
  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);
}

/* a43d40c (html) */
/* Estilo del botón */
.ctab {
  position: relative;
  margin: auto;
  padding: 5px 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);
}