/* ==========================================================================
   Museo Cisitalia — capa de diseño v6
   Tokens, tipografía en rem, contraste AA y 3 breakpoints:
     móvil   ≤ 767px   (responsive.css)
     tablet  768–1199  (≈ diseño original, fluido)
     desktop ≥ 1200    (contenedor 1000px; la home 1200px)
   Se carga DESPUÉS de cisitalia.css: no se toca el CSS original.
   ========================================================================== */

:root {
  /* color */
  --c-bg: #000;
  --c-panel: #424242;          /* marcos, menú, pie */
  --c-content: #6E6B72;        /* fondo del texto (antes #79767D: 4.47:1 → 5.24:1) */
  --c-list: #534D58;           /* fondo de tablas / galerías */
  --c-tab: #66626B;            /* pestaña de submenú inactiva */
  --c-text: #fff;
  --c-text-muted: #C4C4C4;     /* antes #999 sobre #424242 (3.5:1) → 5.8:1 */
  --c-link-list: #D2CC94;      /* títulos de fichas (antes #A09C72, 2.9:1) → 5:1 */
  --c-accent: #D4D444;         /* amarillo Cisitalia */
  --c-rule: #655F69;
  /* tipografía */
  --ff-sans: Arial, Helvetica, sans-serif;
  --ff-serif: Georgia, "Times New Roman", serif;
  --fs-body: 0.9375rem;        /* 15px */
  --fs-lead: 1.0625rem;        /* 17px */
  --fs-small: 0.8125rem;       /* 13px */
  --fs-xs: 0.75rem;            /* 12px, mínimo */
  --fs-h1: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --lh-body: 1.65;
  /* layout */
  --container: min(100% - 2rem, 960px);
  --gutter: 1.25rem;
  --measure: 46rem;            /* ~75 caracteres por línea */
  --radius: 4px;
}
@media (min-width: 1200px) {
  :root {
    --fs-body: 1rem;           /* 16px */
    --fs-lead: 1.1875rem;      /* 19px */
    --fs-small: 0.875rem;      /* 14px */
    --container: min(1000px, 100% - 3rem);   /* como la original (770px): el panel abraza el contenido */
    --gutter: 2.5rem;
  }
}

/* ---------- base ---------- */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { font-family: var(--ff-sans); }
p, div, td, th, li, dd, dt { font-size: var(--fs-body); }
h1 { font-size: var(--fs-h1); line-height: 1.2; margin-bottom: 1.25rem; }
h2 { font-size: 1.25rem; } h3, h4 { font-size: 1rem; } h5 { font-size: var(--fs-small); }
img { max-width: 100%; }

/* ---------- tablet + desktop: contenedor fluido ---------- */
@media (min-width: 768px) {
  #generalcontainer { width: var(--container); max-width: 100%; }
  #header, #menu, #contentcontainer, #homecontentcontainer { width: auto; }
  #headerimage { width: auto; box-sizing: border-box; }
  #headerimage .slideshow { width: 100%; height: auto; aspect-ratio: 760 / 260; }
  #headerimage .slideshow img { width: 100%; height: 100%; object-fit: cover; }
  #mainmenu { width: auto; }
  #maincolumn, #maincolumn2 { float: none; width: auto; box-sizing: border-box; }
  #footer, #homefooter { width: auto; box-sizing: border-box; }
  #maincolumn2, #listdiv { background-size: 100% auto; }   /* esquinas table_top/bottom.png (760px) */

  /* cabecera: idiomas a la derecha sin margen fijo */
  #logodiv { display: flex; justify-content: space-between; align-items: flex-start; overflow: visible; }
  #langmenu { float: none; margin: 0; display: flex; }
  #langmenu li { float: none; font-size: var(--fs-xs); }
  #langmenu li a { display: inline-block; padding: .25rem .125rem; }

  /* el texto llena el panel con un relleno normal, como en la original */
  #maincolumn { padding: 2rem var(--gutter); }
  #contenido_principal { padding: 1.75rem var(--gutter) 2rem; }
  #listmenu { margin-left: var(--gutter); }
  #listdiv { padding: 1.5rem var(--gutter) 2rem; }
}

/* ---------- tipografía de contenido ---------- */
#maincolumn, #maincolumn2, #hometext { line-height: var(--lh-body); }
#maincolumn, #maincolumn p, #maincolumn2 p, #contenido_principal, #listdiv, #listdiv p, #hometext { font-size: var(--fs-body); }
/* páginas de texto (Storia, Bibliografia, Archivio…): 16px en todos los tamaños */
#maincolumn, #maincolumn p, #contenido_principal { font-size: 1rem; }
/* entradillas que el antiguo CMS marcaba con font-size:14px en línea */
.ds_content span[style*="font-size: 14px"], .ds_content span[style*="font-size:14px"] { font-size: var(--fs-lead) !important; line-height: 1.5; }
#contenido_principal { line-height: 1.6; }
/* 14 introducciones traen <span> pegados en el CMS original (pila "arial,helvetica,clean" de YUI, 11px / 13px con
   line-height 16px): la misma entradilla salía a 13px apretada o a 16px según la página o el idioma. Heredan la del sitio. */
#contenido_principal span[style] { font: inherit !important; line-height: inherit !important; }
#hometext h1[style] { font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem) !important; font-family: var(--ff-serif); font-weight: normal; }

/* ---------- menús ---------- */
#menucontent li a { font-size: var(--fs-body); color: var(--c-text-muted); }
#menucontent li a:hover, #menucontent li a.menuselecteda { color: var(--c-text); }
#listmenu li a { font-size: .875rem; color: #EEE; }   /* pestañas de Riviste, Libri… a 14px */
#listmenu li a.menuselecteda { color: var(--c-accent); }
#homemenu ul li a { font-size: 1.0625rem; }

/* ---------- contraste de fondos ---------- */
#contentcontainer { background-color: var(--c-content); }
#maincolumn { background: var(--c-content) linear-gradient(to bottom, #4f4d51 0, var(--c-content) 410px) no-repeat; }

/* ---------- tablas ---------- */
#tablelist th { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); padding: .5rem .5rem; text-align: left; }
#tablelist td { font-size: var(--fs-small); padding: .75rem .5rem; border-bottom-color: var(--c-rule); }
#tablelist td.yellowtd a { color: var(--c-link-list); font-size: var(--fs-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }   /* subrayado de enlace clásico: se ve que abre algo */
#tablelist td.yellowtd a:hover { color: var(--c-accent); }
@media (min-width: 1200px) { #tablelist td { padding: .875rem .75rem; } }

/* ---------- listas con flecha (Archivio Storico…) ---------- */
/* la flecha (10×12) estaba a 6px fijos, pensada para 13px: ahora centrada en la primera línea (padding 5px + ½ line-height 1.6em) */
#listdiv ul li { background-position: 0 calc(5px + .8em - 6px); }
#listdiv ul li a:empty { display: none; }   /* enlaces vacíos heredados del CMS: desplazaban el texto 2px */

/* ---------- galerías ---------- */
#listdiv ul.ds_gallery_thumbs li span { font-size: var(--fs-small); color: #EEE; }
@media (min-width: 768px) {
  #listdiv ul.ds_gallery_thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem 1rem; }
  #listdiv ul.ds_gallery_thumbs li { width: auto !important; min-height: 0; margin: 0 !important; padding: 0 !important; }
  #listdiv ul.ds_gallery_thumbs li img { width: 100%; height: auto; }
}
@media (min-width: 1200px) { #listdiv ul.ds_gallery_thumbs { grid-template-columns: repeat(5, 1fr); } }

/* ---------- home ---------- */
@media (min-width: 768px) {
  #homecontentcontainer { display: grid; grid-template-columns: 1.55fr 1fr; column-gap: 2rem; align-items: center; padding-top: 3rem; }
  #homeimage, #hometext { float: none; width: auto; }
  #homeimage img { width: 100%; height: auto; display: block; }
  #hometext { padding: 1rem 1rem 1rem 0; }
  #homemenu { grid-column: 1 / -1; width: auto; margin: 1.5rem 0 0; }
  #homefooter { display: flex; justify-content: space-between; align-items: center; }
  #home_footer_left, #home_footer_right { float: none; padding: 0; margin: 0; }
}
#home_footer_left { font-size: var(--fs-xs); }
@media (min-width: 768px) and (max-width: 839px) { #logimage { margin-left: -1rem; } }
@media (min-width: 1200px) { .homepage #generalcontainer { width: min(1200px, 100% - 3rem); } #homecontentcontainer { column-gap: 3.5rem; padding-top: 4rem; } #hometext { max-width: 30rem; } }

/* ---------- pie ---------- */
#footer, #footer a, #footer div { font-size: var(--fs-small); }
#footer_right a { display: inline-block; padding: .75rem 0; margin: -.75rem 0; }
#footer { overflow: visible; display: flow-root; }   /* el overflow:auto original + la zona táctil ampliada de "Contatto" sacaban un scrollbar */
#home_footer_left { color: var(--c-text-muted); }

/* ---------- home a pantalla completa (≥768px) ----------
   Cabecera + foto/texto + menú + pie caben en una pantalla y quedan centrados en vertical.
   En pantallas bajas (portátiles 720–960px de alto) se compacta el texto en vez de obligar a hacer scroll;
   en pantallas muy grandes la composición crece un poco. Las páginas interiores no cambian. */
@media (min-width: 768px) {
  .homepage #generalcontainer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .homepage #generalcontainer > * { flex: none; margin-left: 0; margin-right: 0; }   /* el margin:0 auto original encogería los hijos */
  .homepage #generalcontainer > #homecontentcontainer { flex: 1 0 auto; align-content: center; padding-block: clamp(1rem, 4vh, 4rem); }
  .homepage #homemenu { margin-top: clamp(.75rem, 3vh, 1.5rem); }
  .homepage #homefooter { margin: 0; padding-block: clamp(.5rem, 2.5vh, 2rem); }
  #home_footer_right img { max-height: clamp(48px, 7vh, 70px); width: auto; }
  #homeimage img { max-height: calc(100svh - 20rem); object-fit: contain; }   /* la foto nunca más alta que el hueco */
}
@media (min-width: 768px) and (max-height: 960px) {
  #homecontentcontainer { grid-template-columns: 1.25fr 1fr; }
  #hometext { max-width: none; padding-block: 0; font-size: .875rem; line-height: 1.5; }
  #hometext h1[style] { font-size: clamp(1.25rem, .8rem + 1.4vh, 1.625rem) !important; margin-bottom: .75rem; }
}
@media (min-width: 768px) and (max-height: 780px) {
  #hometext { font-size: .8125rem; line-height: 1.45; }
  #hometext p { margin-block: 0 .6em; }
  .homepage #generalcontainer > #homecontentcontainer { padding-block: .75rem; }
  .homepage #homemenu { margin-top: .5rem; }
}
@media (min-width: 1800px) and (min-height: 1200px) {
  .homepage #generalcontainer { width: min(1440px, 100% - 3rem); }
  #hometext { max-width: 34rem; font-size: 1.0625rem; }
  #homemenu ul li a { font-size: 1.1875rem; }
}

/* ---------- respuesta al tocar ----------
   Sin el destello gris del navegador: cada enlace responde al pulsar (:active) con su propio color de hover.
   En pantallas táctiles el :hover se "pega" tras tocar en lo que no cambia de página (visor, PDF): se anula. */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  #tablelist td.yellowtd a:hover { color: var(--c-link-list); }
  #listdiv ul li a:hover { color: #FFF; text-decoration: none; }
  a.dwnldlink:hover, a.btn:hover, button.btn:hover { background-image: linear-gradient(180deg, #9d9a97 0%, #75726f 48%, #5c5a57 100%); }
}
#menucontent li a:active, #homemenu ul li a:active, #langmenu li a:active { color: #FFF; }
#listmenu li a:active { color: #CCCC33; }
#tablelist td.yellowtd a:active, #listdiv ul li a:active { color: var(--c-accent); text-decoration: underline; }
#footer a:active { text-decoration: underline; }
#listdiv ul.ds_gallery_thumbs li a:active img { opacity: .75; }
a.dwnldlink:active, a.btn:active, button.btn:active { background-image: linear-gradient(180deg, #5c5a57 0%, #75726f 100%); }

/* ---------- volver arriba (móvil) ----------
   Círculo del mismo material que los controles del visor; aparece al bajar más de una pantalla (ds/js/ui.js). */
.to-top { display: none; }
@media (max-width: 767px) {
  .to-top {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; z-index: 50;
    right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    width: 44px; height: 44px; padding: 0;
    border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    background: rgba(30, 29, 32, .72); color: #fff;
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translateY(8px) scale(.9); visibility: hidden;
    transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s, background-color .15s;
  }
  .to-top.is-shown { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .to-top:active { transform: scale(.92); background: rgba(60, 58, 64, .85); }
  .to-top:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
  .to-top svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  html.lb-open .to-top { visibility: hidden; opacity: 0; }   /* no compite con el visor */
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .to-top, .to-top.is-shown { transform: none; }
}
@media (max-width: 767px) and (prefers-reduced-transparency: reduce) {
  .to-top { background: #2a282c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Tributo / MoMA (tributo-cisitalia, MOMA, tributos-homenajes-cisitalia) ----------
   Contenido reescrito en bloques (antes: tamaños fijos en línea, align="left", 7 <br> seguidos).
   Columna de lectura centrada; cada bloque separado por una línea fina; imágenes como máximo a su tamaño real. */
#listdiv .trib { max-width: 56rem; margin: 0 auto; }
#listdiv .trib h1 { margin: .25rem 0 1.5rem; font-family: var(--ff-serif); font-weight: normal; font-size: 1.375rem; line-height: 1.25; }
#listdiv .trib p { margin: 0 0 1em; padding: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
#listdiv .trib-sec { padding: 2rem 0; border-top: 1px solid rgba(255,255,255,.1); }
#listdiv .trib-sec:first-of-type { padding-top: 0; border-top: 0; }
#listdiv .trib-sec:last-child { padding-bottom: .5rem; }
#listdiv .trib-fig { margin: 0; }
#listdiv .trib-fig img { float: none; display: block; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.35); }

/* MoMA: catálogo a la izquierda, texto y PDF a la derecha */
#listdiv .trib-moma { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; align-items: start; }
#listdiv .trib-txt > p:last-of-type { margin-bottom: .75rem; }
#listdiv .trib-links { margin: 0; }

/* sellos: la frase y debajo la imagen a su ancho real */
#listdiv .trib-stamps .trib-fig { margin-top: .25rem; }

/* lotería: frase y billete lado a lado */
#listdiv .trib-lotto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 2rem; align-items: center; }
#listdiv .trib-lotto p { margin: 0; }

/* cine: año en columna, cada película en su línea */
#listdiv ul.trib-films { margin: .25rem 0 0; }
#listdiv ul.trib-films li {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding: .75rem 0; background: none; border-top: 1px solid rgba(255,255,255,.08);
  font-size: var(--fs-body); line-height: 1.5;
}
#listdiv ul.trib-films li:first-child { border-top: 0; }
#listdiv .trib-year { font-family: var(--ff-serif); color: var(--c-accent); font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
  #listdiv .trib h1 { font-size: 1.25rem; margin-bottom: 1.25rem; }
  #listdiv .trib-sec { padding: 1.5rem 0; }
  #listdiv .trib-moma, #listdiv .trib-lotto { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  #listdiv .trib-moma .trib-fig img { width: 100%; }        /* 300px reales: a lo ancho del móvil */
  #listdiv .trib-stamps .trib-fig img, #listdiv .trib-lotto .trib-fig img { width: 100%; }
  #listdiv .trib-lotto .trib-fig { order: 2; }
  #listdiv ul.trib-films li { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .75rem; }
}
/* las tres imágenes se abren en el visor (ampliar sellos y billete, sobre todo en móvil) */
#listdiv .trib-fig a { display: block; width: fit-content; max-width: 100%; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
#listdiv .trib-fig a:active img { opacity: .85; }
#listdiv .trib-fig a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 767px) { #listdiv .trib-fig a { width: 100%; } }

/* ---------- menús fijos al hacer scroll ----------
   El menú principal y las pestañas de sección (Riviste, Libri…) se quedan arriba. Cada uno vive dentro de un bloque que
   termina justo debajo (#header, #maincolumn2), así que es el bloque entero el que es sticky, con un top negativo que
   ui.js calcula para que solo asome la fila del menú. Sin JS el top queda en auto y no pasa nada. Solo en móvil. */
@media (max-width: 767px) {
  #header { position: sticky; z-index: 30; }
  #maincolumn2 { position: sticky; z-index: 20; }
  #contentcontainer, #homecontentcontainer { overflow: visible; }   /* overflow:auto lo convertía en contenedor de scroll y anulaba el sticky */
  #contentcontainer { display: flow-root; }
  /* home: el menú (Storia, Bibliografia, Memorabilia) arriba mientras se baja por la foto y el texto */
  #homemenu { position: sticky; top: 0; z-index: 30; background: #000; }
}

/* ---------- separadores de idioma ----------
   El borde de 1px de cada <li> ocupaba todo el alto (en móvil, los 44px de la zona táctil) y tocaba el borde de arriba.
   Ahora es un filo corto y tenue, centrado en la línea del texto: separa sin competir con las letras. */
#langmenu li { position: relative; border-right: 0; }
#langmenu li + li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: .75rem; transform: translateY(-50%);   /* 12px: el alto de las letras, no el de la zona táctil */
  background: rgba(255,255,255,.28); pointer-events: none;
}
@media (prefers-contrast: more) { #langmenu li + li::before { background: #fff; } }