/*--- header ---*/
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: stretch;
}

.flex-items:nth-child(1) {
  display: block;
  max-width: 20%;
}
.flex-items:nth-child(1) img {
    width: 100%;
    height: auto;
}
.flex-items:nth-child(2) {
  display: block;
    max-width: 32%;
text-align: left;
padding: 50px 10px 0 20px;
}

.flex-items:nth-child(3) {
  display: block;
  background-image: url(img/f1.png);
  background-repeat: no-repeat;
 background-size: contain;
    width: 45%;
    background-position: bottom;
    height: 455px;
}
.flex-items:nth-child(3) img {
    width: 55%;
    height: auto;
        top: 11%;
    position: relative;
        min-width: 450px;
}
.t1{
font-size: 50px;
color:#111;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 7px;
}

.t2{
font-size: 25px;
color:#008dcf;
text-transform: uppercase;
 
}

.t3{
font-size: 20px;
color:#5a5a5a;
text-transform: uppercase;

}

/* --- MOOT --- */
.moot {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: stretch;
  width: 100%;
}
.left {
  display: block;
  max-width: 40%;
}
.left img {
width: 100%;
height: auto;
}
.right {
  display: block;
    max-width: 60%;
    text-align: right;
}

.t4{
font-size: 24px;
color:#111;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 1px;
}
.t5{
font-size: 20px;
color:#595959;
letter-spacing: 1px;
}

/*-- santiago --*/
.dos{
background: url(img/bg1.jpg);
background-size: contain;
    background-repeat: no-repeat;
}
.santiago{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: stretch;
  width: 100%;

}
.s1 {
  display: block;
  max-width: 60%;
}
.s1 img {
width: 100%;
height: auto;
    left: -60px;
    position: relative;
}
.s2 {
  display: block;
    max-width: 30%;
    text-align: right;
}
.s2 img {
    width: 90%;
    height: auto;
}
/* --- RESET BÁSICO --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {  font-family: "Urbanist", sans-serif;; color: #333; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- COLORES --- */
:root {
    --primary: #F98012; /* Naranja Moodle extraído */
    --dark: #222;
       --light: #fff;
    --gray: #f4f4f4;
    --orange: #F98012;
}

/* --- UTILIDADES --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-title { font-size: 2.5rem; margin-bottom: 40px; font-weight: 700; text-transform: uppercase; color: var(--dark);letter-spacing: 7px;text-align: center; }
.center { text-align: center; }
.center-text { text-align: center; }
.linea{ background-color: #008dcf; height: 9px; width: 250px; display: flex; margin-right: auto; margin-left: auto;  margin-bottom: 15px;}
.texto{text-align: center;}
.puntos{padding-left: 60px; display: block; line-height: 30px; text-align: left;}
h3{color:#008dcf; font-size: 18px; letter-spacing: 3px; text-transform: uppercase;margin-bottom: 60px;text-align: center;}

/* --- BOTONES --- */
.btn-primary {
    background: #e30613;
    color: white;
    padding: 15px 35px;
    text-transform: uppercase;
    display: inline-block;
    transition: transform 0.2s;
    margin: 10px;
}
.btn-primary:hover { 
    transform: scale(1.05); 
    background: #ffffff;
    color: #e30613;
    border: #e30613 2px solid;

}

.btn-secondary {
    background: #337bb9;
    color: white;
    padding: 15px 35px;
    text-transform: uppercase;
    display: inline-block;
    transition: transform 0.2s;
     margin: 10px;
}
.btn-secondary:hover { 
    transform: scale(1.05); 
    background: #ffffff;
    color: #337bb9;
    border: #337bb9 2px solid;
    
    }

/* --- NAVBAR --- */
.navbar { background: white; padding: 15px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { height: 40px; } /* Ajusta según tu imagen exportada */
.menu { display: flex; gap: 25px; align-items: center;text-transform: uppercase; }
.menu a { font-weight: 500; font-size: 0.9rem; }
.menu a:hover { color: var(--primary); }
.btn-nav { background: var(--primary); color: white !important; padding: 8px 20px; border-radius: 20px; }

/* --- HERO (ENCABEZADO) --- */
.hero {
    /* Aquí debes poner tu imagen de fondo exportada */
    background: #f8fbff;
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
}


/* --- SECCIONES GENÉRICAS --- */
section { padding: 80px 0; }
.section-light { background: white; }
.section-gray { background: var(--gray); }
.section-dark { background: var(--dark); color: white; }
.section-dark .section-title { color: white; }
.section-orange { background: var(--orange); color: white; }
#tres{font-size: 20px;}

/* --- GRIDS --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }

/* --- EJES TEMATICOS --- */
/*-- CARDS --*/
.wrapper{
  width: 100%;
  margin: 0 auto;
  max-width: 80rem;
}

.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}

.container2{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  border-radius: 0px;
	background-position: center;
	-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	text-align: center;
	min-height: 280px;
	height: auto;
	border-radius: 0px;
	color: #fff;
	font-size: 16px;
}

.back{
  background: #cedce7;
  background: -webkit-linear-gradient(45deg,  #0c3f82 0%,#0c3f82 100%);
  background: -o-linear-gradient(45deg,  #0c3f82 0%,#0c3f82 100%);
  background: linear-gradient(45deg,  #0c3f82 0%,#0c3f82 100%);
}

.front:after{
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 0px;
}
.container2:hover .front,
.container2:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.container2 .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container2 .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container2:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container2:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 18px;
  margin-bottom: 2rem;
  position: relative;
}



.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}
*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

/* --- PROGRAMA --- */
#programa{
background: url(img/bg2.png);
background-repeat: no-repeat;
background-size: contain;

}
#programa img {
    width: 70%;
    height: auto;
}
/* --- INSCRIPCION --- */
.inscripcion{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;


}

.i1 {
  display: block;
width: 60%;
    text-align: left;
}

.i2 {
  display: block;
width: 26%;
    text-align: right;
}

/* --- LUGAR --- */

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 8px;
}

.grid-item {
    align-items: center;
    display: flex;
    padding: 20px;
        width: 100%;
}


.grid-item img {
    width: 100%;
    height: auto;
    
}

iframe {
    width: 100%;   
    min-height: 400px;
    height: auto;  

}
    




/* --- SPONSORS --- */
.sponsors-container { display: flex; flex-direction: column; gap: 20px; align-items: center; margin: 40px 0; }
section#sponsors p {
    text-align: left;
}

section#sponsors img {
    width: 15%;
    min-width: 150px;
}


/* --- CONTACTO --- */
.contacto{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 60px;
}

.ct1 {
  display: block;
    text-align: left;
}

.ct2 {
  display: block;
    text-align: right;
}
.ct2 img {
    width: 100%;
    height: auto;
}
.ct1 a {
    font-size: 18px;
}
.ct1 a:hover {
color: #0c3f82;
}
.material-symbols-outlined {
  vertical-align: middle;
}


/* --- FOOTER --- */
footer {color: #888; padding: 50px 0; }
.footer-content { display: flex; justify-content: space-between; }
.contact-info h4 { color: white; margin-bottom: 15px; }
.copyright { align-content: center;}
.contact-info img {width: 100%; height: auto;}



/* --- RESPONSIVE (MOVIL) --*/
@media (max-width: 880px) {
.grid-item img {
    width: 100%;
    height: auto;
        min-width: 160px;
}
.grid-container {
    display: flex;
    flex-wrap: wrap;
}


  .cols{
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex-items:nth-child(3) img {
    width: 55%;
    height: auto;
        top: 2%;
    position: relative;
        min-width: 300px;
}
.t1{
font-size: 30px;

}

.t2{
font-size: 18px;
}

.t3{
font-size: 14px;
}
}

@media (max-width: 760px) {
.flex-items:nth-child(1) {
  max-width: 30%;
}

.flex-items:nth-child(2) {
    max-width: 70%;
}

.flex-items:nth-child(3) {
  display: block;
  background-image: url(img/f1.png);
  background-repeat: no-repeat;
 background-size: contain;
    width: 90%;
    background-position: bottom;
    height: 335px;
}
.flex-items:nth-child(3) img {
    width: 55%;
    height: auto;
        top: 12%;
    position: relative;
        min-width: 300px;
}
.left {
  max-width: 90%;
}
.right {
    max-width: 90%;

}
.s1 {
  max-width: 90%;
}
.s1 img {
left: 0px;
position: relative;
 }

.s2 {
    max-width: 60%;
}
iframe {
 width: 100%;  
height: auto;  

}
}
/* Estilos iniciales del botón (oculto en desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--primary);
    cursor: pointer;
}

/* Ajustes Responsive (Móvil) */
@media (max-width: 880px) {
   .i1 {
    width: 90%;
}
   
    .i2 {
    width: 60%;
    padding-top: 40px;
}
  
  #programa{
background: none;
}
.section-title {
    font-size: 24px;
    letter-spacing: 5px;
}
.linea {
    height: 7px;
    width: 193px;

}
  
    .menu-toggle {
        display: block; /* Mostrar botón hamburguesa */
    }

    .menu {
        display: none; /* Escondemos el menú por defecto */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Justo debajo de la navbar */
        left: 0;
        width: 100%;
        background: white;
        padding: 20px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        gap: 15px;
    }

    /* Clase que activaremos con JavaScript */
    .menu.active {
        display: flex;
    }

    .menu li {
        width: 100%;
        text-align: center;
    }

    .btn-nav {
        display: block;
        width: 100%;
    }
}