/* ============================================================================
   melohostel.com — hub de marca
   Todos los valores salen de melohostel.com.dc.html. Ver NOTAS-MOCKUP.md.
   Base = móvil (artboard 390×844). El escalón ≥1280px = artboard 1440×900.
   ========================================================================== */

:root {
  --negro: #0D0D0D;
  --card: #161616;
  --elev: #1A1A1A;
  --fucsia: #F90273;
  --fucsia-hover: #FF1A85;
  --rosa: #FDC7DA;
  --txt: #F5F5F5;
  --body: #D4D4D8;
  /* El mockup usa #71717A. Sobre #0D0D0D da 4.02:1 y no pasa AA a 9–11px,
     que son los únicos tamaños donde se usa. Subido al mínimo que pasa. */
  --mute: #7E7E87;

  --trama: #141414;      /* fondo de las mitades del mapa sin foto */

  /* Mapa y pines. Los % de los pines son del path de 1000×1390.02 que va en
     index.html; si cambia el mapa, cambian estas líneas y nada más: pines,
     fichas y conectores se recalculan solos. */
  --mapa-ancho: 476px;
  --mapa-alto: calc(476px * 1390.02 / 1000);
  --mapa-top: 6px;                 /* el mapa arranca 6px bajo el h1 (118 vs 112) */
  --pin-c-x: .1353;  --pin-c-y: .2299;
  --pin-b-x: .1335;  --pin-b-y: .5077;

  /* Extremo de cada conector en el botón: borde derecho, a media altura.
     Fijos porque los bloques de sede van anclados al fondo de la columna. */
  --btn-der: 560px;
  --btn-b-y: 488px;                /* La Barra va arriba… */
  --btn-c-y: 664px;                /* …y Capurganá abajo */

  --bebas: 'Bebas Neue', 'Bebas sustituta', 'Arial Narrow', sans-serif;
  --jost: 'Jost', 'Jost sustituta', system-ui, sans-serif;
}

/* Sustitutas con métricas ajustadas: mientras Google Fonts entrega las webfonts
   (display=swap), el texto se pinta con la fuente local reescalada al ancho de
   la definitiva, así el cambio no mueve el layout. Medido en esta página:
   Bebas ocupa el 59.2% de Arial y Jost el 98.5% de system-ui. */
@font-face {
  font-family: 'Bebas sustituta';
  src: local('Arial Narrow'), local('Arial'), local('Helvetica');
  size-adjust: 59.2%;
  ascent-override: 150%;
  descent-override: 0%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Jost sustituta';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 98.5%;
}

* { box-sizing: border-box; }

html { background: var(--negro); }

body {
  margin: 0;
  min-width: 320px;
  background: var(--negro);
  color: var(--txt);
  font-family: var(--jost);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rosa); text-decoration: none; }
a:hover { color: var(--fucsia); }

:focus-visible { outline: 3px solid var(--rosa); outline-offset: 5px; }

/* ---------- estructura de página ---------------------------------------- */
/* Móvil sin scroll: la página mide el alto VISIBLE de la pantalla (dvh, sin
   las barras del navegador) y el mapa es la pieza elástica: ocupa lo que
   dejan el texto y los botones, entre 120 y 250px de alto. Tipos y espacios
   se ajustan un poco con el alto (dvh) y nunca bajan de un mínimo legible.
   Si la pantalla es tan baja que ni con el mapa al mínimo cabe, la fila del
   medio crece y la página hace scroll: nada se recorta ni se encima. */
.pagina {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(6px, 1.6dvh, 14px);
  /* abajo fijo en 18: el área táctil de 44px de los enlaces legales sobresale
     17,5px bajo el texto y no debe salirse de la pantalla */
  padding: clamp(12px, 2.6dvh, 22px) 24px 18px;
  /* El halo del mapa (.aureola) mide 420px en móvil, como en el mockup, y en
     un teléfono de 390 sobresalía 20px por lado: ensanchaba la página a 410.
     clip recorta solo en horizontal y no crea contenedor de scroll, así que la
     regla de no recortar contenido en vertical sigue intacta. */
  overflow-x: clip;
}

/* ---------- header ------------------------------------------------------- */

.marca { display: flex; align-items: center; gap: 9px; }

.marca-iso {
  width: clamp(20px, 3.4dvh, 24px); height: clamp(20px, 3.4dvh, 24px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(249, 2, 115, .65));
}

.marca-nombre {
  font-family: var(--bebas);
  font-size: clamp(17px, 2.9dvh, 20px);
  line-height: 1;
  letter-spacing: .17em;
  color: var(--txt);
}

/* ---------- main --------------------------------------------------------- */
/* Orden del DOM = orden visual en móvil: texto → mapa → cierre → sedes.      */

.hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6dvh, 14px);
}

.texto {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6dvh, 14px);
  width: 100%;
}

h1 {
  margin: 0;
  font-family: var(--bebas);
  font-weight: 400;
  font-size: clamp(30px, 5.4dvh, 40px);
  line-height: .9;
  letter-spacing: .012em;
  color: var(--txt);
}

.parrafos { display: flex; flex-direction: column; gap: 5px; }

.p-uno {
  margin: 0;
  font-size: clamp(12px, 1.95dvh, 13px);
  line-height: 1.45;
  color: var(--body);
}

.p-dos {
  margin: 0;
  font-size: clamp(13px, 2.25dvh, 15px);
  line-height: 1.35;
  color: var(--rosa);
}

/* Trozos de copy que solo existen en la versión ancha del mockup. */
.solo-ancho { display: none; }

.cierre {
  margin: 0;
  font-family: var(--bebas);
  font-size: clamp(17px, 3dvh, 20px);
  line-height: 1;
  letter-spacing: .012em;
  color: var(--rosa);
  text-align: center;
}

.punto { color: var(--fucsia); }

/* ---------- bloques de sede ---------------------------------------------- */

.sedes {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.7dvh, 14px);
  width: 100%;
  max-width: 342px;
}

.sede { display: flex; flex-direction: column; gap: clamp(4px, .9dvh, 7px); }

.sede-zona {
  font-weight: 500;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rosa);
}

.sede-medida { display: flex; align-items: center; gap: 9px; }

/* En móvil el mockup quita el label "Intensidad" y el separador. */
.sede-medida-label,
.sede-medida-sep { display: none; }

.sede-medida-cifra {
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  color: var(--txt);
}

.sede-medida-tipo {
  font-weight: 500;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--body);
}

/* ---------- fueguitos ----------------------------------------------------- */

.fueguitos { display: inline-flex; }
.fueguitos svg { display: block; width: 74px; height: 16px; }

@keyframes fueguito {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  35% { opacity: .62; transform: scaleY(.9); }
  70% { opacity: .95; transform: scaleY(1.05); }
}

/* Cada llama va dentro de un <g transform="translate(...)"> porque la
   animación fija `transform` y borraría el translate si estuviera en el path.
   transform-box:fill-box hace que la llama se estire desde su propia base. */
.llama {
  animation: fueguito 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* ---------- botones de sede ---------------------------------------------- */

.sede-btn {
  --disco: clamp(40px, 6.3dvh, 48px);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: clamp(52px, 8.4dvh, 64px);   /* objetivo táctil holgado, nunca < 52 */
  padding: 0 20px 0 8px;
  border-radius: 32px;
  background: var(--fucsia);
  box-shadow: 0 12px 34px rgba(249, 2, 115, .40),
              inset 0 0 0 1px rgba(253, 199, 218, .28);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.sede-btn:hover { background: var(--fucsia-hover); }

/* Disco blanco del mockup. La trama y el rótulo eran el placeholder; con la
   ilustración real (la de la sección de sedes de Capurganá) queda liso. */
.sede-btn-disco {
  flex: none;
  width: var(--disco); height: var(--disco);
  border-radius: 50%;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tamaños relativos al disco, los mismos que usa MasDeUnaSede en las sedes:
   ballena ~67% y mono ~61% del diámetro, para que pesen parecido. */
.fauna { display: block; object-fit: contain; max-width: none; }
.fauna-ballena { width: calc(var(--disco) * .67); height: calc(var(--disco) * .67); }
.fauna-mono { width: calc(var(--disco) * .61); height: calc(var(--disco) * .61); }

/* Texto oscuro sobre fucsia: #0D0D0D da 4.9:1 y pasa AA; blanco da 3.97:1. */
.sede-btn-nombre {
  font-family: var(--bebas);
  font-size: clamp(20px, 3.4dvh, 24px);
  line-height: 1;
  letter-spacing: .012em;
  color: var(--negro);
}

.sede-btn-flecha {
  margin-left: auto;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--negro);
  transition: transform .2s ease;
}

/* ---------- mapa ---------------------------------------------------------- */

.mapa-caja {
  display: flex;
  justify-content: center;
  width: 100%;
  flex: 1 1 0;
  min-height: 120px;                  /* debajo de esto, mejor scroll */
  max-height: 250px;                  /* el tamaño del mockup; el aire sobrante se reparte */
}

/* El alto manda y el ancho sale del aspect-ratio del viewBox, así que pines,
   fotos y recorte escalan juntos como siempre. */
.mapa {
  position: relative;
  z-index: 0;
  flex: none;
  height: 100%;
  width: auto;
  aspect-ratio: 1000 / 1390.02;
  /* Contenedor para cqw: como el mapa móvil cambia de tamaño según el alto de
     la pantalla, el wordmark y los discos de los pines se miden contra él
     (las proporciones del mockup: 15px y 24px sobre un mapa de 175). */
  container-type: inline-size;
}

.aureola {
  position: absolute;
  inset: -10% -70% -62%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 2, 115, 1) 0%, rgba(249, 2, 115, 0) 70%);
  opacity: .17;
  pointer-events: none;
}

.mapa-relleno {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: url(#colClip);
  overflow: hidden;
}

.mapa-mitad {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  /* El color de trama queda de fondo: es lo que se ve mientras la foto carga
     y si el navegador no soporta WebP. */
  background-color: var(--trama);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Móvil: el mapa mide 150-200px, así que basta la versión de 400px.
   El escritorio la sube a 952 en el escalón de >=1280 (más abajo). */
.mapa-norte { top: 0; background-image: url(assets/foto-caribe-400.webp); }
.mapa-sur { top: 50%; background-image: url(assets/foto-pacifico-400.webp); }

.mapa-costura {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 100%;
  height: 2px;
  background: var(--fucsia);
  /* Con fotos, el atardecer del Pacífico ya hace de horizonte en la juntura.
     La línea baja a un apoyo tenue: marcaba el corte cuando las mitades eran
     trama plana, y al 50% partía el mapa en dos. */
  opacity: .22;
}

.mapa-contorno {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(249, 2, 115, .6))
          drop-shadow(0 0 26px rgba(249, 2, 115, .28));
}

.mapa-contorno path { stroke-width: 1.8; }

.mapa-wordmark {
  position: absolute;
  left: 48%;
  top: 44%;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-family: var(--bebas);
  font-size: 8.6cqw;                  /* 15px sobre el mapa de 175 del mockup */
  line-height: .9;
  letter-spacing: .012em;
  color: var(--txt);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(249, 2, 115, .9);
}

/* ---------- pines --------------------------------------------------------- */
/* Ninguna sede es la actual: los dos pines son idénticos. */

.pin {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;          /* área táctil */
  margin: -22px 0 0 -22px;
  transition: transform .2s ease;
}

.pin-disco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(16px, 13.7cqw, 24px);  /* disco visible, a escala del mapa */
  height: clamp(16px, 13.7cqw, 24px);
  border-radius: 50%;
  background: var(--fucsia);
  box-shadow: 0 0 0 2px rgba(249, 2, 115, .22), 0 0 16px rgba(249, 2, 115, .8);
  transition: box-shadow .2s ease;
}

.pin img { display: block; width: clamp(9px, 7.4cqw, 13px); height: clamp(9px, 7.4cqw, 13px); object-fit: contain; }

.pin-c { left: calc(var(--pin-c-x) * 100%); top: calc(var(--pin-c-y) * 100%); }
.pin-b { left: calc(var(--pin-b-x) * 100%); top: calc(var(--pin-b-y) * 100%); }

/* La ficha taparía el contorno: solo existe en el escalón ancho, y solo en
   hover/focus del pin. */
.pin-ficha { display: none; }

/* ---------- footer -------------------------------------------------------- */

.legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.legal-razon {
  font-size: 9px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}

.legal-enlaces { display: flex; gap: 14px; }

.legal-enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                /* objetivo táctil mínimo */
  margin-block: -17.5px;           /* …sin sumar alto: en el layout ocupa sus 9px */
  padding-inline: 6px;
  font-weight: 500;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- conectores ---------------------------------------------------- */
/* Solo en el escalón ancho, y sin JS: ver el bloque ≥1280px. */

.conn,
.conn-punto { display: none; }

/* ==========================================================================
   ≥1280px — artboard 1440×900
   Composición fija: columna de decisión 640, mapa 476. Entre ambas, el aire
   que sobre (164 a 1440). En pantallas más bajas se escala con zoom.
   ========================================================================== */

@media (min-width: 1280px) {

  /* --z escala la composición entera (ver "Portátiles" al final). Header y
     footer toman el mismo ancho escalado que la composición, así los tres
     bordes izquierdos quedan alineados como en el mockup (x=80 a 1440). */
  :root { --z: 1; }

  .pagina { height: auto; padding: 38px 0 34px; gap: 0; justify-items: center; }
  .marca,
  .legal { width: calc(1280px * var(--z)); }

  .marca { gap: 13px; }
  .marca-iso {
    width: 36px; height: 36px;
    filter: drop-shadow(0 0 12px rgba(249, 2, 115, .65));
  }
  .marca-nombre { font-size: 30px; }

  /* 708 = alto de la columna izquierda del mockup (h1 en 112, fin del botón
     de La Barra en 820). Los bloques de sede se anclan al fondo, así el
     extremo de cada conector en su botón es siempre el mismo. */
  .hub {
    position: relative;
    display: grid;
    grid-template-columns: 640px var(--mapa-ancho);
    grid-template-rows: auto auto 1fr;
    justify-content: space-between;
    row-gap: 20px;
    align-self: center;
    width: 1280px;
    height: 708px;
    zoom: var(--z);
  }

  .texto     { grid-column: 1; grid-row: 1; gap: 30px; }
  .mapa-caja { grid-column: 2; grid-row: 1 / 4; align-self: start; margin-top: var(--mapa-top); min-height: 0; max-height: none; }
  .cierre    { grid-column: 1; grid-row: 2; text-align: left; }
  .sedes     { grid-column: 1; grid-row: 3; align-self: end; }

  /* Tamaños fijos del brief: el escalado lo hace el zoom de abajo. */
  h1 { max-width: 640px; font-size: 72px; }
  .p-uno { font-size: 17px; }
  .p-dos { font-size: 20px; }
  .cierre { font-size: 32px; }
  /* El mockup separa los dos párrafos solo 5px (336+51 → 392). */
  .parrafos { gap: 5px; }
  .p-uno { max-width: 600px; line-height: 1.5; }
  .p-dos { max-width: 600px; line-height: 1.4; }
  .solo-ancho { display: inline; }

  .sedes { max-width: 640px; gap: 34px; }
  .sede { gap: 11px; }
  .sede-zona { font-size: 11px; }

  .sede-medida { gap: 12px; }
  .sede-medida-label {
    display: inline;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .sede-medida-cifra { font-size: 12px; letter-spacing: .06em; }
  .sede-medida-sep {
    display: block;
    width: 1px; height: 12px;
    background: rgba(245, 245, 245, .18);
  }
  .sede-medida-tipo { font-size: 11px; }

  .fueguitos svg { width: 98px; height: 21px; }

  .sede-btn {
    width: 560px;
    height: 88px;
    gap: 20px;
    padding: 12px 28px 12px 12px;
    border-radius: 44px;
    box-shadow: 0 14px 46px rgba(249, 2, 115, .40),
                inset 0 0 0 1px rgba(253, 199, 218, .28);
  }
  .sede-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 64px rgba(249, 2, 115, .55),
                inset 0 0 0 2px var(--rosa);
  }
  .sede-btn:hover .sede-btn-flecha { transform: translateX(10px); }

  .sede-btn-disco { width: 64px; height: 64px; }
  .fauna-ballena { width: 43px; height: 43px; }
  .fauna-mono { width: 39px; height: 39px; }
  .sede-btn-nombre { font-size: 32px; }
  .sede-btn-flecha { font-size: 26px; }

  /* mapa */
  .mapa { width: var(--mapa-ancho); height: auto; }
  .aureola { inset: -9.4% -10.1%; }

  /* Escritorio: el mapa mide 476px, así que van las de 952 (2x).
     Recortadas a la caja real de cada mitad (476x331), así que 'cover' no
     descarta nada: lo que se exportó es exactamente lo que se ve. */
  .mapa-norte { background-image: url(assets/foto-caribe.webp); }
  .mapa-sur { background-image: url(assets/foto-pacifico.webp); }

  .mapa-contorno {
    filter: drop-shadow(0 0 10px rgba(249, 2, 115, .6))
            drop-shadow(0 0 40px rgba(249, 2, 115, .28));
  }
  .mapa-contorno path { stroke-width: 2.5; }

  .mapa-wordmark {
    font-size: 36px;
    text-shadow: 0 0 18px rgba(249, 2, 115, .9), 0 0 42px rgba(249, 2, 115, .55);
  }

  /* pines: el disco ocupa todo el pin, sin área táctil extra */
  .pin { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .pin-disco {
    width: 34px; height: 34px;
    box-shadow: 0 0 0 3px rgba(249, 2, 115, .22), 0 0 22px rgba(249, 2, 115, .8);
  }
  .pin img { width: 18px; height: 18px; }
  .pin:hover { transform: scale(1.12); }

  /* ficha del pin, anclada hacia el océano */
  .pin-ficha {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 5;
    width: 236px;
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(22, 22, 22, .9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(253, 199, 218, .3);
    transform: translate(-100%, -50%);
    margin-left: -26px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  #ficha-c { left: calc(var(--pin-c-x) * 100%); top: calc(var(--pin-c-y) * 100%); }
  #ficha-b { left: calc(var(--pin-b-x) * 100%); top: calc(var(--pin-b-y) * 100%); }

  #pin-c:hover + #ficha-c,
  #pin-c:focus-visible + #ficha-c,
  #pin-b:hover + #ficha-b,
  #pin-b:focus-visible + #ficha-b { opacity: 1; }

  .pin-ficha-nombre {
    font-family: var(--bebas);
    font-size: 26px;
    line-height: 1;
    letter-spacing: .012em;
    color: var(--txt);
  }
  .pin-ficha-zona {
    margin-top: 7px;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--rosa);
  }
  .pin-ficha-tipo {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--body);
  }

  .pin-ficha-fuego { display: block; width: 74px; height: 16px; margin-top: 8px; }

  /* footer */
  .legal { flex-direction: row; align-items: center; justify-content: space-between; }
  .legal-razon { font-size: 11px; }
  .legal-enlaces { gap: 26px; }
  .legal-enlaces a { font-size: 11px; min-height: 0; margin-block: 0; padding-inline: 0; }

  /* conectores: cada <svg> ocupa la caja entre el botón (abajo-izquierda) y
     su pin (arriba-derecha); la <line> la cruza en diagonal. Todo en CSS. */
  .conn {
    display: block;
    position: absolute;
    z-index: 6;
    left: var(--btn-der);
    overflow: visible;
    pointer-events: none;
    opacity: .5;
    transition: opacity .2s ease;
  }
  .conn line {
    stroke: var(--fucsia);
    stroke-width: 1.6;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
  }
  .conn-c {
    top: calc(var(--mapa-top) + var(--mapa-alto) * var(--pin-c-y));
    width: calc(100% - var(--btn-der) - var(--mapa-ancho) * (1 - var(--pin-c-x)));
    height: calc(var(--btn-c-y) - var(--mapa-top) - var(--mapa-alto) * var(--pin-c-y));
  }
  .conn-b {
    top: calc(var(--mapa-top) + var(--mapa-alto) * var(--pin-b-y));
    width: calc(100% - var(--btn-der) - var(--mapa-ancho) * (1 - var(--pin-b-x)));
    height: calc(var(--btn-b-y) - var(--mapa-top) - var(--mapa-alto) * var(--pin-b-y));
  }
  .conn-punto {
    display: block;
    position: absolute;
    z-index: 6;
    left: calc(var(--btn-der) - 3.4px);
    width: 6.8px;
    height: 6.8px;
    border-radius: 50%;
    background: var(--fucsia);
    opacity: .5;
    pointer-events: none;
  }
  .conn-punto-c { top: calc(var(--btn-c-y) - 3.4px); }
  .conn-punto-b { top: calc(var(--btn-b-y) - 3.4px); }

  /* El conector se enciende desde cualquiera de sus dos extremos. */
  .pagina:has(#pin-c:hover) .conn-c,
  .pagina:has(#pin-c:focus-visible) .conn-c,
  .pagina:has(#btn-c:hover) .conn-c,
  .pagina:has(#btn-c:focus-visible) .conn-c { opacity: 1; }

  .pagina:has(#pin-b:hover) .conn-b,
  .pagina:has(#pin-b:focus-visible) .conn-b,
  .pagina:has(#btn-b:hover) .conn-b,
  .pagina:has(#btn-b:focus-visible) .conn-b { opacity: 1; }

  /* Al pasar por el botón, su pin responde. */
  .pagina:has(#btn-c:hover) #pin-c,
  .pagina:has(#btn-b:hover) #pin-b { transform: scale(1.14); }

  .pagina:has(#btn-c:hover) #pin-c .pin-disco,
  .pagina:has(#btn-b:hover) #pin-b .pin-disco {
    box-shadow: 0 0 0 4px rgba(249, 2, 115, .30), 0 0 30px rgba(249, 2, 115, 1);
  }
}

/* ==========================================================================
   Portátiles — la composición se escala entera para cerrar sin scroll.
   zoom escala por igual textos, mapa, pines y conectores, así que nada se
   descuadra. Cada escalón de alto cabe desde su altura hasta la del
   siguiente; el de ancho deja al menos 50px de margen a cada lado.
   ========================================================================== */

@media (min-width: 1280px) and (max-width: 1359px) and (min-height: 881px) { :root { --z: .92; } }
@media (min-width: 1280px) and (max-height: 880px) { :root { --z: .92; } }
@media (min-width: 1280px) and (max-height: 817px) { :root { --z: .86; } }
@media (min-width: 1280px) and (max-height: 775px) { :root { --z: .8; } }
@media (min-width: 1280px) and (max-height: 732px) { :root { --z: .74; } }

/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}