/* base.css — identidad de marca y reset. Lo comparten el tour y el caparazón. */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../vendor/fuentes/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../vendor/fuentes/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../vendor/fuentes/inter-500.woff2') format('woff2');
}

:root {
  --crema:       #F5F1EA;
  --crema-hondo: #EBE5DA;
  --tinta:       #1A1A1A;
  --terracota:   #C25E3F;
  --gris:        #8A857C;
  --linea:       rgba(26, 26, 26, .13);
  /* El escenario del tour va oscuro por legibilidad sobre las panorámicas */
  --escenario:   #14171D;

  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --cuerpo:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  --barra-alto: 62px;
  --psv-navbar-alto: 40px;
  --ficha-ancho: 372px;
}

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

body {
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }

:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

/* ── Botones ───────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--display); font-weight: 600; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase;
  min-height: 44px; padding: 10px 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.btn-terra { background: var(--terracota); color: #fff; }
.btn-terra:hover { background: #A94E33; }
.btn-linea { background: none; color: var(--tinta); border: 1px solid var(--linea); }
.btn-linea:hover { border-color: var(--tinta); }

/* ── Pantalla de carga ─────────────────────────────────────────────────────── */
#loading {
  position: fixed; inset: 0; background: var(--crema);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 999; gap: 16px; transition: opacity .5s ease;
}
#loading.fade-out { opacity: 0; pointer-events: none; }
.loading-logo {
  font-family: var(--display); font-size: .82rem; font-weight: 600; letter-spacing: .28em;
}
.loading-logo b { color: var(--terracota); }
.loading-bar {
  width: 160px; height: 2px; background: rgba(26, 26, 26, .1);
  border-radius: 2px; overflow: hidden;
}
.loading-prog { height: 100%; background: var(--terracota); width: 0%; transition: width .3s ease; }
.loading-error { color: var(--gris); font-size: .9rem; text-align: center; padding: 0 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}