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

/* Las LLAMADAS DE LA WEB a los Colores y Tipografías están en "fondo-rosa.css"*/


body {/*DECORACIÓN BASE*/
    /*Color de fondo degradado de Toda la web*/
    background: linear-gradient(135deg, var(--ColorPrincipal), var(--ColorClaro)); background-attachment: fixed;

    font-family: var(--fuenteParrafos);/*tipografia de los textos de base*/
    line-height: 1.6;/*gran interlineado de los textos en general*/
    text-align: justify;/*todos los textos justificados (a menos qe se indique lo contrario)*/
}


body {opacity: 0; /*La página comienza oculta pa la Transición de entrada*/
    transition: opacity 0.6s ease-in-out;/*la Transición de entrada*/
}


/* COLOR DE LETRA Y FONDO PA CUANDO SE SEÑALE EL TEXTO*/
::-moz-selection {background: var(--ColorPrincipal); color: var(--ColorClaro); text-shadow: none}
::selection {background: var(--ColorPrincipal); color: var(--ColorClaro); text-shadow: none}


/*BARRA DE DESPLAZAMIENTO PERSONALIZADA*/
body::-webkit-scrollbar {width: 15px}/*Tamaño de la barra*/
body::-webkit-scrollbar-track {background: var(--Blanco)}/*Fondo de labarra */
body::-webkit-scrollbar-thumb {background: var(--ColorPrincipal); border-radius: 10px; border: 1px solid var(--Blanco)}/*Color barra*/
body::-webkit-scrollbar-thumb:hover {background: var(--ColorClaro)}/*Color barra en hover*/


/*DECORACIÓN BÁSICA DE TEXTOS*/
h1, h2, h4, .contenido-extra {/*Decoracion Títulos*/
    font-family: var(--fuenteTitulos); font-weight: bold; color: var(--ColorPrincipal); font-size: 3.7rem; text-align: center;
    margin-bottom: 2rem; line-height: 1.2;/*pequeño interlineado en títulos (x si caen de renglon)*/
}
    /*Decoracion Títulares de Miniaturas de cajas*/
h3 {font-family: var(--fuenteParrafos); color: var(--Negro); font-size: 2.3rem; margin-bottom: 0.5rem;
    text-align: center; letter-spacing: -0.5px}

    /*Decoracion de textos en PC*/
p {font-family: var(--fuenteParrafos); color: var(--Negro); font-size: 1.77rem; font-weight: 400; margin-bottom: 2rem}

.enlace {color: var(--ColorPrincipal); font-weight: bold; font-size: 1.77rem; display: inline-block}
.enlace:hover {text-decoration: underline}


/*DECORACIÓN BÁSICA DE TEXTOS EN MÓVIL*/
@media (max-width: 500px) {
    h1, h2, h4, .contenido-extra {font-size: 2.8rem}
    h3 {font-size: 2.1rem}
    p {font-size: 1.53rem}
    .enlace {font-size: 1.53rem}
}


/*CLASES PARA RECURRIR EL HTML*/
.contenedor {/*Contenedor de esta web*/
    position: relative; z-index: 20;/*FUERZA QUE TODA LA WEB QUE HAY DENTRO ESTÉ X ENCIMA DE LAS FIGURAS DE FONDO QUE SE MUEVEN*/
    max-width: 140rem;/*1.400px de ancho (xqe Main solo se queda en 900px)*/
    width: 100%;/*ESTO FUERZA LA ANCHURA EN CONFLICTOS CON DISPLAY:FLEX*/
    margin: 0 auto;/*centrada*/
    padding: 0 3rem; /*Espacio 3rem a los lados gigante, xqe sino no se ven las figuras que giran detrás*/
    /*background-color: rgba(0, 111, 255, 0.4);*/
}

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

.cursiva {font-style: italic}
.subrayado {text-decoration: underline}
.negrita {font-weight: bold}


/*ESTILO DE LOS BOTONES DE LA WEB*/

 /*1º estructura del botón <a>*/
 .boton {font-weight: 500; text-align: center; padding: 1rem 3rem; border-radius: 10px}
 .boton p {margin-bottom: 0; color: var(--Blanco)}

    /*2º colores del botón:*/
    .boton {background: var(--ColorPrincipal); color: var(--Blanco)}
    .boton:hover {background: var(--ColorClaro)}

    /*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}
    .padre-btn-izquierda {display: flex; justify-content: flex-start}

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


/*TODOS LOS ELEMENTOS QE LES HAGAN "HOVER" LO HACEN DESPACIO */
.transicion {transition: all 0.3s ease}

/*ESTILO DEL BOTÓN DE NAV DE LA SECCIÓN DONDE ESTÁS*/
.active {background: var(--BlancoNube) !important; color: var(--ColorPrincipal) !important}
@media (max-width: 900px) {.active {background: none !important; color: var(--Blanco) !important}}/*en menu movil NO*/





















/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* ------------------------------  FIGURAS SE MUEVEN DE FONDO  -------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.figuras-anim {position: fixed; inset: 0; overflow: hidden; pointer-events: none}

.figura {position: absolute; width: 5rem; height: 5rem; pointer-events: none; will-change: transform;
  transform-origin: center center; transform: scale(0) rotate(0deg);
  animation: figura 15s ease-in forwards infinite;
}

.figura svg {width: 100%; height: 100%}

.figura path {fill: #ffffff65}/*Color de las figuras*/

@keyframes figura {/*Movimiento de las figuras*/
  from {transform: scale(0) rotate(0deg); opacity: 1}
  to {transform: scale(5) rotate(960deg); opacity: 0}
}

/*Tiempo de salir cada figura: por JS*/
/*Posición en la que aparece cada figura: por JS*/























/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* ---------------------------  CABECERA TRIPLE con DESPLEGABLE MOVIL  -----------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/

/*Arregla que el contenido tapado x el Menú lateral se pueda pulsar*/
.cabecera-primera, .cabecera-segunda, .buscador {position: relative; z-index: 20}/*Arregla contenido tapado x Menú*/


/* ---------------------------  CABECERA PRIMERA  -----------------------------------*/
.cabecera-primera {
    /*Contenedor especial*/
    position: relative;/*FUERZA QUE TODA LA WEB QUE HAY DENTRO ESTÉ X ENCIMA DE LAS FIGURAS DE FONDO QUE SE MUEVEN*/
    max-width: 140rem;/*1.400px de ancho (xqe Main solo se queda en 900px)*/
    width: 100%;/*ESTO FUERZA LA ANCHURA EN CONFLICTOS CON DISPLAY:FLEX*/
    margin: 0 auto;/*centrada*/
    padding: 0 3rem; /*Espacio 3rem a los lados gigante, xqe sino no se ven las figuras que giran detrás*/
 display: flex; justify-content: space-between; margin-top: 2rem;
}

.redes-sociales svg {
height: 25px;/*Altura*/
/*Anchura opcional width: 40px;*/
stroke: none;/*color del borde: NO*/
fill: var(--Blanco);/*color del relleno: SI*/
margin: 0 2px;/*Distancia entre iconos*/
transition: all 0.3s ease}

.redes-sociales .youtube {margin-right: 6px}

.redes-sociales svg:hover {opacity: 0.6}

    



/*El selector de color del Menú movil NO se ve al principio*/
.cabecera-tercera .elegir-color {margin-top: 2rem; display: none}
.cabecera-primera .elegir-color {margin-top: -0.5rem;}
@media (max-width: 900px) {
    .cabecera-primera .elegir-color {display: none}/*El selector de color web DE LA CABECERA PRIMERA desaparece*/
    .cabecera-tercera .elegir-color {display: block}/*El selector de color del Menú movil APARECE*/
}


@media (max-width: 500px) {
    .cabecera-primera {padding: 0; margin-top: 1.8rem; padding-left: 1rem}
    .redes-sociales svg {height: 22px}
}


/*Color de la web a elegir*/
.elegir-color * {display: inline-block}
.elegir-color .pregunta-color {margin-right: 0.5rem}
.elegir-color p {color: var(--Blanco); font-size: 1.6rem; margin-bottom: 0;}
.elegir-color div p {font-size: 1.5rem;}
.elegir-color div {padding-top: 5px; padding-bottom: 3px; padding-right: 10px; padding-left: 10px; border-radius: 12px}
.elegir-color .cambio_rosa {background: #f593d1}
.elegir-color .cambio_rosa:hover {background: #f9cde9}
.elegir-color .cambio_azul {background: #2899f1}
.elegir-color .cambio_azul:hover {background: #b6dfff}
.elegir-color .cambio_verde {background: #25bd7b}
.elegir-color .cambio_verde:hover {background: #90e8c1}





/* ---------------------------  CABECERA SEGUNDA  -----------------------------------*/
.cabecera-segunda {display: flex; justify-content: center; margin-top: 1.7rem; margin-bottom: 4rem}

.bloque-logo {display: flex; align-items: center; gap: 1rem; padding: 0 2rem/*margen de contenedor especial*/}

.cabecera-segunda img {width: 11rem}

.cabecera-segunda .texto {text-align: center}
.cabecera-segunda .texto div {font-family: var(--fuenteTitulos); font-weight: bold; color: var(--Blanco);}
.cabecera-segunda .texto .titulo {font-size: 4.2rem; line-height: 1.1}
.cabecera-segunda .texto .subtitulo {font-size: 2rem;}

.bloque-logo:hover {opacity: 0.7}

@media (max-width: 900px) {
    .cabecera-segunda {margin-bottom: 3.5rem}
    .cabecera-segunda img {margin: 0 auto; margin-bottom: 1rem}
    .bloque-logo {display: block}
}

@media (max-width: 500px) {/*Tamaño de todo reducido para Movil*/
    .cabecera-segunda {margin-bottom: 2rem}
    .cabecera-segunda img {width: 10rem}
    .cabecera-segunda .texto .titulo {font-size: 3.2rem}
    .cabecera-segunda .texto .subtitulo {font-size: 1.9rem}
}





/* ---------------------------  CABECERA TERCERA  -----------------------------------*/
/*Rn PC tiene las clases del "Contendor", pero luego en movil las pierde*/
.cabecera-tercera-contenedor {/*Contenedor especial*/
    position: relative;/*FUERZA QUE TODA LA WEB QUE HAY DENTRO ESTÉ X ENCIMA DE LAS FIGURAS DE FONDO QUE SE MUEVEN*/
    max-width: 140rem;/*1.400px de ancho (xqe Main solo se queda en 900px)*/
    width: 100%;/*ESTO FUERZA LA ANCHURA EN CONFLICTOS CON DISPLAY:FLEX*/
    margin: 0 auto;/*centrada*/
    padding: 0 3rem; /*Espacio 3rem a los lados gigante, xqe sino no se ven las figuras que giran detrás*/
 display: flex; flex-direction: row; justify-content: space-between
}

/*---------------------------------MENÚ DE NAVEGACIÓN EN PC*/
nav ul li a {color: var(--Blanco); font-size: 1.8rem; font-weight: bold; padding: 0.9rem; padding-bottom: 0.8rem;
    border-radius: 12px; transition: all 0.3s ease}
nav ul .menu-descargables a {padding-bottom: 0.5rem;}
nav ul li a:hover {background: var(--BlancoNube); color: var(--ColorPrincipal)}

.cabecera-tercera img {width: 110px; height: 70px; margin-top: 10px}

/*--- Menú de navegación que aparece*/
#menu .secciones {display: flex; flex-direction: row; gap: 2.5rem}
nav ul li {margin: 12px 0}

.sub-menu {display: flex; flex-direction: column; z-index: 100;
position: absolute; background: #ffffffe6; border-radius: 10px;
max-height: 0;/*ALTURA inicial a 0 (escondido)*/ overflow: hidden;
transition: max-height 0.5s ease-in-out; /*Transición para su ALTURA*/}

.tamaño-submenu {padding: 8px}
.sub-menu.ver {max-height: 425px}/*ponerle ALTURA exacta para que se vea el menú*/
nav ul li .sub-menu li {margin: 0; padding: 5px 0}
.sub-menu a {font-size: 1.6rem; font-style: italic; color: var(--ColorPrincipal)}
.sub-menu a:hover {text-decoration: underline}

/*ICONO DE FLECHA PARA ABRIR SUBSECCIÓN*/
/* Contenedor de la flecha */
.arrow {display: inline-block; position: relative; width: 20px; height: 10px; margin-right: -5px}

/* Línea superior */
.arrow-line {position: absolute; width: 10px; height: 2px; background: var(--Blanco); transition: all 0.3s ease}
.menu-descargables a:hover .arrow-line {background: var(--ColorClaro)}
    
.arrow-line:first-child {top: 0; left: 0;
transform: rotate(45deg); /* Rotar para formar un ángulo */
transform-origin: left bottom; /* Punto de origen para la rotación */}
      
/* Segunda línea, la parte que completa la flecha */
.arrow-line:last-child {bottom: 0; right: 6px; transform: rotate(-45deg); transform-origin: right top; top: 0px}

@media (max-width: 1070px) {
    #menu .secciones {gap: 1.7rem}
    nav ul li a {letter-spacing: -1px}
}

@media (max-width: 900px) {
    nav ul li a {letter-spacing: 0}
    nav ul li .sub-menu li {padding: 1px 0}
    nav ul li a:hover {background: none}
}



/*---------------------------------MENÚ DE NAVEGACIÓN EN MOVIL*/
@media (max-width: 900px) {

    .cabecera-tercera-contenedor {position: static; padding: 0}

    .cabecera-tercera {position: absolute; top: 0; width: 100%; /*background: blue;*/
    height: 100%;/*Que contenedor tenga suficiente altura*/ overflow: hidden}

    /*--- El Botón X*/
    .fundaBotonX {position: absolute; right: 0; padding: 5px; margin: 10px;
    /*background: #ff000047;*/ z-index: 100;/*X encima del menú*/}

    #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;/*cada línea delBotónX*/
    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)}

    #menu .secciones {display: block}
    /*--- Menú de navegación que aparece*/
    #menu {position: absolute; top: 0; right: 0;
        width: 70%;/*Anchura del Menú desplegado*/
        height: 100%; /* Hace que el menú tome toda la altura del contenedor */
    
        transform: translateX(100%); /* Empieza oculto fuera de la vista */
        transition: transform 0.5s ease-in-out; /*Transición pa desplazam lateral*/
    
        /*decoración*/
        z-index: 50;/*menú debajo de X*/
        background: var(--ColorPrincipal); opacity: 0.9; text-align: right; padding-right: 2rem; border-top-left-radius: 10px; border-bottom-left-radius: 10px; padding-top: 50px; padding-left: 20px
    }

    #menu.ver {transform: translateX(0)}/* Desplaza el menú hacia la vista */

    nav ul li {margin: 12px 0}
    .cabecera-tercera a {color: var(--Blanco); display: block; padding: 2px; font-weight: 500; font-size: 1.65rem}
    .cabecera-tercera a:hover {color: var(--ColorClaro)}

    .sub-menu {position: relative; background: none;}
    .tamaño-submenu {padding: 0}

    /*FORMAS DE DIFERENCIAS LAS SUBSECCIONES DE LAS SECCIONES*/
    .sub-menu li a {text-align: right; font-size: 1.5rem; font-style: italic; font-weight: 400; color: var(--Blanco)}
    nav ul li ul li {margin: 2px 0}/*menor padding*/

    .buscador {position: relative;/*FUERZA QUE TODA LA WEB QUE HAY DENTRO ESTÉ X ENCIMA DE LAS FIGURAS DE FONDO QUE SE MUEVEN*/
    max-width: 140rem;/*1.400px de ancho (xqe Main solo se queda en 900px)*/
    width: 100%;/*ESTO FUERZA LA ANCHURA EN CONFLICTOS CON DISPLAY:FLEX*/
    margin: 0 auto;/*centrada*/
    padding: 0 3rem; /*Espacio 3rem a los lados gigante, xqe sino no se ven las figuras que giran detrás*/
 display: block}

}



/*---------------------------------CAJA DE BÚSQUEDA*/
.cabecera-tercera-contenedor .buscador {width: 29%}

.form-busqueda {display: flex; align-items: center; justify-content: end; margin-bottom: 20px;
border: 1px solid var(--Blanco); border-radius: 11px; margin-top: 0.6rem}

.form-busqueda input {width: 100%; padding: 8px; padding-bottom: 7px; border: 1px solid var(--Blanco);
border-radius: 10px 0px 0px 10px; font-size: 1.5rem}

@media (max-width: 500px) {.form-busqueda input {font-size: 1.45rem}}

.form-busqueda button {background: var(--ColorPrincipal); color: white; font-size: 16px; transition: all 0.3s ease;
padding: 5px 10px 1px 10px; border-radius: 0px 10px 10px 0px; cursor: pointer}

.form-busqueda button:hover {background-color: var(--ColorClaro)}

.form-busqueda svg {
height: 20px;/*Altura*/
stroke: none;/*color del borde: NO*/
fill: var(--Blanco);/*color del relleno: SI*/
transition: all 0.3s ease; margin-bottom: -2px}

/*Truco de reducirla un poco para que no choque con el Menú de nav*/
@media (max-width: 1000px) {
    .cabecera-tercera-contenedor .buscador {width: 27%}
}

/*Versión Tablet y Movil: al 100%*/
@media (max-width: 900px) {
 .cabecera-tercera-contenedor .buscador {width: 100%}
}

.resultados {margin-bottom: 2rem}




.video-container {position: relative; width: 100%; padding-top: 56.25%/*16:9*/}
.video-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}






















/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -----------------------------  MAIN: CONTENIDO DE CADA SECCIÓN WEB  -----------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.contenido-web main {width: 70%}


/* --------------------------- PRESENTACIÓN*/
.presentacion h1 span {display: block}
@media (max-width: 900px) {.presentacion h1 span {display: inline}}




/* --------------------------- DISEÑO DE LAS CAJAS (DE ÚLTIMOS ARTÍCULOS y demás...)*/
/*Maquetación de las Cajas*/
.cajas {display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 1.3rem}
@media (max-width: 650px) {.cajas {grid-template-columns: 1fr; gap: 4rem}}

/*Caracteristicas del contenido de cada Caja*/
.caja {display: flex; flex-direction: column; /*background: yellow;*/}

.caja .titulo {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;/*Máximo de renglones*/
line-height: 1.3; margin-bottom: 0.8rem}
.caja .portada:hover .titulo {color: var(--ColorPrincipal)}/*hover del título*/

.caja .resumen {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;/*Máximo de renglones*/
margin-top: 0.7rem; margin-bottom: 1rem}

@media (max-width: 650px) {/*EN CAJAS DE 1 EN 1 DESAPARECE EL LÍMITE DE Máximo de renglones*/
    .caja .titulo {display: block}
    .caja .resumen {display: block}
}

.etiquetas {font-size: 1.55rem; text-align: left;}
.etiquetas a {margin-right: 0.5rem; font-size: 1.55rem; font-weight: bold; font-style: italic; margin-top: -0.2rem; color: var(--Negro)}
.etiquetas a:hover {text-decoration: underline; color: var(--ColorPrincipal);}
@media (max-width: 500px) {.etiquetas a {font-size: 1.35rem; margin-top: -0.4rem}}
.aside .etiquetas {text-align: left}


/*Cada Imagen se recorta sola proporcionalmente (pa que el cliente suba las fotos que quiera sin descuadrar nada)*/
.caja .caja-img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center}
.caja .caja-img {position: relative; overflow: hidden; aspect-ratio: 16/11}

/*Hover: La imagen se colorea de fondo*/
.caja .caja-img {position: relative; overflow: hidden; border-radius: 2rem}
.caja .caja-img img {display: block; width: 100%}
.caja .caja-img::after{content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; background: var(--ColorPrincipal)}
.caja .portada:hover .caja-img::after {opacity: 0.6}



/* ----------------------------- ÚLTIMOS VÍDEOS*/
.video {position: relative; height: 0; overflow: hidden;
padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/
}
.video iframe, .video object, .video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%}























/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* ---------------------------  ASIDE: CONTENIDO DE LA COLUMNA DERECHA  ----------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.contenido-web aside {width: 30%}
.contenido-web aside section {margin-bottom: 3rem}
.contenido-web aside .nube {padding: 2rem}/*Sustituye el padding natural de la Nube (más abajo)*/

@media (max-width: 1150px) {.contenido-web aside h4 {font-size: 3.6rem; letter-spacing: -2px}}
@media (max-width: 500px) {.contenido-web aside h4 {font-size: 2.8rem; letter-spacing: -1px}}


/* ----------------------------- ETIQUETAS*/
.aside-etiquetas {text-align: left}
.aside-etiquetas p {display: inline; font-size: 1.55rem; font-weight: bold; font-style: italic; text-align: left; line-height: 1.9}
.aside-etiquetas p:hover {text-decoration: underline; color: var(--ColorPrincipal)}


/* ----------------------------- RECOMENDADOS*/
.aside-recomendados h3 {font-size: 2rem; text-align: left; margin-bottom: 1.4rem; line-height: 1.4}
.aside-recomendados h3:hover {color: var(--ColorPrincipal)}

@media (max-width: 1000px) {.aside-recomendados h3 {text-align: center}}
@media (max-width: 500px) {.aside-recomendados h3 {text-align: left}}


/* -----------------------------FACEBOOK e INSTAGRAM*/
.caja-social iframe {width: 100%}/*las cajas ocupan el 100% de su espacio grid (recargando la web)*/

.aside-facebook {text-align: center}/*la caja de Facebook queda centrada (xqe en Tablet tiene mucho hueco a lados*/

.caja-aside-final {margin-top: 2rem}/*la caja de Instagram se queda fija arriba, con un margen*/
@media (max-width: 1000px) {.caja-aside-final {position: relative !important}}/*Pero al ponerse abajo el Aside: deja de ser fija*/

/*Que la última caja aside quede detrás del pie de pag (x si en Tablet llega)*/
.pie {position: relative; z-index: 50}
.caja-aside-final {z-index: 25}
























/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------- DIV DE TODA LA WEB QUE ENGLOBA EL MAIN y EL ASIDE (dejarlo aqi al final) ----------------*/
.contenido-web {display: flex; flex-direction: row; gap: 3rem}
@media (max-width: 1000px) {/*Antes de aparecer el Menú movil aparecen las columnas móvil*/
    .contenido-web {flex-direction: column}
    .contenido-web main {width: 100%}
    .contenido-web aside {width: 100%}
}

.nube {padding: 3.5rem 2rem; background: var(--BlancoNube); border-radius: 2rem}

@media (max-width: 500px) {/*En Móvil las Nubes tienen menos Padding pa qe quepa más texto*/
    .nube {padding: 3.5rem 1.3rem}
    .contenido-web aside .nube {padding: 2rem 1.3rem}
}
















/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* --------------------------  INFORMACIÓN ABIERTA (de Artículo o Vídeo)  --------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.informacion-abierta .titulo {margin-bottom: 1rem}
.informacion-abierta .resumen {text-align: center; font-size: 2rem; font-weight: bold; line-height: 1.2}
.informacion-abierta img {width: 100%; border-radius: 2rem; margin-bottom: 2rem}
.informacion-abierta .video-container {margin-bottom: 2rem}
.informacion-abierta h2 {font-family: var(--fuenteParrafos); color: var(--Negro); font-size: 2rem; margin-bottom: 0; text-align: left}
.informacion-abierta .video {margin-bottom: 2rem}
.informacion-abierta .boton {display: inline-block; margin-bottom: 2rem}
.informacion-abierta .enlace {margin-bottom: 2rem}

.detalles-derechos {text-align: right; margin-top: 4rem}
.detalles-derechos .etiquetas {text-align: right}
.detalles-derechos p, .boton-wassap {font-size: 1.5rem; margin-bottom: 1rem}
.boton-wassap {background: var(--ColorPrincipal); color: var(--Blanco); font-weight: 100; text-align: center; border-radius: 10px; padding: 0.7rem 1.5rem}
.boton-wassap:hover {background: var(--ColorClaro)}

@media (max-width: 500px) {
    .informacion-abierta .resumen {font-size: 1.8rem}
    .informacion-abierta h2 {font-size: 1.8rem}
    .detalles-derechos p, .boton-wassap {font-size: 1.4rem}
}

.relacionados {margin-bottom: -1rem}/*Pa corregir el margen demasiado grande la la última caja de recomendados*/


/*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}

/*Si Admin pone un enlace (boton) dentro de la Entrada*/
.boton.btn-interno {padding: 0.5rem 2rem}

/*Colores del texto TEXTAREA (pero debes copiar estos códigos en "Style-JosPress.css" privado de la web*/
.color-personalizado {color: var(--ColorPrincipal)}
.color-azul {color: #2899f1}
.color-verde {color: #25bd7b}
.color-rosa {color: #f593d1}

.entrada-multimedia h2 {display: inline-block;}
    










/* ----------------------------------------------------------------------------------------------*/
/* ---------------- COMENTARIOS DENTRO DE LOS ARTÍCULOS (publicacion.php) ------------------------*/
/* ----------------------------------------------------------------------------------------------*/

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


/*ASPECTO DEL FORMULARIO DE LOS COMENTARIOS*/
.comentarios-articulo .formulario {margin-top: 4rem}
.comentarios-articulo fieldset {margin-bottom: 2rem}
.comentarios-articulo .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: white; border: 1px solid #999999; border-radius: 1rem}
}

/*Estilo de los input en :hover*/
.comentarios-articulo .formulario {input:hover, textarea:hover, select:hover {border-color: var(--ColorPrincipal)}}

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

.comentarios-articulo .formulario input {margin-bottom: 2rem;}
.comentarios-articulo .formulario textarea {margin-bottom: 2rem; height: 15rem}





















/* ----------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------ PAGINADOR -----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------*/
.paginador {display: flex; justify-content: right; gap: 0.5rem; margin-top: 3rem;
flex-wrap: wrap; /*en movil los nº caen a siguiente línea*/}

.paginador .btnpag {color: gray; font-size: 1.9rem; font-weight: 500; padding: 0.4rem 0.5rem; transition: color 0.3s ease}

.paginador .btnpag:hover {color: var(--ColorPrincipal)}

.paginador .btn-activo {color: var(--ColorPrincipal); font-size: 2rem; font-weight: bold}

.paginador .btn-pasar {font-size: 3.2rem; line-height: 0.78; padding: 0.4rem}






























/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* ------------------- CATEGORÍA DE DESCARGABLE (el submenú desplegable) ABIERTA -------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.categoria-descargable .intro {margin-bottom: 5rem}
.categoria-descargable .caja {margin-bottom: 3rem}
.categoria-descargable .caja .caja-img {aspect-ratio: 16 / 14}
.categoria-descargable {margin-bottom: -3rem}


















/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------- SEÑO BEA --------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.blog-seno .imagen-lapiz {width: 100%; border-radius: 2rem; margin-bottom: 2rem}

.sobre-seno .imagen-bea {border-radius: 100%; margin: 0 auto}

.cajas-seno {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; margin-bottom: 2rem}
@media (max-width: 1200px) {.cajas-seno {grid-template-columns: 1fr}}
@media (max-width: 1000px) {.cajas-seno {grid-template-columns: 1fr 1fr}}
@media (max-width: 850px) {.cajas-seno {grid-template-columns: 1fr}}

.texto-bea .cv {margin-bottom: 0}





















/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------- CONTACTO --------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/

/*ASPECTO DEL TEXTO E IMAGEN DE CONTACTO*/
.hablemos .imagen-telefono, .hablemos .imagen-telefono img {border-radius: 2rem}
.cajas-hablemos {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem}
.cajas-hablemos img {display: none}/*En PC la imagen por HTML fuera*/
.cajas-hablemos .imagen-telefono {/*Meto la Imagen por CSS*/
    background-image: url(../img/telefono-rosa.jpg); background-repeat: no-repeat; height: 100%;
    background-size: cover; background-position: center center;
}
@media (max-width: 850px) {/*En Tablet quito la img x CSS y devuelvo la imagen x HTML*/
    .cajas-hablemos .imagen-telefono {background-image: none}
    .cajas-hablemos img {display: block}
    .cajas-hablemos {grid-template-columns: 1fr; gap: 0;}/*y qe se pongan en 1 columna*/
}


/*ASPECTO DEL FORMULARIO DE CONTACTO*/
#manda-email fieldset {margin-bottom: 1rem}
#manda-email .formulario {/*todos los input (menos enviar:submit)*/
    input:not([type="submit"]), textarea, select {
    display: block; width: 100%; padding: 0.8rem; margin-top: 0.7rem;
    background: white; border: 1px solid #999999; border-radius: 1rem}
}

/*Estilo de los input en :hover*/
#manda-email .formulario {input:hover, textarea:hover, select:hover {border-color: var(--ColorPrincipal)}}

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

#manda-email .formulario input {margin-bottom: 2rem;}
#manda-email .formulario textarea {margin-bottom: 2rem; height: 15rem}






















/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------- ACCESO A JOSPRESS ----------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.acceso-jospress {width: 100%; margin-top: 6rem; margin-bottom: 3rem}

.acceso-jospress .define-jp {text-align: center; margin-top: -1rem; margin-bottom: 3rem}

.acceso-jospress input {margin-top: 0.7rem; margin-bottom: 3rem}

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

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

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





















/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* --------------------------------------  PIE DE PÁGINA  ------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.pie {padding: 5rem 0; /*background: black;*/}

.pie p {color: white; font-size: 1.6rem; font-weight: 200; color:var(--Blanco); text-align: center; margin-bottom: 0.7rem}

.pie .enlace-jose {margin-bottom: 0; font-size: 1.5rem}

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

@media (max-width: 500px) {
    .pie p {font-size: 1.4rem}
    .pie .enlace-jose, .pie .enlace-jose a {font-size: 1.38rem}
}


/*----- 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; line-height: 1.5; border-radius: 100px; background: #ffffff80; display: none}

.subir:hover .flechas span {background:var(--ColorClaro)}
.flechas {display: inline-block; width: 22px}
.flechas span {display: block; width: 20px; height: 3px; background:var(--ColorPrincipal); transition: all 0.3s 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}



















/* ----------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------*/
/* ---------------------------------------  COOKIES  --------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------*/

/*CARTEL DE LAS COOKIES*/
#cajacookies {background: #fffffff0; 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 p {font-size: 1.55rem; margin-bottom: 0}

#cajacookies a {color: var(--ColorPrincipal); text-decoration: underline}
#cajacookies a:hover {color: var(--ColorClaro)}

#cajacookies button {background: var(--ColorPrincipal); color: var(--Blanco); margin-left: 25px; border: 0px; padding: 5px 13px;
border-radius: 5px; font-size: 1.5rem}
          
#cajacookies button:hover {background: var(--ColorClaro)}

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

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


/*PÁGINA DE LAS COOKIES*/
.pag-cookies ul {margin-bottom: 2rem;}



















/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* --------------------------------- ERROR: PAG NO ENCONTRADA --------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------*/
.pag-noexiste p {text-align: center}