/* ============================================================
   Carrusel Dr. Edgar — v1.0.0
   Fix: especificidad más alta (.hkc-outer .hkc-xxx) para ganar
   a los resets de heading/párrafos del tema WordPress.
   Fix: .swiper-slide como flex-column para equal-height correcto.
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   WRAPPER Y SWIPER
   ════════════════════════════════════════════════════════════ */

.hkc-outer {
    position: relative;
    width: 100%;

    /* ── Variables de hover — sobreescritas por los controles de Elementor ── */
    --hkc-hover-bg: rgb(49, 81, 108);
}

.hkc-swiper {
    overflow: hidden;
    width: 100%;
}

/* Swiper-wrapper en fila (Swiper lo hace por defecto, lo dejamos) */
.hkc-swiper .swiper-wrapper {
    align-items: stretch; /* equal height: todos los slides igualan al más alto */
    box-sizing: border-box;
}

/* Cada slide es un flex-column para que .hkc-card pueda crecer con flex: 1 */
.hkc-swiper .swiper-slide {
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}


/* ══════════════════════════════════════════════════════════════
   CARD
   ════════════════════════════════════════════════════════════ */

.hkc-card {
    /* flex: 1 => crece para llenar la altura del slide (equal-height) */
    flex: 1 0 auto;

    /* Layout interno en columna — CRÍTICO para que los elementos
       no se sobrepongan. Usando !important como escudo contra
       frameworks CSS que puedan sobrescribir display. */
    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box;

    /* Diseño base: blanco, esquinas redondeadas.
       Sin sombra por defecto — se controla desde el panel (card_shadow). */
    background-color: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;

    /* Fondo deslizante (hover_from_bottom): gradiente que se expande desde abajo.
       --hkc-hover-bg es controlable desde Elementor (control card_hover_bg_color). */
    background-image: linear-gradient(to top, var(--hkc-hover-bg) 0%, var(--hkc-hover-bg) 100%);
    background-size: 100% 0%;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: background-size 0.4s ease;
}

/* Hover: forzar con !important para anular la regla de 4-clases que genera
   Elementor cuando el usuario configura Motion Effects en el widget.
   background-size: 100% 100% activa el fondo deslizante. */
.hkc-outer .hkc-card:hover {
    transform: none !important;
    background-size: 100% 100% !important;
    /* Sin sombra hover por defecto — se controla desde card_shadow_hover en Elementor */
}


/* ══════════════════════════════════════════════════════════════
   HOVER DE CARD: CONTENIDO → BLANCO
   Replica el efecto de las cards nativas de la tercera sección.
   ════════════════════════════════════════════════════════════ */

/* Transición suave del color en título, descripción, ícono y botón */
.hkc-outer .hkc-icon,
.hkc-outer .hkc-card .hkc-title,
.hkc-outer .hkc-card .hkc-desc,
.hkc-outer .hkc-card .hkc-btn {
    transition: color 0.4s ease;
}

/* En hover de card: todos los elementos de contenido → blanco por defecto.
   Sin !important: los controles de Elementor (icon_hover_color, title_hover_color,
   desc_hover_color, btn_card_hover_color) tienen igual especificidad y llegan después
   en cascada (inline <style> de Elementor), por lo que sobreescriben estos defaults. */
.hkc-outer .hkc-card:hover .hkc-icon,
.hkc-outer .hkc-card:hover .hkc-title,
.hkc-outer .hkc-card:hover .hkc-desc,
.hkc-outer .hkc-card:hover .hkc-btn {
    color: #ffffff;
}

/* Botón con hover directo (dentro de card hovered):
   fondo blanco + texto color brand. Sobreescrito por btn_direct_hover_color / btn_direct_hover_bg. */
.hkc-outer .hkc-card:hover .hkc-btn--link:hover {
    color: rgb(49, 81, 108);
    background-color: #ffffff;
    box-shadow: 0 0 0 8px #ffffff; /* simula padding sin afectar el layout */
    border-radius: 4px;
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   ÍCONO
   Especificidad: 2 clases (.hkc-outer .hkc-icon) > reset de tema
   ════════════════════════════════════════════════════════════ */

.hkc-outer .hkc-icon {
    /* flex-start evita que el contenedor del ícono se estire al ancho completo
       de la card (comportamiento default en flex-direction: column) */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;

    /* Elementor genera width: 0px; height: 0px cuando el control icon_box_size
       no tiene valor. Forzamos auto para que el contenedor ocupe lo que necesita. */
    width: auto !important;
    height: auto !important;

    margin-bottom: 20px;  /* baseline — el control de Elementor lo sobreescribe */
    line-height: 1;
    flex-shrink: 0;
    color: #1a1a2e;
}

.hkc-outer .hkc-icon i {
    font-size: 36px;
    color: inherit;
    line-height: 1;
    display: block;
}

.hkc-outer .hkc-icon svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
    display: block;
    transition: fill 0.4s ease;
}


/* ══════════════════════════════════════════════════════════════
   TÍTULO
   Reseteamos margin/padding aquí con especificidad 2-clases para
   ganar a los resets de tema (`h3 { margin: 0 }` con class + element).
   El control de Elementor ({{WRAPPER}} .hkc-title) tiene igual
   especificidad pero viene DESPUÉS en cascada → Elementor gana.
   ════════════════════════════════════════════════════════════ */

/*
 * NOTA: El control de tipografía de Elementor guarda line-height con unidad px
 * cuando el selector de unidad queda en "px" (p.ej. "1.3px" en vez de "1.3em"),
 * lo que hace que las líneas de texto se encimen entre sí. Las 2 reglas siguientes
 * corrigen eso con mayor especificidad (3 clases vs. las 2 del selector base).
 *
 * Para tener control total de line-height desde el panel de Elementor:
 *   Estilo → Título → Tipografía → "Line Height" → cambia la unidad de "px" a "em".
 */
.hkc-outer .hkc-title {
    margin: 0 0 12px;  /* espacio debajo por defecto */
    padding: 0;
    color: #1a1a2e;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* Selector de 3 clases para ganar al selector de Elementor (4 clases).
   Usando !important como escudo contra el valor 1.3px que Elementor puede inyectar. */
.hkc-outer .hkc-card .hkc-title {
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
}


/* ══════════════════════════════════════════════════════════════
   DESCRIPCIÓN
   flex-grow: 1 => empuja el botón al fondo de la card
   ════════════════════════════════════════════════════════════ */

.hkc-outer .hkc-desc {
    margin: 0 0 20px;  /* espacio debajo por defecto */
    padding: 0;
    color: #555577;
    font-size: 14px;
    line-height: 1.6;
    flex-grow: 1;  /* rellena el espacio disponible */
}


/* ══════════════════════════════════════════════════════════════
   BOTÓN / ENLACE
   ════════════════════════════════════════════════════════════ */

.hkc-outer .hkc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    align-self: flex-start;
    line-height: 1.4;
    transition: color 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, opacity 0.2s ease;
}

/* Enlace de texto (por defecto) — mismos estilos base que las cards nativas del sitio */
.hkc-outer .hkc-btn--link {
    color: #242736;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    gap: 8px;
    transition: color 0.4s, opacity 0.4s;
}

.hkc-outer .hkc-btn--link:hover {
    opacity: 1; /* color controlado por Elementor panel o por regla de card-hover */
}

/* Outline */
.hkc-outer .hkc-btn--outline {
    color: #1a1a2e;
    background: transparent;
    border: 1.5px solid #1a1a2e;
    padding: 8px 18px;
    border-radius: 6px;
}

.hkc-outer .hkc-btn--outline:hover {
    background-color: #1a1a2e;
    color: #ffffff;
}

/* Sólido */
.hkc-outer .hkc-btn--solid {
    color: #ffffff;
    background-color: #1a1a2e;
    border: 1.5px solid #1a1a2e;
    padding: 8px 18px;
    border-radius: 6px;
}

.hkc-outer .hkc-btn--solid:hover {
    opacity: 0.82;
}

.hkc-btn-arrow {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}

/* Ícono del botón: transición suave de rotación.
   La rotación inicial (ej: -45° para diagonal ↗) la aplica el control
   btn_icon_rotate de Elementor. En hover vuelve a 0° (horizontal →). */
.hkc-btn-arrow i,
.hkc-btn-arrow svg {
    display: block;
    fill: currentColor;
    line-height: 1;
    transition: transform 0.3s ease;
}

.hkc-btn-arrow svg {
    width: 16px;
    height: 16px;
}

/* En hover del botón: vuelve a 0° (horizontal) */
.hkc-outer .hkc-btn--link:hover .hkc-btn-arrow i,
.hkc-outer .hkc-btn--link:hover .hkc-btn-arrow svg {
    transform: rotate(0deg);
}


/* ══════════════════════════════════════════════════════════════
   FLECHAS DE NAVEGACIÓN
   ════════════════════════════════════════════════════════════ */

/* FLECHAS: solo propiedades de posicionamiento y layout funcional.
   Todo lo visual (tamaño, borde, color, redondeado) se controla
   exclusivamente desde el panel de Elementor → sin defaults que pisen. */
.hkc-nav {
    /* Reset de botón nativo */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;

    /* Posición absoluta dentro de .hkc-outer */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

.hkc-nav.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.hkc-nav i,
.hkc-nav svg {
    line-height: 1;
    pointer-events: none;
    display: block;
}

.hkc-nav svg {
    fill: currentColor;
    width: 16px;  /* default — sobreescrito por arrow_icon_size de Elementor */
    height: 16px;
}

.hkc-prev { left: -22px; }
.hkc-next { right: -22px; }

@media (max-width: 767px) {
    .hkc-prev { left: 4px; }
    .hkc-next { right: 4px; }
}


/* ══════════════════════════════════════════════════════════════
   PUNTOS (PAGINACIÓN)
   ════════════════════════════════════════════════════════════ */

.hkc-pag {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 28px;

    /* Forzar posición estática — Swiper intenta hacer position: absolute */
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
}

.hkc-pag .swiper-pagination-bullet {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: #cccccc;
    opacity: 1;
    cursor: pointer;
    margin: 0 !important; /* anular margin que Swiper inyecta */
    transition: background 0.25s ease, width 0.25s ease;
}

.hkc-pag .swiper-pagination-bullet-active {
    background: #1a1a2e;
    width: 20px; /* pill activo más ancho */
}


/* ══════════════════════════════════════════════════════════════
   LAYOUT VERTICAL + SWIPER HORIZONTAL (agrupación DOM)
   El JS agrupa N cards en un .swiper-slide.hkc-vgroup antes de
   inicializar Swiper. No usa módulo Grid; es DOM puro.
   ════════════════════════════════════════════════════════════ */

/* Contenedor del grupo: columna flex con alto automático */
.hkc-outer .hkc-vgroup {
    display: flex !important;
    flex-direction: column;
    height: auto;
    box-sizing: border-box;
}

/* Cada item dentro del grupo ocupa el mismo alto (equal-height) */
.hkc-outer .hkc-vgroup-item {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    box-sizing: border-box;
}

/* La card dentro del item crece para llenar el espacio */
.hkc-outer .hkc-vgroup-item .hkc-card {
    flex: 1;
}


/* ══════════════════════════════════════════════════════════════
   LAYOUT VERTICAL + SWIPER VERTICAL (direction: vertical)
   El JS calcula la altura del contenedor y la inyecta como
   style="height: Xpx" en .hkc-swiper antes de inicializar Swiper.
   Swiper maneja el resto: apila los slides verticalmente y
   los navega con las flechas/puntos normales.
   ════════════════════════════════════════════════════════════ */

/* Las flechas se muestran a los lados por defecto (top: 50%).
   En modo vertical el usuario puede reposicionarlas desde el panel
   con los controles "Posición vertical" y "Desplazamiento lateral". */