@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Karantina&family=Poppins:wght@400;700&display=swap');


 * {
    Margin :0 ;
    padding: 0;
    Border: 0 ;
    box-sizing: border-box;
}

/*GENERAL*/


body{
    font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal;
    text-wrap: pretty;
    color: white;
}

header,
main,
footer {
    background-color: rgb(22,33,91)
}



a {
    text-decoration: none;
    font-weight: bold;
    color: white;
  }

  ul,
  ol {
    list-style: none;}

h1 {
    font-family: "Karantina", system-ui;
    font-weight: 400;
    font-style: normal;
}

.encuestas
h4 {
  color: #A3A9F5;
  line-height: 1.1;
   text-wrap: balance;
}



/*HEADER*/
header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    padding-bottom: .5em;
    border-block-end: solid 4px #E75526;
}

.logo {
   padding: 1rem;
   width: 100%;
   height: auto;  
   max-width: 100%;
   text-align: center;
}

 .logo img{
    width: 150px;
    height: auto; 
 }


 .menu nav ul {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-wrap: wrap;
}

.menu nav ul a {
    text-transform: uppercase;
    font-weight: 400;
    padding: .8rem;
    font-size: .9rem;
    text-decoration: underline;
}

.menu nav ul a:hover{
    background-color: #E75526;
    
}


/*SECCION 1, MAIN*/


#fotomain {
    position: relative;
    text-align: center;
}



#fotomain img {
    width: 100%; 
    height: auto; 
    max-width: 100%;
    opacity: 80%;
}

#fotomain h1, 
#fotomain h2, 
#fotomain a{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#fotomain h1 {
    top: 7%; 
    text-shadow: 0 0 .5em rgb(24, 23, 23);
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /*line-height: -10rem; NO FUNCIONA */
}

#fotomain h1 span {
    display: block;
}

#fotomain h2 {
    top: 48%;
    font-size: .8rem;
    font-weight: 400;
    text-shadow: 0 0 .7em rgb(24, 23, 23);
}

#fotomain h2 span {
    display: block;
} /*Quise ponerlo con br y no me salió*/

#fotomain a {
    top: 80%; 
    background-color: #E75526;
    padding: .8em;
    padding-left: 2em;
    padding-right: 2em;
    border-radius: .5rem;
    font-size: .6rem;
    text-transform: uppercase;
}

#fotomain a:hover {
    background-color: #e29c85;
    color: #0D0D0D;
}



/*SECCION 2, MAIN*/

.seccion2{
  background-color:#D9D9D9;
  color:rgb(22,33,91);
}
.bajada{
    text-align: left;
    margin: 0 auto; /* Esto centra horizontalmente */
    max-width: 800px; /* Ajusta el ancho máximo según tu diseño */
    box-shadow: 0 4px 8px rgb(0 0 0 / 83%);
}
.bajada span{
  color: rgb(241, 175, 89);
}
.seccion2 h3{
  background-color: rgb(22,33,91);
  color: white;
  font-size: .9rem;
  text-transform: uppercase;
  font-weight: 400;
  padding: .6rem .5rem;
  border-block-end: solid 4px rgb(255, 0, 0); /*QUE QUEDE MAS ALTO*/
}
.seccion2 h6{
  padding-left: 1rem;
  padding-top: 1rem;
  font-style: italic;
  font-size: medium;
}
.noticias {
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
}


.noticiaschicas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.piefecha {
  display: block;
  color: #858585;
  text-align: left;
  margin-top: 1.5rem;
  font-size: .7rem;
}


/*noticia 1*/

.noticia1 {
  gap: 1rem;
  padding-bottom: 1rem;
  padding-left: .5rem;
  padding-right: .5rem;
}


.noticia1 h4{
  text-transform: uppercase;
  border-block-end: solid 1px rgb(22,33,91);
}

.textoactualidad1 p{
  font-size: .9rem;
  text-align: left;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.noticia1 a{
  background-color: #E75526;
  padding: .8em 1em;
  border-radius: .5rem;
  font-size: .6rem;
  text-transform: uppercase;
}

.noticia1 a:hover {
  background-color: #e29c85;
  color: #0D0D0D;
}

.fotoactualidad img {
  width: 100%; 
  height: auto;
  max-width: 100%;
  border-radius: .8rem;
  padding: .5rem .5rem;
}





/*noticia chicas*/

.noticia2 img {
 height: auto;
 max-width: 100%;
 border-radius: .8rem;
}

.noticia2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding:.8rem;
  text-align: left;
}

.textoactualidad2 h4{
  font-size: .9rem;
  text-transform: uppercase;
  text-decoration: underline;
}

.textoactualidad2 p {
    font-size: .8rem;
    padding-bottom: .5rem;
}



.textoactualidad2 p span {
  display: block;
  color: #858585;
  font-size: .7rem;
  padding-top: 1.5rem;
}


.textoactualidad2 a {
  background-color: #E75526;
  padding: .8em 1em;
  border-radius: .5rem;
  font-size: .6rem;
  text-transform: uppercase;
}

.textoactualidad2 a:hover {
  background-color: #e29c85;
  color: #0D0D0D;
}



/*SECCION 3, MAIN*/

.sabiasque {
    background-color: #E75526;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
}

.sabiasque h2{
  font-family: "Karantina", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
  text-transform: uppercase;
 }

.sabiasque p {
   font-size: .8rem;
}
.sabiasque p span {
  font-weight: bold;
}

#slider {
  margin: 0 auto;
  width: 800px;
  max-width: 100%;
  text-align: center;
}
#slider input[type=radio] {
  display: none;
}
#slider label {
  cursor:pointer;
  text-decoration: none;
}
#slides {
  position: relative;
  z-index: 1;
}
#overflow {
  width: 100%;
  overflow: hidden;
}
#slide1:checked ~ #slides .inner {
  margin-left: 0;
}
#slide2:checked ~ #slides .inner {
  margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
  margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
  margin-left: -300%;
}
#slide5:checked ~ #slides .inner {
  margin-left: -400%;
}
#slide6:checked ~ #slides .inner {
  margin-left: -500%;
}
#slide7:checked ~ #slides .inner {
  margin-left: -600%;
}
#slides .inner {
  transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  width: 700%;
  line-height: 0;
}
#slides .slide {
  width: 14.2857%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  color: #fff;
  text-align: center;
}
#slides .slide_1,
#slides .slide_2,
#slides .slide_3,
#slides .slide_4,
#slides .slide_5,
#slides .slide_6,
#slides .slide_7 {
  background: #E75526;
}
#controls {
  margin: -150px 0 0 0;
  width: 100%;
  height: 50px;
  z-index: 3;
  position: relative;
}
#controls label {
  transition: opacity 0.2s ease-out;
  display: none;
  width: 50px;
  height: 50px;
  opacity: .4;
}
#controls label:hover {
  opacity: 1;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(6),
#slide6:checked ~ #controls label:nth-child(7),
#slide7:checked ~ #controls label:nth-child(1) {
  background: url(https://cdn-icons-png.freepik.com/512/152/152418.png?ga=GA1.1.1524798888.1666815007) no-repeat;
  float:right;
  margin: 0 -50px 0 0;
  display: block;
  background-size: 50px;
}
#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(7),
#slide3:checked ~ #controls label:nth-last-child(6),
#slide4:checked ~ #controls label:nth-last-child(5),
#slide5:checked ~ #controls label:nth-last-child(4),
#slide6:checked ~ #controls label:nth-last-child(3),
#slide7:checked ~ #controls label:nth-last-child(2) {
  background: url(https://cdn-icons-png.freepik.com/512/152/152417.png?ga=GA1.1.1524798888.1666815007) no-repeat;
  float:left;
  margin: 0 0 0 -50px;
  display: block;
  background-size: 50px;
}
#bullets {
  margin: 7em 0 0;
  text-align: center;
}
#bullets label {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #ffffff47;
  margin: 0 10px;
}
#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4),
#slide5:checked ~ #bullets label:nth-child(5),
#slide6:checked ~ #bullets label:nth-child(6),
#slide7:checked ~ #bullets label:nth-child(7) {
  background: #ffffff;
}
@media screen and (max-width: 900px) {
  #slide1:checked ~ #controls label:nth-child(2),
  #slide2:checked ~ #controls label:nth-child(3),
  #slide3:checked ~ #controls label:nth-child(4),
  #slide4:checked ~ #controls label:nth-child(5),
  #slide5:checked ~ #controls label:nth-child(6),
  #slide6:checked ~ #controls label:nth-child(7),
  #slide7:checked ~ #controls label:nth-child(1),
  #slide1:checked ~ #controls label:nth-last-child(1),
  #slide2:checked ~ #controls label:nth-last-child(7),
  #slide3:checked ~ #controls label:nth-last-child(6),
  #slide4:checked ~ #controls label:nth-last-child(5),
  #slide5:checked ~ #controls label:nth-last-child(4),
  #slide6:checked ~ #controls label:nth-last-child(3),
  #slide7:checked ~ #controls label:nth-last-child(2) {
    margin: 0;
  }
  #slides {
    max-width: calc(100% - 140px);
    margin: 0 auto;
  }
}

#slides p {
  margin: 0.5rem 0;
  line-height: 1.5;
}
.sabiasque h1 {
  font-size: 3.5rem;
  text-transform: uppercase;
  padding-bottom: 4rem;
}

h1 {
  font-family: "Karantina", system-ui;
  font-weight: 400;
  font-style: normal;
}

.sabiasque p span {
  font-weight: bold;
}

.animated-button {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px 40px;
  border: 4px solid;
  border-color: transparent;
  font-size: 12px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: #FF5722;
  box-shadow: 0 0 0 2px #FF5722;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: #FF5722;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #FF5722;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: white;
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: white;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #FF5722;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}



/*SECCION 4, MAIN*/

/*tabs*/
.icono1 img,
.icono3 img, 
.icono2 img{
    width: 70px;
    height: auto;
}

.icono1,
.icono2,
.icono3 {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   align-items: center;
   padding: .5em;
   text-align: center;
   font-weight: 700;
   font-size: .8em;;
}

.page-content {
	max-width: auto; 
	background: rgb(22,33,91);
}

a { 
	transition: all 0.3s;
}


.tabbed {
	overflow-x: hidden;
	border-bottom: 1px solid #ccc;
}

.tabbed [type="radio"] {
	display: none;
}

.tabs {
	display: flex;
  flex-wrap: wrap;
	align-items: stretch;
	list-style: none;
	padding: 0;
	border-bottom: 2px solid #E75526;
  justify-content: space-around
}

.tab > label {
	display: block;
	margin-bottom: -1px;
	padding: 12px 15px;
	color: white;
	font-size: .65em; 
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;	
	transition: all 0.3s;
}
.tab:hover label {
	border-top-color: #333;
	color: #b3b3b3;
}

.tab-content {
	display: none;
	color: #858585;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
	border-bottom-color: #E75526;
	border-top-color: #E75526;
	background: #E75526;
	color: white;
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
	display: block;
}

/*testimonios*/

.cita {
    background-color: rgba(217, 217, 217, 1); 
    border: 1px solid #ccc; 
    position: relative;
    font-size: 16px;
    line-height: 1.5; 
    color: rgb(22,33,91); 
    padding: 2rem;
    padding-top: 4.5rem;
    padding-bottom: 2rem;
}

.cita span {
    font-weight: bold; 
    color: rgb(22,33,91);
}

.finalcita {
 font-size: .8em;
 margin-top: 1.5rem;
}

.finalcita span {
    display: block;
    font-weight: 400;
}

.texto{
    border-left: 5px solid #f16824;
    padding: 1rem;
    font-size: 14px;
}

.fotocita img{
   margin-top: 1.5em;
    width: 100%;
    height: auto;
    margin-bottom: .4rem;
}
.tab-content a{
  background-color: #E75526;
  padding: .8em 1em;
  border-radius: .5rem;
  font-size: .6rem;
  text-transform: uppercase;
}
/*universidades*/

.mapauniversidades img{
  width: 100%;
  height: auto;
  margin-bottom: 1em;
  margin-top: 1em;
}

.tabuniversidades h4 {
  font-size: 1.2em;
  text-transform: uppercase;
}

.tabuniversidades p {
  font-size: .9em;
}

.tabuniversidades a {
  background-color: #E75526;
  padding: .8em 1em;
  border-radius: .5rem;
  font-size: .6rem;
  text-transform: uppercase;
}

.tabuniversidades a:hover {
  background-color: #e29c85;
  color: #0D0D0D;
}

/*personalidades*/

.imgbernardo img {
  width: 70%;
  height: auto;
  margin-bottom: 1em;
  margin-top: 1em;
}

.tabpersonalidades h5 {
  font-family: "Poppins", sans-serif;
  text-transform: none;
  font-size: 1em;
  text-align: left;
  padding: 0;
  font-weight: 700;
}

.tabpersonalidades h5 span{
  display: block;
  font-weight: 400;
  font-size: .8em;
  margin-bottom: 1em;
}

.tabpersonalidades p{
  font-size: .9em;
  margin-bottom: 1.5em;
}

/*slider final*/

.container {
  max-width: 1200px;
  width: 95%;
  margin: auto;
}

.slider-wrapper {
  position: relative;
  margin-top: 1rem;
}

.slider-wrapper .slide-button {
  position: absolute;
  top: 200px;
  height: 50px;
  width: 50px;
  color: #ffffff;
  border: none;
  outline: none;
  background:  #E75526;
  font-size: 2.2rem;
  cursor: pointer;
  border-radius: 50%;
  transform: translateY(-50%);
}

.slider-wrapper .slide-button:hover {
  background:  #ea683d;
}

.slider-wrapper .slide-button#prev-slide {
  left: -70px;
  display: none;
}

.slider-wrapper .slide-button#next-slide {
  right: -70px;  
}

.slider-wrapper .image-list {
  display: grid;
  gap: 18px;
  font-size: 0;
  margin-bottom: 30px;
  overflow-x: auto;
  scrollbar-width: none;
  grid-template-columns: repeat(10, 1fr);
}

.slider-wrapper .image-list::-webkit-scrollbar {
  display: none;
}


.slider-wrapper .image-list .image-item {
  width: 325px;
  height: 400px;
  object-fit: cover;
  border-radius: .8rem;
}

.container .slider-scrollbar {
  height: 24px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.slider-scrollbar .scrollbar-track {
  height: 2px;
  width: 100%;
  background: #D9D9D9;
  position: relative;
  border-radius: 4px;
}

.slider-scrollbar:hover .scrollbar-track {
  height: 4px;
}

.slider-scrollbar .scrollbar-thumb {
  position: absolute;
  height: 100%;
  width: 50%;
  background: #E75526;
  border-radius: inherit;
  cursor: grab;
}

.slider-scrollbar .scrollbar-track:active {
  cursor: grabbing;
  height: 8px;
  top: -2px;
}

.slider-scrollbar .scrollbar-thumb::after {
  content: "";
  position: absolute;
  left: 0%;
  right: 0%;
  top: -10px;
  bottom: -10px;
}

@media (max-width: 1023px) {
  .slider-wrapper .slide-button {
      display: none!important;
  }
  .slider-wrapper .image-list {
      gap: 10px;
      margin-bottom: 15px;
  }
  .slider-wrapper .image-list .image-item {
      width: 280px;
      height: 380px;
  }
  .slider-scrollbar .scrollbar.thumb {
      width: 20%;
  }
}





/*DONDE ESTUDIO*/
/*titulo*/

h5 {
    font-family: "Karantina", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    text-transform: uppercase;
    text-align: center;
    padding: .5em;
    letter-spacing: 0.05em;
}

.titulotest p {
  padding: 2rem;
  background: #354076;
  margin-bottom: 3rem;
}

.test{
    padding: 1rem;
    background: #D9D9D9;
}

.pregunta{
    margin-bottom: 1.2rem;
    border-block-end: .2px solid white;
}

.pregunta h4{
  color:#0D0D0D
}
.pregunta li{
 margin: .5rem;
 color: #0D0D0D;
}

.pregunta li h4{
    padding-bottom: .5rem;
    color: #0D0D0D;
}

.botonfinal{
    text-align: center;
    padding-bottom: 2.2rem;
    border-block-end: .2px solid white;
    background: #D9D9D9;
}
.botonfinal a {
    background-color: #E75526;
    padding: .8em;
    padding-left: 2em;
    padding-right: 2em;
    border-radius: .5rem;
    font-size: .8rem;
    text-transform: uppercase;
}

.botonfinal a:hover {
    background-color: #e29c85;
    color: #0D0D0D;
}

/*RESULTADOS*/

.resultados {
  display: block; 
}

.resultado1 {
  display: flex;
  flex-wrap: wrap;
  align-items:center;
  gap: .5rem;
  padding-top: 1rem;
  border-bottom: 3px solid #16215b;
  justify-content: flex-start;
  /*position: relative;*/
  background: #D9D9D9;
  color: #0D0D0D;
}


.logoresultado1 img {
  height: auto;
  width: 120px;
  max-width: 100%;
  border-radius: 365px;
}

.barra1 img {
  height: 3%;
  width: 200px;
  max-width: 100%;
  position: absolute;

}

.resultado1 p {
  font-size: .95rem;
  position: relative;
  top: -.5rem;
  padding: .2rem .4rem;
}

.resultado1 p span {
  display: block;
}

.textoresultado1 {
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 gap: .4rem;
}

.resultado1 ul li {
  list-style: square;
  padding: .3rem 0;
}

.resultado1 ul {
  padding-inline-start: 5em;
}
 


/*UNIVERSIDADES*/

/*buscador*/


.form button {
  border: none;
  background: none;
  color: #8b8ba7;
}
.form {
  --timing: 0.3s;
  --width-of-input: 200px;
  --height-of-input: 40px;
  --border-height: 2px;
  --input-bg: #fff;
  --border-color: #FF5722;
  --border-radius: 30px;
  --after-border-radius: 1px;
  position: relative;
  height: var(--height-of-input);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-inline: 0.8em;
  border-radius: var(--border-radius);
  transition: border-radius 0.5s ease;
  background: var(--input-bg,#fff);
}

.buscar {
  font-size: 0.9rem;
  background-color: transparent;
  height: 100%;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  border: none;
}
.form:before {
  content: "";
  position: absolute;
  background: var(--border-color);
  transform: scaleX(0);
  transform-origin: center;
  width: 100%;
  height: var(--border-height);
  left: 0;
  bottom: 0;
  border-radius: 1px;
  transition: transform var(--timing) ease;
}
.form:focus-within {
  border-radius: var(--after-border-radius);
}

.buscar:focus {
  outline: none;
}
.form:focus-within:before {
  transform: scale(1);
}
/* == click sacar txt == */
.reset {
  border: none;
  background: none;
  opacity: 0;
  visibility: hidden;
}
.buscar:not(:placeholder-shown) ~ .reset {
  opacity: 1;
  visibility: visible;
}
.form svg {
  width: 17px;
  margin-top: 3px;
}
.buscar-uni {
  display: flex;
  flex-wrap: wrap;
  padding-top: 3%;
  padding-bottom: 3%;
  margin-left: 3rem;
}

@media screen and (max-width: 900px) {
  .buscar-uni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 3%;
    padding-bottom: 3%;
  }
  .form {
    --timing: 0.3s;
    --width-of-input: 200px;
    --height-of-input: 40px;
    --border-height: 2px;
    --input-bg: #fff;
    --border-color: #FF5722;
    --border-radius: 30px;
    --after-border-radius: 1px;
    position: relative;
    height: var(--height-of-input);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-inline: 0.8em;
    border-radius: var(--border-radius);
    transition: border-radius 0.5s ease;
    background: var(--input-bg,#fff);
    width: -webkit-fill-available;
    margin-right: 3rem;
  }
}


/*filtro*/
/*No nos salió el css y js, pero lo intentamos*/

.filtro {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  gap: 1rem;
  align-items: start;
}


/*universidades-elegir*/

.universidades-elegir {
  background-color: #D9D9D9;
}
.escudouni h4 {
  color: rgb(22,33,91)
}

.escudouni {
  display: grid;
  grid-template-columns: .8fr 1fr .5fr;
  align-items: center;
  text-align: start;
  justify-items: start;
  padding: 1rem 0;
  border-block-end: solid 1px rgb(22,33,91);
}

.escudouni img {
  width:150px;
  height: auto;
  max-width: 80%;
  border-radius: 20rem;
  padding-left: .5rem;
}

.escudouni h4{
  text-align: left;
  text-transform: uppercase;
}

.escudouni a {
  background-color: #E75526;
  padding: .8em 1em;
  border-radius: .5rem;
  font-size: .6rem;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: white;}

  .escudouni a:hover {
    background-color: #e29c85;
    color: #0D0D0D;
  }

/*paginas*/

#container {
  width: 100%;
  padding: 2rem;
  border-block-end: solid 1px rgb(255, 255, 255);

}
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;
  border-radius: 3px;
  background: rgb(22,33,91);
  font-size: .9em;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
}


.page:hover, .page.gradient:hover {
  background: #E75526;
}

.active {
  background: #E75526;
}


/*TESTIMONIOS*/

.testimonios {
  background-color: white;
  padding: 1rem;
  border-radius:1rem;
  margin: 2rem;
  color: rgb(22,33,91);
  margin-left: 28%;
  margin-right: 28%;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.testimonios span {
  font-weight: bold; 
  color: rgb(22,33,91); 
}
.testimonios .finalcita span {
  display: block;
  font-weight: 400;
}

@media screen and (max-width: 900px) {
  .testimonios {
    background-color: white;
    padding: 1rem;
    border-radius:1rem;
    margin: 2rem;
    color: rgb(22,33,91);
    margin: 2rem;
  }
  
  .testimonios span {
    font-weight: bold; 
    color: rgb(22,33,91); 
  }
  .testimonios .finalcita span {
    display: block;
    font-weight: 400;
  }
}





/*FOOTER*/ 
footer img{
  width: 200px;
  height: auto;
}
footer {
  padding: 20px;
  background-color:rgb(22,33,91);
  text-align: center;
}

/*footerprueba*/
.pruebafooter nav ul li a:hover {
  color: #E75526;
}

.pruebafooter li a {
  text-decoration: underline;
  color: #ffffff;
  text-underline-offset: 3px;

}

.pruebafooter ul li a:hover {
  text-decoration: none;
}

.pruebafooter ul {   
  margin: 2em;
  text-align: center;
}

.pruebafooter ul li {
  margin: 5px 0; 
}

.social-icons img {
  width: 30px;
  height: 30px;
}


.input-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.input {
min-height: 50px;
max-width: 215px;
padding: 0 1rem;
color: #fff;
font-size: 18px;
border: 1px solid  #E75526;
border-radius: 6px 0 0 6px;
background-color: transparent;
}

.button--submit {
min-height: 50px;
padding: .5em 1em;
border: none;
border-radius: 0 6px 6px 0;
background-color:  #E75526;
color: #fff;
font-size: 17px;
cursor: pointer;
transition: background-color .1s ease-in-out;
}

.button--submit:hover {
background-color: #ea683d;
}

.input:focus, .input:focus-visible {
border-color: #3898EC;
outline: none;
}

.input-description {
  color: #9f9e9e; 
  font-size: 12px; 
  margin-top: 10px; 
  text-align: center; 
}


/*iconos redes*/

.social-icons a img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease-in-out; 
}

.social-icons a:hover img {
  transform: scale(1.2); 
}

/*actualidad*/
.video{
  width: 100%;
  height: auto;
  max-width: 100%;
  padding: 1rem;
}
iframe{
  width: 60vw;
  aspect-ratio: 16/9;
}

.actualmente{
  display: grid;
  grid-template-columns: 2fr 1fr;
}


/*MEDIA DE TODO (solo hicimos la home*/

/*A partir de los 645px)*/
@media (min-width: 40em) {

  /*HEADER*/

  .logo img{
     width: 250px;
     height: auto; 
  }
 
 .menu nav ul a {
     font-size: 1.1rem;
 }

  /*SECCION 1, MAIN*/

  #fotomain h1 {
    font-size: 5rem;
    text-wrap: wrap;
   }
   #fotomain h2 {
    font-size: 1.2rem;
    font-weight: 400;
    }
    #fotomain a {
      top: 70%; 
      padding: .8em;
      padding-left: 2em;
      padding-right: 2em;
      font-size: .8rem;
  }

  /*SECCION 2, MAIN*/
  /*noticia 1*/

  .seccion2 h3{
    font-size: 1.7rem;
  }
  
  .noticias {
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
  }
  .noticia1 {
  gap: 1rem;
  padding-bottom: 1rem;
  padding-left: .5rem;
  padding-right: .5rem;
  }


  .noticia1 h4{
    font-size: 1.4rem;
  }

.textoactualidad1 p{
  font-size: 1rem;
  text-align: left;
  padding-top: .5rem;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

.noticia1 a{
  font-size: .8rem;
}

.fotoactualidad img {
  width: 100%; 
  height: auto;
  max-width: 100%;
  border-radius: .8rem;
  padding: .5rem .5rem;
}





/*noticia chicas*/

.noticia2 img {
 height: auto;
 max-width: 100%;
 border-radius: .8rem;
}

.noticia2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding:.8rem;
  text-align: left;
}

.textoactualidad2 h4{
  font-size: 1.2rem;
}

.textoactualidad2 p {
  font-size: 1rem;
  padding-bottom: 1rem;
}

.textoactualidad2 a {
padding: .8em 1em;
font-size: .8rem;
}


  /*SECCION 3, MAIN*/
  
  .sabiasque {
    padding: 3rem;
}

.sabiasque h2{
  font-size: 5.6rem;
 }

.sabiasque p {
   font-size: 1.2rem;
}

/*SECCION 4, MAIN*/

/*tabs*/
.icono1 img,
.icono3 img, 
.icono2 img{
    width: 80px;
    height: auto;
}

.tab > label {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
	font-size: 1em;
}
.tab:hover label {
	border-top-color: #333;
	color: #b3b3b3;
}

.tab-content {
	display: none;
	color: #858585;
}

/*testimonios*/

.texto{
    border-left: 5px solid #f16824;
    padding: 1rem;
    font-size: 1.15rem;
}

/*universidades*/

.mapauniversidades img{
  width: 400px;
  height: auto;
  margin-bottom: 1em;
  margin-top: 1em;
}

.tabuniversidades h4 {
  font-size: 1.4em;
}

.tabuniversidades p {
  font-size: 1.1em;
}

.tabuniversidades a {
  font-size: .8rem;
}
.tab-content a {
  font-size: .8rem;
}


/*personalidades*/

.imgbernardo img {
  width: 400px;
}

.tabpersonalidades h5 {
  font-size: 1.2em;
}

.tabpersonalidades h5 span{
  font-size: .8em;
}

.tabpersonalidades p{
  font-size: 1em;
  margin-bottom: 3em;
}



/*DONDE ESTUDIO*/
/*titulo*/

h5 {
  font-size: 2.6rem;
}

.test h2{
  font-size: 1.4rem;
  color: #16215b;
}
.pregunta{
  font-size: 1.1rem;
}

.botonfinal a {
  font-size: .9rem;
}

/*RESULTADOS*/

.logoresultado1 img {
height: auto;
width: 160px;
}

.barra1 img {
height: 3%;
width: 200px;
position: relative;
}

.resultado1 p {
font-size: 1.1rem;
}

/*UNIVERSIDADES*/

.buscar-uni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 3rem 1rem;
  margin: 0;
  }

/*universidades-elegir*/

.escudouni {
  display: grid;
  grid-template-columns: .6fr 1fr .5fr;
  align-items: center;
  justify-items: center;
  padding: 1rem 0;
  text-align: left;
}

.escudouni img {
  width:160px;
  height: auto;
  max-width: 80%;
  border-radius: 20rem;
  padding-left: .5rem;
}

.escudouni h4{
  text-align: left;
  text-transform: uppercase;
  font-size: 1.2em;
}

.escudouni a {
  background-color: #E75526;
  font-size: .8rem;}


/*paginas*/

#container {
  width: 100%;
  padding: 2rem;
  border-block-end: solid 1px rgb(255, 255, 255);

}
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page {
  font-size: 1.1em;
}



}


/*A partir de los 960px)*/

@media (min-width: 60em) {

  /*HEADER*/

  .logo img{
     width: 350px;
     height: auto; 
     margin: .8rem;
  }
 
 .menu nav ul a {
     font-size: 1.2rem;
 }

  /*SECCION 1, MAIN*/

  #fotomain h1 {
    top: 25%; 
    font-size: 8rem;
  }

   #fotomain h2 {
    top: 65%;
    font-size: 1.6rem;
    }

    #fotomain a {
      top: 80%; 
      padding: .8em;
      padding-left: 2em;
      padding-right: 2em;
      font-size: 1rem;
  }

/*SECCION 2, MAIN*/

.seccion2 h3{
  font-size: 1.8rem;
  padding: 1.5rem;
}

.noticias {
  display: grid;
  grid-template-columns: 2fr 1fr;
 justify-items: baseline;
 align-items: start;
 place-items: start;
}

.noticiaschicas {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border: solid 1px rgb(22,33,91);

}

.piefecha {
  display: block;
  color: #858585;
  text-align: left;
  margin-top: 1.5rem;
  font-size: .9rem;
}


/*noticia 1*/

.noticia1 {
  padding: 0 1.5rem;
}

.noticia1 h4{
  font-size: 1.6rem;
}

.textoactualidad1 p{
  font-size: 1.3rem;
  padding-top: 1rem;
  padding-bottom: 4.76rem;
}

.noticia1 a{
  padding: .8em 1em;
  border-radius: .5rem;
  font-size: .9rem;
}

.fotoactualidad img {
 padding: 1rem 0;
}


/*noticia chicas*/

.noticia2 img {
 height: auto;
 width: 400px;
 max-width: 100%;
  padding: 0;
}

.noticia2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding:.8rem;
  border-block-end: solid 1px rgb(22,33,91);
}

.textoactualidad2 h4{
  font-size: 1.3rem;
  padding: 1em 0;
}

.textoactualidad2 p {
    font-size: 1.2rem;
    padding-bottom: 4rem;
}

.textoactualidad2 p span {
  display: block;
  color: #858585;
  font-size: .9rem;
  padding-top: 1.5rem;
}


.textoactualidad2 a {
  padding: .8em 1em;
  border-radius: .5rem;
  font-size: .8rem;
}

/*SECCION 3, MAIN*/
  
  .sabiasque {
    padding: 6rem;
}

.sabiasque h2{
  font-size: 6rem;
  text-transform: uppercase;
 }

.sabiasque p {
   font-size: 1.6rem;
}

/*SECCION 4, MAIN*/

/*testimonios*/

.fotocita img{
  margin-top: 5em;
   width: 80%;
   height: auto;
}

.texto{
    padding: 1.5rem;
    font-size: 1.4rem;
}



/*universidades*/

.mapauniversidades img{
  width: 500px;
  height: auto;
  margin-bottom: 1em;
  margin-top: 1em;
}

.tabuniversidades h4 {
  font-size: 1.8em;
}

.tabuniversidades p {
  font-size: 1.4em;
}

.tabuniversidades a {
  font-size: .8rem;
}
.tab-content a {
  font-size: .8rem;
}
/*personalidades*/

.imgbernardo img {
  width: 500px;
}

.tabpersonalidades h5 {
  font-size: 1.4em;
}

.tabpersonalidades h5 span{
  font-size: .9em;
}

.tabpersonalidades p{
  font-size: 1.3em;
  margin-bottom: 3em;
}

/*DONDE ESTUDIO*/
/*titulo*/

h5 {
  font-size: 3.1rem;
}


/*RESULTADOS*/


.resultado1{
  justify-content: space-evenly;
}

.logoresultado1 img {
height: auto;
width: 180px;
}

.barra1 img {
height: 3%;
width: 200px;
position: relative;
}

.resultado1 p {
font-size: 1.1rem;
}

/*UNIVERSIDADES*/


.buscar-uni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 3rem 1rem;
  margin: 0;
  }

/*universidades-elegir*/

.escudouni {
  display: grid;
  grid-template-columns: .2fr .4fr 1fr;
  padding: 1rem;
  text-align: left;
  align-items: center;
}

.escudouni img {
  width:250px;
  height: auto;
  max-width: 80%;
  border-radius: 20rem;
  padding-left: .5rem;
}

.escudouni h4{
  text-align: start;
  text-transform: uppercase;
  font-size: 1.2em;
}

.escudouni a {
  background-color: #E75526;
  font-size: .9rem;}


/*FOOTER*/ 

footer{
  display: grid;
  grid-template-columns: 1fr 3fr;
  justify-items: start;
  align-items: start;
}

.logofooter{
  padding: 2rem 0;
  width: 350px;
  height: auto;
}

/*footerprueba*/

.pruebafooter ul {   
  margin: 2em;
  text-align: left;
}
}

 /*card*/
 .cards-container {
  display: flex;
  flex-direction: column; 
  gap: 20px; 
  align-items: center;
  padding-bottom: 3rem;
  min-height: 100vh;
  background:  #E75526;
}

.card {
  position: absolute;
  width: 350px;
  margin: 20px;
  height: 500px;
  perspective: 1000px; 
}

.card .face {
  position: absolute; 
  width: 100%;
  min-height: 350px;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .5s;
}

.card .front {
  transform: rotateY(0deg);
  box-shadow: 0 5px 10px #0D0D0D;
}

.card .front img {
  width: 100%;
  height: 360px ; 
  object-fit: cover; 
}

.card .front h3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 45px;
  color: #fff;
  background: rgba(0, 0, 0, .4);
  text-align: center;
}

.card .back {
  transform: rotateY(180deg);
  background: rgb(3, 35, 54);
  padding: 15px;
  color: #D9D9D9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0 5px 10px #0D0D0D;
}

.card .back .link {
  border-top: solid 1px #ffffff;
  height: 50px;
  line-height: 50px;
  color: #D9D9D9;
}

.card .back h3 {
  font-size: 30px;
  margin-top: 20px;
  letter-spacing: 2px;
}

.card .back p {
  letter-spacing: 1px;
  padding: 2rem;
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(0deg); 
}

.card-wrapper {
  position: relative;
  width: 350px;
  height: 350px; 
  margin: 20px;
  justify-items: center;

}

/*personalidades*/
.presentacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2em;
  background: #D9D9D9;
}
.presentacion >* {
flex: 1 1 240px;
}
.presentacion img {
max-width: 240px;
border-radius: 1rem;
box-shadow: 0 4px 8px rgb(0 0 0 / 83%);
}
.contenedorra {
max-width: 65rem;
margin: 1rem auto;
padding: 3rem;
}
.info {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding-top: 1rem;
color: #0D0D0D;
}

.nombre {
margin-bottom: 10px;
color: black;
padding: 2px;
}

.subtitulo {
color: #16215b;
margin-top: 0em;
font-size:100%;
border-block-end: 2px solid #E75526;
padding-block-end: .40rem;
}

.presentacion a {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 1rem;
font-weight: bold;
margin: 0;
}  

.contenedorra-per {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
margin-top: 10px; 
}

.per {
background-color: #E75526;
padding: .8em 1em;
border-radius: .5rem;
font-size: .6rem;
text-transform: uppercase;
}

.per:hover {
background-color: #e29c85;
color: #0D0D0D;
}

.color{
  color: #0D0D0D;
}