/* ═══════════════════════════════════════════════════════════════════════ Barra de navegación de Britech-iA — compartida por todas las páginas. Está namespaceada con el prefijo `bn-` y trae sus propios tokens: las landings de producto (clinicflow, voicecloser, reservas) tienen sistemas de color y tipografía distintos, y varias definen `.wrap`, `.logo`, `.btn` y hasta `nav{}` con otro significado. Nada de acá depende de la página que la incluya, y nada de acá se le escapa encima. Se usa junto con /brand/nav.js y el bloque de marcado que arranca en

. ═══════════════════════════════════════════════════════════════════════ */ .bn, .bn-mob{ --bn-brand:#ff4f0e; --bn-glow:#ff7a45; --bn-deep:#cc3f0b; --bn-text:#B8360A; --bn-soft:rgba(255,79,14,.09); --bn-bd-brand:rgba(255,79,14,.28); --bn-ink:#141211; --bn-ink-2:#332E2B; --bn-ink-3:#4A443F; --bn-ink-4:#6B645D; --bn-bg-2:#FAF9F7; --bn-bd:rgba(35,31,32,.11); --bn-bd-2:rgba(35,31,32,.20); --bn-wa:#128C4A; --bn-f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --bn-ease:cubic-bezier(.16,1,.3,1); font-family:var(--bn-f); } /* ── Candado contra el arrastre lateral ── Va acá porque nav.css es la única hoja que cargan las siete páginas. tokens.css lo declara solo en y lp/reservas.html no lo declara en ninguno; en Safari iOS el candado en body no alcanza, tiene que estar también en . El tope de ancho cubre cualquier medio incrustado. */ html, body{ overflow-x:hidden; max-width:100%; } img, svg, video, canvas, iframe{ max-width:100%; } /* ── La barra ── */ nav.bn{ position:sticky;top:0;z-index:120; background:rgba(255,255,255,.80); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid transparent; box-shadow:none; padding:0;margin:0; transition:background .25s var(--bn-ease),border-color .25s var(--bn-ease),box-shadow .25s var(--bn-ease); } /* solo se materializa cuando la página ya bajó: arriba flota limpia */ nav.bn.bn-scrolled{ background:rgba(255,255,255,.93); border-bottom-color:var(--bn-bd); box-shadow:0 6px 24px rgba(35,31,32,.06); } .bn-in{ max-width:1200px;margin:0 auto; padding:0 clamp(1.15rem,4vw,2rem); display:flex;align-items:center;gap:.75rem;height:72px; } .bn-logo{ display:flex;align-items:center;gap:.05em;flex-shrink:0;text-decoration:none; font-weight:800;font-size:1.05rem;color:var(--bn-ink);letter-spacing:-.02em;line-height:1; } .bn-logo img{height:30px;width:auto;margin-left:-.04em;display:block;max-width:none} .bn-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto} /* ── Menú de escritorio ── */ .bn-menu{display:none} @media(min-width:900px){ .bn-menu{display:flex;align-items:center;gap:.1rem;margin:0 auto;padding-left:1rem} } .bn-item{position:relative;display:flex} .bn-link{ display:inline-flex;align-items:center;gap:.32rem;position:relative; font-family:var(--bn-f);font-size:.9rem;font-weight:600;letter-spacing:-.012em; color:var(--bn-ink-3);background:none;border:0;cursor:pointer;text-decoration:none; padding:.6rem .72rem;border-radius:10px;line-height:1.2; transition:color .2s var(--bn-ease); } .bn-link:hover,.bn-link:focus-visible{color:var(--bn-ink)} .bn-link::after{ content:'';position:absolute;left:.72rem;right:.72rem;bottom:.2rem;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--bn-glow),var(--bn-deep)); transform:scaleX(0);transform-origin:center; transition:transform .3s var(--bn-ease); } .bn-link:hover::after,.bn-item.bn-open .bn-link::after{transform:scaleX(1)} .bn-link.bn-active{color:var(--bn-ink)} .bn-link.bn-active::after{transform:scaleX(1)} .bn-caret{color:var(--bn-ink-4);transition:transform .28s var(--bn-ease)} .bn-item.bn-open .bn-caret{transform:rotate(180deg)} /* ── Desplegable de soluciones ── */ .bn-sub{ position:absolute;top:calc(100% + .5rem);left:50%; width:min(37rem,calc(100vw - 2.5rem)); background:#fff;border:1px solid var(--bn-bd);border-radius:18px; box-shadow:0 24px 60px rgba(35,31,32,.15),0 2px 8px rgba(35,31,32,.05); padding:.55rem; opacity:0;visibility:hidden;pointer-events:none; transform:translateX(-50%) translateY(-8px) scale(.985); transition:opacity .24s var(--bn-ease),transform .24s var(--bn-ease),visibility .24s; } .bn-item.bn-open > .bn-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)} /* zona muerta entre el botón y la tarjeta: sin esto el hover se corta al bajar */ .bn-sub::before{content:'';position:absolute;left:0;right:0;top:-.6rem;height:.6rem} .bn-sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem} .bn-sub-item{ display:flex;gap:.75rem;align-items:flex-start;text-decoration:none; padding:.8rem .75rem;border-radius:13px; transition:background .2s var(--bn-ease); } .bn-sub-item:hover{background:var(--bn-bg-2)} .bn-sub-item[aria-current="page"]{background:var(--bn-soft)} .bn-ico{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0; background:var(--bn-soft);border:1px solid var(--bn-bd-brand);color:var(--bn-text); transition:background .2s,color .2s,border-color .2s; } .bn-sub-item:hover .bn-ico, .bn-sub-item[aria-current="page"] .bn-ico{ background:linear-gradient(135deg,var(--bn-glow),var(--bn-deep));color:#fff;border-color:transparent; } .bn-tx b{display:block;font-size:.9rem;font-weight:700;color:var(--bn-ink);letter-spacing:-.022em;line-height:1.25} .bn-tx span{display:block;font-size:.775rem;color:var(--bn-ink-4);line-height:1.42;margin-top:.15rem;letter-spacing:0} .bn-sub-foot{ display:flex;align-items:flex-start;gap:.5rem; margin:.35rem 0 0;padding:.75rem .8rem .25rem;border-top:1px solid var(--bn-bd); font-size:.755rem;line-height:1.45;color:var(--bn-ink-4);letter-spacing:0; } .bn-sub-foot svg{color:var(--bn-wa);flex-shrink:0;margin-top:.12rem} .bn-sub-foot b{color:var(--bn-ink-2);font-weight:600} /* ── Sello de plataforma oficial ── */ .bn-meta{display:none} @media(min-width:1150px){ .bn-meta{ display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap; padding:.42rem .75rem;border:1px solid var(--bn-bd);border-radius:999px;background:#fff; font-size:.715rem;font-weight:700;color:var(--bn-ink-4);letter-spacing:-.005em; } .bn-meta i{ width:6px;height:6px;border-radius:50%;background:#12B76A;flex-shrink:0; box-shadow:0 0 0 3px rgba(18,183,106,.16);animation:bn-blink 2.4s ease-in-out infinite; } } @keyframes bn-blink{0%,100%{opacity:1}50%{opacity:.3}} /* ── CTA (autónomo: cada página tiene su propio .btn con otra pinta) ── */ .bn-cta{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--bn-f);font-weight:700;letter-spacing:-.01em;line-height:1.3; text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer; border-radius:999px;border:1.5px solid transparent; background:linear-gradient(135deg,var(--bn-glow),var(--bn-brand) 58%,var(--bn-deep)); color:#1A0A02;box-shadow:0 4px 16px rgba(255,79,14,.24); padding:.65rem 1.15rem;font-size:.86rem; transition:transform .2s var(--bn-ease),box-shadow .2s; } .bn-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,79,14,.32)} .bn-cta-lg{padding:1.1rem 2rem;font-size:1.02rem;white-space:normal} /* ── Hamburguesa ── */ .bn-burger{ display:grid;place-items:center;flex-shrink:0; width:44px;height:44px;border-radius:12px;padding:0; border:1px solid var(--bn-bd-2);background:#fff;cursor:pointer; transition:border-color .2s,background .2s; } .bn-burger:hover{border-color:var(--bn-bd-brand);background:var(--bn-soft)} .bn-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--bn-ink);transition:transform .32s var(--bn-ease),opacity .2s} .bn-burger span+span{margin-top:5px} .bn-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)} .bn-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)} @media(min-width:900px){.bn-burger{display:none}} /* el ancla no puede quedar debajo de la barra pegajosa */ section[id],[id].bn-anchor{scroll-margin-top:86px} @media(max-width:899px){ .bn-in{height:64px} section[id],[id].bn-anchor{scroll-margin-top:74px} /* el CTA de la barra medía 38px: por debajo del pulgar mínimo */ .bn-cta{min-height:44px} } @media(max-width:419px){ /* a 360px el CTA completo empujaba la hamburguesa fuera del ancho */ .bn-cta-long{display:none} .bn-cta{padding:.6rem .95rem;font-size:.82rem} } @media(max-width:319px){ /* abajo de 320 (el iPhone SE) ni "Demo 7min" cabe junto al logo y la hamburguesa. La barra se queda con lo esencial; el CTA sigue dentro del panel, que es donde se toca en un telefono. */ .bn-actions > .bn-cta{display:none} } /* ── Pantallas minimas (240-359px: telefonos chicos o zoom fuerte) ── Vive acá por lo mismo que el candado: es la unica hoja que cargan las siete. Todo es el mismo patron — un item de rejilla o de flex no baja de su contenido minimo por su cuenta (min-width:auto), asi que empuja la pagina en vez de envolver. Se excluye la barra, que resuelve lo suyo arriba. */ @media(max-width:359px){ [class*="grid"] > *:not([class^="bn-"]), [class*="cols"] > *:not([class^="bn-"]), [class*="-row"] > *:not([class^="bn-"]){ min-width:0; overflow-wrap:break-word; } h1,h2,h3,h4{ overflow-wrap:break-word; } /* correos y telefonos largos: no hay espacio donde cortar */ a[href^="mailto:"],a[href^="tel:"]{ overflow-wrap:anywhere; } /* un boton con white-space:nowrap no cede aunque el hueco no alcance */ .btn:not([class^="bn-"]){ white-space:normal; min-width:0; } } /* ── Menú móvil: panel completo, no un acordeón apretado ── */ .bn-mob[hidden]{display:none} .bn-mob{position:fixed;inset:0;z-index:160} .bn-mob-bg{ position:absolute;inset:0;background:rgba(20,18,17,.45); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;transition:opacity .32s var(--bn-ease); } .bn-mob.bn-on .bn-mob-bg{opacity:1} .bn-mob-panel{ position:absolute;top:0;right:0;bottom:0; width:min(23.5rem,100%); display:flex;flex-direction:column;background:#fff; box-shadow:-26px 0 64px rgba(35,31,32,.22); transform:translateX(101%); transition:transform .4s var(--bn-ease); overscroll-behavior:contain; } .bn-mob.bn-on .bn-mob-panel{transform:none} .bn-mob-head{ display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-shrink:0; height:64px;padding:0 1.15rem;border-bottom:1px solid var(--bn-bd); } .bn-mob-x{ width:42px;height:42px;border-radius:12px;flex-shrink:0; border:1px solid var(--bn-bd);background:#fff;color:var(--bn-ink-3); display:grid;place-items:center;cursor:pointer; transition:background .18s,color .18s,border-color .18s; } .bn-mob-x:hover{background:var(--bn-soft);color:var(--bn-text);border-color:var(--bn-bd-brand)} .bn-mob-body{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:1.05rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom)); } .bn-mob-lbl{ font-size:.65rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase; /* #9A938C daba 3:1 en 10px: por debajo del mínimo para texto chico */ color:var(--bn-ink-4);margin:1.4rem .75rem .45rem; } .bn-mob-lbl:first-child{margin-top:.15rem} .bn-mob-a{ display:flex;align-items:center;gap:.85rem;min-height:54px;text-decoration:none; padding:.7rem .75rem;border-radius:14px; font-size:1.02rem;font-weight:700;color:var(--bn-ink);letter-spacing:-.028em; transition:background .18s var(--bn-ease),transform .16s var(--bn-ease); } .bn-mob-a:active{background:var(--bn-soft);transform:scale(.985)} .bn-mob-a .bn-ch{margin-left:auto;color:#C9C2BB;flex-shrink:0;transition:transform .2s var(--bn-ease),color .2s} .bn-mob-a:hover .bn-ch{color:var(--bn-brand);transform:translateX(3px)} .bn-mob-sol{ display:flex;align-items:flex-start;gap:.8rem;text-decoration:none; padding:.75rem;border-radius:14px; transition:background .18s var(--bn-ease),transform .16s var(--bn-ease); } .bn-mob-sol:active{background:var(--bn-soft);transform:scale(.985)} .bn-mob-sol[aria-current="page"]{background:var(--bn-soft)} .bn-mob-sol[aria-current="page"] .bn-ico{background:linear-gradient(135deg,var(--bn-glow),var(--bn-deep));color:#fff;border-color:transparent} .bn-mob-sol .bn-ico{width:40px;height:40px} .bn-mob-sol .bn-tx b{font-size:.95rem} .bn-mob-cta{margin-top:1.5rem;display:grid;gap:.55rem} .bn-mob-cta .bn-cta{width:100%} .bn-mob-foot{ margin-top:1.15rem;padding-top:1.1rem;border-top:1px solid var(--bn-bd); display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap; } .bn-mob-meta{display:inline-flex;align-items:center;gap:.42rem;font-size:.73rem;font-weight:600;color:var(--bn-ink-4)} .bn-mob-meta svg{color:var(--bn-wa);flex-shrink:0} .bn-mob-soc{display:flex;gap:.2rem} .bn-mob-soc a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--bn-ink-4);transition:color .18s,background .18s} .bn-mob-soc a:hover{color:var(--bn-text);background:var(--bn-soft)} /* entrada escalonada: el panel llega y el contenido lo sigue */ .bn-mob-body > *{opacity:0;transform:translateY(12px)} .bn-mob.bn-on .bn-mob-body > *{animation:bn-in .44s var(--bn-ease) forwards;animation-delay:calc(var(--i,0) * 45ms + 110ms)} @keyframes bn-in{to{opacity:1;transform:none}} /* con el panel abierto, iOS seguía arrastrando la página de atrás */ body.bn-locked{overflow:hidden} html:has(body.bn-locked){overflow:hidden} .bn a,.bn button,.bn-mob a,.bn-mob button{-webkit-tap-highlight-color:rgba(255,79,14,.12);touch-action:manipulation} .bn :focus-visible,.bn-mob :focus-visible{outline:2px solid var(--bn-brand);outline-offset:2px} @media(prefers-reduced-motion:reduce){ .bn-mob-body > *{opacity:1;transform:none;animation:none !important} .bn *,.bn-mob *{transition-duration:.01ms !important;animation-duration:.01ms !important} }