/* ═══════════════════════════════════════════
   PLANO COUNTER (visitantes en tiempo real)
   ═══════════════════════════════════════════ */
.plano-counter {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  text-align: right;
  pointer-events: none;
}

.plano-counter-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 6px;
}

.plano-counter-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.plano-counter-pulse {
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  animation: counterPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(212, 168, 37, 0.7);
}

.plano-counter-total {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.plano-counter-breakdown {
  font-family: 'JetBrains Mono', SF Mono, Menlo, monospace;
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}

.plano-counter-breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.plano-counter-breakdown em {
  color: var(--gold-dim);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.7rem;
  min-width: 20px;
  text-align: right;
}

.plano-counter-breakdown .num {
  color: var(--gold);
  font-weight: 400;
  min-width: 14px;
  text-align: right;
  display: inline-block;
}

.plano-counter-breakdown .num.is-changed {
  animation: numPulse 0.5s ease;
}


/* ═══════════════════════════════════════════
   ROTUNDA ANIMATIONS (Plano · centro del palacio)
   Múltiples capas contrarrotando + ondas + geometría sagrada
   ═══════════════════════════════════════════ */
.rotunda-orbit-1, .rotunda-orbit-2, .rotunda-orbit-3, .rotunda-orbit-4 {
  transform-origin: 500px 390px;
}

.rotunda-orbit-1 { animation: rotundaCCW 90s linear infinite; }

.rotunda-orbit-2 { animation: rotundaCW 60s linear infinite; }

.rotunda-orbit-3 { animation: rotundaCCW 38s linear infinite; }

@keyframes rotundaCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes rotundaCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }


/* ✦ ATOMIC ELECTRON ORBITS (Bohr model) — cada electrón a su velocidad y ángulo único */
.rotunda-electron-orbit-1, .rotunda-electron-orbit-2, .rotunda-electron-orbit-3 {
  transform-origin: 500px 390px;
}

.rotunda-electron-orbit-1 { animation: electronOrbit1 6s linear infinite; }

.rotunda-electron-orbit-2 { animation: electronOrbit2 8.5s linear infinite; }

.rotunda-electron-orbit-3 { animation: electronOrbit3 11s linear infinite; }

@keyframes electronOrbit1 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes electronOrbit2 {
  from { transform: rotate(60deg); }
  to { transform: rotate(-300deg); }
}

@keyframes electronOrbit3 {
  from { transform: rotate(120deg); }
  to { transform: rotate(480deg); }
}


/* Pulsing oculus (central heartbeat) */
.rotunda-oculus-glow {
  transform-origin: 500px 390px;
  transform-box: fill-box;
  animation: rotundaPulseOut 4.5s ease-in-out infinite;
}

.rotunda-oculus-core {
  transform-origin: 500px 390px;
  transform-box: fill-box;
  animation: rotundaPulseCore 4.5s ease-in-out infinite;
}

@keyframes rotundaPulseOut {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes rotundaPulseCore {
  0%, 100% { opacity: 0.35; transform: scale(0.6); }
  50% { opacity: 0.95; transform: scale(1.4); }
}


/* Ripple emanations from center */
.rotunda-ripple {
  transform-origin: 500px 390px;
  transform-box: fill-box;
  fill: none;
  opacity: 0;
  animation: rotundaRipple 8s ease-out infinite;
}

.rotunda-ripple-2 { animation-delay: 2.7s; }

.rotunda-ripple-3 { animation-delay: 5.3s; }

@keyframes rotundaRipple {
  0% { transform: scale(0.3); opacity: 0; }
  10% { opacity: 0.55; }
  100% { transform: scale(4.2); opacity: 0; }
}


/* Scan beam (haz de luz barriendo la rotonda) */
.rotunda-scan-beam {
  transform-origin: 500px 390px;
  animation: rotundaScanSweep 9s linear infinite;
  opacity: 0.7;
  filter: blur(0.5px);
}

@keyframes rotundaScanSweep {
  from { transform: rotate(0deg); opacity: 0.85; }
  50% { opacity: 0.4; }
  to { transform: rotate(360deg); opacity: 0.85; }
}


/* Cardinal markers — subtle pulse */
.rotunda-cardinal {
  animation: rotundaCardinalPulse 3s ease-in-out infinite;
}

.rotunda-cardinal:nth-child(2) { animation-delay: 0.75s; }

.rotunda-cardinal:nth-child(3) { animation-delay: 1.5s; }

.rotunda-cardinal:nth-child(4) { animation-delay: 2.25s; }

@keyframes rotundaCardinalPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.95; }
}

@keyframes vaultScan {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes vaultRippleAnim {
  0% { transform: scale(0.35); opacity: 0; }
  15% { opacity: 0.55; }
  100% { transform: scale(2.3); opacity: 0; }
}


/* ═══════════════════════════════════════════
   PLANO ARQUITECTÓNICO (top-down floor plan)
   ═══════════════════════════════════════════ */
.plano {
  padding: 140px 48px;
  background: var(--dark);
  position: relative;
  overflow: hidden;
}

.plano::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.plano-frame {
  max-width: 1240px;
  margin: 70px auto 0;
  border: 1px solid var(--border);
  padding: 36px 36px 28px;
  background:
    radial-gradient(ellipse at center, rgba(212, 168, 37, 0.05) 0%, transparent 70%),
    rgba(22, 22, 22, 0.5);
  position: relative;
  backdrop-filter: blur(4px);
}

.plano-frame::before, .plano-frame::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid var(--gold);
  pointer-events: none;
}

.plano-frame::before {
  top: -1px; left: -1px;
  border-right: none;
  border-bottom: none;
}

.plano-frame::after {
  bottom: -1px; right: -1px;
  border-left: none;
  border-top: none;
}

.plano-svg {
  width: 100%;
  height: auto;
  color: var(--gold);
  display: block;
  user-select: none;
}

.plano-svg text { font-family: 'Outfit', system-ui, sans-serif; }

.plano-meta-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 5px;
  fill: currentColor;
  opacity: 0.85;
}

.plano-meta-sub {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 3px;
  fill: var(--text-muted);
  text-transform: uppercase;
}

.plano-compass-letter {
  font-size: 9px;
  font-weight: 400;
  fill: currentColor;
  opacity: 0.6;
  letter-spacing: 1px;
}

.plano-wall-outer {
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.plano-wall-inner {
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.65;
}

.plano-door-arc {
  stroke: currentColor;
  stroke-width: 0.5;
  opacity: 0.45;
  fill: none;
}

.plano-vestibule {
  stroke: currentColor;
  stroke-width: 1.2;
  fill: none;
}

.plano-column {
  fill: currentColor;
  opacity: 0.85;
}

.plano-column-small { opacity: 0.55; }

.plano-window {
  stroke: currentColor;
  stroke-width: 2.4;
  opacity: 0.85;
}

.plano-rotunda {
  pointer-events: none;
}

.plano-rotunda-column {
  fill: currentColor;
  opacity: 0.85;
}


/* Atrio (center entry) */
.plano-atrio { cursor: pointer; }

.plano-atrio-fill {
  fill: rgba(212, 168, 37, 0.04);
  transition: fill 0.4s ease;
}

.plano-atrio:hover .plano-atrio-fill {
  fill: rgba(212, 168, 37, 0.14);
}

.plano-atrio-ce {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px;
  font-weight: 500;
  fill: currentColor;
  letter-spacing: 1px;
}

.plano-atrio-label {
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 2.5px;
  fill: var(--text-secondary);
  text-transform: uppercase;
}

.plano-atrio-sub {
  font-size: 7px;
  font-style: italic;
  fill: var(--gold-dim);
  letter-spacing: 1px;
}


/* Interactive rooms */
.plano-room { cursor: pointer; text-decoration: none; }

.plano-room-fill {
  fill: rgba(212, 168, 37, 0);
  transition: fill 0.4s ease;
}

.plano-room-num {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 38px;
  font-weight: 400;
  fill: currentColor;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

.plano-room-num--small {
  font-size: 28px;
}

.plano-room-label {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  fill: var(--text-primary);
  letter-spacing: 1.2px;
  transition: fill 0.4s ease;
}

.plano-room-sub {
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 2.5px;
  fill: var(--text-muted);
  text-transform: uppercase;
  transition: fill 0.4s ease;
}

.plano-room:hover .plano-room-fill { fill: rgba(212, 168, 37, 0.10); }

.plano-room:hover .plano-room-num { opacity: 1; }

.plano-room:hover .plano-room-label { fill: var(--gold); }

.plano-room:hover .plano-room-sub { fill: var(--text-secondary); }

.plano-room.is-coming-soon { cursor: default; }

.plano-room.is-coming-soon .plano-room-sub { fill: var(--gold-dim); }


/* Soft glow for hovered room */
.plano-room-glow {
  fill: rgba(212, 168, 37, 0);
  filter: blur(20px);
  transition: fill 0.5s ease;
  pointer-events: none;
}

.plano-room:hover .plano-room-glow { fill: rgba(212, 168, 37, 0.35); }
/* ---------- PLANO (banda oscura) ---------- */
.plano{background:linear-gradient(180deg,#0c0d10,#08090b);padding:74px 20px 84px;color:#d4af37;text-align:center;position:relative}
.plano-svg{color:#d4af37}
.plano-head{max-width:760px;margin:0 auto 26px}
.plano-eyebrow{font-family:"Inter",sans-serif;font-size:12px;letter-spacing:6px;color:#a8842c;text-transform:uppercase;font-weight:600}
.plano-h2{font-family:'Gloock',serif;font-size:38px;color:#f4f1e8;font-weight:400;margin:12px 0 8px}
.plano-h2 em{font-style:italic;font-family:'Cormorant Garamond',serif;color:#e8cf86}
.plano-psub{font-family:'Cormorant Garamond',serif;font-style:italic;color:#9a958a;font-size:19px;margin:0}
@media(max-width:760px){.plano-h2{font-size:27px}}