/* ═══════════════════════════════════════════════════
   BLINQ — Anuncios conectados (/anuncios-conectados)
   Estilos propios de la página. Los componentes base (secciones, columnas,
   filas, proceso, FAQ, nota) vienen de ui.css.

   El visual del hero es un OBJETO DE DEMO: una conversación con un asistente
   de IA sobre anuncios y una campaña en borrador que espera aprobación. No
   imita la interfaz ni el logo de Meta. Va en claro y fijo (no cambia con el
   tema), como .gm-map y .mt-panel. Escala con unidades de contenedor (cqw).
   ═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   HERO · escenario
   ───────────────────────────────────── */
.ac { container-type: inline-size; }

.ac-stage {
    position: relative;
    padding: 4cqw 4cqw 30cqw;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--bg-2);
    font-size: clamp(8px, 2.4cqw, 13.5px);
    line-height: 1.35;
}

:where(.ac-stage) p { margin: 0; }

/* La ventana del asistente (objeto de demo: lleva sombra de medio) */
.ac-win {
    width: 80cqw;
    padding-bottom: 3cqw;
    overflow: hidden;
    border-radius: 2cqw;
    background: #FFFFFF;
    color: #16141D;
    box-shadow: 0 0 0 1px rgba(16, 14, 24, 0.08), var(--shadow-media);
    font-family: var(--font-body);
}

.ac-win__bar {
    display: flex;
    align-items: center;
    gap: 1.6cqw;
    padding: 2.2cqw 3cqw;
    border-bottom: 1px solid #ECEBF1;
    font-weight: 600;
}

.ac-dot {
    flex: none;
    width: 1.6cqw;
    height: 1.6cqw;
    border-radius: 50%;
    background: #9D00FF;
}

.ac-tag,
.ac-draft__k span {
    margin-left: auto;
    padding: 0.3cqw 1.1cqw;
    border-radius: 4px;
    background: #F4EEFC;
    color: #7A00C7;
    font: 500 0.74em var(--font-mono);
    letter-spacing: 0.02em;
}

.ac-msg {
    width: fit-content;
    margin: 2.6cqw 3cqw 0;
    padding: 2cqw 2.6cqw;
    border-radius: 2cqw;
}

.ac-msg--me {
    max-width: 70%;
    margin-left: auto;
    border-bottom-right-radius: 0.6cqw;
    background: #9D00FF;
    color: #FFFFFF;
}

.ac-msg--ai {
    display: grid;
    gap: 1.6cqw;
    max-width: 88%;
    border-bottom-left-radius: 0.6cqw;
    background: #F4F3F7;
}

.ac-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2cqw;
    margin: 0;
}

.ac-stats div {
    padding: 1.4cqw 1.8cqw;
    border-radius: 1.2cqw;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #E6E4EC;
}

.ac-stats dt { color: #6B6878; font-size: 0.8em; white-space: nowrap; }
.ac-stats dd { margin: 0.4cqw 0 0; font-size: 1.25em; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tarjeta flotante: campaña en borrador (datos de ejemplo) */
.ac-draft {
    position: absolute;
    right: 4cqw;
    bottom: 4cqw;
    z-index: 2;
    display: grid;
    gap: 1.2cqw;
    width: 48cqw;
    padding: 2.6cqw 2.8cqw 3cqw;
    border-radius: 2cqw;
    background: #FFFFFF;
    color: #16141D;
    box-shadow: 0 0 0 1px rgba(157, 0, 255, 0.35), 0 26px 48px -24px rgba(14, 11, 23, 0.55);
    font-family: var(--font-body);
}

.ac-draft__k {
    display: flex;
    align-items: center;
    gap: 1cqw;
    color: #6B6878;
    font-size: 0.86em;
    font-weight: 500;
}

.ac-draft__k span { background: #FFF3DC; color: #8A5300; }

.ac-draft__name { font-size: 1.08em; font-weight: 600; }

.ac-draft__row {
    display: flex;
    justify-content: space-between;
    gap: 1.6cqw;
    color: #6B6878;
    font-size: 0.9em;
}

.ac-draft__row b { color: #16141D; font-weight: 600; text-align: right; }

.ac-draft__btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4cqw;
    margin-top: 0.8cqw;
}

.ac-draft__btns span {
    padding: 1.3cqw;
    border: 1px solid #DCCBF2;
    border-radius: 1.2cqw;
    color: #7A00C7;
    font-size: 0.9em;
    font-weight: 500;
    text-align: center;
}

.ac-draft__btns .is-main { border-color: #9D00FF; background: #9D00FF; color: #FFFFFF; }

/* Movimiento: la conversación llega en orden y el borrador al final */
@media (prefers-reduced-motion: no-preference) {
    .js .ac-msg--me { animation: ac-in 0.45s ease 0.3s both; }
    .js .ac-msg--ai { animation: ac-in 0.5s ease 0.9s both; }
    .js .ac-draft { animation: ac-in 0.5s ease 1.5s both; }
}

@keyframes ac-in { from { opacity: 0; transform: translateY(8px); } }


/* ─────────────────────────────────────
   01 · Qué incluye: segunda fila de columnas
   ───────────────────────────────────── */
.ac-cols2 { margin-top: clamp(24px, 3vw, 40px); }

/* 04 · La nota sobre la aprobación */
.ac-note { margin: clamp(40px, 4vw, 56px) 0 0; }

/* 06 · Aviso de marcas */
.ac-legal { margin: clamp(32px, 3vw, 48px) 0 0; }

@media (max-width: 599px) {
    .ac-stage { padding: 3.5cqw 3.5cqw 30cqw; font-size: clamp(8px, 2.9cqw, 13px); }
    .ac-win { width: 100%; }
    .ac-draft { right: 3.5cqw; bottom: 3.5cqw; width: 64cqw; }
    .ac-cols2 { margin-top: 0; }
    .ac-cols2 > .col:first-child { border-top: 1px solid var(--line); padding-top: 28px; }
}