/* Paginas de ciudad y hubs por pais (layout-ciudad.njk). Hereda styles.css, catalogo.css y guia-set.css;
   todo va acotado a .ciudad-page para no tocar las guias de set. Colores: crema #FAF3E7, marino #1A1A2E, rojo #DC143C, azul #4770DB. */
.ciudad-page .migas { max-width: 820px; margin: 0 auto 1.25rem; }
.ciudad-page .guia-set .gs-cabecera, .ciudad-page .gs-cabecera { margin-bottom: 2.25rem; }
.ciudad-page .gs-cabecera .section-title-premium { margin-bottom: 0; overflow-wrap: anywhere; }
.ciudad-page .gs-bloque { margin-bottom: 3rem; }
.ciudad-page .gs-bloque p { color: rgba(26, 26, 46, 0.82); font-size: 1rem; line-height: 1.75; margin: 0 0 1.1rem; }
.ciudad-page .gs-bloque h2.gs-h2 { font-size: 1.5rem; margin: 0 0 1.1rem; line-height: 1.15; }
.ciudad-page .gs-bloque a { color: #4770DB; overflow-wrap: anywhere; }
.ciudad-page .gs-bloque p.gs-nota, .ciudad-page .gs-nota { max-width: 820px; font-size: 0.82rem; line-height: 1.55; color: rgba(26, 26, 46, 0.62); margin: 1rem 0 0; }
.ciudad-page p.gs-nota-hub { margin: 1.75rem auto 0; }

/* Listas con la tarjeta de la casa (blanco, borde fino, radio 12) */
.ciudad-page .gs-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ciudad-page .gs-lista li { margin: 0; background: #fff; border: 1px solid rgba(26, 26, 46, 0.09); border-radius: 12px; padding: 1rem 1.25rem; font-size: 0.95rem; line-height: 1.65; color: rgba(26, 26, 46, 0.82); overflow-wrap: anywhere; }
.ciudad-page .gs-lista li strong { color: #1A1A2E; }

/* Pasos numerados */
.ciudad-page .gs-pasos { counter-reset: paso; }
.ciudad-page .gs-pasos li { counter-increment: paso; position: relative; padding-left: 4rem; }
.ciudad-page .gs-pasos li::before { content: counter(paso); position: absolute; left: 1.1rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #DC143C; color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
.ciudad-page .gs-pasos li strong { display: block; margin-bottom: 0.2rem; }

/* Enlaces internos: tarjetas enlace en rejilla */
.ciudad-page .gs-enlaces { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ciudad-page .gs-enlaces li { padding: 0; }
.ciudad-page .gs-enlaces li a { display: block; height: 100%; padding: 1rem 1.25rem; color: #1A1A2E; font-weight: 600; text-decoration: none; }
.ciudad-page .gs-enlaces li a:hover, .ciudad-page .gs-enlaces li a:focus-visible { color: #DC143C; }
.ciudad-page .gs-enlaces li:hover { border-color: #4770DB; }

/* Fuentes oficiales: fichas compactas con el dominio */
.ciudad-page .gs-fuentes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ciudad-page .gs-fuentes li { padding: 0; background: #FAF3E7; }
.ciudad-page .gs-fuentes li a { display: block; padding: 0.7rem 1rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; word-break: break-all; }
.ciudad-page .gs-fuentes li a::after { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.4em; vertical-align: -0.05em; background: currentColor; opacity: 0.75; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; }
.ciudad-page .gs-fuentes li:hover { border-color: #4770DB; }

/* Indice del hub */
.ciudad-page .gs-indice { max-width: 1100px; margin: 0 auto; }
.ciudad-page .gs-indice a { transition: border-color 0.2s, transform 0.2s; }
.ciudad-page .gs-indice a:hover, .ciudad-page .gs-indice a:focus-visible { border-color: #DC143C; transform: translateY(-2px); }

/* La FAQ y la llamada final no deben quedar tapadas por el menu fijo al saltar a #faq / #alta */
.ciudad-page #faq, .ciudad-page #alta { scroll-margin-top: 100px; }

@media (max-width: 640px) {
    .ciudad-page .gs-bloque h2.gs-h2 { font-size: 1.3rem; }
    .ciudad-page .gs-pasos li { padding-left: 3.4rem; }
    .ciudad-page .gs-pasos li::before { left: 0.85rem; }
    .ciudad-page .gs-lista li { padding: 0.9rem 1rem; }
    .ciudad-page .gs-enlaces, .ciudad-page .gs-fuentes { grid-template-columns: 1fr; }
    .ciudad-page .gs-enlaces li, .ciudad-page .gs-fuentes li { padding: 0; }
}