sin href (solo abre el modal por
data-toggle), asi que nunca coge el color de enlace y se queda en el
#091e3d del body. El nuestro si lleva href, con lo que a:link lo pintaba
de azul. Se devuelve al negro del diseno y el azul pasa a ser el estado
de hover, que antes no tenia. */
.btnNav a,
.btnNav a:link,
.btnNav a:visited,
.btnNav a label {
color: var(--cw-texto-strong);
}
.btnNav a:hover,
.btnNav a:hover label,
.btnNav a:focus,
.btnNav a:focus label {
color: var(--cw-principal);
}
/* Menu secundario (categorias sueltas sin desplegable) */
#submenu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: 0 0 7px 0;
}
.cw-submenu-item {
display: inline-block;
padding: 4px 14px;
border-radius: 20px;
border: 1px solid var(--cw-borde);
background: #fff;
font-size: 80%;
text-decoration: none;
color: var(--cw-texto-strong);
}
.cw-submenu-item:hover {
border-color: var(--cw-principal);
color: var(--cw-principal);
}
/* Titulo de los modales de categoria (era un en el diseno; se baja a
span para no competir con el h1 real de la pagina) */
.cw-modal-titulo {
font-family: 'Quando', sans-serif;
font-weight: 600;
display: inline-flex;
align-items: center;
}
.modal-content .close { text-decoration: none; }
/* *************************************************************************
* PIEZAS SUELTAS DEL DISENO
* ************************************************************************* */
/* Lema del portal: es el h1 de la portada. Antes vivia en la cabecera con
la clase #slogan; la cabecera nueva es fija y no tiene sitio para el. */
.cw-lema {
font-family: 'Quando', sans-serif;
font-size: 230%;
font-weight: 600;
line-height: 1.15;
color: var(--cw-texto-strong);
margin: 0 0 15px 0;
width: 100%;
text-wrap: balance;
}
/* Cuerpo del contenido, tal cual lo escribe el editor en el backoffice.
Antes iba envuelto en un , que ademas de heredar tamano de titular
marcaba todo el articulo como encabezado. */
.cw-cuerpo {
font-size: 95%;
font-weight: 300;
line-height: 1.55;
text-align: justify;
}
/* *************************************************************************
* CONTENIDO PEGADO DESDE EL EDITOR
*
* Las entradillas y los cuerpos vienen de la base de datos con los estilos en
* linea que arrastra el editor del backoffice al pegar desde Word o Pages:
*
* Eso pisa cualquier hoja, y en la home eran 46 elementos, la mayor parte del
* texto de la pagina. Antes no cantaba porque el sitio viejo tambien iba en
* una sans generica; con Open Sans al lado se ve a la legua.
*
* Se neutralizan solo familia, tamano y interlineado, y solo dentro de los
* contenedores de contenido: el color y el resto de lo que ponga el redactor
* se respetan. La regla va sobre los descendientes, no sobre el contenedor,
* para que este conserve su propio tamano.
*
* Esto es un parche de presentacion. Lo sano es que el editor no guarde esos
* estilos: mientras sigan en la base de datos, cualquier cambio de tipografia
* futuro se topara con lo mismo.
* ************************************************************************* */
.cw-ficha-breve *,
.cw-cuerpo * {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
/* El pegado tambien se lleva por delante la negrita del editor */
.cw-ficha-breve strong, .cw-ficha-breve b,
.cw-cuerpo strong, .cw-cuerpo b {
font-weight: 600 !important;
}
.cw-cuerpo img { max-width: 100%; height: auto; }
.cw-cuerpo iframe { max-width: 100%; }
.cw-cuerpo table { max-width: 100%; }
.cw-cuerpo ul, .cw-cuerpo ol { padding-left: 20px; }
/* Listado "+ portal" de la columna derecha */
.cw-mas-noticia {
padding: 8px 0;
border-bottom: 1px solid #e0e0e0;
font-size: 90%;
line-height: 1.3;
}
.cw-mas-noticia:last-child { border-bottom: 0; }
.cw-mas-noticia a { color: var(--cw-texto-strong); text-decoration: none; }
.cw-mas-noticia a:hover { color: var(--cw-principal); }
/* Bloque de reservas: HTML de terceros (Booking y similares) */
#reservas { overflow-x: auto; }
#reservas img, #reservas iframe { max-width: 100%; }
/* Carruseles de Bootstrap (portada y galeria de la ficha) */
.cw-carrusel {
border-radius: 6px;
overflow: hidden;
background: var(--cw-fondo);
}
.cw-carrusel .carousel-item img { width: 100%; height: auto; }
.cw-carrusel .carousel-control-prev,
.cw-carrusel .carousel-control-next { width: 10%; }
/* Titulo sobreimpreso del carrusel de portada */
.cw-carrusel #slider_sup_fondo_texto,
.cw-carrusel #slider_sup_texto { pointer-events: none; }
/* Fechas de un evento de agenda */
.cw-fechas-agenda {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cw-fecha-agenda {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
background: var(--cw-fondo);
border: 1px solid var(--cw-borde);
font-size: 85%;
}
/* Documentos descargables de la ficha */
.cw-doc {
display: inline-block;
margin-right: 10px;
font-size: 90%;
}
/* Unidad de AdSense de la ficha de detalle */
.cw-adsense { width: 100%; }
/* La ficha es el hijo directo de la rejilla; el borde y la sombra los pone
.cw-ficha para que el hueco de la rejilla no quede pintado si no hay nada */
.cw-ficha-item { min-width: 0; }
/* Tamanos nominales de banner que no necesitan reglas de posicion propias,
pero si evitar que rompan el ancho de su contenedor */
.cw-banner-40x40 { width: 40px; height: 40px; }
.cw-banner-220x30,
.cw-banner-300x125,
.cw-banner-660x90,
.cw-banner-800x600 { max-width: 100%; }
/* *************************************************************************
* VIDEOS DE YOUTUBE
*
* ValoresDefecto.VIDEO_YOUTUBE genera el iframe de embed dentro de este
* contenedor, que le da relacion 16:9 y ancho fluido.
* ************************************************************************* */
.cw-video {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
overflow: hidden;
}
.cw-video iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* *************************************************************************
* LOGOTIPOS
*
* Los logos de los cinco portales son JPG con blanco opaco: no hay canal
* alfa que respetar, asi que apoyados en la cabecera o el pie (que van en
* --cw-fondo) se les marcaba el recuadro blanco alrededor.
*
* En vez de pintar una caja del color del fondo detras de cada logo, que
* obliga a mantener sincronizados el color de la caja y el de la imagen, se
* usa mix-blend-mode: multiply. Multiplicar por blanco deja el fondo tal
* cual, con lo que el blanco del JPG desaparece y toma el color que haya
* debajo, sea el que sea. El logo se adapta solo a lo que cada portal ponga
* en --cw-fondo, sin tocar ni una imagen ni anadir una variable mas.
*
* La marca apenas se desplaza: sobre #f9f9f9 el rojo de Salou pasa de
* #b2000a a #ae000a. Y donde no haya soporte de blend, el logo se ve como se
* veia hasta ahora, con su recuadro; no se rompe nada.
* ************************************************************************* */
/* Vale puesta en el contenedor o directamente en la imagen. Solo se le pone a
las imagenes opacas: bdf-tech-powered.png ya trae canal alfa (el 91% de sus
pixeles), asi que se recorta sola y no hay que tocarla. */
.cw-logo {
line-height: 0;
background: none;
}
img.cw-logo,
.cw-logo img {
mix-blend-mode: multiply;
}
/* El display:block solo cuando la clase va en el contenedor: quita el hueco
que deja la linea base. En la propia imagen se respeta como venga, que hay
logos que van en linea con otros. */
.cw-logo img { display: block; }
a.cw-logo,
span.cw-logo { display: inline-block; }