/* ============================================================
   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:       5px 16px;
    border-radius: 99px;
    letter-spacing: .04em;
    box-shadow:    0 2px 8px rgba(0,0,0,.1);
    text-align:    center;
    line-height:   1.3;
    z-index:       5;
    white-space:   nowrap;
}

/* Dá espaço acima dos slides para o badge flutuar sem ser cortado */
.wmp-swiper  { padding-top: 20px; overflow: visible !important; clip-path: inset(-20px -0px -0px -0px); }
.wmp-card    { overflow: visible; position: relative; }
.wmp-badge   { z-index: 20; }
.wmp-root    { overflow: visible; }

/* Setas: posição abaixo dos cards */
.wmp-setas-baixo { margin-bottom: 0; margin-top: 20px; }
.wmp-setas-baixo { order: 10; }
.wmp-root.wmp-setas-pos-baixo { display: flex; flex-direction: column; }
.wmp-root.wmp-setas-pos-baixo .wmp-header { order: 0; }
.wmp-root.wmp-setas-pos-baixo .wmp-setas  { order: 10; }
.wmp-root.wmp-setas-pos-baixo .wmp-swiper { order: 5; }
.wmp-root.wmp-setas-pos-baixo .wmp-pagination { order: 8; }
.wmp-root.wmp-setas-pos-baixo .wmp-rodape { order: 15; }

/* ── Corpo do card ────────────────────────────────────────── */
.wmp-etiq {
    /* font-size/weight/transform controlados via Elementor Typography */
    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:         14px 28px;
    border-radius:   8px;
    /* font-size/weight controlados via Elementor Typography */
    text-decoration: none !important;
    transition:      background-color .2s ease, color .2s ease, opacity .2s ease, transform .15s ease;
    margin-top:      auto;
    background:      #111827;
    color:           #fff;
    box-sizing:      border-box;
    cursor:          pointer;
    width:           100%;
}
.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;
    }
}