/* Plus Jakarta Sans se carga con <link> en cada HTML (más rápido que @import). */

:root {
  --base:#EFE8DA;
  --tinta:#1A1A1A;
  /* v0.3: grises un paso más oscuros. El #6B6560 anterior se quedaba corto
     sobre cristal con vídeo detrás. */
  --tinta-2:#433E39;
  --tinta-3:#6A645E;
  --linea:#C7A46E;

  /* Semántica de color de toda la pieza: terracota = dinero que se va,
     verde = lo que hace Closensia. */
  --fuga:#9C5F4E;
  --fuga-viva:#AE6752;
  --cierre:#2E6A5E;

  /* Marca: el azul noche y el punto cian del logotipo. Es el color de la
     capa de instrumentos y el del cierre, que es donde habla Closensia. */
  --marca:#1F2C3C;
  --marca-2:#151E2A;
  --marca-acento:#5EB6C4;

  --sat-alta:#4E8C78;
  --sat-media:#B08A55;
  --sat-baja:#9C5F4E;

  --f01:#E2D5BE; --f02:#D3D6D0; --f03:#C6C1B5;
  --f04:#CDD2D1; --f05:#E7E0D1; --f06:#D3BC98;

  --tono-activo: 226, 213, 190;

  /* Tipografía: UNA familia. El énfasis lo ponen el peso y el color, no un
     cambio de letra a media frase. Para volver a una cursiva serif editorial
     basta con cambiar --fuente-acento (y añadir la fuente al @import), p. ej.
     'Instrument Serif', Georgia, serif. */
  --fuente: 'Plus Jakarta Sans', system-ui, sans-serif;
  --fuente-acento: var(--fuente);

  /* Cristal lechoso sobre vídeo vivo (la referencia de la revisión). Más
     opaco que en v0.2 porque el vídeo ya no va apagado por un velo. */
  --glass-bg:rgba(250,248,244,.64);
  --glass-borde:rgba(255,255,255,.80);
  --glass-sombra:0 24px 64px rgba(20,24,30,.20);

  --margen: clamp(22px, 5vw, 96px);

  /* Rejilla de la escena en escritorio. Título, cajas e instrumentos se
     colocan todos desde aquí, así que no se pueden pisar entre sí. */
  --cw-top: clamp(18px, 4.2vh, 46px);
  --cw-titulo-alto: 60px;
  --cw-hueco: clamp(10px, 1.6vh, 16px);
  --cw-prog-bottom: clamp(14px, 2.8vh, 30px);
  --cw-prog-alto: 44px;
  --cw-ind-alto: 118px;
  --cw-caja-ancho: min(480px, 33vw);
  --cw-cajas-top: calc(var(--cw-top) + var(--cw-titulo-alto) + var(--cw-hueco));
  --cw-ind-bottom: calc(var(--cw-prog-bottom) + var(--cw-prog-alto) + var(--cw-hueco));
  --cw-cajas-bottom: calc(var(--cw-ind-bottom) + var(--cw-ind-alto) + var(--cw-hueco));
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
html, body {
  margin: 0; padding: 0;
  background: var(--base);
  color: var(--tinta);
  font-family: var(--fuente);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nivel 2 vive en un iframe sobre nivel 1: al llegar al final de su
     scroll, sin esto el gesto sigue encadenándose al documento padre y
     desplaza nivel 1 por detrás sin que se vea. */
  overscroll-behavior-y: contain;
}
strong { font-weight: 700; color: var(--tinta); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* El énfasis dentro de un titular: mismo tipo, peso contrario. */
em, .cursiva {
  font-family: var(--fuente-acento);
  font-style: normal;
  font-weight: 400;
  /* La coda es una unidad de sentido: salta entera a la línea siguiente en
     vez de partirse por la mitad. */
  display: inline-block;
}
.hero h1, .cw-cierre-titulo, .cw-n2-remate,
.cw-fuga-titulo, .cw-faq-titulo { text-wrap: balance; }

/* --- cristal --- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  backdrop-filter: blur(26px) saturate(1.25);
  border: 1px solid var(--glass-borde);
  border-radius: 8px;
  box-shadow: var(--glass-sombra);
  padding: clamp(18px, 1.6vw, 26px);
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .glass { background: rgba(250,248,244,.93); }
}

/* --- rótulo de caja --- */
.sobrelinea {
  display: block;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .9rem;
}
.sobrelinea--fuga   { color: var(--fuga); }
.sobrelinea--cierre { color: var(--cierre); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  z-index: 3;
  background: var(--f01);
  overflow: hidden;
}
.hero video, .hero .hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero .hero-poster {
  /* Detrás del vídeo siempre: es el relleno para cuando no hay hero.mp4. */
  z-index: -1;
  background-size: cover; background-position: center; background-color: var(--f01);
}
.hero-edge {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg,
    rgba(239,232,218,.34),
    rgba(239,232,218,.14) 45%,
    transparent 68%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 52%;
  margin-left: var(--margen);
  padding: 4vh clamp(16px, 3vw, 56px) 4vh 0;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
/* Panel de cristal: el texto vive dentro, nunca suelto sobre el vídeo. */
.hero-panel {
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  backdrop-filter: blur(30px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 10px;
  box-shadow: 0 36px 90px rgba(26,26,26,.16);
  padding: clamp(28px, 3vw, 50px);
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .hero-panel { background: rgba(255,255,255,.94); }
}
.hero-logo {
  display: block;
  height: clamp(40px, 3.3vw, 54px);
  width: auto;
  margin: 0 0 2rem;
}
.hero h1 {
  font-size: clamp(38px, 3.8vw, 62px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  margin: 0 0 1rem;
  color: var(--tinta);
}
/* La coda en el color de la fuga: es la primera vez que aparece el color
   que después marcará cada «Fuga de ingresos». */
.hero h1 em { font-weight: 300; color: var(--fuga); letter-spacing: -.03em; }
.hero-subtitular {
  display: block;
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--tinta);
  margin: 0 0 1.3rem;
}
.hero-subtitular em { font-weight: 300; color: var(--tinta-2); }
.hero p {
  max-width: 56ch;
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.62;
  margin: 0 0 1.2rem;
  color: var(--tinta-2);
}
/* La frase que hay que llevarse, separada del cuerpo para que respire. */
.hero .hero-remate {
  margin: 0 0 2rem;
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 3px solid var(--fuga);
  font-size: clamp(16.5px, 1.2vw, 19px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--tinta);
}

/* Botón de arranque: dice qué hacer (desliza) y hace algo si se pulsa
   (recorre el primer tramo solo). */
.hero-cta {
  display: inline-flex; align-items: center; gap: 16px;
  max-width: 100%;
  padding: 14px 24px 14px 16px;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1.35;
  text-align: left;
  color: #fff; background: var(--marca);
  border: 0; border-radius: 8px; cursor: pointer;
  box-shadow: 0 14px 30px rgba(31,44,60,.28);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background-color .25s ease;
}
.hero-cta:hover { transform: translateY(-2px); background: #26384D; box-shadow: 0 20px 40px rgba(31,44,60,.34); }
.hero-cta-raton {
  flex: 0 0 auto; position: relative;
  width: 22px; height: 32px;
  border: 2px solid rgba(255,255,255,.85); border-radius: 12px;
}
.hero-cta-rueda {
  position: absolute; left: 50%; top: 6px;
  width: 4px; height: 7px; margin-left: -2px;
  border-radius: 2px; background: var(--marca-acento);
  animation: cw-rueda 1.8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cw-rueda {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(11px); opacity: 0; }
  71%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.hero-cta-flecha {
  flex: 0 0 auto;
  font-size: 18px; color: var(--marca-acento);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.hero-cta:hover .hero-cta-flecha { transform: translateY(3px); }
.hero-cta--llamada { animation: cw-llamada 2.2s ease-out infinite; }
@keyframes cw-llamada {
  0%   { box-shadow: 0 14px 30px rgba(31,44,60,.28), 0 0 0 0 rgba(94,182,196,.6); }
  70%  { box-shadow: 0 14px 30px rgba(31,44,60,.28), 0 0 0 14px rgba(94,182,196,0); }
  100% { box-shadow: 0 14px 30px rgba(31,44,60,.28), 0 0 0 14px rgba(94,182,196,0); }
}
.hero-cta-pista {
  display: block;
  margin-top: .8rem;
  font-size: 13px; line-height: 1.4;
  color: var(--tinta-3);
}

.hero-revela {
  opacity: 0;
  filter: blur(14px);
  transition: opacity .75s cubic-bezier(.2,.7,.2,1),
              filter .75s cubic-bezier(.2,.7,.2,1);
}
.hero-revela.cw-visible { opacity: 1; filter: blur(0); }

@media (max-width: 760px) {
  .hero-inner {
    width: auto; margin: 0 16px; padding: 0 0 40px;
    justify-content: flex-end;
  }
  .hero-panel { padding: 24px 20px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero-subtitular { font-size: 17px; }
  .hero-logo { height: 32px; margin-bottom: 1.4rem; }
  .hero-cta { width: 100%; font-size: 12.5px; }
  .hero-edge {
    background: linear-gradient(0deg,
      rgba(239,232,218,.90), rgba(239,232,218,.55) 45%, transparent 78%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-revela { opacity: 1; filter: none; transition: none; }
  .hero-cta-rueda, .hero-cta--llamada { animation: none; }
}

/* ============================================================
   LIENZO
   ============================================================ */
.cw-mount { position: relative; }
.cw-lienzo {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0; display: block;
  background: var(--base);
}
.cw-spacer { position: relative; z-index: 1; }

/* v0.3: casi transparente. El vídeo se ve con su brillo; el contraste de la
   lectura lo ponen las cajas de cristal, no un velo que lo apague todo. Un
   leve tono de fase en los dos bordes, donde van las cajas. */
.cw-velo {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--tono-activo), .16) 0%,
    rgba(var(--tono-activo), .04) 32%,
    rgba(var(--tono-activo), 0) 50%,
    rgba(var(--tono-activo), .04) 68%,
    rgba(var(--tono-activo), .16) 100%);
}

/* ============================================================
   CAPA DE INSTRUMENTOS · cristal azul noche
   ============================================================ */
/* Separa la capa de instrumento (oscura, de marca) de la editorial (cristal
   claro) y se lee sobre cualquier fotograma. */
.cw-chip {
  background: rgba(31,44,60,.68);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(15,22,32,.24);
  color: rgba(255,255,255,.92);
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .cw-chip { background: rgba(31,44,60,.92); }
}

/* --- Marca: el símbolo siempre; el nombre, cuando la escena está despejada --- */
.cw-marca {
  display: flex; align-items: center;
  height: 100%;
  padding: 0 16px;
  text-decoration: none;
  cursor: pointer;
}
.cw-marca img { display: block; height: 40px; width: auto; max-width: none; }
.cw-marca-texto {
  display: block; overflow: hidden;
  max-width: 120px; margin-left: 8px;
  transition: max-width .6s cubic-bezier(.2,.7,.2,1),
              margin-left .6s cubic-bezier(.2,.7,.2,1),
              opacity .45s ease;
}
.cw-marca--plegada .cw-marca-texto { max-width: 0; margin-left: 0; opacity: 0; }
.cw-marca:hover { background: rgba(31,44,60,.84); }

/* La del nivel 1 va arriba a la derecha, en espejo del título de fase, dentro
   de .cw-cabecera-dcha (con el selector de idioma a su derecha). */
.cw-marca--fija {
  position: relative; flex: 0 0 auto;
  height: 100%;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .5s ease, transform .5s ease, background-color .25s ease;
}
.cw-marca--fija.cw-activo { opacity: 1; pointer-events: auto; transform: none; }

/* --- Título de fase: 01 | DESCUBRIMIENTO --- */
/* La fase es el ancla de la escena: rectángulo más ancho, número y nombre
   más grandes y en negrita. */
.cw-fase-titulo {
  display: inline-flex; align-items: center;
  height: 100%;
  min-width: min(100%, 340px);
  padding: 0 40px 0 18px;
  white-space: nowrap;
}
.cw-fase-num {
  font-size: 34px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  padding-right: 16px; margin-right: 16px;
  border-right: 1px solid rgba(255,255,255,.3);
}
.cw-fase-nom {
  font-size: 17px; font-weight: 800; line-height: 1.2;
  letter-spacing: .11em; text-transform: uppercase;
  color: #fff;
}

/* --- Frase vertical de la fase, en el margen derecho --- */
.cw-lateral {
  position: fixed; z-index: 6;
  right: max(6px, calc(var(--margen) / 2 - 20px)); top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  padding: 18px 10px;
  font-size: 14.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
  pointer-events: none;
  opacity: 0;
}

/* --- Barra de recorrido, abajo. También es un control deslizante: se
   arrastra para mover el vídeo fotograma a fotograma, se pulsa para saltar y
   con el teclado va de fase en fase. --- */
.cw-progreso {
  position: fixed; z-index: 6;
  left: var(--margen); right: var(--margen); bottom: var(--cw-prog-bottom);
  height: var(--cw-prog-alto);
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px;
  pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.cw-progreso.cw-activo { opacity: 1; }
.cw-progreso.cw-activo .cw-progreso-control { pointer-events: auto; }
.cw-progreso-control {
  position: relative;
  flex: 1 1 auto; align-self: stretch;
  display: flex; align-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  outline: none;
}
.cw-progreso-control.cw-arrastrando { cursor: grabbing; }
.cw-progreso-control:focus-visible .cw-progreso-tirador { box-shadow: 0 0 0 5px rgba(94,182,196,.45); }
.cw-progreso-marcas { position: absolute; inset: 0; pointer-events: none; }
.cw-progreso-marcas span {
  position: absolute; top: 50%;
  width: 2px; height: 11px; margin: -5.5px 0 0 -1px;
  border-radius: 1px;
  background: rgba(255,255,255,.5);
}
.cw-progreso-tirador {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--marca-acento);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transform: scale(.85);
  transition: transform .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
.cw-progreso-control:hover .cw-progreso-tirador,
.cw-progreso-control.cw-arrastrando .cw-progreso-tirador { transform: scale(1.2); }
/* Globo con la fase que hay bajo el puntero. */
.cw-progreso-globo {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  transform: translate(-50%, 4px);
  padding: 7px 11px;
  white-space: nowrap;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(21,30,42,.94);
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.cw-progreso-globo.cw-visible { opacity: 1; transform: translate(-50%, 0); }
.cw-progreso-serie {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
  flex: 0 0 auto;
}
.cw-progreso-pista {
  flex: 1 1 auto; height: 3px;
  background: rgba(255,255,255,.2);
  border-radius: 3px;
  position: relative;
  transition: height .2s ease;
}
.cw-progreso-control:hover .cw-progreso-pista,
.cw-progreso-control.cw-arrastrando .cw-progreso-pista { height: 5px; }
.cw-progreso-barra {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--marca-acento);
  border-radius: 3px;
  width: 0%;
}
.cw-progreso-valor {
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* --- Percepción del huésped, abajo a la derecha, bajo la caja C --- */
.cw-indicador {
  position: fixed; z-index: 6;
  right: var(--margen); bottom: var(--cw-ind-bottom);
  width: var(--cw-caja-ancho);
  pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.cw-indicador.cw-activo { opacity: 1; }
.cw-indicador.cw-activo .cw-indicador-panel { pointer-events: auto; }
.cw-indicador-lienzo { cursor: help; }
.cw-indicador-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 7px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 50%;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: rgba(255,255,255,.85);
  vertical-align: 1px;
}

/* Tooltip de la curva: por qué cada fase tiene su valor. Va encima del
   panel, con la flecha apuntando a la fase. */
.cw-indicador-tip {
  --pad: 18px;
  position: absolute; left: 0; right: 0; bottom: calc(100% + 12px);
  padding: 14px 18px 13px;
  background: rgba(21,30,42,.96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
  color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.cw-indicador-tip.cw-visible { opacity: 1; transform: none; }
.cw-indicador-tip::after {
  content: ''; position: absolute; top: 100%;
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--tip-f, .5));
  margin-left: -7px;
  border: 7px solid transparent; border-top-color: rgba(21,30,42,.96);
}
.cw-tip-cabecera {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: .5rem;
}
.cw-tip-fase { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cw-tip-lectura { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); white-space: nowrap; }
.cw-tip-lectura b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-right: 1px; }
.cw-tip-rotulo {
  display: block; margin-bottom: .3rem;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--marca-acento);
}
.cw-tip-motivo { margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.93); }
.cw-tip-nota { margin: .6rem 0 0; font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.55); }
.cw-indicador-panel {
  height: var(--cw-ind-alto);
  display: flex; flex-direction: column;
  padding: 12px 18px 9px;
}
.cw-indicador-cabecera {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.cw-indicador-titulo {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.cw-indicador-lectura { white-space: nowrap; line-height: 1; }
.cw-indicador-valor {
  font-size: 26px; font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cw-indicador-escala {
  margin-left: 2px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.6);
}
.cw-indicador-grafico {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  margin-top: 6px;
}
.cw-indicador-lienzo { position: relative; flex: 1 1 auto; min-height: 0; }
.cw-indicador-lienzo svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; display: block;
}
.cw-indicador-guia {
  fill: none; stroke: rgba(255,255,255,.30);
  stroke-width: 1.5; stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}
.cw-indicador-area { stroke: none; opacity: .18; }
.cw-indicador-linea {
  fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cw-indicador-punto {
  position: absolute;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(31,44,60,.9);
}
.cw-indicador-fases { position: relative; height: 17px; flex: 0 0 auto; }
/* Los números de fase son botones: explican su valor y llevan a la fase. */
.cw-indicador-fase {
  position: absolute; bottom: -2px;
  transform: translateX(-50%);
  padding: 2px 5px;
  font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.45);
  background: none; border: 0; border-radius: 3px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.cw-indicador-fase.cw-activa { color: #fff; }
.cw-indicador-fase.cw-apuntada,
.cw-indicador-fase:hover,
.cw-indicador-fase:focus-visible { color: var(--marca); background: var(--marca-acento); outline: none; }

/* ============================================================
   ESCENA DE CADA FASE
   ============================================================ */
/* Izquierda: título, A y B apilados. Derecha: C, en espejo; arranca a la
   altura de A y acaba donde acaba B, dejando aire sobre el indicador. */
.cw-columna-izq {
  position: fixed; z-index: 5;
  left: var(--margen);
  top: var(--cw-top); bottom: var(--cw-cajas-bottom);
  width: var(--cw-caja-ancho);
  display: flex; flex-direction: column;
  gap: var(--cw-hueco);
  pointer-events: none;
}
.cw-carril { opacity: 0; display: none; }
.cw-carril .cw-tarjeta-fuga { pointer-events: auto; }

.cw-carril--titulo { flex: 0 0 var(--cw-titulo-alto); }
.cw-carril--A { flex: 0 0 auto; }
/* display:flex lo pone Revelar (data-display) al hacerse visible. */
.cw-carril--B { flex: 1 0 auto; flex-direction: column; }
/* C: alto según su contenido, centrada en el eje horizontal de la pantalla.
   El tope deja arriba el mismo aire que abajo sobre el indicador. */
.cw-carril--C {
  position: fixed; z-index: 5;
  right: var(--margen);
  top: 50%; transform: translateY(-50%);
  width: var(--cw-caja-ancho);
  max-height: calc(100vh - 2 * var(--cw-cajas-bottom));
  flex-direction: column;
  pointer-events: none;
}
.cw-carril--B > .glass { flex: 1 1 auto; display: flex; flex-direction: column; }
.cw-carril--C > .glass {
  flex: 0 1 auto; display: flex; flex-direction: column;
  padding: clamp(22px, 2.1vw, 34px);
}

/* A · las cifras de la fase, una o dos. Cada fila: la cifra y, al lado, lo
   que hace y su contexto. Una sola rejilla para las dos filas, así los textos
   arrancan a la misma altura. La caja crece con su contenido y B se comprime
   debajo. */
.cw-datos { display: grid; grid-template-columns: auto 1fr; }
.cw-cifra {
  display: flex; align-items: center;
  margin: 0; padding-right: 18px;
  font-size: clamp(36px, 3.3vw, 50px);
  font-weight: 800; line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinta);
}
.cw-datos--uno .cw-cifra { font-size: clamp(46px, 4.2vw, 64px); }
.cw-dato-texto { display: flex; flex-direction: column; justify-content: center; }
.cw-datos > :nth-child(n+3) {
  margin-top: .85rem; padding-top: .85rem;
  border-top: 1px solid rgba(26,26,26,.12);
}
.cw-unidad {
  margin: 0;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  font-weight: 700; line-height: 1.3;
  color: var(--tinta);
  text-wrap: balance;
}
.cw-contexto {
  margin: .25rem 0 0;
  font-size: clamp(14px, 1vw, 15.5px); line-height: 1.42;
  color: var(--tinta-2);
}

/* B · la fuga */
.cw-item + .cw-item {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid rgba(26,26,26,.12);
}
.cw-fuga-titulo {
  margin: 0 0 .5rem;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 800; line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.cw-fuga-titulo em { font-weight: 400; color: var(--fuga); }
.cw-fuga-texto {
  margin: 0;
  font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.5;
  color: var(--tinta-2);
}
.cw-carril--B .cw-item:last-of-type { margin-bottom: 1rem; }

/* Acceso a nivel 2. Al pasar por encima crece: el cambio de color de v0.2
   no se percibía (y además borraba el texto). */
.cw-tarjeta-fuga {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 20px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: var(--fuga);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(156,95,78,.32);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.2,.7,.2,1),
              box-shadow .28s ease, background-color .28s ease;
}
.cw-tarjeta-fuga-flecha {
  font-size: 16px;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.cw-tarjeta-fuga:hover,
.cw-tarjeta-fuga:focus-visible {
  transform: scale(1.08);
  background: var(--fuga-viva);
  box-shadow: 0 18px 36px rgba(156,95,78,.42);
}
.cw-tarjeta-fuga:hover .cw-tarjeta-fuga-flecha { transform: translateX(5px); }

/* C · Closensia actúa: dos mensajes, grandes, centrados en la caja */
.cw-acciones {
  display: flex; flex-direction: column;
  gap: clamp(24px, 3.8vh, 42px);
}
.cw-accion {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 16px; align-items: baseline;
}
.cw-accion--sola { grid-template-columns: 1fr; }
.cw-num {
  font-size: 14px; font-weight: 800;
  letter-spacing: .06em;
  color: var(--cierre);
  font-variant-numeric: tabular-nums;
}
.cw-etiqueta {
  display: block;
  margin-bottom: .5rem;
  font-size: calc(var(--cw-c-escala, 1) * clamp(21px, 1.8vw, 27px));
  font-weight: 800; line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--tinta);
}
/* La caja más alta de la escena y la que más tiene que leerse: su texto es
   el más grande de las tres. */
.cw-cierre-texto {
  margin: 0;
  font-size: calc(var(--cw-c-escala, 1) * clamp(16.5px, 1.32vw, 20px)); line-height: 1.48;
  color: var(--tinta-2);
}
/* Fases con tres mensajes (las que llevan un diferencial): un punto menos de
   letra y menos aire entre ellos, para que la caja no choque con la marca ni
   con el indicador. --cw-c-escala (fijada por JS, una por caja) reduce esto
   aún más si el contenido concreto de esa fase no cabe: cada caja C se
   ajusta de forma independiente, nunca solapa el indicador de abajo. */
.cw-acciones--tres { gap: calc(var(--cw-c-escala, 1) * clamp(16px, 2.6vh, 28px)); }
.cw-acciones--tres .cw-etiqueta { font-size: calc(var(--cw-c-escala, 1) * clamp(18px, 1.45vw, 22px)); margin-bottom: .3rem; }
.cw-acciones--tres .cw-cierre-texto { font-size: calc(var(--cw-c-escala, 1) * clamp(15px, 1.12vw, 17px)); }

/* Portátiles de poca altura: todo se compacta a la vez para que las cajas
   sigan cabiendo entre el título y el indicador. */
@media (min-width: 761px) and (max-height: 820px) {
  :root {
    --cw-titulo-alto: 50px;
    --cw-prog-alto: 38px;
    --cw-ind-alto: 96px;
  }
  .glass { padding: 13px 17px; }
  .cw-carril--C > .glass { padding: 18px 20px; }
  .sobrelinea { font-size: 11.5px; margin-bottom: .5rem; }
  .cw-cifra { font-size: clamp(30px, 2.6vw, 38px); padding-right: 14px; }
  .cw-datos--uno .cw-cifra { font-size: clamp(38px, 3.3vw, 50px); }
  .cw-datos > :nth-child(n+3) { margin-top: .5rem; padding-top: .5rem; }
  .cw-unidad { font-size: 14.5px; }
  .cw-contexto { font-size: 13px; margin-top: .15rem; }
  .cw-fuga-titulo { font-size: clamp(17px, 1.4vw, 19px); margin-bottom: .3rem; }
  .cw-fuga-texto { font-size: 13.5px; line-height: 1.42; }
  .cw-cierre-texto { font-size: calc(var(--cw-c-escala, 1) * 15.5px); line-height: 1.42; }
  .cw-carril--B .cw-item:last-of-type { margin-bottom: .6rem; }
  .cw-etiqueta { font-size: calc(var(--cw-c-escala, 1) * 19px); margin-bottom: .3rem; }
  .cw-acciones--tres .cw-etiqueta { font-size: calc(var(--cw-c-escala, 1) * 16.5px); }
  .cw-acciones--tres .cw-cierre-texto { font-size: calc(var(--cw-c-escala, 1) * 14px); }
  .cw-tarjeta-fuga { padding: 9px 15px; font-size: 11.5px; }
  .cw-fase-titulo { min-width: min(100%, 290px); }
  .cw-fase-num { font-size: 28px; }
  .cw-fase-nom { font-size: 14.5px; }
  .cw-lateral { font-size: 13px; }
  .cw-marca img { height: 32px; }
  .cw-indicador-panel { padding: 9px 16px 7px; }
  .cw-indicador-valor { font-size: 21px; }
  .cw-indicador-titulo { font-size: 11px; }
}

/* ============================================================
   CIERRE · azul noche: aquí habla Closensia
   ============================================================ */
/* Sección en flujo: sube sobre el último fotograma como un telón. No depende
   de ningún umbral de fotograma, así que no se puede saltar. */
.cw-cierre {
  position: relative; z-index: 7;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(40px, 8vh, 96px) var(--margen);
  background:
    radial-gradient(110% 80% at 88% 0%, rgba(94,182,196,.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--marca) 0%, var(--marca-2) 100%);
  color: #fff;
}
.cw-cierre :focus-visible { outline-color: #fff; }
.cw-cierre strong { color: #fff; }
.cw-cierre-panel {
  width: 100%; max-width: 1240px;
  padding: clamp(28px, 4vw, 64px);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: 0 40px 100px rgba(0,0,0,.25);
}
.cw-cierre-logo {
  display: block;
  height: clamp(40px, 3.4vw, 54px); width: auto;
  margin: 0 0 clamp(24px, 4vh, 44px);
}
.cw-cierre-titulo {
  margin: 0 0 1.2rem;
  max-width: 20ch;
  font-size: clamp(34px, 3.9vw, 62px);
  font-weight: 800; line-height: 1.04;
  letter-spacing: -.035em;
  color: #fff;
}
.cw-cierre-titulo em { font-weight: 300; color: var(--marca-acento); letter-spacing: -.03em; }
.cw-cierre-cuerpo {
  margin: 0 0 clamp(30px, 5vh, 56px);
  max-width: 64ch;
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55;
  color: rgba(255,255,255,.8);
}
.cw-lema {
  display: block;
  margin-bottom: 1.2rem;
  font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--marca-acento);
}
.cw-triada {
  list-style: none;
  margin: 0 0 clamp(32px, 5vh, 56px); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.8vw, 48px);
}
.cw-triada-item { padding-top: 1.1rem; border-top: 2px solid rgba(94,182,196,.6); }
.cw-triada-num {
  display: block; margin-bottom: .55rem;
  font-size: 13px; font-weight: 800; letter-spacing: .08em;
  color: var(--marca-acento);
  font-variant-numeric: tabular-nums;
}
.cw-triada-tit {
  margin: 0 0 .6rem;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
}
.cw-triada-en {
  display: inline-block; vertical-align: middle;
  margin-left: .6rem;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.cw-triada-item p {
  margin: 0;
  font-size: clamp(15.5px, 1.18vw, 18px); line-height: 1.55;
  color: rgba(255,255,255,.78);
}
.cw-cierre-acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 32px;
}
.cw-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 30px;
  font-size: 14px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--marca); background: var(--marca-acento);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(94,182,196,.26);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), background-color .25s ease, box-shadow .25s ease;
}
.cw-cta::after { content: '→'; font-size: 17px; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.cw-cta:hover { transform: scale(1.05); background: #7DCAD5; box-shadow: 0 22px 46px rgba(94,182,196,.36); }
.cw-cta:hover::after { transform: translateX(5px); }
/* Fuentes estadísticas: nota al pie del cierre, abajo a la derecha, casi
   en susurro. Está para quien la busque; no compite con el CTA. */
.cw-cierre-panel { position: relative; }
.cw-referencias {
  position: absolute; right: clamp(20px, 2.4vw, 36px); bottom: clamp(14px, 1.6vw, 22px);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.34); text-decoration: none;
  transition: color .25s ease;
}
.cw-referencias:hover, .cw-referencias:focus-visible { color: rgba(255,255,255,.85); }
@media (max-width: 760px) {
  .cw-referencias { position: static; display: inline-block; margin-top: 1.6rem; }
}

.cw-volver {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.74); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: .25rem;
  transition: color .2s ease, border-color .2s ease;
}
.cw-volver:hover { color: #fff; border-color: #fff; }

.cw-n2-remate {
  margin: 0 0 2.4rem;
  max-width: 22ch;
  font-size: clamp(30px, 3.3vw, 52px);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
}
.cw-n2-remate em { font-weight: 300; color: var(--marca-acento); }

@media (max-width: 760px) {
  .cw-cierre { min-height: auto; padding: 12vh 16px; }
  .cw-cierre-panel { padding: 26px 20px; }
  .cw-triada { grid-template-columns: 1fr; gap: 1.6rem; }
  .cw-cierre-acciones .cw-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   VENTANA DE REFERENCIAS
   ============================================================ */
.cw-refventana {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(21,30,42,.5);
  display: none; align-items: center; justify-content: center;
  padding: 5vh 5vw;
  backdrop-filter: blur(4px);
}
.cw-refventana.cw-abierta { display: flex; }
.cw-refventana-caja {
  background: var(--base);
  border-top: 3px solid var(--marca-acento);
  border-radius: 8px;
  max-width: 34rem; width: 100%; max-height: 78vh; overflow-y: auto;
  padding: 2.6rem 2.8rem;
  box-shadow: 0 28px 70px rgba(26,26,26,.24);
}
.cw-refventana-caja h3 {
  font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-3); margin: 0 0 1.6rem;
}
.cw-refventana-caja dl { margin: 0; }
.cw-refventana-caja dt { font-size: 14.5px; font-weight: 700; margin-top: 1.1rem; color: var(--tinta); }
.cw-refventana-caja dd { margin: .25rem 0 0; font-size: 13.5px; color: var(--tinta-2); line-height: 1.55; }
.cw-refventana-cerrar {
  margin-top: 1.8rem;
  background: none; border: 1px solid rgba(26,26,26,.25);
  color: var(--tinta);
  padding: .75rem 1.6rem; border-radius: 6px; cursor: pointer;
  font-family: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cw-refventana-cerrar:hover { background: var(--marca); color: #fff; border-color: var(--marca); }

/* Cruz de cierre arriba a la derecha de las ventanas (fuentes y legal). */
.cw-refventana-caja { position: relative; }
.cw-ventana-x {
  position: absolute; top: 14px; right: 14px;
  width: 2.1rem; height: 2.1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid rgba(26,26,26,.18);
  color: var(--tinta-2); font-family: inherit; font-size: 20px; line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cw-ventana-x:hover { background: var(--marca); color: #fff; border-color: var(--marca); }
.cw-refventana-caja h3 { padding-right: 2.6rem; }

/* Fuentes estadísticas: letra pequeña, es una consulta de apoyo. */
.cw-fuentes-caja { padding: 2rem 2.2rem 1.8rem; }
.cw-fuentes-caja h3 { font-size: 10.5px; margin-bottom: 1.1rem; }
.cw-fuentes-caja dt { font-size: 12.5px; margin-top: .8rem; }
.cw-fuentes-caja dd { font-size: 11.5px; line-height: 1.5; }

/* ============================================================
   PIE DE PÁGINA — cierra la pieza en oscuro, en espejo del cierre.
   ============================================================ */
.cw-pie {
  position: relative; z-index: 8;
  /* El cierre termina en --marca-2 (su gradiente va de --marca a --marca-2):
     arrancar aquí en ese mismo tono evita una costura de color visible. */
  background: var(--marca-2);
  color: rgba(255,255,255,.55);
  padding: clamp(28px, 4.5vh, 44px) var(--margen) clamp(20px, 3vh, 28px);
}
.cw-pie-fila {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 20px 32px;
  max-width: 1200px; margin: 0 auto;
  padding-bottom: clamp(20px, 3vh, 28px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cw-pie-logo { height: 28px; width: auto; display: block; opacity: .92; }
.cw-pie-enlaces {
  display: flex; flex-wrap: wrap;
  gap: 10px 28px;
}
.cw-pie-link {
  background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; cursor: pointer;
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  transition: color .2s ease;
}
.cw-pie-link:hover, .cw-pie-link:focus-visible { color: #fff; }
.cw-pie-copy {
  max-width: 1200px; margin: clamp(16px, 2.4vh, 22px) auto 0;
  font-size: 11.5px; letter-spacing: .02em;
  color: rgba(255,255,255,.4);
}
@media (max-width: 640px) {
  .cw-pie-fila { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cw-pie-enlaces { flex-direction: column; gap: 12px; }
}

/* Nivel 2: el pie va dentro del cierre, pegado a su borde inferior. El
   cierre ocupa exactamente la pantalla y el documento acaba ahí: al llegar,
   ya no se puede bajar más, solo subir o volver al recorrido. */
.cw-n2-cierre { padding-bottom: calc(clamp(40px, 8vh, 96px) + 56px); }
.cw-pie--en-cierre {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: transparent;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 28px;
  padding: 14px var(--margen) 16px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cw-pie--en-cierre .cw-pie-copy { margin: 0; max-width: none; }
@media (max-width: 640px) {
  .cw-n2-cierre { flex-direction: column; padding-bottom: clamp(40px, 8vh, 96px); }
  .cw-pie--en-cierre {
    position: static; margin-top: 36px; padding: 18px 0 0;
    flex-direction: column; align-items: flex-start;
  }
}

/* ============================================================
   VENTANA LEGAL — mismo mecanismo que la ventana de referencias, con
   contenido propio por sección (aviso / privacidad / condiciones).
   ============================================================ */
/* El panel de cookies (CookieConsent) usa un z-index alto (--cc-z-index, ajustado
   a 2000000 en cc-tema.hospitality.css). La ventana legal debe poder abrirse por
   encima de él (enlaces «Política de cookies / privacidad» del banner y del
   consentimiento del formulario), así que se sube por encima de ese valor. */
#cw-legal { z-index: 2000001; }
.cw-legal-caja { max-width: 42rem; max-height: 82vh; }
.cw-legal-caja h3 { margin-bottom: 1.4rem; }
/* Tabla de la Política de cookies (apartado 7 de «Privacidad y cookies»). */
.cw-legal-tabla-wrap { margin: 0 0 .9rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cw-legal-tabla {
  border-collapse: collapse; width: 100%; min-width: 540px;
  font-size: 12.5px; line-height: 1.45;
}
.cw-legal-tabla th, .cw-legal-tabla td {
  border: 1px solid rgba(26,26,26,.14);
  padding: .5rem .6rem; text-align: left; vertical-align: top;
}
.cw-legal-tabla thead th {
  background: rgba(31,44,60,.06); color: var(--tinta);
  font-weight: 700; white-space: nowrap;
}
.cw-legal-tabla td:first-child { font-weight: 700; color: var(--tinta); white-space: nowrap; }
.cw-legal-cuerpo .cw-legal-tabla-nota { font-size: 12.5px; color: var(--tinta-3); }
.cw-legal-cuerpo { color: var(--tinta-2); font-size: 14.5px; line-height: 1.62; }
.cw-legal-cuerpo h4 {
  margin: 1.6rem 0 .6rem; font-size: 13.5px; font-weight: 800;
  letter-spacing: .01em; color: var(--tinta);
}
.cw-legal-cuerpo h4:first-child { margin-top: 0; }
.cw-legal-cuerpo p { margin: 0 0 .9rem; }
.cw-legal-cuerpo ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.cw-legal-cuerpo li { margin-bottom: .35rem; }
.cw-legal-cuerpo li strong, .cw-legal-cuerpo p strong { color: var(--tinta); font-weight: 700; }
.cw-legal-cuerpo a { color: var(--marca); text-decoration: underline; }
.cw-legal-cuerpo a:hover { color: var(--marca-acento); }
.cw-legal-cuerpo .cw-legal-fecha {
  margin-top: 1.6rem; padding-top: 1rem;
  border-top: 1px solid rgba(26,26,26,.12);
  font-size: 12.5px; font-style: italic; color: var(--tinta-3);
}

/* ============================================================
   NIVEL 2
   ============================================================ */
.cw-overlay-n2 { position: fixed; inset: 0; z-index: 40; display: none; background: var(--base); }
html.cw-n2-abierto { overflow: hidden; }
.cw-overlay-n2.cw-abierto { display: block; }
.cw-overlay-n2 iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Sin título dentro de la columna ni indicador debajo: las cajas empiezan
   bajo la cabecera y bajan casi hasta el borde. */
.cw-pagina-n2 { --cw-cajas-bottom: clamp(20px, 5vh, 56px); }
.cw-pagina-n2 .cw-columna-izq { top: var(--cw-cajas-top); }
.cw-pagina-n2 .cw-carril--C { max-height: calc(100vh - 2 * var(--cw-cajas-top)); }
/* En nivel 1 la caja B se estira porque el botón "ver la fuga" se ancla
   abajo con margin-top:auto. Nivel 2 no lleva ese botón: sin este ajuste
   el cristal se estira hasta el borde inferior de la columna con un hueco
   vacío enorme debajo del texto. Aquí se limita a su contenido, con el
   aire normal del padding. */
.cw-pagina-n2 .cw-carril--B > .glass { flex: 0 1 auto; }

/* Cabecera en espejo: la fuga a la izquierda; marca y volver a la derecha. */
.cw-n2-cabecera {
  position: fixed; z-index: 8;
  top: var(--cw-top); left: var(--margen); right: var(--margen);
  height: var(--cw-titulo-alto);
  display: flex; justify-content: space-between; align-items: stretch;
  gap: 1rem;
  pointer-events: none;
}
.cw-n2-titulo {
  display: inline-flex; align-items: center;
  min-width: 0; max-width: min(720px, 62vw);
  padding: 0 22px 0 16px;
  /* Distinto del chip de fase de nivel 1: azul más claro y verdoso, con el
     número en el acento de marca. Se lee "estás dentro de una fuga". */
  background: rgba(52,98,116,.74);
  border-color: rgba(94,182,196,.5);
  transition: opacity .35s ease;
}
.cw-n2-titulo .cw-fase-num { color: var(--marca-acento); }
/* Al llegar el cierre, el título se retira: si no, pisa el panel final. */
.cw-n2-titulo.cw-retirado { opacity: 0; pointer-events: none; }
.cw-n2-titulo .cw-fase-nom {
  text-transform: none; letter-spacing: -.01em;
  font-size: 17px; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-n2-titulo .cw-fase-nom em { display: inline; font-weight: 400; color: rgba(255,255,255,.82); }
.cw-n2-derecha { display: flex; align-items: stretch; gap: 10px; pointer-events: auto; }
.cw-n2-cerrar {
  width: var(--cw-titulo-alto);
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 26px; font-weight: 300; line-height: 1;
  color: #fff; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.cw-n2-cerrar:hover { background: var(--marca-acento); color: var(--marca); }

.cw-n2-momento {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; font-weight: 500;
  color: var(--tinta);
}
.cw-n2-coste {
  margin: 1rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(26,26,26,.12);
  font-size: clamp(15.5px, 1.12vw, 17px); line-height: 1.55;
  color: var(--tinta-2);
}

@media (max-width: 760px) {
  .cw-n2-cabecera { top: 10px; left: 12px; right: 12px; height: 44px; gap: 6px; }
  .cw-n2-derecha { gap: 6px; }
  .cw-n2-titulo { flex: 1 1 auto; max-width: none; padding: 0 10px; }
  .cw-n2-titulo .cw-fase-num { font-size: 18px; padding-right: 8px; margin-right: 8px; }
  /* Marca, idioma y cerrar le dejan poco sitio: se aprieta el aire entre ellos y
     el nombre baja a dos líneas antes de recortarse. */
  .cw-n2-titulo .cw-fase-nom {
    font-size: 13px; line-height: 1.15;
    white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .cw-n2-cabecera .cw-marca { padding: 0 10px; }
  .cw-n2-cabecera .cw-marca img { height: 26px; }
  .cw-n2-cerrar { width: 44px; font-size: 20px; }
}

/* ============================================================
   FAQ — acordeón, al final del recorrido
   ============================================================ */
.cw-faq {
  position: relative; z-index: 8;
  background: var(--base);
  padding: clamp(56px, 9vh, 110px) var(--margen);
}
.cw-faq-cabecera { max-width: 62ch; margin: 0 0 clamp(28px, 4vh, 48px); }
.cw-faq-titulo {
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -.03em;
  margin: .6rem 0 .8rem;
  color: var(--tinta);
}
.cw-faq-titulo em { font-weight: 300; color: var(--tinta-2); }
.cw-faq-entrada {
  font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.62;
  color: var(--tinta-2); margin: 0; max-width: 60ch;
}
.cw-faq-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 clamp(22px, 3vh, 36px);
}
.cw-faq-cat {
  background: none; cursor: pointer;
  border: 1px solid rgba(26,26,26,.18);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-2);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cw-faq-cat:hover { border-color: var(--marca); color: var(--marca); }
.cw-faq-cat.cw-activo {
  background: var(--marca); color: #fff; border-color: var(--marca);
}

.cw-faq-lista { border-top: 1px solid rgba(26,26,26,.14); }
.cw-faq-item { border-bottom: 1px solid rgba(26,26,26,.14); }
.cw-faq-boton {
  width: 100%; display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 28px);
  background: none; border: 0; cursor: pointer;
  padding: clamp(18px, 2.2vh, 26px) 0;
  font-family: inherit; text-align: left;
  color: var(--tinta);
  transition: color .2s ease;
}
.cw-faq-boton:hover { color: var(--cierre); }
.cw-faq-num {
  flex: 0 0 auto;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--tinta-3); padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.cw-faq-pregunta {
  flex: 1 1 auto;
  font-size: clamp(17px, 1.35vw, 20px); font-weight: 700;
  line-height: 1.35; letter-spacing: -.01em;
}
.cw-faq-mas {
  flex: 0 0 auto; width: 22px; height: 22px;
  position: relative; margin-top: 4px;
}
.cw-faq-mas::before, .cw-faq-mas::after {
  content: ''; position: absolute; background: var(--tinta-2);
  transition: transform .3s ease, opacity .3s ease;
}
.cw-faq-mas::before { left: 0; top: 10px; width: 22px; height: 1.5px; }
.cw-faq-mas::after  { left: 10px; top: 0; width: 1.5px; height: 22px; }
.cw-faq-item.cw-abierto .cw-faq-mas::after { transform: rotate(90deg); opacity: 0; }
.cw-faq-respuesta {
  overflow: hidden; max-height: 0;
  transition: max-height .38s cubic-bezier(.2,.7,.2,1);
}
.cw-faq-respuesta p {
  margin: 0 0 clamp(18px, 2.2vh, 26px);
  padding-left: calc(12px + clamp(14px, 2vw, 28px) + 8px);
  max-width: 78ch;
  font-size: 15.5px; line-height: 1.65; color: var(--tinta-2);
}
@media (max-width: 760px) {
  .cw-faq { padding: 56px 16px; }
  .cw-faq-respuesta p { padding-left: 0; }
}

/* ============================================================
   FORMULARIO — sustituye a los CTA
   ============================================================ */
.cw-form {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: center; justify-content: center;
  padding: 5vh 5vw;
  background: rgba(21,30,42,.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cw-form.cw-abierto { display: flex; }
.cw-form-caja {
  background: var(--base);
  border: 1px solid rgba(255,255,255,.9);
  border-top: 3px solid var(--marca-acento);
  border-radius: 10px;
  box-shadow: 0 40px 100px rgba(26,26,26,.28);
  width: 100%; max-width: 34rem;
  max-height: 88vh; overflow-y: auto;
  padding: clamp(24px, 3vw, 38px);
}
.cw-form-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .5rem;
}
.cw-form-titulo {
  font-size: clamp(20px, 2vw, 26px); font-weight: 800;
  letter-spacing: -.022em; margin: 0; color: var(--tinta);
}
.cw-form-cerrar {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid rgba(26,26,26,.18);
  color: var(--tinta-2); font-size: 20px; line-height: 1;
  font-family: inherit;
  transition: background .2s ease, color .2s ease;
}
.cw-form-cerrar:hover { background: var(--marca); color: #fff; border-color: var(--marca); }
.cw-form-entrada {
  font-size: 15px; line-height: 1.55; color: var(--tinta-2);
  margin: 0 0 1.6rem;
}
.cw-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-form-campo { display: block; margin-bottom: 1.1rem; }
.cw-form-campo > span {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--tinta-2); margin-bottom: .45rem;
}
.cw-form-campo input, .cw-form-campo textarea {
  width: 100%;
  font-family: inherit; font-size: 15px; color: var(--tinta);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(26,26,26,.16);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color .2s ease, background .2s ease;
}
.cw-form-campo textarea { resize: vertical; line-height: 1.5; }
.cw-form-campo input::placeholder, .cw-form-campo textarea::placeholder { color: var(--tinta-3); }
.cw-form-campo input:focus, .cw-form-campo textarea:focus {
  outline: none; border-color: var(--marca-acento); background: #fff;
}
.cw-form-check {
  display: flex; gap: 11px; align-items: flex-start;
  margin-bottom: .9rem;
  font-size: 13px; line-height: 1.5; color: var(--tinta-2);
  cursor: pointer;
}
.cw-form-check input {
  flex: 0 0 auto; margin-top: 2px;
  width: 16px; height: 16px; accent-color: var(--marca); cursor: pointer;
}
.cw-form-check a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }
.cw-form-enviar {
  width: 100%; margin-top: .8rem;
  background: var(--marca); color: #fff;
  border: 0; border-radius: 6px; cursor: pointer;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 20px;
  transition: background .25s ease;
}
.cw-form-enviar:hover { background: #26384D; }
.cw-form-enviar:disabled { opacity: .55; cursor: default; }
.cw-form-aviso {
  margin: .9rem 0 0; font-size: 13.5px; line-height: 1.5; min-height: 1em;
}
.cw-form-aviso--ok { color: var(--cierre); font-weight: 700; }
.cw-form-aviso--error { color: var(--fuga); font-weight: 700; }
@media (max-width: 760px) {
  .cw-form-fila { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   MÓVIL — otro mecanismo, no el de escritorio encogido
   ============================================================ */
.mv-raiz {
  position: relative; z-index: 4;
  /* El tono de la fase viva: cuando el escenario se retira al final, lo que
     aparece debajo es el mismo color al que llega su degradado. */
  background: rgb(var(--tono-activo));
  transition: background .75s cubic-bezier(.4,0,.2,1);
  padding-bottom: 30svh;
}

/* Un solo escenario pegado para todo el recorrido: lo que cambia entre
   fases es la capa viva, no el elemento. */
.mv-escenario {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  z-index: 0; background: var(--base);
}
.mv-capa {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .75s cubic-bezier(.4,0,.2,1);
}
.mv-capa.mv-viva { opacity: 1; }
.mv-capa::after {
  content: ''; position: absolute; inset: 0;
  /* El último tramo llega a opaco: el borde inferior del escenario es
     exactamente el color del fondo y la retirada no deja línea. */
  background: linear-gradient(180deg,
    rgba(var(--tono-capa), .12) 0%,
    rgba(var(--tono-capa), .45) 52%,
    rgba(var(--tono-capa), .90) 86%,
    rgb(var(--tono-capa)) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .mv-capa { transition: none; }
}

.mv-flujo {
  position: relative; z-index: 1;
  margin-top: -100svh;            /* el contenido sube sobre el escenario */
}
.mv-fase { position: relative; }
.mv-contenido {
  padding: 16vh 16px 12vh;
  display: flex; flex-direction: column; gap: 16px;
}
.mv-fase--sola .mv-contenido {
  padding: 20vh 16px 14vh;
  gap: clamp(20px, 9vh, 76px);
}

.mv-cabecera { margin-bottom: 6px; }
.mv-fase-num {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 12px;
}
.mv-fase-num b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.mv-fase-sub {
  margin: 0; font-size: 17px; line-height: 1.4; font-weight: 700;
  color: var(--tinta);
}
.mv-tarjeta .cw-tarjeta-fuga { margin-top: 1.1rem; }
.mv-tarjeta .cw-acciones { margin-block: 0; gap: 18px; }
.mv-tarjeta .cw-cifra { font-size: clamp(28px, 8.5vw, 38px); padding-right: 12px; }
.mv-tarjeta .cw-datos--uno .cw-cifra { font-size: clamp(38px, 11vw, 50px); }

/* Revelado por observador, no por rAF: barato y con el scroll nativo. */
.mv-tarjeta, .mv-cabecera {
  opacity: 0; filter: blur(9px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1),
              filter .55s cubic-bezier(.2,.7,.2,1);
}
.mv-tarjeta.mv-visible, .mv-cabecera.mv-visible { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .mv-tarjeta, .mv-cabecera { opacity: 1; filter: none; transition: none; }
}

/* Instrumento pegado arriba: marca, fase, avance y curva, en una línea. */
.mv-barra {
  position: fixed; z-index: 20;
  top: 10px; left: 12px; right: calc(12px + var(--cw-idioma-ancho-movil, 62px) + 8px);
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 10px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.mv-barra.mv-activa { opacity: 1; transform: none; }
.mv-barra.mv-oculta { opacity: 0; transform: translateY(-8px); }
.mv-barra-marca { flex: 0 0 auto; height: 24px; width: auto; }
.mv-barra-fase {
  flex: 1 1 auto; min-width: 0;
  font-size: 11px; font-weight: 700; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  /* Dos líneas antes que un recorte: el selector de idioma le quita sitio a la
     barra, y un nombre largo («Decisión y reserva») baja a la segunda línea
     sin que la barra crezca (el símbolo ya mide 24 px). */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.mv-barra-pista {
  flex: 0 0 30px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.22); position: relative;
}
.mv-barra-avance {
  position: absolute; left: 0; top: 0; height: 3px;
  border-radius: 3px; background: var(--marca-acento); width: 0;
  transition: width .35s ease;
}
.mv-barra-valor {
  flex: 0 0 auto;
  font-size: 17px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* En móvil se apagan el lienzo y la capa de instrumentos de escritorio. */
@media (max-width: 760px) {
  .cw-mount, .cw-lienzo, .cw-velo, #cw-carriles,
  .cw-marca--fija, .cw-lateral, .cw-progreso, .cw-indicador { display: none !important; }
}
@media (min-width: 761px) {
  .mv-raiz, .mv-barra { display: none !important; }
}

/* ============================================================
   CARGA
   ============================================================ */
.cw-cargando {
  position: fixed; inset: 0; z-index: 100;
  background: var(--base);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta-3);
  transition: opacity .6s ease;
}
.cw-cargando.cw-oculto { opacity: 0; pointer-events: none; }

/* Pantallas de escritorio bajas (portátiles de 13–14", ventanas sin
   maximizar): el panel del hero se mide también por la altura, para que
   quepa entero con su botón y no ocupe toda la pantalla. */
@media (min-width: 761px) and (max-height: 900px) {
  .hero-inner { padding-top: 3vh; padding-bottom: 3vh; }
  .hero-panel { padding: clamp(20px, 3.6vh, 44px) clamp(24px, 2.8vw, 48px); }
  .hero-logo { height: clamp(30px, 5.2vh, 50px); margin-bottom: 2.6vh; }
  .hero h1 { font-size: clamp(30px, min(3.8vw, 6.4vh), 62px); margin-bottom: 1.4vh; }
  .hero-subtitular { font-size: clamp(16px, min(1.55vw, 2.9vh), 24px); margin-bottom: 1.8vh; }
  .hero p { font-size: clamp(14px, min(1.1vw, 2.1vh), 17px); line-height: 1.55; margin-bottom: 1.6vh; }
  .hero .hero-remate { font-size: clamp(15px, min(1.2vw, 2.3vh), 19px); margin-bottom: 2.6vh; }
  .hero-cta { padding: 11px 20px 11px 14px; }
  .hero-cta-pista { margin-top: 1vh; }
}

/* ============================================================
   SELECTOR DE IDIOMA · cristal de instrumento, junto a la marca
   ============================================================ */
/* Portada: arriba a la derecha, la marca (que entra al irse el hero) y, a su
   derecha, el selector, siempre presente. En las fugas va dentro de
   .cw-n2-derecha: marca · idioma · cerrar. Es la misma pieza que el
   conmutador Cliente | Hotel, en pequeño: píldora de cristal azul noche y un
   pulgar claro que se desliza hasta el idioma activo. */
.cw-cabecera-dcha {
  position: fixed; z-index: 34;
  top: var(--cw-top); right: var(--margen);
  height: var(--cw-titulo-alto);
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.cw-cabecera-dcha .cw-idioma { pointer-events: auto; }

.cw-idioma { position: relative; flex: 0 0 auto; align-self: center; }
.cw-idioma-boton { display: none; }
.cw-idioma-lista {
  display: flex; align-items: center;
  height: 46px; padding: 4px;
  border-radius: 999px;
}
.cw-idioma-globo {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 0 7px 0 13px;
  fill: none; stroke: rgba(255,255,255,.7);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.cw-idioma-opciones {
  position: relative; height: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.cw-idioma-pulgar {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(100% / 3);
  border-radius: 999px;
  background: #F6F2EA;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.cw-idioma a {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 0 10px;
  border-radius: 999px;
  font: 800 12.5px/1 var(--fuente);
  /* El espaciado de letras deja un hueco al final: el sangrado lo compensa. */
  letter-spacing: .13em; text-indent: .13em; text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,.72);
  transition: color .45s ease;
}
.cw-idioma a:hover { color: #fff; }
.cw-idioma a[aria-current="true"] { color: var(--tinta); }
.cw-idioma a:focus-visible { outline: 2px solid var(--marca-acento); outline-offset: 2px; }
.cw-idioma-nombre { display: none; }

/* El cambio de idioma: un velo de desenfoque (el gesto con el que la web enfoca
   y desenfoca cada caja) tapa el cambio de texto; el nuevo se enfoca solo. */
.cw-idioma-velo {
  position: fixed; inset: 0; z-index: 33; pointer-events: none;
  background-color: rgba(var(--tono-activo), 0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background-color .34s ease, -webkit-backdrop-filter .34s ease, backdrop-filter .34s ease;
}
html.cw-i18n-velo .cw-idioma-velo {
  background-color: rgba(var(--tono-activo), .46);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition-duration: .19s;
}
/* En las fugas la cabecera (z 8) queda por encima del velo. */
.cw-pagina-n2 .cw-idioma-velo { z-index: 7; }
@media (prefers-reduced-motion: reduce) {
  .cw-idioma-velo, .cw-idioma-pulgar { transition: none; }
}

/* Sugerencia de idioma según el navegador («¿Leer en português?»): una sola
   vez, bajo el selector, con el mismo cristal. Entra enfocándose, como las cajas. */
.cw-sugerencia {
  position: fixed; z-index: 40;
  top: calc(var(--cw-top) + var(--cw-titulo-alto) + 12px); right: var(--margen);
  display: flex; align-items: center; gap: 16px;
  padding: 7px 7px 7px 18px;
  opacity: 0; filter: blur(8px); transform: translateY(-6px);
  transition: opacity .5s ease, filter .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.cw-sugerencia.cw-visible { opacity: 1; filter: none; transform: none; }
.cw-sugerencia-texto { margin: 0; font: 600 14.5px/1.2 var(--fuente); color: #fff; white-space: nowrap; }
.cw-sugerencia-botones { display: flex; gap: 4px; }
.cw-sugerencia button {
  height: 36px; min-width: 48px; padding: 0 14px;
  border: 0; border-radius: 5px; cursor: pointer;
  font: 800 12.5px/1 var(--fuente); letter-spacing: .06em;
  transition: background-color .25s ease, color .25s ease;
}
.cw-sugerencia-si { background: #F6F2EA; color: var(--tinta); }
.cw-sugerencia-si:hover { background: #fff; }
.cw-sugerencia-no { background: transparent; color: rgba(255,255,255,.78); }
.cw-sugerencia-no:hover { color: #fff; background: rgba(255,255,255,.1); }
.cw-sugerencia button:focus-visible { outline: 2px solid var(--marca-acento); outline-offset: 2px; }
@media (max-width: 760px) {
  .cw-sugerencia { top: 62px; left: 12px; right: 12px; justify-content: space-between; padding-left: 14px; }
  .cw-sugerencia-texto { white-space: normal; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-sugerencia { transition: none; filter: none; transform: none; }
}

/* Solo para lectores de pantalla: el aviso «Idioma cambiado a…». */
.cw-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Nota de «traducción de cortesía» de la ventana legal. */
.cw-legal-cuerpo .cw-legal-nota {
  margin: 0 0 1.4rem; padding: .7rem .9rem;
  border-left: 3px solid var(--marca-acento); border-radius: 0 4px 4px 0;
  background: rgba(94,182,196,.1);
  font-size: 12.5px; line-height: 1.5; color: var(--tinta-2);
}

/* Fugas: marca · idioma · cerrar. */
.cw-n2-derecha .cw-idioma { align-self: center; }

/* Escritorio estrecho: la marca no se despliega junto al selector (en las
   fugas, además, tiene que dejar sitio al título de la fuga). */
@media (min-width: 761px) and (max-width: 1180px) {
  .cw-cabecera-dcha .cw-marca-texto,
  .cw-n2-derecha .cw-marca-texto { max-width: 0; margin-left: 0; opacity: 0; }
}

/* Tableta vertical y móvil: el selector se pliega en un botón (globo + idioma
   activo) arriba a la derecha; al pulsarlo se abre debajo la lista de idiomas.
   Con la píldora entera, en una fuga el título se quedaba en «El que se…».
   Sin JavaScript no hay botón: la píldora de escritorio se queda tal cual. */
@media (max-width: 960px) {
  .cw-cabecera-dcha .cw-idioma, .cw-n2-derecha .cw-idioma { align-self: stretch; }
  html.con-js .cw-idioma-boton {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 100%; min-width: var(--cw-idioma-ancho-movil, 62px); padding: 0 10px;
    border-radius: 6px; cursor: pointer;
    font: 800 12px/1 var(--fuente); letter-spacing: .12em; text-transform: uppercase;
    color: #fff;
  }
  .cw-idioma-boton .cw-idioma-globo { margin: 0; stroke: #fff; }
  .cw-idioma-boton:focus-visible { outline: 2px solid var(--marca-acento); outline-offset: 2px; }
  html.con-js .cw-idioma-lista {
    position: absolute; top: calc(100% + 8px); right: 0;
    display: block; height: auto; padding: 6px;
    border-radius: 10px;
    /* Una lista sobre texto: más opaca que el cristal de los demás instrumentos. */
    background: rgba(21,30,42,.96);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  html.con-js .cw-idioma.cw-abierto .cw-idioma-lista {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
  }
  html.con-js .cw-idioma-lista > .cw-idioma-globo, html.con-js .cw-idioma-pulgar { display: none; }
  html.con-js .cw-idioma-opciones { display: flex; flex-direction: column; gap: 2px; }
  html.con-js .cw-idioma a {
    justify-content: flex-start; gap: 14px;
    height: 46px; min-width: 176px; padding: 0 14px;
    border-radius: 7px; letter-spacing: .1em; text-indent: 0;
  }
  html.con-js .cw-idioma a[aria-current="true"] { background: #F6F2EA; }
  html.con-js .cw-idioma-nombre { display: inline; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
}
@media (max-width: 760px) {
  .cw-cabecera-dcha { top: 10px; right: 12px; height: 40px; }
  .cw-idioma-lista { height: 40px; }   /* sin JavaScript: la píldora, en pequeño */
}

/* @@SEO · versión de lectura (seo_web.py) */
/* El copy escrito en el HTML para buscadores, asistentes y quien no ejecuta
   JavaScript. Con JavaScript se oculta desde el <head> (clase con-js) y
   pagina-nivel1.js / pagina-nivel2.js la retiran del todo. */
.con-js .cw-lectura { display: none; }
.cw-lectura {
  max-width: 760px; margin: 0 auto; padding: 64px 24px 32px;
  font-size: 16px; line-height: 1.65; color: var(--tinta-2);
}
.cw-lectura h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; color: var(--tinta); margin: .4em 0 .8em; }
.cw-lectura h2 { font-size: 24px; line-height: 1.25; color: var(--tinta); margin: 2.2em 0 .5em; }
.cw-lectura h2 span { font-weight: 400; }
.cw-lectura h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); margin: 1.6em 0 .4em;
}
.cw-lectura h4 { font-size: 18px; color: var(--tinta); margin: .4em 0 .2em; }
.cw-lectura ul { padding-left: 1.2em; }
.cw-lectura li { margin-bottom: .4em; }
.cw-lectura a { color: var(--cierre); }
.cw-lectura-miga { font-size: 13px; color: var(--tinta-3); }
.cw-lectura-remate { font-size: 20px; color: var(--tinta); margin-top: 2em; }
.cw-faq-cat-tit { margin: 2rem 0 .4rem; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.cw-faq-boton .cw-faq-pregunta { font-size: clamp(17px, 1.35vw, 20px); }
/* Sin JavaScript no hay cortina de carga ni revelados que esperen a un script. */
html:not(.con-js) .cw-cargando { display: none; }
html:not(.con-js) .hero-revela { opacity: 1; filter: none; }
html:not(.con-js) .cw-faq-respuesta { max-height: none; }
/* @@FIN SEO */