@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/cormorant-garamond-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/cormorant-garamond-latin-ext-600-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/jost-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/jost-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jost-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jost-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/jost-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/jost-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/jost-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/jost-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =============================================================================
   RbQUAL · panel de rbqual.online — hoja de estilos v6
   -----------------------------------------------------------------------------
   El mismo material que www.rbqual.com: noche (azul), lino y papel (marfil) y
   latón (oro viejo), con Cormorant Garamond para los nombres y la voz del
   huésped, y Jost para todo lo demás. Las fuentes viajan con la web (fonts/):
   se ven igual en un Mac que en un Windows de recepción.

   Por qué se ve más nítido que la v5:
   - Fuera el grano de papel. Era un ruido en multiply que bajaba el crema
     declarado (#FAF6F0) a un gris beige (#E8E4DF medido en pantalla) y le
     quitaba brillo a todo lo que tenía encima.
   - Un ancla oscura de verdad (la noche) y un claro limpio (el papel): el ojo
     tiene un negro y un blanco de referencia, y los colores ganan fuerza.
   - Fuera la letra de máquina de escribir en mayúsculas para las etiquetas.

   Regla de color: el latón es de la marca (marca, foco, filtros activos, el
   trazo de cada sección), nunca de los datos. Los datos llevan solo verde,
   ámbar y rojo, validados para daltonismo (protan/deutan) sobre el papel.
   Regla tipográfica: la cursiva de Cormorant es la voz del huésped.
   ========================================================================== */

:root{
  --version:"7.2";   /* sirve para detectar hojas de estilo caducadas (rbqual.js lo comprueba) */
  color-scheme:light;

  /* base, la misma que www.rbqual.com */
  --noche:#0F1C2E; --noche-2:#172A44; --noche-3:#0A1422;
  --lino:#F7F3EC; --lino-2:#EEE7DB; --papel:#FDFBF7;
  --tinta:#18202E; --tinta-2:#2E3443; --piedra:#5E5A54;
  --hilo:#E4DACB; --hilo-2:#CFBFA3;
  --laton:#B08D57; --laton-texto:#7D5D24; --laton-claro:#D8BE85; --champan:#E3CD9C;
  --sobre-oscuro:#F3EDE2; --sobre-oscuro-2:#C4BDB0; --sobre-oscuro-3:#A9A296;
  --linea-oscura:rgba(227,205,156,.2);

  /* datos: positivo, mixto, negativo, neutral. Pasan las seis comprobaciones de
     color (contraste >= 3:1 sobre el papel y separacion para daltonismo). */
  --pos:#1B7D5A; --mix:#BA8731; --neg:#B5473B; --neu:#A39C92;
  --pos-rgb:27,125,90; --mix-rgb:186,135,49; --neg-rgb:181,71,59;
  /* las mismas, un punto mas oscuras, cuando son texto pequeño (>= 4,5:1) */
  --pos-t:#176B4D; --mix-t:#8A6118; --neg-t:#9E3B30;
  --sube:var(--pos-t); --baja:var(--neg-t);

  /* lo que rbqual.js pinta en linea: aqui se decide el color */
  --peso1:#0F1C2E; --peso2:#22385A; --peso3:#3A5378; --peso4:#566F94; --peso5:#7389AB;
  --bien:#BDB4A6;                 /* burbuja de "ya esta bien" */
  --celda-poca:var(--lino-2);     /* casilla con muy pocos huespedes */
  --accion-sub:var(--sobre-oscuro-3);

  /* nombres de la v5 que el JS y el HTML siguen usando */
  --crema:var(--lino); --mudo:var(--piedra); --mudo2:var(--piedra);
  --tinta2:var(--tinta-2); --regla:var(--hilo); --regla2:var(--hilo-2);

  /* tipografia */
  --serif:"Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans:"Jost", "Futura", "Century Gothic", "Segoe UI", Arial, sans-serif;

  /* sombras tenidas de noche, no de marron */
  --sombra:0 1px 2px rgba(15,28,46,.05), 0 18px 40px -30px rgba(15,28,46,.4);
  --sombra-honda:0 2px 4px rgba(15,28,46,.1), 0 34px 64px -36px rgba(15,28,46,.6);

  --trama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C9A96E' stroke-opacity='.5' stroke-width='.8'%3E%3Ccircle cx='0' cy='0' r='18'/%3E%3Ccircle cx='72' cy='0' r='18'/%3E%3Ccircle cx='0' cy='72' r='18'/%3E%3Ccircle cx='72' cy='72' r='18'/%3E%3Ccircle cx='36' cy='36' r='18'/%3E%3Cpath d='M36 7 65 36 36 65 7 36Z'/%3E%3Cpath d='M36 22 50 36 36 50 22 36Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--lino);color:var(--tinta);
  font:400 1rem/1.6 var(--sans);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit}
b,strong{font-weight:500}
::selection{background:var(--champan);color:var(--noche)}
:focus-visible{outline:2px solid var(--laton);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;color:var(--noche);text-wrap:balance}
h1{font-size:clamp(2.6rem, 1.7rem + 2.6vw, 4.1rem);line-height:1.02;letter-spacing:-.015em}
h2{font-size:clamp(1.85rem, 1.4rem + 1.2vw, 2.45rem);line-height:1.1;letter-spacing:-.01em}
h3{font-size:1.4rem;line-height:1.15;font-weight:600}
.env{max-width:1200px;margin:0 auto;padding:0 32px}
.kicker{font:500 .86rem/1.35 var(--sans);letter-spacing:.01em;color:var(--laton-texto)}
.sub{color:var(--sobre-oscuro-2);font-size:1.06rem;line-height:1.65;margin-top:16px;max-width:62ch}
.nota{color:var(--piedra);font-size:.94rem;line-height:1.65;max-width:56ch}
.nota b{color:var(--tinta);font-weight:500}
.crece{flex:1}

/* ---- barra superior: noche, como la cabecera de rbqual.com ------------------ */
.barra,.banda,.accion,.simres,.hoja-cab{--mudo:var(--sobre-oscuro-3);--mudo2:var(--sobre-oscuro-3)}
.barra{position:sticky;top:0;z-index:40;background:var(--noche);color:var(--sobre-oscuro);
  border-bottom:1px solid rgba(227,205,156,.14);padding:11px 0;
  box-shadow:0 14px 30px -26px rgba(15,28,46,.9)}
.navbar{display:flex;align-items:center;gap:18px;min-height:36px}
.marca{display:flex;align-items:center;gap:11px;font:600 1.55rem/1 var(--serif);letter-spacing:.01em;
  color:var(--sobre-oscuro);white-space:nowrap}
/* el rombo de latón de la marca, el mismo de rbqual.com */
.marca i{position:relative;display:block;width:10px;height:10px;flex:none;transform:rotate(45deg);
  border:1px solid var(--laton)}
.marca i::after{content:"";position:absolute;inset:2px;background:var(--laton)}
.sep{width:1px;height:24px;background:rgba(227,205,156,.22);flex:none}

/* ---- fichas (filtros) -------------------------------------------------------- */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:500 .86rem/1.2 var(--sans);letter-spacing:.01em;padding:7px 14px;
  border:1px solid var(--hilo-2);border-radius:999px;background:var(--papel);color:var(--tinta);
  cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.chip:hover{border-color:var(--noche)}
.chip[aria-pressed="true"]{background:var(--noche);border-color:var(--noche);color:var(--sobre-oscuro)}
.chip.mini{padding:5px 11px;font-size:.8rem}
/* sobre la noche: filete champán, y latón cuando está activa (como en «Un caso real») */
.barra .chip,.banda .chip{background:transparent;border-color:rgba(227,205,156,.24);color:var(--sobre-oscuro-2)}
.barra .chip:hover,.banda .chip:hover{border-color:rgba(227,205,156,.6);color:var(--sobre-oscuro)}
.barra .chip[aria-pressed="true"],.banda .chip[aria-pressed="true"]{background:rgba(185,134,48,.22);
  border-color:var(--laton);color:var(--sobre-oscuro)}
.chip:focus-visible,button:focus-visible{outline:2px solid var(--laton);outline-offset:2px}

/* Selector de idioma. Se enseñan LOS DOS idiomas: el relleno dice donde estas y
   el hueco a donde puedes ir. Siempre visible, tambien en movil. */
.idiomas{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:stretch;
  border:1px solid rgba(227,205,156,.45);border-radius:999px;overflow:hidden;
  font:500 .76rem/1 var(--sans);letter-spacing:.1em}
.idiomas>*{padding:8px 12px;line-height:1.3;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.idiomas .act{background:var(--champan);color:var(--noche);font-weight:600}
.idiomas a{color:var(--sobre-oscuro-2)}
.idiomas a:hover,.idiomas a:focus-visible{background:rgba(227,205,156,.16);color:var(--sobre-oscuro);outline:none}

/* ---- la banda de cabecera: el nombre del hotel y los filtros, sobre la noche -- */
.banda{position:relative;isolation:isolate;overflow:hidden;background:var(--noche);color:var(--sobre-oscuro)}
.banda::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(46% 90% at 82% 0%, rgba(176,141,87,.15), transparent 72%),
             radial-gradient(55% 120% at 0% 100%, rgba(49,80,138,.36), transparent 70%)}
/* la trama de azulejo de la portada de rbqual.com, apenas insinuada a la derecha */
.banda::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.17;
  background:var(--trama) 0 0/72px 72px;
  -webkit-mask-image:radial-gradient(30% 75% at 86% 32%, #000 8%, transparent 100%);
          mask-image:radial-gradient(30% 75% at 86% 32%, #000 8%, transparent 100%)}
header.top{padding:52px 0 34px}
header.top .kicker{color:var(--champan);font-size:.95rem}
header.top h1{margin-top:12px;color:var(--sobre-oscuro)}
.refinar{display:grid;grid-template-columns:118px 1fr;gap:10px 20px;align-items:start;
  padding-top:24px;padding-bottom:32px;
  /* el filete se dibuja dentro del relleno lateral: asi empieza y acaba con el texto */
  background:linear-gradient(var(--linea-oscura),var(--linea-oscura)) 32px 0/calc(100% - 64px) 1px no-repeat}
.refinar>.kicker{grid-column:1/-1;color:var(--champan);padding-bottom:4px}
.refinar .et{display:block;padding-top:8px;font:400 .86rem/1.3 var(--sans);color:var(--sobre-oscuro-3)}
.grupo{display:contents}
.grupo>.chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ---- secciones -------------------------------------------------------------- */
main.env{padding-bottom:8px}
section{padding:clamp(44px, 5vw, 68px) 0 0}
#sec-indice{padding-top:30px}
/* cada seccion abre con un filete y un trazo corto de laton: el gesto de rbqual.com */
.tit{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-bottom:26px;padding-top:24px;border-top:1px solid var(--hilo-2)}
.tit::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:2px;background:var(--laton)}
.tit h2{margin:0}

/* ---- aviso y candado ------------------------------------------------------- */
.aviso{position:relative;background:var(--papel);border:1px solid var(--hilo);border-left:2px solid var(--laton);
  border-radius:2px;padding:20px 24px;margin-top:30px;font-size:.96rem;line-height:1.65;color:var(--tinta-2);
  box-shadow:var(--sombra)}
.aviso b{color:var(--tinta);font-weight:500}
.aviso.grave{border-left-color:var(--neg);background:#FCF6F3}
.aviso.candado{border-left-color:var(--laton)}
.aviso .nota{display:block;margin-top:6px;max-width:none}
.candado-acc{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.candado-acc .chip{text-decoration:none;display:inline-block;padding:9px 18px}
.candado-acc .chip:first-child{background:var(--noche);border-color:var(--noche);color:var(--sobre-oscuro)}
.candado-acc .chip:first-child:hover{background:var(--noche-2)}
/* El formulario nace con hidden, pero una regla de clase con display:flex le gana
   al display:none del navegador. Con [hidden] explicito vuelve a estar cerrado. */
.candado-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.candado-form[hidden]{display:none}
.candado-form input{font:400 .95rem/1.3 var(--sans);padding:10px 14px;min-width:170px;
  border:1px solid var(--hilo-2);border-radius:3px;background:var(--lino);color:var(--tinta);
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.candado-form input:focus{outline:none;border-color:var(--laton);background:var(--papel);box-shadow:0 0 0 3px rgba(227,205,156,.45)}
.candado-form button[type=submit]{background:var(--noche);border-color:var(--noche);color:var(--sobre-oscuro);padding:9px 18px}
.candado-aviso{font-size:.86rem;color:var(--piedra)}
html.sin-citas #sec-resenas{display:none}
.cerrado{display:block;margin-top:8px;padding-left:12px;border-left:1px solid var(--laton);font-size:.86rem;color:var(--piedra)}
.vacio{padding:28px;text-align:center;color:var(--piedra);font-size:.94rem;background:var(--papel);
  border:1px dashed var(--hilo-2);border-radius:2px}

/* ---- el indice: la tarjeta principal, con el marco interior de laton --------- */
.indice{position:relative;background:var(--papel);border:1px solid var(--hilo);border-radius:2px;box-shadow:var(--sombra);
  padding:clamp(28px, 3vw, 40px) clamp(24px, 3vw, 44px) 30px;
  display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(28px, 4vw, 60px);align-items:start}
.indice::before{content:"";position:absolute;inset:8px;border:1px solid rgba(176,141,87,.3);pointer-events:none}
.indice.fino{display:block;padding:18px 26px}
.indice.fino .kicker{display:inline}
.indice .num{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.indice .num b{font:500 clamp(4.4rem, 3.4rem + 3vw, 6.2rem)/.86 var(--serif);letter-spacing:-.02em;color:var(--noche);
  font-variant-numeric:lining-nums}
.indice .num span{font-size:1.1rem;color:var(--piedra)}
/* la regla 0-100 con un rombo de laton donde cae el indice */
.regla-ind{position:relative;height:2px;background:var(--hilo-2);border-radius:1px;margin-top:28px}
.regla-ind i{position:absolute;top:-5px;width:12px;height:12px;background:var(--laton);
  transform:translateX(-50%) rotate(45deg);box-shadow:0 0 0 3px var(--papel)}
.regla-ind span{position:absolute;top:12px;font-size:.74rem;color:var(--piedra)}
.indice .var{font-size:.95rem;margin-top:34px;line-height:1.5}
.indice .var b{font-weight:600}
.sube{color:var(--sube)} .baja{color:var(--baja)}
.explT{color:var(--tinta);font-size:1.04rem;line-height:1.6;max-width:58ch;margin-bottom:22px}
.explT b{font-weight:600}
.pesos{display:flex;gap:2px;margin-top:6px;height:36px;border-radius:2px;overflow:hidden}
/* overflow:hidden en cada tramo: una etiqueta larga se recorta dentro de SU trozo */
.pesos i{display:block;position:relative;overflow:hidden;font-style:normal}
.pesos i span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 .76rem/1 var(--sans);letter-spacing:.02em;color:#fff;white-space:nowrap}
.pieP{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:.88rem;color:var(--tinta);margin-top:12px}
/* el rombo enlaza cada nombre con su tramo de la barra (mismo tono) */
.leyP::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:1px;
  transform:rotate(45deg);background:var(--c)}
.pieP .leyP:nth-child(1)::before{background:var(--peso1)}
.pieP .leyP:nth-child(2)::before{background:var(--peso2)}
.pieP .leyP:nth-child(3)::before{background:var(--peso3)}
.pieP .leyP:nth-child(4)::before{background:var(--peso4)}
.pieP .leyP:nth-child(5)::before{background:var(--peso5)}
.leyNota{color:var(--piedra);flex-basis:100%}
.indice .expl{grid-column:1/-1;border-top:1px solid var(--hilo);padding-top:18px;margin-top:4px;
  font-size:.92rem;line-height:1.65;color:var(--piedra);max-width:none}
.indice .expl b{color:var(--tinta)}

/* ---- cifras ---------------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--hilo);
  border:1px solid var(--hilo);border-radius:2px;overflow:hidden;box-shadow:var(--sombra)}
.kpi{background:var(--papel);padding:20px 20px 18px;display:flex;flex-direction:column}
.kpi .kicker{min-height:2.7em;color:var(--piedra)}
.kpi .v{font:600 2.25rem/1 var(--sans);letter-spacing:-.01em;color:var(--noche);margin:10px 0 6px}
.kpi .d{margin-top:auto;font-size:.84rem;line-height:1.45;color:var(--piedra)}

/* ---- glosario: las cinco cosas que juzga un huesped -------------------------- */
.glos{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1px;background:var(--hilo);
  border:1px solid var(--hilo);border-radius:2px;overflow:hidden;box-shadow:var(--sombra)}
.gcard{background:var(--papel);padding:24px 26px 24px}
.gcard > .kicker:first-child{color:var(--laton-texto)}
.gcard h3{font-size:1.5rem}
.gcard > .kicker[style]{font:400 .86rem/1.4 var(--sans)!important;letter-spacing:0!important;color:var(--piedra)!important}
.gcard > div:not([class]){font-size:.95rem!important;line-height:1.6;color:var(--tinta-2)!important}
.gcard .q{margin-top:16px;padding-left:14px;border-left:1px solid var(--laton);
  font:italic 500 1.24rem/1.38 var(--serif);color:var(--noche)}
.gcard .q .kicker{font:400 .8rem/1.4 var(--sans);font-style:normal;color:var(--piedra)}
.gcard.gnota{background:var(--lino-2)}
.gcard.gnota h3{font-size:1.25rem}
.otra-cita{margin-top:12px;background:none;border:0;padding:0 0 1px;cursor:pointer;
  font:500 .84rem/1.3 var(--sans);color:var(--laton-texto);border-bottom:1px solid rgba(176,141,87,.5)}
.otra-cita:hover{color:var(--noche);border-bottom-color:var(--noche)}

/* ---- tarjetas oscuras: una accion, el simulador y el cierre ------------------ */
.accion,.simres{position:relative;isolation:isolate;overflow:hidden;background:var(--noche);color:var(--sobre-oscuro);
  border-radius:3px;box-shadow:var(--sombra-honda)}
.accion::before,.simres::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 90% at 100% 0%, rgba(227,205,156,.09), transparent 70%),
             radial-gradient(50% 90% at 0% 100%, rgba(49,80,138,.36), transparent 70%)}
.accion{padding:clamp(28px, 3vw, 40px) clamp(24px, 3vw, 44px);
  display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:center}
.accion .kicker{color:var(--champan)}
.accion h2{margin:10px 0 8px;color:var(--sobre-oscuro)}
.accion p{margin:0;color:var(--sobre-oscuro-2);font-size:1rem;line-height:1.65;max-width:68ch}
.accion p b{color:var(--sobre-oscuro)}
.accion .cifra{text-align:right}
.accion .cifra b{display:block;font:500 clamp(3.3rem, 2.6rem + 2.2vw, 4.5rem)/.9 var(--serif);letter-spacing:-.02em;
  color:var(--sobre-oscuro);font-variant-numeric:lining-nums}
.accion .cifra span{font-size:.84rem;color:var(--sobre-oscuro-3)}
.accion .gana{margin-top:26px;padding-top:18px;border-top:1px solid var(--linea-oscura)}
.accion .gana span{display:block;font-size:.84rem;color:var(--sobre-oscuro-3)}
.accion .gana b{display:block;font:500 clamp(2.4rem, 2rem + 1.4vw, 3.1rem)/1.02 var(--serif);
  color:var(--champan);margin:6px 0 2px;font-variant-numeric:lining-nums}
/* El cierre no lleva cifra: titular a la izquierda y texto a la derecha */
.accion.cierre{grid-template-columns:.85fr 1.15fr;align-items:start;gap:44px;padding:clamp(32px, 3.4vw, 48px) clamp(24px, 3vw, 44px)}
.accion.cierre h2{margin-top:12px}
.accion.cierre p{max-width:none;font-size:1.02rem;line-height:1.7}
#sec-cierre{padding-bottom:12px}

/* ---- cuadrantes ------------------------------------------------------------ */
.cuadrantes{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.lienzo{position:relative;background:var(--papel);border:1px solid var(--hilo);border-radius:2px;height:420px;box-shadow:var(--sombra)}
.lienzo .tinte{position:absolute;pointer-events:none;display:block}
.lienzo .ejeh,.lienzo .ejev{position:absolute;background:var(--hilo-2);z-index:1}
.lienzo .punto,.lienzo .qlabel{z-index:2}
.lienzo .ejeh{left:0;right:0;height:1px} .lienzo .ejev{top:0;bottom:0;width:1px}
.punto{position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.2s;box-shadow:0 0 0 2px var(--papel)}
.punto b{position:absolute;left:calc(100% + 8px);white-space:nowrap;font:500 .84rem/1.25 var(--sans);color:var(--tinta)}
.punto b small{display:block;font:400 .74rem/1.3 var(--sans);color:var(--piedra)}
.punto u{display:none;font:600 .78rem/1 var(--sans);text-decoration:none;color:#fff}
.leyPuntos{display:none;list-style:none;margin:26px 0 0;padding:0;font-size:.9rem}
.leyPuntos li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--hilo)}
.leyPuntos u{flex:0 0 22px;height:22px;border-radius:50%;background:var(--noche);color:var(--sobre-oscuro);
  display:flex;align-items:center;justify-content:center;font:600 .74rem/1 var(--sans);text-decoration:none}
.leyPuntos small{font-size:.8rem;color:var(--piedra);margin-left:auto}
.qlabel{position:absolute;font:500 .8rem/1.2 var(--sans);letter-spacing:.01em;color:var(--piedra)}
.leyq{font-size:.92rem;line-height:1.55;color:var(--tinta-2)}
.leyq div{padding:12px 0;border-top:1px solid var(--hilo)}
.leyq b{display:block;font:600 1.12rem/1.25 var(--serif);color:var(--noche);margin-bottom:2px}
/* Modo numerado del mapa: se activa desde el JS cuando los nombres se pisarian */
.cuadrantes.numerado .punto b{display:none}
.cuadrantes.numerado .punto u{display:block}
.cuadrantes.numerado .lienzo{grid-column:1;grid-row:1}
.cuadrantes.numerado .leyPuntos{display:block;grid-column:1;grid-row:2;margin-top:22px}
.cuadrantes.numerado .leyq{grid-column:2;grid-row:1}

/* ---- dimension a dimension (y lo que cuesta en la nota) ---------------------- */
.dim{display:grid;grid-template-columns:200px 1fr 150px;gap:18px;align-items:center;
  padding:15px 0;border-top:1px solid var(--hilo);cursor:pointer;transition:background-color .25s ease,box-shadow .25s ease}
.dim:hover{background:rgba(227,205,156,.22);box-shadow:-10px 0 0 rgba(227,205,156,.22),10px 0 0 rgba(227,205,156,.22)}
.dim.apagada{opacity:.5}
.dnom{font:600 1.24rem/1.2 var(--serif);color:var(--noche)}
.dnom small:not(.etq){margin-top:3px;font:400 .82rem/1.4 var(--sans)!important;letter-spacing:0!important;color:var(--piedra)!important}
.pista{position:relative;height:12px;background:var(--hilo);border-radius:2px;overflow:hidden;display:flex}
.pista i{display:block;height:100%}
.pista i+i{margin-left:2px}
.cifra-d{text-align:right;font-size:.9rem;line-height:1.4;color:var(--tinta)}
.cifra-d b{font-weight:600;font-size:1.02rem}
.cifra-d small{display:block;color:var(--piedra);font-size:.8rem}
#impacto .cifra-d b{color:var(--neg-t)}
#impacto > div[style*="190px"]{font-size:.82rem!important;line-height:1.5;padding-left:218px!important}
.etq{font:500 .74rem/1.3 var(--sans);letter-spacing:.01em;padding:3px 9px;border-radius:999px;
  border:1px solid var(--hilo-2);color:var(--piedra);background:transparent;white-space:nowrap}
.etq.p{border-color:rgba(var(--pos-rgb),.45);color:var(--pos-t);background:rgba(var(--pos-rgb),.06)}
.etq.n{border-color:rgba(var(--neg-rgb),.45);color:var(--neg-t);background:rgba(var(--neg-rgb),.06)}
.etq.m{border-color:rgba(var(--mix-rgb),.55);color:var(--mix-t);background:rgba(var(--mix-rgb),.08)}

/* ---- matriz ---------------------------------------------------------------- */
table.matriz{border-collapse:separate;border-spacing:3px;width:100%;font-size:.9rem}
table.matriz th{font:500 .78rem/1.25 var(--sans);letter-spacing:.01em;color:var(--piedra);
  text-align:left;padding:0 4px 8px;vertical-align:bottom}
table.matriz th.rot{text-align:center}
table.matriz td{padding:0}
.celda{border-radius:2px;padding:10px 8px;min-height:63px;display:flex;flex-direction:column;justify-content:center;
  text-align:center;font-weight:500;color:var(--tinta);position:relative;cursor:default}
.celda small{display:block;font-size:.72rem;font-weight:400;color:var(--piedra);margin-top:2px}
.celda.vacia{background:var(--lino-2);color:var(--piedra)}
table.matriz th.filanom{font:500 .9rem/1.2 var(--sans);color:var(--tinta);padding-right:12px;white-space:nowrap;vertical-align:middle}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- simulador --------------------------------------------------------------- */
.sim{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:start}
.simfila{display:grid;grid-template-columns:200px 1fr 96px;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--hilo)}
.simfila > div:first-child > div[style]{font:600 1.16rem/1.2 var(--serif)!important;color:var(--noche)}
.simfila .kicker{color:var(--piedra);margin-top:2px}
.simfila input[type=range]{width:100%;height:32px;margin:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;accent-color:var(--noche)}
.simfila input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--hilo-2);border-radius:1px}
.simfila input[type=range]::-moz-range-track{height:2px;background:var(--hilo-2);border-radius:1px}
.simfila input[type=range]::-moz-range-progress{height:2px;background:var(--noche)}
.simfila input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-8px;
  border-radius:50%;background:var(--noche);border:3px solid var(--papel);box-shadow:0 0 0 1px var(--noche),0 2px 6px rgba(15,28,46,.25)}
.simfila input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--noche);
  border:3px solid var(--papel);box-shadow:0 0 0 1px var(--noche),0 2px 6px rgba(15,28,46,.25)}
.simfila input[type=range]:focus-visible{outline:2px solid var(--laton);outline-offset:2px}
.simres{padding:30px 24px;text-align:center}
.simres .kicker{color:var(--champan)}
.simres b{display:block;font:500 4rem/1 var(--serif);letter-spacing:-.02em;margin:10px 0 6px;color:var(--sobre-oscuro);font-variant-numeric:lining-nums}
.simres .d{font-size:.88rem;line-height:1.5;color:var(--sobre-oscuro-2);margin-top:6px}

/* ---- reseñas: la voz del huesped en cursiva ---------------------------------- */
.resena{background:var(--papel);border:1px solid var(--hilo);border-radius:2px;padding:20px 24px;margin-bottom:12px;box-shadow:var(--sombra)}
.rcab{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rcab .estrellas{color:var(--laton);letter-spacing:.12em;font-size:.92rem}
.rcab .kicker{color:var(--piedra);font-weight:400}
.rtxt{font:italic 500 1.16rem/1.55 var(--serif);color:var(--tinta)}
/* el subrayado de rotulador de rbqual.com: el color dice si es elogio, queja o mixto */
mark{color:inherit;padding:0 .05em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent 56%, rgba(var(--pos-rgb),.2) 56%, rgba(var(--pos-rgb),.2) 92%, transparent 92%)}
mark.n{background:linear-gradient(transparent 56%, rgba(var(--neg-rgb),.24) 56%, rgba(var(--neg-rgb),.24) 92%, transparent 92%)}
mark.x{background:linear-gradient(transparent 56%, rgba(var(--mix-rgb),.3) 56%, rgba(var(--mix-rgb),.3) 92%, transparent 92%)}
.paginacion{display:flex;gap:8px;align-items:center;margin-top:16px}
/* Las frases de los huespedes son la prueba: ninguna traduccion automatica debe tocarlas */
.notranslate{}

/* ---- las dos plataformas ----------------------------------------------------- */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hilo);border:1px solid var(--hilo);
  border-radius:2px;overflow:hidden;box-shadow:var(--sombra)}
/* 7.2 (C18): las tres plataformas (TripAdvisor, Booking y Expedia); por debajo de 1100 px, una debajo de otra */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hilo);border:1px solid var(--hilo);
  border-radius:2px;overflow:hidden;box-shadow:var(--sombra)}
@media(max-width:1100px){.tres{grid-template-columns:1fr}}
/* 7.2 (C19): las dos pestañas de «Comparar» */
.cmp-pestanas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:2px 0 4px}
.cmp-pestanas .nota{margin:0 0 0 6px;font-size:.88rem}
.fuente{background:var(--papel);padding:26px 26px 24px}
.fuente .cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.fuente .cab h3{font-size:1.6rem}
.fuente .cab .kicker{color:var(--piedra)}
.fila-f{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--hilo);font-size:.95rem}
.fila-f b{font-weight:600}

/* ---- evolucion --------------------------------------------------------------- */
.ejes{display:flex;gap:0;align-items:flex-end;height:170px;margin-top:6px}
.anio{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.anio .b{width:min(58%, 46px);background:var(--neg);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.anio .et{align-self:stretch;text-align:center;margin-top:-6px;padding-top:7px;border-top:1px solid var(--hilo-2);font-size:.74rem;color:var(--piedra)}
.anio .vv{font-size:.74rem;font-weight:500;color:var(--tinta-2)}

/* ---- notas, leyenda y pie --------------------------------------------------- */
/* Notas largas a dos columnas: se llena el ancho sin renglones kilometricos */
.nota.columnas{max-width:78ch}
.nota.columnas.dos{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 52px;
  background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.nota.columnas.dos > div + div{padding-left:52px;margin-left:-52px;border-left:1px solid var(--hilo)}
.nota.columnas b:first-child{display:block;margin-bottom:2px}
.notas3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--hilo)}
.notas3 .nota{max-width:none}
#notaFiab{border-left-color:var(--laton)!important}
.leyenda{display:flex;gap:18px;flex-wrap:wrap;font-size:.84rem;color:var(--piedra);margin-top:12px}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px}
footer{margin-top:clamp(56px, 6vw, 80px);padding:32px 0 72px;border-top:1px solid var(--hilo-2);
  color:var(--piedra);font-size:.86rem;line-height:1.7}
footer b{color:var(--tinta)}

/* ---- filtros en el movil: resumen, hoja plegable y navegador de secciones ----- */
.barra-filtros{display:flex;align-items:center;gap:14px;flex:1;min-width:0;overflow:hidden}
.barra-filtros .chips{flex-wrap:nowrap}
.resumen{display:none;flex:1;min-width:0;align-items:center;gap:10px;
  font:500 .84rem/1.2 var(--sans);color:var(--sobre-oscuro-2);background:transparent;
  border:1px solid rgba(227,205,156,.3);border-radius:999px;padding:9px 15px;cursor:pointer;text-align:left;white-space:nowrap}
.resumen:hover{border-color:rgba(227,205,156,.6)}
.resumen b{font-weight:600;color:var(--sobre-oscuro)}
.resumen #resumenTxt{overflow:hidden;text-overflow:ellipsis}
.resumen .flecha{margin-left:auto;color:var(--champan)}
.mas-filtros{display:none}
.hoja{position:fixed;top:0;left:0;width:100%;height:100%;z-index:60;background:var(--lino);
  overflow-y:auto;overflow-x:hidden;padding:0 0 40px;display:none}
.hoja[data-abierta="1"]{display:block}
html.con-hoja,html.con-hoja body{overflow:hidden;height:100%}
.hoja-cab{position:sticky;top:0;z-index:1;background:var(--noche);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
.hoja-cab .kicker{color:var(--champan);font-size:.95rem}
.hoja-cerrar{background:var(--champan);color:var(--noche);border:0;border-radius:999px;
  font:600 .88rem/1 var(--sans);padding:12px 18px;cursor:pointer}
.hoja .grupo{padding:22px 20px 0;display:block}
.hoja .et{display:block;margin-bottom:10px;font:500 .9rem/1.3 var(--sans);color:var(--noche)}
.hoja .chips{flex-wrap:wrap;gap:8px}
.hoja .chip{padding:10px 15px;font-size:.88rem}
/* El top tiene que casar con el alto de .barra. El box-shadow pinta una franja
   opaca por encima, asi una diferencia de un pixel no deja ver la pagina. */
.nav-secciones{display:none;position:sticky;top:58px;z-index:35;background:var(--lino);
  box-shadow:0 -10px 0 0 var(--lino);border-bottom:1px solid var(--hilo);
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:9px 16px}
.nav-secciones::-webkit-scrollbar{display:none}
.nav-secciones .chip{display:inline-block;margin-right:7px}

/* ---- notas largas plegables (movil) ------------------------------------------ */
.plegable{margin:2px 0 4px}
.plegable>summary{font:500 .86rem/1.3 var(--sans);color:var(--laton-texto);cursor:pointer;list-style:none;padding:8px 0}
.plegable>summary::-webkit-details-marker{display:none}
.plegable>summary::after{content:" +";color:var(--laton)}
.plegable[open]>summary::after{content:" −"}
@media(min-width:761px){
  .plegable>summary{display:none}
  .plegable>.cuerpo{display:block!important}
}

/* ---- cabecera de seccion a dos columnas en pantalla ancha --------------------- */
@media(min-width:1001px){
  .tit > div:first-child{flex:1;min-width:0;display:grid;grid-template-columns:1fr minmax(340px,480px);
    gap:14px 48px;align-items:start}
  .tit > div:first-child > h2{grid-column:1;margin-bottom:0;align-self:start}
  .tit > div:first-child > .nota{grid-column:2;grid-row:1/span 2;max-width:none;padding-top:6px}
}

/* ---- pantallas medianas -------------------------------------------------------- */
@media(max-width:1000px){
  .barra-filtros{display:none}
  .resumen{display:flex}
  .navbar .sep,.navbar .crece{display:none}
  .nav-secciones{display:block}
  .refinar{display:none}
  header.top{padding:40px 0 34px}
  .nota.columnas{max-width:70ch}
  .nota.columnas.dos{grid-template-columns:1fr;gap:18px}
  .nota.columnas.dos > div + div{padding-left:0;margin-left:0;border-left:0;border-top:1px solid var(--hilo);padding-top:16px}
}
@media(max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)} .dos{grid-template-columns:1fr}
  .accion,.accion.cierre{grid-template-columns:1fr;gap:18px} .accion .cifra{text-align:left}
  .dim{grid-template-columns:150px 1fr 120px}
  #impacto > div[style*="190px"]{padding-left:168px!important}
  .cuadrantes,.sim{grid-template-columns:1fr} .indice{grid-template-columns:1fr;gap:18px}
  /* nombres fuera del lienzo: numero en la burbuja + lista debajo */
  .punto b{display:none} .punto u{display:block} .leyPuntos{display:block}
  .lienzo{height:340px}
  .lienzo .qlabel{font-size:.7rem;white-space:nowrap}
  .chip{padding:9px 14px}
  .chip.mini{padding:8px 11px}
}

/* ---- movil ---------------------------------------------------------------------
   Un director de hotel abre esto en el movil, de pie, en recepcion: fichas que se
   tocan con el pulgar, etiquetas encima de sus fichas y una tabla que avisa de
   que se desliza en vez de parecer cortada.                                       */
@media(max-width:640px){
  .env{padding:0 16px}
  h1{font-size:2.5rem} h2{font-size:1.75rem}
  .sub{font-size:1rem}
  header.top{padding:30px 0 28px}
  .navbar{gap:10px}
  .marca{font-size:1.35rem;gap:9px}
  .marca i{width:9px;height:9px}
  .idiomas>*{padding:8px 10px}
  .resumen{padding:9px 12px;font-size:.8rem}
  .indice{padding:24px 20px 22px}
  .indice::before{inset:6px}
  /* la barra de pesos se queda como proporcion; los nombres van en la leyenda */
  .pesos{height:20px;margin-top:14px}
  .pesos i span{display:none}
  .pieP{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:.84rem}
  .leyNota{grid-column:1/-1;margin-top:2px;line-height:1.5}
  .dim{grid-template-columns:1fr;gap:6px}
  .cifra-d{text-align:left}
  .cifra-d small{display:inline;margin-left:6px}
  #impacto > div[style*="190px"]{padding-left:0!important}
  .kpi{padding:16px 14px}
  .kpi .v{font-size:1.9rem}
  .gcard,.fuente{padding:20px 18px}
  .resena{padding:18px 18px}
  .rtxt{font-size:1.1rem}
  .accion{padding:26px 22px}
  .simfila{grid-template-columns:1fr 1fr;gap:8px 14px}
  .simfila > div:first-child{grid-column:1/-1}
  .desliza{position:relative;padding-top:22px}
  .desliza::after{content:"→ se desliza";position:absolute;right:2px;top:0;font-size:.76rem;color:var(--piedra)}
  html[lang="en"] .desliza::after{content:"→ scroll sideways"}
  table.matriz{font-size:.84rem}
  /* el nombre de la fila se queda quieto al deslizar */
  table.matriz th.filanom{position:sticky;left:0;z-index:2;background:var(--lino);
    border-right:1px solid var(--hilo);padding-right:10px;font-size:.8rem}
}

/* ---- impresion ------------------------------------------------------------------ */
@media print{
  .barra,.refinar,.paginacion,#simulador,.hoja,.resumen,.mas-filtros,.nav-secciones{display:none!important}
  body{background:#fff;font-size:11pt}
  .banda{background:#fff!important;color:#000}
  .banda::before,.banda::after,.accion::before,.simres::before{display:none}
  header.top h1,header.top .kicker,.sub{color:#000!important}
  section{page-break-inside:avoid}
  .accion,.simres{background:#fff;color:#000;border:2px solid #000;box-shadow:none}
  .accion h2,.accion p,.accion .kicker,.accion .cifra span,.accion .cifra b,.accion .gana b,.accion .gana span{color:#000!important}
  .indice,.kpis,.glos,.dos,.resena,.lienzo,.aviso{box-shadow:none}
}

/* ------------------------------------------------ 7.0 · Comparar */
.cmp-hotel{margin-top:28px}
.cmp-hotel h3{font-size:1.6rem;margin:0 0 4px}
.cmp-hotel .kicker{margin-bottom:6px}
table.cmp{border-collapse:collapse;width:100%;margin-top:16px;font-size:.92rem}
table.cmp th,table.cmp td{padding:9px 10px;border-top:1px solid var(--hilo);text-align:right;vertical-align:top}
table.cmp th:first-child{text-align:left;font-weight:500;color:var(--tinta);max-width:260px}
table.cmp tr:first-child th{font:500 .78rem/1.25 var(--sans);letter-spacing:.01em;color:var(--piedra);border-top:0;
  text-align:right;vertical-align:bottom}
table.cmp tr:first-child th:first-child{text-align:left}
table.cmp td small{display:block;color:var(--mudo);font-size:.76rem;line-height:1.35}
table.cmp td.dif{font-weight:600;white-space:nowrap}
.lect{display:inline-block;font-size:.78rem;line-height:1.3;padding:2px 9px;border-radius:999px;border:1px solid var(--hilo-2);
  color:var(--mudo);text-align:center}
.lect.clara{border-color:rgba(var(--neg-rgb),.5);color:var(--tinta);background:rgba(var(--neg-rgb),.05)}
.lect.pocos{opacity:.75}
html.modo-comparar .refinar{display:none}
html.modo-comparar #fAnios, html.modo-comparar #hAnios{opacity:.45;pointer-events:none}
/* 7.0: con el tercer botón de plataforma, los botones de la barra no se parten en dos líneas; si no caben
   (por debajo de 1240 px), la barra pasa al resumen y a la hoja de filtros, como en las pantallas medianas */
.barra-filtros{gap:10px}
.barra-filtros .chip{white-space:nowrap;flex:none;padding:7px 10px}
@media(max-width:1240px){
  .barra-filtros{display:none}
  .resumen{display:flex}
  .navbar .sep,.navbar .crece{display:none}
}

/* ------------------------------------------------ 7.1 · el marcador de la cabecera (C15)
   El índice de los dos hoteles, frente a frente, sobre la noche. Mismo lenguaje que el resto de la
   página: Cormorant para los nombres y las cifras; el filete con el trazo corto de latón que abre cada
   sección, que aquí marca el hotel que se está viendo; y el rombo de latón de la regla del índice. Sin
   cajas ni mayúsculas. Las cifras van en el crema de la noche, no en latón: el latón es de la marca.
   El verde y el rojo de los datos (--pos, --neg y sus tonos para texto) dan entre 2,55:1 y 3,37:1
   sobre la noche (#0F1C2E), y menos donde la banda se aclara: por debajo del 4,5:1 que pide la letra
   pequeña. Aquí van aclarados: sobre #272D34 (la noche con el 15 % de su degradado latón), #7FCBA4 da
   7,27:1 y #E99A8E, 6,27:1; sobre #2F3337, el tono más claro que midió la revisión de la 7.1 (M4),
   6,66:1 y 5,75:1 (fórmula de contraste de WCAG 2.1). La flecha ▲▼ dice lo mismo que el
   color.                                                                                           */
header.top .env{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px 64px;align-items:start}
.cab-texto{min-width:0}
.marcador{width:480px;max-width:100%}
.marcador[hidden]{display:none}
/* las dos columnas comparten las filas (subgrid): nombre, cifra, regla, variación y reseñas de un hotel quedan a
   la altura de las del otro aunque un texto ocupe dos líneas. Sin subgrid, cada columna va a su aire. */
.marc-cols{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);column-gap:32px;margin-top:14px}
.marc{position:relative;grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:0;align-content:start;
  text-align:left;font:inherit;color:var(--sobre-oscuro);background:none;border:0;border-top:1px solid var(--linea-oscura);
  border-radius:0;margin:0;padding:15px 0 2px;cursor:pointer}
.marc::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:2px;background:var(--laton);
  opacity:0;transition:opacity .25s ease}
.marc:hover::before{opacity:.45}
.marc[aria-pressed="true"]{cursor:default}
.marc[aria-pressed="true"]::before{opacity:1}
.marc:focus-visible{outline:2px solid var(--laton);outline-offset:6px}
.marc .h{font:500 1.45rem/1.1 var(--serif);color:var(--sobre-oscuro-2);transition:color .25s ease}
.marc:hover .h,.marc[aria-pressed="true"] .h{color:var(--champan)}
.marc .n{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.marc .n b{font:500 clamp(3rem, 2.3rem + 1.5vw, 3.9rem)/.92 var(--serif);letter-spacing:-.015em;
  color:var(--sobre-oscuro);font-variant-numeric:lining-nums}
.marc .n span{font-size:.86rem;color:var(--sobre-oscuro-3)}
.marc .r{position:relative;display:block;height:1px;background:rgba(227,205,156,.28);margin:17px 0 13px}
.marc .r i{position:absolute;top:-4px;width:9px;height:9px;background:var(--laton);transform:translateX(-50%) rotate(45deg)}
.marc .v{display:block;font-size:.82rem;line-height:1.45;color:var(--sobre-oscuro-2);text-wrap:balance}
.marc .v b{font-weight:600}
.marc .v .sube{color:#7FCBA4} .marc .v .baja{color:#E99A8E}
.marc .base{display:block;font-size:.76rem;line-height:1.4;color:var(--sobre-oscuro-3);margin-top:6px;text-wrap:balance}
.marc-pie{font-size:.78rem;line-height:1.55;color:var(--sobre-oscuro-3);margin:16px 0 0;max-width:none;text-wrap:balance}
@media(max-width:1100px){
  header.top .env{grid-template-columns:1fr}
  .marcador{width:100%;max-width:560px}
}
@media(max-width:640px){
  .marc-cols{gap:0 20px}
  .marc{padding-top:13px}
  .marc .h{font-size:1.22rem}
  .marc .n b{font-size:2.65rem}
  .marc .r{margin:14px 0 11px}
  .marc .v{font-size:.76rem}
  .marc .base{font-size:.72rem}
}
@media print{
  .marc::before{display:none}
  .marcador .kicker,.marc .h,.marc .n b,.marc .n span,.marc .v,.marc .v .sube,.marc .v .baja,.marc .base,.marc-pie{color:#000!important}
  .marc{border-top-color:#000}
}