/* HERO SECTION */
.blog-hero {
	background-image: url("../img/blog_hero.png");
	background-position: center bottom;
	background-size: 100%;
	background-repeat: no-repeat;
	height: 600px;
	background-color:#E7FCFE;
	background-color: linear-gradient(45deg, rgba(231, 252, 254, 1) 0%, rgba(231, 240, 251, 1) 50%, rgba(255, 255, 255, 1) 100%);
}
.blog-hero:hover{
	-webkit-transition: all 1s ease-in;
	-moz-transition: all 1s ease-in;
	-ms-transition: all 1s ease-in;
	-o-transition: all 1s ease-in;
	transition: all 1s ease-in;
	background-size: 105%;
}
.blog-hero:not(:hover){
	-webkit-transition: all 1s ease-in;
	-moz-transition: all 1s ease-in;
	-ms-transition: all 1s ease-in;
	-o-transition: all 1s ease-in;
	transition: all 1s ease-in;
	background-size: 100%;

}
@media (max-width:760px){
	.blog-hero {
		background-image: url("../img/blog_hero_m.png");
		background-position: center;
		background-size: 100%;
	}
	.blog h2{
		font-size: 26px!important;
		max-width: 100%!important;
	}

}
.hero h1 span {
  color: var(--color-blue);
}

.hero-text {
  color: var(--color-gray);
  max-width: 640px;
}

.protittle{
	display:inline;
	background-color:#fff;
	color:#fff!important;
	height: 80px;
	width: 10px;
	border-radius: 10px;
	-webkit-box-shadow: -4px 0 0 0 #00a3ff;
	box-shadow: -4px 0 0 0 #00a3ff;
	margin-right: 20px;
}
.blog{
	background-color: #fff;
	margin-top: -60px;
	padding-bottom: 80px;
}
.cblog{
	border:1px solid #C6E5FF;
	border-radius: 10px;
	display: block;
	margin: 10px auto;
	overflow: hidden;
}
.lead{
  color:#aaa;
}

.card {
  position: relative; /* Importante para stretched-link */
  border: none;
  overflow: hidden;
  border-radius: 20px;
  min-height: 308px;
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card-pas{
  position: relative; /* Importante para stretched-link */
  border: none;
  overflow: hidden;
  border-radius: 20px;
  min-height: 184px;
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

.card-has-bg:before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
	background-size: 100%;
  filter: grayscale(30%);
  z-index: 0; /* Enviarlo al fondo */
}

.card-img-overlay {
  z-index: 1; /* Por encima del before */
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  background: linear-gradient(0deg, rgba(48,109,241,0.3) 0%, rgba(48,109,241,1) 100%);
}
.card-img-overlay:hover {
  background: linear-gradient(0deg, rgba(3,63,119,0.6) 30%, rgba(0,138,255,1) 100%);
}

/* Esto asegura que el link estirado esté por encima de todo */
.stretched-link::after {
    z-index: 2;
}
.principal{
	min-height:648px;
}
.principal-pas{
	min-height:384px;
}

/* Imagen debajo del botón */
.hero-img-container {
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-img {
  width: 100%;
  max-width: 800px;
  border-radius: 16px;
  position: absolute;
}
.bg-video{
  width: 100%;
  max-width: 341px;
}

/* ✨ Fade + Slide text animation */
.hero-typing {
  display: inline-block;
  position: relative;
  overflow: hidden;
  /*height: 1.2em;*/
}

.hero-typing-text {
  display: inline-block;
  color: var(--color-blue);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-typing-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pascard a h3{
	display: inline;
	color:#000;
	font-size: 22px;
	font-weight: 600;
}
.pascard a small{
	color: #999999;
	font-weight: 600;
	
}
@media (max-width: 991px) {
  .bg-video{
  width: 100%;
  max-width: 330px;
  }
}
@media (max-width: 767px) {
  .bg-video{
  width: 100%;
  max-width: 45%;
  }
}
.text-dark{
	color:#fff!important;
}
.blog h2{
	font-size: 46px;
	max-width: 70%;
	margin: 40px 0px 40px 0;
}
.blog h2 span{
	color:#306EF1;
}
.blog h3{
	font-weight: bolder;
	color:#306EF1;
}
.blog h3 span{
	color:#306EF1;
}
.blog p{
	color:#666;
}
.port_nota{
	border-radius: 20px;
}
.card-note {
    border-radius: 20px;
    border: 1px solid #e1e6f0;
    height: 100%; /* Para que todas midan lo mismo */
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
.card-note i{
	flex-shrink: 0;
	color:#fff;
	display: block;
	height: 40px;
	width: 40px;
	border-radius: 10px;
	text-align: center;
	padding-top: 5px;
	font-size: 20px;
	margin-bottom: 20px;
	background: #306EF1;
	background: -webkit-linear-gradient(bottom left, rgba(48, 110, 241, 1) 0%, rgba(73, 161, 248, 1) 100%);
	background: -o-linear-gradient(bottom left, rgba(48, 110, 241, 1) 0%, rgba(73, 161, 248, 1) 100%);
	background: linear-gradient(to top right, rgba(48, 110, 241, 1) 0%, rgba(73, 161, 248, 1) 100%);
}
.card-note h4{
	font-size: 16px;
}
.card-note p {
	font-size:12px;
	color:#7d8291;
}
.label-bnote{
	background-color: #00a3ff;
	display: block;
	padding: 10px 16px;
	border-radius: 20px;
	color:#fff;
	margin-right: 20px;
}
.label-bnote i{
	font-weight: bold;
	padding: 0 10px;
}
.blog-subt{
	font-weight: bolder;
	text-align: center;
	margin: 30px auto;
}
.blog ol {
  list-style: none;         /* Quitamos el número por defecto */
  counter-reset: blog-steps; /* Inicializamos el contador */
  padding-left: 0;
}

.blog li {
  counter-increment: blog-steps; /* Incrementamos el número en cada li */
  position: relative;
  padding-left: 50px;           /* Espacio para que el texto no toque el círculo */
  margin-bottom: 25px;          /* Separación entre puntos */
  line-height: 1.6;
}

/* Generar el círculo con el número */
.blog li::before {
  content: counter(blog-steps); /* Mostramos el número del contador */
  
  /* Diseño del círculo */
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;                 /* Tamaño del círculo */
  height: 42px;
  background-color: #007bff;   /* Color azul (puedes cambiarlo por tu tono exacto) */
  color: white;                /* Color del número */
  border-radius: 50%;          /* Lo hace circular */
  /* Centrado del número dentro del círculo */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.blog li strong {
  display: block;              /* El título resaltado irá en su propia línea o espacio */
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.consejo{
	background-color:#dff1fd;
	padding: 30px;
	border-radius: 20px;
	display: block;
	max-width: 70%;
	margin: 50px auto;
	border: 1px solid #b8e0ff;
}
.consejo h3{
	color:#646464;
	font-size: 20px;
}
.consejo p{
	color:#a1a1aa;
}
@media (max-width: 767px) {
	.consejo{max-width: 98%!important;}
}
.vblog{
	display:block;
	width: 98%;
	border-left:6px solid #00a3ff;
	padding: 20px 0px 20px 40px; 
}
.vblog .testimonial{
	font-size: 20px;
	font-style: italic;
}
.t-name{
	display: block;
	margin: 20px 0px 20px 0px;
	font-size: 18px;
	font-weight: bold;
}
.newsletter{
	display:block;
	margin: 40px auto;
	width: 60%;
}
.newsletter input{
	width: 100%;
	padding: 12px 20px;
	border-radius: 10px;
	border:1px solid #a1a1aa;
}
.exito{
	background-color: #fff;
	margin-top: -60px;
	padding-bottom: 80px;
}
.cblog{
	border:1px solid #C6E5FF;
	border-radius: 10px;
	display: block;
	margin: 10px auto;
	overflow: hidden;
}
.exito h2{
	font-size: 46px;
	max-width: 70%;
	margin: 40px 0px 40px 0;
}
.exito h2 span{
	color:#306EF1;
}
.exito h3{
	font-weight: bolder;
	color:#306EF1;
}
.exito h3 span{
	color:#306EF1;
}
.exito p{
	color:#666;
}
.exito-subt{
	font-weight: bolder;
	text-align: center;
	margin: 30px auto;
}
.exito ol {
  list-style: none;         /* Quitamos el número por defecto */
  counter-reset: blog-steps; /* Inicializamos el contador */
  padding-left: 0;
}

.exito li {
  counter-increment: blog-steps; /* Incrementamos el número en cada li */
  position: relative;
  padding-left: 50px;           /* Espacio para que el texto no toque el círculo */
  margin-bottom: 25px;          /* Separación entre puntos */
  line-height: 1.6;
}

/* Generar el círculo con el número */
.exito li::before {
  content: counter(blog-steps); /* Mostramos el número del contador */
  
  /* Diseño del círculo */
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;                 /* Tamaño del círculo */
  height: 42px;
  background-color: #007bff;   /* Color azul (puedes cambiarlo por tu tono exacto) */
  color: white;                /* Color del número */
  border-radius: 50%;          /* Lo hace circular */
  /* Centrado del número dentro del círculo */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.exito li strong {
  display: block;              /* El título resaltado irá en su propia línea o espacio */
  font-size: 1.2rem;
  margin-bottom: 10px;
}