@font-face{font-family:'DA Delta';src:local('Helvetica Neue'),local('HelveticaNeue'),local('Helvetica'),local('Arial'),local('ArialMT'),local('Roboto'),local('Segoe UI'),local('Noto Sans'),local('DejaVu Sans');unicode-range:U+2202;font-display:swap} /* ∂iario aventureros — DESIGN TOKENS * Fuente de verdad: Claude Design · "Diario Aventureros Design System" (project/tokens/*.css), * exportado a diario-aventureros-intelligence/diario-aventureros-design-system. Consolidado aquí * en un único archivo (la app importa uno solo) en el estilo del repo (tabs, hex minúsculas). * Brandbook 60/30/10: fondo claro + aire (60), texto sobrio (30), acento verde en acciones (10). * Negro nunca puro (#252525). Los colores de ROL son puntuales (badges, estados), nunca rellenos grandes. */ :root { /* ═══════════════════ COLOR ═══════════════════ */ /* ---- Base de marca ---- */ --da-surface: #f1f1f1; /* fondo base de toda la app */ --da-surface-warm: #f4f4f0; /* variante cálida usada en el portal de marca */ --da-paper: #ffffff; /* tarjetas, formularios, superficies elevadas */ --da-paper-soft: #f7f7f7; /* "Accent 7" en Figma — gris casi blanco */ --da-paper-2: #ececec; /* superficie hundida / fondo de chips */ --da-card-base: #ededee; /* base de tarjeta "revelar" (success) */ --da-ink: #252525; /* texto principal — NUNCA #000 */ --da-ink-warm: #2f2418; /* madera, carteles, tinta cálida de botones-sign */ --da-gray: #9d9d9d; /* texto secundario, placeholders, estado pendiente */ --da-gray-line: #e5e7eb; /* caso puntual: línea/borde gris (gray-200) */ --da-accent: #b9c91c; /* verde lima — acción, CTA, éxito, color de marca */ --da-accent-deep: #cfde3f; /* cima del degradado del cartel activo */ --da-accent-ink: #2e3300; /* texto oscuro legible SOBRE el verde */ --da-accent-shadow: rgba(140, 155, 0, 0.3); /* sombra inferior chunky de botones verdes */ /* ---- Roles de la comunidad (uso puntual) ---- */ --da-member: #dc00d3; /* magenta — miembro, exclusividad */ --da-grumete: #fed01a; /* amarillo — grumete, bienvenida, calidez */ --da-partner: #23cf9d; /* verde-agua — partner / colaborador */ --da-pendiente: #9d9d9d; /* gris — pendiente / explorando */ /* * El ámbar oscuro que pedía el punto A-3 del modelo, y que faltaba. * * La regla es: el color del rol vive en el aro, el sello y el relleno; el texto * va en tinta. Ninguno de los colores de rol llega a 4,5:1 sobre blanco * (grumete 1,47 · accent 1,84 · colaborador 2,00 · pendiente 2,71 · miembro 4,21), * así que cuando hace falta ESCRIBIR algo en amarillo —"ya es grumete"— no se * puede usar --da-grumete. * * Mismo tono (48°) y misma saturación que --da-grumete, bajada la luminosidad * hasta pasar el listón con margen en TODAS las superficies claras del producto: * blanco 5,87:1 · paper-soft #f7f7f7 5,48:1 · superficie #f1f1f1 5,20:1 · * card-base #ededee 5,02:1 · hundido #ececec 4,97:1 · pastilla #e9e9e9 4,84:1 · * crema de aviso #fdf3d0 5,29:1. Ya no hace falta la negrita para que se lea. * * 06/09/2026 — bajado de #846a01 (que se quedaba en 4,38:1 sobre la pastilla * amarilla, a un pelo del listón) al #7a6200 que ya estaba escrito a mano en * Embudo.css:232 y EmbudoAuth.css:306. Así hay UN solo ámbar de escribir. */ --da-grumete-ink: #7a6200; /* * El gris que se puede LEER, y es la otra mitad del mismo punto A-3. * * `--da-gray` (#9d9d9d) está en la lista de colores que no llegan a 4,5:1 — da 2,71:1 * sobre blanco— y sin embargo es el que usa `--text-secondary`, o sea casi toda la letra * pequeña del producto. Mientras eso sea solo ambiente da igual; el problema es cuando * en ese gris va escrita **una regla** («avisa si no vas», «normas de comunidad», * «1 plaza pedida, todavía sin respuesta»), porque entonces lo que no se lee es * información. * * Mismo gris neutro, bajado hasta pasar el listón en las tres superficies claras del * producto: blanco 5,74:1 · superficie #f1f1f1 5,08:1 · hundido #ececec 4,86:1. * * **No sustituye a `--da-gray`**: el ambiente sigue siendo ambiente. Este es para lo * secundario que además hay que poder leer. */ --da-gray-ink: #666666; /* * El mismo valor, con un nombre que **no se redefine nunca**. * * Hace falta porque las pantallas de fondo oscuro redefinen `--da-gray-ink` a un gris * claro para su contexto (ver `Resumen.css`), y dentro de ellas hay islas claras —una * nota de papel, una tarjeta blanca— donde el secundario tiene que volver a ser oscuro. * Sin un ancla, esa vuelta no se puede escribir. */ --da-gray-ink-claro: #666666; /* * El magenta que se puede LEER — cierra el punto A-3 para el rol de miembro. * * `--da-member` (#dc00d3) da 4,21:1 sobre blanco: por debajo del 4,5:1 que hace * falta para texto, y las pastillas de rol son de 10–12 px en negrita, o sea que * no cuentan como «texto grande». Cuando hay que ESCRIBIR algo en magenta —«ya es * miembro», la cifra de la cola de conversión— no se puede usar `--da-member`. * * Mismo tono (302,5°) y misma saturación (100%), luminosidad de 43,1% a 30,2%: * blanco 7,51:1 · paper-soft 7,01:1 · superficie 6,65:1 · card-base 6,42:1 · * hundido 6,36:1 · --member-tint 5,66:1 · --member-tint-solid 4,80:1. * * **No sustituye a `--da-member`**: el color del rol sigue viviendo en el aro, el * sello, el borde y el relleno. Este es solo para escribir. */ --da-member-ink: #9a0093; /* * El verde-agua que se puede LEER — el par del colaborador, y el peor caso de * todos: `--da-partner` (#23cf9d) da 2,00:1 sobre blanco, ni la mitad del listón. * * Este valor NO se inventa: ya se usaba como valor de repuesto de * `--da-partner-ink` en Demo.css, Bienvenida.css ×2, FichaAlta.css ×2 y * Guardia.css, y estaba fichado como candidato en el bundle de Design * (2026-09-02-fundacion/tokens/README-diff.md:30). Solo faltaba darlo de alta. * Mismo tono (162°), luminosidad 20,2%: * blanco 7,99:1 · paper-soft 7,46:1 · superficie 7,07:1 · card-base 6,83:1 · * hundido 6,76:1 · --partner-tint 6,54:1 · lavado #dff7ef 7,11:1. * * ⚠️ Las dos son tinta de FONDO CLARO. En pantallas oscuras NO se usan: darían * 2,04:1 y 1,92:1 sobre `--da-ink`. */ --da-partner-ink: #0b5c44; /* * Los tres lavados que se usaban con valor de repuesto y no estaban declarados. * Mismos valores que el repuesto → cambio visual cero; lo que se arregla es que * el código deje de mentir. El crema es el fondo de los avisos de consejo * (6 usos en 5 ficheros); con --da-grumete-ink encima da 5,29:1. */ --da-grumete-wash: #fdf3d0; /* crema de aviso — 6 usos, 0 declaraciones */ --da-partner-wash: #dff7ef; /* lavado teal — 7 usos en 5 ficheros */ --da-accent-wash: #f3f6d9; /* lavado lima — 6 usos en 3 ficheros */ /* ═══════════ ESTADOS DEL SISTEMA — error · aviso · info · éxito ═══════════ * * Hasta hoy no existían. `--color-error` se llamaba en 5 sitios y no estaba * definido en ninguno: caía siempre al literal #d92d20. En otras 6 pantallas el * error se pintaba con `--da-member`, el MAGENTA de miembro — un color de ROL * haciendo de ESTADO. Y `--success` (el lima) estaba definido pero sin usar, * porque el lima da 1,84:1 sobre blanco y no se puede leer. * * Mismo patrón que `--da-grumete-ink`: el color VIVO va en el aro, el borde * izquierdo, el punto y el relleno; el TEXTO va siempre en tinta. * * ⚠️ NO uses `--er`, `--su`, `--wa` ni `--in`: son de DaisyUI v4 y las pisa. * ⚠️ Tampoco `--color-error` ni `--color-primary`: son del espacio de DaisyUI v5. */ /* ERROR — ladrillo. Ni magenta (eso es «miembro») ni el rojo plano de framework: * mismo tono cálido que la madera de los carteles, bajada la luminosidad hasta que * el MISMO valor sirve de borde (listón 3:1) y de texto (4,5:1). * Texto: 5,75 · 5,37 · 5,09 · 4,92 · 4,87. Blanco encima (badge relleno): 5,75. */ --da-error: #bd3227; /* La tinta, para texto pequeño y para escribir SOBRE el tinte rojo: * 7,50 · 7,00 · 6,64 · 6,41 · 6,34 sobre base; 6,40 · 6,01 · 5,73 sobre su tinte. */ --da-error-ink: #9e2a1c; /* La misma tinta para ESCENAS OSCURAS (login de noche, Resumen). Ya estaba escrita * a mano en Login.css:334 y da 9,18:1 sobre el velo rojo del cielo nocturno. */ --da-error-ink-claro: #ffd7d3; /* AVISO — ámbar. Más naranja (31°) y más oscuro (L 40%) que el amarillo de grumete * (48°, L 55%) para que no se lean como el mismo color. El vivo NO llega a 4,5:1 en * ninguna superficie —ningún ámbar lo hace—, así que es SOLO borde/punto: * 3,91 · 3,65 · 3,46 · 3,34 · 3,31. */ --da-warn: #c4690a; /* Texto: 6,33 · 5,91 · 5,60 · 5,41 · 5,36 sobre base; 5,49 · 5,15 · 4,91 sobre tinte. */ --da-warn-ink: #8a5300; /* INFO — azul pizarra. Único tono frío del sistema, a propósito poco saturado: * informa, no compite con el lima ni con el magenta. * Vivo, solo borde/punto: 4,28 · 3,99 · 3,79 · 3,66 · 3,62. */ --da-info: #2f7fbf; /* Texto: 7,21 · 6,73 · 6,39 · 6,17 · 6,11 sobre base; 6,38 · 5,98 · 5,71 sobre tinte. */ --da-info-ink: #215b87; /* ÉXITO — el lima de marca sigue siendo el RELLENO (`--da-accent`, con * `--da-accent-ink` #2e3300 encima: 7,19:1). Lo que faltaba era el lima que SE LEE * sobre fondo claro: 6,45 · 6,02 · 5,71 · 5,51 · 5,46. Ya existía suelto y sin * nombre en Embudo.css:221, EmbudoAuth.css:31 y 58, Invitacion.css:68 y 112 y * Onboarding.css:639. Arregla el peor contraste de la app: el veredicto «encaja», * que hoy es lima escrito sobre lima (1,47:1). * * ⚠️ Ojo al sufijo: `--da-accent-ink` es la tinta que va ENCIMA del lima; * `--da-accent-text` es el lima convertido en tinta. No son intercambiables. */ --da-accent-text: #5a6400; /* ---- Madera y carteles (signpost RPG) ---- * * ⚠️ **Rebajados el 09/09/2026, y es el cambio que pidió Andoni:** *«se ha intentado hacer * ese tablón de madera, pero parece algo del Paint. Hay que darle mucho más fino, * profesional, elegante… pero con tokens, no saturando demasiado»*. * * Lo que fallaba no era la idea, era el **croma**. La madera iba a 53 % de saturación * (`#8a5a2b`), que no es madera: es terracota, y a pantalla completa satura la vista y * aplasta todo lo que se pone encima. Los mismos tonos con la mitad de croma leen como * nogal envejecido, que es lo que se buscaba — el brandbook ya lo avisaba: *«no * sobrecargar con estética RPG; usarla como guiño, no como sistema entero»*. * * Se ha mantenido la LUMINOSIDAD de cada uno para no romper las once pantallas que los * usan (el Hogar, la carta de amor, el resumen, el índice, compartir…): en todas son * fondo con tinta cálida oscura encima, así que bajar croma y subir claridad solo puede * mejorar el contraste, nunca empeorarlo. */ --da-wood-1: #76614c; /* nogal claro — antes #8a5a2b, que era terracota */ --da-wood-2: #5c4a39; /* nogal — antes #6c431f */ --da-sign-1: #ecdcbe; /* cara del cartel: pergamino, no oro */ --da-sign-2: #ddc9a4; --da-pin-1: #a68a6a; /* chincheta de latón viejo, no de plástico naranja */ --da-pin-2: #7a6247; /* ---- Canal WhatsApp (omnipresente en el producto) ---- */ --da-wa: #25d366; /* verde WhatsApp — botones "abrir chat" */ --da-wa-deep: #075e54; /* cabecera de chat */ --da-wa-bubble: #dcf8c6; /* burbuja de mensaje saliente */ /* ---- Tablón de anuncios (sello postal — paneles perforados) ---- */ --da-board-bg: #dee2b7; /* verde salvia — fondo de fila de tablón (legacy) */ --da-board-ink: #5b630c; /* olivo oscuro — texto del tablón */ --da-board-title: #2c2825; /* tinta casi negra — título grande del tablón */ --da-stamp-green: #a8bd1c; /* panel OFICIALES — cuerpo del sello verde lima */ --da-stamp-olive: #6e7615; /* panel MIEMBROS — cuerpo del sello oliva oscuro */ --da-board-card: #dce3b6; /* fila/tarjeta sage SOBRE panel verde */ --da-board-card-muted: #c7ce9e; /* fila/tarjeta sage SOBRE panel oliva */ --da-stamp-oficial: #fbb825; /* amarillo — cinta/badge "OFICIALES" */ --da-stamp-check: #fbb825; /* badge circular ✓ (oficiales) */ --da-stamp-key: #dc00d3; /* badge circular 🔑 (miembros) = magenta de marca */ /* ---- Líneas y velos ---- */ --da-border: rgba(0, 0, 0, 0.09); /* borde estándar de tarjetas */ --da-border-soft: rgba(0, 0, 0, 0.06); --da-veil: rgba(10, 10, 10, 0.4); /* overlay de modales */ /* ---- Alias semánticos — usa estos en componentes y pantallas ---- */ --bg: var(--da-surface); --bg-warm: var(--da-surface-warm); --surface-card: var(--da-paper); --surface-sunken: var(--da-paper-2); --text-primary: var(--da-ink); /* * ⚠️ **Secundario NO quiere decir ilegible.** Esto apuntaba a `--da-gray` (#9d9d9d), que * da **2,4:1** sobre el fondo de la app — muy por debajo del 4,5:1 que hace falta para * leer texto. Y como `--text-secondary` viste casi toda la letra pequeña del producto, * ahí iban escritas cosas que hay que poder leer: *«avisa si no vas»*, *«normas de * comunidad»*, *«1 plaza pedida, todavía sin respuesta»*, la letra de las cifras del * histórico. Un texto que no se lee no es diseño discreto: es decoración. * * Se cambió el 29/08/2026 al gris legible (5,1:1 sobre la superficie de la app). Sube un * punto el peso visual de la letra pequeña, y a cambio se lee. Es el punto A-3 del * modelo llevado hasta el final: *«el texto va siempre en tinta»*. * * **`--da-gray` no se toca** y sigue siendo el de antes: es el gris de lo que de verdad * es ambiente —placeholders, bordes, estados apagados, el pendiente de la senda— donde * no hay nada que leer. */ --text-secondary: var(--da-gray-ink); --text-on-accent: var(--da-accent-ink); --text-on-dark: #ffffff; --text-warm: var(--da-ink-warm); --text-member: var(--da-member-ink); /* escribir «miembro» — nunca --da-member */ --text-partner: var(--da-partner-ink); /* escribir «colaborador» — nunca --da-partner */ --accent: var(--da-accent); --accent-ink: var(--da-accent-ink); /* ---- Estados: el vivo para el aro y el borde, la tinta para el texto ---- */ --error: var(--da-error); --error-ink: var(--da-error-ink); --error-ink-claro: var(--da-error-ink-claro); --error-tint: rgba(189, 50, 39, 0.1); --error-tint-solid: rgba(189, 50, 39, 0.2); --warn: var(--da-warn); --warn-ink: var(--da-warn-ink); --warn-tint: rgba(196, 105, 10, 0.12); --warn-tint-solid: rgba(196, 105, 10, 0.22); --info: var(--da-info); --info-ink: var(--da-info-ink); --info-tint: rgba(47, 127, 191, 0.1); --info-tint-solid: rgba(47, 127, 191, 0.2); --success: var(--da-accent); /* relleno — el éxito se pinta con el verde de marca */ --success-ink: var(--da-accent-text); /* texto y borde — el lima NO se lee (1,84:1) */ --success-tint: var(--accent-tint); /* ⚠️ NO uses `--wa` en componentes: DaisyUI lo pisa con su color "warning" (oklch). * Para el verde de WhatsApp usa el token crudo `--da-wa`. */ --wa: var(--da-wa); --border: var(--da-border); --border-soft: var(--da-border-soft); /* ⚠️ **Es un COLOR, no un atajo.** `outline: var(--focus-ring)` deja el `outline-style` en * `none` y entonces NO SE VE NINGÚN FOCO: quien navega con teclado se queda sin saber * dónde está. Se escribe siempre con su grosor y su estilo delante — * `outline: 3px solid var(--focus-ring)`— como hacen `Tablon.css` y `FichaAlta.css`. */ --focus-ring: rgba(185, 201, 28, 0.2); /* halo de focus en inputs */ /* tintes de rol al 10–12% para fondos suaves de badge */ --member-tint: rgba(220, 0, 211, 0.1); --member-tint-solid: rgba(220, 0, 211, 0.2); --grumete-tint: rgba(254, 208, 26, 0.16); --grumete-tint-solid: rgba(254, 208, 26, 0.24); --partner-tint: rgba(35, 207, 157, 0.12); --partner-tint-solid: rgba(35, 207, 157, 0.2); --accent-tint: rgba(185, 201, 28, 0.12); --accent-tint-solid: rgba(185, 201, 28, 0.2); /* ═══════════════════ TIPOGRAFÍA ═══════════════════ */ /* ---- Familias ---- */ --font-display: 'DA Delta', 'Bike Park', 'Roboto', system-ui, sans-serif; /* titulares (Bike Park aún no desplegada → cae a Roboto 900) */ --font-body: 'DA Delta', 'Roboto', system-ui, -apple-system, sans-serif; /* cuerpo / UI */ --font-editorial: 'DA Delta', 'Lora', Georgia, 'Times New Roman', serif; /* modo editorial */ --font-hand: 'DA Delta', 'Gochi Hand', 'Comic Sans MS', cursive; /* acento manuscrito */ --font-pixel: 'DA Delta', 'Minecraft', 'Press Start 2P', ui-monospace, monospace; /* acento retro/RPG */ --font-mono: 'DA Delta', ui-monospace, Menlo, Consolas, monospace; /* rutas, código, tickers */ --font-adventure: 'DA Delta', 'Rubik', var(--font-body); /* títulos de tarjeta de aventura (ExperienceCard) */ --font-poster: 'DA Delta', 'Poppins', var(--font-body); /* carteles / tablón de anuncios vintage */ /* ---- Pesos ---- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* ---- Escala de tamaño (mobile-first, base 15px) ---- */ --text-xs: 11px; /* micro-labels, hints, metadatos */ --text-sm: 13px; /* secundario, subtítulos de tarjeta */ --text-base: 15px; /* cuerpo por defecto */ --text-md: 17px; /* destacado de párrafo, h3 de tarjeta */ --text-lg: 20px; /* títulos de sección pequeños */ --text-xl: 24px; /* h2 compacto */ --text-2xl: 32px; /* títulos de pantalla */ --text-3xl: 44px; /* héroes secundarios */ --text-4xl: 62px; /* héroe grande */ --text-counter: clamp(80px, 15vw, 144px); /* contadores gigantes de páginas de datos */ --text-hero: clamp(28px, 6vw, 62px); /* ---- Interlineado ---- */ --leading-tight: 0.95; /* titulares grandes */ --leading-snug: 1.1; /* títulos de tarjeta */ --leading-normal: 1.6; /* cuerpo */ --leading-relaxed: 1.7; /* editorial / textos largos */ /* ---- Tracking ---- */ --tracking-mega: -0.06em; /* contadores y héroes */ --tracking-tight: -0.04em; /* titulares */ --tracking-snug: -0.02em; /* subtítulos */ --tracking-normal: 0; --tracking-label: 0.12em; /* labels en MAYÚSCULA */ --tracking-pixel: 0.05em; /* texto pixel/RPG */ /* ═══════════════════ ESPACIADO · RADIOS · SOMBRAS · MOVIMIENTO ═══════════════════ */ /* ---- Espaciado (base 4px) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-22: 88px; /* padding vertical de secciones de landing */ --measure: 480px; /* ancho de columna de lectura */ --container: 1100px; --container-lg: 1280px; /* * ---- Radios ---- * * Andoni, 07/09/2026: *«en general botones cta más cuadrados como "mis productos" en el * de colaboradores etc. En la mayoría de la app una estética más cuadrada que * redondeada»*. * * El ancla es su propia referencia: `.co-rapido__card` (ColaboradorPortal.css:780), la * tarjeta de «Mis productos», que ya estaba a **3 px**. Y no era un caso aislado: el 3 px * ya se usaba a mano en 25 declaraciones de 15 ficheros. El lenguaje cuadrado estaba * empezado y sin sistematizar; esto lo sistematiza. * * La escala vieja era 6/8/12/16/18/22/26. Se mantiene la progresión —cuanto más grande la * pieza, algo más de radio— pero comprimida: una tarjeta grande a 3 px sigue leyéndose * como tarjeta, y a 16 px se leía como pastilla. * * ⚠️ `--radius-pill` NO se toca, y es el freno de mano de todo esto. De él cuelgan los * avatares, las pastillas de rol, los interruptores, las barras de progreso y los puntos * de paginación: 257 declaraciones en 92 ficheros que TIENEN que seguir redondas. Una cara * cuadrada deja de leerse como persona y una barra de progreso cuadrada deja de leerse * como progreso. */ --radius-xs: 2px; /* chips de tag, code inline */ --radius-sm: 3px; /* inputs */ --radius: 3px; /* botones, campos grandes — el ancla: .co-rapido__card */ --radius-md: 3px; /* tarjetas (estándar app) */ --radius-lg: 4px; /* paneles del portal */ --radius-xl: 6px; /* modales, drawers */ --radius-2xl: 8px; /* tarjetas-héroe "revelar" */ --radius-pill: 999px; /* badges, navegación, barras, avatares — NO se cuadra */ /* ---- Bordes ---- */ --border-width: 1px; --border-width-strong: 1.5px; /* inputs y burbujas RPG finas */ --border-rpg: 3px; /* contorno grueso de carteles / bocadillos pixel */ /* ---- Sombras ---- */ --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-sm: 0 3px 14px rgba(0, 0, 0, 0.06); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.08); --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.1); /* pastillas flotantes / topbar */ --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.25); --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.1); --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.04); /* Botones "chunky" — sombra inferior sólida (no blur). Se hunde al pulsar. */ --press-accent: 0 4px 0 var(--da-accent-shadow); --press-member: 0 5px 0 rgba(180, 0, 170, 0.3); --press-wood: 0 5px 0 var(--da-ink-warm); --press-wa: 0 5px 0 rgba(20, 140, 60, 0.3); /* ---- La cámara del recorrido ---- * Lo que de la cámara de `shared/ui/recorrido` pinta el CSS. Y solo eso: el * paralaje, el desenfoque y la persecución los calcula JS fotograma a fotograma y * sus cifras viven, con nombre, en `shared/ui/recorrido/camara.ts`. Copiarlas aquí * también sería tener el mismo número en dos sitios, que es como se desincronizan. */ --cam-trama: 46px; /* el punteado del fondo — es lo que hace visible el paralaje */ /* ---- Movimiento ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 0.15s; --dur: 0.3s; --dur-slow: 0.65s; } /* ═══════════════════════════════════════════════════════════════════════════ * LA ISLA FLOTANTE — la piel del motor de escenas por capas. * * Salió entera de `features/ecosistema/EscenaHogar.css`, que sabía pintar una * isla y solo una. Aquí no hay nada del Hogar: lo que era «el humo de ESTA * chimenea» es ahora «una capa con `data-vida="humo"`», y cualquier isla que * traiga humo lo tiene sin escribir una línea de CSS. * ═══════════════════════════════════════════════════════════════════════════ */ .isla { position: relative; } /* El marco de papel. Sin él la isla flota suelta — que es como va en el cielo. */ .isla--enmarcada { overflow: hidden; background: #fffdf8; border: var(--border-width-strong) solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); } /* * El lienzo mantiene la proporción del dibujo original, así que las piezas colocadas en % * caen exactamente donde estaban en la ilustración, a cualquier ancho. * `touch-action: pan-y` deja que el dedo siga pudiendo scrollear la página hacia abajo: el * paralaje se queda con el movimiento lateral y no secuestra la navegación. */ .isla__lienzo { --recorrido: 10px; --mx: 0; --my: 0; position: relative; aspect-ratio: var(--isla-proporcion, 4 / 3); touch-action: pan-y; } .isla__pieza { position: absolute; height: auto; pointer-events: none; user-select: none; transform: translate3d( calc(var(--mx) * var(--z) * var(--recorrido)), calc(var(--my) * var(--z) * var(--recorrido) * 0.6), 0 ); transition: transform 0.45s var(--ease), filter 0.3s var(--ease); } /* ── vida propia ────────────────────────────────────────────────────────── Cada bicho anima solo porque cada uno es su propio fichero. El humo sube y se deshace, la llama late y lo que revolotea va a su aire. */ .isla__pieza[data-vida='humo'] { transform-origin: 50% 100%; animation: isla-humo 7s var(--ease) infinite; } .isla__pieza[data-vida='llama'] { transform-origin: 50% 88%; animation: isla-llama 1.9s ease-in-out infinite; } .isla__pieza[data-vida='revoloteo'] { animation: isla-revoloteo 9s ease-in-out infinite; } /* El rescoldo: el halo cálido que una hoguera derrama sobre la hierba. */ .isla__resplandor { position: absolute; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 176, 60, 0.42), rgba(255, 176, 60, 0) 70%); border-radius: 50%; animation: isla-brasa 1.9s ease-in-out infinite; } @keyframes isla-humo { 0% { opacity: 0.25; transform: translate3d(0, 8px, 0) scale(0.86); } 45% { opacity: 0.95; transform: translate3d(4px, -4px, 0) scale(1.04); } 100% { opacity: 0; transform: translate3d(10px, -22px, 0) scale(1.24); } } @keyframes isla-llama { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.05, 0.94); } } @keyframes isla-brasa { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } @keyframes isla-revoloteo { 0%, 100% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(6px, -7px, 0); } 66% { transform: translate3d(-5px, 4px, 0); } } /* ── las zonas que se tocan ─────────────────────────────────────────────── Van recortadas con la silueta del dibujo (`clip-path`), así que el toque cae donde se ve la pieza y no en su rectángulo transparente. */ .isla__zona { position: absolute; z-index: 40; display: block; /* Una zona puede ser ``, `