/* Plan 15: estructura propia de la entrada general. Colores en piel_oro.css.
 * Usa la trama de .container-list, sin .grid ni sus alturas/minimos antiguos. */
.sc-catalogo { padding: 0; background: var(--sc-negro); }
.sc-contenedor { width: 100%; max-width: 1170px; padding: 0 20px; margin: 0 auto; box-sizing: border-box; }
.sc-catalogo *, .sc-catalogo *::before, .sc-catalogo *::after { box-sizing: border-box; }
/* Reutiliza tipografia y linea de .page-header del listado local, pero admite el texto
 * de presentacion sin quedar encerrado en su altura fija movil de 120 px. */
.sc-encabezado.page-header { position: relative; overflow: hidden; height: auto; margin: 0; padding: 46px 0 28px; background: var(--sc-negro); }
.sc-cabecera-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-encabezado::before { content: ""; position: absolute; inset: 0; background: var(--sc-cabecera-velo); z-index: 1; }
.sc-encabezado > .sc-contenedor { position: relative; z-index: 2; }
.sc-encabezado .sc-presentacion { max-width: 900px; color: var(--sc-blanco); font-size: 17px; font-weight: 400; line-height: 1.6; text-transform: none; margin: 18px 0 0; }
.sc-cuerpo.container-list { padding: 32px 0; }
.sc-distribucion { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 28px; align-items: start; }
.sc-panel-ciudades { border: 1px solid var(--sc-borde); border-top: 4px solid var(--oro); background: var(--sc-fondo); }
.sc-panel-ciudades summary { padding: 14px; font-size: 20px; font-weight: 600; color: var(--sc-texto); cursor: pointer; }
.sc-panel-contenido { padding: 0 14px 14px; }
.sc-panel-contenido label { display: block; font-size: 14px; color: var(--sc-texto); }
.sc-panel-contenido input { width: 100%; min-width: 0; padding: 9px; margin: 0 0 12px; border: 1px solid var(--sc-borde); background: var(--sc-fondo); color: var(--sc-texto); font-size: 16px; }
.sc-ciudades { list-style: none; padding: 0; margin: 0; max-height: 65vh; overflow-y: auto; }
/* Scroll del panel y acceso permanente inicial a la lista ampliada; luego tandas de 25. */
.sc-ciudades-mas { margin-top: 12px; padding: 7px 14px; border: 1px solid var(--oro-oscuro); background: var(--oro); color: var(--texto-sobre-oro); font-size: 14px; cursor: pointer; }
.sc-ciudades a { display: block; padding: 7px 0; border-top: 1px solid var(--sc-fondo); border-bottom: 1px solid var(--sc-fondo); color: var(--oro-texto); font-size: 15px; line-height: 1.3; }
.sc-ciudades a:hover { color: var(--sc-texto); }
/* Origen y provincia se distinguen del destino al que realmente lleva el enlace. */
.sc-ciudades a strong { font-weight: 600; }
.sc-ciudades small { display: block; font-size: 12px; line-height: 1.4; color: var(--sc-secundario); }
.sc-destino-vacio { padding: 7px 0; color: var(--sc-texto); font-size: 14px; }
.sc-sin-ciudad { color: var(--sc-texto); font-size: 14px; }
.sc-rejilla { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 20px; align-items: start; }
.sc-tarjeta { min-width: 0; }
.sc-foto { position: relative; display: block; overflow: hidden; border: 1px solid var(--sc-foto-borde); background: var(--sc-negro); text-decoration: none; }
.sc-foto > img { display: block; width: 100%; height: auto; opacity: .9; transition: opacity .2s; }
.sc-foto:hover > img, .sc-foto:focus > img { opacity: .5; }
.sc-foto:hover, .sc-foto:focus { text-decoration: none; }
.sc-sobre-foto { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.sc-titulo { display: block; border-left: 8px solid var(--oro); padding: 10px 12px; background: var(--home-titulo-degradado); color: var(--home-tarjeta-blanco); font-family: "Roboto Slab",serif; font-size: 20px; line-height: 1.25; font-weight: 600; text-shadow: 0 1px 3px var(--sc-negro); overflow-wrap: break-word; }
.sc-precio { display: block; padding: 8px 12px; background: var(--home-precio-degradado); color: var(--home-tarjeta-blanco); text-align: right; font-size: 20px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.sc-foto:hover .sc-titulo, .sc-foto:focus .sc-titulo { color: var(--oro); }
.sc-ciudad { margin: 7px 0 0; color: var(--oro-claro); font-size: 15px; font-weight: 600; }
.sc-entradilla { margin: 7px 0 0; color: var(--sc-blanco); font-size: 15px; line-height: 1.5; }
.sc-controles { text-align: center; padding: 24px 0 0; }
.sc-mas { padding: 10px 28px; border: 1px solid var(--oro-oscuro); background: var(--oro); color: var(--texto-sobre-oro); font-size: 17px; font-weight: 600; cursor: pointer; }
.sc-mas:disabled { opacity: .6; cursor: wait; }
.sc-estado { margin: 12px 0 0; font-size: 15px; color: var(--sc-blanco); }
.sc-vacio { grid-column: 1 / -1; color: var(--sc-blanco); }
.sc-catalogo a:focus-visible, .sc-catalogo button:focus-visible, .sc-catalogo input:focus-visible, .sc-catalogo summary:focus-visible { outline: 3px solid var(--oro-texto); outline-offset: 3px; }
/* Foco unico para Tab/flechas: las bandas no dependen de la heuristica focus-visible. */
.sc-catalogo .sc-ciudades a:focus { outline: none; border-color: var(--oro); background: var(--sc-borde); color: var(--sc-texto); }
.sc-catalogo [hidden] { display: none !important; }
@media (max-width: 1099px) {
    .sc-distribucion { grid-template-columns: 200px minmax(0,1fr); gap: 20px; }
    .sc-rejilla { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .sc-contenedor { padding: 0 16px; }
    .sc-distribucion { grid-template-columns: minmax(0,1fr); }
    .sc-rejilla { grid-template-columns: repeat(2,minmax(0,400px)); justify-content: center; }
    .sc-ciudades { max-height: 40vh; }
}
@media (max-width: 539px) {
    .sc-rejilla { grid-template-columns: minmax(0,400px); }
    /* El H1 local heredaba 20 px hasta 480; aqui conserva presencia con texto de varias lineas. */
    .sc-encabezado.page-header h1 { font-size: 28px; line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) { .sc-foto > img { transition: none; } }

/* Entradas dedicadas a elegir ciudad: panel centrado y abierto tambien en movil. */
.sc-solo-ciudad .sc-panel-ciudades { max-width: 760px; margin: 0 auto; }

/* Paginas editoriales: una lista legible, con el mismo oro y foco del catalogo. */
.sc-paginas { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sc-pagina > a { display: block; padding: 18px 20px; border-left: 8px solid var(--oro); border-bottom: 1px solid var(--oro-oscuro); text-decoration: none; }
.sc-pagina h2 { margin: 0; color: var(--sc-blanco); font-family: "Roboto Slab",serif; font-size: 28px; font-weight: 600; line-height: 1.35; text-transform: none; overflow-wrap: break-word; }
.sc-pagina p { margin: 10px 0 0; color: var(--oro); font-size: 15px; line-height: 1.4; }
.sc-pagina > a:hover h2, .sc-pagina > a:focus h2 { color: var(--oro); }
@media (max-width: 539px) {
    /* Mantener presencia del titulo sin desbordar las localidades largas. */
    .sc-pagina > a { padding: 16px; }
    .sc-pagina h2 { font-size: 24px; }
}

/* Ciudad ya elegida: rejilla a ancho completo, con los cortes acordados de home. */
.sc-local .sc-rejilla-local { grid-template-columns: repeat(4,minmax(0,400px)); justify-content: center; }
@media (max-width: 1099px) { .sc-local .sc-rejilla-local { grid-template-columns: repeat(3,minmax(0,400px)); } }
@media (max-width: 819px) { .sc-local .sc-rejilla-local { grid-template-columns: repeat(2,minmax(0,400px)); } }
@media (max-width: 539px) { .sc-local .sc-rejilla-local { grid-template-columns: minmax(0,400px); } }