/* ============ IPERFOPC — paleta institucional ============ */
:root {
  --navy:#1B2E5A; --navy-dark:#131F3E; --red:#A31621;
  --gold:#B8860B; --gold-light:#D4A93C; --soft:#F4F6FA;
}
.text-navy{color:var(--navy)!important} .text-gold{color:var(--gold-light)!important}
.btn-navy{background:var(--navy);color:#fff;border:none}
.btn-navy:hover{background:var(--navy-dark);color:#fff}
.btn-gold{background:var(--gold);color:#fff;border:none;font-weight:600}
.btn-gold:hover{background:#9a7009;color:#fff}
.btn-red{background:var(--red);color:#fff;border:none}
.btn-red:hover{background:#821118;color:#fff}

/* ============ PANEL ADMIN ============ */
.admin-body{background:var(--soft)}
.sidebar{width:250px;min-height:100vh;background:linear-gradient(180deg,var(--navy-dark),var(--navy));position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-brand{text-decoration:none}
.sidebar-brand .brand-main{color:#fff;font-weight:800;font-size:1.35rem;letter-spacing:1px}
.sidebar-brand .brand-sub{color:var(--gold-light);font-size:.7rem;letter-spacing:1px}
.sidebar .nav-link{color:#C9D3E8;font-size:.88rem;padding:.45rem .75rem;border-radius:.5rem}
.sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar .nav-link i{width:20px;display:inline-block}
.main-content{min-width:0}
.card-kpi{border:none;border-radius:.8rem;box-shadow:0 2px 10px rgba(27,46,90,.08)}
.card-kpi .icon{width:44px;height:44px;border-radius:.7rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff}
.table thead th{background:var(--navy);color:#fff;font-size:.8rem;white-space:nowrap}
.badge-estado{font-size:.72rem}

/* ============ LOGIN ============ */
.login-body{background:linear-gradient(140deg,var(--navy-dark),var(--navy) 60%,#24407C)}
.login-card{width:100%;max-width:400px;border-radius:1rem}
.login-brand{font-weight:800;font-size:1.8rem;color:var(--navy);letter-spacing:2px}

/* ============ WEB PÚBLICA ============ */
.web-body{font-family:'Montserrat',system-ui,sans-serif;color:#2A3142}
.web-navbar{background:var(--navy);padding:.8rem 0}
.web-navbar .brand-main{color:#fff;font-weight:800;font-size:1.3rem;letter-spacing:1px}
.web-navbar .brand-tag{color:#B9C4DC;font-size:.62rem;margin-left:.5rem;letter-spacing:.5px}
.web-navbar .nav-link{color:#DDE4F2;font-size:.9rem;font-weight:600}
.web-navbar .nav-link:hover{color:var(--gold-light)}
.hero{background:linear-gradient(140deg,var(--navy-dark) 0%,var(--navy) 55%,#24407C 100%);color:#fff;padding:5rem 0 4rem}
.hero h1{font-weight:800;font-size:2.6rem;line-height:1.15}
.hero .accent{color:var(--gold-light)}
.hero p{color:#C9D3E8;font-size:1.05rem;max-width:560px}
.stat-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:.8rem;padding:.8rem 1.2rem}
.stat-chip b{font-size:1.3rem;color:var(--gold-light)}
.section-title{font-weight:800;color:var(--navy)}
.section-title .accent{color:var(--red)}
.card-curso{border:none;border-radius:1rem;box-shadow:0 3px 14px rgba(27,46,90,.09);transition:transform .15s;height:100%}
.card-curso:hover{transform:translateY(-4px)}
.card-curso .tipo{font-size:.7rem;letter-spacing:1px;font-weight:700;color:var(--red);text-transform:uppercase}
.card-curso .precio{font-weight:800;color:var(--navy);font-size:1.2rem}
.card-curso .precio .tachado{color:#98A0B3;text-decoration:line-through;font-size:.85rem;font-weight:600}
.vacantes-badge{background:#FBF3E0;color:#8A6508;font-size:.72rem;font-weight:700;border-radius:2rem;padding:.2rem .7rem}
.testimonio-card{background:var(--soft);border-radius:1rem;border-left:4px solid var(--gold)}
.web-footer{background:var(--navy-dark);color:#C9D3E8}
.footer-link{color:#C9D3E8;text-decoration:none}
.footer-link:hover{color:var(--gold-light)}
.wa-float{position:fixed;bottom:22px;right:22px;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:999}
.wa-float:hover{color:#fff;transform:scale(1.06)}
.verificador-box{background:var(--soft);border-radius:1rem;padding:2rem}
.cert-ok{border-left:5px solid #2E7D32}
.cert-bad{border-left:5px solid var(--red)}

/* ============ IMPRESIÓN ============ */
@media print { .no-print{display:none!important} body{background:#fff} }
.ticket80{width:72mm;font-family:'Courier New',monospace;font-size:11px;margin:0 auto}
.ticket80 hr{border-top:1px dashed #000;margin:4px 0}
.cert-page{width:297mm;min-height:209mm;padding:14mm;box-sizing:border-box;font-family:Georgia,'Times New Roman',serif;position:relative;background:#fff}
.cert-border{border:3px solid var(--navy);outline:1px solid var(--gold);outline-offset:-9px;height:180mm;padding:12mm;text-align:center;position:relative}

/* ===================================================================
   IPERFOPC — Plataforma virtual de formación continua
   Estética: navbar oscura sobre hero, tarjetas con imagen y ponentes
   =================================================================== */
:root{
  --navy:#0B2242;
  --navy-2:#081F42;
  --navy-3:#061834;
  --rojo:#9C0E12;
  --rojo-2:#c1161b;
  --oro:#B37F24;
  --tinta:#1e2b3d;
  --gris:#677488;
  --linea:#e3e7ee;
  --claro:#f6f8fb;
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.web{font-family:var(--ff);color:var(--tinta);line-height:1.6;-webkit-font-smoothing:antialiased}
.web h1,.web h2,.web h3,.web h4,.web h5{font-weight:700;color:var(--navy);letter-spacing:-.02em}
.web p{color:var(--gris)}
.web a{text-decoration:none}
.web .container{max-width:1240px}

.txt-rojo{color:var(--rojo)!important}
.txt-navy{color:var(--navy)!important}
.bg-navy{background:var(--navy)!important}
.bg-claro{background:var(--claro)!important}

/* ---------- Topbar ---------- */
.w-top{background:var(--navy-3);color:#b9c6dd;font-size:.8rem;padding:.45rem 0}
.w-top a{color:#e8eef8}
.w-top a:hover{color:#fff}

/* ---------- Navbar (oscura, sobre el hero) ---------- */
.w-nav{background:var(--navy);padding:.7rem 0;position:sticky;top:0;z-index:1030;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.w-nav .navbar-brand img{height:52px;width:auto}
.w-nav .nav-link{color:rgba(255,255,255,.86)!important;font-weight:500;font-size:.95rem;padding:.45rem .9rem!important;transition:.15s}
.w-nav .nav-link:hover,.w-nav .nav-link.activo{color:#fff!important}
.w-nav .nav-link.activo{position:relative}
.w-nav .nav-link.activo::after{content:'';position:absolute;left:.9rem;right:.9rem;bottom:.05rem;height:2px;background:var(--rojo-2);border-radius:2px}
.w-nav .navbar-toggler{border-color:rgba(255,255,255,.3)}
.w-nav .navbar-toggler-icon{filter:invert(1)}
.btn-portal{background:#fff;color:var(--navy);font-weight:600;border-radius:6px;padding:.5rem 1.3rem;font-size:.92rem;transition:.15s;white-space:nowrap}
.btn-portal:hover{background:#eef2f8;color:var(--navy)}

/* ---------- Botones ---------- */
.btn-rojo{background:var(--rojo);color:#fff;border:0;border-radius:6px;padding:.65rem 1.5rem;font-weight:600;font-size:.94rem;transition:.15s}
.btn-rojo:hover{background:var(--rojo-2);color:#fff}
.btn-rojo-sm{background:var(--rojo);color:#fff;border:0;border-radius:6px;padding:.42rem 1rem;font-weight:600;font-size:.85rem;transition:.15s}
.btn-rojo-sm:hover{background:var(--rojo-2);color:#fff}
.btn-blanco{background:#fff;color:var(--navy);border:0;border-radius:6px;padding:.65rem 1.5rem;font-weight:600;transition:.15s}
.btn-blanco:hover{background:#eef2f8;color:var(--navy)}
.btn-out-navy{background:transparent;color:var(--navy);border:1.5px solid var(--navy);border-radius:6px;padding:.6rem 1.4rem;font-weight:600;font-size:.92rem;transition:.15s}
.btn-out-navy:hover{background:var(--navy);color:#fff}

/* ---------- Hero ---------- */
.w-hero{position:relative;background:var(--navy);overflow:hidden;min-height:520px;display:flex;align-items:center}
.w-hero .bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32}
.w-hero .velo{position:absolute;inset:0;background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 42%,rgba(11,34,66,.72) 68%,rgba(11,34,66,.35) 100%)}
.w-hero .inner{position:relative;z-index:3;padding:5rem 0 6rem}
.w-hero h1{color:#fff;font-size:3.2rem;line-height:1.12;margin-bottom:1.1rem;font-weight:800}
.w-hero .lead{color:#cfd9ea;font-size:1.15rem;max-width:560px;margin-bottom:1.8rem}
.w-hero .chips{display:flex;gap:.6rem;flex-wrap:wrap}
.w-hero .chip{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:30px;padding:.45rem 1.1rem;font-size:.87rem;font-weight:500;transition:.15s}
.w-hero .chip:hover{background:#fff;color:var(--navy)}
.w-hero .onda{position:absolute;left:0;right:0;bottom:-1px;z-index:4;line-height:0}
.w-hero .onda svg{width:100%;height:70px;display:block}

/* ---------- Secciones ---------- */
.w-sec{padding:3.5rem 0}
.w-sec-tit{text-align:center;margin-bottom:2.2rem}
.w-sec-tit h2{font-size:2rem;margin-bottom:.4rem}
.w-sec-tit h2 a{color:var(--navy)}
.w-sec-tit h2 a:hover{color:var(--rojo)}
.w-sec-tit p{margin:0;font-size:1rem}

/* ---------- Tarjeta de programa ---------- */
.p-card{background:#fff;border:1px solid var(--linea);border-radius:10px;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:.18s}
.p-card:hover{box-shadow:0 12px 30px rgba(11,34,66,.13);transform:translateY(-3px)}
.p-card .img-wrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.p-card .img-wrap img{width:100%;height:100%;object-fit:cover}
.p-card .img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%)}
.p-card .img-ph img{width:52%;height:auto;object-fit:contain;opacity:.9;filter:brightness(0) invert(1)}
.p-card .badge-mod{position:absolute;top:.7rem;left:.7rem;border-radius:30px;padding:.22rem .8rem;font-size:.74rem;font-weight:600;color:#fff}
.badge-vivo{background:var(--rojo)}
.badge-virtual{background:#5b6b85}
.p-card .cuerpo{padding:1.15rem 1.25rem;flex:1;display:flex;flex-direction:column}
.p-card .cat{color:var(--rojo);font-size:.78rem;font-weight:600;margin-bottom:.35rem}
.p-card h5{font-size:1.03rem;line-height:1.35;margin-bottom:.9rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8rem}
.p-card h5 a{color:var(--navy)}
.p-card h5 a:hover{color:var(--rojo)}
.p-card .fila{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:.84rem}
.p-card .pie{border-top:1px solid var(--linea);padding:.9rem 1.25rem;display:flex;justify-content:space-between;align-items:center}
.p-card .precio{font-weight:700;color:var(--navy);font-size:1rem}
.p-card .precio .antes{font-size:.8rem;color:#98a3b5;text-decoration:line-through;font-weight:500;margin-right:.3rem}

/* Avatares de ponentes */
.av-group{display:flex;align-items:center}
.av-group .av{width:32px;height:32px;border-radius:50%;border:2px solid #fff;object-fit:cover;margin-left:-9px;background:var(--claro)}
.av-group .av:first-child{margin-left:0}
.av-group .av-mas{width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-9px;
  background:var(--claro);color:var(--navy);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.av-ini{display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-size:.72rem;font-weight:700}

/* ---------- Convenios ---------- */
.conv-strip{background:var(--claro);padding:2.5rem 0}
.conv-strip .tit{text-align:center;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:700;margin-bottom:1.5rem}
.conv-item{display:flex;align-items:center;justify-content:center;padding:.5rem;height:88px}
.conv-item img{max-height:70px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.62;transition:.2s}
.conv-item:hover img{filter:none;opacity:1}

/* ---------- Ponentes ---------- */
.pon-card{position:relative;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--linea);height:100%}
.pon-card .foto{aspect-ratio:1/1;overflow:hidden;background:var(--claro)}
.pon-card .foto img{width:100%;height:100%;object-fit:cover}
.pon-card .foto .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--navy)}
.pon-card .foto .ph i{font-size:3rem;color:rgba(255,255,255,.5)}
.pon-card .info{padding:1rem;text-align:center}
.pon-card .info h5{font-size:.98rem;margin-bottom:.15rem}
.pon-card .info .grado{color:var(--rojo);font-size:.82rem;font-weight:500}
.pon-card .info p{font-size:.82rem;margin:.6rem 0 0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Testimonios ---------- */
.t-card{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1.4rem;height:100%;display:flex;flex-direction:column}
.t-card .estrellas{color:#f5b425;font-size:.9rem;margin-bottom:.6rem}
.t-card p{color:var(--tinta);font-size:.92rem;flex:1;margin-bottom:1rem}
.t-card .quien{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--linea);padding-top:.9rem}
.t-card .quien .av{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--navy)}
.t-card .quien b{font-size:.9rem;color:var(--navy);display:block}
.t-card .quien small{color:var(--gris);font-size:.79rem}

/* ---------- CTA final ---------- */
.w-cta{background:var(--claro);padding:3.5rem 0;text-align:center}
.w-cta h2{font-size:1.9rem;margin-bottom:.5rem}

/* ---------- Franja de valor ---------- */
.val-strip{padding:3rem 0}
.val-item{text-align:center;padding:.8rem}
.val-item i{font-size:1.9rem;color:var(--rojo);margin-bottom:.6rem;display:block}
.val-item h6{font-size:.98rem;color:var(--navy);font-weight:700;margin-bottom:.25rem}
.val-item p{font-size:.85rem;margin:0}

/* ---------- Footer ---------- */
.w-foot{background:var(--navy-3);color:#93a3bd;padding:3rem 0 1.3rem}
.w-foot .logo{height:56px;filter:brightness(0) invert(1);opacity:.95;margin-bottom:1rem}
.w-foot h6{color:#fff;font-size:.95rem;font-weight:700;margin-bottom:.9rem}
.w-foot a{color:#93a3bd;font-size:.9rem;display:block;padding:.2rem 0}
.w-foot a:hover{color:#fff}
.w-foot .redes a{display:inline-flex;width:38px;height:38px;background:rgba(255,255,255,.1);border-radius:8px;
  align-items:center;justify-content:center;margin-right:.5rem;font-size:1.1rem}
.w-foot .redes a:hover{background:var(--rojo)}
.w-foot .copy{border-top:1px solid rgba(255,255,255,.1);margin-top:2rem;padding-top:1.2rem;font-size:.83rem;text-align:center}

/* ---------- Cabecera de página interna ---------- */
.w-ph{background:var(--navy);color:#fff;padding:2.8rem 0}
.w-ph .kicker{color:#f0c264;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.w-ph h1{color:#fff;font-size:2.3rem;margin:.35rem 0 .3rem}
.w-ph .crumb{font-size:.86rem;color:#a8b6cd}
.w-ph .crumb a{color:#f0c264}

/* ---------- WhatsApp ---------- */
.wa-fab{position:fixed;right:20px;bottom:20px;width:56px;height:56px;background:#25d366;color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  box-shadow:0 6px 20px rgba(37,211,102,.45);z-index:1040;transition:.2s}
.wa-fab:hover{transform:scale(1.08);color:#fff}

.cert-ok{border:1px solid #b6e0c2!important;background:#f2fbf5}
.cert-bad{border:1px solid #f0c2c2!important;background:#fdf3f3}

@media(max-width:991px){
  .w-hero h1{font-size:2.2rem}
  .w-hero .inner{padding:3rem 0 4rem}
  .w-nav .navbar-collapse{background:var(--navy);padding:1rem 0;margin-top:.6rem;border-radius:8px}
  .btn-portal{display:inline-block;margin-top:.6rem}
}

/* ===================================================================
   PORTAL DEL ALUMNO
   =================================================================== */
.portal-body{font-family:var(--ff);background:#f4f6fa;margin:0}
.pt-wrap{display:flex;min-height:100vh}

/* Sidebar */
.pt-side{width:262px;background:var(--navy);color:#c3cee0;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh}
.pt-logo{display:block;padding:1.5rem 1.25rem 1rem;text-align:center}
.pt-logo img{height:56px;filter:brightness(0) invert(1)}
.pt-lbl{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);padding:.6rem 1.4rem .5rem;font-weight:700}
.pt-nav{display:flex;flex-direction:column;gap:.15rem;padding:0 .7rem}
.pt-nav a{color:#c3cee0;padding:.7rem .9rem;border-radius:8px;font-size:.93rem;font-weight:500;display:flex;align-items:center;gap:.75rem;transition:.15s;text-decoration:none}
.pt-nav a i{font-size:1.05rem;opacity:.85;width:20px}
.pt-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.pt-nav a.act{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
.pt-side-pie{margin-top:auto;padding:1rem .7rem 1.3rem;border-top:1px solid rgba(255,255,255,.1)}
.pt-side-pie a{color:#93a3bd;font-size:.87rem;padding:.5rem .9rem;display:flex;align-items:center;gap:.7rem;border-radius:8px;text-decoration:none}
.pt-side-pie a:hover{background:rgba(255,255,255,.07);color:#fff}

/* Main */
.pt-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pt-top{background:#fff;border-bottom:1px solid var(--linea);padding:.85rem 1.6rem;display:flex;align-items:center;gap:.8rem;position:sticky;top:0;z-index:20}
.pt-top-tit{font-weight:600;color:var(--navy);font-size:1.02rem}
.pt-camp{background:none;border:0;position:relative;color:var(--gris);font-size:1.2rem;padding:.2rem .3rem}
.pt-camp:hover{color:var(--navy)}
.pt-punto{position:absolute;top:-2px;right:-6px;background:var(--rojo);color:#fff;font-size:.63rem;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.pt-user{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--tinta);font-weight:500}
.pt-ava{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.pt-body{padding:1.8rem 1.6rem 3rem;flex:1}
.pt-h1{font-size:1.9rem;font-weight:700;color:#1c2b3f;margin-bottom:1.3rem}

/* Tarjetas del portal */
.pt-card{background:#fff;border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.pt-vacio{background:#e8f4fb;border:1px solid #b8def3;border-radius:8px;padding:1rem 1.2rem;color:#0b5f87;font-size:.93rem}
.pt-curso{background:#fff;border:1px solid var(--linea);border-radius:10px;overflow:hidden;display:flex;gap:0;height:100%}
.pt-curso .mini{width:120px;flex-shrink:0;background:var(--navy);display:flex;align-items:center;justify-content:center}
.pt-curso .mini img{width:100%;height:100%;object-fit:cover}
.pt-curso .mini .ph{width:64%;filter:brightness(0) invert(1);opacity:.85}
.pt-curso .det{padding:1rem 1.1rem;flex:1;min-width:0}
.pt-curso .det h5{font-size:1rem;color:var(--navy);margin-bottom:.35rem;font-weight:700}
.pt-curso .meta{font-size:.83rem;color:var(--gris);display:flex;align-items:center;gap:.4rem;margin-bottom:.2rem}
.pt-curso .meta i{color:var(--rojo)}
.pt-prog{height:6px;background:var(--linea);border-radius:4px;overflow:hidden;margin-top:.6rem}
.pt-prog span{display:block;height:100%;background:#16a34a}

/* Notificaciones */
.pt-noti{display:flex;gap:.85rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit}
.pt-noti:hover{background:var(--claro)}
.pt-noti.nueva{background:#eff8ff}
.pt-noti i{font-size:1.2rem;color:var(--rojo);margin-top:.15rem}
.pt-noti b{font-size:.92rem;color:var(--navy);display:block}
.pt-noti p{font-size:.86rem;color:var(--gris);margin:.15rem 0}
.pt-noti small{font-size:.76rem;color:#9aa5b6}


@media(max-width:991px){
  .pt-side{position:fixed;left:-262px;z-index:1050;transition:.25s;height:100vh}
  .pt-side.abierto{left:0}
  .pt-body{padding:1.2rem 1rem 2rem}
  .pt-h1{font-size:1.5rem}
  .pt-curso{flex-direction:column}
  .pt-curso .mini{width:100%;height:120px}
}
.btn-portal .btn-ava{width:24px;height:24px;border-radius:50%;background:var(--rojo);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}

/* Carrusel de convenios (marquesina continua) */
.conv-carrusel{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.conv-pista{display:flex;align-items:center;gap:3.5rem;width:max-content;animation:conv-scroll 32s linear infinite}
.conv-carrusel:hover .conv-pista{animation-play-state:paused}
.conv-pista .conv-item{flex:0 0 auto;width:150px}
@keyframes conv-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.conv-pista{animation:none;flex-wrap:wrap;justify-content:center;width:100%}}

/* ===================================================================
   SISTEMA DE BOTONES — una sola fuente de verdad
   =================================================================== */
.btn-rojo,.btn-rojo-sm,.btn-out-navy,.btn-navy-solido,.btn-blanco,.btn-portal{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ff);font-weight:600;text-align:center;text-decoration:none;
  border-radius:7px;cursor:pointer;transition:background .16s,border-color .16s,transform .12s,box-shadow .16s;
  line-height:1.2;white-space:nowrap;border:1.5px solid transparent}
.btn-rojo:disabled,.btn-rojo-sm:disabled,.btn-out-navy:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-rojo:focus-visible,.btn-rojo-sm:focus-visible,.btn-out-navy:focus-visible,.btn-portal:focus-visible{
  outline:3px solid rgba(156,14,18,.35);outline-offset:2px}

/* Principal */
.btn-rojo{background:var(--rojo);border-color:var(--rojo);color:#fff;padding:.72rem 1.6rem;font-size:.95rem}
.btn-rojo:hover{background:var(--rojo-2);border-color:var(--rojo-2);color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(156,14,18,.28)}
.btn-rojo:active{transform:translateY(0);box-shadow:none}

/* Principal pequeño */
.btn-rojo-sm{background:var(--rojo);border-color:var(--rojo);color:#fff;padding:.45rem 1.05rem;font-size:.85rem}
.btn-rojo-sm:hover{background:var(--rojo-2);border-color:var(--rojo-2);color:#fff}

/* Secundario */
.btn-out-navy{background:transparent;border-color:var(--navy);color:var(--navy);padding:.68rem 1.5rem;font-size:.93rem}
.btn-out-navy:hover{background:var(--navy);color:#fff;transform:translateY(-1px)}

/* Sólido navy */
.btn-navy-solido{background:var(--navy);border-color:var(--navy);color:#fff;padding:.7rem 1.5rem;font-size:.94rem}
.btn-navy-solido:hover{background:var(--navy-2);color:#fff;transform:translateY(-1px)}

/* Sobre fondo oscuro */
.btn-blanco{background:#fff;border-color:#fff;color:var(--navy);padding:.7rem 1.5rem;font-size:.94rem}
.btn-blanco:hover{background:#eef2f8;color:var(--navy);transform:translateY(-1px)}

/* Botón del portal en la navbar */
.btn-portal{background:#fff;color:var(--navy);padding:.52rem 1.25rem;font-size:.92rem}
.btn-portal:hover{background:#eef2f8;color:var(--navy)}

/* Ancho completo */
.btn-full{width:100%}

/* Botones dentro de formularios: que no queden pegados */
.web form .btn-rojo,.web form .btn-out-navy{margin-top:.25rem}

/* ===== Acceso a la clase (aula del alumno) ===== */
.clase-box{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;
  border-radius:12px;padding:1.4rem 1.6rem;margin-bottom:1.6rem;color:#fff}
.clase-box.vivo{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 55%,#123163 100%)}
.clase-box.presencial{background:linear-gradient(120deg,#7c2d12 0%,var(--rojo) 60%,#a01a1f 100%)}
.clase-box.espera{background:#eef2f8;color:var(--tinta);border:1px dashed var(--linea)}
.clase-box .cb-izq{flex:1;min-width:240px}
.clase-box .cb-der{display:flex;flex-direction:column;gap:.5rem;align-items:stretch;min-width:200px}
.clase-box h5{color:inherit;font-size:1.2rem;margin:.5rem 0 .4rem;font-weight:700}
.clase-box.espera h5{color:var(--navy)}
.cb-tag{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.16);
  border-radius:30px;padding:.28rem .85rem;font-size:.78rem;font-weight:600}
.clase-box.espera .cb-tag{background:#dfe6f0;color:var(--gris)}
.cb-tag .punto{width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:cb-late 1.4s infinite}
@keyframes cb-late{0%,100%{opacity:1}50%{opacity:.35}}
.cb-lugar{font-size:1rem;margin:0 0 .6rem;color:rgba(255,255,255,.94);font-weight:500}
.cb-datos{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.88rem;color:rgba(255,255,255,.85)}
.clase-box.espera .cb-datos{color:var(--gris)}
.cb-nota{font-size:.85rem;color:rgba(255,255,255,.8);margin:.7rem 0 0}
.clase-box.espera .cb-nota{color:var(--gris)}
.cb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:#fff;color:var(--navy);font-weight:700;border-radius:8px;padding:.8rem 1.5rem;
  font-size:.98rem;text-decoration:none;transition:.16s}
.cb-btn:hover{background:#eef2f8;color:var(--navy);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.cb-copiar{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  border-radius:8px;padding:.5rem 1rem;font-size:.84rem;cursor:pointer;transition:.16s}
.cb-copiar:hover{background:rgba(255,255,255,.24)}
.cb-cuenta{text-align:center;line-height:1}
.cb-cuenta b{font-size:2.6rem;font-weight:800;display:block}
.cb-cuenta span{font-size:.9rem;opacity:.85}
.cb-der small{text-align:center;opacity:.8;font-size:.82rem}
.cb-hoy,.cb-curso{background:rgba(255,255,255,.18);border-radius:8px;padding:.7rem 1.2rem;
  font-weight:700;text-align:center;font-size:1rem}
@media(max-width:575px){.clase-box{padding:1.1rem}.clase-box .cb-der{width:100%}}

/* ===================================================================
   ACCESO — login y registro del alumno
   =================================================================== */
.acc-body{font-family:var(--ff);margin:0;background:#fff;color:var(--tinta)}
.acc-wrap{display:grid;grid-template-columns:minmax(320px,34%) 1fr;min-height:100vh}

/* Panel izquierdo */
.acc-lado{background:var(--navy);color:#fff;padding:2.5rem 2.2rem;display:flex;flex-direction:column;
  position:relative;overflow:hidden}
.acc-lado::before{content:'';position:absolute;inset:0;opacity:.07;
  background-image:radial-gradient(circle at 20% 20%, #fff 1px, transparent 1px),
                   radial-gradient(circle at 70% 60%, #fff 1px, transparent 1px);
  background-size:44px 44px, 62px 62px}
.acc-logo{display:block;position:relative;z-index:2}
.acc-logo img{height:64px;filter:brightness(0) invert(1)}
.acc-frase{margin:auto 0;position:relative;z-index:2;text-align:center;padding:2rem 0}
.acc-frase blockquote{font-size:1.22rem;line-height:1.55;font-weight:500;color:#fff;margin:0 0 .9rem}
.acc-frase cite{font-style:normal;color:var(--oro,#f0c264);font-size:.92rem;font-weight:600}
.acc-conv{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);padding-top:1.3rem}
.acc-conv-tit{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:700;margin-bottom:.9rem;text-align:center}
.acc-conv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;align-items:center}
.acc-conv-item{background:rgba(255,255,255,.94);border-radius:7px;height:52px;display:flex;
  align-items:center;justify-content:center;padding:.4rem}
.acc-conv-item img{max-width:100%;max-height:100%;object-fit:contain}
.acc-conv-item span{font-size:.62rem;color:var(--navy);text-align:center;line-height:1.2;font-weight:600}

/* Panel derecho */
.acc-main{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2.5rem 1.5rem;position:relative}
.acc-inicio{position:absolute;top:1.5rem;right:2rem;color:var(--gris);font-size:.88rem;text-decoration:none}
.acc-inicio:hover{color:var(--navy)}
.acc-caja{width:100%;max-width:410px}
.acc-caja h1{font-size:1.85rem;font-weight:800;color:var(--navy);text-align:center;margin-bottom:.4rem}
.acc-sub{text-align:center;color:var(--gris);font-size:.94rem;margin-bottom:2rem}
.acc-campo{margin-bottom:1.1rem}
.acc-campo label{display:block;font-size:.86rem;font-weight:600;color:var(--tinta);margin-bottom:.4rem}
.acc-campo .form-control{border:1.5px solid var(--linea);border-radius:8px;padding:.7rem .95rem;font-size:.95rem}
.acc-campo .form-control:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,34,66,.1)}
.acc-campo small{display:block;margin-top:.35rem;font-size:.8rem;color:var(--gris)}
.acc-campo small.bueno{color:#15803d}
.acc-campo small.malo{color:#b45309}
.acc-pass{position:relative}
.acc-pass button{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--gris);font-size:1rem;padding:.25rem;cursor:pointer}
.acc-pass button:hover{color:var(--navy)}
.acc-dni{display:flex;gap:.5rem}
.acc-dni .form-control{flex:1}
.acc-dni button{border:1.5px solid var(--navy);background:transparent;color:var(--navy);border-radius:8px;
  padding:.5rem 1rem;font-size:.88rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:.15s}
.acc-dni button:hover{background:var(--navy);color:#fff}
.acc-btn{width:100%;background:var(--rojo);color:#fff;border:0;border-radius:8px;padding:.85rem;
  font-size:1rem;font-weight:700;cursor:pointer;transition:.16s;margin-top:.3rem}
.acc-btn:hover{background:var(--rojo-2);transform:translateY(-1px);box-shadow:0 8px 20px rgba(156,14,18,.3)}
.acc-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.acc-btn.cargando::after{content:'';display:inline-block;width:14px;height:14px;margin-left:.5rem;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:acc-spin .7s linear infinite;
  vertical-align:-2px}
@keyframes acc-spin{to{transform:rotate(360deg)}}
.acc-cambio{text-align:center;font-size:.9rem;color:var(--gris);margin-top:1.5rem}
.acc-cambio a{color:var(--rojo);font-weight:600;text-decoration:none}
.acc-cambio a:hover{text-decoration:underline}
.acc-legal{position:absolute;bottom:1.5rem;font-size:.78rem;color:#9aa5b6;text-align:center;padding:0 1rem}

@media(max-width:900px){
  .acc-wrap{grid-template-columns:1fr}
  .acc-lado{padding:1.6rem;min-height:auto}
  .acc-frase{padding:1.5rem 0;margin:1rem 0}
  .acc-frase blockquote{font-size:1.05rem}
  .acc-conv{display:none}
  .acc-inicio{top:auto;bottom:1rem;right:auto;left:50%;transform:translateX(-50%)}
  .acc-legal{position:static;margin-top:2rem}
}

/* ===================================================================
   HERO — dos tratamientos según el tipo de imagen
   =================================================================== */

/* --- Recorte con fondo transparente (personas sobre el navy) --- */
.w-hero.con-recorte{background:var(--navy);align-items:flex-end;min-height:560px}
.hero-recorte{position:absolute;bottom:0;right:0;height:100%;width:auto;max-width:62%;
  object-fit:contain;object-position:right bottom;z-index:1}
.w-hero.foco-left  .hero-recorte{right:auto;left:0;object-position:left bottom}
.w-hero.foco-center .hero-recorte{right:50%;transform:translateX(50%);object-position:center bottom}
/* Degradado suave solo del lado del texto: la gente queda nítida */
.hero-degradado{position:absolute;inset:0;z-index:2;
  background:linear-gradient(95deg,
    var(--navy) 0%, var(--navy) 34%,
    rgba(11,34,66,.92) 46%,
    rgba(11,34,66,.55) 56%,
    rgba(11,34,66,.12) 66%,
    rgba(11,34,66,0) 74%)}
.w-hero.foco-left .hero-degradado{
  background:linear-gradient(265deg,
    var(--navy) 0%, var(--navy) 34%,
    rgba(11,34,66,.92) 46%,
    rgba(11,34,66,.55) 56%,
    rgba(11,34,66,.12) 66%,
    rgba(11,34,66,0) 74%)}
.w-hero.con-recorte .inner{padding:4.5rem 0 5.5rem}

/* --- Foto de fondo tradicional --- */
.w-hero.con-foto .bg-img{opacity:.34}

@media(max-width:991px){
  .w-hero.con-recorte{min-height:auto;align-items:center}
  /* En móvil el recorte pasa a fondo tenue: el texto manda */
  .hero-recorte{max-width:none;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.26}
  .w-hero.foco-center .hero-recorte{right:0;transform:none}
  .hero-degradado{background:linear-gradient(180deg,rgba(11,34,66,.9),rgba(11,34,66,.96))}
  .w-hero.con-recorte .inner{padding:3rem 0 4rem}
}

/* ===================================================================
   NAVBAR CLARA — logo a color sobre fondo blanco
   =================================================================== */
.w-nav{background:#fff;padding:.7rem 0;position:sticky;top:0;z-index:1030;
  box-shadow:0 1px 0 rgba(11,34,66,.08)}
.w-nav.scrolled{box-shadow:0 4px 20px rgba(11,34,66,.1)}
.w-nav .navbar-brand img{height:58px;width:auto;filter:none}
.w-nav .nav-link{color:var(--navy)!important;font-weight:600;font-size:.96rem;
  padding:.5rem 1rem!important;position:relative;transition:color .15s}
.w-nav .nav-link:hover{color:var(--rojo)!important}
.w-nav .nav-link.activo{color:var(--oro,#B37F24)!important}
.w-nav .nav-link.activo::after{content:'';position:absolute;left:1rem;right:1rem;bottom:.1rem;
  height:3px;background:var(--oro,#B37F24);border-radius:2px}
.w-nav .navbar-toggler{border-color:rgba(11,34,66,.2)}
.w-nav .navbar-toggler-icon{filter:none}
.w-nav .btn-portal{background:var(--rojo);color:#fff;font-weight:600;
  border-radius:8px;padding:.62rem 1.4rem;font-size:.94rem}
.w-nav .btn-portal:hover{background:var(--rojo-2);color:#fff}
.w-nav .btn-portal .btn-ava{background:rgba(255,255,255,.25)}

/* Topbar con acento dorado */
.w-top{background:var(--navy-3);color:#c3d0e6;font-size:.83rem;padding:.5rem 0}
.w-top b{color:#fff}
.w-top .bi-mortarboard-fill{color:var(--oro,#B37F24)}
.w-top a{color:#dce4f2}
.w-top a:hover{color:var(--oro-400,#cfa04a)}

@media(max-width:991px){
  .w-nav .navbar-collapse{background:#fff;padding:1rem 0;margin-top:.6rem;
    border-radius:8px;box-shadow:0 6px 20px rgba(11,34,66,.12)}
  .w-nav .btn-portal{display:inline-block;margin-top:.6rem}
}

/* Cabeceras internas: navy con acento dorado, menos plano */
.w-ph{position:relative;overflow:hidden}
.w-ph::after{content:'';position:absolute;top:0;right:0;bottom:0;width:38%;
  background:linear-gradient(135deg, rgba(179,127,36,.16) 0%, rgba(156,14,18,.1) 55%, transparent 100%);
  clip-path:polygon(28% 0, 100% 0, 100% 100%, 0 100%)}
.w-ph::before{content:'';position:absolute;right:4%;top:50%;transform:translateY(-50%);
  width:120px;height:120px;opacity:.22;
  background-image:radial-gradient(#B37F24 1.5px, transparent 1.5px);background-size:14px 14px}
.w-ph .container{position:relative;z-index:2}
.w-ph h1{border-left:4px solid var(--oro,#B37F24);padding-left:1rem}
@media(max-width:767px){.w-ph::before{display:none}}

/* ===================================================================
   HERO CLARO v2 — composición en dos columnas, formas contenidas
   =================================================================== */
.hero-claro{position:relative;background:#fff;overflow:hidden;
  min-height:calc(100vh - 132px);   /* topbar + navbar */
  display:flex;flex-direction:column;justify-content:center;padding:1.5rem 0 0}

.hc-grid{display:flex;align-items:center;gap:2rem;
  max-width:1240px;margin:0 auto;padding:0 1rem;position:relative;z-index:3}
.hc-texto{flex:1 1 52%;min-width:0}
.hc-visual{flex:1 1 48%;min-width:0}

/* ---------- Columna de texto ---------- */
.hc-texto h1{font-size:clamp(2rem,3.4vw,3.05rem);line-height:1.1;font-weight:800;color:var(--navy);margin-bottom:.9rem}
.hc-texto h1 .oro{color:var(--oro,#B37F24);display:block}
.hc-lead{font-size:1rem;color:var(--gris);max-width:440px;margin-bottom:1.4rem;line-height:1.6}

.hc-ventajas{display:flex;gap:1.2rem;margin-bottom:1.5rem;max-width:540px;flex-wrap:wrap}
.hc-ventajas .hc-v{flex:1 1 140px}
.hc-v{display:flex;gap:.6rem;align-items:flex-start}
.hc-v i{font-size:1.35rem;color:var(--oro,#B37F24);line-height:1.1;flex-shrink:0}
.hc-v b{display:block;font-size:.87rem;color:var(--navy);font-weight:700;margin-bottom:.1rem;line-height:1.2}
.hc-v span{font-size:.78rem;color:var(--gris);line-height:1.3;display:block}

.hc-botones{display:flex;gap:.6rem;flex-wrap:wrap}
.hcb{display:inline-flex;align-items:center;gap:.5rem;border-radius:8px;padding:.72rem 1.25rem;
  font-weight:600;font-size:.9rem;text-decoration:none;color:#fff;transition:.17s;border:0;white-space:nowrap}
.hcb i{font-size:.72rem;opacity:.85}
.hcb:hover{transform:translateY(-2px);color:#fff}
.hcb-navy{background:var(--navy)}    .hcb-navy:hover{background:var(--navy-2);box-shadow:0 8px 20px rgba(11,34,66,.28)}
.hcb-rojo{background:var(--rojo)}    .hcb-rojo:hover{background:var(--rojo-2);box-shadow:0 8px 20px rgba(156,14,18,.28)}
.hcb-oro{background:var(--oro,#B37F24)} .hcb-oro:hover{background:#9a6c1c;box-shadow:0 8px 20px rgba(179,127,36,.3)}

/* ---------- Columna visual: todo dentro de un marco ---------- */
.hc-visual{position:relative;height:min(56vh,470px);display:flex;align-items:flex-end;justify-content:center}
/* Panel claro de fondo */
.hc-visual::before{content:'';position:absolute;left:6%;top:6%;right:6%;bottom:6%;
  background:#f2f5fa;border-radius:180px 18px 18px 18px;z-index:1}
/* Esquina navy arriba a la derecha */
.hc-f-navy{position:absolute;top:0;right:0;width:46%;height:44%;background:var(--navy);
  border-radius:0 18px 0 120px;z-index:2}
/* Bloque guinda abajo a la izquierda */
.hc-f-rojo{position:absolute;left:0;bottom:14%;width:26%;height:30%;background:var(--rojo);
  border-radius:14px 0 0 14px;z-index:2}
/* Marco dorado */
.hc-f-oro{position:absolute;left:14%;top:14%;right:14%;bottom:18%;
  border:2px solid var(--oro,#B37F24);border-radius:16px;z-index:4;opacity:.8;pointer-events:none}
/* Puntos */
.hc-f-puntos{position:absolute;right:2%;bottom:6%;width:74px;height:74px;z-index:2;opacity:.55;
  background-image:radial-gradient(var(--oro,#B37F24) 1.5px,transparent 1.5px);background-size:12px 12px}
/* Las personas, por encima de todo */
.hc-gente{position:relative;z-index:5;height:100%;width:auto;max-width:100%;
  object-fit:contain;object-position:center bottom;display:block}

/* ---------- Franja de áreas ---------- */
.hc-areas{position:relative;z-index:3;background:#fff;border-top:1px solid var(--linea);
  margin-top:2rem;padding:1.2rem 0 .4rem}
.hc-areas-fila{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}
.hc-area{flex:0 1 150px;text-align:center;padding:.5rem .7rem;text-decoration:none;
  border-radius:8px;transition:.16s}
.hc-area i{display:block;font-size:1.45rem;color:var(--oro,#B37F24);margin-bottom:.4rem;transition:.16s}
.hc-area span{font-size:.83rem;color:var(--navy);font-weight:600;line-height:1.25;display:block}
.hc-area:hover{background:#f6f8fb}
.hc-area:hover i{color:var(--rojo);transform:translateY(-2px)}

/* ---------- Onda inferior ---------- */
.hc-onda{position:relative;z-index:2;line-height:0;margin-top:auto}
.hc-onda svg{width:100%;height:74px;display:block}

@media(max-width:1199px){
  .hc-texto h1{font-size:2.6rem}
  .hc-visual{height:min(50vh,400px)}
}
@media(max-width:991px){
  .hero-claro{padding-top:2rem}
  .hc-grid{flex-direction:column;gap:1.5rem;text-align:center}
  .hc-texto,.hc-visual{flex:1 1 auto;width:100%}
  .hc-texto h1{font-size:2.1rem}
  .hc-texto h1 .oro{display:inline}
  .hc-lead{margin-left:auto;margin-right:auto}
  /* En móvil los ítems no deben estirarse: se apilan juntos */
  .hc-ventajas{flex-direction:column;gap:.85rem;max-width:320px;
    margin-left:auto;margin-right:auto;text-align:left}
  .hc-ventajas .hc-v{flex:0 0 auto}
  .hc-v i{font-size:1.25rem}
  .hc-v span{max-width:none}
  .hc-botones{justify-content:center}
  .hc-visual{height:300px;order:-1}
  .hero-claro{min-height:auto}
  .hc-f-oro{left:8%;right:8%}
  .hc-onda svg{height:46px}
}
@media(max-width:575px){
  .hc-texto h1{font-size:1.75rem}
  .hcb{width:100%;justify-content:center}
  .hc-visual{height:260px}
  .hc-area{flex:0 1 46%}
}

/* Respaldo cuando el programa no tiene portada: color según el tipo */
.p-card .img-ph{position:relative;flex-direction:column;gap:.6rem}
.p-card .img-ph.ph-diplomado{background:linear-gradient(135deg,var(--navy) 0%,#123163 100%)}
.p-card .img-ph.ph-congreso {background:linear-gradient(135deg,#7c1114 0%,var(--rojo) 100%)}
.p-card .img-ph.ph-curso,
.p-card .img-ph.ph-programa {background:linear-gradient(135deg,#8a6118 0%,var(--oro,#B37F24) 100%)}
.p-card .img-ph img{width:44%;opacity:.92}
.p-card .img-ph .ph-tipo{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.75);font-weight:700}

/* ===================================================================
   MEZCLA DE COLORES EN TODA LA PÁGINA
   Cada sección toma un color distinto de la marca, no todo navy.
   =================================================================== */

/* --- Títulos de sección: barra de color alternada --- */
.w-sec-tit h2{position:relative;display:inline-block;padding-bottom:.6rem}
.w-sec-tit h2::after{content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:64px;height:4px;border-radius:2px;background:var(--oro,#B37F24)}
.w-sec:nth-of-type(even) .w-sec-tit h2::after{background:var(--rojo)}
.w-sec-tit span{color:var(--rojo)!important}

/* --- Secciones con fondo alternado --- */
.w-sec.bg-claro{background:#f7f9fc}
.w-sec.bg-crema{background:#fdf9f2}          /* crema cálido, tira al dorado */
.w-sec.bg-navy-suave{background:#f2f5fa}

/* --- Tarjetas: borde superior según el tipo de programa --- */
.p-card{border-top:3px solid transparent}
.p-card:has(.cat:not(:empty)){border-top-color:var(--linea)}
.p-card:hover{border-top-color:var(--oro,#B37F24)}

/* Badges de modalidad ya usan rojo/gris: añadimos dorado para grabado */
.badge-grabado{background:var(--oro,#B37F24)}

/* --- Franja de valor: iconos rotando entre los tres colores --- */
.val-item:nth-child(4n+1) i{color:var(--navy)}
.val-item:nth-child(4n+2) i{color:var(--rojo)}
.val-item:nth-child(4n+3) i{color:var(--oro,#B37F24)}
.val-item:nth-child(4n+4) i{color:var(--navy-2)}
.val-strip{background:#fff;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}

/* --- Ponentes: acento dorado --- */
.pon-card{border-top:3px solid var(--oro,#B37F24)}
.pon-card .info .grado{color:var(--rojo)}

/* --- Testimonios: acento guinda --- */
.t-card{border-left:3px solid var(--rojo)}
.t-card .estrellas{color:var(--oro,#B37F24)}

/* --- Convenios: fondo crema en vez de gris --- */
.conv-strip{background:#fdf9f2}
.conv-strip .tit{color:var(--oro,#B37F24)}

/* --- CTA final: degradado de los tres colores --- */
.w-cta{background:linear-gradient(120deg,var(--navy) 0%,var(--navy) 45%,#6d1015 78%,var(--rojo) 100%);
  color:#fff;position:relative;overflow:hidden}
.w-cta::after{content:'';position:absolute;right:-4%;top:-30%;width:280px;height:280px;
  border:2px solid var(--oro,#B37F24);border-radius:50%;opacity:.28}
.w-cta::before{content:'';position:absolute;left:-3%;bottom:-40%;width:200px;height:200px;
  background:radial-gradient(var(--oro,#B37F24) 1.6px,transparent 1.6px);background-size:14px 14px;opacity:.3}
.w-cta h2{color:#fff;position:relative;z-index:2}
.w-cta p{color:rgba(255,255,255,.85);position:relative;z-index:2}
.w-cta .btn-rojo{background:var(--oro,#B37F24);border-color:var(--oro,#B37F24);position:relative;z-index:2}
.w-cta .btn-rojo:hover{background:#9a6c1c;border-color:#9a6c1c}

/* --- Footer: cinta de los tres colores arriba --- */
.w-foot{position:relative}
.w-foot::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 40%,var(--rojo) 40%,var(--rojo) 70%,
    var(--oro,#B37F24) 70%,var(--oro,#B37F24) 100%)}
.w-foot h6{color:var(--oro,#B37F24)}
.w-foot .redes a:hover{background:var(--oro,#B37F24)}

/* --- Botones de sección alternados --- */
.w-sec:nth-of-type(3n+2) .btn-out-navy{border-color:var(--rojo);color:var(--rojo)}
.w-sec:nth-of-type(3n+2) .btn-out-navy:hover{background:var(--rojo);color:#fff}
.w-sec:nth-of-type(3n) .btn-out-navy{border-color:var(--oro,#B37F24);color:var(--oro,#B37F24)}
.w-sec:nth-of-type(3n) .btn-out-navy:hover{background:var(--oro,#B37F24);color:#fff}

/* --- Cabecera interna: degradado con los tres --- */
.w-ph{background:linear-gradient(115deg,var(--navy) 0%,var(--navy) 52%,#5c1215 88%,#7a1519 100%)}
.acc-campo .req{color:var(--rojo)}
.acc-aviso{background:#fffbeb;border:1px solid #fcd34d;color:#92400e;border-radius:8px;
  padding:.7rem .9rem;font-size:.85rem;margin-bottom:1rem}
.acc-aviso i{margin-right:.3rem}

/* --- Flyer del programa: se ve completo, sin recortes --- */
.cd-hero.con-flyer{min-height:auto}
.cd-hero .cd-hero-bg{filter:blur(18px) saturate(1.15);transform:scale(1.1)}
.cd-flyer{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:.6rem;backdrop-filter:blur(4px);
  box-shadow:0 18px 44px rgba(0,0,0,.34)}
.cd-flyer img{width:100%;height:auto;max-height:420px;object-fit:contain;
  border-radius:9px;display:block}

/* En la tarjeta del sidebar, el flyer también completo */
.cd-card-img{width:100%;height:auto;max-height:340px;object-fit:contain;
  background:#f2f5fa;display:block}

/* Tarjetas del catálogo: el flyer vertical se centra en vez de recortarse */
.p-card .img-wrap{background:linear-gradient(135deg,var(--navy) 0%,#123163 100%)}
.p-card .img-wrap img{object-fit:cover;object-position:center top}

/* --- Filtros del catálogo: un color por tipo --- */
.cat-filtros{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-bottom:2.2rem}
.cat-tab{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:30px;
  border:1.5px solid var(--linea);background:#fff;color:var(--gris);font-weight:600;font-size:.92rem;
  text-decoration:none;transition:.16s}
.cat-tab span{background:var(--claro);color:var(--gris);border-radius:20px;padding:.05rem .5rem;font-size:.78rem}
.cat-tab:hover{transform:translateY(-2px)}
.cat-tab.t-todos:hover,.cat-tab.t-todos.act{background:var(--navy);border-color:var(--navy);color:#fff}
.cat-tab.t-curso:hover,.cat-tab.t-curso.act{background:var(--oro,#B37F24);border-color:var(--oro,#B37F24);color:#fff}
.cat-tab.t-diplomado:hover,.cat-tab.t-diplomado.act{background:var(--navy);border-color:var(--navy);color:#fff}
.cat-tab.t-congreso:hover,.cat-tab.t-congreso.act{background:var(--rojo);border-color:var(--rojo);color:#fff}
.cat-tab.act span{background:rgba(255,255,255,.25);color:#fff}
@media(max-width:575px){.cat-tab{padding:.5rem .9rem;font-size:.85rem}}

/* Con pocos convenios: sin animación, centrados y legibles */
.conv-carrusel.estatico{-webkit-mask-image:none;mask-image:none}
.conv-carrusel.estatico .conv-pista{animation:none;width:100%;justify-content:center;flex-wrap:wrap;gap:2rem}
.conv-item{border-radius:9px;padding:.6rem 1rem;transition:.16s}
.conv-carrusel.estatico .conv-item{width:auto;min-width:150px;max-width:220px;background:#fff;
  border:1px solid var(--linea);height:auto;min-height:82px}
.conv-item span{font-size:.82rem;color:var(--navy);font-weight:600;text-align:center;line-height:1.3}
.conv-carrusel.estatico .conv-item:hover{border-color:var(--oro,#B37F24);transform:translateY(-2px)}

/* ===================================================================
   PANEL — menú lateral agrupado
   =================================================================== */
.sidebar{width:268px}
.menu-agrupado{padding:0 .55rem}
.menu-agrupado .menu-grupo{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.45);padding:1.15rem .75rem .45rem;margin-top:.15rem;
  border-top:1px solid rgba(255,255,255,.1);list-style:none;line-height:1.3}
.menu-agrupado .menu-grupo:first-of-type{border-top:none;padding-top:.6rem}
.menu-agrupado li{list-style:none}
.menu-agrupado .nav-link{
  color:#c9d3e8;font-size:.875rem;padding:.55rem .8rem;border-radius:7px;
  display:flex;align-items:center;gap:.65rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:.15s;line-height:1.35}
.menu-agrupado .nav-link i{width:20px;flex-shrink:0;font-size:1rem;opacity:.85;text-align:center}
.menu-agrupado .nav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.menu-agrupado .nav-link:hover i{opacity:1}
.menu-agrupado .nav-link.active{background:var(--gold,#B37F24);color:#fff;font-weight:600}
.menu-agrupado .nav-link.active i{opacity:1}
.menu-agrupado .nav-link .badge{margin-left:auto;flex-shrink:0}

/* Pie con el perfil */
.perfil-box{background:rgba(255,255,255,.07);border-radius:9px;padding:.75rem}
.perfil-box .rol-badge{font-size:.66rem;letter-spacing:.4px}

@media(max-width:991px){ .sidebar{width:250px} }

/* ===================================================================
   CARRUSEL DE PROGRAMAS
   =================================================================== */
.prog-carrusel{position:relative;padding:0 2.6rem}
.pc-viewport{overflow:hidden}
.pc-pista{display:flex;gap:1.5rem;transition:transform .42s cubic-bezier(.4,0,.2,1)}
.pc-item{flex:0 0 calc(25% - 1.125rem);min-width:0}

.pc-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--linea);background:#fff;
  color:var(--navy);font-size:1.15rem;cursor:pointer;transition:.16s;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(11,34,66,.1)}
.pc-nav:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-50%) scale(1.07)}
.pc-nav:disabled{opacity:.3;cursor:default;transform:translateY(-50%)}
.pc-prev{left:0} .pc-next{right:0}

.pc-puntos{display:flex;justify-content:center;gap:.5rem;margin-top:1.6rem}
.pc-punto{width:9px;height:9px;border-radius:50%;border:0;background:var(--linea);cursor:pointer;transition:.18s;padding:0}
.pc-punto:hover{background:#b9c3d4}
.pc-punto.act{background:var(--rojo);width:26px;border-radius:5px}

@media(max-width:1199px){ .pc-item{flex:0 0 calc(33.333% - 1rem)} }
@media(max-width:991px){
  .prog-carrusel{padding:0 1.8rem}
  .pc-item{flex:0 0 calc(50% - .75rem)}
  .pc-nav{width:36px;height:36px;font-size:1rem}
}
@media(max-width:575px){
  .prog-carrusel{padding:0}
  .pc-item{flex:0 0 82%}
  .pc-nav{display:none}
  .pc-pista{gap:1rem}
}

/* ===================================================================
   FRANJA DE VALOR — tarjetas con color por bloque
   =================================================================== */
.val-strip{background:#fff;padding:4rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.val-card{position:relative;background:#fff;border:1px solid var(--linea);border-radius:12px;
  padding:1.8rem 1.4rem 1.4rem;height:100%;overflow:hidden;transition:.2s}
.val-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.val-card::after{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;
  border-radius:50%;opacity:.06;transition:.25s}
.val-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(11,34,66,.12)}
.val-card:hover::after{transform:scale(1.35);opacity:.1}
.val-card .v-ico{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem;color:#fff;margin-bottom:1rem}
.val-card h6{font-size:1.02rem;color:var(--navy);font-weight:700;margin-bottom:.5rem;line-height:1.3}
.val-card p{font-size:.88rem;color:var(--gris);line-height:1.55;margin-bottom:.9rem}
.val-card .v-pie{display:block;font-size:.76rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding-top:.8rem;border-top:1px solid var(--linea)}

.val-card.v-navy::before,.val-card.v-navy .v-ico{background:var(--navy)}
.val-card.v-navy::after{background:var(--navy)} .val-card.v-navy .v-pie{color:var(--navy)}
.val-card.v-oro::before,.val-card.v-oro .v-ico{background:var(--oro,#B37F24)}
.val-card.v-oro::after{background:var(--oro,#B37F24)} .val-card.v-oro .v-pie{color:var(--oro,#B37F24)}
.val-card.v-rojo::before,.val-card.v-rojo .v-ico{background:var(--rojo)}
.val-card.v-rojo::after{background:var(--rojo)} .val-card.v-rojo .v-pie{color:var(--rojo)}
.val-card.v-navy2::before,.val-card.v-navy2 .v-ico{background:linear-gradient(135deg,var(--navy),var(--rojo))}
.val-card.v-navy2::after{background:var(--navy-2)} .val-card.v-navy2 .v-pie{color:var(--navy-2)}

/* ===================================================================
   CONVENIOS — con encabezado y tarjetas
   =================================================================== */
.conv-strip{background:#fdf9f2;padding:3.5rem 0}
.conv-cab{display:flex;align-items:center;gap:1.5rem;margin-bottom:2.2rem}
.conv-cab > div{text-align:center;flex-shrink:0}
.conv-linea{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--oro,#B37F24),transparent);opacity:.45}
.conv-kicker{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro,#B37F24);font-weight:700;margin-bottom:.3rem}
.conv-cab h3{font-size:1.35rem;color:var(--navy);font-weight:700;margin:0}
.conv-item{height:100px;padding:1rem 1.2rem}
.conv-item img{max-height:64px;filter:grayscale(1);opacity:.62;transition:.22s}
.conv-item:hover img{filter:none;opacity:1;transform:scale(1.05)}
.conv-carrusel.estatico .conv-item{background:#fff;border:1px solid #efe3cf;border-radius:12px;
  min-width:190px;max-width:250px;box-shadow:0 2px 10px rgba(179,127,36,.07)}
.conv-carrusel.estatico .conv-item:hover{border-color:var(--oro,#B37F24);
  box-shadow:0 8px 22px rgba(179,127,36,.16);transform:translateY(-3px)}
.conv-txt{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
  font-size:.84rem;color:var(--navy);font-weight:600;line-height:1.35}
.conv-txt i{font-size:1.7rem;color:var(--oro,#B37F24)}
@media(max-width:767px){
  .conv-cab{flex-direction:column;gap:.8rem}
  .conv-linea{width:60px;flex:0 0 60px}
  .conv-cab h3{font-size:1.15rem}
}

/* --- Páginas legales --- */
.legal{font-size:.98rem;line-height:1.8;color:var(--tinta)}
.legal-fecha{font-size:.85rem;color:#9aa5b6;padding-bottom:1.2rem;margin-bottom:1.8rem;
  border-bottom:1px solid var(--linea)}
.legal h2{font-size:1.18rem;color:var(--navy);font-weight:700;margin:2.2rem 0 .8rem;
  padding-left:.9rem;border-left:3px solid var(--oro,#B37F24)}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-bottom:1rem;color:var(--gris)}
.legal b{color:var(--navy)}
.legal ul{margin:0 0 1.2rem;padding-left:1.3rem}
.legal li{margin-bottom:.5rem;color:var(--gris)}
.legal-pie{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--linea);text-align:center}
.acc-legal a{color:var(--rojo);text-decoration:none;font-weight:600}
.acc-legal a:hover{text-decoration:underline}
.copy-legal{display:flex;gap:1.2rem}
.copy-legal a{color:#93a3bd;font-size:.85rem;display:inline;padding:0}
.copy-legal a:hover{color:var(--oro,#B37F24)}
@media(max-width:767px){ .copy-legal{justify-content:center;flex-wrap:wrap} }

/* ===================================================================
   PANEL — menú colapsable a iconos
   En pantallas medianas se reduce solo; el usuario puede fijarlo.
   =================================================================== */
.btn-colapsar{background:transparent;border:0;color:var(--navy);font-size:1.4rem;
  padding:.25rem .55rem;border-radius:7px;cursor:pointer;transition:.15s;line-height:1}
.btn-colapsar:hover{background:rgba(11,34,66,.07)}

.sidebar{transition:width .22s ease}
.sidebar .nav-link,.menu-agrupado .nav-link{transition:padding .22s ease}

/* --- Modo iconos --- */
.menu-iconos .sidebar{width:74px}
.menu-iconos .sidebar-brand .brand-main,
.menu-iconos .sidebar-brand .brand-sub{display:none}
.menu-iconos .sidebar-brand::after{content:'IP';display:block;color:#fff;font-weight:800;
  font-size:1.25rem;text-align:center;letter-spacing:.5px}
.menu-iconos .menu-agrupado{padding:0 .4rem}
.menu-iconos .menu-agrupado .menu-grupo{
  font-size:0;padding:.7rem 0 .35rem;margin:0;border-top:1px solid rgba(255,255,255,.12)}
.menu-iconos .menu-agrupado .nav-link{
  justify-content:center;padding:.65rem .4rem;position:relative;gap:0}
.menu-iconos .menu-agrupado .nav-link i{font-size:1.15rem;width:auto}
/* El texto se oculta pero sigue disponible para lectores de pantalla */
.menu-iconos .menu-agrupado .nav-link{font-size:0}
.menu-iconos .menu-agrupado .nav-link .badge{position:absolute;top:3px;right:6px;font-size:.6rem;
  padding:.1rem .3rem;margin:0}

/* Etiqueta emergente al pasar el mouse */
.menu-iconos .menu-agrupado .nav-link::after{
  content:attr(data-titulo);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--navy-dark,#04184a);color:#fff;font-size:.82rem;font-weight:500;
  padding:.42rem .8rem;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:.15s;z-index:1200;box-shadow:0 4px 16px rgba(0,0,0,.28)}
.menu-iconos .menu-agrupado .nav-link:hover::after{opacity:1;left:calc(100% + 6px)}

.menu-iconos .perfil-box{padding:.5rem}
.menu-iconos .perfil-box .small,
.menu-iconos .perfil-box .btn{display:none}
.menu-iconos .perfil-box::after{content:'\\F4DA';font-family:'bootstrap-icons';color:#fff;
  display:block;text-align:center;font-size:1.2rem}
.menu-iconos .sidebar .text-light.opacity-75{display:none}

/* En pantallas medianas colapsa solo */
@media(max-width:1200px) and (min-width:992px){
  .sidebar{width:74px}
  .sidebar-brand .brand-main,.sidebar-brand .brand-sub{display:none}
  .menu-agrupado .menu-grupo{font-size:0;padding:.7rem 0 .35rem;border-top:1px solid rgba(255,255,255,.12)}
  .menu-agrupado .nav-link{justify-content:center;padding:.65rem .4rem;font-size:0;gap:0;position:relative}
  .menu-agrupado .nav-link i{font-size:1.15rem;width:auto}
  .menu-agrupado .nav-link::after{
    content:attr(data-titulo);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--navy-dark,#04184a);color:#fff;font-size:.82rem;padding:.42rem .8rem;border-radius:7px;
    white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:1200}
  .menu-agrupado .nav-link:hover::after{opacity:1;left:calc(100% + 6px)}
  .perfil-box .small,.perfil-box .btn{display:none}
}

/* ===================================================================
   FICHA DE PROGRAMA
   =================================================================== */
.cd-hero{position:relative;background:var(--navy);overflow:hidden;padding:2.5rem 0}
.cd-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.22;filter:blur(22px) saturate(1.2);transform:scale(1.12)}
.cd-hero-velo{position:absolute;inset:0;
  background:linear-gradient(115deg,var(--navy) 0%,var(--navy) 48%,rgba(11,34,66,.86) 72%,rgba(11,34,66,.62) 100%)}

.cd-cat{display:inline-block;color:var(--oro,#B37F24);font-size:.82rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.cd-tit{color:#fff;font-size:2.15rem;line-height:1.22;font-weight:800;margin-bottom:.9rem}
.cd-desc{color:#c8d3e6;font-size:.98rem;line-height:1.65;max-width:560px;margin-bottom:0}

/* Badges */
.cd-hero .badge-mod{position:static;display:inline-flex;align-items:center;gap:.4rem;
  border-radius:30px;padding:.32rem .95rem;font-size:.78rem;font-weight:700;color:#fff}
.badge-vivo{background:var(--rojo)}
.badge-vivo::before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;
  animation:cd-late 1.5s infinite}
@keyframes cd-late{0%,100%{opacity:1}50%{opacity:.35}}
.badge-virtual{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.badge-grabado{background:var(--oro,#B37F24)}

/* Datos con iconos */
.cd-datos{border-top:1px solid rgba(255,255,255,.14);padding-top:1.3rem;margin-top:1.5rem}
.cd-datos .col{display:flex;gap:.8rem;align-items:flex-start}
.cd-datos i{font-size:1.35rem;color:var(--oro,#B37F24);line-height:1.1;flex-shrink:0}
.cd-datos small{display:block;color:#a8b6cd;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
.cd-datos b{color:#fff;font-size:.94rem;line-height:1.35;display:block;margin-top:.15rem}

/* Flyer: completo, sin recortes */
.cd-flyer{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:.55rem;box-shadow:0 18px 44px rgba(0,0,0,.32)}
.cd-flyer img{width:100%;height:auto;max-height:400px;object-fit:contain;border-radius:9px;display:block}

/* Cuerpo */
.cd-body{padding:3rem 0}
.cd-body h3{font-size:1.5rem;color:var(--navy);font-weight:700}
.cd-body h4{font-size:1.1rem;color:var(--navy)}
.cd-acc .accordion-button{font-size:.94rem;font-weight:600;color:var(--navy);padding:.85rem 1.1rem}
.cd-acc .accordion-button:not(.collapsed){background:#f7f9fc;box-shadow:none;color:var(--rojo)}
.cd-acc .accordion-button:focus{box-shadow:none;border-color:var(--linea)}
.cd-acc .accordion-item{border-color:var(--linea);margin-bottom:.4rem;border-radius:8px!important;overflow:hidden}
.cd-acc .accordion-body{font-size:.9rem;color:var(--gris);line-height:1.7}
.cd-info ul{padding-left:1.1rem;margin-bottom:1.2rem}
.cd-info li{margin-bottom:.45rem;color:var(--gris);font-size:.94rem}
.cd-info b{color:var(--navy)}
.cd-info p{line-height:1.8;color:var(--gris)}

/* Sidebar de compra */
.cd-side{position:sticky;top:90px}
.cd-card{background:#fff;border:1px solid var(--linea);border-radius:14px;overflow:hidden;
  box-shadow:0 12px 36px rgba(11,34,66,.11)}
.cd-card-img{width:100%;height:auto;max-height:300px;object-fit:contain;background:#f2f5fa;display:block}
.cd-precio{font-size:2rem;font-weight:800;color:var(--navy);line-height:1}
.cd-antes{font-size:1rem;color:#98a3b5;text-decoration:line-through}
.cd-side-tit{font-size:.95rem;color:var(--navy);font-weight:700;margin:1.3rem 0 .7rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--oro,#B37F24);display:inline-block}
.cd-lista{list-style:none;padding:0;margin:0}
.cd-lista li{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--gris);padding:.35rem 0}
.cd-lista i{color:#16a34a;font-size:1rem;margin-top:.1rem;flex-shrink:0}
.cd-pago{border-top:1px solid var(--linea);margin-top:1.2rem;padding-top:1rem}
.cd-medio{background:#f7f9fc;border:1px solid var(--linea);border-radius:6px;padding:.25rem .65rem;
  font-size:.76rem;font-weight:700;color:var(--navy)}

@media(max-width:991px){
  .cd-tit{font-size:1.6rem}
  .cd-side{position:static;margin-top:2rem}
  .cd-hero{padding:1.8rem 0}
}

/* --- Móvil: el hero se compacta, sin espacios muertos --- */
@media(max-width:991px){
  .hero-claro{min-height:auto!important;justify-content:flex-start;padding:1.2rem 0 0}
  .hc-grid{align-items:flex-start}
  .hc-texto h1{margin-bottom:.7rem}
  .hc-lead{margin-bottom:1.1rem;font-size:.95rem}
  .hc-botones{gap:.5rem;margin-bottom:.5rem}
  .hcb{padding:.68rem 1.1rem;font-size:.88rem}
}
@media(max-width:575px){
  .hero-claro{padding-top:.8rem}
  .hc-grid{gap:1rem;padding:0 .9rem}
  .hc-texto h1{font-size:1.65rem;line-height:1.15}
  .hc-lead{font-size:.92rem;margin-bottom:1rem}
  .hc-ventajas{gap:.7rem;margin-bottom:1.2rem}
  .hc-v b{font-size:.85rem}
  .hc-v span{font-size:.76rem}
  .hc-visual{height:230px}
  .hc-onda svg{height:36px}
}

/* ===================================================================
   PIE — enlaces legales, redes y avisos
   =================================================================== */
.foot-legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem;
  border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.5rem}
.fl-enlaces{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.fl-enlaces a{color:#c3d0e6;font-size:.88rem;font-weight:500;display:inline;padding:0;transition:.15s}
.fl-enlaces a:hover{color:var(--oro,#B37F24)}
.fl-sep{color:rgba(255,255,255,.25)}
/* El libro de reclamaciones es obligatorio: se destaca */
.fl-libro{display:inline-flex;align-items:center;gap:.4rem}
.fl-libro i{color:var(--oro,#B37F24);font-size:1.05rem}
.fl-redes{display:flex;gap:.6rem}
.fl-redes a{width:42px;height:42px;background:rgba(255,255,255,.1);border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;
  padding:0;transition:.16s}
.fl-redes a:hover{background:var(--oro,#B37F24);transform:translateY(-2px)}

.w-foot .copy{border-top:1px solid rgba(255,255,255,.1);margin-top:1.8rem;padding-top:1.4rem;
  text-align:center;display:block}
.w-foot .copy p{margin:0 0 .5rem;font-size:.86rem;color:#93a3bd}
.copy-cookies{font-size:.8rem!important;max-width:640px;margin:0 auto .5rem!important;line-height:1.55}
.copy-wama{font-size:.8rem!important;color:#6f7f9c!important}

@media(max-width:767px){
  .foot-legal{flex-direction:column;text-align:center}
  .fl-enlaces{justify-content:center}
}

/* Selector de firmantes del certificado */
.firmantes-caja{display:flex;flex-wrap:wrap;gap:.6rem;padding:.7rem;border:1px solid var(--linea);
  border-radius:9px;background:#fbfcfe;max-height:190px;overflow-y:auto}
.firmante{flex:1 1 220px;display:flex;gap:.55rem;align-items:flex-start;padding:.55rem .7rem;
  border:1.5px solid var(--linea);border-radius:8px;background:#fff;cursor:pointer;transition:.15s;margin:0}
.firmante:hover{border-color:var(--gold,#B37F24)}
.firmante:has(input:checked){border-color:var(--navy);background:#f2f5fa}
.firmante.sin{opacity:.55;cursor:not-allowed;background:#f8f9fb}
.firmante input{margin-top:.2rem;flex-shrink:0}
.firmante b{display:block;font-size:.86rem;color:var(--navy);line-height:1.25}
.firmante small{display:block;font-size:.76rem;color:var(--gris)}
.firmante .aviso{display:block;font-size:.72rem;color:#b45309;font-style:normal;margin-top:.15rem}

/* ===================================================================
   INDICADOR DE SUBIDA
   =================================================================== */
.subiendo{position:absolute;inset:0;z-index:1090;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;border-radius:inherit;
  backdrop-filter:blur(2px);animation:sub-aparece .16s ease}
@keyframes sub-aparece{from{opacity:0}to{opacity:1}}
.sub-caja{text-align:center}
.sub-aro{position:relative;width:78px;height:78px;margin:0 auto .9rem}
.sub-aro svg{width:78px;height:78px;transform:rotate(-90deg)}
.sub-aro circle{fill:none;stroke-width:4;stroke-linecap:round}
.sub-aro .pista{stroke:#e3e7ee}
.sub-aro .avance{stroke:var(--rojo,#9C0E12);transition:stroke-dashoffset .18s ease}
.sub-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.92rem;font-weight:700;color:var(--navy,#0B2242)}
.sub-txt{font-size:.95rem;font-weight:600;color:var(--navy,#0B2242)}
.sub-nota{font-size:.8rem;color:#8b95a5;margin-top:.25rem}

/* Vista previa mientras se procesa */
.prev-cargando{position:relative}
.prev-cargando::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.7);
  border-radius:inherit}
.prev-cargando::before{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px;
  margin:-13px 0 0 -13px;border:3px solid #e3e7ee;border-top-color:var(--rojo,#9C0E12);
  border-radius:50%;animation:sub-gira .7s linear infinite;z-index:2}
@keyframes sub-gira{to{transform:rotate(360deg)}}