:root {
  --noche: #0A0A0B;
  --noche-2: #131316;
  --crema: #FAFAF8;
  --crema-suave: #C7C7CC;
  --oro: #8FAECF;
  --oro-hondo: #5E7A99;
  --linea: rgba(255, 255, 255, 0.16);
  --serif: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lento: 900ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  height: 100dvh;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: #000;
  color: var(--crema);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

/* Escenario 16:9 que cabe entero en cualquier pantalla */
.escenario {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100dvw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  background: var(--noche);
  overflow: hidden;
}

.lamina {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  filter: blur(14px);
  transform: scale(1.06);
  transition: opacity 750ms var(--ease), filter 750ms var(--ease), transform 900ms var(--ease);
  padding: 6cqi 7cqi;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lamina.activa { opacity: 1; pointer-events: auto; filter: none; transform: none; }
.lamina.salio { transform: scale(.96); }

/* Fondo de foto con velo */
.fondo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 9s linear;
  z-index: 0;
}
.lamina.activa .fondo { transform: scale(1); }
.velo { position: absolute; inset: 0; z-index: 1; }
.velo-izq { background: linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.6) 45%, rgba(10,10,11,.05) 80%); }
.velo-abajo { background: linear-gradient(0deg, rgba(10,10,11,.94) 0%, rgba(10,10,11,.45) 45%, rgba(10,10,11,.1) 100%); }
.velo-todo { background: rgba(10,10,11,.62); }
.lamina > *:not(.fondo):not(.velo):not(.fuente):not(.puntos):not(.marca):not(.ilustrativa) { position: relative; z-index: 2; }

/* Revelar una cosa a la vez */
.s {
  opacity: 0;
  transform: translateY(1.4cqi) scale(.985);
  filter: blur(6px);
  transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease), filter var(--lento) var(--ease);
}
.s.ver { opacity: 1; transform: none; filter: none; }
.s.apagado { opacity: 0.28; }

/* Tipografía */
.ceja {
  font-size: 1.15cqi;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 600;
  margin-bottom: 1.6cqi;
}
.titulo {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 4.6cqi;
  line-height: 1.08;
  max-width: 62cqi;
}
.titulo em { font-style: normal; color: var(--oro); }
.titulo-xl { font-size: 6.4cqi; }
.bajada {
  font-size: 1.7cqi;
  line-height: 1.45;
  color: var(--crema-suave);
  margin-top: 1.8cqi;
  max-width: 50cqi;
}
.cifra {
  font-family: var(--serif);
  font-size: 11cqi;
  line-height: 0.95;
  color: var(--oro);
  font-variant-numeric: lining-nums tabular-nums;
}
.cifra small { font-size: 0.4em; color: var(--crema); margin-left: 0.4cqi; }
.fuente {
  position: absolute;
  left: 7cqi;
  bottom: 2.6cqi;
  font-size: 0.95cqi;
  color: rgba(250,250,248,.5);
  z-index: 3;
  max-width: 70cqi;
}
.por-confirmar {
  display: inline-block;
  font-size: 0.95cqi;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--linea);
  color: var(--oro);
  padding: 0.4cqi 0.9cqi;
  border-radius: 99px;
  margin-top: 2cqi;
}

/* Portada de capítulo */
.capitulo .numero {
  font-family: var(--serif);
  font-size: 16cqi;
  color: var(--oro);
  line-height: 0.8;
  opacity: 0.9;
}

/* Tres caminos */
.caminos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; margin-top: 3cqi; }
.camino {
  border-top: 1px solid var(--linea);
  padding-top: 1.4cqi;
}
.camino .foto { aspect-ratio: 4 / 3; border-radius: 0.6cqi; background-size: cover; background-position: center; margin-bottom: 1.2cqi; }
.camino b { font-family: var(--serif); font-weight: 500; font-size: 2.3cqi; display: block; }
.camino > span { color: var(--oro); font-size: 1.1cqi; letter-spacing: 0.2em; }

/* Hoteles */
.hoteles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqi; margin-top: 3cqi; }
.hotel {
  aspect-ratio: 3 / 4;
  border-radius: 0.8cqi;
  background: var(--noche-2) center / cover;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linea);
}
.hotel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,.9), rgba(10,10,11,0) 55%); }
.hotel b { position: absolute; left: 1.2cqi; bottom: 1.2cqi; z-index: 1; font-family: var(--serif); font-weight: 500; font-size: 2.2cqi; }

/* Teléfono con dos tarifas */
.tarifas { display: flex; gap: 1.4cqi; margin-top: 2.4cqi; }
.tarifa { border: 1px solid var(--linea); border-radius: 0.8cqi; padding: 1.2cqi 1.6cqi; min-width: 17cqi; }
.tarifa span { display: block; font-size: 1.05cqi; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crema-suave); }
.tarifa b { font-family: var(--serif); font-weight: 500; font-size: 3.2cqi; }
.tarifa.publica b { text-decoration: line-through; text-decoration-thickness: 0.12cqi; color: var(--crema-suave); }
.tarifa.socio { border-color: var(--oro); background: rgba(143,174,207,.1); }
.tarifa.socio b { color: var(--oro); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.9cqi; margin-top: 2.2cqi; }
.chip { border: 1px solid var(--linea); border-radius: 99px; padding: 0.6cqi 1.3cqi; font-size: 1.35cqi; }

/* Embudo de números */
.embudo { display: flex; align-items: flex-end; gap: 3.2cqi; margin-top: 3cqi; }
.paso-num b { font-family: var(--serif); font-weight: 500; font-size: 5.4cqi; display: block; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.paso-num > span { font-size: 1.25cqi; color: var(--crema-suave); letter-spacing: 0.08em; }
.paso-num.oro b { color: var(--oro); }
.flecha { font-size: 3cqi; color: var(--oro-hondo); padding-bottom: 2.2cqi; }
.reparto { display: flex; gap: 2.4cqi; margin-top: 3.4cqi; }
.reparto div { border-left: 2px solid var(--oro); padding-left: 1.2cqi; }
.reparto b { font-family: var(--serif); font-weight: 500; font-size: 2.8cqi; display: block; }
.reparto div > span { font-size: 1.15cqi; color: var(--crema-suave); }

/* Pregunta para Enrique */
.pregunta { align-items: flex-start; }
.pregunta .marca { display: none;
  font-family: var(--serif);
  font-size: 22cqi;
  color: var(--oro);
  position: absolute;
  right: 7cqi;
  top: 50%;
  transform: translateY(-55%);
  opacity: 0.16;
  line-height: 1;
  z-index: 1;
}
.pregunta ol { list-style: none; margin-top: 2.6cqi; display: grid; gap: 1.6cqi; max-width: 66cqi; }
.pregunta li { font-family: var(--serif); font-size: 2.7cqi; line-height: 1.2; padding-left: 4cqi; position: relative; }
.pregunta li::before { content: attr(data-n); position: absolute; left: 0; top: 0.3cqi; font-family: var(--sans); font-size: 1.2cqi; color: var(--oro); border: 1px solid var(--oro); border-radius: 50%; width: 2.4cqi; height: 2.4cqi; display: grid; place-items: center; }

/* Dos columnas foto + texto */
.partida { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqi; align-items: center; height: 100%; }
.partida .retrato { height: 40cqi; max-height: 100%; aspect-ratio: 3 / 4; border-radius: 1cqi; background: center / cover; justify-self: center; max-width: 100%; }
.partida .ancha { aspect-ratio: 3 / 2; height: auto; width: 100%; }

/* Uno atiende a varios */
.mesa { display: grid; grid-template-columns: auto 1fr; gap: 3cqi; align-items: center; margin-top: 2.6cqi; }
.circulo { width: 13cqi; height: 13cqi; border-radius: 50%; background: center / cover; border: 2px solid var(--oro); }
.clientes { display: flex; gap: 1.4cqi; }
.clientes .circulo { width: 8cqi; height: 8cqi; border-width: 1px; border-color: var(--linea); }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; margin-top: 3.4cqi; }
.rol { border-top: 1px solid var(--linea); padding-top: 1.2cqi; }
.rol span { font-size: 1.05cqi; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); }
.rol b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2.3cqi; margin-top: 0.6cqi; }

/* 1,200 opciones */
.puntos { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(40, 1fr); gap: 0.3cqi; padding: 6cqi 5cqi 6cqi 50cqi; align-content: center; }
.puntos i { aspect-ratio: 1; border-radius: 50%; background: rgba(250,250,248,.22); opacity: 0; transition: opacity 400ms; }
.puntos.ver i { opacity: 1; }

/* Logos: muchas marcas, dos dueños */
.duenos { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; margin-top: 2.6cqi; }
.dueno { background: var(--crema); border-radius: 1cqi; padding: 1.8cqi; color: #0A0A0B; }
.dueno .cabeza { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d9cdb4; padding-bottom: 1cqi; margin-bottom: 1.2cqi; }
.dueno .cabeza img { height: 2.6cqi; }
.dueno .cabeza b { font-family: var(--serif); font-size: 3.4cqi; color: #1F2F45; font-weight: 700; }
.dueno .marcas { display: flex; flex-wrap: wrap; gap: 1.2cqi 2cqi; align-items: center; }
.dueno .marcas img { height: 1.9cqi; max-width: 9cqi; object-fit: contain; }

/* Membresías */
.membresias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqi; margin-top: 2.6cqi; align-items: stretch; }
.membresia { border: 1px solid var(--linea); border-radius: 1cqi; padding: 2cqi; display: grid; grid-template-rows: auto auto 1fr; gap: 1cqi; background: rgba(19,19,22,.7); }
.membresia.top { border-color: var(--oro); background: rgba(143,174,207,.08); }
.membresia .plazo { font-size: 1.15cqi; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); }
.membresia .precio { font-family: var(--serif); font-size: 4.4cqi; line-height: 1; }
.membresia .precio small { font-size: 0.35em; color: var(--crema-suave); }
.membresia ul { list-style: none; display: grid; gap: 0.8cqi; font-size: 1.45cqi; align-content: start; }
.membresia li { border-top: 1px solid rgba(250,250,248,.12); padding-top: 0.8cqi; }
.cuota { margin-top: 2cqi; font-size: 1.6cqi; color: var(--crema-suave); }
.cuota b { color: var(--oro); font-family: var(--serif); font-size: 2.4cqi; font-weight: 500; }

/* By ___ */
.by { font-family: var(--serif); font-size: 5.2cqi; line-height: 1.1; margin-top: 2cqi; }
.by .hueco { display: inline-block; min-width: 22cqi; border-bottom: 2px solid var(--oro); color: var(--oro); }
.candidatos { display: flex; gap: 1.6cqi; margin-top: 2.4cqi; }

/* Controles */
.controles { position: fixed; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: 1.2vh 1.6vw; z-index: 10; pointer-events: none; }
.controles button {
  pointer-events: auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: rgba(14,12,9,.55);
  color: var(--oro);
  font-size: 22px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 200ms;
}
.controles button:hover, .controles button:focus-visible { opacity: 1; outline: none; }
.contador { position: fixed; top: 1.4vh; right: 1.6vw; font-size: 12px; letter-spacing: 0.2em; color: rgba(250,250,248,.35); z-index: 10; }
.progreso { position: fixed; left: 0; top: 0; height: 2px; background: var(--oro); z-index: 10; transition: width 500ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .s, .lamina, .fondo { transition: none !important; filter: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Mensualidades en México */
.mexico { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3cqi; margin-top: 2.4cqi; }
.mexico .lado { border: 1px solid var(--linea); border-radius: 1cqi; padding: 2.2cqi; background: rgba(19,19,22,.7); }
.mexico .vacio { border-color: var(--oro); background: rgba(143,174,207,.08); display: flex; flex-direction: column; justify-content: space-between; }
.mexico .etiqueta { font-size: 1.15cqi; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); }
.mexico ul { list-style: none; display: grid; gap: 1.2cqi; margin-top: 1.6cqi; }
.mexico li { border-top: 1px solid rgba(250,250,248,.12); padding-top: 1cqi; }
.mexico li b { display: block; font-family: var(--serif); font-weight: 500; font-size: 2.2cqi; }
.mexico li span { font-size: 1.35cqi; color: var(--crema-suave); }
.mexico .nota { margin-top: 1.6cqi; font-size: 1.5cqi; color: var(--crema); }
.mexico .nadie { font-family: var(--serif); font-style: normal; font-size: 8cqi; color: var(--oro); line-height: 1; }
.lamina > .ilustrativa { position: absolute; right: 7cqi; top: 2.6cqi; z-index: 3; font-size: 0.9cqi; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,250,248,.45); }

/* Transiciones de tecnología: crossfade + blur + magnificación + elemento compartido */
html.vt .lamina { transition: none; }
::view-transition-old(root) { animation: 650ms cubic-bezier(.2,.7,.2,1) both salir-lamina; }
::view-transition-new(root) { animation: 750ms cubic-bezier(.2,.7,.2,1) both entrar-lamina; }
::view-transition-group(*) { animation-duration: 750ms; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
@keyframes salir-lamina { to { opacity: 0; filter: blur(14px); transform: scale(.96); } }
@keyframes entrar-lamina { from { opacity: 0; filter: blur(14px); transform: scale(1.06); } }


/* Cifras explicables: siempre visibles; al tocar, sale de dónde viene */
.explica { cursor: help; text-decoration: underline dotted rgba(143,174,207,.55); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-skip-ink: auto; }
.cifra .explica, .cifra.explica, .paso-num .explica { text-decoration: none; }
.explica:hover { text-decoration-color: #8FAECF; }
.nota-cifra { position: fixed; z-index: 50; max-width: min(420px, 86vw); background: #0e121a; border: 1px solid #8FAECF; border-radius: 14px; padding: 14px 18px 16px; color: #EAF1F8; font: 400 15px/1.45 Inter, sans-serif; box-shadow: 0 18px 50px rgba(0,0,0,.55); opacity: 0; transform: translateY(6px) scale(.98); filter: blur(4px); transition: opacity 260ms, transform 260ms, filter 260ms; pointer-events: none; }
.nota-cifra.ver { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.nota-cifra small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8FAECF; margin-bottom: 6px; }
.nota-cifra b { color: #fff; }
.nota-cifra .cuenta { display: block; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* Foto que se amplía al tocarla */
.visor { position: fixed; inset: 0; z-index: 60; background: rgba(5,6,8,.9); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 300ms; cursor: zoom-out; }
.visor.ver { opacity: 1; pointer-events: auto; }
.visor img { max-width: 92vw; max-height: 90vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: scale(.92); transition: transform 350ms cubic-bezier(.2,.7,.2,1); }
.visor.ver img { transform: none; }

.embudo-chico { gap: 1.4cqi !important; }
.embudo-chico .paso-num b { font-size: 3.6cqi !important; }
.embudo-chico .flecha { font-size: 2.4cqi !important; }

/* KPIs de Quiénes somos */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; }
.kpi { position: relative; overflow: hidden; border: 1px solid rgba(143,174,207,.35); border-radius: 1.4cqi; padding: 2.2cqi 2.2cqi 2.6cqi; background: linear-gradient(160deg, rgba(143,174,207,.14), rgba(10,10,11,.6)); transition: transform 300ms cubic-bezier(.2,.7,.2,1), border-color 300ms, box-shadow 300ms; }
.kpi:hover, .kpi:active { transform: translateY(-.4cqi) scale(1.02); border-color: #8FAECF; box-shadow: 0 1.6cqi 4cqi rgba(143,174,207,.18); }
.kpi b { display: block; font-size: 5.6cqi; line-height: 1; color: #8FAECF; font-variant-numeric: tabular-nums; }
.kpi > span { display: block; margin-top: 1cqi; font-size: 1.5cqi; color: var(--crema-suave); }
.kpi-barra { position: absolute; left: 0; bottom: 0; height: .35cqi; width: 100%; background: linear-gradient(90deg, #8FAECF, rgba(143,174,207,.2)); transform-origin: left; transform: scaleX(0); transition: transform 1400ms cubic-bezier(.2,.7,.2,1) 300ms; }
.kpi.ver .kpi-barra { transform: scaleX(var(--p)); }
.socios { display: flex; align-items: center; gap: 4cqi; margin-top: 3.4cqi; padding-top: 2.2cqi; border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.socios img { width: auto; opacity: .92; }

/* Botón de pantalla completa */
.btn-completa { position: fixed; top: 1.2vh; left: 1.4vw; z-index: 12; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(250,250,248,.25); background: rgba(10,10,11,.55); color: #FAFAF8; display: grid; place-items: center; opacity: .55; transition: opacity 200ms; }
.btn-completa:hover, .btn-completa:active { opacity: 1; }
.btn-completa svg { width: 20px; height: 20px; }
:fullscreen .btn-completa, .standalone .btn-completa { display: none; }

/* Texto de metal con destello (lámina 22), mismo metal que el logo de la entrada */
.metal-texto { font-family: var(--sans); font-weight: 600; font-size: 3.6cqi; letter-spacing: .01em; z-index: 2; white-space: pre-line;
  background: linear-gradient(180deg,#f4f7fb 0%,#c9d3df 38%,#6f7a87 50%,#d9e1ea 62%,#ffffff 78%,#9aa6b4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.metal-texto::after { content: attr(data-texto); position: absolute; inset: 0;
  background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,0) 38%,rgba(255,255,255,.95) 48%,rgba(190,215,245,.9) 52%,rgba(255,255,255,0) 62%,transparent 70%);
  background-size: 250% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.lamina.activa .metal-texto::after { animation: barre-texto 3.2s 1.2s ease-in-out infinite; }
@keyframes barre-texto { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .lamina.activa .metal-texto::after { animation: none; } }

/* Lámina 23 · La plataforma: tres hoteles que se abren al tocar */
.plataforma { justify-content: center; }
.plat-contenido { transition: filter 450ms var(--ease), opacity 450ms var(--ease); }
.plataforma.abierto .plat-contenido { filter: blur(6px); opacity: .25; pointer-events: none; }
.plat-busqueda { display: block; width: 100%; max-width: 74cqi; margin-top: 1.4cqi; border-radius: .8cqi; }
.plat-dato { margin-top: .9cqi; font-size: 1.2cqi; opacity: .75; letter-spacing: .02em; }
.plat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqi; margin-top: 1.8cqi; max-width: 86cqi; }
.plat-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: .4cqi;
  padding: 1.3cqi 1.6cqi; border-radius: 1.2cqi; border: 1px solid rgba(143,174,207,.35);
  background: linear-gradient(160deg, rgba(40,58,82,.55), rgba(12,15,22,.85)); color: var(--crema);
  transition: transform 250ms var(--ease), border-color 250ms var(--ease); min-height: 44px; }
.plat-tile:hover, .plat-tile:focus-visible { transform: translateY(-.3cqi); border-color: #8FAECF; }
.plat-tile:active { transform: scale(.98); }
.plat-tier { font-size: 1cqi; letter-spacing: .24em; text-transform: uppercase; color: #8FAECF; font-weight: 600; }
.plat-nombre { font-size: 1.6cqi; font-weight: 600; }
.plat-precios { font-size: 1.15cqi; opacity: .85; }
.plat-precios s { opacity: .7; margin-right: .6cqi; }
.plat-ahorro { font-size: 3.2cqi; font-weight: 600; line-height: 1; color: #8FAECF; margin-top: .4cqi; }
.plat-nota { font-size: 1.1cqi; opacity: .8; }
.plat-pista { margin-top: 1.4cqi; font-size: 1.1cqi; opacity: .6; }
.plat-zoom { position: absolute !important; left: 50%; top: 50%; width: 72cqi; z-index: 5; cursor: pointer;
  transform: translate(-50%, -50%) scale(.5); opacity: 0;
  transition: transform 550ms cubic-bezier(.2,.8,.2,1), opacity 350ms ease; }
.plat-zoom[hidden] { display: block; visibility: hidden; }
.plat-zoom.ver { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.plat-marca { display: flex; justify-content: center; align-items: center; height: 5cqi; margin-bottom: 1.6cqi; }
.plat-marca img { max-height: 5cqi; max-width: 30cqi; width: auto; }
.plat-marca span { font-size: 2.6cqi; font-weight: 600; letter-spacing: .02em; }
.plat-captura { display: block; width: 100%; border-radius: 1.4cqi; box-shadow: 0 2cqi 5cqi rgba(0,0,0,.6); }
.plat-resumen { text-align: center; margin-top: 1.6cqi; font-size: 1.8cqi; }
.plat-resumen s { opacity: .65; }
.plat-resumen em { color: #8FAECF; font-style: normal; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .plat-zoom, .plat-contenido { transition: none; } }
/* v7: en reposo sólo las tarjetas; al tocar, sólo la foto en grande */
.plataforma .plat-dato { font-size: 1.5cqi; margin-top: 1.4cqi; }
.plataforma .plat-tiles { margin-top: 3.2cqi; gap: 2.4cqi; }
.plataforma .plat-tile { padding: 2.2cqi 2.4cqi; gap: .7cqi; }
.plataforma .plat-tier { font-size: 1.2cqi; }
.plataforma .plat-nombre { font-size: 2cqi; }
.plataforma .plat-precios { font-size: 1.4cqi; }
.plataforma .plat-ahorro { font-size: 4.6cqi; }
.plataforma .plat-nota { font-size: 1.3cqi; }
.plataforma .plat-zoom { width: 84cqi; }
.plataforma.abierto .plat-contenido { filter: blur(10px); opacity: .2; }
.plataforma .plat-ahorro { margin-top: auto; padding-top: .8cqi; }
/* «Nadie.» en el mismo metal con destello */
.mexico .nadie.metal-texto { position: relative; display: inline-block; color: transparent; font-weight: 600; }
/* v9: cada hotel es un KPI con su foto; al tocar, la foto viaja al centro */
.plataforma .plat-busqueda { max-width: 58cqi; margin-top: 1.2cqi; }
.plataforma .plat-dato { font-size: 1.2cqi; margin-top: .7cqi; }
.plataforma .plat-tiles { margin-top: 1.8cqi; gap: 1.8cqi; }
.plataforma .plat-tile { padding: 1.2cqi 1.3cqi 1.4cqi; gap: .4cqi; }
.plat-foto { display: block; width: 100%; border-radius: .7cqi; margin: .5cqi 0 .3cqi; transition: opacity 200ms ease; }
.plataforma .plat-ahorro { font-size: 3.4cqi; margin-top: .4cqi; padding-top: 0; }
.plataforma .plat-nota { font-size: 1.15cqi; }
.plataforma.abierto .plat-tile.origen .plat-foto { opacity: 0; }
.plataforma .plat-zoom { opacity: 1; transition: none; }
.plataforma .plat-zoom.anima { transition: transform 600ms cubic-bezier(.2,.8,.2,1); }