/* Imagen intacta; las zonas porcentuales escalan junto a ella. */
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: Arial, sans-serif; }
.portada { position: relative; width: min(100%, 1086px, 75vh); margin: auto; }
@supports (height: 100svh) { .portada { width: min(100%, 1086px, 75svh); } }
.portada > img { display: block; width: 100%; height: auto; }
.zona { position: absolute; border-radius: 12%; color: #fff; text-decoration: none; -webkit-tap-highlight-color: #ff790044; }
.zona:hover, .zona:focus-visible { outline: 2px solid #ff7900; outline-offset: 2px; background: #ff790014; z-index: 2; }
.etiqueta { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 8px 10px; border-radius: 6px; background: #0e304b; color: #fff; font-size: 14px; line-height: 1.3; white-space: nowrap; box-shadow: 0 3px 12px #0002; visibility: hidden; opacity: 0; pointer-events: none; }
.zona:hover .etiqueta, .zona:focus-visible .etiqueta { visibility: visible; opacity: 1; }
/* En pantallas estrechas o bajas, prioriza tamaño legible y permite scroll vertical. */
@media (max-width: 600px), (max-height: 600px) {
  body { display: block; min-height: 0; padding-top: 50px; }
  .portada { width: min(100%, 720px); margin: 0 auto; }
}
@media (prefers-reduced-motion: no-preference) { .etiqueta { transition: opacity .15s; } }