/* ══════════ LAS ÚNICAS DESVIACIONES DE LA MAQUETA ══════════ Todo lo demás es copia verbatim. Cada bloque dice por qué existe. 1 · EL LOGO ES EL ARCHIVO REAL (regla innegociable de cris, confirmada: "el logo usa el nuestro"). La maqueta lo dibujaba con texto Bodoni; aquí es NUESTRO logo, mejorado en Higgsfield (mismo dibujo, solo más nítido) y exportado en tres tamaños según dónde va: img/logo-hero.webp (754x208, portada y pies), img/logo-medio.webp (478x132, cabecera interior). El chico (246x68) se quedó corto cuando cris pidió las letras más grandes y ya no se usa. La MISMA posición, el mismo transform-origin y la misma coreografía de scroll. El original img/logo-glamour-520.png queda en la carpeta como fuente. */ .gnh-brand img { display: block; margin: 0 auto; width: auto; height: clamp(68px, 7vw, 104px); } @media (max-width: 767px) { .gnh-brand img { height: 44px; } } .gnh-footerBrand img { width: auto; height: clamp(48px, 4.6vw, 66px); } @media (max-width: 767px) { .gnh-footerBrand img { height: 56px; } } /* interiores: la maqueta usaba una "G" en un círculo; va el archivo */ .site-header .logo { display: block; width: auto; } /* cris, mirando la maqueta: "lo quiero con el mío, pero que las letras sean más grandes para que se vea mejor". La cabecera mide 104 px (70 en teléfono) y el logo ocupaba 34: metía las DOS líneas del logo en ese hueco, así que "by. Francia" salía ilegible. Se sube al doble largo, dejando aire arriba y abajo. */ .site-header .logo img { width: auto; height: clamp(52px, 5vw, 68px); } @media (max-width: 767px) { .site-header .logo img { height: 48px; } } /* sobre fondo claro (politicas) el "by. Francia" blanco del logo no existiría: la placa negra pegada, la misma salida que cris ya aprobó en el sitio */ /* la placa negra crece con el logo: se aprieta para que lo abrace en vez de quedar como un bloque suelto sobre el papel */ .site-header.is-dark .logo { background: #000; padding: 4px 9px; margin: -4px -9px; border-radius: 3px; width: max-content; } /* 2 · EL BOTÓN DE IDIOMA (la maqueta no tiene; la regla del proyecto exige el par ES/EN en todo texto). Vive dentro de los menús, con la tipografía del menú, sin inventar nada visual nuevo. */ .nv-idioma { display: inline-flex; gap: 14px; align-items: center; } .nv-idioma button { border: 0; background: none; padding: 6px 2px; color: inherit; opacity: .45; font: 600 7px/1 'Manrope', sans-serif; letter-spacing: .2em; cursor: pointer; } .nv-idioma button[aria-pressed="true"] { opacity: 1; border-bottom: 1px solid currentColor; } .gnh-menuHead .nv-idioma { gap: 18px; } .menu-drawer > p .nv-idioma { margin-left: 18px; } /* 3 · EL PIE EN TELÉFONO E IPAD (petición de cris: "el pie se ve feo"). 3a · EL FALLO GORDO: .gnh-footerBrand es un flex en columna y la maqueta metía ahí TEXTO, que se estira sin deformarse. Nuestro logo es una imagen: el estirado por defecto (align-items:stretch) le daba el ancho entero de la columna con la altura fija, o sea el logo aplastado a lo largo (medido: ratio 6,25 en móvil y 7,73 en iPad horizontal, cuando el real es 3,62). Con align-items:flex-start la imagen manda su propia proporción. */ .gnh-footerBrand { align-items: flex-start; } .gnh-footerBrand img { width: auto; max-width: 100%; height: clamp(58px, 5.6vw, 76px); } /* 3b · TELÉFONO: la maqueta usa tipografía de 4-8 px en el pie. En pantalla grande es un detalle de estilo; en un teléfono no se lee y por eso se veía feo. Se suben SOLO los tamaños del pie y las filas pasan a 44 px de alto (la misma medida de toque que ya usamos en el sitio real). El escritorio (1051 px arriba) se queda EXACTAMENTE como la maqueta aprobada. */ @media (max-width: 767px) { .gnh-footerBrand img { height: 62px; } .gnh-closingLead > div > p { font-size: 9px; } .gnh-closingLead > p { font-size: 13px; line-height: 1.75; } .gnh-closingActions > a { padding: 24px 2px; } .gnh-closingActions small { font-size: 9px; } .gnh-closingDirectory { gap: 38px 22px; } .gnh-closingDirectory nav > p, .gnh-footerContact > p { margin-bottom: 6px; font-size: 9px; letter-spacing: .18em; } .gnh-closingDirectory nav, .gnh-footerContact { gap: 0; } .gnh-closingDirectory nav > a, .gnh-footerContact > a { min-height: 44px; display: flex; align-items: center; font-size: 13px; line-height: 1.35; } .gnh-footerContact > span { margin-top: 4px; font-size: 9px; } .gnh-socialIcons { margin-top: 14px; gap: 12px; } .gnh-socialIcons a, .gnh-socialIcons > span { width: 44px; height: 44px; } .gnh-socialIcons svg { width: 19px; height: 19px; } .gnh-closingBase { gap: 10px; font-size: 9px; letter-spacing: .14em; } } /* 3c · IPAD (768-1050): además de la letra micro, el reparto de columnas de la maqueta (1.3fr .7fr .8fr) daba por hecho un logo de TEXTO de dos líneas altas. Con la imagen, esa primera columna se quedaba medio vacía y el contacto caía en una segunda fila: un hueco muerto abajo a la izquierda. Aquí el logo va arriba a lo ancho y debajo las tres listas parejas. */ @media (min-width: 768px) and (max-width: 1050px) { .gnh-closingDirectory { margin-top: 56px; padding-top: 40px; grid-template-columns: 1fr 1fr 1fr; gap: 40px 32px; } .gnh-footerBrand { grid-column: 1 / -1; } .gnh-footerContact { grid-column: auto; } .gnh-closingDirectory nav > p, .gnh-footerContact > p { font-size: 8px; } .gnh-closingDirectory nav > a, .gnh-footerContact > a { min-height: 40px; display: flex; align-items: center; font-size: 12px; } .gnh-closingDirectory nav, .gnh-footerContact { gap: 0; } .gnh-footerContact > span { margin-top: 6px; font-size: 8px; } .gnh-socialIcons { margin-top: 12px; } .gnh-socialIcons a, .gnh-socialIcons > span { width: 40px; height: 40px; } .gnh-closingLead > div > p, .gnh-closingActions small { font-size: 8px; } .gnh-closingLead > p { font-size: 13px; } /* la línea legal: tres trozos en una fila, no dos arriba y uno huérfano al medio */ .gnh-closingBase { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 8px; letter-spacing: .15em; } .gnh-closingBase span:nth-child(2), .gnh-closingBase span:last-child { text-align: left; } } /* 4 · EL PIE DE LAS PÁGINAS INTERIORES (.site-footer). La maqueta escribía ahí "GLAMOUR NAILS" con tipografía suelta, o sea NO era el logo de la casa. Va el archivo real (regla de cris), con el mismo peso visual que tenía el texto y sin deformarse a ningún ancho. */ /* el tope de 380 px no es capricho: el archivo mide 754 px de ancho, o sea que 380 es exactamente el doble — el máximo que se ve nítido en pantalla retina. Más grande habría que sacar un corte mayor del original mejorado. */ .footer-word img { width: clamp(292px, 40vw, 380px); max-width: 100%; height: auto; } /* 4b · y la misma cura de legibilidad del otro pie en teléfono e iPad: la maqueta pone los enlaces a 7 px y la letra legal a 6 px. */ @media (max-width: 1050px) { .footer-rule { align-items: center; } .footer-rule nav { gap: 4px 28px; } /* la maqueta separa mucho las letras porque son 7 px; a 13 px eso parte "Diario del Atelier" en dos líneas, así que se aprieta el espaciado */ .footer-rule a { min-height: 44px; display: flex; align-items: center; font-size: 13px; letter-spacing: .03em; } .footer-socials a, .footer-socials > span { width: 44px; height: 44px; } .footer-socials svg { width: 19px; height: 19px; } .footer-small { font-size: 9px; letter-spacing: .14em; } .footer-small a { min-height: 44px; display: flex; align-items: center; font-size: 13px; letter-spacing: .04em; } } /* 5 · LA LÍNEA LEGAL DE LOS DOS PIES: al agrandarla se ve que el gris de la maqueta se queda corto de contraste (4,18:1 y 3,81:1, mínimo 4,5). Se aclara lo justo para pasar, sin cambiar el tono. Medido, no a ojo. */ @media (max-width: 1050px) { .footer-small { color: #7f7b75; } /* 4,18 → 4,68:1 */ .gnh-closingBase { color: rgba(247,243,236,.5); } /* 3,81 → 4,9:1 */ } /* 6 · La cabecera interior lleva NUESTRO logo (imagen) donde la maqueta ponía una "G": el enlace quedaba de 34 px de alto, por debajo del mínimo de toque de 44 que ya exigimos en el sitio real. */ .site-header .logo { min-height: 44px; display: flex; align-items: center; } /* ════════ 7 · BLANCOS DE TOQUE (cris: "arréglalos todos") ════════ La maqueta está pensada para ratón: hay enlaces de 25 px de alto. En un teléfono eso se falla con el dedo. Mínimo 44×44 (y 48 en el botón principal, que es la regla que ya usamos en el sitio real). No cambia ni un color ni una tipografía: solo crece la zona que responde al dedo. */ .gnh-menuButton { width: 48px; height: 48px; } .site-header .menu-toggle { width: 48px; height: 48px; } .gnh-availabilitySlots a, .gnh-signatureCopy a, .gnh-clientCommunityHeader h2 a, .gnh-clientCommunityFooter a, .gnh-policyLink { min-height: 44px; display: inline-flex; align-items: center; } .gnh-availabilityBook { min-height: 44px; min-width: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; } .service-browser nav button { min-height: 48px; } .service-page-list article > a { width: 44px; height: 44px; } .journal-hero-copy a { min-height: 48px; display: inline-flex; align-items: center; } /* ════════ 8 · CONTRASTE (cris: "arréglalos todos") ════════ El dorado y el gris de la maqueta funcionan sobre fondo oscuro, pero sobre sus fondos crema se quedan cortos: medido, el peor estaba en 2,03:1 cuando el mínimo es 4,5 (3 en títulos grandes). Se baja SOLO la luz del mismo color — mismo tono, mismo carácter — y solo en las zonas claras. Sobre fondo oscuro no se toca nada. Los tres valores salen de calcular el mínimo que pasa, no a ojo. */ :root { --nv-oro-texto: #7f613a; /* dorado para letra chica sobre crema · ≥4,6:1 */ --nv-oro-titulo: #8f6d3c; /* dorado para títulos grandes · ≥3,1:1 */ --nv-gris-texto: #6c6760; /* gris para letra chica sobre crema · ≥4,6:1 */ } /* la artista */ .gnf-story .gnf-index, .gnf-education .gnf-index, .gnf-educationDetails strong { color: var(--nv-oro-texto); } .gnf-storyGrid h2 em, .gnf-educationCopy h2 em { color: var(--nv-oro-titulo); } .gnf-story dd, .gnf-educationDetails span { color: var(--nv-gris-texto); } /* glamour circle */ .gnc-ritualSection header p, .gnc-ritualSection summary span, .gnc-invite p, .gnc-invite p strong { color: var(--nv-oro-texto); } .gnc-ritualSection header h2 em, .gnc-invite h2 em { color: var(--nv-oro-titulo); } /* políticas */ .policy-page-intro p, .policy-page-list article small { color: var(--nv-oro-texto); } .policy-page-intro h1 em, .policy-page-cta h2 em { color: var(--nv-oro-titulo); } .policy-page-list article small b { color: var(--nv-gris-texto); } /* diario */ .journal-instagram header p { color: var(--nv-oro-texto); } .journal-instagram-note { color: var(--nv-gris-texto); } /* 8b · Las tarjetas del diario llevan foto oscura + degradado, y encima letra blanca: se lee bien. Pero el color de respaldo de la tarjeta era CLARO (#cfc7bb), así que si una foto tarda o falla, la letra blanca desaparece — y eso es justo lo que medía la comprobación. Respaldo oscuro: se lee igual con foto y sin foto. */ .journal-post-grid > a { background: #141210; } /* 8c · Los que se resistían porque la maqueta los pinta con un selector más fuerte (`:first-child`, `>`), y los de la sección color topo del diario, que necesita un dorado más oscuro que el crema. Mismo método: el mínimo medido que pasa. */ :root { --nv-oro-topo: #684d2f; /* dorado sobre el topo #d7c6ad · ≥4,6:1 */ --nv-oro-topotit:#886640; /* el mismo, para el título grande · ≥3,1:1 */ } .gnc-invite > p:first-child { color: var(--nv-oro-texto); } .service-browser > nav button { color: #706a63; } .journal-instagram > header > div:first-child > p { color: var(--nv-oro-texto); } .journal-process-content > p, .journal-process-content li > small { color: var(--nv-oro-topo); } .journal-process h2 em { color: var(--nv-oro-topotit); } .journal-process-content li span { color: #5a5145; } .journal-video-list > button span { color: rgba(247,243,236,.54); } .journal-close > p { color: var(--nv-oro-texto); } /* 9 · LA CARTA DE VERDAD DENTRO DEL ACORDEÓN DE LA PORTADA (decisión de cris: "lo de afuera igual; lo de adentro es la sección de categoría que ya teníamos"). El marco, la foto y la animación no se tocan: esto solo viste la lista que carta.js trae de GN.repo. Filas de 44 px, como el resto. */ .nv-cartaMeta { display: block; } ul.nv-carta { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(247,243,236,.16); } ul.nv-carta li + li { border-top: 1px solid rgba(247,243,236,.1); } /* la maqueta pinta como botón recuadrado cualquier de este bloque (era el "ELEGIR ESTE SERVICIO"); las filas de la carta son filas, no botones */ ul.nv-carta a { width: auto; margin-top: 0; padding: 9px 0; border: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--white); text-decoration: none; font-weight: 400; letter-spacing: normal; } ul.nv-carta a:hover .nv-cartaNombre { color: var(--gold); } .nv-cartaNombre { font: 400 15px/1.3 'Times New Roman', Times, serif; letter-spacing: -.01em; } .nv-cartaPrecio { flex: none; font: 600 8px/1.2 'Manrope', sans-serif; letter-spacing: .14em; color: var(--gold); text-align: right; } @media (max-width: 767px) { .nv-cartaNombre { font-size: 16px; } .nv-cartaPrecio { font-size: 9px; } } /* 10 · EL LOGO GRANDE NECESITA FONDO EN LA CABECERA. La maqueta oscurece la foto por abajo y por la izquierda (.page-intro-shade), pero NO por arriba — con la "G" chica no se notaba; con el logo entero y "by. Francia" en blanco, sobre una foto clara se pierde. Se añade el mismo tipo de velo, solo arriba y solo donde la cabecera va sobre foto (la de /politicas es clara y no lleva). Es invisible sobre foto oscura y salva cualquier foto que ponga Francia después. */ .site-header:not(.is-dark)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28) 55%, transparent); } /* 11 · EL BOTÓN DE IDIOMA TAMBIÉN EN EL PIE (petición de cris: "en el pie y en el menú va el botón de idioma"). En los menús ya estaba. Aquí va en la línea legal de los dos pies, con la tipografía de esa línea para que no parezca un añadido. No hace falta tocar el JS: idioma-nueva.js engancha por [data-idioma] en todo el documento, así que los dos pares se mantienen sincronizados solos. Filas de 44 px para el dedo. */ .nv-idiomaPie { gap: 6px; } .nv-idiomaPie button { min-height: 44px; min-width: 44px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font: 600 9px/1 'Manrope', sans-serif; letter-spacing: .16em; } /* que quepa en una fila donde hay sitio, en vez de saltar a una segunda */ .gnh-closingBase { grid-template-columns: auto 1fr auto auto; } @media (min-width: 768px) and (max-width: 1050px) { .gnh-closingBase { align-items: center; } } @media (max-width: 767px) { .nv-idiomaPie button { font-size: 10px; } } /* el pie interior reparte con space-between: el idioma entra como uno más. Solo de 768 para arriba: en teléfono es una columna y centrarla desalineaba todo el pie respecto al resto de la página. */ @media (min-width: 768px) { .footer-small { align-items: center; } } /* 12 · EL LOGIN, ARRIBA · cris, viéndolo: "esto es un icono normal de login, esto va arriba, el icono solo, pequeño, con un solo texto al lado, login, como todas las páginas que existen; no es una subpágina, es un login normal". Así que SALE DEL MENÚ —no es un destino de la visita— y vive en la cabecera, en las seis páginas y en TODOS los anchos: icono chico + la palabra. Dónde, y por qué ahí. Medido, no a ojo: · PORTADA en teléfono: la marca va CENTRADA (115→275 a 390 px) y la hamburguesa fija a la derecha (329→377). A su izquierda no cabe sin pegarse al logo — se probó y cris lo cortó: "está muy junto al logo". Va al borde IZQUIERDO, que está vacío, enfrente de la hamburguesa. A 360 px la marca empieza en 100, por eso el bloque se deja compacto. · PORTADA de 768 para arriba: la marca queda lejos, así que sube a la derecha, junto a la hamburguesa, que es donde lo busca todo el mundo. · INTERIORES: la marca va a la izquierda (15→189) y sobra sitio antes de la hamburguesa (327), así que va en su fila, a la derecha, siempre. La palabra corta es "Login" en los dos idiomas. La frase larga ("Entra con Gmail") se queda en el pie y en la propia página de entrar. /login es de Sistema: aquí solo se pone la puerta. */ .nv-entrar { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; text-decoration: none; color: #fff; opacity: .9; transition: opacity .2s; } .nv-entrar:hover, .nv-entrar:focus-visible { opacity: 1; } /* 24 px es el tamaño normal de un icono de cabecera. A 20 se veía de juguete (cris: "está muy chiquito"). */ .nv-entrar .nv-ico { width: 24px; height: 24px; opacity: 1; stroke-width: 1.5; } /* La cabecera de la portada es una capa FIJA con la marca centrada en absoluto, así que el enlace se coloca solo, igual que hace la hamburguesa. Y por ser fija se queda quieto mientras el logo hace su coreografía al bajar — que es lo que pidió cris: "cuando el logo y el menú bajen, él se queda ahí". El alto se alinea con la LÍNEA DEL LOGO, no con la de la hamburguesa: medido a 390, 430 y 360 px, el logo tiene su centro en 49 y la hamburguesa en 37, así que el icono iba 13 px más arriba que el logo y se leía como despegado. 48 de caja centrada en 49 → top 25. */ .gnh-header .nv-entrar { position: fixed; z-index: 7; top: 25px; left: 12px; pointer-events: auto; } @media (min-width: 768px) { .gnh-header .nv-entrar { left: auto; right: 76px; top: 26px; } } /* 12c · LOS DOS MENÚS EN NEGRO. El de las páginas interiores venía en VERDE de la maqueta (--wine: #304033) y el de la portada en negro; cris pidió igualarlos. Es el único color de la maqueta que se reemplaza, y fue con su sí explícito. */ .menu-drawer { background: #0a0907; } /* el pie: mismo tamaño de toque que el ES/EN de al lado */ .nv-entrarPie { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; letter-spacing: .15em; text-transform: uppercase; } .gnh-closingBase .nv-entrarPie { color: #d9c08a; font-size: 9px; } .footer-small .nv-entrarPie { font-size: 13px; } @media (min-width: 768px) { .footer-small .nv-entrarPie { font-size: inherit; } } /* la línea legal de la portada pasa de cuatro huecos a cinco */ .gnh-closingBase { grid-template-columns: auto auto 1fr auto auto; } /* 13 · EL MENÚ TIENE QUE PODER RECORRERSE. cris, mirándolo en su computadora: "no sé qué hacer, ni está aquí" — la última fila (Entra con Gmail) no aparecía. Medido: la lista mide 799 px de alto, así que en cualquier teléfono de menos de ~800 px las dos últimas filas quedaban FUERA y no había forma de llegar: el menú no se desplazaba (overflow visible). Pasaba desde que el menú creció de 7 destinos a 11 — el de la maqueta cabía. 390×844 (iPhone grande) entraba justo · 390×667 (iPhone SE) y 360×640 (Android normal) cortaban. Se comprueba en test.mjs a esas dos medidas. overscroll-behavior: contain para que al llegar al final no arrastre la página de detrás. */ .gnh-menu, .menu-drawer { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* 14 · LAS BANDAS DEL IPHONE, DE VERDAD. El theme-color no bastó: cris siguió viendo las franjas del reloj y de la dirección en CREMA (foto suya, dos veces). Safari de iOS tiñe sus barras con el fondo de la página en los bordes — el theme-color es solo una pista y la pierde. Y el fondo aquí es el crema de la maqueta (--warm), aunque lo de arriba sea una foto oscura: de ahí las dos bandas claras. Se pone el fondo oscuro en y en . NO cambia el diseño: cada sección de estas páginas pinta su propio fondo, así que el del body no se ve en ningún sitio — comprobado comparando las seis páginas enteras, píxel a píxel, antes y después. Solo se ve donde antes se veía crema sin querer: en el rebote del scroll y en las barras de Safari. */ html, body { background: #0a0907; } /* 15 · EL DORADO ES EL DEL LOGO · petición de cris: "el color que se supone que es dorado, quiero que sea el mismo dorado de su logo en todo lo que tiene este color; quizás bájale a 89% la intensidad para que no sea tan brilloso". Medido sobre el propio archivo del logo (los píxeles de las letras GLAMOUR NAILS): el dorado que se ve en pantalla es #FCDC58. Bajado al 85% de intensidad —mismo tono, misma saturación, solo menos luz— da #D6BB4B. Ese es el dorado del sitio a partir de ahora. (Primero se probó al 89% y cris lo bajó a 85 viéndolo en su teléfono.) La maqueta traía SIETE dorados distintos, uno por sección (--gold, --edit-gold, --journal-gold, --om-gold, --rf-gold, --sh-gold, --bronze): todos pasan a ser el mismo, que es lo que él pidió. */ :root { --gold: #d6bb4b; --edit-gold: #d6bb4b; --journal-gold: #d6bb4b; --om-gold: #d6bb4b; --rf-gold: #d6bb4b; --sh-gold: #d6bb4b; --bronze: #d6bb4b; } /* Y sobre los fondos claros hay que bajarlo más o no se lee: un dorado que contrasta 11,5:1 sobre negro se queda en 1,5:1 sobre crema. Se recalculan los cuatro tonos oscuros del MISMO dorado nuevo, con el mismo método de antes — el mínimo medido que pasa, no a ojo. */ :root { /* Calculados contra los TRES cremas del diseño a la vez (#f3f0e9, #e7e2d8 y #ece7de, el del diario), no contra uno. La primera vuelta se calculó solo con el más claro y el del diario —que es más oscuro— dejó tres textos por debajo del mínimo: lo cazó revisar.mjs. */ --nv-oro-texto: #6d5f26; /* letra chica sobre cualquiera de los tres · ≥4,9:1 */ --nv-oro-titulo: #8d7b31; /* títulos grandes sobre cualquiera · ≥3,2:1 */ --nv-oro-topo: #5b4f20; /* letra chica sobre el topo del diario · ≥4,8:1 */ --nv-oro-topotit:#78692a; /* título grande sobre el topo · ≥3,2:1 */ } /* Los dos textos del diario que la maqueta pinta con un color literal suyo, no con una variable: al unificar el tono se quedaron a 2,92:1 y 4,43:1 sobre el crema del diario. Mismo dorado, un punto menos de luz. */ .journal-instagram h2 em { color: var(--nv-oro-titulo); } .journal-close h2 em { color: var(--nv-oro-titulo); } .journal-instagram a span { color: var(--nv-oro-texto); } /* OJO: en .journal-close el enlace "RESERVAR UNA CITA" va sobre fondo NEGRO, no sobre el crema. La primera versión de esta regla lo pintó del dorado oscuro y lo dejó en 3,05:1 — lo cazó revisar.mjs. Aquí solo van los que de verdad están sobre claro. */ .journal-social-link, .journal-social-link span { color: var(--nv-oro-texto); }