:root{
	
	--campo_heightTW: 22px;
	--campo_heightW: 35px;
	--margin-bottomW:3px;
	
	--W2:linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.00) 100%); 
	--campo_letra_spaceW:-0.2px;
	--W2size:14px; 
	--W2letra:#000000; 
	--W2borde:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(1,38,46,1) 100%); 
	--esquinaW:6px;/*solo un digito round conerF4F7FC FF3644*/
	--W2weight:700;
	
	--campo_letra_sizeW:13px;
	--campo_letra_space_campoW:-0.3px;
	--campoW:#ffffff; 		--campoWletra:#1B1B1B; 		--campoWborde:#BBBBBB; 		 
	--campoWover:#F5F5F5; 	--campoWoverletra:#ff0000; 	--campoWoverborde:#4CAF50; 	 
	--campoWfocus:#ffffff; 	--campoWfocusletra:#ff0000; --campoWfocusborde:#4CAF50; 
	--PHcampoW:#3756AB;
		--fuente:'Poppins', "Trebuchet MS", Arial; 
	--boton:#C50000; 		--botonletra:#ffffff; 		--botonround:8px;
	--botonover:#9F0000; 	--botonoverletra:#ffffff; 	--botonoverround:8px;
}
body, html {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
/*overflow-x: hidden;  Evita scroll horizontal */
font-weight:300;
font-size: 16px;/* este valor afina a que 1rem es equivalente a 16px*/
}
 div, input, textarea { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

.tabla_main{width: 1200px; margin: auto; display: block; padding: 0px 30px; text-align: justify;}
@media only screen and (max-width: 618px) {
.tabla_main{width: 100%; }
}
p{ text-align: justify; font-size: 1rem; }


  /* Fondo Parallax index */
.parallax {
    background-image: url('corcovado_web2.jpg'); /* Reemplaza con tu imagen */
    background-attachment: fixed;
    background-size: cover;
    background-position: center -550px;
    height: 40vh;
    position: relative;
    display: flex;
    align-items: flex-start;
    color: white;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 85%, 75% 89%, 45% 80%, 18% 90%, 0 85%); /* Borde inferior irregular */
}


#index .parallax {
background-image: url('corcovado_web2.jpg'); /* Reemplaza con tu imagen */
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 100vh;
position: relative;
display: flex;
align-items: flex-start;
color: white;
text-align: center;
clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 85%, 75% 89%, 45% 80%, 18% 90%, 0 85%); /* Borde inferior irregular */
}



.parallax::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro al 10% */
    z-index: 1; /* Coloca el pseudo-elemento por encima del fondo */
    clip-path: inherit; /* Mantén el mismo borde inferior irregular */
}


.parallax > * {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté encima del fondo negro */
}




.contenido1 {
border-radius: 8px;
text-align: center;
width:600px;
margin: 0px auto 60px auto;
}
.contenido1 h1 {
font-size: clamp(2rem, 2.2vw, 6rem); letter-spacing: -2px; margin-bottom: 0px;
}
@media only screen and (max-width: 618px) {
.contenido1 {
width:100%; 
margin: 0px auto 60px auto;
}
}



.contenido2 {

border-radius: 8px;
text-align: center;
width:600px; margin:150px auto 150px auto;
}
.contenido2 h1 {
font-size: 40px; letter-spacing: -2px; margin-bottom: 0px;
}	

@media only screen and (max-width: 618px) {
.contenido2 {
border-radius: 8px;
text-align: center;
width:90%; margin:150px auto 150px auto;
}
}



.form600 {width: 600px; margin: auto;}

@media only screen and (max-width: 618px) {
.form600 {width:80%;}
}




.boxtop{width:1200px; 
			/*background-color:rgba(255,255,255,0.2); */
			padding: 20px; 
			margin: 0px auto;
 text-shadow: 1px 1px 1px rgba(0,0,0, 1), 2px 2px 2px rgba(0,0,0, 1) ,3px 3px 3px rgba(0,0,0, 1);}




.boxtop H1{ font-size: 3rem;   }




@media only screen and (max-width: 618px) {
.boxtop{width:100%; 
}}





		.top{  display: grid;
  grid-template-columns: 230px 1fr 50px 50px;
justify-items:left; font-size: 1.01rem;

grid-column-gap:20px; width:1200px;   }
@media only screen and (max-width: 618px) {
		.top{   width:100%; }
}



		.btop{border-bottom: 1px solid rgba(255,255,255,0.2); margin: 25px 0px; display: flex;  width:100%;   text-align: left }
		
	/*loro*/
		 .image-container {
      opacity: 0; /* Oculta la imagen al inicio */
      position: absolute;
      top: 50%; /* Centra verticalmente */
      transform: translateY(-50%) translateX(100%); /* Fuera de la pantalla a la derecha */
      animation: slideIn 2s ease-out forwards; /* Define la animación */
    }









    img {
      width: 50vw; /* Ajusta la imagen al 50% del ancho del viewport */
      max-width: 500px; /* Tamaño máximo para pantallas grandes */
      height: auto; /* Mantiene la proporción */
    }

    @keyframes slideIn {
      0% {
        opacity: 0; /* Comienza con transparencia */
        transform: translateY(-35%) translateX(300%); /* Comienza fuera del viewport */
      }
      100% {
        opacity: 1; /* Aparece completamente visible */
        transform: translateY(-35%) translateX(50vw); /* Llega al 40% del ancho */
      }
    }

    /* Media queries para dispositivos más pequeños */
    @media (max-width: 768px) {
      img {
        width: 70vw; /* Ajusta la imagen al 70% del ancho del viewport */
      }
    }

    @media (max-width: 480px) {
      img {
        width: 90vw; /* La imagen ocupa casi todo el ancho del viewport en móviles */
      }
    }
		.boxt{width: 50%; text-align: justify; padding-top: 150px;}
		.t1{ font-size: 2.8vw; font-weight: 500; letter-spacing: -0.14vw; line-height: 50px;}
		.t1a{ font-size: 2vw; font-weight: 500; letter-spacing: -0.14vw; line-height: 40px;}
		
		.t2{  font-weight: 300;}
		

	
		
	.titul1 {
		width:600px; text-align: center; margin: 0px auto 60px auto;
}
@media only screen and (max-width: 618px) {
	.titul1 {
		width:100%;
}
}
		.titul1 h1 {
		font-size: 40px; letter-spacing: -2px; margin-bottom: 0px;
}
		
		.A1{  display: grid;
  grid-template-columns: 1fr 1fr;
justify-content:flex-start ;
	text-align: justify;
align-items: flex-start;
grid-column-gap:20px; padding: 20px; }
		
		.post-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}
@media only screen and (max-width: 618px) {
		.post-grid {
    display: grid;
       grid-template-columns:  1fr;
    gap: 15px;
    margin-top: 20px;
}
}

.post-box {
    background: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.post-box img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 5px;
}

.post-box h2 {
    font-size: 18px;
    margin-top: 10px;
}

.post-box p {
    font-size: 14px;
    color: #666;
}

.btn {
    display: inline-block;
    padding: 8px 15px;
    background: #007BFF;
    color: white;
    border-radius: 3px;
    text-decoration: none;
    margin-top: 10px;
}

.btn:hover {
    background: #0056b3;
}
.boton1{ -webkit-appearance: none; 
border-radius: 6px;
border:1px solid #d92000;
padding: 9px;
min-width: 150px;
font-size: 16px;
background-color: #BE0000;
color: #fff;
display: inline-grid; text-align: center; margin-top: 20px;
}
.boton1:hover{ -webkit-appearance: none;
background-color: #D82800; color: #fff;}
.bloque1_pre h1{text-align: center;margin: auto;}



.bloque1_pre{width: 1200px; margin: auto;}
.bloque1 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 100%;
margin: 20px auto;
}



@media only screen and (max-width: 618px) {
.bloque1_pre{width: 100%;}

.bloque1 {
grid-template-columns: repeat(1, 1fr);

max-width: 80%;
margin: 20px auto;
}


}	



/**/
.container_pre {
width: 100%;
display: grid;
background-color: #003629;
margin: 100px 0px;
}.container {
width: 900px;
height: 70vh;
display: grid;
grid-template-columns: repeat(5, 1fr);
background-image: url('images/corcovado-national-park.jpg');
background-size: cover;
background-position: center;
transition: background-image 0.5s ease;
margin: auto;
}
@media only screen and (max-width: 618px) {
.container {
width: 100%;
}
}
.grid-item {
border-right: 1px solid white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
cursor: pointer;
position: relative;
transition: background-color 0.3s ease;
}

.grid-item h2 {
margin: 0;
font-size: 1.5em;
z-index: 2;
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
}

.grid-item a {
position: absolute;
bottom: 40px;
padding: 10px 20px;
background: white;
color: black;
text-decoration: none;
font-size: 1em;
border-radius: 5px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.grid-item:hover a {
opacity: 1;
transform: translateY(0);
}
.grid-item:hover {
background-color: rgba(0, 0, 0, 0.4);
}
/**/

/*cajon1*/
.cajon1 {
display: grid;
grid-template-columns: 1fr 1fr;
height: 500px;
}

.text-column {
background-color: #003639; /* Color verde */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 20px;
}
.ccta2{font-size: 2rem; font-weight:700; color: #000; text-align: left!important; letter-spacing: -1.5px;}
.image-column2 {
background-image: url('images/danta.jpeg'); /* Reemplaza con tu imagen */
background-size: cover;
background-position: center;
width: 100%;
height: 500px;
transition: box-shadow 0.3s ease; /* Transición suave */
}

/* Efecto hover */
.image-column2:hover {
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7); /* Sombra oscura al pasar el mouse */
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
.cajon1 {
grid-template-columns: 1fr; /* Una sola columna */
grid-template-rows: auto auto;
}

.image-column2 {
height: 300px; /* Ajustar altura en pantallas pequeñas */
}
}
/*cajon1*/
.titul1 {
width:600px; text-align: center; margin: 0px auto 60px auto;
}
.blogs H1{text-align: center; font-size: 35px;}
.articulos_box{  
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-items:center;
align-items:center;
grid-gap:20px;
width:1200px; margin:0 auto 50px auto; }


@media only screen and (max-width: 618px) {
.articulos_box{  
display: grid;
grid-template-columns: 1fr;
justify-items:center;
align-items:center;
grid-gap:20px;
width:90%; margin: auto; }
}	











.articulo{
width: 100%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
height: 430px;
}
.articulo_img{height: 250px; width:100%; display: grid; background-size: cover; background-repeat: no-repeat;}

.art-titulo{
padding: 30px 40px 0px 40px;
font-size: 18px;
font-weight:700;
}
.art-text{
padding: 0px 40px 0px 40px;
font-size: 14px;
font-weight:300;
text-align: justify;
}

.grren_pre{background-color: #032546; width:100%; margin: 100px auto; color: white; padding: 100px 0px;}
.grren{width: 1200px; margin: auto; display: grid; 
grid-template-columns: 1fr 1fr 1fr;
justify-items:center;
align-items:center;
grid-column-gap:10px;
	text-align: center; 
}


@media only screen and (max-width: 618px) {
.grren{width: 100%;}
}	


.counter-container {
display: flex;
justify-content: center;


}
.counter-box {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
font-size: 24px;
font-weight: bold;

}
.counter {
font-size: 40px;
color: white;
font-weight:700;
}


.W{
display: grid;/*cada input2 tiene el ancho de las celtas*/
grid-column-gap:0px;
width: 100%;
margin-bottom:var(--margin-bottomW);

}
.W1{ display:grid; align-items:center;  
	padding:6px 0px 6px 12px; 
	border-radius:4px  0px 0px 4px; 
	border:0px;}
.W2{ 
	display:grid; 
	align-items:center;  
	width: 100%; 
	color:var(--W2letra); 
	background:var(--W2); 
	letter-spacing:var(--campo_letra_spaceW); 
	margin-top: 5px;
	font-size: var(--W2size) !important; 
	border-radius:var(--esquinaW);
	border:1px solid var(--W2borde); 
	font-weight:var(--W2weight); 
}
.W3{ 
	display:block; 
	width: 100%; 
}
.W4{ 
	display:block; 
	font-size:12px; 
	padding:10px 0px 0px 4px; 
	color:#CCC; 
}
.W4:hover{ 
	display:block;  
	float:left; 
	font-size:14px; 
	padding:10px 0px 10px 4px; 
	color:#000; 
	cursor:pointer;
}
.campoW {
	margin: 0px;	
	border-radius: var(--esquinaW);
	box-sizing: border-box;
	border: 1px solid var(--campoWborde);
	
	height:var(--campo_heightW);
	font-size:var(--campo_letra_sizeW);
	padding:4px 9px 4px 9px;
	background-color:var(--campoW);
	-webkit-appearance: none;
	text-align:left;
	color: var(--campoWletra);
	font-family: inherit;
	transition:  0.5s;
	outline:0px;
	width: 100%;
	letter-spacing:var(--campo_letra_space_campoW);
}
.campoW:hover {
	font-family: inherit;
	border-radius: var(--esquinaW);
	box-sizing: border-box;
	border: 1px solid var(--campoWoverborde);
	height:var(--campo_heightW);
	font-size:var(--campo_letra_sizeW);
	padding:4px 9px 4px 12px;
	background-color: var(--campoWover);
	-webkit-appearance: none; 
	letter-spacing:var(--campo_letra_space_campoW);
	color: var(--campoWoverletra);
	transition:  0.15s;
	outline:0px;
}
.campoW:focus {
	font-family: inherit;
	color: var(--campoWfocusletra);
	-webkit-appearance: none;
	background-color: var(--campoWfocus);
	padding:4px 9px 4px 15px;
	transition:  0.15s;
	outline:0px;
	border: 1px solid var(--campoWfocusborde);
	border-radius: var(--esquinaW);
	letter-spacing:var(--campo_letra_space_campoW);
}
.campoW::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--PHcampoW); font-size:var(--campo_letra_sizeW);
}
.campoW::-moz-placeholder { /* Firefox 19+ */
  color: var(--PHcampoW); font-size:var(--campo_letra_sizeW);
}
.campoW:-ms-input-placeholder { /* IE 10+ */
  color: var(--PHcampoW); font-size:var(--campo_letra_sizeW);
}
.campoW:-moz-placeholder { /* Firefox 18- */
  color: var(--PHcampoW); font-size:var(--campo_letra_sizeW);
}

@media only screen and (max-width: 718px) {
 .W{
	 grid-template-columns: 1fr !important;
	 width: 100%;
	 margin: auto;
}
	.W2{ 
	display:grid;
	align-items:center;  
	width: 100%; 
	color:var(--W2letra); 
	background:var(--W2);
	letter-spacing:var(--campo_letra_spaceW); 
	height:var(--campo_heightW);
	padding:6px 0px 6px 12px;   
	font-size: var(--W2size); 
	border-radius:var(--esquinaW) var(--esquinaW) 0 0;
	border:1px solid var(--W2borde);  
	border-bottom: 0px;
	}
	
.campoW {
	
	border-radius:  0 0 var(--esquinaW) var(--esquinaW);
	box-sizing: border-box;
	border: 1px solid var(--campoWborde);
	border-top: 0px;
	width: 100%;
	margin-bottom: 10px;
	border-left: 1px solid var(--campoWborde);
}
.campoW:hover {
	color: var(--campoWoverletra);
	border: 1px solid var(--campoWoverborde);
	font-family: inherit;
	border-radius:  0 0 var(--esquinaW) var(--esquinaW);
	box-sizing: border-box;
	border-top: 0px;
	padding:4px 9px 4px 9px;
	-webkit-appearance: none; 
	transition:  0.2s;
	outline:0px;
}
.campoW:focus {
	color: var(--campoWfocusletra);
	border: 1px solid var(--campoWfocusborde);
	font-family: inherit;
	-webkit-appearance: none;
	border-radius:  0 0 var(--esquinaW) var(--esquinaW);
	background-color: #ffff;
	border-top: 0px;
	padding:4px 9px 4px 9px;
	transition:  0.2s;
	outline:0px;

	
}	
}

.boton, a.boton:link, a.boton:visited  {
	font-family: var(--fuente);
	letter-spacing:-0.5px;
font-size: var(--Parrafosize);
	color:  var(--botonletra);
	margin: auto;
	font-weight: normal;
	padding: 13px 20px;
	background-color: var(--boton);
	text-decoration: none;
	border: 0px;
	display: inline-block;
	border-radius:  var(--botonround);
	transition: 0.1s;
}
.boton:hover, a.boton:hover {
	font-family: var(--fuente);
	letter-spacing:-0.5px;
	font-size: var(--Parrafosize);
	color: var(--botonoverletra);
	margin: auto;
	font-weight: normal;
	padding: 13px 20px;
	background-color: var(--botonover);
	text-decoration: none;
	border: 0px;
	display: inline-block;
	border-radius: var(--botonoverround);
	transition: 0.1s;
}