/* Theme Name: Matiz Theme URI: https://galeriadeartematiz.cl Author: Galería Matiz Description: Tema propio de Galería de Arte Matiz, Pucón. Obra original de Marcela Matus y Pablo Lopetegui. Sin dependencias, sin build step. Version: 1.1.0 Requires at least: 6.5 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: matiz Tags: e-commerce, custom-menu, translation-ready */ /* ========================================================================== Tipografías. Autohospedadas, subconjunto latin (cubre U+0000-00FF, o sea ñ y todas las tildes). Cero peticiones a Google en tiempo de ejecución. Instrument Serif y Newsreader: OFL, vía Google Fonts. Sligoil: Ariel Martín Pérez / Velvetyne, licencia libre. Ver assets/fonts/SLIGOIL-LICENSE.txt. ========================================================================== */ @font-face{ font-family:'Instrument Serif'; src:url('assets/fonts/instrument-serif-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('assets/fonts/instrument-serif-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Newsreader'; src:url('assets/fonts/newsreader-400.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; } @font-face{ font-family:'Newsreader'; src:url('assets/fonts/newsreader-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Sligoil'; src:url('assets/fonts/sligoil.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } /* ========================================================================== Tokens del sistema de diseño. Valores de DESIGN.md §5, §6 y §7. Los colores viven aquí y no en theme.json porque theme.json no sabe de modos: imprimiría el valor claro y pelearía con el modo oscuro. ========================================================================== */ :root{ /* Sin esta declaración, el «Oscurecer sitios web» de Chrome en Android aplica su oscurecido forzado encima del modo oscuro real del sitio, y ese filtro se come los iconos claros en background-image (el globo de WhatsApp de Joinchat quedaba como un círculo pelado). Declararla le dice al navegador que el sitio ya maneja sus dos modos. Se repite en los cuatro bloques que definen el modo, como todo lo demás. */ color-scheme:light; --muro:#F5F4F1; --papel:#FFFFFF; --tinta:#15181A; --tinta-suave:#5B6260; --acento:#14342B; --acento-tinta:#F1F3EE; --linea:rgba(21,24,26,.12); /* Tres capas: contacto duro, cuerpo y difusión larga. Es lo que despega la obra del muro en vez de dejarla pegada como una calcomanía. */ --sombra:0 1px 2px rgba(21,24,26,.24), 0 18px 34px -14px rgba(21,24,26,.36), 0 44px 84px -34px rgba(21,24,26,.30); /* Oregón teñido: promedio medido de los marcos reales de la galería. */ --oregon-luz:#B6815F; --oregon:#AE7652; --oregon-canto:#9E6B49; --oregon-sombra:#8C5E40; /* Los otros tres acabados. Nunca #000 ni #FFF: con el extremo puro el bisel desaparece y la moldura queda como una silueta plana. Ver DESIGN.md §5, donde consta que éstos se eligieron y el oregón se midió. */ --negro-luz:#3C3A38; --negro:#2E2C2B; --negro-canto:#232120; --negro-sombra:#171615; --blanco-luz:#EFEAE1; --blanco:#E2DCD1; --blanco-canto:#D0C9BC; --blanco-sombra:#B9B1A3; --plateado-luz:#CFD2D4; --plateado:#B7BBBE; --plateado-canto:#A0A5A8; --plateado-sombra:#868C90; /* El marco de una obra sin acabado declarado es de madera, que son 61 de las 83: el respaldo es el caso común, no un color neutro inventado. */ --marco-luz:var(--oregon-luz); --marco:var(--oregon); --marco-canto:var(--oregon-canto); --marco-sombra:var(--oregon-sombra); --titulo:'Instrument Serif',Georgia,serif; --lectura:'Newsreader',Georgia,serif; --dato:'Sligoil',ui-monospace,monospace; --medida:42em; --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px; --e7:88px; --ancho:1180px; } /* Modo oscuro: verde lago. Por ahora manda la preferencia del sistema; el interruptor visible llega en la Fase 3, cuando haya barra donde ponerlo. */ @media (prefers-color-scheme:dark){ :root{ color-scheme:dark; --muro:#243733; --papel:#2C403B; --tinta:#EDEFEA; --tinta-suave:#A8B2AC; --acento:#E9EDE4; --acento-tinta:#16241F; --linea:rgba(237,239,234,.20); --sombra:0 1px 2px rgba(0,0,0,.5), 0 20px 38px -14px rgba(0,0,0,.6), 0 46px 90px -34px rgba(0,0,0,.55); } } /* ========================================================================== Base: retícula, tipografía aplicada, cabecera y pie. ========================================================================== */ *{box-sizing:border-box} body{ margin:0; background:var(--muro); color:var(--tinta); font-family:var(--lectura); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto} /* es sólo un envoltorio para elegir formato: que no cuente en el layout, o el aspect-ratio del marco pasaría a aplicarse sobre él. */ picture{display:contents} a{color:inherit} .contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--e4)} @media (max-width:700px){ .contenedor{padding:0 var(--e3)} } /* Enlace de salto: invisible hasta que el teclado lo enfoca. */ .saltar{position:absolute;left:-9999px} .saltar:focus{left:var(--e2);top:var(--e2);z-index:99;background:var(--papel);padding:var(--e2)} h1,h2,h3{font-family:var(--titulo);font-weight:400;letter-spacing:-.01em;margin:0 0 var(--e3)} h1{font-size:clamp(34px,5vw,56px);line-height:1.05} h2{font-size:clamp(26px,3.5vw,38px);line-height:1.12} h3{font-size:22px} /* La prosa suelta —una entrada, el 404— se queda en 62ch. Dentro de una columna de lectura NO, y ahí está la regla de abajo: `.lectura` ya limita la medida en 42em, y este segundo tope la estrechaba otra vez hasta unos 31em. El resultado eran los Términos y la Política leyéndose en una columna visiblemente más angosta que el resto del sitio, sin que nada lo justificara. */ .prosa p{max-width:62ch} /* Y va justificada, que es como se compone un texto legal. La partición de palabras no es un adorno: sin ella, justificar en español abre ríos de blanco entre palabras largas. `hyphens` necesita saber el idioma, y lo sabe porque declara su `lang`. Sólo los párrafos: justificar una lista deja la última línea de cada punto estirada. */ .lectura .prosa p{ max-width:none; text-align:justify; hyphens:auto; } /* Un enlace nunca se parte con guion. La partición automática cortaba el correo como «contacto@galeriadearte-matiz.cl», y ese guion parece parte de la dirección: quien la copiara a mano la escribiría mal. Sigue pudiendo cambiar de línea, pero por donde no invente un carácter. */ .lectura .prosa a{ hyphens:none; overflow-wrap:anywhere; } /* El encabezado se queda arriba. Es el patrón de todas las galerías que se miraron —Gagosian lo resuelve en 37 px, Artsy en 104— y resuelve lo que aquí fallaba: al bajar por 83 obras, la navegación desaparecía. Compacto a propósito: en una galería la navegación se aparta para dejar ver la obra. Pasó de 108 px a 64, y a 56 en cuanto se hace scroll. */ .cabecera{ position:sticky;top:0;z-index:50; background:var(--muro); border-bottom:1px solid var(--linea); transition:padding .28s ease, box-shadow .28s ease; } .cabecera__fila{ display:flex;align-items:center;gap:var(--e3); min-height:64px; transition:min-height .28s ease; } /* Se condensa al bajar, sin una línea de JavaScript: la animación la conduce el propio scroll (`animation-timeline`). Donde el navegador no la soporte no pasa nada —el encabezado se queda en sus 64 px, que ya funcionan—, así que no hay respaldo que mantener. */ @supports (animation-timeline:scroll()){ @keyframes cabecera-condensar{ to{ min-height:52px } } @keyframes cabecera-logo{ to{ height:32px } } @keyframes cabecera-sombra{ to{ box-shadow:0 1px 12px rgba(21,24,26,.10) } } .cabecera__fila{ animation:cabecera-condensar linear both; animation-timeline:scroll(); animation-range:0 120px; } .marca img{ animation:cabecera-logo linear both; animation-timeline:scroll(); animation-range:0 120px; } .cabecera{ animation:cabecera-sombra linear both; animation-timeline:scroll(); animation-range:0 120px; } } /* La marca: el logo de la galería, que existía desde 2021 y nunca se había declarado. Su marco de doble línea es el mismo gesto que el catálogo dibuja alrededor de cada obra. */ .marca{margin:0;display:flex;align-items:center;line-height:0;flex:0 0 auto} .marca a{text-decoration:none;display:block} .marca img{ display:block;width:auto;height:42px;flex:0 0 auto; transition:height .28s ease; } /* El logo es tinta negra sobre transparente: en modo oscuro hay que darlo vuelta o desaparece contra el muro. Se invierte con el mismo criterio con que el sitio elige sus colores —preferencia del sistema, salvo que el interruptor diga otra cosa—, no con una regla propia que se desincronizaría. */ :root[data-modo="oscuro"] .marca img{ filter:invert(1) } @media (prefers-color-scheme:dark){ :root:not([data-modo="claro"]) .marca img{ filter:invert(1) } } .marca__texto{ font-family:var(--titulo);font-size:24px;line-height:1; } .nav{margin-left:auto} .nav__lista{display:flex;gap:var(--e3);list-style:none;margin:0;padding:0; font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase} .nav__lista a{ text-decoration:none;padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease; } .nav__lista a:hover{ border-bottom-color:var(--tinta-suave) } .nav__lista .current-menu-item > a{border-bottom:2px solid var(--acento)} /* Los ajustes —idioma y modo— no compiten con la tienda: van agrupados, más chicos y en tinta suave. Se distinguen del menú por tamaño y color, no por posición, que es lo que hacía que «ES» pesara lo mismo que «La tienda». */ .ajustes{ display:flex;align-items:center;gap:var(--e2);flex:0 0 auto; padding-left:var(--e3); border-left:1px solid var(--linea); } .ajustes .idioma, .ajustes .modo{ font-family:var(--dato);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--tinta-suave);text-decoration:none; transition:color .2s ease; } .ajustes .modo{ border:0;background:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; padding:0;width:28px;height:28px; } .ajustes .modo:hover,.ajustes .idioma:hover{ color:var(--tinta) } /* Un icono u otro, nunca los dos. Las tres reglas son las tres formas de estar en oscuro, y son las mismas que gobiernan el color del sitio: el interruptor mandado a mano, y la preferencia del sistema cuando nadie ha dicho lo contrario. Escribirlo de otro modo dejaría el icono desincronizado del fondo, que es el peor de los errores posibles en un botón que sólo sirve para anunciar el fondo. */ .modo .icono--sol{ display:none } :root[data-modo="oscuro"] .modo .icono--luna{ display:none } :root[data-modo="oscuro"] .modo .icono--sol{ display:inline-block } @media (prefers-color-scheme:dark){ :root:not([data-modo="claro"]) .modo .icono--luna{ display:none } :root:not([data-modo="claro"]) .modo .icono--sol{ display:inline-block } } .carro{ display:inline-flex;align-items:center;gap:8px; font-family:var(--dato);font-size:12px;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;white-space:nowrap;flex:0 0 auto; padding:6px var(--e2);border:1px solid var(--linea); transition:border-color .2s ease,background .2s ease} .carro:hover{ border-color:var(--tinta);background:var(--papel) } /* La cuenta sólo se imprime cuando hay algo dentro, así que este círculo no aparece nunca vacío. Va en el acento de la galería porque es la única señal del encabezado que informa de un cambio y no de un destino. */ .carro__cuenta{ display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;padding:0 5px; border-radius:9px;background:var(--acento);color:var(--acento-tinta); font-size:10px;letter-spacing:0; } .contenido{padding:var(--e4) 0 var(--e6)} .pie{border-top:1px solid var(--linea);padding:var(--e5) 0;color:var(--tinta-suave)} .pie__fila{display:flex;gap:var(--e4);justify-content:space-between;flex-wrap:wrap} .pie__linea,.pie__lista{font-family:var(--dato);font-size:11px;letter-spacing:.14em; text-transform:uppercase;margin:0} .pie__lista{display:flex;gap:var(--e3);list-style:none;padding:0} .pie__lista a{text-decoration:none} /* ========================================================================== El menú en acordeón. Por encima de 860 px no existe: `.panel` se declara `display:contents`, así que sus dos hijos —el menú y los ajustes— siguen siendo hijos directos de la fila del encabezado y se colocan como si el envoltorio no estuviera. El marcado es uno solo; no hay un menú de escritorio y otro de teléfono que mantener en sintonía. Por debajo, el panel se despliega bajo la barra y el encabezado se queda en una sola fila: logo · carro · botón. 860 px deja al iPad vertical (768) con acordeón y al horizontal (1024) con el menú entero, que es donde cabe. ========================================================================== */ .panel{ display:contents } .menu-boton{ display:none } @media (max-width:860px){ .cabecera__fila{ gap:var(--e2) var(--e3); min-height:0;padding-top:10px;padding-bottom:10px; flex-wrap:nowrap; position:relative; } .marca img{height:30px} .menu-boton{ display:inline-flex;align-items:center;gap:7px;order:4; border:1px solid var(--linea);background:none;cursor:pointer; padding:6px var(--e2); font-family:var(--dato);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--tinta); transition:border-color .2s ease; } .menu-boton:hover{ border-color:var(--tinta) } /* Un icono u otro según el estado, nunca los dos: el botón dice «abrir» cuando está cerrado y «cerrar» cuando está abierto, que es lo que espera quien lo mira. */ .menu-boton .icono--cerrar{ display:none } .menu-boton[aria-expanded="true"] .icono--menu{ display:none } .menu-boton[aria-expanded="true"] .icono--cerrar{ display:inline-block } .carro{ order:3;margin-left:auto;padding:6px 10px } .carro__texto{ display:none } /* El panel cuelga de la barra. `.cabecera` es `sticky`, o sea un elemento posicionado, así que es él quien ancla este absoluto: el panel se despliega justo debajo de la barra y viaja con ella al hacer scroll. */ .panel{ display:flex;flex-direction:column;gap:var(--e3); position:absolute;top:100%;left:0;right:0; background:var(--muro); border-bottom:1px solid var(--linea); box-shadow:0 12px 24px -14px rgba(21,24,26,.35); padding:var(--e3) var(--e4) var(--e4); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease, visibility 0s .22s; } .menu-boton[aria-expanded="true"] ~ .panel{ opacity:1;visibility:visible;transform:none; transition-delay:0s; } /* Dentro del panel el menú se lee en vertical y con el cuerpo de un enlace que se toca con el dedo, no con los 12 px de una barra de escritorio. */ .panel .nav{ margin-left:0;width:100% } .panel .nav__lista{ flex-direction:column;gap:0 } .panel .nav__lista li{ border-bottom:1px solid var(--linea) } .panel .nav__lista a{ display:block;padding:13px 0;font-size:13px; border-bottom:0; } .panel .nav__lista .current-menu-item > a{ border-bottom:0;color:var(--acento); } .panel .ajustes{ border-left:0;padding-left:0;padding-top:var(--e2); justify-content:space-between; } .panel .ajustes .idioma{ font-size:12px } .panel .ajustes .modo{ width:40px;height:40px;margin-left:-8px } .panel .ajustes .modo .icono{ width:20px;height:20px } /* Sin la fila fija de 64 px, la condensación al bajar sobra. */ @supports (animation-timeline:scroll()){ .cabecera__fila,.marca img{animation:none} } } @media (max-width:860px) and (prefers-reduced-motion:reduce){ .panel{ transition:none } } /* ========================================================================== Catálogo a escala real. Un centímetro de obra son --u píxeles, así que un grabado de 25 cm se ve chico al lado de una pintura de 170. La moldura también va a escala: 4 cm de madera. ========================================================================== */ .products{ --u:2.0px; list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;align-items:flex-end; /* El hueco vertical entre filas era de 64 px, y con las cartelas ya alineadas no hace falta tanto para saber dónde acaba una fila. */ gap:var(--e5) var(--e5); } /* La unidad se elige para que la obra más grande del catálogo, de 200 cm, llene el ancho disponible sin desbordarlo. Bajarla más haría que una pintura de 90 cm se viera como una estampilla. */ @media (max-width:900px){ .products{--u:1.8px;gap:var(--e4) var(--e4)} } @media (max-width:600px){ .products{--u:1.6px;gap:var(--e4) var(--e3)} } /* La columna reserva el ancho que necesita la cartela; el marco, dentro, mide los centímetros reales. Así dos grabados chicos no se pisan los textos y la escala sigue siendo verdad. El selector es largo a propósito: la hoja de WooCommerce fija el ancho de cada tarjeta en 22,05% con `.woocommerce ul.products li.product`, y hay que ganarle en especificidad o todas las obras miden lo mismo. */ .woocommerce ul.products li.product.pieza, ul.products li.product.pieza{ flex:0 0 auto; float:none; width:max(150px, calc(var(--ancho-cm) * var(--u))); max-width:100%; margin:0; } .pieza__enlace{display:block;text-decoration:none} .pieza .marco{ width:calc(var(--ancho-cm) * var(--u)); max-width:100%; } /* Las dos medidas del marco, en centímetros de verdad. Todo lo demás sale de ellas: el ancho del borde, el de la ranura y la proporción del interior, aquí y en la ficha. Son copia de galeria_marco_geometria() (inc/obra.php), que es donde mandan. El valor de partida es el del pino oregón, 1,5 cm, porque una obra sin acabado declarado es de oregón —61 de las 83—, igual que en el color. Las tres molduras pintadas lo suben a 2 más abajo. */ .marco, .woocommerce-product-gallery{ --moldura-cm:1.5; --ranura-cm:0; --borde-cm:calc(var(--moldura-cm) + var(--ranura-cm)); } /* El marco: bordes CSS, que ingletean solos a 45° en las esquinas como uno armado en el taller. Cuatro tonos del acabado dan la luz desde arriba. La sombra interior es el rebaje donde apoya la tela. */ .marco{ border-style:solid; border-width:calc(var(--moldura-cm) * var(--u)); border-top-color:var(--marco-luz); border-left-color:var(--marco); border-right-color:var(--marco-canto); border-bottom-color:var(--marco-sombra); background:var(--papel); box-shadow:var(--sombra); } /* Cómo está construida la obra, que es lo que decide su volumen. Una pintura es tela sobre bastidor metida dentro del cajón: se hunde 2 cm y además queda suelta, sin llegar al canto de la moldura, con 1 cm de ranura en sombra alrededor. Un grabado es papel con passepartout, va casi a ras y no flota. De frente eso no se ve como profundidad sino como sombra, así que son dos sombras y no una. Las cifras viven en galeria_marco_geometria(). */ .marco--tela{ --ranura-cm:1; box-shadow:var(--sombra), inset 0 5px 11px -3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.3); } .marco--papel{ /* Sin ranura: el papel no flota, así que su borde es la moldura sola. */ box-shadow:var(--sombra), inset 0 2px 5px -2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.22); } /* La ranura, a escala como todo lo demás: el relleno la abre y el fondo oscuro es lo que se ve por ella. Casi negro y no negro del todo, por lo mismo que ningún acabado usa #000. */ .pieza .marco--tela{ padding:calc(var(--ranura-cm) * var(--u)); background:#100E0D; background:color-mix(in srgb, var(--marco-sombra) 22%, #000); } /* Ver la obra en tu pared. Es el único botón con acento del sistema: DESIGN.md §5 lo reserva para esto y sólo para esto. */ .ar{ display:flex;align-items:center;gap:var(--e2); margin:var(--e4) 0;padding:var(--e2) var(--e3); background:var(--acento);color:var(--acento-tinta); text-decoration:none; } .ar img{width:44px;height:44px;object-fit:cover;display:block;flex:none} .ar__texto{ font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase; } .ar__aviso{ font-family:var(--dato);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--tinta-suave);margin:var(--e3) 0;max-width:34em;line-height:1.7; } /* Cada acabado redefine los cuatro tonos y su ancho, y nada más: el inglete y el rebaje son los mismos para todos. Las tres molduras pintadas miden 2 cm y la de oregón 1,5 (usuario, 2026-08-24). No es capricho de dibujo: el oregón va casi siempre en pintura, que además lleva 1 cm de ranura por dentro, así que a igual moldura su borde sumaba 3 cm contra los 2 del grabado enmarcado y se veía notoriamente más grueso al lado. */ .marco--negro{ --moldura-cm:2; --marco-luz:var(--negro-luz); --marco:var(--negro); --marco-canto:var(--negro-canto); --marco-sombra:var(--negro-sombra); } .marco--blanco{ --moldura-cm:2; --marco-luz:var(--blanco-luz); --marco:var(--blanco); --marco-canto:var(--blanco-canto); --marco-sombra:var(--blanco-sombra); } .marco--plateado{ --moldura-cm:2; --marco-luz:var(--plateado-luz); --marco:var(--plateado); --marco-canto:var(--plateado-canto); --marco-sombra:var(--plateado-sombra); } /* Sin marco es sin marco: ni moldura ni rebaje. La sombra exterior se queda, porque es lo que despega la obra del muro. */ .marco--sin-marco{ --moldura-cm:0; --ranura-cm:0; border-width:0; padding:0; background:var(--papel); box-shadow:var(--sombra); } /* El margen inferior es de WooCommerce, que le pone 1em a las imágenes de producto: dentro del marco se veía como una franja blanca bajo la obra. */ .woocommerce ul.products li.product .marco img, .marco img{ display:block;width:100%;height:auto;margin:0; /* La proporción va en la imagen y es la del INTERIOR: lo declarado menos la moldura y la ranura por lado (--borde-cm, que pone la clase de construcción). Dos cosas a la vez: corrige la deformación de las obras alargadas —la foto es la obra sola, no la medida con marco— y evita el fallo de Safari donde height:100% no resuelve contra una altura derivada de aspect-ratio y la foto se derrama por debajo del marco. El max() protege a una obra minúscula de una proporción negativa. */ aspect-ratio:calc(max(1, var(--ancho-cm) - 2 * var(--borde-cm, 0))) / calc(max(1, var(--alto-cm) - 2 * var(--borde-cm, 0))); object-fit:cover; } .cartela{margin-top:var(--e2)} .cartela__titulo{ font-family:var(--titulo);font-style:italic;font-size:19px;line-height:1.2; text-decoration:none;display:block; } /* Los datos ocupan una caja de tres líneas aunque digan menos. Es lo que ordena el catálogo. Las obras se alinean por abajo, así que la altura de la cartela decide dónde arranca cada obra: con «25 × 25 CM · MIXTA SOBRE TELA · 2026» en dos líneas y «38 × 38 CM · XILOGRAFÍA COLOR · 2026» en tres, dos vecinas de la misma fila empezaban su texto a alturas distintas y la fila se veía desbaratada. Tres es el máximo real del catálogo. De paso, los precios caen alineados, que es justo lo que DESIGN.md pide de la monoespaciada: que 83 obras se lean como una tabla comparable. */ .cartela__datos{ font-family:var(--dato);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--tinta-suave);margin:5px 0 0; line-height:1.5;min-height:calc(3 * 1.5em); } .cartela__precio{font-family:var(--titulo);font-size:19px;margin:3px 0 0} .cartela__precio del{color:var(--tinta-suave);margin-right:8px;font-size:16px;text-decoration-thickness:1px} .cartela__precio ins{text-decoration:none} /* La pastilla habla con la tinta plena y el trazo de 1,5 del sistema: es el único dato de la cartela cuando la obra está vendida, porque el precio ya no se imprime. El mismo par borde-color que .ficha__vendida, para que las dos superficies digan lo mismo con la misma voz. */ .cartela__vendida{ display:inline-block;margin:6px 0 0; font-family:var(--dato);font-size:11px;letter-spacing:.2em;text-transform:uppercase; padding:4px 10px;border:1.5px solid var(--tinta);color:var(--tinta); } /* ========================================================================== Ficha de obra. Precio con el mismo cuerpo que el título: los dos datos que el visitante vino a buscar, antes del primer scroll. ========================================================================== */ .single-product .product_title{ font-family:var(--titulo);font-style:italic; font-size:clamp(34px,4.4vw,46px);line-height:1.05;margin:0; } .ficha__cartela{ font-family:var(--dato);font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--tinta-suave);margin:16px 0 0; } .single-product .price{font-family:var(--titulo);font-size:clamp(34px,4.4vw,46px);line-height:1;margin:22px 0 0} .single-product .price del{font-size:.7em;color:var(--tinta-suave);margin-right:12px;text-decoration-thickness:1px} .single-product .price ins{text-decoration:none} .ficha__tabla{width:100%;border-collapse:collapse;margin-top:40px;font-family:var(--dato);font-size:12px} .ficha__tabla td{padding:11px 0;border-bottom:1px solid var(--linea);letter-spacing:.06em} .ficha__tabla td:first-child{color:var(--tinta-suave);text-transform:uppercase;width:44%} .ficha__notas{margin-top:var(--e3);color:var(--tinta-suave);font-size:15px} .ficha__notas p{margin:0 0 var(--e1)} .ficha__vendida{ font-family:var(--dato);font-size:14px;letter-spacing:.16em;text-transform:uppercase; border:1.5px solid var(--tinta);padding:19px 24px;text-align:center;margin:34px 0 0; } .single-product .woocommerce-product-gallery__image img{box-shadow:var(--sombra)} /* La obra en la ficha lleva el mismo marco que en el catálogo. Este ancho fijo es el respaldo, y sólo se ve en dos casos: en una obra que no declara sus medidas y en un navegador sin unidades de contenedor. La moldura de verdad —1,5 cm en oregón, 2 en las tres pintadas— se dibuja más abajo, en `.marco--a-escala`. */ .single-product .woocommerce-product-gallery__image{ border-style:solid; border-width:clamp(12px,2vw,24px); border-top-color:var(--marco-luz); border-left-color:var(--marco); border-right-color:var(--marco-canto); border-bottom-color:var(--marco-sombra); background:var(--papel); box-shadow:var(--sombra), inset 0 3px 7px -2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.28); } /* El acabado y la construcción llegan al envoltorio de la galería por filtro, y las variables de color bajan solas al hijo porque las propiedades personalizadas se heredan. Aquí la ranura no va a escala, igual que la moldura: la ficha enseña la obra grande siempre, y un centímetro de verdad sobre 200 cm no se vería. */ .woocommerce-product-gallery.marco--tela .woocommerce-product-gallery__image{ padding:clamp(3px,.5vw,7px); background:#100E0D; background:color-mix(in srgb, var(--marco-sombra) 22%, #000); box-shadow:var(--sombra), inset 0 5px 11px -3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.3); } .woocommerce-product-gallery.marco--sin-marco .woocommerce-product-gallery__image{ border-width:0; padding:0; box-shadow:var(--sombra); } /* La moldura de la ficha, a escala: sus centímetros son centímetros de verdad —1,5 el pino oregón, 2 las tres pintadas, según galeria_marco_geometria()—. Antes iba con un ancho fijo, y el argumento escrito aquí decía que escalarla la haría desaparecer en un grabado chico. Era al revés: en la ficha todas las obras se pintan del mismo ancho, así que un 2 cm sobre 25 es una moldura ancha y sobre 195 es una línea. Lo que hacía el ancho fijo era engordarla en las obras grandes —24 px sobre 563 son 8,3 cm en «Sin titulo»—, que es justo lo que se veía. Los centímetros pintados los da `100cqw`, el ancho del contenedor, y por eso la galería se declara contenedor; los declarados llegan en `--ancho-cm`, que pone `galeria_ficha_escala_marco()`. El suelo de 6 px es la única mentira, y está acotada: la ficha pinta todas las obras del mismo ancho, así que la misma moldura son 32 px en un grabado de 35 cm y 4 en una pintura de 195, y a 4 px una moldura de oregón sobre un cuadro de ocres deja de verse (comprobado en «Seres Nativos», 2026-08-24). Sólo entra en las obras de más de 141 cm, y ahí dibuja 1,8 cm en vez de 1,5. En el catálogo no hace falta y no está: allí cada obra se pinta de su tamaño, así que una moldura fina sobre una obra grande es la verdad. Un navegador sin unidades de contenedor descarta estas dos declaraciones enteras y se queda con el ancho fijo de arriba, que es el respaldo. */ .woocommerce-product-gallery.marco--a-escala{ container-type:inline-size } .marco--a-escala .woocommerce-product-gallery__image{ /* El techo de 10cqw no se ve nunca en una obra bien medida: el caso más extremo del catálogo —moldura pintada de 2 cm sobre la obra más angosta, 25— da 8. Existe para el error de tipeo: unas medidas de «2 x 3» en vez de «200 x 300» darían un borde de 75cqw por lado y una ficha destruida; con el techo, la obra se ve con la moldura gorda y la página sobrevive hasta que el aviso del panel haga corregir la medida. */ border-width:clamp(6px, calc(var(--moldura-cm) / var(--ancho-cm) * 100cqw), 10cqw); } /* La ranura del marco flotante, con la misma regla de tres. Sólo en tela: el papel del grabado no flota. Una obra sin marco no llega nunca aquí, pero ojo con por qué: no es la especificidad —`.marco--sin-marco` y esta regla empatan en 0-3-0 para el padding, y ésta va después, así que ganaría—. Lo que lo impide es galeria_obra_construccion() (inc/obra.php), que devuelve 'sin-marco' en cuanto el acabado lo es, de modo que `marco--tela` y `marco--sin-marco` no coexisten. Si algún día la construcción y el acabado dejan de ir juntos, hay que subirle la especificidad a la regla de sin-marco. */ .marco--a-escala.marco--tela .woocommerce-product-gallery__image{ /* El mismo techo que el borde, por la misma medida mal escrita. */ padding:clamp(1px, calc(var(--ranura-cm) / var(--ancho-cm) * 100cqw), 5cqw); } .single-product .woocommerce-product-gallery__image img{display:block;margin:0} /* El botón de WhatsApp (Joinchat) llegaba con el verde de fábrica de la marca, hsl(142 70% 49%), que grita en medio de la paleta. Joinchat pinta todo desde sus variables, así que basta redefinirlas al acento del sitio: el botón sigue siendo inconfundiblemente WhatsApp por el icono, no por el chillido. */ html .joinchat{ --color:#14342B !important; --dark:#0E241E !important; --hover:#1E4A3D !important; } /* Y los dos que el plugin trae escritos a fuego, fuera de sus variables. background-color y no el atajo background: el dibujo del teléfono es una imagen de fondo en el mismo elemento, y el atajo se la lleva por delante. */ html .joinchat .joinchat__button{ background-color:#14342B } html .joinchat .joinchat__button:hover{ background-color:#1E4A3D } /* Los avisos de WooCommerce —carro vacío, cupón aplicado, errores— llegaban con su franja azul y su fondo celeste de fábrica, que no existen en la paleta. Un aviso es una línea del sistema hablando: papel, línea y tinta, y el icono en la tinta suave. */ .woocommerce-info, .woocommerce-message, .woocommerce-error{ background:var(--papel); color:var(--tinta); border-top:2px solid var(--tinta); font-family:var(--lectura); } .woocommerce-info::before, .woocommerce-message::before{ color:var(--tinta-suave); } .woocommerce-error{border-top-color:#8C2F2F} .woocommerce-error::before{color:#8C2F2F} /* En el teléfono WooCommerce esconde la miniatura al apilar la tabla, y el carro quedaba sin la obra: una lista de texto. La obra vuelve, con su sombra, y sin la etiqueta «Producto:» que el modo apilado le pega delante. */ @media (max-width:768px){ .woocommerce-page table.cart td.product-thumbnail{ display:block !important; text-align:left !important; } .woocommerce-page table.cart td.product-thumbnail::before{ content:none } .woocommerce-page table.cart td.product-thumbnail img{ width:96px } } /* ========================================================================== El carro. Sólo CSS: el flujo de WooCommerce no se toca (regla dura). La tabla habla con la voz del sitio: datos en la fuente de datos, líneas con --linea, y la obra con su sombra, que es lo que la despega del muro en todo el resto del catálogo. ========================================================================== */ .woocommerce-cart .shop_table{ border:1px solid var(--linea); border-radius:0; } .woocommerce-cart .shop_table th, .woocommerce-cart .shop_table td, .woocommerce-cart .cart_totals th, .woocommerce-cart .cart_totals td{ border-color:var(--linea); } .woocommerce-cart .shop_table thead th{ font-family:var(--dato);font-size:11px;font-weight:400; letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave); padding:14px 12px; } .woocommerce-cart td.product-thumbnail img{ width:72px;height:auto;box-shadow:var(--sombra); } .woocommerce-cart td.product-name a{ font-family:var(--titulo);font-style:italic;font-size:19px; text-decoration:none; } .woocommerce-cart td.product-price, .woocommerce-cart td.product-subtotal, .woocommerce-cart .cart_totals td{ font-family:var(--dato);font-size:14px; } /* La equis de quitar, sin el círculo rojo de WooCommerce: una equis de la tinta del sitio, que se afirma al pasar por encima. */ .woocommerce-cart a.remove{ color:var(--tinta-suave) !important; font-weight:400;border-radius:0; } .woocommerce-cart a.remove:hover{ color:var(--tinta) !important; background:transparent; } /* El cupón: campo a la altura del botón y con el borde del sistema. */ .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce-cart .coupon .input-text{ width:280px;max-width:100%;padding:15px 14px; border:1.5px solid var(--linea);border-radius:0; font-family:var(--dato);font-size:13px; background:var(--papel);color:var(--tinta); } /* «Actualizar carrito» deshabilitado se veía como un botón roto, en un verde sucio. Deshabilitado es el mismo botón con menos voz, y no otro color. */ .woocommerce-cart button.button:disabled, .woocommerce-cart button.button:disabled[disabled], .woocommerce-cart .button.disabled{ background:var(--acento);color:var(--acento-tinta); opacity:.35; } .woocommerce-cart .cart_totals h2{ font-family:var(--titulo);font-weight:400;font-size:27px; } /* Los rótulos de la caja de totales y del calculador de envío, en la misma voz que los encabezados de la tabla: el dato pequeño en mayúsculas. Antes cada pieza hablaba con una letra distinta —rótulos en serifa negrita, cifras en mono, formulario en serifa— y la caja se leía como tres sitios. */ .woocommerce-cart .cart_totals th, .woocommerce-cart .shipping-calculator-form label{ font-family:var(--dato);font-size:11px;font-weight:400; letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave); } .woocommerce-cart .woocommerce-shipping-destination{ font-family:var(--lectura); } .woocommerce-cart .shipping-calculator-button{ font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase; } .woocommerce-cart .woocommerce-shipping-calculator .input-text, .woocommerce-cart .woocommerce-shipping-calculator select{ border:1.5px solid var(--linea);border-radius:0; padding:12px 14px;font-family:var(--dato);font-size:13px; background:var(--papel);color:var(--tinta); } /* Botones dentro del sistema: el de compra es el único relleno de la página. */ .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button{ background:var(--acento);color:var(--acento-tinta); font-family:var(--dato);font-size:13px;letter-spacing:.16em;text-transform:uppercase; font-weight:400;border-radius:0;border:1.5px solid var(--acento); padding:17px 26px;line-height:1; } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover{background:transparent;color:var(--tinta);border-color:var(--tinta)} .woocommerce .quantity input{ font-family:var(--dato);border:1px solid var(--linea);border-radius:0; background:var(--papel);color:var(--tinta);padding:14px 8px; } /* Existencias y avisos, en voz baja. */ .woocommerce .stock, .woocommerce div.product .stock{ font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--tinta-suave);margin-top:var(--e2); } /* WooCommerce maqueta la ficha con float: la imagen a la izquierda y el resumen a la derecha. Los flotantes no los limpia nadie, así que la sección de obras relacionadas se encabalgaba encima. Se reemplaza por una grilla. */ .woocommerce div.product{ display:grid; grid-template-columns:1.15fr 1fr; gap:var(--e6) var(--e6); align-items:start; } .woocommerce div.product .woocommerce-product-gallery, .woocommerce div.product div.images{float:none;width:auto;margin:0} .woocommerce div.product div.summary{float:none;width:auto;margin:0} .woocommerce div.product .related, .woocommerce div.product .up-sells, .woocommerce div.product .woocommerce-tabs{grid-column:1 / -1} .woocommerce div.product .related h2{font-family:var(--titulo);font-weight:400} @media (max-width:820px){ .woocommerce div.product{grid-template-columns:1fr;gap:var(--e5)} } /* ========================================================================== Modo explícito. El atributo manda sobre la preferencia del sistema, así que quien elige, elige. Se repiten los valores en vez de reutilizar la media query porque una media query no se puede activar desde un atributo. ========================================================================== */ :root[data-modo="claro"]{ color-scheme:light; --muro:#F5F4F1; --papel:#FFFFFF; --tinta:#15181A; --tinta-suave:#5B6260; --acento:#14342B; --acento-tinta:#F1F3EE; --linea:rgba(21,24,26,.12); --sombra:0 1px 2px rgba(21,24,26,.24), 0 18px 34px -14px rgba(21,24,26,.36), 0 44px 84px -34px rgba(21,24,26,.30); } :root[data-modo="oscuro"]{ color-scheme:dark; --muro:#243733; --papel:#2C403B; --tinta:#EDEFEA; --tinta-suave:#A8B2AC; --acento:#E9EDE4; --acento-tinta:#16241F; --linea:rgba(237,239,234,.20); --sombra:0 1px 2px rgba(0,0,0,.5), 0 20px 38px -14px rgba(0,0,0,.6), 0 46px 90px -34px rgba(0,0,0,.55); } .modo{ background:none;border:1px solid var(--linea);color:var(--tinta);cursor:pointer; font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase; padding:8px 12px; } .modo:hover{border-color:var(--tinta)} /* La insignia de oferta de WooCommerce era un círculo amarillo que no está en la paleta y competía con la obra. No se restila: se quita. El precio tachado dice lo mismo, más bajito y sin inventar un color. */ .woocommerce span.onsale, .woocommerce ul.products li.product .onsale{display:none} /* La lupa del zoom de WooCommerce, sin su fondo blanco de plugin. */ .woocommerce div.product .woocommerce-product-gallery__trigger{ background:var(--papel);border-radius:0;box-shadow:none;border:1px solid var(--linea); } /* ========================================================================== La portada. Primer viewport como afiche y no como documento (DESIGN.md §7). ========================================================================== */ /* 48 px arriba y abajo, no 88. Con 88 el hueco entre dos bloques era de 176 px: más que el alto de la franja entera, y el visitante llegaba a «Destacadas del mes» tras dos pantallazos de nada. El aire separaba tanto que dejaba de leerse como una página y pasaba a leerse como varias. 96 px siguen siendo generosos —esto es una galería, no un listado— y caben dos secciones donde antes cabía una. */ .portada > section, .portada > nav{ padding:var(--e5) 0 } .portada > section:first-child{ padding-top:var(--e4) } .afiche__titulo{ font-family:var(--titulo); font-size:clamp(44px,7vw,86px); line-height:1.02; margin:0; font-weight:400; } .afiche__titulo em{ font-style:italic } .afiche__arraigo{margin-top:var(--e2); font-family:var(--dato); font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--tinta-suave); margin:var(--e4) 0 0; } .seccion__cabeza{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:var(--e2);margin-bottom:var(--e5); } .seccion__titulo{ font-family:var(--titulo);font-weight:400; font-size:clamp(30px,4vw,44px);line-height:1.1;margin:0; } .seccion__mas{ font-family:var(--dato);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--tinta-suave);text-decoration:none;border-bottom:1px solid currentColor; padding-bottom:2px; } .seccion__mas:hover{ color:var(--tinta) } /* La tira de destacadas: se desliza en horizontal en vez de envolver. Sin JavaScript y sin rotación automática —DESIGN.md §8 permite una sola animación en todo el sitio, y no va a ser un carrusel—. Cada obra conserva su ancho en centímetros, así que la escala real sobrevive al deslizamiento. */ .products--tira{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; padding:0 var(--e4) var(--e3); scrollbar-width:thin; overscroll-behavior-x:contain; } .products--tira > li{ scroll-snap-align:center } @media (min-width:1181px){ .products--tira{ padding-left:max(var(--e4), calc((100vw - var(--ancho)) / 2 + var(--e4))) } } /* La franja de familias: el índice del catálogo, entre dos líneas. Hereda el aire de la vieja franja de argumentos, que ocupaba el mismo sitio, pero ahora cada celda lleva a alguna parte, así que se comporta como enlace: el nombre se subraya al pasar por encima y la celda entera es la zona pulsable, no sólo las palabras. */ .familias{ border-block:1px solid color-mix(in srgb, var(--tinta) 12%, transparent) } .familias__lista{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3); list-style:none;margin:0;padding:0; } .familias__enlace{ display:block;text-decoration:none;color:inherit; padding:var(--e1) 0; } .familias__enlace strong{ display:block;font-family:var(--titulo);font-size:21px;font-weight:400; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s ease; width:fit-content; } .familias__enlace:hover strong{ border-bottom-color:var(--tinta) } .familias__enlace span{ display:block;margin-top:5px; font-family:var(--dato);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--tinta-suave); } @media (max-width:700px){ /* En fila también en el teléfono: apiladas dejaban de ser una franja-índice y se volvían tres párrafos (pedido del usuario, 2026-08-19). Se encoge la letra en vez de romper la fila. */ .familias__lista{ gap:var(--e2) } .familias__enlace strong{ font-size:16px } .familias__enlace span{ font-size:10px;letter-spacing:.1em } } .promesa__texto{ font-family:var(--lectura);font-size:clamp(19px,2.2vw,25px);line-height:1.55; max-width:26em;margin:0 0 var(--e3); } .promesa__boton{ display:inline-block;margin-top:var(--e2); padding:var(--e2) var(--e4); background:var(--acento);color:var(--acento-tinta);text-decoration:none; font-family:var(--dato);font-size:12px;letter-spacing:.18em;text-transform:uppercase; } .premontaje__texto{ font-family:var(--lectura);font-size:17px;line-height:1.65; max-width:34em;margin:var(--e3) 0 0;color:var(--tinta-suave); } /* ========================================================================== Páginas de texto: Quiénes somos, Contacto, Términos. ========================================================================== */ .pagina > section{ padding:var(--e5) 0 } /* La columna de lectura limita la medida del texto, no el ancho del contenedor. Antes estrechaba el contenedor entero y volvía a centrarlo, así que en «¿Quiénes somos?» el título arrancaba en el píxel 82 y su propio párrafo en el 351: dos páginas distintas, una debajo de otra. Ahora todo el sitio comparte un solo borde izquierdo y sólo la línea deja de crecer. */ .lectura{ max-width:var(--ancho) } /* 42em y no 34. Treinta y cuatro es la medida de un libro, y en una página donde al lado hay una foto de la sala funcionaba como un corte arbitrario: el texto terminaba antes de la mitad de la imagen que lo acompañaba. Cuarenta y dos siguen siendo unos 80 caracteres por línea —el techo de lo cómodo— y acercan el borde del texto al de todo lo demás sin volverlo ilegible. */ .lectura > *{ max-width:var(--medida) } .lectura p{ font-family:var(--lectura);font-size:17px;line-height:1.65; margin:0 0 var(--e3); } .lectura .seccion__titulo{ margin-bottom:var(--e3) } /* Las dos fotos de «¿Quiénes somos?» se quedan dentro del contenedor. Iban a sangre, de borde a borde de la ventana, y dejaban la página con tres anchos distintos: la foto en 1280, los títulos en 1198 y el texto en 578. Con una foto que mide más del doble que el párrafo que la explica, la página no se lee como una sola cosa. Ahora hay un solo borde, a los dos lados. */ .cubierta{ margin:0 auto } /* Las fotos miden lo mismo que el texto, no lo que mide el contenedor. El envoltorio sigue siendo `.contenedor`, así que el borde izquierdo es el mismo de todo el sitio; lo que se limita es la imagen. Antes la foto llegaba a 1198 y el párrafo que la explicaba se quedaba en 796, y esos 400 px de diferencia eran justo lo que se veía descuadrado. La de la sala midió un tiempo 30em contra los 42 del texto, por ser una fotografía de contexto y no una obra; el usuario la igualó a la medida de lectura el 2026-08-19, porque el escalón entre foto y párrafo se leía como error y no como jerarquía. */ .cubierta img{ display:block;width:100%;max-width:var(--medida); height:clamp(200px,30vh,340px);object-fit:cover; box-shadow:var(--sombra); } .sala{ margin:var(--e5) auto 0 } .sala img{ display:block;width:100%;max-width:var(--medida);height:auto;box-shadow:var(--sombra) } /* Dos citas, no una. La de Matta hablaba sola en medio de mucho blanco; con la de Klee al lado se leen como un diálogo —los dos dicen lo mismo por caminos distintos— y el bloque llena el ancho de la página en vez de dejar un hueco a su derecha. */ .citas{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e5);align-items:start; max-width:var(--medida); } .cita{ margin:0; border-left:2px solid var(--acento);padding-left:var(--e3); } .cita p{ margin:0 } .cita cite{ display:block;margin-top:var(--e2);font-style:normal; font-family:var(--dato);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--tinta-suave); } @media (max-width:700px){ .citas{ grid-template-columns:1fr;gap:var(--e4) } } .cita p{ font-family:var(--titulo);font-style:italic;font-weight:400; font-size:clamp(21px,2.6vw,30px);line-height:1.35;margin:0; } .cita cite{ display:block;margin-top:var(--e2);font-style:normal; font-family:var(--dato);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--tinta-suave); } .bloque-familia{ margin-top:var(--e6) } .familia__titulo{ font-family:var(--dato);font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--tinta-suave);font-weight:400;margin:0 0 var(--e4); } .artistas{ list-style:none;margin:var(--e5) 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--e6) var(--e5); } .artista__nombre{ font-family:var(--titulo);font-weight:400;font-style:italic; font-size:30px;line-height:1.1;margin:0 0 var(--e2); } .artista__datos{ font-family:var(--dato);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--tinta-suave);margin:0 0 var(--e2);line-height:1.9; } .artista__estudios{ font-family:var(--lectura);font-size:15px;line-height:1.6; margin:0 0 var(--e3);max-width:26em; } /* Enlaces legales del pie. Van siempre, no por un menú que alguien puede olvidarse de crear: un sitio que cobra necesita que se puedan encontrar. */ .pie__legal{ display:flex;flex-wrap:wrap;gap:var(--e3) } .pie__legal a{ font-family:var(--dato);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--tinta-suave);text-decoration:none; } .pie__legal a:hover{ color:var(--tinta);text-decoration:underline } /* Contacto: los datos a un lado, el formulario al otro. */ .contacto__reja{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--e6) var(--e7);align-items:start; } .contacto__dato{ font-family:var(--lectura);font-size:17px;line-height:1.6;margin:0 0 var(--e5); } .contacto__dato--suelto{ max-width:28em;color:var(--tinta-suave) } .contacto__dato a{ color:inherit } .formulario__campo{ margin:0 0 var(--e4) } .formulario__campo label{ display:block;font-family:var(--dato);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--tinta-suave);margin-bottom:var(--e1); } .formulario input[type="text"], .formulario input[type="email"], .formulario textarea{ width:100%;padding:var(--e2); font-family:var(--lectura);font-size:17px; background:var(--papel);color:var(--tinta); border:1px solid color-mix(in srgb, var(--tinta) 22%, transparent); border-radius:0; } .formulario input:focus-visible, .formulario textarea:focus-visible{ outline:2px solid var(--acento);outline-offset:2px } .formulario .description{ display:block;margin-top:var(--e1); font-family:var(--lectura);font-size:14px;line-height:1.5;color:var(--tinta-suave); } .formulario button{ padding:var(--e2) var(--e4);border:0;cursor:pointer; background:var(--acento);color:var(--acento-tinta); font-family:var(--dato);font-size:12px;letter-spacing:.18em;text-transform:uppercase; } .formulario__legal{ font-family:var(--lectura);font-size:14px;line-height:1.5; color:var(--tinta-suave);max-width:32em;margin:var(--e3) 0 0; } /* La trampa para robots: fuera de la pantalla, no display:none, que algunos detectan. Una persona nunca la ve ni la tabula. */ .formulario__trampa{ position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; } .aviso{ font-family:var(--lectura);font-size:16px;line-height:1.5; padding:var(--e2) var(--e3);margin:0 0 var(--e4);max-width:34em; border-left:3px solid var(--acento); } .aviso--mal{ border-left-color:#B4551F } /* Un encabezado fijo se come el destino de cada anclaje: al pulsar «Nuestro Trabajo» el título quedaba escondido detrás de la barra. Esto reserva su alto, y de paso hace que el salto sea un desplazamiento y no un corte. */ html{ scroll-padding-top:80px;scroll-behavior:smooth } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } .cabecera,.cabecera__fila,.marca img{ transition:none;animation:none } } /* El interruptor de idioma, junto al de claro y oscuro. */ .idiomas{ display:flex;gap:var(--e1);align-items:center } .idiomas a,.idiomas__actual{ font-family:var(--dato);font-size:11px;letter-spacing:.16em; padding:2px 4px;text-decoration:none; } .idiomas a{ color:var(--tinta-suave) } .idiomas a:hover{ color:var(--tinta) } .idiomas__actual{ color:var(--tinta);border-bottom:1px solid currentColor } /* ========================================================================== La barra de orden del catálogo. Llegaba tal como la deja WooCommerce: un