@import url('mv-tokens.css');
/* ============================================================
   SELECTOR V2 (demo portal-sello) — océano a sangre completa,
   continuo con la apertura del medallón.
   Reglas ADITIVAS sobre archipelago.css: no se toca la máquina
   de estados de Codex (fases, entrance-bridge, journey-armed).
   Ámbito: escritorio ≥1000px; móvil conserva el diseño vigente.
   ============================================================ */

/* --- 1. Continuidad: tras las hojas del portal hay OCÉANO ---
   La textura va amortiguada por una capa oscura al 55 %: las hojas son
   semitransparentes y en ultrawide el recorte `cover` mostraba la banda
   tonal de la textura como una línea dura a través del portal. */
body.enhanced .portal-sticky {
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(10,17,20,0) 40%, rgba(11,12,14,0.55) 100%),
    linear-gradient(rgba(11,12,14,0.55), rgba(11,12,14,0.55)),
    var(--mv-mar) var(--oceano-fase) center / cover no-repeat;
}
/* --- 2. El selector ES el océano (a sangre, sin caja) --- */
@media (min-width: 1000px) {
  body.enhanced #selector.geographic-selector {
    padding: 0;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
    /* Misma textura de océano detrás del mapa: si la ventana es alta y
       estrecha y el mapa no llega a cubrir, las bandas son mar, no negro. */
    background: var(--mv-mar) var(--oceano-fase) center / cover no-repeat;
  }
  .archipelago-layout { display: block; position: relative; min-height: 100svh; max-width: none; }

  /* El mapa cubre la sección conservando la proporción del SVG, para que
     etiquetas y líderes sigan anclados a su isla.
     - Ancho: cover con dos topes — 108vw (en ventanas altas/estrechas un
       recorte mayor expulsaría El Hierro/La Palma por la izquierda) y
       194.76svh (en ultrawide ≥2:1 un recorte vertical mayor expulsaría
       El Hierro por abajo y La Graciosa por arriba). Lo que no cubra lo
       absorbe el fondo oceánico de #selector y los fundidos de borde.
     - Horizontal: desplazamiento a la izquierda de un 31,5 % del recorte
       real (da aire a Lanzarote/Lobos; si no hay recorte, es 0).
     - Vertical: +60 px para compensar el pie visible en reposo. */
  .archipelago-viewport {
    position: absolute;
    top: calc(50% + 60px);
    left: calc(50% - 0.1575 * max(0px, min(max(100vw, 180.33svh), 108vw, 194.76svh) - 100vw));
    width: min(max(100vw, 180.33svh), 108vw, 194.76svh);   /* 1100/610.2744 = 1,8033 */
    aspect-ratio: 1100 / 610.2744;
    transform: translate(-50%, -50%);
    overflow: visible;
    /* fundido horizontal: en ultrawide hay bandas laterales de mar y la
       costura mapa/fondo desaparece (las etiquetas viven a >60 px) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }
  .archipelago-map {
    width: 100%; height: 100%; aspect-ratio: auto;
    /* fundido vertical: si hay bandas, la costura mapa/fondo desaparece */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }

  /* Corriente lenta: deriva sutil del agua (las islas no se mueven,
     las etiquetas tampoco). Sin motion si el usuario lo pide. */
  @media (prefers-reduced-motion: no-preference) {
    .archipelago-map { animation: oceano-deriva 60s ease-in-out infinite alternate; }
  }
  @keyframes oceano-deriva {
    from { background-position: 49.2% 50%; }
    to   { background-position: 50.8% 50.6%; }
  }

  /* --- 3. Copia editorial: bloque compacto en la esquina superior
         izquierda (el único cuadrante sin islas). El scrim de altura
         completa velaba La Palma, La Gomera y El Hierro; ahora es una
         mancha de esquina que muere antes de llegar a ellas. --- */
  .selector-copy {
    position: absolute; z-index: 3; inset: 0 auto auto 0;
    /* Empieza a la derecha de la franja de La Palma: su etiqueta
       queda sobre océano limpio y brilla como las demás. Ancho topado:
       en ultrawide 38vw sería un rectángulo desproporcionado. */
    left: clamp(180px, 19vw, 480px);
    width: min(38%, 560px); min-width: 380px;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: clamp(26px, 4.5vh, 52px) 3vw clamp(20px, 3.2vh, 32px) 4vw;
    background: linear-gradient(150deg,
      rgba(10,17,20,0.9) 0%, rgba(10,17,20,0.55) 52%,
      rgba(10,17,20,0.14) 78%, rgba(10,17,20,0) 96%);
    border-radius: 0 0 18px 0;
  }
  /* El resumen de selección no reserva altura en vacío: el bloque se
     mantiene compacto y solo crece cuando hay isla elegida. */
  .selector-copy .selection-summary { min-height: 0; padding-top: 14px; }
  .selector-copy .selection-summary #selected-name { min-height: 0; }
  #selector .selector-copy h2 {
    font-size: clamp(40px, 3.8vw, 66px);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .selector-copy h2 em {
    font-style: italic; font-family: Georgia, 'Times New Roman', serif;
    color: var(--mv-cobre-claro); font-size: 0.52em; letter-spacing: 0;
  }
  .selector-instruction { color: var(--mv-plata); max-width: none; white-space: nowrap; }
  body.enhanced.entrance-active .selector-copy { opacity: 1; } /* v2: la copia acompaña la entrada */
  /* Viewport bajo: la esquina compacta no debe pisar a La Palma */
  @media (max-height: 820px) {
    .selector-copy { padding-top: 20px; padding-bottom: 24px; }
    #selector .selector-copy h2 { font-size: clamp(30px, 3.2vw, 48px); }
  }
  /* Escritorio estrecho (1000–1150): el pie se reenvuelve a tres filas y en
     reposo come 141 px del selector. Se compensa con top:130 y el bloque se
     compacta (sin kicker, H2 de una línea) para no tocar la etiqueta de
     Tenerife, que empieza sobre y≈360. */
  @media (min-width: 1000px) and (max-width: 1150px) {
    .selector-copy {
      top: 130px; width: 320px; min-width: 0;
      padding: 16px 22px 16px 20px;
    }
    .selector-copy .eyebrow { display: none; }
    #selector .selector-copy h2 { font-size: clamp(26px, 3vw, 34px); text-wrap: nowrap; }
    .selector-instruction { font-size: 13px; }
  }
  /* Ultrawide (≥1900 px y proporción ≥2:1): el archipiélago dibuja una
     diagonal y el océano abierto queda arriba en el centro. El bloque se
     convierte en cartel centrado sobre el Atlántico: no toca ninguna
     etiqueta (La Palma queda a su izquierda, Tenerife debajo) y no es un
     rectángulo lateral desproporcionado. */
  @media (min-width: 1900px) and (min-aspect-ratio: 2/1) {
    .selector-copy {
      left: 50%; transform: translateX(-50%);
      width: min(92vw, 620px); min-width: 0;
      align-items: center; text-align: center;
      padding: clamp(24px, 4vh, 44px) 40px clamp(22px, 3.6vh, 40px);
      background: linear-gradient(180deg,
        rgba(10,17,20,0.9) 0%, rgba(10,17,20,0.55) 52%,
        rgba(10,17,20,0.14) 78%, rgba(10,17,20,0) 96%);
      border-radius: 0 0 18px 18px;
    }
    #selector .selector-copy h2 { font-size: clamp(36px, 2.6vw, 56px); text-wrap: nowrap; }
  }

  /* --- 4. Etiquetas estilo Atlas: punto de cobre + small caps --- */
  .geo-label {
    font-size: clamp(11px, 0.95vw, 14px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mv-texto);
    gap: 9px;
  }
  .geo-label::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--mv-cobre); flex: none;
    box-shadow: 0 0 6px rgba(200,136,98,0.8);
  }
  /* Margen oriental: Lanzarote y Lobos anclan su etiqueta por la DERECHA;
     el texto crece hacia dentro y el punto queda sobre el ancla (donde
     termina la línea líder). Así ninguna etiqueta toca el borde. */
  .geo-label[data-island="lanzarote"],
  .geo-label[data-island="lobos"] {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + 15px), -50%);
  }
  .geo-label:hover { color: var(--mv-cobre-claro); }
  .geo-label[aria-current=true] { color: var(--mv-turquesa); }
  .geo-label[aria-current=true]::before { background: var(--mv-turquesa); box-shadow: 0 0 8px rgba(63,169,174,0.9); }

  /* Halos: cobre en reposo/hover (marca), turquesa solo en selección. */
  [data-land]:hover .island-halo {
    opacity: 1; stroke: var(--mv-cobre-claro); stroke-width: 2;
    filter: drop-shadow(0 0 9px rgba(200,136,98,0.65));
  }

  /* --- 5. Lista y créditos flotando sobre el mar --- */
  .island-list {
    position: absolute; z-index: 3; left: 4vw; right: 4vw; bottom: 0;
    margin: 0; border-top-color: rgba(184,178,171,0.18);
    background: linear-gradient(0deg, rgba(10,17,20,0.72), rgba(10,17,20,0));
  }
  /* Crédito cartográfico: sobre la banda inferior, libre de la flecha del
     Norte (que vive a ~96 % del mapa) y del icono ↗ de la lista. */
  .map-credit {
    position: absolute; z-index: 3; right: calc(4vw + 40px); bottom: 60px; margin: 0;
    max-width: 380px; font-size: 10px; line-height: 1.55; text-wrap: pretty;
    text-align: right; text-shadow: 0 1px 3px #000;
  }
}