/* ========================================================================= Hormiganzas — hoja principal Móvil primero. Los valores salen de los tokens de style.css: aquí no debería aparecer ningún hex suelto. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Base ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Deja aire bajo la cabecera fija al saltar a un ancla del índice */ scroll-padding-top: calc(5.5rem + var(--hz-barra-admin)); } /* ------------------------------------------------------------------------- Barra de administración de WordPress Es position:fixed y ocupa el borde superior, justo donde se ancla la cabecera pegajosa. Se compensa con una variable en lugar de repetir el ajuste en cada elemento fijado. La clase .admin-bar la pone WordPress en el , así que se lee desde con :has() para que también la herede scroll-padding-top. ---------------------------------------------------------------------- */ html:has(body.admin-bar) { --hz-barra-admin: 32px; } @media screen and (max-width: 782px) { html:has(body.admin-bar) { --hz-barra-admin: 46px; } } /* Por debajo de 600px WordPress deja de fijarla: se desplaza con la página y ya no tapa nada, así que la compensación vuelve a cero. */ @media screen and (max-width: 600px) { html:has(body.admin-bar) { --hz-barra-admin: 0px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--hz-papel); color: var(--hz-tinta); font-family: var(--hz-fuente-cuerpo); font-size: var(--hz-t-base); line-height: 1.65; font-feature-settings: 'kern', 'liga'; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--hz-fuente-titular); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--hz-e4); text-wrap: balance; } h1 { font-size: var(--hz-t-3xl); } h2 { font-size: var(--hz-t-2xl); } h3 { font-size: var(--hz-t-xl); } h4 { font-size: var(--hz-t-lg); } p { margin: 0 0 var(--hz-e6); text-wrap: pretty; } a { color: var(--hz-enlace); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { color: var(--hz-enlace-hover); text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--hz-jade); outline-offset: 3px; border-radius: 3px; } /* ------------------------------------------------------------------------- 2. Utilidades ---------------------------------------------------------------------- */ .hz-visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hz-saltar { position: absolute; left: -9999px; z-index: 999; padding: var(--hz-e3) var(--hz-e6); background: var(--hz-jade); color: var(--hz-papel); border-radius: 0 0 var(--hz-radio-anuncio) 0; text-decoration: none; } .hz-saltar:focus { left: 0; top: var(--hz-barra-admin); color: var(--hz-papel); } .hz-contenedor { width: min(100% - (var(--hz-margen) * 2), var(--hz-ancho)); margin-inline: auto; } .hz-solo-movil { display: inline-flex; } .hz-solo-escritorio { display: none; } /* ------------------------------------------------------------------------- 3. Botones ---------------------------------------------------------------------- */ .hz-btn { display: inline-flex; align-items: center; gap: var(--hz-e2); padding: 0.6rem 1.15rem; border: 0; border-radius: var(--hz-radio-pildora); font-family: var(--hz-fuente-cuerpo); font-size: var(--hz-t-sm); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .hz-btn--jade { background: var(--hz-jade); color: var(--hz-papel); } .hz-btn--jade:hover { background: var(--hz-jade-oscuro); color: var(--hz-papel); } .hz-btn--lila { background: var(--hz-lila); color: var(--hz-papel); } .hz-btn--lila:hover { background: var(--hz-lila-oscuro); color: var(--hz-papel); } .hz-icono-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--hz-radio-pildora); background: transparent; color: var(--hz-tinta); cursor: pointer; } .hz-icono-btn:hover { background: var(--hz-tinte); color: var(--hz-jade); } /* ------------------------------------------------------------------------- 4. Cabecera ---------------------------------------------------------------------- */ .hz-cabecera { position: sticky; top: var(--hz-barra-admin); z-index: 100; background: color-mix(in srgb, var(--hz-papel) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: var(--hz-borde-contenedor); } .hz-cabecera__barra { display: flex; align-items: center; gap: var(--hz-e4); width: min(100% - (var(--hz-margen) * 2), var(--hz-ancho)); margin-inline: auto; min-height: 62px; } .hz-logo { margin: 0; font-size: inherit; flex-shrink: 0; } .hz-logo__enlace { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--hz-jade); text-decoration: none; } /* Regla no negociable del manual: plural y caja baja, siempre. */ .hz-logo__palabra { font-family: var(--hz-fuente-logo); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.04em; text-transform: lowercase; color: var(--hz-tinta); line-height: 1; } .hz-isotipo { flex-shrink: 0; } .hz-nav { display: none; flex: 1; min-width: 0; } .hz-nav__lista { display: flex; gap: var(--hz-e1); list-style: none; margin: 0; padding: 0; } .hz-nav__lista a { display: block; padding: 0.45rem 0.7rem; border-radius: var(--hz-radio-pildora); color: var(--hz-secundario); font-size: var(--hz-t-sm); font-weight: 500; text-decoration: none; white-space: nowrap; } .hz-nav__lista a:hover, .hz-nav__lista .esta-activo a, .hz-nav__lista .current-menu-item a { background: var(--hz-tinte); color: var(--hz-jade); } .hz-cabecera__acciones { display: flex; align-items: center; gap: var(--hz-e2); margin-left: auto; } .hz-cabecera__aviso { display: none; } /* Buscador desplegable */ .hz-busqueda { border-top: var(--hz-borde-contenedor); background: var(--hz-papel); } .hz-busqueda__caja { width: min(100% - (var(--hz-margen) * 2), var(--hz-ancho)); margin-inline: auto; padding: var(--hz-e4) 0; } .hz-form-busqueda { display: flex; gap: var(--hz-e2); } .hz-form-busqueda input[type='search'] { flex: 1; padding: 0.7rem 1rem; border: var(--hz-borde-contenedor); border-radius: var(--hz-radio-pildora); font-family: inherit; font-size: var(--hz-t-base); background: var(--hz-papel); color: var(--hz-tinta); } .hz-form-busqueda input[type='search']:focus { border-color: var(--hz-jade); outline: none; } /* Menú móvil */ .hz-menu-movil { border-top: var(--hz-borde-contenedor); background: var(--hz-papel); padding: var(--hz-e4) var(--hz-margen) var(--hz-e6); } .hz-menu-movil__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hz-e1); } .hz-menu-movil__lista a { display: block; padding: 0.7rem 0.9rem; border-radius: var(--hz-radio-anuncio); color: var(--hz-tinta); font-weight: 500; text-decoration: none; } .hz-menu-movil__lista a:hover { background: var(--hz-tinte); color: var(--hz-jade); } /* ------------------------------------------------------------------------- 5. Migas de pan ---------------------------------------------------------------------- */ .hz-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; list-style: none; margin: 0 0 var(--hz-e4); padding: 0; font-size: var(--hz-t-xs); color: var(--hz-terciario); } .hz-migas li:not(:last-child)::after { content: '›'; margin-left: 0.35rem; color: var(--hz-terciario); } .hz-migas a { color: var(--hz-terciario); text-decoration: none; } .hz-migas a:hover { color: var(--hz-jade); text-decoration: underline; } .hz-migas [aria-current='page'] { color: var(--hz-secundario); } /* ------------------------------------------------------------------------- 6. Espacios publicitarios La altura se reserva aunque el anuncio no cargue nunca. Sin esto, el iframe de AdSense empuja el texto al aparecer y el CLS se dispara. ---------------------------------------------------------------------- */ .hz-anuncio { display: flex; align-items: center; justify-content: center; margin: var(--hz-e8) auto; border: 1px dashed var(--hz-borde); border-radius: var(--hz-radio-anuncio); background: #FBFCFB; overflow: hidden; } .hz-anuncio--728x90 { height: var(--hz-ad-728x90); max-width: 728px; } .hz-anuncio--300x250 { height: var(--hz-ad-300x250); max-width: 300px; } .hz-anuncio--336x280 { height: var(--hz-ad-336x280); max-width: 336px; } .hz-anuncio--300x600 { height: var(--hz-ad-300x600); max-width: 300px; } /* AdSense inyecta su iframe dentro de este . Las medidas van aquí y no en un atributo style, para no romper la separación HTML/CSS. */ .hz-anuncio .adsbygoogle { display: block; width: 100%; height: 100%; } .hz-anuncio__marcador { font-family: var(--hz-fuente-mono); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--hz-terciario); text-align: center; text-transform: uppercase; } /* En móvil los formatos anchos no caben: se ocultan en vez de encogerse, porque un 728×90 escalado no lo paga nadie. */ @media (max-width: 767px) { .hz-anuncio--728x90 { display: none; } } @media (min-width: 768px) { .hz-anuncio--300x250, .hz-anuncio--336x280 { display: none; } } /* ------------------------------------------------------------------------- 7. Pie ---------------------------------------------------------------------- */ .hz-pie { margin-top: var(--hz-e16); background: var(--hz-grad-jade); color: var(--hz-tinte); border-radius: var(--hz-radio-superficie) var(--hz-radio-superficie) 0 0; } .hz-pie__interior { display: grid; gap: var(--hz-e8); width: min(100% - (var(--hz-margen) * 2), var(--hz-ancho)); margin-inline: auto; padding: var(--hz-e12) 0 var(--hz-e8); } .hz-pie .hz-logo__palabra, .hz-pie .hz-logo__enlace { color: var(--hz-papel); } .hz-pie .hz-isotipo { color: var(--hz-lima); } .hz-pie__lema { margin: var(--hz-e3) 0 0; font-family: var(--hz-fuente-titular); font-size: var(--hz-t-lg); font-weight: 300; line-height: 1.4; color: var(--hz-tinte); max-width: 26ch; } .hz-redes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--hz-e4); margin: var(--hz-e6) 0 0; padding: 0; } .hz-redes a { color: var(--hz-tinte); font-size: var(--hz-t-xs); font-weight: 600; text-decoration: none; } .hz-redes a:hover { color: var(--hz-lima); text-decoration: underline; } .hz-pie__titulo { margin: 0 0 var(--hz-e3); font-family: var(--hz-fuente-cuerpo); font-size: var(--hz-t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-lima); } .hz-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hz-e2); } .hz-pie__lista a { color: var(--hz-tinte); font-size: var(--hz-t-sm); text-decoration: none; } .hz-pie__lista a:hover { color: var(--hz-lima); text-decoration: underline; } .hz-pie__legal { width: min(100% - (var(--hz-margen) * 2), var(--hz-ancho)); margin-inline: auto; padding: var(--hz-e6) 0 var(--hz-e8); border-top: 1px solid rgba(232, 244, 236, 0.16); } .hz-pie__descargo { margin: 0 0 var(--hz-e4); font-size: var(--hz-t-xs); line-height: 1.6; color: rgba(232, 244, 236, 0.72); max-width: 80ch; } .hz-pie__copy { display: flex; flex-wrap: wrap; gap: var(--hz-e3); margin: 0; font-size: var(--hz-t-xs); color: rgba(232, 244, 236, 0.72); } .hz-pie__sede::before { content: '·'; margin-right: var(--hz-e3); } /* ------------------------------------------------------------------------- 8. Rótulos y enlaces de sección Compartidos por portada, silo, artículo y 404. ---------------------------------------------------------------------- */ .hz-bloque__rotulo, .hz-seccion__rotulo { font-family: var(--hz-fuente-cuerpo); font-size: var(--hz-t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-jade); margin: 0 0 var(--hz-e4); } .hz-seccion__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--hz-e3); margin-bottom: var(--hz-e8); } .hz-seccion__titulo { margin: 0; font-size: var(--hz-t-2xl); } .hz-seccion__nota { margin: 0; font-size: var(--hz-t-sm); color: var(--hz-terciario); } .hz-enlace-seccion { display: inline-flex; align-items: center; gap: var(--hz-e2); font-size: 0.9375rem; font-weight: 600; color: var(--hz-jade); text-decoration: none; white-space: nowrap; } .hz-enlace-seccion__flecha { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hz-tinte); transition: background-color 0.15s ease, color 0.15s ease; } .hz-enlace-seccion:hover .hz-enlace-seccion__flecha { background: var(--hz-jade); color: var(--hz-papel); } /* ------------------------------------------------------------------------- 9. Listados y tarjetas ---------------------------------------------------------------------- */ .hz-listado { padding-block: var(--hz-e8) var(--hz-e12); } .hz-listado__cabecera { margin-bottom: var(--hz-e8); } .hz-listado__intro, .hz-listado__lema { max-width: var(--hz-medida); color: var(--hz-secundario); font-size: var(--hz-t-lg); } .hz-listado__lema { font-family: var(--hz-fuente-titular); font-weight: 300; font-size: var(--hz-t-2xl); line-height: 1.3; color: var(--hz-tinta); max-width: 20ch; } .hz-rejilla { display: grid; gap: var(--hz-e8); grid-template-columns: 1fr; } .hz-tarjeta { display: flex; flex-direction: column; gap: var(--hz-e4); border: var(--hz-borde-contenedor); border-radius: var(--hz-radio-bloque); overflow: hidden; background: var(--hz-papel); transition: box-shadow 0.2s ease, transform 0.2s ease; } .hz-tarjeta:hover { box-shadow: var(--hz-sombra); transform: translateY(-2px); } .hz-tarjeta__imagen { display: block; aspect-ratio: 16 / 9; background: var(--hz-tinte); } .hz-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; } .hz-tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--hz-e3); padding: 0 var(--hz-e6) var(--hz-e6); } .hz-tarjeta__titulo { margin: 0; font-size: var(--hz-t-xl); line-height: 1.25; } .hz-tarjeta__titulo a { color: var(--hz-tinta); text-decoration: none; } .hz-tarjeta__titulo a:hover { color: var(--hz-jade); } .hz-tarjeta__extracto { margin: 0; color: var(--hz-secundario); font-size: var(--hz-t-sm); line-height: 1.6; } .hz-tarjeta__meta { margin: 0; color: var(--hz-terciario); font-size: var(--hz-t-xs); } .hz-tarjeta__separador { margin-inline: 0.4rem; } /* Chip de categoría */ .hz-chip { align-self: flex-start; display: inline-block; padding: 0.25rem 0.7rem; border-radius: var(--hz-radio-pildora); background: var(--hz-tinte); color: var(--hz-jade); font-size: var(--hz-t-xs); font-weight: 600; text-decoration: none; } .hz-chip:hover { background: var(--hz-jade); color: var(--hz-papel); } /* Paginación */ .hz-paginacion { margin-top: var(--hz-e12); } .hz-paginacion .nav-links { display: flex; flex-wrap: wrap; gap: var(--hz-e2); align-items: center; } .hz-paginacion .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding-inline: 0.75rem; border-radius: var(--hz-radio-pildora); color: var(--hz-secundario); font-size: var(--hz-t-sm); font-weight: 500; text-decoration: none; } .hz-paginacion .page-numbers:hover { background: var(--hz-tinte); color: var(--hz-jade); } .hz-paginacion .page-numbers.current { background: var(--hz-jade); color: var(--hz-papel); } /* --- Página estática --- */ .hz-pagina { padding-block: var(--hz-e8) var(--hz-e12); } .hz-pagina__cabecera { margin-bottom: var(--hz-e8); padding-bottom: var(--hz-e6); border-bottom: var(--hz-borde-contenedor); } .hz-pagina__titulo { margin: 0 0 var(--hz-e3); max-width: 24ch; } .hz-pagina__fecha { margin: 0; font-size: var(--hz-t-xs); color: var(--hz-terciario); } /* --- 404 --- */ .hz-error { padding-block: var(--hz-e8) var(--hz-e16); max-width: 46rem; } .hz-error__codigo { margin: 0 0 var(--hz-e2); font-family: var(--hz-fuente-titular); font-size: var(--hz-t-3xl); font-weight: 300; color: var(--hz-terciario); font-variant-numeric: tabular-nums; } .hz-error__titulo { margin: 0 0 var(--hz-e4); } .hz-error__texto { margin: 0 0 var(--hz-e8); font-size: var(--hz-t-lg); color: var(--hz-secundario); } .hz-error__buscador { margin-bottom: var(--hz-e12); } .hz-error__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--hz-e2); } .hz-error__lista a { display: inline-block; padding: 0.4rem 0.9rem; border-radius: var(--hz-radio-pildora); background: var(--hz-tinte); color: var(--hz-jade); font-size: var(--hz-t-sm); font-weight: 500; text-decoration: none; } .hz-error__lista a:hover { background: var(--hz-jade); color: var(--hz-papel); } /* --- Búsqueda --- */ .hz-busqueda-pagina__cuenta { margin: 0 0 var(--hz-e6); font-size: var(--hz-t-sm); color: var(--hz-terciario); } .hz-busqueda-pagina__form { max-width: 34rem; } /* Estado vacío */ .hz-vacio { max-width: var(--hz-medida); padding: var(--hz-e8); border: var(--hz-borde-contenedor); border-radius: var(--hz-radio-bloque); background: var(--hz-tinte); } .hz-vacio p { margin-top: 0; color: var(--hz-secundario); } /* ------------------------------------------------------------------------- 9. Escritorio ---------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --hz-margen: 28px; } .hz-solo-movil { display: none; } .hz-solo-escritorio { display: inline-flex; } .hz-nav { display: block; } .hz-cabecera__aviso { display: inline-flex; } .hz-cabecera__barra { min-height: 72px; } .hz-pie__interior { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--hz-canal); } .hz-rejilla { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .hz-rejilla { grid-template-columns: repeat(3, 1fr); } }