/* ============================================================
   TEMPLATE: SKY (LIGHT & GLASSMORPHISM)
   ============================================================ */

.card.sky { 
    background-color: #f0f9ff; 
    border: none; 
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.1); 
    overflow: hidden;
}

.banner-upgrade a,
.banner-upgrade a:visited {
    color: inherit !important;
    text-decoration: none;
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

/* Corrigindo o Header do Sky */
.card.sky .card-header-block { 
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); 
    color: #ffffff; 
    /* Forçamos um padding inferior maior para a curva não bater no texto */
    padding-bottom: 4rem !important; 
    position: relative; 
    z-index: 1; /* Define uma base de camada */
}

/* A Curva (Nuvem) */
.card.sky .card-header-block::after { 
    content: ""; 
    position: absolute; 
    bottom: -2px; /* Ajustado para não sobrar linha branca */
    left: 0; 
    right: 0; 
    height: 40px; 
    background: #f0f9ff; /* Cor do fundo do card */
    border-radius: 50% 50% 0 0; 
    z-index: 2; /* Fica acima do fundo azul */
}

/* OS TEXTOS: Garantindo que fiquem acima de TUDO */
.card.sky .card-header-block h5,
.card.sky .card-header-block small {
    position: relative;
    z-index: 3 !important; /* Ganha da curva (z-index 2) */
    display: block; /* Garante que o small se comporte bem */
}

/* LOGO: Circular com Aura de Brilho */
.card.sky .card-header-block img {
    width: 115px;
    height: 115px;
    object-fit: cover;
    border-radius: 50% !important;
    border: 5px solid rgba(255, 255, 255, 0.3);
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.card.sky .card-header-block h5 {
    font-weight: 700;
    font-size: 1.8rem;
    position: relative;
    z-index: 2;
}

.card.sky .card-header-block small {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------
   DESCRIPTION (Efeito Glassmorphism)
   ------------------------------------------------------------ */

.card.sky .card-description-block { 
    background-color: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    color: #0369a1; 
    margin: 20px;
    padding: 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* ------------------------------------------------------------
   SERVICES
   ------------------------------------------------------------ */

.card.sky .card-services-block { 
    background-color: #ffffff; 
    border: 1px solid #bae6fd; 
    border-radius: 20px; 
    margin: 0 20px 20px;
    padding: 1rem;
}

.card.sky .card-services-block li { 
    color: #0369a1; 
    padding: 8px 0;
    border-bottom: 1px solid #f0f9ff;
    font-weight: 500;
}

.card.sky .card-services-block li::before {
    content: "✦";
    color: #38bdf8;
    margin-right: 10px;
}

/* ------------------------------------------------------------
   WHATSAPP (SKY BLUE PILL)
   ------------------------------------------------------------ */

.card.sky .btn-whatsapp { 
    background: #0ea5e9; 
    color: #ffffff !important;
    border-radius: 50px !important; 
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 25px 25px;
    padding: 0.9rem;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
    transition: all 0.3s ease;
}

.card.sky .btn-whatsapp:hover {
    transform: translateY(-2px);
    background: #0284c7;
    box-shadow: 0 15px 25px rgba(14, 165, 233, 0.4);
}

/* ------------------------------------------------------------
   LINKS SOCIAIS
   ------------------------------------------------------------ */

.card.sky .card-social-icon { 
    background-color: #ffffff; 
    border: 1px solid #e0f2fe; 
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

.card.sky .card-social-icon i { color: #0ea5e9 !important; }

.card.sky .card-social-icon:hover {
    background-color: #0ea5e9;
    transform: scale(1.1);
}

.card.sky .card-social-icon:hover i { color: #ffffff !important; }

/* ------------------------------------------------------------
   MODAL SKY
   ------------------------------------------------------------ */

.modal.sky .modal-content { 
    background: #f0f9ff; 
    border: none; 
    border-radius: 30px; 
    overflow: hidden;
}

.modal.sky .p-4.bg-white { 
    background: rgba(255, 255, 255, 0.8) !important; 
    color: #0369a1 !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.modal.sky h5.text-dark { 
    color: #0ea5e9 !important; 
    font-weight: 800; 
}

.modal.sky h4.text-success { 
    color: #38bdf8 !important; 
    font-weight: 800;
}

.modal.sky .btn-success { 
    background: #0ea5e9 !important; 
    border-radius: 50px !important; 
    border: none !important; 
    font-weight: 700;
}

.modal.sky .btn-close { 
    background-color: #fff; 
    border-radius: 50%; 
    opacity: 1; 
    padding: 0.6rem;
}