@charset "utf-8";
/* =============================================================================
IID · TOKENS Y BASE — versión 3, clínica luminosa con contraste
Sistema visual de la landing del Instituto Internacional en Dermoestética.
── POR QUÉ SE REPINTÓ ─────────────────────────────────────────────────────
La versión 1 invertía la paleta a hueso y caliza, apoyándose en la regla del
material propio de la casa: «el negro y dorado es el cliché de quien quiere
parecer lujo». Sobre el papel era razonable. En pantalla salió una página de
adobe y desierto, y Carlos lo dijo claro: parecía Egipto de verdad, y pobre.
La identidad real del IID —su logo, el arte de su campus y sus fotos— es
NEGRO + ORO METÁLICO + LUZ DE CONTRA. Clínica moderna, con una oscuridad de
estudio de tatuaje y una insignia de aire egipcio. La regla del cliché la
escribieron pensando en quien se pone dorado sin nada detrás; aquí hay una
marca hecha, y manda la marca.
Lo que sí se conserva de la v1: el aire, la contención, el radio 0, el filete
de 1 px y la disciplina de paleta. Lo claro no desaparece — deja de ser el
suelo y pasa a ser el ACENTO: la piel iluminada, el acero, y uno o dos
bloques que abren.
── Y POR QUÉ SE VOLVIÓ A REPINTAR ─────────────────────────────────────────
La v2 se fue al otro extremo. Carlos, al verla: «el ambiente es súper oscuro,
genera energías negativas. Si nos pasamos de negro vamos a transmitir miedo y
desconfianza. ¿Qué te imaginas cuando entras a una clínica de lujo? Te tiene
que evocar ganas, alegría, belleza, pureza. Dar los detalles y los contrastes
justos para que tenga fuerza, garra. Modernidad lujo.»
Tenía razón, y la síntesis es la buena:
· El SUELO vuelve a ser claro — pero PORCELANA, NO ARENA. Ese es el arreglo
del fallo de la v1: el hueso cálido tiraba a adobe. Este blanco es limpio
y ligeramente frío, y lo cálido entra solo por la piel y por el oro.
· El NEGRO deja de ser el suelo y pasa a ser el CONTRASTE: dos o tres
bloques a sangre, con las fotos reales. Ahí vive la garra.
· El ORO sigue siendo metal, y ahora tiene dónde brillar: sobre los bloques
negros puede llevar texto; sobre porcelana, solo filete y subrayado.
── UN DESBLOQUEO QUE CAMBIA LAS REGLAS ────────────────────────────────────
Sobre hueso, el oro daba 2,73:1 y no podía llevar texto de ningún tamaño.
Sobre este negro da 8,4:1. Así que ahora el oro SÍ es color de texto para
etiquetas y versalitas. Lo que sigue prohibido es al revés: oro sobre claro.
LAS DOS FUENTES SE CARGAN DESDE EL HTML, no con @import (un @import encadena
peticiones y se lleva por delante el LCP). Copia estas tres líneas en el
, antes de este fichero:
============================================================================= */
/* -----------------------------------------------------------------------------
1 · PALETA EN BRUTO — 60 / 30 / 10
Estos tokens son la despensa: los componentes NO los usan directamente, usan
los semánticos del bloque 2. Así un bloque claro se resuelve solo.
-------------------------------------------------------------------------- */
:root{
/* 60 % — PORCELANA. El suelo de la página: luminoso, limpio, ligeramente
frío. NO es el hueso cálido de la v1 (#F4F0EA): aquel tiraba a arena y por
eso la página parecía adobe. Aquí lo cálido entra solo por la piel y por el
oro, nunca por el fondo. Es la diferencia entre una clínica y un zoco. */
--porcelana: #FAF9F7;
--porcelana-honda: #F1EFEC; /* segundo plano, bandas alternas */
--nube: #E5E2DD; /* bordes y separadores */
/* 30 % — EL NEGRO. Ya no es el suelo: es el CONTRASTE. Dos o tres bloques a
sangre, con las fotos reales. Es donde la página tiene garra.
Nunca negro puro: #000 en un OLED corta las formas a cuchillo. Este es el
negro de sus fotos. */
--negro: #0B0908;
--negro-alto: #14100E;
--carbon: #1E1815;
/* 10 % — ORO. Metal, no amarillo. Los tres tonos salen del degradado del logo:
brillo, cuerpo y sombra. El degradado real está en --oro-metal. */
--oro-claro: #F0DCA8;
--oro: #C9A44C;
--oro-hondo: #8A6A2A;
/* El metal de verdad. Se usa con background-clip:text en el monograma y en
algún remate muy puntual; nunca como fondo de bloque ni relleno de botón.
⚠ Es la ÚNICA excepción a «cero degradados»: un degradado de color es
decoración; un degradado de metal es cómo se ve el metal. */
--oro-metal: linear-gradient(168deg, var(--oro-claro) 0%, var(--oro) 46%, var(--oro-hondo) 100%);
/* Apoyo, en dosis mínima: piel. El único cálido que no es oro. */
--piel: #C9A896;
/* Tintas sobre negro. Verificadas contra #0B0908 Y contra #14100E. */
--marfil: #F2EDE6; /* 17,04 : 15,72 */
--marfil-suave: #C7BDB0; /* 10,68 : 9,85 */
--marfil-tenue: #9A9086; /* 6,26 : 5,77 — el límite. Nada más oscuro. */
/* Tintas sobre porcelana. Verificadas contra #FAF9F7 Y contra #F1EFEC.
Suben respecto a la v1 porque el fondo es más claro: hay margen de sobra. */
--tinta: #16130F; /* 17,53 : 16,32 */
--tinta-suave: #514740; /* 8,42 : 7,84 */
--tinta-tenue: #6A6058; /* 5,86 : 5,45 — el límite. Nada más claro. */
/* --- EL REVELADO DE LAS FOTOS QUE VAN SOBRE CLARO -------------------------
Carlos, 2026-08-09: «la página es un lavado de blanco». La mitad del
problema es que los bodegones son casi blancos y se disuelven en la
porcelana: el ojo no ve una foto, ve una mancha con un borde de vapor.
Esto NO es un tinte y no puede serlo — un filtro cálido devuelve la página
al adobe de la v1, que es el error que tumbó dos direcciones enteras. Lo
que hace es subir lo que la foto YA trae (la piel, la madera, el latón) y
bajar el blanco lo justo para que su canto se despegue del fondo. Sin
hue-rotate, sin sepia, sin degradado: tres puntos de saturación, seis de
contraste y dos y medio de luz.
Se aplica solo a fotos sobre porcelana o porcelana honda. Las que van
sobre negro ya tienen su propio revelado en su bloque. */
--foto-claro: saturate(1.10) contrast(1.06) brightness(0.975);
}
/* -----------------------------------------------------------------------------
2 · CAPA SEMÁNTICA
Lo que consumen los componentes. LA RAÍZ ES CONTEXTO CLARO: la página respira
en porcelana por defecto, y la garra la ponen los pocos bloques que se van a
negro con [data-superficie="negro"].
── EL RITMO TONAL DE LA PÁGINA, reescrito el 2026-08-10 por la NOCHE ───────
CINCO momentos oscuros, repartidos para que el negro marque el compás en vez
de amontonarse. Este párrafo se ha reescrito ya cuatro veces —cuatro, cinco,
otra vez cuatro y ahora cinco— y esa es exactamente la prueba de que funciona:
es el sitio donde hay que venir cuando el reparto cambia, y quien no venga deja
el sistema mintiendo. Sigue escrito aquí y no en cada bloque porque el reparto
es una decisión de página, no de bloque.
héroe negro · el plano de apertura
01 qué es PORCELANA · qué es esto y las tres cosas que hay dentro
02 lo que pasa NEGRO · el diagnóstico
03 por qué PORCELANA · el bloque con más aire de la página
04 pilares honda · rompe el tramo claro más largo de la página,
con la BANDA DE NOCHE en negro a sangre dentro.
Abre con LÍNEA DE RÚBRICA porque el escalón de
porcelana a honda no se veía (ver abajo)
05 dónde estás NEGRO · los cinco puntos, con el camino trazado al scroll
06 el club NEGRO · sigue el oscuro del 05: son UNA masa y UN corte.
El akhet de esa vuelta a la luz cuelga de AQUÍ
07 lo que se NUBE · los mensajes del grupo, en tarjetas de porcelana
cuenta sobre nube. ⚠ Es el TERCER tono claro y el único
sitio donde --nube hace de fondo de sección: se
bajó el 2026-08-11 porque una tarjeta de porcelana
sobre honda son siete puntos de luma y en un móvil
no se veía la caja. No debería haber un cuarto tono
claro: con tres, cada uno significa algo —suelo,
alterna, caja—; con cuatro, ninguno.
08 formaciones NEGRO · las tres cajas del catálogo, sobre su propio negro
09 el máster PORCELANA · el respiro entre dos oscuros. Sin producto: no
existe todavía, y el vacío es honesto
10 quién está NEGRO · los socios
11 artículos honda · baja la voz
12 cierre PORCELANA · lo más claro de la página, y el pie en honda
EL 03 HA VUELTO A LA LISTA. Se retiró el 2026-08-10 por la tarde y Carlos lo
devolvió el mismo día —«no te debiste cargar el por qué hacemos lo que
hacemos»—. No cambia la cuenta de oscuros: va en porcelana.
EL QUINTO OSCURO ES NUEVO, del 2026-08-10 por la noche: la banda de las voces
del grupo, dentro del bloque 06. Entró porque el tramo que va del remate del
bloque 05 al pie tenía cuatro secciones claras seguidas y una sola fotografía
—Carlos: «a partir de ahí la página empieza a perder calidad visual»—, y
porque ocho mensajes escritos en un grupo a las once de la noche piden esa
superficie. Trae su akhet, que es el quinto.
Los cinco oscuros, en orden de lectura: 02 · la banda de 04 · 05+06 · 08 · 10.
Reescrito el 2026-08-11 y siguen siendo cinco, pero el reparto es otro: el 05 y
el 06 se han fundido en una sola masa oscura, se ha caído la banda de voces
—esos mensajes están ahora sobre claro— y ha entrado el catálogo en negro.
⚠ LA TRAMPA DE CONTAR AQUÍ, y hay que decirla porque es nueva: el 05 y el 06 son
DOS secciones con `data-superficie="negro"` seguidas, sin nada claro entre ellas.
Eso es UN corte, no dos, y por tanto UN akhet, que cuelga del canto de abajo del
06. Es la misma trampa que ya avisaba el arco del 05 cuando tenía tres planos
apilados: se cuentan las VUELTAS A LA LUZ, no los `data-superficie`.
⚠ Y EL ESCALÓN DE PORCELANA A HONDA NO ES UN CORTE VISIBLE. Carlos lo cazó con
una captura el 2026-08-11: entre el 03 (#FAF9F7) y el 04 (#F1EFEC) hay siete
puntos de luma y en un móvil no se ven. Eso NO se arregla con color —la paleta
está cerrada— ni con un akhet, que solo marca la vuelta a la luz. Se arregla con
una LÍNEA DE RÚBRICA: el rótulo montado en un filete doble que cruza la columna.
Está en el 04 y en el 09 y en el 11, y es el patrón de la casa para decir «aquí
se acaba un registro y empieza otro».
El del héroe NO entra en la cuenta, y no es un descuido: una apertura no
amanece porque todavía no ha anochecido. Ojo con contar `data-superficie` a
ciegas: el arco del 05 tiene tres planos apilados y dos de ellos son oscuros,
pero **entre ellos no se vuelve a la luz**, así que es UN corte y no dos.
El techo tampoco lo pone el gusto. El día que los momentos oscuros crezcan
tanto que el negro deje de ser la excepción, habrá dejado de contrastar; y
quien añada un quinto tiene que venir a reescribir esto, como se ha reescrito
ahora.
── LA REGLA DEL CORTE, que es la otra mitad ────────────────────────────────
Cada paso de claro a oscuro y de oscuro a claro es A SANGRE y en un píxel. Un
fundido de 400 px no contrasta nada. Ningún bloque se degrada hacia su vecino;
lo único que cruza la costura es el akhet, que es un glifo de 1 px y marca el
corte en vez de disolverlo.
Y el akhet no se pone donde apetece (ORNAMENTOS.md): TODA vuelta a la luz
lleva uno, y NINGUNA entrada en la noche lo lleva — se entra en la noche sin
anunciarla. Cinco momentos oscuros son cinco vueltas a la luz, luego cinco
akhets, y están en 02, 04, 05, 06 y 08. El del 06 se fue con su banda negra el
2026-08-10 por la tarde y ha vuelto con la banda de las voces por la noche:
cuando desaparece el corte, el glifo que lo marcaba deja de tener trabajo —un
akhet sin su corte es un dibujito—, y cuando el corte vuelve, el glifo vuelve.
La comprobación es aritmética y la puede hacer cualquiera: se cuentan los
cortes, se cuentan los glifos y tienen que salir los mismos. Si algún día
sobra o falta uno, el sistema está roto y hay que arreglarlo, no justificarlo.
-------------------------------------------------------------------------- */
:root{
--fondo: var(--porcelana);
--fondo-alt: var(--porcelana-honda);
--texto: var(--tinta);
--texto-suave: var(--tinta-suave);
--texto-tenue: var(--tinta-tenue);
--filete: var(--nube);
--filete-acento: var(--oro);
--acento: var(--oro);
--acento-calido: var(--piel);
--foco: var(--tinta);
--inverso-fondo: var(--negro);
--inverso-texto: var(--porcelana);
/* ⚠ Sobre porcelana el oro da 2,6:1 y NO puede llevar texto de ningún tamaño.
La versalita va en tinta suave; el oro se queda en el filete y el subrayado. */
--etiqueta: var(--tinta-suave);
}
/* El bloque de contraste. Cinco momentos en toda la página —los del mapa de
arriba—, a sangre, con las fotos reales. Todo lo de dentro se recoloca solo. */
[data-superficie="negro"]{
--fondo: var(--negro);
--fondo-alt: var(--negro-alto);
--texto: var(--marfil);
--texto-suave: var(--marfil-suave);
--texto-tenue: var(--marfil-tenue);
--filete: var(--carbon);
--foco: var(--oro-claro);
--inverso-fondo: var(--porcelana);
--inverso-texto: var(--negro);
/* Aquí el oro sí pasa AA de sobra: 8,4:1. Es el color de las versalitas. */
--etiqueta: var(--oro);
background-color: var(--fondo);
color: var(--texto);
}
/* -----------------------------------------------------------------------------
3 · TIPOGRAFÍA
Dos familias, ni una más.
· Bodoni Moda — didona editorial, solo titulares y citas. Con eje óptico:
a 120 px afina el trazo fino y a 24 px lo engorda para que no desaparezca.
Sobre negro esto importa el doble: una didona fina sobre fondo oscuro
pierde los remates si no se compensa.
· Archivo — grotesca con eje de anchura. Cuerpo a anchura normal; etiquetas
en versalitas estrechadas al 84 %.
-------------------------------------------------------------------------- */
:root{
--serif: "Bodoni Moda", "Iowan Old Style", "Palatino Linotype", Palatino,
"Book Antiqua", Georgia, "Times New Roman", serif;
--sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--t-hero: clamp(2.625rem, 0.60rem + 6.20vw, 7.50rem); /* 42 → 120 */
--t-display: clamp(2.125rem, 1.10rem + 3.20vw, 4.75rem); /* 34 → 76 */
--t-t1: clamp(1.750rem, 1.05rem + 2.20vw, 3.25rem); /* 28 → 52 */
--t-t2: clamp(1.4375rem, 1.15rem + 0.90vw, 2.125rem); /* 23 → 34 */
--t-t3: clamp(1.1875rem, 1.06rem + 0.40vw, 1.50rem); /* 19 → 24 */
--t-cita: clamp(1.500rem, 0.98rem + 1.62vw, 2.75rem); /* 24 → 44 */
--t-entrada: clamp(1.1875rem, 1.02rem + 0.52vw, 1.625rem); /* 19 → 26 */
--t-cuerpo: clamp(1.0625rem, 1.01rem + 0.17vw, 1.1875rem);/* 17 → 19 */
--t-menor: clamp(0.9375rem, 0.91rem + 0.09vw, 1.03125rem);/* 15 → 16,5 */
--t-etiqueta: clamp(0.6875rem, 0.65rem + 0.12vw, 0.78125rem);/* 11 → 12,5 */
--lh-hero: 0.97;
--lh-display: 1.03;
--lh-titular: 1.12;
--lh-cita: 1.22;
--lh-entrada: 1.45;
--lh-cuerpo: 1.62;
--lh-menor: 1.55;
--lh-etiqueta: 1.20;
/* Sobre fondo claro la didona puede apretarse: es la letra oscura sobre claro
la que aguanta el tracking cerrado sin tocarse. En los bloques negros el
navegador no lo compensa solo, así que allí se abre a mano (ver abajo). */
--tr-hero: -0.028em;
--tr-display: -0.022em;
--tr-titular: -0.014em;
--tr-cita: -0.012em;
--tr-cuerpo: 0em;
--tr-etiqueta: 0.20em; /* compensar con margin-right:-0.20em */
--peso-serif: 400;
--peso-serif-alto: 500;
--peso-cuerpo: 400;
--peso-medio: 500;
--peso-fuerte: 600;
--ancho-etiqueta: 84%;
}
/* -----------------------------------------------------------------------------
4 · RITMO VERTICAL Y MEDIDAS · base 8
-------------------------------------------------------------------------- */
:root{
--e-1: 0.25rem; --e-2: 0.50rem; --e-3: 0.75rem; --e-4: 1.00rem;
--e-5: 1.50rem; --e-6: 2.00rem; --e-7: 3.00rem; --e-8: 4.50rem;
--e-9: 6.00rem; --e-10: 9.00rem;
--ritmo: 1.5rem;
--seccion-y: clamp(4rem, 2.00rem + 7.00vw, 10.50rem);
--seccion-x: clamp(1.25rem, 0.60rem + 3.20vw, 6.00rem);
--medida: 62ch;
--medida-corta: 46ch;
--medida-ancha: 74ch;
--medida-titular: 20ch;
--medida-cita: 28ch;
--ancho: 78.75rem; /* 1260 px */
--ancho-estrecho: 52.00rem; /* 832 px */
--control-alto: 3.375rem; /* 54 px */
--control-x: 2.00rem;
/* El alto de la cabecera fija cuando está posada: 44 px de objetivo táctil
más --e-3 arriba y abajo. Existe como token por una sola razón: `html` lo
usa en `scroll-padding-top` (ver el reset) para que ningún ancla de la
página aterrice debajo de la banda. Si la banda cambia de aire, este número
cambia con ella o los enlaces del menú empiezan a caer tapados.
Se redondea a 5rem —80 px— y no a los 68 justos: por debajo de 360 px de
ventana el nombre del instituto se parte en tres renglones y la banda
engorda. Sobra un dedo de aire; no falta nunca. */
--cabecera-alto: 5rem; /* 80 px */
--radio: 0; /* el lujo no redondea */
--filete-grosor: 1px; /* el oro SIEMPRE a 1 px */
}
/* -----------------------------------------------------------------------------
5 · MOVIMIENTO · discreto y continuo, ninguna curva rebota
-------------------------------------------------------------------------- */
:root{
--curva: cubic-bezier(0.22, 0.61, 0.36, 1);
--curva-suave: cubic-bezier(0.40, 0.00, 0.20, 1);
--curva-larga: cubic-bezier(0.16, 0.70, 0.30, 1);
--t-rapido: 180ms; --t-medio: 320ms; --t-largo: 640ms; --t-fundido: 1100ms;
--desplaza: 14px;
}
@media (prefers-reduced-motion: reduce){
:root{
--t-rapido: 1ms; --t-medio: 1ms; --t-largo: 1ms; --t-fundido: 1ms;
--desplaza: 0px;
}
*, *::before, *::after{
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* =============================================================================
6 · RESET
============================================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* Garantiza el «sin scroll horizontal» sin romper position:sticky, cosa que
overflow:hidden sí haría. Lo necesitan las bandas a sangre. */
overflow-x: clip;
background-color: var(--porcelana); /* el rebote del scroll, claro */
color-scheme: light;
/* La cabecera es fija y flota por encima de todo: sin esto, cada ancla del
menú (#club, #articulos) aterriza CON SU TITULAR DEBAJO DE LA BANDA. Va en
el contenedor de scroll y no en cada destino, que es donde vale para todos
los que existan y para los que se añadan. */
scroll-padding-top: var(--cabecera-alto);
}
@media (prefers-reduced-motion: no-preference){
html{ scroll-behavior: smooth; }
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset{
margin: 0; padding: 0;
}
ul[role="list"], ol[role="list"]{ list-style: none; }
img, picture, video, canvas, svg{ display: block; max-width: 100%; height: auto; }
input, button, textarea, select{ font: inherit; color: inherit; letter-spacing: inherit; }
button{ background: none; border: none; }
table{ border-collapse: collapse; border-spacing: 0; }
[hidden]{ display: none !important; }
/* =============================================================================
7 · BASE — los elementos desnudos, ya con el sistema puesto
============================================================================= */
body{
min-height: 100svh;
background-color: var(--fondo);
color: var(--texto);
font-family: var(--sans);
font-size: var(--t-cuerpo);
font-weight: var(--peso-cuerpo);
line-height: var(--lh-cuerpo);
letter-spacing: var(--tr-cuerpo);
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6{
font-family: var(--serif);
font-weight: var(--peso-serif);
font-optical-sizing: auto;
line-height: var(--lh-titular);
letter-spacing: var(--tr-titular);
color: var(--texto);
text-wrap: balance;
}
h1{ font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2{ font-size: var(--t-t1); }
h3{ font-size: var(--t-t2); }
h4{ font-size: var(--t-t3); }
h5, h6{ font-size: var(--t-cuerpo); }
h1 em, h2 em, h3 em, blockquote em{ font-style: italic; font-weight: inherit; }
p{ max-width: var(--medida); text-wrap: pretty; }
p + p{ margin-top: var(--ritmo); }
strong, b{ font-weight: var(--peso-fuerte); }
small{ font-size: var(--t-menor); line-height: var(--lh-menor); color: var(--texto-suave); }
/* --- Enlaces ----------------------------------------------------------------
El texto va en la tinta del contexto y el ORO va en el subrayado. Sobre negro
el oro también podría ir en el texto, pero se reserva para las etiquetas: si
todo lo dorado fuera pulsable, el ojo aprendería una regla que luego se rompe. */
a{
color: inherit;
text-decoration: underline;
text-decoration-color: var(--acento);
text-decoration-thickness: var(--filete-grosor);
text-underline-offset: 0.18em;
transition: text-decoration-color var(--t-medio) var(--curva);
}
a:hover{ text-decoration-color: currentColor; }
/* --- Filete: la regla de 1 px ------------------------------------------------ */
hr{
border: 0;
height: var(--filete-grosor);
background-color: var(--filete-acento);
margin-block: var(--e-7);
opacity: 1;
}
hr[data-tono="neutro"]{ background-color: var(--filete); }
/* --- Cita -------------------------------------------------------------------- */
blockquote{
font-family: var(--serif);
font-size: var(--t-cita);
font-weight: var(--peso-serif);
line-height: var(--lh-cita);
letter-spacing: var(--tr-cita);
max-width: var(--medida-cita);
text-wrap: pretty;
}
blockquote p{ max-width: none; font-size: inherit; }
blockquote cite{
display: block;
margin-top: var(--e-5);
font-family: var(--sans);
font-size: var(--t-menor);
font-style: normal;
line-height: var(--lh-menor);
letter-spacing: 0.02em;
color: var(--texto-tenue);
}
ul:not([role="list"]), ol:not([role="list"]){ max-width: var(--medida); padding-left: 1.2em; }
li + li{ margin-top: var(--e-2); }
li::marker{ color: var(--texto-tenue); }
figure{ margin: 0; }
figcaption{
margin-top: var(--e-3);
font-size: var(--t-menor);
line-height: var(--lh-menor);
color: var(--texto-tenue);
max-width: var(--medida-corta);
}
abbr[title]{ text-decoration: underline dotted; cursor: help; }
/* Compensación óptica: la letra clara sobre fondo oscuro «engorda» y a tamaño
display se toca sola. Solo en los bloques de contraste, y solo en titulares. */
[data-superficie="negro"] h1{ letter-spacing: calc(var(--tr-display) + 0.006em); }
[data-superficie="negro"] h2,
[data-superficie="negro"] h3{ letter-spacing: calc(var(--tr-titular) + 0.006em); }
::selection{ background-color: var(--oro); color: var(--negro); }
:focus-visible{ outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 1px; }
:focus:not(:focus-visible){ outline: none; }
/* =============================================================================
8 · UTILIDADES DE MARCA
Dos, y solo dos. Todo lo demás lo montan los componentes.
============================================================================= */
/* El metal. Para el monograma y algún remate muy puntual. Nunca para texto de
cuerpo: un degradado sobre letra pequeña la vuelve ilegible.
⚠ Sobre PORCELANA el metal no llega a AA. Se usa en los bloques negros, o en
claro únicamente para el monograma, que es una marca y no un texto.
Lleva color de respaldo por si el navegador no recorta el fondo al texto. */
.metal{ color: var(--oro); }
@supports (background-clip: text) or (-webkit-background-clip: text){
.metal{
background-image: var(--oro-metal);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
/* Oculto a la vista, presente para lectores de pantalla. */
.oculto-visual{
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}