/* ==========================================================================
   CAROUSEL STRUCTURE (Frontend Only)
   ========================================================================== */

:not(.editor-styles-wrapper) .ccl-numbered-service-slider {
    overflow: visible !important; /* Cambiado a visible para que la sombra no se corte */
    position: relative !important;
    padding: 20px 0 80px !important; /* Padding superior e inferior para sombras y controles */
    width: 100% !important;
    min-height: 450px;
    display: block !important;
}

:not(.editor-styles-wrapper) .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    transition-property: transform !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

:not(.editor-styles-wrapper) .swiper-slide {
    height: auto !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 10px; /* Espacio para que la sombra respire */
}

/* Compact Card Adjustments */
.ccl-numbered-card-wrapper {
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Ocupar todo el slide */
}

.ccl-numbered-card-content {
    display: flex;
    padding: 0 40px 40px;
    gap: 40px;
    align-items: stretch;
    flex: 1;
}

/* Image Column - min 400px, fixed width on large screens */
.ccl-card-image-col {
    flex: 0 0 400px !important;
    max-width: 400px !important;
    min-width: 400px !important;
    display: flex;
}

.ccl-card-image-box {
    width: 100%;
    height: 100%;
}

.ccl-card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    display: block;
}

/* aspect-ratio 1200/630 (fotos panoramicas) SOLO en las 6 paginas de
   Oportunidades de Negocio, que es para donde se diseño esta tarjeta.
   Las clases .ccl-card-image-box / .ccl-numbered-card-wrapper se reutilizan
   en otras paginas (ej. Consultoria Empresarial) con fotos verticales -- ahi
   ese aspect-ratio las aplastaba y solo se veia una tira de cada foto. */
body.page-id-299919 .ccl-card-image-box img,
body.page-id-299920 .ccl-card-image-box img,
body.page-id-299921 .ccl-card-image-box img,
body.page-id-299922 .ccl-card-image-box img,
body.page-id-299927 .ccl-card-image-box img,
body.page-id-299928 .ccl-card-image-box img {
    aspect-ratio: 1200 / 630;
}

/* Body Column - Right 75% */
.ccl-card-body-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Card Header (Numbering) */
.ccl-card-number {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0 !important;
    text-align: right;
    padding: 20px 40px 0;
    letter-spacing: 1px;
}

/* Icon & Title Row */
.ccl-card-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.ccl-card-icon-circle {
    width: 50px;
    height: 50px;
    background: #f8fafd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #eef2f6;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-align: center;
}

/* Evitar que el área de imagen crezca en el editor */
.editor-styles-wrapper .ccl-card-icon-circle .wp-block-image,
.editor-styles-wrapper .ccl-card-icon-circle .components-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    inset: 0 !important;
}

.editor-styles-wrapper .ccl-card-icon-circle .components-placeholder__fieldset,
.editor-styles-wrapper .ccl-card-icon-circle .components-placeholder__label,
.editor-styles-wrapper .ccl-card-icon-circle .components-button {
    display: none !important;
}

/* Mostrar solo el icono de subida en pequeño */
.editor-styles-wrapper .ccl-card-icon-circle .components-placeholder::before {
    content: "⊕";
    font-size: 20px;
    color: var(--color-secondary);
}

.ccl-card-icon-circle img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

.ccl-card-icon-circle svg,
.ccl-card-icon-circle i {
    width: 24px;
    height: 24px;
    color: var(--color-secondary) !important;
    fill: var(--color-secondary) !important;
}

.ccl-card-title-row h3 {
    margin: 0 !important;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary-light);
    line-height: 1.2;
}

/* Description & Items Alignment */
.ccl-card-description {
    margin-left: 65px;
}

.ccl-card-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-gray-dark);
    margin-bottom: 0px!important;
    text-align: justify;
}

/* Solo la primera descripción (justo debajo del título) pega el texto arriba;
   las demás instancias de .ccl-card-description (ubicación, "Opciones de participación") mantienen su espacio natural */
.ccl-card-title-row + .ccl-card-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ccl-card-description b {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

.ccl-card-divider {
    background-color: #BFC7D1 !important;
    border: 0 !important;
    height: 1px !important;
    margin-bottom: 1.5em !important;
    width: 100%!important;
}

.ccl-card-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-left: 30px;
}

.ccl-card-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 0 0 calc(50% - 10px);
    font-size: 14px;
    color: var(--color-gray-dark);
}

.ccl-card-item i {
    color: var(--color-warning);
    font-size: 12px;
    margin-top: 4px;
}

.ccl-card-item span {
    margin-top: 0 !important;
    line-height: 1.4;
}

/* Carousel Controls */
.ccl-service-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.ccl-service-pagination {
    position: relative !important;
    bottom: 0 !important;
    width: auto !important;
}

.ccl-service-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #cbd5e0;
    opacity: 1;
}

.ccl-service-pagination .swiper-pagination-bullet-active {
    background: var(--color-accent);
    width: 25px;
    border-radius: 5px;
}

.ccl-service-prev,
.ccl-service-next {
    position: static !important;
    margin-top: 0 !important;
    color: var(--color-primary) !important;
    width: 40px !important;
    height: 40px !important;
    background: #f8fafd;
    border-radius: 50%;
    border: 1px solid #eef2f6;
    transition: var(--ccl-transition);
}

.ccl-service-prev:hover,
.ccl-service-next:hover {
    background: var(--color-primary);
    color: #fff !important;
}

.ccl-service-prev::after,
.ccl-service-next::after {
    font-size: 16px !important;
    font-weight: 900;
}

/* Custom Buttons - Full Width & Bottom Alignment */
.ccl-numbered-card-wrapper .wp-block-buttons {
    width: 100% !important;
    margin-top: auto !important; /* Empujar al fondo */
    padding-top: 30px;
    margin-left: 0 !important;
}

.ccl-numbered-card-wrapper .wp-block-button {
    width: 100% !important;
}

.ccl-numbered-card-wrapper .wp-block-button__link {
    background-color: #2D4B71 !important;
    color: #fff !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    padding: 14px 25px !important;
    width: 100% !important;
    display: block !important;
    text-align: center;
    font-size: 15px;
}

/* ==========================================================================
   EDITOR OVERRIDES (Vertical List)
   ========================================================================== */

.editor-styles-wrapper .swiper-wrapper {
    display: block !important;
}

.editor-styles-wrapper .ccl-service-controls {
    display: none !important;
}

.editor-styles-wrapper .ccl-numbered-card-wrapper {
    margin-bottom: 60px !important;
    border: 1px solid #eef2f6;
}

/* Neutralizar el posicionamiento absoluto de la imagen (solo para frontend desktop) dentro del editor */
.editor-styles-wrapper .ccl-card-image-col {
    position: static !important;
    height: auto !important;
    max-height: none !important;
}

.editor-styles-wrapper .ccl-numbered-card-content {
    padding-left: 0 !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .ccl-numbered-card-content {
        flex-direction: column;
        padding: 0 25px 30px;
        gap: 25px;
    }

    .ccl-card-image-col {
        width: 100%;
        max-width: 100%!important;
    }

    .ccl-card-description,
    .ccl-card-divider,
    .ccl-card-items-grid {
        margin-left: 0;
    }

    .ccl-card-item {
        flex: 0 0 100%;
    }
}



/* ==========================================================================
   SCROLL-STICKY MODE
   ========================================================================== */

/* Mismo patrón que .c-info-card (CIGE / Informe Comercial PYME): sticky + top escalonado
   por tarjeta, sin min-height — el alto natural del contenido es lo que se usa.
   Originalmente pensado para ≤ 7 slides (el resto pasaba a carrusel), pero
   [ccl_events_year] (Oportunidades de Negocio) fuerza este modo siempre via
   .ccl-scroll-only sin importar cuantos eventos haya — de ahi la lista larga,
   con margen sobre los ~11-14 eventos que se ven hoy en las paginas mas cargadas. */
@media (min-width: 1025px) {
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper {
        position: sticky !important;
        box-shadow: 0 20px 50px rgba(0, 42, 73, 0.08);
        margin-bottom: 80px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(1) { top: 40px; z-index: 1; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(2) { top: 80px; z-index: 2; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(3) { top: 120px; z-index: 3; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(4) { top: 160px; z-index: 4; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(5) { top: 200px; z-index: 5; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(6) { top: 240px; z-index: 6; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(7) { top: 280px; z-index: 7; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(8) { top: 320px; z-index: 8; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(9) { top: 360px; z-index: 9; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(10) { top: 400px; z-index: 10; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(11) { top: 440px; z-index: 11; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(12) { top: 480px; z-index: 12; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(13) { top: 520px; z-index: 13; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(14) { top: 560px; z-index: 14; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(15) { top: 600px; z-index: 15; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(16) { top: 640px; z-index: 16; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(17) { top: 680px; z-index: 17; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(18) { top: 720px; z-index: 18; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(19) { top: 760px; z-index: 19; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(20) { top: 800px; z-index: 20; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(21) { top: 840px; z-index: 21; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(22) { top: 880px; z-index: 22; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(23) { top: 920px; z-index: 23; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(24) { top: 960px; z-index: 24; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(25) { top: 1000px; z-index: 25; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(26) { top: 1040px; z-index: 26; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(27) { top: 1080px; z-index: 27; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(28) { top: 1120px; z-index: 28; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(29) { top: 1160px; z-index: 29; }
    :not(.editor-styles-wrapper) .ccl-scroll-mode:not(.ccl-scroll-only) .ccl-numbered-card-wrapper:nth-child(30) { top: 1200px; z-index: 30; }
}

/* ==========================================================================
   SCROLL-STICKY MODE — REEMPLAZO TOTAL (.ccl-scroll-only)
   ========================================================================== */

/* [ccl_events_year] (Oportunidades de Negocio): a diferencia del modo de
   arriba (que deja asomar ~40px de cada tarjeta anterior — pensado para
   listas cortas, ≤7), aca cada tarjeta cubre COMPLETO a la anterior, como un
   mazo de cartas — funciona igual con 5 que con 100 tarjetas.
   - .ccl-numbered-card-wrapper: deja de ser el elemento sticky, ahora es solo
     un "espaciador" en flujo normal; su alto (min-height) es lo que controla
     cuanto scroll toma reemplazar esta tarjeta por la siguiente.
   - .ccl-card-stack-inner: el que queda sticky, siempre al mismo top (no
     escalonado), con ALTO FIJO (no natural) — es clave para lo de abajo.
   - Por que alto fijo + margin-top negativo: con wrappers simplemente
     adyacentes, el hueco en blanco antes de que la siguiente tarjeta llegue a
     su posicion sticky es SIEMPRE igual al alto de la tarjeta ANTERIOR (no
     depende del min-height del wrapper — se probo matematica y empiricamente).
     La unica forma de eliminar ese hueco en CSS puro es que cada wrapper
     empiece superpuesto con el anterior, retrocediendo exactamente el alto de
     la tarjeta previa (margin-top negativo). Como ese retroceso tiene que ser
     un numero fijo en CSS, todas las tarjetas necesitan la MISMA altura —
     de ahi el alto fijo en vez de "el que le salga por su contenido".
   - El z-index de cada .ccl-card-stack-inner lo pone el shortcode inline
     (indice del loop) para que la tarjeta de abajo siempre tape a la de
     arriba, sin necesidad de listar cada indice aca en CSS. */
@media (min-width: 1025px) {
    :not(.editor-styles-wrapper) .ccl-scroll-only .ccl-numbered-card-wrapper {
        position: relative !important;
        top: auto !important;
        min-height: 580px; /* 430px de tarjeta + 150px de pausa antes del reemplazo */
        margin-bottom: 0 !important;
        display: block !important;
        /* Overflow:hidden (regla base, arriba) rompe el sticky del hijo si
           queda en el padre — el redondeado/sombra/fondo se mueven al
           .ccl-card-stack-inner de abajo, que es ahora la tarjeta visual. */
        overflow: visible !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    :not(.editor-styles-wrapper) .ccl-scroll-only .ccl-numbered-card-wrapper:not(:first-child) {
        margin-top: -330px; /* superposicion parcial (no el alto completo): con superposicion total
           llegan a coincidir 3 tarjetas en pantalla a la vez, cada una mostrando su propia franja.
           El JS de abajo (ccl-service-carousel.js) se encarga de que solo la activa quede visible;
           esto solo evita que dependamos 100% de ese calculo para tapar. */
    }
    :not(.editor-styles-wrapper) .ccl-scroll-only .ccl-numbered-card-wrapper:last-child {
        min-height: 430px !important; /* sin pausa despues de la ultima, nada la reemplaza */
    }
    :not(.editor-styles-wrapper) .ccl-scroll-only .ccl-card-stack-inner {
        position: sticky;
        /* "top" para el centrado vertical real lo pone el JS en px (window.innerHeight),
           no CSS: top:50% en un elemento sticky se resuelve contra el alto del
           CONTENEDOR (este wrapper, 580px), no contra el viewport — probado que
           NO centra bien, deja la tarjeta desbordando por abajo. */
        top: 40px; /* valor antes de que corra el JS (evita salto visible) */
        height: 430px; /* fijo — no auto — para que el margin-top de arriba calce siempre */
        overflow: hidden;
        border-radius: 20px;
        background: #FFFFFF;
        box-shadow: 0 20px 50px rgba(0, 42, 73, 0.08);
        display: flex;
        flex-direction: column;
        opacity: 0; /* oculta por defecto — evita el flash de "todo apilado" antes de que corra el JS */
        transform: translateY(28px); /* estado inicial (inactiva) — el JS anima a translateY(0) al activarse */
        transition: opacity .45s ease, transform .45s ease; /* el resto de la visibilidad la controla el JS */
        pointer-events: none;
    }
    /* Primera tarjeta visible por defecto (sin esperar al JS): es la que
       corresponde al scroll inicial (arriba de todo) de cualquier forma. */
    :not(.editor-styles-wrapper) .ccl-scroll-only .ccl-numbered-card-wrapper:first-child .ccl-card-stack-inner {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Tablet/mobile: sin efecto sticky (no tiene sentido sin la imagen a los lados).
   Lista normal en flujo, con separacion entre tarjetas -- sin esto quedan
   pegadas una contra otra (el margin-bottom de arriba solo aplica en desktop). */
@media (max-width: 1024px) {
    :not(.editor-styles-wrapper) .ccl-scroll-mode .ccl-numbered-card-wrapper {
        position: static !important;
        margin-bottom: 24px !important;
    }

    .ccl-card-number {
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   AJUSTES GENERALES: aplican a todas las páginas que usan esta tarjeta
   (Consultoría Empresarial, Exportación, Importación, Ferias, etc.)
   ========================================================================== */

/* Desktop: la imagen respeta su alto natural (no se estira ni recorta su texto);
   la tarjeta se ajusta a lo que sea más alto entre imagen y texto */
@media (min-width: 1025px) {
    .ccl-numbered-card-content {
        align-items: center;
    }
}

/* Tablet (1024px hasta justo antes de mobile): ocultar la imagen */
@media (480px < width <= 1024px) {
    .ccl-card-image-col {
        display: none !important;
    }
}

/* Mobile: corregir imagen que sobresalía por min-width:400px heredado */
@media (max-width: 480px) {
    .ccl-card-image-col {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
}

.ccl-numbered-card-content {
    padding: 0 40px 20px;
    margin-top: 0;
}

.ccl-card-title-row h3 {
    font-weight: 500 !important;
    font-size: clamp(22.5px, 1.40625rem + ((1vw - 3.2px) * 0.5859375), 30px) !important;
}

/* Solo Consultoría Empresarial (page-id-298889): otras páginas tienen más ítems de checklist
   y el cap fijo de 500px les recortaba el botón */
@media (min-width: 1025px) {
    body.page-id-298889 .ccl-card-body-col {
        max-height: 500px;
    }
}