/* ═══════════════════════════════════════════════════════════════════════════
Megarum · lo común
── Por qué hay tres hojas y no una ───────────────────────────────────────
El móvil y el escritorio de esta web **no son la misma página readaptada**:
son dos diseños, con su menú, su retícula y sus animaciones. Así que el CSS
va en tres ficheros:
· `base.css` — esta. Los colores, la letra y las piezas que son
iguales en los dos sitios.
· `escritorio.css` — de 900 px para arriba.
· `movil.css` — por debajo de 900 px.
Y elige el **navegador**, no el servidor:
Con `media` puesto en el ``, la hoja que no toca **no bloquea el
pintado** y se pide con la prioridad más baja. Lo otro —mirar el
`User-Agent` en el servidor— se rompe con las tablets, hay que revisarlo
cada vez que sale un navegador, obliga a `Vary: User-Agent` (que destroza la
caché) y los buscadores lo desaconsejan.
── De dónde sale este estilo ─────────────────────────────────────────────
Del propio nombre. Un *megaron* es la sala micénica con las columnas
alrededor y el **hogar encendido en el centro**, donde se recibía a los
huéspedes. Eso ya era el logotipo; aquí es el idioma de la página entera:
· **El hogar** es el latón, y es el único acento. Aparece como un punto —
el mismo punto— marcando cada sección, cada línea de una lista y el plan
recomendado. Uno solo, nunca dos: en una sala hay un fuego.
· **Las columnas** son el ritmo vertical: filetes finos con una marca de
latón en el centro, que es la columna vista desde arriba.
· **La pared** de la cocina, alicatada, detrás de todo.
═══════════════════════════════════════════════════════════════════════════ */
:root{
/* La piedra de la sala: caliza, no gris. Todos los neutros llevan un punto de
amarillo, que es lo que hace que el latón no parezca pegado encima. */
--piedra:#F6F4EF;
--piedra-2:#EDEAE1;
--blanco:#FFFDF9;
--tinta:#14181A;
--tinta-2:#4C534E;
--tinta-3:#818880;
--linea:#DBD6C9;
--linea-2:#C9C2B0;
--veta:#2E6152; /* el verde de la marca */
--veta-os:#22493E;
--veta-cl:#E4EEE9;
--laton:#B8873B; /* el hogar */
--laton-os:#8A6220;
--laton-cl:#F6EDDC;
--radio:4px;
--radio-2:10px;
/* El crema del fondo. Es el color del que salen todas las piezas: en
neumorfismo el fondo no es un hueco, es el material. */
--crema:#F4F0E5;
--ancho:70rem;
/* ── El relieve ─────────────────────────────────────────────────────────
La web va en neumorfismo: las superficies **son del color del fondo** y se
separan de él con luz y sombra, no con un borde. Como una pieza de barro
que sale de la pared.
Dos reglas que hay que respetar o esto se cae:
1 · **El relieve dice «esto es una superficie», nunca «esto se pulsa».**
Lo que se pulsa lleva ADEMÁS color. El neumorfismo se abandonó como
moda justamente porque los botones dejaban de verse.
2 · **La sombra es marrón cálido, no negra.** Una sombra gris sobre piedra
caliza se ve sucia; con el marrón de la propia piedra, se ve honda.
Y una de velocidad: nunca se anima el `box-shadow` —eso repinta— sino el
`transform`. Ni se le pone relieve a nada que se repita treinta veces. */
--luz:255,253,247;
--hondo:154,138,106;
--relieve: 5px 5px 13px rgba(var(--hondo),.28),
-5px -5px 13px rgba(var(--luz),.92);
--relieve-2: 9px 9px 24px rgba(var(--hondo),.30),
-9px -9px 24px rgba(var(--luz),.95);
--relieve-cerca:2px 2px 6px rgba(var(--hondo),.22),
-2px -2px 6px rgba(var(--luz),.85);
--hundido: inset 4px 4px 9px rgba(var(--hondo),.30),
inset -4px -4px 9px rgba(var(--luz),.85);
/* La superficie: de qué color sale la pieza. Cada banda pone la suya, y por
eso el relieve funciona igual sobre la pared, sobre el blanco y sobre la
tinta. */
--superficie:var(--crema);
/* Las de antes, que aún usan el pórtico y los aparatos: ahí SÍ hay una cosa
por delante de otra y una sombra proyectada dice la verdad. */
--sombra-1:0 1px 2px rgba(60,48,26,.05), 0 8px 24px rgba(60,48,26,.06);
--sombra-2:0 2px 6px rgba(60,48,26,.06), 0 22px 50px rgba(60,48,26,.13);
}
/* ── Las letras, en casa ─────────────────────────────────────────────────────
Venían de `fonts.gstatic.com`: dos ficheros y una hoja de `googleapis` que
bloqueaba el pintado, o sea tres peticiones a dos dominios ajenos —cada uno
con su DNS y su apretón de manos— antes de que se viera una letra.
Ahora son nuestras, subseteadas al alfabeto latino y sin los ejes que no se
usan (`taller/fuentes.py`). Además de los kilobytes, esto quita una
dependencia de Google y el asunto de privacidad que arrastra.
`swap`: si la fuente tarda, el texto se lee ya con la de repuesto. Un
titular invisible durante medio segundo es peor que un titular provisional.
Las dos son OFL: se pueden alojar y modificar. */
@font-face{
font-family:'Fraunces';
src:url('/fuentes/fraunces.woff2') format('woff2-variations');
font-weight:400 700;
font-display:swap;
}
@font-face{
font-family:'Archivo';
src:url('/fuentes/archivo.woff2') format('woff2-variations');
font-weight:400 600;
font-display:swap;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
margin:0;color:var(--tinta);background:var(--crema);
font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
/* ── El fondo, plano y a propósito ───────────────────────────────────────────
Aquí hubo una foto de una pared alicatada, y se ha quitado. El relieve
necesita que la pieza y el fondo sean **del mismo color liso**: con una foto
debajo, la luz y la sombra que dibujan el relieve compiten con las juntas y
la pieza deja de parecer que sale de la pared.
De paso son 13 kB y una petición menos. El alicatado sigue guardado en
`taller/pared_azulejos.py` por si alguna vez vuelve a hacer falta. */
/* ── El grano del papel ─────────────────────────────────────────────────────
Casi invisible y muy necesario: una superficie plana de un solo color parece
una plantilla; con grano parece una hoja. */
body::before{
content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
body > *{position:relative;z-index:1}
/* ── Tipografía ─────────────────────────────────────────────────────────────
Fraunces lleva eje óptico: se le pide el tamaño óptico que le toca a cada
medida. Sin esto la serif grande sale blanda y la pequeña, apelmazada.
Los TAMAÑOS los pone cada hoja: en un móvil una escala de escritorio no
cabe, y al revés se ve pequeña. Aquí solo está lo que no cambia. */
h1,h2,h3{
font-family:'Fraunces',Georgia,'Times New Roman',serif;
font-weight:600;line-height:1.06;margin:0 0 .55rem;
text-wrap:balance;letter-spacing:-.018em;
}
h1{font-variation-settings:'opsz' 144;letter-spacing:-.028em}
h2{font-variation-settings:'opsz' 72}
h3{line-height:1.22;font-variation-settings:'opsz' 24;letter-spacing:-.008em}
p{margin:0 0 1.05rem;max-width:37rem}
a{color:var(--veta);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--veta-os)}
/* ── La retícula ────────────────────────────────────────────────────────────── */
.env{max-width:var(--ancho);margin:0 auto;padding:0 1.35rem}
.banda{position:relative}
.banda--clara{background:var(--blanco)}
.banda--piedra{background:var(--piedra-2)}
.banda--tinta{background:var(--tinta);color:#DEDCD5}
.banda--tinta h2,.banda--tinta h3{color:#F6F3EC}
.banda--tinta p{color:#A6ADA6}
.banda--tinta a{color:#9DC7B7}
/* De qué color sale la pieza en cada sitio, y con qué luz. Sobre la tinta el
relieve no es «lo mismo con menos opacidad»: la luz de un material oscuro es
un filo, no un halo. */
.banda--clara{--superficie:var(--blanco)}
.banda--piedra{--superficie:var(--piedra-2)}
.banda--tinta,.pie,.portico{
--superficie:#1B2022;
--luz:236,242,240;
--hondo:0,0,0;
--relieve: 5px 5px 14px rgba(0,0,0,.55),
-4px -4px 12px rgba(var(--luz),.05);
--relieve-2: 9px 9px 26px rgba(0,0,0,.6),
-7px -7px 20px rgba(var(--luz),.055);
--relieve-cerca:2px 2px 7px rgba(0,0,0,.5),
-2px -2px 6px rgba(var(--luz),.05);
--hundido: inset 4px 4px 10px rgba(0,0,0,.6),
inset -3px -3px 8px rgba(var(--luz),.05);
}
/* ── El ojo de sección, con su hogar ────────────────────────────────────────── */
/* El punto va colocado, no como pieza de una fila flexible: en cuanto el texto
ocupaba dos líneas, el hogar se iba a la segunda y quedaba a media altura. */
.ojo{
position:relative;padding-left:1.15rem;
text-transform:uppercase;color:var(--laton-os);font-weight:600;
margin:0 0 .9rem;line-height:1.5;
}
.ojo::before{
content:'';position:absolute;left:0;top:.5em;
width:7px;height:7px;border-radius:50%;background:var(--laton);
}
.banda--tinta .ojo{color:var(--laton)}
.grande{line-height:1.55;color:var(--tinta-2);max-width:35rem}
.banda--tinta .grande{color:#BCC3BC}
/* ── La marca de la cabecera ────────────────────────────────────────────────── */
.marca{
display:inline-flex;align-items:center;gap:.55rem;color:var(--tinta);
text-decoration:none;
}
.marca img{display:block}
/* El pie del título: las tres promesas de debajo de los botones. */
.hero-pie{
margin-top:1.4rem;font-size:.86rem;color:var(--tinta-3);
display:flex;gap:.5rem 1.15rem;flex-wrap:wrap;align-items:center;max-width:none;
}
.hero-pie span{display:inline-flex;align-items:center;gap:.45rem}
.hero-pie span::before{content:'';width:5px;height:5px;border-radius:50%;
background:var(--laton)}
/* ── Botones ────────────────────────────────────────────────────────────────── */
.acciones{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.9rem}
/* El botón principal es una pieza en relieve **con color**: el relieve lo pone
en el plano de delante, y el color dice que se pulsa. Al pulsarlo se hunde,
que es el gesto que este lenguaje hace bien.
Se anima el `transform`, nunca la sombra: animar `box-shadow` obliga a
repintar en cada fotograma y se nota en un móvil viejo. */
.btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:50px;padding:0 1.55rem;border-radius:var(--radio-2);
background:var(--veta);color:#fff;text-decoration:none;border:0;
font-weight:600;font-size:.95rem;cursor:pointer;
box-shadow:var(--relieve), 0 1px 0 rgba(255,255,255,.16) inset;
transition:transform .16s cubic-bezier(.2,.8,.2,1), background .16s;
}
.btn:hover{background:var(--veta-os);transform:translateY(-2px)}
.btn:active{transform:translateY(0);
box-shadow:inset 3px 3px 8px rgba(0,0,0,.32),
inset -2px -2px 6px rgba(255,255,255,.12)}
/* El secundario es la misma pieza sin color: relieve del propio fondo. Aquí el
contraste lo lleva el texto, que va en tinta plena. */
.btn-2{
background:var(--superficie);color:var(--tinta);
box-shadow:var(--relieve);
}
.btn-2:hover{background:var(--superficie);color:var(--tinta);transform:translateY(-2px)}
.btn-2:active{box-shadow:var(--hundido)}
.banda--tinta .btn-2{color:#E6E3DB}
/* ── Rejillas ───────────────────────────────────────────────────────────────── */
.rej{display:grid;gap:2rem 2.4rem;margin-top:2.6rem}
.rej-2,.rej-3{grid-template-columns:1fr}
.rej > div{position:relative;padding-top:1.1rem;border-top:1px solid var(--linea)}
.rej > div::before{
content:'';position:absolute;top:-3px;left:0;width:6px;height:6px;
border-radius:50%;background:var(--laton);
}
.banda--tinta .rej > div{border-color:#2A302D}
.rej p{margin-bottom:0;color:var(--tinta-2)}
.banda--tinta .rej p{color:#A6ADA6}
/* ── Las capturas, dentro de un aparato ──────────────────────────────────────
Un pantallazo pegado es un rectángulo. El mismo dentro de un marco es un
producto. */
.acto{display:grid;gap:2.4rem;align-items:center;padding:3.2rem 0;
border-top:1px solid var(--linea)}
.acto:first-of-type{border-top:0;padding-top:1rem}
.banda--tinta .acto{border-color:#2A302D}
.acto figure{
margin:0;border-radius:var(--radio-2);background:#20242A;padding:.7rem;
box-shadow:var(--sombra-2);position:relative;
}
/* Los tres puntos de la ventana: se leen como «esto es una pantalla». */
.acto figure::before{
content:'';position:absolute;top:.62rem;left:.95rem;
width:6px;height:6px;border-radius:50%;
background:#4A5158;box-shadow:11px 0 0 #4A5158, 22px 0 0 #4A5158;
}
.acto figure > img{
display:block;width:100%;height:auto;margin-top:1.15rem;
border-radius:3px;background:var(--blanco);
}
/* El móvil lleva su propio marco: bisel grueso, esquinas redondas y altavoz. */
.acto figure.movil{
max-width:17.5rem;margin-inline:auto;border-radius:2.1rem;
padding:.62rem;background:#181C21;
}
.acto figure.movil::before{
top:.72rem;left:50%;transform:translateX(-50%);
width:3.1rem;height:.28rem;border-radius:100px;background:#3A4148;box-shadow:none;
}
.acto figure.movil > img{
margin-top:1.05rem;border-radius:1.55rem;
max-height:29rem;object-fit:cover;object-position:top;
}
/* ── Listas ──────────────────────────────────────────────────────────────────
El punto de latón otra vez: el mismo hogar, en pequeño. */
.hace{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.hace li{position:relative;padding-left:1.35rem;color:var(--tinta-2);line-height:1.5}
.hace li::before{
content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
border-radius:50%;background:var(--laton);
}
.banda--tinta .hace li{color:#B4BBB4}
/* Los pasos numerados: aquí el número SÍ es información, van en ese orden. */
.lista-pasos{
list-style:none;counter-reset:paso;margin:0 0 1.2rem;padding:0;
display:flex;flex-direction:column;gap:.95rem;
}
.lista-pasos li{counter-increment:paso;position:relative;padding-left:2.7rem;
line-height:1.55;color:var(--tinta-2)}
.lista-pasos li::before{
content:counter(paso);position:absolute;left:0;top:-.05rem;
width:1.85rem;height:1.85rem;border-radius:50%;
border:1px solid var(--laton);background:var(--laton-cl);
color:var(--laton-os);font-size:.82rem;font-weight:600;
font-variant-numeric:tabular-nums;
display:flex;align-items:center;justify-content:center;
}
/* ── Tarifas ─────────────────────────────────────────────────────────────────── */
.planes{display:grid;gap:1.15rem;margin-top:2.6rem}
/* Cada plan es una pieza que sale de la pared. Sin borde: el borde y el
relieve juntos se pelean, y gana el borde. */
.plan{
background:var(--superficie);border:0;border-radius:18px;
padding:2.1rem 1.9rem;display:flex;flex-direction:column;position:relative;
box-shadow:var(--relieve);
}
.plan--destaca{box-shadow:var(--relieve-2)}
/* El plan recomendado lleva el hogar encendido en el canto de arriba. */
.plan--destaca::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--laton);border-radius:18px 18px 0 0;
}
.plan-sello{
display:inline-block;align-self:flex-start;margin-bottom:.85rem;
padding:.28rem .78rem;border-radius:100px;
background:var(--laton-cl);color:var(--laton-os);
box-shadow:var(--relieve-cerca);
font-size:.71rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.plan-precio{
font-family:'Fraunces',Georgia,serif;line-height:1;
font-variation-settings:'opsz' 96;letter-spacing:-.03em;
margin:.55rem 0 .1rem;font-variant-numeric:tabular-nums;
}
.plan-mes{color:var(--tinta-3);font-size:.85rem;margin-bottom:1.15rem}
.plan .hace{margin-top:.5rem;flex:1}
.plan .btn{margin-top:1.7rem}
.modulos{display:grid;gap:.65rem;margin-top:1.5rem}
.modulo{
background:var(--superficie);border:0;border-radius:12px;
padding:1.05rem 1.2rem;display:flex;justify-content:space-between;
align-items:baseline;gap:.6rem;
box-shadow:var(--relieve-cerca);
}
.modulo b{font-weight:600}
.modulo span{color:var(--tinta-3);font-size:.9rem;white-space:nowrap;
font-variant-numeric:tabular-nums}
/* ── La nota al margen ───────────────────────────────────────────────────────── */
/* La nota va HUNDIDA: no es una pieza encima, es algo grabado dentro. Es la
otra mitad del lenguaje, y sin ella todo sale hacia fuera y cansa. */
.nota{
margin-top:2rem;border:0;background:var(--laton-cl);
padding:1.3rem 1.5rem;border-radius:16px;
border-left:3px solid var(--laton);
box-shadow:inset 3px 3px 9px rgba(138,98,32,.20),
inset -2px -2px 7px rgba(255,255,255,.7);
}
.nota p{margin:0;max-width:none;color:#5A4514}
.nota p + p{margin-top:.6rem}
.nota b{color:#3F300B}
/* La misma nota sobre la banda oscura. Estaba resuelta con colores escritos a
mano en el HTML, y eso siempre acaba igual: una regla de la hoja le gana a un
trozo del inline y el texto se queda marrón oscuro sobre marrón oscuro. */
.banda--tinta .nota{
background:#231D11;border-left-color:var(--laton);
box-shadow:inset 4px 4px 11px rgba(0,0,0,.6),
inset -2px -2px 7px rgba(246,231,198,.07);
}
.banda--tinta .nota p{color:#DCC9A2}
.banda--tinta .nota b{color:#F6E7C6}
/* ── Preguntas ───────────────────────────────────────────────────────────────── */
/* Cada pregunta es una tecla: sale de la pared, y al abrirla se hunde. */
.preg{
border:0;border-radius:14px;margin-bottom:.7rem;
background:var(--superficie);box-shadow:var(--relieve-cerca);
padding:1.15rem 1.4rem;transition:box-shadow .2s;
}
.preg[open]{box-shadow:var(--hundido)}
.preg summary{
cursor:pointer;font-weight:600;font-size:1.04rem;list-style:none;
display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.preg summary::-webkit-details-marker{display:none}
.preg summary::after{
content:'';flex:none;width:11px;height:11px;position:relative;top:.15rem;
background:
linear-gradient(var(--laton),var(--laton)) center/100% 1.5px no-repeat,
linear-gradient(var(--laton),var(--laton)) center/1.5px 100% no-repeat;
transition:transform .2s;
}
.preg[open] summary::after{
background:linear-gradient(var(--laton),var(--laton)) center/100% 1.5px no-repeat;
}
.preg summary:hover{color:var(--veta)}
.preg p{margin:.85rem 0 0;color:var(--tinta-2)}
/* ── El pie ──────────────────────────────────────────────────────────────────── */
.pie{
background:var(--tinta);color:#8A918B;padding:3.6rem 0 2.8rem;font-size:.9rem;
position:relative;overflow:hidden;
}
/* La planta de la sala otra vez, enorme y callada, cerrando la página. */
.pie::before{
content:'';position:absolute;right:-4rem;bottom:-7rem;width:26rem;aspect-ratio:1;
background:url("/marca/megarum-agua-clara.svg") center/contain no-repeat;
pointer-events:none;
}
.pie a{color:#9DC7B7;text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie .env{display:flex;flex-wrap:wrap;gap:2rem 2.6rem;justify-content:space-between;
position:relative}
.pie b{color:#E6E3DB;display:block;margin-bottom:.45rem;
font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
/* ── El pórtico · lo que no cambia ───────────────────────────────────────────
Una cocina en marcha. Quien entra aquí trabaja en una, y lo primero que ve
tiene que ser la suya, no un titular sobre blanco. El encuadre, el velo y
las brasas los pone cada hoja: la foto de pie y la apaisada no se velan
igual ni tienen la llama en el mismo sitio. */
.portico{
position:relative;isolation:isolate;overflow:hidden;
background:var(--tinta);color:var(--piedra);
display:flex;align-items:center;
}
.portico-foto{position:absolute;inset:0;z-index:-2}
.portico-foto img{width:100%;height:100%;object-fit:cover}
.portico-velo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.portico-dentro{position:relative;width:100%;display:grid;gap:3rem;align-items:center}
.portico h1{color:var(--piedra);text-wrap:balance}
.portico .grande{color:#CFCCC2;max-width:33rem}
.portico .ojo{color:var(--laton-cl)}
.portico .ojo::before{background:var(--laton)}
.portico .hero-pie{color:#A9AFA6}
/* Sobre la foto, el secundario lleva el relieve OSCURO: con el de piedra le
salia un halo blanco arriba a la izquierda y se veia pegado encima de la
cocina en vez de dentro de ella. */
.portico .btn-2{color:var(--piedra);background:rgba(20,24,26,.55);
backdrop-filter:blur(6px)}
.portico .btn-2:hover{background:rgba(20,24,26,.72);color:var(--piedra)}
/* Las brasas suben desde la llama. Los recorridos van uno a uno en cada hoja:
con una sola animación y N retrasos se ve el patrón enseguida, y entonces
parece un salvapantallas. */
.brasas{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.brasas i{
position:absolute;width:3px;height:3px;border-radius:50%;
background:var(--laton-cl);opacity:0;
box-shadow:0 0 7px 2px rgba(216,150,62,.55);
}
@media (prefers-reduced-motion: no-preference){
.brasas i{animation:brasa linear infinite}
}
@keyframes brasa{
0% {opacity:0; transform:translate3d(0,0,0) scale(.5)}
12% {opacity:.95}
70% {opacity:.5}
100%{opacity:0; transform:translate3d(var(--dx,14px),-34vh,0) scale(.2)}
}
/* ── El desfile · lo que no cambia ───────────────────────────────────────────
El servicio, minuto a minuto. Va en horizontal porque ES una línea de
tiempo. Cómo se recorre lo decide cada hoja: con el ratón al bajar, o con el
dedo arrastrando. */
.desfile{color:var(--tinta-2)}
.desfile-tira{position:relative;display:flex;align-items:flex-start;gap:1.4rem}
/* La línea del tiempo, de verdad: una sola, por detrás de todas las horas. */
.desfile-tira::before{
content:'';position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(to right,transparent,rgba(184,135,59,.45) 4%,
rgba(184,135,59,.45) 96%,transparent);
}
.desfile-abre h2{margin:0 0 .8rem}
.desfile-abre p{color:var(--tinta-2);line-height:1.55;margin:0}
.hito{
position:relative;scroll-snap-align:center;
background:var(--superficie);border:0;border-radius:16px;
box-shadow:var(--relieve);
padding:1.8rem 1.6rem 3.2rem;display:flex;flex-direction:column;
}
/* La marca de latón sobre la línea: la columna vista desde arriba, igual que
en el resto de la página. Aquí, además, es la hora en la línea del tiempo. */
.hito::after{
content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px;
border-radius:50%;background:var(--laton);transform:translateX(-50%);
}
.hito-hora{
font-size:.78rem;letter-spacing:.16em;color:var(--laton-os);font-weight:600;
font-variant-numeric:tabular-nums;margin:0 0 .55rem;
}
.hito p{color:var(--tinta-2);font-size:.94rem;line-height:1.55;margin:0}
.hito-num{
position:absolute;right:1.1rem;bottom:.35rem;
font-family:'Fraunces',Georgia,serif;font-size:2.6rem;line-height:1;
color:var(--piedra-2);font-variant-numeric:tabular-nums;user-select:none;
}
.hito--fin{box-shadow:var(--relieve-2)}
.hito--fin .btn{margin-top:1.3rem;align-self:flex-start;min-height:44px}
/* ── Cómo tapan la pared las secciones ──────────────────────────────────────
Una sección con fondo propio cortaba la pared con una línea recta, y una
línea recta a media pared canta. Ahora cada una entra y sale con un fundido
de su propio color: la pared se apaga al llegar y vuelve al salir. */
.banda--clara{--velo:var(--blanco)}
.banda--piedra{--velo:var(--piedra-2)}
.banda--tinta{--velo:var(--tinta)}
.pie{--velo:var(--tinta)}
.banda--clara,.banda--piedra,.banda--tinta,.pie{position:relative}
.banda--clara::before,.banda--piedra::before,.banda--tinta::before,.pie::after,
.banda--clara::after,.banda--piedra::after,.banda--tinta::after{
content:'';position:absolute;left:0;right:0;height:4.5rem;
pointer-events:none;z-index:0;
}
.banda--clara::before,.banda--piedra::before,.banda--tinta::before,.pie::after{
top:-4.5rem;background:linear-gradient(to bottom,transparent,var(--velo));
}
.banda--clara::after,.banda--piedra::after,.banda--tinta::after{
bottom:-4.5rem;background:linear-gradient(to top,transparent,var(--velo));
}
/* Y el contenido de la banda, por encima de su propio velo. */
.banda > .env,.pie > .env{position:relative;z-index:1}
/* Dos secciones con fondo pegadas no tienen pared en medio: fundirse la una en
la otra solo pinta una franja de niebla. Se tocan y ya. */
.banda[class*="--"] + .banda[class*="--"]::before{display:none}
.banda[class*="--"]:has(+ .banda[class*="--"])::after{display:none}
.banda[class*="--"]:has(+ .pie)::after{display:none}
/* Foco visible siempre: esto se navega con el teclado más de lo que parece. */
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:2px solid var(--laton);outline-offset:3px;border-radius:2px;
}
::selection{background:var(--laton-cl);color:var(--tinta)}