@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root{
	--color-primary: #5C7FA8;
	--color-secondary: #F79E01;
	--color-gray: #A4A4A4;
	--body-size: 15px;
	--color-text: #000000;
}

@media screen and (min-width: 37.5em) {
    :root {
        --body-size: 16px;
    }
}


/* Base */

	*,
	:after,
	:before {
	    box-sizing: border-box;
	}

	html {
	    scroll-behavior: smooth;
	    box-sizing: border-box;
    	-webkit-font-smoothing: antialiased;
    	line-height: 1.15;
	    -ms-text-size-adjust: 100%;
	    -webkit-text-size-adjust: 100%;
	}

	
	body {
	    font-weight: 400;
	    text-align: center;
	    font-size: var(--body-size);
	    margin: 0;
	    line-height: 1.1;
	    color: #2b2424;
	    position: relative;
	    width: 100%;
	}

	body, h1, h2, h3, input {
	    font-family: "Open Sans", sans-serif;;
	}

	h1, h2, h3 {
	    text-transform: none;
	    margin: 0;
	}

	p {
	    margin: 0;
	    padding: 0;
	}

	article, aside,	figcaption, figure,	footer,	header,	main,	nav,	section {
	    display: block;
	}
	
	figure {
	    margin: 1em 40px;
	}
	hr {
	    box-sizing: content-box;
	    height: 0;
	    overflow: visible;
	}
	pre {
	    font-family: monospace, monospace;
	    font-size: 1em;
	}
	a {
	    background-color: transparent;
	    -webkit-text-decoration-skip: objects;
	}
	abbr[title] {
	    border-bottom: none;
	    text-decoration: underline;
	    -webkit-text-decoration: underline dotted;
	    text-decoration: underline dotted;
	}
	b,
	strong {
	    font-weight: inherit;
	    font-weight: bolder;
	}
	code,
	kbd,
	samp {
	    font-family: monospace, monospace;
	    font-size: 1em;
	}
	dfn {
	    font-style: italic;
	}
	mark {
	    /*background-color: #ff0;
	    color: #000;*/
	    background-color: initial;
	    color: var(--color-primary);
	    text-decoration: underline;
	}
	small {
	    font-size: 80%;
	}
	sub,
	sup {
	    font-size: 75%;
	    line-height: 0;
	    position: relative;
	    vertical-align: baseline;
	}
	sub {
	    bottom: -0.25em;
	}
	sup {
	    top: -0.5em;
	}
	audio,
	video {
	    display: inline-block;
	}
	audio:not([controls]) {
	    display: none;
	    height: 0;
	}
	img {
	    border-style: none;
	}
	svg:not(:root) {
	    overflow: hidden;
	}
	button,
	input,
	optgroup,
	select,
	textarea {
	    margin: 0;
	}
	button,
	input {
	    overflow: visible;
	}
	button,
	select {
	    text-transform: none;
	}
	[type="reset"],
	[type="submit"],
	button,
	html [type="button"] {
	    -webkit-appearance: button;
	}
	[type="button"]::-moz-focus-inner,
	[type="reset"]::-moz-focus-inner,
	[type="submit"]::-moz-focus-inner,
	button::-moz-focus-inner {
	    border-style: none;
	    padding: 0;
	}
	[type="button"]:-moz-focusring,
	[type="reset"]:-moz-focusring,
	[type="submit"]:-moz-focusring,
	button:-moz-focusring {
	    outline: 1px dotted ButtonText;
	}
	legend {
	    box-sizing: border-box;
	    color: inherit;
	    display: table;
	    max-width: 100%;
	    padding: 0;
	    white-space: normal;
	}
	progress {
	    display: inline-block;
	    vertical-align: baseline;
	}
	textarea {
	    overflow: auto;
	}
	[type="checkbox"],
	[type="radio"] {
	    box-sizing: border-box;
	    padding: 0;
	}
	[type="number"]::-webkit-inner-spin-button,
	[type="number"]::-webkit-outer-spin-button {
	    height: auto;
	}
	[type="search"] {
	    -webkit-appearance: textfield;
	    outline-offset: -2px;
	}
	[type="search"]::-webkit-search-cancel-button,
	[type="search"]::-webkit-search-decoration {
	    -webkit-appearance: none;
	}
	::-webkit-file-upload-button {
	    -webkit-appearance: button;
	    font: inherit;
	}
	details,
	menu {
	    display: block;
	}
	summary {
	    display: list-item;
	}
	canvas {
	    display: inline-block;
	}
	[hidden],
	template {
	    display: none;
	}

/**/
	.container{
		max-width: 1400px;
		padding: 0 20px;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.section{
		padding: 4rem 0;
	}

	.title{
		font-size: 35px;
		font-weight: 900;
	}

	.subtitle{
		font-size: 25px;
		font-weight: 500;
	}

	.button{
		background-color: var(--color-secondary);
		color: white;
		padding: 10px 20px;
		font-size: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		grid-gap: 10px;
		border-radius: 10px;
		cursor: pointer;
		text-decoration: none;
		transition: transform 0.3s;
	}

	.title-orange{
		color: var(--color-secondary);
	}

	.button:hover{
		transform: scale(1.1);
	}

	.head-title{
		font-size: 45px;
		font-weight: 900;
	}

/* Menu */

	.main-nav{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.main-nav .container{
		display: flex;
		justify-content: space-between;
		color: white;
	}

	.main-nav__info{
		width: 100%;
		background-color: var(--color-primary);
		padding: 20px 0 35px;
		z-index: 400;
		position: relative;
	}

	.main-nav__info__section__item, .main-nav__info__section, .main-nav__list, .main-nav__list__options{
		display: flex;
		align-items: center;
	}

	.main-nav__info__section__item{
		gap: 10px;
		font-size: 14px;
	}

	.main-nav__info__section{
		gap:  20px;
	}

	.main-nav__list{
		width: calc(100% - 40px);
		max-width: 1400px;
		margin: 0 auto;
		background: white;
		border-radius: 10px;
		margin-top: -20px;
		padding: 10px 20px;
		gap: 35px;
		position: relative;
		z-index: 500;
	}

	.main-nav__list__options{
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 35px;
	}

	.main-nav__list__options a{
		color: #747474;
		text-decoration: none;
		font-weight: 600;
		position: relative;
	}

	.main-nav__list__options a:before{
		display: block;
		content: "";
		height: 1.7px;
		background-color: black;
		bottom: -8px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		transition: width 0.3s ease-in-out;
	}

	.main-nav__list__options a:hover:before {
	    width: 100%;
	}

	.main-nav__list__options li.active a{
		color: black;
	}

	.main-nav__list__image{
		width: auto;
		height: 60px;
		margin-right: auto;
	}

	.main-nav__list__button{
		background-color: var(--color-secondary);
		color: white;
		text-decoration: none;
		padding: 10px 20px;
		border-radius: 10px;
		font-weight: 600;
		transition: all 0.3s;
	}

	.main-nav__list__button:hover{
		transform: scale(1.05);
	}

	.main-nav__list__toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 28px; /* Ancho ajustado para que las líneas se vean mejor */
        height: 28px; /* Altura ajustada */
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        z-index: 1000; /* Asegura que el botón esté por encima del menú */
    }

    .main-nav__list__toggle:before,
    .main-nav__list__toggle:after,
    .main-nav__list__toggle span {
        content: '';
        display: block;
        width: 100%;
        height: 2.5px;
        background-color: var(--color-primary);
        border-radius: 2px;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        position: absolute;
    }

    .main-nav__list__toggle:before {
        transform: translateY(-8px);
    }

    .main-nav__list__toggle:after {
        transform: translateY(8px);
    }

    /* Estado del menú activo (la X) */
    .main-nav__list__toggle.active:before {
        transform: translateY(0) rotate(45deg);
    }

    .main-nav__list__toggle.active:after {
        transform: translateY(0) rotate(-45deg);
    }

    .main-nav__list__toggle span {
        transform: translateY(0);
        opacity: 1; /* Asegura que la línea del medio sea visible */
    }

    .main-nav__list__toggle.active span {
        opacity: 0;
    }

/* Program */
	.program .container{
		flex-direction: column;
		gap: 40px;
	}

	.program__types{
		display: flex;
		gap: 2rem;
		margin: 0;
		padding: 0;
	}

	.program__types__item{
		padding: 35px 20px;
		display: flex;
		flex-direction: column;
		gap: 14px;
		border: 1px solid #E0E0E0;
		border-radius: 15px;
		cursor: context-menu;
		transition: all 0.3s;
		width: 100%;
	}

	.program__types__item__icon{
		font-size: 5.5rem;
		transition: color 0.3s;
	}

	.program__types__item__title, .program__types__item__text{
		color: #A4A4A4;
	}

	.program__types__item__title{
		font-size: 18px;
		font-weight: 800;
		transition: color 0.3s;
	}

	.program__types__item__text{
		font-size: 15px;
	}

	.program__types__item:hover .program__types__item__title,
	.program__types__item:hover .program__types__item__text{
		color:  black;
	}

	.program__types__item:hover .program__types__item__icon{
		color: var(--color-secondary);
	}

	.program__types__item:hover{
		box-shadow: 2px 4px 15px rgba(0, 0, 0, .16);
	}

	.program__types__item:hover .icon-preuniversitario .path4:before,
	.program__types__item:hover .icon-preuniversitario .path5:before,
	.program__types__item:hover .icon-preuniversitario .path6:before{
		transition: all .3s;
	}

	.program__types__item:hover .icon-preuniversitario .path4:before{
		color: var(--color-secondary);
	}

	.program__types__item:hover .icon-preuniversitario .path5:before{
		color: var(--color-secondary);
	}

	.program__types__item:hover .icon-preuniversitario .path6:before{
		color: var(--color-secondary);
	}

/* Experience */

	.experience{
		background-image: url('../img/fondo-section.png');
		background-position: center;
		background-size: cover;
		margin-top: 7rem;
	}

	.experience .container{
		justify-content: center;
		flex-direction: column;
	}

	.experience__video{
		position: relative;
	    height: 0;
	    overflow: hidden;
	    width: 70%;
    	padding-bottom: 40%;;
	    max-width: 1060px;
	    margin-top: -11rem;
	    margin-bottom: 3.5rem;
	}

	.experience__video iframe{
		position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%; 
	    height: 100%;
	    z-index: 1;
	}

	.experience__review{
		flex-direction: column;
		grid-gap: 30px;
		width: 100%;
	}

	.experience__review .title{
		max-width: 440px;
	}

	.experience__review__arrow__item{
		padding: 10px 10px;
	}

	.experience__review__arrow{
		grid-gap: 20px;
	}

	.experience__review__arrow__item.disable{
		cursor: initial;
		background-color: #ffd489;
	}

	.experience__review__arrow__item.disable:hover{
		transform: scale(1.0);
	}

	.experience__review__arrow, .experience__review{
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.experience__review__viewport {
	  	overflow: hidden;
	  	width: 100%;
	  	max-width: 1200px;
	}

	.experience__review__track {
	  	display: flex;
	  	transition: transform 0.5s ease;
	  	grid-gap: 20px;
	}

	.experience__review__item {
	  	min-width: calc(50% - 10px); /* 2 items por fila en desktop */
	  	padding: 25px;
	  	background-color: white;
	  	border-radius: 10px;
	}

	.experience__review__item blockquote{
		margin: 0;
	}

	.experience__review__item cite{
		display: block;
	}

	.experience__review__item figcaption{
		margin-top: 2rem;
	}

	.experience__review__text{
		color: #A4A4A4;
		font-size: 15px;
		text-align: justify;
	}

	.experience__review__name, .experience__review__objective{
		text-align: right;
	}

	.experience__review__name{
		font-weight: bold;
	}

	.experience__review__objective{
		font-size: 14px;
		color: #A4A4A4;
	}

/* Start */

	.start{
		display: flex;
		flex-direction: column;
		grid-gap: 40px;
		align-items: center;
	}
	
	.start .container{
		flex-direction: column;
	}

	.start__head{
		display: flex;
		flex-direction: column;
		grid-gap: 5px;
		align-items: center;
		justify-content: center;
	}

	.start__body {
		width: 100%;
		overflow: hidden; 
	}

	.start__images {
		display: grid;
		grid-template-columns: 1.25fr 1fr 1.25fr;
		gap: 20px;
		max-width: 86%;
		margin-left: auto;  /* queda alineado a la izquierda del container */
		margin-right: -10vw; /* rompe hacia la derecha */
	}

	.start__body__image {
		width: 100%;
		height: 340px;
		object-fit: cover;
		border-radius: 12px;
	}

	.start__body__image.center {
		aspect-ratio: 1 / 1; /* cuadrada */
	}
	.start__body__image.left,
	.start__body__image.right {
		aspect-ratio: 4 / 5; /* más verticales */
	}

/* Footer */

	.footer{
		background-color: var(--color-primary);
		padding: 2rem 0;
	}

	.footer .container{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		grid-gap: 20px;
	}

	.footer__section, .footer__section__info, .footer__section__social, .footer__section__info__item, .footer__section__social__item{
		display: flex;
		align-items: center;
	}

	.footer__section, .footer__line{
		width: 100%;
		color: white;
	}

	.footer__line{
		background-color: white;
		height: 1px;
		opacity: 0.35;
	}

	.footer__section__credit{
		opacity: 0.5;
		font-size: 14px;
	}

	.footer__section:nth-child(1){
		grid-gap: 20px;
		justify-content: space-between;
	}

	.footer__section__info{
		grid-gap: 30px;
	}

	.footer__section__info__item{
		grid-gap: 10px;
	}

	.footer__section__social{
		grid-gap: 20px;
	}

	.footer__section__social__item{
		text-decoration: none;
		color: var(--color-primary);
		background-color: white;
		width: 25px;
		height: 25px;
		font-size: 16px;
		border-radius: 5px;
		justify-content: center;
	}

	.footer__section__info__item__text{
		text-decoration: none;
		color: white;
	}

/**/

.hero {
  width: 100%;
  background-color: #fdf3dd;
  height: 600px;
  position: relative;
  overflow: hidden;
}

/* cada sección (slide) */
.hero__section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.hero__section.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* container mantiene estructura */
.hero__section .container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* descripción */
.hero__section__description {
  width: 50%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.hero__section__description__text {
  font-size: 22px;
}

.hero .button {
  width: auto;
  font-weight: 700;
}

/* picture */
.hero__section__picture {
  width: 40%;
  height: 100%;
  position: relative;
  margin-left: auto;
}

.hero__section__picture__pj,
.hero__section__picture__bg {
  position: absolute;
  bottom: 0;
  width: 90%;
  height: auto;
  left: 0;
  transform: translateY(20px)
}

/* fondo de slide */
.hero__section__bg {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  object-fit: cover;
}

/* === Animaciones encadenadas === */
.hero__section__description__title,
.hero__section__description__text,
.hero__section .button,
.hero__section__picture__bg,
.hero__section__picture__pj {
  opacity: 0;
  /*transform: translateY(20px);*/
}

.hero__section.active .hero__section__description__title {
  animation: fadeLeft 1s ease forwards 0.5s;
}
.hero__section.active .hero__section__description__text {
  animation: fadeUp 1s ease forwards 0.9s;
}
.hero__section.active .button {
  animation: fadeIn 1s ease forwards 1.3s;
}
.hero__section.active .hero__section__picture__bg {
  animation: fadeRightDown 1s ease forwards 1.7s;
}
.hero__section.active .hero__section__picture__pj {
  animation: fadeIn 1s ease forwards 2.1s;
}

/* keyframes */
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRightDown {
  from { opacity: 0; transform: translate(40px,40px); }
  to   { opacity: 1; /*transform: translate(0,0)*/; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === Dots === */
.hero__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.hero__dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

.hero__dots button.active {
  background: var(--color-secondary);
}




/* head pages */

	.head-pages{
		width: 100%;
		height: 525px;
		background-image: url('../img/head-about-us.jpg');
		background-size: cover;
		background-position: center;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.head-pages--program{
		background-image: url('../img/head-program.jpg');
	}

	.head-pages__gradient{
		background-color: var(--color-primary);
		opacity: 0.75;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.head-pages__text{
		font-size: 15px;
	}

	.head-pages .container{
		flex-direction: column;
		color: white;
		position: relative;
		z-index: 1;
		grid-gap: 25px;
		max-width: 1130px;
	}

/* quienes somos */

	.mission{
		margin-top: -5rem;
		position: relative;
		z-index: 1;
	}
	
	.mission__types{
		display: flex;
		width: 100%;
		grid-gap: 40px;
	}

	.mission__item{
		display: flex;
		flex-direction: column;
		grid-gap: 10px;
		background-color: white;
		box-shadow: 3px 3px 10px rgba(0,0,0,.16);
		padding: 20px;
		border-radius: 15px;
		width: 100%;
	}

	.mission__item__head{
		display: flex;
		color: var(--color-primary);
		font-size: 18px;
		align-items: center;
		grid-gap: 10px;
	}

	.mission__item__head__icon{
		background-color: var(--color-primary);
		color: white;
		width: 35px;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-size: 24px;
	}

	.mission__item__head__title{
		font-weight: 700;
	}

	.mission__item__body{
		margin: 0;
		text-align: left;
		color: #A4A4A4;
		font-size: 14px;
	}

	.out-image .container{
		justify-content: center;
	}

	.out-image__picture{
		max-width: 979px;
		height: auto;
		border-radius: 20px;
		box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.16);
		object-fit: cover;
	}

/* Programas */
	
	.programs{
		margin-top: -5rem;
		padding-bottom: 4rem;
		position: relative;
		z-index: 1;
	}

	.programs__item{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 3.5rem;
	}

	.programs__item__section{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		text-align: left;
		grid-gap: 20px;
	}

	.programs__item__section__picture{
		width: 100%;
		border-radius: 16px;
		height: 440px;
		object-fit: cover;
		box-shadow: 3px 3px 15px rgba(0, 0, 0, .16);
	}

	.programs__item__section__title{
		font-weight: 700;
		font-size: 22px;
	}

	.programs__item__section__text{
		font-size: 15px;
		color: #A4A4A4;
	}

	.programs__item__section__list{
		margin: 0;
		padding-left: 2rem;
		color: #A4A4A4;
		font-size: 15px;
	}

	.programs .container{
		flex-direction: column;
		grid-gap: 4rem;
	}

	.programs__item.reverse .programs__item__section:nth-child(1){
		order: 1;
	}

/* state */
	.off{
		display: none;
	}

	.banner-top{
		margin-top: 65px;
	}

	.btn-small{
		font-size: 15px;
	}

/* media query */

	@media screen and (max-width: 2000px){
		.start__images {
			max-width: 90%;
		}
	}

	@media screen and (max-width: 1700px){
		.start__images {
			max-width: 100%;
		}
	}

	@media screen and (max-width: 1400px){
		.main-nav__list__image{
			height: 50px;
		}

		.main-nav__list__options{
			font-size: 15px;
		}

		.main-nav__list__button{
			font-size: 15px;
		}

		.main-nav__info__section__item{
			font-size: 13px;
		}

		.title{
			font-size: 28px;
		}

		.subtitle{
			font-size: 21px;
		}

		.button{
			font-size: 19px;
		}

		.program__types__item__title{
			font-size: 17px;
		}

		.program__types__item__icon{
			font-size: 4.8rem;
		}

		.experience__video{
			width: 60%;
			padding-bottom: 35%;
		}

		.head-title{
			font-size: 35px;
		}

		.head-pages{
			height: 380px;
		}

		.mission__types{
			grid-gap: 30px;
		}

		.out-image__picture{
			max-width: initial;
			width: 80%;
			height: 450px;
		}

		.programs__item__section__picture{
			height: 390px;
		}

		.programs__item__section__title{
			font-size: 20px;
		}

		.programs__item__section__text{
			font-size: 14px;
		}

		.programs__item__section__list{
			font-size: 14px;
		}

		.btn-small{
			font-size: 14px;
		}

		.hero{
			height: 440px;
		}

		.hero__section .container{
			max-width: 1100px;
		}

		.hero__section__description__text{
			font-size: 20px;
		}

		.hero__section__picture__pj, .hero__section__picture__bg{
			max-width: 400px;
		}

		.hero__section__description{
			grid-gap: 1rem;
		}
	}

	@media screen and (max-width: 1100px){
		.hero__section__picture{
			width: 50%;
		}

		.hero__section__picture__pj, .hero__section__picture__bg{
			left: 15%;
		}
	}

	@media screen and (max-width: 1000px){
		.programs__item{
			grid-template-columns: repeat(1, 1fr);
			max-width: 600px;
			grid-gap: 2rem;
		}

		.programs .container{
			justify-content: center;
		}

		.programs__item__section__picture{
			height: 300px;
		}

		.programs__item.reverse .programs__item__section:nth-child(1){
			order: 0;
		}
	}

	@media screen and (max-width: 900px){
		.program__types{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			max-width: 600px;
			margin: 0 auto;
		}

		.start__images {
			margin-right: auto;
			margin-left: -25%;
			grid-template-columns: 2fr 1.5fr 2fr;
			max-width: initial;
			width: 150%;
		}

		.start__body__image {
			height: 180px;
		}

		.title{
			font-size: 25px;
		}

		.head-title{
			font-size: 33px;
		}

		.mission__item__head__title{
			font-size: 17px;
		}

		.subtitle{
			font-size: 18px;
		}

		.program__types__item__title{
			font-size: 16px;
		}

		.program__types__item__icon{
			font-size: 4rem;
		}

		.button{
			font-size: 18px;
		}

		.experience__video{
			width: 70%;
			padding-bottom: 40%;
		}

	    .btn-small{
	    	font-size: 15px;
	    }

	    .hero{
			height: calc(100vh - 65px);
		}

		.hero__section{
			margin-top: 1.4rem;
		}

		.hero__section__picture__pj, .hero__section__picture__bg{
			max-width: initial;
			width: auto;
			height: 100%;
			left: 0;
		}
	}

	@media (max-width: 768px) {
		.experience__review__item { 
			flex: 0 0 100%; 
		}

		.experience__video{
			width: 90%;
			padding-bottom: 56.25%;
		}

		.footer__section{
			flex-direction: column;
			justify-content: center;
		}

	}
	
	@media screen and (max-width: 680px){
		.program .container{
			gap: 25px;
		}

		.program__types{
			gap: 1rem;
		}
		.main-nav__info__section:nth-child(1) .main-nav__info__section__item:nth-child(2){
			display: none;
		}

		.main-nav__list__toggle{
			display: flex;
		}

		.main-nav__list__options {
	        position: absolute;
	        top: 100%;
	        left: 50%;
	        width: 90%;
	        transform: translateX(-50%);
	        flex-direction: column;
	        background: #aabdd5;
	        gap: 0;
	        
	        /* Estilos para el efecto de "caída" */
	        max-height: 0;
	        overflow: hidden;
	        transition: max-height 0.5s ease-in-out;
	    }

	    .main-nav__list__options.active {
	        max-height: 500px;
	    }

		.main-nav__list__options li.active{
			background-color: var(--color-primary);
		}

		.main-nav__list__options li.active a{
			color: white;
		}

		.main-nav__list__options li a{
			color: black;
		}

		.main-nav__list__options li{
			padding: 15px 20px;
			border-bottom: 1px solid #3a587c;
			width: 100%;
		}

		.main-nav__list__options a:before{
			display: none;
		}

		.main-nav__list{
			gap: 20px;
		}

		.mission__item__head{
			flex-direction: column;
			justify-content: center;
		}

		.mission__item__body{
			text-align: center;
		}

		.hero__section .container{
			flex-direction: column;
		}

		.hero__section__description{
			width: 100%;
			align-items: center;
			text-align: center;
		}

		.head-title{
			font-size: 30px;
		}

		.hero__section__description__text{
			font-size: 18px;
		}

		.hero__section__picture{
			width: 100%;
		}

		.hero__section__picture__pj, .hero__section__picture__bg{
			left: 50%;
			transform: translateX(-50%);
		}
	}

	@media screen and (max-width: 520px){

		.mission__types{
			flex-direction: column;
		}

		.mission__item__head{
			flex-direction: row;
		}

		.mission__item{
			min-height: 110px;
		}

		.mission{
			margin-top: -4.5rem;
		}

		.out-image__picture{
			width: 100%;
			height: 300px;
		}

		.programs{
			margin-top: -3rem;
		}

		.programs__item__section__picture{
			height: 280px;
		}
	}

	@media screen and (max-width: 480px){
		.main-nav__info__section:nth-child(1) .main-nav__info__section__item:nth-child(1){
			display: none;
		}

		.program__types__item__icon{
			font-size: 3.5rem;
		}

		.experience__video{
			width: 100%;
		}

		.footer__section__info{
			flex-direction: column;
			justify-content: center;
			grid-gap: 10px;
		}

		.programs__item__section__picture{
			height: 250px;
		}

		.hero__section {
			margin-top: 5rem;
		}
	}

	@media screen and (max-width: 390px){
		.program__types__item__icon{
			font-size: 3rem;
		}

		.program__types__item{
			padding: 20px 10px;
		}

		.program__types__item__title{
			font-size: 14px;
		}

		.program__types__item__text{
			font-size: 13px;
		}

		.program__types{
			gap: 0.5rem;
		}

		.programs__item__section__picture{
			height: 200px;
		}
	}

	@media screen and (max-width: 350px){
		.program__types__item__title{
			font-size: 13px;
		}
	}

	@media screen and (max-height: 380px){
		.hero__section__picture{
			display: none;
		}

		.hero__section .container{
			flex-direction: column;
		}

		.hero__section__description{
			text-align: center;
			align-items: center;
			width: 100%;
			height: ;
			transform: scale(0.7);
		}

		.hero__section{
			margin-top: 4rem;
		}
	}