/* ==========================================================================
VEGAS DEL VERDE — tokens.css · v2 «Vende la escapada»
Única fuente de verdad de color, tipografía, ritmo y movimiento.
NINGÚN otro archivo puede declarar valores literales de color, tamaño de
fuente, radio, sombra o duración. Si falta un token, se pide al director
de arte; no se inventa.
QUÉ CAMBIÓ EN v2 (los NOMBRES se conservan, los VALORES se ajustan):
· La dominante deja de ser el oliva y pasa a ser el VERDE BOSQUE #1E3D2F.
· El oliva baja a rol secundario (aclarado y entibiado a #5E6E3C).
· La crema de fondo gana temperatura (#F2EFE9 → #F7F2E7).
· La tinta deja de ser azulada y pasa a ser tinta verde (#1A2B33 → #16281F).
· Nace el acento de ACCIÓN cálido: --coral #E0703C, mezcla real del
amarillo (#E4CB3A) y el rojo baya (#E84C40) del logo. Los CTA dejan
de ser verde menta.
· El display pasa de Poiret One a FRAUNCES (carácter editorial).
· Los títulos de sección dejan de ir en MAYÚSCULAS espaciadas.
>>> EL DE FUENTES QUE LLEVA EL DE TODAS LAS PÁGINAS (v4):
Pide los ejes SOFT y WONK de Fraunces porque los usa base.css; si
algún día se recorta el href, se ignoran solos y no rompen nada.
CUIDADO AL EDITAR ESA URL CON HERRAMIENTAS DE TEXTO: los tramos
`@9..40` y `@9..144` llevan arroba, y una sustitución con comillas
dobles en Perl/PowerShell los interpreta como variable y se los come
en silencio. Ya pasó una vez en este proyecto: la página se quedó con
las fuentes de respaldo y no fue evidente. Después de tocarla,
compruébala con `curl` y mira que devuelva las dos familias.
(Poiret One, Josefin Sans y Jost YA NO SE CARGAN.)
========================================================================== */
:root {
/* ---------------------------------------------------------------------
1. PALETA DE MARCA
Todo sale del logo real. Los tres colores literales del logo
(menta, teal, amarillo, baya) NO se tocan; los neutros se entibian.
--------------------------------------------------------------------- */
/* — Verdes — */
--verde-bosque: #1e3d2f; /* NUEVO · DOMINANTE: fondos oscuros, marca */
--verde-bosque-hondo: #14291f; /* NUEVO · pie de sitio, degradados, veladuras */
--verde-oliva: #5e6e3c; /* era #566438 · ahora SECUNDARIO */
--verde-menta: #50c58e; /* = hojas del logo · intacto */
--teal: #4b7f7d; /* = lettering «VEGAS DEL VERDE» · intacto */
--verde-texto: #2f5f41; /* era #2e6b2e · verde de párrafo, entibiado */
/* — Neutros cálidos — */
--salvia: #dde5cd; /* era #dbe7d3 · fondo claro del logo, +cálido */
--gris-verde: #c2c7b3; /* era #bac4b4 */
/* v4 · EL FONDO SE APARTA DEL VERDE DE LAS FOTOS.
Se midieron los verdes reales de 36 fotos del sitio (61.488 píxeles
verdes, en OKLCh): son OLIVA APAGADO — L 0,526 · croma 0,082 · matiz
123°. No son esmeralda; tienen poco color propio.
La crema anterior (#f7f2e7) estaba a sólo 37° de matiz de ese oliva:
misma familia cálida amarillenta, así que en vez de realzarlo lo
aplanaba. El greige de ahora se va al lado complementario (unos 80° de
distancia), y por contraste simultáneo empuja el verde a verse más
verde sin que el fondo tenga color propio suficiente para competirle
(croma del fondo 0,013). Comprobado además a ojo, componiendo las
mismas fotos sobre ocho fondos candidatos. */
--crema: #ede6e2; /* era #f7f2e7 · greige, aparta del oliva */
--tinta: #16281f; /* tinta VERDE, ya no azulada */
--blanco: #ffffff;
/* — Carbones: las bandas «Blackberry» —
v4: más hondos y con una gota de calidez, porque contra un negro casi
puro el verde de las fotos se ve LUMINOSO, y ese es el efecto galería
que se busca. El cambio además SUBE los contrastes en negativo:
claro sobre banda pasa de 12,68:1 a 14,07:1 y la menta de 7,37 a 9,04. */
--carbon: #1c1a17; /* era #2b2b2b · tinta cálida, más honda */
--carbon-suave: #24211d; /* era #333333 · banda un punto más abierta */
/* — Cálidos: el acento de ACCIÓN — */
--amarillo: #e4cb3a; /* = círculos del logo · intacto */
--rojo-baya: #e84c40; /* = bayas del logo · intacto */
--coral: #e0703c; /* NUEVO · amarillo × baya. El «atrévete». */
--coral-hondo: #a8452a; /* NUEVO · versión legible como TEXTO */
--coral-claro: #f0a072; /* NUEVO · versión legible sobre bosque */
/* Mismos colores en triplete RGB, para transparencias:
rgb(var(--tinta-rgb) / 0.12) */
--verde-bosque-rgb: 30 61 47;
--verde-bosque-hondo-rgb: 20 41 31;
--verde-oliva-rgb: 94 110 60;
--verde-menta-rgb: 80 197 142;
--teal-rgb: 75 127 125;
--verde-texto-rgb: 47 95 65;
--salvia-rgb: 221 229 205;
--gris-verde-rgb: 194 199 179;
--crema-rgb: 237 230 226;
--tinta-rgb: 22 40 31;
--carbon-rgb: 28 26 23;
--carbon-suave-rgb: 36 33 29;
--amarillo-rgb: 228 203 58;
--rojo-baya-rgb: 232 76 64;
--coral-rgb: 224 112 60;
--coral-hondo-rgb: 168 69 42;
--coral-claro-rgb: 240 160 114;
--blanco-rgb: 255 255 255;
/* ---------------------------------------------------------------------
2. ROLES SEMÁNTICOS (usar SIEMPRE estos, no los de marca directamente)
Todos los pares texto/fondo verificados ≥ 4.5:1 (AA).
--------------------------------------------------------------------- */
--color-fondo: var(--crema);
--color-fondo-alt: var(--salvia); /* franjas alternas */
--color-fondo-oscuro: var(--verde-bosque); /* secciones en negativo */
--color-fondo-hondo: var(--verde-bosque-hondo); /* pie de sitio */
--color-fondo-carbon: var(--carbon); /* bandas neutras de sección */
--color-fondo-carbon-suave: var(--carbon-suave);
--color-superficie: rgb(var(--blanco-rgb) / 0.62); /* tarjetas sobre crema */
--color-superficie-solida: #fdfaf1;
--color-superficie-oscura: rgb(var(--crema-rgb) / 0.07); /* sobre bosque */
--color-texto: var(--tinta); /* 13.9:1 sobre crema */
--color-texto-suave: #4f5f53; /* 6.1:1 sobre crema */
--color-texto-inverso: var(--crema); /* 10.7:1 sobre bosque */
--color-texto-inverso-suave: rgb(var(--crema-rgb) / 0.78); /* 7.2:1 */
/* ACCIÓN — el CTA. Relleno coral + etiqueta tinta = 4.8:1 (AA).
El borde --color-accion-borde existe para que el botón tenga 3:1 de
contraste de contorno contra la crema (WCAG 1.4.11). */
--color-accion: var(--coral);
--color-accion-texto: var(--tinta);
--color-accion-borde: var(--coral-hondo);
--color-accion-hover: var(--verde-bosque); /* invierte a bosque + crema */
/* ACENTO — cálido cuando es texto sobre claro, verde cuando es
decorativo o va sobre oscuro. */
--color-acento: var(--verde-menta); /* 5.5:1 sobre bosque */
--color-acento-texto: var(--coral-hondo); /* 5.3:1 sobre crema */
--color-acento-alt: var(--verde-oliva); /* 5.0:1 sobre crema */
--color-acento-inverso: var(--coral-claro); /* 5.7:1 sobre bosque */
--color-destacado: var(--amarillo); /* 7.3:1 sobre bosque */
--color-alerta: var(--rojo-baya);
--color-borde: var(--gris-verde); /* filetes decorativos */
--color-borde-fuerte: var(--verde-oliva); /* contornos de componente */
--color-borde-suave: rgb(var(--verde-bosque-rgb) / 0.16);
--color-borde-inverso: rgb(var(--crema-rgb) / 0.2);
--color-velo: rgb(var(--verde-bosque-hondo-rgb) / 0.55); /* sobre fotos */
--color-velo-modal: rgb(var(--verde-bosque-hondo-rgb) / 0.74);
/* ---------------------------------------------------------------------
3. TIPOGRAFÍA
--fuente-display → titulares y cifras. Fraunces: serif editorial de
contraste alto que conversa con el trazo déco del
logo sin imitarlo.
--fuente-titulo → LA FUENTE DE ETIQUETA (eyebrow, botón, píldora,
micro-caps).
--fuente-cuerpo → la de leer.
v4 · JOST SALE, ENTRA DM SANS, y no es por gusto.
Jost es una geométrica —una Futura de los años 20— y en las geométricas
la «a», la «o» y la «e» son casi el mismo círculo. Eso se aguanta en un
titular, pero este sitio tiene un SUELO de 12,5 px puesto adrede para
lectores mayores (ver la escala de abajo), y ahí las aperturas cerradas
de Jost hacen trabajar de más al ojo. DM Sans conserva el aire
geométrico que conversa con el lettering del logo, pero abre las
aperturas y sube la altura de x: al mismo tamaño en píxeles se lee más
grande. Es la misma familia de decisión que toma blackberryfarm.com,
que usa DM Sans para todo lo que no es display.
--------------------------------------------------------------------- */
--fuente-display: "Fraunces", "Marcellus", Georgia, "Times New Roman", serif;
--fuente-titulo: "DM Sans", "Jost", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--fuente-cuerpo: "DM Sans", "Jost", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Ejes variables de Fraunces. Si el no los pide, se ignoran solos. */
--ejes-display: "SOFT" 22, "WONK" 1;
--ejes-display-sobrio: "SOFT" 14, "WONK" 0;
/* Escala fluida 375px → 1440px.
Los dos pasos altos BAJAN respecto a v1: Poiret One era filiforme y
necesitaba tamaño; Fraunces pesa mucho más a igual cuerpo. */
/* Suelo de 12,8 px medidos en un móvil de 320 px. Antes bajaba a 11,5 y de
este paso cuelgan los créditos de los fotógrafos y los pies de foto: es
texto que hay que poder leer, no adorno. Ningún token baja de 12 px. */
--paso--2: clamp(0.8rem, 0.775rem + 0.11vw, 0.85rem);
--paso--1: clamp(0.84rem, 0.797rem + 0.18vw, 0.94rem);
--paso-0: clamp(1rem, 0.947rem + 0.23vw, 1.125rem);
--paso-1: clamp(1.2rem, 1.093rem + 0.46vw, 1.45rem);
--paso-2: clamp(1.45rem, 1.257rem + 0.82vw, 1.9rem);
--paso-3: clamp(1.7rem, 1.44rem + 1.11vw, 2.35rem);
--paso-4: clamp(1.95rem, 1.55rem + 1.7vw, 2.9rem); /* era ..3.3rem */
--paso-5: clamp(2.3rem, 1.75rem + 2.35vw, 3.75rem); /* era ..4.4rem */
--paso-6: clamp(2.8rem, 1.9rem + 3.85vw, 5.25rem); /* era ..6rem */
/* Alias semánticos */
--fs-hero: var(--paso-6);
--fs-h1: var(--paso-5);
--fs-h2: var(--paso-4);
--fs-h3: var(--paso-2);
--fs-h4: var(--paso-1);
--fs-cuerpo: var(--paso-0);
--fs-grande: var(--paso-1); /* entradillas / lead */
--fs-pequeno: var(--paso--1);
--fs-micro: var(--paso--2); /* créditos, notas legales */
--fs-eyebrow: clamp(0.78rem, 0.752rem + 0.14vw, 0.85rem); /* suelo 12,5 px */
--fs-cifra: var(--paso-5); /* estadísticas (101 aves, 4 ha…) */
--peso-ligero: 300;
--peso-normal: 400;
--peso-medio: 500;
/* v3 «Blackberry»: el display adelgaza de 500 a 320. Fraunces es variable
(300–700), así que 320 es un peso real, no una simulación. A cuerpos de
display grandes el trazo fino es lo que da el aire editorial; los cuerpos
pequeños NO usan este token (h3/h4 heredan, pero apenas se notan), y las
cifras siguen en --peso-fuerte para que el dato no se desvanezca. */
--peso-display: 320; /* era 500 · el peso de los titulares en Fraunces */
--peso-fuerte: 600; /* NUEVO · sólo para cifras y remates */
--alto-linea-apretado: 1.02; /* era 1.06 */
--alto-linea-titulo: 1.14; /* era 1.16 */
--alto-linea-base: 1.68;
--alto-linea-suelto: 1.8;
--track-display: -0.02em; /* era -0.015em · Fraunces pide más cierre */
/* OJO: --track-titulo es NEGATIVO y ya NO se usa en ningún titular. Sólo
queda vivo en tres etiquetas de formulario/dato en Jost (.campo__etiqueta,
.ubi-campo__etiqueta, .ubi-dist__lugar). Los titulares serif van todos
con --tracking-display; no lo reintroduzcas en ningún hN ni en ningún
modificador de .titulo-seccion. */
--track-titulo: -0.005em; /* era 0.02em · sólo micro-etiquetas en Jost */
--track-caps: 0.14em; /* SÓLO micro-etiquetas, ya no los h2 */
--track-eyebrow: 0.26em; /* antetítulo — el único caps «de sección» */
--track-boton: 0.09em;
/* v3 «Blackberry» — los dos únicos trackings del nuevo sistema:
--tracking-rotulo va en TODO lo que es rótulo en caps (eyebrow, botón,
nav, píldora); --tracking-display abre los titulares serif finos, que a
peso 320 y cuerpo grande piden aire en vez del cierre negativo de v2. */
--tracking-rotulo: 0.16em;
--tracking-display: 0.04em;
--medida: 68ch; /* longitud de línea máxima cómoda */
--medida-corta: 46ch;
/* ---------------------------------------------------------------------
4. ESPACIADO
--------------------------------------------------------------------- */
--esp-3xs: 0.25rem;
--esp-2xs: 0.5rem;
--esp-xs: 0.75rem;
--esp-sm: 1rem;
--esp-md: 1.5rem;
--esp-lg: 2rem;
--esp-xl: 3rem;
--esp-2xl: 4rem;
--esp-3xl: 6rem;
--esp-4xl: 8rem;
/* Aire vertical de sección — fluido */
--esp-seccion: clamp(3.75rem, 2rem + 7vw, 7.5rem);
--esp-seccion-sm: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
--esp-seccion-lg: clamp(5rem, 2.5rem + 10vw, 10rem);
--gap: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem);
--gap-sm: clamp(0.75rem, 0.6rem + 0.7vw, 1.25rem);
--gap-lg: clamp(2rem, 1.2rem + 3.4vw, 4rem);
/* ---------------------------------------------------------------------
5. CONTENEDORES Y LAYOUT
--------------------------------------------------------------------- */
--ancho-xs: 34rem;
--ancho-sm: 46rem;
--ancho-md: 60rem;
--ancho-lg: 75rem;
--ancho-xl: 84rem;
--ancho-contenedor: var(--ancho-lg);
--padding-contenedor: clamp(1.15rem, 0.55rem + 2.6vw, 2.5rem);
--alto-header: clamp(4rem, 3.4rem + 2.4vw, 5.25rem);
--alto-hero: clamp(30rem, 88svh, 54rem);
--ancho-modal: 44rem; /* NUEVO · modal «Condiciones de alquiler» */
/* ---------------------------------------------------------------------
6. RADIOS
--------------------------------------------------------------------- */
--radio-xs: 0.25rem;
--radio-sm: 0.5rem;
--radio-md: 0.875rem;
--radio-lg: 1.5rem;
--radio-xl: 2.25rem;
--radio-full: 999rem;
/* ---------------------------------------------------------------------
7. SOMBRAS (suaves, nunca duras)
--------------------------------------------------------------------- */
--sombra-xs: 0 1px 2px rgb(var(--tinta-rgb) / 0.06);
--sombra-sm: 0 2px 10px -2px rgb(var(--tinta-rgb) / 0.1);
--sombra-md: 0 10px 30px -14px rgb(var(--tinta-rgb) / 0.24);
--sombra-lg: 0 24px 60px -28px rgb(var(--tinta-rgb) / 0.32);
--sombra-xl: 0 44px 96px -36px rgb(var(--tinta-rgb) / 0.4);
--sombra-header: 0 1px 0 rgb(var(--verde-bosque-rgb) / 0.1),
0 12px 32px -24px rgb(var(--tinta-rgb) / 0.4);
--sombra-accion: 0 6px 18px -8px rgb(var(--coral-hondo-rgb) / 0.55);
--sombra-modal: 0 40px 90px -30px rgb(var(--verde-bosque-hondo-rgb) / 0.5);
--anillo-foco: 0 0 0 3px rgb(var(--verde-bosque-rgb) / 0.5);
--blur-vidrio: saturate(140%) blur(14px);
--blur-modal: saturate(120%) blur(6px);
/* ---------------------------------------------------------------------
8. MAPA — el pin ya NO es el logo gigante
La foto satelital manda: pin pequeño, sombra suave, punta en el punto.
--------------------------------------------------------------------- */
--tam-pin: 2.25rem; /* 36px — tope permitido: 2.5rem */
--tam-pin-punta: 0.5rem;
--sombra-pin: 0 4px 10px -2px rgb(var(--verde-bosque-hondo-rgb) / 0.55);
--borde-pin: 2px;
/* ---------------------------------------------------------------------
9. MOVIMIENTO
--------------------------------------------------------------------- */
--dur-instant: 90ms;
--dur-rapida: 180ms;
--dur-media: 300ms;
--dur-lenta: 550ms;
--dur-reveal: 900ms;
--dur-vuelo: 4500ms; /* vuelo cinematográfico del mapa */
/* Dibujado de los iconos de trazo. Mucho más lento que un revelado: un
trazo que se pinta rápido se lee como un parpadeo, no como una mano
dibujando. A 2400 ms el recorrido se sigue con la vista y da tiempo a
que la forma se reconozca mientras se hace.
--dur-traza-detalle es para los detalles sueltos (los puntos de un
calendario, la perforación de un tiquete): esos no se recorren, se
posan, y lo hacen al final, cuando el contorno ya está. */
--dur-traza: 2400ms;
--dur-traza-detalle: 700ms;
/* La mariposa que nace al hacer clic. Ni un parpadeo ni una espera: a este
tiempo el ojo alcanza a seguirla subir y perderse sin que el clic se
sienta lento. */
--dur-mariposa: 1200ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
--ease-suave: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* El pulso de una mano que dibuja: arranca despacio, coge velocidad en el
tramo largo y frena antes de cerrar la forma. Las curvas de salida que
usa el resto del sitio empiezan a toda velocidad, y en un trazo eso se
ve mecánico —el trazo salta— en vez de dibujado. */
--ease-traza: cubic-bezier(0.62, 0.02, 0.28, 1);
--transicion: var(--dur-media) var(--ease);
--transicion-rapida: var(--dur-rapida) var(--ease);
--transicion-reveal: var(--dur-reveal) var(--ease-salida);
--desplazamiento-reveal: 28px; /* recorrido de la animación de entrada */
--escala-hover: 1.04;
/* ---------------------------------------------------------------------
10. CAPAS
--------------------------------------------------------------------- */
--z-fondo: 0;
--z-base: 1;
--z-elevado: 10;
--z-pegajoso: 50;
--z-header: 100;
--z-menu: 200;
--z-modal: 300;
--z-saltar: 400;
}
/* ==========================================================================
ACCESIBILIDAD DE MOVIMIENTO
Se anula el movimiento, nunca la visibilidad: todo debe quedar legible.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 1ms;
--dur-rapida: 1ms;
--dur-media: 1ms;
--dur-lenta: 1ms;
--dur-reveal: 1ms;
--dur-vuelo: 0ms;
--dur-traza: 1ms;
--dur-traza-detalle: 1ms;
--dur-mariposa: 1ms;
--desplazamiento-reveal: 0px;
--escala-hover: 1;
}
}