:root{
  --naranja:#F2A01E; --naranja-deep:#D8850F; --carbon:#20242b; --crema:#ffffff;
  --carbon-2:#343943; --linea:#ececef; --wa:#1FA855;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:var(--carbon); color:var(--carbon);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
body{ overflow:hidden; font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
[hidden]{ display:none !important; }
.screen{ position:fixed; inset:0; }

/* ---------- botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 22px; border-radius:14px; border:0; font:inherit;
  font-weight:800; font-size:17px; cursor:pointer; text-decoration:none; width:100%; }
.btn-sm{ min-height:44px; font-size:15px; padding:0 16px; width:auto; border-radius:12px; }
.btn-primary{ background:var(--naranja); color:var(--carbon); box-shadow:0 6px 18px rgba(242,163,60,.35); }
.btn-primary:active{ background:var(--naranja-deep); }
.btn-ghost{ background:transparent; color:var(--crema); border:1.5px solid rgba(255,248,240,.35); }
.btn-ghost-dark{ background:#fff; color:var(--carbon); border:1.5px solid var(--linea); }
.btn-wa{ background:var(--wa); color:#fff; margin-top:6px; }
.icon-btn{ width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center;
  background:rgba(43,43,46,.55); color:#fff; cursor:pointer; }
.icon-btn-dark{ background:transparent; color:var(--carbon); flex:0 0 auto; }

/* ---------- pantalla principal: mapa 3D ---------- */
.err{ color:#FFD9A8 !important; font-size:15px !important; }
.mapa{ background:#101218; overflow:hidden; }
/* mismo fondo que "Cobertura nacional" en la home del sitio: collage de paisajes + velo */
.m-bg{ position:absolute; inset:0; background:linear-gradient(rgba(16,18,24,.58), rgba(16,18,24,.74)), url('assets/fondo-paisajes.webp') center top / cover no-repeat; }
.m-3d{ position:absolute; inset:0; touch-action:none; }
.m-3d canvas{ display:block; outline:none; }
.m-top{ position:absolute; left:0; right:0; top:0; z-index:5; padding:calc(10px + var(--safe-t)) 16px 22px;
  background:linear-gradient(rgba(16,18,24,.82) 55%, rgba(16,18,24,0)); pointer-events:none; }
.m-top > *{ pointer-events:auto; }
.m-top-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.m-logo{ height:40px; width:auto; }
.m-lang{ min-width:44px; height:36px; display:grid; place-items:center; border-radius:999px; color:#fff; text-decoration:none;
  font-weight:800; font-size:13px; letter-spacing:.06em; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); }
.m-title{ margin:10px 0 8px; font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--naranja); line-height:1.1; }
.m-rate{ display:flex; gap:6px; flex-wrap:nowrap; }
.fuente{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; text-decoration:none; white-space:nowrap;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.fuente .logo{ width:24px; height:24px; border-radius:7px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.fuente .logo svg{ width:15px; height:15px; }
.fuente .stars{ color:var(--naranja); font-size:13px; letter-spacing:-.5px; }
.m-note{ position:absolute; top:calc(150px + var(--safe-t)); left:16px; right:16px; z-index:5; margin:0; padding:10px 14px;
  background:rgba(255,255,255,.95); border-radius:12px; font-size:14px; font-weight:600; color:var(--carbon); }
.m-hint{ position:absolute; left:50%; bottom:calc(86px + var(--safe-b)); transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 16px; border-radius:14px;
  background:rgba(22,25,31,.78); color:#fff; font-size:14px; text-align:center; width:max-content; max-width:calc(100vw - 32px);
  pointer-events:none; transition:opacity .5s, transform .5s; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.m-hint{ gap:6px; padding:10px 18px 11px; border:1px solid rgba(255,255,255,.18); }
.m-hint strong{ font-weight:700; font-size:14px; }
.m-hint.gone{ opacity:0; transform:translate(-50%,8px); }
/* mano que arrastra de lado a lado, con una estela naranja */
.swipe{ position:relative; width:120px; height:46px; }
.swipe .trail{ position:absolute; left:14px; right:14px; top:14px; height:4px; border-radius:2px;
  background:linear-gradient(90deg, rgba(242,160,30,0), rgba(242,160,30,.9), rgba(242,160,30,0));
  animation:trail 2s ease-in-out infinite; }
.swipe .hand{ position:absolute; left:50%; top:4px; margin-left:-16px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));
  animation:swipe 2s ease-in-out infinite; }
@keyframes swipe{ 0%{ transform:translateX(-34px) rotate(-8deg) } 50%{ transform:translateX(34px) rotate(8deg) } 100%{ transform:translateX(-34px) rotate(-8deg) } }
@keyframes trail{ 0%,100%{ opacity:.35; transform:scaleX(.6) } 50%{ opacity:1; transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){ .swipe .hand, .swipe .trail{ animation:none } }
.m-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; gap:10px;
  padding:14px 16px calc(16px + var(--safe-b)); background:linear-gradient(rgba(16,18,24,0),rgba(16,18,24,.85)); }
.btn-cam{ flex:1; min-height:52px; }
.m-bottom .icon-btn{ flex:0 0 auto; width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.14); }

/* ---------- AR ---------- */
.ar{ background:#000; }
#ar-container{ position:absolute; inset:0; overflow:hidden; }
.ar-top{ position:absolute; left:0; right:0; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + var(--safe-t)) 14px 10px 16px; background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0)); }
.ar-top img{ height:34px; width:auto; }
#ar-container video{ transition:filter .8s ease; }
#ar-container video.dim{ filter:blur(10px) brightness(.35) saturate(.6); }
.ar-recenter{ position:absolute; right:16px; bottom:calc(70px + var(--safe-b)); z-index:5; width:52px; height:52px; border-radius:14px; display:none; }
.ar.sticky .ar-recenter{ display:grid; }
.ar.sticky .ar-hint{ bottom:calc(20px + var(--safe-b)); }
.ar-hint{ position:absolute; left:50%; bottom:calc(108px + var(--safe-b)); transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:14px; color:#fff; font-weight:700; font-size:16px;
  text-align:center; text-shadow:0 1px 4px rgba(0,0,0,.6); width:min(92vw,360px); pointer-events:none; }
.ar-hint > span:last-child{ background:rgba(43,43,46,.72); padding:10px 16px; border-radius:999px; }
.scan-frame{ width:120px; height:200px; border:3px solid var(--naranja); border-radius:16px; opacity:.9;
  animation:scan 1.8s ease-in-out infinite; }
.ar.found .scan-frame{ display:none; }
.ar.found .ar-hint{ bottom:calc(14px + var(--safe-b)); font-size:14px; }
@keyframes scan{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.06); opacity:.5 } }
.ar-fallback{ position:absolute; left:16px; right:16px; bottom:calc(20px + var(--safe-b)); z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 16px;
  background:rgba(255,248,240,.96); border-radius:16px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.35); }

/* ---------- plan B ---------- */
.map2d{ background:var(--crema); display:flex; flex-direction:column; }
.m-head{ display:flex; align-items:center; gap:8px; padding:calc(10px + var(--safe-t)) 16px 6px; }
.m-wm2{ height:30px; width:auto; margin-right:auto; }
.m-sub{ margin:0; padding:0 16px 6px; font-size:14px; font-weight:600; color:#6b6b70; text-align:center; }
.m-stage{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:6px 16px calc(12px + var(--safe-b)); }
.m-map{ position:relative; height:100%; aspect-ratio:1146/2198; max-width:100%; }
.m-map > img.base{ position:absolute; inset:0; width:100%; height:100%; border-radius:10px; }
.m-map svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.m-pin{ position:absolute; transform:translate(-50%,-94%); border:0; padding:0; background:none;
  cursor:pointer; z-index:3; animation:drop .8s cubic-bezier(.3,1.6,.5,1) both; }
.m-pin img{ width:100%; height:auto; display:block; filter:drop-shadow(0 4px 4px rgba(0,0,0,.4)); pointer-events:none; }
.m-pin::before{ content:""; position:absolute; inset:-10px; } /* área táctil ≥ 44 px */
.m-pin::after{ content:""; position:absolute; left:50%; bottom:4%; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:rgba(242,163,60,.6); animation:pulse 2s ease-out infinite; z-index:-1; }
@keyframes drop{ 0%{ transform:translate(-50%,-94%); } 30%{ transform:translate(-50%,-160%); } 100%{ transform:translate(-50%,-94%); } }
@keyframes pulse{ 0%{ transform:scale(.6); opacity:1 } 100%{ transform:scale(3); opacity:0 } }
.m-hit{ position:absolute; z-index:2; border:0; padding:0; background:transparent; border-radius:6px; cursor:pointer;
  animation:glow 3.2s ease-in-out infinite; }
.m-hit::before{ content:""; position:absolute; inset:-8px -4px; }
@keyframes glow{ 0%,70%,100%{ box-shadow:0 0 0 0 rgba(242,163,60,0) } 80%{ box-shadow:0 0 0 3px rgba(242,163,60,.75) } }

/* ---------- panel ---------- */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:20; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:21; background:var(--crema); border-radius:22px 22px 0 0;
  padding:0 18px calc(18px + var(--safe-b)); max-height:88vh; overscroll-behavior:contain; overflow:auto; box-shadow:0 -10px 30px rgba(0,0,0,.3);
  animation:up .28s ease-out; max-width:560px; margin:0 auto; }
@keyframes up{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
.sh-grip{ display:none; }
.sh-photo-wrap{ margin:0 -18px 14px; aspect-ratio:16/10; max-height:34vh; width:calc(100% + 36px); overflow:hidden;
  border-radius:22px 22px 0 0; background:linear-gradient(135deg,#e9e3da,#d9d2c6); }
.sh-photo{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.04); transition:opacity .4s, transform .8s; }
.sh-photo.ok{ opacity:1; transform:none; }
.sh-head{ display:flex; align-items:center; gap:12px; }
.sh-head > div{ flex:1; min-width:0; }
.sh-head h2{ margin:0; font-size:24px; line-height:1.1; color:var(--carbon); }
.sh-codes{ font-size:13px; font-weight:800; color:var(--naranja-deep); letter-spacing:.05em; margin-top:3px; }
.sh-k{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#8a8a90; margin:16px 0 6px; }
.sh-items{ list-style:none; margin:0; padding:0; }
.sh-items li{ position:relative; padding:9px 0 9px 28px; font-size:16px; line-height:1.35; border-bottom:1px solid var(--linea); }
.sh-items li::before{ content:"✓"; position:absolute; left:2px; top:8px; color:var(--naranja-deep); font-weight:900; }
.sh-note{ font-size:14px; color:#5c5c62; line-height:1.4; margin:12px 0; }