/* ======================
   RESET BÁSICO
   ====================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #fafafa;
  line-height: 1.6;
}

/* ======================
   HEADER (si usás fijo)
   ====================== */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;          /* ajustá a tu header real */
  background: #111;
  color: #fff;
  z-index: 100;
}

/* Espacio para que el contenido no quede debajo del header */
.main-content {
  padding-top: 100px;   /* header + margen */
}

/* ======================
   SECCIÓN TÉRMINOS
   ====================== */
.terms-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.terms-section h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

/* ======================
   ACCORDION
   ====================== */
.accordion .item {
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

.accordion-btn {
  background: #104f8d;
  color: white;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  font-size: 16px;
  border-radius: 6px;
  transition: background 0.3s ease;

  /* Para que el scroll no quede tapado por el header fijo */
  scroll-margin-top: 100px; /* mismo valor que padding-top del main */
}

.accordion-btn:hover {
  background: #005fa3;
}

.accordion-content {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content p {
  margin: 15px 0;
  color: #444;
}

/* ======================
   FLECHA VOLVER ARRIBA
   ====================== */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: #104f8d;
  color: white;
  font-size: 22px;
  cursor: pointer;
  display: none; /* Oculta al inicio */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: background 0.3s ease;
}

#backToTop:hover {
  background: #005fa3;
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 768px) {
  .terms-section {
    padding: 0 10px;
  }

  .accordion-btn {
    font-size: 15px;
    padding: 12px;
  }

  #backToTop {
    bottom: 20px;
    right: 20px;
  }
}

body {
  font-family: 'Open Sans', sans-serif;
  background: var(--fondo);
}

header{
  width: 100%;
  height:80px;
  background: url(   "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}


nav{
  width: 100%;
  position: fixed;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
	z-index: 10;
	 
}

.nav1{
  background: rgba(255,255,255,0.9);
  height: 80px;
  color:#05336E;
}

.contenedor-nav{
  display: flex;
  margin: auto;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  max-width:90%;
  height:inherit;
  overflow: hidden;
}

nav .enlaces a{
  display: inline-block;
  padding: 5px 0;
  margin-right: 17px;
  font-size: 17px;
  font-weight: 300;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  color: inherit;
}

nav .enlaces a:hover{
  border-bottom: 3px solid #08285B;
  transition: 0.6s;
}

.logo, .logo img{ height:80%;}

.icono{
  display:none;
  font-size: 2 4px;
  padding: 23.5px 20px;
}

.textos{
  width: 100%;
  height: 100%;
  display:flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color:#ffff;
  overflow: hidden;
  text-align: center;
	
}

.textos>h1{font-size:60px;
text-shadow: 1px 2px 3px #202D54 ;
	margin-top: 100px;
	
	
}

.textos>h2{font-size: 40px; font-weight: 300;text-shadow: 1px 2px 3px #202D54}




@media only screen and (max-width: 720px){
	
	 
  .marca-logo{
    width: 80%;
  }

  
	
  .nav2{
    color: #FFFFFF;
  }
.nav2{
    color: #FFFFFF;
  }
  

  
 .textos>h1{font-size: 50px;
		margin-top: -500px;
		margin-bottom: 330px;
	}

  

 
	header{
  width: 100%;
  height:80px;
  background:  url(     "../img/");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	
}



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


  
  .marca-logo{
    width: 80%;
  }

 
	.textos>h1{font-size: 35px;
		margin-top: 200px;
		margin-bottom: -60px;
	}
	
  
header{
  width: 100%;
  height:80px;
  background: url(  "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	.nav1{
		width: 100%;
	}	
	
	}




@media only screen and  (max-width : 420px ){
	
	.nav1{
		width: 100%;
	}	
	.textos>h1{font-size: 30px;
		margin-top: 230px;
		
		
	}

	
	
	header{
  width: 100%;
  height:80px;
  background:url(  "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	}
	
@media only screen and  (max-width: 360px){
	

	.nav1{
		width: 100%;
	}	
	.textos>h1{font-size: 30px;
		margin-top: 120px;
		margin-bottom: 50px;
		
	}

	
	
	header{
  width: 100%;
  height:80px;
  background: url( "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	}

@media only screen and  (min-width: 361px) and (max-width: 375px){


.textos>h1{font-size: 30px;
		margin-top: 200px;
		
		}

	.nav1{
		width: 100%;
	}	
	
	header{
  width: 100%;
  height:80px;
  background: url(  "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	}
@media only screen and  (min-width: 376px) and (max-width: 425px){
	
header{
  width: 100%;
  height:80px;
  background: url( "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}	


.textos>h1{font-size: 30px;
		
		}



	.nav1{
		width: 100%;
	}	
	
	
	}

@media only screen and  (min-width: 426px) and (max-width: 767px){
	

.textos>h1{font-size: 30px;
		margin-top: 120px;
		margin-bottom: 50px;
		}

	.nav1{
		width: 100%;
	}	
	
	header{
  width: 100%;
  height:80px;
  background: url( "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	}

@media only screen and  (min-width: 768px) and (max-width: 1024px){


.textos>h1{font-size: 30px;
		margin-top: 2500px;
		
		}
	.nav1{
		width: 100%;
	}	
	
	header{
  width: 100%;
  height:80px;
  background: url( "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	}
@media only screen and  (max-width: 360px){
	
	.textos>h1{font-size: 30px;
		margin-top: 120px;
		margin-bottom: 50px;
		
	}
	
	.nav1{
		width: 100%;
	}	
	
	header{
  width: 100%;
  height:80px;
  background: url( "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	}	
	
@media only screen and (min-width: 375px) and (max-width: 414px){

	

	.nav1{
		width: 100%;
	}	
	.textos>h1{font-size: 30px;
		margin-top: 230px;
		
		
	}

	
	header{
  width: 100%;
  height:80px;
  background:url( "../img/fotos-cel-cinepolis.webp");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	}
@media only screen and (min-width: 769px) and (max-width: 1290px){
	

	.nav1{
		width: 100%;
	}	
	.textos>h1{font-size: 30px;
		margin-top: 230px;
		
		
	}

	
	header{
  width: 100%;
  height:80px;
  background:url( "");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
	}
	
.imagen  {
	
  transition: transform 0.2s ease;
}

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