body {
    background-image: url(img/gifs/fondodigital.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

/*Fuente a usar*/
@font-face {
    font-family: IBM;
    src: url(fonts/Ac437_IBM_VGA_9x16.ttf);
    font-weight: normal;
	font-style: normal;
}

/*----------- SCROLLBAR ------------*/

::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

/*Texto básico*/
p {
    color: greenyellow;
    font-family: IBM;
    letter-spacing: -.3pt;
    line-height: 16pt;
    font-size: 1.3em;
    text-justify: auto;
}

h2 {
    color:burlywood;
    font-family: IBM;
    letter-spacing: -.3pt;
    line-height: 16pt;
    text-justify: auto;
    text-align: center;
    font-size: 2em;

}

h1 {
    font-style: italic;
    color:brown;
    font-family: IBM;
    letter-spacing: -.3pt;
    line-height: 40pt;
    text-justify: auto;
    text-align: center;
    font-size: 5em;
    -webkit-text-stroke:0.1px rgb(240, 120, 240);
}



.contenedorPrincipal{
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
   
.contenedorEnlaces {
    display: inline-block;
    border-style:double; 
    border-width: 10px; 
    width: fit-content;
    height: fit-content;
    margin: 1%;
    text-align: center;
    background-color: black;
    position: relative;
    overflow: hidden;   
}

.contenedorEnlaces:hover .overlay {
    opacity: 1;                       /* aparece */
}


.imagenesEnlaces {
    width: 150px;
    height: 150px;
    
}

.overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);      /* 50 % negro → oscurece */
    opacity: 0;                       /* invisible por defecto */
    transition: opacity 0.3s ease;    /* animación suave */
    display: flex;                    /* centra el texto */
    align-items: center;
    justify-content: center;
}

.overlay-text {
    color: #fff;
    font-family: IBM, sans-serif;
    font-size: 1.4rem;
    text-align: center;
    padding: 0.5rem;
}


footer {
    color:burlywood;
    font-family: IBM;
    margin-top: 100px;
    text-align: center;
    font-size: 2em;
   
}

/* AHORA COMIENZA EL APARTADO PARA LOS TEXTOS PROPIOS*/

.contenedorCentroTexto{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 95vh;     
}

.contenedorTexto {
    display: inline-block;
    border-style:double; 
    border-color: burlywood;
    border-width: 10px; 
    width: 70%;
    height: 70%;
    margin: auto;
    text-align:justify;
    position: relative;
    overflow:scroll;
    overflow-x:hidden; 
}

.cabeceraTitulo{
    display: flex;               /* Flexbox */
    align-items: center;         /* Centra verticalmente */
    gap: 0.8rem;                 /* Espacio entre flecha y título (ajusta a tu gusto) */
}

.textoCabeceraTitulo{
    font-family: IBM;
    font-size: 3em;
    margin: 0;
}

.imagen-centro {
    display: flex;
    justify-content: center;   /* centrado horizontal */
    align-items: center;       /* centrado vertical (si hubiera altura) */
    margin: 2rem 0;
}

.foto {
    display: block;          /* la convierte en bloque */
    margin-left: auto;       /* márgenes automáticos → centrado */
    margin-right: auto;
    max-width: 50%;          /* sigue limitando el ancho */
    height: auto;
    border: 10px ridge yellowgreen;
    cursor: pointer;
}


/* AHORA COMIENZA LA VISUALIZACIÓN MÓVIL*/
@media only screen and (max-width: 1000px) {
   

    .imagenesEnlaces {
    width: 300px;
    height: 300px;
    
    }

/* APARTADO PARA LOS TEXTOS PROPIOS MÓVIL */
    .contenedorTexto {
    width: 100%;
    height: 100%;
    }

    .textoCabeceraTitulo{
    font-size: 4em;
    }

    .overlay-text {
    font-size: 3rem;
    }

}