@charset "utf-8";

    html, body {
		  height: 100%;
		  margin: 0;
		  padding: 0;
    }
    header {
        background-image: url("imagenes/fondo_cabecera.jpg");
        background-size: 100% 100%; /* Expande la imagen para que llene completamente el contenedor */
        background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
        background-repeat: no-repeat; /* Evita la repetición de la imagen */

    }
    
    
    footer{
        background-image: url("imagenes/fondo_pie.jpg");
        background-size: cover; 
        background-size: 100% 100%; /* Expande la imagen para que llene completamente el contenedor */
        background-position: center center; /* Centra la imagen tanto vertical como horizontalmente */
        background-repeat: no-repeat; /* Evita la repetición de la imagen */

    }
    .titulo{
        color: white;
        text-align: center;
        padding-top: 20px;
    }
    #perfil{
        color: white;
        text-align: center;

    }
    .explicacion {
        background-color: #23235b;
        color: aliceblue;
        height: 250px;
        border-radius: 10px;
        margin: 5px;
        padding: 10px;
        position: relative;
        overflow: auto;
    }
    #diapositiva {

        display: flex; /* Usar flexbox para el diseño */
        align-items: center; /* Centrar verticalmente el contenido */
        justify-content: center; /* Centrar horizontalmente el contenido */
        /* Otros estilos que desees aplicar */
    }
    .botones{
        position: absolute;
        margin: auto;
    }
    nav {
        background-color: coral;
        box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
        text-align: center; /* Centra los elementos horizontalmente */
    }
    
    .links {
        display: inline-block; /* Permite que los enlaces se muestren en línea */
        color: aliceblue;
        text-decoration: none;
        margin: 0 10px; /* Ajusta el espacio entre los enlaces */
    }

    .in{
        width: 50px;
        height: 50px;
    }
    .custom-container {
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto;
    }

    .imgn{
        height: 200px;
        width: 200px;
        margin-bottom: 20px;
        margin-left: 25%;
        margin-right: 25%;
    }
    #imagenContainer1 , #imagenContainer2 {
        position: absolute;
        background-color: black;
        left: 5%;
        transform: translate(0%, -25%);
        display: none; /* Oculta el contenedor inicialmente */
        background-size: contain;
        background-repeat: no-repeat;
        width: 40%; /* Ajusta el ancho según tus necesidades */
        height: 40%; /* Ajusta la altura según tus necesidades */
        z-index: 1; /* Asegura que el contenedor esté por encima del resto del contenido */
    }
    .texton{
        color: white;
        background-color: black;
    }
   #cajon {
        background-color: #23235b;
        box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
        margin: 0 auto;
        margin-top: 50px; 
        color: white;
        max-width: 100%;
    }
    #ini , #crea {
        background-color: black;
        padding: 20px;
    }
    .body-ias{
        background-color: black;
    }
    .cat{
        margin: 0 auto;
        text-align: center;
        color: white;
    }
    .caja{
        margin: 20px;
        background: linear-gradient(to bottom, blueviolet, #af3a3a);
        height: 200px;
        border-radius: 15px; 
        box-shadow: 0 15px 20px  rgba(34, 207, 80, 0.506);
        text-align: center;
        color: aliceblue;
      }
      .caja:hover .links, .caja:hover{
        color: rgba(0, 255, 255, 0.7);/*  Color de neón al hacer hover */
      }

      #contenido{
      width: 100%;
      height: 500px;
        
      }
      .explicacion.expandido {
        height: auto; /* Hacer que la altura sea automática para mostrar todo el contenido */
    }
    .mensaje-indicador {
        color: #999; /* Color de texto más claro para indicar que no es el contenido principal */
        font-style: italic; /* Estilo de fuente cursiva para destacar */
        font-size: 0.9em; /* Tamaño de fuente más pequeño */
        margin-top: 30px;
    }