/* =============================================================================
   SECCIÓN CASOS DE ÉXITO (Blog CDE) — Figma Design-Profic-Mike node 2:6192
   Specs base: card 1040×493, nav 70, padding sección 100 (desktop)
   ============================================================================= */

:root {
    --profic-cde-bg: #14062c;
}

/*
 * Costura visible = 2 capas pintando el mismo “púrpura” con gradients distintos.
 * Wrappers + section = sólido idéntico; el glow va en ::before (interior).
 * Empalme Blog (#F8F8F8) → CDE sin franja.
 */
.elementor-widget-profic_casos_exito_cde,
.elementor-widget-profic_casos_exito_cde_cpt,
.elementor-widget-profic_casos_exito_cde > .elementor-widget-container,
.elementor-widget-profic_casos_exito_cde_cpt > .elementor-widget-container {
    margin: 0 !important;
    margin-block-end: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--profic-cde-bg) !important;
    background-color: var(--profic-cde-bg) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0;
    line-height: 0;
}

.elementor-widget-profic_casos_exito_cde > .elementor-widget-container,
.elementor-widget-profic_casos_exito_cde_cpt > .elementor-widget-container {
    display: block;
}

.e-con:has(> .elementor-widget-profic_casos_exito_cde),
.e-con:has(> .elementor-widget-profic_casos_exito_cde_cpt),
.e-con:has(.elementor-widget-profic_casos_exito_cde),
.e-con:has(.elementor-widget-profic_casos_exito_cde_cpt),
.e-con:has(.profic-cde-section),
.e-con:has(.profic-cde-section) > .e-con-inner,
.profic-fondos-armonicos .e-con:has(.profic-cde-section),
.profic-fondos-armonicos .e-con:has(.profic-cde-section) > .e-con-inner,
.profic-fondos-armonicos .e-con:has(.elementor-widget-profic_casos_exito_cde),
.profic-fondos-armonicos .e-con:has(.elementor-widget-profic_casos_exito_cde_cpt) {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--profic-cde-bg) !important;
    background-color: var(--profic-cde-bg) !important;
    background-image: none !important;
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --gap: 0px !important;
    row-gap: 0 !important;
    gap: 0 !important;
}

.elementor-widget-profic_blog,
.elementor-widget-profic_blog > .elementor-widget-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.profic-blog-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.profic-blog-articles-container {
    margin-bottom: 0 !important;
}

/* Solapa 1px para matar antialias / subpixel entre Blog y CDE */
.elementor-widget-profic_blog + .elementor-widget-profic_casos_exito_cde,
.elementor-widget-profic_blog + .elementor-widget-profic_casos_exito_cde_cpt,
.elementor-widget-profic_casos_exito_cde + .elementor-widget-profic_trending_posts,
.elementor-widget-profic_casos_exito_cde_cpt + .elementor-widget-profic_trending_posts {
    margin-top: -1px !important;
}

.profic-cde-section {
    position: relative;
    /* Full-bleed: peeks de cards llegan al borde del viewport (Figma 2:6195) */
    width: 100vw;
    max-width: 100vw;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 100px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    font-size: 16px;
    line-height: normal;
    background: var(--profic-cde-bg) !important;
    background-color: var(--profic-cde-bg) !important;
    background-image: none !important;
    overflow: hidden;
    z-index: 1;
}

/* Glow interior: no pinta el borde superior/inferior de la sección */
.profic-cde-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(
        ellipse 140% 90% at 50% 55%,
        rgba(93, 15, 236, 0.65) 0%,
        rgba(43, 9, 107, 0.55) 50%,
        transparent 100%
    );
}

.profic-cde-section > *:not(.profic-cde-bg-strokes) {
    position: relative;
    z-index: 1;
}

.profic-fondos-armonicos .elementor-widget-profic_casos_exito_cde,
.profic-fondos-armonicos .elementor-widget-profic_casos_exito_cde_cpt,
.profic-fondos-armonicos .elementor-widget-profic_casos_exito_cde > .elementor-widget-container,
.profic-fondos-armonicos .elementor-widget-profic_casos_exito_cde_cpt > .elementor-widget-container,
.profic-fondos-armonicos .profic-cde-section {
    background: var(--profic-cde-bg) !important;
    background-color: var(--profic-cde-bg) !important;
    background-image: none !important;
}

/* Vectores de Fondo (Líneas Curvas Púrpuras — 1255px x 1163px, rotate 15deg) */
.profic-cde-bg-strokes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.profic-cde-stroke-container {
    position: absolute;
    width: 1255.044px;
    height: 1163.827px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profic-cde-stroke-inner {
    width: 1052px;
    height: 923px;
    transform: rotate(15deg);
    position: relative;
}

.profic-cde-stroke-1 {
    left: -581px;
    top: -12px;
}

.profic-cde-stroke-2 {
    left: 276px;
    top: -400px;
}

.profic-cde-stroke-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Contenedor del carrusel — ancho de sección (= viewport)
 * Card 1040 centrada; laterales asoman hasta el edge. */
.profic-cde-carousel-wrapper {
    --profic-cde-card-w: 1040px;
    --profic-cde-gap: 140px;
    --profic-cde-nav: 70px;
    --profic-cde-ease-move: cubic-bezier(0.77, 0, 0.175, 1);
    --profic-cde-duration: 500ms;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 493px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
}

/*
 * Figma CarruselCasosDeExito: fila de cards + gap 140.
 * Variantes Predeterminado / V2 / V3 = translate del track (no fade).
 */
.profic-cde-track {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--profic-cde-gap);
    width: max-content;
    height: 493px;
    transform: translate3d(0, 0, 0);
    transition: transform var(--profic-cde-duration) var(--profic-cde-ease-move);
    will-change: transform;
}

.profic-cde-card {
    position: relative;
    flex: 0 0 var(--profic-cde-card-w);
    width: var(--profic-cde-card-w);
    height: 493px;
    background-color: #FFFFFF;
    border-radius: 44px;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .profic-cde-track {
        transition: none;
    }
}

/* Card Caso de exito A — grid: Frame A + CTA left, Frame B right (desktop) */
.profic-cde-card-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 30px;
    row-gap: 24px;
    width: 100%;
    height: 100%;
    padding: 40px 60px;
    box-sizing: border-box;
    border-radius: 42px;
}

/* Frame A: Grupo (logo / título / desc) */
.profic-cde-frame-a {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

/* Grupo Caso de éxito (Figma: gap-[24px], w-full) */
.profic-cde-grupo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    min-width: 0;
}

/* Logo Cliente Restricción Estricta (Figma Spec: Prometeo h-[32px] w-[135px], UMSA h-[15px] w-[86px], Farmashop h-[23px] w-[126px]) */
.profic-cde-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 32px;
    max-height: 32px;
    max-width: 180px;
    overflow: hidden;
    flex-shrink: 0;
}

.profic-cde-logo-wrap img,
.profic-cde-logo-wrap svg,
.profic-cde-logo,
.profic-cde-logo-svg {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    max-width: 165px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0;
}

/* Título Caso de Éxito (Figma Spec: AmsiPro-SemiBold 34px, leading 1.2 #090511) */
.profic-cde-title {
    font-family: 'Amsi Pro', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 34px;
    line-height: 1.2em;
    color: #090511;
    margin: 0;
    word-break: break-word;
}

/* Descripción Caso de Éxito (Figma Spec: AmsiPro-Regular 18px, leading 1.6 #090511) */
.profic-cde-desc {
    font-family: 'Amsi Pro', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 18px;
    line-height: 1.6em;
    color: #090511;
    margin: 0;
    word-break: break-word;
    max-width: 560px;
}

/* Boton Exito Black — Figma 2:6065
 * Hover = solo fill (Smart Animate). Borde en ::after inset-0 → el box NUNCA crece. */
.profic-cde-cta {
    --profic-cde-cta-w: 174px;
    --profic-cde-cta-h: 50px;
    --profic-cde-cta-pad-y: 15px;
    --profic-cde-cta-pad-x: 24px;
    --profic-cde-cta-fs: 16px;
    --profic-cde-cta-bw: 1px;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--profic-cde-cta-w);
    min-width: var(--profic-cde-cta-w);
    max-width: var(--profic-cde-cta-w);
    height: var(--profic-cde-cta-h);
    min-height: var(--profic-cde-cta-h);
    max-height: var(--profic-cde-cta-h);
    padding: var(--profic-cde-cta-pad-y) var(--profic-cde-cta-pad-x);
    border: none;
    border-radius: 53px;
    background-color: rgba(9, 5, 17, 0.05);
    color: #090511;
    font-family: 'Amsi Pro', sans-serif;
    font-weight: 300;
    font-size: var(--profic-cde-cta-fs);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    outline: none;
    transform: none;
    scale: 1;
    transition: background-color 0.3s ease-in;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Stroke Figma: absolute inset-0 (no suma al width/height) */
.profic-cde-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--profic-cde-cta-bw) solid #090511;
    border-radius: inherit;
    pointer-events: none;
}

.profic-cde-cta:hover,
.profic-cde-cta:focus,
.profic-cde-cta:focus-visible,
.profic-cde-cta:active,
.profic-cde-cta:visited {
    width: var(--profic-cde-cta-w);
    min-width: var(--profic-cde-cta-w);
    max-width: var(--profic-cde-cta-w);
    height: var(--profic-cde-cta-h);
    min-height: var(--profic-cde-cta-h);
    max-height: var(--profic-cde-cta-h);
    padding: var(--profic-cde-cta-pad-y) var(--profic-cde-cta-pad-x);
    border: none;
    color: #090511;
    font-weight: 300;
    font-size: var(--profic-cde-cta-fs);
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    transform: none !important;
    scale: 1 !important;
}

.profic-cde-cta:hover,
.profic-cde-cta:focus-visible {
    background-color: rgba(9, 5, 17, 0.1);
}

.profic-cde-cta:active {
    background-color: rgba(9, 5, 17, 0.14);
}

.profic-cde-cta:hover::after,
.profic-cde-cta:focus-visible::after,
.profic-cde-cta:active::after {
    border-width: var(--profic-cde-cta-bw);
    border-color: #090511;
}

/* Frame B: laptop 413 / phone 312×413, rounded-[60px] */
.profic-cde-frame-b {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 413px;
    height: 413px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.profic-cde-frame-b:has(.profic-cde-mockup--phone) {
    width: 312px;
    height: 413px;
}

.profic-cde-mockup-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mockup Prometeo & Farmashop Phone (Figma: h-[413px] w-[201px]) */
.profic-cde-mockup--phone .profic-cde-mockup-img {
    height: 413px;
    width: 201px;
    object-fit: contain;
}

/* Mockup UMSA Laptop (Figma: h-[279px] w-[441px]) */
.profic-cde-mockup--laptop .profic-cde-mockup-img {
    height: 279px;
    width: 441px;
    object-fit: contain;
}

.profic-cde-mockup-img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    pointer-events: none;
}

/* Botones de Navegación — sin scale/opacity pulse (tamaño fijo) */
.profic-cde-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    outline: none;
    box-shadow: none;
    filter: none;
    opacity: 1;
    scale: 1;
    transition: none;
}

.profic-cde-nav-btn svg {
    width: 70px;
    height: 70px;
    display: block;
    transform: none;
    pointer-events: none;
}

.profic-cde-nav-btn:hover,
.profic-cde-nav-btn:focus,
.profic-cde-nav-btn:focus-visible,
.profic-cde-nav-btn:active {
    width: 70px;
    height: 70px;
    opacity: 1;
    outline: none;
    box-shadow: none !important;
    filter: none !important;
    transform: translateY(-50%) !important;
    scale: 1 !important;
}

/* Feedback hover: solo fill del círculo SVG, sin agrandar el hit-area */
.profic-cde-nav-btn:hover svg circle,
.profic-cde-nav-btn:focus-visible svg circle {
    fill-opacity: 0.35;
}

.profic-cde-nav-btn:active svg circle {
    fill-opacity: 0.45;
}

/* Nav en el gap entre peek y card (Figma: left 16 / 1194 @ 1280) */
.profic-cde-prev {
    left: calc(
        50%
        - (var(--profic-cde-card-w) / 2)
        - var(--profic-cde-gap)
        + (var(--profic-cde-gap) - var(--profic-cde-nav)) / 2
    );
    right: auto;
}

.profic-cde-next {
    left: calc(
        50%
        + (var(--profic-cde-card-w) / 2)
        + (var(--profic-cde-gap) - var(--profic-cde-nav)) / 2
    );
    right: auto;
}

/* =============================================================================
   RESPONSIVE DESIGN (Figma Tablet & Mobile Exact Specs)
   ============================================================================= */

/* TABLET (800px - 1279px) — Figma scale ≈0.63 */
@media (min-width: 800px) and (max-width: 1279px) {
    .profic-cde-section {
        padding: 100px 0;
    }

    .profic-cde-carousel-wrapper {
        --profic-cde-card-w: 655.2px;
        --profic-cde-gap: 88.2px;
        --profic-cde-nav: 44.1px;
        height: 310.59px;
    }

    .profic-cde-track {
        height: 310.59px;
    }

    .profic-cde-card {
        height: 310.59px;
        border-radius: 27.72px;
    }

    .profic-cde-card-inner {
        width: 100%;
        padding: 25.2px 37.8px;
        column-gap: 18.9px;
        row-gap: 15.12px;
        border-radius: 26.46px;
    }

    .profic-cde-frame-a {
        gap: 15.12px;
    }

    .profic-cde-grupo {
        gap: 15.12px;
    }

    .profic-cde-logo-wrap {
        height: 20.16px;
        max-height: 20.16px;
        max-width: 120px;
    }

    .profic-cde-logo-wrap img,
    .profic-cde-logo-wrap svg,
    .profic-cde-logo,
    .profic-cde-logo-svg {
        height: 20.16px !important;
        max-height: 20.16px !important;
        max-width: 110px !important;
    }

    .profic-cde-title {
        font-size: 21.42px;
        line-height: 1.2em;
    }

    .profic-cde-desc {
        font-size: 11.34px;
        line-height: 1.6em;
        max-width: 352.8px;
    }

    .profic-cde-cta {
        --profic-cde-cta-w: 109.24px;
        --profic-cde-cta-h: 31.5px;
        --profic-cde-cta-pad-y: 9.45px;
        --profic-cde-cta-pad-x: 15.12px;
        --profic-cde-cta-fs: 10.08px;
        --profic-cde-cta-bw: 0.63px;
        border-radius: 33.39px;
    }

    .profic-cde-frame-b {
        width: 260.19px;
        height: 260.19px;
        border-radius: 37.8px;
    }

    .profic-cde-frame-b:has(.profic-cde-mockup--phone) {
        width: 196.56px;
        height: 260.19px;
    }

    .profic-cde-mockup--phone .profic-cde-mockup-img {
        height: 260.19px;
        width: 126.63px;
    }

    .profic-cde-mockup--laptop .profic-cde-mockup-img {
        height: 175.77px;
        width: 277.83px;
    }

    .profic-cde-nav-btn {
        width: 44.1px;
        height: 44.1px;
    }

    .profic-cde-nav-btn svg {
        width: 44.1px;
        height: 44.1px;
    }
}

/* MOBILE (<800px) — Figma: col, sin desc, CTA bajo mockup, nav abajo */
@media (max-width: 799px) {
    .profic-cde-section {
        padding: 100px 0;
        min-height: 0;
        gap: 60px;
    }

    .profic-cde-carousel-wrapper {
        --profic-cde-gap: 24px;
        --profic-cde-nav: 59.5px;
        width: 100%;
        max-width: 375px;
        margin-left: auto;
        margin-right: auto;
        height: auto;
        padding: 0 30px 90px;
        box-sizing: border-box;
    }

    .profic-cde-track {
        height: auto;
        align-items: flex-start;
    }

    .profic-cde-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: auto;
        border-radius: 37.4px;
    }

    .profic-cde-card-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 34px 25.5px;
        gap: 25.5px;
        border-radius: 35.7px;
    }

    .profic-cde-frame-a {
        width: 100%;
        align-items: center;
        gap: 0;
    }

    .profic-cde-grupo {
        width: 100%;
        align-items: center;
        gap: 20.4px;
    }

    .profic-cde-logo-wrap {
        height: 27.32px;
        max-height: 32px;
        max-width: 135px;
        justify-content: center;
    }

    .profic-cde-logo-wrap img,
    .profic-cde-logo-wrap svg,
    .profic-cde-logo,
    .profic-cde-logo-svg {
        height: 27.32px !important;
        max-height: 32px !important;
        max-width: 135px !important;
    }

    .profic-cde-title {
        font-size: 28.9px;
        line-height: 1.2em;
        text-align: center;
    }

    /* Figma mobile: descripción oculta */
    .profic-cde-desc {
        display: none;
    }

    .profic-cde-frame-b {
        width: 100%;
        max-width: 267.75px;
        height: 265.91px;
        border-radius: 51px;
        order: 0;
    }

    .profic-cde-frame-b:has(.profic-cde-mockup--phone) {
        width: 100%;
        max-width: 267.75px;
        height: 265.91px;
    }

    .profic-cde-mockup--phone .profic-cde-mockup-img {
        height: 265.91px;
        width: 129.2px;
    }

    .profic-cde-mockup--laptop .profic-cde-mockup-img {
        height: 198px;
        width: 313px;
        max-width: 100%;
    }

    .profic-cde-cta {
        --profic-cde-cta-w: 147.8px;
        --profic-cde-cta-h: 42.5px;
        --profic-cde-cta-pad-y: 12.75px;
        --profic-cde-cta-pad-x: 20.4px;
        --profic-cde-cta-fs: 13.6px;
        --profic-cde-cta-bw: 0.85px;
        border-radius: 45.05px;
        justify-self: center;
    }

    /* Nav debajo de la card (Figma Group 7/8 top ~667) */
    .profic-cde-nav-btn {
        top: auto;
        bottom: 0;
        transform: none;
        width: 59.5px;
        height: 59.5px;
    }

    .profic-cde-nav-btn svg {
        width: 59.5px;
        height: 59.5px;
    }

    .profic-cde-nav-btn:hover,
    .profic-cde-nav-btn:focus-visible,
    .profic-cde-nav-btn:active {
        transform: none !important;
        scale: 1 !important;
    }

    .profic-cde-prev {
        left: 13.6px;
    }

    .profic-cde-next {
        left: 85.85px;
        right: auto;
    }
}