/* Ajustes propios sobre el theme (hugo-contour). El theme está pensado para una tipografía monoespaciada: declara `font-family: "IBM Plex Mono", …monospace` en el cuerpo. Acá se cambia a la de la marca (Red Hat Text, ver `fuentes.css`) y se ajustan tres cosas más que el contenido migrado necesita: los bloques de preguntas y respuestas (fichas AEO), que el theme no trae; el color del texto corriente, porque el theme es monocromo y con el naranjo de la agencia en su única variable de color la página entera queda naranja; y el tamaño de las imágenes dentro de una nota —el sitio viejo venía de un constructor con imágenes a todo el ancho y sin esto aparecen a tamaño natural, que en un monitor grande se ve chico—. Nada de acá reemplaza al theme: son reglas que lo ajustan, y el CSS del theme sigue cargando antes (ver `layouts/_partials/head.html`). */ :root { --fuente-marca: "Red Hat Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* La letra del cuerpo: **Inter** (el cliente la pidió con esas palabras). Antes de esto el texto corriente salía en la pila de reemplazo del theme («IBM Plex Mono», «SF Mono», Menlo, monospace), o sea en un tipo de máquina de escribir y distinto en cada sistema, porque la regla que la traía a la marca empataba en especificidad con la del theme y el theme carga después. El arreglo es la especificidad, y por eso el selector es `html body` (0,0,2) y no `body` (0,0,1): el theme declara la monoespaciada en `html, body` (base.css, que va después) y con `body` a secas el empate lo ganaba él. `html body` le gana y el cuerpo entero toma Inter. Las dos familias conviven a propósito: **Inter para lo que se lee** (párrafos, listas, enlaces, fichas, rótulos del sitio) y **Red Hat Text para los títulos** (abajo). */ html body { font-family: var(--fuente-cuerpo); } /* Los títulos del theme son monoespaciados a propósito (su identidad). Con la letra del cuerpo en Inter la jerarquía se pierde si el título también va en ella, así que los títulos se quedan con la tipografía de la marca y refuerzan con peso y tamaño: el resultado sigue siendo «mapa», no «revista». La lista llega hasta `h6` —y no hasta `h3` como antes— porque los `h4` y `h5` del contenido (los rótulos de /nosotros, el cierre del bloque) quedaban en la monoespaciada del theme y se leían como cuerpo. */ h1, h2, h3, h4, h5, h6, .post-title { font-family: var(--fuente-marca); font-weight: 600; letter-spacing: -0.01em; } /* --- las fichas AEO ---------------------------------------------------------------- */ .faq { margin: 3rem 0 0; border-top: 1px solid var(--rule, currentColor); padding-top: 1.5rem; } .faq h2 { font-size: clamp(1.15rem, 1vw + 0.9rem, 1.4rem); margin: 0 0 1rem; } .faq-lista { margin: 0; } /* --- las preguntas frecuentes: el realce de la selección ---------------------------- */ /* El cliente vio que al seleccionar con el ratón una pregunta queda con un contraste fuerte —el par que el theme declara para `::selection` (`background: var(--fg)`, `color: var(--bg)`)— y pidió ese mismo realce por omisión, para que cada pregunta se lea como título destacado. Se usa el mismo par de variables, así que se invierte solo con el tema (en oscuro: banda crema con texto grafito) y no hay que declarar dos veces el color. */ .faq-lista dt { font-weight: 600; margin-top: 1.25rem; } /* El realce: el par del theme (la banda en el color de la tinta y el texto en el del papel), con un respiro alrededor. Va en línea y no a lo ancho de la columna —`inline-block`— para que la banda abrace la pregunta, como una selección de texto y no una barra de sección; el `clone` de `box-decoration-break` hace que, si la pregunta ocupa dos líneas, cada una lleve su banda en vez de un rectángulo que cruce el hueco. */ body .faq-lista dt, body.layout-page .faq-contenido > h3, body.layout-page .faq-contenido > h2 { display: inline-block; max-inline-size: 100%; background: var(--fg); color: var(--bg); padding: 0.1em 0.5em 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; margin-inline-start: -0.5em; } /* El número del rótulo y los enlaces dentro de una pregunta realzada no cambian de color: el contraste lo fija el par de arriba. El `a` del último selector no es adorno: sin él la regla alcanza al `h3` mismo y le devuelve `color: inherit` —la tinta— sobre la banda de la tinta, que es texto invisible (1:1) en las páginas de servicios, donde las preguntas son `###`. El `h2` nunca lo sufrió porque ahí sí estaba escrito el `a`. */ body .faq-lista dt::before, body.layout-page .faq-contenido > h3 a, body.layout-page .faq-contenido > h2 a { color: inherit; opacity: 0.75; } .faq-lista dt::before { /* La misma marca que usa el theme para enumerar (una guía visual, no adorno). */ content: "Q/"; margin-right: 0.5em; opacity: 0.55; font-size: 0.8em; } .faq-lista dd { margin: 0.35rem 0 0; padding-left: 1.6em; } /* --- el título de sección de las páginas interiores --------------------------------- */ /* El cliente pidió que el H2 de las interiores sea el mismo de la portada. El theme lo deja en 19 px —el tamaño de su vocabulario de bitácora— y la portada lo lleva a `clamp(1.4rem, 1.2rem + 1vw, 2rem)`; acá se iguala, con el mismo peso e interlineado del título de sección de la portada (`portada.css`). Sólo el primer nivel: los H2 que van dentro de un atajo —el bloque de «¿Es Eme y Eme para tu empresa?»— viven en una columna angosta y con este tamaño se romperían. */ body.layout-page .post-body > h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); font-weight: 600; line-height: 1.15; } /* --- las preguntas frecuentes escritas en el contenido ------------------------------ */ /* El atajo `faq` marca el bloque de preguntas y respuestas de las páginas de servicios (ahí cada pregunta es un `###`): el cliente pidió que la pregunta destaque, y el H3 del theme mide lo mismo que el texto corriente. */ body.layout-page .faq-contenido > h3, body.layout-page .faq-contenido > h2 { margin-block: 2.6rem 0.6rem; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); font-weight: 600; letter-spacing: 0; line-height: 1.25; } /* --- la paleta de la marca -------------------------------------------------------- */ /* La paleta la entregó el cliente y se declara una sola vez, en `hugo.toml`; `head.html` la publica como variables CSS (`--em-` y sus canales). Los papeles, porque una paleta sin papeles es una lista de colores —y cada uno lleva su contraste medido contra el fondo donde se usa, que es lo que decide si un color puede llevar texto o sólo ser una línea—: · `--em-naranjo` #f39713 — el acento: títulos, enlaces, numerales, botones, el panel lateral y las líneas del mapa. Sobre el grafito da 4,79:1 (alcanza para texto); sobre el crema, 2,07:1 (no alcanza: ahí el acento de texto es la pizarra). · `--em-tinta` #3d3d3c — el fondo del tema oscuro y el texto del tema claro (9,91:1). · `--em-crema` #f7f4ee — el papel del tema claro y el color de la lectura en el oscuro (9,91:1 sobre el grafito; el blanco puro daba 10,87:1 y enfriaba la página sin necesidad). · `--em-blanco` #ffffff — las tarjetas y los bloques del tema claro, sobre el papel crema. · `--em-salvia` #9aa997 — las líneas: hairlines, bordes de tarjeta y rejillas. Es el color de la estructura y no del contenido, así el naranjo queda para señalar. Sobre el grafito da 4,40:1 —a un pelo del 4,5 que la norma pide para texto chico—, y por eso va en líneas (que no son texto) y no en rótulos. · `--em-pizarra` #3f5f72 — los rótulos y el texto secundario del tema claro (6,19:1 sobre el crema). Sobre el grafito da 1,60:1: en el tema oscuro no se usa. · `--em-terracota` #c25131, `--em-mostaza` #d9a639 y `--em-olivo` #4e6724 — los tres secundarios, uno por etapa del Método 3C (Conocer, Clarificar, Conectar), en la línea de cada etapa. Son formas: sobre el grafito ninguno de los tres llega a 4,5 para texto chico (2,34 / 4,90 / 1,70). De ahí salen los papeles que usan las hojas propias: · `--em-acento` — para lo que se pinta (rellenos, bordes, marcas): naranjo en el claro, crema en el oscuro. · `--em-acento-texto` — para lo que se lee en tamaño de enlace o de numeral: pizarra en el claro, crema en el oscuro. · `--em-rotulo` — los rótulos chicos en mayúscula: crema atenuada en el oscuro (la salvia no llega a 4,5 y la pizarra no se ve), pizarra en el claro. · `--em-grafico-acento` y `--em-grafico-secundario` — los dos colores del motivo del gráfico de la banda (el anillo y el círculo del isotipo). */ /* El tema oscuro, sin naranjo. El cliente pidió que el modo oscuro no lo use —«cambiar el modo oscuro, no usar naranjo»—, así que acá la banda deja de ser la lámina naranja y pasa a ser la crema con el texto en tinta (el par del tema claro, al revés), y los acentos que señalaban en naranjo —títulos, numerales, enlaces— van en la crema, que sobre el grafito da 9,91:1. El naranjo queda como el acento del tema claro y nada más. El prefijo `html:root` (y no `:root` a secas) es por el mismo motivo que el `:root:root` del tema claro: el theme declara `--fg`/`--bg` con `:root` y con `:root[data-theme="dark"]`, y su hoja carga después de esta, así que en el empate gana la suya. Con `html` delante se le gana el empate en los dos casos, con el atributo y sin él. Los canales (`*-rgb`) se reasignan junto con los colores: el lienzo del mapa toma el color por el nombre de la variable, y si los canales no siguieran al color, el mapa quedaría dibujado del color de la banda (invisible). */ html:root, html:root[data-theme="dark"] { --fg: var(--em-crema); --bg: var(--em-tinta); --fg-rgb: var(--em-crema-rgb); --bg-rgb: var(--em-tinta-rgb); --em-acento: var(--em-crema); --em-acento-texto: var(--em-crema); --em-rotulo: color-mix(in srgb, var(--em-crema) 76%, var(--em-tinta)); --texto-lectura: var(--em-crema); /* El motivo del gráfico, sobre la tinta de la teja: sin naranjo, la terracota y la salvia (la única pareja de la paleta que se lee sobre el grafito sin ser el propio grafito). */ --em-grafico-acento: var(--em-terracota); --em-grafico-secundario: var(--em-salvia); } /* El tema claro, con la paleta de la marca, tiene su propio papel. El theme lo pensó para dos colores —invierte el acento y el fondo— y el claro quedaba con la página entera en naranjo: sobre naranjo el color no señala nada y la lectura larga cansa. Acá el claro es papel crema con tinta grafito y el naranjo queda para señalar, igual que en el oscuro. No se toca el panel lateral: el theme lo pinta con `--fg`, que en claro ya es el grafito, y el mapa de su lienzo se dibuja con `--bg-rgb`, que en claro ya es el naranjo: el mapa se sigue viendo. El prefijo `:root:root` es a propósito: el theme declara lo mismo con `:root[data-theme="light"]` y su hoja carga después de esta, así que en un empate de especificidad gana la suya. Con el `:root` repetido, gana la de acá (y `--texto-lectura` ya no puede quedar en blanco sobre crema). */ :root:root[data-theme="light"] { --bg: var(--em-crema); --em-acento: var(--em-naranjo); --em-acento-texto: var(--em-pizarra); --em-rotulo: var(--em-pizarra); --texto-lectura: var(--em-tinta); --em-grafico-acento: var(--em-naranjo); --em-grafico-secundario: var(--em-terracota); } .post-body p, .post-body li, .post-body dt, .post-body dd, .post-body td, .post-body th, .post-body figcaption, .faq-lista dd { color: var(--texto-lectura, inherit); } /* Los rótulos de la nota —la sección, la fecha, el tiempo de lectura— van con el rótulo: el theme los pinta con el acento al 80 % y a 11 px eso queda en 3,3:1 sobre el grafito, abajo del 4,5:1 que pide la norma. */ .post-meta { color: var(--em-rotulo); } /* Los enlaces de la lectura. En el tema oscuro el theme los pinta con el acento y se distinguen solos; en el claro su acento es la tinta —el mismo color del texto—, así que el enlace quedaba igual que la frase que lo rodea, sólo con el subrayado. Van con el acento de texto del tema (la pizarra, 6,19:1 sobre el crema). Se dejan afuera dos casos: los que ya son un botón (`a.boton`, la portada, que lleva relleno naranjo) y los títulos, que son enlaces pero se leen como títulos y por eso vuelven al color del texto. El botón de llamada de las páginas de servicios se repone en `servicios.css`, que es donde se viste. */ :root[data-theme="light"] .post-body a:not(.boton) { color: var(--em-acento-texto); } /* El hover del theme (`components.css`) invierte los enlaces del contenido a un bloque de tinta sólida (`background: var(--fg); color: var(--bg)`) — un contraste demasiado agresivo para un enlace dentro de la lectura. Acá el hover es liviano: un lavado de fondo salvia (el mismo que la tarjeta del blog, apenas perceptible), el subrayado del color de acento más grueso y el color que se inclina un punto (más tinta en el claro, naranjo en el oscuro). Con eso hay feedback sin que el bloque se vuelva un panel. Va con `body` + la nota repetida para ganar sobre la hoja del theme, que carga después. */ body .post-body a:not(.boton):hover, body .post-body a:not(.boton):focus-visible { background: rgba(var(--em-salvia-rgb), 0.14); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 2px; } /* En el claro el enlace va en pizarra y el hover lo oscurece un punto hacia la tinta (más contraste sobre el crema). En el oscuro el enlace ya es la crema —el color del texto— y el hover se queda ahí: el feedback es el lavado de fondo y el subrayado más grueso. No va al naranjo, que el tema oscuro ya no usa. */ :root:root[data-theme="light"] .post-body a:not(.boton):hover { color: var(--em-tinta); } :root[data-theme="light"] .post-body :is(h1, h2, h3, h4) a { color: inherit; } /* --- el 404 ------------------------------------------------------------------------ */ /* La anotación al margen del 404 («esta dirección no existe», en `layouts/404.html`). El theme la pide en «Rock Salt» desde `fonts.googleapis.com` —un `` que el propio 404 traía—, y la política de seguridad del sitio (`firebase.json`) bloquea ese origen: en producción salía con la letra de reemplazo del sistema, distinta en cada equipo. Va con la tipografía de la marca, en cursiva y con el mismo trazo inclinado y la misma animación, así se sigue leyendo como algo escrito al margen sin depender de un tercero. El `body` delante no es adorno: el theme declara `.lost-scrawl` con la letra de Google y su hoja carga después de esta, así que en un empate de especificidad ganaría la suya. */ body .lost-scrawl { font-family: var(--fuente-marca); font-style: italic; font-weight: 600; letter-spacing: 0.02em; } /* --- los rótulos del theme, sin bajar la opacidad ---------------------------------- */ /* El theme da jerarquía a sus rótulos bajándoles la opacidad al elemento (0,6 a 0,9), y con la paleta de la marca eso los deja bajo el umbral de la norma: el naranjo sobre el grafito ya está en 4,79:1 —con 0,29 de margen—, así que cualquier atenuación lo pasa para abajo. Medido con el auditor de contraste (`tools/` no lo tiene; la medición se hizo con el navegador sobre el sitio construido, en los dos temas): · los numerales del menú (0,6), 2,46:1 · el rótulo del eje (0,7), 2,91:1 · los del H2 (0,6), 2,69:1 · las coordenadas (0,9), 4,08:1 · la fecha del listado (0,7), 4,26:1 · los datos de la nota (0,8), 3,96:1 Acá se devuelve la opacidad a 1 en los rótulos chicos: la jerarquía la siguen dando el tamaño, el grosor y el color. El único que conserva algo de atenuación es el sufijo del logotipo («Eme»), que va a 42 px —donde la norma pide 3:1 y no 4,5:1— y es lo que lo distingue del nombre. El `body` delante es lo que hace ganar estas reglas: las declara el theme y su hoja carga después (ver `docs/REGLAS.md`). Las coordenadas van con `body .field-frame .coords` —una clase más que la regla del theme— porque el theme las declara con dos clases y el `body` solo no alcanzaba. */ body .site-title .tld { opacity: 0.8; } body .menu-list a i, body .axis, body .field-frame .coords, body .post-meta, body .post-body h2 i, body .post-list-date, body .tag-count, body .post-body blockquote { opacity: 1; } /* El texto secundario de las fichas y las listas marcadas: el alfa va en el color y no en la opacidad del elemento. La opacidad arrastra a lo que va adentro —dentro de una ficha, el enlace «conócelo aquí» quedaba en 3,74:1—, y un color translúcido no se le contagia a los hijos. */ :root { --em-texto-suave: color-mix(in srgb, var(--texto-lectura) 85%, transparent); } /* --- el contenido importado -------------------------------------------------------- */ .post-body img { max-width: 100%; height: auto; /* Las imágenes del sitio viejo venían dentro de bloques del constructor: el margen las separa del párrafo. Sin borde —antes tenían `border: 1px solid var(--rule, …)` y el cliente pidió que ninguna imagen del contenido lleve borde. */ margin: 1.5rem 0; } .post-body figure { margin: 1.5rem 0; } .post-body figcaption { font-size: 0.85rem; opacity: 0.75; } /* Las tablas de precios y comparaciones del sitio viejo no traían estilo. */ .post-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; } .post-body th, .post-body td { border: 1px solid var(--rule, rgba(127, 127, 127, 0.35)); padding: 0.5rem 0.7rem; text-align: left; } .post-body th { font-weight: 600; } /* --- formularios (contacto y suscripción) ------------------------------------------ El sitio nuevo es estático: los formularios de Elementor no vuelven a existir, así que se arman con HTML y estas reglas los visten. El endpoint está en `[params.forms]` y apunta a `/lead/` del tracker (`clicktrack`) en Cloud Run; vacío, el formulario avisa que no está conectado en vez de fingir que envía. */ .formulario { display: grid; gap: 1rem; max-width: 34rem; margin: 2rem 0; } .formulario label { display: grid; gap: 0.35rem; font-size: 0.9rem; } .formulario input, .formulario textarea { font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule, rgba(127, 127, 127, 0.5)); border-radius: 2px; padding: 0.6rem 0.7rem; } .formulario input:focus-visible, .formulario textarea:focus-visible { outline: 2px solid var(--fg, currentColor); outline-offset: 1px; } .formulario button { font: inherit; justify-self: start; background: var(--fg, currentColor); color: var(--bg, Canvas); border: 0; border-radius: 2px; padding: 0.6rem 1.2rem; cursor: pointer; } .formulario-aviso { font-size: 0.85rem; opacity: 0.8; } /* ── texto occidental en horizontal ─────────────────────────────────────────────────────── El theme está hecho para japonés y escribe el logotipo, su etiqueta y el aviso de derechos en vertical: caracteres apilados, lectura de arriba abajo. En japonés eso es cómodo; en texto latino la rotación de 90° obliga a ladear la cabeza para leer el nombre de la agencia, que es justamente lo que el visitante tiene que reconocer de inmediato. Van horizontales. Dos detalles que no son obvios: - Los selectores llevan el contenedor (`.logo-group .site-title`, no `.site-title`) porque la hoja del theme se carga **después** de ésta: con la misma especificidad gana la del theme y el cambio no se vería. Dentro de la consulta de pantalla angosta pasa lo mismo, porque ahí el theme vuelve a ponerlos en vertical con `.sidebar .site-title`. - El tamaño también cambia: el del theme está calculado para llenar la altura de la banda —de ahí los `vh` y los `cqh`—, y una línea horizontal con ese tamaño no entra. */ .logo-group .site-title, .logo-group .logo-kicker { writing-mode: horizontal-tb; } /* El grupo alinea por el centro: en vertical ambos bloques arrancaban de arriba (`flex-start`) porque eran columnas de distinta altura, y en horizontal lo que se alinea es la línea base del logotipo con la etiqueta. */ .logo-group { align-items: center; } /* Que el grupo no se salga de la banda. En vertical cada bloque era una columna angosta y no había riesgo; en horizontal el nombre y la etiqueta van uno al lado del otro y, con la banda en 31 % del ancho, la etiqueta se cortaba en el borde (medido: el grupo llegaba a x=426 y la banda termina en x=402). Con el ancho máximo y `flex-wrap`, cuando no caben al lado la etiqueta baja a la línea siguiente. */ .logo-group { flex-wrap: wrap; } /* El ancho máximo que seguía limitaba el grupo en pantalla ancha: estaba pensado para el nombre + la etiqueta del theme, y dejaba el grupo apretado a la izquierda del panel. Como nuestro logo-group es sólo el isotipo, el límite sobra y quita el centrado (ver `body .site-panel .logo-group` abajo): sin él, el `inline-size: 100%` deja que el logo ocupe el panel y el `justify-content: center` lo centre de verdad. */ @media (min-width: 961px) and (min-aspect-ratio: 1/1) { body .logo-group { top: calc(var(--frame-pad) + 16px); transform: none; } } /* En la banda angosta —ancho completo, 304 px de alto— el menú ocupa la derecha y la etiqueta de la marca no cabe con el nombre: se esconde. Es decorativa, y es preferible perderla a que el nombre de la agencia quede cortado o pisado por el menú. */ @media (max-width: 960px), (max-aspect-ratio: 1/1) { body .sidebar .logo-group { /* En la banda compacta el logo y el menú comparten la barra: se le quita más caja para que la columna del menú (a la derecha) tenga dónde; medido a 390 px, la etiqueta más larga («Preguntas frecuentes») entraba en el canto derecho del logo (x 129 contra el dibujo que llegaba a 155). Oculta a 245. */ max-inline-size: calc(100% - 245px); } body .sidebar .logo-kicker { display: none; } } .logo-group .site-title { /* Sobre la anchura y no sobre la altura: en vertical el theme medía la altura de la banda porque el nombre era una columna que la llenaba, y una línea horizontal se mide por lo que ocupa a lo ancho. Con la altura primero (`3.4vh`), una ventana baja dejaba el logotipo en el mínimo del rango y la marca perdía presencia. */ font-size: clamp(24px, 2.9vw, 46px); line-height: 1.1; letter-spacing: -0.02em; } .logo-group .logo-kicker { font-size: clamp(9px, 0.78vw, 12px); letter-spacing: 0.08em; padding: 5px 8px; } /* El aviso de derechos se apoyaba en el borde derecho como columna vertical: el theme lo corría media línea hacia afuera para centrar esa columna, corrimiento que en horizontal lo deja fuera del marco. El selector lleva `body` delante a propósito: el theme pone la escritura vertical en `.copyright` y la hoja del theme se carga después de ésta, así que con la misma especificidad ganaría la del theme. Con el elemento delante (`0,1,1` contra `0,1,0`) gana ésta sin depender del orden. */ body .copyright { writing-mode: horizontal-tb; transform: none; right: var(--frame-pad); } /* El logotipo del sitio es ahora la imagen oficial de la marca (`wp-content/uploads/2024/11/Logo-Eme-y-Eme.png`, el mismo que usa emeyeme.cl), no el nombre armado por el theme. El PNG es una figura 1200×1200 **blanca** con el punto naranjo al centro sobre transparente —el dibujo en «modo negativo», el que prefirió el cliente—, así que sobre la lámina del panel se lee directo, sin tarjeta clara; el `.tld` y el kicker que el theme dibujaba al lado ya no existen en nuestro override de `logo.html`. El theme posicionaba `.logo-group` arriba de la banda (ver emeyeme.css más abajo) con un ancho máximo calculado para el nombre en horizontal. Con la imagen cuadrada ese ancho se mantiene: la tarjeta ocupa el ancho libre de la esquina, sin estirarse. */ .logo-group .site-title.logo-imagen, .logo-group .logo-imagen { writing-mode: horizontal-tb; display: block; max-inline-size: 100%; line-height: 0; } .logo-group .logo-imagen img { display: block; block-size: auto; /* el logotipo centrado en la banda: el enlace ocupa todo el ancho, así que al logo lo centra el margen automático (no un `justify-content`, que no hace nada con el enlace bloque a todo lo ancho) */ margin-inline: auto; } /* Los dos archivos de la marca —claro y oscuro— son el mismo dibujo a la misma escala, sobre un lienzo idéntico con la tinta centrada. Antes venían con recortes distintos: el blanco en un lienzo cuadrado de 1200×1200 con el dibujo chico al medio, y el de tinta recortado al dibujo, así que al cambiar de tema la marca saltaba de sitio. Con la tinta centrada en el mismo lienzo, los dos se ven en el mismo lugar. Un mismo tamaño para los dos: 7,5 rem de ancho dejan el dibujo en 102 px, el mismo porte que tenía en claro. */ .logo-group .logo-imagen .logo-claro { display: block; inline-size: min(7.5rem, 100%); aspect-ratio: 322 / 222; } /* --- el logotipo en el tema oscuro ---------------------------------------------------- */ /* Solo uno de los dos archivos se muestra a la vez: el blanco sobre la banda grafito del tema claro, y el de tinta —grafito con el punto naranjo, el que entregó el cliente— sobre la banda crema del tema oscuro. Antes el claro se escapaba por debajo con una placa de grafito; con el archivo en tinta la placa ya no hace falta. */ .logo-group .logo-imagen .logo-tinta { display: none; inline-size: min(7.5rem, 100%); aspect-ratio: 322 / 222; } :root:root[data-theme="dark"] .logo-group .logo-imagen .logo-claro { display: none; } :root:root[data-theme="dark"] .logo-group .logo-imagen .logo-tinta { display: block; } /* El logotipo va centrado en la banda y el grupo ocupa todo su ancho, para que el centro del isotipo coincida con el del panel: antes quedaba pegado a la esquina izquierda. El theme deja `left: 36px` heredado del posicionamiento del nombre en vertical; arrancar en 0 hace que el `inline-size: 100%` + `justify-content: center` centren sobre el panel entero. El menú arranca más abajo (centrado vertical), así que no se pisan. */ body .site-panel .logo-group { left: 0; inline-size: 100%; justify-content: center; } /* --- el pie de la banda: el contacto --------------------------------------------- */ /* El `margin-block-start: auto` del pie (sobre la flex columna del panel) es lo que empuja este bloque —y la marca que le sigue— al fondo, dejando el aire entre el menú y el pie. Lo lleva el grupo y no el bloque de contacto, que es su único hijo en flujo. */ body .site-panel .sidebar-pie { margin-block-start: auto; } /* El campo de puntos de fondo (`puntos-fondo.html`): la textura del isotipo —el anillo y su punto— repetida a toda la banda, por encima del mapa de contorno. Es lo único que queda de esa textura: el cliente sacó el bloque que iba sobre el contacto («una barra de puntillismo que no quiero que vaya ahí»). Va en la capa de los interactivos (z-index 1) pero sin recibir el puntero —el clic sobre la banda tiene que seguir regenerando el mapa— y antes que ellos en el documento, así que el logo, el menú, el contacto y la firma quedan por encima (con el mismo z-index, gana el que va después). */ body .site-panel .puntos-fondo { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* El lienzo llena la banda: el tamaño en píxeles lo pone el init al dibujar (con el `devicePixelRatio`), no el HTML. */ body .site-panel .puntos-fondo canvas { display: block; inline-size: 100%; block-size: 100%; } /* --- el panel de contacto del sidebar -------------------------------------------- */ /* El cliente pidió el contacto en la banda, donde antes estaban las coordenadas: correo, WhatsApp y redes a un clic desde cualquier página. El bloque es un override de `sidebar.html` y se apoya bajo el menú, estático dentro del panel (no flotante: el panel ya es fijo). Sobre el panel —**crema en el tema oscuro y grafito en el claro**, medido en el navegador— el texto lleva el par de la marca: el color del papel del tema (lo que el theme ya pone en el panel con `color: var(--bg)`) y, en el hover, un realce del tamaño del ícono y del rótulo. Los íconos de las redes son SVG de la marca llenos con `currentColor`, así que heredan lo mismo. */ .sidebar-contacto { /* El contacto cierra el pie de la banda, debajo del gráfico decorativo: el margen automático que lo empujaba al fondo lo lleva ahora el grupo `.sidebar-pie` (arriba). Acá sólo queda el aire por dentro. */ margin-block-start: 0; margin-block-end: 0; padding-inline: clamp(10px, 1.6vw, 18px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.9rem; align-items: start; font-size: 12px; letter-spacing: 0.04em; } /* La firma de la banda, el copyright de la marca: línea centrada al final del panel, justo debajo del bloque de contacto. El `margin-block-start: auto` del pie (arriba) absorbe todo el espacio sobrante de la banda y deja el par pie+marca pegado al fondo; acá sólo el centrado horizontal y el aire entre ellos. El `margin-block-end` deja la firma sin tocar el borde inferior del panel (la rejilla del lienzo dibuja cruces cerca de los bordes y se solaparía con la línea). */ .sidebar-marca { margin-block-start: clamp(12px, 2vh, 20px); margin-inline: clamp(10px, 1.6vw, 18px); margin-block-end: clamp(10px, 1.6vw, 18px); text-align: center; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; padding-inline: clamp(4px, 0.8vw, 10px); } body .site-panel .contour-canvas { /* El lienzo de contorno es el fondo de la banda: dibuja la rejilla y, además, el theme le da un clic para regenerar el mapa (contour.js: `interactive && !lattice`), que es lo que el cliente pide conservar. NO se le pone `pointer-events: none`: antes lo tenía para que no tapara los enlaces del contacto, pero eso mataba el clic de regeneración. Ahora el canvas queda en su capa (z-index por defecto) y son los elementos interactivos encima (logo, menú, contacto, marca) los que se elevan con `z-index: 1` (ver abajo); el clic cae donde el canvas está libre y regenera el mapa, y donde hay enlace el enlace lo recibe. */ z-index: 0; } /* Los elementos interactivos de la banda van sobre el canvas (que regenera el mapa al clic), para poder ser alcanzados: el logo y el menú ya son absolutos del theme —sólo se les suma una capa—, y el bloque de contacto y la marca, que van en flujo, se posicionan relativos para elevarse igual (un elemento en flujo sin posición no respeta el z-index). */ body .site-panel.sidebar .logo-group, body .site-panel.sidebar .menu { z-index: 1; } body .site-panel .sidebar-contacto, body .site-panel .sidebar-marca { position: relative; z-index: 1; } /* El panel de la banda (`site-panel`) pone a todos sus hijos en `position: absolute` menos a este bloque, que quedaba en flujo normal: arriba a la izquierda, justo lo que el cliente reportó. Al hacer el panel una flex columna el bloque deja de ser el "hijo de arrastre" y `margin-top: auto` (lo que hay encima en `.sidebar-contacto`) lo empuja al fondo de la banda. Los demás hijos van en absoluto y no se reordenan —el bloque sigue siendo el único en flujo, ahora empujado hacia abajo. */ body .site-panel.sidebar { display: flex; flex-direction: column; } /* El theme del mapa deja dos rótulos en la banda de las páginas normales —la lectura de coordenadas (`.coords`) y el rótulo del instrumento (`.axis`, ese vertical de la derecha) — que ya no corresponden: el cliente pidió que en ese espacio vaya el contacto. En las páginas normales (marcadas con `.normal` en el partial) se ocultan; el 404 conserva sus textos en español. */ body .site-panel.sidebar.normal .axis, body .site-panel.sidebar.normal .coords { display: none; } /* Las cruces `+` del marco del mapa —los cuatro `.mark` que el theme clava en las esquinas del campo (`marks.html`, dibujados como un `+` de 16 px con `::before`/`::after`)— tampoco van: son el mismo vocabulario de instrumento que los rótulos de arriba, y el cliente los pidió fuera («hay unas cruces estilo + en el canvas, debemos remover eso»). Se ocultan en la banda, que es donde están: la única otra pieza que los usa es el marco de las imágenes del contenido (`.plate`), y este sitio no tiene ninguna imagen con marco —el contenido entra con `` crudo y el post-procesador de `cuerpo.html`, no con el `render-image` del theme—, así que el selector no le quita el marco a nada. Sin las cruces, el campo del mapa queda sólo con el dibujo y el contacto. */ body .site-panel .mark { display: none; } .sidebar-contacto-item { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; /* El realce del hover va detrás del ícono y del rótulo, **no** de la celda entera: como ítem de rejilla el elemento se estiraba a todo el ancho de su columna —195 px medidos en la banda para un contenido de 127— y el fondo del hover quedaba como una barra de lado a lado. Con `justify-self: start` la caja pasa a medir lo que mide su contenido; el relleno le da aire alrededor de la letra y el margen negativo del inicio lo compensa, así el texto sigue arrancando en el borde de la rejilla y no se corre. */ justify-self: start; padding: 0.18rem 0.35rem; margin-inline-start: -0.35rem; border-radius: 3px; } /* El realce es un lavado del propio color de la tinta de la banda —claro sobre la banda oscura del tema claro, oscuro sobre la clara del tema oscuro—, que es lo que pidió el cliente. Va con `color-mix` sobre el color y no con los canales (`rgba()`): en el tema claro `--bg-rgb` **no** acompaña a `--bg` —sigue siendo el naranjo, que es a propósito, porque de ahí toma el color el lienzo del mapa—, así que un `rgba()` habría dado un lavado naranjo sobre el grafito. */ .sidebar-contacto-item:hover, .sidebar-contacto-item:focus-visible { background: color-mix(in srgb, var(--bg) 16%, transparent); } .sidebar-contacto-icon { inline-size: 16px; block-size: 16px; flex: none; } /* --- el menú de la banda ------------------------------------------------------------- */ /* La tipografía del menú se mide en `vw` —el ancho de la ventana— y no en `vh`, que es como la medía el theme. La banda es siempre el 31,4% del ancho, así que el ancho manda: con la medida atada a la altura, en una ventana baja la etiqueta más larga («Preguntas frecuentes») crecía más de lo que mide la banda y, como los ítems van alineados a la derecha, se estiraba hacia la izquierda y se salía del marco: medido a 1000×900 px, el ítem arrancaba en x=0, fuera del panel. El cliente lo describió como que el menú «pierde la responsividad y se alinea a la izquierda». Con esta medida la etiqueta más larga siempre entra: a 1000 px mide 189 px sobre 258 libres. El `overflow-wrap` es la red por si una etiqueta futura no cupiera ni encogida: parte la palabra antes que salirse del marco. Los cortes de 2K y 4K de más abajo suben la medida. */ body .site-panel.sidebar .menu-list a { font-size: clamp(15px, 1.6vw, 30px); overflow-wrap: break-word; } /* Los logotipos de las redes (`.icono-marca`) por defecto van del tamaño de la fuente y alineados a su texto. Las reglas por contexto (la banda, la página de contacto, /nosotros/) los sobrescriben con más especificidad cuando necesitan otro tamaño. */ svg.icono-marca { inline-size: 1.1em; block-size: 1.1em; flex: none; vertical-align: -0.15em; } /* Los íconos de línea (`.icono-linea`): un cuadrado de 1.15 rem, el tamaño que el set tiene en la portada. La medida va acá —y no en `portada.css`, donde vivía— porque el set se usa también fuera de la portada: las tres etapas del método en /servicios/ y la casilla de la barra de cookies. Un SVG con `viewBox` y sin medidas toma el ancho del contenedor, así que donde faltaba la regla los íconos salían del tamaño del bloque: en las etapas del 3C medían 661 px. La medida es en `rem` a propósito: escala con la raíz, que es lo que sube en las pantallas 2K y 4K. */ svg.icono-linea { inline-size: 1.15rem; block-size: 1.15rem; flex: none; } /* Los logotipos de las redes dentro del bloque de contacto de la banda: 16 px y `flex: none` para no perder la línea de base, igual que los demás íconos del bloque. */ .sidebar-contacto-redes .icono-marca { inline-size: 16px; block-size: 16px; flex: none; } .sidebar-contacto-redes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.8rem; margin-block-start: 0.3rem; } /* En la banda angosta —el header superior del móvil: logo y menú en una barra de 304 px de alto, la misma consulta que usa el theme para reorganizar la banda— el bloque de contacto no cabe: puesto en columna se pisaba con el menú (medido a 390 px, los enlaces iban en y=188-260 mientras el menú llega a y=247) y dejaba botones diminutos a medio tocar. El menú ya carga un ítem «Contacto/» (ver `hugo.toml`), así que en esta banda el bloque se oculta y el enlace del menú queda como único contacto: un solo objetivo grande, sin solape. En la banda alta (≥961 px) el contacto a un clic sigue al pie de la banda, sin tocarse. */ @media (max-width: 960px), (max-aspect-ratio: 1/1) { .sidebar-contacto { display: none; } } /* --- el pie de página ----------------------------------------------------------- */ /* El tema fija el copyright en una esquina (`post.css`: `position: fixed`), y el cliente pidió que sea parte del pie y no un elemento flotante que pisa el contenido. El override de `copyright.html` emite un `