/*
 * Catálogo NUEVO (/catalogo-nuevo): la piel aprobada por el cliente —
 * clara, sobre fondo blanco, tipografía neutra tipo Helvética. Se carga SOLO
 * en esta sección (el layout la enlaza cuando el controlador pide
 * 'css_seccion'); el resto del sitio no la ve.
 *
 * Todo cuelga de .catnuevo -el panel de la sección, dentro de la columna de
 * contenido del sitio-, así ni una regla se escapa al marco (encabezado,
 * menú, pie), que conserva su propio diseño.
 *
 * TIPOGRAFÍA. Un stack de sistema Helvética/Arial para TODO -títulos y
 * cuerpo-, diferenciando jerarquía por peso y tamaño, no por familia. Es
 * Helvética de verdad donde existe, no necesita archivos y cumple la CSP
 * estricta del sitio (nada externo, ningún @font-face). Para los códigos
 * (ISRC/UPC) y numeraciones, un mono de sistema. Nada de serif.
 *
 * Arial va PRIMERO, no "Helvetica Neue": en el Windows de esta instalación
 * hay una fuente llamada "Helvetica"/"Helvetica Neue" que es CONTORNEADA
 * (hueca), y pedirla primero hacía que los títulos se vieran huecos. Arial
 * -que en Windows es la Helvética sólida de facto, mismas métricas- se pinta
 * lleno en todos lados; el marco del sitio ya usaba Arial primero por esto.
 * Se dejan "Helvetica Neue"/Helvetica detrás para los Mac, donde SÍ son la
 * versión buena y sólida.
 *
 * UN SOLO ACENTO. El naranja del "sol" del logo (--sol) para los estados
 * activos: la letra A-Z activa, el número de track, el hover de los enlaces
 * y el botón "Ver". Todo lo demás es tinta, gris tenue y hairlines.
 */

.catnuevo {
    --fondo: #ffffff;
    --fondo-2: #f6f6f5;
    --tinta: #1a1a1a;
    --tenue: #6b6b6b;
    --linea: #e4e4e1;
    --sol: #E4571F;
    --sans: Arial, "Liberation Sans", "Helvetica Neue", Helvetica, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--sans);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    border-radius: 6px;
    padding: clamp(8px, 1.2vw, 14px);
}

.catnuevo *,
.catnuevo *::before,
.catnuevo *::after { box-sizing: border-box; }

.catnuevo img { max-width: 100%; display: block; }
.catnuevo a { color: inherit; text-decoration: none; }

/*
 * Neutralizar el estilo de encabezados del sitio: sitio.css le pone su color
 * teal (y su tipografía) a los h1..h4 dentro de la columna de contenido, y la
 * herencia pierde contra esa regla. Acá los devolvemos a la tinta y a la
 * Helvética de la sección; el acento naranja (el "nuevo") se reafirma después
 * en su propia regla, más específica.
 */
.catnuevo h1,
.catnuevo h2,
.catnuevo h3,
.catnuevo h4 {
    color: var(--tinta);
    font-family: var(--sans);
}

.catnuevo a:focus-visible,
.catnuevo button:focus-visible,
.catnuevo input:focus-visible,
.catnuevo select:focus-visible,
.catnuevo audio:focus-visible {
    outline: 2px solid var(--sol);
    outline-offset: 3px;
}

/* --- Encabezado editorial de la sección --------------------------------- */
.cn-intro { padding: 0 0 10px; }
.cn-eyebrow {
    color: var(--sol); font-size: 12.5px; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 700; margin: 0 0 12px;
}
.cn-intro h1 {
    font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.1;
    letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
.cn-intro h1 em { font-style: normal; color: var(--sol); }
.cn-bajada { margin: 16px 0 0; max-width: 60ch; color: var(--tenue); font-size: 1.02rem; }

/* --- Rótulo de sección -------------------------------------------------- */
.cn-rotulo {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin: 34px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--linea);
}
.cn-rotulo h2 { font-weight: 600; font-size: 1.4rem; margin: 0; letter-spacing: -.01em; }
.cn-rotulo code {
    font-family: var(--mono); font-size: 12.5px; color: var(--sol);
    background: var(--fondo-2); border: 1px solid var(--linea);
    padding: 3px 9px; border-radius: 4px;
}

/* --- Fila A-Z ----------------------------------------------------------- */
.cn-letras { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.cn-letra {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 27px; padding: 3px 6px; border-radius: 4px;
    font-family: var(--mono); font-size: 12px;
    color: var(--tinta); border: 1px solid var(--linea); background: var(--fondo-2);
    transition: background .18s, color .18s, border-color .18s;
}
.cn-letra:hover { border-color: var(--sol); color: var(--sol); }
.cn-letra-vacia { color: #b3b3b0; background: transparent; border-color: transparent; cursor: default; }
.cn-letra-activa { background: var(--sol); border-color: var(--sol); color: #fff; font-weight: 700; }
.cn-letra-activa:hover { color: #fff; }
.cn-letra-todas {
    min-width: auto; font-family: var(--sans); font-weight: 600;
    color: var(--sol); border-color: var(--linea);
}

/* --- Formulario de filtros --------------------------------------------- */
.cn-form {
    display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end;
    margin: 0 0 12px; padding: 10px 13px; border: 1px solid var(--linea);
    border-radius: 6px; background: var(--fondo-2);
}
.cn-campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; }
.cn-campo label {
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tenue); font-weight: 600;
}
.cn-campo input,
.cn-campo select {
    width: 100%; padding: 8px 10px; font: inherit; font-size: .95rem;
    color: var(--tinta); background: var(--fondo); border: 1px solid var(--linea);
    border-radius: 4px;
}
.cn-campo input::placeholder { color: #9a9a97; }
.cn-botones { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.cn-botones button {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: 9px 22px; border-radius: 4px; border: 1px solid var(--sol);
    background: var(--sol); color: #fff; transition: background .18s, border-color .18s;
}
.cn-botones button:hover { background: #c94716; border-color: #c94716; }
.cn-limpiar { color: var(--sol); font-size: .9rem; border-bottom: 1px solid transparent; }
.cn-limpiar:hover { border-bottom-color: var(--sol); }

/* --- Conteo de resultados ---------------------------------------------- */
.cn-cuenta { color: var(--tenue); font-size: .9rem; margin: 0 0 12px; }

/* --- La pared de tapas -------------------------------------------------- */
.cn-grilla {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 26px 22px;
}
.cn-disco { display: flex; flex-direction: column; gap: 12px; }
.cn-tapa {
    position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
    background: var(--fondo-2); border: 1px solid var(--linea);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s, border-color .28s;
}
.cn-tapa img { width: 100%; height: 100%; object-fit: cover; }
.cn-sin-tapa {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #a8a8a4; font-family: var(--mono); font-size: 12px;
}
.cn-disco:hover .cn-tapa,
.cn-disco:focus-visible .cn-tapa {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .35); border-color: var(--sol);
}
.cn-disco:focus-visible { outline: none; }
.cn-disco:focus-visible .cn-tapa { outline: 2px solid var(--sol); outline-offset: 3px; }
.cn-disco-meta { display: flex; flex-direction: column; gap: 1px; }
.cn-disco-artista { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.cn-disco-album { color: var(--tenue); font-size: .92rem; line-height: 1.28; }
.cn-disco-anio { font-family: var(--mono); font-size: 11px; color: #9a9a97; margin-top: 3px; }

/* --- Paginado ----------------------------------------------------------- */
.cn-paginado { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 34px; }
.cn-paginado a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; padding: 6px 9px; border-radius: 4px;
    font-family: var(--mono); font-size: 13px;
    border: 1px solid var(--linea); background: var(--fondo-2); color: var(--tinta);
}
.cn-paginado a:hover { border-color: var(--sol); color: var(--sol); }
.cn-paginado .cn-pagina-actual { background: var(--sol); border-color: var(--sol); color: #fff; font-weight: 700; }
.cn-paginado .cn-pagina-actual:hover { color: #fff; }

/* --- La ficha ----------------------------------------------------------- */
.cn-volver { margin: 0 0 22px; }
.cn-volver a { color: var(--sol); font-size: .95rem; }
.cn-volver a:hover { text-decoration: underline; }

.cn-ficha-cuerpo {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 52px; align-items: start;
}
.cn-caras { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.cn-cara {
    margin: 0; border-radius: 3px; overflow: hidden; border: 1px solid var(--linea);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.cn-cara img { width: 100%; }
.cn-cara figcaption {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tenue); padding: 8px 10px 6px; background: var(--fondo-2);
}
.cn-kicker {
    font-family: var(--mono); color: var(--sol); font-size: 12px;
    letter-spacing: .1em; margin: 0 0 10px;
}
.cn-ficha-encabezado { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cn-ficha-album { font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.cn-ficha-artista { font-size: 1.15rem; font-weight: 600; color: var(--tinta); }

/* Datos (año · género · sello · producción) como SUBTÍTULO del disco: una
   sola línea bajo el título, en texto corrido separado por puntos. Cada
   ítem lleva un rótulo chico y tenue antes del valor. */
.cn-subtitulo {
    margin: 10px 0 2px; color: var(--tinta);
    font-size: 1rem; line-height: 1.65;
}
.cn-sub-label {
    color: var(--tenue); font-weight: 700; font-size: .72em;
    text-transform: uppercase; letter-spacing: .05em; margin-right: 4px;
}
.cn-sub-item { font-weight: 600; }
.cn-sub-sep { color: var(--tenue); margin: 0 8px; }

/* --- Acciones del disco: BOTONES sólidos con color por tipo de enlace --- */
/* Cada botón se pinta con el color de su servicio (Spotify verde, YouTube
   rojo, iTunes magenta, Tiendas ámbar…) vía la variable --c; el texto y el
   ícono van en blanco. Relieve con sombra para que se lean como botones, y
   un leve realce al pasar el mouse. Los internos (Biografía, Fotogalería,
   Editorial, Prensa) usan tonos propios de la marca/utilidad. */
/* Los botones viven en un PANEL destacado, para que los enlaces del disco
   se lean como una sección propia y ganen preponderancia. */
.cn-enlaces-panel {
    margin: 26px 0 0; padding: 15px 17px 18px;
    background: var(--fondo-2);
    border: 1px solid var(--linea); border-left: 3px solid var(--sol);
    border-radius: 13px;
}
.cn-enlaces-titulo {
    margin: 0 0 13px; font-family: var(--mono);
    font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--tenue); font-weight: 700;
}
.cn-acciones { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* Selectores con .cn-acciones adelante a propósito: le ganan en especificidad
   a ".columna-contenido a" de sitio.css (que si no pinta el texto del botón
   con el azul oscuro de los enlaces y no se lee). El blanco se fuerza también
   en hover/focus por el mismo motivo. */
.cn-acciones .cn-accion {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 17px; border-radius: 9px;
    border: 0; background: var(--c, #4a5568);
    color: #fff; font-size: .9rem; font-weight: 700; letter-spacing: .005em;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .12);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.cn-acciones .cn-accion:hover,
.cn-acciones .cn-accion:focus,
.cn-acciones .cn-accion:focus-visible { color: #fff; }
.cn-accion-icono { width: 18px; height: 18px; flex: none; }
.cn-accion-txt { line-height: 1; }
.cn-acciones .cn-accion:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .24), 0 6px 14px rgba(0, 0, 0, .18);
}
.cn-acciones .cn-accion:active { transform: translateY(0); box-shadow: 0 1px 1px rgba(0, 0, 0, .22); }
.cn-acciones .cn-accion:focus-visible { outline: 3px solid rgba(0, 0, 0, .4); outline-offset: 2px; }

/* Un color por tipo de enlace (oscuros, para que el texto blanco se lea bien,
   pero reconocibles como el color de cada servicio). */
.cn-accion-biografia   { --c: #48307e; } /* violeta  */
.cn-accion-fotogaleria { --c: #085049; } /* verdeazulado */
.cn-accion-editorial   { --c: #8f320e; } /* naranja de la marca */
.cn-accion-prensa      { --c: #333b48; } /* gris pizarra */
.cn-accion-itunes      { --c: #8c1a58; } /* magenta Apple Music */
.cn-accion-spotify     { --c: #0f5f2c; } /* verde Spotify */
.cn-accion-youtube     { --c: #98201b; } /* rojo YouTube */
.cn-accion-tiendas     { --c: #6f4a0b; } /* ámbar tienda */

/* --- "La Prensa Opina" -------------------------------------------------- */
.cn-prensa { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--linea); }
.cn-prensa-titulo { font-weight: 600; font-size: 1.3rem; margin: 0 0 16px; letter-spacing: -.01em; }
/* El HTML del cliente va crudo: se le contiene el ancho y las imágenes y se
   le dan colores legibles, sin reescribirlo. */
.cn-prensa-cuerpo { color: var(--tenue); font-size: .98rem; max-width: 70ch; overflow-wrap: break-word; }
.cn-prensa-cuerpo img { max-width: 100%; height: auto; border-radius: 3px; }
.cn-prensa-cuerpo a { color: var(--sol); }
.cn-prensa-cuerpo a:hover { text-decoration: underline; }
.cn-prensa-cuerpo table { max-width: 100%; }

/* --- "Ficha técnica" (mismo trato que "La Prensa Opina") --------------- */
.cn-ficha-tecnica { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--linea); }
.cn-ficha-tecnica-titulo { font-weight: 600; font-size: 1.3rem; margin: 0 0 16px; letter-spacing: -.01em; }
/* El HTML del cliente va crudo: se le contiene el ancho y las imágenes y se
   le dan colores legibles, sin reescribirlo. */
.cn-ficha-tecnica-cuerpo { color: var(--tenue); font-size: .98rem; max-width: 70ch; overflow-wrap: break-word; }
.cn-ficha-tecnica-cuerpo img { max-width: 100%; height: auto; border-radius: 3px; }
.cn-ficha-tecnica-cuerpo a { color: var(--sol); }
.cn-ficha-tecnica-cuerpo a:hover { text-decoration: underline; }
.cn-ficha-tecnica-cuerpo table { max-width: 100%; }

/* --- Pie "Es un aporte a la cultura popular de:" (en todas las fichas) -- */
.cn-aporte { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--linea); text-align: center; color: var(--tenue); font-size: .85rem; line-height: 1.7; }
.cn-aporte p { margin: 0; }
.cn-aporte-de { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; margin-bottom: 6px; }
.cn-aporte-nombre { font-weight: 700; color: var(--tinta); font-size: .95rem; }
.cn-aporte a { color: var(--sol); }
.cn-aporte a:hover { text-decoration: underline; }

/* --- Liner notes: la lista de temas ------------------------------------ */
.cn-temas-titulo { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 6px; }
.cn-temas-titulo h2 { font-weight: 600; font-size: 1.15rem; margin: 0; }
.cn-temas-titulo span { color: var(--tenue); font-family: var(--mono); font-size: 12px; }
.cn-temas { list-style: none; margin: 0; padding: 0; }
.cn-tema {
    display: grid; grid-template-columns: 2.4rem 1fr; gap: 2px 16px;
    padding: 13px 0; border-bottom: 1px solid var(--linea); align-items: baseline;
}
.cn-tema:last-child { border-bottom: 0; }
.cn-tema-n { font-family: var(--mono); font-size: .95rem; color: var(--sol); font-variant-numeric: tabular-nums; }
.cn-tema-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-tema-titulo { font-size: 1.06rem; font-weight: 600; }
/* El intérprete del tema (quién lo canta): destacado en el naranja de la
   marca, para que en los compilados se lea de un vistazo quién es cada uno.
   Se diferencia del título (negro) y del autor (gris con guion). Un glifo de
   flecha lo antecede, sin depender de emojis del sistema. */
.cn-tema-interprete { font-size: .92rem; font-weight: 600; color: #b8431a; line-height: 1.3; display: flex; align-items: baseline; gap: 5px; }
.cn-tema-interprete::before { content: "\25B8"; font-size: .8em; color: var(--sol); }
.cn-tema-autor { font-size: .86rem; color: var(--tenue); }
.cn-tema-autor::before { content: "— "; color: #a8a8a4; }

/* El reproductor nativo: contenido, que no rompa la fila del tema. */
.cn-tema-audio { display: block; width: 100%; max-width: 340px; height: 34px; margin-top: 8px; }

/* Músicos invitados del tema: bloque chico bajo el tema. */
.cn-musicos { margin-top: 8px; }
.cn-musicos-titulo {
    display: block; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); margin-bottom: 3px;
}
.cn-musicos-lista { list-style: none; margin: 0; padding: 0; }
.cn-musicos-lista li { font-size: .84rem; color: var(--tenue); line-height: 1.5; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
    .cn-ficha-cuerpo { grid-template-columns: 1fr; gap: 30px; }
    .cn-caras { position: static; flex-direction: row; }
    .cn-cara { flex: 1; }
    .cn-form { padding: 16px; }
    .cn-botones { flex: 1 1 100%; }
    /* Encabezado del catálogo más compacto en pantallas chicas: ocupa menos
       alto para que la grilla de tapas aparezca antes. */
    .cn-intro { padding: 2px 0 12px; }
    .cn-intro h1 { font-size: clamp(1.5rem, 6.5vw, 2.1rem); }
    /* La cabecera de la FICHA de un disco, también más compacta. */
    .cn-ficha-cabeza .cn-kicker { margin-bottom: 6px; }
    .cn-ficha-album { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
}
@media (max-width: 400px) {
    .cn-grilla { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 20px 16px; }
}
/* Monitores de poca altura (típico 1366x768): el encabezado del catálogo se
   achica para que la grilla de tapas entre en pantalla sin tanto scroll. */
@media (min-width: 761px) and (max-height: 820px) {
    .cn-intro { padding: 0 0 6px; }
    .cn-intro h1 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
    .cn-letras { margin: 0 0 8px; }
    .cn-letra { padding: 2px 5px; font-size: 11.5px; min-width: 25px; }
    .cn-form { padding: 8px 12px; margin: 0 0 10px; gap: 8px 16px; }
    .cn-campo { gap: 3px; }
    .cn-campo label { font-size: 10px; }
    .cn-campo input, .cn-campo select { padding: 6px 10px; }
    .cn-botones button { padding: 7px 18px; }
    .cn-cuenta { margin: 0 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .catnuevo * { transition: none !important; }
}