/* ========================================================================== CABAÑAS DE HUGO — Design tokens y sistema visual Nivel Básica — Bellino Webs Sitios del research (recapturados con playwright-cli a 1440px en la ronda 6; las capturas de la ronda 3 no habían sobrevivido, así que las referencias de abajo salen de mirar los sitios de nuevo, no de memoria): A. Eastwind Hotels (eastwindhotels.com) B. Postcard Cabins / Marriott (postcardcabins.com) C. Correntoso Lake & River Hotel (correntoso.com) — Neuquén, AR D. Juvet Landskapshotell (juvet.com) — Noruega E. Awasi (awasi.com) — AR/CL F. Dunton River Camp (duntondestinations.com) G. Linear (linear.app) — otro rubro, calidad tipográfica Research de la ronda 31 (lodges de PESCA reales, medidos con playwright-cli sobre el render, no de memoria — ver el bloque de la ronda 31 más abajo): H. Pirá Lodge (piralodge.com) — Iberá, Corrientes, AR. Dorado. I. Nervous Waters (nervouswaters.com) — AR/CL/MX/BS/US. J. Crystal Creek Lodge (crystalcreeklodge.com) — Alaska. K. Untamed Angling (untamedangling.com) — Amazonas. ========================================================================== RONDA 31 — LA PALETA COMPLETA. DE LOS COLORES DEL MONTE A LOS DEL RÍO. ========================================================================== Pedido: "rediseño completo del sistema de color, no una iteración sobre la paleta actual". Lo que sigue es la derivación entera y el chequeo letra por letra contra los 3 anti-defaults, que es la condición no negociable. EL DIAGNÓSTICO, Y ES MEDIBLE ---------------------------- El sitio se llama "Cabañas frente al río Paraná" y estaba pintado con los colores del MONTE. Peor: estaba pintado con dos familias de hue que no tenían relación entre sí. Medido sobre los tokens que había: banda clara --color-bg #EEF1EC hue 96° (verde frío) banda oscura --color-dark #16231D hue 154° (verde carbón) tarjeta --color-water #24353D hue 199° (agua, ronda 28) tinta s/osc. --color-on-dark #EDE4D3 hue 37° (crema cálido) Cuatro superficies, cuatro familias distintas: 96 / 154 / 199 / 37. Entre la banda clara y la oscura hay 58° de distancia, o sea que NO son los dos extremos de una rampa — son dos colores distintos que conviven. Eso es exactamente lo que la skill `redesign-existing-projects` marca como defecto: "una sección oscura que rompe una página clara se lee como un copiar-pegar; o se compromete el sitio entero o se sostiene una sola familia tonal". Acá el sitio venía haciendo lo primero sin decidirlo. DE DÓNDE SALE EL HUE NUEVO (no se eligió: ya estaba medido) ---------------------------------------------------------- La ronda 28 había medido el agua de la foto real de la pileta promediando 147 píxeles que cumplían "azul y verde por encima del rojo": PROMEDIO RONDA 28 .......... #4B7689 HSL(199°, 29%, 42%) y lo usó para UNA tarjeta. La ronda 31 remuestreó con el mismo método sobre el agua en sombra del atardecer (13.685 píxeles, mismo filtro): AGUA EN SOMBRA ............. #365C68 HSL(195°, 32%, 31%) Dos mediciones independientes, dos fotos distintas, 4° de diferencia. Y el perfil vertical de la foto nueva del hero (banda por banda, 4% de alto, sobre el 75% central del cuadro) da el río a hue 209-227 y el cielo a 206. El lugar entero mide entre 195° y 209°. El sistema se planta en 200°, que es la mediana de eso — no es una preferencia, es dónde cae el promedio. LA RAMPA NUEVA — UNA SOLA FAMILIA, DOS EXTREMOS ----------------------------------------------- --color-bg #F0F3F4 HSL(195°, 15%, 95%) --color-bg-alt #E5E9EB HSL(200°, 13%, 91%) --color-border #D0D8DC HSL(200°, 15%, 84%) --color-on-dark #ECF1F3 HSL(197°, 23%, 94%) --color-on-dark-soft #B3C0C7 HSL(201°, 15%, 74%) --color-ink-soft #44565F HSL(200°, 17%, 32%) --color-water #29434C HSL(195°, 30%, 23%) --color-dark-lift #23373E HSL(196°, 28%, 19%) --color-dark #18292F HSL(196°, 32%, 14%) --color-ink #17242B HSL(201°, 30%, 13%) --color-darker #0F1B1F HSL(195°, 35%, 9%) Once escalones, hue 195-201, o sea 6° de dispersión total contra los 162° de antes. La saturación sube al bajar la luz (15% arriba, 35% abajo), que es cómo se comporta el agua real y lo que evita que el extremo oscuro se lea como gris de oficina. CONTRASTES, TODOS MEDIDOS (ninguno estimado): --color-ink / --color-bg ......... 14,23:1 --color-ink-soft / --color-bg ......... 6,87:1 --color-wood / --color-bg ......... 7,01:1 --color-on-dark / --color-dark ....... 13,20:1 --color-on-dark / --color-darker ..... 15,41:1 --color-on-dark / --color-dark-lift .. 10,93:1 --color-on-dark / --color-water ...... 9,21:1 --color-on-dark-soft / --color-dark ..... 8,08:1 --color-on-dark-soft / --color-water .... 5,64:1 --color-wood-soft / --color-dark ....... 5,99:1 --color-wa-ink / --color-wa ......... 8,52:1 --color-wa / --color-dark ....... 7,58:1 QUÉ NO CAMBIÓ, Y POR QUÉ NO ES PEREZA ------------------------------------- · LA MADERA (#6C4B2F). Es el promedio ponderado de los píxeles de madera de SIETE fotos del sitio, medido en la ronda 12. Ninguna medición que se pueda hacer en una pasada le gana a esa. Lo que sí cambió es su TRABAJO: antes competía con --color-on-dark, que también era cálido (hue 37°), y por eso el acento no se leía como acento. Ahora la madera es lo único cálido de la página. Y la relación mejoró: 28° contra 200° son 172° de separación, o sea complementarios reales; contra los 96° del fondo viejo eran 68°, que es una relación turbia. La regla dura sigue intacta: LA MADERA NO PINTA CONTROLES. · EL VERDE DE WHATSAPP (#25D366). Se evaluó reemplazarlo, como pide el brief, y la conclusión es que la paleta nueva lo MEJORA en vez de obligarlo a irse. El número: ANTES --color-dark 152° vs --color-wa 142° = 10° de separación AHORA --color-dark 196° vs --color-wa 142° = 54° de separación O sea: el sitio viejo escondía su color de acción adentro de su propia familia de hue. Un botón verde sobre una superficie verde a 10° de distancia es un botón camuflado. A 54° el verde es inequívoco y sigue siendo el único color que en este sitio significa "acá se hace clic". Cambiarlo, además, rompería la afordancia del canal por el que este negocio convierte. Se conserva, y ahora con una razón medida. · --color-star (#B8860B) y --color-wa-ink (#0B1F14). El dorado mide 2,92:1 sobre el fondo claro nuevo, por debajo del 3:1 que pide un objeto gráfico — pero NO se usa nunca ahí: las 36 estrellas del sitio llevan todas la clase `.stars--on-dark` (verificado una por una en los 4 HTML y en crearEstrellas() de main.js) y miden 3,22:1 sobre --color-water. Se deja anotado en vez de "arreglado": oscurecerlo para un caso que no existe lo rompería en los casos que sí existen (a L=36% baja a 2,92:1 sobre el agua). --color-wa-ink pertenece al verde, no a la rampa. · LOS COLORES DE ESTADO DEL CALENDARIO (--av-*). No se tocan. Son los únicos colores del sitio que CODIFICAN INFORMACIÓN (libre / consultar / ocupado), no marca. Teñirlos hacia el hue del río para que "combinen" le sacaría al semáforo lo único que lo hace un semáforo. El brief además protege la lógica del calendario. QUÉ SE BORRÓ ------------ --color-water-soft (#72AECA) se elimina. Estaba SIN USO desde la ronda 30 (su único trabajo eran las comillas decorativas de la cita, que se fueron con el formato de tarjeta de Google). La ronda 30 lo dejó declarado para no perder su medición; ahora esa medición quedó obsoleta junto con la paleta que la contenía, así que el token se va de verdad. UN BUG QUE APARECIÓ DE PASO, Y NO ERA DE COLOR ---------------------------------------------- Revisando el tratamiento de imagen de las fichas se encontró que en las TRES, por debajo de 620px, la galería de fotos medía 1575px de ancho dentro de una pantalla de 375: el riel no deslizaba y se veía UNA sola foto de cinco, con el texto "Deslizá para ver las 5" debajo. Estaba tapado porque el lleva `overflow-x: clip`, así que el desborde se recortaba en silencio en vez de producir scroll horizontal. La causa es un `align-items: start` que significa una cosa en la grilla de desktop y otra distinta cuando el mismo elemento pasa a flex en columna en mobile. El diagnóstico completo y la medición están en el `@media (max-width: 999px)` de `.cabin-layout`. Es anterior a esta ronda; se arregla acá porque esta ronda tenía que mirar las fotos de las fichas. ========================================================================== CHEQUEO LETRA POR LETRA CONTRA LOS 3 ANTI-DEFAULTS (ronda 31) ========================================================================== Se corre sobre la paleta NUEVA ENTERA, no sobre lo que se agregó. #1 CREMA CÁLIDO + SERIF DE ALTO CONTRASTE + TERRACOTA · CREMA: la banda prohibida vive en hue 30-50° con saturación 25-35%. Las cuatro superficies claras del sistema, medidas: --color-bg HSL(195°, 15%, 95%) → 145° fuera de la banda --color-bg-alt HSL(200°, 13%, 91%) → 150° fuera --color-border HSL(200°, 15%, 84%) → 150° fuera --color-on-dark HSL(197°, 23%, 94%) → 147° fuera Y las cuatro quedan por debajo del piso de saturación (13-23% contra 25%). El fondo viejo estaba a 46° de la banda; el nuevo está a 145°. Esta ronda TRIPLICA el margen del único anti-default que este proyecto rozó una vez (ronda 5). NO MATCHEA. Dato de control: la skill ui-ux-pro-max, consultada esta ronda, propone para "Hotel/Hospitality" exactamente "Warm neutrals + Gold (#D4AF37)" y para "Travel/Tourism" un naranja #EA580C = HSL(21°, 90%, 48%). O sea que la respuesta de catálogo para este rubro cae justo adentro del anti-default #1. Por eso la paleta se DERIVA de fotos y no se busca en una tabla. Queda anotado como hallazgo. · SERIF: cero. Siguen siendo Archivo + Source Sans 3, dos sans, que además es el máximo de 2 familias que fija el brief. NO MATCHEA. · TERRACOTA: no se agregó ninguna. La madera sigue en hue 28°, sigue siendo un marrón oscuro (L 30%) y no un terracota de acento (L 45-55%, sat 50%+), y sigue sin pintar un solo control. NO MATCHEA. 0 de 3. NO MATCHEA. #2 NEGRO PURO + VERDE ÁCIDO / BERMELLÓN · NEGRO PURO: --color-darker mide HSL(195°, 35%, 9%). No es #000 ni un gris neutro: es agua profunda, con 35% de saturación, que es la saturación MÁS ALTA de toda la rampa. Un negro puro tiene saturación 0 por definición. NO MATCHEA. · VERDE ÁCIDO: el único verde saturado del sitio sigue siendo el de WhatsApp, HSL(142°, 70%, 49%), que es el verde de una marca registrada y no un lima ácido (los ácidos viven en 60-90° con luminosidad por encima del 60%). Y esta ronda lo ALEJA del resto de la paleta en vez de acercarlo (10° → 54°). NO MATCHEA. · BERMELLÓN: no hay rojo en el :root. El único rojo del archivo renderizado sigue siendo el arco de la G de Google (#EA4335), encerrado adentro del glifo, con el chequeo completo de la ronda 30 más abajo — que sigue valiendo palabra por palabra. NO MATCHEA. 0 de 3. NO MATCHEA. #3 DIARIO: HAIRLINES DENSAS + RADIO CERO + COLUMNAS APRETADAS · HAIRLINES: esta ronda no agrega ninguna. La jerarquía de la ficha de cabaña se resuelve con ESCALA, PESO y COLOR (ver el bloque de la ficha más abajo), que era justamente la alternativa a "meter más líneas". El conteo queda igual que como lo dejó la ronda 30. · RADIO CERO: nada en cero. El hero nuevo va a sangre, o sea que ni siquiera tiene borde donde poner un radio; las tarjetas siguen en --radius-lg (16px) y el avatar sigue siendo un círculo. · COLUMNAS APRETADAS: la ronda va en la dirección contraria. El hero pasa de dos columnas a UNA imagen a sangre, y la ficha de cabaña SUBE el tamaño del contenido primario. Menos densidad, no más. NO MATCHEA. Ninguno de los tres matchea, y el margen del #1 —el único que este proyecto rozó alguna vez— pasa de 46° a 145°. ========================================================================== RONDA 29 — PROFUNDIDAD DE FONDO SIN UN SOLO COLOR NUEVO. ========================================================================== Pedido: "los fondos se sienten planos y monótonos, buscá profundidad real". Medido antes de tocar nada, sobre el DOM de producción: el sitio tenía 0 gradientes, 0 texturas y 0 filtros de ruido. La queja era literal, no una impresión — cada sección era UN color plano y nada más. QUÉ DIJO EL RESEARCH, Y POR QUÉ NO SE PUSO GRANO ------------------------------------------------ Se volvió a medir el fondo de los 8 sitios de referencia con playwright, contando capas sobre el render (no leyendo su CSS de memoria): Eastwind ......... 0 gradientes · 0 texturas · 0 ruido Postcard Cabins .. 7 gradientes · 0 texturas · 0 ruido Juvet ............ 1 gradiente · 0 texturas · 0 ruido Correntoso ....... 0 gradientes · 1 "textura" (es una FOTO 2048x1536) Awasi ............ 0 gradientes · 0 texturas · 0 ruido Dunton ........... 0 gradientes · 0 texturas · 0 ruido (fotos de fondo) Jägerhof ......... 0 gradientes · 0 texturas · 0 ruido Linear .......... 32 gradientes · 1 textura SVG · 0 ruido NINGUNO de los ocho usa ni grano. Cero de ocho. Dos de las skills cargadas esta ronda proponen "subtle noise / film-grain overlay" como respuesta refleja a un fondo plano; el research de ESTA categoría dice que no, así que no se puso. La profundidad en hotelería premium sale de la FOTOGRAFÍA y de capas de LUZ, no de textura. De dónde sale entonces cada decisión: · LINEAR (G) es el único que resuelve profundidad en CSS puro, y lo hace con gradientes radiales apilados a alfa bajísima. Medido literal en su :root renderizado: radial-gradient(52.53% 57.5% at 50% 100%, rgba(8,9,10,0) 0%, rgba(8,9,10,0.5) 100%) sobre linear-gradient(rgb(8,9,10) 10%, rgb(208,214,224) 100%) y sus "glows": rgba(255,255,255,0.04). Cuatro centésimas. Ése es el número que hace que se lea como LUZ y no como una mancha. Las capas de acá usan 0.04-0.055 por eso. · POSTCARD CABINS (B) aporta el scrim con MESETA en vez de fundido lineal (0.62 -> 0.54 -> 0): la oscuridad se sostiene y recién después suelta. Es la forma de las paradas de --seam-dark/--seam-light de abajo. · JÄGERHOF sirve de CONTRAEJEMPLO y por eso se capturó: sus bloques miden 900/900/958/906/906/906/906/906 — casi todos iguales. Es el sitio más monótono de los ocho y el que más se lee a plantilla. Confirma que la monotonía es tanto de RITMO como de color, así que esta ronda además acorta el equipamiento y elimina una sección entera. NO ENTRA NINGÚN COLOR NUEVO AL :root. Todas las capas nuevas son transparencias de tokens QUE YA EXISTÍAN, más blanco puro para el realce: rgba(236,241,243,α) = --color-on-dark (realce sobre oscuro) rgba(15,27,31,α) = --color-darker (asiento sobre oscuro) rgba(23,36,43,α) = --color-ink (asiento sobre claro) rgba(255,255,255,α) = blanco (realce sobre claro) Es decir: no se suma hue, se suma LUZ. Aun así el chequeo se corre entero, porque la regla del proyecto es de fondo nuevo, no sólo de color nuevo. ⚠️ LA MADERA NO SE USA PARA TEÑIR FONDOS, Y LA RAZÓN ES UNA MEDICIÓN QUE SALIÓ AL REVÉS DE LO ESPERADO. El primer intento de esta ronda teñía las secciones claras con --color-wood a 4,5%, que era el reflejo obvio ("calidez de cabaña"). Compuesto de verdad sobre #EEF1EC da: wood 4,5% sobre --color-bg .... #E8EAE3 HSL(74°, 12%, 90%) El hue se corre de 96° a 74°: veintidós grados HACIA la banda del crema prohibido (30-50°), dejando apenas 24° de margen en vez de los 46 que tenía el fondo pelado. No llega a matchear —la saturación queda en 12% contra el 25-35% que la banda exige— pero achica el margen del único anti-default que este proyecto ya rozó una vez (ronda 5). Con tinta pasa lo contrario: ink 5% sobre --color-bg ....... #E4E7E2 HSL(100°, 10%, 90%) El hue se ALEJA (96° -> 100°) y la saturación baja. Así que las capas de las secciones claras van con TINTA y con BLANCO, no con madera. Beneficio lateral: la madera se queda con sus dos trabajos declarados (rotular y separar) y no empieza a pintar superficie, que sería una tercera tarea que nadie autorizó. Las otras composiciones, medidas igual: blanco 55% sobre --color-bg ... #F7F9F6 realce neutro, sin drift on-dark 5% sobre --color-dark . #212D26 HSL(147°, 15%, 15%) on-dark 5% sobre --color-water #2E3E45 HSL(198°, 20%, 22%) El realce sobre la banda oscura mueve el hue UN grado (154° -> 147°) y sube la luz 4 puntos: es exactamente el efecto buscado —que la superficie tenga un lado iluminado— sin convertirla en otro color. ========================================================================== RONDA 30 — LOS 4 COLORES DE LA G DE GOOGLE. CHEQUEO APARTE. ========================================================================== La tarjeta de reseña pasa al formato de una reseña real de Google y suma el logotipo de la G. Eso mete cuatro colores que este sitio no tenía: rojo #EA4335 HSL( 5°, 81%, 56%) azul #4285F4 HSL(217°, 89%, 61%) amarillo #FBBC05 HSL( 45°, 97%, 50%) verde #34A853 HSL(136°, 53%, 43%) NO ENTRAN AL :root Y NO SON TOKENS. Viven adentro del de la G, en los atributos fill, y en ningún otro lado del sitio. No se pueden reusar por accidente porque no tienen nombre. #1 CREMA CÁLIDO — el amarillo cae DENTRO de la banda de hue (45°, la banda prohibida es 30-50) y fuera de las otras dos: sat 97% contra 25-35%, luz 50% contra 84-97. 1 de 3. Y el crema del anti-default es un FONDO casi blanco; esto es un arco de 24px que no pinta superficie. NO MATCHEA. ⚠️ #2 BERMELLÓN — ACÁ HAY UN HALLAZGO REAL Y SE ANOTA COMO TAL. El rojo #EA4335 mide HSL(5°, 81%, 56%): cae DENTRO de la banda del bermellón (hue 5-10 con saturación alta) y queda a 7° de la terracota del anti-default #1. Medido, no estimado. Es el único color que este proyecto haya incorporado que aterriza adentro de una banda prohibida. Por qué entra igual, y qué lo contiene: · No es un color de la paleta: es un fragmento de una marca registrada ajena, reproducido literal para atribuir. La G existe para decir de dónde viene la reseña, no para decorar. · No pinta ninguna superficie, ningún control y ningún texto. Ocupa 0,14% de la tarjeta a 1440 y 0,15% a 375 (arco rojo contra la caja de la tarjeta, calculado sobre las medidas reales de la caja). · No es clickeable. El verde de WhatsApp sigue siendo el único color que en este sitio significa "acá se hace clic", sin excepción nueva. · Y NO SE PUEDE ARREGLAR RECOLOREANDO: retocar el rojo de un logotipo ajeno para que pase un chequeo interno es uso indebido de marca. La opción real era ponerlo tal cual o no ponerlo. La mitigación es de CONTENCIÓN, no de sustitución: el color queda encerrado en el glifo. Si algún día alguien lo copia al :root o lo usa para pintar otra cosa, ahí sí matchea y hay que sacarlo. #3 DIARIO — esta ronda BORRA una hairline (la del pie de la tarjeta, que había puesto la ronda 29) y no agrega ninguna. El sitio queda en 12 contra 13. La tarjeta mantiene --radius-lg y el avatar es un círculo, así que sigue sin haber radio cero. NO MATCHEA. CONTRASTE DE LA G: azul 3,07:1, amarillo 6,41:1 y verde 3,58:1 sobre la superficie iluminada de la tarjeta; el rojo mide 2,79:1 y no llega a 3. WCAG 1.4.11 exime explícitamente a los logotipos del mínimo de contraste, y además la G se lee por su forma completa, no por un arco suelto. Se deja anotado en vez de "arreglado" por lo mismo de arriba: no se recolorea. ========================================================================== CHEQUEO LETRA POR LETRA CONTRA LOS 3 ANTI-DEFAULTS (ronda 29) -------------------------------------------------- #1 CREMA CÁLIDO + SERIF DE ALTO CONTRASTE + TERRACOTA · Fondo: sigue siendo #EEF1EC = HSL(96°, 15%, 94%), verde frío. Las dos capas que se le apoyan lo alejan del crema en vez de acercarlo, medido y no estimado: blanco 55% ... #F7F9F6 realce neutro, sin corrimiento de hue ink 5% ....... #E4E7E2 HSL(100°, 10%, 90%) El extremo más "cálido" que puede alcanzar una sección clara de este sitio es ahora hue 100°, es decir CUATRO GRADOS MÁS VERDE que el fondo pelado, con la saturación bajando de 15% a 10%. El crema prohibido vive en hue 30-50 / sat 25-35%: quedan 50° de margen por hue y 15 puntos por saturación, más que antes de esta ronda. (Ver arriba por qué se descartó teñir con madera, que era el camino obvio y el que achicaba ese margen a 24°.) Dato de control del research: Jägerhof mide HSL(35°, 30%, 88%), o sea que aterriza dead center en la banda prohibida. Ese es el aspecto que estas capas NO pueden producir. NO MATCHEA. · Serif: cero. Siguen siendo Archivo + Source Sans 3, dos sans. NO MATCHEA. · Terracota: no se agregó. La madera sigue en hue 28 y sigue sin pintar controles. NO MATCHEA. 0 de 3 ingredientes nuevos. NO MATCHEA. #2 NEGRO + VERDE ÁCIDO / BERMELLÓN · Las superficies oscuras siguen siendo #16231D HSL(154°,22%,11%) y #0E1712: verde-carbón, no negro. Las capas de luz que se les suman son --color-on-dark (#EDE4D3, hue 37° desaturado) a 4-5,5%: sobre #16231D dan #212D26 = HSL(147°, 15%, 15%), medido. El hue se mueve 7 grados dentro de la misma familia verde y la luz sube 4 puntos: la superficie gana un lado iluminado y no cambia de color. Sobre la tarjeta de reseña (--color-water) da #2E3E45 = HSL(198°, 20%, 22%), o sea que el agua tampoco cambia de hue (199° -> 198°). No aparece ningún verde ácido nuevo. · El verde de WhatsApp HSL(142°,70%,49%) sigue siendo el único color que significa "acá se hace clic". Se revisó uno por uno lo que esta ronda agrega: ninguna capa de fondo es clickeable, y los dos botones nuevos de #contacto (Instagram y Facebook) van con relleno NEUTRO —--color-on-dark sobre texto --color-dark, 12,88:1— y no con los violetas y azules de esas marcas, que es la misma decisión que ya tomó la ronda 15 para el bloque #redes. Sumar dos saturados ajenos al lado del verde le sacaría al verde lo único que lo hace significar algo. · Bermellón: no hay rojo en el archivo. NO MATCHEA. #3 DIARIO: HAIRLINES + RADIO CERO + COLUMNAS DENSAS · Éste es el que hay que mirar de verdad esta ronda, porque el rediseño del equipamiento pone 4 ítems en fila y el de la tarjeta de reseña suma una hairline. Se recuenta entero: hairlines del sitio = 3 (ficha de datos) + 6 (ficha técnica de cabaña) + 3 (equipamiento, que BAJA de 4 a 3 al pasar a fila) + 1 (pie de la tarjeta de reseña, nueva). Total 13 contra 16 antes: esta ronda deja MENOS hairlines de las que había, no más. Todas siguen separando datos que existen por separado. · Radios: nada en cero. El anillo nuevo de la tarjeta de reseña usa el mismo --radius-lg del que ya tenía. · Columnas densas: los 4 ítems en fila tienen 48px de canaleta y mucho aire; no es una retícula de diario. Y la página total se ACORTA (se elimina una sección entera), así que la densidad baja. NO MATCHEA. Ninguno de los tres matchea. El fondo nuevo entra por la puerta más angosta posible: sin hue nuevo, sólo luz, y con el número (0.04) tomado de una medición y no de una preferencia. ========================================================================== RONDA 28 — SEGUNDO COLOR SATURADO, MEDIDO, NO ELEGIDO A OJO. ========================================================================== El cliente reabrió expresamente la regla de "un solo color saturado" para esta ronda: el carrusel de reseñas (tarjeta --color-dark-lift sobre banda --color-dark, los dos verde-carbón) se leía como una sola mancha — "todo se mezcla". La ronda 27 ya había resuelto el problema anterior (cajas blancas sobre negro); este es el problema que esa solución dejó atrás. La solución NO es aflojar la regla dura de acción (el verde de WhatsApp sigue siendo el único color que dice "acá se hace clic" en todo el sitio) sino sumar un SEGUNDO acento, con el mismo método que ya se usó para la madera: medido de una foto real del lugar, no elegido de un catálogo, y con un trabajo declarado y acotado. Fuente: la propia foto de la sección (proof__figure, lugar-pileta-atardecer-960.webp) — la pileta con la gente adentro, en la franja de agua iluminada. Muestreo sobre el render (no hay decodificador WebP disponible en este entorno para leer el archivo fuente directo, así que se muestreó el PNG ya decodificado por el navegador — mismo pixel, un paso más): 147 puntos que cumplen "azul y verde por encima del rojo en al menos 25-40 unidades", promediados. PROMEDIO MEDIDO ............ #4B7689 HSL(199°, 29%, 42%) De ahí se derivan dos tokens por el mismo procedimiento que ya usan --color-wood / --color-wood-soft (mismo hue, dos bandas de luminosidad distintas según dónde se posan): --color-water #24353D HSL(199°, 26%, 19%) — bajado a la banda de luminosidad de las superficies oscuras del sitio (--color-dark 11% / --color-dark-lift 15%), para que la tarjeta siga leyéndose como SUPERFICIE y no como objeto flotante encima de la banda. --color-water-soft #72AECA HSL(199°, 45%, 62%) — subido a banda de acento legible sobre fondo oscuro, para el detalle decorativo (la comilla grande de la cita). EL AGUA HACE UN SOLO TRABAJO, declarado y nada más: es la SUPERFICIE de la tarjeta de reseña y el acento de su comilla decorativa. No pinta ningún control, no reemplaza a la madera en sus dos trabajos (rotular y separar), no aparece en ninguna otra sección. Un color, un lugar. CHEQUEO LETRA POR LETRA CONTRA LOS 3 ANTI-DEFAULTS (ver el chequeo completo de la ronda 12 más abajo — este repite el mismo método): #1 CREMA CÁLIDO + SERIF DE ALTO CONTRASTE + TERRACOTA El agua no es terracota ni ningún pariente: hue 199° (azul-cian frío) contra hue 12° (terracota rechazada, ronda 6) o 28° (madera). No hay fondo crema en la sección donde vive (sigue siendo --color-dark, verde-carbón) y no hay serif en el archivo. 0 de 3 ingredientes. NO MATCHEA. #2 NEGRO + VERDE ÁCIDO / BERMELLÓN El agua no es verde ácido: HSL(142°,70%,49%) es el verde de WhatsApp, hue 142; el agua está en hue 199, del otro lado de la rueda, familia azul-cian. Tampoco es bermellón (no hay rojo). Y la regla de USO se mantiene sin excepción nueva: la tarjeta de reseña es clickeable (abre la reseña completa) igual que ya lo era con --color-dark-lift, así que el agua no le suma afordancia de control a nada que no la tuviera ya — la tarjeta y el cursor la crean, no el color, mismo argumento que sostiene el rótulo de madera en la ronda 12. Ninguna flecha, botón, link de texto, estado de calendario o foco cambia de color por esto. NO MATCHEA. #3 DIARIO: HAIRLINES + RADIO CERO + COLUMNAS DENSAS No se tocó ningún radio (la tarjeta sigue en --radius-lg) ni se sumó ninguna hairline nueva. NO MATCHEA. Ninguno de los tres matchea, letra por letra. El agua entra por la misma puerta que la madera en la ronda 12 y queda con la misma disciplina: un color medido, con un trabajo, en un lugar. ========================================================================== RONDA 15 — RE-CHEQUEO. La paleta tampoco cambió esta ronda. Lo que se rehízo es la composición del hero (el sello dejó de ser una tarjeta sobre la foto y el mazo de cabañas pasó a ser una repisa alineada a la grilla), la ficha técnica de cada cabaña y el bloque de redes. Ninguno de los tres toca color. Repaso de la regla de madera después de los cambios — todo lo que quedó pintado con --color-wood o --color-wood-soft es rótulo o hairline, nada es un control: rótulo de localidad del hero, capacidad sobre cada foto de la repisa, el "HAY MÁS" de la cuarta celda, rótulos de la ficha de datos, íconos del equipamiento del home, íconos y etiquetas de la ficha técnica, numeradores de los tres pasos de la tarjeta de reserva, rótulos de columna del pie, y las hairlines (repisa, cuarta celda, filas de la ficha). Las dos únicas que viven DENTRO de un —la capacidad y el "HAY MÁS"— son la excepción ya declarada en la ronda 12: rótulo dentro de una tarjeta que es link, no el texto del link. Lo nuevo que suma color: nada. El bloque de redes se rehizo a propósito SIN los colores de marca de Instagram y Facebook (violeta y azul). Dos cuadraditos saturados ajenos a la paleta, al lado del verde de WhatsApp, le sacan al verde lo único que lo hace significar algo. Las dos placas van en tinta. ========================================================================== RONDA 14 — RE-CHEQUEO. La paleta NO cambió: los tres veredictos de abajo siguen valiendo tal cual están escritos. Lo que cambió es el HERO, que pasó a estar partido en desktop, y eso movió una cuenta de la lista: · El rótulo de localidad ya no cae sobre la foto en ningún ancho, así que perdió la plaquita que lo protegía. Sobre --color-darker mide 7,44:1 sin nada abajo (antes, sobre el cielo de la foto, 3,37:1). · El texto del hero dejó de necesitar el degradado de 6 paradas: apoya en superficie sólida y mide 16,4:1 por construcción. Y la auditoría de uso de la madera encontró UNA fuga, ya corregida: los tres atajos de la sección de fechas (ronda 13) eran links pintados con --color-wood, y la regla dura declarada más abajo dice que la madera no toca elementos interactivos. Pasaron a --color-ink-soft. Es la segunda vez que pasa lo mismo, así que queda anotado al lado de la regla. Repaso de dónde vive la madera hoy, todos rótulos o líneas, ninguno clickeable: rótulo del hero, datos del predio del hero, rótulos de la ficha de datos, íconos del equipamiento, numeradores de los tres pasos de la ficha, rótulos de columna del pie, capacidad sobre cada foto del mazo, y las hairlines. ========================================================================== CHEQUEO LETRA POR LETRA CONTRA LOS 3 ANTI-DEFAULTS — RONDA 12 ========================================================================== Vuelve un acento MARRÓN/MADERA, que la ronda 6 había sacado. El pedido del cliente trae con él la corrección que faltaba: el anti-default #1 prohíbe una COMBINACIÓN de tres ingredientes, no cada ingrediente por separado. La ronda 6 lo aplicó como si prohibiera el marrón solo, y con eso se llevó puesto el único color que el lugar tiene de verdad. El marrón de esta ronda además NO es una elección de humor: es una MEDICIÓN. Se muestrearon 7 fotos del sitio en canvas, promediando sólo los píxeles en banda madera (hue 14-46, sat 18-70%, luz 14-55%): hero-cabana ................ #63513F HSL(30, 22%, 32%) cabana-6-exterior .......... #665541 HSL(32, 22%, 33%) lugar-quincho .............. #7D5836 HSL(29, 40%, 35%) 29,0% del cuadro quincho-mesa-larga ......... #7A5B47 HSL(24, 26%, 38%) cabana-2-4-interior ........ #6A482B HSL(28, 42%, 29%) 25,2% del cuadro cabana-6-escalera-comedor .. #794D32 HSL(23, 42%, 34%) 18,2% del cuadro cabana-5-living ............ #554027 HSL(33, 37%, 24%) 26,4% del cuadro ────────────────────────────────────────────────────────────────── PROMEDIO PONDERADO ......... #6C4B2F HSL(28, 39%, 30%) Los 7 hues caen entre 23 y 33: 10 grados de dispersión. No es "un marrón", es la madera de UN lugar, y el token es su promedio exacto. #1 CREMA CÁLIDO + SERIF DE ALTO CONTRASTE + TERRACOTA · Fondo: #EEF1EC = HSL(96°, 15%, 94%). (El header de la ronda 6 decía 103°/12%; recalculado ahora da 96°/15% — mismo color, la cuenta vieja estaba redondeada de más. El argumento no cambia.) El hue 96 es VERDE. El crema prohibido vive en hue 30-50 con saturación 25-35%. Fuera de la banda por hue (46° de distancia al borde más cercano) y por saturación (15% contra 25-35%). SIGUE SIN MATCHEAR — y no se toca en esta ronda. · Display: ARCHIVO. Cuerpo: SOURCE SANS 3. (La ronda 12 decía Alegreya Sans / Public Sans; las cambió la 13 y este renglón se había quedado viejo.) Dos sans-serifs: cero remates en todo el archivo, cero familias serif cargadas. SIGUE SIN MATCHEAR. · Terracota: acá está el ingrediente que vuelve, así que se mide en vez de argumentarse. La terracota rechazada en la ronda 6 era #7B4133 = HSL(12°, 41%, 34%). Hue 12 es rojo-anaranjado: barro cocido, óxido. La madera de esta ronda es #6C4B2F = HSL(28°, 39%, 30%). Hue 28 es marrón: nogal, umber. Son 16° de separación, que es justamente el ancho que separa "rojo" de "marrón" a esta saturación. Pero la distancia de hue sola no lo absuelve, y no es el argumento. El argumento es que de los TRES ingredientes hay UNO solo: el fondo es verde frío y la tipografía es sans. Un acento marrón sobre fondo verde y tipografía de palo seco no reconstruye "crema + serif + terracota"; le falta el fondo y le falta la letra, que son los dos que hacen el clima. NO MATCHEA: 1 de 3, y el que está, medido de las fotos. #2 NEGRO + VERDE ÁCIDO / BERMELLÓN · #16231D no es negro: es verde-carbón, HSL(154°, 22%, 11%). · #25D366 es el verde OFICIAL de WhatsApp. Es afordancia de canal, no elección estética: marca lo que abre la conversación y nada más lo usa. No es neón ácido (HSL 142°, 70%, 49%). · No hay bermellón en ningún lado. · Lo que SÍ cambia en esta ronda y hay que declarar: el verde deja de ser el único color saturado de la página. Medido, la acción sigue ganando por lejos — WhatsApp HSL(142, 70%, 49%) contra madera HSL(28, 39%, 30%): 31 puntos más de saturación y 19 más de luz. Y la regla dura es de USO, no de color: LA MADERA NO TOCA NINGÚN ELEMENTO INTERACTIVO. Ni un botón, ni un link, ni un estado del calendario. Vive en rótulos y en hairlines, que son las dos cosas que nadie intenta clickear. NO matchea. #3 DIARIO: HAIRLINES + RADIO CERO + COLUMNAS DENSAS · Éste es el que la madera roza, porque suma hairlines. Se recuenta: las hairlines del sitio son 3 (ficha de datos), 3 (inventario del predio), 6 (ficha técnica de cabaña) y 4 (equipamiento). Todas separan datos que EXISTEN por separado, ninguna decora ni arma retícula. · Radios de 8 a 24px en todo, ninguno en cero. · Fotos grandes y mucho aire, cero columnas de diario. NO matchea. ========================================================================== PALETA — 3 roles + un acento de madera que no es de acción ========================================================================== Un fondo frío, una tinta, una superficie oscura, UN color saturado reservado a la acción (verde WhatsApp) y UN acento de madera que sólo rotula y separa. Nota para el cliente: vuelve el marrón que él pidió en la ronda 5 y que la ronda 6 sacó. La madera está ahora en los dos lados: en las fotos, donde es real, y en la interfaz, atada por medición a esas mismas fotos. TIPOGRAFÍA — 2 familias, tope respetado (cambiada en la ronda 13) ARCHIVO (display, variable wdth 100-125 / wght 500-900) — grotesca de Omnibus-Type, fundición ARGENTINA (Buenos Aires). Se mantiene la razón local que tenía Alegreya Sans, que también era argentina: para un destino de Entre Ríos la letra sale de acá, no de un catálogo. Lo que cambia es el registro: Archivo tiene EJE DE ANCHO real, así que el titular se compone ENSANCHADO (wdth 112) en vez de sólo engordado. Un display ancho y pesado es lo que separa una portada de hotel de un h1 de plantilla, y no se consigue con font-weight. SOURCE SANS 3 (cuerpo, variable 400-700) — humanista de Paul D. Hunt, con la altura de x alta y las aperturas grandes que hacen falta en una pantalla chica con señal floja, que es el contexto real de este comprador. Reemplaza a Public Sans, que hacía bien ese trabajo pero era otra grotesca: al lado de Archivo se leían como la misma letra en dos tamaños. EJE DE CONTRASTE, que es lo que la regla pide: grotesca ANCHA de display contra humanista de texto. Contrastan por esqueleto (una es de tensión vertical y cerrada, la otra caligráfica y abierta) y además por ANCHO, que el par viejo no tenía. Ningún serif: el anti-default #1 ya tiene un ingrediente puesto (la madera) y sumarle el serif lo dejaría en 2 de 3. POR QUÉ NO SE FUE A UN SERIF, que era el reflejo obvio para "más estético" en hotelería: la categoría entera lo hace (Awasi, Correntoso y Dunton River Camp los tres usan serif de display). Copiarlo es la segunda capa del reflejo, no una decisión. Un grotesco ancho sobre fondo verde frío no se parece a ninguno de los tres. CONTRASTE WCAG (luminancia relativa) --color-ink sobre --color-bg .............. 12.94:1 --color-ink-soft sobre --color-bg .......... 7.26:1 --color-on-dark sobre --color-dark ......... 12.88:1 --color-on-dark-soft sobre --color-dark .... 7.57:1 #0B1F14 sobre #25D366 (botón WhatsApp) ...... 8.68:1 ⚠️ Corregido en la ronda 29. Acá decía 10.4:1 desde que se escribió la tabla, y está mal: recalculado con la fórmula de luminancia relativa de WCAG da 8,68:1 (L del verde 0,4796, L de la tinta 0,0110). Sigue pasando AA de sobra y no cambia ninguna decisión —el par se eligió porque blanco sobre ese verde da 2,1:1 y reprueba—, pero el número estaba inflado y esta tabla sólo sirve si es exacta. --color-wood sobre --color-bg .............. 6.86:1 --color-wood sobre --color-bg-alt .......... 6.35:1 --color-wood-soft sobre --color-dark ....... 6.48:1 --color-wood-soft sobre --color-dark-lift .. 5.76:1 Los cuatro valores de madera pasan AA para texto chico (4.5:1), que es el tamaño en el que efectivamente se usa. No hay ningún uso de madera que dependa del umbral flojo de 3:1. CONTRASTE SOBRE LAS SUPERFICIES NUEVAS DE LA RONDA 29 Una capa de luz sobre un fondo claro lo ACLARA y le baja el contraste al texto oscuro; una sobre fondo oscuro lo aclara y se lo baja al texto claro. Así que no alcanza con medir contra el color base de la sección: abajo va el PEOR CASO de cada capa, o sea el punto donde el realce o el asiento están al 100% de su alfa. ink sobre claro+realce (#F7F9F6) .......... 13.92:1 ink sobre claro+asiento (#E4E7E2) ......... 11.82:1 ink-soft sobre claro+asiento .............. 6.63:1 ink-soft sobre bg-alt+asiento (#DDE2DA) ... 6.30:1 wood sobre claro+asiento .................. 6.27:1 on-dark sobre oscuro+realce (#222E27) ..... 11.23:1 on-dark-soft sobre oscuro+realce .......... 6.60:1 blanco sobre oscuro+realce ................ 14.17:1 on-dark sobre oscuro+asiento (#121C17) .... 13.78:1 wood-soft sobre oscuro+realce ............. 5.65:1 on-dark sobre tarjeta+realce (#2F3F45) .... 8.71:1 on-dark-soft sobre tarjeta+realce ......... 5.12:1 water-soft sobre tarjeta+realce ........... 4.51:1 blanco sobre tarjeta+realce ............... 10.99:1 btn--channel: dark sobre on-dark .......... 12.88:1 Los 16 pasan AA para texto chico. El peor es la comilla decorativa de la cita (4,51:1), que por ser decorativa ni siquiera estaría obligada al umbral, y lo pasa igual. Ninguna capa de luz empuja a nada por debajo de 4,5. ========================================================================== */ /* Las fuentes ya NO se piden desde acá: el @import encadenaba dos viajes en serie (bajar esta hoja → parsearla → recién ahí pedir las fuentes). Ahora van con + preconnect en el de cada página, en paralelo con este archivo. */ :root { /* --- Neutros — RAMPA DEL RÍO (ronda 31). Ver la derivación en el header. Una sola familia de hue (195-201°) de punta a punta: lo que antes eran DOS familias sin relación (claro 96° verde / oscuro 154° verde) ahora son los dos extremos de la misma rampa. --- */ --color-bg: #f0f3f4; /* HSL(195, 15%, 95%) */ --color-bg-alt: #e5e9eb; /* HSL(200, 13%, 91%) */ --color-ink: #17242b; /* HSL(201, 30%, 13%) — 14,23:1 sobre --color-bg */ --color-ink-soft: #44565f; /* HSL(200, 17%, 32%) — 6,87:1 sobre --color-bg */ --color-border: #d0d8dc; /* HSL(200, 15%, 84%) */ /* --- Superficie oscura (panel del hero y CTA final: son un par). Mismo hue que la banda clara: el extremo profundo de la rampa, no un color aparte. --- */ --color-dark: #18292f; /* HSL(196, 32%, 14%) */ --color-darker: #0f1b1f; /* HSL(195, 35%, 9%) */ /* Cuarto escalón de la MISMA rampa oscura, no un color nuevo: HSL(196°, 28%, 19%) contra el 196°/32%/14% de --color-dark. Existe por la misma razón por la que --color-border es el tercer escalón de la rampa clara: para que una superficie apoyada sobre la banda oscura se lea COMO superficie y no como un matiz. Se usa en la luz del hero. Contraste verificado sobre él (medido, ronda 31): --color-on-dark 10,93:1. */ --color-dark-lift: #23373e; /* ⚠️ RONDA 31 — LA TINTA SOBRE OSCURO DEJÓ DE SER CÁLIDA, Y ES UNA DECISIÓN DE SISTEMA, NO UN AJUSTE. Era #EDE4D3, un crema hue 37°. El problema no era el color en sí sino que había DOS cosas cálidas sobre la banda oscura —esta tinta y la madera— y por eso la madera no se leía como acento: competía con el fondo de texto. Ahora la tinta es el extremo claro de la rampa del río y la madera queda como lo ÚNICO cálido de la página, que es lo que un acento tiene que ser. 13,20:1 sobre --color-dark · 15,41:1 sobre --color-darker. */ --color-on-dark: #ecf1f3; /* HSL(197, 23%, 94%) */ --color-on-dark-soft: #b3c0c7; /* HSL(201, 15%, 74%) — 8,08:1 sobre --color-dark */ /* --- ACENTO SECUNDARIO: MADERA. Ver el chequeo anti-default arriba. #6C4B2F es el promedio ponderado medido de los píxeles de madera de 7 fotos del sitio, no un marrón de catálogo. REGLA DE USO, y es dura: LA MADERA NO PINTA CONTROLES. Ni botones, ni links de texto, ni estados del calendario, ni focus rings. El verde de WhatsApp sigue siendo el único color de acción del sitio. Una precisión que la ronda 12 tuvo que hacer al construir el hero nuevo, porque la primera redacción decía "nada interactivo" y el propio código la desmentía: lo que la regla protege es que ningún color además del verde se lea como "acá se hace clic". Un RÓTULO de madera adentro de una tarjeta que entera es un link (la capacidad debajo de la foto de cada cabaña) no crea esa afordancia — la crean la tarjeta y la foto, y el rótulo sigue haciendo de rótulo. Un LINK DE TEXTO en madera sí la crearía, y por eso el "Dejanos tu reseña" del sello va en tinta y no en madera. La prueba es de control, no de elemento interactivo. La madera hace dos trabajos y ninguno más: 1. ROTULAR — las etiquetas que nombran una fuente o un campo (GOOGLE / FACEBOOK / CINCO ESTRELLAS, Camas, Climatización, el rótulo del mapa, la localidad del hero). Son rótulos que ya existían: esto los pinta, no agrega ninguno. El sitio sigue SIN eyebrow decorativo arriba de cada sección — esa decisión de la ronda 6 no se reabre. 2. SEPARAR — las hairlines que dividen datos reales. --color-wood va sobre superficie CLARA. --color-wood-soft va sobre superficie OSCURA (mismo hue, 29 vs 28; sube la luz para pasar contraste). Se distingue de --color-on-dark-soft #BFAF95 por saturación (48% contra 25%): uno es acento, el otro es tinta apagada, y a simple vista se ve. Las dos hairlines son transparencias del acento, no colores nuevos: sobre claro tiñen hacia la madera, sobre oscuro tiñen hacia el reflejo cálido de la misma madera. --- */ --color-wood: #6c4b2f; --color-wood-soft: #cb9a6b; --color-wood-line: rgba(108, 75, 47, 0.28); --color-wood-line-dark: rgba(203, 154, 107, 0.3); /* --- AGUA — segundo acento medido, ronda 28. Ver el chequeo anti-default completo arriba en el header. Mismo método que la madera (promedio de píxeles de una foto real, acá la pileta de proof__figure), y la misma disciplina de uso: UN trabajo, UN lugar. --color-water es la superficie de la tarjeta de reseña (reemplaza a --color-dark-lift ahí y sólo ahí). Ninguno de los dos pinta un control: la regla que protege al verde de WhatsApp como único color de acción no tiene una excepción nueva acá. ⚠️ --color-water-soft QUEDÓ SIN USO EN LA RONDA 30. Su único trabajo era pintar las comillas tipográficas decorativas de la cita, y esas se fueron cuando la tarjeta pasó al formato de reseña de Google, que muestra el texto pelado. Se deja declarado y NO se borra por una razón concreta: el valor está medido (5,22:1 sobre --color-water) y justificado en la ronda 28 junto con --color-water, del que es el par claro. Borrarlo perdería esa medición; el que lo vuelva a necesitar tiene acá el número y no tiene que medirlo de nuevo. --- */ /* ⚠️ RONDA 31 — EL AGUA DEJÓ DE SER UN ACENTO Y PASÓ A SER EL SISTEMA. Este token existía desde la ronda 28 para resolver un problema puntual ("la tarjeta de reseña verde sobre banda verde se lee como una sola mancha"). La ronda 31 se dio cuenta de que la medición de la ronda 28 —#4B7689, HSL(199°, 29%, 42%), promediada sobre 147 píxeles de la foto de la pileta— era la respuesta correcta a una pregunta más grande: el sitio se llama "Cabañas frente al río Paraná" y estaba pintado con los colores del monte, no del río. Así que el hue del agua se promovió a hue del sistema entero (ver el header) y este token quedó como lo que siempre debió ser: UN ESCALÓN MÁS de la rampa, el que usa la tarjeta de reseña. Sigue haciendo un solo trabajo y sigue sin pintar controles. 9,21:1 con --color-on-dark · 5,64:1 con --color-on-dark-soft. */ --color-water: #29434c; /* HSL(195, 30%, 23%) */ /* --- LUZ — capas de profundidad (ronda 29). NO SON COLORES: son alfas de tokens que ya existen. Ver el chequeo completo en el header. Hay UNA dirección de luz en todo el sitio y es ARRIBA-DERECHA. Se eligió una sola y se respeta en las 7 secciones porque el defecto que estas capas vienen a corregir es "todo plano", y una luz que cambia de lado por sección no produce profundidad: produce ruido. El par realce/asiento es siempre el mismo gesto —se ilumina un vértice y se asienta el opuesto—; lo único que varía por sección es CUÁNTO y CUÁN ABIERTO, para que dos secciones seguidas no se lean calcadas. El 0.04-0.055 no es una preferencia: es el número medido en los "glows" de Linear (rgba(255,255,255,0.04)), el único de los 8 sitios del research que resuelve profundidad en CSS puro. Por encima de ~0.08 la capa deja de leerse como luz y se lee como mancha. --- */ /* Ronda 31: siguen siendo alfas de tokens que ya existen — lo único que cambió es CUÁLES, porque los tokens de abajo cambiaron de hue. La mecánica (una sola dirección de luz, 0.04-0.055, nada de grano) no se tocó: sigue valiendo la medición de Linear de la ronda 29. */ --lift-dark: rgba(236, 241, 243, 0.055); /* = --color-on-dark, realce sobre banda oscura */ --sink-dark: rgba(15, 27, 31, 0.55); /* = --color-darker, asiento sobre banda oscura */ --lift-light: rgba(255, 255, 255, 0.55); /* realce sobre banda clara */ --sink-light: rgba(23, 36, 43, 0.05); /* = --color-ink, asiento sobre banda clara */ /* --- Estrella de la calificación de Google. Ochre real (HSL 43°), no terracota (HSL 12°): es la estrella de una calificación pública, igual que la pinta Google. Único uso en todo el sitio. --- */ --color-star: #b8860b; /* --- Principal de ACCIÓN: verde WhatsApp. No es una elección estética: es la afordancia del canal por el que se convierte. Todo lo que escribe a Sandra y Paulo es de este color, y nada más lo usa. Es el ÚNICO color que en este sitio significa "acá se hace clic" — el agua (ronda 28) suma riqueza cromática a una superficie, no compite por ese significado, así que la acción sigue siendo literalmente lo más fuerte que hay en pantalla. --- */ --color-wa: #25d366; --color-wa-dark: #1eb85a; --color-wa-ink: #0b1f14; /* --- Tipografía: vuelve Alegreya Sans al display. La ronda 5 la había cambiado por Bitter (slab serif) para que los números pesaran más. El diagnóstico estaba bien, la solución no: el peso se consigue con Alegreya Sans BLACK (900) + cifras tabulares + tracking cerrado, sin meter un serif en un sitio que tenía prohibido el combo crema + serif + terracota desde el arranque. Alegreya Sans es de Huerta Tipográfica, fundición argentina: razón local real para un destino argentino, no una elección de catálogo. --- */ --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; /* El ancho del display, en un solo lugar. 112% y no el 125% máximo del eje: pasado de ahí la ñ y la á se estiran de más, y este sitio las tiene las dos en el H1 ("Cabañas frente al río Paraná"). Se maneja con `font-stretch` y no con `font-variation-settings`: la propiedad estándar hereda, participa de la cascada y, si la variable no cargara, el navegador elige la instancia más cercana en vez de quedarse sin aplicar nada. */ --wdth-display: 112%; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: clamp(1.9rem, 4.5vw, 2.75rem); --text-3xl: clamp(2.1rem, 5.5vw, 3.25rem); /* Techo 3.75rem = 60px. `impeccable` topea el display en 6rem; acá se queda bien por debajo a propósito: el hero nuevo es partido, el título vive en una columna de ~42vw y un clamp más alto lo desbordaría. */ --text-hero: clamp(2.25rem, 4.2vw, 3.75rem); --text-capacity: clamp(3rem, 12vw, 4.5rem); /* --- Espaciado: múltiplos de 8 estrictos --- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-7: 64px; --space-8: 96px; /* --- Forma: un solo sistema de radios. Bajó de 24px a 16px en cards. `impeccable` topea las cards en 12-16px y marca 24px+ como tell; HANDOFF ya lo tenía anotado como tensión conocida sin resolver. Esta pasada lo resuelve. --- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Sombras tintadas al fondo (nunca negro puro) y por debajo de 16px de blur, para no caer en el par prohibido borde-1px + sombra difusa. */ --shadow-card: 0 2px 12px rgba(15, 27, 31, 0.12); --shadow-card-hover: 0 8px 24px rgba(15, 27, 31, 0.18); --shadow-float: 0 6px 20px rgba(15, 27, 31, 0.28); /* ========================================================================== MOVIMIENTO — UN SOLO VOCABULARIO, COMPARTIDO POR CSS Y POR GSAP ========================================================================== El problema que resuelve (ronda 7): el sitio tenía CUATRO curvas conviviendo sin saberlo — cubic-bezier(0.16,1,0.3,1) en CSS, `power3.out` en los reveals, `power2.out` en los contadores y `ease:'none'` en el puente — y las duraciones reales (700, 900, 1000, 1400ms) no salían de ningún token. Cada sección se movía bien SOLA y ninguna se movía como la de al lado. Eso es lo que se sentía como "animaciones sueltas" en vez de un sitio con criterio. De dónde salen estos dos valores (research de esta ronda, medido con playwright-cli sobre el :root real de cada sitio, no de memoria): Linear (G) publica su escala de easings completa en :root, y dos de sus tokens son EXACTAMENTE estos: --ease-out-quint: cubic-bezier(.23, 1, .32, 1) --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1) Son, letra por letra, las dos curvas que recomienda emil-design-eng. Dos fuentes independientes que convergen en el mismo par: se adoptan. La vieja (0.16,1,0.3,1) es expo-out, que frena más de golpe; quint frena más largo y va con el registro tranquilo del sitio. js/main.js LEE estos dos tokens del CSS y los convierte en eases de GSAP (registerEase). No hay una copia de los números en JS: si se cambia acá, cambia el sitio entero, timeline de scroll incluida. La escala de duración es de 6 escalones y NO se inventan valores fuera de ella. Presión y hover por debajo de 300ms (regla de emil-design-eng); las fotos por encima, porque son ambientales y no bloquean ninguna decisión. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 120ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-reveal: 640ms; --dur-photo: 800ms; /* --- Capas: escala semántica, nunca valores sueltos --- */ --z-base: 1; --z-raised: 2; --z-float: 90; --z-header: 100; --z-skip: 200; --container: 1180px; /* Alto real del header, medido con playwright-cli (81px, estable en los cuatro anchos probados: 320 a 1280). Se usa para el scroll-margin-top de acá abajo — no hay otro lugar del CSS que necesite este número. */ --header-h: 81px; } /* ========================================================================== Reset mínimo ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } /* ========================================================================== BUG REAL, NO DE ESTILO: ningún destino de ancla tenía scroll-margin-top. El header es sticky y siempre ocupa los primeros 81px del viewport — con `scroll-behavior: smooth` y sin este margen, saltar a `#disponibilidad` (menú → "Disponibilidad"), `#el-lugar`, `#cabanas`, `#como-llegar` o `#contacto` deja el título de la sección TAPADO a la mitad por el header, porque el navegador alinea el borde superior de la sección con el borde superior del viewport, no con el borde inferior del header. Medido con playwright-cli tocando el link real del menú (no con scrollTo a mano): "¿Hay lugar en tus fechas?" quedaba con la mitad de arriba de la primera línea detrás del header, en las cuatro páginas — toda ancla del sitio comparte el mismo header sticky. `[id]` y no una lista de selectores: cualquier destino de ancla futuro queda cubierto solo, sin acordarse de agregarlo acá. */ [id] { scroll-margin-top: calc(var(--header-h) + var(--space-3)); } body { margin: 0; font-family: var(--font-body); color: var(--color-ink); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; /* El eje de ancho es el motivo por el que se cambió a Archivo: un titular ANCHO y pesado es lo que hace que una portada se lea como portada. Con font-weight solo se consigue grosor, no presencia. */ font-stretch: var(--wdth-display); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; } /* Las cifras grandes son el OTRO momento display del sitio (el 4,7 del sello, la capacidad de cada cabaña) y llevan el mismo ancho que los titulares. Los tres números de la banda de confianza YA NO están acá desde la ronda 34: pasaron de tarjeta a chip y el chip es texto de lectura, no una cifra grande — ver ".proof__chip-text" más abajo. El resto de lo que usa la display —la cita del carrusel, el inventario, el nombre de cada ítem de equipamiento— se queda en ancho normal: son textos para LEER, y una grotesca ensanchada a tamaño de lectura cansa. */ .unit__capacity, .page-hero__capacity { font-stretch: var(--wdth-display); } p { margin: 0; text-wrap: pretty; } blockquote { margin: 0; } button { font: inherit; cursor: pointer; background: none; border: none; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-ink); color: #fff; padding: var(--space-2) var(--space-3); z-index: var(--z-skip); border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; border-radius: var(--radius-sm); } .section--dark a:focus-visible, .hero a:focus-visible { outline-color: var(--color-wa); } /* ========================================================================== Tipografía de sección — 3 niveles reales de jerarquía. SIN EYEBROW. Las 7 etiquetas en versalitas que había arriba de cada sección se eliminaron en esta pasada: `impeccable` y `design-taste` coinciden en que un eyebrow constante es andamiaje, no voz, y el research lo confirma — Eastwind (A) titula "SETTLE IN, VENTURE OUT" sin etiqueta arriba, y Postcard Cabins (B) no pone eyebrow en ningún H2 de su home. El único rótulo que sobrevive es el del mapa, porque ahí rotula un dato real (la localidad), no decora. ========================================================================== */ .section-title { font-size: var(--text-2xl); color: var(--color-ink); max-width: 24ch; } .section-title--xl { font-size: var(--text-3xl); } .section-title--sm { font-size: var(--text-xl); max-width: 30ch; } .section-lede { font-size: var(--text-md); color: var(--color-ink-soft); max-width: 62ch; margin-top: var(--space-3); } .section { padding-block: var(--space-8); } .section--tight { padding-block: var(--space-7); } /* Ronda 29 — el CTA final queda parado sobre la parte iluminada de su propia banda: el realce baja al centro-derecha en vez de pegarse al vértice, porque acá el contenido está centrado y no alineado a un lado. */ .section--dark.final-cta { background-color: var(--color-dark); background-image: radial-gradient(64% 76% at 74% 12%, var(--lift-dark) 0%, transparent 64%), radial-gradient(90% 80% at 10% 100%, var(--sink-dark) 0%, transparent 70%); } .section--dark { background: var(--color-dark); color: var(--color-on-dark); } .section--dark .section-title { color: #fff; } .section--dark .section-lede { color: var(--color-on-dark-soft); } .section--alt { background: var(--color-bg-alt); } /* ========================================================================== PROFUNDIDAD DE FONDO — ronda 29. El hero NO participa de este sistema. ========================================================================== Medido antes: el sitio tenía 0 gradientes en 8.342px de página. Cada sección era un color plano, y con 4 secciones claras seguidas del mismo #EEF1EC el scroll no daba ninguna señal de estar avanzando. Cada sección recibe DOS radiales: un realce en el vértice superior derecho y un asiento en el inferior izquierdo. Es una sola idea repetida con parámetros distintos, no siete efectos. POR QUÉ RADIALES Y NO UN LINEAR: un linear-gradient de arriba a abajo sobre una sección de 600px es indistinguible de un color plano cuando la sección entra en pantalla de a 900px por vez —se ve un solo tramo de la rampa—. Un radial anclado a un vértice tiene un centro y un borde DENTRO del cuadro visible, así que se lee aunque la sección esté cortada por el viewport. Es lo que hace Linear con `at 50% 100%`. POR QUÉ background-image Y NO PSEUDO-ELEMENTOS: varias de estas secciones ya usan ::before/::after (el puente, la franja de fotos, la tarjeta de reseña) y varias tienen `isolation: isolate`. Pintar en background-image no toca el z-index de nadie, no crea contexto de apilamiento nuevo y no suma un nodo por sección. Cero JS y cero DOM. PERFORMANCE: son gradientes estáticos, sin animación y sin backdrop- filter. No repintan al scrollear y no promueven capa. La regla de `gsap-performance` sobre no poner will-change "por las dudas" aplica acá: estas capas no animan, así que no llevan nada. ========================================================================== */ .section--depth { background-color: var(--color-bg); background-image: radial-gradient(78% 62% at 88% 4%, var(--lift-light) 0%, transparent 64%), radial-gradient(70% 58% at 6% 100%, var(--sink-light) 0%, transparent 60%); } /* Variación 2: el realce entra más abierto y más bajo. La usa la sección que va PEGADA a otra clara, para que el corte entre las dos se note. */ .section--depth-b { background-color: var(--color-bg); background-image: radial-gradient(96% 74% at 78% 16%, var(--lift-light) 0%, transparent 70%), radial-gradient(58% 70% at 0% 88%, var(--sink-light) 0%, transparent 56%); } /* Sobre --color-bg-alt, que ya es un escalón más oscuro: el asiento se suaviza para no cerrar la sección de más. */ .section--depth-alt { background-color: var(--color-bg-alt); background-image: radial-gradient(84% 64% at 90% 0%, var(--lift-light) 0%, transparent 66%), radial-gradient(64% 56% at 4% 100%, rgba(23, 36, 43, 0.035) 0%, transparent 58%); } /* Banda oscura. Acá el realce es el gesto que importa (es lo que Linear hace con sus glows al 4%) y el asiento hunde el vértice opuesto para que la banda tenga volumen en vez de ser un rectángulo. */ .section--depth-dark { background-color: var(--color-dark); background-image: radial-gradient(72% 58% at 86% 6%, var(--lift-dark) 0%, transparent 62%), radial-gradient(80% 72% at 4% 104%, var(--sink-dark) 0%, transparent 66%); } /* Variación oscura para el cierre de la página: el realce baja al centro para que el CTA quede parado sobre la parte iluminada. */ .section--depth-dark-b { background-color: var(--color-dark); background-image: radial-gradient(64% 76% at 74% 12%, var(--lift-dark) 0%, transparent 64%), radial-gradient(90% 80% at 10% 100%, var(--sink-dark) 0%, transparent 70%); } /* inline-block y no inline: sobre un inline el navegador ignora transform y filter, así que sin esto la palabra no se mueve ni se desenfoca — sólo se le nota la opacidad. `.split-chars__char` son las letras que arma SplitText en el H1 del hero (ronda 19). SplitText ya les escribe `display: inline-block` él mismo; está declarado igual acá para que la regla viva en el CSS y no dependa de que el plugin haya cargado. */ .split-words__word, .split-chars__char { display: inline-block; } /* ========================================================================== Botones — jerarquía de UNA acción primaria. Research: Postcard Cabins (B) y Dunton (F) tienen UN solo botón sólido por pantalla; Dunton lo pone saturado arriba a la derecha y es el elemento más fuerte de la página. El hero viejo tenía dos botones de peso casi igual (teal sólido + outline blanco) compitiendo entre sí. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-weight: 700; font-size: var(--text-sm); border: 2px solid transparent; white-space: nowrap; /* ------------------------------------------------------------------ LEVANTADA Y PRESIÓN, COMPUESTAS A MANO. El bug que arregla: antes eran dos reglas que escribían `transform` ENTERA, con la misma especificidad (0,2,0) — .btn:active { transform: scale(0.97) } .btn:hover { transform: translateY(-2px) } — y la de hover estaba después, así que ganaba siempre. EN DESKTOP EL :active NUNCA SE APLICABA: el botón no bajaba al apretarlo, que es justo lo que el comentario de al lado decía que hacía. Medido con playwright-cli antes de tocar nada: con el mouse encima y el botón apretado, el transform seguía en matrix(1,0,0,1,0,-2). Se probó resolverlo con dos custom properties compuestas en un solo transform (--btn-lift / --btn-press). NO SIRVE, y quedó comprobado en el navegador: con `transition: transform` declarada, cambiar una custom property SIN REGISTRAR que alimenta el transform no actualiza el valor computado — la variable pasaba a -2px y el transform se quedaba en identidad; quitando la transición sí se movía. Se arreglaría con @property, pero eso ataría la respuesta al toque de un botón de conversión al soporte de una feature relativamente nueva. Por eso los tres estados se escriben completos y la especificidad hace el trabajo: :hover:active (0,3,0) le gana a los dos. ------------------------------------------------------------------ */ transform: translateY(0) scale(1); transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } /* emil-design-eng: todo lo apretable baja de escala al presionarse. */ .btn:active { transform: translateY(0) scale(0.97); } @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px) scale(1); } .btn:hover:active { transform: translateY(-2px) scale(0.97); } } /* Envoltorio del imán (reactbits/Magnet). Sólo existe para recibir el transform de GSAP sin tocar el del botón, que tiene su propio sistema de levantada y presión. Sin JS es un inline-flex y no hace nada. */ .magnet { display: inline-flex; } /* Acción primaria. Texto casi negro sobre el verde: blanco sobre #25D366 da 2.1:1 y reprueba AA; #0B1F14 da 8.68:1 (ver la corrección del número en la tabla de contrastes del header). */ .btn--whatsapp { background: var(--color-wa); color: var(--color-wa-ink); } .btn--whatsapp:hover { background: var(--color-wa-dark); box-shadow: var(--shadow-card-hover); } .btn--teal { background: var(--color-ink); color: #fff; } .btn--teal:hover { background: var(--color-ink); box-shadow: var(--shadow-card-hover); } .btn--outline { background: transparent; border-color: currentColor; color: inherit; } .btn--outline:hover { background: rgba(255, 255, 255, 0.12); } /* ========================================================================== BOTÓN DE CANAL (ronda 29) — Instagram y Facebook en #contacto. ========================================================================== Mismo tamaño, misma forma y misma fila que el verde de WhatsApp: eso es el "mismo peso" que se pidió. Lo que NO comparte es el color, y no es un descuido: el verde de este sitio significa "acá se abre la conversación que reserva". Si Instagram y Facebook llegan pintados de violeta y azul —sus colores de marca— pasan a haber tres saturados peleando y el verde deja de significar nada. Es la misma decisión que la ronda 15 ya tomó para el bloque #redes, aplicada acá. Relleno de tinta clara sobre la banda oscura: --color-on-dark de fondo con texto --color-dark da 12,88:1, el mismo par invertido que ya usa el sitio. Presente y clickeable, sin competirle en COLOR al que convierte. ========================================================================== */ .btn--channel { background: var(--color-on-dark); color: var(--color-dark); } .btn--channel:hover { background: #fff; box-shadow: var(--shadow-card-hover); } .btn--channel .icon { fill: currentColor; } /* La fila de los tres. `auto-fit` con un mínimo de 232px: a 1440 entran los tres en línea, después caen a dos y en el teléfono a uno, sin una sola media query. ⚠️ EL 232 NO ES UN NÚMERO LINDO, ES UNA MEDICIÓN. El primer intento usó minmax(200px, 1fr) con max-width 40rem, y medido daba celdas de 203px con el botón de WhatsApp adentro midiendo 250: "Escribir por WhatsApp" lleva `white-space: nowrap` (heredado de .btn) y se desbordaba de su columna. El mínimo tiene que ser mayor que el ancho intrínseco del botón más ancho, no un redondeo. Con 232 de mínimo y 52rem de tope, a 1440 las celdas dan 266px y el de 250 entra con aire. No se resolvió acortando la etiqueta a "WhatsApp": el verbo es lo que hace que el botón que convierte diga qué pasa al tocarlo, y perderlo para emparejar tres anchos habría sido emparejar hacia abajo. */ .channels { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: var(--space-2); max-width: 52rem; margin-inline: auto; } .channels li { display: flex; } .channels .magnet { flex: 1; } .channels__btn { width: 100%; } /* ========================================================================== BOTÓN DE RESEÑA — "¿Ya viniste? Dejá tu reseña" ========================================================================== El cliente: "el botón de reseña es muy simple, conseguir reseñas es tan importante como conseguir consultas". Era un link subrayado de 13px; ahora tiene cuerpo de botón. POR QUÉ NO ES VERDE. El verde de este sitio marca UNA cosa: lo que convierte huéspedes. Un segundo botón verde a 40px del CTA de WhatsApp compite con él y le roba clicks a la reserva. Y la madera no toca controles, por la regla de la cabecera de este archivo. Queda contorno sobre tinta clara: presente y clickeable, claramente por debajo del verde. POR QUÉ EL COPY EMPIEZA CON UNA PREGUNTA. El que mira el hero es, casi siempre, alguien que TODAVÍA NO VINO — no puede dejar una reseña y un botón que se la pide lo confunde. "¿Ya viniste?" filtra en tres palabras: el que no vino sigue de largo sin sentir que se perdió algo, y el que sí vino se da por aludido. Un botón que se auto-descarta para el 90% del tráfico no molesta a ese 90%. EL ÚNICO COLOR ES LA ESTRELLA, Y SÓLO AL PASAR EL CURSOR. Va del mismo gris apagado del contorno al --color-star de las cinco estrellas de al lado: el botón "se prende" y el gesto dice literalmente lo que hace. Sin sombra: `impeccable` marca contorno + sombra ancha en el mismo elemento como el tell de tarjeta fantasma. Contorno solo. ========================================================================== */ .btn--review { min-height: 46px; padding-inline: var(--space-3); /* text-sm y no text-xs: a 13px el botón se leía como una nota al pie con un recuadro alrededor. 15px lo pone en la familia de los botones sin acercarlo al verde, que está a 16px y 56px de alto. */ font-size: var(--text-sm); background: transparent; color: var(--color-on-dark); border-color: rgba(236, 241, 243, 0.42); } .btn--review .btn__star { font-size: 1.2em; line-height: 1; /* En reposo la estrella tiene que LEERSE como estrella, no como una mancha: a 0.45 de alpha se perdía contra el contorno. Apagada pero nítida, para que encenderse sea un cambio de color y no una aparición. */ color: rgba(236, 241, 243, 0.62); transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .btn--review:hover { background: rgba(236, 241, 243, 0.07); border-color: rgba(236, 241, 243, 0.72); box-shadow: none; /* el hover genérico de .btn no aplica acá */ } .btn--review:hover .btn__star { color: var(--color-star); transform: scale(1.18); } } /* En teclado la estrella también se prende: si el estado de foco no muestra lo mismo que el hover, el que navega con Tab ve un botón muerto. */ .btn--review:focus-visible { border-color: rgba(236, 241, 243, 0.72); } .btn--review:focus-visible .btn__star { color: var(--color-star); } @media (prefers-reduced-motion: reduce) { .btn--review .btn__star { transition: color var(--dur-base) var(--ease-out); } .btn--review:hover .btn__star { transform: none; } } .btn--lg { min-height: 56px; font-size: var(--text-base); padding-inline: var(--space-4); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); } .icon { width: 1.15em; height: 1.15em; flex-shrink: 0; fill: currentColor; } /* El `display:none` que trae [hidden] del navegador es la regla MÁS DÉBIL que existe, así que cualquier clase de autor que fije un display se lo come. `.btn-row` de acá arriba es exactamente ese caso: js/main.js apaga el fallback del calendario con `fallback.hidden = true` y, sin esta línea, el bloque de WhatsApp seguiría a la vista DUPLICADO debajo del calendario. Es la única regla !important del archivo y existe para que `hidden` signifique oculto en todos los casos, no en la mayoría. */ [hidden] { display: none !important; } /* ========================================================================== FLECHA DE AVANCE — la micro-interacción compartida del sitio. ========================================================================== Todos los enlaces que llevan hacia adelante terminan en una "→" que es `