footer {
        margin-top: 100px;
        height: 118px;
        border-top: 5px solid rgb(255, 140, 0);
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        align-items: center;
    }

    footer a:hover {
        text-decoration: none;
        border-bottom: 2px solid rgb(255, 140, 0);
        cursor: pointer;
    }

    footer a {
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 22px;
    }

    #copyright {
        color: rgb(255, 255, 255);
        font-size: 22px;
    }

    #agno {
        font-size: 20px;
    }

    #copyright a {
        border-bottom: 2px solid rgb(255, 140, 0);
    }

    #copyright a:hover {
        border-bottom: 2px solid rgb(255, 33, 33);
    }

    /* === Modal personalizado estilo "alert" === */
    .modal {
        display: none;
        /* Oculto por defecto */
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        /* Fondo oscuro translúcido */
        justify-content: center;
        align-items: center;
    }

    .modal-contenido {
        background-color: black;
        color: white;
        font-size: 16px;
        border: 3px solid rgb(255, 195, 14);
        border-radius: 10px;
        padding: 30px;
        width: 80%;
        max-width: 600px;
        text-align: left;
        box-shadow: 0 0 15px rgba(255, 200, 0, 0.4);
        font-family: 'Inter', sans-serif;
    }

    .modal-contenido button {
        margin-top: 20px;
        background-color: rgb(255, 255, 255);
        color: black;
        font-weight: bold;
        border: none;
        border-radius: 8px;
        padding: 10px 25px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .modal-contenido button:hover {
        background-color: rgb(255, 220, 80);
    }

    /* === Footer responsive para pantallas menores de 900px === */
@media (max-width: 900px) {
  footer {
    flex-direction: column;          /* apila los elementos verticalmente */
    align-items: center;             /* centra horizontalmente */
    justify-content: center;
    padding: 25px 0;                 /* espacio interno arriba y abajo */
    gap: 15px;                       /* separación entre los div */
    width: 100%;                     /* ocupa todo el ancho */
  }

  #contacto,
  #copyright {
    width: 90%;                      /* el contenido ocupa el 90% del ancho visible */
    max-width: 600px;                /* opcional: límite para pantallas más grandes */
    text-align: center;              /* centra el texto */
    font-size: 16px;                 /* texto adaptado */
    line-height: 1.5;                /* espacio entre líneas para buena lectura */
    word-wrap: break-word;           /* permite cortes de palabra si es necesario */
    overflow-wrap: break-word;       /* compatibilidad moderna */
  }

  footer a {
    color: white;
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;                 /* evita desbordes */
  }

  footer a:hover {
    border-bottom: 2px solid rgb(255, 140, 0);
  }

  /* Si quieres eliminar los márgenes automáticos del contenido principal */
  body,
  #contenidos {
    margin: 0;
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
  }
}