/* ══ RealControl · css/contacto.css ══
   La banda de contacto: delgada, fija abajo y siempre a la vista, para que quien lee no tenga que llegar al final de la página.
   La arma js/contacto.js con los datos de js/config.js (contacto). Va en la tinta de la marca, como la barra superior; el dorado, solo en los
   iconos. Reserva su alto en la página (body) y sube lo que ya flota abajo (selector de modo, «Inicio», aviso del túnel). Va por debajo del menú
   del teléfono y de lo que se abre encima. No está en /portal/ ni en /garita/ (son réplicas del ingreso del sistema). ══ */

:root{--cb-h:40px;--cb-tot:calc(var(--cb-h) + env(safe-area-inset-bottom,0px))}
body{padding-bottom:var(--cb-tot)}

.cb{position:fixed;left:0;right:0;bottom:0;z-index:45;height:var(--cb-tot);padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--ink);color:var(--on-ink);border-top:1px solid var(--ink-line);font:500 13px/1 var(--f-sans)}
.cb-in{position:relative;height:var(--cb-h);max-width:1360px;margin:0 auto;padding:0 clamp(12px,2.4vw,32px);display:flex;align-items:center;gap:2px}
.cb ul{display:contents;list-style:none;margin:0;padding:0}
.cb li{display:contents}
.cb a,.cb-pin{display:inline-flex;align-items:center;gap:8px;height:var(--cb-h);padding:0 12px;color:var(--on-ink);text-decoration:none;white-space:nowrap}
.cb a:hover,.cb-pin:hover{color:var(--marca-claro)}
.cb a:focus-visible,.cb-pin:focus-visible{outline:2px solid var(--marca-claro);outline-offset:-3px;border-radius:4px}
.cb svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--marca-claro);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cb-dato{color:var(--on-ink-2);margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-width:0;padding:0 4px 0 12px}
.cb-dato span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-rot{color:var(--on-ink-3);font-weight:400}
.aq .cb-rot{color:var(--on-ink-2)}
.cb-pin,.cb-panel{display:none}

/* Lo que ya flotaba abajo sube lo que mide la banda */
.modo-sel{bottom:calc(16px + var(--cb-tot))}
.rc-inicio{bottom:calc(22px + var(--cb-tot))}
body .tun-aviso{bottom:calc(64px + var(--cb-tot))}   /* con «body»: css/tunel.css se carga después y, con una sola clase, le ganaba */
.rc-intro-ab{bottom:calc(16px + var(--cb-tot))!important}
html.tunel body main{bottom:var(--cb-tot)}

/* Estrecho: solo los iconos de teléfono, WhatsApp y correo; la dirección, detrás de un toque (el alfiler abre un recuadro sobre la banda) */
@media (max-width:760px){
  :root{--cb-h:48px}
  .cb-in{justify-content:flex-end}
  .cb a{width:48px;padding:0;justify-content:center}
  .cb a .cb-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cb svg{width:20px;height:20px}
  .cb-dato{display:none}
  .cb-pin{display:inline-flex;width:48px;height:var(--cb-h);padding:0;justify-content:center;margin-right:auto;background:none;border:0;cursor:pointer;font:inherit}
  .cb-panel{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);padding:12px 14px;border-radius:12px;background:var(--ink-2);color:var(--on-ink);
    border:1px solid var(--ink-line);box-shadow:0 2px 6px rgba(0,0,0,.25),0 14px 30px -14px rgba(0,0,0,.55);font-size:14px;line-height:1.45}
  .cb-panel:not([hidden]){display:block}
  .cb-panel b{display:block;margin-bottom:2px;color:var(--marca-claro);font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
}
@media (min-width:761px) and (max-width:1100px){
  .cb a,.cb-dato{padding-left:8px;padding-right:8px}
  .cb{font-size:12.5px}
}

/* AQORA: la banda va en el azul tinta de la marca (el de la forma tradicional de aqora.html) y con el celeste de AQORA como acento, no en la tinta neutra y el dorado de RealControl */
.aq .cb{background:var(--aq-agua-tinta,#0B2B42);border-top-color:color-mix(in srgb,var(--aqora-claro) 30%,transparent)}
.aq .cb svg{stroke:var(--aqora-claro)}
.aq .cb a:hover,.aq .cb-pin:hover{color:var(--aqora-claro)}
.aq .cb a:focus-visible,.aq .cb-pin:focus-visible{outline-color:var(--aqora-claro)}
.aq .cb-panel{background:var(--aq-agua-profunda,color-mix(in srgb,var(--aqora-fuerte) 40%,var(--ink)));border-color:color-mix(in srgb,var(--aqora-claro) 30%,transparent)}
.aq .cb-panel b{color:var(--aqora-claro)}