body {
  font-family: Helvetica, Roboto, Arial, sans-serif;
}

.u-section-1 {min-height: 110px;}

.u-section-1 .u-layout-wrap-1 {
	margin-top: 0;
	margin-bottom: 0;
}

.u-section-1 .u-layout-cell-1 {
	min-height: 110px;
	background-image: none;
}

.u-section-1 .u-container-layout-1 {padding: 0;}

.u-section-1 .u-image-1 {
	width: 200px;
	height: auto;
	margin: 27px auto 0 24px;
}

.u-section-1 .u-image-2 {
	min-height: 110px;
	background-image: url("images/header-top.png");
	background-position: 50% 50%;
}

.u-section-1 .u-container-layout-2 {padding: 0;}

@media (max-width: 1199px) {
	.u-section-1 {min-height: 72px;}
	.u-section-1 .u-layout-cell-1 {min-height: 91px;}
	.u-section-1 .u-image-2 {min-height: 91px;}
}

@media (max-width: 991px) {
	.u-section-1 {min-height: 55px;}
	.u-section-1 .u-layout-wrap-1 {position: relative;}
	.u-section-1 .u-layout-cell-1 {min-height: 70px;}
	.u-section-1 .u-image-2 {min-height: 70px;}
}

@media (max-width: 767px) {
	.u-section-1 {min-height: 166px;}
	.u-section-1 .u-layout-cell-1 {min-height: 105px;}
	.u-section-1 .u-image-2 {min-height: 105px;}
}

@media (max-width: 575px) {
	.u-section-1 {min-height: 104px;}
	.u-section-1 .u-layout-cell-1 {min-height: 66px;}
	.u-section-1 .u-image-2 {min-height: 66px;}
}


.topmenu {z-index: 999;}

.bloque-transparente {
	background-position: right !important;
    background-size: auto 100% !important;
	background-repeat: repeat;
}


p, h1, h2, h3, h4, h5, h6, a, span, ul li ol{font-family: Helvetica, Roboto, Arial, sans-serif; color: rgba(45, 69, 86);}


p span, p{

}

h2, h2 span, h2 p {
    font-size: 40px !important;
    line-height: 60px !important;
    color: #597EB3 !important;
	font-family: Helvetica, Roboto, Arial, sans-serif;
}

h2 {
    padding-bottom: 20px !important;
    background-repeat: no-repeat;
    background-position: bottom center;
    display: block;
}

.responsive-off{display: inherit;}
.responsive-on{display: none;}

p {color: rgba(45, 69, 86); padding-bottom: 20px;}
ol {color: rgba(45, 69, 86);}
ol li::marker {
  color: #597EB3;
  font-weight: bold;
}
li {color: rgba(45, 69, 86); margin-bottom: 30px; line-height: 20px;}
li li {margin-top: 10px; padding-bottom: 0 !important; margin-bottom: 0;}
	
@media (max-width: 767px) {
	.responsive-off, .topmenu{display: none;}
	.responsive-on{display:inherit;}
}


 * {
      box-sizing: border-box;
    }

.container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px; 
	margin: 0 10%;
}

.columna {
	flex: 1 1 100%; 
	box-sizing: border-box;
	padding: 10px;
}

/* A partir de 768px dos columnas */
@media (min-width: 768px) {
	.columna {flex: 1 1 50%;}
}

.introduccion {
	padding: 2em 0;
	background-color: #E3EFF0;
	background-image: url("images/nino-mochila.png"), url("images/nube-2-blanco.png");
	background-repeat: no-repeat;
	background-position: bottom calc(20px) right 20%, top calc(20px) right 2%;
}
.introduccion p{margin-right:10%; padding-bottom: 20px;}
.fondo-nubes {padding: 2em 0; background-image: url("images/bck-section-2.jpg"); background-size: 100%; background-repeat:no-repeat;}
.gris {background-color: #fafafa;}
.lugar {color: #698ac2; font-weight: bold;}
.donde {font-size: 1.5em; font-weight: bold; line-height: 25px;}
/*.importancia {background-image: url("images/nina.png"); background-repeat: no-repeat; background-position: right 5px bottom 5px; background-size: 25%;}
.importancia p{margin-right: 25%;}*/
.fondo-azul {background-color: #E3EFF0;}
.pasos {margin-top:20px; margin-left:10px; justify-content: normal !important;}





.izquierda {float:left; width: 60%;}
.derecha {width: 20%; padding-left: 6em;}
.menores{width: 40%; padding-left: 0; padding-top: 8em;}
.derecha.menores > img{width: 450px;}
.derecha img{width: 300px;}

/* Estilos móviles: apilar columnas */
@media (max-width: 768px) {
  .izquierda, .derecha {
    float: none;         /* quita el float */
    width: 100%;         /* ocupan todo el ancho */
    padding-left: 0;     /* quitar padding que podía romper layout */
  }
  .derecha.menores > img{width: 360px !important;}
  .menores {padding-top: 0;}
  .derecha img{width: 360px;}
  .derecha {padding-top: 0;}
}

.lista-compacta li {
  line-height: 1.3;
  margin-bottom: 4px;
}
.lista-compacta {margin-bottom: 40px !important;}
.estrecho {padding: 0 0 0 8%;}
.estrecho-d {padding: 0 8% 0 0;}
.titulo-lista {font-size: 1.5em; padding-bottom: 0 !important;}

@media (max-width: 768px) {
	.novedades {background-image: none;}
	.pasos{background-image: none;}
	ol {margin: 0 4%;}
	.estrecho-d {padding: 0 0 0 8%;}
	.columns80 > div {flex: 0 0 100% !important;}
	.fila-dos-columnas {gap:0 !important;}
}

.columns {
  display: flex;
  gap: 20px;
}

.columns > div {
  flex: 1; 
}

.columns80 {display: flex;}

.columns80 > div {flex: 0 0 80%;}

.imagen-general {
  text-align: center; /* centra la imagen dentro del div */
  margin: 20px auto 0 auto; /* margen superior de 20px y centrado horizontal */
  max-width: 90%; /* evita que el div sea demasiado ancho en móviles */
}

.imagen-general img {
  width: 100%;      /* la imagen ocupa todo el ancho del div */
  max-width: 500px; /* no crecerá más de 500px */
  height: auto;     /* mantiene la proporción */
  display: block;   /* evita espacios extra debajo de la imagen */
}

@media (max-width: 768px) { /* pantallas menores a 768px */
  .imagen-nina img {
    display: none;
  }
}

@media (max-width: 768px) {
  .columns {
    flex-direction: column;
  }
}

.bloque-con-imagen {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

.bloque-con-imagen img {
	width: 120px;
	object-fit: cover;
	flex-shrink: 0;
}

.bloque-con-imagen .texto {flex: 1;	min-width: 250px;}

.titulo-con-icono {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 4vw;
	flex-wrap: wrap;
	justify-content: flex-start;
	text-align: left;
	font-weight: 500;
}

.titulo-con-icono .icono {height: 1em; width: auto;}

.fila-dos-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

@media (max-width: 768px) {
.fila-dos-columnas img{margin: 0 4%;}
.fila-dos-columnas p{margin: 0 4%;}
.two-columns-t ul {padding: 0 1em !important; width: 100% !important;}
.two-columns-p ul {padding: 0 1em !important; width: 100% !important;}
.two-columns-t {flex: 0 0 100% !important;}
.two-columns-p {flex: 0 0 100% !important;}
.pasos {margin-left: 0px !important;}
li {line-height: 25px;}
#top > section > section > section > div > div > div.two-columns.novedades > ol > li {margin-right: 8%;}
#top > section:nth-child(2) > section > section:nth-child(3) > div > div > div.two-columns-t.fondo-azul {}
}

.fila-dos-columnas > div {
  flex: 1 1 calc(50% - 15px); 
}

.fila-dos-columnas-especial {
  display: flex;
  width: 100%;
  gap: 20px;
}

.fila-dos-columnas-especial .columna-lista {
  flex: 1;
}

.fila-dos-columnas-especial {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.fila-dos-columnas-especial .columna-imagen img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .fila-dos-columnas-especial {
    flex-direction: column;
    align-items: center;
  }

  .fila-dos-columnas-especial .columna-lista,
  .fila-dos-columnas-especial .columna-imagen {
    width: 100%;
    margin: 0;
  }

  .fila-dos-columnas-especial .columna-imagen img {
    margin-left: 0;
    margin-top: 15px;
  }
}

.two-columns {
  flex: 0 0 calc((100% - 30px) / 2); 
  display: flex;
  flex-direction: column;
  text-align: left;
}

.two-columns-t {
  flex: 0 0 calc((100% - 30px) / 2); 
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid #ddd;         
  border-radius: 30px;            
  box-shadow: 0 4px 8px rgba(0,0,0,0.08); 
  padding: 20px;                   
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.two-columns-t:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.two-columns-t h3 {
	background-color: #D56966;
  color: #fff;
  padding: 15px;
  border-radius: 30px;
  margin-bottom: 30px;
}
.two-columns-t ul {padding: 0 2em;}

.two-columns-p {
  display: flex;
flex-wrap: wrap;    
  align-items: flex-start; 
  text-align: left;
  border: 1px solid #ddd;         
  border-radius: 30px;            
  box-shadow: 0 4px 8px rgba(0,0,0,0.08); 
  padding: 20px;                   
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 20px;
}


.two-columns-p:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.two-columns-p h3 {
	background-color: #D56966;
  color: #fff;
  padding: 15px;
  border-radius: 30px;
  margin-bottom: 30px;
}
.two-columns-p ul {padding: 0 2em; width: 100%}


.contenedor-botones {
  display: flex;
  flex-direction: column;
  gap: 10px; 
}
.boton-folletos {
  padding: 15px;
  border-radius: 12px;}
  
@media (max-width: 768px) {.boton-folletos {text-align: center;}}
  
.boton-folletos a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #D56966;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 5px;
  text-align: center;
  width: 45%
}
.boton-folletos a:hover {text-decoration:underline;}

.parrafo-resaltado {
	background-color: #E0F3FA;
	color: #597EB3;
	padding: 15px;
	border-radius: 12px;
	font-size: 1.5em;
	width: fit-content;
	margin: 0 auto;
	text-align: center; width: 100%;
font-weight: bold;}
	

.imagenes-responsivas {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 7%;
  margin: 15px 0;
}

.imagenes-responsivas img {
  max-width: 100%;
  height: auto;
}


@media (max-width: 768px) {
  .imagenes-responsivas {
    flex-direction: column;
    align-items: center;
    gap: 15px;
	padding: 0; 	
  }
}


.banner-slider {
	position: relative;
	z-index: 1;
	overflow: hidden;
	max-width: 100%;
	margin-bottom: 20px;
}

.slider-container {
	position: relative;
	width: 100%;
}

.slide {display: none;width: 100%;}

.slide img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.slide.active {display: block;}

@keyframes fadeEffect {
  from {opacity: 0.4;}
  to {opacity: 1;}
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 1rem;
  color: white;
  font-weight: bold;
  font-size: 2rem;
  background-color: rgba(0,0,0,0.3);
  border-radius: 50%;
  user-select: none;
  z-index: 10;
}

.prev {left: 10px;}
.next {right: 10px;}


@keyframes fadeEffect {
  from { opacity: 0.4 }
  to { opacity: 1 }
}


/* Responsive */
@media (max-width: 1024px) { /*tablet*/
  .three-columns {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}

@media (max-width: 600px) { /*movil*/
  .three-columns {flex: 0 0 100%; padding-bottom: 2rem; border-bottom: 1px solid #000; background-color: #eee; margin-bottom: 1.2rem;}
  .inicio {font-size: 1.2rem; margin: 5%;}
}

.contenedor {
	margin: 0 20%;
	line-height: 35px;
	padding: 20px 0;
	display: flex;
	flex-wrap: wrap;
}   


.fila {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px;
}

.columna {
  flex: 1 1 calc(50% - 20px);
  padding: 20px;
  display: flex;
  gap: 15px;
  flex-direction: column;
align-items: stretch;
}  
.columna-tfnos {
  flex: 1 1 calc(33.333% - 20px);
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.columna img {max-width: 100%;height: auto;}

.boton-img {
	width: 70%;
	height: auto;
	display: block;
	margin-left: auto;
}

.columna .texto {text-align: left;}
.texto {flex: 1; font-size: 28px;}

@media (max-width: 768px) {
	.contenedor {margin: 0 4%;}
    .columna {flex: 1 1 100%;}
	.boton-img {width: 100%;}
	h2 {font-size: 2rem !important; line-height: 2.2rem !important;}
	.columna .texto {font-size: 18px;}
	.introduccion p {margin-right: 0;}
	.introduccion {
    padding: 2em 4%;
    background-color: #E3EFF0;
    background-image: url(images/nube-2-blanco.png);
    background-repeat: no-repeat;
    background-position: top calc(20px) right 2%;}
}

.flecha-subir {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #333;
  color: white;
  text-decoration: none;
  font-size: 24px;
  padding: 12px 16px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1000;
}

.flecha-subir.visible {
  opacity: 0.7;
  pointer-events: auto;
}

.flecha-subir:hover {
  opacity: 1;
}
.copyright {color: #fff; text-align: center; margin-top: -30px;}

.mas-vale {display: flex; justify-content: center; align-items: center; padding: 2% 7%;}

@media (max-width: 768px) {.mas-vale img{width:100%;}