/* ══════════════════════════════════════════════════════════════════════
   ESTILO KEMPINSKI — LAS PÁGINAS DE RISERVATO ONE

   El dueño, 30-09-2026: el estilo de kempinski.com en todo lo que ve el
   cliente. La app ya lo usa (src/tema.js, K y kBoton…); estas páginas
   son HTML estático con su propio CSS en línea, así que la pasada va
   aquí, en una sola hoja, cargada DESPUÉS del <style> de cada página.

   Solo toca las piezas que se midieron redondeadas o con sombra en las
   30 páginas (auditoría del 30-09): los botones .btn y las tarjetas
   .feat .mod .cap .solc .fc div.note .form-card .mock. Nada más: la
   cabecera, el pie y las secciones que ya eran Kempinski no se tocan.

   Mismos valores que K en tema.js:
     navy #0B1B33 · arena #B8A58A · arenaTx #7A6A4F · línea #E8E4DC
   ══════════════════════════════════════════════════════════════════════ */

/* Botones: caja recta, mayúsculas espaciadas. El dorado relleno pasa a
   azul noche; el de contorno, a caja fina arena. */
.btn{border-radius:0 !important;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px !important;font-weight:500 !important}
.btn-xl{font-size:13px !important}
.btn-gold,.btn.gold{background:#0B1B33 !important;color:#fff !important;border-color:#0B1B33 !important}
.btn-gold:hover,.btn.gold:hover{background:#1B2C48 !important}
.btn-out{background:transparent !important;border-color:#B8A58A !important;color:#0B1B33 !important}
.btn-out:hover{background:#0B1B33 !important;color:#fff !important;border-color:#0B1B33 !important}

/* Tarjetas: sin esquinas ni sombra, línea cálida. */
.feat,.mod,.cap,.solc,.fc,div.note,.form-card,.mock{border-radius:0 !important;box-shadow:none !important;border-color:#E8E4DC !important}
.mod .tile,.fc .ic,.feat .ic{border-radius:0 !important}
.solc .img{border-radius:0 !important}

/* Títulos de tarjeta en serif fino azul noche, como los de la app. */
.feat h3,.mod h3,.cap h3,.solc h3{font-family:'Cormorant Garamond',Georgia,serif !important;font-weight:400 !important;color:#0B1B33 !important;letter-spacing:0 !important;line-height:1.2}
.feat h3,.cap h3{font-size:24px !important}
.mod h3{font-size:22px !important}
.solc h3{font-size:27px !important}


/* En mayúsculas espaciadas un botón es más ancho: en un móvil chico, el
   de about.html (sin poder partir línea) sacaba la página de lado. */
@media (max-width:480px){.btn{white-space:normal !important;text-align:center;justify-content:center;max-width:100%;padding-left:20px !important;padding-right:20px !important}}

/* ── Menú ☰ en el móvil, como kempinski.com (PRUEBA, 01-10-2026) ──
   El dueño, con capturas del móvil de Kempinski: al abrir el menú, la
   fila de arriba es ✕ · EN ⌄ · cuenta. Aquí: ✕ a la izquierda, el
   selector de idioma en el centro (idioma.js crea .mm-idioma y lo pone
   dentro) y «Acceso» como icono de persona a la derecha. El logo y la
   caja de Marketplace salen de esa fila (Marketplace sigue en la
   cabecera con el menú cerrado). Fuera del móvil, nada cambia. */
@media (max-width:720px){
  #mmMenu .mm-top .mh-logo{display:none !important}
  #mmMenu .mm-idioma{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
  #mmMenu .mm-acc a.caja{display:none !important}
  #mmMenu .mm-acc a:not(.caja){font-size:0 !important;letter-spacing:0 !important;width:26px;height:26px;display:block;
    background:no-repeat center/24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1B33' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E")}
}