/* =====================
       Paleta y tipografía (modo claro, mate y legible)
       ===================== */
:root{
    --petal-1:#e9a9f4; --petal-2:#cf8ae4; --petal-3:#9a66b8;
    --leaf-1:#87d4a4; --leaf-2:#63b684;

    --bg:#f8f7fb; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f3eef8;

    --text:#1f1b24; --muted:#6c6674;

    --shadow:0 8px 20px rgba(25, 20, 31, .08);
    --radius:16px;
    --ring:0 0 0 3px rgba(156, 163, 175, .25);

    --g-buga:linear-gradient(135deg,var(--petal-1),var(--petal-2) 55%,var(--petal-3));
}

*{box-sizing:border-box}
html{font-size:16px}
body{
    margin:0; padding:0;
    background:
            radial-gradient(1100px 360px at 15% -10%,rgba(207,138,228,.10),transparent),
            radial-gradient(820px 220px at 110% 0,rgba(135,212,164,.08),transparent),
            linear-gradient(180deg,var(--bg),var(--bg-2));
    color:var(--text);
    font-family:Manrope,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:#7a56b3;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:auto;padding:28px}

/* Header */
header{
    position:sticky;top:0;z-index:60;
    background:rgba(255,255,255,.8);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(0,0,0,.06)
}
.nav{display:flex;gap:18px;align-items:center;justify-content:space-between}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:0.6px;font-size:26}
.logo .flower{width:46px;height:46px;position:relative;filter:drop-shadow(0 2px 6px rgba(154,102,184,.25))}
.logo .flower:before,.logo .flower:after{
    content:"";position:absolute;inset:0;
    border-radius:60% 40% 60% 40%/60% 40% 60% 40%;
    background:conic-gradient(from 210deg,var(--petal-1),var(--petal-2),var(--petal-3));
    transform:rotate(25deg)
}
.logo .flower:after{transform:rotate(-25deg);opacity:.8}
nav a{color:var(--muted);font-weight:600}
nav a:hover{color:var(--text)}
.cta-btn{
    background:linear-gradient(135deg,#8c68be,#a87fd0);
    color:#ffffff;border:none;padding:10px 16px;border-radius:999px;
    font-weight:800;box-shadow:var(--shadow);cursor:pointer;
    transition:filter .2s, transform .06s ease
}
.cta-btn:hover{filter:brightness(.98)}
.cta-btn:active{transform:translateY(1px)}
.ghost-btn{
    background:transparent;border:1px solid rgba(0,0,0,.10);padding:10px 14px;
    color:var(--text);border-radius:999px;font-weight:700;transition:background .2s
}
.ghost-btn:hover{background:rgba(0,0,0,.03)}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:44px 0}
.hero h1{font-size:clamp(28px,5vw,46px);line-height:1.2;margin:0 0 .6rem}
.hero p{font-size:clamp(14px,2vw,18px);color:var(--muted)}
.kpis{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}

/* Card base (flex-col para fijar footer abajo) */
.card{
    background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.01));
    padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);
    border:1px solid rgba(0,0,0,.06);
    display:flex;flex-direction:column;min-height:100%;
}

/* Grid */
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.hero{grid-template-columns:1fr}.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid.cols-3,.grid.cols-4,.grid.cols-2{grid-template-columns:1fr}}

/* Secciones */
.section{padding:30px 0}
.sectionHead{padding:40px 0; margin-top: 20px; margin-bottom: 20px;}
.section h2{font-size:clamp(22px,3.4vw,32px);margin:0 0 .6rem;font-weight:800}
.section p.lead{margin:0 0 1rem;color:var(--muted)}
.section.alt{background:linear-gradient(180deg,var(--panel-2),var(--bg))}

/* Etiquetas pequeñas siempre arriba */
.tag,.level{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(154,102,184,.14);
    border:1px solid rgba(154,102,184,.26);
    color:#5b3c7c;
    padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;
    width:max-content;margin-bottom:.4rem;
}

.level--warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:#8a4b0d}
.level--ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25);color:#166534}
.level--adv{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.25);color:#3730a3}

/* Títulos de tarjeta */
.title{
    font-size:1.12rem;font-weight:800;letter-spacing:.2px;
    margin:0 0 .35rem;color:#2b2440;
}

/* Texto y listas */
p{margin:0 0 .9rem;color:var(--muted)}
ul{padding-left:22px;margin:.1rem 0 .9rem}
ul li{margin:.28rem 0}
.kpis{margin-top:.2rem}
.pill{
    display:inline-block;padding:7px 12px;border-radius:999px;
    background:rgba(0,0,0,.03);
    border:1px solid rgba(0,0,0,.08);
    font-size:12px;color:var(--muted)
}

/* Footer de tarjeta (precio clicable a la derecha) */
.card-footer{margin-top:auto;display:flex;justify-content:flex-end}
.price-chip{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:9px 12px;border-radius:999px;
    background:rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.08);
    color:#4a3d64;font-weight:800;font-size:.95rem;
    text-decoration:none;
    transition:transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.price-chip:hover{background:rgba(0,0,0,.06);text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.price-chip:active{transform:translateY(1px)}

/* Formularios */
label{display:block;margin-top:12px;color:var(--text);font-weight:600;font-size:.92rem}
label:first-child{margin-top:0}
.input, select, textarea{
    width:100%;margin-top:6px;background:#fbfafc;
    border:1px solid rgba(0,0,0,.10);border-radius:12px;color:var(--text);
    padding:12px 14px;outline:none;line-height:1.5
}
textarea{min-height:120px}
.input:focus, select:focus, textarea:focus{box-shadow:var(--ring);border-color:#b9b5c1}

/* Tabla (resumen en Programas) */
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{
    text-align:left;font-weight:800;color:#4a3d64;
    padding:12px 14px;background:#f3eef8;border-bottom:1px solid rgba(0,0,0,.08)
}
tbody td{padding:10px 14px;color:var(--muted)}
tbody tr:nth-child(odd){background:#fbf9fe}
tbody tr:nth-child(even){background:#ffffff}

/* Footer básico */
footer{padding:40px 0;color:var(--muted);border-top:1px solid rgba(0,0,0,.06)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr}}

/* CTA flotante */
.floating-cta{
    position:fixed;right:16px;bottom:16px;display:flex;gap:10px;align-items:center;
    background:linear-gradient(135deg,var(--panel),#ffffff);
    border:1px solid rgba(0,0,0,.06);padding:10px 14px;border-radius:999px;box-shadow:var(--shadow)
}
.floating-cta span{color:var(--muted);font-weight:800}
.floating-cta button{
    background:linear-gradient(135deg,#8c68be,#a87fd0);
    border:none;color:#ffffff;font-weight:900;padding:8px 14px;border-radius:999px;cursor:pointer
}

/* Animación sutil */
.fade-in{opacity:0;transform:translateY(6px);animation:fade .5s ease-out forwards}
@keyframes fade{to{opacity:1;transform:none}}

/* Decor vides suavizadas */
.vines{position:absolute;inset:auto -80px -80px auto;pointer-events:none;opacity:.18;filter:blur(2px)}
.vine{position:absolute;width:160px;height:160px;border:2px dashed rgba(99, 153, 124, .25);border-radius:55% 45% 60% 40%/50% 60% 40% 50%;transform:rotate(20deg)}
.vine:nth-child(2){left:60px;top:80px;transform:rotate(-10deg)}



/* Existing CSS */
.summary-details {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.summary-line.total {
    font-size: 1.25rem;
    font-weight: bold;
    color: #2e3338;
}

/* Add this to your CSS for right-alignment */
.summary-line span {
    text-align: right;
    width: 50%; /* Distribute width equally for alignment */
}

/* Optional: To make the labels bolder, you can target the first span */
.summary-line span:first-child {
    text-align: left;
    font-weight: bold;
}