/* =========================
   FONDO GENERAL
========================= */
body {
    background-image: url(/web_images/Fondo-03.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: #d4d4d4;
}

/* =========================
   GRID DE PLANES
========================= */

/* todas las columnas y el aside */
aside,
#plansGrid > div {
    background-color: #333 !important;
}

aside{
    border: 1px solid #efb810 !important;
    color:#d4d4d4 !important;
}
aside h2, aside b{
    color:#fff !important;
}

/* =========================
   BOTONES DE PLANES
========================= */
#plansGrid button {
    background-color: #555 !important;
    border: 1px solid #efb810 !important;
    color: #d4d4d4 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover */
#plansGrid button:hover {
    background-color: #666 !important;
    border-color: #ffd54a !important;
}

/* Seleccionado */
#plansGrid button.border-emerald-400 {
    background-color: #3b3838 !important;
    border-color: #efb810 !important;
}

/* =========================
   TEXTOS
========================= */

/* Texto principal en blanco */
#plansGrid button .font-semibold,
#plansGrid button .text-base,
#plansGrid button .text-lg {
    color: #ffffff !important;
}

/* Texto secundario */
#plansGrid .text-slate-300,
#plansGrid .text-slate-400,
#plansGrid .text-xs {
    color: #d4d4d4 !important;
}

/* =========================
   COLUMNA COMPLETA (opcional)
========================= */
#plansGrid > div {
    border: 1px solid #efb810;
}

/* =========================
   RESPONSIVE AJUSTES
========================= */
@media (max-width: 768px) {
    #plansGrid button {
        background-color: #4f4f4f !important;
    }
}

/* =========================
   BLOQUE INCLUYE (PACK FEATURES)
========================= */
.includesBox{
    background-color:#333 !important;
    border: 1px solid #efb810 !important;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 16px;
    color:#d4d4d4;
}

.includesTitle{
    color:#fff !important;
    font-weight:700;
    font-size: 18px;
    margin-bottom: 10px;
}

.includesGrid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.includesItem{
    background-color:#555 !important;
    border: 1px solid #efb810 !important;
    border-radius: 14px;
    padding: 12px;
}

.includesItem h4{
    color:#fff !important;
    font-weight:700;
    margin-bottom: 6px;
    font-size: 14px;
}

.includesItem p{
    color:#d4d4d4 !important;
    font-size: 13px;
    line-height: 1.35;
}

.includesNote{
    margin-top: 12px;
    font-size: 12px;
    color:#d4d4d4 !important;
    opacity: 0.95;
}

/* =========================
   ICONOS EN BLOQUE INCLUYE
========================= */
.includesTitle i{
    color:#efb810;
    margin-right:6px;
}

.includesItem h4 i{
    color:#efb810;
    margin-right:6px;
}

.includesItem li{
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
}

.includesItem li i{
    color:#efb810;
    font-size:13px;
    min-width:16px;
}

.includesNote i{
    color:#efb810;
    margin-right:6px;
}

@media (max-width: 768px){
    .includesGrid{
        grid-template-columns: 1fr;
    }
}

/* =========================
   COMPARADOR DE PLANES
========================= */
.compareBox{
    background-color:#333 !important;
    border:1px solid #efb810 !important;
    border-radius:18px;
    padding:16px;
    margin-bottom:16px;
    color:#d4d4d4;
}

.compareTitle{
    color:#fff !important;
    font-weight:800;
    font-size:18px;
    margin-bottom:12px;
}

.compareTitle i{
    color:#efb810;
    margin-right:6px;
}

.compareTableWrap{
    overflow:auto;
    border-radius:14px;
    border:1px solid #efb810;
}

.compareTable{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width: 760px; /* ayuda en pantallas pequeñas (scroll horizontal) */
}

.compareTable thead th{
    background:#444;
    color:#fff;
    font-weight:800;
    font-size:13px;
    padding:12px 10px;
    border-bottom:1px solid #efb810;
    position:sticky;
    top:0;
    z-index:1;
}

.compareTable tbody td{
    background:#555;
    color:#d4d4d4;
    padding:12px 10px;
    border-bottom:1px solid rgba(239,184,16,0.35);
    vertical-align:top;
    font-size:13px;
}

.compareTable tbody tr:last-child td{
    border-bottom:none;
}

.compareRowTitle{
    background:#444 !important;
    color:#fff !important;
    font-weight:800;
    width: 220px;
    white-space:nowrap;
}

.compareBadge{
    display:inline-block;
    padding:2px 10px;
    border:1px solid #efb810;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    color:#fff;
    background:rgba(239,184,16,0.10);
    white-space:nowrap;
}

.compareOk{
    color:#efb810;
    font-weight:900;
}

.compareMuted{
    color:#d4d4d4;
    opacity:0.9;
}

.compareNote{
    margin-top:12px;
    font-size:12px;
    color:#d4d4d4;
    opacity:0.95;
}
.compareNote i{ color:#efb810; margin-right:6px; }

/* =========================
   ICONOS EN plansGrid
========================= */
#plansGrid i{
    color:#efb810;
}

.planTitle i{
    margin-right:6px;
}

.planHeader i{
    margin-right:6px;
    font-size:13px;
}

#plansGrid button i{
    min-width:16px;
}

 =========================
   BADGES DE PLANES
========================= */
.planBadge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:8px;
    padding:2px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
    border:1px solid #efb810;
}

/* ⭐ MÁS VENDIDO */
.badgeBest{
    background:linear-gradient(135deg, #efb810, #ffd54a);
    color:#222 !important;
}

/* 👑 RECOMENDADO */
.badgeRecommended{
    background:linear-gradient(135deg, #b98bfd, #efb810);
    color:#222 !important;
}

/* Íconos dentro del badge */
.planBadge i{
    color:#222 !important;
    font-size:11px;
}