/**
 * Profic SEO en IA — Figma 38:676 / 38:678 / 38:677 (1280 · 800 · 375)
 * Tipografía responsive: pastilla 32/38.4 · desc 17→15→14
 */

.elementor-widget-profic_seo_ia,
.elementor-widget-profic_seo_ia > .elementor-widget-container {
    text-align: center;
    overflow: visible;
}

.profic-seo-ia-wrapper {
    position: relative;
    width: 100%;
    background: transparent !important;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    /* Título Figma 130:4738 aporta pt 120; no duplicar padding del wrapper */
    padding: 0;
    box-sizing: border-box;
}

/* Artboard 1280 anclado al centro — mismos x que Figma Desktop */
.profic-seo-ia-backgrounds {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1280px;
    height: 100%;
    margin-left: -640px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* FONDO Estrella 1:784 — x=359 y=115.5 w=563 h=609 */
.profic-seo-ia-bg-star-wrap {
    position: absolute;
    left: 359px;
    top: 115.5px;
    width: 563px;
    height: 609px;
    opacity: 0.77;
    pointer-events: none;
}

/* Star 2 1:785 — x=-258 y=-217 w=1080 h=1135 relativo al wrap */
.profic-seo-ia-bg-star {
    position: absolute;
    left: -258px;
    top: -217px;
    width: 1080px;
    height: 1135px;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: normal;
    transform: none;
}

.profic-seo-ia-bg-star img {
    width: 100%;
    height: 100%;
    display: block;
    max-width: none;
}

@media (max-width: 1279px) {
    .profic-seo-ia-backgrounds {
        left: 0;
        margin-left: 0;
        width: 100%;
    }
    .profic-seo-ia-bg-star-wrap {
        left: 50%;
        margin-left: -281.5px;
    }
}

/* Título Figma 38:680 — pt efectivo 120 hasta la pastilla (33 + star 32 + gap 55) */
.profic-seo-ia-header {
    position: relative;
    z-index: 4;
    text-align: center;
    width: 100%;
    max-width: 1280px;
    min-height: 307px;
    height: auto;
    padding: 110px 120px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 47px;
    margin: 0 auto;
    box-sizing: border-box;
    flex: none;
    align-self: center;
}

/* Estrella + pastilla en columna — gap = distancia glyph→title en Figma (~55px) */
.profic-seo-ia-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 54.95px;
    flex: none;
    position: relative;
}

/*
 * Destello Figma Star 1 2030:3525 — 30×32
 * Motion Sites: speed 6000ms, clockwise, trigger scroll (.in-view)
 */
.profic-seo-ia-decor-star {
    position: relative;
    left: auto;
    top: auto;
    width: 30px;
    height: 32px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 5;
    flex: none;
}

.profic-seo-ia-decor-star img {
    width: 30px;
    height: 32px;
    max-width: none;
    display: block;
    flex: none;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* Figma Sites Estrella — rotate clockwise 6000ms on scroll */
@keyframes proficSeoIaSparkleSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.profic-seo-ia-wrapper.in-view .profic-seo-ia-decor-star img,
.elementor-editor-active .profic-seo-ia-decor-star img {
    animation: proficSeoIaSparkleSpin 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .profic-seo-ia-wrapper.in-view .profic-seo-ia-decor-star img,
    .elementor-editor-active .profic-seo-ia-decor-star img {
        animation: none;
    }
}

/* Frame 65 — pastilla 206×64 */
.profic-seo-ia-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 30px;
    gap: 12px;
    width: 206px;
    height: 64px;
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 70px;
    flex: none;
    overflow: hidden;
}

/* Frame 64 — ventana 146×44 */
.profic-text-rotator {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 1px 0;
    width: 146px;
    height: 44px;
    overflow: hidden;
    position: relative;
    flex: none;
}

.profic-rotator-track {
    position: relative;
    width: 146px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.profic-rotator-item {
    width: 146px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Amsi Pro", sans-serif;
    font-weight: 300;
    /* Figma Frame 64 — SEO/GEO/AI Search: 32 / 38.4 */
    font-size: 32px;
    line-height: 38.4px;
    color: #ffffff;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    flex: none;
    align-self: stretch;
}

.profic-seo-ia-title-end {
    display: none;
}

/* Frame 6 — subtítulo desktop 622×52 (17 / 25.5 / LS 0.01em) */
.profic-seo-ia-desc {
    font-family: "Amsi Pro", sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: #ffffff;
    line-height: 25.5px;
    letter-spacing: 0.01em;
    max-width: 622px;
    width: 622px;
    height: 52px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;
}

/* Primer Pantallazo 1:794 — 1280×553, gap 20 lo da el wrapper */
.profic-seo-ia-stage {
    position: relative;
    width: 1280px;
    max-width: 100%;
    height: 553px;
    margin: 0;
    z-index: 3;
    flex: none;
}

/* Diálogos Flotantes Base */
.profic-dialogue-card {
    position: absolute;
    width: 452px;
    height: 113px; /* Altura predeterminada de Figma para burbujas secundarias */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.2px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    /* Lógicas de transición fluidas */
    transition: left 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                top 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                right 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                bottom 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: left, top, right, bottom, opacity, filter, transform;
}

/* Levitación: solo con .in-view (IntersectionObserver al llegar con scroll) */
.profic-seo-ia-wrapper.in-view .profic-dialogue-card.float-1 { animation: proficFloat1 8s ease-in-out infinite; }
.profic-seo-ia-wrapper.in-view .profic-dialogue-card.float-2 { animation: proficFloat2 9s ease-in-out infinite; }
.profic-seo-ia-wrapper.in-view .profic-dialogue-card.float-3 { animation: proficFloat3 7.5s ease-in-out infinite; }
.profic-seo-ia-wrapper.in-view .profic-dialogue-card.float-4 { animation: proficFloat4 9.5s ease-in-out infinite; }
.profic-seo-ia-wrapper.in-view .profic-dialogue-card.float-5 { animation: proficFloat5 8.5s ease-in-out infinite; }
.profic-seo-ia-wrapper.in-view .profic-dialogue-card.float-6 { animation: proficFloat6 10s ease-in-out infinite; }

/* Editor Elementor: preview sin esperar scroll */
.elementor-editor-active .profic-seo-ia-wrapper .profic-dialogue-card.float-1 { animation: proficFloat1 8s ease-in-out infinite; }
.elementor-editor-active .profic-seo-ia-wrapper .profic-dialogue-card.float-2 { animation: proficFloat2 9s ease-in-out infinite; }
.elementor-editor-active .profic-seo-ia-wrapper .profic-dialogue-card.float-3 { animation: proficFloat3 7.5s ease-in-out infinite; }
.elementor-editor-active .profic-seo-ia-wrapper .profic-dialogue-card.float-4 { animation: proficFloat4 9.5s ease-in-out infinite; }
.elementor-editor-active .profic-seo-ia-wrapper .profic-dialogue-card.float-5 { animation: proficFloat5 8.5s ease-in-out infinite; }
.elementor-editor-active .profic-seo-ia-wrapper .profic-dialogue-card.float-6 { animation: proficFloat6 10s ease-in-out infinite; }

/* Contenido Interno */
.profic-dialogue-text {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    flex-grow: 1; /* Rellena el espacio disponible de la burbuja */
    padding: 16px 20px 8px; /* Padding proporcional al de Figma */
    display: flex;
    align-items: center;
}

.profic-dialogue-text p {
    font-family: "Amsi Pro", sans-serif;
    font-size: 14px;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    width: 100%;
    word-break: break-word;
    text-align: left;
    transition: opacity 0.3s ease, color 0.3s ease;
}

/* Typewriter — Figma Sites Code component Typewriter (speed 50, textCursor) */
.profic-typewriter-cursor {
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-left: 2px;
    background-color: currentColor;
    vertical-align: -0.08em;
    animation: profic-typewriter-caret 0.8s steps(1, end) infinite;
}

@keyframes profic-typewriter-caret {
    50% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profic-typewriter-cursor {
        display: none;
    }
}

/* Botones */
.profic-dialogue-buttons {
    display: flex;
    gap: 131px;
    height: 45px;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.profic-dialogue-btn-left,
.profic-dialogue-btn-right {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    box-sizing: border-box;
}

.profic-dialogue-btn-left {
    left: 0;
}

.profic-dialogue-btn-right {
    right: 0;
}

.profic-dialogue-btn-left svg,
.profic-dialogue-btn-right svg {
    width: 40px;
    height: 40px;
    display: block;
}

/* Toggle del botón de envío activo / inactivo de Figma */
.profic-dialogue-btn-right-inactive .profic-btn-bg-inactive {
    display: block !important;
}
.profic-dialogue-btn-right-inactive .profic-btn-bg-active {
    display: none !important;
}

.profic-dialogue-btn-right-active .profic-btn-bg-inactive {
    display: none !important;
}
.profic-dialogue-btn-right-active .profic-btn-bg-active {
    display: block !important;
}

/* POSICIONAMIENTOS EXACTOS POR VARIANTES DEL FIGMA */

/* 1. GLOBO PRINCIPAL (CONVER 0) */
/* Siempre se mantiene centrado */
.profic-dialogue-card[data-idx="0"] {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: blur(0);
    z-index: 20;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    height: 131px; /* Altura de Figma para la burbuja central */
}
/* Cambios de altura según Variante (h-66 en variantes de transición) */
.profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="0"] .profic-dialogue-text,
.profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="0"] .profic-dialogue-text,
.profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="0"] .profic-dialogue-text {
    height: 66px;
}

/* 2. GLOBO 2 (data-idx="1") */
.profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="1"],
.profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="1"],
.profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="1"] {
    opacity: 0.4;
    right: 12px;
    top: 321px;
    filter: blur(1.5px);
    transform: scale(0.9);
}
.profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="1"],
.profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="1"],
.profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="1"] {
    opacity: 0;
    right: 363px;
    top: 169px;
    filter: blur(1.5px);
    transform: scale(0.85);
}

/* 3. GLOBO 3 (data-idx="2") */
.profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="2"],
.profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="2"],
.profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="2"] {
    opacity: 0.4;
    left: 20px;
    top: 272px;
    filter: blur(1.5px);
    transform: scale(0.9);
}
.profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="2"],
.profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="2"],
.profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="2"] {
    opacity: 0;
    left: 455px;
    top: 179px;
    filter: blur(1.5px);
    transform: scale(0.85);
}

/* 4. GLOBO 4 (data-idx="3") */
.profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="3"],
.profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="3"],
.profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="3"] {
    opacity: 0.4;
    left: 317px;
    bottom: -7px;
    filter: blur(1.5px);
    transform: scale(0.9);
}
.profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="3"],
.profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="3"],
.profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="3"] {
    opacity: 0;
    left: 445px;
    bottom: 233px;
    filter: blur(1.5px);
    transform: scale(0.85);
}

/* 5. GLOBO 5 (data-idx="4") */
.profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="4"],
.profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="4"],
.profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="4"] {
    opacity: 0.4;
    left: 151px;
    top: 46px;
    filter: blur(1.5px);
    transform: scale(0.9);
}
.profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="4"],
.profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="4"],
.profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="4"] {
    opacity: 0;
    left: 435px;
    top: 199px;
    filter: blur(1.5px);
    transform: scale(0.85);
}

/* 6. GLOBO 6 (data-idx="5") */
.profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="5"],
.profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="5"],
.profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="5"] {
    opacity: 0.4;
    right: 117px;
    top: 110px;
    filter: blur(1.5px);
    transform: scale(0.9);
}
.profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="5"],
.profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="5"],
.profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="5"] {
    opacity: 0;
    right: 403px;
    top: 209px;
    filter: blur(1.5px);
    transform: scale(0.85);
}

/* Globos secundarios clicables: sin transform en hover (congelaría el float CSS). */
.profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card:not([data-idx="0"]),
.profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card:not([data-idx="0"]),
.profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card:not([data-idx="0"]) {
    cursor: pointer;
}

/* CTA — sin altura forzada 191px (dejaba ~70px vacíos bajo el botón) */
.profic-seo-ia-footer {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1280px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: auto;
    padding: 75px 0 0;
    flex: none;
}

/* Estilos/estados del CTA: assets/css/profic-cta-btn.css (Figma Boton IA 1:318) */

/* KEYFRAMES DE LEVITACIÓN LEVE FIGMA */
@keyframes proficFloat1 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -6px; } }
@keyframes proficFloat2 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -10px; } }
@keyframes proficFloat3 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -5px; } }
@keyframes proficFloat4 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -8px; } }
@keyframes proficFloat5 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -6px; } }
@keyframes proficFloat6 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -9px; } }


/* RESPONSIVE — mismos cortes que Figma / Hero: 1280 · 800 · 375
 * Chat “Primer Pantallazo”: Figma no reflowea — recorta el artboard:
 *   Desktop 1280×553 @ x=0
 *   Tablet  1280×553 @ x=-240  (crop centrado en 800)
 *   Mobile   960×414.75 @ x=-292.5 (0.75×, crop en 375)
 */

/* TABLET (800px ≤ ancho < 1280px) — Figma 202:4551 */
@media (min-width: 800px) and (max-width: 1279px) {
    .profic-seo-ia-wrapper {
        padding: 0;
        gap: 20px;
        overflow-x: clip;
    }
    .profic-seo-ia-header {
        max-width: 800px;
        min-height: 301px;
        height: auto;
        padding: 60px 120px 24px;
        gap: 47px;
        margin: 0 auto;
        align-self: center;
    }
    .profic-seo-ia-heading {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 54.95px;
        width: auto;
    }
    .profic-seo-ia-title {
        width: 206px;
        height: 64px;
        padding: 10px 30px;
        gap: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 70px;
        overflow: hidden;
    }
    .profic-seo-ia-title-end {
        display: none;
    }
    .profic-seo-ia-decor-star {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 30px;
        height: 32px;
        margin: 0;
    }
    .profic-seo-ia-decor-star img {
        width: 30px;
        height: 32px;
    }
    .profic-text-rotator,
    .profic-rotator-track,
    .profic-rotator-item {
        width: 146px;
    }
    .profic-text-rotator {
        height: 44px;
        padding: 1px 0;
        overflow: hidden;
    }
    .profic-rotator-item {
        height: 38px;
        font-size: 32px;
        line-height: 38.4px;
        justify-content: center;
        text-align: center;
    }
    .profic-seo-ia-desc {
        font-size: 17px;
        line-height: 25.5px;
        letter-spacing: 0.01em;
        color: #ffffff;
        height: auto;
        min-height: 52px;
        max-width: 622px;
        width: 100%;
    }
    /* Stage 1280 centrado vía flex (align-items); NO left:50%+margin -640
     * — eso se sumaba al centrado flex y empujaba el chat a un lado. */
    .profic-seo-ia-stage {
        width: 1280px;
        max-width: none;
        height: 553px;
        position: relative;
        left: auto;
        margin-left: 0;
        margin-right: 0;
        align-self: center;
        flex-shrink: 0;
    }
    .profic-dialogue-card {
        width: 452px;
        /* Secundarios 113; el central sigue con height:131 en [data-idx="0"] */
        height: 113px;
    }
}

/* MOBILE (ancho < 800px) — Figma SEO en IA 202:4901 / Pantallazo 202:4912 */
@media (max-width: 799px) {
    .profic-seo-ia-wrapper {
        padding: 0;
        gap: 15px;
        overflow-x: clip;
    }
    /* Título mobile 375×339 — escala 0.75 del bloque estrella */
    .profic-seo-ia-header {
        max-width: 375px;
        min-height: 339px;
        height: auto;
        padding: 60px 0 24px;
        gap: 47px;
        margin: 0 auto;
        align-self: center;
    }
    .profic-seo-ia-heading {
        gap: 41.2125px; /* 54.95 × 0.75 */
    }
    .profic-seo-ia-title {
        width: 197px;
        height: 64px;
        padding: 10px 30px;
        gap: 12px;
        background: rgba(255, 255, 255, 0.05);
    }
    .profic-seo-ia-decor-star {
        position: relative;
        left: auto;
        top: auto;
        width: 22.5px;
        height: 24px;
        margin: 0;
    }
    .profic-seo-ia-decor-star img {
        width: 22.5px;
        height: 24px;
    }
    .profic-text-rotator,
    .profic-rotator-track,
    .profic-rotator-item {
        width: 137px;
    }
    .profic-text-rotator {
        height: 44px;
    }
    .profic-rotator-item {
        height: 38px;
        font-size: 32px;
        line-height: 38.4px;
    }
    .profic-seo-ia-bg-star-wrap {
        transform: scale(0.55);
        transform-origin: center center;
    }
    /* Desc mobile 38:845 — 14 / 21 / LS 0.01em · 311×84 */
    .profic-seo-ia-desc {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.01em;
        max-width: 311px;
        width: 311px;
        height: 84px;
        padding: 0;
        margin: 0 auto;
    }
    /* Stage 0.75× (960×414.75) centrado con flex; crop overflow-x del wrapper */
    .profic-seo-ia-stage {
        width: 960px;
        max-width: none;
        height: 414.75px;
        position: relative;
        left: auto;
        margin-left: 0;
        margin-right: 0;
        align-self: center;
        flex-shrink: 0;
    }
    .profic-dialogue-card {
        width: 339px; /* 452 × 0.75 */
        height: 84.75px; /* 113 × 0.75 */
        border-radius: 22.5px;
        padding: 7.5px;
        overflow: hidden;
    }
    /* Diálogos en mobile */
    .profic-seo-ia-wrapper .profic-dialogue-card[data-idx="0"] {
        height: 98.25px; /* 131 × 0.75 */
    }
    .profic-dialogue-text {
        padding: 12px 15px 6px;
    }
    .profic-dialogue-text p {
        font-size: 12px;
        line-height: 1.3;
    }
    /* Botones + / Send — misma escala que Hero chat mobile (30×30) */
    .profic-dialogue-buttons {
        height: 33.75px;
        padding-bottom: 3.75px;
        gap: 0;
    }
    .profic-dialogue-btn-left,
    .profic-dialogue-btn-right {
        width: 30px;
        height: 30px;
        top: 0;
    }
    .profic-dialogue-btn-left svg,
    .profic-dialogue-btn-right svg {
        width: 30px;
        height: 30px;
    }
    /*
     * Posiciones desktop × 0.75. Especificidad >= [data-active-variant]
     * para que el ciclo de variantes no vuelva a coords 1280.
     */
    .profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="1"],
    .profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="1"],
    .profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="1"] {
        right: 9px;
        top: 240.75px;
        left: auto;
        bottom: auto;
        transform: scale(0.9);
        opacity: 0.4;
        filter: blur(1.5px);
    }
    .profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="1"],
    .profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="1"],
    .profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="1"] {
        right: 272.25px;
        top: 126.75px;
        left: auto;
        bottom: auto;
        transform: scale(0.85);
        opacity: 0;
        filter: blur(1.5px);
    }

    .profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="2"],
    .profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="2"],
    .profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="2"] {
        left: 15px;
        top: 204px;
        right: auto;
        bottom: auto;
        transform: scale(0.9);
        opacity: 0.4;
        filter: blur(1.5px);
    }
    .profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="2"],
    .profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="2"],
    .profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="2"] {
        left: 341.25px;
        top: 134.25px;
        right: auto;
        bottom: auto;
        transform: scale(0.85);
        opacity: 0;
        filter: blur(1.5px);
    }

    /* float-4 / idx 3 — visible de nuevo para comparar */
    .profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="3"],
    .profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="3"],
    .profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="3"] {
        left: 237.75px;
        bottom: -5.25px;
        top: auto;
        right: auto;
        transform: scale(0.9);
        opacity: 0.4;
        filter: blur(1.5px);
    }
    .profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="3"],
    .profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="3"],
    .profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="3"] {
        left: 333.75px;
        bottom: 174.75px;
        top: auto;
        right: auto;
        transform: scale(0.85);
        opacity: 0;
        filter: blur(1.5px);
    }

    .profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="4"],
    .profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="4"],
    .profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="4"] {
        left: 113.25px;
        top: 34.5px;
        right: auto;
        bottom: auto;
        transform: scale(0.9);
        opacity: 0.4;
        filter: blur(1.5px);
    }
    .profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="4"],
    .profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="4"],
    .profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="4"] {
        left: 326.25px;
        top: 149.25px;
        right: auto;
        bottom: auto;
        transform: scale(0.85);
        opacity: 0;
        filter: blur(1.5px);
    }

    .profic-seo-ia-wrapper[data-active-variant="default"] .profic-dialogue-card[data-idx="5"],
    .profic-seo-ia-wrapper[data-active-variant="var4"] .profic-dialogue-card[data-idx="5"],
    .profic-seo-ia-wrapper[data-active-variant="var6"] .profic-dialogue-card[data-idx="5"] {
        right: 87.75px;
        top: 82.5px;
        left: auto;
        bottom: auto;
        transform: scale(0.9);
        opacity: 0.4;
        filter: blur(1.5px);
    }
    .profic-seo-ia-wrapper[data-active-variant="var2"] .profic-dialogue-card[data-idx="5"],
    .profic-seo-ia-wrapper[data-active-variant="var3"] .profic-dialogue-card[data-idx="5"],
    .profic-seo-ia-wrapper[data-active-variant="var5"] .profic-dialogue-card[data-idx="5"] {
        right: 302.25px;
        top: 156.75px;
        left: auto;
        bottom: auto;
        transform: scale(0.85);
        opacity: 0;
        filter: blur(1.5px);
    }

    /* CTA: mismo tamaño que desktop (50×16). El 0.75× de Figma 1:1542 se veía chico. */
    .profic-seo-ia-footer {
        height: auto;
        padding: 18px 0 0;
    }
}

@media (max-width: 479px) {
    .profic-seo-ia-header {
        max-width: 100%;
    }

    .profic-seo-ia-desc {
        width: auto;
        max-width: calc(100% - 40px);
        height: auto;
    }

    .profic-seo-ia-wrapper .profic-dialogue-card[data-idx="0"] {
        width: min(339px, calc(100vw - 36px));
    }
}