/* --- Reseteo y Configuración Base --- */

:root {

  --accent-color: #00BFFF;

  --text-color: rgba(255, 255, 255, 0.75);

  --text-color-bright: #fff;

  --bg-color: #020306;

  transition: all 0.4s ease;

}

body.light-mode {

  --accent-color: #FF8C00; /* Naranja */

  --text-color: rgba(0, 0, 0, 0.65);

  --text-color-bright: #000;

  --bg-color: #f0f0f0;

}


* { box-sizing: border-box; margin: 0; padding: 0; }


body {

  font-family: 'Source Code Pro', monospace;

  color: var(--text-color);

  background: var(--bg-color);

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  cursor: none;

}


/* --- CURSOR PERSONALIZADO Y HOVER --- */

a, button, .weather-group, .subscribe-trigger {

  cursor: none !important;

}

.custom-cursor {

  position: fixed; width: 20px; height: 20px;

  border: 2px solid var(--accent-color); border-radius: 50%;

  pointer-events: none; z-index: 10000; transition: transform 0.2s ease-out, border-color 0.4s ease;

  transform: translate(-50%, -50%);

}

.custom-cursor.hover { transform: translate(-50%, -50%) scale(1.5); }


/* --- Animación de Entrada --- */

.container > *, .header-ui, .footer-ui, .controls-ui {

  opacity: 0;

  animation: elegantEntrance 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards;

}

.container .subtitle { animation-delay: 1.5s; }

.container .links { animation-delay: 1.8s; }

.header-ui { animation-delay: 2.1s; }

.footer-ui { animation-delay: 2.4s; }

.controls-ui { animation-delay: 2.7s; }

@keyframes elegantEntrance {

  from { opacity: 0; transform: translateY(25px); }

  to { opacity: 1; transform: translateY(0); }

}


/* --- Contenido Principal --- */

.container { max-width: 800px; width: 90%; text-align: center; position: relative; z-index: 10; perspective: 1000px; }

h1 {

  font-weight: 700; font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: 1px;

  margin-bottom: 2.5rem; color: var(--accent-color); text-shadow: 0 0 15px var(--accent-color);

  transition: all 0.4s ease; display: flex; justify-content: center; align-items: baseline;

  flex-wrap: wrap; /* PERMITE QUE EL TEXTO SE DIVIDA EN LÍNEAS */

  gap: 0 0.5em; /* Espacio entre palabras */

}

h1 .word {

  white-space: nowrap; /* Evita que las palabras se corten por la mitad */

}

h1 .letter {

  display: inline-block; opacity: 0; transform: translateY(30px);

  animation: letterReveal 0.6s cubic-bezier(0.19,1,0.22,1) forwards;

  vertical-align: baseline; line-height: 1.2;

}

h1 .dot { transform: translateY(0.05em); margin: 0 0.1ch; animation: dot-pulse 1.5s infinite ease-in-out; }

@keyframes letterReveal { to { opacity: 1; transform: translateY(0); } }

@keyframes dot-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }


.subtitle { font-size: 1rem; margin-bottom: 2rem; }

.subtitle strong { color: var(--text-color-bright); font-weight: 700; }

.links a {

  color: var(--text-color); text-decoration:none; font-size:1rem; position:relative;

  padding:0.5rem; margin:0 0.5rem; transition: color 0.3s ease;

}

.links a:hover { color: var(--text-color-bright); }

.links a::after {

  content:''; position:absolute; bottom:0; left:0; width:100%; height:1px;

  background-color: var(--accent-color); transform:scaleX(0); transform-origin:center;

  transition: transform 0.4s cubic-bezier(0.19,1,0.22,1);

}

.links a:hover::after { transform:scaleX(1); }


/* --- UI --- */

.header-ui { position: fixed; top: 1.5rem; left: 0; width: 100%; display: flex; justify-content: center; padding: 0 1rem; z-index: 20; }

.footer-ui { position: fixed; z-index: 20; top: auto; bottom: 1.5rem; left: 1.5rem; }

.controls-ui { position: fixed; z-index: 20; top: auto; bottom: 1.5rem; right: 1.5rem; display: flex; gap: 1rem; }

#weather-block {

  display: flex; align-items: center; gap: 1.5ch; font-size: 0.9rem;

  background: rgba(10, 14, 25, 0.3); padding: 0.5rem 1rem; border-radius: 6px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);

  transition: background-color 0.4s ease, border-color 0.4s ease;

}

body.light-mode #weather-block { background: rgba(255,255,255,0.3); border-color: rgba(0,0,0,0.1); }

.weather-group { display: flex; align-items: center; gap: 1ch; }

#weather-block .location { color: var(--text-color-bright); }

#weather-block #lorca-temp, #weather-block #helsinki-temp { color: var(--accent-color); font-weight: 700; }

#weather-block .separator { color: var(--accent-color); opacity: 0.7; font-weight: 700; }

.geo-card {

  position: absolute; top: calc(100% + 1rem); width: 300px; height: 200px;

  background: rgba(10, 14, 25, 0.5); border: 1px solid rgba(0, 191, 255, 0.4);

  border-radius: 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);

  overflow: hidden; opacity: 0; transform: translateY(10px); pointer-events: none;

  transition: all 0.4s ease;

}

body.light-mode .geo-card { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.2); }

.geo-card.is-visible { opacity: 1; transform: translateY(0); pointer-events: all; }

.card-header { padding: 0.5rem 0.8rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0, 191, 255, 0.2); }

body.light-mode .card-header { border-color: rgba(0,0,0,0.1); }

.card-header h3 { font-size: 0.9rem; color: var(--text-color-bright); font-weight: 400; }

.map-container { width: 100%; height: calc(100% - 33px); position: relative; background-color: var(--bg-color); }

body:not(.light-mode) .map-container iframe { filter: grayscale(1) invert(1) brightness(0.8) contrast(1.2); }

.holographic-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

body.light-mode .holographic-grid path { stroke: rgba(0, 68, 255, 0.2); }

body.light-mode .holographic-grid #fade stop:last-child { stop-color: var(--bg-color); }

#subscribe-block { position: relative; }

.subscribe-trigger { font-size: 0.9rem; color: var(--text-color); transition: color 0.3s ease, text-shadow 0.3s ease; }

body.light-mode .subscribe-trigger:hover { color: var(--accent-color); text-shadow: 0 0 8px var(--accent-color); }

#subscribe-block:hover .subscribe-trigger { color: var(--text-color-bright); }

#subscribe-block form {

  position: absolute; bottom: 100%; left: 0; margin-bottom: 0.5rem; display: flex;

  border: 1px solid rgba(0, 191, 255, 0.4); border-radius: 6px;

  background: rgba(10, 14, 25, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);

  opacity: 0; transform: translateY(10px); pointer-events: none;

  transition: all 0.4s ease; overflow: hidden;

}

body.light-mode #subscribe-block form { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.2); }

#subscribe-block.is-open form { opacity: 1; transform: translateY(0); pointer-events: all; }

#subscribe-block input {

  background: transparent; border: none; padding: 0.7rem 1rem; color: var(--text-color-bright);

  font-family: 'Source Code Pro', monospace; font-size: 0.9rem; width: 250px;

}

#subscribe-block input::placeholder { color: var(--text-color); }

#subscribe-block input:focus { outline: none; }

#subscribe-block button {

  background: transparent; border: none; color: var(--accent-color); padding: 0.6rem 1rem;

  font-size: 1.2rem; transition: background 0.3s;

}

#subscribe-block button:hover { background: rgba(0, 191, 255, 0.1); }

body.light-mode #subscribe-block button:hover { background: rgba(255, 140, 0, 0.1); }

#digital-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: filter 0.4s ease; }

body.light-mode #digital-background { filter: invert(1) hue-rotate(180deg) brightness(1.2); }


#theme-toggle {

  width: 32px; height: 32px; background: transparent;

  border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;

  opacity: 0.7; transition: all 0.3s ease; z-index: 20; padding: 6px;

}

body.light-mode #theme-toggle { border-color: rgba(0,0,0,0.2); }

#theme-toggle:hover { opacity: 1; transform: scale(1.1); border-color: var(--accent-color); }

#theme-toggle svg { width: 100%; height: 100%; fill: var(--accent-color); transition: fill 0.4s ease; }

.light-mode #theme-toggle .icon-sun { display: none; }

body:not(.light-mode) #theme-toggle .icon-moon { display: none; }


/* --- ICONO DE SONIDO CORREGIDO --- */

#sound-toggle {

  width: 32px; height: 32px; background: transparent;

  border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;

  opacity: 0.7; transition: all 0.3s ease; z-index: 20;

  display: flex; justify-content: center; align-items: center;

}

#sound-toggle:hover { opacity: 1; transform: scale(1.1); border-color: var(--accent-color); }

#sound-toggle .icon-sound {

  width: 16px; height: 16px;

  background-color: var(--accent-color);

  -webkit-mask-size: 100%; mask-size: 100%;

  -webkit-mask-position: center; mask-position: center;

  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;

  transition: background-color 0.4s ease;

}

#sound-toggle.sound-on .icon-sound {

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>');

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>');

}

#sound-toggle.sound-off .icon-sound {

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>');

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>');

}



@media (max-width: 768px) {

  .header-ui { top: 1rem; }

  .footer-ui { left: 1.5rem !important; right: auto !important; transform: none !important; }

  .controls-ui { bottom: 1rem; right: 1.5rem; }

  #weather-block { font-size: 0.8rem; }

  .links { flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }

  .geo-card { width: 280px; }


  @media (hover: none) and (pointer: coarse) {

    .custom-cursor { display: none; }

  }

}