/* ============================================================================
   INMOL · PANEL INTERACTIVO DE FERIA
   estilos.css — Tema claro: blanco y carmesí #E3333E, tomado de inmol.com.bo
   Diseñado para pantalla grande, lectura a distancia y operación táctil.

   Las secciones de contenido son claras, como la web. Las que van sobre una
   fotografía —el modo atracción y las tarjetas de proyecto— mantienen texto
   blanco sobre un velo oscuro, que es como se leen las fotos de dron.
   ============================================================================ */

:root {
  /* Marca (valores exactos del sitio) */
  --rojo:        #E3333E;
  --rojo-vivo:   #C81E29;
  --rojo-tenue:  rgba(227, 51, 62, 0.10);

  /* Fondos */
  --fondo:        #F7FAFC;   /* el mismo del body de inmol.com.bo */
  --superficie:   #FFFFFF;
  --superficie-2: #FFFFFF;
  --superficie-3: #EDF2F7;

  /* Texto */
  --texto:   #000000;
  --texto-2: #2D3748;
  --texto-3: #4A5568;
  --texto-4: #8A94A6;

  /* Superficies */
  --linea:    rgba(0, 0, 0, 0.10);
  --linea-2:  rgba(0, 0, 0, 0.18);
  --vidrio:   rgba(0, 0, 0, 0.025);
  --vidrio-2: rgba(0, 0, 0, 0.05);

  /* Sombras: en tema claro reemplazan a los bordes para dar relieve */
  --sombra:    0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06);
  --sombra-lg: 0 4px 10px rgba(16, 24, 40, .07), 0 18px 50px rgba(16, 24, 40, .12);

  /* Estados (ajustados para leerse sobre blanco) */
  --verde:       #1E9E5A;
  --ambar:       #C47F14;

  /* Tarjeta del asistente: fija, siempre visible, separada del borde */
  --asis-ancho:  27rem;
  --asis-alto:   24rem;
  --asis-margen: 1.5rem;

  /* Ritmo */
  --r:           16px;
  --r-sm:        10px;
  --transicion:  620ms cubic-bezier(.16,.84,.30,1);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Todo el panel escala con el LADO MÁS LARGO de la pantalla, no con el ancho.
     Es la misma pantalla física girada: un tótem vertical de 43" tiene la misma
     densidad de píxeles que uno horizontal, así que el texto debe medir lo mismo
     en píxeles. Escalando por el ancho, en vertical la letra se achicaba a la
     mitad justo cuando más grande tiene que estar. */
  /* El tope de 40px permite que un tótem 4K (2160x3840) muestre el texto al
     mismo tamaño físico que uno Full HD del mismo tamaño de pantalla. */
  font-size: clamp(13px, max(0.86vw, 0.86vh), 40px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter Tight', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* En el kiosco no se ve el cursor. Comentar esta regla para probar con mouse. */
body.kiosco, body.kiosco * { cursor: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

/* El atributo hidden debe ganarle a cualquier display declarado después. */
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea-2); border-radius: 4px; }

/* --- Pantallas ----------------------------------------------------------- */
.pantalla {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(1.015);

  /* Dos correcciones críticas para que la pantalla completa sea tocable:

     1) `pointer-events: none`. Sin esto una pantalla oculta seguía
        interceptando los toques: `visibility` es heredable y un hijo puede
        reactivarla (lo hace .pane.activa), así que #proyecto, invisible,
        se comía todos los toques de la mitad inferior de la pantalla.

     2) `visibility` NO se interpola. Antes formaba parte de la transición, y
        eso hacía que la pantalla dependiera de que el navegador animara para
        volverse visible. Si no compone cuadros —pestaña en segundo plano,
        equipo lento, animaciones reducidas— la transición no avanza y la
        pantalla queda invisible e inerte. Ahora conmuta al instante al
        mostrarse, y sólo se retrasa al ocultarse, cuando ya terminó el fundido. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion),
              visibility 0s linear var(--transicion);
}
.pantalla.activa {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity var(--transicion), transform var(--transicion),
              visibility 0s linear 0s;
}

/* ============================================================================
   1. MODO ATRACCIÓN
   ============================================================================ */
/* El modo atracción va sobre fotografía de dron: un velo blanco de punta a
   punta apaga la foto casi entera, así que ahí se mantiene oscuro con texto
   claro — es la única zona del panel que no usa el tema claro. */
#atraccion { background: #08080A; color: #FFFFFF; }
#atraccion .atr-lema,
#atraccion .atr-dato span   { color: rgba(255,255,255,.62); }
#atraccion .atr-claim,
#atraccion .atr-toque       { color: rgba(255,255,255,.88); }
#atraccion .atr-titulo,
#atraccion .atr-dato b      { color: #FFFFFF; }
#atraccion .atr-lema        { border-left-color: rgba(255,255,255,.22); }
#atraccion .atr-datos       { border-top-color: rgba(255,255,255,.22); }
#atraccion .atr-punto       { background: rgba(255,255,255,.28); }

.atr-fondo {
  position: absolute; inset: 0;
  overflow: hidden;
}
.atr-fondo > img, .atr-fondo > canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1600ms ease;
  will-change: transform, opacity;
}
.atr-fondo > .visible {
  opacity: 1;
  animation: kenburns 16s ease-out forwards;
}
/* El encuadre se desplaza para que el predio quede a la derecha del título */
@keyframes kenburns {
  from { transform: scale(1.24) translate3d(10%, 1.5%, 0); }
  to   { transform: scale(1.38) translate3d(14%, -1.5%, 0); }
}
body.sin-animacion .atr-fondo > .visible {
  transform: scale(1.28) translate3d(12%, 0, 0);
}

.atr-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.16) 36%, rgba(8,8,10,.42) 70%, rgba(8,8,10,.90) 100%),
    linear-gradient(96deg, rgba(8,8,10,.93) 0%, rgba(8,8,10,.74) 38%, rgba(8,8,10,.16) 72%, rgba(8,8,10,.05) 100%);
}
.atr-grano {
  position: absolute; inset: 0;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.atr-top {
  position: relative;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 2.6rem 3.6rem;
}
.marca { height: 4.4rem; width: auto; object-fit: contain; }
.atr-lema, .barra-lema {
  font-size: .84rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 500;
  padding-left: 1.6rem; border-left: 1px solid var(--linea);
}

.atr-centro {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 3.6rem;
  max-width: 62%;
}
.atr-kicker {
  font-size: .82rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--rojo); font-weight: 600; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: .9rem;
}
.atr-kicker::before {
  content: ''; width: 3rem; height: 2px; background: var(--rojo); display: block;
}
.atr-titulo {
  font-size: 5.4rem; line-height: .96; font-weight: 600;
  letter-spacing: -.035em; margin-bottom: 1.4rem;
  text-wrap: balance;
}
.atr-claim {
  font-size: 1.55rem; font-weight: 300; color: var(--texto-2);
  max-width: 34ch; line-height: 1.42;
}
.atr-datos {
  display: flex; gap: 3.4rem; margin-top: 3.2rem;
  padding-top: 2.2rem; border-top: 1px solid var(--linea);
}
.atr-dato b {
  display: block; font-size: 2.25rem; font-weight: 600; letter-spacing: -.025em;
}
.atr-dato span {
  display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3); margin-top: .35rem;
}

/* Animación de entrada del texto */
.atr-anim > * { opacity: 0; transform: translateY(1.4rem); }
.atr-anim.entrar > * { animation: subir 900ms cubic-bezier(.16,.84,.3,1) forwards; }
.atr-anim.entrar > *:nth-child(1) { animation-delay: 60ms; }
.atr-anim.entrar > *:nth-child(2) { animation-delay: 160ms; }
.atr-anim.entrar > *:nth-child(3) { animation-delay: 260ms; }
.atr-anim.entrar > *:nth-child(4) { animation-delay: 380ms; }
@keyframes subir { to { opacity: 1; transform: none; } }

.atr-pie {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.4rem 3.6rem 2.8rem;
}
.atr-toque {
  display: flex; align-items: center; gap: 1rem;
  font-size: 1.02rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-2); font-weight: 500;
}
.pulso {
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--rojo); position: relative; flex: none;
}
.pulso::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--rojo); animation: pulsar 2.1s ease-out infinite;
}
@keyframes pulsar {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(3.4); opacity: 0; }
}
.atr-puntos { display: flex; gap: .7rem; }
.atr-punto {
  width: 2.6rem; height: 3px; background: var(--linea-2); border-radius: 2px;
  overflow: hidden; position: relative;
}
.atr-punto.on::after {
  content: ''; position: absolute; inset: 0; background: var(--rojo);
  transform-origin: left; transform: scaleX(1);
  animation: barra var(--dur, 9s) linear forwards;
}
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================================
   2. MENÚ
   ============================================================================ */
#menu {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(227,51,62,.07) 0%, transparent 60%),
    var(--fondo);
}

/* Las tarjetas de proyecto son fotografías: el degradado sobre la foto se
   mantiene oscuro (uno blanco la apagaría casi entera) y el texto en blanco. */
.tarjeta,
.tarjeta .tj-nombre,
.tarjeta .tj-dato b   { color: #FFFFFF; }
.tarjeta .tj-sub      { color: rgba(255,255,255,.78); }
.tarjeta .tj-dato span{ color: rgba(255,255,255,.62); }
.tarjeta .tj-datos    { border-top-color: rgba(255,255,255,.24); }
.tarjeta .tj-flecha   { border-color: rgba(255,255,255,.42); color: #FFFFFF; }

.barra {
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1.7rem 3.4rem;
  border-bottom: 1px solid var(--linea);
  flex: none;
}

.menu-intro { padding: 3.2rem 3.4rem 2.2rem; }
.menu-intro h1 {
  font-size: 3.5rem; font-weight: 600; letter-spacing: -.032em; line-height: 1;
}
.menu-intro p {
  font-size: 1.12rem; color: var(--texto-3); margin-top: .85rem; font-weight: 300;
}

.tarjetas {
  flex: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  padding: 0 3.4rem 2rem;
  min-height: 0;
}

.tarjeta {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: left;
  transition: transform 420ms cubic-bezier(.16,.84,.3,1), border-color 420ms, box-shadow 420ms;
  will-change: transform;
}
.tarjeta > img, .tarjeta > canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .82;
  transition: transform 900ms cubic-bezier(.16,.84,.3,1), opacity 500ms;
}
.tarjeta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,.12) 0%, rgba(8,8,10,.62) 46%, rgba(8,8,10,.96) 100%);
}
.tarjeta:active { transform: scale(.985); }
.tarjeta.pulsada { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo), 0 24px 70px rgba(227,51,62,.20); }
.tarjeta.pulsada > img, .tarjeta.pulsada > canvas { transform: scale(1.08); opacity: .75; }

.tj-cuerpo { position: relative; z-index: 2; padding: 2.6rem 2.2rem 2.2rem; }
.tj-tipo {
  display: inline-block; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rojo); font-weight: 600; margin-bottom: 1rem;
  padding: .42rem .8rem; border: 1px solid rgba(227,51,62,.35);
  border-radius: 100px; background: var(--rojo-tenue);
}
.tj-nombre {
  font-size: 2.05rem; font-weight: 600; letter-spacing: -.028em; line-height: 1.05;
  margin-bottom: .5rem; text-wrap: balance;
}
.tj-sub { font-size: .95rem; color: var(--texto-3); font-weight: 300; }
.tj-datos {
  display: flex; gap: 2rem; margin-top: 1.8rem;
  padding-top: 1.4rem; border-top: 1px solid var(--linea);
}
.tj-dato b { display: block; font-size: 1.28rem; font-weight: 600; }
.tj-dato span {
  display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-4); margin-top: .2rem;
}
.tj-flecha {
  position: absolute; z-index: 2; right: 2.2rem; bottom: 2.4rem;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  border: 1px solid var(--linea-2);
  display: grid; place-items: center;
  color: var(--texto);
  transition: background 420ms, border-color 420ms, transform 420ms;
}
.tarjeta.pulsada .tj-flecha { background: var(--rojo); border-color: var(--rojo); transform: translateX(4px); }
.tj-pendiente {
  position: absolute; z-index: 3; top: 1.8rem; right: 1.8rem;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem .75rem; border-radius: 100px;
  background: rgba(255,255,255,.16); color: #FFFFFF;
  border: 1px solid var(--linea);
}

.pie {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.5rem 3.4rem 1.9rem;
  border-top: 1px solid var(--linea);
  font-size: .88rem; color: var(--texto-3); letter-spacing: .07em;
  flex: none;
}
.pie-sep { width: 1px; height: 1rem; background: var(--linea-2); }

/* ============================================================================
   3. PROYECTO
   ============================================================================ */
#proyecto { background: var(--fondo); }

.barra-proy { justify-content: space-between; gap: 2rem; }
.btn-volver {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1rem; font-weight: 500; letter-spacing: .04em;
  color: var(--texto-2);
  padding: .8rem 1.4rem .8rem 1rem;
  border: 1px solid var(--linea); border-radius: 100px;
  transition: background 280ms, border-color 280ms, color 280ms;
  flex: none;
}
.btn-volver:active { background: var(--vidrio-2); color: var(--texto); border-color: var(--linea-2); }

.proy-id { text-align: center; flex: 1; }
.proy-id h2 { font-size: 1.9rem; font-weight: 600; letter-spacing: -.024em; line-height: 1.1; }
.proy-id span {
  display: block; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-3); margin-top: .3rem;
}
.marca-mini { height: 3.2rem; opacity: 1; flex: none; }

/* --- Pestañas ------------------------------------------------------------ */
.tabs {
  display: flex; gap: .5rem;
  padding: 1.3rem 3.4rem;
  border-bottom: 1px solid var(--linea);
  flex: none;
}
.tab {
  display: flex; align-items: center; gap: .65rem;
  padding: .95rem 1.7rem;
  border-radius: 100px;
  font-size: 1.02rem; font-weight: 500; letter-spacing: .01em;
  color: var(--texto-3);
  border: 1px solid transparent;
  transition: color 300ms, background 300ms, border-color 300ms;
}
.tab svg { opacity: .75; }
.tab.activa {
  color: var(--texto);
  background: var(--rojo-tenue);
  border-color: rgba(227,51,62,.42);
}
.tab.activa svg { opacity: 1; color: var(--rojo); }

/* --- Contenedor de paneles ---------------------------------------------- */
.contenido { position: relative; flex: 1; min-height: 0; }
.pane {
  position: absolute; inset: 0;
  padding: 2.4rem 3.4rem 2.6rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(1.1rem);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(.16,.84,.3,1),
              visibility 0s linear 460ms;
  overflow: auto;
}
/* El selector DEBE incluir `.pantalla.activa`. Si sólo dijera `.pane.activa`,
   el panel de contenido reactivaría `visibility` y `pointer-events` dentro de
   una pantalla oculta —ambas propiedades se heredan y un hijo puede
   sobreescribirlas— y esa pantalla invisible se comería todos los toques de la
   mitad inferior. Ese fue exactamente el bug: sólo respondía la franja
   superior de la pantalla. */
.pantalla.activa .pane.activa {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 460ms ease, transform 460ms cubic-bezier(.16,.84,.3,1),
              visibility 0s linear 0s;
}

.titulo-bloque {
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 600; margin-bottom: 1.1rem;
}

/* --- Pane: RESUMEN ------------------------------------------------------- */
.resumen-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.2rem;
  align-items: start;
}
.claim {
  font-size: 2.5rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.14;
  margin-bottom: 1.5rem; text-wrap: balance;
}
.descripcion {
  font-size: 1.16rem; font-weight: 300; line-height: 1.62; color: var(--texto-2);
  max-width: 46ch; margin-bottom: 2.6rem;
}
.servicios { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.6rem; }
.servicios li {
  display: flex; align-items: center; gap: .8rem;
  font-size: 1.02rem; color: var(--texto-2); font-weight: 400;
  padding: .55rem 0;
}
.servicios li::before {
  content: ''; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--rojo); flex: none;
}

.resumen-galeria {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  align-content: start;
}
.foto {
  position: relative; border-radius: var(--r-sm); overflow: hidden;
  background: var(--superficie-3);
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 3;
  display: grid; place-items: end start;
}
/* El video del proyecto encabeza la galería, a doble ancho */
.foto-video, .foto:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.foto img, .foto video, .foto canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-etq {
  position: relative; z-index: 2;
  margin: .9rem;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: #000000; font-weight: 600;
  padding: .45rem .9rem; border-radius: 100px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
}

/* --- Botón de recorrido virtual 360° -------------------------------------- */
.btn-tour360 {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  width: 100%; margin-top: 1.8rem;
  padding: 1.1rem 1.6rem;
  border-radius: 100px;
  background: var(--rojo); color: #fff;
  font-size: 1.02rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: var(--sombra-lg);
  transition: filter 260ms, transform 260ms;
}
.btn-tour360:active { transform: scale(.985); filter: brightness(1.1); }

/* --- Overlay del recorrido: pantalla completa, fondo negro (es una foto
   envolvente, un velo claro se la comería toda). ---------------------------- */
.tour-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: #000000;
}
.tour-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.tour-cerrar {
  position: absolute; z-index: 201; top: 1.6rem; right: 1.6rem;
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
}
.tour-cerrar:active { background: var(--rojo); }

.destacados {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--linea);
}
.dest {
  padding: 1.5rem 1.6rem;
  background: var(--vidrio); border: 1px solid var(--linea);
  border-radius: var(--r-sm);
}
.dest b {
  display: block; font-size: 2.35rem; font-weight: 600; letter-spacing: -.03em; line-height: 1;
}
.dest span {
  display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3); margin-top: .6rem;
}

/* --- Pane: UBICACIÓN (satelital) ---------------------------------------- */
/* La sección de ubicación es el mapa y nada más: los controles van encima,
   flotando, para que la imagen use todo el ancho de la pantalla. */
.pane-mapa { padding: 1.5rem 1.6rem 1.7rem; overflow: hidden; }
.pane-mapa .sat-escenario { height: 100%; }

.sat-escenario {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linea);
}
.sat-hud {
  position: absolute; z-index: 5; left: 1.8rem; top: 1.7rem;
  padding: 1rem 1.5rem;
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px);
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  box-shadow: var(--sombra-lg);
  max-width: 23rem;
}
.sat-nivel-nombre {
  font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em;
}
.sat-nivel-det { font-size: .8rem; color: var(--texto-3); margin-top: .2rem; }

.sat-coord {
  position: absolute; z-index: 5; left: 1.8rem; bottom: 1.7rem;
  font-size: .82rem; letter-spacing: .08em; color: var(--texto-2);
  padding: .6rem 1.1rem;
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px);
  border: 1px solid var(--linea); border-radius: 100px;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sombra);
}
/* Arriba a la derecha: abajo chocaba con el aviso de datos de ejemplo */
.sat-atrib {
  position: absolute; z-index: 5; right: 1.6rem; top: 1.7rem;
  font-size: .66rem; letter-spacing: .1em; color: rgba(0,0,0,.45);
}

/* Barra de controles flotante, centrada al pie del mapa */
.sat-controles {
  position: absolute; z-index: 6;
  left: 50%; bottom: 1.7rem; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: .5rem;
  padding: .5rem;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
  border: 1px solid var(--linea-2); border-radius: 100px;
  box-shadow: var(--sombra-lg);
  max-width: calc(100% - 3.4rem);
}
.sat-nivel {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1.25rem;
  border: 1px solid transparent; border-radius: 100px;
  background: transparent;
  text-align: left; white-space: nowrap;
  transition: background 320ms, border-color 320ms;
}
.sat-nivel i {
  font-style: normal; font-size: .74rem; font-weight: 700;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: rgba(0,0,0,.06); color: rgba(0,0,0,.55);
  transition: background 320ms, color 320ms;
}
.sat-nivel b { display: block; font-size: 1rem; font-weight: 500; color: var(--texto-2); }
/* El detalle de cada nivel ya se muestra en el rótulo del mapa */
.sat-nivel span { display: none; }
.sat-nivel.activo { background: var(--rojo-tenue); border-color: rgba(227,51,62,.45); }
.sat-nivel.activo i { background: var(--rojo); color: #fff; }
.sat-nivel.activo b { color: var(--texto); }

.btn-accion {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .75rem 1.5rem;
  border-radius: 100px;
  background: var(--rojo); color: #fff;
  font-size: .98rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  transition: filter 260ms, transform 260ms;
}
.btn-accion:active { transform: scale(.98); filter: brightness(1.12); }
.btn-accion[disabled] { opacity: .45; }

.sat-dir-txt {
  font-size: .92rem; color: var(--texto-2); line-height: 1.45; font-weight: 300;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--linea);
  max-width: 22ch;
}

/* --- Pane: REFERENCIAS --------------------------------------------------- */
.refs-wrap { display: grid; grid-template-columns: 1fr 22rem; gap: 1.6rem; height: 100%; }
.refs-mapa {
  border-radius: var(--r); border: 1px solid var(--linea);
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(227,51,62,.05) 0%, transparent 70%),
    var(--superficie);
  display: grid; place-items: center; padding: 1rem; min-height: 0;
}
.refs-svg { width: 100%; height: 100%; max-height: 100%; }
.refs-svg .anillo { fill: var(--texto-4); font-size: 13px; letter-spacing: .1em; font-family: inherit; }
.refs-svg .ref-nombre { fill: var(--texto); font-size: 16px; font-weight: 500; font-family: inherit; }
.refs-svg .ref-dist { fill: var(--texto-3); font-size: 14px; font-family: inherit; letter-spacing: .06em; }
.refs-svg .ref-centro-txt { fill: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em; font-family: inherit; }
.refs-svg .ref-centro circle:first-child { animation: latir 3s ease-in-out infinite; transform-origin: center; }
@keyframes latir { 0%,100% { opacity: .5; r: 46; } 50% { opacity: .15; r: 62; } }

.refs-lista ul { display: flex; flex-direction: column; gap: .55rem; }
.refs-lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.2rem;
  background: var(--vidrio); border: 1px solid var(--linea); border-radius: var(--r-sm);
}
.refs-lista li b { font-size: 1.02rem; font-weight: 500; }
.refs-lista li span {
  font-size: .92rem; color: var(--rojo); font-weight: 600;
  font-variant-numeric: tabular-nums; flex: none;
}

/* --- Pane: LOTES --------------------------------------------------------- */
.lotes-wrap { display: grid; grid-template-columns: 1fr 20rem; gap: 1.6rem; height: 100%; }
.lotes-mapa { display: flex; flex-direction: column; gap: 1.2rem; min-height: 0; }

.lotes-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap;
}
.leyenda { display: flex; gap: 1.6rem; }
.lg {
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem; color: var(--texto-2);
}
.lg i { width: .85rem; height: .85rem; border-radius: 3px; display: block; flex: none; }
.lg-disponible i { background: var(--verde); }
.lg-reservado  i { background: var(--ambar); }
.lg-vendido    i { background: #B4BCC8; }
.lg b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }

.filtros { display: flex; gap: .5rem; }
.filtro {
  padding: .6rem 1.15rem; border-radius: 100px;
  font-size: .88rem; font-weight: 500; color: var(--texto-3);
  border: 1px solid var(--linea); background: var(--vidrio);
  transition: all 280ms;
}
.filtro.activo { color: var(--texto); background: var(--rojo-tenue); border-color: rgba(227,51,62,.45); }

.plano-cont {
  flex: 1; min-height: 0;
  border-radius: var(--r); border: 1px solid var(--linea);
  background: var(--superficie);
  display: grid; place-items: center; padding: 1.2rem;
  overflow: hidden;
}
.plano-svg { width: 100%; height: 100%; max-height: 100%; }
.plano-svg .lote { transition: opacity 300ms; }
.plano-svg .lote rect { transition: fill-opacity 220ms, stroke-width 220ms; }
.plano-svg .lote-num {
  fill: rgba(255,255,255,.92); font-size: 13px; font-family: inherit;
  font-weight: 500; pointer-events: none;
}
.plano-svg .mz-label {
  fill: var(--texto-4); font-size: 12px; letter-spacing: .16em;
  font-family: inherit; font-weight: 600;
}
.plano-svg .norte { fill: var(--texto-4); font-size: 13px; letter-spacing: .12em; font-family: inherit; }
/* Los vendidos son gris claro: su número va oscuro para poder leerse */
.plano-svg .lote[data-estado="vendido"] .lote-num { fill: rgba(0,0,0,.5); }
.plano-svg .lote.apagado { opacity: .16; }
.plano-svg .lote.sel rect { stroke: #fff; stroke-width: 2.6; fill-opacity: 1; }

/* --- Plano real de INMOL: visor Leaflet (ver MapaPlano en mapas.js) ------
   Leaflet toma #planoCont directamente como su contenedor (le agrega la
   clase .leaflet-container solo): ahí se anula el padding/centrado pensado
   para el plano esquemático estático, para que el mapa ocupe todo el hueco. */
#planoCont.leaflet-container {
  padding: 0; display: block;
  background: var(--superficie); border-radius: var(--r-sm);
}

.lote-ficha {
  border-radius: var(--r); border: 1px solid var(--linea);
  background: var(--superficie);
  padding: 2rem 1.8rem;
  display: flex; flex-direction: column;
}
.ficha-vacia {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; color: var(--texto-4); text-align: center;
}
.ficha-vacia p { font-size: 1rem; line-height: 1.5; }
.ficha-estado {
  display: inline-block; align-self: flex-start;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  padding: .45rem .9rem; border-radius: 100px; margin-bottom: 1.2rem;
}
.ficha-estado.disponible { background: rgba(53,179,107,.16); color: #56D68C; border: 1px solid rgba(53,179,107,.4); }
.ficha-estado.reservado  { background: rgba(224,163,58,.16); color: #F0BC5E; border: 1px solid rgba(224,163,58,.4); }
.ficha-estado.vendido    { background: rgba(0,0,0,.05); color: var(--texto-3); border: 1px solid var(--linea-2); }
.ficha-estado.unidad     { background: rgba(62,124,184,.16); color: #4E8FD1; border: 1px solid rgba(62,124,184,.4); }
.ficha-codigo {
  font-size: 2.5rem; font-weight: 600; letter-spacing: -.03em;
  margin-bottom: 1.8rem; font-variant-numeric: tabular-nums;
}
.ficha-fila {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 1rem 0; border-top: 1px solid var(--linea);
}
.ficha-fila span { font-size: .92rem; color: var(--texto-3); }
.ficha-fila b { font-size: 1.15rem; font-weight: 600; }
.ficha-nota {
  margin-top: auto; padding-top: 1.6rem;
  font-size: .85rem; line-height: 1.55; color: var(--texto-4);
  border-top: 1px solid var(--linea);
}

/* --- Pane: FICHA TÉCNICA -------------------------------------------------- */
.ficha-wrap { display: grid; grid-template-columns: 1fr 22rem; gap: 2.4rem; align-items: start; }

.ficha-tabla { width: 100%; border-collapse: collapse; }
.ficha-tabla tr { border-bottom: 1px solid var(--linea); }
.ficha-tabla tr:last-child { border-bottom: none; }
.ficha-tabla th {
  text-align: left; vertical-align: top;
  width: 38%; padding: 1.15rem 1.4rem 1.15rem 0;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 600;
}
.ficha-tabla td {
  padding: 1.05rem 0;
  font-size: 1.32rem; font-weight: 500; color: var(--texto);
  line-height: 1.35;
}

/* Ficha oficial completa, en secciones numeradas (ver llenarFicha en app.js).
   Rejilla en vez de columnas CSS: con columnas el navegador llena la primera
   de arriba abajo y las secciones quedaban 1-6 a la izquierda y 7-10 a la
   derecha, así que había que bajar y volver a subir para seguir leyendo. Con
   la rejilla el orden es el natural: 1-2, 3-4, 5-6… */
.ficha-detalle {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem; align-items: start;
}
@media (max-aspect-ratio: 1/1) { .ficha-detalle { grid-template-columns: 1fr; } }

.fg {
  margin: 0; padding: 1.25rem 1.4rem;
  background: var(--superficie); border-radius: var(--r-sm); box-shadow: var(--sombra);
}
.fg-titulo {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .9rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--linea);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2);
}
.fg-titulo i {
  flex: none; display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--rojo); color: #FFFFFF;
  font-size: .8rem; font-weight: 700; font-style: normal; letter-spacing: 0;
}

.fg-tabla { width: 100%; border-collapse: collapse; }
.fg-tabla tr + tr th, .fg-tabla tr + tr td { border-top: 1px solid var(--linea); }
.fg-tabla th {
  text-align: left; vertical-align: top; width: 40%;
  padding: .6rem .9rem .6rem 0;
  font-size: .82rem; font-weight: 500; color: var(--texto-3); line-height: 1.4;
}
.fg-tabla td {
  padding: .6rem 0;
  font-size: .95rem; font-weight: 500; color: var(--texto); line-height: 1.45;
}

.fg-lista { margin: 0; padding: 0; list-style: none; }
.fg-lista li {
  position: relative; padding: .34rem 0 .34rem 1.1rem;
  font-size: .95rem; color: var(--texto); line-height: 1.45;
}
/* Viñeta propia: un punto rojo chico, más discreto que el marcador del sistema */
.fg-lista li::before {
  content: ''; position: absolute; left: 0; top: .82em;
  width: .32rem; height: .32rem; border-radius: 50%; background: var(--rojo);
}

.ficha-lado { display: flex; flex-direction: column; gap: 1.6rem; }
.ficha-destacado { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.fd {
  padding: 1.2rem 1.3rem; border-radius: var(--r-sm);
  background: var(--superficie); box-shadow: var(--sombra);
}
.fd b { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.fd span {
  display: block; margin-top: .45rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3);
}
.ficha-pie {
  font-size: .92rem; line-height: 1.55; color: var(--texto-3);
  padding-top: 1.3rem; border-top: 1px solid var(--linea);
}

/* --- Chips sobre el mapa: paneles claros con blur, texto oscuro, igual que
   el resto del tema. ------------------------------------------------------ */
.sat-hud, .sat-coord, .sat-controles { color: var(--texto); }
.sat-hud .sat-nivel-nombre  { color: var(--texto); }
.sat-hud .sat-nivel-det     { color: var(--texto-3); }
.sat-hud .sat-dir-txt       { color: var(--texto-2); border-top-color: var(--linea); }
.sat-coord                  { color: var(--texto-2); }
.sat-controles .sat-nivel b { color: var(--texto-3); }
.sat-controles .sat-nivel.activo b { color: var(--texto); }

/* --- Lista de puntos de referencia dentro de la ficha de ubicación -------- */
.sat-refs {
  margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: .1rem;
  max-height: 22rem; overflow: auto;
}
.sat-refs li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem;
  padding: .55rem .7rem; border-radius: 8px;
  cursor: pointer; transition: background 220ms;
}
.sat-refs li:active, .sat-refs li.activa { background: var(--rojo-tenue); }
.sat-refs li b { font-size: .95rem; font-weight: 500; color: var(--texto); }
.sat-refs li span {
  font-size: .85rem; font-weight: 600; color: var(--rojo-vivo);
  font-variant-numeric: tabular-nums; flex: none;
}
.sat-refs li.activa span { color: var(--rojo-vivo); }

/* --- Mapa real (Leaflet + OpenStreetMap) ---------------------------------
   `position: absolute; inset: 0` es imprescindible: sin eso el contenedor
   queda con altura 0 y Leaflet no dibuja ninguna tesela. */
.mapa-real { position: absolute; inset: 0; z-index: 3; }
.leaflet-container { background: var(--superficie-3); font-family: inherit; }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.75); }
.leaflet-control-zoom { margin: 0 1.4rem 5.6rem 0 !important; border: none !important; }
.leaflet-control-zoom a {
  width: 3rem; height: 3rem; line-height: 3rem; font-size: 1.5rem;
  color: var(--texto-2); border-radius: 10px; border: 1px solid var(--linea) !important;
  box-shadow: var(--sombra);
}

/* Pin del proyecto: rojo, con halo que late */
.pin-proyecto { filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.pin-halo {
  position: absolute; left: 50%; bottom: 0;
  width: 3.4rem; height: 3.4rem; margin-left: -1.7rem; margin-bottom: -1.7rem;
  border-radius: 50%; background: rgba(227,51,62,.28);
  animation: latirPin 3s ease-in-out infinite;
}
@keyframes latirPin {
  0%,100% { transform: scale(.7); opacity: .7; }
  50%     { transform: scale(1.5); opacity: .12; }
}

/* Pines de las referencias: círculo blanco con el ícono y su etiqueta */
.pin-ref { display: grid; place-items: center; }
.pin-ref-circulo {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: #FFFFFF; border: 2px solid var(--rojo);
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.pin-ref-txt {
  position: absolute; top: 2.9rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap; text-align: center;
  font-size: .78rem; font-weight: 600; color: var(--texto);
  background: rgba(255,255,255,.92); border-radius: 100px;
  padding: .25rem .7rem; box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.pin-ref-txt b { display: block; font-weight: 500; color: var(--rojo); font-size: .72rem; }
/* Referencia que cae sobre otra: su etiqueta va arriba del pin, no abajo */
.pin-ref-alto .pin-ref-txt { top: auto; bottom: 2.9rem; }

/* Pin discreto de los otros proyectos: visible al alejarse del mapa */
.pin-otro { display: grid; place-items: center; cursor: pointer; }
.pin-otro-circulo {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: #FFFFFF; border: 2px solid var(--rojo);
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.pin-otro-circulo i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rojo); }
.pin-otro-txt {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-size: .74rem; font-weight: 600; color: var(--texto);
  background: rgba(255,255,255,.92); border-radius: 100px;
  padding: .25rem .7rem; box-shadow: 0 2px 8px rgba(0,0,0,.16);
}

/* --- Guía de calles sobre el satelital (ver dibujarCalles en mapa-real.js) --
   Texto blanco con contorno oscuro: es lo único que se lee igual de bien sobre
   un techo claro, un baldío o el monte. El halo va con text-shadow en vez de
   -webkit-text-stroke porque éste adelgaza la letra y a este tamaño se pierde. */
.rotulo-calle {
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.rotulo-calle span {
  position: absolute; transform: translate(-50%, -50%);
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  color: #FFFFFF;
  text-shadow: 0 0 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.75),
               0 1px 2px rgba(0,0,0,.9);
}
.rotulo-calle-troncal span { font-size: .82rem; font-weight: 700; }

/* Número al inicio de cada ruta de acceso (ver dibujarRutas en mapa-real.js) */
.pin-ruta-num span {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-size: .78rem; font-weight: 700;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* Nombre de la avenida por la que se ingresa, bajo el número */
/* Ingreso que arranca en el mismo punto que otro —los dos accesos al centro
   comercial salen del mismo lugar del centro—: se lo sube para que los dos
   números y los dos nombres queden a la vista. */
.pin-ruta-alto > span { transform: translateY(-24px); }
.pin-ruta-alto .pin-ruta-via { top: auto !important; bottom: 54px; }
.pin-ruta-num .pin-ruta-via {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .72rem; font-weight: 600;
  color: var(--texto); background: rgba(255,255,255,.94);
  border-radius: 100px; padding: .2rem .6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* --- Aviso de contenido de demostración ---------------------------------- */
.aviso {
  position: fixed; z-index: 85; right: 1.5rem; bottom: 1.3rem;
  padding: .5rem 1rem; border-radius: 100px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--linea);
  color: var(--texto-4);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

/* --- Panel técnico (tecla D) --------------------------------------------- */
.diag {
  position: fixed; z-index: 90; left: 1.4rem; bottom: 1.4rem;
  padding: 1rem 1.3rem; border-radius: var(--r-sm);
  background: rgba(0,0,0,.88); border: 1px solid var(--linea);
  font-size: .78rem; line-height: 1.7; color: #E8E8EE;
  font-family: ui-monospace, Consolas, monospace;
  max-width: 30rem;
}
.diag b { color: var(--rojo); }
/* ============================================================================
   MODO SIN ANIMACIÓN (?quieto=1)
   Se usa para tomar capturas de pantalla: congela transiciones y animaciones
   dejando cada elemento en su estado final.
   ============================================================================ */
body.sin-animacion *,
body.sin-animacion *::before,
body.sin-animacion *::after {
  transition: none !important;
  animation: none !important;
}
body.sin-animacion .atr-anim > * { opacity: 1 !important; transform: none !important; }
body.sin-animacion .pulso::after { display: none; }


/* ============================================================================
   ASISTENTE DE VOZ
   Tarjeta clara fija a la derecha (al pie en el tótem vertical). Acompaña
   todas las pantallas —incluida la de atracción— porque se presenta sola al
   entrar, sin que nadie toque nada.
   ============================================================================ */
#atraccion, #menu, #proyecto {
  padding-right: calc(var(--asis-ancho) + var(--asis-margen) * 2);
}

.asistente {
  position: fixed; z-index: 70;
  right: var(--asis-margen); top: var(--asis-margen); bottom: var(--asis-margen);
  width: var(--asis-ancho);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 22px;
  box-shadow: var(--sombra-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(1.2rem);
  transition: opacity 520ms cubic-bezier(.16,.84,.3,1),
              transform 520ms cubic-bezier(.16,.84,.3,1),
              visibility 0s linear 520ms;
}
.asistente.visible {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 520ms cubic-bezier(.16,.84,.3,1),
              transform 520ms cubic-bezier(.16,.84,.3,1),
              visibility 0s linear 0s;
}

.asis-cabecera {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.7rem 1.7rem 1.4rem;
  border-bottom: 1px solid var(--linea);
  flex: none;
}
.asis-cabecera h3 { font-size: 1.22rem; font-weight: 600; letter-spacing: -.015em; }
.asis-estado { font-size: .82rem; color: var(--texto-3); }
.asis-id { min-width: 0; }
.asis-id h3 { white-space: nowrap; }
.asis-avatar {
  width: 3.3rem; height: 3.3rem; border-radius: 50%; flex: none;
  background: var(--rojo-tenue); border: 1px solid rgba(227,51,62,.32);
  display: grid; place-items: center;
}
.eq { display: flex; align-items: center; gap: 3px; height: 1.3rem; }
.eq i { width: 3px; border-radius: 2px; background: var(--rojo); height: 25%; display: block; }
.asis-avatar.hablando .eq i { animation: eq .85s ease-in-out infinite; }
.eq i:nth-child(1) { animation-delay: 0s; }
.eq i:nth-child(2) { animation-delay: .12s; }
.eq i:nth-child(3) { animation-delay: .24s; }
.eq i:nth-child(4) { animation-delay: .36s; }
.eq i:nth-child(5) { animation-delay: .48s; }
@keyframes eq { 0%,100% { height: 22%; } 50% { height: 100%; } }


.asis-opciones {
  flex: 1; min-height: 0; overflow: auto;
  padding: 0 1.7rem 1.4rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.asis-grupo {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-4); font-weight: 600; margin: 1.2rem 0 .3rem;
}
.asis-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.3rem; border-radius: var(--r-sm);
  background: var(--superficie); border: 1px solid var(--linea);
  font-size: 1.02rem; text-align: left; color: var(--texto);
  transition: background 280ms, border-color 280ms, transform 200ms;
}
.asis-opcion:active { transform: scale(.985); }
.asis-opcion.activa { background: var(--rojo-tenue); border-color: rgba(227,51,62,.42); }
.asis-opcion svg { flex: none; opacity: .4; }

.asis-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.7rem 1.3rem;
  border-top: 1px solid var(--linea); flex: none;
}
.asis-silencio {
  font-size: .88rem; color: var(--texto-2); font-weight: 500;
  padding: .7rem 1.2rem; border-radius: 100px; border: 1px solid var(--linea);
}
.asis-nota { font-size: .74rem; color: var(--texto-4); }

/* ============================================================================
   TÓTEM VERTICAL (9:16)
   Los tótems de feria son verticales. No alcanza con apilar las columnas: hay
   que darle el alto al contenido que lo aprovecha (el plano, el mapa) y
   comprimir en una franja horizontal lo que antes era una columna lateral.
   ============================================================================ */
@media (max-aspect-ratio: 1/1) {

  /* En el tótem el asistente pasa al pie */
  #atraccion, #menu, #proyecto {
    padding-right: 0;
    padding-bottom: calc(var(--asis-alto) + var(--asis-margen) * 2);
  }
  .asistente {
    left: var(--asis-margen); right: var(--asis-margen);
    top: auto; bottom: var(--asis-margen);
    width: auto; height: var(--asis-alto);
    transform: translateY(1.2rem);
  }
  .asistente.visible { transform: none; }
  .asis-opciones { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: .55rem 1rem; }
  .asis-grupo { grid-column: 1 / -1; margin: .7rem 0 .1rem; }


  /* Menos margen lateral: sólo hay 1080 px de ancho */
  .barra, .menu-intro, .pie, .atr-top, .atr-centro, .atr-pie { padding-left: 2.4rem; padding-right: 2.4rem; }
  .tarjetas { padding-left: 2.4rem; padding-right: 2.4rem; }
  .pane { padding: 2.2rem 2.4rem 2.4rem; }
  .tabs { padding: 1.1rem 2.4rem; gap: .4rem; }
  .tab { padding: .9rem 1.2rem; font-size: .95rem; }

  /* --- Atracción --- */
  .atr-centro { max-width: 100%; }
  .atr-titulo { font-size: 4.8rem; }
  .atr-datos { gap: 2.4rem; flex-wrap: wrap; }

  /* --- Menú: tres tarjetas apiladas, de igual alto --- */
  .tarjetas { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .tj-cuerpo { padding: 2rem 2.2rem 1.8rem; }
  .tj-datos { margin-top: 1.3rem; padding-top: 1.2rem; }

  /* --- Resumen --- */
  .resumen-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .destacados { grid-template-columns: 1fr 1fr; margin-top: 2rem; padding-top: 1.8rem; }

  /* --- Ubicación: el mapa se lleva el alto, los controles van en franja --- */
  /* En el tótem la barra de controles no entra en una sola fila */
  .pane-mapa { padding: 1.2rem 1.2rem 1.4rem; }
  .sat-controles { flex-wrap: wrap; justify-content: center; border-radius: 24px; gap: .4rem; }
  .sat-nivel { padding: .7rem 1rem; }
  .sat-nivel i { width: 1.7rem; height: 1.7rem; }

  /* --- Qué hay cerca: mapa arriba, referencias en fila --- */
  .refs-wrap { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .refs-lista > .titulo-bloque { display: none; }
  .refs-lista ul { flex-direction: row; flex-wrap: wrap; }
  .refs-lista li { flex: 1 1 auto; gap: .7rem; padding: .9rem 1.1rem; }

  /* --- Disponibilidad: el plano se lleva todo el alto disponible --- */
  .lotes-wrap { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lote-ficha { padding: 1.5rem 1.8rem; }
  .ficha-datos { display: flex; align-items: center; gap: 1.4rem 2.8rem; flex-wrap: wrap; }
  .ficha-estado { margin-bottom: 0; align-self: center; }
  .ficha-codigo { margin-bottom: 0; font-size: 2.1rem; }
  .ficha-fila {
    border-top: none; padding: 0;
    flex-direction: column; align-items: flex-start; gap: .15rem;
  }
  .ficha-fila span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
  .ficha-nota {
    margin: 0 0 0 auto; padding-top: 0; border-top: none;
    max-width: 30ch; text-align: right;
  }
  .ficha-vacia { flex-direction: row; gap: 1.1rem; padding: .4rem 0; }
  .ficha-vacia svg { width: 2.4rem; height: 2.4rem; }
  .ficha-vacia br { display: none; }

  /* --- Ficha técnica --- */
  .ficha-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .ficha-tabla th { width: 42%; font-size: .74rem; }
  .ficha-tabla td { font-size: 1.18rem; }
  .ficha-destacado { grid-template-columns: 1fr 1fr 1fr 1fr; }
}