/* ══ La home, con el lenguaje de la casa ══
   Lo que se ha traído de grupoandersons.com, mirándola en el navegador:
   · Titular de sección centrado, en serif y mayúsculas, con las letras aireadas.
   · Bandas de color a todo el ancho que van alternando.
   · Fotos a sangre, tocando el borde.
   · Botón rectangular, sólido, con el texto en mayúsculas.
   · El panel de marcas: lista a un lado sobre fondo oscuro, foto al otro.
   Lo que NO se ha traído: el arena #AD997C de sus bandas (cálido, prohibido)
   y la itálica de sus dichos. Aquí no hay una sola letra inclinada. */

/* La barra no está al entrar: primero se ve el vuelo con el logotipo en medio.
   Aparece en cuanto empiezas a bajar, en blanco translúcido con la imagen
   difuminada por detrás. Medido sobre el vídeo: el texto da 9,84, y hasta
   contra negro puro da 8,27. Se lee siempre. */
.hm-barra{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(35,42,32,.10);
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .4s ease}
.hm-barra.dentro{transform:none;opacity:1;pointer-events:auto}
/* Si la página no lleva vídeo de apertura, la barra está desde el primer momento. */
body.sin-cine .hm-barra{transform:none;opacity:1;pointer-events:auto;transition:none}
/* Barra fina: la altura la marca el logotipo, no el relleno. */
.hm-barra .kb-caja{display:flex;align-items:center;justify-content:space-between;gap:var(--kb-5);
  padding-block:9px;flex-wrap:wrap}
.hm-barra .kb-logo{font-size:21px}
/* El menú va en la serif del logotipo, no en la del texto corrido: en mayúsculas
   y pequeña, una sans geométrica se ve genérica y barata. Con la romana el menú
   pertenece al mismo mundo que el nombre, los botones y los titulares.
   Peso 500 y 14px porque una serif fina a 12px en versales se deshace. */
.hm-menu{display:flex;gap:clamp(16px,2.2vw,34px);flex-wrap:wrap;
  font-family:var(--kb-logo);font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}
/* El hover: un filete que se abre desde el centro. Se nota, no mueve nada de
   sitio y pertenece al registro del sitio —una raya fina, no un subrayado de
   enlace—. El `right` descuenta el aire que el letter-spacing deja detrás de
   la última letra: sin eso, la raya sobresale por la derecha. */
.hm-menu a{position:relative;text-decoration:none;color:var(--kb-tinta);
  padding-block:6px;transition:color .28s ease}
.hm-menu a::after{content:"";position:absolute;left:0;right:.14em;bottom:0;height:1px;
  background:var(--kb-casa);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.hm-menu a:hover{color:var(--kb-casa)}
.hm-menu a:hover::after{transform:scaleX(1)}
/* Quien no quiera movimiento ve la raya aparecer sin animación */
@media (prefers-reduced-motion:reduce){
  .hm-menu a::after{transition:none}
}
@media (max-width:880px){.hm-menu{display:none}}

/* Apertura: media pura, sin una sola palabra encima */
/* La apertura es el vuelo sobre Dubái: la ventana se queda fija a pantalla
   completa y el plano avanza con la rueda. Encima, solo el logotipo. */
.hm-marca-apertura{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  padding-inline:clamp(28px,5vw,48px);
  transition:opacity .55s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
/* Viñeta: el centro del plano es oscuro, pero pasan luces de la ciudad por detrás
   y sobre una luz la letra blanca se borra (medido: 1,65). Con este velo, 6,9.
   Es un degradado, no una caja: no se ve dónde empieza. */
.hm-marca-apertura::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 64% 48% at 50% 47%,
    rgba(26,31,23,.68) 0%, rgba(26,31,23,.48) 44%, rgba(26,31,23,0) 80%)}
.hm-marca-apertura .kb-logo{position:relative;font-size:clamp(28px,6vw,64px);color:#FFFFFF}
.hm-marca-apertura .kb-logo__desc{color:#FFFFFF;opacity:1}
.hm-marca-apertura.fuera{opacity:0;transform:translateY(-22px)}

/* Lo que sigue en la serif, y por qué: el menú (lo pediste tú, en Figtree se
   veía barato), los nombres de las marcas y de los medios —Harry's, Osaka,
   Forbes— porque son nombres propios, no texto, y los botones, que en versales
   con serifa son el «LEER MÁS» de la casa. Todo lo demás es Figtree. */

/* ── El titular de sección ──
   En Figtree, no en la serif: el sistema dice «serif solo en el nombre» y eso
   lo eligió Carlos. Se me coló la serif aquí al copiar el lenguaje de la web de
   Anderson's, que va toda en Georgia. Mayúsculas y aire entre letras sí se
   quedan: eso es de la casa y funciona. Peso 500 porque en versales una sans
   a peso normal se queda floja. */
/* Figtree fina en caja baja y grande (la 02 del comparador). Nada de versales:
   el titular manda por tamaño y por aire, no por ir gritado. El espaciado es
   NEGATIVO —las letras se juntan un punto— que es lo que hace que un titular
   grande se lea como una pieza y no como palabras sueltas. */
/* Una sola línea en escritorio. El ancho máximo es 40ch porque el titular más
   largo del sitio tiene 35 caracteres: con ese tope ninguno parte, y si algún
   día se escribe uno más largo, parte solo en vez de desbordarse. En móvil
   parten todos, que es lo que toca. */
/* Los títulos de sección van en la ROMANA, no en la geométrica.
   En geométrica el titular se leía como el de cualquier web: correcto y sin
   nadie detrás. La portada ya tiene una romana propia —el logotipo y el menú
   van en ella—, así que el titular no se inventa nada, usa el vocabulario que
   la página ya habla. Peso 500 porque en versales el 400 se afina demasiado y
   el 600 engorda los remates. Va un punto más grande que la geométrica: la
   romana tiene la caja más pequeña y al mismo cuerpo se ve menor. */
.hm-titulo{font-family:var(--kb-logo);font-weight:500;text-transform:uppercase;
  letter-spacing:.155em;text-indent:.155em;text-align:center;line-height:1.24;margin:0;
  font-size:clamp(22px,3.1vw,38px);color:var(--kb-tinta);max-width:40ch;
  margin-inline:auto;text-wrap:balance}
.hm-titulo--claro{color:var(--kb-fondo)}
.hm-entrada{text-align:center;max-width:56ch;margin-inline:auto;color:var(--kb-peltre)}
.hm-cabeza{display:grid;gap:var(--kb-4);margin-bottom:var(--kb-7)}
/* Un filete corto bajo el título: separa el titular del texto sin meter un
   bloque de aire, y es el mismo recurso que ya usa el hover del menú. Va en
   piedra, que es el color de las líneas: nunca se usa para texto. */
.hm-titulo + .hm-raya,
.hm-cabeza .hm-raya{width:clamp(38px,4vw,58px);height:1px;background:var(--kb-piedra);
  border:0;margin:clamp(14px,1.6vw,20px) auto 0}
/* Al 42 % la raya da 2,59 de contraste sobre el oliva: está pintada y no se
   ve. Al 70 % da 4,3 y se lee como lo que es, un filete. */
.hm-sec--oscura .hm-raya,.hm-sec--tinta .hm-raya,
.hm-franja .hm-raya{background:rgba(239,233,222,.7)}

.hm-sec{padding-block:clamp(52px,8vw,104px)}

/* ── La caja que sube ──
   El plano de arriba se queda fijo y esta sección sube por encima hasta TAPARLO
   POR COMPLETO, con las esquinas de arriba redondeadas: se lee como una caja
   que emerge del vídeo y se lo come, no como un corte entre dos bloques.
   El solape es de UNA PANTALLA ENTERA (100svh). Esa altura se le devuelve al
   vídeo alargando su sección otro tanto —`data-largo` y `data-solape` van
   emparejados—, para que el vuelo termine justo cuando la caja empieza a
   taparlo y no se pierda recorrido. */
/* La caja que sube va en CLARO: sale del vídeo oscuro, corta de golpe y deja
   la web en su fondo propio. Además es lo primero que se lee, así que tiene
   que ser lo más legible de la página, no lo más atmosférico. */
.hm-sube{background:var(--kb-fondo);
  position:relative;z-index:3;
  border-radius:clamp(14px,2.2vw,30px) clamp(14px,2.2vw,30px) 0 0;
  margin-top:-100svh;
  /* Tiene que medir AL MENOS lo que solapa, o deja de tapar antes de tiempo
     y el vídeo vuelve a asomar por debajo. El alto mínimo y el solape van
     atados: si se cambia uno, se cambia el otro. */
  min-height:100svh;
  /* grid y no flex: con flex el hijo no toma el ancho y la caja sale vacía.
     Y con la columna declarada, no `auto`: una columna automática se encoge
     al contenido, y entonces la rejilla de tarjetas de dentro se queda en una
     sola columna estrecha en mitad de una pantalla vacía. */
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center}

/* ── El fondo que cambia ──
   La sección entra en crema y, sin moverse de sitio, su fondo se convierte en
   una foto de Dubái conforme se baja. La sección se alarga para que ese cambio
   tenga recorrido, y lo de dentro se queda clavado en pantalla mientras tanto.
   El cuidado está en el CRUCE: el texto va en tinta y sobre la foto no se
   leería, así que NO se cruza con el fondo a medias. El texto se retira antes
   de que la foto pese, y cuando la foto manda ya no hay letra encima. Es el
   mismo relevo que hubo que montar en la portada de Fred's, y por la misma
   razón: un texto sobre un fondo que está cambiando no se lee en el medio. */
/* `align-content` ya no es sólo de grid: en Chrome también alinea el contenido
   de un bloque, así que el `center` que .hm-sube usa para centrar su texto
   estaba centrando aquí el bloque fijo dentro de las dos pantallas de la
   sección. Efecto: la foto entraba a media altura y dejaba una franja de crema
   arriba. Aquí el contenido va pegado al principio y el sticky hace el resto. */
/* Bajó de 300svh a 100svh: los dos tercios de más eran el recorrido que
   necesitaba el fondo para convertirse en foto. Sin foto, eso es pantalla
   vacía. La foto de Dubái vive ahora en su propia sección, justo debajo. */
.hm-sube--cambia{min-height:100svh;display:block;padding-block:0;align-content:start;
  /* Esta sección va en VERDE, no en crema. Sale del vídeo dorado y corta de
     golpe, que es lo que hace que la caja se lea como una pieza que emerge y
     no como el final del vídeo. Con el verde puesto, además, el cruce a la
     foto de Dubái es más suave: se pasa de oscuro a oscuro.
     Medido: el crema sobre este verde da 6,93 y el blanco de la tarjeta 7,56.
     El texto va en blanco de tarjeta, no en crema, para llegar a AAA. */
  background:var(--kb-casa)}
.hm-sube--cambia .hm-titulo{color:var(--kb-tarjeta)}
.hm-sube--cambia .hm-raya{background:rgba(247,243,234,.38)}
.hm-sube--cambia .hm-presenta{color:var(--kb-tarjeta)}
.hm-sube--cambia .hm-sube__fijo{position:sticky;top:0;height:100svh;
  display:grid;align-content:center;overflow:hidden}
.hm-sube__foto{position:absolute;inset:0;z-index:0;opacity:1;
  background:var(--kb-tinta) center/cover no-repeat;will-change:opacity}
/* La foto lleva su propio velo desde el primer momento: sirve para que lo que
   venga detrás se lea, y para que el cambio no dé un golpe de luz. */
.hm-sube__foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,31,23,.30),rgba(26,31,23,.46))}
.hm-sube--cambia .hm-sube__fijo > .kb-caja{position:relative;z-index:3;
  will-change:opacity,transform}
/* Sin textura: ni trama ni grano. Se probaron las dos y ninguna convenció;
   el crema va liso. Lo que da materia aquí es la foto que entra después. */
.hm-sube > *{position:relative;z-index:2}
/* La caja de contenido lleva `margin-inline:auto` para centrarse. Dentro de un
   grid eso deja de centrar y pasa a ENCOGER: los márgenes automáticos se comen
   el espacio libre y el elemento se queda del ancho de su contenido. Por eso
   las tarjetas salían en una sola columna estrecha en mitad de la pantalla.
   Con el ancho declarado vuelve a ocupar la columna entera. */
.hm-sube > .kb-caja,
.hm-sube--segunda > .kb-caja,
.hm-sube__fijo > .kb-caja{width:100%}
/* En la sección que cambia de fondo, la trama NO puede ir en la sección: la
   sección mide dos pantallas y lo que se ve es la que está pegada, así que la
   trama se pinta dentro de esa, y DEBAJO de la foto. Puesta en la sección se
   quedaba encima de la foto y se veía la malla sobre Dubái. */
/* El verde ya no es el fondo de la sección: es una CAPA encima de la foto que
   se va difuminando. Al principio tapa del todo y sólo se ve verde; según se
   baja, se abre y la foto aparece por debajo. El texto no se va con ella: se
   queda mientras el verde tenga cuerpo, y sólo empieza a retirarse cuando el
   verde ha bajado del 50 %. */
.hm-sube__verde{position:absolute;inset:0;z-index:1;background:var(--kb-casa);
  opacity:1;will-change:opacity}
/* La opacidad del texto la lleva el scroll, no una transición: si se deja la
   que trae .ap, el texto va por detrás del dedo y se retira tarde. */
.hm-sube--cambia .hm-sube__fijo > .kb-caja.dentro{transition:none}

/* ── La segunda caja que sube ──
   Lo que hizo la primera sobre el vídeo, lo repite ésta sobre la foto de
   Dubái: emerge por debajo, la tapa entera y se queda. Así la foto no termina
   en un corte recto, sino comida por el bloque siguiente, que es el mismo
   gesto con el que se abrió la página.
   El solape y la altura van EMPAREJADOS, y la cuenta importa: con la sección
   de arriba a N pantallas y un solape de S, esta caja asoma cuando aquélla
   va por (N - 1 - S) / (N - 1) de su recorrido. Con 300svh y un solape de una
   pantalla entera salía 0,50, o sea que subía a tapar la foto cuando el verde
   aún se estaba abriendo. Con un solape de 0,7 pantallas sale 0,65, y para
   entonces el verde ya se fue (termina en 0,58) y la foto ha tenido su
   momento a solas. Si se toca uno de los tres números, se rehace la cuenta.
   Va en el verde de la casa, no en el crema de la primera: es la misma pieza
   de antes, sólo que ahora sube en vez de empezar donde acaba la foto. */
.hm-sube--segunda{background:var(--kb-casa);z-index:4;
  border-radius:clamp(14px,2.2vw,30px) clamp(14px,2.2vw,30px) 0 0;
  margin-top:-70svh;min-height:100svh;
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
  padding-block:clamp(64px,9vw,120px)}
/* El párrafo de presentación, un punto mayor que el resto: es la primera frase
   que lee alguien que no sabe qué es esta casa. */
/* Justificado a petición de Carlos. Justificar pide tres cuidados: una caja
   ancha (en columna estrecha se abren ríos de blanco entre palabras), partición
   de palabras encendida para que el navegador tenga por dónde cortar, y un
   texto medido para que caiga en TRES líneas exactas y la última no quede en
   una palabra suelta. El `text-align` se pone aquí y pisa el centrado que trae
   .hm-entrada. */
/* Cuerpo 14 y color #1D1D1D a petición de Carlos: el peltre le resultaba
   demasiado gris para la primera frase del sitio. Contra el crema da 14,9 de
   contraste, así que a 14 px sigue siendo cómodo de leer. El ancho se mide en
   caracteres, no en píxeles, para que al bajar el cuerpo la caja se estreche
   con él y la línea no se haga interminable. */
.hm-presenta{font-size:15px;line-height:1.7;max-width:76ch;
  color:#1D1D1D;text-align:justify;text-align-last:center;text-wrap:initial}
/* En pantalla estrecha el justificado no compensa: con pocas palabras por
   línea los huecos se vuelven zanjas. Ahí vuelve a centrado. */
@media (max-width:620px){.hm-presenta{text-align:center}}
.hm-sec--tarjeta{background:var(--kb-tarjeta);border-block:var(--kb-linea)}
/* Sección sobre el color de la casa. Todo lo que dentro llevaba color propio
   —el texto secundario, los filetes— se aclara aquí, o se quedaría oscuro
   sobre oscuro, que es justo el fallo que hay que evitar.
   Medido sobre #46513E: el texto al 82 % da 8,71 y el filete al 55 %, 4,4. */
.hm-sec--oscura{background:var(--kb-casa);color:var(--kb-fondo)}
.hm-sec--oscura .hm-entrada,
.hm-sec--oscura .kb-chico,
.hm-sec--oscura .kb-texto--suave{color:rgba(239,233,222,.82)}

.hm-sec--oscura .hm-region{border-bottom-color:rgba(239,233,222,.22)}
.hm-sec--oscura a{color:var(--kb-fondo)}
.hm-sec--tinta{background:var(--kb-tinta);color:var(--kb-fondo)}

/* La franja de titular a todo el ancho: el «TERRITORIO ANDERSON'S» de la casa.
   Va en PIEDRA, no en un oscuro. Encima tiene la sección azul de «lo que
   hacemos» y debajo el panel de marcas, que es tinta: con la franja también
   oscura se encadenaban cuatro zonas oscuras seguidas —vídeo, azul, franja,
   panel— y la web dejaba de ser clara. En piedra la franja corta, respira y
   sigue siendo una banda de color, como la de la casa. Tinta sobre piedra: 9,10. */
.hm-franja{background:var(--kb-piedra);padding-block:clamp(20px,2.6vw,30px)}
/* La franja es un rótulo de banda, no un titular de sección: ahí las versales
   con mucho aire SON el recurso, como el «TERRITORIO ANDERSON'S» de la casa. */
.hm-franja .hm-titulo{color:var(--kb-tinta);text-transform:uppercase;font-weight:500;
  letter-spacing:.24em;text-indent:.24em;font-size:clamp(17px,1.9vw,23px);max-width:none}

/* Cifras */
.hm-cifras{display:grid;gap:var(--kb-5) clamp(16px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(134px,1fr));text-align:center}
.hm-cifras > div{display:grid;gap:var(--kb-1);justify-items:center}

/* Simetría: las cuatro descripciones se escribieron a la misma longitud —tres
   caracteres de diferencia entre la más corta y la más larga— para que ocupen
   las mismas líneas. Eso no se arregla con CSS, se arregla escribiendo. */

/* ── Las marcas: la fila que se mueve de lado ──
   Se baja con la rueda y la fila avanza en horizontal. Veinte marcas se pasan
   enteras sin una cuadrícula interminable, y obliga a verlas todas en vez de
   saltárselas. El alto de la sección lo calcula el JS: exactamente lo que mide
   el recorrido horizontal, para que una vuelta de rueda mueva lo mismo aquí
   que en el resto de la página. */
.hm-marcas{position:relative;background:var(--kb-tinta)}
.hm-marcas__win{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center}
.hm-marcas__tira{display:flex;gap:clamp(14px,1.6vw,22px);
  padding-inline:clamp(16px,6vw,90px);will-change:transform}
.hm-mc{flex:0 0 clamp(230px,25vw,330px);display:grid;grid-template-rows:auto 1fr;
  border-radius:var(--kb-radio-caja);overflow:hidden;background:var(--t)}
.hm-mc__foto{aspect-ratio:4/5;display:grid;place-items:center;padding:20px;text-align:center;
  background:var(--t)}
.hm-mc__foto span{font-family:var(--kb-logo);font-size:clamp(17px,1.9vw,22px);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,222,.30)}
.hm-mc__txt{padding:18px 20px 22px;display:grid;gap:4px;align-content:start;
  background:rgba(239,233,222,.06)}
.hm-mc__txt h3{font-family:var(--kb-logo);font-size:19px;letter-spacing:.1em;
  text-transform:uppercase;margin:0;color:var(--kb-fondo);font-weight:500}
.hm-mc__txt .que{margin:0;font-size:14px;color:rgba(239,233,222,.86)}
.hm-mc__txt .donde{margin:0;font-size:12.5px;color:rgba(239,233,222,.6);line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .hm-marcas{height:auto!important}
  .hm-marcas__win{position:relative;height:auto;padding-block:var(--kb-7)}
  .hm-marcas__tira{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important}
  .hm-mc{scroll-snap-align:center}
}

/* Destinos */
.hm-regiones{display:grid;gap:0;border-top:var(--kb-linea)}
.hm-region{display:grid;grid-template-columns:minmax(140px,210px) 1fr;gap:var(--kb-3) clamp(16px,4vw,48px);
  padding-block:var(--kb-5);border-bottom:var(--kb-linea);align-items:baseline}
.hm-region h3{font-family:var(--kb-texto);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:18px;margin:0}
@media (max-width:620px){.hm-region{grid-template-columns:1fr}}

/* Tiras de nombres: socios y prensa */
.hm-tira{display:flex;flex-wrap:wrap;gap:var(--kb-4) clamp(26px,5vw,66px);align-items:center;justify-content:center}
.hm-tira span{font-family:var(--kb-logo);font-size:clamp(17px,2vw,24px);letter-spacing:.11em;
  text-transform:uppercase;color:var(--kb-casa)}
.hm-sec--oscura .hm-tira span,.hm-sec--tinta .hm-tira span{color:var(--kb-fondo);opacity:.92}

/* El caso */
.hm-caso{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1.05fr .95fr;align-items:center}
@media (max-width:860px){.hm-caso{grid-template-columns:1fr}}
.hm-caso .cifras{display:grid;gap:var(--kb-5);grid-template-columns:repeat(2,1fr);text-align:center}

/* Galardones */
/* Ocho galardones, no tres: las fichas bajan de cuerpo y se alinean a la
   izquierda, porque ahora llevan frase entera y centrada se leería peor.
   El titular de cada una es más corto que su texto, así que manda el texto. */
.hm-premios{display:grid;gap:var(--kb-4);grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  margin-top:var(--kb-7)}
.hm-premios div{display:grid;gap:var(--kb-2);padding:var(--kb-5);border:var(--kb-linea);
  background:var(--kb-fondo);text-align:left;align-content:start}
.hm-premios h3{font-family:var(--kb-texto);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:13px;line-height:1.35;margin:0;color:var(--kb-tinta)}
.hm-premios .kb-chico{font-size:13px;line-height:1.6;color:#1D1D1D;margin:0}

/* Las dos puertas */
.hm-puertas{display:grid;gap:var(--kb-4);grid-template-columns:repeat(2,1fr)}
@media (max-width:780px){.hm-puertas{grid-template-columns:1fr}}
.hm-puerta{display:grid;gap:var(--kb-4);align-content:start;justify-items:center;text-align:center;
  padding:clamp(28px,4vw,48px);border:1px solid rgba(239,233,222,.42)}
.hm-puerta h3{font-family:var(--kb-texto);font-weight:500;text-transform:uppercase;
  letter-spacing:.13em;font-size:clamp(19px,2.2vw,24px);margin:0;color:var(--kb-fondo)}
.hm-puerta .kb-texto{color:rgba(239,233,222,.86);max-width:34ch}

/* Botón como el de la casa: rectangular, sólido, en mayúsculas */
.hm-boton{display:inline-block;font-family:var(--kb-logo);font-weight:500;font-size:15px;
  letter-spacing:.13em;text-transform:uppercase;padding:16px 30px;border-radius:0;
  border:1px solid var(--kb-casa);background:var(--kb-casa);color:var(--kb-fondo);
  text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease}
.hm-boton:hover{background:var(--kb-casa-2);border-color:var(--kb-casa-2);color:var(--kb-fondo)}
.hm-boton--claro{background:transparent;border-color:var(--kb-fondo);color:var(--kb-fondo)}
.hm-boton--claro:hover{background:var(--kb-fondo);color:var(--kb-casa)}

/* Pie */
.hm-pie{background:var(--kb-tinta);color:var(--kb-fondo);padding-block:clamp(44px,6vw,76px)}
.hm-pie a{color:rgba(239,233,222,.86);text-decoration:none}
.hm-pie a:hover{color:#FFFFFF}
.hm-pie .cols{display:grid;gap:var(--kb-6);grid-template-columns:1.4fr repeat(3,1fr)}
@media (max-width:820px){.hm-pie .cols{grid-template-columns:1fr 1fr}}
.hm-pie h4{font-family:var(--kb-texto);font-weight:600;text-transform:uppercase;letter-spacing:.11em;
  font-size:15px;margin:0 0 var(--kb-3)}
.hm-pie ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--kb-2);font-size:15px}
.hm-pie .fin{margin-top:var(--kb-7);padding-top:var(--kb-4);
  border-top:1px solid rgba(239,233,222,.2);font-size:14px;color:rgba(239,233,222,.68);text-align:center}

/* Aparecer al entrar */
.ap{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.ap.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ap{opacity:1;transform:none;transition:none}}

/* Lo que falta por confirmar. Solo en la maqueta. */
.falta{border-left:3px solid var(--kb-acento);padding-left:var(--kb-3);color:var(--kb-acento);
  font-size:14px;text-align:left;max-width:60ch;margin-inline:auto}


/* El logotipo de la barra es un enlace, pero no parece un enlace */
.hm-barra a{text-decoration:none}



/* ════ Galardones · tarjetas apiladas ════
   Una baraja: la de delante nítida y las de detrás cada vez más pequeñas,
   más bajas y más desenfocadas. Al bajar, la de delante se va hacia arriba y
   la siguiente pasa al frente enfocándose.
   El desenfoque es lo que da la profundidad: sin él, las de detrás se leen
   como tarjetas más pequeñas, no como tarjetas más lejos. */
/* ════ Los galardones · carrusel ════
   Antes eran una baraja que se apilaba con el scroll. Fuera: ahora es un
   carrusel normal, una tarjeta por vista, que se arrastra con el dedo o el
   trackpad y se salta con los puntos. Misma mecánica que la galería de casas,
   para no meter un segundo vocabulario de carrusel en la misma página.
   La sección va sobre el verde claro (--kb-casa-2). Las tarjetas siguen en
   crema, así que el contraste lo pone la tarjeta contra el fondo. */
.hm-pila{position:relative;background:var(--kb-casa-2)}
.hm-pila__carril{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;
  --lado:calc(max(calc((100vw - var(--kb-ancho)) / 2), 0px) + clamp(28px,4vw,48px));
  padding-inline:var(--lado);scroll-padding-inline:var(--lado);
  margin-top:clamp(26px,3.4vw,44px)}
.hm-pila__carril::-webkit-scrollbar{display:none}
.hm-pila__pista{display:flex;gap:clamp(14px,1.8vw,26px);list-style:none;
  margin:0;padding:0;width:max-content}
/* La pieza y la tarjeta son el MISMO elemento: el <li> lleva las dos clases.
   Una pone el ancho de la ranura y la otra la rejilla de foto y texto. */
.hm-pila__pieza{scroll-snap-align:start;
  flex:0 0 calc(min(100vw, var(--kb-ancho)) - 2 * clamp(28px,4vw,48px))}

/* Los puntos: dicen por cuál vas y dejan saltar a cualquiera. El activo se
   estira en vez de cambiar de color, que se ve antes con el rabillo del ojo. */
.hm-pila__mandos{display:flex;gap:10px;justify-content:center;align-items:center;
  margin-top:clamp(18px,2.4vw,30px)}
/* Sólo los botones con data-paso son flechas. Los puntos viven dentro del
   mismo contenedor, así que un selector por etiqueta les pintaba encima el
   dibujo de la flecha y salían ocho puntos con punta. */
.hm-pila__mandos button[data-paso]{width:42px;height:42px;border-radius:99px;cursor:pointer;
  border:1px solid rgba(239,233,222,.32);background:transparent;color:var(--kb-fondo);
  display:grid;place-items:center;
  transition:border-color .3s cubic-bezier(.23,1,.32,1),
             background-color .3s cubic-bezier(.23,1,.32,1),
             color .3s cubic-bezier(.23,1,.32,1),opacity .3s}
.hm-pila__mandos button[data-paso]::before{content:"";width:13px;height:13px;
  border-right:1px solid currentColor;border-top:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,2px)}
.hm-pila__mandos button[data-paso="-1"]::before{transform:rotate(-135deg) translate(-2px,2px)}
.hm-pila__mandos button[data-paso][disabled]{opacity:.5;cursor:default}
@media (hover:hover) and (pointer:fine){
  .hm-pila__mandos button[data-paso]:not([disabled]):hover{background:var(--kb-fondo);
    border-color:var(--kb-fondo);color:var(--kb-tinta)}
}
.hm-pila__puntos{display:flex;gap:7px;justify-content:center;align-items:center;
  margin:0 clamp(10px,1.4vw,18px)}
.hm-pila__puntos button{width:7px;height:7px;padding:0;border:0;border-radius:99px;
  background:rgba(239,233,222,.42);cursor:pointer;
  transition:width .38s cubic-bezier(.23,1,.32,1),background-color .38s cubic-bezier(.23,1,.32,1)}
.hm-pila__puntos button[aria-selected="true"]{width:24px;background:var(--kb-fondo)}
@media (hover:hover) and (pointer:fine){
  .hm-pila__puntos button:hover{background:rgba(239,233,222,.72)}
}

.hm-pila__foto{position:relative;margin:0;height:min(408px,62svh);
  border-radius:clamp(10px,1.2vw,16px);overflow:hidden;
  background:var(--kb-tarjeta);
  /* Sin filete: sobre el verde, un borde en piedra se lee como una raya
     blanca alrededor de la tarjeta y canta. La sombra ya la separa del fondo. */
  box-shadow:0 30px 70px -32px rgba(26,31,23,.72);
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr)}
/* En móvil no caben dos columnas: la foto arriba y el texto debajo. */
@media (max-width:760px){
  .hm-pila__foto{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto}
}
.hm-pila__foto img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hm-pila__lado{display:contents}
/* Titulares centrados y cuerpo justificado, como en el resto del sitio. El
   ancho máximo va en el párrafo, así que se le pone `margin-inline:auto` o el
   bloque justificado se quedaría pegado a la izquierda del centro. */
.hm-pila__texto{grid-area:1/2;align-self:center;padding:clamp(20px,3vw,40px);
  text-align:center}
@media (max-width:760px){.hm-pila__texto{grid-area:2/1}}
.hm-pila__texto h3{font-family:var(--kb-logo);font-weight:500;text-transform:uppercase;
  letter-spacing:.09em;font-size:clamp(17px,1.9vw,25px);line-height:1.2;margin:0;
  color:var(--kb-tinta);text-wrap:balance}
.hm-pila__texto .d{font:500 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--kb-peltre);margin:10px 0 14px}
.hm-pila__texto p:last-child{margin:0 auto;font-size:14px;line-height:1.68;
  color:#1D1D1D;max-width:42ch;text-align:justify}

@media (max-width:820px){
  .hm-pila__fijo{height:min(100svh,620px)}
  .hm-pila__foto{grid-template-columns:1fr;grid-template-rows:40% 1fr;height:min(480px,100%)}
  .hm-pila__texto{grid-area:2/1;padding:clamp(16px,5vw,26px);align-self:start}
}
@media (prefers-reduced-motion:reduce){
  .hm-pila__foto{transform:none !important;filter:none !important}
}


/* ════ El caso Carnival ════
   Sobre el verde de la casa, con las cuatro cifras en fila y su icono encima.
   El titular va en UNA sola línea: se le quita el ancho máximo de 40 caracteres
   que parte los titulares largos, y se acorta el texto para que quepa. */
.hm-titulo--linea{max-width:none;text-wrap:nowrap}
@media (max-width:640px){.hm-titulo--linea{text-wrap:balance}}

/* ════ Prensa ════
   La mitad izquierda cuenta quién habla del grupo; la derecha es un muro de
   cuadros con los logotipos, que van cambiando despacio.
   Los logotipos se pintan como MÁSCARA, así que todos toman el color de la
   casa y ninguno mete su rojo ni su dorado en el muro. El tamaño de cada uno
   viene calculado por ÁREA DE TINTA: dos logotipos de la misma altura pesan
   distinto si uno es de palo fino y el otro macizo. */
/* Esta sección respira menos que las demás: es un muro de logotipos, no un
   bloque de lectura, y con el relleno general se quedaba flotando en medio de
   un vacío. Baja el alto y se acorta el hueco entre las dos mitades. */
.hm-prensa{padding-block:clamp(38px,5vw,64px);
  position:relative;isolation:isolate;overflow:clip}
/* La foto que antes estaba en «quiénes somos». Sobra por arriba y por abajo
   para que el paralaje tenga por dónde correr sin descubrir el borde. */
.hm-prensa__foto{position:absolute;left:0;right:0;top:-18%;height:136%;z-index:0;
  background:url(/assets/media/img/dubai-3.webp) center/cover no-repeat;
  will-change:transform}
.hm-prensa__velo{position:absolute;inset:0;z-index:1;background:rgba(26,31,23,.80)}
.hm-prensa > .kb-caja{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){
  .hm-prensa__foto{top:0;height:100%;transform:none !important}
}
.hm-prensa__reja{display:grid;gap:clamp(26px,3.4vw,52px);align-items:center;
  grid-template-columns:1fr}
@media (min-width:900px){
  .hm-prensa__reja{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.hm-prensa__texto{display:grid;gap:16px;justify-items:stretch}
.hm-prensa__texto h2{justify-self:start;margin:0}
/* El filete lleva `margin-inline:auto` de serie para centrarse bajo los
   titulares centrados del sitio. Aquí el titular va a la izquierda, y con los
   márgenes automáticos puestos `justify-self` no pinta nada: hay que
   anularlos. */
.hm-prensa__texto .hm-raya{justify-self:start;margin-inline:0}
.hm-prensa__texto p{margin:0;text-align:justify;color:rgba(239,233,222,.86);
  font-size:15px;line-height:1.7}
/* El enlace a la prensa: un renglón con filete, no un botón macizo. */
.hm-prensa__mas{margin:clamp(10px,1.4vw,18px) 0 0;justify-self:start}
.hm-prensa__boton{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--kb-fondo);padding:0 2px 7px;
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.17em;text-transform:uppercase;
  border-bottom:1px solid rgba(239,233,222,.4);
  transition:color .3s cubic-bezier(.23,1,.32,1),border-color .3s cubic-bezier(.23,1,.32,1)}
.hm-prensa__boton svg{width:15px;height:8px;overflow:visible;
  transition:transform .35s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .hm-prensa__boton:hover{border-color:var(--kb-fondo)}
  .hm-prensa__boton:hover svg{transform:translateX(5px)}
}

/* El muro. Nueve cuadros, y dentro de cada uno un logotipo que se cambia solo.
   Los cuadros no llevan fondo propio: sólo el filete que los separa, para que
   lo que se vea sean los logotipos y no una cuadrícula. */
.hm-prensa__muro{display:grid;gap:1px;background:rgba(239,233,222,.18);
  border:1px solid rgba(239,233,222,.14);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){
  .hm-prensa__muro{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.hm-prensa__cuadro{background:rgba(26,31,23,.52);display:grid;place-items:center;
  aspect-ratio:16/9;padding:clamp(12px,1.6vw,18px);overflow:hidden}
/* Nueve cuadros: tres filas justas a tres por fila. Eran siete y la última
   fila se quedaba con uno y dos huecos. En móvil van de dos en dos y sobra
   uno: ése ocupa la fila entera, con la proporción doblada para que no mida
   el doble de alto. */
@media (max-width:619px){
  .hm-prensa__muro > :last-child:nth-child(odd){grid-column:span 2;aspect-ratio:32/9}
}
/* El relevo: el logotipo se apaga, se cambia el archivo y vuelve. Transición y
   no animación: si dos relevos se pisan, una transición se redirige desde
   donde está y una animación reiniciaría desde cero, que se vería como un
   parpadeo. */
.hm-prensa__logo{display:block;
  width:calc(var(--w) * var(--kb-prensa-k,1) * 1px);
  height:calc(var(--h) * var(--kb-prensa-k,1) * 1px);
  background:var(--kb-tarjeta);opacity:.74;
  -webkit-mask:var(--logo) center/contain no-repeat;
          mask:var(--logo) center/contain no-repeat;
  /* El dibujo del <img> se saca fuera de su caja: el color lo pone el fondo
     crema recortado por la máscara, no el PNG. Sin esto, un logotipo
     rasterizado en negro (Curly Tales, The Huntr) se pintaba en negro
     encima del crema. */
  object-fit:none;object-position:-9999px 0;
  transition:opacity 1.9s cubic-bezier(.23,1,.32,1)}
.hm-prensa__logo.cambiando{opacity:0}
.hm-prensa{--kb-prensa-k:1}
@media (max-width:1100px){.hm-prensa{--kb-prensa-k:.86}}
@media (max-width:560px){.hm-prensa{--kb-prensa-k:.74}}
@media (prefers-reduced-motion:reduce){
  .hm-prensa__logo{transition:none}
}

/* ════ El diario · índice editorial ════
   Antes eran tres tarjetas iguales con un hueco gris dentro, y por eso pesaba
   a relleno: sin jerarquía no hay sección, hay lista. Ahora una entrada manda
   y las otras dos son renglones de índice, que es como se arma una portada de
   revista.
   El efecto no es nuevo: es el mismo que ya usa la sección de quiénes somos,
   el fondo que se convierte en foto. Al pasar por encima de un renglón, su
   foto entra por detrás del texto y la letra se pasa a crema. En móvil no hay
   cursor, así que la foto va puesta desde el principio. */
.hm-diario__reja{display:grid;gap:clamp(20px,4vw,60px);margin-top:clamp(30px,4vw,52px)}
@media (min-width:980px){
  /* La columna de la izquierda mide EXACTAMENTE lo que la foto, no una
     fracción: con 1,12fr sobraban 73 px dentro del carril que, sumados al
     hueco, dejaban 120 px muertos entre la foto y el texto. Ahora el único
     hueco es el hueco. Medido: 120 px antes, 60 después. */
  .hm-diario__reja{grid-template-columns:min(560px,60svh) minmax(0,1fr);
    align-items:center}
}

/* Estas tres van ARRIBA del todo a propósito. Estuvieron debajo y, al tener
   la misma fuerza que las de la entrada principal, ganaban por ir después: el
   resumen de la foto se pintaba en tinta oscura sobre el velo oscuro y no se
   leía nada. Lo genérico primero, las excepciones después. */
/* Las tres piezas de texto, iguales en los dos sitios. */
.hm-diario .k{font:500 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.17em;text-transform:uppercase;color:var(--kb-peltre)}
.hm-diario .t{font-family:var(--kb-logo);font-weight:500;line-height:1.2;
  font-size:clamp(19px,2.1vw,25px);text-wrap:balance}
.hm-diario .p{font-size:14px;line-height:1.62;color:#1D1D1D}
.hm-diario__fila:hover .k{color:rgba(247,243,234,.74)}
.hm-diario__fila:hover .p{color:rgba(247,243,234,.86)}
@media (max-width:979px),(hover:none),(pointer:coarse){
  .hm-diario__fila .k{color:rgba(247,243,234,.74)}
  .hm-diario__fila .p{color:rgba(247,243,234,.86)}
}

/* La entrada que manda: foto alta y el titular dentro, abajo a la izquierda. */
.hm-diario__principal{position:relative;display:block;overflow:hidden;
  border-radius:clamp(8px,1vw,13px);text-decoration:none;color:var(--kb-tarjeta);
  /* Cuadrada, no 4/5: en vertical se comía la pantalla y dejaba un hueco
     muerto al lado de los renglones. Cuadrada casa con los tres renglones
     más el enlace, que es lo que mide la columna de la derecha. */
  aspect-ratio:1/1;max-height:min(60svh,560px);background:var(--kb-casa)}
@media (max-width:979px){.hm-diario__principal{aspect-ratio:4/3;max-height:none}}
/* La capa sobra un 16 % para que el paralaje tenga por dónde correr sin
   descubrir el borde. Lo mueve el MISMO motor que la portada y el caso
   Carnival, no uno nuevo. */
.hm-diario__foto{position:absolute;left:0;right:0;top:-8%;height:116%;
  background:var(--kb-casa) center/cover no-repeat;will-change:transform}
/* El velo lo manda la foto, no el gusto. Con el .93/.74 de antes el resumen
   caía justo sobre el mármol claro de la terraza y se quedaba en 2,9 de
   contraste: ilegible. Medido sobre los píxeles pintados, no a ojo. */
.hm-diario__velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(26,31,23,.97) 0%,rgba(26,31,23,.94) 18%,
    rgba(26,31,23,.82) 34%,rgba(26,31,23,.34) 58%,rgba(26,31,23,0) 86%)}
.hm-diario__texto{position:absolute;left:0;right:0;bottom:0;display:grid;gap:9px;
  padding:clamp(20px,2.6vw,36px)}
.hm-diario__principal .k{color:rgba(247,243,234,.74)}
.hm-diario__principal .t{font-size:clamp(23px,2.7vw,34px)}
.hm-diario__principal .p{color:rgba(247,243,234,.86);max-width:36ch}
@media (hover:hover) and (pointer:fine){
  .hm-diario__principal .t{transition:transform .45s cubic-bezier(.23,1,.32,1)}
  .hm-diario__principal:hover .t{transform:translateX(6px)}
}

/* Los renglones del índice. */
.hm-diario__lista{display:grid;align-content:start}
.hm-diario__fila{position:relative;isolation:isolate;display:grid;gap:8px;
  padding:clamp(18px,2.2vw,28px) clamp(14px,1.6vw,22px);
  border-top:1px solid var(--kb-piedra);text-decoration:none;
  color:var(--kb-tinta);
  /* Sin redondeo aquí: con border-radius, el filete de arriba se curva en las
     puntas y parece un fallo de pintado. El redondeo entra sólo en móvil,
     donde el renglón ya no es un filete sino una banda con su foto. */
  transition:color .45s cubic-bezier(.23,1,.32,1)}
.hm-diario__fila:last-of-type{border-bottom:1px solid var(--kb-piedra)}
.hm-diario__fila::before,.hm-diario__fila::after{content:"";position:absolute;
  inset:0;z-index:-1;opacity:0;border-radius:inherit;
  transition:opacity .5s cubic-bezier(.23,1,.32,1)}
.hm-diario__fila::before{background:var(--foto) center/cover no-repeat}
.hm-diario__fila::after{background:rgba(26,31,23,.76)}
@media (hover:hover) and (pointer:fine){
  .hm-diario__fila:hover{color:var(--kb-tarjeta)}
  .hm-diario__fila:hover::before,.hm-diario__fila:hover::after{opacity:1}
  .hm-diario__fila .t{transition:transform .45s cubic-bezier(.23,1,.32,1)}
  .hm-diario__fila:hover .t{transform:translateX(6px)}
}
.hm-diario__renglones{display:grid}

/* Sin cursor no hay hover que valga: la foto va puesta y el renglón se
   convierte en una banda con su imagen. Componente aparte para móvil, que el
   escritorio no se toca.
   Y no se apilan: cuatro bandas seguidas alargan el scroll sin necesidad, así
   que van en carrusel con parada y la siguiente asomando por el borde. El
   enlace al diario se queda fuera del carril, debajo. */
@media (max-width:979px){
  .hm-diario__renglones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    /* El carril se sale de la caja por los dos lados y se devuelve con su
       propio relleno, para que la tarjeta de al lado asome pegada al borde de
       la pantalla. La medida es la MISMA que el margen lateral del sitio
       (.kb-caja), no una inventada, o la primera tarjeta no cuadra con el
       resto de la página. */
    --carril:clamp(28px,4vw,48px);
    margin-inline:calc(-1 * var(--carril));padding-inline:var(--carril);
    /* Sin esto, la parada de scroll pega la primera tarjeta al borde mismo de
       la pantalla y se come el margen lateral: el punto de parada hay que
       meterlo hacia dentro la misma medida que el relleno. */
    scroll-padding-inline:var(--carril);
    scrollbar-width:none;gap:12px;align-items:stretch}
  .hm-diario__renglones::-webkit-scrollbar{display:none}
  .hm-diario__fila{flex:0 0 78%;scroll-snap-align:start;margin-top:0}
}
@media (max-width:979px),(hover:none),(pointer:coarse){
  .hm-diario__fila{color:var(--kb-tarjeta);border:0;min-height:168px;
    border-radius:clamp(8px,1vw,13px);
    align-content:end;margin-top:12px;padding:clamp(18px,4vw,24px)}
  .hm-diario__fila:last-of-type{border-bottom:0}
  .hm-diario__fila::before,.hm-diario__fila::after{opacity:1}
}

/* El enlace al diario: un renglón más, no un botón macizo. */
.hm-diario__mas{margin:clamp(20px,2.4vw,30px) 0 0}
.hm-diario__mas a{display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--kb-casa);padding:0 2px 7px;
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.17em;text-transform:uppercase;
  border-bottom:1px solid var(--kb-piedra);
  transition:color .3s cubic-bezier(.23,1,.32,1),border-color .3s cubic-bezier(.23,1,.32,1)}
.hm-diario__mas svg{width:15px;height:8px;overflow:visible;
  transition:transform .35s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .hm-diario__mas a:hover{color:var(--kb-tinta);border-color:var(--kb-tinta)}
  .hm-diario__mas a:hover svg{transform:translateX(5px)}
}

/* ════ Hablemos · el formulario ════
   Cierra la página sobre el verde de la casa: el sitio abre con el vídeo y
   termina con una invitación, no con una galería más.
   Los campos no llevan caja: sólo un filete por debajo, como una ficha de
   papel. Es lo que hace que un formulario no parezca un formulario. */
.hm-hablemos{background:var(--kb-casa);color:var(--kb-fondo)}
/* El texto se centra CONTRA el formulario: son dos bloques de altura muy
   distinta y alineados arriba el de la izquierda se queda colgando. */
.hm-hablemos__reja{display:grid;gap:clamp(30px,4.6vw,72px);align-items:center;
  grid-template-columns:1fr}
@media (min-width:900px){
  .hm-hablemos__reja{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
.hm-hablemos__texto{display:grid;gap:16px;justify-items:stretch}
.hm-hablemos__texto h2{justify-self:start;margin:0}
.hm-hablemos__texto .hm-raya{justify-self:start;margin-inline:0;
  background:rgba(239,233,222,.4)}
.hm-hablemos__texto p{margin:0;text-align:justify;font-size:15px;line-height:1.7;
  color:rgba(239,233,222,.86);max-width:44ch}

.hm-hablemos__forma{display:grid;gap:clamp(18px,2.2vw,26px)}
.hm-hablemos__par{display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.hm-hablemos__par{grid-template-columns:1fr}}
.hm-hablemos__campo{display:grid;gap:7px}
.hm-hablemos__campo > span{font:500 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(239,233,222,.6)}
.hm-hablemos__campo input,
.hm-hablemos__campo textarea{
  font:400 15px/1.5 var(--kb-texto);color:var(--kb-fondo);
  background:transparent;border:0;border-bottom:1px solid rgba(239,233,222,.32);
  padding:7px 2px;width:100%;border-radius:0;
  transition:border-color .3s cubic-bezier(.23,1,.32,1)}
.hm-hablemos__campo textarea{resize:vertical;min-height:88px}
.hm-hablemos__campo input:focus,
.hm-hablemos__campo textarea:focus{outline:none;border-bottom-color:var(--kb-fondo)}
/* Un campo que el ojo no ve y el robot sí rellena. Si llega con algo dentro,
   el envío se tira a la basura sin molestar a nadie con un captcha. */
.hm-hablemos__trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.hm-hablemos__pie{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,20px);
  align-items:center;margin-top:4px}
.hm-hablemos__enviar{cursor:pointer;border:1px solid var(--kb-fondo);
  background:var(--kb-fondo);color:var(--kb-casa);border-radius:2px;
  padding:13px 30px;
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.17em;text-transform:uppercase;
  transition:background-color .3s cubic-bezier(.23,1,.32,1),
             color .3s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .hm-hablemos__enviar:hover{background:transparent;color:var(--kb-fondo)}
}
.hm-hablemos__aviso{font:500 9.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,222,.56)}
.hm-hablemos__campo input:user-invalid,
.hm-hablemos__campo textarea:user-invalid{border-bottom-color:#E2A0A0}

/* ════ Las dos patas: restaurantes y hospitalidad ════
   Bandas al cincuenta por ciento, texto a un lado y carril de unidades al
   otro. La de hospitalidad va invertida y sobre tinta, para que las dos no se
   confundan al pasar.
   Las fotos y los logotipos son los del grupo. Cada logotipo trae SU caja, en
   --lw y --lh, calculada por proporción y no por área: con el área, un
   logotipo de palo fino salía al doble de alto que uno macizo aunque pesaran
   lo mismo. Tres familias: horizontal 26 px de alto, media 34, cuadrada 44. */
.hm-patas{padding-block:clamp(52px,7vw,104px)}
.hm-patas__reja{display:grid;gap:clamp(30px,4.6vw,72px);align-items:center;
  grid-template-columns:1fr}
@media (min-width:900px){
  /* minmax(0,1fr) y no 1fr: «1fr» tiene mínimo automático, y el carril mide
     miles de píxeles de ancho, así que la segunda columna se desbordaba y
     aplastaba a la primera. */
  .hm-patas__reja{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* Apunta al lado, no al carril: el carril dejó de ser hijo directo de la
     rejilla al meterle encima la caja con los botones. */
  .hm-patas--vuelta .hm-patas__lado{order:-1}
  /* NORMA: si el slider se voltea, cambia también el lado por el que salen las
     tarjetas. Con la banda a la izquierda, las tarjetas tienen que empezar
     pegadas a la derecha y salir hacia la izquierda; si no, la fila se abre
     hacia fuera de la caja y se ve al revés de lo que el ojo espera.
     La pista vuelve a ltr para que el orden de lectura no se invierta. */
  .hm-patas--vuelta .hm-patas__carril{direction:rtl}
  .hm-patas--vuelta .hm-patas__pista{direction:ltr}
  .hm-patas--vuelta .hm-patas__mandos{direction:rtl}
}
/* El ancho máximo va en los párrafos, NO en la columna: si lo lleva la
   columna, las cifras se quedan apretadas a la izquierda en vez de repartirse
   a todo lo ancho. */
.hm-patas__texto{display:grid;gap:16px;justify-items:stretch}
.hm-patas__texto h2{justify-self:center;margin:0;text-align:center;
  margin-inline:auto}
.hm-patas__texto .hm-raya{margin-inline:auto}
/* Sin tope de ancho: el párrafo, el filete y las cifras miden todos lo mismo,
   que es la columna. Con un tope en el párrafo, la línea de las cifras se
   salía por la derecha y la columna dejaba de ser simétrica. */
.hm-patas__texto p{margin:0;text-align:justify}
.hm-patas__cifras{display:flex;flex-wrap:wrap;gap:0;margin-top:6px;width:100%;
  border-top:1px solid var(--kb-piedra);padding-top:16px}
/* Cada cifra centrada en su columna. A la izquierda, el número y su rótulo
   se descuadraban entre sí: «17» ocupa la mitad que «BRANDS». */
.hm-patas__cifras div{flex:1 1 0;min-width:78px;display:grid;gap:3px;
  justify-items:center;text-align:center}
/* Los números NUNCA en la romana: en Cormorant son de estilo antiguo, bajan de
   la línea y quedan horribles. */
.hm-patas__cifras b{font-family:var(--kb-texto);font-weight:500;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;
  font-size:clamp(23px,2.5vw,32px)}
.hm-patas__cifras span{font:500 8.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;text-transform:uppercase;color:var(--kb-peltre)}
/* Sobre banda oscura el peltre no se ve: medido, 1,46 contra el oliva. El
   rótulo pasa a crema rebajada y el filete a una línea de crema, que sobre
   verde sí se distingue. */
.hm-sec--oscura .hm-patas__cifras span,
.hm-sec--tinta .hm-patas__cifras span{color:rgba(239,233,222,.82)}
/* El filete iba al 28 %: sobre el oliva eso es 1,93 de contraste, o sea
   pintado y no visto. Al 55 % da 3,33, que para una línea de un píxel es
   lo que hace falta. */
.hm-sec--oscura .hm-patas__cifras,
.hm-sec--tinta .hm-patas__cifras{border-top-color:rgba(239,233,222,.55)}

.hm-patas__lado{display:grid;gap:clamp(14px,1.8vw,22px);min-width:0}
.hm-patas__carril{min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-block:4px}
.hm-patas__carril::-webkit-scrollbar{display:none}
.hm-patas__pista{display:flex;gap:clamp(12px,1.4vw,18px);list-style:none;
  margin:0;padding:0;width:max-content}
/* Una tarjeta y media a la vista, no dos y media: las fotos se ven de verdad
   y la siguiente asoma lo justo para que se note que hay carril. */
.hm-u{scroll-snap-align:start;flex:0 0 clamp(200px,24vw,340px)}
.hm-u figure{margin:0;display:grid;gap:0}
/* El difuminado: la foto NO lleva fondo propio, para que la máscara descubra
   el fondo de la sección y no el de la tarjeta. Con fondo, el degradado se
   apaga contra un color y se ve un bloque en vez de un desvanecido. */
.hm-u__foto{position:relative;aspect-ratio:320/440;display:block}
.hm-u__foto img{width:100%;height:100%;object-fit:cover;
  border-radius:12px 12px 0 0;
  -webkit-mask:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.62) 88%,transparent 100%);
          mask:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.62) 88%,transparent 100%);
  transition:transform .7s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .hm-u:hover .hm-u__foto img{transform:scale(1.045)}
}
/* El logotipo se apoya DENTRO del desvanecido, no debajo del todo: si va
   debajo, la tarjeta se parte en dos. */
.hm-u figcaption{display:grid;justify-items:center;align-content:center;gap:7px;
  padding:0 10px;margin-top:-14px;position:relative;z-index:2;min-height:78px}
.hm-u figcaption img{width:calc(var(--lw) * 1px);height:calc(var(--lh) * 1px);
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(12%) sepia(9%) saturate(1100%) hue-rotate(60deg) brightness(95%)}
/* Un logotipo que es una PLACA de color entera se convierte en mancha si se
   monocroma. Ése va con sus colores. */
.hm-u figcaption img.hm-u--color{filter:none}

.hm-patas__mandos{display:flex;gap:10px;justify-content:center}
.hm-patas__mandos button{width:42px;height:42px;border-radius:99px;cursor:pointer;
  border:1px solid var(--kb-piedra);background:transparent;color:var(--kb-tinta);
  display:grid;place-items:center;
  transition:border-color .3s cubic-bezier(.23,1,.32,1),
             background-color .3s cubic-bezier(.23,1,.32,1),
             color .3s cubic-bezier(.23,1,.32,1),opacity .3s}
/* La flecha en CSS, sin SVG: son dos trazos. */
.hm-patas__mandos button::before{content:"";width:13px;height:13px;
  border-right:1px solid currentColor;border-top:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,2px)}
.hm-patas__mandos button[data-paso="-1"]::before{transform:rotate(-135deg) translate(-2px,2px)}
/* Desactivado se tiene que seguir VIENDO: con .3 el borde piedra desaparecía
   sobre el crema y el de la banda verde casi no se distinguía del fondo.
   Que está apagado se sabe porque la flecha no reacciona, no porque se borre. */
.hm-patas__mandos button[disabled]{opacity:.5;cursor:default}
/* Sobre el verde de la casa, los mandos en claro. Antes heredaban el borde
   piedra y la flecha en tinta, pensados para el crema. */
.hm-sec--oscura .hm-patas__mandos button{border-color:rgba(239,233,222,.6);color:var(--kb-fondo)}
@media (hover:hover) and (pointer:fine){
  .hm-sec--oscura .hm-patas__mandos button:not([disabled]):hover{background:var(--kb-fondo);
    border-color:var(--kb-fondo);color:var(--kb-casa)}
}
@media (hover:hover) and (pointer:fine){
  .hm-patas__mandos button:not([disabled]):hover{background:var(--kb-casa);
    border-color:var(--kb-casa);color:var(--kb-fondo)}
}
@media (max-width:620px){.hm-patas__mandos{display:none}}

/* La banda de hospitalidad, sobre tinta. */
.hm-patas--hosp{background:var(--kb-tinta);color:var(--kb-fondo)}
.hm-patas--hosp .hm-titulo{color:var(--kb-fondo)}
.hm-patas--hosp .hm-raya,.hm-patas--hosp .hm-patas__cifras{border-color:rgba(239,233,222,.26)}
.hm-patas--hosp .hm-patas__cifras span{color:rgba(239,233,222,.62)}
.hm-patas--hosp .hm-u figcaption img{filter:brightness(0) invert(1);opacity:.95}
.hm-patas--hosp .hm-patas__mandos{justify-content:center}
/* La banda va invertida, así que su carril también: arranca pegado a la
   derecha y lo que sobra se esconde hacia la IZQUIERDA, no al revés. Se hace
   con `direction:rtl` en el carril y se devuelve a `ltr` en cada tarjeta,
   para que el contenido de dentro no salga espejado. */
.hm-patas--hosp .hm-patas__carril{direction:rtl}
.hm-patas--hosp .hm-u{direction:ltr}
.hm-patas--hosp .hm-patas__mandos button{border-color:rgba(239,233,222,.3);color:var(--kb-fondo)}
@media (hover:hover) and (pointer:fine){
  .hm-patas--hosp .hm-patas__mandos button:not([disabled]):hover{background:var(--kb-fondo);
    border-color:var(--kb-fondo);color:var(--kb-tinta)}
}

/* ════ Parallax ════
   El clásico: la foto se queda detrás y va más lenta que la página, y encima
   pasa una frase. NO se hace con `background-attachment:fixed`, que es como se
   hacía antes y en iOS no funciona: la foto se queda clavada o parpadea. Se
   hace moviendo una capa con `transform`, que va en la tarjeta gráfica y
   funciona en todas partes.
   La capa mide más que la sección a propósito: ese excedente es el margen por
   el que puede deslizarse sin dejar ver el borde. Si se cambia el alto de la
   capa hay que cambiar el desplazamiento del JS, que es la mitad del sobrante. */
.hm-parallax{position:relative;isolation:isolate;overflow:clip;
  min-height:clamp(400px,68svh,720px);
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
  padding-block:clamp(56px,8vw,96px)}
.hm-parallax__foto{position:absolute;left:0;right:0;top:-18%;height:136%;z-index:0;
  background:var(--kb-tinta) center/cover no-repeat;will-change:transform}
/* El velo va más cargado abajo que arriba, porque la foto tiene el cielo claro
   en la mitad superior y la letra cae encima. Los dos valores están MEDIDOS
   sobre el render: con .42 y .62 la frase se quedaba en 4,13 y no llegaba a
   AA. Con .52 y .70 sube a 5,15 la frase y 5,58 el pie. */
.hm-parallax__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(26,31,23,.52),rgba(26,31,23,.70))}
.hm-parallax > .kb-caja{position:relative;z-index:2;width:100%;text-align:center}
.hm-parallax__frase{font-family:var(--kb-logo);font-weight:500;
  text-transform:uppercase;letter-spacing:.135em;text-indent:.135em;
  font-size:clamp(24px,3.6vw,44px);line-height:1.22;margin:0;
  color:var(--kb-tarjeta);text-wrap:balance;
  /* Cormorant trae cifras de estilo antiguo, las que suben y bajan de la
     línea: en «2026» los cuatro dígitos salían a distinta altura. Se fuerzan
     las de caja alta, como ya se hizo con las cifras de la apertura. */
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.hm-parallax__pie{font-family:var(--kb-texto);font-weight:400;font-size:15px;
  line-height:1.7;margin:clamp(16px,2vw,24px) 0 0;color:var(--kb-tarjeta);
  opacity:.88;max-width:46ch;margin-inline:auto}
@media (prefers-reduced-motion:reduce){
  .hm-parallax__foto{top:0;height:100%;transform:none !important}
}

/* ════ Página de prensa ════ */
.pr-intro{margin:0 auto clamp(26px,3.4vw,44px);max-width:64ch;text-align:justify;
  font-size:15px;line-height:1.7}
/* El oliva es más claro que la tinta, así que la misma letra al 86 % que ahí
   da de sobra, aquí se queda en 3,40. Sobre oliva va a crema entera. */
.hm-sec--tinta .pr-intro{color:rgba(239,233,222,.86)}
.hm-sec--oscura .pr-intro{color:var(--kb-fondo)}
.pr-intro--centro{text-align:center}

/* Los artículos, como el índice del diario: renglones con filete, no tarjetas.
   Cada uno lleva a su medio, que es lo que interesa de una página de prensa. */
.pr-arts{display:grid;border-top:1px solid rgba(239,233,222,.24)}
.pr-art{display:grid;gap:7px;padding:clamp(17px,2.2vw,26px) clamp(4px,1vw,14px);
  border-bottom:1px solid rgba(239,233,222,.24);text-decoration:none;
  color:var(--kb-fondo);
  transition:background-color .4s cubic-bezier(.23,1,.32,1)}
/* El nombre del medio y la bajada iban al 60 % y al 78 % de opacidad. Medido
   sobre el verde de la sección daban 3,06 y 4,28, por debajo del 4,5 que pide
   un texto de este tamaño. No es nuevo: venía así desde que se hizo la página. */
.pr-art .k{font:500 9.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(239,233,222,.96)}
.pr-art .t{font-family:var(--kb-logo);font-weight:500;line-height:1.24;
  font-size:clamp(18px,2vw,24px);text-wrap:balance;
  transition:transform .45s cubic-bezier(.23,1,.32,1)}
.pr-art .p{font-size:14px;line-height:1.6;color:rgba(239,233,222,.95)}
@media (hover:hover) and (pointer:fine){
  .pr-art:hover{background:rgba(239,233,222,.06)}
  .pr-art:hover .t{transform:translateX(6px)}
}

/* El logotipo de la apertura es un h1: la portada no tenía ninguno y para un
   buscador era una página sin título. Se le quitan los márgenes y el cuerpo que
   trae un h1 de serie, para que se vea exactamente igual que antes. */
.hm-apertura__h1{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}

/* ── Sobre nosotros ─────────────────────────────────────────────────────────
   La apertura: tres párrafos y nada más. Es lo que la casa tiene que decir de
   sí misma, así que va en cuerpo mayor que el texto corrido del resto y con la
   medida corta, que un renglón de cien caracteres no lo lee nadie. */
.ns-abre__p{margin:0 auto clamp(16px,2vw,24px);max-width:62ch;
  text-align:justify;font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.72}
/* La última va suelta y centrada: cierra el bloque en vez de seguir el párrafo
   anterior. */
.ns-abre__p--suelta{text-align:center;max-width:52ch;color:var(--kb-casa);
  font-family:var(--kb-logo);font-weight:500;line-height:1.35;
  font-size:clamp(19px,2vw,25px);margin-top:clamp(14px,2vw,26px);
  text-wrap:balance}

/* El Golfo: foto de fondo con velo, sin tarjetas. Allí las marcas todavía no
   han abierto, así que no hay fotos que enseñar y no se inventan. */
.ns-golfo{position:relative;overflow:hidden;background:var(--kb-tinta);
  padding-block:clamp(72px,10vw,130px)}
.ns-golfo__foto{position:absolute;inset:0;z-index:0;
  background:url(/assets/media/img/dubai-4.webp) center/cover no-repeat}
/* Cerrado en la franja de en medio, que es donde va el texto, y abierto en los
   bordes para no apagar la foto entera. */
.ns-golfo__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(26,31,23,.46) 0%, rgba(26,31,23,.86) 34%,
    rgba(26,31,23,.86) 66%, rgba(26,31,23,.46) 100%)}
.ns-golfo__dentro{position:relative;z-index:2;
  display:grid;justify-items:center;gap:15px;text-align:center}
.ns-golfo__dentro .hm-raya{margin-inline:auto}
.ns-golfo__dentro p{margin:0;max-width:64ch;text-align:justify;
  font-size:15px;line-height:1.72;color:var(--kb-fondo)}
.ns-golfo__frase{text-align:center !important;max-width:46ch !important;
  font-family:var(--kb-logo);font-weight:500;line-height:1.35;
  font-size:clamp(18px,1.9vw,24px) !important;
  margin-top:clamp(10px,1.4vw,20px) !important;text-wrap:balance}

/* ── El equipo ──────────────────────────────────────────────────────────────
   Seis retratos que caben de una vez en pantalla: seis columnas en una sola
   fila, sin que haya que bajar para verlos. En pantallas medianas pasan a tres
   y dos filas, y en móvil a carrusel, como manda la casa. */
.ns-eq__reja{list-style:none;margin:clamp(26px,3.4vw,40px) 0 0;padding:0 0 4px;
  display:flex;gap:clamp(12px,1.6vw,18px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.ns-eq__reja::-webkit-scrollbar{display:none}
.ns-eq__uno{scroll-snap-align:start;flex:0 0 clamp(180px,42vw,240px)}
@media (min-width:760px){
  .ns-eq__reja{display:grid;overflow:visible;
    grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(22px,2.4vw,32px)}
  .ns-eq__uno{flex:none}
}
/* Tres y tres, no seis en fila. Para que el bloque siga entrando casi de una
   vez, la tarjeta se acota y se centra en su columna: a columna entera serían
   trescientos sesenta de ancho y el retrato se comería la pantalla. */
/* Las columnas miden lo que la tarjeta y el bloque se centra entero. Antes la
   tarjeta se centraba dentro de un tercio del ancho y entre foto y foto
   quedaban ciento cincuenta píxeles muertos: el hueco lo dice ahora el gap,
   el mismo en horizontal que en vertical. */
@media (min-width:760px){
  .ns-eq__reja{grid-template-columns:repeat(3,minmax(0,238px));
    justify-content:center;column-gap:clamp(18px,2vw,28px)}
  .ns-eq__uno{width:100%}
}
.ns-eq__uno figure{margin:0;display:grid;gap:0}

/* La foto y, encima, el velo con la frase. El velo vive DENTRO del recorte,
   que si no se le salen las esquinas redondeadas por debajo. */
.ns-eq__foto{position:relative;display:block;overflow:hidden;
  border-radius:clamp(8px,1vw,12px)}
/* height:auto es obligatorio: el <img> lleva height="900" como atributo y, sin
   anularlo, la proporción no manda y la tarjeta sale de novecientos píxeles. */
.ns-eq__foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.03);
  transition:filter .5s cubic-bezier(.23,1,.32,1),
             transform .7s cubic-bezier(.23,1,.32,1)}
/* El hueco gris mientras llegan los retratos de verdad. Los generados están
   guardados en keybourne/_archivo/equipo-retratos-generados/, con la página
   tal como estaba, por si hay que volver a enseñarlos. */
.ns-eq__hueco{display:block;aspect-ratio:4/5;background:#CFCDC8}
.ns-eq__velo{position:absolute;inset:0;background:rgba(35,42,32,.78);
  opacity:0;transition:opacity .45s cubic-bezier(.23,1,.32,1)}
.ns-eq__frase{position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(12px,1.4vw,20px);text-align:center;
  font-family:var(--kb-logo);font-weight:500;line-height:1.3;
  font-size:clamp(14px,1.15vw,17px);color:var(--kb-fondo);text-wrap:balance;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s cubic-bezier(.23,1,.32,1),
             transform .5s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .ns-eq__uno:hover .ns-eq__foto img,
  .ns-eq__uno:focus-within .ns-eq__foto img{filter:none;transform:scale(1.04)}
  .ns-eq__uno:hover .ns-eq__velo,
  .ns-eq__uno:focus-within .ns-eq__velo{opacity:1}
  .ns-eq__uno:hover .ns-eq__frase,
  .ns-eq__uno:focus-within .ns-eq__frase{opacity:1;transform:none}
}
/* Sin ratón no hay «pasar por encima»: la foto va a color desde el principio y
   la frase se lee debajo del cargo, no escondida en un velo que nadie va a
   abrir nunca. */
@media (hover:none),(prefers-reduced-motion:reduce){
  .ns-eq__foto img{filter:none;transform:none;transition:none}
  .ns-eq__velo{display:none}
  .ns-eq__frase{position:static;opacity:1;transform:none;padding:10px 4px 0;
    color:var(--kb-tinta);font-size:14.5px}
}
/* El cargo, no el nombre: los nombres de verdad los pone la casa. */
.ns-eq__uno figcaption{margin-top:12px;text-align:center;
  font:600 9.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kb-casa);
  text-wrap:balance}

/* ── La reja de marcas ──────────────────────────────────────────────────────
   Reutiliza la tarjeta de la portada (.hm-u) tal cual: misma foto, mismo
   desvanecido, mismo logotipo. Lo que cambia es cómo se colocan y que aquí
   van en blanco y negro hasta que se pasa por encima.

   En móvil NO se apilan: carrusel con encaje, como manda la casa. De 760 px
   para arriba, tres columnas; las quince marcas dan cinco filas justas.
   Todas las tarjetas miden lo mismo: ninguna destacada. */
.mk-reja{list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0 0 4px;
  display:flex;gap:clamp(12px,1.6vw,22px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.mk-reja::-webkit-scrollbar{display:none}
@media (min-width:760px){
  .mk-reja{display:grid;overflow:visible;
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(26px,3vw,44px)}
}
@media (min-width:1040px){
  /* Cuatro columnas. Los dieciséis restaurantes dan cuatro filas justas. */
  .mk-reja{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Los hoteles son dos: una fila de dos, cada uno media caja. */
  .mk-reja--par{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:760px){
  /* La proporción se le pone a la CELDA —foto más pie—, no a la foto: si se la
     queda la foto, las tarjetas de una misma fila acaban a alturas distintas y
     los logotipos no casan. */
  .mk-reja .hm-u{flex:none;aspect-ratio:320/520}
  .mk-reja .hm-u figure{height:100%;grid-template-rows:1fr auto}
  .mk-reja .hm-u__foto{aspect-ratio:auto;min-height:0}
}

/* En blanco y negro, y a color al pasar por encima. La transición es lenta a
   propósito: a 200 ms el salto de color parpadea. */
.mk-reja .hm-u__foto img{filter:grayscale(1) contrast(1.04);
  transition:filter .55s cubic-bezier(.23,1,.32,1),
             transform .7s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .mk-reja .hm-u:hover .hm-u__foto img,
  .mk-reja .hm-u:focus-within .hm-u__foto img{filter:none}
}
/* Sin ratón no hay «pasar por encima», así que ahí van a color desde el
   principio: en un móvil, si no, se quedarían en gris para siempre. */
@media (hover:none),(prefers-reduced-motion:reduce){
  .mk-reja .hm-u__foto img{filter:none;transition:none}
}

/* Los dos hoteles ocupan media caja cada uno. Con la proporción vertical de
   las tarjetas normales saldrían de novecientos píxeles de alto: casi una
   pantalla por tarjeta. Van apaisados. */
@media (min-width:1040px){
  .mk-reja--par .hm-u{aspect-ratio:16/11}
}
/* El logotipo de la tarjeta se tiñe del verde de la casa, que sobre crema se
   lee y sobre la sección oscura NO: salía verde oscuro sobre verde oscuro, es
   decir, invisible. En fondo oscuro se tiñe de crema. */
/* NORMA: si el fondo es verde, el logotipo va en blanco. El logotipo de la
   tarjeta se tiñe del verde de la casa, que sobre crema se lee y sobre verde
   NO. Vale para CUALQUIER tarjeta dentro de una sección oscura —la reja de
   marcas y también los carriles de las bandas—, que es donde se me escapó. */
.hm-sec--tinta figcaption img,
.hm-sec--oscura figcaption img{filter:brightness(0) invert(1) opacity(.92)}
.hm-sec--tinta figcaption img.hm-u--color,
.hm-sec--oscura figcaption img.hm-u--color{filter:none}
.hm-sec--tinta .mk-u__donde,
.hm-sec--oscura .mk-u__donde{color:rgba(239,233,222,.78)}

/* Debajo del logotipo, dónde está esa marca. */
.mk-u__donde{font:500 9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;text-transform:uppercase;color:var(--kb-peltre);
  text-align:center;text-wrap:balance}
.mk-reja .hm-u figcaption{gap:9px;padding-bottom:4px}
.mk-pista{margin-top:-14px;font-size:13.5px;color:var(--kb-peltre)}
@media (hover:none){.mk-pista{display:none}}

/* ── El banner de redes, al cierre de Contacto ──────────────────────────────
   Foto de fondo con su velo, como la banda de prensa de la portada, para que
   la página no termine en un bloque de texto sobre crema. */
.ct-redes{position:relative;overflow:hidden;
  padding-block:clamp(72px,10vw,140px);background:var(--kb-tinta)}
.ct-redes__foto{position:absolute;inset:0;z-index:0;
  background:url(/assets/media/img/dubai-3.webp) center/cover no-repeat}
/* El velo se cierra en el centro, que es donde va todo el texto, y se abre en
   los bordes para que la foto no quede apagada del todo. El valor sale de
   medir la tinta contra el fondo pintado. */
.ct-redes__velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(26,31,23,.42) 0%, rgba(26,31,23,.80) 42%,
    rgba(26,31,23,.80) 58%, rgba(26,31,23,.42) 100%)}
.ct-redes__dentro{position:relative;z-index:2;
  display:grid;justify-items:center;gap:16px;text-align:center}
.ct-redes__dentro .hm-raya{margin-inline:auto}
.ct-redes__texto{margin:0;max-width:52ch;
  font-size:15px;line-height:1.7;color:rgba(239,233,222,.92)}

/* Los enlaces: icono y nombre, no un botón macizo. En móvil se apilan porque
   tres cajas de estas en una fila de 390 px quedan a un dedo de tocarse. */
.ct-redes__lista{list-style:none;margin:clamp(14px,2vw,24px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.8vw,22px)}
.ct-redes__ir{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--kb-fondo);
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(239,233,222,.44);border-radius:99px;
  padding:13px 20px;
  transition:background-color .35s cubic-bezier(.23,1,.32,1),
             border-color .35s cubic-bezier(.23,1,.32,1)}
.ct-redes__ir svg{width:19px;height:19px;flex:none}
/* Al pasar el ratón NO se aclara el fondo: aclararlo un poco sobre una foto
   sube el fondo hacia el color de la letra y el enlace se lee PEOR justo
   cuando se está apuntando. Se invierte entero —píldora crema y letra
   oscura—, que no deja dudas y además gana contraste. */
@media (hover:hover) and (pointer:fine){
  .ct-redes__ir:hover,.ct-redes__ir:focus-visible{
    background:var(--kb-fondo);border-color:var(--kb-fondo);color:var(--kb-tinta)}
}
.ct-redes__ir:focus-visible{outline:2px solid var(--kb-fondo);outline-offset:3px}
@media (max-width:520px){
  .ct-redes__lista{flex-direction:column;align-items:stretch;width:min(100%,280px)}
  .ct-redes__ir{justify-content:center}
}

/* ── El banner de las interiores ────────────────────────────────────────────
   Una foto quieta de una pantalla, y la página sigue bajando. Antes esto era
   el vuelo de la portada, clavado casi dos pantallas mientras los fotogramas
   pasaban con la rueda; en una interior el visitante va a por el contenido y
   no a que le secuestren el scroll. La portada lo conserva, que es su sitio. */
.kb-banner{position:relative;height:100svh;overflow:hidden;background:var(--kb-tinta)}
.kb-banner__foto{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
/* El velo no es decorativo: sin él el titular blanco se pierde sobre el dorado.
   El valor sale de medir la tinta contra el fondo pintado, no de calcularlo. */
/* No es un velo plano: se cierra en la franja de en medio, que es donde va el
   titular, y se abre arriba y abajo para que la foto respire. Un velo plano que
   sirviera a la foto más clara (la recepción) dejaría las otras tres apagadas
   sin motivo. */
.kb-banner__velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,31,23,.26) 0%,
    rgba(26,31,23,.62) 38%,
    rgba(26,31,23,.62) 62%,
    rgba(26,31,23,.26) 100%)}
.kb-banner__rotulo{position:absolute;inset:0;z-index:2;
  display:grid;align-content:center;justify-items:center;gap:14px;
  padding-inline:clamp(28px,4vw,48px);text-align:center}
/* Sin tope de caracteres. El titular del sitio trae max-width:40ch de serie y
   aquí llevaba 22, que son 399 px: «Twenty houses, no two alike» se partía en
   TRES renglones en una pantalla de 1440. En un banner sobra el tope; el aire
   lo pone el relleno de la caja, y en móvil parte solo porque no cabe. */
.kb-banner__rotulo .hm-titulo{margin:0;max-width:none}
.kb-banner__rotulo .hm-raya{background:rgba(247,243,234,.45);margin:0}

/* ── Dubái en la prensa del Golfo ───────────────────────────────────────────
   La sección se QUEDA PEGADA mientras los logotipos suben con la rueda. Antes
   era una columna con barra de scroll dentro, que obliga a meter el ratón en
   una cajita para verla; así el muro se recorre con el gesto de siempre.

   Son dos piezas: la cáscara (.pr-golfo), alta, que es la que da recorrido al
   scroll, y la pantalla (.pr-golfo__pantalla), pegada arriba y de una pantalla
   de alto, que es lo único que se ve. El alto de la cáscara lo pone el guion
   midiendo cuánto sobra del muro: ponerlo a ojo dejaría el final cortado o un
   trozo muerto al salir. */
.pr-golfo{position:relative;background:var(--kb-tinta)}
.pr-golfo__pantalla{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-items:center}
.pr-golfo__foto{position:absolute;left:0;right:0;top:-18%;height:136%;z-index:0;
  background:url(/assets/media/img/dubai-4.webp) center/cover no-repeat}
.pr-golfo__velo{position:absolute;inset:0;z-index:1;background:rgba(26,31,23,.87)}
.pr-golfo__reja{position:relative;z-index:2;
  display:grid;gap:clamp(26px,3.4vw,52px);align-items:center;
  grid-template-columns:1fr}
@media (min-width:900px){
  .pr-golfo__reja{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.pr-golfo__texto{display:grid;gap:16px;justify-items:start}
/* El titular del sitio nace centrado y con márgenes automáticos. Aquí manda a
   la izquierda, pegado al filete y al párrafo. */
.pr-golfo__texto h2{margin:0;text-align:left;margin-inline:0;text-indent:0}
.pr-golfo__texto .hm-raya{justify-self:start;margin-inline:0}
.pr-golfo__texto p{margin:0;text-align:justify;max-width:46ch;
  font-size:15px;line-height:1.7;color:rgba(239,233,222,.86)}

/* La mirilla por la que asoma el muro, y la cinta que corre por detrás. En
   móvil se achica: el texto va encima en vez de al lado, y entre los dos se
   salían de la pantalla. Y la pantalla lleva hueco arriba para la barra, que
   va fija y si no se comía el titular. */
.pr-golfo__ventana{height:min(72svh,600px);overflow:hidden}
@media (max-width:899px){
  .pr-golfo__ventana{height:min(46svh,420px)}
  .pr-golfo__pantalla{padding-top:var(--kb-barra,64px)}
}
.pr-golfo__cinta{will-change:transform}

/* Dentro de media columna no caben seis logotipos por fila: quedarían celdas
   de treinta píxeles. Aquí van de tres en tres, que además reparte los 33 en
   once filas justas. En móvil son dos, y el que sobra ocupa el ancho entero
   para que no quede un hueco al lado. */
.pr-golfo__lista--muro{--k:.72}
.pr-golfo__lista--muro .pr-muro{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Al ocupar dos columnas, la celda conserva su proporción 16/9 y se vuelve
   el doble de alta que las demás. Se le dobla el ancho en la proporción
   para que mida la misma fila. */
.pr-golfo__lista--muro .pr-muro > :last-child:nth-child(odd){grid-column:span 2;aspect-ratio:32/9}
@media (min-width:900px){
  .pr-golfo__lista--muro .pr-muro{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr-golfo__lista--muro .pr-muro > :last-child:nth-child(odd){grid-column:auto;aspect-ratio:16/9}
}

/* Sin animación: no se pega ni se mueve nada, el muro se ve entero de corrido. */
@media (prefers-reduced-motion:reduce){
  .pr-golfo{height:auto !important}
  .pr-golfo__pantalla{position:static;height:auto;padding-block:clamp(60px,9vw,120px)}
  .pr-golfo__ventana{height:auto}
  .pr-golfo__cinta{transform:none !important}
}


/* ── El último recorte publicado, justo tras el banner ──────────────────────
   Una sola ficha grande: la foto del propio artículo a la izquierda y, a la
   derecha, el logotipo del medio, el titular y la fecha. La foto no es de
   archivo ni generada: es la que ese medio publicó con la pieza. */
.pr-ultimo__ficha{display:grid;gap:0;grid-template-columns:1fr;
  text-decoration:none;color:inherit;
  border:1px solid var(--kb-piedra);background:var(--kb-tarjeta);
  /* El radio no es inventado: es el que ya usan otras piezas del sitio.
     El overflow:hidden es lo que hace que la foto se recorte con la
     esquina; sin él se saldría por debajo del borde redondeado. */
  border-radius:clamp(8px,1vw,13px);overflow:hidden}
@media (min-width:880px){
  .pr-ultimo__ficha{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:stretch}
}
.pr-ultimo__foto{display:block;width:100%;height:100%;min-height:clamp(220px,32svh,340px);
  object-fit:cover;object-position:center}
.pr-ultimo__txt{display:grid;align-content:center;gap:12px;justify-items:start;
  padding:clamp(24px,3.4vw,46px)}
.pr-ultimo__et{font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:#2B331F}
.pr-ultimo__marca{display:block}
.pr-ultimo__t{font-family:var(--kb-logo);font-weight:500;line-height:1.2;
  font-size:clamp(21px,2.5vw,30px);color:var(--kb-tinta);text-wrap:balance;
  transition:transform .45s cubic-bezier(.23,1,.32,1)}
.pr-ultimo__p{font-size:15px;line-height:1.7;color:#1D1D1D;max-width:46ch}
.pr-ultimo__pie{font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:#2E2E28}
.pr-ultimo__ir{display:inline-flex;align-items:center;gap:11px;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kb-casa);
  border-bottom:1px solid rgba(70,81,62,.4);padding-bottom:7px;margin-top:4px}
.pr-ultimo__ir svg{width:15px;height:8px;overflow:visible;
  transition:transform .45s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .pr-ultimo__ficha:hover .pr-ultimo__t{transform:translateX(5px)}
  .pr-ultimo__ficha:hover .pr-ultimo__ir svg{transform:translateX(5px)}
}

/* ── El logotipo del medio dentro de cada recorte ──
   Antes el medio sólo se decía con letras. Ahora va su logotipo al lado del
   texto, en una columna de ancho fijo para que los cinco queden alineados
   aunque uno sea apaisado y otro casi cuadrado. */
.pr-art{grid-template-columns:1fr;align-items:center}
@media (min-width:760px){
  .pr-art{grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,2.6vw,38px)}
}
.pr-art__marca{display:grid;place-items:center;min-height:52px}
@media (min-width:760px){.pr-art__marca{justify-items:start;place-items:center start}}
.pr-art__txt{display:grid;gap:7px}

/* Los reconocimientos: fichas sin caja, sólo separadas por su filete. */
.pr-premios{display:grid;gap:0;border-top:1px solid var(--kb-piedra);
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.pr-premio{display:grid;gap:6px;align-content:start;
  padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,28px) clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--kb-piedra)}
.pr-premio b{font-family:var(--kb-logo);font-weight:500;line-height:1.2;
  font-size:clamp(17px,1.8vw,21px);color:var(--kb-tinta)}
.pr-premio .k{font:500 9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--kb-peltre)}
.pr-premio .p{font-size:13.5px;line-height:1.6;color:#1D1D1D}

/* El muro completo: aquí no rota nada, están las treinta y tres a la vez.
   Es una página de prensa; lo que se quiere es verlas todas. */
/* El fondo del muro es el MISMO que el de las celdas, no el color del filete:
   treinta y tres logotipos en seis columnas dejan tres huecos al final, y con
   el filete de fondo esos huecos se veían como un bloque gris pegado. Los
   filetes los dibuja ahora cada celda. */
.pr-muro{display:grid;gap:0;background:var(--kb-tinta);
  border:1px solid rgba(239,233,222,.16);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){.pr-muro{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:980px){.pr-muro{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pr-cuadro{background:var(--kb-tinta);display:grid;place-items:center;
  aspect-ratio:16/9;padding:clamp(10px,1.4vw,16px);
  border-right:1px solid rgba(239,233,222,.16);
  border-bottom:1px solid rgba(239,233,222,.16)}
.pr-logo{display:block;
  width:calc(var(--w) * var(--k,.84) * 1px);height:calc(var(--h) * var(--k,.84) * 1px);
  background:var(--kb-tarjeta);opacity:.74;
  -webkit-mask:var(--logo) center/contain no-repeat;
          mask:var(--logo) center/contain no-repeat}
@media (max-width:980px){.pr-muro{--k:.74}}

/* El logotipo se pinta con máscara, así que su color lo pone esta regla. El de
   serie es crema, para fondo oscuro; sobre la tarjeta clara hace falta tinta.
   Va DESPUÉS de .pr-logo a propósito: puesta antes, la base la pisaba y el
   logotipo salía crema sobre crema, es decir, invisible. */
.pr-logo--tinta{background:var(--kb-tinta);opacity:1}

/* El muro de logotipos, dentro de su jaula. Treinta y uno a seis por fila son
   seis filas largas que estiran la página y dejan la última fila coja. Encerrado,
   el bloque mide siempre lo mismo y los logotipos se recorren rodando, igual que
   los recortes de la sección de arriba. */
/* Aquí NO va degradado de aviso: el fondo de las celdas ya es ese mismo verde,
   así que un fundido a verde no se ve. Lo que avisa de que hay más es la fila
   cortada por la mitad, que es honesta y no necesita pintura. */
.pr-jaula{position:relative}
.pr-muro-scroll{max-height:min(56svh,440px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(239,233,222,.32) transparent}
.pr-muro-scroll::-webkit-scrollbar{width:4px}
.pr-muro-scroll::-webkit-scrollbar-track{background:transparent}
.pr-muro-scroll::-webkit-scrollbar-thumb{background:rgba(239,233,222,.32);border-radius:99px}

.pr-boton{text-align:center;margin:clamp(20px,2.6vw,30px) 0 0}
.pr-boton a{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--kb-casa);padding:0 2px 7px;
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.17em;text-transform:uppercase;
  border-bottom:1px solid var(--kb-piedra);
  transition:color .3s cubic-bezier(.23,1,.32,1),border-color .3s cubic-bezier(.23,1,.32,1)}
.pr-boton svg{width:15px;height:8px;overflow:visible;
  transition:transform .35s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .pr-boton a:hover{color:var(--kb-tinta);border-color:var(--kb-tinta)}
  .pr-boton a:hover svg{transform:translateX(5px)}
}

/* ════ Página de contacto ════ */
/* Las tres oficinas. Antes iba con auto-fit y minmax, que a 820 px decidía
   poner DOS columnas: la tercera oficina caía sola a una segunda fila con
   medio ancho vacío al lado. Aquí no hay nada que adivinar —son tres y van a
   ser tres siempre—, así que se dicen tres, y por debajo una. Nunca dos. */
.ct-casas{display:grid;gap:0;border-top:1px solid var(--kb-piedra);
  grid-template-columns:1fr}
@media (min-width:760px){
  .ct-casas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* El titular y la entrada de esta sección van centrados; con el texto pegado a
   la izquierda el bloque se veía cargado hacia ese lado. Va centrado, y el
   relleno igual por los dos costados en vez de sólo por la derecha. */
.ct-casa{display:grid;gap:7px;align-content:start;justify-items:center;
  text-align:center;
  padding:clamp(20px,2.4vw,30px) clamp(14px,1.6vw,24px);
  border-bottom:1px solid var(--kb-piedra)}
/* Un filete entre columnas para que las tres se lean como tres tercios
   iguales. El primero no lleva, que si no cuelga del borde de la caja. */
@media (min-width:760px){
  .ct-casa + .ct-casa{border-left:1px solid var(--kb-piedra)}
}
.ct-casa b{font-family:var(--kb-logo);font-weight:500;line-height:1.2;
  font-size:clamp(18px,1.9vw,23px);color:var(--kb-tinta)}
.ct-casa .k{font:500 9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--kb-peltre)}
.ct-casa p{margin:4px 0 0;font-size:13.5px;line-height:1.62;color:#1D1D1D}
.ct-casa a{font:500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;color:var(--kb-casa);text-decoration:none;
  border-bottom:1px solid var(--kb-piedra);justify-self:center;padding-bottom:3px;
  transition:border-color .3s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .ct-casa a:hover{border-color:var(--kb-casa)}
}
/* El enlace de la sección oscura va en crema, no en verde: sobre tinta el
   verde de la casa se hunde. */
.pr-boton--claro a{color:var(--kb-fondo);border-bottom-color:rgba(239,233,222,.4)}
@media (hover:hover) and (pointer:fine){
  .pr-boton--claro a:hover{color:var(--kb-fondo);border-bottom-color:var(--kb-fondo)}
}

/* ── El vuelo en las páginas interiores ──
   Mismo motor que la portada, sólo que más corto y con el h1 encima en vez de
   las cifras. Una página interior tiene que abrir como abre la casa. */
.kb-cine--interior .kb-cine__rotulo{position:absolute;inset:0;z-index:2;
  display:grid;align-content:center;justify-items:center;gap:18px;
  padding:0 clamp(28px,4vw,48px);pointer-events:none;
  will-change:opacity}
.kb-cine--interior .kb-cine__rotulo .hm-titulo{margin:0;max-width:22ch}
.kb-cine--interior .kb-cine__rotulo .hm-raya{background:rgba(247,243,234,.45);margin:0}


/* ══ El blog ════════════════════════════════════════════════════════════════
   Índice: la entrada más reciente manda arriba, a lo ancho, y el resto va en
   reja de tres. Encima, las secciones para filtrar, que no cambian la
   dirección. En móvil la reja es carrusel con la vecina asomando, como manda
   la casa: nunca tarjetas apiladas.
   Entrada: banner con la foto de la propia historia, una columna de lectura
   de 680 px y las fotos un poco más anchas que la columna, que es lo que le
   da ritmo de revista y no de documento. */

/* El rótulo de sección encima del h1 del banner. */
.kb-banner__k{margin:0;font:500 11px/1 var(--kb-texto);letter-spacing:.24em;
  text-transform:uppercase;color:rgba(247,243,234,.84)}

/* La etiqueta de sección y fecha, la misma en las tres piezas. */
.bl-k{font:500 9.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.17em;text-transform:uppercase;color:var(--kb-peltre)}

/* ── Filtros ── */
.bl-filtros{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(6px,1vw,10px) clamp(18px,2.4vw,34px);
  margin:0 auto clamp(30px,4vw,52px);padding-bottom:clamp(14px,1.6vw,20px);
  border-bottom:var(--kb-linea);max-width:880px}
.bl-filtros button{appearance:none;background:none;border:0;cursor:pointer;
  padding:8px 0;position:relative;
  font:500 12px/1 var(--kb-texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--kb-peltre);transition:color .3s ease}
.bl-filtros button::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--kb-casa);transform:scaleX(0);
  transition:transform .4s cubic-bezier(.23,1,.32,1)}
.bl-filtros button:hover{color:var(--kb-tinta)}
.bl-filtros button[aria-pressed="true"]{color:var(--kb-tinta)}
.bl-filtros button[aria-pressed="true"]::after{transform:none}
.bl-filtros button:focus-visible{outline:2px solid var(--kb-casa);outline-offset:4px}
/* En móvil las secciones no se parten en tres renglones: una fila que se
   desliza, igual que las tarjetas. */
@media (max-width:759px){
  .bl-filtros{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;margin-inline:calc(-1 * clamp(28px,4vw,48px));
    padding-inline:clamp(28px,4vw,48px)}
  .bl-filtros::-webkit-scrollbar{display:none}
  .bl-filtros button{flex:none}
}

/* ── La destacada ── */
.bl-destacada{display:grid;gap:clamp(20px,3vw,52px);align-items:center;
  text-decoration:none;color:var(--kb-tinta);
  margin-bottom:clamp(44px,6vw,84px)}
.bl-destacada[hidden]{display:none}
@media (min-width:900px){
  .bl-destacada{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
.bl-destacada__foto{display:block;overflow:hidden;border-radius:clamp(8px,1vw,13px);
  background:var(--kb-piedra)}
.bl-destacada__foto img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.23,1,.32,1)}
.bl-destacada__txt{display:grid;gap:14px;justify-items:start}
.bl-destacada__t{font-family:var(--kb-logo);font-weight:500;line-height:1.1;
  font-size:clamp(28px,3.3vw,46px);text-wrap:balance}
.bl-destacada__p{font-size:16px;line-height:1.66;color:#1D1D1D;max-width:44ch}

/* El «leer» con su flecha, que se adelanta al pasar. */
.bl-ir{display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  font:500 12px/1 var(--kb-texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--kb-casa);padding-bottom:6px;border-bottom:1px solid var(--kb-piedra)}
.bl-ir svg{width:15px;height:8px;transition:transform .4s cubic-bezier(.23,1,.32,1)}

@media (hover:hover) and (pointer:fine){
  .bl-destacada:hover .bl-destacada__foto img{transform:scale(1.035)}
  .bl-destacada:hover .bl-ir svg{transform:translateX(5px)}
}

/* ── La reja ── */
.bl-reja{list-style:none;margin:0;padding:0 0 4px;
  display:flex;gap:clamp(14px,2vw,22px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.bl-reja::-webkit-scrollbar{display:none}
.bl-card{scroll-snap-align:start;flex:0 0 min(82%,340px)}
.bl-card[hidden]{display:none}
@media (min-width:760px){
  .bl-reja{display:grid;overflow:visible;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(20px,2.6vw,36px);row-gap:clamp(40px,4.6vw,64px)}
  .bl-card{flex:none}
}
/* Columna flexible y el pie con margin-top:auto: así la raya de «min read»
   cae a la misma altura en las tres tarjetas de una fila, diga lo que diga
   el titular. */
.bl-card a{display:flex;flex-direction:column;gap:12px;height:100%;
  text-decoration:none;color:var(--kb-tinta)}
.bl-card__foto{display:block;overflow:hidden;border-radius:clamp(8px,1vw,12px);
  background:var(--kb-piedra);margin-bottom:6px}
.bl-card__foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.23,1,.32,1)}
.bl-card__t{font-family:var(--kb-logo);font-weight:500;line-height:1.18;
  font-size:clamp(21px,1.9vw,26px);text-wrap:balance}
.bl-card__p{font-size:14.5px;line-height:1.62;color:#1D1D1D}
.bl-card__pie{font-size:12.5px;color:var(--kb-peltre);padding-top:10px;
  border-top:var(--kb-linea);margin-top:auto}
@media (hover:hover) and (pointer:fine){
  .bl-card a:hover .bl-card__foto img{transform:scale(1.045)}
  .bl-card__t{transition:color .3s ease}
  .bl-card a:hover .bl-card__t{color:var(--kb-casa)}
}
.bl-card a:focus-visible,.bl-destacada:focus-visible{outline:2px solid var(--kb-casa);
  outline-offset:6px;border-radius:6px}

/* «Sigue leyendo», sobre el verde de la casa. */
.bl-mas .bl-card a{color:var(--kb-tarjeta)}
.bl-mas .bl-k{color:rgba(247,243,234,.74)}
.bl-mas .bl-card__p{color:rgba(247,243,234,.88)}
.bl-mas .bl-card__pie{color:rgba(247,243,234,.74);border-top-color:rgba(239,233,222,.24)}
.bl-mas .bl-card__foto{background:rgba(0,0,0,.18)}
@media (hover:hover) and (pointer:fine){
  .bl-mas .bl-card a:hover .bl-card__t{color:#fff}
}
.bl-mas .bl-card a:focus-visible{outline-color:var(--kb-fondo)}

/* ── La entrada ── */
.bl-art__cabeza,.bl-art__cuerpo,.bl-art__volver{max-width:680px;margin-inline:auto}
.bl-art__meta{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 22px;
  font-size:13px;letter-spacing:.04em;color:var(--kb-peltre)}
.bl-art__meta span{width:4px;height:4px;border-radius:50%;background:var(--kb-piedra)}
.bl-art__lead{margin:0;text-align:center;text-wrap:balance;
  font-size:clamp(19px,1.7vw,22px);line-height:1.55;color:var(--kb-tinta);
  padding-bottom:clamp(28px,3.4vw,44px);border-bottom:var(--kb-linea)}
.bl-art__cuerpo{padding-top:clamp(28px,3.4vw,44px)}
/* Justificado, como el resto de textos corridos del sitio. Sin guionado (la
   casa lo tiene apagado y el comprobador lo vigila): a 680 px de columna los
   huecos entre palabras no llegan a abrir ríos. */
.bl-art__cuerpo > p{margin:0 0 1.25em;font-size:var(--kb-base);line-height:1.78;
  color:#1D1D1D;text-align:justify;text-wrap:pretty}
.bl-art__cuerpo a{color:var(--kb-casa);text-underline-offset:3px}
.bl-art__cuerpo h2{margin:1.9em 0 .7em;font:600 clamp(20px,1.8vw,23px)/1.3 var(--kb-texto);
  color:var(--kb-tinta);text-wrap:balance}

/* La frase destacada: la romana del logotipo entre dos filetes cortos. Sin
   comillas ni cursiva: la casa no usa itálica. */
.bl-cita{margin:clamp(34px,4vw,54px) 0;padding:0;text-align:center;display:grid;
  justify-items:center;gap:clamp(18px,2vw,24px)}
.bl-cita::before,.bl-cita::after{content:"";width:clamp(38px,4vw,58px);height:1px;
  background:var(--kb-piedra)}
.bl-cita p{margin:0;font-family:var(--kb-logo);font-weight:500;line-height:1.28;
  font-size:clamp(21px,2.2vw,29px);color:var(--kb-casa);text-wrap:balance;max-width:100%}
/* Máximo dos renglones (Carlos): la frase ocupa la columna entera y no los 26
   caracteres de antes, que la partían en tres. Una frase que a este cuerpo no
   entre en dos renglones es demasiado larga para ser cita: se acorta. */

/* La foto sale de la columna: 940 px con la columna en 680. El marco recorta
   y la capa de dentro sobra un 16 % para que el paralaje no descubra el borde. */
.bl-foto{margin:clamp(34px,4vw,54px) auto;width:min(940px,calc(100vw - 2 * clamp(28px,4vw,48px)));
  position:relative;left:50%;transform:translateX(-50%)}
.bl-foto__marco{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;
  border-radius:clamp(8px,1vw,13px);background:var(--kb-piedra)}
.bl-foto__capa{position:absolute;left:0;top:-8%;width:100%;height:116%;
  object-fit:cover;display:block;will-change:transform}
.bl-foto figcaption{margin-top:12px;text-align:center;font-size:13px;line-height:1.5;
  color:var(--kb-peltre)}

.bl-art__volver{margin-top:clamp(36px,4vw,56px);padding-top:clamp(22px,2.4vw,30px);
  border-top:var(--kb-linea);text-align:center}
.bl-art__volver a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font:500 12px/1 var(--kb-texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--kb-casa)}
.bl-art__volver svg{width:15px;height:8px;transition:transform .4s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .bl-art__volver a:hover svg{transform:translateX(-5px)}
}
@media (prefers-reduced-motion:reduce){
  .bl-card__foto img,.bl-destacada__foto img,.bl-ir svg,.bl-art__volver svg{transition:none}
}
/* Sin la entradilla, el filtro es lo primero tras el banner: con el relleno
   entero de sección quedaban 104 px vacíos encima. Se queda en la mitad. */
.bl-indice{padding-top:clamp(26px,3.2vw,44px)}

/* ══ El menú del teléfono ═══════════════════════════════════════════════════
   Debajo de 880 px la barra esconde los enlaces, y hasta ahora no había nada
   que los sustituyera: en el teléfono sólo se navegaba por el pie. Es un
   componente que sólo existe en móvil; el escritorio no cambia en nada.
   El botón son dos filetes finos, no tres: el mismo registro que la raya de
   los titulares. El panel ocupa la pantalla entera, en el crema de la casa,
   con los enlaces en la romana del logotipo. */
.hm-abrir{display:none}
@media (max-width:880px){
  .hm-barra .kb-caja{flex-wrap:nowrap}
  .hm-abrir{display:grid;place-content:center;gap:7px;width:44px;height:44px;
    margin-right:-10px;padding:0;border:0;background:none;cursor:pointer}
  .hm-abrir span{display:block;width:24px;height:1px;background:var(--kb-tinta)}
}
.hm-movil{position:fixed;inset:0;z-index:60;background:var(--kb-fondo);
  display:grid;grid-template-rows:auto 1fr auto;justify-items:center;
  padding:18px 28px calc(28px + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.hm-movil[hidden]{display:none}
.hm-movil.abierto{opacity:1;visibility:visible;transition:opacity .35s ease}
.hm-movil__logo{align-self:start;justify-self:start;margin-top:-9px;padding-top:0}
.hm-movil__logo .kb-logo{font-size:21px}
.hm-movil__cerrar{position:absolute;top:10px;right:clamp(6px,3vw,22px);width:44px;height:44px;
  border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hm-movil__cerrar span{grid-area:1/1;width:24px;height:1px;background:var(--kb-tinta);transform:rotate(45deg)}
.hm-movil__cerrar span+span{transform:rotate(-45deg)}
.hm-movil__lista{list-style:none;margin:0;padding:0;align-self:center;
  display:grid;justify-items:center;gap:clamp(6px,1.6vh,14px)}
.hm-movil__lista a{display:block;padding:10px 12px;text-decoration:none;
  font-family:var(--kb-logo);font-weight:500;font-size:clamp(22px,6.6vw,28px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--kb-tinta);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.23,1,.32,1)}
.hm-movil.abierto .hm-movil__lista a{opacity:1;transform:none}
.hm-movil.abierto .hm-movil__lista li:nth-child(2) a{transition-delay:.04s}
.hm-movil.abierto .hm-movil__lista li:nth-child(3) a{transition-delay:.08s}
.hm-movil.abierto .hm-movil__lista li:nth-child(4) a{transition-delay:.12s}
.hm-movil.abierto .hm-movil__lista li:nth-child(5) a{transition-delay:.16s}
.hm-movil.abierto .hm-movil__lista li:nth-child(6) a{transition-delay:.2s}
.hm-movil__lista a[aria-current="page"]{color:var(--kb-casa)}
.hm-movil__idioma{padding:12px 16px;text-decoration:none;
  font:500 12px/1 var(--kb-texto);letter-spacing:.18em;text-transform:uppercase;
  color:var(--kb-casa);border-top:1px solid var(--kb-piedra)}
body.menu-abierto{overflow:hidden}
@media (min-width:881px){.hm-movil{display:none !important}}
@media (prefers-reduced-motion:reduce){
  .hm-movil,.hm-movil__lista a{transition:none}
}

/* ══ Móvil · la ley del texto centrado ══════════════════════════════════════
   En el teléfono la columna mide unos 360 px y, justificado y sin guionado
   (que en esta casa está prohibido), el texto abre ríos: «and    Celebration
   Key,    Carnival's». La casa ya había decidido centrar por debajo de 620 px
   el párrafo de presentación; se extiende a todos los párrafos de sección.
   Y los titulares que en escritorio van a la izquierda de su 50/50 pasan al
   centro, con su filete, igual que el resto de secciones. El cuerpo del blog
   se queda justificado: es texto largo, y ahí lo pidió Carlos.
   Todo dentro del corte de móvil: el escritorio no cambia. */
@media (max-width:619px){
  .hm-sube p,.hm-patas__texto p,.hm-prensa__texto p,.hm-hablemos__texto p,
  .pr-intro,.ns-golfo__dentro p,.pr-golfo__texto p,.ns-abre p,.ns-abre__p{
    text-align:center !important;text-align-last:center !important}
  .hm-prensa__texto,.hm-hablemos__texto,.pr-golfo__texto{justify-items:center;text-align:center}
  .hm-prensa__texto h2,.hm-hablemos__texto h2,.pr-golfo__texto h2{justify-self:center;text-align:center;margin-inline:auto}
  .hm-prensa__texto .hm-raya,.hm-hablemos__texto .hm-raya,.pr-golfo__texto .hm-raya{justify-self:center;margin-inline:auto}
  .hm-prensa__texto .hm-prensa__boton{justify-self:center}
}

/* ══ Móvil · el pie ══
   Los enlaces medían 18 px de alto: se tocaban de milagro. Se les da una zona
   de toque de 40 px quitando el hueco de la lista, así que la columna mide lo
   mismo que antes. Y la línea de ciudades se parte por su sitio. */
.hm-pie .fin span{white-space:nowrap}
@media (max-width:820px){
  .hm-pie ul{gap:0}
  .hm-pie ul a{display:inline-flex;align-items:center;min-height:40px}
}
@media (max-width:619px){
  .hm-pie .fin span:not(.sep){display:block}
  .hm-pie .fin .sep{display:none}
}

/* ══ Móvil · los rótulos en monoespaciada ══
   En escritorio van entre 8,5 y 9,5 px, en versales y muy aireados, y se leen.
   En un teléfono, a un palmo, 9 px es ilegible: se suben a 10,5. El escritorio
   no se toca. (La monoespaciada sigue pendiente de elegir: ver PENDIENTES.) */
@media (max-width:619px){
  .hm-pila__texto .d,.hm-diario .k,.hm-hablemos__campo > span,.hm-hablemos__aviso,
  .hm-patas__cifras span,.pr-art .k,.ns-eq__uno figcaption,.mk-u__donde,
  .pr-premio .k,.ct-casa .k,.bl-k{font-size:10.5px !important}
}

/* ══ Móvil · zonas de toque ══
   Enlaces y botones que medían entre 7 y 28 px de alto. El dibujo no cambia:
   se agranda la zona que recibe el dedo, con relleno donde no mueve nada y
   con un pseudoelemento invisible donde el relleno descolocaría la fila (los
   puntos del carrusel de galardones y la flecha de volver del mapa). */
@media (max-width:880px){
  .hm-pila__puntos button,.mp-volver{position:relative}
  .hm-pila__puntos button::after,.mp-volver::after{content:"";position:absolute;
    left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%)}
  .hm-pila__puntos button::after{width:max(100%,22px)}
  .bl-art__volver a,.hm-diario__mas a,.hm-prensa__boton,.ct-casa a{
    min-height:40px;display:inline-flex;align-items:center}
  .bl-filtros button{padding-block:14px}
}
/* La ciudad debajo del logotipo, en un solo renglón: a 10,5 px «Fort
   Lauderdale · Florida» se partía y dejaba «· Florida» suelto. Se aprieta el
   aire entre letras, no el cuerpo. */
@media (max-width:619px){
  .mk-u__donde{white-space:nowrap;letter-spacing:.06em !important}
}

/* ══ Móvil · nada de zoom accidental ══
   · Doble toque: `manipulation` apaga el zoom por doble toque (y de paso el
     retraso de 300 ms del toque), pero DEJA el pellizco para ampliar, que es
     de quien lo necesita para leer. No se usa user-scalable=no por eso.
   · Formularios: iOS acerca la pantalla al tocar un campo con letra de menos
     de 16 px. Los campos iban a 15. En móvil pasan a 16; el escritorio no cambia. */
html{touch-action:manipulation}
a,button,input,textarea,select,label,[role="button"]{touch-action:manipulation}
@media (max-width:880px){
  input,textarea,select{font-size:16px !important}
}
/* El logotipo de la apertura, un 24 % más grande en el teléfono (Carlos,
   2026-09-23). Sobre el mismo cálculo de siempre, así que en 390 px pasa de
   28 a 34,7 px. El escritorio no cambia. */
@media (max-width:619px){
  .hm-marca-apertura .kb-logo{font-size:calc(max(28px,6vw) * 1.24)}
}

/* ══ Móvil · el botón fijo de contacto ══
   Abajo, siempre a mano desde que carga. En la portada la banda de cifras le
   deja sitio debajo. Se retira cuando el formulario de «Let's talk» ya
   está en pantalla, y no existe en la propia página de contacto. Sólo en móvil. */
.kb-fijo{display:none}
@media (max-width:880px){
  .kb-fijo{display:flex;position:fixed;z-index:35;left:28px;right:28px;
    bottom:calc(12px + env(safe-area-inset-bottom));height:50px;
    align-items:center;justify-content:center;gap:12px;text-decoration:none;
    background:var(--kb-casa);color:var(--kb-tarjeta);border-radius:var(--kb-radio-boton);
    font:500 13px/1 var(--kb-texto);letter-spacing:.2em;text-transform:uppercase;
    box-shadow:0 10px 28px -12px rgba(26,31,23,.55);
    transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;
    transition:transform .45s cubic-bezier(.23,1,.32,1),opacity .3s ease}
  .kb-fijo svg{width:15px;height:8px}
  .kb-fijo.visible{transform:none;opacity:1;pointer-events:auto}
  body.menu-abierto .kb-fijo{opacity:0;pointer-events:none}
  /* Que el botón no tape el final del pie. */
  body:has(.kb-fijo) .hm-pie{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.kb-fijo{transition:none}}

/* ══ Móvil · la escala, un punto arriba ══
   Carlos, 2026-09-23: en el teléfono, titulares +2 px y texto +1 px. Cada
   valor es el que medía antes en 390 px más lo pedido; se escriben a mano
   porque CSS no sabe sumar sobre un tamaño ya resuelto. Sólo móvil. */
@media (max-width:619px){
  .hm-titulo{font-size:24px}                                   /* 22 → 24 */
  .hm-presenta,.hm-hablemos__texto p,.hm-prensa__texto p,.pr-intro,
  .pr-golfo__texto p,.ct-redes__texto,.hm-parallax__pie,.pr-ultimo__p,
  .ns-golfo__dentro p:not(.ns-golfo__frase),.hm-sec .kb-caja > p:not([class]){font-size:16px}  /* 15 → 16 */
  .ns-abre__p{font-size:16.5px}                                /* 15,5 → 16,5 */
  .ns-abre__p--suelta,.bl-art__lead{font-size:20px}            /* 19 → 20 */
  .hm-patas__texto p,.hm-entrada:not(.hm-presenta),.bl-art__cuerpo > p{font-size:18px}  /* 17 → 18 */
  .hm-pila__texto p:not(.d),.hm-diario .p{font-size:15px}     /* 14 → 15 */
  .bl-card__p{font-size:15.5px}                                /* 14,5 → 15,5 */
  .ct-casa p,.mk-pista{font-size:14.5px}                       /* 13,5 → 14,5 */
  .ns-golfo__frase{font-size:19px !important}                  /* 18 → 19 */
}

/* ══ Los puntos de los carruseles de marcas ══
   Los mismos que los de galardones: redondos, y el activo estirado en
   píldora. En el crema van en tinta; en las bandas verdes, en crema. En el
   teléfono las flechas se esconden y los puntos quedan solos debajo. */
.hm-patas__mandos{align-items:center}
.hm-patas__puntos{display:flex;gap:7px;align-items:center;justify-content:center;
  margin:0 clamp(8px,1.2vw,16px)}
.hm-patas__puntos:empty{display:none}
.hm-patas__puntos button{position:relative;width:7px;height:7px;padding:0;border:0;
  border-radius:99px;cursor:pointer;background:rgba(35,42,32,.28);
  transition:width .38s cubic-bezier(.23,1,.32,1),background-color .38s cubic-bezier(.23,1,.32,1)}
.hm-patas__puntos button[aria-selected="true"]{width:24px;background:var(--kb-tinta)}
.hm-patas__puntos button::after{content:"";position:absolute;left:50%;top:50%;
  width:max(100%,22px);height:40px;transform:translate(-50%,-50%)}
.hm-patas__mandos .hm-patas__puntos button::before{display:none}
.hm-sec--oscura .hm-patas__puntos button,.hm-patas--hosp .hm-patas__puntos button{background:rgba(239,233,222,.42)}
.hm-sec--oscura .hm-patas__puntos button[aria-selected="true"],
.hm-patas--hosp .hm-patas__puntos button[aria-selected="true"]{background:var(--kb-fondo)}
/* Los estilos de flecha de .hm-patas__mandos button no deben tocar a los
   puntos: se les devuelve su forma. */
.hm-patas__mandos .hm-patas__puntos button{border:0;display:block}
.hm-sec--oscura .hm-patas__mandos .hm-patas__puntos button{border:0}
@media (max-width:620px){
  .hm-patas__mandos{display:flex}
  .hm-patas__mandos > button{display:none}
  .hm-patas__puntos{margin-top:4px}
}
@media (hover:hover) and (pointer:fine){
  .hm-patas__mandos .hm-patas__puntos button:not([disabled]):hover{background:rgba(35,42,32,.55)}
  .hm-sec--oscura .hm-patas__mandos .hm-patas__puntos button:not([disabled]):hover,
  .hm-patas--hosp .hm-patas__mandos .hm-patas__puntos button:not([disabled]):hover{background:rgba(239,233,222,.72)}
  .hm-patas__mandos .hm-patas__puntos button[aria-selected="true"]:hover{background:var(--kb-tinta)}
  .hm-sec--oscura .hm-patas__mandos .hm-patas__puntos button[aria-selected="true"]:hover,
  .hm-patas--hosp .hm-patas__mandos .hm-patas__puntos button[aria-selected="true"]:hover{background:var(--kb-fondo)}
}

/* ══ Las flechas de las bandas volteadas ══
   En la banda volteada los mandos van en `direction:rtl` para que las
   tarjetas salgan por la izquierda: el botón de «siguiente» queda a la
   izquierda y el de «anterior» a la derecha. Pero cada flecha conservaba su
   dibujo, así que la de la izquierda apuntaba a la derecha. Se invierte el
   dibujo: la flecha apunta siempre hacia donde se mueve el carril. */
.hm-patas--vuelta .hm-patas__mandos > button[data-paso="1"]::before{transform:rotate(-135deg) translate(-2px,2px)}
.hm-patas--vuelta .hm-patas__mandos > button[data-paso="-1"]::before{transform:rotate(45deg) translate(-2px,2px)}

/* ══ Móvil · la ficha de cada galardón ══
   Más margen por dentro (el texto iba casi pegado al canto), el párrafo
   centrado en vez de justificado (a esa anchura abría ríos: «digital
   transformation, marketing and») y el subtítulo repartido en renglones
   parejos. El «·» va atado a la palabra de delante desde la fuente, así que
   «· Bogotá» ya no puede quedarse solo en un renglón. */
@media (max-width:760px){
  .hm-pila__texto p:last-child{text-align:center !important;text-align-last:center !important}
  .hm-pila__texto .d,.hm-pila__texto h3{text-wrap:balance}
}

/* ══ Móvil · la tarjeta de galardones, con aire contra el borde ══
   Iba a 16 px del canto del teléfono y se veía pegada. Ahora 28 px por cada
   lado (la ranura y el relleno del carril se mueven juntos, o el encaje del
   scroll dejaría de cuadrar). Y sin sombra: en el teléfono la tarjeta crema
   sobre el verde ya se separa sola, y la sombra ensuciaba el borde. */
@media (max-width:760px){
  .hm-pila__carril{--lado:28px}
  .hm-pila__pieza{flex-basis:calc(100vw - 56px)}
  .hm-pila__foto{box-shadow:none}
}

/* ══ Móvil · el botón de enviar, al centro ══
   Con el texto centrado en toda la sección, el botón a la izquierda y el
   aviso debajo quedaban descolgados. En el teléfono los dos van al centro,
   uno encima del otro. */
@media (max-width:619px){
  .hm-hablemos__pie{flex-direction:column;align-items:center;justify-content:center;text-align:center}
}
/* Titulares del banner en el teléfono, 2 px más: 24 → 26 (Carlos, 2026-09-23). */
@media (max-width:619px){.kb-banner__rotulo .hm-titulo{font-size:26px}}

/* ══ «Who we are», sección normal ══
   Antes subía sobre el vídeo como una caja con esquinas redondas y se quedaba
   pegada una pantalla. Carlos pidió quitar el efecto: ahora es una sección
   más, en el verde de la casa, que empieza donde acaba el vuelo. El texto va
   en el blanco de tarjeta, que sobre este verde da 7,56 (AAA). */
.hm-quienes .hm-titulo,.hm-quienes .hm-presenta{color:var(--kb-tarjeta)}
.hm-quienes .hm-raya{background:rgba(247,243,234,.38)}
@media (max-width:619px){.hm-quienes p{text-align:center !important;text-align-last:center !important}}

/* ══ La galería de la portada ══
   Sustituye al parallax de «We open in Dubai». Seis fotos reales de las casas
   en mosaico, como la referencia de Carlos: una alta a la izquierda, dos
   apiladas, la grande en medio y otras dos apiladas a la derecha. Va dentro
   de la caja del sitio, con su margen, y con un hueco fino entre fotos.
   En el teléfono se recoloca en dos columnas: la grande arriba a lo ancho, la
   alta con dos al lado y las dos últimas en fila. No es una colección de
   tarjetas sino una sola pieza, por eso no va en carrusel. */
.hm-galeria{background:var(--kb-fondo);padding-block:clamp(40px,6vw,84px) 0}
.gl-reja{display:grid;gap:clamp(6px,.8vw,12px);
  grid-template-columns:1fr 1fr 1.7fr 1fr;grid-template-rows:1fr 1fr;
  height:clamp(420px,40vw,600px)}
.gl-reja figure{margin:0;overflow:hidden;border-radius:clamp(6px,.7vw,10px);background:var(--kb-piedra)}
.gl-reja img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.23,1,.32,1)}
.gl-corte{grid-column:1;grid-row:1 / 3}
.gl-plato{grid-column:2;grid-row:1}
.gl-coctel{grid-column:2;grid-row:2}
.gl-barra{grid-column:3;grid-row:1 / 3}
.gl-sala{grid-column:4;grid-row:1}
.gl-cordero{grid-column:4;grid-row:2}
.gl-corte img{object-position:50% 30%}   /* el mar y el Arco; el archivo va recortado arriba del montaje que trae el original */
@media (hover:hover) and (pointer:fine){
  .gl-reja figure:hover img{transform:scale(1.04)}
}
@media (max-width:759px){
  .gl-reja{height:auto;grid-template-columns:1fr 1fr;
    grid-template-rows:auto;grid-auto-rows:auto}
  .gl-barra{grid-column:1 / 3;grid-row:1;aspect-ratio:16/10}
  .gl-corte{grid-column:1;grid-row:2 / 4;aspect-ratio:auto}
  .gl-plato{grid-column:2;grid-row:2;aspect-ratio:1}
  .gl-coctel{grid-column:2;grid-row:3;aspect-ratio:1}
  .gl-sala{grid-column:1;grid-row:4;aspect-ratio:1}
  .gl-cordero{grid-column:2;grid-row:4;aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){.gl-reja img{transition:none}}

/* ══ Marcas por país ══
   La lista de Carlos va agrupada por país. Cada grupo es su banda, alternando
   crema y verde. En escritorio la rejilla es de cuatro y, si la última fila no
   se llena, se CENTRA en vez de quedarse coja a la izquierda. En el teléfono
   cada grupo es un carrusel, como toda colección de tarjetas de la casa. */
.mk-abre{padding-bottom:0}
@media (min-width:760px){
  .mk-reja--pais{display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(26px,3vw,44px) clamp(12px,1.6vw,22px)}
  .mk-reja--pais .hm-u{flex:0 0 calc((100% - clamp(12px,1.6vw,22px)) / 2)}
}
@media (min-width:1040px){
  .mk-reja--pais .hm-u{flex:0 0 calc((100% - 3 * clamp(12px,1.6vw,22px)) / 4)}
}

/* El hueco gris de las marcas sin foto real todavía. */
.hm-u__foto--hueco{display:block;background:#CFCDC8;border-radius:12px 12px 0 0;
  aspect-ratio:320/440}
.hm-sec--oscura .hm-u__foto--hueco{background:rgba(239,233,222,.16)}
@media (min-width:760px){.mk-reja .hm-u__foto--hueco{aspect-ratio:auto;height:100%}}

/* La marca sin logotipo: su nombre, en la romana de los titulares. No se
   dibuja un logotipo a mano: cuando llegue el suyo, entra en su lugar. */
.mk-u__nombre{font-family:var(--kb-logo);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:17px;line-height:1.1;color:var(--kb-tinta);text-align:center}
.hm-sec--oscura .mk-u__nombre{color:var(--kb-tarjeta)}

/* España y Aruba: una marca cada una, juntas en una banda con dos columnas. */
.mk-par__reja{display:grid;gap:clamp(40px,5vw,72px) clamp(20px,4vw,60px)}
@media (min-width:760px){.mk-par__reja{grid-template-columns:1fr 1fr}}
.mk-reja--una{display:flex;justify-content:center;overflow:visible}
.mk-reja--una .hm-u{flex:0 0 min(100%,300px)}
@media (min-width:760px){.mk-reja--una .hm-u{flex:0 0 min(100%,300px)}}
/* La galería vive dentro de «Who we are», sobre su verde, justo bajo el texto. */
.hm-quienes .gl-reja{margin-top:clamp(36px,4.4vw,60px)}
.hm-quienes .gl-reja figure{background:rgba(239,233,222,.12)}

/* ══ Brands · tarjeta cuadrada con el logotipo encima ══
   Carlos, 2026-09-23: 1:1, el logotipo al centro de la foto y la foto en
   blanco y negro y clarita, SIEMPRE: al pasar por encima no se pone a color,
   sólo se acerca. La foto se aclara con un velo crema encima (no bajando el
   contraste de la foto, que la ensucia), y el logotipo va en tinta sobre él. */
.mk-reja .hm-u{aspect-ratio:1/1 !important}
.mk-reja .hm-u figure{position:relative;height:100%;display:block;
  border-radius:12px;overflow:hidden}
.mk-reja .hm-u__foto{position:absolute !important;inset:0;height:100%;aspect-ratio:auto !important;
  border-radius:0 !important}
.mk-reja .hm-u__foto img{-webkit-mask:none !important;mask:none !important;border-radius:0;
  filter:grayscale(1) contrast(.9) !important;
  transition:transform .8s cubic-bezier(.23,1,.32,1) !important}
.mk-reja .hm-u__foto::after{content:"";position:absolute;inset:0;
  background:rgba(247,243,234,.76);pointer-events:none}   /* .62 → .76: algún logotipo se perdía (Carlos) */
.mk-reja .hm-u:hover .hm-u__foto img,
.mk-reja .hm-u:focus-within .hm-u__foto img{filter:grayscale(1) contrast(.9) !important}
@media (hover:hover) and (pointer:fine){
  .mk-reja .hm-u:hover .hm-u__foto img{transform:scale(1.06)}
}
@media (hover:none){.mk-reja .hm-u__foto img{filter:grayscale(1) contrast(.9) !important}}
.mk-reja .hm-u figcaption{position:absolute !important;inset:0;margin:0 !important;
  min-height:0;display:grid;place-content:center;justify-items:center;gap:10px;
  padding:16px;z-index:2}
/* El logotipo, en tinta sobre el velo claro, también en las bandas verdes. */
.mk-reja .hm-u figcaption img{filter:brightness(0) saturate(100%) invert(12%) sepia(9%) saturate(1100%) hue-rotate(60deg) brightness(95%) !important;
  opacity:1 !important}
.mk-reja .hm-u figcaption img.hm-u--color{filter:none !important}
.mk-reja .mk-u__donde{color:var(--kb-tinta) !important}
.mk-reja .mk-u__nombre{color:var(--kb-tinta) !important}
/* El hueco gris llena el cuadrado, con el nombre o el logotipo encima. */
.mk-reja .hm-u__foto--hueco{background:#D9D6CF !important}
.mk-reja .hm-u__foto--hueco::after{display:none}
@media (max-width:759px){.mk-reja .hm-u{flex:0 0 min(78%,300px)}}
.mk-reja .mk-u--oscuro .hm-u__foto--hueco{background:var(--kb-tinta) !important}
.mk-reja .mk-u--oscuro .mk-u__donde{color:var(--kb-tarjeta) !important}
/* Tarjetas sin foto en los carruseles de portada y «Sobre nosotros». */
.hm-u .hm-u__foto--hueco{-webkit-mask:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.62) 88%,transparent 100%);
          mask:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.62) 88%,transparent 100%)}
.hm-u.mk-u--oscuro .hm-u__foto--hueco{background:var(--kb-tinta)}
.hm-sec--oscura .hm-u.mk-u--oscuro .hm-u__foto--hueco,.hm-patas--hosp .hm-u.mk-u--oscuro .hm-u__foto--hueco{background:rgba(0,0,0,.28)}
/* Con 26 marcas los puntos no caben en una fila del teléfono y ensanchaban la
   página: pasan a dos renglones. */
.hm-patas__mandos{max-width:100%}
.hm-patas__puntos{flex-wrap:wrap;row-gap:10px;max-width:100%}
/* En Brands la tarjeta es cuadrada y sin desvanecido: el hueco va entero. */
.mk-reja .hm-u .hm-u__foto--hueco{-webkit-mask:none;mask:none}
/* Logotipo de una tinta con partes blancas o caladas (Shore Break, The Grill
   Hut, Goombites, Tropical Breeze): el filtro a tinta los rellenaría enteros.
   Sobre claro van tal cual; sobre el verde se invierten a blanco. */
.hm-u figcaption img.hm-u--bn,.mk-reja .hm-u figcaption img.hm-u--bn{filter:none !important}
.hm-sec--oscura .hm-u:not(.mk-u) figcaption img.hm-u--bn,
.hm-patas--hosp .hm-u figcaption img.hm-u--bn{filter:invert(1) !important}
/* Hoteles: tarjetas anchas, de dos columnas cada una, en filas de 2 · 2 · 1
   (la última centrada). Misma altura que las cuadradas: proporción 2:1. */
/* Ahora en filas de 3 · 2 (Carlos): tres por fila, apaisadas, y las dos
   últimas centradas. */
@media (min-width:760px){
  .mk-reja--ancha .hm-u{flex:0 0 calc((100% - clamp(12px,1.6vw,22px)) / 2) !important;
    aspect-ratio:3/2 !important}
}
@media (min-width:1040px){
  .mk-reja--ancha .hm-u{flex:0 0 calc((100% - 2 * clamp(12px,1.6vw,22px)) / 3) !important;
    aspect-ratio:3/2 !important}
}
/* España y Aruba: cada tarjeta ocupa las dos columnas de su mitad (Carlos),
   apaisada, como las de hoteles. */
@media (min-width:760px){
  .mk-reja--una .hm-u{flex:0 0 100% !important;aspect-ratio:2/1 !important}
}

/* ══ «As seen in» · la prensa en la portada ══
   Sustituye al muro de logotipos (que sigue, entero, en la página de prensa).
   Cinco notas reales con la foto que publicó cada medio, en blanco y negro
   bajo un velo verde, el logotipo del medio encima en crema, y debajo el
   titular en la romana y el medio. En el teléfono, carrusel. */
.hm-notas__reja{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:clamp(14px,1.8vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hm-notas__reja::-webkit-scrollbar{display:none}
.hm-nota{flex:0 0 min(76%,300px);scroll-snap-align:start}
@media (min-width:980px){
  .hm-notas__reja{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
  .hm-nota{flex:none}
}
.hm-nota a{display:grid;gap:12px;align-content:start;text-decoration:none;color:var(--kb-tarjeta);text-align:center}
.hm-nota__foto{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:10px;background:rgba(0,0,0,.2)}
.hm-nota__foto img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);
  transition:transform .8s cubic-bezier(.23,1,.32,1)}
.hm-nota__foto::after{content:"";position:absolute;inset:0;background:rgba(35,42,32,.62)}
.hm-nota__logo{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);
  --k:1.05;background:var(--kb-tarjeta);opacity:1}
.hm-nota__t{font-family:var(--kb-logo);font-weight:500;font-size:clamp(17px,1.45vw,19px);line-height:1.25;text-wrap:balance;margin-top:4px}
.hm-nota__m{font:500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,243,234,.72)}
@media (hover:hover) and (pointer:fine){
  .hm-nota a:hover .hm-nota__foto img{transform:scale(1.06)}
}
.hm-notas__mas{text-align:center;margin:clamp(30px,3.6vw,48px) 0 0}
.hm-notas__boton{display:inline-flex;align-items:center;justify-content:center;min-width:min(100%,320px);min-height:48px;
  padding:0 28px;border:1px solid rgba(247,243,234,.7);border-radius:var(--kb-radio-boton);text-decoration:none;
  font:500 12px/1 var(--kb-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--kb-tarjeta);
  transition:background-color .3s ease,color .3s ease}
@media (hover:hover) and (pointer:fine){.hm-notas__boton:hover{background:var(--kb-tarjeta);color:var(--kb-casa)}}
@media (max-width:619px){.hm-nota__m{font-size:10.5px}}
/* Puntos del carrusel de prensa: sólo en móvil, en crema sobre el verde. */
.hm-notas__puntos{margin-top:18px}
.hm-notas__puntos button{background:rgba(239,233,222,.42)}
.hm-notas__puntos button[aria-selected="true"]{background:var(--kb-fondo)}
@media (min-width:980px){.hm-notas__puntos{display:none}}
/* La apertura de la portada: foto REAL de Dubái (banco de imágenes, con
   licencia) a pantalla completa, con el logotipo encima. Sustituye al vuelo
   generado; los fotogramas quedan en _archivo/video-vuelo-generado. */
.hm-hero{height:100vh;height:100dvh}
.hm-hero .kb-banner__velo{background:linear-gradient(180deg,rgba(26,31,23,.30) 0%,rgba(26,31,23,.42) 50%,rgba(26,31,23,.30) 100%)}
/* Sombras del hero al 50 % (Carlos, 2026-09-23): velo general y viñeta del
   logotipo, la mitad de lo que eran. */
.hm-hero .kb-banner__velo{background:linear-gradient(180deg,rgba(26,31,23,.15) 0%,rgba(26,31,23,.21) 50%,rgba(26,31,23,.15) 100%)}
.hm-hero .hm-marca-apertura::before{background:radial-gradient(ellipse 64% 48% at 50% 47%,
    rgba(26,31,23,.34) 0%, rgba(26,31,23,.24) 44%, rgba(26,31,23,0) 80%)}

/* ══ Restaurantes de la portada: texto arriba, carrusel cuadrado abajo ══
   Carlos, 2026-09-23: uno debajo del otro, y el carrusel con las tarjetas de
   la página de marcas (1:1, logotipo al centro sobre la foto en blanco y
   negro aclarada, que nunca se pone a color; al pasar, sólo se acerca). */
.hm-patas--cuadro .hm-patas__reja{grid-template-columns:minmax(0,1fr) !important;gap:clamp(30px,3.6vw,48px)}
.hm-patas--cuadro .hm-patas__texto{max-width:780px;margin-inline:auto;width:100%}
.hm-patas--cuadro .hm-patas__lado{order:0}
/* La pista mide max-content, así que el ancho de la tarjeta se toma del
   carril con unidades de contenedor, no con %. */
.hm-patas--cuadro .hm-patas__carril{container-type:inline-size}
.hm-patas--cuadro .hm-u{flex:0 0 calc((100cqw - 3 * clamp(12px,1.4vw,18px)) / 4);aspect-ratio:1/1}
@media (max-width:979px){.hm-patas--cuadro .hm-u{flex-basis:calc((100cqw - clamp(12px,1.4vw,18px)) / 2)}}
@media (max-width:619px){.hm-patas--cuadro .hm-u{flex-basis:78cqw}}
.hm-patas--cuadro .hm-u figure{position:relative;height:100%;display:block;border-radius:12px;overflow:hidden}
.hm-patas--cuadro .hm-u__foto{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.hm-patas--cuadro .hm-u__foto img{-webkit-mask:none;mask:none;border-radius:0;
  filter:grayscale(1) contrast(.9);transition:transform .8s cubic-bezier(.23,1,.32,1)}
.hm-patas--cuadro .hm-u__foto::after{content:"";position:absolute;inset:0;background:rgba(247,243,234,.76)}
.hm-patas--cuadro .hm-u__foto--hueco{background:#D9D6CF;-webkit-mask:none;mask:none}
.hm-patas--cuadro .hm-u__foto--hueco::after{display:none}
@media (hover:hover) and (pointer:fine){.hm-patas--cuadro .hm-u:hover .hm-u__foto img{transform:scale(1.06)}}
.hm-patas--cuadro .hm-u figcaption{position:absolute;inset:0;margin:0;min-height:0;z-index:2;
  display:grid;place-content:center;justify-items:center;padding:16px}
.hm-patas--cuadro .hm-u figcaption img.hm-u--bn{filter:none}
/* Hoteles de la portada, mismo formato que Restaurantes pero sobre la tinta:
   texto en crema y tarjetas cuadradas con el logotipo en tinta sobre el velo
   claro. Ya no va volteada. */
.hm-patas--hosp.hm-patas--cuadro .hm-patas__carril{direction:ltr}
.hm-patas--hosp.hm-patas--cuadro .hm-u figcaption img{filter:brightness(0) saturate(100%) invert(12%) sepia(9%) saturate(1100%) hue-rotate(60deg) brightness(95%);opacity:1}
.hm-patas--hosp.hm-patas--cuadro .hm-u figcaption img.hm-u--bn,
.hm-patas--hosp.hm-patas--cuadro .hm-u figcaption img.hm-u--color{filter:none}
.hm-patas--hosp.hm-patas--cuadro .hm-patas__texto p{color:rgba(239,233,222,.86)}

/* ══ Destinos (portada) ══
   Sustituye al mapa interactivo (2026-09-23; elegido en la maqueta /_prueba-mapa/,
   propuesta B, variante 2). Lista de países a la izquierda; a la derecha, la foto
   del destino con su país encima. Las ciudades se abren bajo el país elegido.
   Lista y foto miden lo mismo: la foto empieza en la primera raya y acaba en la última.
   En móvil nunca apiladas: carrusel con imán y la vecina asomando. */
.hm-destinos{--ds-linea:rgba(239,233,222,.28)}
.ds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.ds__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--ds-linea)}
.ds__fila{border-bottom:1px solid var(--ds-linea)}
.ds__fila button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;
  grid-template-columns:1fr auto;align-items:baseline;gap:12px;padding:22px 4px;color:var(--kb-fondo)}
.ds__fila button:focus-visible{outline:1px solid var(--kb-fondo);outline-offset:4px}
.ds__nombre{font-family:var(--kb-logo);font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(18px,1.9vw,26px);line-height:1.2;white-space:nowrap;opacity:.62;
  transition:transform .45s cubic-bezier(.23,1,.32,1),opacity .3s ease}
.ds__cuenta{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.72;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.ds__fila.activa .ds__nombre{opacity:1;transform:translateX(12px)}
.ds__fila.activa button{padding-bottom:12px}
.ds__ciudades{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.23,1,.32,1)}
.ds__ciudades > div{overflow:hidden}
.ds__fila.activa .ds__ciudades{grid-template-rows:1fr}
/* Las ciudades, en una tarjeta y separadas por comas (Carlos, 2026-09-24): en
   versalitas sueltas parecían un directorio. Ahora se leen como una frase, con
   las líneas equilibradas para que ninguna ciudad se quede sola al final. */
.ds__ciudades ul{list-style:none;margin:0 4px 22px 16px;padding:14px 18px;
  background:rgba(239,233,222,.07);border:1px solid rgba(239,233,222,.18);border-radius:3px;
  font-size:14.5px;line-height:1.6;color:rgba(239,233,222,.9);text-wrap:balance}
.ds__ciudades li{display:inline;white-space:nowrap}
.ds__ciudades li:not(:last-child)::after{content:", ";white-space:normal}
.ds__visor{position:relative;display:grid;min-width:0}
.ds__foto{position:relative;overflow:hidden;border-radius:3px;background:#39432F}
.ds__visor .ds__foto{grid-area:1 / 1;height:100%}
.ds__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);
  transition:opacity .7s cubic-bezier(.23,1,.32,1),transform 1.4s cubic-bezier(.23,1,.32,1)}
.ds__foto img.activa{opacity:1;transform:none}
.ds__foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,31,23,0) 55%,rgba(26,31,23,.72) 100%)}
.ds__pie{position:relative;z-index:2;padding:clamp(24px,3.2vw,40px);color:#fff}
.ds__visor .ds__pie{grid-area:1 / 1;align-self:end;opacity:0;transition:opacity .45s ease}
.ds__visor .ds__pie.activa{opacity:1}
.ds__pie .cifra{display:block;white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:12px;font-variant-numeric:lining-nums tabular-nums}
/* El país SIEMPRE en una línea (Carlos). El cuerpo se calcula con el ancho de la
   foto y el número de letras (--ch, lo escribe destinos.py): los nombres cortos
   se quedan en su tamaño y los largos, como Emiratos, bajan lo justo para caber. */
.ds__visor,.ds-tarjeta{container-type:inline-size}
.ds__pie h3{font-family:var(--kb-logo);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  font-size:min(clamp(26px,2.8vw,38px),calc((100cqi - 2 * clamp(24px,3.2vw,40px)) / (var(--ch,10) * .86)));
  white-space:nowrap;line-height:1.1;margin:0;color:#fff}
/* Los nombres largos (Estados Unidos, Emiratos…) cierran el aire entre letras
   para no quedarse diminutos al lado de los cortos. Medido: con .16em cada
   letra ocupa .74–.84 em; con .1em, unas .69. */
.ds__pie h3.largo{letter-spacing:.1em;
  font-size:min(clamp(26px,2.8vw,38px),calc((100cqi - 2 * clamp(24px,3.2vw,40px)) / (var(--ch,10) * .71)))}
.ds-movil{display:none}
@media (max-width:860px){
  .ds{display:none}
  .ds-movil{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-inline:28px;scroll-padding-inline:28px;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .ds-movil::-webkit-scrollbar{display:none}
  .ds-tarjeta{position:relative;display:grid;scroll-snap-align:start;min-width:0}
  .ds-tarjeta > *{grid-area:1 / 1}
  .ds-tarjeta .ds__foto{aspect-ratio:4/5}
  .ds-tarjeta .ds__foto img{opacity:1;transform:none}
  .ds-tarjeta .ds__foto::after{background:linear-gradient(180deg,rgba(26,31,23,.1) 0%,rgba(26,31,23,.6) 38%,rgba(26,31,23,.92) 100%)}
  .ds-tarjeta .ds__pie{align-self:end;padding:24px}
  .ds-tarjeta .ds__pie .cifra{letter-spacing:.12em}
  .ds-tarjeta .ds__pie h3{font-size:min(24px,calc((100cqi - 48px) / (var(--ch,10) * .86)))}
  .ds-tarjeta .ds__pie h3.largo{font-size:min(24px,calc((100cqi - 48px) / (var(--ch,10) * .71)))}
  .ds-tarjeta .ds__pie ul{list-style:none;margin:14px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px;font-size:11px;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;line-height:1.65;color:rgba(255,255,255,.9)}
}
@media (prefers-reduced-motion:reduce){
  .ds__nombre,.ds__foto img,.ds__ciudades,.ds__visor .ds__pie{transition:none}
}

/* ══ Cifras del hero ══
   Fijas al pie de la foto, en una barra de cristal fina (Carlos, 2026-09-24).
   El cristal lleva un tinte verde tinta: sobre el agua turquesa del lago el blanco
   solo, sin tinte, se lavaba. Cifra en la sans fina; rótulo en versalitas. */
.hm-hcifras{position:absolute;z-index:4;left:0;right:0;bottom:0;margin:0;
  /* A todo lo ancho y pegada al pie del hero (Carlos, 2026-09-24); las cifras
     por dentro se reparten en el ancho de la caja del sitio. */
  padding-inline:max(clamp(28px,4vw,48px),calc((100% - var(--kb-ancho)) / 2 + 48px));
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:rgba(26,31,23,.30);border-top:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.hm-hcifras > div{display:flex;flex-direction:column-reverse;align-items:center;gap:8px;
  padding:clamp(16px,2.2vh,24px) 10px;text-align:center;color:#fff}
.hm-hcifras > div + div{border-left:1px solid rgba(255,255,255,.18)}
.hm-hcifras dd{margin:0;font-family:var(--kb-texto);font-weight:300;line-height:1;
  font-size:clamp(28px,3vw,42px);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.hm-hcifras dt{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.84);white-space:nowrap}
/* Móvil: 3 arriba y 2 abajo a lo ancho, compacta, y por encima del botón fijo
   «Contact us» (que ocupa el pie de la pantalla). */
@media (max-width:700px){
  /* El cristal llega al borde; las cifras se quedan por encima del botón fijo. */
  .hm-hcifras{grid-template-columns:repeat(6,minmax(0,1fr));padding-inline:0;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .hm-hcifras > div{grid-column:span 2;padding:11px 4px;gap:6px}
  .hm-hcifras > div:nth-child(n+4){grid-column:span 3;border-top:1px solid rgba(255,255,255,.18)}
  .hm-hcifras > div:nth-child(4){border-left:0}
  .hm-hcifras dt{font-size:10.5px;letter-spacing:.12em}
  .hm-hcifras dd{font-size:24px}
}


/* ══ Banner de Dubái, bajo los destinos ══
   50/50 (Carlos, 2026-09-24): a la izquierda crema claro con el texto en tinta;
   a la derecha la torre del Mandarin Oriental de piso a techo (recorte vertical
   de la panorámica, 900×1184, torre centrada). En móvil: foto arriba, texto abajo. */
/* Nunca más de 650 px de alto (Carlos, 2026-09-24). */
.hm-dubai{display:grid;grid-template-columns:1fr min(50%,780px);height:min(88svh,650px);  /* la foto no pasa de 780 px de ancho: más ancha y con 650 de alto, se cortaba la base */
  background:var(--kb-fondo);color:var(--kb-tinta)}
.hm-dubai__texto{grid-column:1;grid-row:1;align-self:center;
  padding:clamp(48px,8vw,96px) clamp(28px,5vw,80px) clamp(48px,8vw,96px) max(clamp(28px,4vw,48px),calc((100vw - var(--kb-ancho)) / 2 + 48px))}
.hm-dubai__foto{grid-column:2;grid-row:1;width:100%;height:100%;object-fit:cover;object-position:65% 45%;display:block}
.hm-dubai__rotulo{display:block;font-size:clamp(15px,1.3vw,18px);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--kb-acento);margin-bottom:18px}
.hm-dubai__titulo{font-family:var(--kb-logo);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(40px,5.2vw,76px);line-height:1;margin:0 0 20px;color:var(--kb-tinta)}
.hm-dubai p{margin:0;max-width:30ch;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--kb-peltre)}
@media (max-width:700px){
  .hm-dubai{grid-template-columns:1fr;height:auto}
  .hm-dubai__foto{max-height:400px;aspect-ratio:1236/1030}
  .hm-dubai__foto{grid-column:1;grid-row:1;aspect-ratio:4/5;height:auto}
  .hm-dubai__texto{grid-column:1;grid-row:2;padding:40px 28px 48px}
}

/* ══ Aviso de cookies ══
   Tarjeta fija abajo a la izquierda, crema sobre la página, tinta encima.
   En móvil ocupa el ancho con 16 px de aire y sube por encima del botón fijo. */
/* Al centro de la pantalla (Carlos, 2026-09-24), con un velo suave detrás. */
.kb-ck{position:fixed;z-index:60;left:50%;top:50%;translate:-50% -50%;
  width:min(480px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow-y:auto;background:var(--kb-tarjeta);color:var(--kb-tinta);
  border:1px solid var(--kb-piedra);border-radius:4px;padding:22px 22px 18px;
  box-shadow:0 18px 50px rgba(26,31,23,.18);font-size:14px;line-height:1.55;
  animation:kb-ck-entra .5s cubic-bezier(.23,1,.32,1)}
.kb-ck[hidden]{display:none}
@keyframes kb-ck-entra{from{opacity:0;transform:scale(.96)}}
.kb-ck-velo{position:fixed;inset:0;z-index:59;background:rgba(26,31,23,.38);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:kb-ck-velo .4s ease}
@keyframes kb-ck-velo{from{opacity:0}}
.kb-ck__txt{margin:0 0 16px;color:var(--kb-peltre)}
.kb-ck__tit{display:block;font-family:var(--kb-logo);font-weight:600;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:8px}
.kb-ck__prefs{margin:0 0 16px;border-top:1px solid var(--kb-piedra);padding-top:14px}
.kb-ck__prefs[hidden]{display:none}
.kb-ck__op{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--kb-piedra);cursor:pointer}
.kb-ck__op b{display:block;font-weight:600;font-size:13.5px}
.kb-ck__op small{display:block;color:var(--kb-peltre);font-size:12.5px;line-height:1.45}
.kb-ck__op input{position:absolute;opacity:0;pointer-events:none}
.kb-ck__op i{position:relative;width:38px;height:22px;border-radius:11px;background:var(--kb-piedra);
  transition:background .25s ease}
.kb-ck__op i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.kb-ck__op input:checked + i{background:var(--kb-casa)}
.kb-ck__op input:checked + i::after{transform:translateX(16px)}
.kb-ck__op input:disabled + i{opacity:.55}
.kb-ck__op input:focus-visible + i{outline:1px solid var(--kb-casa);outline-offset:2px}
.kb-ck__botones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.kb-ck__b{all:unset;box-sizing:border-box;cursor:pointer;min-height:40px;padding:10px 16px;border-radius:2px;
  background:var(--kb-casa);color:var(--kb-fondo);border:1px solid var(--kb-casa);
  font-family:var(--kb-logo);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease}
.kb-ck__b:hover{background:var(--kb-casa-2)}
.kb-ck__b--linea{background:transparent;color:var(--kb-casa)}
.kb-ck__b--linea:hover{background:var(--kb-casa);color:var(--kb-fondo)}
.kb-ck__b[hidden]{display:none}
.kb-ck__b:focus-visible{outline:1px solid var(--kb-casa);outline-offset:3px}
@media (max-width:700px){
  .kb-ck__botones{justify-content:stretch}
  .kb-ck__b{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){.kb-ck,.kb-ck-velo{animation:none}.kb-ck__op i,.kb-ck__op i::after{transition:none}}

/* ══ Galería de «Who we are»: mosaico con nombre (2026-09-24) ══
   6 fotos, mitad restaurantes y mitad hoteles, SIN nombres. Sustituye a .gl-reja. */
.gl-mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,220px);gap:12px;
  margin-top:clamp(28px,4vw,48px)}
.gl-mosaico figure{position:relative;margin:0;overflow:hidden;border-radius:6px;background:var(--kb-piedra)}
.gl-mosaico img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.23,1,.32,1)}
@media (hover:hover){.gl-mosaico figure:hover img{transform:scale(1.05)}}
.gl-mosaico .alta{grid-row:span 2}.gl-mosaico .ancha{grid-column:span 2}.gl-mosaico .grande{grid-column:span 2;grid-row:span 2}
.gl-mosaico figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff;
  padding-top:48px;background:linear-gradient(180deg,rgba(26,31,23,0),rgba(26,31,23,.55) 45%,rgba(26,31,23,.85))}
.gl-mosaico figcaption b{display:block;font-family:var(--kb-logo);font-weight:500;font-size:clamp(18px,1.6vw,22px);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.1}
.gl-mosaico figcaption span{display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
@media (max-width:760px){.gl-mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:10px}
  .gl-mosaico figcaption{padding:14px}.gl-mosaico figcaption b{font-size:16px}}
@media (prefers-reduced-motion:reduce){.gl-mosaico img{transition:none}}

/* ══ Brands: sólo los cuadros (dirección, 2026-09-24) ══
   Sin foto de fondo y sin ubicación: cada marca es un cuadro liso con su logotipo. */
.mk-reja .hm-u__foto img{display:none !important}
.mk-reja .hm-u__foto,.mk-reja .hm-u__foto--hueco{background:var(--kb-tarjeta) !important;border:1px solid var(--kb-piedra)}
.mk-reja .hm-u__foto::after{display:none !important}
.hm-sec--oscura .mk-reja .hm-u__foto,.hm-sec--oscura .mk-reja .hm-u__foto--hueco{border-color:transparent}
.mk-reja .mk-u__donde{display:none !important}
.mk-reja .mk-u--oscuro .hm-u__foto--hueco{background:var(--kb-tinta) !important}

/* ══ Galardones: sin fotos, sólo el logotipo de cada premio (dirección, 2026-09-24) ══ */
.hm-pila__pieza.hm-pila__foto{background:var(--kb-tarjeta)}
.hm-pila__pieza img.hm-pila__logo{object-fit:contain !important;padding:clamp(40px,6vw,90px) !important;
  background:var(--kb-tarjeta);filter:none !important;transform:none !important}
.hm-pila__pieza img.hm-pila__logo{box-sizing:border-box;min-height:0;min-width:0;max-height:100%}
@media (min-width:821px){.hm-pila__pieza.hm-pila__foto{grid-template-rows:minmax(0,1fr)}
  .hm-pila__pieza img.hm-pila__logo{padding:clamp(60px,7vw,110px) !important}}
@media (max-width:820px){.hm-pila__pieza img.hm-pila__logo{height:190px;padding:36px !important}}
/* Logos de premios limpios (sin el corchete decorativo): tamaño contenido */
@media (min-width:821px){.hm-pila__pieza img.hm-pila__logo{padding:clamp(80px,9vw,130px) clamp(60px,7vw,110px) !important}}
/* Logos de premios: todos con la MISMA superficie (--lw/--lh, calculados en la
   fuente) y centrados en su mitad; nada de estirarse a la caja. */
.hm-pila__pieza img.hm-pila__logo{width:var(--lw) !important;height:var(--lh) !important;padding:0 !important;
  object-fit:contain !important;place-self:center;background:none}
@media (max-width:820px){.hm-pila__pieza img.hm-pila__logo{height:var(--lh) !important;margin:36px auto 0;
  width:min(var(--lw),80%) !important}}

/* ══ Tarjeta de galardón SIN foto (2026-09-24) ══
   Sin la foto, la mitad izquierda de 1,42 fr sobraba: el logo flotaba en un
   hueco y el texto quedaba pegado a la derecha. Ahora: dos columnas medidas
   (logo 2/5 · texto 3/5), un filete vertical entre ellas, el mismo relleno en
   los cuatro lados y en las dos columnas, y todas las tarjetas a la misma altura. */
.hm-pila__pista{align-items:stretch}
.hm-pila__pieza.hm-pila__foto:has(.hm-pila__logo){--ag:clamp(40px,5vw,72px);
  height:auto;min-height:340px;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto;
  padding:var(--ag);gap:0}
.hm-pila__pieza.hm-pila__foto:has(.hm-pila__logo) img.hm-pila__logo{grid-area:1/1;place-self:center;
  margin-right:var(--ag)}
.hm-pila__pieza.hm-pila__foto:has(.hm-pila__logo) .hm-pila__texto{grid-area:1/2;align-self:center;
  padding:0 0 0 var(--ag);border-left:1px solid var(--kb-piedra);min-height:100%;
  display:flex;flex-direction:column;justify-content:center}
@media (max-width:820px){
  .hm-pila__pieza.hm-pila__foto:has(.hm-pila__logo){--ag:28px;grid-template-columns:1fr;grid-template-rows:auto auto;
    align-content:center}
  .hm-pila__pieza.hm-pila__foto:has(.hm-pila__logo) img.hm-pila__logo{grid-area:1/1;margin:8px auto var(--ag) !important}
  .hm-pila__pieza.hm-pila__foto:has(.hm-pila__logo) .hm-pila__texto{grid-area:2/1;border-left:0;
    border-top:1px solid var(--kb-piedra);padding:var(--ag) 0 0;min-height:0}
}


/* ══ About us nuevo (pasado de la maqueta _prueba-nosotros, 2026-09-24) ══ */

.nsq{display:grid;grid-template-columns:1fr min(50%,780px);grid-template-rows:minmax(0,1fr);overflow:hidden;height:min(88svh,650px);background:var(--kb-fondo);color:var(--kb-tinta)}
.nsq__texto{align-self:center;padding:clamp(48px,7vw,88px) clamp(28px,5vw,80px) clamp(48px,7vw,88px) max(clamp(28px,4vw,48px),calc((100vw - var(--kb-ancho)) / 2 + 48px))}
.nsq__rotulo{display:block;font-size:clamp(14px,1.2vw,16px);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--kb-acento);margin-bottom:16px}
.nsq__titulo{font-family:var(--kb-logo);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(26px,2.6vw,40px);line-height:1.1;margin:0 0 22px}
.nsq__texto p{margin:0 0 14px;max-width:46ch;text-align:justify;hyphens:manual;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--kb-peltre)}
.nsq__foto{width:100%;height:100%;object-fit:cover;display:block}
/* Fondo: foto REAL de Dubái de noche (banco, ya pagada), desenfocada y bajo velo tinta. */
.nsc{position:relative;overflow:hidden;background:var(--kb-tinta);color:var(--kb-fondo);padding-block:clamp(52px,7vw,96px)}
.nsc__fondo{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(6px);z-index:0}
.nsc::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(26,31,23,.62)}
.nsc .kb-caja{position:relative;z-index:2}
.nsc__reja{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid rgba(239,233,222,.24)}
.nsc__reja li{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,34px) 8px;text-align:center;
  border-bottom:1px solid rgba(239,233,222,.24)}
.nsc__reja li:not(:nth-child(5n+1)){border-left:1px solid rgba(239,233,222,.24)}
.nsc__reja b{font-family:var(--kb-texto);font-weight:300;font-size:clamp(34px,3.6vw,54px);line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.nsc__reja span{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,233,222,.8)}
@media (max-width:700px){
  .nsq{grid-template-columns:1fr;height:auto}
  .nsq__foto{grid-row:1;aspect-ratio:4/3;height:auto}
  .nsq{grid-template-rows:auto auto}
  .nsq__texto{padding:40px 28px 48px}
  .nsq__texto p{text-align:center;hyphens:manual}
  .nsc__reja{display:grid;grid-auto-flow:column;grid-auto-columns:42%;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;border:0;margin-inline:-28px;padding-inline:28px;scroll-padding-inline:28px}
  .nsc__reja::-webkit-scrollbar{display:none}
  .nsc__reja li{scroll-snap-align:start;border:1px solid rgba(239,233,222,.24) !important;border-radius:3px;background:rgba(26,31,23,.35)}
  .nsc__reja{gap:10px}
}
/* Países con el formato de la portada: texto arriba, carrusel cuadrado abajo.
   En las bandas verdes los logotipos vuelven a tinta: van sobre la tarjeta crema. */
.ns-pais .hm-patas__cifras{flex-wrap:wrap}
.hm-sec--oscura.ns-pais .hm-u figcaption img{filter:brightness(0) saturate(100%) invert(12%) sepia(9%) saturate(1100%) hue-rotate(60deg) brightness(95%);opacity:1}
.hm-sec--oscura.ns-pais .hm-u figcaption img.hm-u--bn,.hm-sec--oscura.ns-pais .hm-u figcaption img.hm-u--color{filter:none}
.hm-sec--oscura.ns-pais .hm-u figcaption .mk-u__donde{color:var(--kb-tinta)}
/* Fila corta (menos tarjetas de las que caben): centrada, nunca pegada a un lado.
   El sentido de lectura vuelve a ser normal en las bandas «vuelta». */
.ns-pais .hm-patas__pista{margin-inline:auto}
/* Si todo cabe, sin flechas: no hay nada que recorrer */
.ns-pais .hm-patas__mandos:has(button[data-paso="-1"]:disabled):has(button[data-paso="1"]:disabled){display:none}  /* la pista mide lo que sus tarjetas: si cabe, se centra */
/* España y Aruba: sólo dos tarjetas, cada una media fila (Carlos, 2026-09-24) */
.ns-pais--dos .hm-patas__pista{width:100%;display:grid;grid-template-columns:1fr 1fr}
.ns-pais--dos .hm-u{aspect-ratio:3/2 !important}
/* En móvil nunca apiladas: vuelve a ser carrusel, con la vecina asomando */
@media (max-width:619px){.ns-pais--dos .hm-patas__pista{display:flex;width:max-content}.ns-pais--dos .hm-u{aspect-ratio:1/1 !important}}
/* Colores intercalados (Carlos, 2026-09-24): nunca dos bandas iguales seguidas.
   Banner · crema · cifras (foto) · crema · verde · crema · verde · crema (Dubái) ·
   tinta (Hoteles) · verde (Let's talk) · tinta (pie) */
.ns-tinta{background:var(--kb-tinta)}
.hm-sec--oscura.ns-pais .hm-raya{background:rgba(239,233,222,.7)}

.ns-pais{overflow-x:clip}  /* en móvil el carril de México ensanchaba la página 7 px */

/* ══ Auditoría móvil 2026-09-24 ══ */
/* Puntos de carrusel: se ven igual (7 px), pero el dedo tiene 40 px de zona. */
.hm-patas__puntos button{position:relative}
.hm-patas__puntos button::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;translate:-50% -50%}
/* «Dubai» del banner: en el teléfono bajaba a 40 px y se leía como titular gigante. */
@media (max-width:700px){.hm-dubai__titulo{font-size:30px;letter-spacing:.14em}}
/* Brands en móvil: rejilla de DOS columnas en vez de carrusel (Carlos). Cuadros
   iguales, logo centrado; las dos últimas de una fila impar quedan centradas. */
@media (max-width:759px){
  .mk-reja,.mk-reja.mk-reja--pais,.mk-reja.mk-reja--ancha{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;overflow:visible !important;scroll-snap-type:none;padding:0 !important;margin:0 !important}
  .mk-reja .hm-u{flex:none !important;width:auto !important;aspect-ratio:1/1 !important;min-width:0}
  .mk-reja .hm-u figcaption img{max-width:78%;height:auto}
  .mk-reja > .hm-u:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 6px) !important}
  .mk-par__reja{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px}
  .mk-reja--una{grid-template-columns:1fr !important}
}
/* España y Aruba en móvil: cada tarjeta llena su media columna */
@media (max-width:759px){.mk-par .mk-reja--una .hm-u{width:100% !important;aspect-ratio:1/1 !important}}
@media (max-width:759px){.mk-par__col{min-width:0;width:100%}.mk-par .mk-reja--una{width:100% !important;justify-self:stretch}.mk-par .mk-reja--una > .hm-u:last-child:nth-child(odd){grid-column:auto;width:100% !important}}
/* Cifras del hero fuera de la sección: una caja de alto cero que las deja
   caer sobre el pie del vídeo en escritorio, y en móvil una banda propia. */
.hm-hcifras-caja{position:relative;height:0;z-index:5}
.hm-hcifras-caja .hm-hcifras{bottom:0}
@media (max-width:700px){
  .hm-hcifras-caja{height:auto;background:var(--kb-tinta)}
  .hm-hcifras-caja .hm-hcifras{position:static;translate:none;padding-bottom:0;
    background:var(--kb-tinta);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0}
}
@media (max-width:760px){.gl-mosaico > figure.grande{display:none}}  /* Ilios Los Cabos: sólo en escritorio (Carlos) */

/* ══ Prueba 2026-09-24: párrafos JUSTIFICADOS en móvil (Carlos quiere verlo) ══
   Sólo cuerpos de texto; títulos, rótulos, cifras y botones siguen centrados.
   Última línea centrada para que el bloque no quede cojo; palabras sin partir. */
@media (max-width:619px){
  .hm-sube p,.hm-patas__texto p,.hm-prensa__texto p,.hm-hablemos__texto p,
  .pr-intro,.ns-golfo__dentro p,.pr-golfo__texto p,.ns-abre p,.ns-abre__p,
  .hm-quienes p,.hm-presenta,.nsq__texto p,.hm-dubai p,.hm-pila__texto p:last-child,
  .hm-entrada,.bl-art p,.pr-ultimo__p{
    text-align:justify !important;text-align-last:center !important;hyphens:manual !important;-webkit-hyphens:manual !important}
}

/* ══ Destinos en móvil: acordeón (propuesta B, 2026-09-24) ══
   Lista de países; el que se toca abre su foto y sus ciudades, y cierra el anterior. */
.dm{display:none}
@media (max-width:860px){
  .ds-movil{display:none !important}
  .dm{display:block;border-top:1px solid rgba(239,233,222,.28)}
  .dm-f{border-bottom:1px solid rgba(239,233,222,.28)}
  .dm-f summary{list-style:none;display:grid;grid-template-columns:1fr auto 18px;align-items:center;gap:12px;
    padding:18px 2px;cursor:pointer;color:var(--kb-fondo);min-height:40px}
  .dm-f summary::-webkit-details-marker{display:none}
  .dm-f__n{font-family:var(--kb-logo);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:18px;line-height:1.2}
  .dm-f__c{font:500 10.5px/1.3 var(--kb-texto);letter-spacing:.12em;text-transform:uppercase;opacity:.78;text-align:right}
  .dm-f summary i{width:11px;height:11px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    rotate:45deg;translate:0 -3px;transition:rotate .3s ease,translate .3s ease}
  .dm-f[open] summary i{rotate:-135deg;translate:0 3px}
  .dm-f__cuerpo{padding:0 0 22px}
  .dm-f__cuerpo img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block}
  .dm-f__cuerpo p{margin:14px 0 0;color:rgba(239,233,222,.88);font-size:14.5px;line-height:1.55;text-align:center !important;text-align-last:center !important}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .dm-f[open] .dm-f__cuerpo{animation:dm-abre .45s cubic-bezier(.23,1,.32,1)}
  @keyframes dm-abre{from{opacity:0;transform:translateY(-6px)}}
}
/* Móvil: Dubái entra en la lista de destinos como última fila, con su sello
   «Apertura 2027»; el banner 50/50 queda sólo para escritorio (Carlos). */
@media (max-width:860px){
  .hm-dubai{display:none !important}
  .dm-f__sello{opacity:1;color:var(--kb-fondo);border:1px solid rgba(239,233,222,.6);border-radius:2px;padding:5px 8px}
  .dm-f--pronto .dm-f__cuerpo img{aspect-ratio:4/5;object-position:50% 30%}
}

/* ══ Móvil: todos los titulares centrados (Carlos, 2026-09-24) ══ */
@media (max-width:700px){
  .nsq__texto{text-align:center}
  .nsq__rotulo,.nsq__titulo{text-align:center;margin-inline:auto}
  .pr-ultimo__txt{text-align:center;justify-items:center}
  .pr-ultimo__et,.pr-ultimo__t,.pr-ultimo__pie,.pr-ultimo__marca{text-align:center;justify-self:center;margin-inline:auto}
  .pr-ultimo__ir{justify-self:center;margin-inline:auto}
  .bl-art h2{text-align:center}
}

/* ══ Móvil: cifras de sección en rejilla medida (Carlos, 2026-09-24) ══
   Nada de flex que deja una cifra huérfana abajo: 3 → una fila de 3;
   4 → 2 × 2; 5 → 3 arriba y 2 abajo, a lo ancho. Filete entre columnas. */
@media (max-width:700px){
  .hm-patas__cifras{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:14px;padding-top:16px}
  .hm-patas__cifras div{grid-column:span 2;min-width:0;padding:0 4px;text-align:center}
  .hm-patas__cifras:has(> div:nth-child(4):last-child) div{grid-column:span 3}
  .hm-patas__cifras:has(> div:nth-child(5):last-child) div:nth-child(n+4){grid-column:span 3}
  .hm-patas__cifras div + div{border-left:1px solid var(--kb-piedra)}
  .hm-sec--oscura .hm-patas__cifras div + div,.hm-sec--tinta .hm-patas__cifras div + div{border-left-color:rgba(239,233,222,.28)}
  .hm-patas__cifras:has(> div:nth-child(4):last-child) div:nth-child(3),
  .hm-patas__cifras:has(> div:nth-child(5):last-child) div:nth-child(4){border-left:0}
  .hm-patas__cifras b{font-size:26px}
  .hm-patas__cifras span{font-size:10px;letter-spacing:.1em}
}
/* Cifras de sección en móvil con los cuadros del hero (Carlos): celdas con
   filete en los dos sentidos, número fino grande y rótulo en la sans. */
@media (max-width:700px){
  .hm-patas__cifras{row-gap:0;padding-top:0;border-top:1px solid var(--kb-piedra)}
  .hm-patas__cifras div{padding:14px 4px 13px;gap:7px}
  .hm-patas__cifras div:nth-child(n+4),
  .hm-patas__cifras:has(> div:nth-child(4):last-child) div:nth-child(n+3){border-top:1px solid var(--kb-piedra)}
  .hm-sec--oscura .hm-patas__cifras,.hm-sec--tinta .hm-patas__cifras,
  .hm-sec--oscura .hm-patas__cifras div,.hm-sec--tinta .hm-patas__cifras div{border-top-color:rgba(239,233,222,.28)}
  .hm-patas__cifras:has(> div:nth-child(4):last-child) div:nth-child(-n+2){border-top:0}
  .hm-patas__cifras b{font-weight:300;font-size:28px;letter-spacing:-.01em}
  .hm-patas__cifras span{font:500 10.5px/1.3 var(--kb-texto);letter-spacing:.14em;text-transform:uppercase}
}
/* Justificado sin agujeros: el tramo final cortado por el JS va centrado, y la
   parte de arriba llena su última línea. */
@media (max-width:619px){
  p.kb-cola-p,.kb-cola-p{text-align-last:justify !important}
  .kb-cola{display:block;text-align:center !important;text-align-last:center !important}
}
@media (max-width:700px){.nsq__foto{display:none}}  /* About: la foto de Harry's Los Cabos sólo en escritorio (Carlos) */