:root {
  --gijon-red: #F92828;
  --gijon-black: #000000;
  --gijon-white: #FFFFFF;
  --paper: #F6F6F3;
  --line: rgba(0, 0, 0, 0.14);
  --soft-black: rgba(0, 0, 0, 0.64);
  --nav-height: 70px;
  --app-max: 480px;
  --font-brand: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: #dedede;
  color: var(--gijon-black);
  font-family: var(--font-brand);
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

body {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  position: relative;
  min-height: 100dvh;
  background: var(--gijon-white);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.app-shell {
  width: 100%;
  height: calc(100dvh - var(--nav-height) - env(safe-area-inset-bottom));
  position: relative;
  background: var(--gijon-white);
}

.screen { position: absolute; inset: 0; display: none; overflow: hidden; background: var(--gijon-white); }
.screen.active { display: block; }

/* =========================================================
   MARCA (logo de repuesto en CSS mientras no tengamos el PNG oficial)
   ========================================================= */

.mini-brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 0.82;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
}

.mini-brand-symbol {
  display: block;
  width: 19px;
  height: 17px;
  background: var(--gijon-red);
  clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
  flex: 0 0 auto;
}

.mini-brand-light { color: var(--gijon-white); }
.mini-brand-light .mini-brand-symbol { background: var(--gijon-white); }

.home-logo {
  position: absolute;
  z-index: 10;
  top: max(20px, env(safe-area-inset-top));
  left: 18px;
  width: 25%;
  max-width: 158px;
  height: auto;
  display: block;
}

.mini-brand-logo {
  height: 26px;
  width: auto;
  display: block;
}

/* =========================================================
   1. INICIO
   ========================================================= */

.screen-home { background: var(--gijon-red); }
.screen-home.active { display: block; }

body:has(#screen-home.active) .app-shell { height: 100dvh; }
body:has(#screen-home.active) .bottom-nav { display: none; }

.home-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  background: var(--gijon-red);
}

/* La foto ya incluye el rojo y el corte diagonal, así que cubre toda la pantalla */
.home-photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.home-ar-badge {
  position: absolute;
  z-index: 10;
  top: max(30px, calc(env(safe-area-inset-top) + 21px));
  right: 7.2%;
  width: clamp(50px, 13.5vw, 64px);
  aspect-ratio: 1;
  border: 1.25px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(18px, 5vw, 23px);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1;
}

.home-copy {
  position: absolute;
  z-index: 5;
  inset: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  color: #fff;
}

.home-title {
  position: absolute;
  top: 51%;
  left: 4.1%;
  right: 4.7%;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(46px, 15vw, 72px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: 0.03em;
}

.home-tour-row {
  position: absolute;
  top: 60.5%;
  right: 7.4%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

.home-tour {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.22em;
}

.home-tour-line {
  display: block;
  width: clamp(48px, 12vw, 60px);
  height: 1px;
  background: rgba(255, 255, 255, 0.96);
}

.home-lead {
  position: absolute;
  top: 66%;
  left: 12.5%;
  width: 76%;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(13px, 3.7vw, 17px);
  line-height: 1.4;
  font-weight: 300;
}

.home-controls {
  position: absolute;
  z-index: 8;
  top: 74.5%;
  left: 50%;
  width: min(74%, 350px);
  transform: translateX(-50%);
  pointer-events: auto;
}

.home-cta {
  width: 100%;
  min-height: clamp(56px, 8vh, 66px);
  border: 0;
  border-radius: 5px;
  padding: 0 18px;
  background: #fff;
  color: #d70b12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 22px);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(14px, 3.7vw, 17px);
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(95, 0, 0, 0.18);
}

.home-cta svg {
  flex: 0 0 auto;
  width: clamp(26px, 6.5vw, 32px);
  height: clamp(26px, 6.5vw, 32px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-cta:active { background: #f2f2f2; }

.home-secondary {
  width: 100%;
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-link {
  min-height: clamp(48px, 6.6vh, 56px);
  border: 1.25px solid rgba(255, 255, 255, 0.92);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.12);
  color: #fff;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.home-link svg {
  flex: 0 0 auto;
  width: clamp(22px, 5.5vw, 28px);
  height: clamp(22px, 5.5vw, 28px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-link:active { background: rgba(255, 255, 255, 0.18); }

.home-location {
  position: absolute;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 400;
}

.home-location svg {
  width: clamp(19px, 4.6vw, 23px);
  height: clamp(19px, 4.6vw, 23px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

@media (max-height: 740px) {
  .home-title { top: 47%; font-size: clamp(40px, 13vw, 60px); }
  .home-tour-row { top: 57%; }
  .home-lead { top: 62%; font-size: 13px; }
  .home-controls { top: 70%; }
  .home-cta { min-height: 52px; }
  .home-secondary { margin-top: 10px; }
  .home-link { min-height: 44px; }
}

/* =========================================================
   CABECERA COMÚN
   ========================================================= */

.top-bar {
  height: 82px;
  padding: max(14px, env(safe-area-inset-top)) 16px 12px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: end;
  background: var(--gijon-white);
  border-bottom: 1px solid var(--gijon-black);
  position: relative;
  z-index: 500;
}

.top-back {
  width: 34px; height: 34px;
  border: 1px solid var(--gijon-black);
  background: var(--gijon-white);
  color: var(--gijon-black);
  padding: 7px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.top-back svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter;
}

.top-back:active { background: var(--gijon-red); border-color: var(--gijon-red); color: var(--gijon-white); }

.map-top-bar {
  background-image: url('../assets/mapa-banner.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gijon-white);
  border-bottom: 0;
}

.map-top-bar .top-back {
  background: rgba(255, 255, 255, 0.9);
}

.map-top-bar .mini-brand {
  display: none;
}

.top-bar-copy { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.top-kicker { font-size: 8px; line-height: 1; letter-spacing: 0.14em; font-weight: 500; color: var(--gijon-red); }
.top-bar-title { font-size: 29px; line-height: 0.95; font-weight: 300; letter-spacing: -0.025em; }

/* =========================================================
   2. MAPA
   ========================================================= */

.map-screen.active { display: grid; grid-template-rows: 82px minmax(0, 1fr); }
.map-stage { min-height: 0; position: relative; overflow: hidden; background: #d9d9d9; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; }

.leaflet-control-zoom a { border-radius: 0 !important; color: var(--gijon-black) !important; font-family: var(--font-brand) !important; }
.leaflet-control-attribution { font-family: var(--font-brand) !important; font-size: 9px !important; }

.ar-marker-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gijon-red);
  border: 4px solid var(--gijon-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.ar-marker-dot.is-selected {
  background: var(--gijon-black);
  transform: scale(1.15);
}

.user-marker-dot {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--gijon-black);
  border: 4px solid var(--gijon-white);
  box-shadow: 0 0 0 1px var(--gijon-black);
  animation: user-pulse 2s infinite;
}

@keyframes user-pulse {
  0% { box-shadow: 0 0 0 1px var(--gijon-black), 0 0 0 0 rgba(249, 40, 40, 0.50); }
  70% { box-shadow: 0 0 0 1px var(--gijon-black), 0 0 0 13px rgba(249, 40, 40, 0); }
  100% { box-shadow: 0 0 0 1px var(--gijon-black), 0 0 0 0 rgba(249, 40, 40, 0); }
}

/* =========================================================
   TARJETA COMPARTIDA (mapa + AR)
   Misma tarjeta, usada tanto en el mapa ("instruction-card")
   como en la pantalla AR ("ar-info"): mismo bloque visual.
   ========================================================= */

.instruction-card {
  position: absolute;
  z-index: 400;
  left: 14px;
  right: 14px;
  bottom: 14px;
  min-height: 90px;
  background: var(--gijon-white);
  border: 1px solid var(--gijon-black);
  box-shadow: 5px 5px 0 var(--gijon-red);
  padding: 15px 18px 14px 50px;
  overflow: hidden;
}

.instruction-accent {
  position: absolute;
  left: -26px;
  top: -30px;
  width: 65px;
  height: 150px;
  background: var(--gijon-red);
  transform: rotate(17deg);
}

.instruction-copy { position: relative; z-index: 2; }

.instruction-copy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gijon-red);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.instruction-copy p {
  margin: 0;
  color: var(--gijon-black);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 400;
}

.instruction-ar-btn {
  margin-top: 10px;
  width: 100%;
  border: 0;
  padding: 11px 16px;
  background: var(--gijon-red);
  color: var(--gijon-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.instruction-ar-btn:active { background: var(--gijon-black); }
.instruction-ar-btn[hidden] { display: none; }


/* =========================================================
   TARJETA DEL MAPA — estilo gráfico rojo/blanco
   Usa exactamente el mismo banner gráfico que la cabecera.
   ========================================================= */

.map-instruction-card {
  left: 14px;
  right: 14px;
  bottom: 14px;

  min-height: 56px;
  padding:
    18px
    clamp(94px, 27vw, 128px)
    17px
    clamp(22px, 5.8vw, 30px);

  background-image: url('../assets/mapa-banner.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gijon-white);

  border: 1px solid rgba(249, 40, 40, 0.82);
  border-radius: 0;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);

  overflow: hidden;
}

/* La banda roja antigua ya no hace falta: la incluye el PNG. */
.map-instruction-card .instruction-accent {
  display: none;
}

.map-instruction-card .instruction-copy {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.map-instruction-card .instruction-copy strong {
  margin: 0 0 5px;
  color: var(--gijon-red);
  font-family: var(--font-brand);
  font-size: clamp(16px, 4.3vw, 19px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.map-instruction-card .instruction-copy p {
  margin: 0;
  max-width: 290px;
  color: var(--gijon-black);
  font-size: clamp(11px, 3.1vw, 13px);
  line-height: 1.28;
  font-weight: 400;
}

.instruction-index {
  position: absolute;
  z-index: 3;
  top: 11px;
  right: 14px;
  color: var(--gijon-black);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Cuando JS muestra "VER EN AR", el botón queda integrado dentro de la zona blanca. */
.map-instruction-card .instruction-ar-btn {
  position: relative;
  z-index: 3;
  width: auto;
  min-width: 118px;
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px solid var(--gijon-red);
  background: var(--gijon-red);
  color: var(--gijon-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.map-instruction-card .instruction-ar-btn:active {
  background: var(--gijon-black);
  border-color: var(--gijon-black);
}

/* En pantallas estrechas damos algo más de espacio al texto. */
@media (max-width: 380px) {
  .map-instruction-card {
    left: 10px;
    right: 10px;
    bottom: 10px;
    min-height: 94px;
    padding:
      16px
      88px
      15px
      20px;
  }

  .map-instruction-card .instruction-copy strong {
    font-size: 16px;
  }

  .map-instruction-card .instruction-copy p {
    font-size: 11px;
    line-height: 1.24;
  }

  .instruction-index {
    top: 9px;
    right: 11px;
    font-size: 9px;
  }
}

.btn-primary {
  padding: 10px 16px; border: 0; background: var(--gijon-red); color: var(--gijon-white);
  font-size: 13px; font-weight: 600; letter-spacing: 0.035em; cursor: pointer;
}
.btn-primary:hover, .btn-primary:active { background: var(--gijon-black); }

/* =========================================================
   3 + 4. PANTALLAS DE CONTENIDO
   ========================================================= */

.screen-simple.active { display: grid; grid-template-rows: 82px minmax(0, 1fr); }

.simple-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 28px 20px 44px;
  background: var(--gijon-white);
}

.section-index { margin: 0 0 12px; color: var(--gijon-red); font-size: 9px; line-height: 1; font-weight: 500; letter-spacing: 0.14em; }

.info-intro h2, .config-content h2 {
  margin: 0; font-size: clamp(43px, 13vw, 62px); line-height: 0.82; letter-spacing: -0.05em; font-weight: 300;
}
.info-intro h2 span { color: var(--gijon-red); font-weight: 400; }
.info-intro > p:last-child { max-width: 335px; margin: 20px 0 0 auto; font-size: 15px; line-height: 1.35; }

.info-photo-slice { height: 230px; margin: 28px -20px 34px; position: relative; overflow: hidden; background: #d5d5d5; }
.info-photo-slice img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; filter: saturate(0.9); }
.info-photo-cut { position: absolute; left: -12%; bottom: -72px; width: 135%; height: 118px; background: var(--gijon-red); transform: rotate(-8deg); }

.info-block { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--gijon-black); }
.steps { display: grid; gap: 0; border-bottom: 1px solid var(--gijon-black); }
.step { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 17px 0; border-top: 1px solid var(--gijon-black); }
.step:first-child { border-top: 0; }
.step > span { color: var(--gijon-red); font-size: 13px; font-weight: 600; }
.step h3, .info-note h3 { margin: 0 0 4px; font-size: 22px; line-height: 1; font-weight: 400; letter-spacing: -0.025em; }
.step p, .info-note p:last-child { margin: 0; color: var(--soft-black); font-size: 13px; line-height: 1.35; }
.info-note { position: relative; margin-bottom: 15px; }
.info-note::before { content: ""; position: absolute; width: 88px; height: 15px; right: 0; top: -8px; background: var(--gijon-red); transform: skewX(-30deg); }

.config-content h2 { margin-bottom: 30px; }
.settings-list { border-top: 1px solid var(--gijon-black); }
.setting-row { min-height: 76px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--gijon-black); }
.setting-row > div { display: flex; flex-direction: column; gap: 3px; }
.setting-label { color: var(--gijon-red); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; }
.setting-row strong { font-size: 18px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; }
.setting-arrow { font-size: 22px; font-weight: 300; }
.config-foot { margin-top: 38px; padding: 17px 0 0 18px; position: relative; border-top: 1px solid var(--gijon-black); }
.config-mark { position: absolute; left: 0; top: 15px; width: 8px; height: 36px; background: var(--gijon-red); transform: skewY(-24deg); }
.config-foot p { margin: 0; max-width: 315px; color: var(--soft-black); font-size: 12px; line-height: 1.35; }

/* =========================================================
   5. AR
   ========================================================= */

.ar-screen.active { display: block; background: #121212; }

#ar-viewer-container, #ar-viewer-container model-viewer {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.ar-top {
  position: absolute; z-index: 20; left: 0; right: 0; top: 0;
  min-height: 74px;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px;
  display: flex; align-items: flex-start; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.ar-top > * { pointer-events: auto; }

.ar-back { background: transparent; border-color: rgba(255, 255, 255, 0.85); color: var(--gijon-white); }
.ar-back:active { background: var(--gijon-red); border-color: var(--gijon-red); }

.ar-button {
  position: absolute; z-index: 30; top: 92px; left: 50%; transform: translateX(-50%);
  min-width: 190px; min-height: 48px; padding: 0 18px; border: 0;
  background: var(--gijon-red); color: var(--gijon-white);
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer;
}
.ar-button:active { background: var(--gijon-black); }

/* ar-info reutiliza .instruction-card (misma tarjeta que el mapa) */
.ar-info.instruction-card { bottom: 16px; }
.ar-kicker { margin: 0 0 3px; color: var(--gijon-red); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ar-info #ar-title { text-transform: uppercase; }


/* =========================================================
   TARJETA AR — mismo diseño gráfico que la tarjeta del mapa
   ========================================================= */

.ar-info.instruction-card {
  left: 14px;
  right: 14px;
  bottom: 16px;

  min-height: 56px;
  padding:
    18px
    clamp(94px, 27vw, 128px)
    17px
    clamp(22px, 5.8vw, 30px);

  background-image: url('../assets/mapa-banner.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gijon-white);

  border: 1px solid rgba(249, 40, 40, 0.82);
  border-radius: 0;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);

  color: var(--gijon-black);
  overflow: hidden;
}

/* El PNG ya contiene toda la geometría roja/blanca. */
.ar-info.instruction-card .instruction-accent {
  display: none;
}

.ar-info.instruction-card .instruction-copy {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.ar-info.instruction-card .ar-kicker {
  margin: 0 0 4px;
  color: var(--gijon-red);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ar-info.instruction-card #ar-title {
  display: block;
  margin: 0 0 5px;
  color: var(--gijon-red);
  font-size: clamp(16px, 4.3vw, 19px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.ar-info.instruction-card #ar-description {
  margin: 0;
  max-width: 290px;
  color: var(--gijon-black);
  font-size: clamp(11px, 3.1vw, 13px);
  line-height: 1.28;
  font-weight: 400;
  opacity: 1;
}

@media (max-width: 380px) {
  .ar-info.instruction-card {
    left: 10px;
    right: 10px;
    bottom: 12px;
    min-height: 104px;
    padding:
      16px
      88px
      15px
      20px;
  }

  .ar-info.instruction-card #ar-title {
    font-size: 16px;
  }

  .ar-info.instruction-card #ar-description {
    font-size: 11px;
    line-height: 1.24;
  }
}

.ar-debug-badge {
  position: absolute; z-index: 40; left: 14px; right: 14px; top: 90px;
  padding: 10px 12px; background: rgba(0, 0, 0, 0.88); color: var(--gijon-white);
  border-left: 5px solid var(--gijon-red); font: 12px/1.35 monospace;
}

/* =========================================================
   NAVEGACIÓN INFERIOR
   ========================================================= */

.bottom-nav {
  position: fixed; z-index: 1000; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: var(--app-max);
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--gijon-white);
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.08);
}

.nav-btn {
  position: relative; border: 0; background: var(--gijon-white); color: var(--gijon-black);
  padding: 8px 5px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; overflow: hidden;
  transition: color 160ms ease, background-color 160ms ease;
}
.nav-btn + .nav-btn { border-left: 1px solid var(--gijon-black); }

.nav-btn::before {
  content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 3px;
  background: var(--gijon-red); transform: scaleX(0); transform-origin: center; transition: transform 160ms ease;
}

.nav-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.nav-btn span { font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: 0.10em; }
.nav-btn:active { background: var(--gijon-red); color: var(--gijon-white); }

body:has(#screen-mapa.active) .nav-btn[data-nav="mapa"],
body:has(#screen-info.active) .nav-btn[data-nav="info"],
body:has(#screen-config.active) .nav-btn[data-nav="config"] {
  color: var(--gijon-red);
}
body:has(#screen-mapa.active) .nav-btn[data-nav="mapa"]::before,
body:has(#screen-info.active) .nav-btn[data-nav="info"]::before,
body:has(#screen-config.active) .nav-btn[data-nav="config"]::before {
  transform: scaleX(1);
}




/* =========================================================
   FICHA DE PUNTO DE INTERÉS
   Se abre al tocar cualquier marcador .ar-marker-dot.
   ========================================================= */

.point-detail-backdrop {
  position: absolute;
  z-index: 680;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 220ms ease;
}

.point-detail-backdrop.is-open {
  opacity: 1;
}

.point-detail {
  position: absolute;
  z-index: 700;
  left: 12px;
  right: 12px;
  bottom: 12px;

  max-height: calc(100% - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--gijon-white);
  color: var(--gijon-black);
  border-top: 4px solid var(--gijon-red);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);

  transform: translateY(calc(100% + 30px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease,
    visibility 0s linear 260ms;
}

.point-detail.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

.point-detail-media {
  position: relative;
  width: 100%;
  height: clamp(145px, 25vh, 190px);
  overflow: hidden;
  background: #ddd;
}

.point-detail-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.point-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;

  width: 36px;
  height: 36px;
  padding: 9px;

  border: 0;
  border-radius: 50%;
  background: var(--gijon-red);
  color: var(--gijon-white);
  cursor: pointer;

  display: grid;
  place-items: center;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}

.point-detail-close svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.point-detail-body {
  padding: 18px 18px 17px;
}

.point-detail-kicker {
  margin: 0 0 7px;
  color: var(--gijon-red);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.point-detail h2 {
  margin: 0 0 10px;
  color: var(--gijon-black);
  font-family: var(--font-display);
  font-size: clamp(23px, 6.7vw, 31px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.point-detail-body > p:not(.point-detail-kicker) {
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font-display);
  font-size: clamp(12px, 3.25vw, 14px);
  line-height: 1.45;
  font-weight: 300;
}

.point-detail-actions {
  margin-top: 17px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.point-audio-btn,
.point-ar-btn {
  min-height: 50px;
  padding: 0 12px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.point-audio-btn {
  border: 1px solid var(--gijon-red);
  background: var(--gijon-white);
  color: var(--gijon-red);
}

.point-ar-btn {
  border: 1px solid var(--gijon-red);
  background: var(--gijon-red);
  color: var(--gijon-white);
}

.point-audio-btn:active {
  background: rgba(249, 40, 40, 0.08);
}

.point-ar-btn:active {
  background: var(--gijon-black);
  border-color: var(--gijon-black);
}

.point-action-icon {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.point-audio-play {
  fill: currentColor;
  stroke: none;
}

.point-audio-progress {
  width: 100%;
  height: 2px;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease;
}

.point-audio-progress.is-visible {
  opacity: 1;
}

.point-audio-progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--gijon-red);
}

/* La tarjeta antigua de "ELIGE UN PUNTO" desaparece mientras la ficha está abierta. */
.map-stage.point-sheet-open .map-instruction-card {
  opacity: 0;
  pointer-events: none;
}

@media (max-height: 720px) {
  .point-detail-media {
    height: 130px;
  }

  .point-detail-body {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .point-detail h2 {
    margin-bottom: 7px;
    font-size: 22px;
  }

  .point-detail-actions {
    margin-top: 12px;
  }

  .point-audio-btn,
  .point-ar-btn {
    min-height: 45px;
  }
}

@media (max-width: 360px) {
  .point-detail {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .point-detail-body {
    padding-left: 15px;
    padding-right: 15px;
  }

  .point-detail-actions {
    gap: 8px;
  }
}


/* =========================================================
   INFORMACIÓN — diseño sencillo, coherente con AJUSTES
   ========================================================= */

.info-top-bar {
  background-image: url('../assets/mapa-banner.png');
}

.info-simple-content {
  padding-top: clamp(34px, 6vh, 54px);
}

.info-simple-content h2 {
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-size: clamp(42px, 11.5vw, 58px);
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: -0.045em;
}

.info-simple-row {
  width: 100%;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--gijon-black);
}

.info-simple-row p {
  margin: 0;
  max-width: 340px;
  color: var(--gijon-black);
  font-family: var(--font-display);
  font-size: clamp(14px, 3.7vw, 16px);
  line-height: 1.5;
  font-weight: 300;
}

@media (max-width: 360px) {
  .info-simple-content h2 {
    margin-bottom: 32px;
    font-size: 40px;
  }

  .info-simple-row p {
    font-size: 13px;
  }
}


/* =========================================================
   AJUSTES — idioma, versión sencilla
   ========================================================= */

.config-top-bar {
  background-image: url('../assets/mapa-banner.png');
}

.language-config {
  padding-top: clamp(34px, 6vh, 54px);
}

.language-config h2 {
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-size: clamp(46px, 13vw, 62px);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: -0.045em;
}

.language-simple-row {
  width: 100%;
  min-height: 76px;
  padding: 0 0 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  border-bottom: 1px solid var(--gijon-black);
}

.language-simple-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.language-simple-row .setting-label {
  color: var(--gijon-red);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.language-simple-row strong {
  font-family: var(--font-display);
  font-size: clamp(20px, 5.2vw, 25px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.language-select-wrap {
  position: relative;
  width: 120px;
  height: 42px;
  border: 0;
  border-bottom: 1px solid var(--gijon-black);
  background: transparent;
}

.language-select-wrap select {
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 30px 0 2px;
  color: var(--gijon-black);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.language-select-wrap svg {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--gijon-red);
  stroke-width: 1.8;
  pointer-events: none;
}

.language-hint {
  margin: 13px 0 0;
  max-width: 320px;
  color: var(--soft-black);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 360px) {
  .language-simple-row {
    gap: 10px;
  }

  .language-select-wrap {
    width: 106px;
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 360px) {
  .simple-content { padding-left: 17px; padding-right: 17px; }
  .info-photo-slice { margin-left: -17px; margin-right: -17px; }
  .top-bar { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* =========================================================
   MAPLIBRE — mapa vectorial tematizado
   ========================================================= */

#map .maplibregl-canvas {
  outline: none;
}

#map .maplibregl-ctrl-top-left {
  top: 10px;
  left: 10px;
}

#map .maplibregl-ctrl-group {
  border-radius: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 2px 7px rgba(0, 0, 0, 0.12);
}

#map .maplibregl-ctrl-group button {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.96);
}

#map .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

#map .maplibregl-ctrl-attrib {
  font-family: var(--font-brand);
  font-size: 8px;
  line-height: 1.15;
  background: rgba(255, 255, 255, 0.82);
}

#map .maplibregl-ctrl-attrib a {
  color: #315f70;
}

/*
  Marcadores MapLibre.
  Conservamos el mismo aspecto rojo/blanco del diseño anterior.
*/
.maplibre-point-marker.ar-marker-dot {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  outline: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gijon-red);
  border: 4px solid var(--gijon-white);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.maplibre-point-marker.ar-marker-dot.is-selected {
  background: var(--gijon-black);
  transform: scale(1.15);
}

.maplibre-point-marker.ar-marker-dot:focus-visible {
  outline: 2px solid var(--gijon-black);
  outline-offset: 3px;
}

.maplibre-user-marker.user-marker-dot {
  pointer-events: none;
}


/* =========================================================
   MAPA ILUSTRADO 3D — retoques
   ========================================================= */

.maplibre-point-marker.ar-marker-dot {
  box-shadow:
    0 0 0 1px rgba(84, 44, 35, 0.30),
    0 4px 10px rgba(50, 35, 28, 0.35),
    0 0 0 3px rgba(255, 255, 255, 0.18);
}

#map .maplibregl-canvas {
  filter: saturate(0.96) contrast(1.03);
}


/* =========================================================
   MAPA ILUSTRADO 2D — retoques
   ========================================================= */

#map .maplibregl-canvas {
  filter: saturate(0.96) contrast(1.02);
}

.maplibre-point-marker.ar-marker-dot {
  box-shadow:
    0 0 0 1px rgba(84, 44, 35, 0.22),
    0 3px 8px rgba(50, 35, 28, 0.20);
}


/* =========================================================
   AJUSTES — política de privacidad
   ========================================================= */

.privacy-setting {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--gijon-black);
}

.privacy-setting > .setting-label {
  display: block;
  margin-bottom: 10px;
}

.privacy-policy-btn {
  width: 100%;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid var(--gijon-black);
  background: var(--gijon-white);
  color: var(--gijon-black);
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.02em;

  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.privacy-policy-btn svg {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--gijon-red);
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.privacy-policy-btn:hover,
.privacy-policy-btn:focus-visible {
  border-color: var(--gijon-red);
  outline: none;
}

.privacy-policy-btn:active {
  background: var(--gijon-red);
  border-color: var(--gijon-red);
  color: var(--gijon-white);
}

.privacy-policy-btn:active svg {
  stroke: var(--gijon-white);
}

@media (max-width: 360px) {
  .privacy-setting {
    margin-top: 28px;
  }

  .privacy-policy-btn {
    min-height: 54px;
    padding: 0 14px;
    font-size: 12px;
  }
}