:root { --color-texto: #1a1a1a; --color-texto-suave: #666; --color-fondo: #ffffff; --color-borde: #e6e6e6; --color-acento: #1a1a1a; --color-superficie: #f2f2f2; --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } /* Modo oscuro: sigue la preferencia del sistema, salvo que el botón de tema la haya forzado explícitamente (data-theme en , guardado en localStorage) — en cuyo caso esa elección manual gana en los dos sentidos. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-texto: #f0f0f0; --color-texto-suave: #a0a0a0; --color-fondo: #121212; --color-borde: #333333; --color-acento: #f0f0f0; --color-superficie: #1e1e1e; } } :root[data-theme="dark"] { --color-texto: #f0f0f0; --color-texto-suave: #a0a0a0; --color-fondo: #121212; --color-borde: #333333; --color-acento: #f0f0f0; --color-superficie: #1e1e1e; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente); } a { color: inherit; text-decoration: none; } .contenedor { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header */ .sitio-header { border-bottom: 1px solid var(--color-borde); position: sticky; top: 0; background: var(--color-fondo); z-index: 10; } .sitio-header__inner { display: flex; align-items: center; gap: 24px; padding: 16px 20px; flex-wrap: wrap; } .logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; } .nav-instrumentos { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; } .nav-instrumentos a { font-size: 0.9rem; color: var(--color-texto-suave); } .nav-instrumentos a:hover { color: var(--color-texto); } .boton-sorpresa { border: none; background: none; padding: 0; font-family: var(--fuente); font-size: 0.9rem; color: var(--color-texto-suave); cursor: pointer; } .boton-sorpresa:hover { color: var(--color-texto); } .boton-sorpresa:disabled { opacity: 0.5; cursor: default; } .lang-toggle { border: 1px solid var(--color-borde); background: none; border-radius: 4px; padding: 4px 10px; font-size: 0.8rem; cursor: pointer; color: var(--color-texto-suave); } .lang-toggle:hover { border-color: var(--color-texto); color: var(--color-texto); } .sitio-header__botones { display: flex; gap: 8px; } /* Migas de pan */ .migas { padding: 20px 0 0; font-size: 0.85rem; color: var(--color-texto-suave); } .migas a { color: var(--color-texto-suave); } .migas a:hover { color: var(--color-texto); text-decoration: underline; } .migas__separador { margin: 0 6px; } .migas__actual { color: var(--color-texto); } /* Hero / Home */ .hero { padding: 48px 0 24px; text-align: center; } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 8px; letter-spacing: -0.02em; } .hero p { color: var(--color-texto-suave); margin: 0; } .hero .enlace-rss { margin-top: 16px; } /* Listado de posts (home) */ .listado-posts { max-width: 720px; margin: 0 auto; padding-bottom: 24px; } .post { padding: 32px 0; border-bottom: 1px solid var(--color-borde); } .post:first-child { padding-top: 0; } .post__titulo { font-size: 1.3rem; margin: 0 0 4px; } .post__fecha { font-size: 0.85rem; color: var(--color-texto-suave); margin: 0 0 16px; } .post__contenido { line-height: 1.65; color: var(--color-texto); } .post__contenido p:first-child { margin-top: 0; } .post__contenido p:last-child { margin-bottom: 0; } .grilla-instrumentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; padding: 32px 0 64px; } .tarjeta-instrumento { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 10px; border-radius: 8px; transition: background 0.15s ease; } .tarjeta-instrumento:hover { background: var(--color-superficie); } .tarjeta-instrumento__icono { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--color-superficie); display: flex; align-items: center; justify-content: center; } .tarjeta-instrumento__icono img { width: 100%; height: 100%; object-fit: cover; } .tarjeta-instrumento__nombre { font-weight: 600; margin: 0; text-transform: capitalize; } .tarjeta-instrumento__cantidad { font-size: 0.85rem; color: var(--color-texto-suave); margin: 0; } /* Listado de instrumento */ h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 4px; } .titulo-instrumento { text-transform: capitalize; } .listado-resumen { color: var(--color-texto-suave); margin-top: 0; } .controles { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 0 28px; border-bottom: 1px solid var(--color-borde); margin-bottom: 28px; } .controles label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-texto-suave); } .controles select { font-family: var(--fuente); font-size: 0.9rem; padding: 6px 8px; border: 1px solid var(--color-borde); border-radius: 4px; background: var(--color-fondo); color: var(--color-texto); } .grilla-partituras { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 28px 20px; padding-bottom: 48px; } .tarjeta { display: block; } .tarjeta[hidden] { display: none; } .tarjeta__cover { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: var(--color-superficie); } .tarjeta__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; } .tarjeta:hover .tarjeta__cover img { transform: scale(1.03); } .tarjeta__info { padding-top: 10px; } .tarjeta__nombre { margin: 0 0 2px; font-size: 0.95rem; font-weight: 600; line-height: 1.3; } .tarjeta__meta { margin: 0; font-size: 0.82rem; color: var(--color-texto-suave); } .paginacion { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 24px 0 64px; font-size: 0.9rem; } .paginacion a { text-decoration: underline; color: var(--color-texto); } .paginacion__actual { color: var(--color-texto-suave); } /* Libros */ .seccion-libros { padding-top: 12px; } .seccion-libros h2 { font-size: 1.1rem; margin: 0 0 16px; } .grilla-libros { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px 20px; padding-bottom: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--color-borde); } .tarjeta-libro__cover { border: 1px solid var(--color-borde); } .detalle-libro__encabezado { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 24px 0 40px; } .detalle-libro__cover img { width: 100%; max-width: 260px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: var(--color-superficie); } .detalle-libro__encabezado h1 { margin: 6px 0; } @media (min-width: 640px) { .detalle-libro__encabezado { grid-template-columns: 260px 1fr; align-items: start; } } /* Detalle de partitura */ .detalle-partitura { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 24px 0 64px; } .detalle-partitura__paginas { display: flex; flex-direction: column; gap: 16px; } .detalle-partitura__pagina { display: block; width: 100%; height: auto; border: 1px solid var(--color-borde); border-radius: 4px; background: #fff; } .detalle-partitura__cover-mini { width: 88px; height: 88px; object-fit: cover; border-radius: 6px; background: var(--color-superficie); margin-bottom: 16px; } .etiqueta-ejercicio { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-texto-suave); margin: 0 0 6px; } .detalle-partitura__info h1 { margin: 0 0 6px; } .detalle-partitura__instrumento { color: var(--color-texto-suave); font-size: 0.9rem; text-transform: capitalize; margin: 0 0 20px; } .detalle-partitura__instrumento a:hover { text-decoration: underline; } .detalle-partitura__datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 0.95rem; margin: 0 0 24px; } .detalle-partitura__datos dt { color: var(--color-texto-suave); } .detalle-partitura__datos dd { margin: 0; } .detalle-partitura__descripcion { margin-bottom: 24px; line-height: 1.6; color: var(--color-texto); } .detalle-partitura__descargas, .detalle-partitura__video, .detalle-partitura__audio, .detalle-partitura__libros { margin-bottom: 24px; } .detalle-partitura__descargas h2, .detalle-partitura__video h2, .detalle-partitura__audio h2, .detalle-partitura__libros h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-texto-suave); margin: 0 0 8px; } .detalle-partitura__libros ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .detalle-partitura__libros a { font-size: 0.95rem; } .detalle-partitura__libros a:hover { text-decoration: underline; } .detalle-partitura__libros-capitulo { color: var(--color-texto-suave); font-size: 0.85rem; } .detalle-partitura__vecinos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--color-borde); } .detalle-partitura__vecino { font-size: 0.8rem; color: var(--color-texto-suave); } .detalle-partitura__vecino:hover { color: var(--color-texto); text-decoration: underline; } .detalle-partitura__vecino--siguiente { text-align: right; } .boton-play { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-borde); background: var(--color-fondo); padding: 8px 16px; border-radius: 4px; font-family: var(--fuente); font-size: 0.9rem; color: var(--color-texto); cursor: pointer; } .boton-play:hover { border-color: var(--color-texto); } .boton-play__icono { font-size: 0.8rem; } .detalle-partitura__descargas ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .detalle-partitura__descargas a, .detalle-partitura__video a { border: 1px solid var(--color-borde); display: inline-block; padding: 8px 14px; border-radius: 4px; font-size: 0.9rem; } .detalle-partitura__descargas a:hover, .detalle-partitura__video a:hover { border-color: var(--color-texto); } .detalle-partitura__video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000; } .detalle-partitura__video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Footer */ .sitio-footer { border-top: 1px solid var(--color-borde); padding: 24px 0; color: var(--color-texto-suave); font-size: 0.85rem; } .sitio-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .enlace-rss { display: inline-flex; align-items: center; gap: 6px; color: var(--color-texto-suave); font-size: 0.85rem; border: 1px solid var(--color-borde); border-radius: 4px; padding: 6px 12px; } .enlace-rss:hover { color: var(--color-texto); border-color: var(--color-texto); } @media (min-width: 720px) { .detalle-partitura { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } } /* Tabla índice de libro */ .tabla-libro { width: 100%; border-collapse: collapse; margin-bottom: 48px; font-size: 0.9rem; } .tabla-libro th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-texto-suave); padding: 8px 12px; border-bottom: 1px solid var(--color-borde); } .tabla-libro td { padding: 10px 12px; border-bottom: 1px solid var(--color-borde); } .celda-capitalizar { text-transform: capitalize; } .tabla-libro tr.fila-partitura { position: relative; } .tabla-libro tr.fila-partitura:hover { background: var(--color-superficie); } .fila-link { color: var(--color-texto); text-decoration: none; } .fila-link::after { content: ""; position: absolute; inset: 0; } .fila-capitulo td { background: var(--color-superficie); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-texto); } .badge-mini { font-size: 0.7rem; text-transform: uppercase; color: var(--color-texto-suave); border: 1px solid var(--color-borde); border-radius: 3px; padding: 1px 5px; margin-left: 6px; } /* Estadísticas */ .grilla-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; padding: 24px 0 40px; } .stat-tile { text-align: center; padding: 20px 10px; border: 1px solid var(--color-borde); border-radius: 6px; } .stat-tile__numero { font-size: 2rem; font-weight: 700; margin: 0 0 4px; } .stat-tile__etiqueta { margin: 0; font-size: 0.85rem; color: var(--color-texto-suave); text-transform: capitalize; } .stats-seccion { margin-bottom: 32px; } .stats-seccion h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-texto-suave); margin: 0 0 12px; } .stats-lista { list-style: none; padding: 0; margin: 0; } .stats-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-borde); font-size: 0.9rem; } .stats-lista li:last-child { border-bottom: none; } .stats-lista a:hover { text-decoration: underline; } /* 404 */ .pagina-404 { text-align: center; padding: 64px 0; } .pagina-404__numero { font-size: 5rem; font-weight: 700; margin: 0; color: var(--color-borde); line-height: 1; } .pagina-404 h1 { margin: 8px 0 12px; } .pagina-404 p { color: var(--color-texto-suave); margin: 0 0 28px; } .pagina-404__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* Acerca de */ .pagina-texto { max-width: 640px; } .pagina-texto p { line-height: 1.6; margin: 0 0 18px; }