dentro de un articulo
============================================ */
.bjh-aviso {
display: flex;
flex-direction: column;
gap: var(--bjh-esp-sm);
margin: 0 0 var(--bjh-esp-lg);
padding: var(--bjh-esp-lg);
background: var(--bjh-verde);
color: #ffffff;
border-radius: var(--bjh-radio);
font-family: var(--bjh-sans);
line-height: 1.6;
}
/* --- Etiqueta "Aviso": sale sola, no hay que escribirla --- */
.bjh-aviso::before {
content: "Aviso";
align-self: flex-start;
padding: 3px 10px;
border-radius: 999px;
background: var(--bjh-amarillo);
color: #1f1f1f;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* --- Titulo: el del modulo o el del articulo --- */
.bjh-aviso .sp-module-title,
.bjh-aviso .bjh-aviso-titulo {
margin: 0;
font-family: var(--bjh-serif);
font-size: var(--bjh-txt-lg);
font-weight: 600;
line-height: var(--bjh-alt-titular);
color: #ffffff;
}
/* --- Texto --- */
.bjh-aviso p {
margin: 0 0 var(--bjh-esp-sm);
color: #ffffff;
}
.bjh-aviso p:last-child {
margin-bottom: 0;
}
/* --- Enlaces dentro del aviso --- */
.bjh-aviso a {
color: #ffffff;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.bjh-aviso a:hover {
color: var(--bjh-amarillo);
}
/* ============================================
05. ACCESIBILIDAD - teclado y movimiento
============================================ */
/* --- Foco visible al navegar con el teclado (tecla Tab) --- */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible {
outline: 3px solid var(--bjh-foco);
outline-offset: 2px;
border-radius: 2px;
}
/* sobre fondos oscuros (barra, pie y avisos) el foco va en amarillo */
#sp-header .logo a:focus-visible,
#sp-header .sp-megamenu-parent > li > a:focus-visible,
#sp-header #offcanvas-toggler:focus-visible,
#sp-bottom a:focus-visible,
#sp-footer a:focus-visible,
.bjh-aviso a:focus-visible {
outline-color: var(--bjh-foco-oscuro);
}
/* en el menu, el recuadro va por dentro de la barra */
#sp-header .sp-megamenu-parent > li > a:focus-visible {
outline-offset: -6px;
}
/* --- Los desplegables tambien se abren con el teclado --- */
#sp-header .sp-megamenu-parent li:focus-within > .sp-dropdown {
display: block;
opacity: 1;
visibility: visible;
}
#sp-header .sp-megamenu-parent > li:focus-within > a::before {
transform: scaleX(1);
}
/* --- Botones del menu del movil: zona de pulsacion comoda (44 px) --- */
#offcanvas-toggler,
.offcanvas-menu .close-offcanvas {
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
}
/* --- Menos movimiento si la persona lo tiene activado en su equipo --- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* ============================================
06. ENCABEZADOS - titulos de toda la web
============================================ */
/* --- Base: todos los encabezados (anula la Tahoma azul de Helix) --- */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
margin: 0 0 var(--bjh-esp-md);
font-family: var(--bjh-serif);
font-weight: 600;
line-height: var(--bjh-alt-titular);
color: var(--bjh-titulos);
text-wrap: balance;
overflow-wrap: break-word;
}
body h1 {
font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
}
body h2 {
font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
}
body h3 {
font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.4375rem);
}
/* h4: etiqueta en mayusculas */
body h4 {
font-family: var(--bjh-sans);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bjh-titulos);
}
body h5,
body h6 {
font-family: var(--bjh-sans);
font-weight: 700;
color: var(--bjh-texto);
}
body h5 {
font-size: 1rem;
}
body h6 {
font-size: var(--bjh-txt-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* --- Titulo de la pagina: articulo abierto, encabezado de pagina
y titulo de las categorias (formato blog y formato lista) --- */
#sp-component .article-details .article-header h1,
#sp-component .page-header h1,
#sp-component .com-content-category-blog > :is(h1, h2),
#sp-component .category-list > div > :is(h1, h2) {
margin-bottom: var(--bjh-esp-xl);
}
/* el titulo de las categorias, del mismo tamano que el de los articulos */
#sp-component .com-content-category-blog > h2,
#sp-component .category-list > div > h2 {
font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
}
/* --- Titulos de las noticias en los listados (portada y blogs) --- */
#sp-component .article-list .article-header h2 {
margin-bottom: var(--bjh-esp-md);
font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
}
#sp-component .article-list .article-header h2 a {
color: inherit;
text-decoration: none;
}
/* --- Encabezados dentro del texto de los articulos --- */
#sp-component [itemprop="articleBody"] h2,
#sp-component .item-content > h2 {
margin-top: var(--bjh-esp-xl);
}
#sp-component [itemprop="articleBody"] h3,
#sp-component .item-content > h3 {
margin-top: 2rem;
}
#sp-component [itemprop="articleBody"] h4,
#sp-component .item-content > h4 {
margin-top: var(--bjh-esp-lg);
margin-bottom: var(--bjh-esp-sm);
}
#sp-component [itemprop="articleBody"] > :first-child {
margin-top: 0;
}
/* --- Movil: parte las palabras largas con guion --- */
@media (max-width: 575.98px) {
#sp-component h1,
#sp-component h2 {
hyphens: auto;
}
}
/* --- Quita la etiqueta roja "Featured" en toda la web --- */
.featured-article-badge {
display: none !important;
}
/* --- Portada: el titulo h1 solo lo oyen los lectores de pantalla --- */
body.view-featured #sp-component .page-header {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------- Estilo: CAMINO ---------- */
/* icono del colegio (baculo, calabaza, concha y pluma) */
:root {
--bjh-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 457'%3E%3Cpath fill-rule='evenodd' d='M48 457c0-1 0-1 0-1c-1-1-1-1-1-1c1-1 4-1 5 0c1 1-3 3-4 2zM64 456c0 0 1-1 2-1c1 0 1 0 2-1c1-1 5 1 5 2c0 1-1 1-2 0c0 0-1 0-2 0c0 0-1 0-1 0c0 1-4 1-4 0zM99 457c0 0-1-1-1-1c-2-1 0-3 2-2c1 0 2 0 2 0c1 1 1 2 0 2c0 0 0 0-1 0c0 1-2 1-2 1zM111 455c-1 0-3 0-4-1c-3-1-3-2 0-3c1 0 1-1 0-1c0-1-6 0-8 1c0 0-2 1-3 1c-1 2-3 2-12 1c-3 0-4 0-5 0c-2 1-3 1-5-1c-1-1-2-2-3-2c-1 0-4 1-5 2c-2 1-4 1-8 0c-3-1-4-1-7-1c-2 0-3 0-4 0c-2 1-5 1-6 1c-2-2 2-3 15-4c5 0 6 0 6-2c0-1-1-1-3-1c-5-1-5-3 0-3c5 0 5 0 2-2c-2-2-3-3-1-3c1-1 2-1 2-1l2 0 0-5c0-3 0-4 0-5c-1 0-1-1-1-1c1-1 1-14 1-116c0-72 0-116 0-117c1-4 1-3 1 2c0 7 1 8 7 9c1 0 2 0 2 1c1 0 2 0 2 0c3 0 3-4 3 51c0 30 0 49 0 49c0 0 1 0 3 0c4 0 4 0 2-2c-1-2-1-3 1-1c2 2 2 1 1-5c-2-8-2-10-2-13c0-1 0-3-1-5c0-2 0-6 0-11c0-8 0-8 4-7c2 0 3 0 1-1c-5-2-4-2-4-6c0-4 0-7 2-14c0-3 1-5 1-6c0-1 0-2 1-2c0-1 0-1 0-2c0-1 0-2 0-2c1 0 1-1 1-2c0-1 0-1 0-2c1 0 1-1 1-2c0-1 1-3 2-4c0-2 1-4 1-4c0-1 1-3 2-4c0 0 0 0 0-1c0-1 1-3 2-5c1-1 1-2 2-3c0-1 0-1 1 0c2 1 4 1 5 0c0 0 1-1 2-2c3-1 7-5 7-6c0 0-1-3-3-5c0 0-1-1-1-1c0 0 0-1 0-1c-1 0-1-1-1-1c0 0 0-1-1-1c0 0 0-1 0-1c0 0 1 1 2 2c4 5 6 6 8 4c4-4 6-8 6-10c0-2 0-2-5-7c-3-3-5-4-4-4c0 0 2 1 5 3c4 4 6 3 7-3c1-5 0-7-2-10c-3-2-3-2-1-3c2-1 2-1 2-3c0-2 0-3 2-5c2-3 9-12 12-16c3-4 11-11 14-14c2-1 4-2 4-3c7-8 17-3 21 11c0 1 1 2 1 2c0 0 0 11-1 14c0 1 0 3-1 5c0 4-1 6-1 7c-1 1-1 2-1 3c0 0 0 1-1 1c0 1 0 1 0 1c0 1-4 9-5 11c-3 4-6 8-9 10c-3 2-4 3-1 3c3-1 3 0 3 2c0 1-1 5-2 7c0 1 0 2 0 3c0 0 0 1-1 1c0 1 0 1 0 2c0 1-3 8-5 11c0 1 0 2 0 2c0 0-1 2-2 5c-2 3-3 5-3 5c0 1-2 4-4 6c-4 2-4 3-1 3c2-1 3 1 1 5c0 1 0 2 0 3c0 0 0 1 0 2c-1 0-1 2-1 2c0 3-4 14-5 16c0 0 0 1 0 1c0 0 0 1 0 2c-1 0-1 2-2 3c-2 4-4 7-8 10c-4 4-8 8-8 9c0 0 2-1 4-3c7-4 7-4 5 7c0 1 0 3 0 4c0 1 0 2-1 3c0 1 0 2 0 3c0 1 0 2 0 3c-1 0-1 1-1 2c0 0-1 4-2 7c-3 5-3 7-8 12c-2 2-3 3-3 4c0 0-1 1-1 1c-2 1-2 2 0 2c4 0 4 1 0 1c0 0-1 0-2 0c0 1-1 1-2 1c-2 0-2 1 0 3c2 2 2 2 2 4c0 3-1 3-1 1c-1-2-1-3-2-4c-2-2-6-2-5 0c0 1 0 1-2 1c-7 3-7 3-8 15c0 4 0 9 0 12c-1 3-1 16-1 33c0 24 0 29 0 31c-1 3-1 3 0 3c0 1 1 1 1 2c0 1 1 1 3 1c0 0 0 0 0 2c0 1 2 2 3 0c0 0 1-1 1-1c0 0 0 0 0 1c1 0 3 0 5-1c2 0 11 0 13 0c2 1 4 1 7 1c6-1 9 1 6 4c-2 2-2 2 1 2c2 0 4-1 6-1c2-2 4-2 6-2c1 1 3 1 3 1c2 0 2 2 1 2c-3 1-6 2-17 2c-11 0-12 0-12 1c1 1 1 1 2 1c0 0 2 0 2 0c1 1 2 1 2 1c1 0 2 1 2 2c0 0-2 1-3 1c-1 0-2 0-2 0c-1 1-2 1-3 1c-1 0-2 0-3 1c0 0-1 0-1 0c-1 0-4 4-3 4c1 0 2 3 2 4c0 0-3 0-5-1zM118 451c-1-1 0-2 1-2c2 0 3 1 3 1c-1 1-4 1-4 1zM30 449c-1-1 0-2 1-2c2 0 3 1 2 2c0 1-3 1-3 0zM91 443c1 0 1-2 1-4c0-2 0-5 1-7c0-3 0-3-1-4c0-2 0-2 0-7c1-4 1-8 1-33c0-24 0-30 0-34c1-2 1-6 1-9c0-2 0-5 0-7c1-1 1-3 1-4c0-1 0-4 0-6c1-2 1-6 2-8c0-3 0-7 1-8c0-2 0-4 0-5c0 0 0-2 0-3c1-1 1-3 1-4c0-1 0-3 0-4c1 0 1-2 1-3c0 0 0-2 0-3c1-1 1-4 1-6c1-1 1-4 2-5c0-1 0-2 0-3c0 0 0-2 1-2c0-1 0-2 0-3c0-1 0-3 0-3c1-1 1-2 1-2c0-1 0-2 1-3c1-7 2-11 2-12c0 0 0-1 0-1c1 0 1-2 1-3c0-1 0-2 1-3c0-1 0-2 1-3c0-4 1-7 2-8c0 0 0-1 0-2c0 0 0-1 1-2c0 0 0-1 0-2c0 0 0-1 0-2c1 0 1-1 1-1c0-1 0-2 0-3c1 0 1-3 2-5c1-2 1-4 1-4c1-1 1-2 1-2c0-1 0-2 1-2c0-1 0-1 0-2c0 0 0-1 0-2c1-2 4-9 4-10c0-1 0-2 1-2c0 0 0-1 0-2c0-1 1-3 3-8c0-1 1-2 1-3c0 0 0-1 1-1c0-1 0-1 0-2c0 0 0-1 0-1c1-1 1-3 2-4c1-2 1-3 2-4c0 0 0-1 0-1c0-1 0-1 0-1c1 0 1-1 1-2c0 0 1-2 1-4c2-4 2-6 0-2c0 0 0 1-1 1c0 1 0 2-1 3c-1 2-3 6-4 8c0 1 0 1 0 2c0 0 0 1 0 1c-1 1-2 3-2 5c-1 2-2 4-3 5c0 0 0 1 0 1c0 1 0 1-1 2c0 0 0 1 0 1c0 0-1 2-1 4c-1 2-2 4-2 4c0 1 0 1-1 1c0 1 0 2 0 2c0 0 0 1 0 2c-1 0-1 0-1 1c0 0 0 1 0 2c-1 0-1 2-2 4c-1 1-1 3-1 4c-1 0-1 1-1 2c0 1 0 2-1 2c0 1 0 2 0 3c-1 3-3 8-4 10c0 1 0 2 0 2c0 0 0 1 0 2c-1 0-1 1-1 1c0 1 0 2 0 3c-1 1-1 3-2 5c-1 3-1 5-2 6c0 1 0 2 0 2c0 1 0 2-1 2c0 1 0 2 0 2c0 1 0 2 0 3c-1 1-1 3-1 4c-1 1-1 4-2 6c0 3-1 6-1 7c0 1 0 2-1 2c0 0 0 2 0 3c0 1 0 3-1 4c0 0 0 2 0 4c-1 1-1 3-1 4c0 1-1 4-1 6c-1 3-1 6-1 7c0 0 0 2-1 3c0 1 0 3 0 4c0 1 0 3 0 4c-1 1-1 3-1 5c0 1 0 3 0 5c-1 1-1 5-1 7c-1 3-1 6-1 7c0 1 0 5-1 9c0 4 0 9 0 12c-1 8-1 48-1 57c1 11 1 12 2 13c1 1 1 2 0 2c-1 0-2 0-2-1c0-1-2-1-2 0c-1 1-1 1 0 1c2 0 2 0 2 2c0 3 1 10 1 11c0 1 1 1 1 0zM135 431c-2 0-2-2-1-3c3-2 10 0 8 2c-1 1-4 2-7 1zM86 427c2-1 3-4 1-6c0 0 0 0 0-1c1-1 1-3 1-32c0-25 0-31 0-36c1-2 1-6 1-8c0-2 0-6 0-7c1-2 1-5 1-7c0-2 1-5 1-6c1-5 1-6-1-8c-1-1-1-2 0-2c1 0-1-4-4-7c-3-2-8-1-8 2c1 0 1 4 1 61c0 53 0 53 0 54c1 1 1 1 1 2c-3 2 2 3 6 1zM111 425c-2-2-1-4 2-3c1 0 2 2 2 3c0 0-2 0-4 0zM85 202c-1 0-1-1-1-1c0-1 0-2-1-3c0-1 0-3 0-4c0-1 0-2 0-3c-1-1-1-3-1-4c0-3-2-13-2-17c-1-1-1-3-1-4c0-1 0-2-1-3c0-1 0-3 0-4c0-1 0-3 0-4c-1-2-1-6-1-6c0-1 1 0 1 1c0 0 0 1 1 1c0 1 0 1 0 2c0 0 3 7 4 9c0 0 0 1 0 1c0 1 0 1 0 2c1 0 1 1 1 1c0 0 0 1 0 1c0 0 1 2 2 4c0 1 1 3 2 4c0 0 0 1 0 1c0 1 0 1 0 2c1 0 1 0 1 1c0 0 0 1 0 2c1 1 4 8 4 9c0 0 0 0 1 1c0 0 0 1 0 1c0 1 0 1 0 2c2 1 3 6 2 7c-1 2-10 3-11 1zM76 202c-2 0-8-2-8-3c-1 0-1-4-1-7c1-2 1-4 1-6c0-2 0-5 0-6c1-2 1-4 1-5c0-1 0-3 0-5c1-2 1-6 1-8c1-3 1-7 2-10c0-5 0-7-1-7c-1 0-2 1-2 4c0 2 0 3-1 4c0 1 0 2 0 3c0 1 0 3 0 4c-1 1-1 2-1 3c0 1 0 3 0 4c-1 1-1 4-1 6c-1 2-1 5-2 6c0 2 0 3 0 4c0 1 0 2 0 3c-1 0-1 2-1 3c0 7-2 7-7 3c-4-4-4-5 0-13c0 0 0-1 0-1c0-1 0-1 1-1c0-1 0-1 0-2c0 0 0-1 0-1c1-1 1-1 1-2c0-1 1-4 3-7c0-2 1-3 1-3c0-1 0-1 0-2c1 0 1-1 1-1c0 0 0-1 0-2c1 0 1 0 1-1c0 0 0-1 1-3c1-1 1-3 2-3c0-1 0-2 1-3c0-1 0-4-1-4c0 0-2 2-2 2c0 1 0 2-1 3c-1 1-1 2-1 2c0 1 0 1 0 2c-1 0-1 1-2 2c0 1-1 3-1 4c-1 1-1 2-2 3c0 1 0 2-1 2c0 1 0 1 0 2c0 0 0 0 0 1c-1 0-2 2-2 4c-1 1-2 3-2 3c0 0 0 0 0 1c0 0 0 1 0 1c-1 1-1 2-2 3c-2 5-3 5-6-3c-1-3-1-4 2-8c0 0 1-1 1-1c0-1 1-2 1-3c1-1 3-3 4-5c3-5 4-7 7-12c2-2 3-4 3-4c0 0 1-2 2-4c2-2 3-4 3-4c1-4 6-5 11-3c0 0 1 0 2 0c0 0 1 0 1 0c1 1 2 1 2 1c1 0 2 0 3 1c1 0 4 1 5 1c2 1 4 1 4 1c1 1 2 1 3 1c1 0 2 0 2 1c1 0 1 0 2 0c1 0 1 0 2 0c1 1 5 2 9 3c1 0 2 0 2 1c1 0 1 0 1 0c3 0 7 5 7 9c0 2 0 2-2 2c-1 0-2 0-2 0c-4-2-10-5-10-5c0 0-1 0-1-1c0 0-1 0-1 0c0 0-2-1-3-2c-4-1-5-2-7-3c-1 0-3-1-5-2c-1-1-4-2-5-2c-2-1-4-1-4 0c0 1 2 2 5 4c1 0 2 0 2 1c0 0 1 0 2 1c5 2 9 4 9 4c1 0 6 3 11 6c13 6 12 5 12 12c0 6-1 7-5 3c-1 0-4-3-7-5c-2-2-7-5-9-8c-3-2-6-4-6-5c-7-4-8-6-10-7c-2-2-4-3-5-3c-2 0 0 2 7 9c3 2 6 5 8 6c1 1 4 4 7 7c3 2 6 5 7 6c2 1 4 3 5 4c6 5 6 6 4 10c-1 1-2 2-2 2c0 1-3 4-3 4c-1 0-2-2-3-4c-2-2-3-4-4-4c-1-2-8-12-12-17c-1-1-4-6-8-11c-3-4-6-8-6-8c-1-2-4-2-4-1c0 1 0 1-1 1c-1-1-1-1-1 0c-1 0-1 1-2 1c-2 0-2 0-2 3c1 1 1 4 1 6c0 2 0 5 1 6c0 1 0 7 1 12c1 5 1 10 2 12c0 2 0 5 0 6c0 1 0 3 1 5c0 1 0 3 0 5c0 2-1 3-3 2zM101 198c-1-1-1-2-1-2c0 0 0-1 0-1c-1-1-1-1-1-2c0 0 0 0 0-1c-1 0-1-1-1-1c0-1 0-1 0-2c-1 0-1-1-1-1c0 0-1-2-1-2c-2-4-2-5-2-5c0 0 0-1 0-2c-1 0-2-2-2-4c-1-2-2-5-3-5c0-1 0-1 0-2c0 0 0 0-1-1c0 0 0-1 0-1c0 0 0-1 0-2c-1 0-1-2-2-3c-1-1-1-3-2-3c0-1 0-2 0-2c0 0 0-1 0-1c-1-1-1-1-1-1c0-1 0-1 0-2c-2-3-3-5-2-5c0 0 1 0 7 9c1 3 3 5 4 7c1 1 2 2 2 2c0 0 1 1 1 2c1 1 2 3 3 4c0 0 2 2 3 4c1 1 2 3 3 5c1 1 2 3 3 4c6 9 6 8 2 11c-5 4-6 5-8 3zM34 190c-1-1-2-1-3-1c-1 0-2 0-3-1c0 0-1 0-1 0c-1 0-1 0-5-2c-26-13-25-50 2-63c2-2 4-2 4-2c1 0 2 0 3-1c1 0 2 0 3 0c2 0 2 0 1-2c-4-5 1-17 8-21c3-2 12-3 15-2c0 1 1 1 2 2c4 1 8 7 9 11c2 9-3 19-9 19c-3 0-3 2 1 2c2 1 6 5 4 6c0 0-1-1-1-1c0-2-1-2-6 0c-2 1-5 2-5 2c-5 1-6 4-4 9c1 7 2 8 5 6c1-1 1 0 0 3c-1 1-2 2-2 2c0 0-1 2-2 4c-2 2-3 4-4 5c0 1-1 2-2 3c-1 3-1 5 0 8c3 7 3 7 5 7c2 0 3-1 3-2c0-1 1-1 1 0c0 0 0 1 0 1c-1 0-1 1-1 3c-1 2-1 3-3 3c0 0-1 0-1 0c-1 1-1 1-2 1c0 0-2 0-3 0c-3 1-7 1-9 1zM52 149c-1-1-1-2-1-2c0 0 0-2-1-4c0-3 0-4 1-4c1-1 2-1 2-1c1-1 2-1 2-1c0 0 1 0 1 0c1-1 1-1 1-1c1 0 2 0 3-1c3-1 3 0 0 4c-1 1-2 3-2 3c0 0-1 2-2 3c-1 1-2 3-2 4c-1 1-2 1-2 0zM94 130c0 0-3 0-5-1c-2-1-5-1-5-1c-2-1-2-2-1-2c1 0 1 0 2 0c0-1 0-1 1-1c0 0 1 0 1 0c0-1 6-3 7-3c1 0 6 7 6 9c0 0-4 0-6-1zM69 128c-1-1-1-1 0-3c1-1 2-4 3-6c1-2 1-11 0-14c-1-3-3-6-6-8l-2-2 0-21c0-16 0-21 0-24c-1-2-1-4-1-5c0-1 0-3-1-3c0-1 0-2 0-3c0-1-2-7-4-11c-8-17-31-18-40-1c0 1-1 2-1 2c0 1 0 1-1 1c0 1 0 2 0 2c0 1 0 1 0 2c-2 2-2 14 0 18c0 0 0 1 0 2c0 0 0 1 0 1c1 1 1 1 1 1c0 2 4 7 7 11c3 3 4 5 3 7c0 1 0 2 0 2c0 1-2 3-3 3c-1 1-6 1-7 1c0-1-1-1-1-1c-2 0-11-13-14-20c0-1 0-2 0-3c-1 0-1-1-1-3c0-1 0-2-1-2c0-1 0-16 1-17c0 0 0-1 0-2c0-1 0-2 1-3c0 0 0-1 0-1c0-1 2-6 4-10c3-5 9-11 15-14c3-2 4-2 4-2c1 0 1 0 2-1c1 0 2 0 2 0c1 0 2 0 2-1c1 0 13 0 14 0c0 1 1 1 2 1c9 2 19 10 24 20c1 1 1 3 2 3c0 1 0 1 0 1c0 1 0 1 0 2c1 1 2 3 3 9c1 1 1 3 1 4c0 0 0 1 0 3c1 3 2 14 1 48c0 40 1 38-2 37c-1-1-3-1-4 0c-2 1-2 1-3 0z'/%3E%3C/svg%3E");
}
/* titulo de pagina, de las categorias y de los listados:
icono del colegio a la izquierda y camino de puntos debajo del texto */
#sp-component .article-details .article-header h1,
#sp-component .page-header h1,
#sp-component .com-content-category-blog > :is(h1, h2),
#sp-component .category-list > div > :is(h1, h2),
#sp-component .article-list .article-header h2 {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.4em;
align-items: end;
}
#sp-component .article-details .article-header h1::before,
#sp-component .page-header h1::before,
#sp-component .com-content-category-blog > :is(h1, h2)::before,
#sp-component .category-list > div > :is(h1, h2)::before,
#sp-component .article-list .article-header h2::before {
content: "";
grid-row: 1 / span 2;
width: 0.67em;
height: 1.7em;
background: var(--bjh-titulos);
-webkit-mask: var(--bjh-icono) center bottom / contain no-repeat;
mask: var(--bjh-icono) center bottom / contain no-repeat;
}
#sp-component .article-details .article-header h1::after,
#sp-component .page-header h1::after,
#sp-component .com-content-category-blog > :is(h1, h2)::after,
#sp-component .category-list > div > :is(h1, h2)::after,
#sp-component .article-list .article-header h2::after {
content: "";
grid-column: 2;
width: 9rem;
max-width: 100%;
height: 6px;
margin-top: 0.3rem;
background: radial-gradient(circle, var(--bjh-acento) 2.2px, transparent 2.7px) left center / 13px 6px repeat-x;
}
/* en los listados el camino es mas corto */
#sp-component .article-list .article-header h2::after {
width: 6rem;
height: 5px;
background-size: 11px 5px;
}
/* h2 del texto: tramo de camino amarillo debajo */
#sp-component [itemprop="articleBody"] h2::after,
#sp-component .item-content > h2::after {
content: "";
display: block;
width: 5rem;
height: 5px;
margin-top: 0.3rem;
background: radial-gradient(circle, var(--bjh-acento) 2px, transparent 2.5px) left center / 11px 5px repeat-x;
}
/* h3 del texto: tramo corto verde debajo */
#sp-component [itemprop="articleBody"] h3::after,
#sp-component .item-content > h3::after {
content: "";
display: block;
width: 3.5rem;
height: 5px;
margin-top: 0.25rem;
background: radial-gradient(circle, var(--bjh-titulos) 2px, transparent 2.5px) left center / 10px 5px repeat-x;
}
/* listados: subrayado amarillo al pasar el raton */
#sp-component .article-list .article-header h2 a:hover {
text-decoration: underline;
text-decoration-color: var(--bjh-acento);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* ============================================
07. TEXTO Y RECUADROS - piezas basicas de los articulos
Entradilla, destacado, dato clave, datos con icono,
tarjetas y fichas
============================================ */
/* --- Texto general (anula la Tahoma de Helix) --- */
html body {
font-family: var(--bjh-sans);
font-size: 1rem;
line-height: var(--bjh-alt-cuerpo);
color: var(--bjh-texto);
}
/* el texto de las paginas, un poco mas grande para leer comodo (17 px);
la entradilla sigue algo mayor (19 px) */
#sp-component {
font-size: 1.0625rem;
}
/* --- Parrafos: a todo el ancho y justificados, con guiones para que
no queden huecos grandes entre palabras (en el movil, a la izquierda) --- */
#sp-component [itemprop="articleBody"] > p {
text-align: justify;
hyphens: auto;
}
@media (max-width: 575.98px) {
#sp-component [itemprop="articleBody"] > p {
text-align: left;
}
}
/* --- Enlaces dentro de los articulos --- */
#sp-component [itemprop="articleBody"] a,
#sp-component .item-content p a,
#sp-component .item-content li a {
color: var(--bjh-enlace);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
#sp-component [itemprop="articleBody"] a:hover,
#sp-component .item-content p a:hover,
#sp-component .item-content li a:hover {
color: var(--bjh-verde-osc);
text-decoration-thickness: 2px;
}
/* --- Listas normales: vinetas en verde --- */
#sp-component [itemprop="articleBody"] li::marker,
#sp-component .item-content li::marker {
color: var(--bjh-titulos);
}
/* ---------- ENTRADILLA ----------
...
Primer parrafo de una pagina: algo mas grande, a todo el ancho
y justificado (en el movil, alineado a la izquierda) */
#sp-component .bjh-entradilla,
#sp-component [itemprop="articleBody"] > p.bjh-entradilla {
max-width: none;
font-size: 1.1875rem;
line-height: 1.6;
text-align: justify;
hyphens: auto;
}
@media (max-width: 575.98px) {
#sp-component .bjh-entradilla,
#sp-component [itemprop="articleBody"] > p.bjh-entradilla {
text-align: left;
}
}
/* ---------- DESTACADO ----------
...
Recuadro amarillo suave para un dato importante; admite icono */
.bjh-destacado {
padding: var(--bjh-esp-md) var(--bjh-esp-lg);
background: var(--bjh-acento-suave);
border-radius: var(--bjh-radio);
overflow-wrap: anywhere;
}
/* ---------- DATO CLAVE ----------
De lunes a viernes de 12:30 a 14:00h.
Un horario o dato corto, grande y en recuadro verde claro; admite icono */
#sp-component .bjh-dato {
width: fit-content;
max-width: 100%;
margin: 0 0 var(--bjh-esp-lg);
padding: 0.75rem 1.25rem;
background: var(--bjh-fondo-alt);
border: 1px solid var(--bjh-linea);
border-radius: var(--bjh-radio);
font-family: var(--bjh-serif);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.35;
color: var(--bjh-titulos);
}
/* ---------- DATOS CON ICONO ----------
...
Iconos: bjh-icono-lugar, bjh-icono-telefono, bjh-icono-correo, bjh-icono-reloj
Solo "bjh-icono" deja el hueco sin dibujo, para alinear.
Admite negritas, enlaces y saltos de linea.
Varios datos seguidos: con tarjetas dentro, en lugar de "bjh-tarjetas".
Se reparten solas en columnas sin dejar huecos */
.bjh-fichas {
column-width: 20rem;
column-gap: var(--bjh-esp-lg);
margin: 0 0 var(--bjh-esp-xl);
}
.bjh-fichas > .bjh-tarjeta {
display: block;
margin: 0 0 var(--bjh-esp-lg);
break-inside: avoid;
}
/* ============================================
08. ACCESOS DESTACADOS - mosaico de la portada
Uso: modulo Personalizado solo en la pagina de Inicio
Colores: bjh-acceso-actualidad (rojo), -comedor (blanco),
-secretaria (verde), -contacto (amarillo)
============================================ */
:root {
/* colores oficiales de la bandera de La Rioja */
--bjh-rioja-rojo: #f54029;
--bjh-rioja-verde: #0db02b;
--bjh-rioja-amarillo: #f7d417;
/* iconos grandes de cada bloque */
--bjh-ico-actualidad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5v3a1 1 0 0 0 1 1h2.5L12 19V5L6.5 9.5H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M15.5 9a3.5 3.5 0 0 1 0 6'/%3E%3Cpath d='M18.5 6a7.5 7.5 0 0 1 0 12'/%3E%3C/svg%3E");
--bjh-ico-comedor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v5a3 3 0 0 0 6 0V3'/%3E%3Cpath d='M8 3v18'/%3E%3Cpath d='M18 21V3c-2.5 1.5-3.5 4.5-3.5 8v2H18'/%3E%3C/svg%3E");
--bjh-ico-secretaria: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
--bjh-ico-contacto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E");
--bjh-acceso-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='black' fill-opacity='.10'/%3E%3Cpath d='M9 15h12M16 10l5 5-5 5' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* --- Rejilla: 4 en ordenador, 2 en tablet y movil --- */
.bjh-accesos {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
padding-block: 36px 56px;
}
/* por si el editor mete cada enlace dentro de un parrafo */
.bjh-accesos > p {
display: contents;
}
/* --- Bloque --- */
#sp-main .bjh-acceso {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 190px;
padding: 22px 22px 64px;
border-radius: 22px;
background: var(--bjh-acceso-color);
color: #111111;
text-decoration: none;
transition: transform var(--bjh-transicion);
}
/* icono grande difuminado arriba a la derecha */
.bjh-acceso::before {
content: "";
position: absolute;
right: -14px;
top: -14px;
width: 120px;
height: 120px;
background: #111111;
opacity: .16;
-webkit-mask: var(--bjh-acceso-icono) center / contain no-repeat;
mask: var(--bjh-acceso-icono) center / contain no-repeat;
}
/* flecha redonda abajo */
.bjh-acceso::after {
content: "";
position: absolute;
left: 22px;
bottom: 20px;
width: 30px;
height: 30px;
background: var(--bjh-acceso-flecha) center / contain no-repeat;
transition: transform var(--bjh-transicion);
}
.bjh-acceso strong {
font-family: var(--bjh-serif);
font-size: 1.75rem;
font-weight: 600;
line-height: 1.1;
}
.bjh-acceso small {
margin-top: 4px;
font-family: var(--bjh-sans);
font-size: 0.9375rem;
line-height: 1.35;
}
#sp-main .bjh-acceso:hover {
color: #111111;
transform: translateY(-6px) rotate(-0.6deg);
}
.bjh-acceso:hover::after {
transform: translateX(5px);
}
/* --- Color de cada bloque --- */
.bjh-acceso-actualidad { --bjh-acceso-color: var(--bjh-rioja-rojo); --bjh-acceso-icono: var(--bjh-ico-actualidad); }
.bjh-acceso-comedor { --bjh-acceso-color: #ffffff; --bjh-acceso-icono: var(--bjh-ico-comedor); box-shadow: inset 0 0 0 2px var(--bjh-linea); }
.bjh-acceso-secretaria { --bjh-acceso-color: var(--bjh-rioja-verde); --bjh-acceso-icono: var(--bjh-ico-secretaria); }
.bjh-acceso-contacto { --bjh-acceso-color: var(--bjh-rioja-amarillo); --bjh-acceso-icono: var(--bjh-ico-contacto); }
/* --- Tablet y movil: dos por fila --- */
@media (max-width: 991.98px) {
.bjh-accesos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding-block: 20px 28px;
}
#sp-main .bjh-acceso {
min-height: 132px;
padding: 14px;
border-radius: 16px;
}
.bjh-acceso::before {
width: 78px;
height: 78px;
right: -10px;
top: -10px;
}
.bjh-acceso::after {
display: none;
}
.bjh-acceso strong {
font-size: 1.25rem;
}
.bjh-acceso small {
font-size: 0.8125rem;
}
}
/* ============================================
09. TABLAS - una sola tabla para precios, libros, horarios...
Titulo de la tabla (opcional)
| Concepto | Dato |
|---|
El concepto a la izquierda y el dato (precio, ISBN...) a la derecha.
Los nombres antiguos bjh-tabla-precios y bjh-tabla-libros siguen valiendo
============================================ */
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) {
width: 100%;
max-width: 52rem;
margin: 0 0 var(--bjh-esp-lg);
border: 0;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
/* --- Titulo de la tabla: etiqueta en mayusculas encima --- */
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) caption {
caption-side: top;
padding: 0 0 0.4rem;
text-align: left;
font-family: var(--bjh-sans);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bjh-titulos);
}
/* --- Filas: linea verde arriba, linea fina entre filas y una si, otra no con fondo --- */
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) :is(th, td) {
padding: 0.6rem 0.75rem;
border: 0;
border-bottom: 1px solid var(--bjh-linea);
font-weight: 400;
text-align: left;
vertical-align: baseline;
}
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) tr:first-child > * {
border-top: 2px solid var(--bjh-titulos);
}
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) tbody tr:nth-child(even) > * {
background: var(--bjh-fondo-alt);
}
/* --- Dato: a la derecha y sin partirse --- */
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) td:last-child {
width: 1%;
text-align: right;
white-space: nowrap;
}
/* --- Fila que agrupa varias (ocupa las dos columnas) --- */
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) th[colspan] {
font-weight: 700;
}
/* --- Dentro de una tarjeta, sin hueco abajo --- */
.bjh-tarjeta :is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) {
margin-bottom: 0;
}
/* --- Movil: menos relleno para que quepa el dato --- */
@media (max-width: 575.98px) {
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) :is(th, td) {
padding: 0.55rem 0.4rem;
}
:is(.bjh-tabla, .bjh-tabla-precios, .bjh-tabla-libros) td:last-child {
font-size: 0.875rem;
}
}
/* ============================================
10. MEGAMENU - baldosas de colores
En Helix: Menu Builder > cajitas > Mega Menu activado,
Alignment: Full, una fila y una columna con los apartados.
Cada apartado lleva su icono (ruedecita > Icon).
Los colores van solos por orden: rojo, verde, amarillo...
Instagram lleva sus propios colores, este donde este.
============================================ */
@media (min-width: 992px) {
/* el logo queda por encima del panel */
#sp-header #sp-logo {
position: relative;
z-index: 100;
}
/* el panel ocupa el mismo ancho que la pagina, sea cual sea la pantalla */
#sp-header .row {
position: relative;
}
#sp-header .sp-megamenu-parent {
position: static;
}
#sp-header .sp-megamenu-parent .sp-dropdown-mega.sp-menu-full {
left: 0;
right: 0;
width: auto;
max-width: none;
margin: 0;
}
/* panel blanco a todo lo ancho, con la raya amarilla arriba */
#sp-header .sp-megamenu-parent .sp-dropdown-mega .sp-dropdown-inner {
padding: 31px 0 34px 168px;
background: none;
border-top: 0;
box-shadow: none;
border-image: linear-gradient(var(--bjh-barra-linea) 0 3px, var(--bjh-fondo) 3px) fill 0 // 0 100vmax;
}
/* sombra suave debajo del panel */
#sp-header .sp-megamenu-parent .sp-dropdown-mega::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 18px;
pointer-events: none;
border-image: linear-gradient(rgba(22, 40, 28, .16), rgba(22, 40, 28, 0)) fill 0 // 0 100vmax;
}
/* rejilla: 4 baldosas por fila */
#sp-header .sp-megamenu-parent .sp-dropdown-mega .sp-mega-group {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
/* la ultima fila, si no esta completa, se pega a la derecha
y el hueco queda a la izquierda (vale para 3, 7, 6, 5... apartados) */
#sp-header .sp-dropdown-mega .sp-mega-group > li:nth-child(4n+1):nth-last-child(3) {
grid-column-start: 2;
}
#sp-header .sp-dropdown-mega .sp-mega-group > li:nth-child(4n+1):nth-last-child(2) {
grid-column-start: 3;
}
#sp-header .sp-dropdown-mega .sp-mega-group > li:nth-child(4n+1):last-child {
grid-column-start: 4;
}
/* baldosa */
#sp-header .sp-megamenu-parent .sp-dropdown-mega .sp-mega-group > li > a {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
height: 100%;
min-height: 124px;
margin: 0;
padding: 18px;
border-radius: 16px;
background: var(--bjh-mm-tinte);
font-family: var(--bjh-sans);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
color: var(--bjh-verde-osc);
text-decoration: none;
transition: transform var(--bjh-transicion), box-shadow var(--bjh-transicion);
}
#sp-header .sp-megamenu-parent .sp-dropdown-mega .sp-mega-group > li > a:hover {
color: var(--bjh-verde-osc);
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(22, 40, 28, .12);
}
/* la pagina en la que estas: borde del color de la baldosa */
#sp-header .sp-megamenu-parent .sp-dropdown-mega .sp-mega-group > li > a[aria-current="page"] {
box-shadow: inset 0 0 0 2px var(--bjh-mm-color);
}
/* icono dentro de un circulo de color */
#sp-header .sp-megamenu-parent .sp-dropdown-mega .sp-mega-group > li > a > span[class*="fa-"] {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--bjh-mm-circulo, var(--bjh-mm-color));
color: #111111;
font-size: 1.3rem;
}
/* colores de la bandera, por orden */
#sp-header .sp-dropdown-mega .sp-mega-group > li:nth-child(3n+1) {
--bjh-mm-color: var(--bjh-rioja-rojo);
--bjh-mm-tinte: #fee7e3;
}
#sp-header .sp-dropdown-mega .sp-mega-group > li:nth-child(3n+2) {
--bjh-mm-color: var(--bjh-rioja-verde);
--bjh-mm-tinte: #e1f5e5;
}
#sp-header .sp-dropdown-mega .sp-mega-group > li:nth-child(3n+3) {
--bjh-mm-color: var(--bjh-rioja-amarillo);
--bjh-mm-tinte: #fdf5d0;
}
/* Instagram: con sus colores, este donde este */
#sp-header .sp-dropdown-mega .sp-mega-group > li:has(.fa-instagram) {
--bjh-mm-color: #d6249f;
--bjh-mm-circulo: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
--bjh-mm-tinte: linear-gradient(135deg, #fff1e6 0%, #fde6f2 55%, #ece8fd 100%);
}
#sp-header .sp-megamenu-parent .sp-dropdown-mega .sp-mega-group > li > a > span.fa-instagram {
color: #ffffff;
}
}
/* ============================================
11. ESPACIOS DE LA PAGINA
============================================ */
/* --- Ancho de la pagina ---
Movil y tablet: todo el ancho, con un margen comodo a los lados.
Ordenador: el 90 % de la pantalla, con tope en pantallas
muy grandes para que se lea bien */
body .container {
max-width: 100%;
padding-inline: clamp(16px, 4vw, 32px);
}
@media (min-width: 992px) {
body .container {
max-width: max(960px, min(90%, 1760px));
padding-inline: 12px;
}
}
/* --- Menos hueco entre el slider (o el mosaico) y el titulo --- */
#sp-main > section + #sp-main-body {
padding-top: clamp(2rem, 4vw, 3.5rem);
}
/* ============================================
12. BALDOSAS - accesos con icono dentro de una pagina
Mismo aspecto que el megamenu. Uso en un articulo:
Iconos: bjh-i-megafono, bjh-i-calendario, bjh-i-libro,
bjh-i-instagram, bjh-i-colegio, bjh-i-reloj-arena,
bjh-i-corazon, bjh-i-lista, bjh-i-bombilla, bjh-i-edificio,
bjh-i-profesor, bjh-i-reloj, bjh-i-solicitud, bjh-i-hucha,
bjh-i-mano-corazon, bjh-i-cubiertos, bjh-i-info
Los colores van solos por orden: rojo, verde, amarillo...
============================================ */
/* --- Rejilla: 4 en ordenador, 2 en tablet y movil --- */
.bjh-baldosas {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 0 0 var(--bjh-esp-xl);
}
/* por si el editor mete cada enlace dentro de un parrafo */
.bjh-baldosas > p {
display: contents;
}
/* --- Baldosa --- */
#sp-component .bjh-baldosas a.bjh-baldosa {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
min-height: 150px;
padding: 22px;
border-radius: 18px;
background: var(--bjh-bd-tinte);
font-family: var(--bjh-sans);
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.25;
color: var(--bjh-verde-osc);
text-decoration: none;
transition: transform var(--bjh-transicion), box-shadow var(--bjh-transicion);
}
#sp-component .bjh-baldosas a.bjh-baldosa:hover {
color: var(--bjh-verde-osc);
text-decoration: none;
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(22, 40, 28, .12);
}
/* --- Icono dentro de un circulo de color --- */
.bjh-baldosa::before {
content: var(--bjh-bd-icono, "");
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bjh-bd-circulo, var(--bjh-bd-color));
color: #111111;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
font-size: 1.4rem;
font-weight: 900;
line-height: 1;
}
/* el icono es solo decorativo: los lectores de pantalla leen solo el texto
(en navegadores antiguos el icono se sigue viendo igual) */
@supports (content: "x" / "") {
.bjh-baldosa::before {
content: var(--bjh-bd-icono, "") / "";
}
}
/* --- Colores de la bandera, por orden --- */
.bjh-baldosas > :nth-child(3n+1) {
--bjh-bd-color: var(--bjh-rioja-rojo);
--bjh-bd-tinte: #fee7e3;
}
.bjh-baldosas > :nth-child(3n+2) {
--bjh-bd-color: var(--bjh-rioja-verde);
--bjh-bd-tinte: #e1f5e5;
}
.bjh-baldosas > :nth-child(3n+3) {
--bjh-bd-color: var(--bjh-rioja-amarillo);
--bjh-bd-tinte: #fdf5d0;
}
/* --- Iconos --- */
.bjh-i-megafono { --bjh-bd-icono: "\f0a1"; }
.bjh-i-calendario { --bjh-bd-icono: "\f073"; }
.bjh-i-libro { --bjh-bd-icono: "\f02d"; }
.bjh-i-instagram { --bjh-bd-icono: "\f16d"; }
.bjh-i-colegio { --bjh-bd-icono: "\f549"; }
.bjh-i-reloj-arena { --bjh-bd-icono: "\f254"; }
.bjh-i-corazon { --bjh-bd-icono: "\f004"; }
.bjh-i-lista { --bjh-bd-icono: "\f46d"; }
.bjh-i-bombilla { --bjh-bd-icono: "\f0eb"; }
.bjh-i-edificio { --bjh-bd-icono: "\f66f"; }
.bjh-i-profesor { --bjh-bd-icono: "\f51c"; }
.bjh-i-reloj { --bjh-bd-icono: "\f017"; }
.bjh-i-solicitud { --bjh-bd-icono: "\f573"; }
.bjh-i-hucha { --bjh-bd-icono: "\f4d3"; }
.bjh-i-mano-corazon { --bjh-bd-icono: "\f4be"; }
.bjh-i-cubiertos { --bjh-bd-icono: "\f2e7"; }
.bjh-i-info { --bjh-bd-icono: "\f05a"; }
/* --- Instagram: con sus colores, este donde este --- */
.bjh-baldosas .bjh-i-instagram {
--bjh-bd-color: #d6249f;
--bjh-bd-circulo: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
--bjh-bd-tinte: linear-gradient(135deg, #fff1e6 0%, #fde6f2 55%, #ece8fd 100%);
}
.bjh-baldosas .bjh-i-instagram::before {
color: #ffffff;
font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands";
font-weight: 400;
}
/* --- Tablet y movil: dos por fila --- */
@media (max-width: 991.98px) {
.bjh-baldosas {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#sp-component .bjh-baldosas a.bjh-baldosa {
min-height: 124px;
padding: 16px;
border-radius: 16px;
font-size: 1rem;
}
.bjh-baldosa::before {
width: 46px;
height: 46px;
font-size: 1.15rem;
}
}
/* ============================================
13. COLUMNA DERECHA - logos unidos por el camino
Cada logo: modulo Personalizado en la posicion de la
derecha, con la imagen cuadrada y el titulo oculto.
Los logos salen en el orden de los modulos.
============================================ */
/* --- Ordenador: la columna mide lo justo para los logos
y el contenido ocupa todo el resto --- */
@media (min-width: 992px) {
#sp-main-body .row > #sp-component {
flex: 1 1 0;
width: auto;
min-width: 0;
}
#sp-main-body .row > #sp-right {
flex: 0 0 auto;
width: 320px;
}
}
/* --- Columna: logos pegados a la derecha, sin las cajas de Helix --- */
#sp-right .sp-column {
display: flex;
flex-direction: column;
align-items: flex-end;
}
#sp-right .sp-module {
width: 100%;
max-width: 250px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
}
#sp-right .sp-module p {
margin: 0;
}
/* --- Logo: esquinas redondeadas y sombra suave --- */
#sp-right .sp-module a {
display: block;
border-radius: 18px;
}
#sp-right .sp-module img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
box-shadow: 0 6px 16px rgba(22, 40, 28, .14);
transition: transform var(--bjh-transicion), box-shadow var(--bjh-transicion);
}
/* --- Al pasar el raton: se levanta y se inclina, como el mosaico --- */
#sp-right .sp-module:hover img {
transform: translateY(-6px) rotate(-0.6deg);
box-shadow: 0 14px 26px rgba(22, 40, 28, .20);
}
/* --- Camino de puntos amarillos entre un logo y el siguiente --- */
#sp-right .sp-module + .sp-module::before {
content: "";
display: block;
width: 6px;
height: 46px;
margin: 12px auto;
background: radial-gradient(circle, var(--bjh-acento) 2.2px, transparent 2.7px) center top / 6px 11px repeat-y;
}
/* --- Por si algun modulo lleva el titulo visible --- */
#sp-right .sp-module .sp-module-title {
margin: 0 0 var(--bjh-esp-sm);
padding: 0;
border: 0;
font-size: var(--bjh-txt-lg);
text-align: center;
}
/* --- Tablet y movil: los logos en una fila, debajo del contenido --- */
@media (max-width: 991.98px) {
#sp-right {
margin-top: var(--bjh-esp-lg);
}
#sp-right .sp-column {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#sp-right .sp-module {
max-width: none;
}
#sp-right .sp-module + .sp-module::before {
display: none;
}
}
/* ============================================
14. EN ESTA SECCION - iconos pequenos al pie
Modulo "Menu" en una fila nueva debajo del contenido,
con Clase del modulo: bjh-seccion
Nivel inicial 2 y nivel final 2.
Asignacion: en todas las paginas excepto Actualidad,
Centro y Secretaria.
El icono de cada pagina sale solo segun su direccion;
una pagina nueva sale con un icono generico.
============================================ */
/* --- Menos hueco entre el contenido y la fila de iconos --- */
#sp-main-body:has(+ section .bjh-seccion) {
padding-bottom: var(--bjh-esp-lg);
}
.bjh-seccion {
padding-block: var(--bjh-esp-sm) var(--bjh-esp-xl);
}
/* --- Titulo pequeno con el camino de puntos debajo --- */
.bjh-seccion .sp-module-title {
margin: 0 0 var(--bjh-esp-md);
font-family: var(--bjh-sans);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-align: center;
text-transform: uppercase;
color: var(--bjh-titulos);
}
.bjh-seccion .sp-module-title::after {
content: "";
display: block;
width: 4.5rem;
height: 5px;
margin: 0.4rem auto 0;
background: radial-gradient(circle, var(--bjh-acento) 2px, transparent 2.5px) center / 11px 5px repeat-x;
}
/* --- Fila de iconos --- */
.bjh-seccion ul.mod-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 14px;
margin: 0;
padding: 0;
list-style: none;
}
.bjh-seccion ul.mod-menu > li {
margin: 0;
padding: 0;
}
.bjh-seccion ul.mod-menu > li > a {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 116px;
height: 100%;
padding: 10px 6px;
border-radius: 14px;
font-family: var(--bjh-sans);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-decoration: none;
color: var(--bjh-verde-osc);
transition: background-color var(--bjh-transicion), transform var(--bjh-transicion);
}
.bjh-seccion ul.mod-menu > li > a:hover {
background: var(--bjh-sec-tinte);
color: var(--bjh-verde-osc);
transform: translateY(-3px);
}
/* la pagina en la que estas */
.bjh-seccion ul.mod-menu > li > a[aria-current] {
background: var(--bjh-sec-tinte);
}
/* --- Icono pequeno dentro de un circulo de color --- */
.bjh-seccion ul.mod-menu > li > a::before {
content: var(--bjh-sec-icono, "\f15c");
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bjh-sec-circulo, var(--bjh-sec-color));
color: #111111;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
font-size: 1.05rem;
font-weight: 900;
line-height: 1;
}
/* el icono es solo decorativo: los lectores de pantalla leen solo el texto
(en navegadores antiguos el icono se sigue viendo igual) */
@supports (content: "x" / "") {
.bjh-seccion ul.mod-menu > li > a::before {
content: var(--bjh-sec-icono, "\f15c") / "";
}
}
.bjh-seccion ul.mod-menu > li > a[aria-current]::before {
box-shadow: 0 0 0 3px var(--bjh-fondo), 0 0 0 5px var(--bjh-sec-color);
}
/* --- Colores de la bandera, por orden (como en el megamenu) --- */
.bjh-seccion ul.mod-menu > li:nth-child(3n+1) {
--bjh-sec-color: var(--bjh-rioja-rojo);
--bjh-sec-tinte: #fee7e3;
}
.bjh-seccion ul.mod-menu > li:nth-child(3n+2) {
--bjh-sec-color: var(--bjh-rioja-verde);
--bjh-sec-tinte: #e1f5e5;
}
.bjh-seccion ul.mod-menu > li:nth-child(3n+3) {
--bjh-sec-color: var(--bjh-rioja-amarillo);
--bjh-sec-tinte: #fdf5d0;
}
/* --- Icono de cada pagina, segun su direccion --- */
.bjh-seccion a[href$="noticias-y-actividades"] { --bjh-sec-icono: "\f0a1"; }
.bjh-seccion a[href$="actualidad/calendario"] { --bjh-sec-icono: "\f073"; }
.bjh-seccion a[href$="libros-de-texto"] { --bjh-sec-icono: "\f02d"; }
.bjh-seccion a[href$="centro/instalaciones"] { --bjh-sec-icono: "\f549"; }
.bjh-seccion a[href$="centro/historia"] { --bjh-sec-icono: "\f254"; }
.bjh-seccion a[href$="nuestras-senas-de-indentidad"],
.bjh-seccion a[href$="nuestras-senas-de-identidad"] { --bjh-sec-icono: "\f004"; }
.bjh-seccion a[href$="centro/planes"] { --bjh-sec-icono: "\f46d"; }
.bjh-seccion a[href$="centro/proyectos"] { --bjh-sec-icono: "\f0eb"; }
.bjh-seccion a[href$="fundacion-etchegoyen"] { --bjh-sec-icono: "\f66f"; }
.bjh-seccion a[href$="personal-docente"] { --bjh-sec-icono: "\f51c"; }
.bjh-seccion a[href$="secretaria/horario"] { --bjh-sec-icono: "\f017"; }
.bjh-seccion a[href$="secretaria/escolarizacion"] { --bjh-sec-icono: "\f573"; }
.bjh-seccion a[href$="becas-y-ayudas"] { --bjh-sec-icono: "\f4d3"; }
.bjh-seccion a[href$="comedor/menu-comedor"] { --bjh-sec-icono: "\f2e7"; }
.bjh-seccion a[href$="informacion-sobre-el-comedor"] { --bjh-sec-icono: "\f05a"; }
/* --- Instagram: con sus colores --- */
.bjh-seccion a[href*="instagram.com"] {
--bjh-sec-icono: "\f16d";
--bjh-sec-color: #d6249f;
--bjh-sec-circulo: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
--bjh-sec-tinte: linear-gradient(135deg, #fff1e6 0%, #fde6f2 55%, #ece8fd 100%);
}
.bjh-seccion ul.mod-menu > li > a[href*="instagram.com"]::before {
color: #ffffff;
font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands";
font-weight: 400;
}
/* --- Movil: algo mas estrechos --- */
@media (max-width: 575.98px) {
.bjh-seccion ul.mod-menu {
gap: 6px;
}
.bjh-seccion ul.mod-menu > li > a {
width: 100px;
font-size: 0.8125rem;
}
}
/* ============================================
15. LISTAS - con marcas, con lineas, etiquetas y camino
============================================ */
/* ---------- LISTA CON MARCAS ----------
Cada punto con una marca verde y una linea fina entre ellos.
Sirve tambien dentro de otra lista */
:root {
--bjh-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
#sp-component ul.bjh-lista-check {
margin: 0 0 var(--bjh-esp-lg);
padding: 0;
list-style: none;
}
#sp-component ul.bjh-lista-check > li {
position: relative;
padding: 0.6rem 0 0.6rem 2.1rem;
border-bottom: 1px solid var(--bjh-linea);
}
#sp-component ul.bjh-lista-check > li:last-child {
border-bottom: 0;
}
#sp-component ul.bjh-lista-check > li::before {
content: "";
position: absolute;
left: 0;
top: 0.8rem;
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
background: var(--bjh-titulos) var(--bjh-ico-check) center / 0.8rem no-repeat;
}
#sp-component li > ul.bjh-lista-check {
margin: var(--bjh-esp-sm) 0 0;
}
/* ---------- LISTA CON LINEAS ----------
Sin vinetas, con una linea fina entre punto y punto; lo que va
en negrita sale en verde. Tambien vale el nombre antiguo bjh-lista-personas */
#sp-component ul:is(.bjh-lista-lineas, .bjh-lista-personas) {
max-width: none;
margin: 0 0 var(--bjh-esp-lg);
padding: 0;
list-style: none;
}
#sp-component ul:is(.bjh-lista-lineas, .bjh-lista-personas) > li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--bjh-linea);
line-height: 1.5;
}
#sp-component ul:is(.bjh-lista-lineas, .bjh-lista-personas) > li:first-child {
padding-top: 0;
}
#sp-component ul:is(.bjh-lista-lineas, .bjh-lista-personas) > li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
#sp-component ul:is(.bjh-lista-lineas, .bjh-lista-personas) strong {
font-weight: 600;
color: var(--bjh-titulos);
}
/* varios nombres en un mismo punto: uno por linea */
#sp-component ul:is(.bjh-lista-lineas, .bjh-lista-personas) ul {
margin: 0.25rem 0 0;
padding: 0 0 0 1.1rem;
}
#sp-component ul:is(.bjh-lista-lineas, .bjh-lista-personas) ul > li {
margin: 0;
padding: 0.1rem 0;
}
#sp-component .bjh-tarjeta ul:is(.bjh-lista-lineas, .bjh-lista-personas) {
margin-bottom: 0;
}
/* ---------- ETIQUETAS ----------
Lista corta de nombres (pueblos, cursos...) que se colocan
solas una detras de otra */
#sp-component ul.bjh-etiquetas {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
max-width: none;
margin: 0 0 var(--bjh-esp-xl);
padding: 0;
list-style: none;
}
#sp-component ul.bjh-etiquetas > li {
margin: 0;
padding: 0.35rem 0.9rem;
border: 1px solid var(--bjh-linea);
border-radius: 999px;
background: var(--bjh-fondo-alt);
font-weight: 600;
line-height: 1.4;
color: var(--bjh-verde-osc);
}
/* ---------- CAMINO (linea de tiempo) ----------
- Primera parada...
...
Cada punto es una parada: circulo verde unido al siguiente
por el camino de puntos amarillos */
#sp-component ol.bjh-camino {
margin: 0 0 var(--bjh-esp-xl);
padding: 0;
list-style: none;
}
#sp-component ol.bjh-camino > li {
position: relative;
margin: 0;
padding: 0 0 var(--bjh-esp-lg) 2.75rem;
}
#sp-component ol.bjh-camino > li:last-child {
padding-bottom: 0;
}
#sp-component ol.bjh-camino > li::before {
content: "";
position: absolute;
left: 0;
top: 0.2rem;
box-sizing: border-box;
width: 1.5rem;
height: 1.5rem;
border: 4px solid var(--bjh-fondo-suave);
border-radius: 50%;
background: var(--bjh-titulos);
}
#sp-component ol.bjh-camino > li::after {
content: "";
position: absolute;
left: calc(0.75rem - 3px);
top: 2rem;
bottom: 0.3rem;
width: 6px;
background: radial-gradient(circle, var(--bjh-acento) 2.2px, transparent 2.7px) center top / 6px 11px repeat-y;
}
#sp-component ol.bjh-camino > li:last-child::after {
display: none;
}
#sp-component ol.bjh-camino strong {
color: var(--bjh-titulos);
}
/* ============================================
16. IMAGENES, DOCUMENTOS Y BOTONES - fotos, mapas, PDF y botones
============================================ */
/* --- Nada mas ancho que la pantalla: fotos y marcos (iframe) --- */
#sp-component [itemprop="articleBody"] img {
max-width: 100%;
height: auto;
}
#sp-component [itemprop="articleBody"] iframe {
max-width: 100%;
}
/* ---------- IMAGEN EN RECUADRO ----------
Centrada sobre fondo blanco, con o sin enlace. Dentro de una
tarjeta llega hasta abajo, asi las tarjetas quedan igualadas */
.bjh-imagen {
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 var(--bjh-esp-lg);
padding: var(--bjh-esp-lg);
background: var(--bjh-fondo);
border: 1px solid var(--bjh-linea);
border-radius: calc(var(--bjh-radio) - 4px);
}
.bjh-imagen a {
display: inline-flex;
}
.bjh-imagen img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 13rem;
}
.bjh-tarjeta .bjh-imagen {
flex: 1 1 auto;
margin-bottom: 0;
}
/* ---------- IMAGEN GRANDE ----------
Con marco y tan ancha como quepa, para menus, carteles o calendarios.
El enlace a la misma imagen la abre en grande (util en el movil) */
#sp-component .bjh-imagen-grande,
#sp-component [itemprop="articleBody"] > p.bjh-imagen-grande {
box-sizing: border-box;
width: fit-content;
max-width: 100%;
margin: 0 0 var(--bjh-esp-xl);
padding: var(--bjh-esp-sm);
background: var(--bjh-fondo);
border: 1px solid var(--bjh-linea);
border-radius: var(--bjh-radio);
box-shadow: var(--bjh-sombra);
}
.bjh-imagen-grande a {
display: block;
border-radius: calc(var(--bjh-radio) - 4px);
cursor: zoom-in;
}
.bjh-imagen-grande img {
display: block;
width: auto;
max-width: 100%;
height: auto;
border-radius: calc(var(--bjh-radio) - 4px);
}
/* ---------- FOTO ANTIGUA ----------
Con marco blanco, como una copia en papel. En ordenador va a la
derecha del texto; en el movil, centrada encima */
#sp-component .bjh-foto-antigua {
float: right;
box-sizing: border-box;
width: min(100%, 320px);
margin: 0.25rem 0 var(--bjh-esp-lg) var(--bjh-esp-xl);
padding: 10px 10px 12px;
background: #ffffff;
border: 1px solid var(--bjh-linea);
box-shadow: 0 8px 20px rgba(22, 40, 28, .16);
transform: rotate(1.5deg);
}
#sp-component .bjh-foto-antigua img {
display: block;
width: 100%;
height: auto;
}
/* el apartado siguiente (h2) empieza siempre debajo de la foto */
#sp-component [itemprop="articleBody"] h2 {
clear: both;
}
@media (max-width: 767.98px) {
#sp-component .bjh-foto-antigua {
float: none;
margin: 0 auto var(--bjh-esp-lg);
transform: none;
}
}
/* ---------- MAPA ----------
Se adapta al ancho; dentro de una tarjeta va al fondo */
.bjh-mapa {
overflow: hidden;
border: 1px solid var(--bjh-linea);
border-radius: calc(var(--bjh-radio) - 4px);
background: var(--bjh-fondo);
}
.bjh-mapa iframe {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
border: 0;
}
.bjh-tarjeta .bjh-mapa {
margin-top: auto;
}
/* ---------- BOTONES: PDF Y ENLACE CON FLECHA ----------
Texto del enlace
boton con icono de documento, para abrir o descargar un PDF
Texto del enlace
boton con flecha, para ir a otra pagina de la web
Varios seguidos: cada uno en su parrafo */
:root {
--bjh-ico-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 11v6M9.5 14.5 12 17l2.5-2.5'/%3E%3C/svg%3E");
--bjh-ico-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
#sp-component a:is(.bjh-enlace-pdf, .bjh-boton) {
display: inline-flex;
align-items: center;
gap: 0.6em;
box-sizing: border-box;
max-width: 100%;
padding: 0.7rem 1.1rem;
overflow-wrap: anywhere;
border: 1px solid var(--bjh-linea);
border-radius: var(--bjh-radio);
background: var(--bjh-fondo-alt);
font-weight: 600;
line-height: 1.35;
color: var(--bjh-titulos);
text-decoration: none;
}
#sp-component a:is(.bjh-enlace-pdf, .bjh-boton):hover {
background: var(--bjh-fondo-suave);
color: var(--bjh-verde-osc);
text-decoration: underline;
text-underline-offset: 3px;
}
/* icono de documento delante */
#sp-component a.bjh-enlace-pdf::before {
content: "";
flex: none;
width: 1.3em;
height: 1.3em;
background: currentColor;
-webkit-mask: var(--bjh-ico-pdf) center / contain no-repeat;
mask: var(--bjh-ico-pdf) center / contain no-repeat;
}
/* flecha detras, que se mueve un poco al pasar el raton */
#sp-component a.bjh-boton::after {
content: "";
flex: none;
width: 1.2em;
height: 1.2em;
background: currentColor;
-webkit-mask: var(--bjh-ico-flecha) center / contain no-repeat;
mask: var(--bjh-ico-flecha) center / contain no-repeat;
transition: transform var(--bjh-transicion);
}
#sp-component a.bjh-boton:hover::after {
transform: translateX(3px);
}
/* ---------- VISOR DE PDF ----------
Va debajo del boton del PDF. Solo sale en pantallas grandes,
porque muchos moviles no muestran el PDF dentro de la pagina */
#sp-component [itemprop="articleBody"] > p.bjh-pdf,
.bjh-pdf {
max-width: none;
margin: 0 0 var(--bjh-esp-xl);
}
.bjh-pdf iframe {
display: block;
width: 100%;
height: min(80vh, 900px);
min-height: 480px;
border: 1px solid var(--bjh-linea);
border-radius: calc(var(--bjh-radio) - 4px);
background: var(--bjh-fondo);
}
@media (max-width: 767.98px) {
.bjh-pdf {
display: none;
}
}
/* ============================================
17. LEE MAS - enlace al articulo entero
Sale en la portada y en las listas de una categoria
cuando el articulo lleva el corte "Leer mas".
Lo pone Joomla solo:
Se ve como el boton con flecha (seccion 16)
============================================ */
#sp-component .readmore {
margin: var(--bjh-esp-md) 0 0;
}
#sp-component .readmore a {
display: inline-flex;
align-items: center;
gap: 0.6em;
box-sizing: border-box;
max-width: 100%;
padding: 0.55rem 1rem;
border: 1px solid var(--bjh-linea);
border-radius: var(--bjh-radio);
background: var(--bjh-fondo-alt);
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--bjh-titulos);
text-decoration: none;
}
#sp-component .readmore a:hover {
background: var(--bjh-fondo-suave);
color: var(--bjh-verde-osc);
text-decoration: underline;
text-underline-offset: 3px;
}
/* flecha detras, la misma del boton */
#sp-component .readmore a::after {
content: "";
flex: none;
width: 1.2em;
height: 1.2em;
background: currentColor;
-webkit-mask: var(--bjh-ico-flecha) center / contain no-repeat;
mask: var(--bjh-ico-flecha) center / contain no-repeat;
transition: transform var(--bjh-transicion);
}
#sp-component .readmore a:hover::after {
transform: translateX(3px);
}