:root{
  --tinta:#1a2b3a; --piedra:#c9b79c; --piedra-clara:#e8dfd0; --arena:#f5efe4;
  --coral:#b5462f; --coral-claro:#d67a5f; --oro:#c08a2d; --mar:#2e6b78; --mar-claro:#4a8f9c;
  --papel:#faf6ee; --sombra:rgba(26,43,58,.16);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Georgia','Times New Roman',serif;background:var(--tinta);color:var(--tinta);overflow:hidden;display:flex;align-items:center;justify-content:center}
.phone{position:relative;width:100%;max-width:430px;height:100vh;max-height:920px;background:var(--papel);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column}
@media(min-width:480px){.phone{border-radius:28px;height:92vh}}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateX(20px);transition:opacity .45s ease,transform .45s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen.active{opacity:1;pointer-events:auto;transform:translateX(0)}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--tinta);color:var(--arena);flex-shrink:0;z-index:5}
.brand{display:flex;align-items:baseline;gap:7px}
.brand b{font-size:19px;letter-spacing:3px;font-weight:700}
.brand span{font-size:9px;letter-spacing:2px;text-transform:uppercase;opacity:.7;font-family:Helvetica,sans-serif}
.lang{font-family:Helvetica,sans-serif;font-size:11px;letter-spacing:1px;border:1px solid rgba(245,239,228,.4);border-radius:20px;padding:5px 11px;color:var(--arena);background:none;cursor:pointer;font-weight:600}
.lang b{color:var(--oro)}

#s-qr{background:var(--tinta);color:var(--arena);align-items:center;justify-content:center;text-align:center;padding:40px 30px}
#s-qr .kicker{font-family:Helvetica,sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--oro);margin-bottom:22px}
#s-qr h1{font-size:34px;letter-spacing:6px;line-height:1.15;margin-bottom:6px;font-weight:700}
#s-qr .sub{font-size:14px;font-style:italic;opacity:.75;margin-bottom:34px;letter-spacing:1px}
.qr-frame{width:170px;height:170px;background:var(--arena);border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 26px;padding:14px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.qr-frame svg{width:100%;height:100%}
#s-qr p.hint{font-size:13px;opacity:.7;font-family:Helvetica,sans-serif;letter-spacing:.5px;max-width:250px;line-height:1.6}
.tap-btn{margin-top:30px;font-family:Helvetica,sans-serif;font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;background:var(--coral);color:#fff;border:none;padding:15px 34px;border-radius:30px;cursor:pointer;box-shadow:0 8px 20px rgba(181,70,47,.4);transition:transform .2s}
.tap-btn:active{transform:scale(.96)}

.hero-photo{position:relative;height:230px;flex-shrink:0;overflow:hidden;background:var(--piedra)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo .placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--piedra),var(--piedra-clara));color:var(--tinta);text-align:center;padding:20px}
.hero-photo .placeholder svg{width:44px;height:44px;opacity:.5;margin-bottom:10px;stroke:currentColor;fill:none;stroke-width:1.3}
.hero-photo .placeholder span{font-family:Helvetica,sans-serif;font-size:11px;letter-spacing:1px;opacity:.7;max-width:220px;line-height:1.5}
.hero-cap{position:absolute;left:0;bottom:0;right:0;padding:26px 20px 14px;background:linear-gradient(transparent,rgba(26,43,58,.9));color:var(--arena)}
.hero-cap .eyebrow{font-family:Helvetica,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--oro);margin-bottom:4px}
.hero-cap h2{font-size:24px;letter-spacing:1px;line-height:1.15}

.body{padding:22px 20px 30px;flex:1}
.lead{font-size:15.5px;line-height:1.7;margin-bottom:18px;color:#33465a}
.lead::first-letter{font-size:46px;float:left;line-height:.8;padding:6px 8px 0 0;color:var(--coral);font-weight:700}
.txt{font-size:14px;line-height:1.7;color:#44586c;margin-bottom:16px}

.divider{display:flex;align-items:center;gap:12px;margin:24px 0 18px}
.divider span{font-family:Helvetica,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--mar);white-space:nowrap;font-weight:600}
.divider::before,.divider::after{content:"";height:1px;background:var(--piedra);flex:1}

.sec-title{text-align:center;margin-bottom:18px}
.sec-title .eyebrow{font-family:Helvetica,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--oro)}
.sec-title h2{font-size:23px;letter-spacing:1px;margin-top:4px;color:var(--tinta)}

.compare{position:relative;width:100%;height:280px;overflow:hidden;border-radius:12px;user-select:none;box-shadow:0 8px 24px var(--sombra);background:var(--piedra)}
.compare .layer{position:absolute;inset:0}
.compare .layer img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.compare .after{clip-path:inset(0 0 0 50%)}
.compare .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:Helvetica,sans-serif;font-size:12px;letter-spacing:1px;color:var(--tinta);text-align:center;padding:20px}
.compare .ph.old{background:repeating-linear-gradient(45deg,#b3a389,#b3a389 12px,#a8977c 12px,#a8977c 24px)}
.compare .ph.new{background:linear-gradient(135deg,var(--mar-claro),var(--mar));color:#fff}
.compare .tag{position:absolute;top:12px;font-family:Helvetica,sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:5px 10px;border-radius:20px;color:#fff;font-weight:600}
.compare .tag.l{left:12px;background:rgba(26,43,58,.7)}
.compare .tag.r{right:12px;background:rgba(181,70,47,.85)}
.compare .handle{position:absolute;top:0;bottom:0;width:3px;background:var(--arena);left:50%;transform:translateX(-50%);box-shadow:0 0 12px rgba(0,0,0,.5);pointer-events:none}
.compare .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--arena);box-shadow:0 4px 12px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;pointer-events:none}
.compare .knob svg{width:22px;height:22px;fill:var(--tinta)}
.cap{font-family:Helvetica,sans-serif;font-size:11px;text-align:center;color:var(--mar);margin-top:12px;letter-spacing:.5px}

.viewer-wrap{position:relative;width:100%;height:320px;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px var(--sombra);background:linear-gradient(160deg,#dfd6c6,#c9b79c)}
model-viewer{width:100%;height:100%;--poster-color:transparent}
.no-model{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#dfd6c6,#b8a688);color:var(--tinta);text-align:center;padding:24px}
.no-model svg{width:52px;height:52px;opacity:.45;margin-bottom:14px;stroke:currentColor;fill:none;stroke-width:1.2}
.no-model b{font-size:15px;letter-spacing:1px;margin-bottom:6px}
.no-model span{font-family:Helvetica,sans-serif;font-size:11.5px;line-height:1.6;opacity:.75;max-width:250px}
.badge-3d{position:absolute;top:12px;left:12px;font-family:Helvetica,sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;background:rgba(26,43,58,.75);color:var(--arena);padding:5px 10px;border-radius:20px;font-weight:600;z-index:2}
.rotate-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:Helvetica,sans-serif;font-size:10px;letter-spacing:1px;color:var(--tinta);background:rgba(245,239,228,.85);padding:6px 14px;border-radius:20px;display:flex;align-items:center;gap:6px;z-index:2}
.rotate-hint svg{width:14px;height:14px;fill:var(--tinta)}

.anim-stage{position:relative;width:100%;height:250px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#25526b 0%,#3a7183 55%,#5a8a72 55%,#4a7560 100%);box-shadow:0 8px 24px var(--sombra)}
.anim-stage .sun{position:absolute;top:22px;right:34px;width:40px;height:40px;border-radius:50%;background:#f0d68a;box-shadow:0 0 30px #f0d68a88}
.ship{position:absolute;bottom:38%;font-size:34px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));animation:sail 8s linear infinite}
.ship.s2{bottom:44%;font-size:26px;animation-duration:11s;animation-delay:-3s;opacity:.85}
.ship.s3{bottom:33%;font-size:30px;animation-duration:9s;animation-delay:-6s;opacity:.9}
@keyframes sail{from{left:-14%}to{left:110%}}
.fort{position:absolute;bottom:0;left:0;right:0;height:46%;background:linear-gradient(180deg,#7d6a4f,#5c4d38);clip-path:polygon(0 40%,12% 40%,12% 20%,20% 20%,20% 40%,80% 40%,80% 18%,88% 18%,88% 40%,100% 40%,100% 100%,0 100%)}
.flag{position:absolute;bottom:46%;left:48%;font-size:22px;animation:wave 2s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.anim-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 16px 12px;background:linear-gradient(transparent,rgba(26,43,58,.85));color:var(--arena)}
.anim-cap b{font-size:15px;letter-spacing:1px;display:block;margin-bottom:2px}
.anim-cap span{font-family:Helvetica,sans-serif;font-size:11px;opacity:.85}

.timeline{margin-top:6px}
.tl-item{display:flex;gap:14px;padding-bottom:18px;position:relative}
.tl-item::before{content:"";position:absolute;left:33px;top:22px;bottom:-4px;width:2px;background:var(--piedra)}
.tl-item:last-child::before{display:none}
.tl-year{flex-shrink:0;width:66px;font-family:Helvetica,sans-serif;font-weight:700;font-size:14px;color:var(--coral);text-align:right;padding-top:1px}
.tl-dot{position:absolute;left:28px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--coral);border:3px solid var(--papel);z-index:1}
.tl-body{flex:1;font-size:13px;line-height:1.55;color:#44586c;padding-left:20px}

#s-map{background:var(--tinta)}
#s-map .body{color:var(--arena)}
.map-canvas{position:relative;height:260px;margin:0 -20px 22px;background:linear-gradient(160deg,#24485c,#2e6b78);overflow:hidden}
.map-canvas .water{position:absolute;inset:0;opacity:.25;background:repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(255,255,255,.15) 18px,rgba(255,255,255,.15) 20px)}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:pointer;text-decoration:none}
.pin .dot{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.pin .dot b{transform:rotate(45deg);font-family:Helvetica,sans-serif;font-size:11px;color:#fff;font-weight:700}
.pin.live .dot{background:var(--coral);animation:pulse 2s infinite}
.pin.soon .dot{background:var(--mar-claro)}
@keyframes pulse{0%,100%{box-shadow:0 3px 8px rgba(0,0,0,.4),0 0 0 0 rgba(181,70,47,.5)}50%{box-shadow:0 3px 8px rgba(0,0,0,.4),0 0 0 10px rgba(181,70,47,0)}}
.pin label{margin-top:6px;font-family:Helvetica,sans-serif;font-size:9px;letter-spacing:.5px;color:var(--arena);background:rgba(26,43,58,.6);padding:2px 7px;border-radius:10px;white-space:nowrap;cursor:pointer}
.legend{display:flex;gap:18px;justify-content:center;font-family:Helvetica,sans-serif;font-size:11px;color:var(--arena);margin-bottom:20px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:50%}
.map-note{font-size:13px;line-height:1.6;text-align:center;color:rgba(245,239,228,.75);max-width:290px;margin:0 auto}
#s-map .sec-title h2{color:var(--arena)}

.navbar{flex-shrink:0;display:flex;background:var(--papel);border-top:1px solid var(--piedra);padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:10}
.navbar button{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;font-family:Helvetica,sans-serif;font-size:9px;letter-spacing:.5px;color:#8a99a6;transition:color .2s}
.navbar button svg{width:22px;height:22px;stroke:#8a99a6;fill:none;stroke-width:1.6;transition:stroke .2s}
.navbar button.on{color:var(--coral)}
.navbar button.on svg{stroke:var(--coral)}

/* ===== Mapa real ===== */
#leaflet-map{height:280px;margin:0 -20px 16px;background:#24485c}
.leaflet-container{font-family:Helvetica,sans-serif}
.leaflet-popup-content{font-family:Helvetica,sans-serif;font-size:13px;line-height:1.5}
.leaflet-popup-content b{font-family:Georgia,serif;font-size:15px}
.leaflet-popup-content a{color:var(--coral);font-weight:600;text-decoration:none}
.leaflet-control-attribution{font-size:9px}

.pin-map .dot{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.pin-map .dot b{transform:rotate(45deg);font-family:Helvetica,sans-serif;font-size:11px;color:#fff;font-weight:700}
.pin-map.live .dot{background:var(--coral)}
.pin-map.soon .dot{background:var(--mar-claro)}

.map-ctrl{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--arena)}
.map-ctrl label{font-family:Helvetica,sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--oro);white-space:nowrap;font-weight:600}
.map-ctrl input[type=range]{flex:1;accent-color:var(--coral)}
.map-ctrl span{font-family:Helvetica,sans-serif;font-size:11px;width:36px;text-align:right;opacity:.8}

.btn-loc{background:none;border:1px solid rgba(245,239,228,.35);color:var(--arena);font-family:Helvetica,sans-serif;font-size:11px;padding:5px 12px;border-radius:20px;cursor:pointer}
.btn-loc:hover{background:rgba(245,239,228,.12)}

/* ===== Botón AR dentro del visor ===== */
.ar-btn{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;background:var(--coral);color:#fff;border:none;font-family:Helvetica,sans-serif;font-size:12px;font-weight:600;letter-spacing:.5px;padding:11px 20px;border-radius:26px;box-shadow:0 6px 18px rgba(181,70,47,.45);cursor:pointer}
.ar-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.ar-btn:active{transform:translateX(-50%) scale(.96)}

/* ===== CTA de AR en el mapa ===== */
.map-note-wrap{text-align:center}
.ar-cta{margin-top:20px;display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:#fff;border:none;font-family:Helvetica,sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;padding:14px 26px;border-radius:30px;box-shadow:0 8px 22px rgba(181,70,47,.4);cursor:pointer}
.ar-cta svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.ar-cta:active{transform:scale(.97)}

/* ===== Infografía AR ===== */
.ar-stage{position:relative;width:100%;height:360px;border-radius:12px;overflow:hidden;background:#0d1720;box-shadow:0 8px 24px var(--sombra)}
.ar-stage video{width:100%;height:100%;object-fit:cover;display:none}
.ar-stage #ar-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.85;pointer-events:none}
.ar-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--arena);cursor:pointer}
.ar-start svg{width:46px;height:46px;fill:none;stroke:var(--arena);stroke-width:1.3;margin-bottom:14px;opacity:.8}
.ar-start b{font-family:Georgia,serif;font-size:17px;margin-bottom:6px}
.ar-start span{font-family:Helvetica,sans-serif;font-size:12px;opacity:.7;max-width:240px;line-height:1.5}
.ar-ctrl{display:flex;align-items:center;gap:12px;margin-top:14px}
.ar-ctrl label{font-family:Helvetica,sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mar);font-weight:600}
.ar-ctrl input[type=range]{flex:1;accent-color:var(--coral)}