/* =========================================================
   ILC Contigo — maqueta interna CORPO
   Sistema visual. Provisorio: nada aqui es definitivo.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}

:root{
  color-scheme:light;
  --base:19px;

  --fuente:Gotham, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --papel:#F6F4EF;
  --card:#FFFFFF;
  --ink:#111318;
  --ink2:#4B515C;
  --ink3:#79808C;
  --line:#E4DFD5;
  --line2:#F0ECE4;

  --azul:#11476E;
  --azul2:#0A3050;
  --azul-suave:#E8F0F6;
  --arena:#A85425;
  --arena-suave:#FBF0E7;
  --alerta:#9E1B12;
  --alerta-suave:#FBEBE9;
  --ok:#1C6B44;
  --ok-suave:#E9F3ED;

  /* acento de la seccion activa; cada pagina lo redefine */
  --acc:#11476E;
  --acc-suave:#E8F0F6;

  --h-ctrl:44px;
  --radio:16px;
  --radio-s:11px;
  --sombra-s:0 1px 2px rgba(17,19,24,.05);
  --sombra:0 2px 4px rgba(17,19,24,.04), 0 12px 28px rgba(17,19,24,.07);
  --sombra-alta:0 4px 10px rgba(17,19,24,.07), 0 22px 48px rgba(17,19,24,.12);
  --trans:180ms cubic-bezier(.2,.6,.3,1);

  /* Colores de filial extraidos del logo oficial de cada empresa.
     Ojo: RedSalud (#008CAA) y Consalud (#009090) son casi el mismo color;
     es una colision real entre dos marcas del grupo, no un error de la maqueta. */
  --m-ilc:#182448; --m-habitat:#C00018; --m-confuturo:#F03024;
  --m-consalud:#009090; --m-redsalud:#008CAA; --m-banco:#180C60;
}
html.t2{--base:21px}
html.t3{--base:24px}

/* acentos por seccion */
body.s-hoy      {--acc:#11476E;--acc-suave:#E8F0F6}
body.s-pension  {--acc:#12507E;--acc-suave:#E7F0F7}
body.s-salud    {--acc:#1C6B44;--acc-suave:#E7F2EC}
body.s-plata    {--acc:#8A5A10;--acc-suave:#FAF1DF}
body.s-tramites {--acc:#57358A;--acc-suave:#F0EBF8}
body.s-derechos {--acc:#0E6B6D;--acc-suave:#E5F2F2}
body.s-vida     {--acc:#A85425;--acc-suave:#FBF0E7}
body.s-alertas  {--acc:#9E1B12;--acc-suave:#FBEBE9}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--fuente);font-size:var(--base);font-weight:400;
  line-height:1.6;color:var(--ink);background:var(--papel);
  -webkit-font-smoothing:antialiased
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--fuente);font-weight:700;line-height:1.16;margin:0;letter-spacing:-.022em}
h1{letter-spacing:-.03em}

/* ---------- Controles flotantes (no son del producto) ---------- */
.mq-flot{position:fixed;right:14px;bottom:14px;z-index:960;display:flex;flex-direction:column;gap:7px;align-items:flex-end;font-family:var(--fuente)}
.mq-flot button{
  display:flex;align-items:center;gap:8px;background:rgba(17,19,24,.90);color:#E9E6DF;
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:9px 15px;
  font-size:13px;line-height:1;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);white-space:nowrap;transition:background var(--trans)
}
.mq-flot button:hover{background:rgba(17,19,24,.99)}
.mq-flot button .ic{width:15px;height:15px}
.mq-flot button[aria-pressed="true"]{background:#F0C36B;color:#181B22;border-color:#F0C36B;font-weight:600}
.mq-menu{
  display:none;background:rgba(17,19,24,.95);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:7px;box-shadow:0 10px 40px rgba(0,0,0,.4);backdrop-filter:blur(10px);
  min-width:212px;max-height:70vh;overflow:auto
}
.mq-menu.abierto{display:block}
.mq-menu .gr{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7E8794;padding:9px 12px 5px;font-weight:700}
.mq-menu a{
  display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;
  color:#E9E6DF;text-decoration:none;font-size:13.5px;line-height:1.2
}
.mq-menu a:hover{background:rgba(255,255,255,.10)}
.mq-menu a[aria-current="page"]{background:#F0C36B;color:#181B22;font-weight:600}
.mq-menu .pt{width:8px;height:8px;border-radius:50%;background:var(--p,#7E8794);flex:0 0 auto}
@media (max-width:820px){.mq-flot{bottom:74px;right:10px}.mq-flot button{padding:8px 12px;font-size:12px}}
@media print{.mq-flot{display:none}}

/* ---------- Escenario ---------- */
.escenario{padding:0;background:var(--papel);min-height:100vh}
.lienzo{container-type:inline-size;width:100%;margin:0;background:var(--papel);border:0;border-radius:0;overflow:visible;box-shadow:none}
body.vista-movil .escenario{background:#23262D;padding:30px 16px 60px;display:flex;justify-content:center;align-items:flex-start}
body.vista-movil .lienzo{width:414px;max-width:100%;border:11px solid #0E1014;border-radius:38px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.5)}

/* ---------- Notas de maqueta ---------- */
.nota-mq{
  border:1px dashed #C9A227;background:#FDF8E7;color:#5A4A12;border-radius:var(--radio-s);
  padding:13px 15px;margin:16px 0;font-size:.78em;line-height:1.55
}
.nota-mq::before{content:"Nota de maqueta";display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#9A7D14;font-weight:700;margin-bottom:5px}
body.sin-notas .nota-mq{display:none}

.ic{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-g{width:1.6em;height:1.6em}

/* =========================================================
   CABECERA
   ========================================================= */
.top-util{
  background:var(--azul2);color:#A9C4D9;font-size:.66em;letter-spacing:.01em;
  display:flex;align-items:center;gap:16px;padding:7px 16px
}
.top-util .der{margin-left:auto;display:flex;gap:16px;align-items:center}
.top-util a{color:#CFE2F0;text-decoration:none;display:flex;align-items:center;gap:6px}
.top-util a:hover{color:#fff}
.top-util .ic{width:13px;height:13px}
/* En movil no existe el boton "Instalar" de la cabecera (no cabe junto al logo),
   asi que el acceso vive aqui. En escritorio si existe el boton, y repetirlo
   en la franja es ruido: se oculta. La fecha hace el camino inverso. */
.top-util .u-fecha{display:none}
@container (min-width:820px){
  .top-util .u-fecha{display:inline}
  .top-util .u-instalar{display:none}
}

.top{background:var(--azul);color:#fff;padding:15px 16px}
.top-fila{display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo-img{height:42px;width:auto;display:block}
.top-acc{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn-icono{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:11px;height:var(--h-ctrl);padding:0 15px;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  cursor:pointer;font-size:.8em;line-height:1;text-decoration:none;transition:background var(--trans)
}
.btn-icono .ic{width:20px;height:20px}
/* el de buscar es solo icono: queda cuadrado */
.btn-icono[aria-label]{width:var(--h-ctrl);padding:0}
.btn-icono:hover{background:rgba(255,255,255,.22)}
.btn-instalar{display:none;background:#F0C36B;border-color:#F0C36B;color:#12283C;font-weight:700}
.btn-instalar:hover{background:#F5D08A}
.tam{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:11px;height:var(--h-ctrl);padding:0 4px;flex:0 0 auto}
.tam button{background:none;border:0;color:#fff;cursor:pointer;border-radius:8px;line-height:1;
  height:calc(var(--h-ctrl) - 10px);min-width:30px;display:flex;align-items:center;justify-content:center;
  padding:0 7px;transition:background var(--trans)}
.tam button:nth-child(1){font-size:13px}.tam button:nth-child(2){font-size:16px}.tam button:nth-child(3){font-size:20px}
.tam button[aria-pressed="true"]{background:#fff;color:var(--azul);font-weight:700}

/* ---------- Navegacion por necesidad ---------- */
.nav{background:var(--azul2);position:relative}
.nav-env{position:relative}
.nav ul{
  display:flex;gap:2px;list-style:none;margin:0;padding:0 16px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;scroll-behavior:smooth
}
.nav ul::-webkit-scrollbar{display:none}
.nav ul.arrastrando{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.nav ul.arrastrando a{pointer-events:none}
.nav a{
  display:flex;align-items:center;gap:8px;white-space:nowrap;color:#C6DAEA;text-decoration:none;
  padding:13px 14px;font-size:.8em;font-weight:600;border-bottom:3px solid transparent;
  transition:color var(--trans),background var(--trans);-webkit-user-select:none;user-select:none
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:#F0C36B}
.nav .n-alerta{color:#F5B5AE}
/* indicador de "hay mas" — solo en movil */
.nav-mas{
  display:none;position:absolute;top:0;right:0;height:100%;width:74px;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,48,80,0) 0%,var(--azul2) 62%);
  align-items:center;justify-content:flex-end;padding-right:10px;
  transition:opacity var(--trans)
}
.nav-mas .ic{width:17px;height:17px;color:#F0C36B;animation:vaiven 1.6s ease-in-out infinite}
.nav-mas.oculto{opacity:0}
@keyframes vaiven{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@container (max-width:819px){ .nav-mas{display:flex} }

/* ---------- Franja de alerta ---------- */
.alerta-franja{
  display:flex;gap:12px;align-items:flex-start;background:var(--alerta-suave);
  border-top:3px solid var(--alerta);padding:13px 16px;text-decoration:none;
  transition:background var(--trans)
}
.alerta-franja:hover{background:#F8E1DE}
.alerta-franja .ic{color:var(--alerta);width:1.5em;height:1.5em;margin-top:2px}
.alerta-franja .txt{flex:1}
.alerta-franja h3{font-size:1em;line-height:1.3;color:#6E140D}
.alerta-franja small{display:block;margin-top:5px;color:#8B4A44;font-size:.72em}

/* =========================================================
   CONTENIDO
   ========================================================= */
.cuerpo{padding:22px 16px 34px}
.col{display:block}
.sec{margin:0 0 34px}

.cab-sec{display:flex;align-items:center;gap:11px;margin:0 0 16px}
.cab-sec::before{content:"";width:5px;height:1.5em;border-radius:3px;background:var(--acc);flex:0 0 auto}
.cab-sec h2{font-size:1.3em}
.cab-sec .ver{
  margin-left:auto;font-size:.72em;color:var(--acc);text-decoration:none;font-weight:700;
  white-space:nowrap;display:flex;align-items:center;gap:5px;transition:gap var(--trans)
}
.cab-sec .ver:hover{gap:9px}
.cab-sec .ver .ic{width:14px;height:14px}

/* ---------- Foto ---------- */
.foto{
  position:relative;background:linear-gradient(135deg,#D9E2EA,#C9D6E0 40%,#E4D9CB);
  aspect-ratio:16/9;border-radius:var(--radio-s);overflow:hidden;display:flex;align-items:center;justify-content:center
}
.foto::after{content:"FOTO";position:absolute;bottom:7px;right:8px;font-size:9px;letter-spacing:.16em;color:rgba(17,19,24,.34);font-weight:700}
.foto .ic{width:34px;height:34px;color:rgba(17,19,24,.2);stroke-width:1.4}
.foto.alta{aspect-ratio:4/3}
.foto.con-img{background:#E6E2DA}
.foto.con-img::after{display:none}
.foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 420ms cubic-bezier(.2,.6,.3,1)}

/* ---------- Kicker ---------- */
.eti{display:inline-flex;align-items:center;gap:6px;font-size:.63em;letter-spacing:.11em;text-transform:uppercase;font-weight:800;color:var(--acc)}
.eti::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.eti-guia{color:var(--arena)}
.eti-alerta{color:var(--alerta)}

/* ---------- Tarjeta ---------- */
.tarjeta{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans)
}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:#D5CEC1}
.tarjeta:hover .foto img{transform:scale(1.05)}
.tarjeta .foto{border-radius:0;flex:0 0 auto}
.tarjeta .tx{padding:15px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.tarjeta h3{font-size:1.05em;line-height:1.27}
.tarjeta h3 a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 2px;background-position:0 92%;background-repeat:no-repeat;transition:background-size var(--trans)}
.tarjeta:hover h3 a{background-size:100% 2px}
.tarjeta p{margin:0;font-size:.83em;color:var(--ink2);line-height:1.5}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:4px;font-size:.71em;color:var(--ink3)}
.tarjeta--plana{border:0;background:none;box-shadow:none}
.tarjeta--plana:hover{transform:none;box-shadow:none}
.tarjeta--plana .foto{border-radius:var(--radio-s)}
.tarjeta--plana .tx{padding:12px 0 0}

.rejilla{display:grid;gap:16px}

/* ---------- Lista compacta ---------- */
.lista{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radio);overflow:hidden}
.lista .it{display:flex;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line2);text-decoration:none;align-items:center;transition:background var(--trans)}
.lista .it:last-child{border-bottom:0}
.lista .it:hover{background:#FBFAF6}
.lista .it .foto{width:88px;flex:0 0 88px;aspect-ratio:1/1;border-radius:10px}
.lista .it:hover .foto img{transform:scale(1.06)}
.lista .it .bd{min-width:0}
.lista .it h3{font-size:.97em;line-height:1.3;margin-bottom:6px}
.lista .it .meta{margin:0}
.lista .num{font-size:1.5em;font-weight:800;color:var(--acc);opacity:.32;width:34px;flex:0 0 34px;text-align:center;letter-spacing:-.04em}

/* ---------- Hero ---------- */
.hero{
  position:relative;border-radius:var(--radio);overflow:hidden;background:#1B2129;
  display:block;text-decoration:none;box-shadow:var(--sombra);
  transition:box-shadow var(--trans)
}
.hero:hover{box-shadow:var(--sombra-alta)}
.hero .foto{border-radius:0;aspect-ratio:16/10}
.hero:hover .foto img{transform:scale(1.04)}
.hero .capa{
  position:static;display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px 17px 20px;gap:9px;background:#12161C
}
.hero .eti{color:#F0C36B}
.hero h2{color:#fff;font-size:1.5em;line-height:1.13;text-shadow:0 1px 18px rgba(0,0,0,.4)}
.hero p{margin:0;color:rgba(255,255,255,.86);font-size:.86em;line-height:1.45}
.hero .meta{color:rgba(255,255,255,.72)}
.hero .meta .marca{background:rgba(255,255,255,.94);border-color:transparent}

/* ---------- Sellos de marca ---------- */
.marca{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:100px;
  padding:3px 10px 3px 5px;background:#fff;font-size:.86em;line-height:1;font-weight:700;color:var(--ink2);text-decoration:none
}
.marca img{height:19px;width:19px;border-radius:4px;object-fit:contain;flex:0 0 auto}
.marca .punto{width:9px;height:9px;border-radius:50%;background:var(--c,#999);flex:0 0 auto;margin-left:3px}
.marca.tiene-logo .punto{display:none}
.marca--ilc{--c:var(--m-ilc)}.marca--habitat{--c:var(--m-habitat)}.marca--confuturo{--c:var(--m-confuturo)}
.marca--consalud{--c:var(--m-consalud)}.marca--redsalud{--c:var(--m-redsalud)}.marca--banco{--c:var(--m-banco)}

.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:100px;padding:7px 14px;font-size:.78em;text-decoration:none;color:var(--ink2);cursor:pointer;transition:all var(--trans)}
.chip:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- Cajas laterales ---------- */
.caja{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:17px;box-shadow:var(--sombra-s)}
.caja h3{font-size:1.03em;margin-bottom:11px}
.caja-azul{background:var(--acc-suave);border-color:transparent}
.caja-arena{background:var(--arena-suave);border-color:#EBD9C6}

.ayuda{background:var(--arena-suave);border:1px solid #EBD9C6;border-radius:var(--radio);padding:19px}
.ayuda h3{font-size:1.12em;margin-bottom:6px}
.ayuda p{margin:0 0 13px;font-size:.85em;color:#6B4A2C}
.tel{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--arena);color:#fff;border-radius:12px;padding:15px;text-decoration:none;font-weight:800;font-size:1.05em;transition:background var(--trans)}
.tel:hover{background:#8E441C}
.tel .ic{width:1.3em;height:1.3em}
.ayuda .horario{display:block;text-align:center;margin-top:9px;font-size:.73em;color:#7A5735}
.ayuda-acc{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ayuda-acc a{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #EBD9C6;border-radius:11px;padding:11px 13px;text-decoration:none;font-size:.83em;color:#5A3C22;transition:border-color var(--trans),transform var(--trans)}
.ayuda-acc a:hover{border-color:var(--arena);transform:translateX(2px)}
.ayuda-acc .ic{color:var(--arena)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--acc);color:#fff;border:0;border-radius:12px;padding:14px 20px;text-decoration:none;font-weight:700;font-size:.9em;cursor:pointer;transition:filter var(--trans),transform var(--trans)}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-2{background:#fff;color:var(--acc);border:1.5px solid var(--acc)}
.btn-2:hover{background:var(--acc-suave)}
.btn-bloque{width:100%}

/* ---------- Cabecera de area ---------- */
.area-cab{background:var(--card);border-bottom:1px solid var(--line);padding:26px 16px 22px;position:relative;overflow:hidden}
.area-cab::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--acc)}
.area-cab .ico{width:46px;height:46px;border-radius:13px;background:var(--acc-suave);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.area-cab .ico .ic{width:25px;height:25px;stroke-width:2}
.area-cab h1{font-size:2em;margin-bottom:9px}
.area-cab .baja{margin:0;color:var(--ink2);font-size:.92em;max-width:62ch;line-height:1.55}
.chips-f{display:flex;gap:9px;margin-top:17px;flex-wrap:wrap}
.chip-f{display:inline-flex;align-items:center;border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:8px 16px;font-size:.78em;font-weight:600;cursor:pointer;color:var(--ink2);transition:all var(--trans)}
.chip-f:hover{border-color:var(--acc);color:var(--acc)}
.chip-f.sel{border-color:var(--acc);background:var(--acc);color:#fff}

.migas{display:flex;gap:8px;align-items:center;font-size:.73em;color:var(--ink3);margin-bottom:6px}
.migas a{color:var(--acc);text-decoration:none;font-weight:700}

/* ---------- Canales por empresa ---------- */
.canales{background:#fff;border-top:1px solid var(--line);padding:22px 16px}
.canales h3{font-size:.98em;margin-bottom:4px}
.canales p{margin:0 0 14px;font-size:.77em;color:var(--ink3)}
.canales-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.canal-b{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;font-size:.8em;font-weight:700;color:var(--ink2);border-left:4px solid var(--c,#999);background:#fff;transition:transform var(--trans),box-shadow var(--trans)}
.canal-b:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.canal-b img{height:27px;width:auto;max-width:100%;object-fit:contain}
.canal-b.marca--ilc img{height:36px}
.canal-b.tiene-logo .canal-txt{display:none}

/* ---------- Pie ---------- */
.pie{background:var(--azul2);color:#B4C9DA;padding:26px 16px;font-size:.76em;line-height:1.65}
.pie .logo-pie{height:38px;width:auto;display:block;margin:0 0 14px}
.pie a{color:#9BC7E8}
.pie-cols{display:grid;gap:22px}
.pie-cols h4{color:#fff;font-size:1.05em;margin-bottom:9px}
.pie-cols ul{list-style:none;margin:0;padding:0}
.pie-cols li{margin-bottom:6px}
.pie-cols a{text-decoration:none}.pie-cols a:hover{text-decoration:underline}
.pie-mq{margin-top:18px;padding-top:13px;border-top:1px solid #16405F;color:#7FA0B8;font-size:.94em}

/* ---------- Barra inferior movil ---------- */
.barra-inf{display:flex;border-top:1px solid var(--line);background:#fff;position:sticky;bottom:0;z-index:40}
.barra-inf a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;text-decoration:none;color:var(--ink3);font-size:.61em;font-weight:700}
.barra-inf a[aria-current="page"]{color:var(--acc)}
.barra-inf .ic{width:22px;height:22px}

/* =========================================================
   NOTA / ARTICULO
   ========================================================= */
.art{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:22px 18px;box-shadow:var(--sombra-s)}
.art h1{font-size:1.78em;line-height:1.13;margin:9px 0 13px}
.bajada{font-size:1.03em;line-height:1.5;color:var(--ink2);margin:0 0 17px}
.meta-barra{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center;padding:13px 0;margin:0 0 17px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);font-size:.77em;color:var(--ink3)}
.meta-barra b{color:var(--ink2)}
.sello-vig{display:inline-flex;align-items:center;gap:6px;background:var(--ok-suave);color:var(--ok);border:1px solid #C4E0D0;border-radius:100px;padding:4px 11px;font-weight:800;font-size:.94em}
.acc-nota{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.acc-nota .chip .ic{color:var(--acc)}
.texto{font-size:1.01em;line-height:1.75}
.texto p{margin:0 0 1.05em}
.texto h2{font-size:1.28em;margin:1.6em 0 .5em}
.texto h3{font-size:1.1em;margin:1.3em 0 .4em}
.texto ul,.texto ol{margin:0 0 1.1em;padding-left:1.3em}
.texto li{margin-bottom:.5em}
.en-simple{background:var(--acc-suave);border-left:5px solid var(--acc);border-radius:0 var(--radio-s) var(--radio-s) 0;padding:16px 18px;margin:22px 0}
.en-simple h3{font-size:1.02em;margin-bottom:8px;color:var(--acc)}
.en-simple p{margin:0;font-size:.93em}
.tabla{width:100%;border-collapse:collapse;margin:18px 0;font-size:.87em;background:#fff;border:1px solid var(--line);border-radius:var(--radio-s);overflow:hidden}
.tabla th,.tabla td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:top}
.tabla th{background:#F4F1EA;font-weight:800;font-size:.92em}
.tabla tr:last-child td{border-bottom:0}
.tabla-env{overflow-x:auto}
.checklist{list-style:none;padding:0;margin:16px 0}
.checklist li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line2);font-size:.93em}
.checklist li:last-child{border-bottom:0}
.checklist .ic{color:var(--ok);margin-top:4px}
.vigencia{display:flex;gap:11px;align-items:flex-start;background:#F4F1EA;border:1px solid var(--line);border-radius:var(--radio-s);padding:14px;margin:22px 0 0;font-size:.79em;color:var(--ink2);line-height:1.5}
.vigencia .ic{color:var(--ink3);margin-top:2px}
.fuente-caja{display:flex;gap:13px;align-items:center;background:#FBF9F5;border:1px solid var(--line);border-radius:var(--radio-s);padding:14px;margin:18px 0 0}
.fuente-caja .marca-grande{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.94em}
.fuente-caja .marca-grande img{height:32px;width:auto;max-width:150px}
.fuente-caja.marca--ilc .marca-grande img{height:42px}
.fuente-caja .marca-grande .punto{width:13px;height:13px;border-radius:50%;background:var(--c,#999)}
.fuente-caja .marca-grande.tiene-logo .punto,.fuente-caja .marca-grande.tiene-logo .mg-txt{display:none}
.fuente-caja p{margin:0;font-size:.75em;color:var(--ink3)}

/* ---------- Canal de filial ---------- */
.canal-cab{background:var(--card);border-bottom:1px solid var(--line);padding:26px 16px 22px;position:relative}
.canal-cab .banda{position:absolute;left:0;right:0;top:0;height:6px;background:var(--c,#999)}
.canal-id{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.canal-id .marca-grande{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.5em}
.canal-id .marca-grande img{height:44px;width:auto;max-width:210px}
.canal-id .marca-grande .punto{width:20px;height:20px;border-radius:50%;background:var(--c,#999)}
.canal-id .marca-grande.tiene-logo .punto,.canal-id .marca-grande.tiene-logo .mg-txt{display:none}
.canal-cab .desc{margin:12px 0 0;font-size:.87em;color:var(--ink2);max-width:60ch}
.canal-cab .kpi{display:flex;gap:24px;margin-top:17px;font-size:.75em;color:var(--ink3)}
.canal-cab .kpi b{display:block;font-size:1.9em;color:var(--ink);letter-spacing:-.04em}

/* ---------- Onboarding ---------- */
.ob{padding:26px 16px}
.ob-paso{max-width:620px;margin:0 auto 34px}
.ob-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;font-size:.78em;margin-bottom:12px}
.ob-paso h2{font-size:1.42em;margin-bottom:6px}
.ob-paso .sub{font-size:.85em;color:var(--ink3);margin:0 0 18px}
.op-lista{display:flex;flex-direction:column;gap:11px}
.op{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--line);border-radius:var(--radio);padding:17px 16px;cursor:pointer;text-decoration:none;font-size:1.01em;font-weight:700;transition:all var(--trans)}
.op:hover{border-color:var(--acc);transform:translateX(3px)}
.op.sel{border-color:var(--acc);background:var(--acc-suave)}
.op .ic-g{color:var(--acc)}
.op small{display:block;font-weight:400;font-size:.73em;color:var(--ink3);margin-top:3px}
.chips-g{display:flex;flex-wrap:wrap;gap:10px}
.chip-g{display:inline-flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--line);border-radius:100px;padding:12px 20px;font-size:.95em;font-weight:700;cursor:pointer;transition:all var(--trans)}
.chip-g:hover{border-color:var(--acc)}
.chip-g.sel{border-color:var(--acc);background:var(--acc-suave);color:var(--acc)}
.chip-g .ic{color:var(--acc)}
.ob-inst{background:#fff;border:1px solid var(--line);border-radius:var(--radio);padding:20px;box-shadow:var(--sombra-s)}
.pasos-ios{list-style:none;counter-reset:p;padding:0;margin:14px 0 0}
.pasos-ios li{counter-increment:p;display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line2);font-size:.91em}
.pasos-ios li:last-child{border-bottom:0}
.pasos-ios li::before{content:counter(p);flex:0 0 auto;width:27px;height:27px;border-radius:50%;background:var(--acc-suave);color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78em}
.pasos-ios .ic{color:var(--ink3);margin:0 3px}
.sin-registro{display:flex;gap:11px;align-items:center;background:var(--ok-suave);border:1px solid #C4E0D0;border-radius:var(--radio-s);padding:13px 15px;font-size:.85em;color:#14563A;margin-top:18px}
.sin-registro .ic{color:var(--ok);flex:0 0 auto}

/* ---------- Aviso / notificacion ---------- */
.bloqueo{background:linear-gradient(165deg,#1E3247,#2E4257 45%,#4A3B48);border-radius:26px;padding:52px 16px 26px;min-height:520px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.bloqueo .hora{text-align:center;color:#fff;font-weight:200;font-size:4.1em;line-height:1;letter-spacing:-.03em}
.bloqueo .fecha{text-align:center;color:rgba(255,255,255,.82);font-size:.86em;margin:-6px 0 22px}
.push{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-radius:18px;padding:13px 15px;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.push-cab{display:flex;align-items:center;gap:8px;font-size:.71em;color:var(--ink3);margin-bottom:6px}
.push-cab .ico-app{width:20px;height:20px;border-radius:5px;background:#fff;border:1px solid var(--line);object-fit:contain;padding:1px;flex:0 0 auto}
.push-cab b{color:var(--ink2);font-weight:700}
.push-cab .t{margin-left:auto}
.push h3{font-size:.97em;line-height:1.3;margin-bottom:4px;font-weight:800}
.push p{margin:0;font-size:.85em;color:var(--ink2);line-height:1.4}
.reglas{display:grid;gap:10px}
.regla{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radio-s);padding:13px 14px;font-size:.85em}
.regla .ic{color:var(--acc);margin-top:3px;flex:0 0 auto}
.regla b{display:block;margin-bottom:2px}
.regla span{color:var(--ink2);font-size:.9em}
.contador{display:flex;align-items:center;gap:11px;background:var(--arena-suave);border:1px solid #EBD9C6;border-radius:var(--radio-s);padding:13px 15px;font-size:.85em;color:#6B4A2C}
.barras-av{display:flex;gap:5px;margin-left:auto}
.barras-av i{width:26px;height:9px;border-radius:5px;background:#E4D3C0;display:block}
.barras-av i.on{background:var(--arena)}

/* ---------- Escritorio editorial ---------- */
.adm{background:#F1EFEA;min-height:520px}
.adm-top{background:#141920;color:#E9E6DF;padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.8em}
.adm-top .logo-img{height:22px}
.adm-top .rol{background:#F0C36B;color:#151A21;border-radius:7px;padding:3px 9px;font-size:.82em;font-weight:800}
.adm-top .der{margin-left:auto;display:flex;gap:9px;align-items:center;color:#98A0AC}
.adm-cols{display:grid;gap:16px;padding:16px}
.panel{background:#fff;border:1px solid #DCD7CD;border-radius:var(--radio);overflow:hidden}
.panel-cab{padding:12px 14px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:9px;background:#FBF9F5}
.panel-cab h3{font-size:.95em}
.panel-cab .cont{margin-left:auto;font-size:.71em;color:var(--ink3)}
.panel-cuerpo{padding:12px 14px}
.cola-it{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line2)}
.cola-it:last-child{border-bottom:0}
.cola-it .bd{flex:1;min-width:0}
.cola-it h4{font-size:.89em;line-height:1.3;font-weight:800;margin:0 0 5px}
.cola-it .meta{font-size:.69em;color:var(--ink3);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.et{display:inline-block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;border-radius:5px;padding:3px 7px}
.et-pub{background:var(--ok-suave);color:var(--ok)}
.et-sens{background:var(--alerta-suave);color:var(--alerta)}
.et-esp{background:#FDF3DC;color:#8A6A11}
.slot{border:2px dashed #CFC8BB;border-radius:var(--radio-s);padding:12px;margin-bottom:11px;background:#FCFBF8}
.slot-tit{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#96907F;font-weight:800;margin-bottom:8px}
.slot.lleno{border-style:solid;border-color:var(--line);background:#fff}
.slot h4{font-size:1em;line-height:1.25;margin:0 0 6px}
.slot .meta{font-size:.69em;color:var(--ink3);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.dec{display:flex;flex-direction:column;gap:9px}
.dec-b{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:.83em;background:#fff;cursor:pointer;text-align:left;width:100%;transition:all var(--trans)}
.dec-b:hover{border-color:var(--acc);background:var(--acc-suave)}
.dec-b .ic{color:var(--acc)}
.dec-b.destac{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.dec-b.destac .ic{color:#fff}
.vol{display:flex;flex-direction:column;gap:9px;font-size:.77em}
.vol-fila{display:flex;align-items:center;gap:10px}
.vol-fila .n{width:120px;flex:0 0 120px;color:var(--ink2);font-weight:700}
.vol-bar{flex:1;height:11px;background:#EAE6DE;border-radius:6px;overflow:hidden}
.vol-bar i{display:block;height:100%;background:var(--ok);border-radius:6px}
.vol-bar i.bajo{background:var(--alerta)}
.vol-fila .c{width:74px;flex:0 0 74px;text-align:right;color:var(--ink3);font-size:.92em}
.vol-fila .c.mal{color:var(--alerta);font-weight:800}

/* =========================================================
   ESCRITORIO
   ========================================================= */
@container (min-width:820px){
  .top-util{padding:8px 30px;font-size:.7em}
  .top{padding:18px 30px}
  .top-acc{--h-ctrl:48px}
  .logo-img{height:54px}
  .btn-instalar{display:flex}
  .nav ul{padding:0 30px;overflow:visible;cursor:default}
  .nav a{font-size:.83em;padding:14px 16px}
  .cuerpo{padding:28px 30px 44px}
  .col{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:38px;align-items:start}
  .col-lat{position:sticky;top:18px;display:flex;flex-direction:column;gap:18px}
  .r-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .r-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .r-destacado{grid-template-columns:1.55fr 1fr}
  .hero .foto{aspect-ratio:21/9}
  .hero .capa{
    position:absolute;inset:0;padding:34px 34px 30px;gap:11px;
    background:linear-gradient(to top,rgba(9,12,17,.95) 0%,rgba(9,12,17,.80) 34%,rgba(9,12,17,.20) 66%,rgba(9,12,17,0) 100%)
  }
  .hero h2{font-size:2.35em;max-width:19ch}
  .hero p{font-size:.95em;max-width:56ch}
  .cab-sec h2{font-size:1.44em}
  .area-cab{padding:34px 30px 28px}
  .area-cab h1{font-size:2.6em}
  .canal-cab{padding:30px 30px 28px}
  .canales{padding:26px 30px}
  .canales-grid{grid-template-columns:repeat(6,1fr)}
  .canal-b{flex-direction:column;text-align:center;gap:8px;border-left:1px solid var(--line);border-top:4px solid var(--c,#999)}
  .pie{padding:34px 30px 26px}
  .pie-cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
  .barra-inf{display:none}
  .alerta-franja{padding:14px 30px;align-items:center}
  .art{padding:34px 44px}
  .art h1{font-size:2.4em}
  .bajada{font-size:1.13em}
  .ob{padding:38px 30px}
  .adm-cols{grid-template-columns:300px minmax(0,1fr) 290px;padding:18px}
  .bloqueo{max-width:400px;margin:0 auto}
  .lista .it .foto{width:104px;flex:0 0 104px}
}
@container (min-width:1080px){
  .cuerpo{padding:32px 44px 52px}
  .hero h2{font-size:2.75em}
}
/* franjas a sangre, contenido centrado */
@container (min-width:820px){
  .top-util,.top,.nav ul,.alerta-franja,.cuerpo,.canales,.pie,.canal-cab,.area-cab,.ob{
    padding-left:max(30px,(100% - 1280px)/2);padding-right:max(30px,(100% - 1280px)/2)}
}
@container (min-width:1080px){
  .top-util,.top,.nav ul,.alerta-franja,.cuerpo,.canales,.pie,.canal-cab,.area-cab,.ob{
    padding-left:max(44px,(100% - 1280px)/2);padding-right:max(44px,(100% - 1280px)/2)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}