/* ============================================================
   PLENIT NODE · Calculadora de intereses (sobre theme.css)
   ============================================================ */

.hero-sm{padding:30px 16px 4px}
.hero-sm .hero-logo{width:min(360px,68vw)}

.calc-card{height:100%}
.calc-card .hud-fill{padding:clamp(20px,3vw,30px)}

/* Cabecera de la tarjeta */
.calc-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.calc-coin{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 84px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.calc-plan-name{display:block;font-family:'Unbounded','Cinzel',serif;font-weight:700;font-size:1.9rem;letter-spacing:.05em;line-height:1}
.calc-plan-sub{display:block;color:var(--muted);font-size:.85rem;margin-top:6px}
.calc-n3 .calc-plan-name{color:var(--blue-soft)}
.calc-n3 .calc-coin{filter:drop-shadow(0 0 20px rgba(91,200,255,.45))}
.calc-n6 .calc-plan-name{color:var(--gold-soft)}
.calc-n6 .calc-coin{filter:drop-shadow(0 0 20px rgba(244,212,136,.45))}

/* Pasos numerados */
.calc-step{display:flex;align-items:center;gap:10px;margin-bottom:12px;text-transform:uppercase;
    font-size:.78rem;font-weight:700;letter-spacing:.12em;color:#c7d2ef}
.calc-num{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:7px;
    font-size:.8rem;color:#0a0e1a;font-weight:800}
.calc-n3 .calc-num{background:linear-gradient(160deg,var(--blue),var(--blue-soft))}
.calc-n6 .calc-num{background:linear-gradient(160deg,var(--gold-deep),var(--gold-soft))}

/* Selector de monto */
.calc-amount{
    background:rgba(5,9,18,.85);border:1px solid var(--line);color:#fff;font-weight:700;font-size:1.05rem;
    border-radius:12px;padding:.7rem .9rem;width:100%;
}
.calc-amount:focus{box-shadow:0 0 0 .2rem rgba(27,157,240,.18);border-color:var(--blue);outline:none}
.calc-amount option{background:var(--navy-2);color:var(--text)}
.calc-n6 .calc-amount:focus{box-shadow:0 0 0 .2rem rgba(212,166,74,.2);border-color:var(--gold)}

/* Detalle de intereses */
.calc-detail{list-style:none;margin:0;padding:0}
.calc-detail li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);
    color:var(--muted);font-size:.9rem}
.calc-detail li .hex{width:30px;height:30px;flex:0 0 30px;font-size:.85rem}
.calc-detail li b{margin-left:auto;color:#fff;font-weight:700;font-size:.98rem}
.calc-detail .calc-total{border-bottom:none;margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.calc-detail .calc-total b{font-size:1.25rem}
.calc-n3 .calc-detail .calc-total b{color:var(--blue-soft)}
.calc-n6 .calc-detail .calc-total b{color:var(--gold-soft)}

/* Tabla de calendario */
.calc-table-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.calc-table{width:100%;border-collapse:collapse;font-size:.86rem}
.calc-table th{
    text-align:left;padding:10px 12px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);font-weight:700;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)
}
.calc-table td{padding:9px 12px;border-bottom:1px solid rgba(120,160,220,.07);color:#cdd8f2}
.calc-table tbody tr:last-child td{border-bottom:none}
.calc-amt{font-weight:700;color:#fff;text-align:right}
.calc-table th:last-child{text-align:right}
.calc-rownum{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
    font-size:.75rem;font-weight:700;background:rgba(120,160,220,.12);color:#fff}
.calc-n3 .calc-rownum{background:rgba(27,157,240,.18);color:var(--blue-soft)}
.calc-n6 .calc-rownum{background:rgba(212,166,74,.18);color:var(--gold-soft)}

/* Vencimiento */
.calc-due{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:12px;
    background:rgba(5,9,18,.5);border:1px solid var(--line);font-size:.85rem;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:#c7d2ef}
.calc-due b{margin-left:auto;font-size:1rem}
.calc-n3 .calc-due b{color:var(--blue-soft)}
.calc-n6 .calc-due b{color:var(--gold-soft)}

/* Cuota mensual destacada */
.calc-cuota{margin-top:18px;padding:16px;border-radius:14px;text-align:center;
    border:1px solid var(--line);background:rgba(5,9,18,.5)}
.calc-cuota small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--muted)}
.calc-cuota-amt{font-family:'Unbounded','Cinzel',serif;font-weight:800;font-size:1.85rem;line-height:1.25;margin:2px 0}
.calc-cuota.n3{border-color:rgba(27,157,240,.35);background:rgba(27,157,240,.07)}
.calc-cuota.n3 .calc-cuota-amt{color:var(--blue-soft)}
.calc-cuota.n6{border-color:rgba(212,166,74,.35);background:rgba(212,166,74,.07)}
.calc-cuota.n6 .calc-cuota-amt{color:var(--gold-soft)}

/* Aviso de encabezado: aclara que las cifras son un costo, no un rendimiento */
.calc-aviso{display:flex;align-items:center;gap:16px}
.calc-aviso p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.calc-aviso b{color:#fff}

.calc-foot-note{max-width:760px;margin:34px auto 0;text-align:center;color:var(--muted);font-size:.85rem;line-height:1.6}
.calc-foot-note i{color:var(--gold)}
.calc-foot-note strong{color:#dfe7f8}
.calc-riesgo{margin-top:14px;padding:14px 16px;border-radius:12px;text-align:left;
    border:1px solid rgba(255,107,107,.28);background:rgba(255,107,107,.06)}
.calc-riesgo i{color:#ff9d6b}
.calc-riesgo strong{color:#ffb9a3}

@media (max-width:480px){
    .calc-coin{width:64px;height:64px;flex-basis:64px}
    .calc-plan-name{font-size:1.5rem}
    .calc-table th,.calc-table td{padding:8px 8px;font-size:.8rem}
}

/* Nota que explica cuándo arranca el nodo y cuándo llega el primer cobro.
   Sin ella, las fechas de la tabla parecen arbitrarias. */
.calc-nota{
    display:flex;gap:10px;align-items:flex-start;
    margin:22px auto 0;max-width:900px;padding:14px 18px;
    border:1px solid var(--line);border-radius:12px;
    background:rgba(120,160,220,.05);
    color:var(--muted);font-size:.86rem;line-height:1.6;
}
.calc-nota i{color:var(--gold);font-size:1.05rem;margin-top:2px}
.calc-nota b{color:#fff}