/* =========================================================
   HIG ASSOCIATES — HOJA DE ESTILOS COMPARTIDA
   Sitio web y tarjetas digitales.
   ========================================================= */
:root{
  /* Azul claro de fondo, como lo pidió la gerencia */
  --cielo:#E3EDF9;
  --cielo-2:#F2F7FC;
  --blanco:#FFFFFF;

  --azul-900:#0C2A56;
  --azul:#144185;
  --azul-600:#2557A0;
  --azul-400:#4A8FF0;

  --naranja:#E48006;
  --naranja-cl:#F2AA32;

  --tinta:#15202E;
  --gris:#53657E;
  --gris-cl:#8597AF;
  --borde:#CBDAEC;

  --sombra:0 1px 3px rgba(12,42,86,.06), 0 10px 26px -12px rgba(12,42,86,.20);
  --sombra-alta:0 4px 10px rgba(12,42,86,.09), 0 24px 50px -18px rgba(12,42,86,.32);
  --max:980px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  background:var(--cielo);color:var(--tinta);
  font-family:'Inter',sans-serif;line-height:1.6;
  min-height:100vh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;letter-spacing:-.02em;}
.mono{font-family:'IBM Plex Mono',monospace;}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,28px);}

/* ===== Logotipo ===== */
.logo{display:inline-flex;align-items:center;gap:10px;}
.logo svg{width:40px;height:auto;overflow:visible;flex-shrink:0;}
.logo .letra{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:square;}
.logo .punto{fill:currentColor;}
.logo .via{fill:none;stroke:var(--naranja-cl);stroke-width:3.4;stroke-linecap:round;}
.logo-t{display:flex;flex-direction:column;line-height:1;font-family:'Archivo',sans-serif;
  font-weight:800;font-size:.96rem;letter-spacing:.04em;text-align:left;}
.logo-t em{font-style:normal;font-size:.5em;font-weight:600;letter-spacing:.3em;opacity:.68;margin-top:4px;}

/* ===== Botones ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:10px;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:.85rem;border:none;cursor:pointer;
  transition:transform .15s,box-shadow .2s,background .2s;
}
.btn:active{transform:translateY(1px);}
.btn-nar{background:linear-gradient(135deg,var(--naranja-cl),var(--naranja));color:#fff;
  box-shadow:0 5px 16px -5px rgba(228,128,6,.55);}
.btn-nar:hover{transform:translateY(-2px);box-shadow:0 9px 24px -6px rgba(228,128,6,.65);}
.btn-azul{background:var(--azul);color:#fff;}
.btn-azul:hover{background:var(--azul-600);transform:translateY(-2px);}
.btn-claro{background:var(--blanco);color:var(--azul);box-shadow:var(--sombra);}
.btn-claro:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);}
.btn-borde{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.45);}
.btn-borde:hover{background:rgba(255,255,255,.2);border-color:#fff;}

/* ===== Cabecera azul con onda ===== */
.cabecera{
  position:relative;color:#fff;padding:26px 0 72px;overflow:hidden;
  background:
    radial-gradient(640px 340px at 84% 6%, rgba(74,143,240,.42), transparent 62%),
    radial-gradient(520px 300px at 8% 96%, rgba(228,128,6,.2), transparent 64%),
    linear-gradient(150deg, var(--azul-900) 0%, var(--azul) 58%, var(--azul-600) 100%);
}
.cab-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.cab-nav .logo{color:#fff;}
.cab-cuerpo{margin-top:34px;max-width:46ch;}
.cab-cuerpo h1{font-size:clamp(1.7rem,4.2vw,2.7rem);font-weight:800;line-height:1.08;}
.cab-cuerpo p{margin-top:15px;color:rgba(255,255,255,.84);font-size:1rem;}
.cab-lema{
  margin-top:20px;display:inline-flex;align-items:center;gap:9px;padding:8px 15px;
  border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.07em;
}
.cab-lema .pt{width:7px;height:7px;border-radius:50%;background:var(--naranja-cl);box-shadow:0 0 9px var(--naranja-cl);}
.onda{position:absolute;left:0;right:0;bottom:-1px;line-height:0;}
.onda svg{display:block;width:100%;height:auto;}

/* ===== Secciones desplegables ===== */
.menu{margin-top:-34px;position:relative;z-index:5;display:grid;gap:14px;padding-bottom:40px;}
.panel{background:var(--blanco);border-radius:16px;border:1px solid var(--borde);box-shadow:var(--sombra);overflow:hidden;}
.panel-cab{
  width:100%;display:flex;align-items:center;gap:15px;padding:20px 22px;
  background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
  transition:background .2s;
}
.panel-cab:hover{background:var(--cielo-2);}
.panel-cab .pic{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(145deg,var(--azul),var(--azul-600));
  box-shadow:0 6px 16px -7px rgba(20,65,133,.6);
}
.panel-cab .ptxt{flex:1;min-width:0;}
.panel-cab h2{font-size:1.14rem;font-weight:800;}
.panel-cab p{font-size:.86rem;color:var(--gris);margin-top:3px;}
.panel-cab .fl{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--cielo);color:var(--azul);font-size:.8rem;
  transition:transform .3s;
}
.panel.abierto .panel-cab .fl{transform:rotate(180deg);}
.panel-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s ease;}
.panel.abierto .panel-cuerpo{grid-template-rows:1fr;}
.panel-cuerpo > div{overflow:hidden;}
.panel-in{padding:4px 22px 24px;}

/* Grupos de servicios */
.grupo{border-top:1px solid var(--borde);}
.grupo-cab{
  width:100%;display:flex;align-items:center;gap:12px;padding:15px 4px;
  background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
}
.grupo-cab:hover h3{color:var(--azul);}
.grupo-cab .ic{font-size:1.15rem;width:26px;text-align:center;flex-shrink:0;}
.grupo-cab .gt{flex:1;min-width:0;}
.grupo-cab h3{font-size:.98rem;font-weight:700;transition:color .2s;}
.grupo-cab .res{font-size:.81rem;color:var(--gris);margin-top:2px;}
.grupo-cab .mas{color:var(--naranja);font-size:1.1rem;flex-shrink:0;transition:transform .3s;}
.grupo.abierto .grupo-cab .mas{transform:rotate(45deg);}
.grupo-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease;}
.grupo.abierto .grupo-cuerpo{grid-template-rows:1fr;}
.grupo-cuerpo > div{overflow:hidden;}
.serv-lista{padding:2px 0 16px 38px;display:grid;gap:11px;}
.serv-it{border-left:3px solid var(--borde);padding-left:14px;}
.serv-it b{display:block;font-size:.88rem;font-weight:600;margin-bottom:3px;}
.serv-it span{display:block;font-size:.83rem;color:var(--gris);line-height:1.55;}
.destacado .grupo-cab .ic{filter:drop-shadow(0 0 6px rgba(228,128,6,.5));}
.destacado{background:linear-gradient(90deg, rgba(242,170,50,.07), transparent 60%);}

/* Directorio de colaboradores */
.dir{display:grid;gap:11px;padding-top:6px;}
.pers{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:13px;
  background:var(--cielo-2);border:1px solid var(--borde);
  transition:transform .18s,box-shadow .2s,border-color .2s;
}
.pers:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--azul-400);}
.pers .av{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;
  background:linear-gradient(145deg,var(--azul),var(--azul-600));
}
.pers .av img{width:100%;height:100%;object-fit:cover;}
.pers .pd{flex:1;min-width:0;}
.pers .pd b{display:block;font-size:.95rem;font-weight:600;}
.pers .pd span{display:block;font-size:.81rem;color:var(--gris);}
.pers .ver{
  font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--naranja);white-space:nowrap;flex-shrink:0;
}

/* Contacto */
.cont-g{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-top:8px;}
.cont-dato{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:.89rem;}
.cont-dato .ci{color:var(--naranja);flex-shrink:0;}
.cont-dato b{display:block;font-weight:600;}
.cont-dato span{color:var(--gris);font-size:.84rem;}
form{display:flex;flex-direction:column;gap:11px;}
.campo{display:flex;flex-direction:column;gap:5px;}
label{font-size:.78rem;color:var(--gris);font-weight:500;}
input,textarea,select{
  background:var(--blanco);border:1.5px solid var(--borde);border-radius:9px;
  padding:11px 13px;color:var(--tinta);font-family:'Inter',sans-serif;font-size:16px;
}
input:focus,textarea:focus,select:focus{border-color:var(--azul-400);outline:none;}
textarea{min-height:82px;resize:vertical;}
.check{display:flex;gap:10px;align-items:flex-start;}
.check input{width:19px;height:19px;min-width:19px;margin-top:2px;accent-color:var(--azul);}
.check label{font-size:.78rem;line-height:1.5;}
.check a{color:var(--azul);text-decoration:underline;}
.aviso-form{display:none;padding:12px 14px;border-radius:9px;font-size:.84rem;line-height:1.5;}
.aviso-form.warn{display:block;background:rgba(228,128,6,.1);border:1px solid rgba(228,128,6,.4);}
.aviso-form.ok{display:block;background:rgba(23,124,75,.1);border:1px solid rgba(23,124,75,.4);}

/* Franja de banners */
.banners{padding:34px 0 46px;}
.banners h3{
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris-cl);font-weight:400;margin-bottom:13px;
  display:flex;align-items:center;gap:10px;
}
.banners h3::after{content:"";flex:1;height:1px;background:var(--borde);}
.banner-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;}
.banner{
  border-radius:13px;border:1.5px dashed var(--borde);background:var(--cielo-2);
  min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:16px;
}
.banner .bi{font-size:1.3rem;opacity:.45;}
.banner .bt{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris-cl);line-height:1.6;}

footer{background:var(--azul-900);color:rgba(255,255,255,.7);padding:34px 0 26px;font-size:.85rem;}
footer .logo{color:#fff;}
.pie-g{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;}
.pie-b{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.74rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

.nota{
  background:rgba(228,128,6,.09);border:1px dashed rgba(228,128,6,.4);
  border-radius:11px;padding:14px 16px;font-size:.8rem;color:#8A5103;line-height:1.55;margin-top:16px;
}
.nota b{color:#B36405;}

.brindis{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);
  background:var(--azul-900);color:#fff;padding:11px 20px;border-radius:999px;
  font:600 .82rem Inter,sans-serif;z-index:99;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;box-shadow:var(--sombra-alta);
}
.brindis.ver{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:760px){
  .cont-g{grid-template-columns:1fr;gap:20px;}
  .cab-nav .btn{display:none;}
}

/* Tarjetas de programa */
.programa{
  display:flex;flex-direction:column;gap:7px;padding:20px 18px;border-radius:14px;
  background:var(--blanco);border:1px solid var(--borde);box-shadow:var(--sombra);
  transition:transform .18s,box-shadow .2s,border-color .2s;
}
.programa:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);}
.programa.jardin{border-left:4px solid #2E9E63;}
.programa.jardin:hover{border-color:#2E9E63;}
.programa.dolar{border-left:4px solid var(--naranja);}
.programa.dolar:hover{border-color:var(--naranja);}
.programa .pi{font-size:1.5rem;line-height:1;}
.programa .pn{font-family:'Archivo',sans-serif;font-weight:700;font-size:.98rem;line-height:1.25;}
.programa .pd{font-size:.82rem;color:var(--gris);line-height:1.5;}
.programa .pv{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--naranja);margin-top:4px;}
.programa.jardin .pv{color:#2E9E63;}

/* ===== Iconos ===== */
[data-ico] svg{display:block;}
.panel-cab .pic svg{width:24px;height:24px;}
.cont-dato .ci{display:flex;align-items:center;justify-content:center;width:22px;padding-top:2px;}
.cont-dato .ci svg{width:18px;height:18px;}
.grupo-cab .ic{display:flex;align-items:center;justify-content:center;color:var(--azul);}
.programa .pi{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;margin-bottom:4px;}
.programa.jardin .pi{background:rgba(46,158,99,.12);color:#2E9E63;}
.programa.dolar .pi{background:rgba(228,128,6,.12);color:var(--naranja);}
.programa .pi svg{width:22px;height:22px;}
#ctWa{display:inline-flex;align-items:center;justify-content:center;gap:9px;}
#ctWa svg{width:19px;height:19px;}
.form-tit{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gris-cl);font-weight:400;margin-bottom:4px;}

/* ===== Aliados: marcos más intencionales ===== */
.banner{background:var(--blanco);border:1px solid var(--borde);border-radius:13px;
  box-shadow:var(--sombra);min-height:86px;}
.banner .bi{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;background:var(--cielo);color:var(--azul-400);font-size:1rem;opacity:1;}
.banner .bt{color:var(--gris-cl);}
.linea-cab .li{display:flex;align-items:center;justify-content:center;color:var(--azul);}

/* ---------- Videos ---------- */
.video-g{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.vid{margin:0;background:var(--blanco);border:1px solid var(--borde);border-radius:16px;
  box-shadow:var(--sombra);overflow:hidden;transition:transform .18s, box-shadow .18s;}
.vid:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);}
.vid video{display:block;width:100%;aspect-ratio:1/1;background:var(--azul-900);object-fit:cover;}
.vid figcaption{padding:12px 14px 14px;font-size:.86rem;font-weight:600;color:var(--azul);line-height:1.35;}

.banner-sub{margin:-4px 0 12px;font-size:.88rem;color:var(--gris);max-width:62ch;}

/* =========================================================
   AGENTE VIRTUAL
   ========================================================= */
.agente{position:fixed;right:18px;bottom:18px;z-index:900;}
.ag-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* Naranja, no azul: el botón cae tanto sobre la cabecera y el pie azules
   como sobre el cuerpo claro, y el azul desaparecía sobre el azul.
   El aro blanco lo despega de cualquiera de los dos fondos. */
.ag-btn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(140deg,var(--naranja-cl),var(--naranja));color:#fff;
  box-shadow:0 8px 22px rgba(176,96,0,.42), 0 0 0 4px rgba(255,255,255,.22);
  display:grid;place-items:center;margin-left:auto;
  transition:transform .18s, box-shadow .18s;}
.ag-btn:hover{transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(176,96,0,.5), 0 0 0 5px rgba(255,255,255,.3);}
.ag-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.ag-btn .ag-ic-cerrar{display:none;}
.agente.abierto .ag-btn .ag-ic-abrir{display:none;}
.agente.abierto .ag-btn .ag-ic-cerrar{display:block;}

.ag-panel{position:absolute;right:0;bottom:70px;width:364px;max-width:calc(100vw - 32px);
  height:506px;max-height:calc(100vh - 120px);background:var(--blanco);
  border:1px solid var(--borde);border-radius:18px;overflow:hidden;
  box-shadow:0 22px 60px rgba(12,42,86,.26);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);
  transition:opacity .2s, transform .2s, visibility .2s;}
.agente.abierto .ag-panel{opacity:1;visibility:visible;transform:none;}

.ag-cab{display:flex;align-items:center;gap:11px;padding:14px 16px;
  background:linear-gradient(140deg,var(--azul-900),var(--azul));color:#fff;}
.ag-av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:.7rem;font-weight:800;letter-spacing:.06em;}
.ag-cab-t{display:flex;flex-direction:column;line-height:1.25;}
.ag-cab-t b{font-size:.95rem;}
.ag-cab-t span{font-size:.75rem;opacity:.82;}

.ag-cuerpo{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;
  gap:10px;background:var(--cielo);}
.ag-msj{max-width:86%;padding:10px 13px;border-radius:14px;font-size:.88rem;
  line-height:1.5;white-space:normal;}
.ag-bot{background:var(--blanco);border:1px solid var(--borde);
  color:var(--tinta);border-bottom-left-radius:5px;align-self:flex-start;}
.ag-yo{background:var(--azul);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;}
.ag-msj ul{margin:8px 0 0;padding-left:17px;}
.ag-msj li{margin-bottom:7px;}
.ag-msj a{color:var(--naranja);font-weight:600;}
.ag-yo a{color:#fff;text-decoration:underline;}

.ag-chips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:96%;}
.ag-chips button{background:var(--blanco);border:1px solid var(--azul-400);
  color:var(--azul);border-radius:16px;padding:7px 13px;font-size:.8rem;
  font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;}
.ag-chips button:hover{background:var(--azul);color:#fff;}

.ag-pts{display:inline-flex;gap:4px;padding:2px 0;}
.ag-pts i{width:7px;height:7px;border-radius:50%;background:var(--azul-400);
  animation:agpt 1.1s infinite;}
.ag-pts i:nth-child(2){animation-delay:.16s;}
.ag-pts i:nth-child(3){animation-delay:.32s;}
@keyframes agpt{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

.ag-pie{display:flex;flex-direction:row;align-items:center;gap:8px;padding:11px 12px;border-top:1px solid var(--borde);
  background:var(--blanco);}
.ag-pie input{flex:1;min-width:0;border:1px solid var(--borde);border-radius:11px;
  padding:10px 12px;font-family:inherit;font-size:.88rem;color:var(--tinta);}
.ag-pie input:focus{outline:2px solid var(--azul-400);outline-offset:1px;}
.ag-pie button{width:42px;flex:0 0 42px;height:42px;border:0;border-radius:11px;background:var(--naranja);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:filter .15s;}
.ag-pie button:hover{filter:brightness(1.08);}
.ag-nota{margin:0;padding:0 14px 11px;font-size:.68rem;color:var(--gris);
  background:var(--blanco);line-height:1.4;}

@media (max-width:520px){
  .agente{right:14px;bottom:14px;}
  .ag-panel{width:calc(100vw - 28px);height:calc(100vh - 140px);}
}
@media (prefers-reduced-motion:reduce){
  .ag-btn,.ag-panel{transition:none;}
  .ag-pts i{animation:none;}
}


/* ---------- Redes sociales del pie ---------- */
.pie-redes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 0 4px;}
.pr-t{font-size:.76rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);}
.pr-g{display:flex;gap:9px;flex-wrap:wrap;}
.pr{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:background .16s, border-color .16s, transform .16s;}
a.pr:hover{background:var(--naranja);border-color:var(--naranja);
  transform:translateY(-2px);}
a.pr:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* Sin cuenta todavía: se ve, pero se nota que aún no está. */
.pr-off{color:rgba(255,255,255,.34);border-color:rgba(255,255,255,.12);
  border-style:dashed;cursor:default;}

/* Sin formulario la columna se ensancha; un boton de 1700px no es un boton. */
#ctWa{max-width:360px;}

/* El boton flotante tapaba el NIT en movil: se le deja aire al pie. */
@media (max-width:520px){ footer{padding-bottom:86px;} }