@import url("https://use.typekit.net/cum1tpu.css");
:root {
	--uno: #A609F0;
	--dos: #FFFFFF;
	--tres: #2E3192;
	--cuatro: #FE8618;
	--cinco: #C8C9EE;
	--seis:#FAFFED;
	--siete: #392B74;
	--ocho: #706F6F;
	--nueve: #707070;
	--diez: #CAB5FC;
	--once: #F2FDD3;
	--doce: #F9FCF4;
	--trece: #000000;
}
@font-face {
	font-family: "Museo_Sans_100";
    src: url("../fonts/MuseoSans-100.otf");
    font-weight: 100;
}
@font-face {
	font-family: "Museo_Sans_300";
    src: url("../fonts/MuseoSans-300.otf");
    font-weight: 300;
}
@font-face {
        font-family: "Museo_Sans_500";
        src: url("../fonts/MuseoSans-500.otf");
        font-weight: 500;
}
    @font-face {
        font-family: "Museo_Sans_700";
        src: url("../fonts/MuseoSans_700.otf");
        font-weight: 700;
    }
    @font-face {
        font-family: "Museo_Sans_900";
        src: url("../fonts/MuseoSans_900.otf");
        font-weight: 900;
    }
	@font-face {
		font-family: "gobCL_regular";
		src: url("../fonts/gobCL_Regular.otf");
	}
	@font-face{
		font-family:"gobCL_bold";
		src: url("../fonts/gobCL_Bold.otf");
	}
	@font-face{
		font-family:"gobCL_heavy";
		src: url("../fonts/gobCL_Heavy.otf");
	}
	.font_ms100{
        font-family: "Museo_Sans_100";
    }
    .font_ms300{
        font-family: "Museo_Sans_300";
    }
    .font_ms500{
        font-family: "Museo_Sans_500";
    }
    .font_ms700{
        font-family: "Museo_Sans_700";
    }
    .font_ms900{
        font-family: "Museo_Sans_900";
    }
	.font_gr{
	font-family: "gobCL_regular";

	}
	.font_gb{
		font-family:"gobCL_bold";
	}
body{
	 font-family: "Museo_Sans_500";
	font-weight: 500;
	font-style: normal;
}
.text-color-uno{
	color: var(--uno);
}
.text-color-dos{
	color: var(--dos);
}
.text-color-tres{
	color: var(--tres);
}
.text-color-cuatro{
	color: var(--cuatro);
}
.text-color-cinco{
	color: var(--cinco);
}
.text-color-siete{
	color: var(--siete);
}
.text-color-ocho{
	color: var(--ocho);
}
.text-color-nueve{
	color: var(--nueve);
}
.text-color-doce{
	color: var(--doce);
}
.text-color-trece{
	color: var(--trece);
}
.bg-color-uno{
	background-color: var(--uno);
}
.bg-color-dos{
	background-color: var(--dos);
}
.bg-color-tres{
	background-color: var(--tres);
}
.bg-color-cuatro{
	background-color: var(--cuatro);
}
.bg-color-cinco{
	background-color: var(--cinco);
}
.bg-color-seis{
	background-color: var(--seis);
}
.bg-color-diez{
	background-color: var(--diez);
}
.bg-color-once{
	background-color: var(--once);
}
.bg-color-doce{
	background-color: var(--doce);
}
.border-color-cinco{
	border-color: var(--cinco)!important;
}
.fs-12{
	font-size: 0.95rem;
}
.fs-16{
	font-size: 1rem;
}
.fs-18{
	font-size: 1.13rem;
}
.fs-20{
	font-size: 1.25rem;
}
.fs-23{
	font-size: 1.44rem!important;
}
.fs-24{
	font-size: 1.5rem;
}

.fs-26{
	font-size: 1.625rem!important;
}
.fs-30{
	font-size: 1.9rem;
}
.btn_verde_fija{
	z-index: 5;
    position: fixed;
    right: 0px;
    top: 75%;
    width: max(180px, 10%);
	background-color: var(--uno);
	color: #fff;
	box-shadow: 3px 6px 0px #11142780;
	opacity: 1;
	text-align: center;
	height: 70px;
	font-size: 1.99rem;
	line-height: 50pt;
}

.d-grid-5{
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* 5 columnas de igual tamaño (1fr) */
 	gap: 10px; /* Espacio entre columnas y filas */
}
.nav-list{
	display: flex;
}
.nav-list li {
  position: relative;
}
.nav-list li {
  position: relative;
}
/* Dropdown oculto por defecto */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* debajo del padre */
  left: 0;
  background: var(--dos);
  border: 1px solid var(--cuatro);
  border-radius: 6px;
  padding: 0.5rem 0;
  min-width: 200px;
  z-index: 1000;
}

/* Estilo de items */
.dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--tres);
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background: var(--cuatro);
  color: #fff;
}

/* Mostrar dropdown en hover (desktop) */
.dropdown:hover > .dropdown-menu {
  display: block;
}

/* Tercer nivel: se abre a la derecha */
.dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.2rem;
}
.cuadro-info{
	border: 5px solid rgba(0, 0, 0, 0.7);
	font-family: "Museo_Sans_500";
	background-color: var(--dos);
	font-size: 1rem;
	color: var(--trece);
	padding: 15px 25px;
	width: min(690px, 90%);
	margin: 0px auto;
	margin-top: 48px;
}
.cuadro-info a{
	background-color: #7b46f8;
	color: var(--dos);
	padding: 10px 20px;
	text-decoration: none;
}
.cuadro-info h4{
	font-family: "Museo_Sans_700";
	font-size: 1.225rem;
	color: #fe66ce;
}
.cuadro-info h4:nth-child(1){
	color: #7b46f8;
}
.sec_naranja .tarjeta{
	border: 4px solid var(--cinco);
	max-width: min(326px, 90%);
}
.interno .container h2{
	color: var(--siete);
	font-size: 2.25rem;
	font-family: "Museo_Sans_900";
	padding-top: 73px;
	padding-bottom: 24px;
}
.interno .container p{
	font-family: "gobCL_regular";
	font-size: 1.25rem;
	line-height: 1.5rem;
}
.interno .container ul li{
	margin-bottom: 1.5rem;
}
.interno .container ul li strong{
	font-family:"gobCL_bold";
	font-size: 1.25rem;
	line-height: 1.5rem;
}
.interno .container .caja_nota{
	background-color: var(--dos);
	color: var(--uno);
	border: solid 1px var(--uno);
	padding-top: 2rem;
	padding-bottom: 4rem;
	padding-left: 2.75rem;
	padding-right: 2.25rem;
	margin-bottom: 3.25rem;
	margin-top: 2.75rem;
}
.interno .container .caja_nota h4{
	font-family:"gobCL_heavy";
	font-size: 2.25rem;
	line-height: 2.55rem;
	margin-bottom: 1.38rem;
}
.interno .container .caja_nota li::marker{
  font-size: 2rem; 
}
.interno .container .caja_nota ul li{
	font-family: "gobCL_regular";
	font-size: 1.25rem;
	line-height: 1.5rem;
}
.interno .container .caja_nota ul li strong{
	font-family:"gobCL_bold";
	font-size: 1.25rem;
	line-height: 1.5rem;
}
.interno .container details{
	border: solid 1px var(--uno);
	padding-top: 1.25rem;
	padding-left: 1.2rem;
	padding-right: 4rem;
	background-color: var(--dos);
	margin-bottom: 4rem;
} 
details summary::-webkit-details-marker {
	display: none; /* Oculta la flecha en Safari/Chrome */
}
details summary {
	list-style: none; /* Oculta la flecha nativa en Firefox, por ejemplo */
}
	
   
.interno .container details summary{
	font-family:"gobCL_bold";
	font-size: 1.82rem;
	line-height: 2.2rem;
	margin-bottom: 1.38rem;
	color: var(--uno);
	 display: flex;
	 justify-content: space-between; /* Mueve los elementos a los extremos */
  align-items: center; /* Alinea los elementos verticalmente */
}
 .interno .container details summary::after {
          content: "\25BC"; 

			transition: transform 0.2s; /* Animación de rotación */
	
      }
 .interno .container details[open] summary::after {
  content: '\25B2'; /* Símbolo para el estado abierto */
}
.interno .container details div ol  {
	 list-style: none; /* Elimina los números por defecto */
  counter-reset: custom-counter; /* Reinicia un contador personalizado */
  padding-left: 3.78rem; /* Elimina el padding izquierdo predeterminado */
}
.interno .container details div ol >li{
	font-family:"gobCL_regular";
	font-size: 1.25rem;
	color:#000000;
	margin-bottom: 2rem;
	 counter-increment: custom-counter; /* Incrementa el contador por cada elemento li */
  position: relative; /* Posiciona el elemento para el pseudo-elemento */
  padding-left: 55px; /* Crea espacio para el número con el borde */
 
}
.interno .container details div ol > li::before {
	content: counter(custom-counter); /* Muestra el valor del contador */
  background: var(--dos); /* Fondo naranja */
  color:var(--cuatro); /* Texto blanco para el número */
  border-radius: 50%; /* Borde circular */
  border: 2px solid var(--cuatro); /* Borde naranja oscuro */
  width: 40px; /* Ancho fijo para el círculo */
  height: 40px; /* Alto fijo para el círculo */
  display: flex; /* Utiliza flexbox para centrar el número */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  position: absolute; /* Posiciona el pseudo-elemento de forma absoluta */
  left: 0; /* Lo alinea a la izquierda del elemento li */
  font-family:"gobCL_bold";
  font-size: 1.75rem;
}
.interno .container details div ol ul{
	 list-style: disc; 
  padding-left: 20px; 
}
.interno .container details div ol ul li{
	font-family:"gobCL_regular";
	font-size: 1.25rem;
	color:#000000;
	line-height: 1.5rem;
}
.interno .container details div ol ul li::marker{
	color: var(--cuatro);
	 font-size: 2rem;
}
.interno .container details div ol li li{
	padding-left: 0; 
}

.interno .container details div ol li strong{
	font-family:"gobCL_heavy";
}
.interno .container .ayuda{
	border-left: 1rem solid var(--uno);
	padding-left: 1.25rem;
}
.interno .container .ayuda h4{
		font-family:"gobCL_heavy";
	font-size: 2rem;
	line-height: 2.55rem;
	margin-bottom: 1.38rem;
	color: var(--uno);
}
.interno .container .ayuda p{
		font-family:"gobCL_regular";
	font-size: 1.25rem;
	line-height: 1.5rem;
	color: var(--uno);
}
.interno .container .ayuda h5{
		font-family:"gobCL_heavy";
	font-size: 1.44rem;
	line-height: 2.25rem;
	color: var(--uno);
}
.interno .container .ayuda ul li{
	font-family:"gobCL_regular";
	font-size: 1.25rem;
	line-height: 1.5rem;
}
.interno .container section article h3{
	background-color: var(--uno);
	color: var(--dos);
	font-family:"gobCL_bold";
	font-size: 2.2rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1.25rem;
}
.interno .container section article details{
	border: 1px solid var(--nueve);
	padding-left: 2rem;
	padding-right: 1.25rem;
	margin-bottom: 2rem;
}
.interno .container section article details summary{
	color: var(--tres);
	font-size: 1.85rem;
}
.interno .container section article details div{
	font-family:"gobCL_regular";
	font-size: 1.25rem;
	color: var(--nueve);
	text-align: start;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}
.interno .container .p_ext div ul li::marker{
	color: var(--cuatro);
	 font-size: 2rem;
}
.interno .container .uno li::marker{
	color: var(--uno);
	font-size: 1.5rem;
}
/*  ..................... responsive .........................  */
		/* Smartphones (portrait and landscape) ----------- */  
		@media only screen and (min-width : 320px) and (max-width : 767px) {  
			.fs-18{
				font-size: 0.7rem;
			}
			footer .col-2 img{
				transform: scale(1.4);
			}
			.nav-list {
				flex-direction: column !important;
				align-items: stretch;
				display: none;
			}
			.nav-list.show {
				display: flex;
				padding-left: 3rem;
			}
			.dropdown-menu {
				position: static;
				border: none;
				border-radius: 0;
				min-width: auto;
				padding-left: 1rem;
			}
				.hamburger {
				display: block;
			}
			.btn_verde_fija{
			width: 40%;
			}
		}
		/* Smartphones (horizontal) ----------- */  
		@media only screen and (min-width : 321px) {  
		}  
		/* Smartphones (vertical) ----------- */  
		@media only screen and (max-width : 320px) {  
		}  
		/* iPads (vertical y horizontal) ----------- */  
		@media only screen and (min-width : 768px) and (max-width : 1024px) {  
		}  
		/* iPads (landscape) ----------- */  
		@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {  
		}  
		/* iPads (portrait) ----------- */  
		@media only screen and (min-width : 768px) and (max-width : 1023px)  {  
		}  
		/* Desktops and laptops ----------- */  
		@media only screen and (min-width : 1224px) {  
			.container{
				max-width: 1200px;
			}
		}  
		@media only screen and (min-width : 1200px) {  
		}
		/* Large screens ----------- */  
		@media only screen and (min-width : 1824px) { 
		}
		/* Large screens ----------- */  
		@media only screen and (min-width : 1024px) and (max-width : 1199px) {  
		}
		@media only screen and (min-width : 1200px) and (max-width : 1474px) {  
		}








		.timeline-grid {
    width: min(1400px, 96%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    row-gap: 40px;
    position: relative;
}

/* Celdas normales */
.item {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Segunda fila centrada */
.row2 {
    grid-column: span 2;
}

/* SVG responsivo */
.item svg {
    max-width: 100%;
    height: auto;
}

/* ---------- CLAVE: SVG columna 6 centrado verticalmente ---------- */
.middle-top {
    grid-row: 1 / span 2;         /* ocupa ambas filas */
    display: flex;
    align-items: center;          /* centra verticalmente */
    justify-content: center;
}

/* ----- RESPONSIVE ----- */

/* Tablets: 3 columnas */
@media (max-width: 1024px) {
    .timeline-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .row2 {
        grid-column: span 3;
    }

    /* Columna 6 ahora vuelve a comportamiento normal */
    .middle-top {
        grid-row: auto;
    }
}

/* Móviles grandes: 2 columnas */
@media (max-width: 768px) {
    .timeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .row2 {
        grid-column: span 2;
    }
}

/* Móviles pequeños: 1 columna */
@media (max-width: 480px) {
    .timeline-grid {
        grid-template-columns: 1fr;
    }

    .row2 {
        grid-column: span 1;
    }
}