/* ============================================================
   PediChateando — Planes (/planes, templates/registro/planes.html, js/planes.js).
   Sobre la plantilla layouts/chat-publico.html, pero SIN los mensajes animados (pedido del
   usuario: que los planes queden más arriba) y con el contenido a lo ancho.
   Mobile-first; colores del sitio (fondo claro, azul/violeta, verde WhatsApp).
   ============================================================ */
.pl-pagina {
    --pl-primary: #1a73e8;
    --pl-violeta: #8b5cf6;
    --pl-verde: #16a34a;
    --pl-verde-wa: #25d366;
    --pl-texto: #0f172a;
    --pl-gris: #64748b;
    --pl-borde: #e2e8f0;
    --pl-degradado: linear-gradient(135deg, var(--pl-primary), var(--pl-violeta));
}

/* La plantilla pone dos columnas en escritorio; los planes necesitan todo el ancho */
.pl-pagina .pc-main { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: none; padding-top: 4px; }
/* en planes no van los mensajes animados: así los planes quedan más arriba */
.pl-pagina .pc-intro { display: none; }
.pl-pagina .pc-contenido { width: 100%; max-width: 1280px; flex: none; }

.pl { text-align: center; }
.pl-titulo { margin: 0 0 6px; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.8px; color: var(--pl-texto); }
.pl-titulo span { background: var(--pl-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-sub { margin: 0 auto; max-width: 560px; color: var(--pl-gris); font-size: 14.5px; line-height: 1.5; }

/* ---- Mensual / Anual ---- */
.pl-ciclo {
    display: flex; max-width: 320px; margin: 18px auto 6px; padding: 4px;
    background: #fff; border: 1px solid var(--pl-borde); border-radius: 999px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.pl-ciclo button {
    flex: 1; padding: 9px 14px; border: none; border-radius: 999px; background: transparent; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--pl-gris); transition: background 0.2s ease, color 0.2s ease;
}
.pl-ciclo button small { display: block; font-size: 10.5px; font-weight: 600; opacity: 0.85; }
.pl-ciclo button.activo { background: var(--pl-degradado); color: #fff; }

/* ---- Carrusel de tarjetas ---- */
.pl-carrusel { position: relative; margin: 0 -16px; }
.pl-slider {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 22px 16px 26px; scrollbar-width: none; outline: none;
}
.pl-slider::-webkit-scrollbar { display: none; }
.pl-nav {
    display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1;
    background: #fff; color: var(--pl-texto); border: 1px solid var(--pl-borde); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    transition: background 0.2s ease, color 0.2s ease;
}
.pl-nav:hover:not(:disabled) { background: var(--pl-primary); color: #fff; border-color: var(--pl-primary); }
.pl-nav:disabled { opacity: 0.35; cursor: default; }
.pl-prev { left: 4px; }
.pl-next { right: 4px; }

.pl-card {
    position: relative; flex: 0 0 82%; max-width: 300px; scroll-snap-align: center; box-sizing: border-box;
    display: flex; flex-direction: column; padding: 24px 20px 20px; text-align: left;
    background: #fff; border: 2px solid var(--pl-borde); border-radius: 18px; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pl-card:hover { transform: translateY(-4px); border-color: rgba(26, 115, 232, 0.45); }
.pl-card.gratis { border-color: rgba(22, 163, 74, 0.45); background: linear-gradient(180deg, rgba(37, 211, 102, 0.07), #fff 45%); }
.pl-card.popular {
    border-color: var(--pl-primary); background: linear-gradient(180deg, rgba(26, 115, 232, 0.07), #fff 45%);
    box-shadow: 0 20px 40px -20px rgba(26, 115, 232, 0.55);
}
.pl-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    padding: 4px 14px; border-radius: 999px; background: var(--pl-degradado); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px;
}
.pl-nombre { display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 800; color: var(--pl-texto); }
.pl-desc { min-height: 34px; margin: 4px 0 14px; font-size: 12.5px; line-height: 1.4; color: var(--pl-gris); }
.pl-precio { display: flex; align-items: baseline; gap: 5px; }
.pl-monto { font-size: 34px; font-weight: 900; letter-spacing: -1px; color: var(--pl-texto); }
.pl-monto.gratis { color: var(--pl-verde); }
.pl-monto.medida { font-size: 24px; }
.pl-periodo { font-size: 12.5px; font-weight: 500; color: var(--pl-gris); }
.pl-precio-sub { min-height: 17px; margin: 2px 0 14px; font-size: 12px; color: var(--pl-gris); }
.pl-precio-sub.ahorro { color: var(--pl-verde); font-weight: 700; }

.pl-post {
    margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45; color: var(--pl-gris);
    background: rgba(37, 211, 102, 0.08); border: 1px dashed rgba(22, 163, 74, 0.5);
}
.pl-post b { display: block; margin-top: 2px; font-size: 13px; color: var(--pl-texto); }

.pl-creditos {
    margin-bottom: 16px; padding: 12px; border-radius: 12px; text-align: center; font-size: 12px; color: var(--pl-gris);
    background: rgba(26, 115, 232, 0.06); border: 1px solid rgba(26, 115, 232, 0.25);
}
.pl-creditos b { display: block; font-size: 22px; font-weight: 900; color: var(--pl-texto); }

.pl-btn {
    display: block; margin-top: auto; padding: 13px; border-radius: 12px; text-align: center; text-decoration: none;
    font-size: 14px; font-weight: 700; border: 1.5px solid transparent; transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}
.pl-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pl-btn.verde { background: linear-gradient(90deg, var(--pl-verde-wa), var(--pl-verde)); color: #fff; }
.pl-btn.azul { background: var(--pl-degradado); color: #fff; }
.pl-btn.outline { background: #fff; color: var(--pl-texto); border-color: var(--pl-borde); }
.pl-btn.outline:hover { border-color: var(--pl-primary); }

.pl-dots { display: flex; justify-content: center; gap: 6px; }
.pl-dots span { width: 7px; height: 7px; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: width 0.2s ease, background 0.2s ease; }
.pl-dots span.activo { width: 20px; background: var(--pl-primary); }

@media (min-width: 600px) {
    .pl-titulo { font-size: 34px; }
    .pl-card { flex-basis: 290px; }
    .pl-nav { display: flex; align-items: center; justify-content: center; }
    .pl-carrusel { margin: 0; padding: 0 28px; }
}

@media (min-width: 1200px) {
    .pl-titulo { font-size: 38px; }
}

.pl-vacio { width: 100%; padding: 40px 16px; text-align: center; color: var(--pl-gris); }

/* Beneficios del plan (uno por renglón en el admin) */
.pl-beneficios { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-beneficios li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.4; color: var(--pl-texto); }
.pl-beneficios li::before {
    content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
    background: rgba(37, 211, 102, 0.15); color: var(--pl-verde);
}

/* V13: moneda, "Próximamente" y packs */
.pl-moneda { text-align: center; color: var(--pl-gris); font-size: 13px; margin: 14px auto 0; max-width: 560px; }
.pl-moneda a { color: inherit; text-decoration: underline; cursor: pointer; }
.pl-card.proximamente { opacity: .8; }
.pl-btn.deshabilitado { pointer-events: none; opacity: .6; background: #e5e7eb; color: #6b7280; border-color: #e5e7eb; }
.pl-packs { margin: 36px auto 0; max-width: 900px; text-align: center; }
.pl-packs h2 { font-size: 20px; margin: 0 0 6px; }
.pl-packs-lista { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.pl-pack { background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 16px; padding: 16px; }
.pl-pack b { display: block; font-size: 18px; }
.pl-pack span { color: var(--pl-gris); font-size: 13px; }
.pl-pack .pl-pack-precio { display: block; font-size: 22px; font-weight: 900; margin-top: 6px; color: var(--pl-texto); }
@media (min-width: 640px) { .pl-packs-lista { grid-template-columns: repeat(3, 1fr); } }

/* ---- Condiciones debajo de los planes (V57) ---- */
.pl-legal { max-width: 760px; margin: 28px auto 0; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; font-size: 13.5px; color: #475569; line-height: 1.55; }
.pl-legal p { margin: 0 0 8px; } .pl-legal p:last-child { margin: 0; }
.pl-legal a { color: #1a73e8; }