/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* --------------------   ESTILOS GLOBALES    ----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

:root {/* LLAMADAS DE LA WEB */
/* Paleta de colores de esta web */
    --NegroAmarronado: #323033;
    --MarronClarito: #cdb18f;
    --Blanco: #FFF;
    --Negro: #000;
/* Paleta de colores de JosPress */
    --jp-gris-osc: #7c7c7c;
    --jp-gris-cla: #efefef;
    --jp-amarillento: #bdc78f;
/* Tipografias de esta web */
    --fuenteTitulos: "PT Sans", sans-serif;
    --fuenteParrafos: "Open Sans", sans-serif;
}


body {/*DECORACIÓN BASE*/
    background-color: white;/*color de fondo*/
    font-family: var(--fuenteParrafos);/*tipografia de los textos de base*/
    line-height: 1.6;/*gran interlineado de los textos en general*/
    }


/* COLOR DE LETRA Y FONDO PA CUANDO SE SEÑALE EL TEXTO*/
::-moz-selection {background: #323033; color: #cdb18f; text-shadow: none}
::selection {background: #323033; color: #cdb18f; text-shadow: none}


/*BARRA DE DESPLAZAMIENTO PERSONALIZADA*/
body::-webkit-scrollbar {width: 15px}
body::-webkit-scrollbar-thumb {background: #323033; border-radius: 10px; border: 1px solid white}
body::-webkit-scrollbar-thumb:hover {background: #cdb18f}


/*DECORACIÓN BÁSICA DE TEXTOS*/
h1, h2, h3, h4 {/*Decoracion Títulos*/
    font-family: var(--fuenteTitulos); font-size: 1.8rem; font-weight: 400;
    line-height: 1.3;/*pequeño interlineado en títulos (x si caen de renglon)*/
}

h1 {font-size: 4rem; /*40px*/}

h2 {font-size: 3.2rem;/*32px*/}

p {/*Decoracion Párrafos*/
    font-family: var(--fuenteParrafos); font-size: 1.8rem; font-weight: 400;
}


/*CLASES PARA RECURRIR EL HTML*/
.contenedor {/*Contenedor normal de esta web*/
    max-width: 120rem;/*1.200px de ancho*/
    width: 100%;/*ESTO FUERZA LA ANCHURA EN CONFLICTOS CON DISPLAY:FLEX*/
    margin: 0 auto;/*centrada*/
    padding: 0 2rem; /*y con padding a los lados pal movil*/
    /*background-color: rgba(0, 111, 255, 0.4);*/
}

.contenedor-mini {/*Contenedor mini (para leer artículos largos)*/
    max-width: 80rem; width: 100%; margin: 0 auto; padding: 0 2rem;
    /*background-color: rgba(0, 111, 255, 0.4);*/
}

.contenedor-color {padding: 8rem 0}/*Si va un color al 100%, qe tenga pading*/

.top {margin-top: 15rem }/*Margen de arriba grande para poner en cada Section de la web*/
.top-mini {margin-top: 10rem }/*Margen de arriba pequeño (pal primer Section de la pag*/

.titular {text-align: center; padding-bottom: 4rem; font-weight: 600; color: var(--NegroAmarronado)}
.subtitular {text-align: center; margin-top: -3.5rem; padding-bottom: 4rem}

img {width: 100%;}


/*ESTILO DE LOS BOTONES DE LA WEB*/

 /*1º estructura del botón*/
 .boton {font-weight: 500; text-align: center; padding: 1rem 3rem; border-radius: 10px}

    /*2º colores del botón:*/
    .btn-negro {background: var(--NegroAmarronado)}
    .btn-negro:hover {background: var(--MarronClarito)}
    .btn-negro.boton {color: var(--Blanco);}

    .btn-blanco {background: var(--Blanco)}
    .btn-blanco:hover {background: var(--MarronClarito)}
    .btn-blanco.boton {color: var(--NegroAmarronado);}

    /*3º que el botón ocupe el 100%*/
    .btn-100 {display: block; width: 100%}

    /*3º o alinear botón al centro o la derecha (.boton debe estar envuelto por este div:*/
    .padre-btn-centro {display: flex; justify-content: center}
    .padre-btn-derecha {display: flex; justify-content: flex-end}

/*4º en movil los botones se ponen al 100%*/
@media (max-width: 600px) {.boton {display: block; width: 100%}}










/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ------------------------   CABECERA    --------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.active {color: var(--NegroAmarronado) !important; font-weight: bold !important;
text-shadow: -0.2px -0.2px 4px #cdb18f, 0.2px -0.2px 4px #cdb18f, -0.2px 0.2px 4px #cdb18f, 0.2px 0.2px 4px #cdb18f;}

/* ------------------------ BASE Y FONDO */
.logo-cabecera p {color: var(--Blanco); font-size: 4rem; font-weight: 600;
    text-shadow: -1px -1px 0 #3230337a, 1px -1px 0 #3230337a, -1px 1px 0 #3230337a, 1px 1px 0 #3230337a;}
.logo-cabecera span {color: var(--MarronClarito)}
.logo-cabecera p:hover {color: var(--NegroAmarronado)}
.logo-cabecera p:hover span {color: var(--NegroAmarronado)}

.inicio {background-image: url("../img/portada.jpg");
    background-repeat: no-repeat; background-size: cover;
    background-position: center center; height: 45vw;
}

.inicio .contenido-header {height: 45vw;}

.contenido-header {display: flex; flex-direction: column; justify-content: space-between}

@media (max-width: 800px) {
    .header {height: 15rem}
    .inicio, .inicio .contenido-header {height: 35rem}
    .contenido-header h1 {font-size: 2.8rem;}
}


/* ------------------------ MENÚ PARA PC */
#menu a {color: var(--Blanco); font-size: 1.7rem; font-weight: 500;}
#menu a:hover {color: var(--NegroAmarronado)}

.color-cabecera {background: linear-gradient(0deg, #ffffff00 0%, #81786db8 100%)}

.contenedor-cabecera {max-width: 1200px; margin: 0 auto; padding: 2rem;
display: flex; justify-content: space-between; align-items: center}

#menu ul {display: flex; gap: 2rem;}


.color-frase {background: linear-gradient(180deg, #ffffff00 0%, #4f4942b8 60%)}

.contenedor-frase {max-width: 1200px; margin: 0 auto; padding: 2rem;
display: flex; justify-content: space-between; align-items: center}
    
.contenedor-frase h1 {color: var(--Blanco); font-weight: 100; max-width: 45rem; font-size: 4rem; padding-bottom: 1rem;
    text-shadow: -1px -1px 0 #3230337a, 1px -1px 0 #3230337a, -1px 1px 0 #3230337a, 1px 1px 0 #3230337a}

@media (max-width: 500px) {
    .contenedor-frase h1 {font-size: 3rem}
}


/* ------------------------ MENÚ PARA MÓVIL */
@media (max-width: 800px) {
    .color-cabecera {display: inline-block; margin-bottom: 60px}/*MARGEN ABAJO*/
    #menu ul {display: block}
    .cabecera {padding: 0;}

    .contenedor-cabecera {display: flex; justify-content: center;
    align-items: center; flex-direction: column;
    padding: 2rem; position: absolute; top: 0; right: 0; width: 100%;/*encima de web*/
    background: linear-gradient(0deg, #ffffff00 0%, #81786db8 100%)/*repetir el color-cabecera*/}

    /*--- El Botón X*/
    .fundaBotonX {/*background: #ff000047;*/ padding: 10px; margin: 10px;}

    #botonX {width: 35px; height: 25.7px; position: relative; cursor: pointer;
    display: flex; flex-direction: column; justify-content: space-between}

    #botonX span {display: block; width: 100%; height: 4px;/*líneas del Botón X*/
    background-color: var(--Blanco); transition: all 0.3s ease; border-radius: 10px}

    /* --- Animación de la transformación del Botón X (de --- a X) */
    #botonX.active span:nth-child(1) {transform: translateY(11.5px) rotate(45deg)}
    #botonX.active span:nth-child(2) {opacity: 0}
    #botonX.active span:nth-child(3) {transform: translateY(-10px) rotate(-45deg)}

    /*--- Menú de navegación que aparece*/
    #menu {background: #a99377f5;/*fondo gris transparente*/
    width: 100%; text-align: center; border-radius: 10px; z-index: 100;
    max-height: 0; /* ALTURA inicial a 0 (escondido) */
    overflow: hidden; /* forzar su escondite */
    transition: max-height 0.5s ease-in-out} /* Transición para su ALTURA */

    nav ul li {margin: 12px 0}
    .contenedor-cabecera a {color: black; display: block; padding: 2px;
    font-weight: 500; font-size: 2rem}

    .contenedor-cabecera a:hover {color: var(--Blanco)}
    #menu.ver {max-height: 195px}/*ponerle ALTURA exacta para que se vea el menú*/
}

#menu .btn-sesion {font-size: 1.5rem; font-weight: 400; font-style: italic}



/* -----------------------------------------------------------------*/
/* ---------------------   CABECERA (MINI)   -----------------------*/
/* -----------------------------------------------------------------*/

.header.mini.inicio {height: 11rem}
@media (max-width: 800px) {.header.mini.inicio {height: 15.5rem}}










/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------  1. INICIO  -----------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

/* ----------------------- ALGUNOS CURSOS --------------------------*/
/* -----------------------------------------------------------------*/

.cursos {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem}

@media (max-width: 900px) {
    .cursos {grid-template-columns: 1fr; gap: 3rem}
}

.curso {background: var(--NegroAmarronado); padding: 2rem; border-radius: 15px; color: var(--Blanco);
-webkit-box-shadow: 5px 10px 20px -5px rgba(133,133,133,1);
-moz-box-shadow: 5px 10px 20px -5px rgba(133,133,133,1);
box-shadow: 5px 10px 20px -5px rgba(133,133,133,1)
}

.curso h2 {text-align: center; font-weight: 600}
.curso h3 {margin: 1rem 0;}

#todas_categorias {margin-top: 1rem;}

.caja-cat h4 {display: inline-block; margin-right: 5px}
.caja-cat p {display: inline-block}

.caja-img {display: flex; align-items: center; margin-bottom: 2rem;}
.caja-img img {width: 100px; border-radius: 100px}

.curso .btn-100 {margin-top: 2rem;}

/*#todas_categorias {max-height: 30px; overflow: hidden}*/
.globo {background: black; display: inline-block; border-radius: 30px;
padding: 0.1rem 0.8rem; margin-bottom: 1rem; color: white}

/*Truco para pegar botón "Ver entrada" abajo de la caja siempre*/
.curso {display: flex; flex-direction: column}
.curso .btn-100 {margin-top: auto;}





/* --------------------- ALGUNOS PROFESORES -----------------------*/
/* -----------------------------------------------------------------*/

.profesores {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem}

@media (max-width: 900px) {
    .profesores {grid-template-columns: 1fr; gap: 3rem}
}

.caja {padding: 2rem; border-radius: 15px; color: var(--NegroAmarronado);
border: 2px solid var(--NegroAmarronado)}

.profesores h2 {font-weight: 600; margin-top: 1rem;}

.globos-experiencia div {text-align: left; display: inline-block; margin-top: 1rem;}



/* ---------ASPECTO DEL CADA GLOBO (tag) de la BdD*/
#experienciaDiv {display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem;}

#experienciaDiv li {background: var(--NegroAmarronado); border-radius: 10px; list-style: none;
font-size: 1.4rem; font-weight: 500; color: white; padding: 0.5rem 1rem}


/* ---------REDES SOCIALES DE CADA PROFESOR*/

/*Caracteristicas generales de todos los Iconos de Redes sociales*/
.iconos-redes {margin-top: 2rem}
.iconos-redes svg {margin: 0 0.5rem}

.iconos-redes svg {
width: 30px; height: 30px;/*Anchura y altura*/
stroke: none;/*color del borde: NO*/
fill: var(--NegroAmarronado)/*color del relleno: SI*/
}

.iconos-redes svg:hover {fill: var(--MarronClarito)}

/*Corrección de cada icono*/
.iconos-redes .twitter {width: 36px; height: 43px; margin-bottom: -6px;}
.iconos-redes .linkedin {width: 35px; height: 34px; margin-bottom: 1px;}
.iconos-redes .youtube {width: 40px; height: 40px; margin-bottom: -5px;}

.iconos-redes .instagram {stroke-width: 0.2; stroke: var(--NegroAmarronado)}
.iconos-redes .instagram:hover {stroke: var(--MarronClarito)}











/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ------------------------  2. NOSOTROS  --------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

/* ---------------------- NUESTRA ENSEÑANZA --------------------------*/

.contenido-nosotros {display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;}

.contenido-nosotros img {display: none}/*En PC la imagen por HTML fuera*/

.contenido-nosotros .imagen {/*Meto la Imagen por CSS*/
    background-image: url(../img/nosotros.jpg); background-repeat: no-repeat;
    background-size: cover; background-position: center center;
}


.texto-nosotros {padding: 2rem 0}
.texto-nosotros blockquote {font-weight: bold; font-size: 2.4rem; margin: 0}
.texto-nosotros p {margin-bottom: 2rem; text-align: justify;}


@media (max-width: 850px) {/*En Tablet quito la img x CSS y devuelvo la imagen x HTML*/
    .contenido-nosotros .imagen {background-image: none}
    .contenido-nosotros img {display: block}
    .contenido-nosotros {grid-template-columns: 1fr}/*y qe se pongan en 1 columna*/
    .texto-nosotros {padding: 0}
}











/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ---------------------  4. CURSO ABIERTO  ------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.titular-curso p {text-align: center; font-weight: 700; color: var(--NegroAmarronado);
font-size: 3.5rem; margin-bottom: -1rem;}

.explicacion {margin-bottom: 4rem}
.explicacion p {margin-bottom: 2rem; text-align: justify;}
.explicacion h2 {font-size: 2.5rem; font-weight: 600; margin-bottom: -1rem}

.entrada-multimedia {text-align: justify}

.info-curso {display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
margin-top: 4rem; margin-bottom: 4rem;}

@media (max-width: 700px) {
    .info-curso {grid-template-columns: 1fr; gap: 3rem}
}

.titulillo {font-weight: 700; color: var(--NegroAmarronado); font-size: 2.8rem; margin-bottom: 1rem;}

.datos-curso h4 {font-size: 2rem; font-weight: 600;}
.datos-curso p {margin-bottom: 2rem;}
.datos-curso p:last-child {margin-bottom: 0rem;}

.letra-peq {font-size: 1.6rem; text-align: center}



/*Poner video de la entrada al 100% de ancho web (responsive) y en 16:9*/
.entrada-multimedia iframe {width: 100%; aspect-ratio: 16 / 9; height: auto; display: block}




/* ----------------------------------------------------------------------*/
/* ---------------- Comentarios del Curso abierto -----------------------*/
/* ----------------------------------------------------------------------*/

/*ASPECTO DEL FORMULARIO DE LOS COMENTARIOS*/

.comentarios-curso {margin-top: 6rem;}

/*El Formulario se separa del contenido de arriba*/
.formulario {margin-top: 4rem}

/*Si el Formulario se divide en varias secciones, pon a cada una un Título (Legend)*/
legend {font-size: 3rem; font-weight: bold; margin-bottom: 1rem}

/*Margen para cada Caja (texto y campo)*/
fieldset {margin-bottom: 2rem}

/*Negrita pal texto de cada campo*/
.formulario label {font-size: 1.8rem; font-weight: bold}

/*Estilo de los input*/
.formulario {/*todos los input (menos enviar:submit)*/
    input:not([type="submit"]), textarea, select {
    display: block; width: 100%; padding: 0.8rem; margin-top: 0.5rem;
    background: #efefef; border: 1px solid #999999; border-radius: 1rem}
}

/*Estilo de los input en :hover*/
.formulario {
    input:hover, textarea:hover, select:hover {border-color: black}
}

/*Estilo de los input al pulsarse*/
.formulario {
    input:focus, textarea:focus, select:focus {
    outline: none; border: 2px solid rgb(84, 84, 84);
    box-shadow: 0 0 5px rgba(137, 137, 137, 0.5)}
}

.formulario input {margin-bottom: 2rem;}
.formulario textarea {margin-bottom: 2rem; height: 15rem}/*Altura de la caja "Descripción"*/
.mandar-comentarios #nombre_com {margin-top: -2rem}

/*ASPECTO DE LOS COMENTARIOS*/
.caja-comentario {padding-bottom: 1rem; border-bottom: 1px solid #d5d5d5; margin-bottom: 4rem}
.caja-comentario .nombre-com {font-weight: bold}
.caja-comentario .comentario {margin-left: 2rem}
.caja-comentario .fecha-com {margin-left: 2rem; font-size: 1.2rem; color: gray; margin-top: 0.5rem}

















/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/
/* ------------ ASPECTO DE LOS FORMULARIOS DE LA WEB PÚBLICA ---------------*/
/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/

/*Cada Campo (Titulo + Caja donde escribir)*/
.campo {margin-bottom: 2rem; display: flex; align-items: center}

/*Título*/
.campo label {color: black; font-weight: 600; font-size: 1.7rem}

/*Cajas donde escribir*/
.campo input, .campo select {
width: 100%; padding: 0.8rem; border-radius: 1rem; margin-left: 1.8rem;
background: #efefef; border: 1px solid gray;/*Caja en reposo*/
color: black; font-size: 1.6rem/*Color del Texto qe escribe el Usuario*/
}

/*Caja en :hover*/
.campo input:hover {border-color: black}

/*Caja pulsada*/
.campo input:focus {outline: none; border: 2px solid black;
box-shadow: 0 0 5px rgba(137, 137, 137, 0.5)}

/*Color del texto de ejemplo (placeholder)*/
.campo input::placeholder {color: gray; font-style: italic; opacity: 1}
.campo input:focus::placeholder {color: gray}


/*Enlaces de abajo de acciones: crear cuenta y olvidaste cuenta*/
.acciones {margin-top: 5rem; display: flex; justify-content: space-between}
.acciones a {color: gray; font-weight: 600; font-size: 1.7rem;}
.acciones a:hover {color: black}


@media (max-width: 600px) {
    .acciones {display: block}
    .acciones a {display: block; margin-bottom: 2rem; text-align: center;}
}


/* -------------------------------------------------------------------------*/
/* ------------------ ASPECTO DE LOS MENSAJES DE ALERTA ---------------------*/
/* -------------------------------------------------------------------------*/

.alerta {text-align: center; padding: 0.8rem; color: white;
font-weight: bold; text-transform: uppercase; margin: 1rem 0;} 
.rojo {background: red}
.verde {background: green}
.error {background: red}

/*las alertas verdes (qe solo informan) desaparecen en 4 segundos*/
.alerta.verde {transition: transform 1s ease, opacity 1s ease; transform: translateY(0); opacity: 1}
.alerta.verde.oculto {transform: translateY(-100%); opacity: 0}


.btn-compra {margin-top: 2rem; text-align: center}










/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ----------------------   PIE DE PÁGINA    -----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.pie {background-color: var(--NegroAmarronado); padding: 3rem 0}

.pie p {color: var(--MarronClarito); font-weight: 200; 
    font-size: 1.8rem; text-align: center
}


/*----- BOTÓN FLECHA PA SUBIR ARRIBA*/
.subir {position: fixed; bottom: 0; right: 0; z-index:100; margin: 10px;
    padding: 10px; padding-left: 9px; cursor: pointer;
    border-radius: 100px; background: #cdb18f3d; display: none}

.subir:hover .flechas span {background:var(--Negro)}

.flechas {display: inline-block; width: 22px}

.flechas span {display: block; width: 20px; height: 3px; background:var(--MarronClarito);
            transition: all 0.4s ease}

.flechas span:nth-child(1) {transform: rotate(-45deg); position: absolute;
                        margin-top: -9px; margin-left: -5px;}

.flechas span:nth-child(2) {transform: rotate(45deg);
                        margin-top: -9px; margin-left: 8px}



/*----- CARTEL DE LAS COOKIES*/
#cajacookies {background: #87735bed; padding: 10px; text-align: center;
    position: fixed; bottom: 0px; width: 100%; z-index: 99;
    transition: transform 0.5s ease, opacity 0.5s ease; /* Transición para irse */}

#cajacookies a {color: black; text-decoration: underline;}
#cajacookies a:hover {color: white}

#cajacookies button {background: var(--NegroAmarronado); color: var(--MarronClarito); margin-left: 25px;
          border: 0px; padding: 6px 15px; font-size: 15px;}
          
#cajacookies button:hover {background:white; color: var(--NegroAmarronado)}

#cajacookies p {font-size: 16px; color: black}

@media screen and (max-width: 904px) {#cajacookies button {margin-top: 8px}}

#cajacookies.oculto {
    transform: translateY(100%); /*Lo mueve hacia abajo fuera de la pantalla*/
    opacity: 0; /*Desvanece el cartel*/
}

.pie .enlace-jose {font-size: 1.6rem; color: gray}
.pie .enlace-jose a {font-size: 1.6rem; color: gray; font-weight: 700; text-decoration: underline; padding-left: 0.8rem}
.pie .enlace-jose a:hover {color: var(--MarronClarito)}




/* -----------------------------------------------------------------*/
/* -------------------------   COOKIES    --------------------------*/
/* -----------------------------------------------------------------*/
.cookies {text-align: justify}
.cookies h2 {font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem}
.cookies p {font-size: 1.8rem; margin-bottom: 5rem}
.cookies ul {margin-top: -3.5rem; margin-bottom: 5rem}
.cookies li {font-size: 1.7rem; margin-left: 4rem; margin-bottom: 1.5rem}
.cookies .titulo-epigrafe {font-size: 1.8rem; font-weight: 600}







/* ------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------*/
/* ------------- ANIMACIONES DE CÓMO ENTRA CADA CAJA EN LA WEB ------------*/
/* ------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------*/

/*-Hacer Invisible la Barra de desplazamiento Horizontal-*/
html {overflow-x: hidden; overflow-y: auto; width: 100%}
body {min-width: 100%}/*Pone ancho min al contenido pa evitar desborda horizontal*/

/*-Quel Usuario no pueda desplazarse con dedo a los lados de la web (en movil)-*/
body {overflow-x: hidden; overflow-y: auto}

/*TODAS LAS ANIMACIONES*/
.entra-izquierda {animation: entrando-izquierda 1s ease-in forwards}
@keyframes entrando-izquierda {
    0% { transform: translateX(-110%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}

.entra-derecha {animation: entrando-derecha 1s ease-in forwards}
@keyframes entrando-derecha {
    0% { transform: translateX(110%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}

.entra-arriba {animation: entrando-arriba 1s ease-in forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.entra-abajo {animation: entrando-abajo 1s ease-in forwards}
@keyframes entrando-abajo {
    0% { transform: translateY(110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.aparece {animation: apareciendo 1s ease-in forwards}
@keyframes apareciendo {
    0% { opacity: 0}
    100% { opacity: 1}
}

.crece {animation: creciendo 1s ease-in forwards}
@keyframes creciendo {
    0% { transform: scale(0); opacity: 0}
    100% { transform: scale(1); opacity: 1}
}

.voltea-vertical {animation: flip-vertical 1s ease-in-out forwards}
@keyframes flip-vertical {
    0% { transform: perspective(1500px) rotateY(90deg) scaleX(1.4); opacity: 0}
    100% { transform: perspective(1500px) rotateY(0deg) scaleX(1); opacity: 1}
}




/*ESTADO BASE DE CADA CAJA "ANIM"*/

/*Pa aplicarle "entra-arriba"*/
.anim1 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "voltea-vertical"*/
.anim2 {transform: perspective(1500px) rotateY(90deg) scaleX(1.4); opacity: 0;
    transform-origin: center center; backface-visibility: hidden}

/*Pa aplicarle "crece"*/
.anim3 {transform: scale(0); opacity: 0}

/*Pa aplicarle "entra-izquierda"*/
.anim4 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-derecha"*/
.anim5 {transform: translateX(110%); opacity: 0}

/*Pa aplicarle "voltea-vertical"*/
.anim6 {transform: perspective(1500px) rotateY(90deg) scaleX(1.4); opacity: 0;
transform-origin: center center; backface-visibility: hidden}

/*Pa aplicarle "aparece"*/
.anim7 {opacity: 0}

/*Pa aplicarle "entra-izquierda"*/
.anim8 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-derecha"*/
.anim9 {transform: translateX(110%); opacity: 0}

/*Pa aplicarle "crece"*/
.anim10 {transform: scale(0); opacity: 0}

/*Pa aplicarle "entra-arriba"*/
.anim11 {transform: translateX(-110%); opacity: 0}








.iniciar-sesion {margin-bottom: 19rem !important;}