html * {
        font-family:  Calibri, Helvetica, sans-serif !important;
    }
    
    body, html {
        height: 100%;
    }
    
    h1, h2, h3, h4, p {
        color: rgb(0, 0, 0);
    }
    h5 {
        color: rgb(0, 0, 0);
    }
    .instrucciones {
        background-color: #efefe4;
        padding: 20px;
        border-radius: 8px;
        margin-top: 15px;
    }

    .instruccionesazul {
        background-color: #dee7ed;
        padding: 20px;
        border-radius: 8px;
        margin-top: 15px;
    }

    .instruccionesrosa {
        background-color: #f1dce7;
        padding: 20px;
        border-radius: 8px;
        margin-top: 15px;
    }
    a:link {
        color: #CCCCCC;
        background-color: transparent;
        text-decoration: underline;
      }
      
      a:visited {
        color: #CCCCCC;
        background-color: transparent;
        text-decoration: underline;
      }
      
      a:hover {
        color: #0080ff;
        background-color: transparent;
        text-decoration: underline;
      }
      
      a:active {
        color: #CCCCCC;
        background-color: transparent;
        text-decoration: underline;
      }
    
      /* texto y boton de enviar: container, rigth, left, input y button */
      .container {
        display: flex;
        
    }
    
    .right {
        width: 100px;
        
    }
    
    .left {
        flex-grow: 1;
        
    }
      input {
        border: 1px solid lightgrey;
        padding: 15px 25px 15px 25px;
        
    }

    button {
        font-size: 1.2em; 
        border: 2px solid gray;
        background: lightgray;
        color:red;
        padding: 20px;
        border-radius: 8px;
    }

    button:hover {
        background-color: #eab0a6; /* Efecto hover para el botón */
    }
    .sendbutton {
        font-size: 1.2em; 
        border: 2px solid gray;
        background: lightgray;
        color:green;
        width: fit-content;
        padding: 20px;
        border-radius: 8px; 
    }

    .sendbutton:hover {
        background-color: #94d397; /* Efecto hover para el botón */
    }

    .bg {
        /* Full height */
        height: 100%;
  
        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    header {
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #78cde5;
        color: #fff;
        padding: 0px;
    }

        .caja_global{
            text-align: center;
            position: absolute;
            top: 150px;
            left: 50%;
            width: 950px;
            transform: translate(-50%, 0) scale(1);
            pointer-events: auto;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.7);
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.1);
            border-radius: 5px;
            text-align:left;
            padding: 30px 15px; /* to center vertically (30px) */
        }
        .caja_flex{
            display: flex;
        }
        .caja_dcha{
            width:30%;
            height:150px;
            border: 3px solid rgb(70, 70, 70);
            padding: 5px 15px; /* to center vertically (5px) */
            background: transparent;
        }
        .caja_izda{
            margin: auto;
            width:70%;
            height:150px;
            border: 3px solid rgb(70, 70, 70);
            text-align:center;
            padding: 5px 15px; /* to center vertically (5px) */
            background: transparent;
        }

        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
          }

          

        @media screen and (max-width: 1000px) {  /* when the viewport is 1000px or smaller */
            .caja_global {
                width: 95%;
                top: 20px;
            }
            .caja_flex{
                flex-direction: column;
            }
            .caja_dcha{
                width:95%;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
            .caja_izda{
                width:95%;
                
                text-align:center;
            }

        }
        footer{
            /* height: 90px; */
            border-top: 1px solid lightgrey;
            padding: 5px 10px;
        }