/* ===========================================================================
   estilos.css — toda la apariencia de jou.eus
   Separado de index.html en septiembre de 2026. Si quieres cambiar un color,
   un tamaño o un espaciado, es aquí y en ningún otro sitio.
   =========================================================================== */
/* ── Tipografía alojada aquí mismo ────────────────────────────────────────
     Antes se cargaba desde los servidores de Google, lo que enviaba la
     dirección IP de cada visitante a un tercero y obligaba a esperar a dos
     conexiones externas antes de dibujar la página. Ahora los archivos están
     en la carpeta fuentes/ de esta misma web. */
  @font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fuentes/cormorant-300.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('fuentes/cormorant-300i.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/cormorant-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/cormorant-400i.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fuentes/cormorant-600.woff2') format('woff2');
  }

  :root {
    --gold: #8d8ba8; --gold-light: #c9c7de; --gold-dim: #55536a;
    --bg: #0a0a0a; --bg3: #050505;
    --text: #f5f5f7;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body, * { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; -webkit-touch-callout: default; }
  html, body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  input, textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
  /* El indicador de foco se define al final de esta hoja de estilos, con
     :focus-visible, para que solo aparezca al navegar con el teclado. */
  html { scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar { display: none; }
  body { background: var(--bg); color: var(--text); font-family: 'Cormorant Garamond', serif; font-weight: 300; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; position: relative; }
  body::-webkit-scrollbar { display: none; }

  #starfield { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #000; }
  .star-dust { position: absolute; border-radius: 50%; filter: blur(7px); }
  .star-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #cdbcf0 40%, rgba(150,120,200,0.15) 70%, transparent 100%); animation: twinkle ease-in-out infinite; }
  body::before {
    content: ''; position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.03; pointer-events: none; z-index: 9999;
    transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
  /* Se apunta a #navbar y no a "nav" a secas: si no, cualquier otro <nav> de la
     página (por ejemplo el del pie) heredaría esta posición fija y se iría arriba. */
  #navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem 4rem; transition: background 0.4s, backdrop-filter 0.4s;
  }
  #navbar.scrolled { background: rgba(4,4,4,0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(141,139,168,0.12); }
  .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 300; letter-spacing: 0.25em; color: var(--text); text-decoration: none; }
  /* width: auto es imprescindible. Los atributos width/height de la etiqueta
     <img> actúan como estilo de baja prioridad: el CSS de aquí anula la altura,
     pero si no se dice nada del ancho, la imagen se queda con los 280px del
     atributo y sale deformada. */
  .jou-mark-nav { height: 2.4rem; width: auto; display: block; }
  .nav-links { display: flex; gap: 2.75rem; list-style: none; }
  .nav-links a { font-size: 1.15rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: color 0.3s; position: relative; }
  .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--text); transition: width 0.35s ease; }
  @media (hover: hover) {
    .nav-links a:hover { color: var(--text); }
    .nav-links a:hover::after { width: 100%; }
  }
  .nav-links a:active { color: var(--text); }
  .nav-links a:active::after { width: 100%; }

  /* 100svh es la altura sin contar la barra de direcciones del móvil, que
     aparece y desaparece al desplazarse. La línea de 100vh queda debajo como
     respaldo para navegadores que no conozcan svh. */
  #inicio { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; position: relative; overflow-x: hidden; }
  .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 60% 50%, rgba(141,139,168,0.07) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 20% 80%, rgba(141,139,168,0.04) 0%, transparent 60%); }
  .hero-content { position: relative; text-align: center; z-index: 2; padding: 2rem; }
  .hero-line-top, .hero-line-bottom { position: relative; left: 50%; width: 140vw; max-width: 1100px; height: 2px; margin: 3.5rem 0; transform: translateX(-50%) rotate(-8deg); pointer-events: none; }
  .hero-line-top { background: linear-gradient(90deg, transparent, rgba(141,139,168,0.3), transparent); }
  .hero-line-bottom { background: linear-gradient(90deg, transparent, rgba(141,139,168,0.2), transparent); }
  .hero-eyebrow { font-size: 1.15rem; letter-spacing: 0.6em; text-transform: uppercase; color: var(--gold); margin-top: 0.3rem; margin-bottom: 1.8rem; opacity: 0; animation: fadeUp 1s ease 0.3s both; }
  .hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(4rem, 12vw, 10rem); font-weight: 300; line-height: 0.9; letter-spacing: 0.05em; margin-bottom: 1.4rem; opacity: 0; animation: fadeUp 1s ease 0.5s both; }
  .jou-mark-hero { height: clamp(6rem, 16vw, 13rem); width: auto; margin: 0 auto; transform: translateX(-7.7%); display: block; }
  .hero-divider { width: 3rem; height: 1px; background: rgba(141,139,168,0.25); margin: 0 auto 2.5rem; opacity: 0; animation: fadeUp 1s ease 0.6s both; }
  .hero-album { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 6.5vw, 3.6rem); font-weight: 300; font-style: italic; letter-spacing: 0.35em; color: var(--gold-light); margin-bottom: 1rem; white-space: nowrap; opacity: 0; animation: fadeUp 1s ease 0.65s both; }
  .hero-subtitle { font-size: 1.25rem; letter-spacing: 0.14em; color: var(--text); max-width: 42ch; margin: 0 auto 3rem; line-height: 2; opacity: 0; animation: fadeUp 1s ease 0.8s both; }
  .hero-cta { display: inline-block; margin-left: -0.5cm; padding: 0.9rem 3rem; border: 1px solid rgba(141,139,168,0.4); color: var(--gold-light); text-decoration: none; font-size: 0.95rem; letter-spacing: 0.3em; text-transform: uppercase; transition: all 0.35s ease; opacity: 0; animation: fadeUp 1s ease 1s both; }
  .hero-cta:hover { background: rgba(141,139,168,0.1); border-color: var(--gold); color: var(--gold); }

  .section-label { font-size: 0.9rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; text-align: center; }
  #musica .section-label, #contacto .section-label { font-size: 1.15rem; }
  .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.9rem, 6.8vw, 5.2rem); font-weight: 300; line-height: 1.1; margin-bottom: 1.5rem; text-align: center; color: var(--text); }
  .section-title em { font-style: italic; color: var(--gold-light); }
  .divider { width: 5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); margin: 0 auto 3rem; }
  #musica .divider { margin-top: 2rem; margin-bottom: 1.2rem; }
  .divider-label { margin-top: 2rem; margin-bottom: 1.2rem; }

  #musica { padding: 7.5rem 4rem 6rem; }

  /* Portada / contraportada: el disco gira para revelar la espiral */
  .galaxy-wrap { position: relative; width: 100%; max-width: 620px; margin: 1.5rem auto 0; aspect-ratio: 1648 / 1476; border-radius: 16px; overflow: visible; perspective: 1800px; }
  .disc-flip { position: absolute; inset: 0; border-radius: 16px; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.45, 0.05, 0.15, 1); }
  .disc-flip.flipped { transform: rotateY(180deg); }
  .disc-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--gold); }
  .disc-face-back { transform: rotateY(180deg); }

  .portada-cover { cursor: pointer; }
  .portada-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.1) brightness(0.9) saturate(1.03); transition: transform 0.5s ease, filter 0.4s ease; }
  .portada-cover:hover .portada-img, .portada-cover:focus-visible .portada-img { transform: scale(1.03); filter: contrast(1.1) brightness(0.5) saturate(1.03); }
  .portada-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .portada-play-icon { width: 76px; height: 76px; border: 1.5px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.7); transition: opacity 0.3s, transform 0.3s; background: rgba(10,10,10,0.3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .portada-cover:hover .portada-play-icon, .portada-cover:focus-visible .portada-play-icon { opacity: 1; transform: scale(1); }
  .portada-play-icon svg { fill: var(--gold); width: 28px; margin-left: 4px; }

  /* Galaxy interactive spiral */
  .galaxy-bg { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.16) brightness(0.78) saturate(1.05); }
  .galaxy-hotspots { position: absolute; inset: 0; }
  .galaxy-hotspot { position: absolute; width: 10.27%; aspect-ratio: 1/1; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; padding: 0; }
  .galaxy-hotspot:hover, .galaxy-hotspot:focus-visible { background: rgba(141,139,168,0.12); border-color: rgba(141,139,168,0.55); box-shadow: 0 0 22px 6px rgba(141,139,168,0.3); outline: none; }
  .galaxy-hotspot .hotspot-label { position: absolute; bottom: -1.7em; left: 50%; transform: translateX(-50%); font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); white-space: normal; width: max-content; max-width: 130px; text-align: center; line-height: 1.3; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
  .galaxy-hotspot.label-above .hotspot-label { bottom: auto; top: -1.7em; }
  .galaxy-hotspot.label-above-2line .hotspot-label { bottom: auto; top: -3.0em; }
  .galaxy-hotspot.label-push-down .hotspot-label { bottom: -3.0em; }
  .galaxy-hotspot.label-edge-right .hotspot-label { left: auto; right: 0; transform: none; text-align: right; }
  .galaxy-hotspot:hover .hotspot-label, .galaxy-hotspot:focus-visible .hotspot-label { opacity: 1; }
  .galaxy-hotspot.active { background: rgba(220,215,255,0.28); border-color: #ffffff; box-shadow: 0 0 42px 16px rgba(255,255,255,0.65); animation: hotspotPulse 2.4s ease-in-out infinite; }
  .galaxy-hotspot.active .hotspot-label { opacity: 1; color: var(--gold-light); }
  @keyframes hotspotPulse { 0%, 100% { box-shadow: 0 0 32px 12px rgba(255,255,255,0.5); } 50% { box-shadow: 0 0 54px 20px rgba(255,255,255,0.85); } }

  .galaxy-modal-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(4,4,6,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .galaxy-modal-backdrop::-webkit-scrollbar { display: none; }
  .galaxy-modal-backdrop.open { opacity: 1; pointer-events: auto; }
  .galaxy-card { position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; background: var(--bg3); border: 1px solid rgba(255,255,255,0.06); transform: scale(0.92); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 30px 80px rgba(0,0,0,0.6); margin: auto; }
  .galaxy-card::-webkit-scrollbar { display: none; }
  .galaxy-modal-backdrop.open .galaxy-card { transform: scale(1); }
  .galaxy-card-close { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; background: none; border: none; color: var(--gold); font-size: 1.3rem; cursor: pointer; line-height: 1; transition: color 0.2s; }
  .galaxy-card-close:hover { color: var(--gold-light); }
  .galaxy-card .song-art { aspect-ratio: 1/1; }
  .galaxy-card .song-info { text-align: center; }
  .song-art { width: 100%; aspect-ratio: 1/1; position: relative; overflow: hidden; background: #0e0e0e; }
  .song-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
  .song-info { padding: 1.5rem 1.75rem 1.75rem; text-align: center; }
  .song-number { font-size: 0.85rem; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 0.4rem; }
  /* ── Lista de canciones ──────────────────────────────────────────────────
     Está escrita directamente en el HTML (no la genera JavaScript) para que
     Google la indexe, los lectores de pantalla la lean como una lista ordenada
     y siga funcionando aunque falle el JavaScript. */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  /* Dos columnas en orden vertical: 1–5 a la izquierda, 6–10 a la derecha.
     Uso columnas de CSS (no una rejilla) porque se reparten solas: si algún día
     añades una canción, pasarían a 6 y 5 sin tener que tocar ningún número. */
  .tracklist { list-style: none; column-count: 2; column-gap: 2.2rem; max-width: 760px; margin: 3.2rem auto 0; padding: 0; border-top: 1px solid rgba(141,139,168,0.14); }
  .tracklist li { border-bottom: 1px solid rgba(141,139,168,0.14); -webkit-column-break-inside: avoid; break-inside: avoid; }
  .track { display: flex; align-items: center; gap: 0.9rem; width: 100%; min-height: 52px; padding: 0.7rem 0.5rem; color: var(--text); text-decoration: none; transition: background 0.3s ease, color 0.3s ease; }
  .track-num { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--gold); flex-shrink: 0; min-width: 2.4em; }
  .track-name { flex: 1; font-size: 1.05rem; font-weight: 300; line-height: 1.3; }
  .track-icon { width: 12px; height: 12px; flex-shrink: 0; fill: var(--gold-light); opacity: 0; transition: opacity 0.3s ease; }
  @media (hover: hover) {
    .track:hover { background: rgba(141,139,168,0.07); }
    .track:hover .track-name { color: var(--gold-light); }
    .track:hover .track-icon { opacity: 0.8; }
  }
  /* Canción que está sonando: barra lateral, fondo tenue y texto más claro */
  .track.playing { background: rgba(141,139,168,0.18); }
  .track.playing .track-num { color: var(--gold-light); }
  .track.playing .track-name { color: var(--gold-light); font-weight: 400; }
  .track.playing .track-icon { opacity: 1; }
  @media (max-width: 700px) {
    /* En pantallas estrechas no caben dos por fila: vuelve a una sola columna */
    .tracklist { column-count: 1; max-width: 620px; margin-top: 2.4rem; }
    .track { gap: 0.8rem; padding: 0.65rem 0.4rem; }
    .track-name { font-size: 1rem; }
  }
  .song-title { font-family: 'Cormorant Garamond', serif; font-size: 1.85rem; font-weight: 400; margin-bottom: 1.5rem; line-height: 1.2; }
  .listen-btn { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid rgba(141,139,168,0.3); padding: 0.6rem 1.5rem; cursor: pointer; transition: all 0.3s ease; font-family: 'Cormorant Garamond', serif; }
  .listen-btn:hover { background: rgba(141,139,168,0.08); border-color: var(--gold); }

  #contacto { padding: 8rem 4rem; }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; margin: 2.5rem auto 0; max-width: 1200px; align-items: start; }
  .contact-info-wrap { padding-left: calc(15.5rem - 0.5cm); margin-top: -0.5rem; }
  .contact-info { text-align: center; }
  .contact-info p { font-size: 1.45rem; line-height: 1.8; font-family: 'Cormorant Garamond', serif; font-weight: 300; color: var(--text); margin: 0 auto 2.5rem; max-width: 30ch; }
  .social-links { display: flex; gap: 1.75rem; flex-wrap: wrap; justify-content: center; margin-top: 6.5rem; }
  .social-link { display: flex; align-items: center; gap: 0.9rem; font-size: 1.15rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: color 0.3s, opacity 0.3s; opacity: 0.85; }
  .social-link svg { width: 36px; height: 36px; fill: currentColor; }
  .social-link:hover { color: var(--text); opacity: 1; }
  .form-group { margin-bottom: 1.9rem; }
  .form-group label { display: block; font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
  .form-group input, .form-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--gold); color: var(--text); font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 300; padding: 0.65rem 0; outline: none; transition: border-color 0.3s; }
  /* Anula el fondo claro que el navegador aplica al autocompletar un campo.
     Chrome/Safari lo imponen con un estilo propio que no se puede quitar
     directamente; el truco del "inset shadow" lo cubre. Usamos un relleno casi
     transparente para que el fondo estrellado de la web siga viéndose detrás. */
  .form-group input:-webkit-autofill,
  .form-group input:-webkit-autofill:hover,
  .form-group input:-webkit-autofill:focus,
  .form-group textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.01) inset !important;
    box-shadow: 0 0 0 1000px rgba(0,0,0,0.01) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    /* Sin esta línea, los dos campos que el navegador autocompleta (nombre y
       correo) mostraban la raya inferior de un color distinto al del mensaje. */
    border-bottom-color: var(--gold) !important;
    caret-color: var(--text);
    transition: background-color 9999s ease-in-out 0s;
  }
  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gold); opacity: 1; }
  /* Se usa box-shadow en vez de subir el grosor del borde: dibuja una segunda línea
     justo debajo, así el campo se ve de 2px sin que el contenido se mueva un píxel. */
  .form-group input:focus, .form-group textarea:focus { border-color: var(--gold-light); box-shadow: 0 1px 0 var(--gold-light); }
  .form-group textarea { resize: none; height: 90px; scrollbar-width: thin; scrollbar-color: rgba(141,139,168,0.35) transparent; }
  .form-group textarea::-webkit-scrollbar { width: 6px; }
  .form-group textarea::-webkit-scrollbar-track { background: transparent; }
  .form-group textarea::-webkit-scrollbar-thumb { background: rgba(141,139,168,0.35); border-radius: 3px; }
  .form-group textarea::-webkit-scrollbar-thumb:hover { background: rgba(141,139,168,0.55); }
  /* Aviso discreto de validación bajo cada campo del formulario */
  .field-error { display: block; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--gold-light); opacity: 0; margin-top: 0.35rem; transition: opacity 0.25s ease; min-height: 1em; }
  .field-error.visible { opacity: 1; }
  .form-group.has-error input, .form-group.has-error textarea { border-bottom-color: rgba(141,139,168,0.6); }
  .submit-btn { background: none; border: 1px solid rgba(141,139,168,0.4); color: var(--gold-light); font-family: 'Cormorant Garamond', serif; font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; padding: 1rem 2.75rem; cursor: pointer; transition: all 0.35s ease; }
  .submit-btn:hover { background: rgba(141,139,168,0.1); border-color: var(--gold); color: var(--gold); }
  .form-noscript { margin-top: 1.2rem; font-size: 0.95rem; line-height: 1.6; color: var(--gold-light); }
  /* Consentimiento para el tratamiento de datos (exigido por el RGPD).
     La casilla se dibuja a mano con appearance:none, porque la que trae el
     navegador por defecto es un cuadro blanco que destaca demasiado sobre el
     fondo oscuro. */
  .form-consent { margin: 1.6rem 0 0.7rem; }
  .form-consent label { display: flex; align-items: center; gap: 0.65rem; cursor: pointer; font-size: 0.9rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--gold); }
  .form-consent input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    flex-shrink: 0; width: 15px; height: 15px; margin: 0;
    border: 1px solid var(--gold); border-radius: 2px; background: transparent;
    cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease;
  }
  .form-consent input[type="checkbox"]:checked {
    background-color: var(--gold); border-color: var(--gold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
  }
  .form-consent a { color: var(--gold); text-underline-offset: 3px; }
  @media (hover: hover) {
    .form-consent label:hover { color: var(--gold-light); }
    .form-consent label:hover input[type="checkbox"] { border-color: var(--gold-light); }
  }
  /* Primera capa de información sobre protección de datos, plegada para no
     recargar el formulario. Sigue estando en el punto de recogida de los datos,
     que es lo que exige el artículo 13 del RGPD. */
  .form-legal { font-size: 0.85rem; line-height: 1.7; color: var(--gold); margin-bottom: 1.5rem; }
  .form-legal summary { cursor: pointer; letter-spacing: 0.06em; list-style: none; }
  .form-legal summary::-webkit-details-marker { display: none; }
  .form-legal summary::before { content: "+ "; }
  .form-legal[open] summary::before { content: "\2013 "; }
  .form-legal p { margin-top: 0.7rem; }
  .form-legal a { color: var(--gold); text-underline-offset: 3px; }

  #player { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: rgba(3,3,3,0.98); border-top: 1px solid rgba(141,139,168,0.2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 1rem 4rem; display: flex; align-items: center; gap: 2.25rem; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  #player.open { transform: translateY(0); }
  .player-art { width: 64px; height: 64px; flex-shrink: 0; border: 1px solid rgba(141,139,168,0.2); overflow: hidden; order: 1; }
  .player-art img { width: 100%; height: 100%; object-fit: cover; }
  .player-info { flex-shrink: 1; min-width: 0; width: 240px; max-width: 240px; order: 2; }
  .player-song { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; line-height: 1.25; white-space: normal; overflow-wrap: break-word; }
  .player-artist { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--gold); margin-top: 4px; display: flex; align-items: center; gap: 0.3em; }
  .jou-mark-player { height: 1.1rem; width: auto; }
  .player-controls { display: flex; align-items: center; gap: 2rem; flex-shrink: 0; order: 3; }
  .ctrl-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--gold); transition: color 0.2s; display: flex; align-items: center; }
  .ctrl-btn:hover { color: var(--gold-light); }
  .ctrl-btn svg { width: 22px; height: 22px; fill: currentColor; }
  .ctrl-btn.shuffle-active { color: var(--gold); }
  .ctrl-btn.shuffle-active::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin-top: 19px; margin-left: -2px; }
  .play-pause-btn { width: 54px; height: 54px; border: 1px solid rgba(141,139,168,0.5) !important; border-radius: 50%; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gold); transition: all 0.25s; }
  .play-pause-btn:hover { background: rgba(141,139,168,0.1); }
  .play-pause-btn svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }
  .player-progress { flex: 1; display: flex; align-items: center; gap: 1.25rem; order: 4; }
  .time { font-size: 1.05rem; color: var(--gold); letter-spacing: 0.05em; min-width: 50px; }
  .progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.08); position: relative; cursor: pointer; border-radius: 1.5px; }
  .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); border-radius: 1.5px; position: relative; }
  .progress-fill::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: var(--gold); border-radius: 50%; opacity: 0; transition: opacity 0.2s; }
  .progress-bar:hover .progress-fill::after { opacity: 1; }
  .player-close { background: none; border: none; cursor: pointer; color: var(--gold); font-size: 1.6rem; transition: color 0.2s; line-height: 1; flex-shrink: 0; order: 5; }
  .player-close:hover { color: var(--gold-light); }
  .player-linebreak { display: none; }

  footer { padding: 3rem 4rem; border-top: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: 1.7rem; letter-spacing: 0.12em; color: var(--gold); }
  .footer-legal { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: 0.9rem; letter-spacing: 0.14em; }
  .footer-legal a { color: var(--gold); text-decoration: none; }
  .footer-legal a:hover { color: var(--gold-light); text-decoration: underline; text-underline-offset: 4px; }
  .footer-copyright { display: flex; align-items: center; gap: 0.35em; }
  .jou-mark-footer { height: 2.2rem; width: auto; }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.65); } 50% { opacity: 1; transform: scale(1.35); } }

  @media (max-width: 1024px) {
    .contact-grid { gap: 3.5rem; }
    .contact-info-wrap { padding-left: calc(7rem - 0.5cm); }
  }
  @media (max-width: 900px) {
    #navbar { padding: 1.25rem 1.5rem; }
    #inicio, #musica, #contacto { padding-left: 1.5rem; padding-right: 1.5rem; }
    #musica, #contacto { padding-top: 6rem; padding-bottom: 6rem; }
    #musica { padding-top: 5.5rem; }
    #contacto { padding-bottom: 3rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 0.9rem; margin-top: 1.5rem; }
    .contact-info { padding-left: 0; order: 1; }
    .contact-info-wrap { display: contents; padding-left: 0; }
    .contact-form { order: 2; }
    .social-links { order: 3; margin-top: 0; justify-content: center; }
    #player { padding: 0.75rem 1rem; gap: 0.75rem; }
    .player-art { width: 44px; height: 44px; }
    .player-song { font-size: 0.95rem; }
    .player-artist { font-size: 0.72rem; }
    .jou-mark-player { height: 0.85rem; }
    .player-controls { gap: 1.1rem; }
    .ctrl-btn svg { width: 18px; height: 18px; }
    .play-pause-btn { width: 42px; height: 42px; }
    .play-pause-btn svg { width: 16px; height: 16px; }
    .time { font-size: 0.68rem; min-width: 34px; }
    .player-close { font-size: 1.3rem; }
  }
  @media (max-width: 900px) and (orientation: landscape) {
    .player-info { width: 225px; max-width: 225px; }
    .player-song { white-space: nowrap; overflow: visible; }
    .player-controls { gap: 0.8rem; }
  }
  @media (max-width: 560px) {
    #player { padding: 0.7rem 0.85rem; gap: 0.6rem; }
    .player-art { width: 38px; height: 38px; }
    .player-info { min-width: 0; max-width: none; width: auto; flex: 1 1 auto; overflow: visible; }
    .player-song { font-size: 0.88rem; white-space: normal; overflow-wrap: break-word; line-height: 1.2; }
    /* En vertical el texto pasó de 0,52 a 0,72 rem para que se lea. La firma se
       mantiene, algo más pequeña, porque el bloque tiene ancho flexible y cabe. */
    .player-artist { font-size: 0.72rem; }
    .jou-mark-player { height: 0.9rem; }
    .player-controls { gap: 1.5rem; flex-shrink: 0; }
    .ctrl-btn svg { width: 16px; height: 16px; }
    .play-pause-btn { width: 34px; height: 34px; }
    .play-pause-btn svg { width: 14px; height: 14px; }
    .time { font-size: 0.6rem; min-width: 30px; }
    .player-close { flex-shrink: 0; font-size: 1.1rem; margin-left: 0.1rem; }
    .player-progress { gap: 0.6rem; }
  }
  /* Móvil vertical: la línea de reproducción y todos los botones no caben en una sola fila,
     así que se reparten en dos filas y la banda inferior crece para acogerlos.
     Este bloque va DESPUÉS del de 560px a propósito, para que sus valores tengan prioridad
     en vertical sobre los genéricos de pantalla estrecha. */
  @media (max-width: 900px) and (orientation: portrait) {
    #player { flex-wrap: wrap; row-gap: 0.4rem; }
    .player-art { order: 1; }
    .player-info { order: 2; flex-grow: 1; }
    .player-close { order: 3; }
    .player-linebreak { display: block; flex-basis: 100%; height: 0; order: 4; }
    .player-controls { order: 5; gap: 0.6rem; flex-shrink: 0; }
    .ctrl-btn svg { width: 16px; height: 16px; }
    .play-pause-btn { width: 38px; height: 38px; }
    .play-pause-btn svg { width: 14px; height: 14px; }
    .player-progress { order: 6; display: flex; flex: 1; gap: 0.6rem; }
  }
  @media (max-width: 600px) {
    #navbar { padding: 1rem 1.25rem; }
    .jou-mark-nav { height: 1.7rem; }
    .nav-links { gap: 1.1rem; }
    .nav-links a { font-size: 0.85rem; letter-spacing: 0.08em; }
    #musica .section-label, #contacto .section-label { font-size: 0.85rem; }
    footer { padding: 1.75rem 1.5rem; font-size: 0.85rem; }
    .jou-mark-footer { height: 1.1rem; }
    .social-link { font-size: 0.9rem; gap: 0.6rem; }
    .social-link svg { width: 28px; height: 28px; }
    .social-links { margin-top: 3rem; }
    .contact-info p { font-size: 1.1rem; }
    .galaxy-hotspot .hotspot-label { display: none; font-size: 0.64rem; max-width: 105px; }
    .galaxy-hotspot.active .hotspot-label { display: block; }
    .galaxy-card { max-width: 400px; }
    .hero-line-bottom, .hero-line-top { margin: 2.6rem 0; }
    .hero-content { padding: 1rem 1.5rem; }
    .hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.45em; margin-top: 0; margin-bottom: 1.1rem; }
    .hero-title { margin-bottom: 1rem; }
    .hero-divider { margin-bottom: 0.9rem; }
    .hero-album { margin-bottom: 0.5rem; letter-spacing: 0.2em; }
    .hero-subtitle { margin-bottom: 1.1rem; line-height: 1.6; font-size: 1rem; }
    .hero-cta { padding: 0.6rem 2rem; margin-left: 0; }
    .jou-mark-hero { height: clamp(4rem, 18vw, 6.5rem); }
  }
  @media (max-width: 480px) {
    .hero-album { letter-spacing: 0.12em; }
    .hero-eyebrow { font-size: 0.65rem; letter-spacing: 0.4em; }
    .jou-mark-nav { height: 1.4rem; }
    .nav-links { gap: 0.65rem; }
    .nav-links a { font-size: 0.72rem; letter-spacing: 0.02em; }
    .song-info { padding: 1rem 1.25rem 1.25rem; }
    .song-title { font-size: 1.6rem; }
  }

  /* ── Indicador de foco para navegación con teclado (A3) ───────────────────
     :focus-visible solo se activa cuando el navegador detecta que te mueves con
     el teclado, así que al hacer clic con el ratón no aparece ningún recuadro.
     Va al final del archivo a propósito: así gana a las reglas de más arriba. */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
  input[type="checkbox"]:focus-visible, .track:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
    border-radius: 2px;
  }
  /* Los tres campos de texto quedan fuera de la regla anterior a propósito: no
     necesitan recuadro porque ya avisan de estar activos aclarando y engrosando
     su línea inferior, que es el indicador propio de este diseño. */

  /* ── Respeta la opción "Reducir movimiento" del sistema operativo (M12) ────
     Quien la activa suele hacerlo por mareos, migrañas o sensibilidad al
     movimiento. Las estrellas se quedan quietas pero siguen viéndose. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .star-glow { animation: none !important; opacity: 0.8; transform: none; }
    .disc-flip { transition: none !important; }
  }

  /* ── Reglas que antes iban escritas dentro del HTML ──────────────────────
     Se han traído aquí para poder prohibir los estilos en línea en la política
     de seguridad del servidor. */
  .campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .footer-copyright { color: var(--gold); }
  .icono-play { margin-left: 2px; }

  /* Aquí hubo un respaldo de proporciones para navegadores sin aspect-ratio.
     Se ha retirado: estaba mal planteado (dejaba las carátulas al doble de alto)
     y, aunque se corrigiera, esos mismos navegadores tampoco entienden inset ni
     gap, que esta hoja usa en decenas de sitios. Mantenerlo daba una sensación
     de cobertura que no era real. iOS 14 y anteriores no están soportados. */
  .form-status { min-height: 1.2em; margin-top: 0.8rem; font-size: 0.95rem; color: var(--gold-light); }
