@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("https://cajarural.ruralvia.risa/sites/default/files/campanas/2024/En%20marcha/OpenSans-VariableFont_wdth,wght.ttf") format('ttf');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("https://cajarural.ruralvia.risa/sites/default/files/campanas/2024/En%20marcha/OpenSans-Italic-VariableFont_wdth%2Cwght.ttf") format('ttf');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  	--color-verdeoscuro: #052e29;
	--color-verdeclaro: #028161;
	--color-amarillo: #ffc90d;	
}

*{ 
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif; 
	font-optical-sizing: auto;
	transition: all 0.5s;
}

.f-light{ font-weight: 300; }
.f-bold{ font-weight: 700; }
h1, h2, h3, h4, h5, h6, p{ margin-bottom:0; line-height: 1.3em; }	

.t-gris{ font-size: 1.5rem; color:#b5b5b4; }
.t1-riesgo{ font-size: 1.5rem; }
.t2-riesgo{ font-size: 0.8rem; }
.borde-riesgo { border:solid 1px #989798; }

.bg01{ 
	background-color:var(--color-verdeoscuro);
	background-image: linear-gradient(0deg, rgba(4,45,41,1) 5%, rgba(4,45,41,1) 20%, rgba(4,45,41,0) 80%, rgba(4,45,41,1) 90%), url("img/bg-01.jpg");
	background-position: center;
	background-size: cover;
}

#sec1 h1 { color: white; font-size: 3rem; font-weight: 700; }
#sec1 p { color: white; font-size: 2rem; }
#sec1 .boton { display:block; background-color:#ffc800; border-radius:500px; text-decoration:none; }
#sec1 .boton p {  color:#052e29; }
#sec1 .logo { max-width: 260px; width: 70%;
}


.bg02{ 
	background-image: url("img/bg-02.jpg");
	background-position: center;
	background-size: cover;
}
#sec2 h2 { color: white; font-size: 2.5rem; font-weight: 700; }
#sec2 p { color: white; font-size: 1.5rem; }

#sec2 .placas{
	background-color: #052e29;
	color:white;
	border-radius: 500px;
}
#sec2 .placas span{
	border-radius: 500px;
  background-color: #028161;
  aspect-ratio: 1 / 1; 
	font-size:2rem;
	    width: 3rem;
}
#sec2 .placas p { font-size:1rem; width:90%; }
#sec2:before {
  content: "";
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background-image: linear-gradient(3.8deg, transparent 50%, #042d29 50%);
  background-size: 100% 150px;
}
#sec2:after {
  content: "";
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background-image: linear-gradient(4deg, #ffc90d 50%, transparent 50%);
  background-size: 100% 150px;
}

.bg03 { background-color: var(--color-amarillo); }
#sec3 h2 { color: #052e29; font-size: 2.5rem; font-weight: 700; }
#sec3 p { color: #052e29; font-size: 1.5rem; }
#sec3 img { width:60%; max-width: 320px; }
#sec3 .plaquetas { background-color:#028161; border-radius:25px; height: 100%; }
#sec3 h4 { background-color: #052e29; color:white; border-radius: 500px; display: inline-block!important; font-weight: 700; }
#sec3 .plaquetas  p { font-size:1rem; color:white; }
#sec3 .boton { background-color: var(--color-verdeoscuro); display: inline-block; border-radius: 500px; padding:15px 30px; text-decoration: none; color: var(--color-amarillo); font-weight: 700; }
#sec3 .boton:hover { background-color: var(--color-verdeclaro); color:white; }
#sec3 .boton img { height: 1rem; margin-left: 10px; margin-bottom: 3px; vertical-align: middle; width:auto; }
#sec3 .legales p { color:var(--color-verdeoscuro); font-size:1rem; text-align: center; }

.bg04a { background-color:white; }
.bg04b { background-color:#f6f6f6; }
#sec4 h3 { color: black; font-size: 2.5rem; font-weight: 700; }
#sec4 p { color: black; font-size: 1.5rem; }
#sec4 ul { list-style: "\2013  "; /* código Unicode para el guión */ padding-left: 1.3rem; color: var(--color-verdeclaro); }
#sec4 ul li { margin-bottom: 0.6rem; font-size:1.2rem; line-height:1.4rem; }
#sec4 img { max-width: 35%; }
#sec4 img.last { max-width: 100%; }
#sec4 .boton { background-color: var(--color-amarillo); display: inline-block; border-radius: 500px; padding:10px 20px; text-decoration: none; color: var(--color-verdeoscuro); font-weight: 700; }
#sec4 .boton:hover { background-color: var(--color-verdeclaro); color:white; }
#sec4 .boton img { height: 0.8rem; margin-left: 10px; margin-bottom: 3px; vertical-align: middle; }
#sec4 .legales p { color:black; font-size:1rem; text-align: center; }
#sec4 .legales a { color:black; font-size:1rem; text-decoration: none; font-weight: 500; }
#sec4 .burbujapadres { max-width: 100px; width: 25%; }
#sec4 .burbujapadres img { max-width: 100%; }

a:hover { transform: scale(0.95); }
a:hover img { transform: scale(0.95); }


.irarriba{ top: 85vh; /* ajusta este valor según sea necesario */ height: 0; }
.irarriba a { background-color: rgba(255,255,255,0.5); width: 50px; height: 50px; transition: all 0.5s; }
.irarriba a:hover{ background-color: rgba(255,255,255,0.85); }
.irarriba a img { transform: rotate(270deg); }



/*MEDIA QUERIES*/

@media (max-width: 768px) {
	* { font-size: 12px; }
	.border-top-0-md{ border-top: none; }
	#sec1 a img { width:100%; }
	#sec1 img { width:80%; }
	#sec2 img { width:60%; }
	#sec2:before {
	  height: 80px;
	  background-size: 100% 80px;
	}
	#sec2:after {
	  height: 80px;
	  background-size: 100% 80px;
	}
	#sec3 img { width:60%; }
	#sec3 p { font-size: 1.5rem; }
	#sec3 .boton img { width:auto; }
	#sec3 .legales p { font-size:0.8rem; }
	#sec4 .legales p { font-size:0.8rem; word-break: break-word; }
	#sec4 .legales a { font-size:0.8rem; word-break: break-word; }
	#sec4 .imgcuenta { margin-top:-20px }
	#sec4 .imgahorro { margin-top:-50px; }
	#sec4 .imgcarnet { margin-top:-30px; }
	#sec4 img.last { max-width: 30%; }
	#sec4 .burbujapadres { max-width: 80px; }
	
	.irarriba a { width: 40px; height: 40px; }
}


@media (min-width: 768px) {
	.border-end-0-md{ border-right: none; }
	
	#sec4 .col-md-fix { max-width: 200px; width: 25%; }
}


/*ANIMACION*/

.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1; 
  }
}