/* marca.css — LA IDENTIDAD DE LOKALLY, EN UN SOLO SITIO (7 sep 2026)
------------------------------------------------------------------
Color, tipografia y logo se definen AQUI y en ningun otro sitio. Si una
pagina necesita un color que no este en este fichero, el sitio a cambiar
es este, no la pagina.
Va primero en el , antes que la hoja propia de cada pagina, para que
cualquier regla de la pagina pueda pisar estas sin pelear por especificidad.
Las fuentes van AUTOALOJADAS -los cuatro .woff2 de /fuentes/-, no desde
Google. Dos razones: la CSP del proyecto dice `font-src self`, y una
pantalla de tele en un local con mala linea no depende de un tercero para
tener letras. `font-display: swap` en las ocho declaraciones: primero se lee
con la letra del sistema y luego entra Montserrat; nunca hay texto invisible.
/* latin-ext */
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fuentes/instrument-serif-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fuentes/instrument-serif-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fuentes/montserrat-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fuentes/montserrat-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fuentes/montserrat-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fuentes/montserrat-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fuentes/montserrat-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fuentes/montserrat-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
/* Los cinco colores. No hay un sexto. */
--rojo:#E8471C; /* cabeceras, cierres, la cifra del precio */
/* EL MISMO ROJO, UN PUNTO MAS OSCURO, PARA CUANDO HAY LETRA PEQUEÑA
(7 sep 2026). Blanco sobre #E8471C da 3,63:1 y la letra por debajo de
18 px pide 4,5. Sobre #C63A14 da 5,25:1, y ese medio tono de diferencia
no se ve de una seccion a otra. Regla: #E8471C para botones, titulares y
fondos; #C63A14 en cuanto hay texto pequeño de por medio -de fondo si el
texto es blanco, de color si el texto va en rojo sobre blanco-. */
--rojo-texto:#C63A14;
--amarillo:#FFC300; /* el boton principal, las cifras grandes, el punto del logo */
--negro:#121212; /* la tele y los bloques de prueba real */
--blanco:#FFFFFF; /* formularios y todo lo que se lee seguido */
--gris:#6B6B6B; /* letra pequena y notas al pie. Nunca un titular */
--fuente:Montserrat, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
--logo:Instrument Serif, Georgia, Times New Roman, serif;
/* ---- LA ESCALA, EN UN SOLO SITIO (8 sep 2026) ----
Los nueve cuerpos del encargo maestro y ninguno mas. Estan aqui para que
una pagina no tenga que acordarse del numero: pide `var(--t-titular)` y ya
esta en la escala. En px y no en rem a proposito: la escala es la misma
mida lo que mida la letra del navegador, que es justo lo que la hace un
sistema.
titulares 40 / 56 / 88
secciones 20 / 24 / 28
texto 17 / 18
nota 14 */
--t-titular-s:40px; --t-titular-m:56px; --t-titular-l:88px;
--t-seccion-s:20px; --t-seccion-m:24px; --t-seccion-l:28px;
--t-texto:17px; --t-texto-l:18px;
--t-nota:14px;
/* ---- EL ESPACIADO, DE OCHO EN OCHO ---- */
--e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:40px; --e6:56px; --e7:64px;
/* ---- LOS TRES RADIOS ---- */
--r-grande:16px; --r-medio:12px; --r-chico:8px;
/* LOS DOS PESOS QUE SE USAN, Y NO MAS (8 sep 2026).
El encargo maestro fija dos: 400 para el texto y 800 para todo lo que
manda -titulares, botones y cifras-. Hasta hoy habia un tercero, el 700,
para los titulares: un peso intermedio que no se distingue del 800 a
tamaño de titular y que obligaba a decidir cual tocaba en cada sitio.
`--peso-titular` se queda con el nombre -lo usan medio centenar de reglas-
pero con el valor del sistema. Los .woff2 son los mismos ficheros para los
tres pesos, asi que esto no descarga ni un byte de mas. */
--peso-texto:400;
--peso-titular:800;
--peso-cifra:800;
}
/* ---- BASE ------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100% }
body{
font-family:var(--fuente);
font-weight:var(--peso-texto);
color:var(--negro);
background:var(--blanco);
}
h1,h2,h3{ font-weight:var(--peso-titular); line-height:1.1; margin:0 }
/* Ningun enlace azul. Misma regla que ya estaba en el visor de spots: es el
suelo, cualquier clase la pisa. Un sin color propio hereda el azul del
navegador, y sobre rojo o sobre negro no se lee. */
a{ color:var(--rojo) }
/* ---- EL LOGO ---------------------------------------------------------- */
/* Siempre en minuscula, siempre con punto, y EL PUNTO SIEMPRE AMARILLO.
Para el logo en imagen estan /img/logo-lokally.svg (rojo) y
/img/logo-lokally-blanco.svg (blanco); los dos llevan el punto amarillo
dentro y la letra convertida a trazados, asi que no dependen de que la
fuente haya cargado. Esta clase es para cuando el logo va como texto. */
.lk-logo{
font-family:var(--logo);
font-weight:400;
letter-spacing:-.01em;
color:var(--rojo);
}
.lk-logo::after{ content:"."; color:var(--amarillo) }
.lk-logo--blanco{ color:var(--blanco) }
/* ---- LOS CUATRO FONDOS ------------------------------------------------ */
/* Rojo con texto blanco: cabeceras y cierres.
Negro: la tele y los bloques donde se ensena algo funcionando de verdad.
Blanco: formularios y lectura. */
.lk-rojo { background:var(--rojo); color:var(--blanco) }
/* La variante para bloques rojos CON letra pequeña. Lo unico que cambia es el
fondo; el texto sigue blanco. */
.lk-rojo--letra{ background:var(--rojo-texto); color:var(--blanco) }
.lk-negro { background:var(--negro); color:var(--blanco) }
.lk-blanco{ background:var(--blanco); color:var(--negro) }
/* Los enlaces sueltos sobre rojo o sobre negro van en amarillo... menos el
boton principal, que es un y ya tiene su color. Sin el :not() esta
regla le ganaba por especificidad y dejaba el boton del cierre con texto
amarillo sobre fondo amarillo: invisible. Cazado el 7 sep con el boton ya
puesto en la pagina. */
/* Sobre NEGRO el enlace va en amarillo, que da 12:1 y se lee de sobra.
Sobre ROJO no: amarillo sobre rojo son 2,4:1, ilegible. Ahi el enlace va en
blanco y subrayado -3,6:1 y el subrayado hace el resto del trabajo-. */
.lk-negro a:not(.lk-boton){ color:var(--amarillo) }
.lk-rojo a:not(.lk-boton){ color:var(--blanco); text-decoration:underline }
/* ---- EL BOTON PRINCIPAL ----------------------------------------------- */
/* SIEMPRE amarillo con texto negro, en los cuatro fondos. Es el unico boton
amarillo de la web: si algo mas se pinta de amarillo y se puede pulsar, deja
de senalar. Ancho completo en movil, ajustado al texto a partir de 700 px. */
.lk-boton{
display:block;
width:100%;
box-sizing:border-box;
/* Espaciado del sistema -multiplos de 8- y radio de los tres (16/12/8).
Con 16 arriba y abajo y una linea de 1,2 el boton mide 54 px de alto:
bien por encima de los 44 que pide un dedo. */
padding:16px 24px;
border:0;
border-radius:12px;
background:var(--amarillo);
color:var(--negro);
font-family:var(--fuente);
font-weight:var(--peso-titular);
font-size:var(--t-texto-l);
line-height:1.2;
text-align:center;
text-decoration:none;
cursor:pointer;
transition:transform .12s ease, filter .12s ease;
}
.lk-boton:hover{ filter:brightness(1.06) }
.lk-boton:active{ transform:translateY(1px) }
.lk-boton:focus-visible{ outline:3px solid var(--blanco); outline-offset:3px }
@media (min-width:700px){
.lk-boton{ display:inline-block; width:auto }
}
/* ---- CIFRAS ----------------------------------------------------------- */
/* El 76 %, el 49 €, los numeros de los pasos: ExtraBold y grandes. */
.lk-cifra{
font-weight:var(--peso-cifra);
line-height:.95;
letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
}
/* ---- LETRA PEQUENA ---------------------------------------------------- */
.lk-nota{ color:var(--gris); font-size:var(--t-nota); line-height:1.5 }
/* Sobre rojo o negro el gris no llega: ahi la nota va en blanco. Sobre negro
sobra contraste. SOBRE ROJO NO LLEGA A AA aunque sea blanco puro: el par
#FFFFFF sobre #E8471C da 3,63:1 y la letra pequena pide 4,5. Es un limite de
la paleta, no un descuido -esta anotado en ESTADO.md-; por eso aqui va
blanco puro, que es lo mas que se puede dar sin salirse de los cinco
colores. */
.lk-rojo .lk-nota, .lk-negro .lk-nota{ color:var(--blanco) }
/* ---- ACCESIBILIDAD ---------------------------------------------------- */
/* Quien tenga puesto "reducir movimiento" no ve ni carruseles ni videos
moviendose solos. Lo respetan las paginas que usan esta hoja. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
}