/* ============================================================ TARIJA AL DÍA — base.css 1. Tokens y roles (T3) 2. Reset y tipografía (T3) 3. Colores de categoría (T3) 4. Header y pie (T5) 5. Componentes (T6) 6. Hero y ticker (T8) 7. Portada (T9) 8. Nota y sidebar (T10) 9. Archivo, búsqueda, 404 (T11) ============================================================ */ /* --- 1. Tokens y roles -------------------------------------- */ :root { /* Tokens de marca — NO SE TOCAN. El kit da el mismo valor a primario y acento. */ --primario: #950E14; --acento: #950E14; --tinta: #121212; --papel: #FFFFFF; --bajada: #EDE6E6; --texto: #16150F; --texto-suave: #6E6A5E; /* Roles de superficie — lo único que cambia con el tema. */ --superficie: var(--papel); --superficie-alterna: #F5F5F5; --en-superficie: var(--texto); --en-superficie-suave: var(--texto-suave); --borde-suave: #E4E4E4; --oscuro: var(--tinta); --en-oscuro: var(--papel); /* El rojo da 8,93:1 sobre blanco pero solo 2,10:1 sobre la tinta. Por eso el realce sobre oscuro es --bajada (15,22:1) y NUNCA el rojo. Es la restricción inversa a la de Pulso Orureño: no la copies de memoria. */ --realce-claro: var(--acento); --realce-oscuro: var(--bajada); /* Medidas calcadas de HotMagazine. */ --contenedor: 1170px; --aire-lateral: 15px; --gap-grilla: 30px; } [data-tema="oscuro"] { --superficie: var(--tinta); --superficie-alterna: #1C1C1C; --en-superficie: var(--papel); --en-superficie-suave: rgba(255, 255, 255, 0.66); --borde-suave: rgba(255, 255, 255, 0.14); /* En oscuro el rojo desaparece como color de TEXTO en todo el sitio. */ --realce-claro: var(--bajada); } /* --- 2. Reset y tipografía ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--en-superficie-suave); background: var(--superficie); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-family: 'Barlow', system-ui, sans-serif; color: var(--en-superficie); font-weight: 700; } a { color: inherit; text-decoration: none; } a:hover, a:focus-visible { color: var(--realce-claro); } img { max-width: 100%; height: auto; display: block; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--realce-claro); outline-offset: 2px; } .contenedor { max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--aire-lateral); } .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- 3. Colores de categoría -------------------------------- */ /* Las nueve --cat-* las emite inc/colores-categoria.php en el . El chip recibe la suya por style inline con el hex crudo (no el nombre de la variable): style="--cat:#950E14", vía tarija_color_categoria() — que cae a var(--bajada) para una categoría fuera del mapa de 9. */ .chip { display: inline-block; padding: 4px 10px; background: var(--cat, var(--acento)); color: #FFFFFF; /* mínimo 6,20:1 contra cualquiera de los nueve */ font-family: 'Barlow', sans-serif; font-size: 11px; line-height: 15.7px; font-weight: 700; text-transform: uppercase; } .chip:hover, .chip:focus-visible { color: #FFFFFF; filter: brightness(1.15); } /* --- 4. Header y pie ---------------------------------------- */ .redes { display: flex; align-items: center; gap: 12px; } .redes__enlace { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: inherit; transition: color .15s ease; } .redes__enlace svg { width: 15px; height: 15px; } .redes--pie .redes__enlace svg { width: 18px; height: 18px; } .redes--header .redes__enlace:hover, .redes--header .redes__enlace:focus-visible, .redes--pie .redes__enlace:hover, .redes--pie .redes__enlace:focus-visible { color: var(--realce-oscuro); } @media (min-width: 768px) { .redes__enlace { min-width: 24px; min-height: 24px; } } /* Barra utilitaria */ .barra-utilitaria { background: #111111; color: rgba(255, 255, 255, 0.72); } .barra-utilitaria__caja { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 16px; } .barra-utilitaria__fecha { margin: 0; font-size: 12px; line-height: 17px; } /* Masthead */ .masthead { background: #222222; } .masthead__caja { display: flex; align-items: center; gap: 26px; min-height: 130px; } .masthead__logo img { height: 46px; width: auto; } .masthead__lema { margin: 0; font-family: 'Barlow', sans-serif; font-size: 13px; line-height: 18px; text-transform: uppercase; letter-spacing: 1px; color: var(--bajada); /* 12,93:1 sobre #222222 — el rojo acá daría 2,1:1 */ } /* Barra de nav */ .barra-nav { background: var(--superficie); border-bottom: 1px solid var(--borde-suave); } .barra-nav__caja { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-height: 61px; } .nav-principal { display: none; } .nav-principal__lista { display: flex; align-items: stretch; } .nav-principal__lista > li { position: relative; } /* El filete de color por categoría, el gesto más característico del header. */ .nav-principal__lista > li.nav-cat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cat, var(--acento)); } /* Una regla por slug: la clase la pone el filtro tarija_clase_item_menu. */ .nav-cat--politica { --cat: var(--cat-politica); } .nav-cat--economia { --cat: var(--cat-economia); } .nav-cat--sociedad { --cat: var(--cat-sociedad); } .nav-cat--policial { --cat: var(--cat-policial); } .nav-cat--deportes { --cat: var(--cat-deportes); } .nav-cat--cultura { --cat: var(--cat-cultura); } .nav-cat--entretenimiento { --cat: var(--cat-entretenimiento); } .nav-cat--mundo { --cat: var(--cat-mundo); } .nav-cat--tecnologia { --cat: var(--cat-tecnologia); } /* Sobre --tinta (tema oscuro) los nueve colores base caen a 1,88–3,02:1 — el filete se vuelve invisible. En oscuro se usa la variante clara (6,23:1 o más sobre #121212). El chip no se toca: ahí el contraste es texto-blanco-sobre-color, no depende del fondo de la página. */ [data-tema="oscuro"] .nav-cat--politica { --cat: var(--cat-politica-claro); } [data-tema="oscuro"] .nav-cat--economia { --cat: var(--cat-economia-claro); } [data-tema="oscuro"] .nav-cat--sociedad { --cat: var(--cat-sociedad-claro); } [data-tema="oscuro"] .nav-cat--policial { --cat: var(--cat-policial-claro); } [data-tema="oscuro"] .nav-cat--deportes { --cat: var(--cat-deportes-claro); } [data-tema="oscuro"] .nav-cat--cultura { --cat: var(--cat-cultura-claro); } [data-tema="oscuro"] .nav-cat--entretenimiento { --cat: var(--cat-entretenimiento-claro); } [data-tema="oscuro"] .nav-cat--mundo { --cat: var(--cat-mundo-claro); } [data-tema="oscuro"] .nav-cat--tecnologia { --cat: var(--cat-tecnologia-claro); } .nav-principal__lista a { display: flex; align-items: center; padding: 20px 30px 20px 20px; font-family: 'Barlow', sans-serif; font-size: 13px; line-height: 20px; font-weight: 700; text-transform: uppercase; color: var(--en-superficie); } .nav-principal__lista .current-menu-item > a, .nav-principal__lista a:hover, .nav-principal__lista a:focus-visible { color: var(--realce-claro); } .barra-nav__acciones { display: flex; align-items: center; gap: 10px; } .buscador__campo { width: 190px; height: 34px; padding: 6px 12px; border: 1px solid var(--borde-suave); background: var(--superficie); color: var(--en-superficie); font: inherit; font-size: 13px; } .buscador__campo::placeholder { color: var(--en-superficie-suave); } .boton-icono { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--en-superficie); } .boton-icono svg { width: 20px; height: 20px; } .icono-luna { display: none; } [data-tema="oscuro"] .icono-sol { display: none; } [data-tema="oscuro"] .icono-luna { display: block; } .panel-nav { border-top: 1px solid var(--borde-suave); background: var(--superficie); padding: 4px var(--aire-lateral) 12px; } .panel-nav__lista a { display: block; padding: 11px 0 11px 12px; font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--en-superficie); border-bottom: 1px solid var(--borde-suave); border-left: 4px solid var(--cat, transparent); } @media (min-width: 992px) { .nav-principal { display: block; } .barra-nav__hamburguesa { display: none; } .panel-nav { display: none; } } @media (max-width: 991px) { .barra-utilitaria { display: none; } .masthead__caja { min-height: 76px; } .masthead__logo img { height: 34px; } .masthead__lema { display: none; } .buscador__campo { width: 130px; } } /* Pie */ .pie { background: var(--oscuro); color: rgba(255, 255, 255, 0.66); padding: 62px 0 30px; margin-top: 60px; } .pie__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px 24px; } .pie__titulo { font-size: 13px; line-height: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--en-oscuro); padding-bottom: 8px; border-bottom: 2px solid var(--cat, var(--bajada)); margin-bottom: 14px; } .pie__titulo a:hover, .pie__titulo a:focus-visible { color: var(--realce-oscuro); } .pie__lista li + li { margin-top: 8px; } .pie__lista a { font-size: 13px; line-height: 18px; } .pie__lista a:hover, .pie__lista a:focus-visible { color: var(--realce-oscuro); } .pie__cierre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--en-oscuro); } .pie__logo img { height: 36px; width: auto; } .pie__legal { font-size: 12px; margin: 18px 0 0; } /* --- 5. Componentes ----------------------------------------- */ .seccion { padding-top: 40px; } .seccion__titulo-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--borde-suave); } .seccion__titulo { font-size: 15px; line-height: 16.5px; font-weight: 700; text-transform: uppercase; margin: 0; } .seccion__titulo span { display: inline-block; padding: 0 5px 14px 0; border-bottom: 2px solid var(--realce-claro); margin-bottom: -1px; } .seccion__enlace { padding-bottom: 12px; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--realce-claro); } /* Metadatos */ .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; line-height: 17px; color: var(--en-superficie-suave); margin-top: 8px; } .meta__hora { color: var(--realce-claro); font-weight: 700; } /* Tarjeta */ .grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grilla); } .grilla--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* aspect-ratio en .tarjeta__media (no solo en .tarjeta__imagen): una nota sin imagen destacada deja get_the_post_thumbnail() vacío, y sin esto la caja colapsaba a 0px arrastrando con ella al chip (position: absolute). */ .tarjeta__media { position: relative; overflow: hidden; background: var(--borde-suave); aspect-ratio: 16 / 10; } .tarjeta__imagen { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease; } .tarjeta:hover .tarjeta__imagen { transform: scale(1.04); } .tarjeta__media .chip { position: absolute; left: 10px; bottom: 10px; } .tarjeta__cuerpo { padding-top: 12px; } .tarjeta__titular { font-size: 13px; line-height: 20px; font-weight: 700; } .tarjeta__titular a:hover, .tarjeta__titular a:focus-visible { color: var(--realce-claro); } .tarjeta--grande .tarjeta__media { aspect-ratio: 16 / 9; } .tarjeta--grande .tarjeta__imagen { aspect-ratio: 16 / 9; } .tarjeta--grande .tarjeta__titular { font-size: 18px; line-height: 24px; } /* Widget del sidebar */ .widget + .widget { margin-top: 34px; } .widget__item { display: flex; gap: 12px; } .widget__item + .widget__item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde-suave); } /* Mismo riesgo que .tarjeta__media: sin miniatura, la caja no tiene nada adentro que le dé alto — aspect-ratio + fondo sostienen el espacio. */ .widget__miniatura { flex: 0 0 76px; aspect-ratio: 76 / 60; background: var(--borde-suave); overflow: hidden; } .widget__miniatura img { width: 76px; height: 60px; object-fit: cover; } .widget__titular { font-size: 13px; line-height: 18px; font-weight: 700; } .widget__titular a:hover, .widget__titular a:focus-visible { color: var(--realce-claro); } /* Paginación */ .paginacion { margin-top: 36px; } .paginacion .nav-links { display: flex; flex-wrap: wrap; gap: 6px; } .paginacion .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--borde-suave); font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700; color: var(--en-superficie); } .paginacion .page-numbers:hover, .paginacion .page-numbers:focus-visible { border-color: var(--realce-claro); color: var(--realce-claro); } /* El activo: rojo con blanco encima da 8,93:1 en los DOS temas, porque el fondo es el rojo y no la superficie. */ .paginacion .page-numbers.current { background: var(--acento); border-color: var(--acento); color: #FFFFFF; } .paginacion .page-numbers.dots { border-color: transparent; } /* Breadcrumb */ .breadcrumb { background: var(--superficie-alterna); } .breadcrumb__caja { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--en-superficie); } .breadcrumb__actual { color: var(--realce-claro); } .breadcrumb__sep { color: var(--en-superficie-suave); } @media (max-width: 991px) { .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .grilla, .grilla--dos { grid-template-columns: minmax(0, 1fr); } } /* Franja del dólar — va sobre superficie clara, por eso la cifra puede ir en rojo (8,93:1). Sobre la tinta el rojo daría 2,10:1. */ .franja-dolar { margin-top: 34px; background: var(--superficie-alterna); border-block: 1px solid var(--borde-suave); } .franja-dolar__caja { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding-block: 16px; } .franja-dolar__cifra { margin: 0; font-family: 'Barlow', sans-serif; font-size: 26px; line-height: 30px; font-weight: 700; color: var(--realce-claro); } .franja-dolar__cifra span { font-size: 13px; font-weight: 400; color: var(--en-superficie-suave); } .franja-dolar__caption { margin: 0; font-size: 12px; text-transform: uppercase; color: var(--en-superficie-suave); } /* --- 6. Hero y ticker --------------------------------------- */ /* Mosaico a sangre: 6 columnas × 2 filas a 1440. La destacada ocupa 2×2. Se usa grid con auto-flow dense para que las teselas rellenen los huecos sin tener que posicionarlas una por una. */ .hero__mosaico { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 201px; grid-auto-flow: dense; gap: 1px; background: var(--borde-suave); } .tesela { position: relative; overflow: hidden; } .tesela--destacada { grid-column: span 2; grid-row: span 2; } .tesela__media { position: relative; height: 100%; } .tesela__imagen { width: 100%; height: 100%; object-fit: cover; } .tesela__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 75%); pointer-events: none; } .tesela__cuerpo { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; z-index: 1; } .tesela__titular { margin-top: 8px; font-size: 15px; line-height: 20px; font-weight: 700; text-transform: uppercase; color: #FFFFFF; } .tesela__titular a { color: #FFFFFF; } .tesela__titular a:hover, .tesela__titular a:focus-visible { color: var(--bajada); } /* Sobre el degradado oscuro la meta va en bajada, nunca en rojo. */ .tesela .meta { color: rgba(255, 255, 255, .78); } .tesela .meta__hora { color: var(--bajada); } .tesela--destacada .tesela__cuerpo { padding: 24px; } .tesela--destacada .tesela__titular { font-size: 26px; line-height: 30px; } /* Ticker */ .ticker { border-bottom: 1px solid var(--borde-suave); } .ticker__caja { display: flex; align-items: center; gap: 14px; padding-block: 14px; overflow: hidden; } .ticker__etiqueta { flex: 0 0 auto; padding: 8px 14px; background: var(--acento); color: #FFFFFF; /* 8,93:1 en los dos temas */ font-family: 'Barlow', sans-serif; font-size: 11px; line-height: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .ticker__lista { display: flex; align-items: center; gap: 28px; overflow-x: auto; scrollbar-width: none; } .ticker__lista::-webkit-scrollbar { display: none; } .ticker__item { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 13px; line-height: 16px; } .ticker__hora { color: var(--realce-claro); font-weight: 700; } .ticker__item a { font-weight: 700; color: var(--en-superficie); } .ticker__item a:hover, .ticker__item a:focus-visible { color: var(--realce-claro); } @media (max-width: 991px) { .hero__mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .tesela--destacada { grid-column: span 2; grid-row: span 2; } } @media (max-width: 575px) { .hero__mosaico { grid-template-columns: 1fr; grid-auto-rows: 220px; } .tesela--destacada { grid-column: span 1; grid-row: span 1; } .tesela--destacada .tesela__titular { font-size: 20px; line-height: 25px; } } /* --- 7. Portada --------------------------------------------- */ .bloque-principal { display: grid; grid-template-columns: minmax(0, 780fr) minmax(0, 390fr); gap: var(--gap-grilla); align-items: start; padding-top: 40px; } .sidebar { position: sticky; top: 20px; } /* Banda oscura: el rojo acá daría 2,10:1, así que TODO el realce pasa a --realce-oscuro (--bajada, 15,22:1). */ .seccion--banda { background: var(--oscuro); color: rgba(255, 255, 255, .66); padding-block: 40px 48px; margin-top: 48px; } .seccion--banda .seccion__titulo, .seccion--banda .tarjeta__titular { color: var(--en-oscuro); } .seccion--banda .seccion__titulo span { border-bottom-color: var(--realce-oscuro); } .seccion--banda .seccion__enlace { color: var(--realce-oscuro); } .seccion--banda .meta { color: rgba(255, 255, 255, .6); } .seccion--banda .meta__hora { color: var(--realce-oscuro); } .seccion--banda .tarjeta__titular a:hover, .seccion--banda .tarjeta__titular a:focus-visible { color: var(--realce-oscuro); } @media (max-width: 991px) { .bloque-principal { grid-template-columns: minmax(0, 1fr); } .sidebar { position: static; margin-top: 40px; } } /* --- 8. Nota y sidebar -------------------------------------- */ .nota { display: grid; grid-template-columns: minmax(0, 878fr) minmax(0, 293fr); gap: var(--gap-grilla); align-items: start; padding-top: 34px; } .nota__titular { font-size: 24px; line-height: 30px; font-weight: 700; margin: 12px 0 0; } .nota__compartir { display: flex; gap: 8px; margin: 18px 0 22px; } .nota__compartir-boton { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--superficie-alterna); color: var(--en-superficie); } .nota__compartir-boton svg { width: 16px; height: 16px; } .nota__compartir-boton:hover, .nota__compartir-boton:focus-visible { background: var(--acento); color: #FFFFFF; /* 8,93:1 en los dos temas */ } .nota__foto { margin: 0 0 22px; } .nota__foto figcaption { margin-top: 8px; font-size: 12px; font-style: italic; color: var(--en-superficie-suave); } .nota__texto { font-size: 14px; line-height: 22px; } .nota__texto p { margin: 0 0 18px; } .nota__texto a { color: var(--realce-claro); text-decoration: underline; } .nota__texto h2, .nota__texto h3 { margin: 26px 0 10px; } .widget__categorias li + li { margin-top: 8px; } .widget__categorias a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-left: 4px solid var(--cat, var(--bajada)); /* nunca --acento: 2,10:1 sobre superficie oscura */ background: var(--superficie-alterna); font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--en-superficie); } .widget__conteo { color: var(--en-superficie-suave); } /* Una regla por slug, igual que .nav-cat--* (línea 186): la clase la pone tarija_sidebar() en el
  • , nunca --cat inline. Con inline, ningún selector [data-tema="oscuro"] puede pisarlo (el inline siempre gana). */ .widget-cat--politica { --cat: var(--cat-politica); } .widget-cat--economia { --cat: var(--cat-economia); } .widget-cat--sociedad { --cat: var(--cat-sociedad); } .widget-cat--policial { --cat: var(--cat-policial); } .widget-cat--deportes { --cat: var(--cat-deportes); } .widget-cat--cultura { --cat: var(--cat-cultura); } .widget-cat--entretenimiento { --cat: var(--cat-entretenimiento); } .widget-cat--mundo { --cat: var(--cat-mundo); } .widget-cat--tecnologia { --cat: var(--cat-tecnologia); } /* Sobre --tinta los nueve colores base caen a 1,88–3,02:1 (ver línea 196) — mismo problema que el filete del nav, misma solución: variante clara. */ [data-tema="oscuro"] .widget-cat--politica { --cat: var(--cat-politica-claro); } [data-tema="oscuro"] .widget-cat--economia { --cat: var(--cat-economia-claro); } [data-tema="oscuro"] .widget-cat--sociedad { --cat: var(--cat-sociedad-claro); } [data-tema="oscuro"] .widget-cat--policial { --cat: var(--cat-policial-claro); } [data-tema="oscuro"] .widget-cat--deportes { --cat: var(--cat-deportes-claro); } [data-tema="oscuro"] .widget-cat--cultura { --cat: var(--cat-cultura-claro); } [data-tema="oscuro"] .widget-cat--entretenimiento { --cat: var(--cat-entretenimiento-claro); } [data-tema="oscuro"] .widget-cat--mundo { --cat: var(--cat-mundo-claro); } [data-tema="oscuro"] .widget-cat--tecnologia { --cat: var(--cat-tecnologia-claro); } @media (max-width: 991px) { .nota { grid-template-columns: minmax(0, 1fr); } .nota__titular { font-size: 21px; line-height: 27px; } } /* --- 9. Archivo, búsqueda y 404 ----------------------------- */ .archivo { display: grid; grid-template-columns: minmax(0, 780fr) minmax(0, 390fr); gap: var(--gap-grilla); align-items: start; padding-top: 34px; } .archivo--sin-sidebar { grid-template-columns: minmax(0, 1fr); } .archivo__encabezado { margin-bottom: 26px; } .archivo__titulo { font-size: 24px; line-height: 30px; font-weight: 700; text-transform: uppercase; } .archivo__descripcion { margin-top: 8px; } .archivo__vacio { padding: 30px 0; } .pagina { padding-top: 34px; max-width: 780px; } .pagina-404 { padding: 70px 0 90px; text-align: center; } .pagina-404__titulo { font-size: 24px; line-height: 30px; margin-bottom: 12px; } .pagina-404__texto { max-width: 480px; margin: 0 auto 24px; } .boton-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; background: var(--acento); color: #FFFFFF; /* 8,93:1 en los dos temas */ font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; } .boton-cta:hover, .boton-cta:focus-visible { filter: brightness(1.15); color: #FFFFFF; } @media (max-width: 991px) { .archivo { grid-template-columns: minmax(0, 1fr); } }