@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
   
{
	margin: 0;
      	padding: 0;
      	box-sizing: border-box;
}

body
{
      	font-family: 'Source Sans Pro', sans-serif;
      	background-color: black;
      	color: white;
      	overflow-y: scroll;
}

img 
{
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
}

.container 
{
      	display: flex;
      	flex-direction: column;
      	min-height: 100vh;
}

.image-area 
{
      	position: relative;
      	padding: 1rem;
      	display: flex;
      	align-items: center;
      	justify-content: center;
      	background-color: black;
      	height: calc(100vh - 200px);
}


.main-image 
{
  		max-width: 100%;
  		max-height: 100%;
  		object-fit: contain;
  		border: 1px solid #444;
  		transition: opacity 1s ease;
}

.arrow 
{
      	position: absolute;
      	top: 50%;
      	transform: translateY(-50%) scaleY(3);
	transform-origin: center;
      	width: 30px;
      	height: 90px; /* altura triplicada */
      	opacity: 0.3;
      	cursor: pointer;
      	z-index: 2;
      	pointer-events: auto;
}

.arrow path 
{
      	fill: white;
}

.arrow.left 
{
      	left: 10px;
      	transform: translateY(-50%) scaleY(3) rotate(180deg);
      	transform-origin: center;
}

.arrow.right 
{
      	right: 10px;
}

.text-area 
{
      	background-color: white;
      	color: #222;
      	padding: 1rem 4rem;
      	line-height: 1.8;
      	font-size: 1.3rem;
      	margin-bottom: 110px;
}

.text-area h2 
{
       	text-align: center;
      	font-family: 'Source Sans Pro', sans-serif;
      	margin: 0;
      	font-size: 1.8rem;
      	font-weight: 600;
}

.columns 
{
      	display: flex;
      	flex-direction: row;
      	gap: 10rem;
      	border-top: 1px solid #ccc;
}

.column 
{
      	flex: 1;
      	max-width: 50%;
      	text-align: justify;
}

.copyright-footer 
{
  	position: fixed;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	background-color: rgba(0, 0, 0, 0.7);
  	color: rgba(255, 255, 255, 0.7);
  	padding: 8px 0;
  	text-align: center;
  	font-size: 0.75rem;
  	z-index: 100;
  	transition: opacity 0.3s ease;
}

.copyright-footer:hover 
{
  	opacity: 0.9;
}

.copyright-footer p 
{
  	margin: 0;
  	font-family: 'Arial', sans-serif;
  	letter-spacing: 0.5px;
}

.fade-image {
    transition: opacity 0.4s ease-in-out;
    opacity: 1;
}

.fade-image.loading {
    opacity: 0;
}

.comentario 
{
  border-top: 1px solid #888;
  padding: 1rem 0;
  font-size: 1.1rem;
  color: #444;
}

#botonIndice {
  position: fixed;
  bottom: 107px;
  left: 20px;
  background-color: #006699;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: background-color 0.3s ease;
}

#botonIndice:hover {
  background-color: #004d66;
}


.barra-movil {
  display: none;
  position: fixed;
  bottom: 36px;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.85);
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  z-index: 1100;
}

.barra-movil button,
#botonIndiceMovil {
  background-color: #006699;
  color: white;
  border: none;
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
}


@media (max-width: 768px) 
{
    .columns {
        flex-direction: column;
        gap: 2rem;
    }

    .text-area {
        padding: 1rem 1rem;
        font-size: 1rem;
    }

    .column {
        max-width: 100%;
    }

    .text-area h2 {
        font-size: 1.4rem;
    }

	.copyright-footer 
	{
	  	font-size: 0.60rem;
	}
    
    #botonIndice 
    {
    	bottom: 170px;
    }

  	.barra-movil {
    	display: flex;
  	}
  	
  	.flechas 
  	{
  		display: none;
  	}
  	
	#botonIndice {
  		display: none; /* Ocultar el botón original en móvil */
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
    .image-area {
        height: 100vh;
    }
}