/* ════════════════════════════════════════════════════════════════════ KEYBOURNE HOSPITALITY GROUP · sistema base Paleta B «Tinta y piedra» + grupo tipográfico G4 Fijado el 21 de septiembre de 2026. Reglas que este archivo da por cerradas: · Ni dorados, ni amarillos, ni rojos, ni naranjas. En ningún sitio. · El fondo es claro siempre. Nada de montar el sitio sobre oscuro. · Serif SOLO en el logotipo. Todo lo que se lee va en Figtree. · Nada de sombra interior (box-shadow inset). · En metal —placa, cubierto, sello— se graba en plata o peltre. Nunca latón. · NUNCA itálica. Ni en citas, ni en pies de foto, ni para destacar. Si algo tiene que destacar, se destaca con peso o con color, no inclinando la letra. */ .kb-nada-italica-jamas{font-style:normal} /* (regla escrita arriba para que no se pierda) ════════════════════════════════════════════════════════════════════ */ /* ── Tipografía ── Las fuentes se piden desde el de cada página, NO desde aquí. Aquí había un @import y estaba muerto: el CSS ignora cualquier @import que no vaya el primero del archivo, y encima tiene la regla anti itálica. El resultado fue que durante días el sitio entero se vio con las fuentes de sustitución del sistema y nadie cargó ni Cormorant ni Figtree. Desde el además cargan antes, porque un @import encadena una petición detrás de otra. Al montar la web se sirven desde nuestro propio servidor, para no depender de terceros ni de su rastreo. */ :root{ /* ── Color · «Verde y crema» ────────────────────────────────────── La paleta sale de dos referencias que eligió Carlos: el verde oliva de Rikas y el crema de Jumeirah. Sustituye a «Tinta y piedra». */ --kb-tinta:#232A20; /* texto principal y logotipo: verde tan oscuro que hace de negro */ --kb-casa:#46513E; /* el verde de Rikas: oliva profundo. Bandas, botones, pie */ --kb-casa-2:#5A6650; /* su estado: hover, foco, visitado */ --kb-acento:#586448; /* verde medio. Poco y a propósito */ --kb-peltre:#65675C; /* texto secundario */ --kb-piedra:#DCD5C6; /* líneas y bordes. NUNCA texto */ --kb-fondo:#EFE9DE; /* el crema de Jumeirah. El fondo del sitio */ --kb-tarjeta:#F7F3EA; /* cajas y papel */ /* Contrastes medidos sobre --kb-fondo: tinta 12,21 AAA · casa 6,93 AA · acento 5,22 AA peltre 4,76 AA · piedra 1,21 (solo líneas, nunca texto) */ /* ── Letra ───────────────────────────────────────────────────────── */ /* Cormorant Garamond es la letra de la lámina R1. NO es una suposición: se comparó el recorte de la lámina contra Cinzel, Gilda Display, Libre Caslon Display, Prata, Playfair y Bodoni, igualando el ancho de KEYBOURNE en todas para que la comparación fuera justa. Cormorant calca la K, la R y la O casi circular. Cinzel tiene los remates anchos y planos, y la lámina los tiene finos y afilados: no era. */ --kb-logo:"Cormorant Garamond",Georgia,"Times New Roman",serif; --kb-texto:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; /* La bajada del logotipo la quiere Carlos en Gotham. Gotham es de Hoefler y no tiene versión libre: no está instalada en el Mac ni viene dentro del .ai, así que delante va declarada igual (si algún día se compra la licencia y se añade su @font-face, entra sola sin tocar nada más) y detrás va Montserrat, que es la geométrica que más se le acerca y que en MAYÚSCULAS, que es como va siempre, apenas se distingue de ella. */ --kb-desc:"Gotham","Gotham HTF","Montserrat",system-ui,sans-serif; /* El tracking del descriptor sigue siendo el de la lámina R1: allí, con el nombre a 71 px de altura de mayúscula, «HOSPITALITY GROUP» llevaba el DOBLE de aire entre letras que el nombre. El TAMAÑO sí cambió. En la lámina el descriptor medía 0,838 del ancho del nombre, pero aquel nombre iba muy espaciado y era mucho más ancho (12,97 de proporción); el logotipo real de Carlos es más compacto (9,555), y al 0,838 el descriptor se quedaba en 4,4 px en la barra: ilegible. Cuadrado al 0,97 del nombre se lee en los tres tamaños y el conjunto queda como un bloque, que es como se usa un logotipo con bajada. */ --kb-logo-cap:.66em; /* altura de la mayúscula del logotipo */ --kb-desc-track:.8717em; /* el de «HOSPITALITY GROUP» */ --kb-desc-size:.2385em; /* cuadrado al ancho del nombre, medido en pantalla */ --kb-desc-sep:.36em; /* hueco bajo la BASE del nombre, en ems del conjunto */ /* 17px de base, no 16: Figtree tiene la x baja (71,4 % de la H) y a 16 se queda corta en pie de foto y letra chica. */ --kb-base:17px; --kb-alto:1.62; /* interlineado del texto corrido */ /* ── Espacio. Todo múltiplo de 4. ────────────────────────────────── */ --kb-1:4px; --kb-2:8px; --kb-3:12px; --kb-4:16px; --kb-5:24px; --kb-6:32px; --kb-7:48px; --kb-8:64px; --kb-9:96px; --kb-10:128px; /* ── Forma. Casi recto: es lujo clásico, no una app. ─────────────── */ --kb-radio-boton:2px; --kb-radio-caja:3px; --kb-linea:1px solid var(--kb-piedra); /* ── Anchos ──────────────────────────────────────────────────────── */ --kb-ancho:1240px; /* la caja del sitio */ --kb-lectura:68ch; /* lo más ancho que puede ser un párrafo */ } /* ════ Base ════ */ *{box-sizing:border-box} /* Blindaje: en este sitio no hay letra inclinada. Los elementos que el navegador pone en itálica por defecto —cita, énfasis, dirección, definición— se enderezan. */ i,em,cite,q,blockquote,address,dfn,var{font-style:normal} html{-webkit-text-size-adjust:100%} /* ════ LEY DE LA CASA: las palabras NO se parten ════ Ni una sola, en ningún sitio y en ningún idioma. El navegador parte por su cuenta cuando el texto va justificado, y deja cosas como «thou-sand» a mitad de una frase. Se apaga aquí, en la raíz, para que no haya que acordarse en cada componente nuevo. Si alguna vez hace falta partir algo, se pide a mano con ­ en esa palabra concreta. */ html{hyphens:none;-webkit-hyphens:none;-ms-hyphens:none} body{ margin:0; background:var(--kb-fondo); color:var(--kb-tinta); font-family:var(--kb-texto); font-size:var(--kb-base); line-height:var(--kb-alto); font-weight:400; -webkit-font-smoothing:antialiased; } img,video{max-width:100%;display:block} a{color:var(--kb-casa);text-underline-offset:.22em;text-decoration-thickness:1px} a:hover{color:var(--kb-casa-2)} :focus-visible{outline:2px solid var(--kb-casa);outline-offset:3px} /* ════ El logotipo ════ El nombre YA NO se compone con una fuente: es el original aprobado por Carlos, sacado del .ai que entregó, con las letras trazadas. Vive en assets/img/keybourne.svg y aquí se usa como MÁSCARA, no como imagen: el relleno lo pone `currentColor`, así que el mismo archivo vale en tinta sobre crema, en blanco sobre el vídeo y en crema sobre el pie, sin tener tres ficheros que mantener. El original viene en su propio verde, #003837, que es un petróleo y no el oliva de la paleta; pintándolo con currentColor se adapta al fondo donde caiga, y el verde de marca queda a decisión de Carlos. La proporción 9.555 es la medida real del archivo: 277,62 de ancho por 29,06 de altura de mayúscula. Si algún día cambia el SVG, se vuelve a medir. `--kb-logo-cap` mantiene el control por font-size que ya usaban la barra, la apertura y el pie: es la altura de la mayúscula en ems, igual que la que daba Cormorant, para que ningún tamaño se mueva. */ .kb-logo{ display:inline-grid; justify-items:center; row-gap:var(--kb-desc-sep); line-height:1; color:var(--kb-tinta); } .kb-logo__marca{ display:block; height:var(--kb-logo-cap); width:calc(var(--kb-logo-cap) * 9.555); background:currentColor; -webkit-mask:url(/assets/img/keybourne.svg) center/contain no-repeat; mask:url(/assets/img/keybourne.svg) center/contain no-repeat; } /* Sin soporte de máscara se vería un ladrillo de color macizo, que es peor que no ver nada: ahí se cae a la imagen, que pierde el recoloreado pero no el logotipo. Hoy no entra ningún navegador vivo, es un seguro. */ @supports not ((-webkit-mask:url(#a)) or (mask:url(#a))){ .kb-logo__marca{background:none; content:url(/assets/img/keybourne.svg)} } /* «HOSPITALITY GROUP» sí se compone, y sigue en la serif con las medidas sacadas de la lámina: cuerpo .2958em y tracking .8717em del cuerpo del nombre. La separación se mide desde la BASE de las letras, que con el SVG es exacta: antes la caja de texto traía el descender de propina. */ .kb-logo__desc{ display:block; font-family:var(--kb-desc); font-weight:500; font-style:normal; text-transform:uppercase; font-size:var(--kb-desc-size); letter-spacing:var(--kb-desc-track); /* El tracking añade aire también detrás de la última letra y descentra el bloque; se quita con un margen negativo del mismo valor. */ margin-inline-end:calc(-1 * var(--kb-desc-track)); line-height:1; } .kb-logo--negativo,.kb-logo--negativo .kb-logo__desc{color:var(--kb-fondo)} /* ════ Escala de texto ════ Los titulares también son Figtree: el serif es solo del logotipo. */ /* Escala contenida a propósito. El titular más grande del sitio son 40 px: lo que manda es el contenido, no el tamaño de la letra. */ .kb-display{font-size:clamp(27px,3.1vw,40px);font-weight:400;line-height:1.14;letter-spacing:-.008em;text-wrap:balance;margin:0} .kb-h1{font-size:clamp(24px,2.5vw,32px);font-weight:400;line-height:1.2;text-wrap:balance;margin:0} .kb-h2{font-size:clamp(21px,2.1vw,26px);font-weight:500;line-height:1.25;text-wrap:balance;margin:0} .kb-h3{font-size:clamp(18px,1.7vw,21px);font-weight:500;line-height:1.35;text-wrap:balance;margin:0} .kb-h4{font-size:17px;font-weight:600;line-height:1.4;margin:0} .kb-texto{font-size:var(--kb-base);max-width:var(--kb-lectura);text-wrap:pretty;margin:0} .kb-texto--suave{color:var(--kb-peltre)} .kb-chico{font-size:15px;color:var(--kb-peltre);margin:0} /* NO hay clase de antetítulo. Los «PUERTA 1 ·», «LO QUE HACEMOS ·» en versalitas sobre cada sección son el tic delator de una web hecha por una máquina. Si una sección necesita explicarse, se explica en su titular o en su texto. Lo único que sobrevive es la etiqueta de una cifra —«continentes» debajo de un «4»—, que no es un adorno sino parte del dato. */ .kb-etiqueta{font-size:14px;font-weight:500;color:var(--kb-peltre);margin:0;letter-spacing:0;text-transform:none} .kb-legal{font-size:13px;color:var(--kb-peltre);margin:0} /* Ninguna palabra sola en la última línea. */ .kb-display,.kb-h1,.kb-h2,.kb-h3{text-wrap:balance} .kb-texto,.kb-chico{text-wrap:pretty} /* Cifras: siempre alineadas y de ancho fijo, para que no bailen. */ .kb-cifra{font-variant-numeric:lining-nums tabular-nums;font-weight:300; font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:-.015em} /* ════ Botones ════ */ .kb-boton{ display:inline-block;font-family:var(--kb-texto);font-weight:600;font-size:15px; line-height:1;letter-spacing:.01em;padding:15px 26px;border-radius:var(--kb-radio-boton); border:1px solid var(--kb-casa);background:var(--kb-casa);color:var(--kb-fondo); cursor:pointer;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease; } .kb-boton:hover{background:var(--kb-casa-2);border-color:var(--kb-casa-2);color:var(--kb-fondo)} .kb-boton--linea{background:transparent;color:var(--kb-casa)} .kb-boton--linea:hover{background:var(--kb-casa);color:var(--kb-fondo)} .kb-boton--negativo{background:transparent;border-color:var(--kb-fondo);color:var(--kb-fondo)} .kb-boton--negativo:hover{background:var(--kb-fondo);color:var(--kb-casa)} /* ════ Piezas ════ */ /* Margen lateral: nunca menos de 28 px (Carlos, 2026-09-23: en el teléfono el texto y las rayas del formulario iban pegados al canto). Desde 700 px de ancho el 4vw ya pasa de 28, así que escritorio y tableta no cambian. */ .kb-caja{max-width:var(--kb-ancho);margin-inline:auto;padding-inline:clamp(28px,4vw,48px)} .kb-tarjeta{background:var(--kb-tarjeta);border:var(--kb-linea);border-radius:var(--kb-radio-caja); padding:var(--kb-5);display:grid;gap:var(--kb-2);align-content:start} .kb-banda{background:var(--kb-casa);color:var(--kb-fondo);padding-block:clamp(32px,6vw,72px)} .kb-banda a{color:var(--kb-fondo)} .kb-filete{width:52px;height:1px;background:var(--kb-piedra);border:0;margin:0} /* Cards en móvil: se deslizan, nunca se apilan. El scroll de la página no se alarga por culpa de ellas. */ .kb-fila{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--kb-3); overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .kb-fila::-webkit-scrollbar{display:none} .kb-fila > *{scroll-snap-align:center} @media (min-width:760px){ .kb-fila{grid-auto-flow:row;grid-template-columns:repeat(var(--kb-columnas,3),1fr); grid-auto-columns:auto;overflow:visible} } /* ════ El vídeo que avanza con la rueda ════ La sección es alta; dentro, una ventana que se queda fija mientras pasa. El canvas pinta el fotograma que toca según lo que llevas bajado. Sin JavaScript se ve el primer fotograma como una foto normal: nunca un hueco. */ .kb-cine{position:relative;background:var(--kb-tinta)} /* dvh y no svh: en el iPhone, al bajar, Safari esconde su barra y la pantalla crece. Con svh la ventana se quedaba en el alto pequeño y debajo asomaba una franja verde del fondo de la sección. dvh sigue el alto real. */ .kb-cine__ventana{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden; display:grid;place-items:center;background:var(--kb-tinta)} /* El plano no se queda clavado: DERIVA con el scroll y al final se retira por arriba, para que se note que la toma va pasando y no que es una foto pegada al fondo. Por eso la media mide 114 % y no 100 %: ese 7 % de sobra por arriba y por abajo es lo que permite moverla sin que se descubra el borde. Lo mueve --desliz, que viene del mismo scroll que los fotogramas. */ .kb-cine__lienzo,.kb-cine__respaldo{width:100%;height:114%;object-fit:cover;display:block; transform:translate3d(0,var(--desliz,0%),0);will-change:transform} .kb-cine__respaldo{position:absolute;left:0;right:0;top:-7%;height:114%} @media (prefers-reduced-motion:reduce){ .kb-cine__lienzo,.kb-cine__respaldo{transform:none} } .kb-cine.listo .kb-cine__respaldo{opacity:0} /* ── Las cifras, a mitad del vuelo ── El plano se oscurece, entran las cifras una detrás de otra y, cuando pasan, el velo se levanta y el vuelo sigue. Todo lo maneja el mismo scroll que mueve los fotogramas: no hay temporizadores ni animaciones sueltas por su cuenta. */ .kb-cine__velo{position:absolute;inset:0;background:#1A1F17;opacity:0;pointer-events:none; will-change:opacity,transform} /* La banda de cifras NO ocupa la pantalla: se queda en el cuarto de abajo. Antes iba a pantalla completa y tapaba el vuelo justo cuando más se mueve; así el plano se sigue viendo por encima mientras las cifras suben. */ .kb-cine__cifras{position:absolute;inset:auto 0 0 0;height:25%; display:grid;pointer-events:none;will-change:transform} /* La tarjeta de cristal. No es una caja opaca puesta encima: deja pasar el plano, lo desenfoca y lo oscurece lo justo para que la letra blanca se lea. Por eso el velo general bajó del 70 % al 30 %: antes toda la pantalla cargaba con la legibilidad; ahora la carga el cristal y el resto del plano se ve mucho mejor. Al pasar a pantalla completa hubo que volver a medirlo: la tarjeta pequeña caia sobre una banda central oscura, y a pantalla entera pilla tambien el cielo y el marmol, que son lo mas claro del plano. Con el .55 de antes la etiqueta se quedaba en 4,07 y no llegaba a AA. Medido ahora, con el cristal al .62 y la etiqueta al 88 %: cifra 6,6 y etiqueta 5,6. `--v` la mueve el mismo scroll que mueve el velo, de 0 a 1. */ .kb-cine__glass{--v:0; /* Una banda a lo ancho, partida en cinco columnas iguales con sus filetes. Ocupa el cuarto inferior de la pantalla, no la pantalla entera: el vuelo tiene que verse moverse por encima. Por eso no hay radio, ni márgenes, ni ancho máximo: llena su banda de borde a borde. */ display:grid;align-items:center; grid-template-columns:repeat(2,1fr); padding:0;text-align:center; background:rgba(26,31,23,calc(.70 * var(--v))); border-top:1px solid rgba(239,233,222,calc(.24 * var(--v))); transform:none} /* El desenfoque solo se enciende mientras la tarjeta esta en pantalla: un backdrop-filter permanente sobre un que se repinta en cada fotograma cuesta frames de balde. Escala con --v, asi que al encenderse vale una decima de pixel y no se nota el salto. 10 px y no 22: a Carlos el fondo le tapaba demasiado el plano. Con menos desenfoque pasa mas luz por debajo, asi que el contraste se volvio a medir sobre el render, no se dio por bueno. */ .kb-cine__glass.dentro{ -webkit-backdrop-filter:blur(calc(10px * var(--v))) saturate(calc(100% + 45% * var(--v))); backdrop-filter:blur(calc(10px * var(--v))) saturate(calc(100% + 45% * var(--v))); will-change:transform,background} @media (min-width:620px){.kb-cine__glass{grid-template-columns:repeat(3,1fr)}} @media (min-width:980px){.kb-cine__glass{grid-template-columns:repeat(5,1fr)}} @media (prefers-reduced-motion:reduce){.kb-cine__glass{transform:none}} /* Un filete vertical entre cifra y cifra, clavado en la mitad del hueco. No lleva el primero de cada fila, y por eso hace falta un selector por cada numero de columnas: con dos, con tres y con cinco. */ /* El filete va a TODO LO ALTO de la pantalla, no sólo al lado de la cifra: es lo que hace que se lea como una pantalla dividida y no como cinco tarjetas puestas en fila. */ /* El filete mide lo que mide su columna, ni un pixel más. Con `200vh` se veia entera la pantalla dividida, sí, pero al subir la cortina el filete seguia tapando media pantalla y las rayas se quedaban sobre el plano ya limpio. Como la columna ya va a `height:100%`, con esto basta y sube con todo. */ .kb-cine__glass > div::before{content:"";position:absolute; left:0;top:0;width:1px;height:100%;background:rgba(239,233,222,.22)} .kb-cine__glass > div:nth-child(2n+1)::before{display:none} @media (min-width:620px){ .kb-cine__glass > div:nth-child(2n+1)::before{display:block} .kb-cine__glass > div:nth-child(3n+1)::before{display:none} } @media (min-width:980px){ .kb-cine__glass > div:nth-child(3n+1)::before{display:block} .kb-cine__glass > div:nth-child(5n+1)::before{display:none} } .kb-cine__glass > div{position:relative;display:grid;gap:6px;justify-items:center; align-content:center;height:100%;opacity:0; transform:translateY(16px);will-change:opacity,transform} /* Las cifras NO van en la serif del nombre: Cormorant trae cifras de estilo antiguo —las que suben y bajan de la linea— y en una fila de datos se ven desiguales, como mal alineadas. Un dato quiere cifras de caja alta y del mismo ancho, que es lo que da Figtree con `lnum` y `tnum` forzados. Peso 400 a peticion de Carlos: a 200 se quedaban finas sobre un plano en movimiento, donde la letra compite con las luces de la ciudad. */ .kb-cine__glass .n{font-family:var(--kb-texto);font-weight:400;color:#FFFFFF; display:inline-block; font-size:clamp(34px,5.2vw,64px);line-height:1;letter-spacing:-.018em; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1;} .kb-cine__glass .e{font-family:var(--kb-texto);font-weight:500;color:#FFFFFF; font-size:clamp(9.5px,.95vw,11.5px);letter-spacing:.2em;text-transform:uppercase; opacity:.88;margin-top:4px} /* El texto encima del vídeo SIEMPRE sobre un velo, nunca directo: una foto clara por debajo se come la letra blanca. El velo se mide, no se estima. */ .kb-cine__texto{position:absolute;inset:auto 0 0 0;padding:clamp(20px,4vw,48px); display:grid;gap:var(--kb-2);justify-items:start;color:#FFFFFF; background:linear-gradient(to top,rgba(26,31,23,.82) 0%,rgba(26,31,23,.58) 45%,rgba(26,31,23,0) 100%)} .kb-cine__texto .kb-texto{color:#FFFFFF} @media (prefers-reduced-motion:reduce){ .kb-cine{height:auto!important} .kb-cine__ventana{position:relative;height:auto;aspect-ratio:16/9} } /* ════ Quien no quiera movimiento, que no lo tenga ════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }