/* ===== BASE ===== */
body, html {
  margin:0;
  padding:0;
  font-family:'Segoe UI';
}

/* ===== LAYOUT ===== */
.main-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px;
}

.app-container{
    background:white;
    width:100%;
    max-width:1298px;
    border-radius:20px;
    overflow:hidden;
    display:flex;
}

/* ===== PANELS ===== */
.left-panel{
    width:55%;
    background:#2529d5;
    color:white;
    padding:42px;
}

.right-panel{
    width:45%;
    padding:1px;
}

/* ===== HEADER ===== */
.header-feelink{
    background:#2529d5;
    color:white;
    padding:20px;
    text-align:center;
}

/* ===== CONTENT ===== */
.membership-description{
    background:#f8f7f3;
    border-radius:15px;
    padding:20px;
    margin-top:20px;
}

.membership-description p{
    font-size:14px;
    color:#3c3c44;
}

.pdf-box{
    background:#e6fbf8;
    border:2px dashed #00D5c4;
    border-radius:12px;
    padding:5px;
    text-align:center;
}

.price-box{
    background:#00D5c4;
    color:#2529d5;
    padding:20px;
    border-radius:15px;
    text-align:center;
    font-size:22px;
}

.btn-feelink{
    background:#2529d5;
    color:white;
    padding:12px;
    width:100%;
    border-radius:10px;
    border:none;
}

/* ===== PREMIUM ===== */
.premium-mode .left-panel{ background:#011c3a !important; }
.premium-mode .header-feelink{ background:#011c3a !important; }
.premium-mode .price-box{
    background:linear-gradient(135deg,#fec202,#ee920d);
    color:#011c3a;
}
.premium-mode .btn-feelink{
    background:linear-gradient(135deg,#fec202,#ee920d);
    color:#011c3a;
}

/* ===== PLATINO ===== */
.platinum-mode .left-panel{background: radial-gradient(circle,rgba(251, 251, 250, 1) 0%, rgba(70, 73, 77, 1) 50%, rgba(173, 178, 182, 1) 100%);}
.platinum-mode .header-feelink{background: linear-gradient(135deg, #2e2e2e, #6e6e6e) !important;}
.platinum-mode .price-box{
    background: linear-gradient(135deg, #f5f5f5, #cfcfcf, #a6a6a6);
    color: #2e2e2e;
}
.platinum-mode .btn-feelink{
    background: linear-gradient(135deg, #e0e0e0, #bfbfbf, #8f8f8f);
    color: #2e2e2e;
    border: 1px solid #a6a6a6;
}

/* ========================================= */
/* ========== MOBILE PRO FIX =============== */
/* ========================================= */

@media (max-width: 991px){

    /* Layout vertical */
    .app-container{
        flex-direction:column;
        border-radius:0;
        max-width:100%;
    }

    .left-panel,
    .right-panel{
        width:100%;
        padding:20px;
    }

    /* Ocultar panel izquierdo en mobile */
    .left-panel{
        display:none !important;
    }

    /* Header más compacto */
    .header-feelink{
        padding:15px;
        font-size:16px;
    }

    /* Espaciado general */
    .main-wrapper{
        padding:0;
        align-items:flex-start;
    }

    /* Texto más legible */
    .membership-description p{
        font-size:13px;
        line-height:1.4;
    }

    /* Arreglar TODOS los flex internos */
    .membership-description div[style*="display:flex"]{
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    /* Imágenes adaptativas */
    img{
        max-width:100% !important;
        height:auto !important;
    }

    /* PRICE */
    .price-box{
        font-size:18px;
        padding:15px;
    }

    /* BOTONES */
    .btn-feelink{
        padding:14px;
        font-size:16px;
    }

    /* SELECTOR */
    .container .d-flex{
        flex-direction:column;
    }

    .container .btn{
        width:100% !important;
    }

    /* FORM */
    .form-control{
        font-size:16px;
        padding:12px;
    }

    /* INPUT TEL ROW FIX */
    .row.g-2{
        flex-direction:row;
    }

    .row.g-2 > div{
        padding:0 3px;
    }

}
.btn-platino {
  --bs-btn-color: #000;
  --bs-btn-bg: #D3D6D4;
  --bs-btn-border-color: #D3D6D4;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ABABA8;
  --bs-btn-hover-border-color: #ABABA8;
  --bs-btn-focus-shadow-rgb: 217,164,6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ABABA8;
  --bs-btn-active-border-color: #D7D7D5;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #D3D6D4;
  --bs-btn-disabled-border-color: #ABABA8;
}
.platino-icon {
  font-size: 24px;
  background: linear-gradient(
    145deg,
    #f5f5f5 0%,
    #dcdcdc 20%,
    #bfbfbf 40%,
    #e6e6e6 60%,
    #a6a6a6 80%,
    #f2f2f2 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  text-shadow:
    0 1px 1px rgba(255,255,255,0.6),
    0 -1px 1px rgba(0,0,0,0.2);
}
/*CSS ÍCONOS BENEFICIOS*/
.benefit-card {
    border-radius: 12px;
    padding: 18px;
    height: 100%;
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.benefit-icon {
    font-size: 28px;
    color: #232767;
    margin-bottom: 10px;
}

.benefit-title {
    font-weight: bold;
    color: #232767;
    font-size: 16px;
    margin-bottom: 5px;
}

.benefit-text {
    color: #3c3c44;
    font-size: 15px;
}
/*FÍN CSS ÍCONOS BENEFICIOS*/

/*CSS PARA MODAL*/
.plan-header {
    font-weight: bold;
    font-size: 18px;
}

.plan-basic {
    background: #f5f5f5;
}

.plan-premium {
    background: #e8ecff;
    border: 2px solid #232767;
    transform: scale(1.03);
}

.plan-platinum {
    background: #fff4e6;
}

.check {
    color: #28a745;
    font-size: 18px;
}

.cross {
    color: #6a6a6a;
}

.highlight {
    font-weight: bold;
    color: #232767;
}
.btncomparar{
    color: #fff;
}
.btn-mem {
 font-size: 24px;   
}
.btn-mem:hover {
 font-size: 25px;   
}
/* Fondo por defecto (MÓVIL) */
.fondo {
  min-height: 100vh; /* ocupa toda la pantalla */
  background-image: url("../img/backgroundm.jpg");
  background-size: cover;        /* ajusta para cubrir toda la pantalla */
  background-position: center;   /* centra la imagen */
  background-repeat: no-repeat;  /* evita que se repita */
}

/* Imagen para escritorio */
@media (min-width: 1024px) {
  .fondo {
    background-image: url("../img/backgrounde.webp");
  }
}

.tipmemb{background-color: #2529D5; color: #FFF;}
.tipmemp {background-color: #FFCA2C; color: #FFF;}
.tipmempl{ background-color: #898D91; color: #FFF;}

/* Fondo oscuro cuando aparece el aviso */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 999;
}

/* Barra inferior */
#terms-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #222;
    color: white;
    padding: 20px;
    text-align: center;
    z-index: 1000;
    display: none;
}

#terms-banner button {
    margin-left: 15px;
    padding: 10px 20px;
    border: none;
    background: #4CAF50;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

#terms-banner button:hover {
    background: #45a049;
}