/* ==========================================================
   Compromiso Ético · Optral / Cunext Group
   Estilos acotados con prefijo .ce- para no interferir con el tema.
   Ajustar solo las variables para igualar la web de Optral.
   ========================================================== */
.ce{
  --ce-accent:#F5A800;        /* naranja del submenú de Optral */
  --ce-accent-dark:#D68F00;
  --ce-text:#3A3A3A;
  --ce-muted:#6B6B6B;
  --ce-line:#E3E3E3;
  --ce-soft:#F2F2F2;          /* gris del submenú lateral */
  --ce-dark:#2B2F36;
    color:var(--ce-text);line-height:1.6;
  padding:48px 0 64px;box-sizing:border-box;
}
.ce *,.ce *::before,.ce *::after{box-sizing:border-box}
.ce a{color:inherit}
.ce-breadcrumb{font-size:13px;color:var(--ce-muted);margin-bottom:24px}
.ce-breadcrumb a{text-decoration:none}
.ce-breadcrumb a:hover{color:var(--ce-accent)}
.ce-breadcrumb span{margin:0 6px}

.ce-layout{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}

/* Submenú lateral (réplica del de Compañía) */
.ce-sidenav{background:var(--ce-soft);padding:20px 22px;font-size:14px}
.ce-sidenav ul{list-style:none;margin:0;padding:0}
.ce-sidenav li{margin:0 0 12px}
.ce-sidenav a{text-decoration:none;color:var(--ce-text)}
.ce-sidenav a:hover{color:var(--ce-accent)}
.ce-sidenav .is-section > a{color:var(--ce-accent)}
.ce-sidenav .is-section > a::before{content:"> "}
.ce-sidenav li:not(.is-section) > a::before{content:"- "}
.ce-sidenav ul ul{margin:10px 0 0 14px}
.ce-sidenav ul ul li{margin-bottom:8px}
.ce-sidenav ul ul a::before{content:"· "!important}
.ce-sidenav .is-current > a{color:var(--ce-accent);font-weight:500}

/* Cabecera */
.ce-eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ce-accent);margin:0 0 8px}
.ce h1{font-size:36px;line-height:1.15;margin:0 0 20px;color:var(--ce-dark);font-weight:700}
.ce h2{font-size:24px;line-height:1.25;margin:44px 0 14px;color:var(--ce-dark);font-weight:700}
.ce h3{font-size:18px;margin:0 0 10px;color:var(--ce-dark);font-weight:700}
.ce p{margin:0 0 14px}
.ce-lead{font-size:19px;color:var(--ce-dark);border-left:4px solid var(--ce-accent);padding-left:18px;margin:0 0 22px}

/* Tarjetas de los tres elementos */
.ce-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.ce-card{border:1px solid var(--ce-line);border-top:4px solid var(--ce-accent);padding:24px 22px;display:flex;flex-direction:column;background:#fff}
.ce-card .ce-num{font-size:13px;font-weight:700;color:var(--ce-accent);margin-bottom:6px}
.ce-card p{font-size:15px;color:var(--ce-muted);flex:1}

/* Botones */
.ce-btn{display:inline-block;background:var(--ce-accent);color:var(--ce-dark)!important;text-decoration:none;font-weight:700;font-size:14px;padding:12px 20px;border:0;transition:background .15s;align-self:flex-start}
.ce-btn:hover{background:var(--ce-accent-dark)}
.ce-btn--ghost{background:transparent;color:var(--ce-dark)!important;border:2px solid var(--ce-dark);padding:10px 18px}
.ce-btn--ghost:hover{background:var(--ce-dark);color:#fff!important}
.ce-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* Lista de materias del Código */
.ce-topics{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.ce-topics li{position:relative;padding-left:22px}
.ce-topics li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--ce-accent)}

/* Bloque destacado / descarga */
.ce-box{background:var(--ce-soft);padding:28px;margin-top:36px}
.ce-box h2{margin-top:0}
.ce-note{font-size:13px;color:var(--ce-muted);margin-top:12px}

/* Garantías del Canal */
.ce-guarantees{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.ce-guarantee{border-left:4px solid var(--ce-accent);padding:4px 0 4px 18px}
.ce-guarantee p{font-size:15px}
.ce-guarantee:last-child:nth-child(odd){grid-column:1/-1}

.ce-back{display:inline-block;margin-top:40px;font-size:14px;text-decoration:none;color:var(--ce-muted)}
.ce-back:hover{color:var(--ce-accent)}

@media (max-width:900px){
  .ce-layout{grid-template-columns:1fr;gap:28px}
  .ce-sidenav{order:2}
  .ce-cards{grid-template-columns:1fr}
  .ce-topics,.ce-guarantees{grid-template-columns:1fr}
  .ce h1{font-size:28px}
}

/* ---- Página única ---- */
.ce-quicknav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0 8px}
.ce-quicknav a{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid var(--ce-line);border-left:4px solid var(--ce-accent);padding:14px 16px;font-weight:700;font-size:15px;color:var(--ce-dark);background:#fff;transition:background .15s}
.ce-quicknav a:hover{background:var(--ce-soft)}
.ce-quicknav .ce-num{color:var(--ce-accent);font-size:13px}
.ce-section{border-top:1px solid var(--ce-line);margin-top:48px;padding-top:8px;scroll-margin-top:110px}
.ce-section > .ce-num{display:block;font-size:13px;font-weight:700;color:var(--ce-accent);margin-top:36px}
.ce-section > h2{margin-top:4px}
.ce-section h3.ce-sub{font-size:18px;margin:28px 0 10px}
.ce-totop{display:inline-block;margin-top:18px;font-size:13px;text-decoration:none;color:var(--ce-muted)}
.ce-totop:hover{color:var(--ce-accent)}
html{scroll-behavior:smooth}
@media (max-width:900px){.ce-quicknav{grid-template-columns:1fr}}

/* Ajustes para convivir con Bootstrap */
.ce a:hover,.ce a:focus{text-decoration:none}
.ce .ce-content{min-width:0}
.ce h1,.ce h2,.ce h3{font-family:inherit}