/* Casa Siam · Galería (31 oct 2026): los padres como elenco, una ficha por ejemplar con su nombre a la vista,
   y los gatitos por etapas («Los primeros días», «Las primeras semanas», «Antes de irse a casa», «Ya en casa»),
   todas las fotos con el mismo recorte. Solo en galeria.html y en/gallery.html. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco { max-width: 1040px; margin: 0 auto; padding: 104px 24px 96px; display: block !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco h2.cs-elenco__titulo { margin: 0 0 12px !important; text-align: center; font: 400 var(--c-t2)/1.1 var(--c-titulos) !important; letter-spacing: 0 !important; text-transform: none !important; color: #866B34 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco .cs-elenco__entrada { margin: 0 auto 56px !important; text-align: center; color: #4A3D2C !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__fichas { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 40px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__ficha { width: 300px; margin: 0; opacity: 1 !important; transform: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__foto { display: block; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__minis { display: flex; gap: 8px; margin-top: 8px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__mini img { display: block; width: 56px; height: 56px; object-fit: cover; opacity: .85; transition: opacity .2s ease; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__mini:hover img, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__mini:focus-visible img { opacity: 1; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco h3.cs-elenco__nombre { margin: 18px 0 2px !important; font: 400 var(--c-t3)/1.15 var(--c-titulos) !important; letter-spacing: 0 !important; text-transform: none !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco .cs-elenco__linea { margin: 0 !important; font: 400 15px/1.5 var(--c-cuerpo) !important; letter-spacing: 0 !important; text-transform: none !important; color: #6F5828 !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco { padding: 72px 20px 64px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__fichas { gap: 48px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__ficha { width: 100%; max-width: 420px; }
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapas { max-width: 1120px; margin: 0 auto; padding: 88px 24px 24px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa + .cs-etapa { margin-top: 104px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa h2.cs-etapa__titulo { margin: 0 0 10px !important; text-align: center; font: 400 var(--c-t2)/1.1 var(--c-titulos) !important; letter-spacing: 0 !important; text-transform: none !important; color: #866B34 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa .cs-etapa__linea { max-width: 36em; margin: 0 auto 40px !important; text-align: center; text-wrap: balance; color: #4A3D2C !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__linea a { color: #6F5828 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: rgba(111, 88, 40, .45) !important; text-underline-offset: 4px; }
/* Grilla pareja: todas las fotos con el mismo recorte (4:5), para que conversen entre sí */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos--pocas { grid-template-columns: repeat(4, 1fr); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__foto { display: block; margin: 0; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa--final .cs-etapa__linea { margin-bottom: 0 !important; }
@media (max-width: 1024px) { html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos--pocas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapas { padding: 64px 16px 16px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa + .cs-etapa { margin-top: 72px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos--pocas { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* Tres fotos en una etapa (31 oct 2026: «Los primeros días», sin la foto de la madre): una fila de tres en computador y tableta;
   en celular, la primera a todo el ancho y las otras dos debajo */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos.cs-etapa__fotos--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 599px) { html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos.cs-etapa__fotos--tres { grid-template-columns: repeat(2, 1fr); } html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-etapa__fotos--tres .cs-etapa__foto:first-child { grid-column: 1 / -1; } }

/* Una ficha con una sola foto (2 nov 2026: Arya, sin la foto del cajón): en computador y tableta, su nombre baja lo que miden
   las miniaturas (56 px + 8 px), para quedar a la altura de los nombres de su fila */
@media (min-width: 768px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) .cs-elenco__ficha > .cs-elenco__foto + h3.cs-elenco__nombre { margin-top: 82px !important; }
}
