/* ============================================================ TIPOGRAFÍA DEL BLOG — binomio elegido Título/encabezados: Mulish (sans) — Cuerpo de texto: Lora (serif) Las fuentes se cargan por en el de cada post, no acá — este archivo solo las referencia por nombre. Index y servicios no cargan esto: siguen en fuente de sistema. ============================================================ */ :root { --font-blog-heading: 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-blog-body: 'Lora', Georgia, 'Times New Roman', serif; } /* ===== FONDO GENERAL ===== */ body { background: linear-gradient(to bottom, #fffdfb 0%, #f7f4ee 100%); margin: 0; padding: 0; } /* ===== FONDO EXPANDIDO ===== */ .technical-article { background: transparent; margin-left: auto; margin-right: auto; padding: 1rem 1.5rem; } .technical-article .row { max-width: 100%; margin-left: calc(-0.5 * var(--bs-gutter-x, 0)); margin-right: calc(-0.5 * var(--bs-gutter-x, 0)); } .blog-post { line-height: 1.8; margin-bottom: 1.8rem; padding: 0 1.5rem; max-width: 800px; margin-left: auto; margin-right: auto; background: transparent; } /* ============================================================ ETIQUETA "Blog" — sistema cromático por categoría ============================================================ */ .b-label { display: inline-block; font-family: var(--font-blog-heading); font-weight: 700; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; border-left: none; margin-bottom: 10px; } .art-empresa .b-label { background: rgba(200, 214, 232, 0.45); color: #0f3560; } .art-hogar .b-label { background: rgba(252, 217, 122, 0.45); color: #7a5000; } .art-renovables .b-label { background: rgba(184, 221, 181, 0.45); color: #1a5c1e; } /* ============================================================ RAYITA bajo la etiqueta Blog ============================================================ */ .b-label-bar { display: block; width: 32px; height: 3px; border-radius: 2px; margin-bottom: 12px; } .art-empresa .b-label-bar { background: #0f3560; } .art-hogar .b-label-bar { background: #c98f00; } .art-renovables .b-label-bar { background: #2E7D32; } /* ============================================================ H3 y H4 — border-left por categoría, tipografía de título ============================================================ */ .blog-post h3, .technical-article h3 { font-family: var(--font-blog-heading); font-weight: 700; font-size: 1.35rem; color: #212529; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2.8rem; margin-bottom: 0.4rem; border-left: 4px solid #2E7D32; padding-left: 0.75rem; } .blog-post h4, .technical-article h4 { font-family: var(--font-blog-heading); font-weight: 600; border-left: 2px solid #2E7D32; padding-left: 0.75rem; color: #212529; margin-top: 1.5rem; margin-bottom: 0.4rem; } .art-empresa .blog-post h3, .art-empresa.technical-article h3 { border-left-color: #0f3560; } .art-empresa .blog-post h4, .art-empresa.technical-article h4 { border-left-color: #4a7ab5; } .art-hogar .blog-post h3, .art-hogar.technical-article h3 { border-left-color: #c98f00; } .art-hogar .blog-post h4, .art-hogar.technical-article h4 { border-left-color: #e6a800; } .art-renovables .blog-post h3, .art-renovables.technical-article h3 { border-left-color: #2E7D32; } .art-renovables .blog-post h4, .art-renovables.technical-article h4 { border-left-color: #21C029; } /* ============================================================ ASIDE — botones de categoría cromáticos ============================================================ */ .categorias { background-color: #f8f9fa; color: #212529; font-size: 1rem; border: 1px solid #dee2e6; padding: 1.25rem 1rem; margin-top: 1.8rem; margin-bottom: 2rem; } .categorias h3 { font-family: var(--font-blog-heading); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; margin: 0 0 8px; border: none; padding: 0; } .categorias hr { margin: 0 0 12px; border-color: #dee2e6; } .categorias p { margin: 0 0 7px; } .side-bar { display: block; width: 100%; text-align: left; font-family: var(--font-blog-heading); font-size: 0.8rem; font-weight: 500; padding: 12px 10px; border-left: 3px solid; border-radius: 0 6px 6px 0; text-decoration: none; transition: filter 0.12s; } .side-bar:hover, .side-bar:focus, .side-bar:visited, .side-bar:active { text-decoration: none; filter: brightness(0.93); } .side-bar.cat-empresa { background: #c8d6e8; color: #0f3560; border-left-color: #0f3560; } .side-bar.cat-hogar { background: #fcd97a; color: #7a5000; border-left-color: #c98f00; } .side-bar.cat-renovables { background: #b8ddb5; color: #1a5c1e; border-left-color: #2E7D32; } /* ============================================================ PÁRRAFOS Y LISTAS — cuerpo del post, Lora ============================================================ */ .blog-post p { font-family: var(--font-blog-body); font-size: 1.17rem; line-height: 1.75; margin-bottom: 1.53rem; hyphens: auto; } .blog-post li { font-family: var(--font-blog-body); font-size: 1.17rem; line-height: 1.75; margin-bottom: 0.5rem; hyphens: auto; } /* ============================================================ TÍTULOS PRINCIPALES DEL POST ============================================================ */ .blog-post-title { font-family: var(--font-blog-heading); font-weight: 800; color: #1f1f1f; text-align: center; font-size: 2.4rem; line-height: 1.3; margin-top: 4.5rem; margin-bottom: 1rem; letter-spacing: 0.5px; text-shadow: 1px 1px 2px rgba(180, 178, 176, 0.45); transition: color 0.3s ease; } .blog-post-title:hover { color: #d79a00; } .blog-post-sub { font-family: var(--font-blog-heading); font-weight: 600; text-align: center; font-size: 1.25rem; color: #3d3d3d; line-height: 1.5; margin-top: 0.8rem; margin-bottom: 3rem; opacity: 0.9; } .blog-post-intro { font-family: var(--font-blog-body); font-style: italic; font-size: 1.05rem; line-height: 1.7; color: #2e2e2e; text-align: center; max-width: 700px; padding-bottom: 2.25rem; margin-bottom: 0; } /* ============================================================ BLOG FOOTER ============================================================ */ .blog-footer { border-top: 1px solid #ccc; padding: 1rem 0; width: fit-content; min-width: 30%; margin-left: auto; margin-right: 0; text-align: right; } .blog-footer p { font-family: var(--font-blog-heading); font-size: 0.9rem; line-height: 1.53; margin-bottom: 0.25rem; color: #666; } .blog-footer p:last-child { margin-bottom: 0; } /* ============================================================ AUTOR Y FECHA ============================================================ */ .article-autor { font-family: var(--font-blog-heading); font-size: 0.9rem; color: #6b6b6b; letter-spacing: 0.04em; text-align: right; margin-right: 0; } .article-updated { font-family: var(--font-blog-heading); font-size: 0.9rem; color: #6b6b6b; letter-spacing: 0.04em; margin-bottom: 1rem; text-align: right; margin-right: 0; } /* ============================================================ CONTENEDORES ============================================================ */ main { background: transparent; width: 100%; padding-left: 0; padding-right: 0; } .container-0 { padding-top: 7px; color: #ffffff; background-color: #1f1f1f; height: 40px; } .container-fluid { color: #000000; background-color: #fffefe; height: 117px; } .container1 { padding-top: 18px; color: #272727; background-color: #ffffff; height: 135px; } .container2 { color: #000000; background-size: 100% 100%; background-repeat: no-repeat; } .container3 { color: #ffffff; background-color: #0f3560; } .lin { background-color: #d1d1d1; height: 1px; } /* ============================================================ UTILIDADES ============================================================ */ .breadcrumb-item { font-size: 85%; } .text-small { font-size: 81%; } .table { text-align: center; } .spa { padding-right: 5px; } .spa2 { display: inline-block; padding-right: 18px; } .som { text-shadow: 2px 2px #d4d2d1; } /* ============================================================ CTA — bloque de llamada a la acción PENDIENTE: mudar a cta.css (Nivel 2), es componente compartido con servicios.css, no debería vivir acá — ver auditoría anterior ============================================================ */ .cta9-container { background-color: #f3f4f6; border: 2px solid #ccc; border-radius: 9px; padding: 20px; text-align: center; margin-top: 20px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); } .cta9-icon img { width: 50px; margin-bottom: 15px; } .cta9-titulo { font-family: var(--font-blog-heading); font-size: 24px; color: #1a1a1a; margin-top: 10px; } .cta9-texto { font-family: var(--font-blog-body); font-size: 16px; color: #4a4a4a; margin-top: 20px; max-width: 90ch; margin-left: auto; margin-right: auto; line-height: 1.44; } .cta9-boton { font-family: var(--font-blog-heading); display: inline-block; background-color: #007bff; color: #fff; padding: 10px 20px; margin-top: 12px; font-size: 16px; font-weight: bold; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; } .cta9-boton:hover { background-color: #5fd11c; }