/* ========================================================================== piéce · SISTEMA TIPOGRÁFICO Y DE COLOR -------------------------------------------------------------------------- Este archivo manda. Es la única fuente de verdad para tamaño de texto, familia y color en todo el tema. Reemplaza a tres bloques de CSS inline que vivían en functions.php (Home, Header y "Diseño General") y a los ~100 font-size sueltos que había escritos a mano en site-custom.css y header-custom.css. Esos ya no existen: los dos archivos ahora consumen los tokens de acá. -------------------------------------------------------------------------- POR QUÉ NO ALCANZA CON CARGARLO ÚLTIMO Se intentó primero imponer el sistema por orden de carga (prioridad 10001 en el hook, después de los 9999 de header-custom y site-custom). No funciona, y conviene entender por qué antes de volver a intentarlo: el orden de la cascada solo desempata entre selectores de IGUAL especificidad. `.solicitud-renta__resumen td { font-size: 0.85rem }` le gana a `.t-dato` siempre, llegue cuando llegue. Un sistema no se impone por llegar último; se impone porque el resto lo consume. De ahí la forma de este archivo: Capas 1 y 2 los tokens (:root). No pintan nada por sí solos. Capa 3 los roles (.t-*). Se ponen como clase en el HTML. Capa 4 la base del sitio: body, títulos, botones, badges. Y de ahí también la regla de trabajo: al escribir CSS nuevo en este tema se usa un token o un rol, NUNCA un valor suelto. Un `font-size: 0.85rem` escrito a mano vuelve a sacar ese texto del sistema. -------------------------------------------------------------------------- CÓMO SE CAMBIA La escala entera y las cinco familias se cambian acá abajo, en :root. No hay controles en el Personalizador: se sacaron a propósito para que nadie pise el sistema desde el admin sin darse cuenta. Si cambiás una familia, actualizá también el enqueue de Google Fonts en functions.php (`mitienda_child_enqueue_tipografia`): declarar la fuente acá no la descarga, solo dice cuál usar si está disponible. ========================================================================== */ /* ========================================================================== CAPA 1 — ESCALA DE TAMAÑOS 11 pasos, al 92% de la escala de referencia. OJO con los dos primeros pasos: a este factor quedan en 11.04px y 11.96px, por debajo del piso de 12px que el sistema se puso a sí mismo. Son los badges y los eyebrows. Si algún día se ven cortos, el arreglo es subir la escala global (todos los pasos a la vez), no parchear un valor suelto acá: la proporción entre los once pasos es lo que hace que esto sea un sistema y no una lista de números. ========================================================================== */ :root { --ft-2xs: 0.6900rem; /* 11.04px badges */ --ft-xs: 0.7475rem; /* 11.96px rótulos, eyebrows */ --ft-sm: 0.8050rem; /* 12.88px meta, notas, leyendas */ --ft-md: 0.8625rem; /* 13.80px texto de apoyo */ --ft-base: 0.9200rem; /* 14.72px cuerpo */ --ft-lg: 1.0350rem; /* 16.56px cuerpo destacado, título de tarjeta */ --ft-xl: 1.2075rem; /* 19.32px título de bloque, precio */ --ft-2xl: 1.3800rem; /* 22.08px título de sección */ --ft-3xl: 1.7250rem; /* 27.60px título de producto */ --ft-4xl: 2.1850rem; /* 34.96px título de página */ --ft-display: clamp(2.3000rem, 5vw, 3.2200rem); /* hero */ /* ====================================================================== CAPA 2 — FAMILIAS Cinco roles, no cinco fuentes: display y rótulo comparten Nanum Myeongjo, título y cuerpo comparten Times New Roman. Están separados igual porque son decisiones distintas y pueden divergir sin tocar nada más. Nanum Myeongjo y Albert Sans se bajan de Google (ver el enqueue en functions.php). Times New Roman NO: es una fuente del sistema, está en Windows y macOS y no hay nada que descargar. En Android y Linux normalmente no está, y ahí cae al siguiente de la lista. ====================================================================== */ --fuente-display: 'Nanum Myeongjo', Georgia, serif; --fuente-titulo: 'Times New Roman', Georgia, serif; --fuente-cuerpo: 'Times New Roman', -apple-system, BlinkMacSystemFont, sans-serif; --fuente-rotulo: 'Nanum Myeongjo', 'Courier New', monospace; --fuente-dato: 'Albert Sans', 'Courier New', monospace; /* ====================================================================== COLOR — tokens semánticos Mismo criterio que la tipografía: se nombran por FUNCIÓN, no por tono. "superficie" y no "negro": si mañana la paleta se aclara, el nombre sigue siendo cierto. ====================================================================== */ --c-fondo: #090909; /* fondo de la página */ --c-superficie: #000000; /* tarjetas, paneles, cajas */ --c-borde: #606060; /* divisiones y contornos */ --c-texto: #f4f3f0; /* texto principal */ --c-tenue: #9a9a9a; /* meta, leyendas, texto secundario */ --c-acento: #f1f1f7; /* estado activo, botón principal */ --c-acento-texto: #000000; /* texto encima del acento */ /* Superficie de los campos donde se escribe. Es token propio y no --c-superficie porque una caja donde se escribe tiene que leerse COMO HUECO sobre la página: un pelo más clara que --c-fondo, no más oscura. Con #000 (superficie) el campo desaparecía contra el fondo y solo lo dibujaba el borde. */ --c-campo: #141414; /* relleno de input, textarea y select */ --c-campo-borde: #4a4a4a; /* contorno en reposo */ /* Badges de estado. Son tokens propios y no derivados, porque su contraste es una decisión de producto: Vendido y No disponible comunican restricción, "Venta o renta" comunica una opción de más. Si se derivaran de la paleta, esa diferencia se perdería al cambiar de tono. */ --c-vendido-fondo: #f1f1f7; --c-vendido-texto: #090909; /* Los dos de "No disponible" vienen corregidos respecto del prototipo. Allá el badge era oscuro y por eso su texto (#e6e6e6) y su borde (#c0c0c0) eran claros. Acá Vendido se invirtió a fondo claro y No disponible deriva de él, así que un texto casi blanco quedaba en contraste 1.10: invisible. Se dan vuelta los dos. El medidor del prototipo no lo detectó porque no mide este par. */ --c-nodisp-texto: #242424; /* era #e6e6e6 */ --c-nodisp-borde: #6a6a72; /* era #c0c0c0; 4.86 sobre el badge */ --c-mixta-fondo: #f2f2f2; --c-mixta-texto: #1d1d1f; /* Avisos de WooCommerce ("Se ha añadido al carrito", errores de checkout, cupones). Son tokens propios por el mismo motivo que los badges: el verde y el rojo no son tonos de la paleta, son señales. Están desaturados a propósito para que no griten sobre el fondo oscuro; el peso lo lleva la barra izquierda, no el relleno. Info comparte el acento porque no comunica estado, solo contexto. */ --c-aviso-fondo: rgba(255, 255, 255, 0.06); --c-aviso-ok: #9fe0a4; /* barra de "mensaje" */ --c-aviso-error: #e8a0a0; /* barra de "error" */ --c-aviso-error-texto: #f0c8c8; /* 9.6 sobre --c-fondo */ --c-aviso-info: var(--c-acento); /* ---------------------------------------------------------------------- Puente con el CSS que ya existía. Estas variables las inventaron header-custom.css y site-custom.css antes de que hubiera sistema, y están usadas en varios lugares. En vez de buscarlas y reemplazarlas una por una, se redefinen acá en términos de la escala: siguen funcionando donde están y ya no son números sueltos. --mitienda-tab-font venía de un clamp() fluido calculado en PHP, que se eliminó junto con el resto del CSS inline. ---------------------------------------------------------------------- */ --mitienda-tab-font: var(--ft-xs); --news-titulo: var(--ft-lg); --news-texto: var(--ft-md); --news-boton: var(--ft-xs); } /* ========================================================================== CAPA 3 — ROLES Cada rol = familia + tamaño + peso + alto de línea + interletrado. Se ponen como clase en el HTML (plantillas, shortcodes, clases PHP). Sobre los pesos: Nanum Myeongjo trae 400/700/800 y Times New Roman trae 400/700. Los 500 y 600 de acá abajo no existen en esas familias, así que el navegador los sintetiza (engorda el trazo por software) o los redondea. Se dejan escritos porque describen la intención del rol y valen apenas se cambie a una familia con más pesos. ========================================================================== */ /* --- Títulos --- */ .t-display { font-family: var(--fuente-display); font-size: var(--ft-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; } .t-titulo-pagina { font-family: var(--fuente-titulo); font-size: var(--ft-4xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; } .t-titulo-producto { font-family: var(--fuente-titulo); font-size: var(--ft-3xl); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .t-titulo-seccion { font-family: var(--fuente-titulo); font-size: var(--ft-2xl); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } .t-titulo-bloque { font-family: var(--fuente-titulo); font-size: var(--ft-xl); font-weight: 500; line-height: 1.3; } .t-titulo-tarjeta { font-family: var(--fuente-titulo); font-size: var(--ft-lg); font-weight: 500; line-height: 1.35; } /* --- Texto corrido --- */ .t-cuerpo-destacado { font-family: var(--fuente-cuerpo); font-size: var(--ft-lg); font-weight: 400; line-height: 1.6; } .t-cuerpo { font-family: var(--fuente-cuerpo); font-size: var(--ft-base); font-weight: 400; line-height: 1.65; } .t-apoyo { font-family: var(--fuente-cuerpo); font-size: var(--ft-md); font-weight: 400; line-height: 1.6; } .t-meta { font-family: var(--fuente-cuerpo); font-size: var(--ft-sm); font-weight: 400; line-height: 1.55; color: var(--c-tenue); } /* --- Rótulos: el sello del archivo (mayúsculas + interletrado abierto) --- */ .t-rotulo { font-family: var(--fuente-rotulo); font-size: var(--ft-xs); font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; } .t-rotulo-micro { font-family: var(--fuente-rotulo); font-size: var(--ft-2xs); font-weight: 500; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; } /* --- Categorías de la barra lateral del catálogo --- Nanum Myeongjo en 700, el peso bold real de la familia: está en el enqueue de Google Fonts (wght@400;700;800), así que no hay síntesis por software como en los 500/600 de los roles de arriba. Los 15px son un valor pedido a mano y quedan fuera de la escala de la Capa 1 — el paso más cercano es --ft-base (14.72px). Se deja el número literal porque el pedido era ese; si algún día se quiere volver al sistema, el reemplazo es var(--ft-base). El color es el del estado en reposo. El de hover se define donde vive la interacción (style.css, .catalogo-categorias a:hover). */ .categorias { font-family: var(--fuente-display); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--c-acento); } /* --- Datos y precios --- */ .t-precio-destacado { font-family: var(--fuente-dato); font-size: var(--ft-xl); font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .t-precio { font-family: var(--fuente-dato); font-size: var(--ft-base); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; } .t-dato { font-family: var(--fuente-dato); font-size: var(--ft-md); font-weight: 400; line-height: 1.5; font-variant-numeric: tabular-nums; } /* --- Interfaz --- */ .t-boton { font-family: var(--fuente-rotulo); font-size: var(--ft-sm); font-weight: 500; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; } .t-icono { font-family: var(--fuente-cuerpo); font-size: var(--ft-xl); line-height: 1; } /* ========================================================================== CAPA 4 — APLICACIÓN AL TEMA -------------------------------------------------------------------------- Los roles de la Capa 3 hay que ponerlos a mano en el HTML. Esta capa es la que hace que el sistema gobierne lo que YA está escrito, sin tener que tocar cada plantilla: le da a cada elemento de HTML su rol por defecto. Va apuntada a `body` y a los elementos, nunca a `*`: heredar es lo que hace que un párrafo dentro de un bloque nuevo salga bien sin que nadie le ponga una clase. La especificidad es baja a propósito. Cuando site-custom.css dice algo más concreto, gana site-custom — que es lo correcto: esto es el piso del sistema, no un martillo. ========================================================================== */ body { font-family: var(--fuente-cuerpo); font-size: var(--ft-base); font-weight: 400; line-height: 1.65; color: var(--c-texto); /* El fondo de la página venía del Personalizador (Colores > Fondo). Para que este token lo gobierne hubo que quitarle a WordPress el soporte de custom-background en functions.php: si no, imprime `body.custom-background` en el , que es más específico que esta regla y se imprime después. */ background-color: var(--c-fondo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Los títulos toman la familia de título y el paso que les corresponde por jerarquía. Un

suelto en una página nueva ya sale bien. */ h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulo); font-weight: 500; color: var(--c-texto); } h1 { font-size: var(--ft-4xl); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; } h2 { font-size: var(--ft-2xl); line-height: 1.25; letter-spacing: -0.01em; } h3 { font-size: var(--ft-xl); line-height: 1.3; } h4 { font-size: var(--ft-lg); line-height: 1.35; } h5 { font-size: var(--ft-base); line-height: 1.4; } h6 { font-size: var(--ft-sm); line-height: 1.45; } /* Enlaces. Antes esto lo ponía el bloque "Diseño General" en functions.php para tres zonas sueltas (Contacto, footer, Destacados); acá vale para todo el sitio. */ a { color: var(--c-acento); } /* Los campos de formulario no heredan la fuente del documento: el navegador les impone la suya. Sin esta regla, todo formulario del sitio (renta, contacto, checkout) queda fuera del sistema. */ input, select, textarea, button { font-family: inherit; font-size: var(--ft-base); color: inherit; } /* Los botones son rótulo, no cuerpo: es lo que les da el aire de expediente. Alcanza también a los de WooCommerce. */ button, .button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { font-family: var(--fuente-rotulo); font-size: var(--ft-sm); font-weight: 500; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; } /* Precios de WooCommerce: dato tabular, para que las columnas de números queden alineadas sin depender de qué dígitos toquen. */ .woocommerce .price, .woocommerce-Price-amount { font-family: var(--fuente-dato); font-weight: 500; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Portada Estas cuatro reglas reemplazan lo que ponía el bloque inline de "Home - Diseño". El título del hero pasa de 40px fijos elegidos en el Personalizador al rol display, que es fluido: en un teléfono se achica solo, y está en la misma escala que el resto del sitio en vez de ser un número aparte. -------------------------------------------------------------------------- */ .home-hero__content h1 { font-family: var(--fuente-display); font-size: var(--ft-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; } .home-hero__content p { font-family: var(--fuente-cuerpo); font-size: var(--ft-lg); line-height: 1.6; } /* El fondo de las secciones era un selector de color del Personalizador, o sea que la portada podía quedar en un negro distinto al del resto del sitio. Ahora es el mismo token y no puede desincronizarse. */ .home-about, .home-destacados { background-color: var(--c-fondo); } .home-about h2, .home-destacados h2 { font-size: var(--ft-2xl); } /* -------------------------------------------------------------------------- Badges de estado Los tres casos del catálogo. Acá va solo tipografía y color: la forma (posición, padding, borde, radio) sigue viviendo en site-custom.css, que es donde corresponde. CAMBIO VISIBLE: hasta ahora Vendido y No disponible eran oscuros sobre la foto (#1d1d1f a mano en site-custom.css). Con esta paleta pasan a ser claros. Los dos siguen distinguiéndose por la forma y no por el color: Vendido sólido y opaco, porque cierra el tema; No disponible traslúcido y punteado, porque es de paso e invita a volver. -------------------------------------------------------------------------- */ .mitienda-badge-estado, .mitienda-badge-vendido, .runway-card__badge { font-family: var(--fuente-rotulo); font-size: var(--ft-2xs); font-weight: 500; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; background: var(--c-vendido-fondo); color: var(--c-vendido-texto); } /* No disponible: traslúcido y punteado. Es de paso, invita a volver. */ .mitienda-badge-estado--no-disponible { background: color-mix(in srgb, var(--c-vendido-fondo) 72%, transparent); color: var(--c-nodisp-texto); border-color: var(--c-nodisp-borde); } /* Venta o renta: el único claro. Es una opción de más, no una limitación. */ .mitienda-badge-estado--mixta { background: color-mix(in srgb, var(--c-mixta-fondo) 92%, transparent); color: var(--c-mixta-texto); } /* ========================================================================== CAMPOS DE FORMULARIO — superficie y texto -------------------------------------------------------------------------- EL BUG QUE ARREGLA ESTO: en la solicitud de renta y en el checkout las barras donde se escribe salían blancas y lo tipeado era invisible. La causa eran dos reglas de distintos archivos que juntas se anulaban: 1. Storefront (tema padre) le pone a todo campo un relleno claro (`input[type=text] { background-color: #f2f2f2 }`) junto con su texto oscuro. Se escribió para un sitio claro, que es lo que era Storefront de fábrica. 2. La regla `input, select, textarea, button { color: inherit }` de más arriba en este archivo — que existe para que los campos no queden fuera de la escala tipográfica — pisa ESE color y solo ese: el texto pasa a heredar --c-texto (#f4f3f0), el relleno sigue siendo el claro de Storefront. Casi blanco sobre casi blanco. O sea que no faltaba una regla en un formulario: faltaba el piso para todos. Por eso esto va acá y no en site-custom.css ni en la sección de la solicitud de renta de style.css: es el equivalente para los campos de lo que `body` hace con la página. POR QUÉ LA LISTA DE SELECTORES ES TAN LARGA. Cada selector de una misma regla se evalúa con su propia especificidad, así que la lista no repite estilos: repite pesos. El bloque de `input[type=...]` empata con Storefront y gana por orden (este archivo se encola en prioridad 10001, el padre en 10); los de `.woocommerce form .form-row` y los de `.wc-block-components-*` están porque el checkout clásico y el de bloques traen selectores compuestos que le ganarían a un `input` suelto. Ninguno necesita !important. ========================================================================== */ /* Le avisa al navegador que el sitio es oscuro. Sin esto, los widgets que dibuja él y que ningún CSS alcanza —el calendario de los campos de fecha, la lista desplegada de un ` SIN atributo type. El navegador lo trata como texto, pero `input[type="text"]` NO lo selecciona -- el selector mira el atributo, no el comportamiento. Un campo así se queda con el blanco de fábrica del navegador, y como `input { color: inherit }` de más arriba le da el texto casi blanco del sitio, resulta un campo blanco con letra blanca. El tema no genera ninguno, pero cualquier plugin que imprima un formulario sí puede. 2. Tipos que no estaban en la lista al escribirla. POR QUÉ `:where()` Y NO UNA CADENA DE `:not()`. Diez `:not()` encadenados suman especificidad y este bloque le terminaría ganando a reglas puntuales que sí quieren otro aspecto -- el campo del monto en el filtro de precio, los del editor de lienzo, los de la solicitud de renta. `:where()` vale CERO en especificidad, así que esto queda como piso: aplica donde no hay nada más y pierde contra cualquier regla específica. Es exactamente lo que tiene que hacer un valor por defecto. Quedan afuera los controles que el navegador dibuja a su manera y que se romperían si se les fuerza relleno: botones, casillas, radios, deslizadores, selector de color, archivo y ocultos. */ input:where( :not([type="button"], [type="submit"], [type="reset"], [type="image"]), :not([type="checkbox"], [type="radio"], [type="range"]), :not([type="color"], [type="file"], [type="hidden"]) ), textarea, select { background-color: var(--c-campo); color: var(--c-texto); } /* El cursor de escritura. Cuando no se declara, el navegador lo dibuja del color del texto -- pero solo si llegó a calcular ese color; con `color-scheme` de por medio hay casos en que lo pinta oscuro sobre el campo oscuro y la barra que titila se vuelve invisible. Se declara junto al resto para que no dependa de eso. */ input, textarea, select { caret-color: var(--c-texto); } /* La lista desplegada de un cerrado: sin esto, el desplegable se abre claro con el texto claro heredado. */ option { background-color: var(--c-campo); color: var(--c-texto); } /* El texto de ayuda del campo vacío. Sin regla propia lo pinta el navegador con su gris para fondo claro, que sobre --c-campo queda en contraste 2 y no se lee. --c-tenue da 5.4 sobre el campo: es texto secundario, tiene que verse menos que lo tipeado, no menos que nada. */ ::placeholder { color: var(--c-tenue); opacity: 1; /* Firefox se lo baja a 0.54 por su cuenta */ } /* EL FOCO ES EL AGUJERO MÁS GRANDE, Y EL MENOS OBVIO. -------------------------------------------------------------------- Storefront no pinta los campos solo en reposo: tiene además una regla propia para :focus que les pone `background-color: #fff`. Y esa regla le gana a la nuestra de más arriba por especificidad -- `input[type="text"]:focus` pesa más que `input[type="text"]`, porque la pseudoclase cuenta. El resultado es el que se veía: el campo arranca bien, y en el momento exacto en que se hace clic para escribir se vuelve blanco. El texto sigue siendo claro, así que lo tipeado desaparece justo cuando hay algo que leer. Es de los peores casos posibles para detectar, porque mirando el formulario quieto no se ve nada raro. Por eso acá no alcanza con el contorno: hay que volver a declarar el relleno y el color. La especificidad empata con la de Storefront y esta hoja se encola después (prioridad 10001 contra 10 del padre), así que gana. */ input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus, .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .wc-block-components-text-input input:focus, .wc-block-components-textarea:focus { background-color: var(--c-campo); color: var(--c-texto); caret-color: var(--c-texto); border-color: var(--c-acento); outline: 1px solid var(--c-acento); outline-offset: -1px; } /* AUTOCOMPLETADO. Es el otro camino por el que vuelve el campo blanco, y el más difícil de ver en pruebas: no aparece en un formulario recién abierto, aparece cuando el navegador rellena email o teléfono con lo guardado —o sea, casi siempre en el checkout de alguien que ya compró. Chrome pinta ese relleno con un amarillo/blanco propio que ninguna declaración de background alcanza; los dos únicos ganchos son la sombra interior gigante y -webkit-text-fill-color. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--c-campo) inset; box-shadow: 0 0 0 1000px var(--c-campo) inset; -webkit-text-fill-color: var(--c-texto); caret-color: var(--c-texto); transition: background-color 9999s ease-in-out 0s; } /* Casillas y radios: los dibuja el navegador y con `color-scheme: dark` ya salen oscuros, pero el tilde queda en el azul del sistema. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--c-acento); } /* El desplegable de país/estado del checkout no es un