/*
 * Ficha de sitio.
 *
 * Los colores y las familias tipográficas son los de la app —albaricoque de
 * acento, superficie oscura del detalle, Alegreya para los titulares y DM Sans
 * para el resto— para que quien abra el enlace compartido reconozca la misma
 * ficha que vio en el móvil.
 *
 * Móvil primero, que es donde llega casi todo el tráfico de un enlace de
 * WhatsApp: una sola columna, idéntica a la app. A partir de 992 px los datos
 * y el contacto se van a una columna lateral.
 */

.qem-place {
    --qem-apricot: #ffb86f;
    --qem-red: #fe3346;
    --qem-surface: #10202e;
    --qem-surface-soft: #16293a;
    --qem-border: rgba(255, 255, 255, 0.16);
    --qem-text: #f4f6f8;
    --qem-muted: #b3c0cc;
    /* Cuerpo de texto: más claro que el gris de las etiquetas. */
    --qem-body: #d7e0e8;

    background: var(--qem-surface);
    color: var(--qem-text);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Portada ---------- */

.qem-place__hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.qem-place__hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Dos velos y no uno: el primero garantiza que el texto se lea sobre
 * cualquier fotografía, y el segundo cierra la imagen en el color con el que
 * arranca el contenido para que no quede costura entre ambos.
 */
.qem-place__hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(to bottom, rgba(16, 32, 46, 0) 72%, var(--qem-surface) 100%);
}

.qem-place__hero-body {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 28px;
}

.qem-place__crumb {
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.qem-place__crumb a {
    color: var(--qem-apricot);
    text-decoration: none;
}

.qem-place__crumb a:hover,
.qem-place__crumb a:focus-visible {
    text-decoration: underline;
}

.qem-place__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}

.qem-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

.qem-badge--must {
    background: var(--qem-apricot);
    color: #21160a;
}

.qem-badge--verified {
    background: rgba(255, 255, 255, 0.14);
    color: var(--qem-text);
    border: 1px solid var(--qem-border);
}

.qem-place__name {
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1.1;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.qem-place__where {
    margin: 8px 0 0;
    color: var(--qem-apricot);
    font-weight: 600;
}

/* ---------- Rejilla ---------- */

.qem-place__grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 56px;
    display: grid;
    gap: 28px;
}

.qem-place__section + .qem-place__section {
    margin-top: 28px;
}

/*
 * Los titulares de sección se separan del cuerpo por color y por forma, no
 * solo por tamaño: en el acento de la ficha, con versalitas y una regla corta
 * debajo. En blanco y a 1.4rem se confundían con los titulares que trae la
 * descripción editorial, y no se distinguía el andamiaje de la página del
 * contenido que escribe el aliado.
 *
 * El acento es el mismo albaricoque del resto —distintivos, enlaces, la
 * tarjeta de la app—: un segundo color de acento solo para estos rótulos
 * habría añadido una voz más sin que nada la pidiera.
 */
.qem-place__h2 {
    font-family: 'Alegreya', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qem-apricot);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 184, 111, 0.32);
}

.qem-card__title {
    font-family: 'Alegreya', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff;
}

/*
 * La descripción llega como HTML editorial: titulares, párrafos y listas que
 * el aliado escribe en Directus. El tema base no la alcanza —vive dentro de
 * una superficie oscura— así que se le dan sus propios ritmos aquí.
 */
.qem-place__prose {
    /* El mismo tono que el resto del texto de la ficha. Estaba en el gris
       apagado que se usa para etiquetas y datos secundarios, y aquí es el
       cuerpo que de verdad se lee: sobre la superficie oscura se quedaba
       corto de contraste frente a las listas de al lado. */
    color: var(--qem-body);
    line-height: 1.7;
}

.qem-place__prose > :first-child {
    margin-top: 0;
}

.qem-place__prose h2,
.qem-place__prose h3,
.qem-place__prose h4 {
    font-family: 'Alegreya', Georgia, serif;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 26px 0 10px;
}

.qem-place__prose p,
.qem-place__prose li,
.qem-place__prose td {
    /* El color va en el elemento y no solo en el contenedor: el tema pinta `p`
       directamente, y un valor heredado pierde siempre frente a una regla que
       apunta al elemento por muy poca especificidad que tenga. Ese era el
       motivo de que los párrafos salieran más apagados que las listas de al
       lado, aunque los dos colgaran del mismo bloque. */
    color: var(--qem-body);
}

.qem-place__prose p {
    margin: 0 0 14px;
}

.qem-place__prose ul,
.qem-place__prose ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.qem-place__prose li {
    margin-bottom: 7px;
}

.qem-place__prose strong {
    color: var(--qem-text);
}

.qem-place__prose a {
    color: var(--qem-apricot);
    text-decoration: underline;
}

.qem-place__prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ---------- Tarjetas ---------- */

.qem-card {
    background: var(--qem-surface-soft);
    border: 1px solid var(--qem-border);
    border-radius: 16px;
    padding: 18px;
}

.qem-card + .qem-card,
.qem-card + .qem-btn,
.qem-btn + .qem-card {
    margin-top: 16px;
}

/* ---------- Datos ---------- */

.qem-fact {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.qem-fact + .qem-fact {
    border-top: 1px solid var(--qem-border);
}

.qem-fact__icon {
    color: var(--qem-apricot);
}

.qem-fact__label {
    color: var(--qem-muted);
    font-size: 0.92rem;
}

.qem-fact__value {
    font-weight: 700;
    text-align: right;
}

/* Cabecera del horario: el rótulo ocupa la fila y los días van debajo. */
.qem-fact--block {
    grid-template-columns: 24px 1fr;
    padding-bottom: 4px;
}

.qem-hours {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 34px;
    font-size: 0.9rem;
}

.qem-hours li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    color: var(--qem-muted);
}

.qem-hours li span:last-child {
    color: var(--qem-text);
    text-align: right;
}

.qem-fact__value--muted {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--qem-muted);
    font-style: italic;
}

/* ---------- Botón ---------- */

.qem-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    /* 48 px de alto mínimo: es el objetivo táctil que usa la app. */
    min-height: 48px;
}

.qem-btn--primary {
    background: var(--qem-apricot);
    color: #21160a;
}

.qem-btn--primary:hover,
.qem-btn--primary:focus-visible {
    background: #ffc98d;
    color: #21160a;
}

/* ---------- La app ---------- */

/*
 * Es la única tarjeta con borde de acento y va la primera de la columna: a
 * esta página se llega de un enlace o de Google, y lo primero que hay que
 * entender es que esto pertenece a una app que se puede descargar.
 */
.qem-app {
    border-color: rgba(255, 184, 111, 0.45);
    background:
        linear-gradient(180deg, rgba(255, 184, 111, 0.12), rgba(255, 184, 111, 0) 60%),
        var(--qem-surface-soft);
}

.qem-app__eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--qem-apricot);
    color: #21160a;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qem-app__title {
    font-family: 'Alegreya', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.qem-app__lede {
    color: var(--qem-muted);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0 0 14px;
}

.qem-app__list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    color: var(--qem-text);
    font-size: 0.94rem;
}

.qem-app__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.qem-app__list .bi {
    color: var(--qem-apricot);
    flex: 0 0 auto;
}

.qem-app__stores {
    display: grid;
    gap: 10px;
}

.qem-btn--store {
    background: #fff;
    color: #10202e;
    font-size: 0.92rem;
}

.qem-btn--store:hover,
.qem-btn--store:focus-visible {
    background: var(--qem-apricot);
    color: #21160a;
}

/* ---------- Contacto ---------- */

.qem-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.qem-contact__list li + li {
    border-top: 1px solid var(--qem-border);
}

.qem-contact__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    color: var(--qem-text);
    text-decoration: none;
    min-height: 44px;
}

.qem-contact__list a:hover,
.qem-contact__list a:focus-visible {
    color: var(--qem-apricot);
}

.qem-contact__list .bi {
    color: var(--qem-apricot);
}

/* ---------- Categorías ---------- */

.qem-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qem-chip {
    padding: 6px 14px;
    border: 1px solid var(--qem-border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--qem-muted);
}

/* ---------- Galería ---------- */

.qem-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.qem-gallery__item {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

/* ---------- Escritorio ---------- */

@media (min-width: 992px) {
    .qem-place__grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
    }

    .qem-place__aside {
        position: sticky;
        top: 96px;
    }
}

/* Quien pide menos movimiento no debería recibir un lateral que persigue. */
@media (prefers-reduced-motion: reduce) {
    .qem-place__aside {
        position: static;
    }
}

/* ==================================================================
   Índice del catálogo
   ================================================================== */

.qem-index__head {
    background:
        radial-gradient(1200px 420px at 20% -10%, rgba(255, 184, 111, 0.16), transparent 70%),
        linear-gradient(180deg, #16293a, var(--qem-surface));
    padding: 132px 20px 40px;
    border-bottom: 1px solid var(--qem-border);
}

.qem-index__head-inner,
.qem-index__body {
    max-width: 1180px;
    margin: 0 auto;
}

.qem-index__body {
    padding: 8px 20px 56px;
}

.qem-index__title {
    font-family: 'Alegreya', Georgia, serif;
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    margin: 6px 0 10px;
}

.qem-index__lede {
    color: var(--qem-muted);
    max-width: 62ch;
    line-height: 1.6;
    margin: 0 0 8px;
}

.qem-index__count {
    color: var(--qem-apricot);
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0 0 18px;
}

/* Salto rápido a cada municipio. */
.qem-index__jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qem-index__jump a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--qem-border);
    border-radius: 999px;
    color: var(--qem-text);
    text-decoration: none;
    font-size: 0.88rem;
}

.qem-index__jump a:hover,
.qem-index__jump a:focus-visible {
    border-color: var(--qem-apricot);
    color: var(--qem-apricot);
}

.qem-index__jump span {
    color: var(--qem-muted);
    font-size: 0.78rem;
}

/* El ancla no debe quedar bajo la barra fija al saltar. */
.qem-index__group {
    scroll-margin-top: 96px;
    padding-top: 30px;
}

.qem-index__group-title {
    font-family: 'Alegreya', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.qem-index__group-title span {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--qem-muted);
}

/* ---------- Tarjeta de lugar ---------- */

.qem-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.qem-card-place a {
    display: block;
    height: 100%;
    background: var(--qem-surface-soft);
    border: 1px solid var(--qem-border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--qem-text);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.qem-card-place a:hover,
.qem-card-place a:focus-visible {
    border-color: var(--qem-apricot);
    transform: translateY(-2px);
}

.qem-card-place__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #0d1b26;
}

.qem-card-place__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qem-card-place__media .qem-badge {
    position: absolute;
    left: 10px;
    top: 10px;
}

.qem-card-place__body {
    display: block;
    padding: 12px 14px 15px;
}

.qem-card-place__name {
    display: block;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 5px;
}

.qem-card-place__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--qem-muted);
}

.qem-card-place__rating {
    color: var(--qem-apricot);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .qem-card-place a:hover,
    .qem-card-place a:focus-visible {
        transform: none;
    }
}


/* ---------- Filtros del encabezado ---------- */

.qem-index__filters + .qem-index__filters {
    margin-top: 16px;
}

.qem-index__filters-label {
    margin: 0 0 8px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qem-apricot);
}

/* El filtro activo se marca con relleno, no solo con borde: sobre fondo
   oscuro un borde de acento se pierde de un vistazo. */
.qem-index__jump--cats a.is-active {
    background: var(--qem-apricot);
    border-color: var(--qem-apricot);
    color: #21160a;
    font-weight: 700;
}

.qem-index__jump--cats a.is-active span {
    color: #21160a;
    opacity: 0.65;
}

/* Una combinación que daría cero se apaga en vez de ofrecerse. */
.qem-index__jump a.is-empty {
    opacity: 0.32;
    cursor: not-allowed;
    pointer-events: none;
}

.qem-index__clear {
    margin: 14px 0 0;
}

.qem-index__clear a {
    color: var(--qem-apricot);
    text-decoration: underline;
    font-size: 0.88rem;
}

/* ---------- Reclamo de propiedad ----------
   Discreto a propósito. Va dirigido al dueño, no al visitante que está
   leyendo, así que se distingue del fondo con un filete y nada más: si
   compitiera con la tarjeta de la app le robaría la atención al público
   mayoritario de la página. */

.qem-claim {
    border: 1px solid var(--qem-border);
    border-left: 3px solid var(--qem-apricot);
    border-radius: 12px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
}

.qem-claim__eyebrow {
    margin: 0 0 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qem-apricot);
}

.qem-claim__title {
    font-family: 'Alegreya', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.qem-claim__text {
    color: var(--qem-muted);
    line-height: 1.6;
    margin: 0 0 12px;
    max-width: 62ch;
}

.qem-claim__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--qem-apricot);
    font-weight: 700;
    text-decoration: none;
}

.qem-claim__link:hover,
.qem-claim__link:focus-visible {
    color: var(--qem-apricot);
    text-decoration: underline;
}

.qem-claim__note {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--qem-muted);
    opacity: 0.85;
}