<?php
// Código PHP aquí
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="http://www.proyecto21fundacion.com/home/in56wm81fy0w/public_html/xmlrpc.php">
    <title>Fundación &quot;Proyecto 21&quot; Andres Felipe Melendez Forero &#8211; Centro especializado en el cuidado Integral de pacientes con discapacidad cognitiva</title>
        <style type="text/css">
    @media only screen and (min-width: 769px) {
    nav ul li {
        display: inline-block; /* Para que el menú sea horizontal */
    }
    main {
        width: 100%; /* Por ejemplo, ajusta el ancho del contenido */
        margin: 0 auto; /* Centra el contenido */
    }
}
@media only screen and (min-width: 769px) {
    nav ul {
        display: inline-block; /* Muestra el menú en pantallas grandes */
    }
  /*  button {
        display: inline-block;
        /*display: none; /* Oculta el botón hamburguesa en pantallas grandes 
    }*/
}
/* Reset básico para unificar estilos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Estilos por defecto para pantallas grandes */
body {
    font-size: 16px;
}

/* Estilos específicos para móviles */
@media only screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
}
h1 {
    color: #2E8B57; /* Verde institucional */
    margin-bottom: 20px;
}
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1, h2, h4 {
            color: #333;
        }
        label {
            font-weight: bold;
            display: block;
            margin-top: 10px;
        }
        input[type="text"], textarea {
            width: 20%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        textarea {
            resize: vertical; /* Permitir que el usuario cambie el tamaño verticalmente */
            min-height: 80px;
        }
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #28a745; /* color verde */
            
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #218838; /* color verde */
        }
            li a {
        display: block;
        /*width: 90%; /*ancho de la franja que cambia de color en el navegador al posicionar el mouse ?? */
        /*background-color: #ddc987; /* color inicial de la franja de navegacion, crema oscuro */ 
       background-color: #f8f32b ; /* color inicial de la franja de navegacion, amarillo */ 
      }
      ul {
           list-style-type: none;
          margin: 0;
          padding: 0;
         overflow: hidden; /* añade un salto de linea a la franja de navegación*/
         background-color: black;/* color al fondo lo que da la impresion de ser un color al margen de la franja de navegación*/
      }
      li a, .dropbtn {
          display: block;
          width:100%; /*ancho de la banda del navegador limitada en anchura ´por la cabecera */
          color: white; /* da color a la fuente del navegador  */
          text-align: center;
          padding: 10px 16px; /* posición del texto de la franja de navegacion */
          text-decoration: none;
          font-size: 24px;/* texto de  navegación */
      }
      li a:hover, .dropdown:hover .dropbtn {
              background-color: green; /* color al posicionar el cursor sobre menu principal*/
      }
      li.dropdown {
          display: block; /* barra de navegacion vertical*/
      }
        .dropdown-content {
            display: none;
            position: absolute; /*el menu desplegable lo hace en frente del titulo ???*/
           
            /*background-color: #f9f9f9; /*?? */
            min-width: 160px 0; /* ancho de la franja del menu que se despliega ???*/
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*?? */
            z-index: 1; /*????  */
        }
        .dropdown-content a {
            color: black; /*color de la fuente del menu que se despliega */
            padding: 100px 160px; /*alto y ancho del menu que se despliega*/
            text-decoration: none;
            display: block;
            text-align: left;
        }
       /* .dropdown-content a:hover {background-color: #f1f1f1}; /* da color blanco al fondo del menu desplegable* del navegador principal*/
        .dropdown-content a:hover {background-color: #f8f32b}; /* da color amarillo al fondo del menu desplegable*/ 


        .dropdown:hover .dropdown-content {
            display: block;/*menu desplegable lateral  */
        }
            .widget-customizer-highlighted-widget {
                outline: none;
                -webkit-box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
                box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
                position: relative;
                z-index: 1;
            }
        .contenedor {
            position: relative; /*si se elimina desaparece el texto*/
            width: 120%; /*influye en el tamaño de la imagen y de la franja del texto*/
        }

        .imagen {
          opacity: 1; /*gradua el nivel de opacidad de la imagen*/
          display: inline-block; /*??*/
          width: 20%;
          height: auto;
          transition: .5s ease;
          backface-visibility: hidden; /*disminuye a la mitad el tamaño de la imagen */
        }
        .medio {  /* oculta el texto y el fondo del mismo*/
          transition: .5s ease; /*???*/
          opacity: 0; /*hace desaparecer o parecer el texto */
          position: absolute; /*posicion de la franja con el texto*/
          top: 50%; /*distancia del borde superior a la cual aparecerá la franja y el texto*/
          left: 40%;/*distancia del borde izquierdo a la cual aparecerá la franja y el texto*/
          transform: translate(-50%, -50%); /*posición de la franja y el texto*/
          -ms-transform: translate(-50%, -50%) /*???*/
        }
        .contenedor:hover .imagen {
          opacity: 0.3; /*grado de transparencia de la imagen al pasar el raton*/
        }
        .contenedor:hover .medio {
          opacity: 1; /*grado de transparencia de la franja y el texto al pasar el raton*/
        }
        .texto {
          /*background-color: #4CAF50;*/
          background-color: green;
          color: white;
          font-size: 16px;
          padding: 16px 32px;
        }
      img.wp-smiley,
      img.emoji {
        display: inline !important;
        border: none !important;
        box-shadow: none !important;
        height: 1em !important;
        width: 1em !important;
        margin: 0 .07em !important;
        vertical-align: -0.1em !important;
        background: none !important;
        padding: 0 !important;
      }
    a:visited,.entry-title 
            a:visited:hover{color:#00c98d;}.navigation.pagination .nav-links .page-numbers.current,.social-menu /* da color a las letras de botones de sistema de gestion y botones de añadir evaluacion */           
                input[type="submit"]:focus{background-color:rgba(47, 191, 40, 0.8);border-color:rgba(47, 191, 40, 0.8);} /*da color al fondo de la pantalla  */
    body{background-color:#c3ccb9;}.navigation.pagination .nav-links .page-numbers.current{color:#c3ccb9;} /* da color al fondo de la pantalla  */
    </style>