/* ==========================================================================
   Anuncios de Mejor.es (inc/ads/anuncios-mejor.php)
   Tres formatos: tarjeta (en la rejilla, como un resultado), banda (hueco ancho, se adapta a su ancho con una
   consulta de contenedor) y vertical (300×600 de la ficha). Todo con respaldo en las variables: la vista previa del
   escritorio no carga design-tokens.css. Colores de la paleta: azul para la acción, grises para el texto, nunca verde.
   Sin capturas (decisión del titular, 29-10-2026): en una rejilla de fichas, la captura de otra ficha parecía un resultado
   más y se llevaba la mirada. La pregunta, en blanco sobre un bloque azul, es lo que se ve primero.
   ========================================================================== */

a.mjr-am,
a.mjr-am:hover,
a.mjr-am:visited {
    color: var(--color-text, #212121);
    text-decoration: none;
}

a.mjr-am {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    font-family: var(--font-primary, "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif);
    text-align: left;
    cursor: pointer;
}

a.mjr-am:focus-visible {
    outline: 2px solid var(--color-blue, #2634ED);
    outline-offset: 2px;
}

/* La misma etiqueta que «Publicidad» de los resultados (design-tokens.css, .perfil-item .patrocinado). */
.mjr-am-etiqueta {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text, #212121);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
    font-size: var(--text-11, 11px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.mjr-am-cabeza {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
    min-height: 170px;
    box-sizing: border-box;
    padding: var(--space-10, 40px) var(--space-4, 16px) var(--space-4, 16px);
    background: var(--color-blue, #2634ED);
    color: #fff;
    transition: background-color 0.2s ease;
}

a.mjr-am:hover .mjr-am-cabeza {
    background: var(--color-blue-dark, #2634ED);
}

.mjr-am-emoji {
    font-size: var(--text-32, 32px);
    line-height: 1;
}

.mjr-am-cuerpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
}

.mjr-am-antes {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    line-height: 1.4;
}

.mjr-am-titulo {
    color: #fff;
    font-size: var(--text-xl, 20px);
    font-weight: 700;
    line-height: 1.25;
}

.mjr-am-texto {
    color: var(--color-gray-dark, #5a6c7d);
    font-size: var(--text-sm, 14px);
    font-weight: 400;
    line-height: 1.5;
}

.mjr-am-texto strong {
    color: var(--color-text, #212121);
    font-weight: 600;
}

/* Una sola acción, azul, abajo del todo. Es un <span> (todo el anuncio es el
   enlace), así que base.css no le pone su estilo de <button>. */
.mjr-am-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin-top: auto;
    min-height: 40px;
    padding: 0 var(--space-4, 16px);
    border-radius: var(--radius-full, 999px);
    background: var(--color-blue, #2634ED);
    color: #fff;
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mjr-am-boton::after {
    content: "→";
    margin-left: var(--space-2, 8px);
    transition: transform 0.2s ease;
}

a.mjr-am:hover .mjr-am-boton {
    background: var(--color-blue-dark, #2634ED);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08));
}

a.mjr-am:hover .mjr-am-boton::after {
    transform: translateX(3px);
}

/* Contexto: lo que solo sale si se conoce (lo pone el servidor o el script del pie). */
.mjr-am [data-mjr-am-si] { display: none; }
.mjr-am [data-mjr-am-si].mjr-am-on { display: inline; }
.mjr-am [data-mjr-am-no].mjr-am-off { display: none; }

@media (prefers-reduced-motion: reduce) {
    .mjr-am-cabeza,
    .mjr-am-boton,
    .mjr-am-boton::after { transition: none; }
    a.mjr-am:hover .mjr-am-boton::after { transform: none; }
}

/* --- Tarjeta: ocupa la tarjeta del resultado (archive.css, .perfil-item) ------------------------------------ */
.perfil-item.perfil-item-ad--mejor {
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.perfil-item.perfil-item-ad--mejor {
    display: flex;
    flex-direction: column;
}

.perfil-item-ad--mejor > a.mjr-am {
    flex: 1 1 auto;
    border-radius: inherit;
}

/* El bloque azul llena lo que el texto deja libre: la tarjeta mide lo que un resultado con foto, sin un hueco blanco abajo. */
.perfil-item-ad--mejor .mjr-am-cabeza {
    flex: 1 1 auto;
}

.perfil-item-ad--mejor .mjr-am-cuerpo {
    flex: 0 0 auto;
}

/* En el móvil la rejilla va a dos columnas (unos 185 px): más compacta, para no alargar su fila. */
.perfil-item.perfil-item-ad--mejor {
    container-type: inline-size;
}

@container (max-width: 240px) {
    .perfil-item-ad--mejor .mjr-am-cabeza { min-height: 130px; gap: var(--space-1, 4px); padding: var(--space-8, 32px) var(--space-3, 12px) var(--space-3, 12px); }
    .perfil-item-ad--mejor .mjr-am-emoji { font-size: var(--text-2xl, 24px); }
    .perfil-item-ad--mejor .mjr-am-antes { font-size: var(--text-11, 11px); }
    .perfil-item-ad--mejor .mjr-am-cuerpo { gap: var(--space-2, 8px); padding: var(--space-3, 12px); }
    .perfil-item-ad--mejor .mjr-am-titulo { font-size: var(--text-base, 16px); }
    .perfil-item-ad--mejor .mjr-am-texto { font-size: var(--text-13, 13px); line-height: 1.45; }
    .perfil-item-ad--mejor .mjr-am-boton { min-height: 36px; padding: 4px 8px; font-size: var(--text-13, 13px); }
    .perfil-item-ad--mejor .mjr-am-boton::after { display: none; }
    .perfil-item-ad--mejor .mjr-am-etiqueta { top: 8px; left: 8px; padding: 0 8px; font-size: var(--text-10, 10px); }
}

/* --- Banda: hueco ancho (debajo del mapa). En estrecho se apila como la tarjeta. ------------------------------ */
[data-ad-space] > a.mjr-am--banda,
a.mjr-am--banda {
    container-type: inline-size;
    max-width: 970px;
    margin: var(--space-5, 20px) auto;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-lg, 12px);
}

@supports (container-type: inline-size) {
    a.mjr-am--banda {
        display: block;
    }
    a.mjr-am--banda .mjr-am-cabeza,
    a.mjr-am--banda .mjr-am-cuerpo {
        box-sizing: border-box;
    }
    @container (min-width: 560px) {
        a.mjr-am--banda .mjr-am-cabeza {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 45%;
            min-height: 0;
            justify-content: center;
            padding: var(--space-10, 40px) var(--space-6, 24px) var(--space-6, 24px);
        }
        a.mjr-am--banda .mjr-am-cuerpo {
            min-height: 200px;
            margin-left: 45%;
            padding: var(--space-6, 24px);
            justify-content: center;
        }
        a.mjr-am--banda .mjr-am-titulo {
            font-size: var(--text-2xl, 24px);
        }
        a.mjr-am--banda .mjr-am-boton {
            align-self: flex-start;
            margin-top: var(--space-2, 8px);
        }
    }
}

/* --- Vertical: 300×600 de la ficha. El bloque azul llena lo que deja el texto, con la pregunta en grande. ------- */
[data-ad-space] > a.mjr-am--vertical,
a.mjr-am--vertical {
    max-width: 300px;
    height: 600px;
    margin: var(--space-5, 20px) auto;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-lg, 12px);
}

a.mjr-am--vertical .mjr-am-cabeza {
    flex: 1 1 auto;
    justify-content: center;
    gap: var(--space-3, 12px);
    padding: var(--space-12, 48px) var(--space-6, 24px) var(--space-6, 24px);
}

a.mjr-am--vertical .mjr-am-emoji {
    font-size: var(--text-6xl, 60px);
}

a.mjr-am--vertical .mjr-am-titulo {
    font-size: var(--text-28, 28px);
}

a.mjr-am--vertical .mjr-am-cuerpo {
    padding: var(--space-5, 20px);
}

a.mjr-am--vertical .mjr-am-cuerpo {
    flex: 0 0 auto;
}

/* Los laterales fijos de la ficha (single-perfil-main.css) ya miden 300×600: sin margen. */
.perfil-sidebar-left a.mjr-am--vertical,
.perfil-sidebar-right a.mjr-am--vertical {
    margin: 0;
}

/* En el móvil la ficha va a una columna: el 300×600 dejaba un bloque azul de 600 px casi vacío, más estrecho que el
   resto de la ficha, y su botón caía bajo la barra fija de abajo (Contacto, Enviar, Cómo llegar). Aquí ocupa el
   ancho y solo el alto que pide el texto (petición del titular, 29-10-2026). */
@media (max-width: 768px) {
    [data-ad-space] > a.mjr-am--vertical,
    a.mjr-am--vertical {
        max-width: none;
        width: auto;
        height: auto;
        margin: var(--space-4, 16px) 0;
    }
    a.mjr-am--vertical .mjr-am-cabeza {
        flex: 0 0 auto;
        min-height: 0;
        gap: var(--space-2, 8px);
        padding: var(--space-10, 40px) var(--space-4, 16px) var(--space-4, 16px);
    }
    a.mjr-am--vertical .mjr-am-emoji {
        font-size: var(--text-4xl, 36px);
    }
    a.mjr-am--vertical .mjr-am-titulo {
        font-size: var(--text-22, 22px);
    }
    a.mjr-am--vertical .mjr-am-cuerpo {
        padding: var(--space-4, 16px);
    }
    .perfil-sidebar-left a.mjr-am--vertical,
    .perfil-sidebar-right a.mjr-am--vertical {
        margin: var(--space-4, 16px) 0;
    }
}

/* Con el mapa plegado (quien no ha dado su ubicación, también en el ordenador) y siempre en el móvil, la banda «bajo el
   mapa» era lo primero tras el título: un anuncio antes que ningún negocio. Ahí no sale; la rejilla ya trae los de Mejor
   entre los resultados (petición del titular, 29-10-2026). Con el mapa abierto en el ordenador va a su lado. */
.sidemap.mapa-plegado [data-ad-space^="archive-map"] > a.mjr-am--banda {
    display: none;
}
@media (max-width: 768px) {
    [data-ad-space^="archive-map"] > a.mjr-am--banda {
        display: none;
    }
}