/* ============================================================
   LATINBOOK — SISTEMA DE ANUNCIOS (ADS)
   css/ads.css

   Archivo NUEVO Y AISLADO: ninguna otra hoja de estilo (app.css,
   theme.css) referencia ninguna de estas clases todavía, y esta hoja no
   toca ninguna clase existente — cero riesgo para lo que ya funciona.
   Se conecta (se agrega el <link> en app.html) hasta que el sistema de
   anuncios esté listo para integrarse de verdad.

   NOTA DE CONTRASTE: en todo este archivo se usa var(--text-secondary) en
   vez de var(--text-dim) para el texto secundario (precios, ayudas,
   metadatos) — Felix reportó que --text-dim (#606060 en oscuro, #AAB8C2
   en claro — ver theme.css) se ve "muy gris/transparente" a estos tamaños
   de letra chicos. --text-secondary (#B0B0B0 oscuro / #536471 claro) es
   bastante más legible y mantiene la misma jerarquía (más apagado que
   --text-primary, sin perderse). Única excepción: .ads-scope-disabled,
   cuya opacidad baja es a propósito (marca una tarjeta deshabilitada, no
   es un problema de contraste).
   ============================================================ */

/* ---------- Tarjeta de anuncio (feed / carrusel / reels) ---------- */
.ads-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 16px;
}

.ads-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
}

.ads-card-media {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    background: #000;
    display: block;
}

.ads-card-body {
    padding: 14px 16px 16px;
}

.ads-card-headline {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #fff);
}

.ads-card-desc {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.ads-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 24px;
    background: var(--gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
}

/* "Reportar anuncio" ya NO es un botón de texto suelto — ahora vive
   dentro de un menú de "tres puntitos", ARRIBA, encima de la foto, en
   la esquina opuesta a la insignia "PUBLICIDAD" (que vive en top:10px;
   left:10px — ver .ads-card-badge).
   ANTES este menú vivía abajo del todo, dentro de .ads-card-body — pero
   .ads-card tiene "overflow:hidden" (recorta las esquinas redondeadas
   de la foto), y con el botón pegado hasta el final de la tarjeta el
   menú desplegable no tenía NADA de espacio hacia abajo antes de
   toparse con ese recorte: se veía cortado casi por completo, como si
   las opciones estuvieran "en blanco". Puesto aquí arriba, sobra toda
   la foto + el cuerpo de la tarjeta debajo para que el menú se
   despliegue completo, sin que nada lo recorte.
   El botón/menú reusa las clases post-menu-btn/post-menu-wrapper/
   post-menu-dropdown que ya usan los posts (ver app.css) para el mismo
   abrir/cerrar (lo maneja gratis el listener de document que ya
   escucha .lb-menu-btn/.lb-menu-dropdown en posts-cloud.js) — pero acá
   se le da fondo oscuro semitransparente propio (mismo truco que
   .ads-card-badge) porque, a diferencia del menú de un post, este vive
   ENCIMA de una foto de color impredecible: sin ese fondo propio, el
   ícono de "..." podía perderse contra fotos claras. El ITEM de adentro
   usa su propia clase ads-menu-item (no post-menu-item) a propósito,
   para que el despachador de acciones de posts-cloud.js (que solo
   entiende post-menu-item) no intente manejarlo — ver renderAdCard()
   en ads-cloud.js. */
/* Contenedor común para todo lo que va en la esquina de arriba a la
   derecha: la insignia "+N" fotos (si el anuncio tiene varias) y el
   menú de tres puntitos, uno junto al otro por flexbox — así nunca se
   encimen, sin importar si la insignia de fotos está o no (antes cada
   uno tenía su propio top:10px;right:10px por separado, y con fotos
   múltiples quedaban exactamente uno arriba del otro). */
.ads-card-top-right {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Dentro de este grupo, la insignia de fotos ya no se posiciona sola
   (heredaba top:10px;right:10px de más abajo) — ahora es un elemento
   más dentro del flex de arriba. */
.ads-card-top-right .ads-card-gallery-badge {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
}

.ads-card-menu {
    /* .post-menu-wrapper (app.css) ya pone position:relative — no hace
       falta posicionarlo aparte, es .ads-card-top-right quien ya está
       anclado a la esquina. */
    flex-shrink: 0;
}

.ads-card-menu-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}
.ads-card-menu-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* El botón vive en la esquina DERECHA, así que el menú se abre hacia la
   izquierda (right:0, heredado de .post-menu-dropdown) — se deja tal
   cual, es la misma orientación que ya usan los posts. min-width propio
   nada más para que quepa bien "Reportar anuncio". */
.ads-card-menu-dropdown {
    min-width: 190px;
}

.ads-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}
.ads-menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}
.ads-menu-item i {
    width: 16px;
    color: #FF3CAC;
}

/* Anuncio de tipo video (placement "reels"): se comporta como cualquier
   otra tarjeta del carrusel vertical de Reels — el propio contenedor de
   Reels es quien decide el tamaño real; aquí solo se define el look de
   los elementos internos para que combine con el resto. */
.ads-card.ads-card-reels {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
}
.ads-card.ads-card-reels .ads-card-media {
    height: 100%;
    max-height: none;
}
.ads-card.ads-card-reels .ads-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 65%);
}

/* ---------- Carrusel de anuncios (mismo look que "Destacados en Mercado
   Latino", pero con su propia clase — ver nota en ads-cloud.js sobre por
   qué esto vive separado de esa carrusel) ---------- */
.ads-carousel-item {
    min-width: 220px;
    max-width: 220px;
    scroll-snap-align: start;
}

/* Dentro del carrusel (ads-feed-carousel-card, ver posts-cloud.js) la
   tarjeta de anuncio se ve más compacta que en el feed normal: mismo
   ancho que .ads-carousel-item y una imagen más baja (proporcional a los
   130px de alto de los productos de Destacados, en vez de los 420px que
   usa la tarjeta de anuncio completa del feed). */
.ads-feed-carousel-card .ads-card {
    margin: 0;
}
.ads-feed-carousel-card .ads-card-media {
    height: 220px;
    max-height: 220px;
}

/* ============================================================
   FORMULARIO "PUBLICAR ANUNCIO" (ads-publish.html)
   ============================================================ */
.ads-publish-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

.ads-publish-header {
    text-align: center;
    margin-bottom: 24px;
}

.ads-publish-header h1 {
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--text-primary, #fff);
}

.ads-publish-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.ads-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
}

/* Formulario de publicar en dos columnas: la barra lateral (tipo de
   anunciante + espacio publicitario) queda fija a la izquierda, y todo lo
   que sí hay que ir llenando (zona, imagen, texto, botón) tiene toda la
   columna principal para respirar, en vez de competir por el mismo ancho
   angosto que antes. */
.ads-publish-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 20px;
    align-items: start;
}

.ads-publish-sidebar,
.ads-publish-main {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}

.ads-publish-sidebar {
    position: sticky;
    top: 20px;
}

/* En pantallas angostas (el celular es el uso principal de esta app) la
   barra lateral se acomoda arriba del contenido en vez de al lado — sigue
   siendo la misma lista de botones, solo que en una sola columna. */
@media (max-width: 720px) {
    .ads-publish-layout {
        grid-template-columns: 1fr;
    }
    .ads-publish-sidebar {
        position: static;
    }
}

.ads-side-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Selector de "¿Qué vas a anunciar?" — 4 botones (App, Página web,
   Negocio, Empresa) con etiquetas cortas de una sola palabra/frase, así
   que se acomodan mejor en 2x2 que en una lista vertical de 4 filas. */
.ads-side-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ads-side-options-grid .ads-side-option {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 12px 8px;
}

.ads-side-options-grid .ads-side-option-text {
    align-items: center;
}

@media (max-width: 360px) {
    .ads-side-options-grid {
        grid-template-columns: 1fr;
    }
}

.ads-side-option {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease;
    background: rgba(255, 255, 255, 0.03);
}

.ads-side-option:hover {
    border-color: var(--primary);
}

.ads-side-option.selected {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
}

.ads-side-option i {
    font-size: 18px;
    color: var(--primary);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.ads-side-option-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ads-side-option-text span {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #fff);
}

.ads-side-option-text small {
    font-size: 11px;
    color: var(--text-secondary);
}

.ads-form-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0 0 6px;
}

.ads-form-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

.ads-form-row {
    margin-bottom: 18px;
}

.ads-form-row:last-child {
    margin-bottom: 0;
}

.ads-form-input,
.ads-form-textarea,
.ads-form-select {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-family: inherit;
}

.ads-form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Tarjetas seleccionables (tipo de anunciante, espacio publicitario) —
   en vez de un <select> plano, para que se note bien el precio de cada
   espacio, que cambia según lo que se elige. */
.ads-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.ads-option-card {
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.1s ease;
    background: rgba(255, 255, 255, 0.03);
}

.ads-option-card:hover {
    transform: translateY(-1px);
}

.ads-option-card.selected {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
}

.ads-option-card i {
    font-size: 20px;
    margin-bottom: 8px;
    display: block;
    color: var(--primary);
}

.ads-option-card .ads-option-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #fff);
}

.ads-option-card .ads-option-price {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.ads-cta-fields {
    margin-top: 12px;
}

/* ---------- Zona del anuncio (automática o buscando otra ciudad) ---------- */
.ads-location-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ads-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 16px;
    color: var(--text-primary, #fff);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.ads-location-btn:hover {
    border-color: var(--primary);
}

.ads-location-search {
    margin-bottom: 10px;
}

.ads-location-search-row {
    display: flex;
    gap: 8px;
}

.ads-location-search-row .ads-form-input {
    flex: 1;
}

.ads-location-search-btn {
    background: var(--gradient);
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}

.ads-location-results {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ads-location-result {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text-primary, #fff);
    cursor: pointer;
}

.ads-location-result:hover {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
}

.ads-location-hint {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 4px 0;
}

.ads-location-status {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

/* Tarjeta de ciudad/estado/país deshabilitada hasta que se resuelva una
   ubicación (automática o buscada) — se ve apagada y no reacciona al clic,
   para que quede claro que primero hay que elegir un lugar. */
.ads-scope-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ads-media-preview {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 12px;
    background: #000;
    margin-top: 10px;
    display: none;
}

.ads-media-preview.visible {
    display: block;
}

/* Insignia "+N" sobre la miniatura del anuncio cuando trae más de 1 foto
   (ver renderAdCard en ads-cloud.js) — la tarjeta solo muestra la primera,
   igual que un post con varias fotos; esto avisa que hay más para ver
   tocando la imagen (abre el mismo álbum a pantalla completa que ya usan
   los posts). */
.ads-card-gallery-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ---------- Selector de contenido (fotos o video) del formulario ---------- */
.ads-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.ads-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.ads-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ads-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ads-photo-add {
    aspect-ratio: 1;
    border-radius: 10px;
    border: 2px dashed var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s ease;
}

.ads-photo-add:hover {
    border-color: var(--primary);
}

.ads-photo-add i {
    font-size: 18px;
    color: var(--primary);
}

/* Aviso de que el video elegido dura más de lo permitido — mismo tono que
   el resto de la app usa para errores (--danger), en vez del gris/apagado
   normal de .ads-form-hint. */
.ads-form-hint-error {
    color: var(--danger, #FF3B30);
    font-weight: 600;
}

/* ---------- Carrusel de productos (formato "products") ---------- */
/* Los ítems "external" y el botón final "Visitar tienda" del carrusel de
   productos son <a> reales (para abrir el link sin necesitar JavaScript —
   ver renderAdProductsTrackItems en ads-cloud.js), no <div> como el resto
   de .mk-carousel-item en app.css — sin esto se verían con el azul y
   subrayado por defecto que el navegador le pone a cualquier enlace. */
a.mk-carousel-item,
a.mk-carousel-item:visited,
a.mk-carousel-cta,
a.mk-carousel-cta:visited {
    text-decoration: none;
    color: inherit;
}

/* Origen "Mercado Latino": checklist de los productos propios, mismo
   tamaño/proporción que una miniatura de foto (.ads-photo-grid de arriba)
   pero con nombre/precio debajo y una marca de "elegido" encima, en vez de
   un botón de quitar aparte. */
.ads-product-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.ads-product-pick-item {
    position: relative;
    border-radius: 10px;
    border: 2px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s ease;
}

.ads-product-pick-item:hover {
    border-color: var(--primary);
}

.ads-product-pick-item.selected {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
}

.ads-product-pick-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.ads-product-pick-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 6px 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ads-product-pick-price {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin: 2px 8px 8px;
}

.ads-product-pick-check {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ads-product-pick-item.selected .ads-product-pick-check {
    opacity: 1;
    color: var(--primary);
}

/* Origen "Tienda externa": una fila por producto, foto + campos + botón
   de quitar — mismo estilo de tarjeta que .ads-option-card, pero en fila
   horizontal en vez de tarjeta cuadrada (aquí hay 3 campos de texto que
   llenar, no solo un ícono/título). */
.ads-product-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.ads-product-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.ads-product-photo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.ads-product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ads-product-photo-add {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s ease;
}

.ads-product-photo:hover .ads-product-photo-add {
    border-color: var(--primary);
}

.ads-product-photo-add i {
    font-size: 16px;
    color: var(--primary);
}

.ads-product-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ads-product-fields .ads-form-input {
    padding: 8px 10px;
    font-size: 13px;
}

.ads-product-remove-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ads-submit-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 26px;
    background: var(--gradient);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.ads-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   CENTRO DE ANUNCIOS (section-ads) — en construcción.
   Mientras ADS_BUILDING_IN_PROGRESS esté en true (ver app.html), esto es
   lo que se ve dentro del botón "Latinbook Ads" en vez de "Muy pronto".
   ============================================================ */
.ads-hub {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 60px;
}

.ads-hub-header {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 20px;
}

/* ---------- Banner "hero" con el gradiente de marca de Latinbook ----------
   Mismo --gradient de siempre (naranja → rosa → morado), no un color nuevo.
   El fondo oscuro + la curva es una forma con puro CSS (sin imagen ni video
   real que subir) para darle la misma energía de las capturas que mandó
   Felix, pero con el diseño de Latinbook. El texto va en blanco a propósito:
   este banner es una pieza de marca fija, se ve igual en modo claro y
   oscuro (mismo criterio que el panel del login con el globo 3D). */
.ads-hub-hero {
    position: relative;
    overflow: hidden;
    /* Mismo radio que .ads-hub-header (16px) en las esquinas de arriba,
       para que el banner encaje exacto con la tarjeta cuando se estira
       hasta sus bordes con el margen negativo de abajo. */
    border-radius: 16px 16px 20px 20px;
    margin: -32px -20px 26px;
    padding: 64px 24px 44px;
    min-height: 460px;
    background: #170B2E;
    isolation: isolate;
}

.ads-hub-hero::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 165%;
    left: -40%;
    top: -60%;
    background: var(--gradient);
    border-radius: 42%;
    transform: rotate(-16deg);
    z-index: 0;
}

.ads-hub-hero-content {
    position: relative;
    z-index: 1;
}

/* Insignia con el logo real de Latinbook (mismo archivo que usa el resto
   de la app: images/logo-latinbook.png) en vez de un ícono genérico. */
.ads-hub-hero-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.ads-hub-hero-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ads-hub-hero-content h2 {
    color: #fff;
    font-size: 30px;
    margin: 0 0 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.ads-hub-hero-tag {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 32px;
}

/* Íconos flotando con movimiento propio (sube/baja + gira suavemente en
   bucle) — mismo espíritu que las burbujas de las capturas de referencia,
   con los colores propios de Latinbook, repartidos por todo el banner.
   Cada uno tiene su propia duración/retraso para que no se muevan todos
   sincronizados (se ve más natural). */
@keyframes lbAdsFloat {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}

.ads-hub-hero-float {
    position: absolute;
    z-index: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    animation: lbAdsFloat 4s ease-in-out infinite;
}

/* Posiciones en % (no px) para que se repartan bien sin importar la
   altura del banner — si el banner crece o se achica, los íconos se
   reacomodan proporcionalmente en vez de quedar amontonados arriba. */
.ads-hub-hero-float.f1 { top: 6%;  left: 8%;   --r: -8deg;  animation-duration: 4.2s; animation-delay: 0s;   }
.ads-hub-hero-float.f2 { top: 16%; right: 7%;  --r: 10deg;  animation-duration: 3.6s; animation-delay: .4s;  width: 32px; height: 32px; font-size: 13px; }
.ads-hub-hero-float.f3 { bottom: 30%; left: 5%;   --r: 6deg;   animation-duration: 4.8s; animation-delay: .8s;  }
.ads-hub-hero-float.f4 { top: 4%;  right: 26%; --r: -6deg;  animation-duration: 3.9s; animation-delay: 1.2s; width: 28px; height: 28px; font-size: 12px; }
.ads-hub-hero-float.f5 { bottom: 12%; right: 5%;  --r: -10deg; animation-duration: 4.4s; animation-delay: .2s;  }
.ads-hub-hero-float.f6 { top: 26%; left: 3%;   --r: 8deg;   animation-duration: 5.2s; animation-delay: 1.6s; width: 30px; height: 30px; font-size: 13px; }
.ads-hub-hero-float.f7 { bottom: 38%; right: 20%; --r: 12deg;  animation-duration: 3.7s; animation-delay: 1s;   width: 26px; height: 26px; font-size: 11px; }
.ads-hub-hero-float.f8 { top: 34%; right: 3%;  --r: -12deg; animation-duration: 4.6s; animation-delay: .6s;  width: 26px; height: 26px; font-size: 11px; }

/* En pantallas angostas se quitan solo los más pequeños/menos importantes
   (f6/f7/f8) para no saturar — el resto se queda, ya no se ocultan todos. */
@media (max-width: 480px) {
    .ads-hub-hero-float.f6,
    .ads-hub-hero-float.f7,
    .ads-hub-hero-float.f8 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ads-hub-hero-float,
    .ads-mock-card,
    .ads-hub-cta { animation: none; }
}

.ads-hub-header h2 {
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--text-primary, #fff);
}

.ads-hub-note {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #FFC107;
    background: rgba(255, 193, 7, 0.12);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 14px;
}

/* Texto de venta/explicación de la sección — a propósito con color SÓLIDO
   y legible (nada de tonos pálidos/amarillosos ni opacidades bajas):
   Felix pidió específicamente que esta parte no se vea "amarillosa
   transparente". El único acento amarillo de la tarjeta es la insignia
   pequeña .ads-hub-note de arriba, nada más. */
.ads-hub-lead {
    color: var(--text-primary, #fff);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    max-width: 480px;
    margin: 0 auto 22px;
}

.ads-hub-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    text-align: left;
    margin-bottom: 26px;
}

.ads-hub-feature {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}

.ads-hub-feature i {
    color: var(--primary);
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.ads-hub-feature strong {
    display: block;
    color: var(--text-primary, #fff);
    font-size: 14px;
    margin-bottom: 4px;
}

.ads-hub-feature p {
    color: var(--text-primary, #fff);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.ads-hub-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 12px 26px;
    text-decoration: none;
    animation: adsCtaGlow 2.4s ease-in-out infinite;
}

@keyframes adsCtaGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(255, 60, 172, 0.45); }
    50%      { box-shadow: 0 4px 24px rgba(255, 60, 172, 0.85); }
}

/* ---------- Vista previa visual (mockup con CSS, sin imágenes/video
   reales que haya que subir y mantener aparte) de los 3 espacios donde
   puede aparecer un anuncio ---------- */
.ads-hub-visual {
    position: relative; /* por encima del ::before del hero (ver .ads-hub-hero) */
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.ads-mock-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ads-mock-card {
    position: relative;
    width: 118px;
    height: 158px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.25)), 0 0 10px rgba(255, 60, 172, 0.35);
    animation: adsMockGlow 2.8s ease-in-out infinite;
}

@keyframes adsMockGlow {
    0%, 100% { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.25)), 0 0 10px rgba(255, 60, 172, 0.35); }
    50%      { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.25)), 0 0 20px rgba(255, 60, 172, 0.7); }
}

.ads-mock-card-sm {
    height: 132px;
    animation-delay: 0.5s;
}

.ads-mock-card-tall {
    height: 184px;
    animation-delay: 1s;
}

.ads-mock-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 20px;
}

.ads-mock-media {
    flex: 1;
    background: var(--gradient);
}

.ads-mock-card-tall .ads-mock-media-tall {
    flex: 1;
}

.ads-mock-line {
    height: 6px;
    margin: 6px 8px 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18);
}

.ads-mock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 8px 10px 10px;
    padding: 6px 0;
    border-radius: 20px;
    background: var(--gradient);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

/* Etiqueta (FEED / CARRUSEL / REELS) en dorado "premium" con resplandor,
   igual en espíritu al botón de Latinbook Premium — antes usaba
   var(--text-dim), que sobre el fondo morado del hero se veía apagada. */
.ads-mock-label {
    font-size: 12.5px;
    font-weight: 800;
    color: #FFC94D;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.85), 0 0 3px rgba(255, 152, 0, 0.9);
}

.ads-hub-mine h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 24px 0 10px;
}

.ads-my-ads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ads-my-ad-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
}

.ads-my-ad-headline {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary, #fff);
    margin-bottom: 4px;
}

.ads-my-ad-meta {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.ads-my-ad-zone {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.ads-my-ad-zone i {
    color: var(--primary);
    margin-right: 4px;
}

.ads-my-ads-empty,
.ads-my-ads-loading,
.ads-my-ads-error {
    color: var(--text-secondary);
    font-size: 13.5px;
    margin: 0;
}