/* ========================================================================== BAAN PHO — DESIGN TOKENS · v3 -------------------------------------------------------------------------- Fuente única de verdad. Ningún color, tamaño, radio o espacio se escribe a mano fuera de este archivo. Si un valor del diseño no está aquí, se añade un token con el valor EXACTO del .dc.html. No se redondea: "cerca no vale". v2 reconcilió los colores hex del paquete de diseño en 22 tokens. Los comentarios "← #xxxxxx (n)" indican qué valores del diseño colapsan en cada token y cuántas veces aparecían, para poder auditar la decisión. v3 (auditoría contra los 16 .dc.html, conteo por propiedad): - --beige pasa a #f3ecd9: es el fondo beige real del diseño (30 usos); el #f2efe6 del README solo aparece 3 veces. - #241f10 sale de la lista de --verde-noche: sus 73 usos son todos color (texto sobre dorado) = --sobre-oro. Nunca es fondo. - Los bordes que --texto-inv absorbía por error van a --linea (#d8cfb8) y al nuevo --linea-salvia (#c2d1b6). - Las absorciones de texto con peso real (#c3ccbb 35 · #b8c0aa 15 · #a7b19d 48 · #6f7b65 16) se deshacen: cambiaban el render visible. Solo colapsan las variantes de ruido (≤8 usos). - #e3c689 no es un link (--oro-200): es el stop claro del degradado del CTA dorado → --degradado-oro. - Nuevos roles globales presentes en los 15 archivos: --oro-800 (a:hover), --oro-100 (hover del mega), --seleccion (::selection), --fondo-body. - Velos del header (20,24,15 y 41,53,40) y de los paneles oscuros (31,40,26 / 24,31,20): familias propias del diseño, no colapsan en --velo-verde/--velo-noche (que sí existen tal cual en Home, 404, Blog y Tarjeta Regalo). - Capas corregidas al mapa real del prototipo: barra 60 · header 70 · menú 80 · cookies 90. El mega no lleva z propio: vive dentro del header. - Tamaños exactos del header añadidos a la escala (21 · 15.5 · 14.5 · 13.5 · 12.5 · 9 y trackings 1 · 0.8 · 2). Breakpoint único: 900px (excepción documentada: el header del diseño añade 1180px, 900–1279px y 1280–1439px; ver header.css). ========================================================================== */ :root { /* ---------------------------------------------------------------- COLOR Fondos ------------------------------------------------------------- */ --crema: #faf8f2; /* fondo base de página */ --beige: #f3ecd9; /* fondo beige dominante (30 usos; también texto sobre botón primario) */ --beige-2: #f2efe6; /* beige de Rituales y FAQ de la Home (con velo rgba de sí mismo) */ --beige-2-rgb: 242, 239, 230; --fondo-body: #efe9dd; /* background del en los 15 archivos (overscroll) */ --blanco: #ffffff; /* fondo de cards de masaje y botones de contorno sobre salvia (16) */ --salvia: #dfe9d8; /* secciones claras verdes: el espacio, contacto */ --verde-bosque: #2f3d2e; /* secciones oscuras, footer, botón primario */ --verde-noche: #1e2517; /* fondos muy oscuros: tarjeta regalo ← #26301c · #222b19 · #1c2618 (raíz de /tarjeta/) */ --verde-tarjeta: #141c11; /* desplegable de idiomas de /tarjeta/ */ /* Oros ---------------------------------------------------------------- */ --oro-800: #96763a; /* a:hover sobre claro (global de los 15 archivos) */ /* Oscurecido de #b08d4a a #7c6334 (agosto 2026) por accesibilidad. Con el oro original, TODO el texto dorado sobre fondo claro se quedaba muy por debajo del mínimo legible: 2,93 sobre crema, 2,64 sobre beige y 2,48 sobre salvia, cuando el mínimo son 4,5. Y este token no viste un detalle suelto: son 40 reglas — eyebrows, enlaces, precios, el "5,0" del carrusel y las estrellas. Se ha bajado solo la luminosidad (49% -> 35%), manteniendo el tono (39°) y la saturación (41%) exactos, para que siga siendo el mismo oro y no otro color. Ahora cumple sobre los cuatro fondos claros: 5,36 crema · 4,83 beige · 4,95 beige-2 · 4,55 salvia. */ --oro-700: #7c6334; /* eyebrows, enlaces y estrellas sobre claro */ --oro-500: #cfa96a; /* líneas, bordes y chips sobre oscuro */ --oro-300: #e9d9ae; /* palabra destacada de titular sobre oscuro ← #ddd3bc · #dccfb0 · #f0dfab · #e2d4b0 */ --oro-200: #e4cf9d; /* links y texto de chip sobre oscuro ← #d9c79a */ --oro-100: #f4e6c2; /* hover de los links del mega-menú (30) */ --degradado-oro: linear-gradient(150deg, #e3c689, #b08d4a 70%); /* CTA circular Reservar y FAB WhatsApp desktop — #e3c689 (47) solo existe aquí */ --oliva: #7a8a45; /* eyebrows y acentos sobre fondos claros verdes ← #6d7f64 */ /* Texto sobre fondo claro --------------------------------------------- */ --tinta: #2f3d2e; /* titulares */ --texto-oscuro: #3c463a; /* texto base del shell y de las cards (41) — antes absorbido en --texto */ --texto: #4c5749; /* cuerpo ← #454f42 */ --texto-2: #5d675a; /* cuerpo secundario, listas, pies ← #6c7566 */ --texto-meta: #8a8471; /* metadatos cálidos: fechas del blog, autor de reseña (31) */ --texto-suave: #9aa48c; /* metadatos y texto terciario ← #a89c7d · #7f8f78 · #8a9179 */ /* Texto sobre verde oscuro -------------------------------------------- */ --titular-inv: #eee9db; /* titulares y logotipo ← #f1ebdc */ --titular-inv-2: #f4efe3; /* H2 de secciones oscuras de la Home (9) */ --texto-regalo: #d8d4c2; /* cuerpo de la sección tarjeta regalo (3) */ --texto-inv: #d5dccb; /* cuerpo — el color más usado de todo el sitio (600 apariciones) */ --texto-inv-2: #c3ccbb; /* cuerpo secundario sobre oscuro: item de idioma inactivo (35) */ --texto-inv-3: #b8c0aa; /* "Ver todos los masajes" del menú móvil (15) */ --texto-pie: #a7b19d; /* cuerpo del footer: claim, horario, rating (48) */ --texto-pie-2: #6f7b65; /* copyright del footer (16) */ --texto-tarjeta: #e8e4d5; /* cuerpo de /tarjeta/ sobre verde noche */ --texto-inv-suave:#8b9682; /* metadatos del footer ← #a7b19d (48) · #6f7b65 (15) */ --blanco-foto: #fdfbf4; /* titulares y texto principal sobre fotografía ← #fff */ --texto-foto: #e8e4d5; /* subtítulo/cuerpo sobre fotografía (hero) (8) */ --icono-inv: #e9e3d2; /* iconos de UI sobre oscuro: cerrar menú, flechas del carrusel (17) */ --sobre-oro: #241f10; /* texto sobre pastilla dorada (botón Reservar) */ /* Líneas y separadores ------------------------------------------------ */ --linea: #d8cfb8; /* contornos de card y chip sobre claro (border, 40) */ --linea-suave: #e7e1d2; /* separadores horizontales: FAQ, listas legales (border-top/bottom, 68) */ --linea-salvia: #c2d1b6; /* separadores sobre salvia (12) ← #b8c8ad · #c9d6bf */ --linea-oliva: #9db48f; /* contorno del botón blanco sobre salvia (3) */ --salvia-borde: #bccdb1; /* borde del mapa de contacto · peana del retrato */ --salvia-raya-1: #cddbc3; /* trama rayada del mapa de Home mientras carga */ --salvia-raya-2: #d7e3cd; --salvia-raya-3: #dbe5d2; /* trama rayada del mapa de Contacto */ --salvia-raya-4: #e6eede; --peana-1: #cddcc2; /* degradado de la peana del retrato de la fundadora */ --carga-1: #e9e2d1; /* trama rayada de carga de MasajeCard */ --carga-2: #f1ebdc; --linea-card: #eee7d6; /* separadores de la fila de precios de las cards (9) */ --linea-beige: #ddd3bc; /* separador del bloque bienestar sobre beige (5) ← #dccfb0 (flechas reseñas) */ --punto-inactivo: #e2d7bd; /* puntos del carrusel de reseñas */ --linea-inv: rgba(207, 169, 106, 0.35); /* bordes sobre oscuro (mega-menú) */ --seleccion: #b7c9ae; /* ::selection (global de los 15 archivos; texto --tinta) */ --opaco: #000000; /* canal alfa de las máscaras (no es un color visible) */ /* ---- Canales RGB, para componer transparencias sin inventar colores ---- uso: rgba(var(--oro-rgb), 0.22) */ --crema-rgb: 245, 240, 232; --salvia-rgb: 223, 233, 216; /* velo del fondo de /tarjeta/ */ --oro-rgb: 207, 169, 106; --verde-bosque-rgb: 47, 61, 46; /* halo de la barra flotante (α .22) */ --sobre-oro-rgb: 36, 31, 16; /* aro interior del CTA circular (α .35) */ --verde-barra-2: 30, 40, 29; /* stop 2 del fondo de la barra flotante (α .92) */ --verde-pie-2: 35, 46, 34; /* stop 2 del fondo del footer (α .99) */ /* ---- Estado y marcas ------------------------------------------------- */ --verde-abierto: #5de892; /* punto de "abierto ahora" */ --verde-abierto-rgb: 93, 232, 146; --verde-abierto-texto: #a8dfae; /* texto de "abierto ahora" sobre oscuro */ --whatsapp-rgb: 37, 211, 102; /* verde de marca de WhatsApp */ /* Velos sobre fotografía — nunca negro puro --------------------------- */ --velo-verde: 37, 48, 36; /* uso: rgba(var(--velo-verde), .82) */ --velo-noche: 20, 25, 13; /* Velos y fondos del marco (header/mega/menú) — familias propias ------- */ --velo-hero: 26, 31, 18; /* velo del hero de Home: to top .92 → .4 → .18 → .3 */ --velo-regalo: 30, 37, 23; /* velo de la foto de tarjeta regalo (funde a --verde-noche) */ --velo-header: 20, 24, 15; /* header transparente: rgba(α .55 → 0) y su sombra */ --verde-header: 41, 53, 40; /* header sólido: rgba(α .94) + trama-masaje; .97/.86 en otras págs */ --verde-panel-1: 31, 40, 26; /* stop 1 del degradado de mega, desplegable idioma y menú */ --verde-panel-2: 24, 31, 20; /* stop 2 (α .98–.995 según panel) */ /* ----------------------------------------------------------- TIPOGRAFÍA */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Karla', system-ui, -apple-system, sans-serif; --font-thai: 'Noto Serif Thai', var(--font-serif); /* saludo tailandes y UI tailandesa de /tarjeta/. Serif con bucles tradicionales: empareja con el Cormorant. Decision del cliente (jul 2026): descartada Noto Sans Thai, que estaba declarada pero sin usar en ninguna regla. */ /* Escala — móvil. Solo se usa un paso si su valor coincide EXACTAMENTE con el del .dc.html; si no coincide, se añade un token exacto (abajo, "tamaños exactos"). No se redondea nunca. */ --fs-3xs: 11px; /* chips, superíndices ← 9 · 10 · 11 · 11.5 */ --fs-2xs: 12px; /* eyebrow uppercase ← 12 · 12.5 */ --fs-xs: 13px; /* nav, metadatos, breadcrumb ← 13 · 13.5 */ --fs-sm: 14px; /* links de footer, UI ← 14 · 14.5 */ --fs-md: 15px; /* botones ← 15 · 15.5 */ --fs-base: 16.5px; /* cuerpo — nunca por debajo (público 50+) ← 16 · 17 */ --fs-lg: 19px; /* pregunta de FAQ, subtítulo ← 18 · 19 · 20 */ --fs-xl: 22px; /* precios y duraciones ← 21 · 22 */ --fs-2xl: 25px; /* H3 ← 24 · 25 · 26 · 27 */ --fs-3xl: 30px; /* logotipo, H2 pequeño ← 28 · 30 · 32 */ --fs-4xl: 40px; /* H2 ← 34 · 40 */ --fs-5xl: 46px; /* H1 */ --fs-cita: 33px; /* cita del momento full-bleed */ --fs-saludo: 38px; /* saludo tailandes del arco (unico en el sitio) */ /* Tamaños exactos del marco (auditados en Home v4) */ --fs-shell: 17px; /* font-size del contenedor raíz .bp-shell; desktop: --fs-base-desktop */ --fs-logo: 21px; /* wordmark BAAN PHO */ --fs-hero: 52px; /* H1 del hero de Home (los 46/72 de --fs-5xl son de otras páginas) */ --fs-hero-desktop: 84px; --fs-boton-grande: 15.5px; /* CTA del hero "Reservar hora" */ --fs-nav-desktop: 15.5px; /* links de nav ≥900px (base móvil del style=: 14px = --fs-sm) */ --fs-nav-compacta: 14.5px; /* links de nav 1280–1439px · items del desplegable de idioma */ --fs-cta-compacta: 12.5px; /* CTA tablet, botones comprimidos 1280–1439, nota del mega */ /* Los dos de arriba nacieron para la nav comprimida, pero acabaron usándose como los tokens de texto pequeño de medio sitio: links del pie, botones, legales, autor de reseña. Al escalar la escala pequeña en escritorio esos usos deben crecer y la nav comprimida NO: está comprimida justo para caber entre 1280 y 1439. Estos dos guardan el valor original para ella. */ --fs-nav-1280: 14.5px; /* links de nav en la banda comprimida */ --fs-cta-1280: 12.5px; /* CTA e items de idioma en esa misma banda */ --fs-mega-cat: 20px; /* categorías del mega (23px en desktop vía --fs-mega-cat-desktop) */ --fs-mega-cat-desktop: 23px; --fs-mega-sub: 13.5px; /* sublinks del mega (16.5px = --fs-base en desktop) */ --fs-micro: 9px; /* chevron ▾ del botón de idioma · label RESERVAR del CTA circular */ --fs-chevron-menu: 10px; /* chevron del botón de idioma dentro del menú móvil */ --fs-menu-item: 16px; /* items del desplegable de idioma del menú móvil */ --fs-icono-cerrar: 26px; /* aspa × de cerrar el menú */ --fs-eyebrow-sm: 11.5px; /* eyebrow del banner de cookies y de las cards de masaje */ --fs-cuerpo-panel: 15.5px; /* cuerpo en paneles oscuros: cookies, footer (p, dirección, teléfonos) */ /* Tamaños exactos del hub y las categorías de masajes */ --fs-h1-hub-desktop: 74px; /* H1 del hub (móvil 46 = --fs-5xl) */ --fs-hub-intro: 26px; /* claim del hub (34px desktop) */ --fs-hub-intro-desktop: 34px; --fs-h1-cat-desktop: 68px; /* H1 de categoría (móvil 42 = --fs-h2-cards) */ --fs-h2-momento: 32px; /* H2 de "¿Antes o después de competir?" (44 en desktop) */ --fs-h2-momento-desktop: 44px; --fs-momento-col: 26px; /* "Antes" / "Después" de esa sección */ --fs-h2-cat-desktop: 36px; /* H2 de card de categoría en el hub (móvil 28) */ --fs-thai-cat: 32px; /* tailandés decorativo de la intro de categoría */ --alto-header: 62px; /* alto real del header (sticky de pestañas) */ --alto-header-desktop: 78px; /* Tamaños exactos de Tarjeta Regalo */ --fs-precio-gift: 52px; /* importe grande de la gift card */ --fs-badge: 10.5px; /* etiqueta "Más elegida" */ --fs-h1-regalo-desktop: 70px; /* Tamaños exactos de Sobre Nosotros */ --fs-h1-sobre: 48px; /* H1 del hero (66px desktop) · H2 fundadora desktop */ --fs-h1-sobre-desktop: 66px; --fs-h1-art-desktop: 54px; /* H1 del artículo del blog en desktop */ --sombra-h1-blog: 0 2px 24px rgba(0, 0, 0, 0.5); /* H1 del hero del blog */ /* Tamaños exactos de la ficha de masaje */ --fs-h1-ficha: 44px; /* H1 del hero de ficha (62px desktop) */ --fs-h1-ficha-desktop: 62px; --fs-h2-faq-ficha: 32px; /* H2 de FAQ y del CTA final de ficha (42px desktop el CTA) */ /* Tamaños exactos de las secciones de Home */ --fs-intro: 29px; /* cita de la intro editorial · H3 del blog destacado */ --fs-intertitulo: 24px; /* intertítulo del wai (32px desktop) */ --fs-intertitulo-desktop: 32px; --fs-h2-cards: 42px; /* H2 de "Nuestros masajes" */ --fs-h2-gift: 37px; /* H2 de tarjeta regalo (46px desktop = --fs-cita-desktop) */ --fs-h2-blog: 38px; /* H2 del blog */ --fs-h2-faq: 34px; /* H2 de la FAQ */ --fs-card-titulo: 28px; /* H3 de card de masaje grande */ --fs-cuerpo-card: 16px; /* cuerpo de card, lista de El espacio, filas de contacto */ --fs-serif-27: 27px; /* precio de card · cita de reseña */ --fs-nota: 66px; /* "5,0" del carrusel de reseñas */ --fs-comilla: 96px; /* comilla decorativa del carrusel */ /* Escala — desktop (≥900px). Se aplican en base.css dentro del único media query; no redefinir en componentes. */ --fs-h1-desktop: 72px; --fs-h2-desktop: 54px; --fs-h3-desktop: 28px; --fs-cita-desktop: 46px; --fs-base-desktop: 18px; --fs-lg-desktop: 20px; /* subtítulo del hero en desktop */ --fs-saludo-desktop: 52px; /* saludo tailandés del arco en desktop */ /* Pesos, interlineados, tracking */ --fw-serif: 500; --fw-serif-fuerte:600; --fw-body: 400; --fw-medio: 500; --fw-fuerte: 600; --fw-negrita: 700; /* botón de idioma del header */ --lh-titular: 1.08; --lh-titular-alt: 1.24; --lh-body: 1.75; --ls-eyebrow: 3.5px; /* uppercase */ --ls-boton: 1.5px; /* uppercase (botón idioma) */ --ls-logo: 5px; --ls-nav: 1px; /* links de nav (style= base) */ --ls-nav-desktop: 0.8px; /* links de nav ≥900px */ --ls-cta: 2px; /* Reservar, "Ver todos los masajes →" (uppercase) */ --ls-boton-contorno: 2.5px; /* botones de contorno (Reservar del menú/footer) y eyebrow cookies */ --ls-eyebrow-pie: 3px; /* eyebrow del footer, bienestar y FAQ */ --ls-logo-pie: 4px; /* wordmark BAAN PHO del footer (5px en el header) */ --ls-saludo: 4px; /* transliteración "SAWASDEE" bajo el saludo tailandés */ --ls-estrellas: 7px; /* ★★★★★ del carrusel de reseñas */ --ls-tab: 0.5px; /* pestañas de las páginas legales */ /* ------------------------------------------------------------ ESPACIADO Escala de 8. */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --seccion-y: 80px; /* padding vertical de sección, móvil (78–88) */ --seccion-x: 26px; /* padding horizontal de sección, móvil (26–32) */ --seccion-y-desktop: 120px; /* (96–130) */ --contenedor: 1200px; /* contenido general */ --contenedor-texto: 1120px; /* bloques de lectura */ --contenedor-estrecho: 800px; /* FAQ, cuerpo de artículo */ /* --------------------------------------------------------------- RADIOS */ --r-xs: 10px; /* chips pequeños, badges */ --r-sm: 14px; --r-md: 16px; --r-lg: 20px; --r-card: 24px; /* card de tarjeta regalo, mapa de contacto, cards del hub */ --r-card-chica: 22px; /* MasajeCard pequeña de categoría */ --r-card-masaje: 26px; /* cards de masaje, collage, blog destacado */ --r-grande: 28px; --r-collage: 18px; /* foto pequeña del collage de El espacio */ --r-pastilla: 999px; /* botones, chips */ --r-circulo: 50%; --r-arco: 999px 999px 0 0; /* ventana arco thai (foto vertical) */ --r-arco-mini: 999px 999px 16px 16px; /* foto del bloque bienestar */ --r-arco-collage: 999px 999px 18px 18px; /* foto izquierda del collage */ --r-mordida: 40px 40px 0 0; /* sección que "muerde" a la anterior (+ margin-top:-44px) */ --mordida-y: -44px; /* -------------------------------------------------------------- SOMBRAS Casi ninguna. Solo estas. */ --sombra-barra: 0 -6px 24px rgba(30, 37, 23, 0.18); /* barra flotante inferior */ --sombra-cta: 0 4px 18px rgba(0, 0, 0, 0.28); /* botón circular reservar */ --sombra-mega: 0 24px 60px rgba(0, 0, 0, 0.4); /* mega-menú desktop */ --sombra-header: 0 2px 18px rgba(20, 24, 15, 0.28); /* header sólido tras scroll */ --sombra-desplegable: 0 20px 44px rgba(0, 0, 0, 0.42); /* desplegable de idioma */ --sombra-h1-foto: 0 2px 28px rgba(0, 0, 0, 0.5); /* text-shadow del H1 del hero */ --sombra-texto-foto: 0 1px 12px rgba(0, 0, 0, 0.4); /* text-shadow del subtítulo del hero */ --sombra-boton-hero: 0 10px 30px rgba(0, 0, 0, 0.35); /* CTA del hero */ --sombra-fab-movil: 0 10px 28px rgba(90, 66, 25, 0.55), inset 0 1px 0 rgba(255, 248, 230, 0.7); --sombra-fab-desktop: 0 10px 28px rgba(90, 66, 25, 0.45), inset 0 1px 0 rgba(255, 248, 230, 0.7); --sombra-desplegable-menu: 0 20px 44px rgba(0, 0, 0, 0.5); /* desplegable idioma dentro del menú */ --sombra-card: 0 10px 30px rgba(47, 61, 46, 0.08); /* cards de masaje sobre beige */ --sombra-card-cat: 0 10px 30px rgba(47, 61, 46, 0.14); /* cards de categoría del hub */ --sombra-card-paso: 0 8px 24px rgba(47, 61, 46, 0.06); /* pasos "Cómo funciona" de regalo */ --sombra-foto-suave: 0 14px 40px rgba(47, 61, 46, 0.14); /* foto de La historia (Sobre Nosotros) */ --sombra-card-chica: 0 8px 26px rgba(47, 61, 46, 0.07); /* MasajeCard pequeña */ --sombra-collage: 0 14px 40px rgba(47, 61, 46, 0.16); /* fotos del collage de El espacio */ --sombra-card-foto: 0 14px 40px rgba(47, 61, 46, 0.18); /* card destacada del blog */ --sombra-cita-foto: 0 2px 22px rgba(0, 0, 0, 0.55); /* cita del momento full-bleed */ --sombra-thai: 0 2px 16px rgba(0, 0, 0, 0.7); /* สวัสดี sobre foto */ --sombra-thai-sub: 0 1px 12px rgba(0, 0, 0, 0.8); /* subtítulo del sawasdee */ --sombra-h1-ficha: 0 2px 26px rgba(0, 0, 0, 0.5); /* H1 del hero de ficha */ --sombra-h2-foto: 0 1px 14px rgba(0, 0, 0, 0.4); /* H2 del CTA final sobre foto */ --sombra-retrato: 0 18px 30px rgba(47, 61, 46, 0.28); /* drop-shadow del retrato de la fundadora */ /* ------------------------------------------------------------ MOVIMIENTO */ --t-rapida: 200ms; --t-header: 300ms; /* transparente → sólido, ~80px de scroll */ --t-menu: 400ms; --t-reveal: 850ms; /* scroll-reveal real del prototipo: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1) desde translateY(26px), umbral 0.1, una sola vez (el README decía 600ms) */ --reveal-desplaza: 26px; --ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-panel: cubic-bezier(0.2, 0.8, 0.2, 1); /* desplegables y barra flotante */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --zoom-dur: 26s; /* bpZoom scale 1 → 1.07, alternate infinite (hero) */ --zoom-dur-momento: 22s; --zoom-dur-arco: 18s; --zoom-dur-regalo: 24s; /* hero de tarjeta regalo */ --zoom-dur-sig: 20s; /* foto signature de tarjeta regalo */ /* -------------------------------------------------------------- TRAMAS */ --trama-hojas: url('/img/trama-hojas.svg'); /* mega (520px), desplegable idioma (320px) */ --trama-masaje: url('/img/trama-masaje.svg'); /* header sólido (430px), menú (560px) */ --trama-tam: 520px; /* ---------------------------------------------------------------- CAPAS Mapa real del prototipo. El mega no lleva z: vive dentro del header. */ --z-barra: 60; /* barra flotante móvil y FAB WhatsApp desktop */ --z-header: 70; --z-menu: 80; /* menú fullscreen móvil */ --z-cookies: 90; } /* -------------------------------------------------------------------------- ESCALA PEQUEÑA EN ESCRITORIO (añadido agosto 2026) El prototipo se dibujó en móvil, y su pasada de escritorio subió titulares y cuerpo (--fs-*-desktop: H1 46→72, H2 40→54, cuerpo 16,5→18) pero dejó el extremo pequeño intacto. Resultado: en móvil el H1 mide 3,8 veces el eyebrow; en un monitor grande, 6 veces. Cuanto mayor la pantalla, más diminuto se ve el detalle. En un 27" el pie del sello ("Mediterranean Championship in Massage · Barcelona, 2025", 13px) no se lee. Se corrige aquí y no componente a componente: estos ocho tokens los usan 149 reglas repartidas en 17 hojas. Redefinirlos dentro de la media query los sube todos a la vez, sin tocar un solo selector, sin añadir especificidad y sin duplicar valores. Factor ~1,15: suficiente para que el detalle acompañe al titular, discreto para no romper el aire del diseño. Es la primera desviación deliberada del prototipo; para deshacerla basta con borrar este bloque. -------------------------------------------------------------------------- */ @media (min-width: 900px) { :root { --fs-3xs: 14.5px; /* 11 · chips, etiquetas de gift card, superíndices. Se queda medio punto por debajo del eyebrow para que la jerarquía entre los dos aguante. */ --fs-badge: 12.5px; /* 10,5 · etiqueta "Más elegida" de la gift card */ --fs-2xs: 15px; /* 12 · eyebrow uppercase — el más señalado */ --fs-xs: 16px; /* 13 · metadatos, pie del sello, breadcrumb */ --fs-sm: 17px; /* 14 · links de footer y UI */ --fs-md: 18px; /* 15 · botones */ --fs-base: 19px; /* 16,5 · cuerpo */ /* Los dos de abajo dicen lo mismo que --fs-base por caminos distintos: --fs-base-desktop lo lee .bp-shell y --fs-shell, el cuerpo del artículo del blog. Si no suben con él, el mismo párrafo mide 19px en la home y 17 en el blog. Van juntos a propósito; el día que se unifiquen los tres tokens, esta duplicación desaparece. */ --fs-base-desktop: 19px; /* 18 */ --fs-shell: 19px; /* 17 */ --fs-cuerpo-card: 18.5px; /* 16 · cuerpo de card y filas de contacto */ --fs-cuerpo-panel: 18px; /* 15,5 · cookies y footer */ /* Estos tres se llaman "compacta"/"sub" por su origen en la nav y el mega, pero hoy visten links del pie, legales, botones y metadatos de reseña. La banda 1280–1439 se queda con --fs-nav-1280 / --fs-cta-1280. */ --fs-nav-compacta: 17px; /* 14,5 · links del pie, botón salvia */ --fs-mega-sub: 16px; /* 13,5 · legales, "Reservar" del pie, fechas */ --fs-cta-compacta: 15px; /* 12,5 · autor de reseña, total de reseñas */ /* ---- El marco ---- Logo, nav, botones y subtítulo del hero se quedaron con su medida móvil en escritorio, igual que el resto del extremo pequeño. Con un H1 de 84px al lado, un wordmark de 21px y una nav de 15,5px se leían como notas al pie de su propia cabecera. */ --fs-logo: 25px; /* 21 · wordmark BAAN PHO */ --fs-nav-desktop: 17.5px; /* 15,5 · links de la nav de escritorio */ --fs-boton-grande: 17.5px; /* 15,5 · CTA del hero y botón RESERVAR */ --fs-lg-desktop: 22px; /* 20 · párrafo bajo el H1 del hero */ /* ---- El ancho ---- Este token existía desde el principio y no lo usaba nadie: las 36 reglas que fijan el ancho del contenido repetían el literal 1120px a mano. Ya centralizadas, subirlo aquí ensancha el sitio entero. A 1920px el margen muerto pasa del 41 % al 26 %. Los bloques de lectura larga no se van con él: cada uno lleva su propio max-width (la FAQ, 780px; el cuerpo de artículo, 760px), así que siguen entre 68 y 92 caracteres por línea. Medido, no supuesto: una línea de 1400px serían unos 190 caracteres y no habría quien la leyera. */ --contenedor-texto: 1400px; /* 1120 */ --contenedor: 1480px; /* 1200 */ } } /* -------------------------------------------------------------------------- MONITOR GRANDE (≥1600px) (añadido agosto 2026) El bloque de arriba arregla el portátil, pero una escala fija no puede servir a la vez a un 13" y a un 27". A 1440px de ancho un cuerpo de 19px está bien; a 2000px es tipografía de portátil colocada en un monitor grande, y se lee pequeña por mucho que el número no haya cambiado. Segundo escalón, con el mismo criterio que el primero: sube el detalle y el cuerpo, deja quietos los titulares. El H1 ya mide 84px; si creciera también, la desproporción que estamos corrigiendo volvería igual de grande. -------------------------------------------------------------------------- */ @media (min-width: 1600px) { :root { --fs-3xs: 15.5px; --fs-badge: 13.5px; --fs-2xs: 16.5px; /* eyebrow */ --fs-xs: 17.5px; --fs-sm: 18.5px; --fs-md: 19.5px; --fs-base: 21px; /* cuerpo */ --fs-base-desktop: 21px; --fs-shell: 21px; --fs-cuerpo-card: 20px; --fs-cuerpo-panel: 19.5px; --fs-nav-compacta: 18.5px; --fs-mega-sub: 17.5px; --fs-cta-compacta: 16.5px; --fs-logo: 28px; --fs-nav-desktop: 19px; --fs-boton-grande: 19px; --fs-lg-desktop: 24px; --contenedor-texto: 1560px; --contenedor: 1640px; } } /* -------------------------------------------------------------------------- RESUELTO en v3 (auditoría por propiedad contra los 16 .dc.html): - --texto-inv-suave (125 usos, sobre oscuro) y --texto-suave (76, sobre claro): contextos disjuntos, se mantienen los dos. - --linea (40, contorno completo) y --linea-suave (68, border-top/bottom separador): roles distintos en los datos, se mantienen los dos. -------------------------------------------------------------------------- */