@font-face {
    font-family: 'Tex Gyre Heros';
    src: url('fuentes/texgyreheros-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.rastro {
  position: absolute;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, #fff, #fbfaee00);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: vanish .7s ease-out forwards;
}

@keyframes vanish {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 8px hsl(54, 64%, 96%));
  }
  100% {
    transform: translate(-50%, -50%) scale(.5);
    opacity: 0;
  }
}

html, body, * {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    overflow-x: hidden;
    cursor: grab;
}

body {
    -webkit-text-size-adjust: 100% !important;
    background-color: hsl(54, 64%, 96%);
    margin: 0;
    font-family: 'Tex Gyre Heros', sans-serif;
    font-size: 14px;
    letter-spacing: .5px;
    color: hsl(219, 80%, 26%);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

body::before {
    content: "";
    position: fixed;
    top: -60px; 
    left: -30px;
    width: 110%;
    height: 120%;
    z-index: -1;
    background-image: url(circulo.png);
    transform: rotate(-5deg);
    animation: nubes 60s linear infinite;
}

@keyframes nubes {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -1920px;
    }
}

@keyframes sol {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.sol::before {
    color: hsl(54, 88%, 70%);
    animation: sol 1.25s infinite steps(1);
}

.cielo {
    color: hsl(219, 79%, 56%);
}
.flor {
    color: hsl(302, 59%, 65%);
}

header {
    position: fixed;
    width: -webkit-fill-available;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
}

.informacion {
    min-width: 0;
}

.informacion, .tabla {
    -webkit-text-size-adjust: 100% !important;
}

.locacion {
    margin-left: auto;
    padding: 2px 10px;
    background: hsla(54, 88%, 70%, .5);
    color: hsl(147, 50%, 42%);
    border-radius: 50%;
}

.comunicacion {
    color: hsla(219, 80%, 26%, .6);
}

.comunicacion .correo {
    color: hsl(219, 80%, 26%);
}

a:hover {
    cursor: pointer;
    text-decoration: underline wavy;
}

button {
    background: hsla(0, 0%, 100%, .5);
    color: inherit;
    border: 1px dotted lightsteelblue;
    border-radius: 8px;
    cursor: pointer;
}

button:hover {
    background: hsl(0, 0%, 100%);
}

.informacion button {
    aspect-ratio: 1;
}

[popover] {
  display: none;
}

[popover]:popover-open {
    display: block;
    color: inherit;
    background: hsla(0, 0%, 100%, .9);
    border: 1px dotted lightsteelblue;
    padding: 16px;
    margin-top: 28vh;
    transform: rotate(2deg);
}

[popover]:popover-open:hover {
    transform: rotate(0deg);
}

[popover]:popover-open .contenedor {
    display: flex;
    align-items: center;
    gap: 16px;
}

[popover]:popover-open img {
    border-radius: 24px;
    width: 60px;
}

[popover]:popover-open .texto {
    display: grid;
    margin: 0;
}

.construccion {
    opacity:.6;
    font-size:12px;
}

img {
    -webkit-user-drag: none;
}

main {
    margin-top: auto;
    width: calc(100vw - 16px);
    padding: 8px;
}

.tabla details {
    width: 100%;
    background: hsla(54, 64%, 96%, .5);
}

.tabla details summary, .tabla > div {
    border-top: 1px dotted lightsteelblue;
    padding: 8px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.tabla details summary:hover {
    cursor: pointer;
}

.tabla details:hover, .tabla details[open] {
    background-image: linear-gradient(to right, hsla(0, 0%, 100%, .2), hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .2)) !important;
}

.tiempo {
    padding-right: 1ch;
}

details p {
    max-width: 68ch;
    margin: 0;    
    padding: 0 16px 16px 16px;
    color: hsla(219, 80%, 26%, .8);
}

summary {
    list-style: none;
}

summary::marker {
    content: "";
}

summary::-webkit-details-marker {
    display: none;
}

.lugar::before, .sol::before {
    content: "\23F9\FE0E";
    font-family: 'Tex Gyre Heros', sans-serif;
    font-variant-emoji: text;
}

.cd .lugar::before {
    color: gray;
}

.sh .lugar::before {
    color: sandybrown;
}

.ph .lugar::before {
    color: indigo;
}

.dh .lugar::before {
    color: rgb(54, 161, 102);
}

.ee .lugar::before {
    color: orchid;
}

@media (max-width: 667px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    .locacion {
        margin-left: 0 !important;
        align-self: flex-start;
    }
}

@media screen and (max-width: 900px) and (orientation: landscape) {
    body {
        font-size: 14px !important;
    }
}