html { 
    font-size: 62.5%;
    /* font: 1em monospace; */
}

body {
    margin: 0;
    font-family: Roboto, Arial, sans-serif;
    font-size: 3.5vmin;
    /*font-size: 1.6rem;*/
    /*width: 100%;*/
    background-color: #F0F0F0;
    color: #072B42;
}

/* ************************* CUADRO ESTRUCTURA ORGANIZACIONAL *************************** */

.centrar { width: 100%; text-align: center; }

.contenedor {
    width: fit-content;
    min-width: 50vw;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: #072B42;
}

.itemTitulo1 {
    display: inline-block;
    width: 40%;
    height: 8vmin;
    font-size: 5vmin;
    margin-bottom: 1%;
    color: #F0F0F0;
    border: 2px solid #fff;
    box-sizing: border-box;
    align-content: center;
    line-height: 4vmin;
    background-color: #052a41;
}

.itemTitulo2 {
    display: inline-block;
    width: 59%;
    height: 8vmin;
    font-size: 5vmin;
    margin-bottom: 1%;
    color: #F0F0F0;
    border: 2px solid #fff;
    box-sizing: border-box;
    align-content: center;
    line-height: 4vmin;
    background-color: #052a41;
}

.itemDato1 {
    display: inline-block;
    width: 38%;
    width: 40%;
    color: #000;
    font-size: 2.8vmin;
    line-height: 6vmin;
    text-align: right;
    align-content: center;
    border: 2px solid #fff;
    box-sizing: border-box;
    margin-bottom: 0.5%;
    text-decoration: none;
}

.decoraLink { text-decoration: none; color: #052a41;}

.decoraLink:hover {  color: #000; font-weight: bold; }

.itemDato2 {
    display: inline-block;
    width: 59%;
    color: #000;
    font-size: 2.8vmin;
    line-height: 6vmin;
    text-align: left;
    align-content: center;
    border: 2px solid #fff;
    box-sizing: border-box;
    margin-bottom: 0.5%;
    text-decoration: none;
}

.gris1 {
    background-color: #95cff0;
}

.gris2 {
    background-color: #79bde7;
}

/* ************************* / CUADRO ESTRUCTURA ORGANIZACIONAL *************************** */



/* h1 { font-size: 3.2rem; font-size: 8vmin;} */
h1 { font-size: 7vmin;}

/* JUSTIFICADO */
.justificado {
    text-align: justify;
    text-justify: inter-word;
}

.centro {
    text-align: center;
    margin: 0 25%;
    color: #09f;
}

.turca {
    color: #09f;
}

.p1erLinea { margin-top: 1.5em; }

.separador { margin-top: 1.5em; }
.separador1 { margin-top: 2em; }
.separador2 { margin-top: 2.5em; }
.separador3 { margin-top: 3em; }
.separador4 { margin-top: 4em; }
.separador5 { margin-top: 5em; }
.separador-justificado {
    margin-top: 1.2em;
    text-align: justify;
    text-justify: inter-word;
}

.ma-ta-no {
    font-size: 4.4vmin; 
    display:inline-block;
    margin: 2px 0 10px 0;
    text-decoration: underline;
    margin: 1.5em;
}

.titulo { 
    font-size: 4.8vmin; 
    display:inline-block;
    margin: 2px 0 10px 0; 
    text-align: center;
}

.titulo-scc { 
    font-size: 6vmin;
    color: #09f;
    text-decoration: underline;
    text-align: center;
}

.tituloQCER { font-size: 3.4vmin; }
.diezPX { margin-top: 5px; height: 1px; }

.cuadroQCER {
    font-size: 2.5vmin;
    text-align: justify;
    text-justify: inter-word;
}

.bloque {
    width: 90%;
    margin: auto;
    text-align: justify;
    text-justify: inter-word;
}
.sub-azul {
    color: #09f;
}
.simil-h1 {
    font-weight: bold;
    font-size: 7vmin;
}



/* Estilo de la palabra que activa el globo */
.globo-hover {
  position: relative;
  cursor: help;
  color: #0066cc; /* Color destacado */
  border-bottom: 1px dotted #0066cc; /* Subrayado punteado para indicar que es interactivo */
}

/* El globo en sí (oculto por defecto) */
.globo-hover::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%; /* Lo ubica justo arriba de la palabra */
  left: 50%;
  transform: translateX(-50%) scale(0); /* Centrado y escondido (tamaño 0) */
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
  opacity: 0;
  transition: all 0.3s ease; /* Animación suave */
  pointer-events: none; /* Evita que el globo interfiera con el ratón */
  z-index: 10;
}

/* La flechita del globo */
.globo-hover::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

/* Efecto Hover: muestra el globo al pasar el ratón */
.globo-hover:hover::before,
.globo-hover:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1); /* Aparece escalando a tamaño normal */
}




.caja-inicio { 
    border: 1;
    /*background-color: hotpink;*/
    width: 85%;
    /*max-width: 1200px;*/
    line-height: 1.5;
    padding: 15px;
    margin: auto; 
    border-width: 1; 
    border-color: #0b3c5d; 
    border-style: solid;
}

.centra-texto-cuadroQCER { margin: auto; }

#cQCER { margin: 10px 10px 5px 0; }

.centra-container {
    display: block;
    /*width: calc(100% - 30px);*/
    width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    /*width: calc(100vw - 100px);*/
    width: 100%;
    /*max-width: 1800px;*/
    /*padding: 10px 23px 15px 15px;*/
    min-height: calc(60vw * 1.75);
    min-height: 31vw;
    background-color: #09f;
    box-sizing: border-box;
    border-radius: 10px;
    line-height: 1.4;
    box-shadow: 1px 5px 25px #0b3c5d;
    padding: 0 10px 5px 10px;
/*    overflow: hidden;*/
}

.container img {
    width: 50%;
    border-radius: 8px;
    float: left;
    margin: 10px 20px 5px 0px;
    /*width: 100%;*/
    max-width: calc(cont);
    height: auto;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* HEADER */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 92px;
    background: #0b3c5d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 35px;
    box-sizing: border-box;
    z-index: 80;
}

.logo {
    height: 80px;
    width: 72px;
    /*font-size: 2rem;*/
    /*font-weight: bold;*/
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px; /* espacio entre menu, idioma y login */
}

/* MENU */
nav ul {
    font-size: 1.5rem;
    list-style: none;
    display: flex;
    gap: 20px; /* espacio entre items de menu */
    margin: 0;
    padding: 0;
}
nav li { cursor: pointer; font-weight: bold; }
nav li:hover { text-decoration: underline; color: #92c7f1}

/* LOGIN */
.login-btn, .logout-btn {
    background: #e63946;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.7rem;
}


/* CONTENIDO */
main {
    margin-top: 92px;
    padding: 30px;
    background: #f0f0f0;
    min-height: 100vh;    
    min-height: calc(100vh - 100px);
    background-image: url('LogoNegro.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;  /* Hace que quede fija al hacer scroll */
}

/* MODAL ANIMADO */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 90;
}

.modal.show {
    display: flex;
    animation: fadeIn .3s;
}

.modal-content {
    background: white;
    padding: 30px;
    width: 300px;
    border-radius: 6px;
    animation: slideDown .4s;
    position: relative;
}

.modal-content input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

.modal-content button {
    width: 100%;
    padding: 10px;
    background: #0b3c5d;
    color: white;
    border: none;
    cursor: pointer;
}

.close {
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
}

.error {
    color: red;
    font-size: 1.4rem;
}

.nav-input {
    display: none;
    background-color: transparent;
    border: 0;
}

#authBtn {
    font-size: 5.2vmin;
}

footer {
    text-align: center;
    padding: 10px;
    background: #222;
    color: white;
    margin-top: 10px;
}

/* oOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOo  C U R S O S  oOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOo */
.papa-cuadro {
    /* background-color: aquamarine; */
    width: 90%;
    border: 2px solid #000;
    margin: auto;
    border-radius: 10px;
    padding: 10px 0 15px 10px;
    box-shadow: 1px 5px 25px #0b3c5d;
    min-height: 100px;
    align-items: center;
    align-content: center;
}

.papa {
    /* background-color: aquamarine; */
    width: 90%;
    /*max-width: 900px;*/
    border: 2px solid #000;
    margin: auto;
    border-radius: 10px;
    padding: 10px 0 15px 10px;
    box-shadow: 1px 5px 25px #0b3c5d;
    min-height: 200px;
    align-items: center;
    align-content: center;
    display: grid;
    grid-template-areas: 
    "elTitulo elTitulo"
    "elLibro elTexto"
    "elPie elPie";
    grid-template-columns: 1fr 2fr;
}

.papa2 {
    /* background-color: aquamarine; */
    width: 90%;
    height: auto;
    /*max-width: 900px;*/
    border: 2px solid #000;
    margin: auto;
    border-radius: 10px;
    padding: 10px 0 15px 10px;
    box-shadow: 1px 5px 25px #0b3c5d;
    min-height: 80px;
    align-items: center;
    align-content: center;
}

.cartel {
    display: block;
    width: fit-content;
    height: auto;
    /*max-width: 900px;*/
    border: 2px solid #000;
    margin: auto;
    border-radius: 10px;
    box-shadow: 1px 5px 25px #0b3c5d;
    min-height: 80px;
    align-items: center;
    align-content: center;
    padding: 20px;
    margin: auto;
}

.papa .cabeza { grid-area: elTitulo; }

.papa .tapa-libro { grid-area: elLibro; }

.papa .textoD { grid-area: elTexto; margin-left: 10px;}

.papa .PdP { grid-area: elPie; }

.tapa-libro { /* DIV */
    /*background-color: #aaa;*/
    display: block;
    width: 98%;
    max-width: 250px;
    margin: auto;
    text-align: center;
    align-content: center;
}

/* IMG  clase de la imagen de la tapa del libro */
.tLibro { 
/*    width: 95%;*/
    border: 2px solid #aaa;
    border-radius: 10px;
}

.cabeza {
    display:block;
    width: 100%;
    font-size: 4.3vmin; 
    text-align: left;
}

.textoD { margin-right: 20px; text-align:left; }

/* background-color: lightseagreen; */
.PdP {
    display: block;
    width: 100%;
    margin: 10px;
}

.derecha10 { margin-left: 2vmin; }

.listing { text-align: justify; }

.itemLI { margin: 10px 0; }

/* oOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOo  / C U R S O S  oOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOo */

/* oOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOo  C A S O S - E X I T O  oOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOo */

.textoQS{
    width: 90%;
    text-align: justify;
    text-justify: inter-word;
    font-size: 3.5vmin;
    line-height: 1.6;
    margin: auto;
}

.card {
    border: 2px solid #072B42;
    background-color:rgb(221, 221, 221);
    /*background-color:rgb(111, 190, 255);*/
    border-radius: 15px;
    width: 80%;
    margin: auto;
}

.card-img {
    /*background-color: aqua;*/
    width: 13vw;
    /*text-align: center;*/
    float: left;
    margin: 7px;
    border-radius: 10px;
}

.card-head {
    /*background-color: chartreuse;*/
    display: block;
    min-height: calc(13vw + 14px);
}

.porta-card-txt {
    width: 97%;
    margin: auto;
}

.card-txt {
    /*background-color: #09f;*/
    text-align: justify;
    text-justify: inter-word;
    font-size: 2.8vmin;
    line-height: 1.8;
    padding: 5px 15px 5px 10px;
    align-items: center;
    border-radius: 15px;
    margin-left: 0;
    padding-left: 0;
}

.card-titulo {
    /*background-color: bisque;*/
    line-height: 1.2;
    font-size: 3.8vmin;
    font-weight: bold;
    padding: 10px 0 7px 0;
    display: inline-block;
    align-items: center;
}

/* oOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOo  / C A S O S - E X I T O  oOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOoOo */


.caja-contact {
    display: block;
}

.contact-img {
    width: 55px;
    height: 55px;
    padding: auto;
    float: left;
    align-content: center;
}
.contact-txt1 {
    display: block;
    height: 55px;
    align-content: center;
    margin: 0 15px;
    float: left;
    font-size: 3.5vmin;
}
.contact-txt2 {
    display: block;
    height: 55px;
    align-content: center;
    text-align: left;
    font-size: 3vmin;
}

.fSize1{
    font-size: 4vmin;
    font-weight: bold;
}

.fSize2{
    font-size: 3vmin;
}

.texto-cartel {
    display:inline-block;
    margin: 0 10px 10px 10px;
    vertical-align: top;
    line-height: 1.3;
}

.img-cartel {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    line-height: 1.3;
    max-width: 25vmin;
}

.img-centro {
    display: inline-block;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.estrellas {
    display: inline-block;
    position: relative;
    /*width: 200px;*/
    width: 22vmin;
    top: 5px;
    margin: 0 3px;
}

.puntoL {
    display: inline-block;
    position: relative;
    width: 10px;
    height: 10px;
    bottom: 5px;
    list-style: none;
    list-style-type: none;
}

.caja-limpia {
    margin-top: 1.5em;
    width: 90%;
    margin: auto;
}

.ceroPad {
    padding: 0;
    font-size: 85%;
}


.papa-casos {
    width: 90%;
    border: 2px solid #000;
    margin: auto;
    border-radius: 10px;
    padding: 10px 0 15px 10px;
    box-shadow: 1px 5px 25px #0b3c5d;
    min-height: 200px;
    align-items: center;
    align-content: center;
}
.papa11 {
    width: 90%;
    border: 2px solid #000;
    margin: auto;
    border-radius: 10px;
    padding: 10px 0 15px 10px;
    box-shadow: 1px 5px 25px #0b3c5d;
    min-height: 200px;
    align-items: center;
    align-content: center;
}
.cabeza11 { 
/*    background-color: #072B42;*/
    display:inline-block;
    width: 100%;
    font-size: 3.5vmin; 
    text-align: left;
    line-height: 1.5;
}
.cabeza12 { 
/*    background-color: #072B42;*/
    display:inline-block;
    width: 100%;
    font-size: 4.2vmin; 
    text-align: left;
    padding: 2vmin 0 0 2vmin;
}
.tapa-libro11 {
    display: block;
    width: 33.3%;
    max-width: 250px;
    margin: auto;
    padding-bottom: 1vmin;
    text-align: center;
    align-content: center;
    align-items: center;
}

.tapa-libro-cursos {
    display: block;
    width: 100%;
    /*max-width: 250px;*/
    margin: auto;
    padding-bottom: 1vmin;
    text-align: center;
    align-content: center;
    align-items: center;
}

.grido1 {
    /*background-color: #92c7f1;*/
    display: inline-block;
    align-items: center;
    width: 33.3%;
    text-align: center;
    /*justify-content: center;*/
}
.grido2 {
    /*background-color: aquamarine;*/
    display: inline-block;
    align-items: center;
    margin: 0 10px 10px 10px;
    vertical-align: top;
    line-height: 1.3;
    width: 63.5%;
}

.grido3 {
    background-color: #e63946;
    width: 50vw;
    height: 50px;
}
.grido4 {
    background-color: blueviolet;
    width: 50vh;
    height: 50px;
}
.grido5 {
    background-color: chartreuse;
    width: calc(100vw - 100vh);
    height: 50px;
}
.grido6 {
    background-color: chocolate;
    width: calc(100vw / 100vh);
    height: 50px;
}

.tLibro11 { 
    width: 95%;
/*    align-content: center;*/
    border: 2px solid #aaa;
    border-radius: 10px;
    margin-left: 2px;
}
.textoD11 {
/*    background-color:#0066cc;
    width: 100%;*/
    margin-right: 20px; 
    text-align:left;
}
.textoDcursos {
    /*background-color:#4a83bb;*/
    width: auto;
    text-align:left;
}
.tituloCursos { 
    font-size: 4.8vmin; 
    display:inline-block;
    margin: 2px 0 10px 0; 
    text-align: center;
}

.listing11 {
    display: inline-block;
    width: calc(100% - 25px);
    text-align: justify;
}
.itemLI11 {
/*    background-color: #92c7f1;*/
    margin: 10px 0;
    text-align: justify;
}
.ceroPad11 {
    padding-left: 5vmin;
    font-size: 3.3vmin;
}
.cartel11 {
    width:fit-content;
    height: auto;
    border: 2px solid #000;
    margin: auto;
    border-radius: 10px;
    box-shadow: 1px 5px 25px #0b3c5d;
    min-height: 80px;
    align-items: center;
    align-content: center;
    padding: 0 40px;
}

.lis-cursos-edades {
    padding-left: 3vmin;
    width: auto;
}

.comentA {
    width: 95%;
    margin: auto;
}

.caja-centradora {
    display: inline-block;
    width: auto;
    margin: auto;
}

.inscripcion {
    width: 100%;
    padding: 0;
    margin: 0;
}

#cQCER { border-radius: 10px; }

/*
    .mi-imagen-QCER {
  width: 150px;
  height: 400px;
  background-image: url('CQcelu-it.png');
  background-size: cover;
  background-size:;
  background-position: center;
/
        width: 60vw;
        height: 40vw;
        background-image: url('CQcelu-it.png');
        background-size: cover;
        background-position: center;
        .mi-imagen-QCER { background-image: url('CQcelu-it.jpg');
    } */



/* MEDIA QUERY */
@media screen and (orientation: portrait) {
    .tapa-libro11 { /* DIV */
        /*background-color: #aaa;*/
        display: block;
        width: 33.3%;
        max-width: 250px;
        margin: auto;
        text-align: center;
        align-content: center;
        padding-bottom: 5vmin;
    }
    .textoD11 {
        width: auto;
        margin-right: 20px;
        text-align: center;
    }
    .cartel11 {
        padding: 0 20px;
    }
    .titulo {
        font-size: 4vmin;
        font-weight: bolder;
    }
    .img-cartel {
        width: 95%;
        text-align: center;
/*        padding: 3vmin 0;*/
        padding: 0;
        max-width: 100%;
    }
    .tLibro {
        width: 40vmin;
    }
    .texto-cartel {
        width: 100%;
        text-align:left;
        padding: 0;
    }
    .caja-centradora {
        padding: 0;
        margin: auto;
        text-align: left;
    }
    .estrellas {
        top: 2px;
        margin: 0 3px;
    }
    .cartel {
        text-align: center;
    }
    .img-cartel {
        margin-bottom: 2vmin;
    }
    .cabeza { width: 100%; }
    .card { width: 85%; padding: 0 15px; }
    .card-img { width: 15vmin; margin: 15px 10px 0 0; }
    .img-centro { width: 100%; margin: auto; }
    .card-titulo { padding: 15px 0 7px 0; }
    .grido1 { width: 100%; margin: auto 0 2vmin 0; text-align: center;}
    .tapa-libro-cursos { width: 50%; }
    .papa-casos { padding: 0; }
    .grido2 { width: calc(100% - 10px); }
    .itemDato1 { font-size: 2.4vmin; }
    .contenedor { min-width: 85vw; }
/*    .mi-imagen-QCER {
        width: 60vw;
        background-image: url('CQcelu-it.png');
        background-size: cover;
        background-position: center;
        .mi-imagen-QCER { background-image: url('CQcelu-it.png'); }
    } */
}



/*
.img-cartel {
    background-color: aquamarine;
    width: fit-content;
    display:inline-block;
}
.texto-cartel {
    background-color: lightcoral;
    display:inline-block;
    margin: 0 10px 10px 10px;
    vertical-align: top;
    line-height: 1.3;
}
.cartel {
    background-color: #e63946;
    display: block;
    width: fit-content;
    height: auto;
    /*max-width: 900px;*
    border: 2px solid #000;
    margin: auto;
    border-radius: 10px;
    box-shadow: 1px 5px 25px #0b3c5d;
    min-height: 80px;
    align-items: center;
    align-content: center;
    padding: 20px;
    margin: auto;
}
.cabeza {
    background-color: #946;
    display:block;
    width: 100%;
    font-size: 4.3vmin; 
    text-align: left;
}

*/

@media screen and (orientation: landscape) {
    .tituloQCER { margin: 0; padding: 0; }
    #cQCER { padding-right: 15px; border: 0.5px; border-radius: 15px;}
    .container { padding: 20px 25px 15px 20px; }
    .tapa-libro11 { /* DIV */
/*        background-color:chartreuse;*/
        display: inline-block;
        width: 33.3%;
        max-width: 250px;
        margin: auto;
        text-align: center;
        align-content: center;
    }
    .textoD11 {
/*        background-color:chocolate;*/
        width: calc(100% - 290px);
        display: inline-block;
        margin-right: 20px;
        text-align: center;
        vertical-align: top;
        line-height: 1.3;
    }
    .img-cartel {
        width: 25%;
        text-align: center;
        padding: 1vmin;
    }
    .tLibro { 
        width: 100%;
        border: 2px solid #aaa;
        border-radius: 10px;
    }
    .contenedor { min-width: 60vw; }
/*    .contenedor { width: 60%; }
        .mi-imagen-QCER {
        width: 60vw;
        background-image: url('CQpc-it.png');
        background-size: cover;
        background-position: center;
        .mi-imagen-QCER { background-image: url('CQpc-it.jpg'); }
    } */

}

/*@media screen and (orientation: portrait) and (aspect-ratio <= 355/882) {
    .header-right { gap: 10px !important; }
}

@media screen and (orientation: portrait) and (aspect-ratio <= 376/770) {
    .header-right { gap: 10px !important; }
} */

@media screen and (orientation: portrait) and (aspect-ratio <= 377/568) {
    .header-right { gap: 10px !important; }
}




@media screen and (orientation: landscape) and (aspect-ratio = 4/3) {
    .grido1 {
        /*background-color: darkgoldenrod;*/
        margin: 8vmin 0;
    }
    .contenedor { width: 75%; }
}
@media screen and (orientation: landscape) and (aspect-ratio = 16/9) {
    .grido1 { margin-top: 0.1vmin; }
    .grido2 { margin-top: 1vmin; /*background-color: darkgoldenrod;*/ }
}
@media screen and (orientation: landscape) and (aspect-ratio = 16/10) {
    .grido2 {
        /*background-color: darkgoldenrod;*/
        margin-top: 1vmin;
    }
}


@media (660px <= width) {
    #mmenuc { display: none; visibility: hidden;}
    #imgchange { display: none; }   /* OCULTA EL MENU */
    .login-btn, .logout-btn { font-size: 1.1rem; }
    .header-right { gap: 10px; }    /* espacio entre menu, idioma y login */
    nav ul { gap: 6px; }           /* espacio entre items de menu */
    header { padding: 0 1px 0 5px; }
    /*#cQCER { src: url(file:///C:/Users/mahoma/Documents/Rosana/CQpc-es.jpg); }*/
}

/*@media (max-width: 767px) {*/
@media (685px <= width) {
    #mmenuc { display: none; visibility: hidden;}
    #imgchange { display: none; }   /* OCULTA EL MENU */
    .login-btn, .logout-btn { font-size: 1.4rem; }
    .header-right { gap: 12px; }    /* espacio entre menu, idioma y login */
    nav ul { gap: 8px; }           /* espacio entre items de menu */
    header { padding: 0 1px 0 10px; }
    /*.bloque{color: rgb(255, 255, 0);}*/
}

/*@media (max-width: 799px) {*/
@media (720px <= width) {
    #mmenuc { display: none; visibility: hidden;}
    #imgchange { display: none; }   /* OCULTA EL MENU (imagen) */
    .login-btn, .logout-btn { font-size: 1.7rem; }
    .header-right { gap: 15px; }    /* espacio entre menu, idioma y login */
    nav ul { gap: 12px; }           /* espacio entre items de menu */
    header { padding: 0 5px 0 15px; }
    /*.bloque{color: rgb(255, 0, 0);}*/
}

@media (width <= 659px) {
    #menu { display: none; }   /* OCULTA EL MENU (texto) */
    /*.header-right { gap: 20px; }  espacio entre menu, idioma y login */
    header { padding: 0 15px 0 30px; } /* espacio entre menu, idioma y login */
    /*.bloque{color: rgb(0, 0, 255);}*/
}

/* --------------------------- */

@media screen and (orientation: landscape) and (width >= 2500px) {
    .tapa-libro {
        max-width: 400px;
    }
    .puntoLI {
        width: 30px;
        height: 30px;
    }
    .textoD11 {
        width: calc(100% - 580px);
        display: inline-block;
        margin-right: 20px;
        text-align: center;
        vertical-align: top;
        line-height: 1.3;
    }
    .tapa-libro11 {
        max-width: 450px;
        margin-left: 20px;
    }
    .estrellas {
        width: 22vmin;
        top: 8px;
        margin: 0 15px;
    }
}

@media screen and (orientation: landscape) and (width >= 3000px) {
    .estrellas {
        top: 15px;
        margin: 0 15px;
    }
}

/*@media screen and (aspect-ratio <= 355/882) {
    .header-right { gap: 10px !important; }
    .bloque{ color: crimson; }
    .titulo { color: blueviolet;}
    h2 {color: chocolate;}
}*/

/*@media screen and (orientation: portrait) and (width ) {
    .header-right {
        gap: 15px;
    }
}

@media screen and (orientation: landscape) and (width >= 2500px) {
    .bloque {
        background-color:darkgreen;
    }

    .tapa-libro {
        max-width: 400px;
    }

    .puntoLI {
        width: 30px;
        height: 30px;
    }
}*/

@media (orientation: landscape) {
  .mi-imagen-QCER {
    background-image: url('CQpc-it.jpg');
  }
}
@media (orientation: portrait) {
  .mi-imagen-QCER {
    background-image: url('CQcelu-it.jpg');
  }
}

/* ANIMACIONES */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* CONTENEDOR DEL SLIDER */
.slider {
    position: relative;
    width: 100%;
    /*height: 40vh;*/
    overflow: hidden;
}

.slides {
    display: flex;
    width: 600%;
/*  height: 100%; */
    animation: slide 24s infinite;
}

.slides img {
    width: 100%;
/*  height: 100%; */
    object-fit: cover;
}

.slide {
  width: 100%;		/* vw vh vmin vmax % px */
}

/* ANIMACION */
@keyframes slide {
  0%   { margin-left: 0%; }
  16%  { margin-left: 0%; }

  20%  { margin-left: -100%; }
  32%  { margin-left: -100%; }

  36%  { margin-left: -200%; }
  48%  { margin-left: -200%; }

  52%  { margin-left: -300%; }
  64%  { margin-left: -300%; }

  68%  { margin-left: -400%; }
  80%  { margin-left: -400%; }

  84%  { margin-left: -500%; }
  96% { margin-left: -500%; }

  100% { margin-left: 0%; }
}