/* ⚠️ GENERADO por docs/campanas/invitacion/personal.mjs — tokens y piezas de la app + lo de esta página. No se edita a mano. */ @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; } /* EL AVATAR ∂A — la geometría NO se escribe aquí: vive medida en `aro.ts` y llega en * `--hueco` desde el componente, porque cambia con el aro (el de confeti lo tiene más * pequeño). Capas: foto · aro · iconos por fuera · píldora del rol encima. */ .avatar { --avatar-size: 120px; /* Valor de respaldo. El de verdad lo pone el componente desde `aro.ts`. */ --hueco: 83.875%; display: inline-flex; flex-direction: column; gap: var(--space-2); align-items: center; margin: 0; } .avatar__pieza { position: relative; display: grid; place-items: center; width: var(--avatar-size); height: var(--avatar-size); } /* ── 1 · la foto: llena el hueco del aro, no flota dentro ── * * ⚠️ El centrado va por `inset`, NO por `place-items` del padre. * * Antes esto era `width/height: var(--hueco)` a secas, contando con que el * `place-items:center` de `.avatar__pieza` la centrara. Y no la centra: a un hijo * **absoluto** de una rejilla, el navegador le aplica el centrado del eje en línea * (horizontal) pero no el del eje de bloque, así que la foto se quedaba pegada arriba. * En un avatar de 68 px son 5,5 px, y es exactamente el desajuste que se veía. * * Con `inset` el mismo margen se reparte por los cuatro lados por definición: no * depende de qué haga el padre ni de qué navegador sea. */ .avatar__foto { position: absolute; inset: calc((100% - var(--hueco)) / 2); display: grid; place-items: center; overflow: hidden; background: var(--surface-sunken); border-radius: 50%; } .avatar__foto img { width: 100%; height: 100%; object-fit: cover; } /* ── el respaldo: iniciales, y si no hay ni nombre, una silueta ── Nunca las palabras «sin foto», que es lo que había: no cabían en el aro, salían recortadas, y encima estaban escritas a mano en el componente contra la regla de i18n. Las iniciales dicen quién es; un texto de sistema, no. */ .avatar__iniciales { font-family: var(--font-body); font-size: calc(var(--avatar-size, 44px) * 0.36); font-weight: var(--fw-bold); line-height: 1; color: var(--text-on-dark); letter-spacing: 0.01em; user-select: none; } /* La silueta: el último escalón, para quien no tiene ni foto ni nombre. */ .avatar__silueta { width: 46%; height: 46%; background: currentcolor; opacity: 0.32; mask: radial-gradient(circle at 50% 33%, #000 0 20%, transparent 21%), radial-gradient(ellipse 42% 30% at 50% 96%, #000 0 99%, transparent 100%); mask-composite: add; } /* El fondo del hueco lo pone el rol: así las iniciales se leen y de paso la pieza sigue diciendo de qué rol es aunque no haya llegado ni la foto ni el aro. */ .avatar__foto { color: var(--text-on-dark); } .avatar[data-rol='miembro'] .avatar__foto { background: var(--da-member); } .avatar[data-rol='grumete'] .avatar__foto { color: var(--da-ink); background: var(--da-grumete); } .avatar[data-rol='colaborador'] .avatar__foto { color: var(--da-ink); background: var(--da-partner); } .avatar[data-rol='pendiente'] .avatar__foto, .avatar[data-rol='invitado'] .avatar__foto { background: var(--da-gray); } /* ── 2 · el aro y el Lottie, al 100 %, por encima de la foto ── */ .avatar__lottie, .avatar__contorno { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; object-fit: contain; } .avatar__contorno[data-confeti='true'] { animation: avatar-celebra 0.6s var(--ease-bounce); } @keyframes avatar-celebra { 40% { transform: scale(1.08) rotate(-3deg); } } /* mini: sin aro dibujado, un trazo del color del rol. A 32 px el doble aro se emborrona, así que aquí la señal es un solo color y ocupa todo el hueco. */ .avatar[data-modo='mini'] .avatar__foto { inset: 0; border: 2.5px solid var(--da-gray); } .avatar[data-modo='mini'][data-rol='grumete'] .avatar__foto { border-color: var(--da-grumete); } .avatar[data-modo='mini'][data-rol='miembro'] .avatar__foto { border-color: var(--da-member); } .avatar[data-modo='mini'][data-rol='colaborador'] .avatar__foto { border-color: var(--da-partner); } /* Invitado y miembro lite: el mismo trazo, discontinuo (Andoni, 23/09/2026). */ .avatar[data-modo='mini'][data-discontinuo] .avatar__foto { border-style: dashed; } /* * ── 3 · los iconos: A CABALLO DEL ARO, y DENTRO de la caja ── * * ⚠️ Aquí estaba el segundo desajuste, y es el que explica por qué los items «nunca se * veían»: **no se veían porque no estaban en el avatar**. Tenían el mismo problema que * la foto —absolutos dentro de una rejilla, centrados solo en horizontal— así que * arrancaban pegados arriba, y encima el radio de la órbita (47 %) los mandaba otros * 25 px hacia fuera. Acababan **por encima del borde de la pieza**, y cualquier * contenedor con scroll (la tira de «personas que te cruzaste», sin ir más lejos) los * recortaba enteros. Medido: la burbuja caía 25 px por encima del avatar. * * Ahora se centran por `inset` —como la foto— y la órbita se acorta a 33 %, que es el * máximo que deja la burbuja **entera dentro de la caja** (33 % + la mitad de 32 % = 49 % * del lado, contra el 50 % que hay hasta el borde). Sigue pisando el aro, que es lo que * pide el kit, pero el avatar vuelve a ser un cuadrado autocontenido: se puede meter en * una lista, en un scroll o en una tarjeta sin que nada lo recorte. */ .avatar__icono { --item-lado: 32%; position: absolute; inset: calc((100% - var(--item-lado)) / 2); display: grid; place-items: center; font-size: calc(var(--avatar-size) * 0.155); line-height: 1; background: var(--surface-card); /* El aro fino: sin él, una burbuja blanca sobre papel blanco no se ve. */ border: 1.5px solid rgba(37, 37, 37, 0.12); border-radius: 50%; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18); transform: rotate(var(--angulo)) translateY(calc(var(--avatar-size) * -0.33)) rotate(calc(var(--angulo) * -1)); } /* El dibujo dentro de la burbuja. No llena el círculo entero: se le deja aire, o el trazo toca el borde y la pieza parece apretada. */ .avatar__icono .item { width: 70%; height: 70%; color: var(--da-ink); } /* ── 4 · la píldora del rol, superpuesta abajo ── */ .avatar__rol { position: absolute; bottom: 2%; padding: 3px calc(var(--avatar-size) * 0.09); font-family: var(--font-display); font-size: calc(var(--avatar-size) * 0.09); font-weight: var(--fw-black); color: var(--text-on-dark); text-transform: uppercase; letter-spacing: var(--tracking-label); white-space: nowrap; background: var(--da-ink); border-radius: var(--radius-xs); } .avatar__etiqueta { padding: var(--space-1) var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-on-dark); background: var(--text-primary); border-radius: var(--radius-pill); } @media (prefers-reduced-motion: reduce) { /* * ⚠️ Aquí NO se esconde el Lottie. * * Es lo que había, y en modo completo el Lottie **es el aro**: al ocultarlo, el * avatar se quedaba en una foto redonda pelada, sin la señal de rol, que es * justo lo único que el avatar existe para decir. Y encima el JSON se seguía * descargando para no verse. * * Ahora lo resuelve el componente: con movimiento reducido, `completo` se degrada * a `simple` y se pinta el contorno quieto. Aquí solo queda parar lo que anima * sin ser el aro. */ .avatar__contorno[data-confeti='true'] { animation: none; } } /* EL ARO DEL AVATAR — dos circunferencias, y los colores salen de los tokens. * La geometría vive en `aro.ts` y NO se escribe a mano aquí: si el dibujo cambia, * cambia allí y esto se entera solo. */ .aro { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* El de fuera: el color de la parada de la senda. El invitado usa el del pendiente — * la llave no es una parada, y no tiene aro propio en el kit. */ .aro__rol { stroke: var(--da-pendiente); } .aro[data-rol='grumete'] .aro__rol { stroke: var(--da-grumete); } .aro[data-rol='miembro'] .aro__rol { stroke: var(--da-member); } .aro[data-rol='colaborador'] .aro__rol { stroke: var(--da-partner); } /* El de dentro: el lima de la casa, igual en los cuatro. Es lo que dice que esto es * ∂iario aventureros y no cualquier otra app con aros de colores. */ .aro__marca { stroke: var(--da-accent); } /* La carta de amor: el sobre cerrado, el lacre y la hoja. Papel de la marca (`--da-sign-*` es el kraft de los carteles) y el lacre en el magenta de miembro. */ .carta { display: grid; place-items: center; min-height: 78vh; padding: var(--space-6) var(--space-5); } /* ═══ el sobre ═══ */ .carta__sobre { display: block; width: min(360px, 100%); padding: 0; text-align: center; cursor: pointer; background: none; border: 0; } .carta__para { display: block; margin-bottom: var(--space-4); font-family: var(--font-hand); font-size: var(--text-2xl); color: var(--da-ink-warm); transform: rotate(-3deg); } /* La caja del sobre. Todo lo de dentro se coloca contra ella. */ .carta__envoltorio { position: relative; display: block; width: 100%; height: 208px; } /* El cuerpo: kraft, con los dos pliegues de la parte de atrás insinuados. */ .carta__cuerpo { position: absolute; inset: 0; background: linear-gradient(30deg, transparent calc(50% - 1px), rgb(0 0 0 / 6%) 50%, transparent calc(50% + 1px)), linear-gradient(-30deg, transparent calc(50% - 1px), rgb(0 0 0 / 6%) 50%, transparent calc(50% + 1px)), linear-gradient(180deg, var(--da-sign-1), var(--da-sign-2)); border: var(--border-width-strong) solid rgb(0 0 0 / 10%); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } /* La solapa, encima del cuerpo, con la punta hacia abajo. Al abrir gira sobre su bisagra. */ .carta__solapa { position: absolute; top: 0; left: 0; width: 100%; height: 62%; background: linear-gradient(180deg, var(--da-sign-2), var(--da-sign-1)); border-radius: var(--radius-md) var(--radius-md) 0 0; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform var(--dur-slow) var(--ease); } .carta__de { position: absolute; right: 0; bottom: var(--space-4); left: 0; font-family: var(--font-hand); font-size: var(--text-md); color: var(--da-ink-warm); opacity: 0.85; } /* El lacre, justo en la punta de la solapa. */ .carta__lacre { position: absolute; top: 62%; left: 50%; transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease-bounce), opacity var(--dur) var(--ease); } /* La cera: una gota de lacre magenta con la seta encima. */ .carta__lacre { display: grid; place-items: center; width: 62px; height: 62px; background: radial-gradient(circle at 34% 30%, #f13ae8, var(--da-member) 55%, #9c0096); border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%; box-shadow: 0 3px 8px rgb(0 0 0 / 28%), inset 0 -3px 6px rgb(0 0 0 / 20%); } .carta__seta { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%)); } .carta__abrir { display: block; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-label); animation: carta-latido 2.4s var(--ease) infinite; } /* Al abrir: el lacre salta y la solapa cae hacia delante. */ .carta[data-estado='abriendo'] .carta__lacre { opacity: 0; transform: translate(-50%, -50%) translateY(-30px) rotate(-24deg) scale(1.25); } .carta[data-estado='abriendo'] .carta__solapa { transform: rotateX(-168deg); } .carta[data-estado='abriendo'] .carta__abrir { opacity: 0; } /* ═══ la hoja ═══ */ .carta__hoja { position: relative; width: min(480px, 100%); padding: var(--space-8) var(--space-6) var(--space-6); background: var(--da-paper); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); transform: rotate(-0.6deg); animation: carta-sale var(--dur-slow) var(--ease); } /* El filete de arriba, como el borde de un papel de carta. */ .carta__hoja::before { position: absolute; inset: var(--space-3) var(--space-3) auto; height: 3px; content: ''; background: repeating-linear-gradient(90deg, var(--da-member) 0 12px, transparent 12px 22px); opacity: 0.5; } .carta__saludo { margin: 0 0 var(--space-4); font-family: var(--font-hand); font-size: var(--text-xl); color: var(--da-ink-warm); } .carta__texto { font-family: var(--font-editorial); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-primary); } .carta__texto p { margin: 0 0 var(--space-4); } .carta__texto strong { font-weight: var(--fw-bold); } .carta__firma { display: flex; gap: var(--space-3); align-items: center; justify-content: flex-end; margin: var(--space-5) 0 0; font-family: var(--font-hand); font-size: var(--text-lg); color: var(--da-ink-warm); } /* El lacre vuelve a salir junto a la firma, pequeño: la carta va firmada y sellada. */ .carta__lacre-hoja { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; background: radial-gradient(circle at 34% 30%, #f13ae8, var(--da-member) 55%, #9c0096); border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%; box-shadow: 0 2px 5px rgb(0 0 0 / 22%); } .carta__lacre-hoja .carta__seta { width: 22px; height: 22px; } .carta__lacre-hoja .da-sello { --sello-size: 34px; } .carta__seguir { display: block; width: 100%; padding: var(--space-4) 0 0; margin-top: var(--space-5); font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; background: none; border: 0; border-top: var(--border-width) solid var(--border); } @keyframes carta-sale { from { opacity: 0; transform: translateY(28px) rotate(-3deg); } } @keyframes carta-latido { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* Quien pide menos movimiento abre la misma carta, sin vuelo. */ @media (prefers-reduced-motion: reduce) { .carta__solapa, .carta__lacre, .carta__abrir, .carta__hoja { transition: none; animation: none; } } /* ═══ La invitación personal (docs/campanas/invitacion/personal.mjs). Blanco, nada que parpadee: las entradas, una vez. ═══ */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} html{background:#fff;-webkit-text-size-adjust:100%} body{margin:0;background:#fff;color:var(--da-ink);font-family:var(--font-body);font-size:16px;line-height:1.5} button,input{font:inherit;color:inherit} img,video{max-width:100%} a{color:inherit;text-underline-offset:3px} :focus-visible{outline:3px solid var(--da-accent);outline-offset:2px} .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* la cinta de la demo, como en /invitar */ .demo__cinta{display:flex;gap:8px;align-items:center;justify-content:space-between;min-height:44px;padding:6px 12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#12130f} .demo__cinta b{color:var(--da-accent)} .demo__que{min-height:30px;padding:3px 10px;font-size:12px;text-transform:none;letter-spacing:0;color:#fff;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:999px} .demo__panel{padding:14px 16px;font-size:14px;line-height:1.5;color:#f4f4ef;background:#1c1d18} .demo__panel p{max-width:460px;margin:0 auto 8px} .demo__panel .ad-pronto{max-width:460px;margin:8px auto 0} .inv{max-width:460px;margin:0 auto;padding:0 16px;overflow-x:clip} /* 0 · la cabecera y el sobre */ .cab{display:flex;flex-direction:column;align-items:center;padding:26px 0 0;text-align:center} .cab .avatar__foto img{transform:scale(var(--zoom,1));transform-origin:var(--cx,50%) var(--cy,50%)} /* Una cara recortada (con fondo transparente, la de Andoni) va sobre blanco, no sobre el color del rol. */ .cab .avatar[data-rol] .avatar__foto:has(img){background:#fff} .cab__t{margin:12px 0 0;font:900 clamp(26px,7.6vw,32px)/1.1 var(--font-adventure);letter-spacing:-.01em;color:var(--da-ink)} .cab__rol{display:inline-flex;gap:6px;align-items:center;margin:8px 0 0;font-size:14px;color:var(--text-secondary)} .cab__rol img{width:18px;height:18px} .carta{min-height:0;padding:16px 0 4px} .carta__sobre{min-height:44px} .carta__para{font-size:30px} .carta__abrir{animation:none;opacity:.85} [data-sobre=abierto] .carta__sobre{display:none} [data-sobre=cerrado] .tras-sobre{display:none} .carta__hoja{width:100%;margin:4px 0 0;padding:28px 20px 16px;border:1px solid var(--da-border)} .carta__texto{font-size:17px} .carta__texto p{margin:0 0 12px} .capitulos.entra{animation:inv-entra .7s var(--ease) .15s both} @keyframes inv-entra{from{opacity:0;transform:translateY(16px)}} /* 1 · el vídeo, plegado */ .video{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--da-border)} .video summary{display:flex;gap:12px;align-items:center;min-height:44px;font-size:15px;font-weight:700;list-style:none;cursor:pointer} .video summary::-webkit-details-marker{display:none} .video__play{display:grid;flex:0 0 auto;place-items:center;width:38px;height:38px;font-size:13px;color:#fff;background:var(--da-ink);border-radius:50%} .video small{display:block;font-size:13px;font-weight:400;color:var(--text-secondary)} .video video{display:block;width:100%;max-height:72vh;margin:10px 0 0;background:#000;border-radius:10px} /* los capítulos */ .cap{margin:36px 0 0} .cap__t{margin:0;font:800 22px/1.2 var(--font-adventure);color:var(--da-ink)} .cap__sub{margin:4px 0 0;font-size:15px;color:var(--text-secondary)} /* 2 · lo que viene */ .fechas{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none} .fecha{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;align-items:start;padding:12px;background:#fff;border:1px solid var(--da-border);border-radius:14px;box-shadow:var(--shadow-card)} .fecha__e{display:grid;place-items:center;width:44px;height:44px;font-size:22px;background:var(--da-paper-soft);border-radius:12px} .fecha__t{margin:0;font-size:16px;font-weight:700;line-height:1.3} .fecha__c{margin:2px 0 0;font-size:14px} .fecha__l{margin:2px 0 0;font-size:14px;color:var(--text-secondary)} .fecha__pie{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:8px 0 0} .fecha__chip{display:inline-block;padding:3px 10px;font-size:12px;font-weight:700;color:var(--text-secondary);background:var(--da-paper-soft);border-radius:999px} .fecha__ver{font-size:14px;font-weight:700} .vacio{margin:12px 0 0;padding:14px;font-size:15px;background:var(--da-paper-soft);border-radius:14px} /* 3 · la mochila */ .mochila{margin:14px 0 0;overflow:hidden;background:#fff;border:2px solid var(--da-ink);border-radius:18px} .mochila__cab{display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--da-sign-1);border-bottom:2px solid var(--da-ink)} .mochila__ico{font-size:26px;line-height:1} .mochila__cab b{flex:1 1 auto;font-size:16px} .mochila__n{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;font-size:14px;font-weight:800;background:#fff;border:2px solid var(--da-ink);border-radius:999px} .mochila__hola{margin:0;padding:10px 14px 0;font-size:15px} .mochila__hola button{padding:0;font-size:13px;color:var(--text-secondary);text-decoration:underline;cursor:pointer;background:none;border:0} .mochila__lista{margin:0;padding:4px 0;list-style:none} .item{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px 14px} .item + .item{border-top:1px dashed rgba(0,0,0,.16)} .item__e{font-size:22px;line-height:1;text-align:center} .item__t{min-width:0} .item__t b{display:block;font-size:15px;line-height:1.3} .item__t small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--text-secondary)} .item__t small a{color:inherit} .item__t small b{display:inline;font-size:inherit;line-height:inherit;color:var(--da-ink)} .item__fin{display:flex;gap:2px;align-items:center} .item__p{font-size:15px;font-weight:800;white-space:nowrap} .item__p--con{font-size:13px;font-weight:700;color:var(--text-secondary)} .item__x{display:grid;place-items:center;width:44px;height:44px;margin:-8px -10px -8px 0;font-size:17px;color:var(--text-secondary);cursor:pointer;background:none;border:0;border-radius:50%} .item__confirmar{margin-top:6px;padding:0;font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer;background:none;border:0} .mochila__hoy{margin:0;padding:12px 14px;font-size:15px;font-weight:700;background:var(--da-accent-wash);border-top:2px solid var(--da-ink)} .anade{display:flex;gap:10px;align-items:baseline;justify-content:space-between;margin:22px 0 10px} .anade__t{margin:0;font:800 18px/1.25 var(--font-adventure)} .anade__bolsa{font-size:14px;font-weight:700;white-space:nowrap} .extras{display:grid;gap:10px;margin:0;padding:0;list-style:none} .extra{display:grid;grid-template-columns:42px 1fr 46px;gap:12px;align-items:center;padding:12px;background:#fff;border:2px dashed rgba(0,0,0,.2);border-radius:14px;transition:background-color .3s var(--ease),border-color .3s var(--ease)} .extra__e,.item__e{display:grid;place-items:center;width:42px;height:42px;font-size:22px;line-height:1} .item__e{width:34px;height:34px} /* La fecha, como una hoja de calendario: el día y el mes de verdad (el 📅 de Apple pinta «JUL 17», que se lee como fecha). */ .extra__e.dia,.item__e.dia{display:grid;grid-template-rows:auto 1fr;place-items:stretch;width:42px;height:44px;overflow:hidden;font-size:inherit;text-align:center;background:#fff;border:2px solid var(--da-ink);border-radius:9px} .dia small{display:block;padding:1px 0;font-size:12px;font-weight:800;line-height:1.2;text-transform:uppercase;color:#fff;background:var(--da-member-ink)} .dia b{display:grid;place-items:center;font-size:18px;font-weight:900;line-height:1} .item__e.dia{width:34px;height:36px;border-radius:7px} .item__e.dia b{font-size:15px} .extra__t{min-width:0} .extra__t b{display:block;font-size:15px;line-height:1.3} .extra__t small{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--text-secondary)} .extra__t a{display:inline-block;margin-top:4px;font-size:13px;font-weight:700} .extra__b{display:grid;place-items:center;width:46px;height:46px;padding:0;font-size:26px;font-weight:700;line-height:1;color:var(--da-accent-ink);cursor:pointer;background:var(--da-accent);border:0;border-radius:50%;box-shadow:0 3px 0 var(--da-accent-shadow)} .extra[data-dentro]{background:var(--da-accent-wash);border-style:solid;border-color:var(--da-accent)} .extra[data-dentro] .extra__b{font-size:20px;color:#fff;background:var(--da-ink);box-shadow:none} .vuelo{position:fixed;z-index:80;margin:0;pointer-events:none} /* 4 · qué pasa cuando aceptas */ .pasos{display:grid;gap:18px;margin:14px 0 0;padding:0;list-style:none} .paso{display:grid;grid-template-columns:32px 1fr;gap:12px} .paso__n{display:grid;place-items:center;width:32px;height:32px;font-size:15px;font-weight:900;color:#fff;background:var(--da-ink);border-radius:50%} .paso__c{min-width:0} .paso__c b{display:block;margin-top:4px;font-size:16px;line-height:1.3} .paso__c > p{margin:4px 0 0;font-size:15px} .mas{margin:6px 0 0} .mas summary{display:inline-flex;align-items:center;min-height:36px;font-size:14px;font-weight:700;color:var(--text-secondary);text-decoration:underline;cursor:pointer} .mas p,.mas ol{margin:6px 0 0;font-size:14px;color:var(--text-secondary)} .mas ol{padding-left:20px} .asi{margin:10px 0 0} .asi__t{margin:0 0 6px;font-family:var(--font-hand);font-size:20px;color:var(--da-member-ink);transform:rotate(-2deg);transform-origin:0 50%} .asi__pie{margin:8px 0 0;font-size:13px;color:var(--text-secondary)} /* 5 · aceptar */ .final{margin:36px 0 0;padding:20px 16px;text-align:center;background:var(--da-paper-soft);border-radius:20px} .final__resumen{margin:0 0 12px;font-size:15px} .final__si{display:block;width:100%;min-height:56px;padding:0 20px;font:800 18px/1.2 var(--font-body);color:var(--da-accent-ink);cursor:pointer;background:var(--da-accent);border:0;border-radius:999px;box-shadow:0 4px 0 var(--da-accent-shadow)} .final__si:disabled{cursor:progress;opacity:.75} .final__no{min-height:44px;margin:12px 0 0;padding:8px 6px;font-size:15px;color:var(--da-ink);text-decoration:underline;cursor:pointer;background:none;border:0} .final__quien{margin:14px 0 0;padding:14px;text-align:left;background:#fff;border:1px solid var(--da-border);border-radius:14px} .final__quien p{margin:0 0 10px;font-size:15px} .botones{display:flex;flex-wrap:wrap;gap:8px} .btn{min-height:44px;padding:0 16px;font-size:15px;font-weight:800;cursor:pointer;border-radius:999px} .btn--fuerte{color:#fff;background:#252525;border:0} .btn--suave{color:var(--da-ink);background:#fff;border:1px solid rgba(0,0,0,.18)} .final__gracias{margin:14px 0 0;font-size:15px;line-height:1.5} .inv-pie{margin:8px 0 32px;font-size:13px;text-align:center;color:var(--text-secondary)} /* 6 · la invitación de siempre, DENTRO de esta página (05/10/2026): sube encima, con su música y sus fases */ .viva{position:fixed;inset:0;z-index:9000;background:#f1f1f1;transform:translateY(100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s linear .6s} .viva[data-abierta]{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s} .viva iframe{display:block;width:100%;height:100%;border:0;background:#f1f1f1} html[data-viva] body{overflow:hidden} @media (prefers-reduced-motion:reduce){.capitulos.entra{animation:none}.extra{transition:none}.viva,.viva[data-abierta]{transition:none}} /* ═══ La pantalla de la app (invitacion/inteligente.mjs). Medida en la captura de Andoni del 05/10/2026. ═══ */ .ma{--k:.7333;--ancho:264px;--alto:356px;margin:18px auto 0;width:100%;max-width:340px;text-align:center} .ma--mini{--k:.6667;--ancho:240px;--alto:272px;margin:0;max-width:300px;text-align:left} .ma__movil{position:relative;width:calc(var(--ancho) + 16px);margin:0 auto;padding:8px;background:#1d1d1f;border-radius:34px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)} .ma--mini .ma__movil{margin:0;border-radius:28px;padding:7px} .ma__url{display:flex;align-items:center;justify-content:center;gap:4px;height:24px;margin:0 0 0;padding:0 10px;font:500 12px/1 'Poppins',system-ui,sans-serif;color:#6b6b6b;background:#e6e6e6;border-radius:26px 26px 0 0;white-space:nowrap;overflow:hidden} .ma--mini .ma__url{border-radius:21px 21px 0 0;font-size:12px} .ma__pantalla{position:relative;width:var(--ancho);height:var(--alto);overflow:hidden;background:#f1f1f1;border-radius:0 0 26px 26px} .ma--mini .ma__pantalla{border-radius:0 0 21px 21px} .ma__app{position:absolute;top:0;left:0;width:360px;transform:scale(var(--k));transform-origin:0 0;font-family:'Poppins',system-ui,sans-serif;color:#252525;text-align:center} .ma__cab{padding:10px 10px 12px;background:#f7edf4} .ma__aviso{margin:0;font-size:12px;line-height:1.35;text-align:left} .ma__prio{display:block;width:max-content;margin:6px 0 8px auto;padding:5px 9px;font-size:12px;font-weight:600;color:#252525;background:#b9c91c;border-radius:4px} .ma__barra{position:relative;display:block;padding:8px 6px;font-size:12px;font-weight:700;color:#fff;background:#252525;border-radius:6px} .ma__chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;padding:12px 10px 0} .ma__chip{display:inline-grid;place-items:center;min-height:30px;padding:0 10px;font-size:12px;font-weight:600;background:#f1f1f1;border:1px solid #e3e3e3;border-radius:999px} .ma__chip--rol{position:relative;min-width:84px} .ma__chip--rol span{grid-area:1/1;transition:opacity .35s ease} .ma__chip--rol .ma__soy{opacity:0;color:#dc00d3} .ma__salir{display:inline-grid;place-items:center;min-height:30px;padding:0 10px;font-size:12px;font-weight:600;background:#b9c91c;border-radius:6px} .ma__hola{margin:14px 0 0;font-size:12px;line-height:1.5} /* Blindaje: la pantalla vive dentro de otras páginas (p. ej. «.paso__c b» de la personal), que no le cambien la letra. */ .ma .ma__app b,.ma .ma__app p,.ma .ma__app span{margin-top:0;letter-spacing:normal} .ma .ma__hola b{display:inline;font-size:inherit;font-weight:700} .ma__hola u{text-underline-offset:2px} .ma__tarjeta{position:relative;width:212px;height:118px;margin:12px auto 0;overflow:hidden;background:repeating-linear-gradient(135deg,#a8ff36 0 26px,#8eff28 26px 46px);border-radius:14px;box-shadow:0 4px 10px rgba(0,0,0,.12)} .ma__tarjeta img{position:absolute;left:50%;bottom:-6px;width:96px;height:auto;transform:translateX(-50%)} .ma__raya{height:1px;margin:16px 34px 0;background:#e2e2e2;border:0} .ma__rol{margin:10px 0 0;font-size:13px} .ma .ma__rol b{display:block;font-size:13px;font-weight:600} .ma__rolnom{position:relative;display:inline-grid;margin-top:2px;font-size:12px;font-weight:600} .ma__rolnom span{grid-area:1/1;transition:opacity .35s ease} .ma__rolnom .ma__g{color:#e0a800} .ma__rolnom .ma__m{opacity:0;color:#dc00d3} .ma__mision{margin:8px 0 0;font-size:12px} .ma .ma__mision b{display:block;font-size:16px;font-weight:700} .ma__flecha{position:absolute;top:0;left:0;width:360px;height:260px;overflow:visible;pointer-events:none;opacity:0;transition:opacity .2s ease} .ma[data-paso="2"] .ma__flecha,.ma[data-paso="3"] .ma__flecha,.ma[data-quieta] .ma__flecha{opacity:1} .ma__flecha .ma__halo{stroke:#fff;stroke-width:11} .ma__flecha path{fill:none;stroke:#fd5b36;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1)} .ma__flecha .ma__punta{transition-delay:.55s;transition-duration:.25s} .ma__dedo{position:absolute;top:0;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;background:rgba(37,37,37,.35);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.25);opacity:0;transform:translate(300px,250px);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s ease} .ma__onda{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid #fd5b36;border-radius:50%;opacity:0;pointer-events:none} .ma__pasos{display:grid;gap:6px;max-width:300px;margin:14px auto 0;padding:0;list-style:none;text-align:left;counter-reset:ma} .ma__pasos li{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;font-size:15px;line-height:1.35;color:inherit;opacity:.28;transition:opacity .45s ease} .ma__pasos li::before{display:grid;place-items:center;width:24px;height:24px;font-size:12px;font-weight:800;color:#fff;background:#252525;border-radius:50%;content:counter(ma);counter-increment:ma} .ma__pasos li[data-ya]{opacity:1} .ma__otra{min-height:44px;margin:6px 0 0;padding:6px 10px;font:inherit;font-size:14px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0} /* El motion: cada cosa entra una vez. data-paso lo pone el JS (0 → 4). */ .ma[data-motion] .ma__movil{opacity:0;transform:translateY(22px)} .ma[data-motion] .ma-e{opacity:0;transform:translateY(10px)} .ma[data-paso] .ma__movil{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)} .ma[data-paso] .ma-e{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);transition-delay:calc(.25s + var(--i,0) * 90ms)} .ma[data-paso="2"] .ma__flecha path,.ma[data-paso="3"] .ma__flecha path,.ma[data-paso="4"] .ma__flecha path,.ma[data-quieta] .ma__flecha path{stroke-dashoffset:0} .ma[data-paso="2"] .ma__barra,.ma[data-paso="3"] .ma__barra,.ma[data-quieta] .ma__barra{box-shadow:0 0 0 3px #fd5b36} .ma[data-paso="3"] .ma__dedo{opacity:1;transform:translate(180px,var(--barra-y,104px))} .ma[data-toque] .ma__barra{animation:ma-toque .3s ease} .ma[data-toque] .ma__onda{animation:ma-onda .6s ease-out} @keyframes ma-toque{50%{transform:scale(.96)}} @keyframes ma-onda{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(5)}} .ma[data-paso="4"] .ma__flecha{opacity:0;transition:opacity .4s ease} .ma[data-paso="4"] .ma__chip--rol .ma__soy,.ma[data-paso="4"] .ma__rolnom .ma__m{opacity:1} .ma[data-paso="4"] .ma__chip--rol .ma__era,.ma[data-paso="4"] .ma__rolnom .ma__g{opacity:0} .ma[data-paso="4"] .ma__chip--rol{border-color:#dc00d3} @media (prefers-reduced-motion:reduce){ .ma *,.ma{transition:none!important;animation:none!important} } /* ═══ «Antes de irte» (invitacion/inteligente.mjs): una vez, con cariño. ═══ */ .rc{position:fixed;inset:0;z-index:10001;display:flex;align-items:flex-end;justify-content:center;font-family:var(--font-body)} .rc[hidden]{display:none} .rc__velo{position:absolute;inset:0;background:rgba(18,19,15,.45);opacity:0;transition:opacity .35s ease} .rc__hoja:focus{outline:none} .rc__hoja{position:relative;width:100%;max-width:460px;padding:22px 20px calc(20px + env(safe-area-inset-bottom));color:#252525;text-align:left;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px -16px rgba(0,0,0,.35);transform:translateY(100%);transition:transform .45s cubic-bezier(.22,1,.36,1)} .rc[data-abierto] .rc__velo{opacity:1} .rc[data-abierto] .rc__hoja{transform:none} .rc__t{margin:0 0 10px;font-size:20px;font-weight:800;line-height:1.25} .rc__p{margin:0 0 10px;font-size:16px;line-height:1.5} .rc__p b{font-weight:800} .rc__p--suave{font-size:15px;color:#5f5f5f} .rc__si{display:block;width:100%;min-height:52px;margin:14px 0 0;padding:0 18px;font:inherit;font-size:17px;font-weight:800;color:#2f2418;cursor:pointer;background:#b9c91c;border:0;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.12)} .rc__no{display:block;width:100%;min-height:44px;margin:6px 0 0;padding:6px;font:inherit;font-size:15px;color:#252525;text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0} @media (prefers-reduced-motion:reduce){.rc__velo,.rc__hoja{transition:none}} /* ═══ «Esto no se guarda» — _comun/aviso-demo.mjs: sale de la etiqueta DEMO al tocar cualquier cosa ═══ */ .ad-aviso{position:fixed;z-index:120;top:12px;left:12px;display:none;box-sizing:border-box;width:max-content;max-width:min(340px,calc(100vw - 24px));padding:11px 14px 12px;font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.4;letter-spacing:0;text-align:left;text-transform:none;color:#f4f4ef;background:#12130f;border:1px solid color-mix(in srgb,var(--da-accent,var(--accent,#b9c91c)) 60%,transparent);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.35);pointer-events:none;transform-origin:var(--ad-x,50%) 0} .ad-aviso b{font-weight:800;color:var(--da-accent,var(--accent,#b9c91c))} .ad-aviso::before{content:'';position:absolute;top:-7px;left:var(--ad-x,50%);width:12px;height:12px;margin-left:-6px;background:#12130f;border-top:1px solid color-mix(in srgb,var(--da-accent,var(--accent,#b9c91c)) 60%,transparent);border-left:1px solid color-mix(in srgb,var(--da-accent,var(--accent,#b9c91c)) 60%,transparent);transform:rotate(45deg)} .ad-aviso[data-ad-sin-pico]::before{display:none} .ad-aviso[data-ad-medir]{display:block;visibility:hidden} .ad-aviso[data-ad-visible]{display:block;animation:ad-sale .34s cubic-bezier(.22,1,.36,1) both} .ad-aviso[data-ad-va]{animation:ad-va .26s ease both} @keyframes ad-sale{from{opacity:0;transform:translateY(-6px) scale(.55)}} @keyframes ad-va{to{opacity:0;transform:translateY(-4px) scale(.96)}} .ad-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .ad-pronto{margin:10px 0 0;font-size:.8rem;line-height:1.4;color:inherit;opacity:.78} .ad-pronto b{font-weight:800} @media (prefers-reduced-motion:reduce){.ad-aviso[data-ad-visible],.ad-aviso[data-ad-va]{animation:none}}