@font-face {
            font-family: 'Brandon';
            src: url('../font/Brandon/BrandonText-Thin.ttf') format('truetype');
            font-weight: 100;
        }

        @font-face {
            font-family: 'Brandon';
            src: url('../font/Brandon/BrandonText-Regular.ttf') format('truetype');
            font-weight: 200;
        }

        @font-face {
            font-family: 'Brandon';
            src: url('../font/Brandon/BrandonText-Medium.ttf') format('truetype');
            font-weight: 400;
        }

        @font-face {
            font-family: 'Brandon';
            src: url('../font/Brandon/BrandonText-Bold.ttf') format('truetype');
            font-weight: 600;
        }

        @font-face {
            font-family: 'Brandon';
            src: url('../font/Brandon/BrandonText-Black.ttf') format('truetype');
            font-weight: 800;
        }

        #std {
            background-image: url('../img/banner-fondo.png');
            background-position: center;
            background-position: top;
            background-repeat: no-repeat;
            background-size: cover; /* evita franjas blancas */
            min-height: 100vh; /* mejor que height fijo */
            width: 100%;
            display: flex;
            align-items: start;
        }

        #std p {
            font-family: 'Brandon', sans-serif;
        }

        .reserva {
            color: #ffffff;
            font-size: 2.2rem;
            font-weight: 700;
            margin: 0;
        }

        .fecha {
            color: #ffdc42;
            font-size: 2.2rem;
            font-weight: 700;
            margin-top: 0;
            display: flex;
            align-items: center;
            gap: 5px;
            justify-content: center;
        }

        .aprende {
            color: #ffffff;
            font-size: 1.8rem;
        }

        p.lugar {
            color: #ffffff;
            font-size: 1.25rem;
            background-color: #054fbf;
            padding: 15px 10px;
            border-radius: 0 15px 0 15px;
        }

        .correo,
        .telefono {
            color: #ffffff;
            font-size: 1.1rem;
            font-weight: bold;
        }

        .white {
            background-color: rgba(50, 46, 165,.7);  /* rgba(80, 150, 194, 0.8) */
            color: #054fbf;
            padding: 10px;
            border-radius: 8px;
        }

        img.logo {
            width: 100%;
            max-width: 360px;
            height: auto;
        }

        @media screen and (max-width:768px) {
            img.logo{
                max-width: 300px;
            }
        }

        .clock {
            display: flex;
            justify-content: center;
            background: #ffdc42;
            padding: 15px 0;
            /*  position: relative;
            top: 220px; */
            width: 100%;
            border-radius: 5px 20px;
            overflow: hidden;
            padding-left: 2rem;
            padding-right: 2rem;
            outline: 4px solid #ffdc42;
            outline-offset: 3px;
        }

        .containerspans {
            display: flex;

            border-radius: 4px;
        }
        
        .clock span {
            color: #054fbf;
            font-size: 50px;
            padding: 0 10px 0 10px;
            font-family: "visby", sans-serif;
            font-optical-sizing: auto;
            font-weight: 700;
            text-align: center;
        }
        
        .clock span .small {
            font-size: 14px;
            margin: 0;
            font-family: "Lexend", sans-serif;
            font-optical-sizing: auto;
            font-weight: 300;
        }
        
        .clock .puntos {
            position: relative;
        }
        
        @media (max-width: 767px) {
            .clock {
                justify-content: center;
            }
        
            .clock span {
                font-size: 24px;
                padding: 0 10px 0 10px;
            }
        
            .clock span .small {
                font-size: 12px;
            }

            .clock span .small{
                font-size: 10px !important;
            }
        }
        
        @media (max-width: 399px) {
            .clock {
                flex-wrap: wrap;
            }
        }