/* ============================================================
   Carrossel de Planos – Workmedia Blocos | v3.0.0
   ============================================================ */

/* ── Root ─────────────────────────────────────────────────── */
.wmp-root { width:100%; box-sizing:border-box; }

/* ── Cabeçalho ────────────────────────────────────────────── */
.wmp-header  { margin-bottom:28px; }
.wmp-super   { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#0066ff; margin-bottom:8px; }
.wmp-titulo  { font-size:32px; font-weight:800; color:#111827; line-height:1.15; margin:0 0 12px; }
.wmp-sub     { font-size:16px; color:#4b5563; line-height:1.6; margin:0; }

/* ── Setas ────────────────────────────────────────────────── */
.wmp-setas   { display:flex; gap:8px; margin-bottom:16px; }
.wmp-seta {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    border:1px solid #e5e7eb; background:#fff; color:#111827;
    cursor:pointer; transition:background .2s,color .2s,border-color .2s;
    flex-shrink:0; padding:0;
}
.wmp-seta:hover { background:#111827; color:#fff; border-color:#111827; }
.wmp-seta.swiper-button-disabled { opacity:.35; pointer-events:none; }
.wmp-seta svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; display:block; }

/* ── Swiper ───────────────────────────────────────────────── */
.wmp-swiper { overflow:hidden; width:100%; }
.wmp-swiper .swiper-wrapper { align-items:stretch; }
.wmp-swiper .swiper-slide   { height:auto; }

/* ── Card ─────────────────────────────────────────────────── */
.wmp-card {
    background:#fff;
    border:2px solid #e5e7eb;
    border-radius:16px;
    padding:28px 24px;
    display:flex;
    flex-direction:column;
    height:100%;
    box-sizing:border-box;
    position:relative;
    transition:box-shadow .2s;
}
.wmp-card:hover { box-shadow:0 12px 36px rgba(0,0,0,.08); }

/* Destaque */
.wmp-card.wmp-dest {
    background:#0066ff;
    border-color:#0066ff;
    box-shadow:0 16px 48px rgba(0,102,255,.22);
}

/* ── Badge ────────────────────────────────────────────────── */
.wmp-badge {
    position:absolute; top:0; left:50%;
    transform:translate(-50%,-50%);
    background:#fff; color:#0066ff;
    padding:4px 14px; border-radius:99px;
    font-size:11px; font-weight:700;
    white-space:nowrap; letter-spacing:.04em;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

/* ── Corpo do card ────────────────────────────────────────── */
.wmp-etiq {
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:#0066ff; margin-bottom:6px;
}
.wmp-nome {
    font-size:22px; font-weight:700; color:#111827;
    margin:0 0 10px; line-height:1.2;
}
.wmp-preco-row { display:flex; align-items:baseline; gap:4px; margin-bottom:16px; }
.wmp-preco     { font-size:30px; font-weight:800; color:#111827; line-height:1; }
.wmp-periodo   { font-size:13px; color:#6b7280; }

.wmp-itens     { flex:1; margin-bottom:20px; }
.wmp-item      { display:flex; align-items:center; gap:8px; font-size:14px; color:#374151; margin-bottom:8px; line-height:1.4; }
.wmp-item i    { color:#0066ff; font-size:14px; flex-shrink:0; }

/* ── CTA ──────────────────────────────────────────────────── */
.wmp-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 24px; border-radius:8px;
    font-size:14px; font-weight:600;
    text-decoration:none !important;
    transition:opacity .2s; margin-top:auto;
    background:#111827; color:#fff;
}
.wmp-cta:hover { opacity:.85; }
.wmp-cta i     { font-size:11px; }

/* ── Dots ─────────────────────────────────────────────────── */
.wmp-pagination {
    position:static !important;
    margin-top:20px;
    line-height:1;
}
.wmp-pagination .swiper-pagination-bullet {
    width:8px; height:8px;
    background:#d1d5db; opacity:1;
    border-radius:99px;
    transition:background .2s, transform .2s;
    display:inline-block; margin:0 4px;
}
.wmp-pagination .swiper-pagination-bullet-active {
    background:#0066ff; transform:scale(1.3);
}

/* ── Rodapé ───────────────────────────────────────────────── */
.wmp-rodape {
    font-size:13px; color:#6b7280; text-align:center;
    margin-top:20px; line-height:1.6;
}

/* ── Responsivo padrão (sem Swiper) ──────────────────────── */
@media (max-width: 767px) {
    .wmp-titulo { font-size:26px; }
    .wmp-preco  { font-size:26px; }
}

/* ── Força seção pai a empilhar no mobile quando contém carrossel de planos ── */
@media (max-width: 767px) {
    .elementor-widget-wm_carousel_planos
        .elementor-container,
    .elementor-widget-wm_carousel_planos
        ~ .elementor-widget-wrap {
        /* não é possível afetar o pai pelo filho no CSS */
        /* use a opção de colunas do Elementor ou a classe abaixo */
    }

    /* Classe utilitária: adicione .wmp-stack-mobile na seção via campo CSS personalizado */
    .wmp-stack-mobile > .elementor-container > .elementor-row,
    .wmp-stack-mobile.e-con-inner {
        flex-direction: column !important;
    }
    .wmp-stack-mobile > .elementor-container > .elementor-row > .elementor-col-50,
    .wmp-stack-mobile > .elementor-container > .elementor-row > [class*="elementor-col-"],
    .wmp-stack-mobile > .e-con > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}