/* Imágenes en la misma carpeta que index.html.
   Móvil y tablet vertical: DCMobile.png (1024 x 1536).
   Escritorio y tablet horizontal: DCDesktop.png (1508 x 1043).
   Las coordenadas corresponden a las dos imágenes finales aprobadas. */
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.portada { position: relative; width: min(100%, calc(100vh * 0.6666667)); width: min(100%, calc(100dvh * 0.6666667)); aspect-ratio: 1024 / 1536; }
picture, img { display: block; width: 100%; height: 100%; }
img { object-fit: contain; }
.zona { position: absolute; display: block; border-radius: 15%; cursor: pointer; -webkit-tap-highlight-color: #ff790033; }
.zona:hover { background: #ff790014; }
.zona:focus-visible { outline: 3px solid #f70; outline-offset: 2px; }
.etiqueta { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(240px, 80vw); padding: 7px 10px; border-radius: 6px; background: #102c45; color: white; font: 14px/1.35 Arial, sans-serif; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; z-index: 10; }
.zona:hover .etiqueta, .zona:focus .etiqueta { opacity: 1; visibility: visible; }
.asociacion .etiqueta { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; transform: none; }
.email .etiqueta { left: auto; right: 0; transform: none; }
.asociacion { left: 75.7%; top: 5.5%; width: 17%; height: 10%; }
.transfermarkt, .twitter, .instagram, .linkedin, .youtube, .email { top: 90.2%; width: 8.7%; height: 5.4%; }
.transfermarkt { left: 19.2%; }
.twitter { left: 29.8%; }
.instagram { left: 40.3%; }
.linkedin { left: 50.9%; }
.youtube { left: 61.4%; }
.email { left: 72.1%; }
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .portada { width: min(100%, calc(100vh * 1.4458293)); width: min(100%, calc(100dvh * 1.4458293)); aspect-ratio: 1508 / 1043; }
  .asociacion { left: 88.1%; top: 2.2%; width: 10.5%; height: 13%; }
  .transfermarkt, .twitter, .instagram, .linkedin, .youtube, .email { top: 83.3%; width: 6.7%; height: 9.5%; }
  .transfermarkt { left: 50%; }
  .twitter { left: 58.3%; }
  .instagram { left: 66.4%; }
  .linkedin { left: 74.5%; }
  .youtube { left: 82.6%; }
  .email { left: 90.8%; }
}