@import url('mv-tokens.css');
/* Same live selector remains above the map until its entry pose is ready. */
body.enhanced .portal-scroll.entrance-bridge{position:fixed;inset:0;height:100svh;min-height:0;z-index:4;pointer-events:none}
body.enhanced .entrance-bridge .portal-sticky{position:absolute;inset:0;height:100svh;min-height:0;overflow:hidden}
body.enhanced .entrance-bridge #selector{position:absolute;top:var(--entrance-top,0px);left:0;right:0;bottom:auto;height:var(--entrance-height,100svh)}
body.enhanced.entrance-active .map-controls{position:fixed;top:14px;left:4vw;padding:0;z-index:6}
body.enhanced.entrance-active #status{position:fixed;top:70px;left:4vw;margin:0;z-index:6;max-width:92vw;font-size:14px}
body.enhanced.entrance-active .selector-copy{opacity:0}
body.journey-armed #selector{overflow-y:hidden;touch-action:pan-y}
body.journey-armed .archipelago-map{transform:scale(calc(1 + var(--journey-intent,0)*.08));transform-origin:center;transition:none;will-change:transform}
body.journey-armed [data-land].selected .island-halo{filter:drop-shadow(0 0 calc(5px + var(--journey-intent,0)*5px) var(--mv-turquesa)) drop-shadow(0 0 calc(12px + var(--journey-intent,0)*16px) #3FA9AE99)}
body.journey-armed #selection-note::after{content:" ↓";color:var(--turquesa)}
#explore:not([hidden]):focus-visible{outline:3px solid var(--turquesa);outline-offset:5px}
body.enhanced #map::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0b0c0e75,transparent 25%,transparent 80%,#0b0c0e55)}
body.enhanced #content{animation:arrival-panel 240ms cubic-bezier(.23,1,.32,1)}
@keyframes arrival-panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Carta de navegación: misma roca, cobre y tipografía que el medallón. */
body.enhanced #selector.geographic-selector,#selector.geographic-selector{padding:clamp(40px,7vh,90px) 4vw 35px;max-width:none}
.archipelago-layout{display:grid;grid-template-columns:minmax(220px,24%) minmax(0,1fr);align-items:center;min-height:78svh;gap:0 2vw;max-width:1800px;margin:auto}
.selector-copy{padding-left:1vw;position:relative;z-index:1}
#selector .selector-copy h2{font-size:clamp(32px,3.2vw,54px);line-height:1.13;margin:30px 0 22px;max-width:12ch;letter-spacing:-.05em}
.selector-copy h2 em{display:block;font-size:.54em;line-height:1.5;font-style:normal;color:var(--plata);letter-spacing:-.025em;margin-top:20px}
.selector-instruction{font-size:13px;line-height:1.7;color:var(--plata);max-width:24ch}
.selector-copy .eyebrow{font-size:10px;letter-spacing:.22em}
.selection-summary{min-height:158px;padding-top:20px}
#selected-name{font-size:20px;color:var(--turquesa);margin:0;min-height:32px}
.selection-summary .primary{margin-top:12px;font-size:13px;padding:12px 20px}
.selection-summary #selection-note{font-size:12px;line-height:1.6;max-width:28ch}
.archipelago-map{position:relative;width:100%;aspect-ratio:1100/610;background:var(--mv-mar) var(--oceano-fase) center/100% 100% no-repeat;isolation:isolate}
[data-land].selected image{filter:url(#terrain-tone) brightness(1.12)}
.archipelago-viewport{min-width:0;overflow:visible}
.context-islet{fill:#635143;stroke:var(--cobre);stroke-width:.5;opacity:.65}
.map-pan-hint{display:none}
.archipelago-art{display:block;width:100%;height:100%;overflow:visible}
.island-halo{fill:#C8886220;stroke:var(--cobre);stroke-width:.65;opacity:.5;vector-effect:non-scaling-stroke;transition:opacity .25s,stroke .25s}
.land-hit{fill:transparent;stroke:transparent;stroke-width:8;cursor:pointer;vector-effect:non-scaling-stroke}
[data-land]:hover .island-halo{opacity:1;stroke:var(--cobre-claro);stroke-width:1.5}
[data-land].selected .island-halo{opacity:1;fill:#3FA9AE25;stroke:var(--turquesa);stroke-width:2.5;filter:drop-shadow(0 0 5px var(--mv-turquesa)) drop-shadow(0 0 12px #3FA9AE99)}
.geo-leader{fill:var(--cobre);stroke:var(--cobre);stroke-width:.7;opacity:.65;pointer-events:none}
.geo-leader path{fill:none}
.geo-leader.selected{stroke:var(--turquesa);fill:var(--turquesa);opacity:1}
.geo-label{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;justify-content:center;white-space:nowrap;min-height:44px;padding:8px 9px;font-size:clamp(12px,1.15vw,18px);letter-spacing:.015em;color:var(--texto);text-shadow:0 2px 5px #000,0 0 12px var(--mv-roca);background:#0b0c0ec9;border-radius:3px;line-height:1.2}
.geo-label:hover{color:var(--cobre-claro)}
.geo-label{background:none;text-shadow:0 1px 3px #000,0 0 8px var(--mv-roca),0 0 8px var(--mv-roca),0 0 12px var(--mv-roca)}
.chosen-mark{display:none;color:var(--turquesa);font-size:12px}
.geo-label[aria-current=true]{color:var(--turquesa)}
.geo-label[aria-current=true] .chosen-mark{display:inline}
/* Meteo viva: una sola linea breve, legible y subordinada al nombre de isla. */
.geo-label{flex-wrap:wrap}
.meteo-line{flex-basis:100%;order:3;font-size:12px;letter-spacing:.02em;color:var(--plata);opacity:.82;font-weight:400;text-transform:none}
.ocean-caption{font:10px var(--brand-font);letter-spacing:8px;fill:var(--plata);opacity:.2}
.north-mark{stroke:var(--cobre);fill:none;stroke-width:1;opacity:.6}
.north-mark text{stroke:none;fill:var(--cobre);font:10px var(--brand-font)}
.island-list{grid-column:1/-1;margin:15px 1vw 0;border-top:1px solid var(--brand-line)}
.island-list summary{cursor:pointer;min-height:44px;padding:15px 0;font-size:12px;letter-spacing:.08em;color:var(--plata);list-style:none;display:flex;justify-content:space-between}
.island-list summary::-webkit-details-marker{display:none}
.island-list summary span{color:var(--cobre)}
.island-list .islands{grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 0 25px}
.island-list .island-choice>span:first-child{font-size:20px}
.map-credit{grid-column:1/-1;text-align:right;justify-self:end;margin:12px 1vw 0;font-size:10px;line-height:1.6;color:var(--plata)}
.map-credit a{text-decoration:underline;display:inline-block;min-height:24px}
@media(max-width:1000px){
 .archipelago-layout{grid-template-columns:1fr;min-height:0}
 .selector-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:15px}
 .selector-copy>.eyebrow,.selector-copy h2,.selector-instruction{grid-column:1}
 #selector .selector-copy h2{font-size:32px;max-width:none;margin:12px 0}
 .selector-copy h2 em{font-size:.58em;margin-top:8px}
 .selection-summary{grid-column:2;grid-row:1/4;align-self:center;min-height:100px;padding-top:0}
 .selector-instruction{margin:0;max-width:none;font-size:12px}
 .archipelago-map{margin:18px 0}
 .geo-label{font-size:12px}
}
@media(max-width:600px){
 .meteo-line{font-size:11px}
 body.enhanced #selector.geographic-selector,#selector.geographic-selector{padding:26px 16px 30px}
 .selector-copy{display:block}
 #selector .selector-copy h2{font-size:30px;margin:12px 0}
 .selector-copy h2 em{font-size:18px;margin-top:5px}
 .selector-instruction{max-width:none}
 .selection-summary{min-height:100px;padding-top:10px}
 .selection-summary .primary{margin-top:4px}
 #selected-name{font-size:17px;min-height:26px}
 .archipelago-map{min-width:660px;margin:0;direction:ltr}
 .archipelago-viewport{overflow-x:auto;overscroll-behavior-x:contain;padding:8px 0;scrollbar-color:var(--cobre) var(--roca);scrollbar-width:thin;direction:rtl;mask-image:linear-gradient(90deg,transparent 0,#000 26px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px)}
 .map-pan-hint{display:block;font-size:11px;color:var(--plata);margin:8px 0}
 .selector-copy,.island-list,.map-credit{max-width:calc(100vw - 32px)}
 .island-list .islands{grid-template-columns:1fr 1fr;gap:0 15px}
 .island-list .island-choice>span:first-child{font-size:17px}
 .island-list .island-choice>span:last-child{width:28px;height:28px}
 .map-credit{text-align:left;justify-self:start}
}

/* --- R49 (portada a la demo portal-sello): océano por fase horaria ----------
   El relieve lo intercambia journey-main.mjs (applySelectorAmbience); el océano
   se intercambia aquí con una variable. Noche = estado base aprobado: sin JS o
   sin fase conocida, todo queda exactamente como antes. Las URL relativas se
   resuelven contra esta hoja (mismo directorio que las imágenes). */
:root{--oceano-fase:url(archipelago-ocean.webp)}
body[data-daylight="dia"]{--oceano-fase:url(archipelago-ocean-dia.webp)}
body[data-daylight="amanecer"]{--oceano-fase:url(archipelago-ocean-amanecer.webp)}
body[data-daylight="dorado"]{--oceano-fase:url(archipelago-ocean-dorado.webp)}