/* ============================================================
   Bitua — Página web
   Design tokens (from the Bitua design system) + components.
   Recreated 1:1 from the Claude Design handoff "Bitua Web.dc.html".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Brand palette (exact values — do not improvise) ---- */
  --bitua-teal:        #00D0A0;
  --bitua-teal-dark:   #208890;
  --bitua-mint:        #A7F3D0;
  --bitua-orange:      #F7882E;
  --bitua-orange-soft: #FED7AA;
  /* Semantic alias: orange means risk/alert only (expiries, stockouts) — never decoration. */
  --bitua-risk:        #F7882E;

  /* ---- Per-product accent ladder (brand suite: teal → cyan → blue → navy) ---- */
  --prod-cabinet:  #00C2A0; --prod-cabinet-deep:  #0A7A66; --prod-cabinet-soft:  #D6F3EC;
  --prod-flex:     #00A886; --prod-flex-deep:     #06705C; --prod-flex-soft:     #D0F0E7;
  --prod-mini:     #00ADA8; --prod-mini-deep:     #0A726F; --prod-mini-soft:     #D2F1F0;
  --prod-count:    #12A6C4; --prod-count-deep:    #0B6E84; --prod-count-soft:    #D6EEF5;
  --prod-laundry:  #2E8FD0; --prod-laundry-deep:  #1E5E8C; --prod-laundry-soft:  #DBEBF8;
  --prod-tracking: #3B72D9; --prod-tracking-deep: #274F97; --prod-tracking-soft: #DEE7FA;
  --prod-trace:    #2F4C66; --prod-trace-deep:    #1E3346; --prod-trace-soft:    #DFE5EC;
  /* template hooks — a product row sets these three, nothing else (default = flagship teal) */
  --accent: var(--prod-cabinet); --accent-deep: var(--prod-cabinet-deep); --accent-soft: var(--prod-cabinet-soft);

  /* ---- Neutrals ---- */
  --bitua-ink:   #383840;
  --bitua-slate: #64748B;
  --bitua-mist:  #E2E8F0;
  --bitua-bg:    #F8FAFC;
  --bitua-white: #FFFFFF;

  /* ---- Typography — Montserrat only (brand non-negotiable) ---- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Elevation (soft, clinical) ---- */
  --shadow-sm: 0 1px 2px rgba(56,56,64,0.06), 0 1px 3px rgba(56,56,64,0.05);
  --shadow-md: 0 2px 8px rgba(56,56,64,0.06), 0 8px 24px rgba(56,56,64,0.06);
  --shadow-lg: 0 8px 32px rgba(56,56,64,0.10);
  --shadow-focus: 0 0 0 3px rgba(0,208,160,0.30);

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bitua-white);
  color: var(--bitua-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Keyboard a11y: hidden until focused, then pinned top-left above everything */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 10000;
  background: var(--bitua-ink); color: #fff; font-weight: 600; font-size: 14px;
  padding: 11px 18px; border-radius: 0 0 10px 10px; transition: top .15s ease;
}
.skip-link:focus { top: 0; }
img { display: block; }
::selection { background: var(--bitua-mint); }

@keyframes bpulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,208,160,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(0,208,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,208,160,0); }
}
@keyframes bfade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.section { padding: 80px 0; scroll-margin-top: 80px; }
.section--alt { background: var(--bitua-bg); }
.section-head { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: 38px; font-weight: 700; letter-spacing: -.018em; line-height: 1.12; }
.section-head p { font-size: 17px; color: var(--bitua-slate); margin-top: 14px; line-height: 1.55; }

/* Eyebrow — editorial label (uppercase, tracked, leading line) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bitua-teal-dark); background: transparent; padding: 0; border-radius: 0;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .55; }
.eyebrow i { width: 14px; height: 14px; }
.section-head .eyebrow { margin-bottom: 16px; }
/* Encabezado de bloque interno: sin bajada, así no compite con el título de la página. */
.section-head--tight { margin-bottom: 36px; }
.section-head--tight h2 { margin-bottom: 0; }

/* Buttons */
.btn {
  font-family: var(--font-sans); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; border: 1px solid transparent;
  transition: var(--transition);
}
.btn--primary { color: #fff; background: var(--bitua-teal); }
.btn--primary:hover { background: var(--bitua-teal-dark); }
.btn--ghost { color: var(--bitua-ink); background: transparent; border-color: var(--bitua-mist); }
.btn--ghost:hover { border-color: var(--bitua-slate); background: var(--bitua-bg); }
.btn i { width: 18px; height: 18px; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bitua-mist);
}
.nav__inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  height: 72px; display: flex; align-items: center; gap: 32px;
}
.nav__logo img { height: 34px; } /* logo más visible (feedback reunión 17-jul) */
.nav__links { display: flex; gap: 22px; flex: 1; }
.nav__links a {
  font-size: 14px; font-weight: 500; color: var(--bitua-ink);
  cursor: pointer; transition: var(--transition);
}
.nav__links a:hover { color: var(--bitua-teal-dark); }
.nav__links a.is-active { color: var(--bitua-teal-dark); position: relative; }
.nav__links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -26px; height: 2px;
  background: var(--bitua-teal);
}
.nav__actions { display: flex; gap: 12px; align-items: center; padding-left: 18px; margin-left: 4px; border-left: 1px solid var(--bitua-mist); }
.lang-toggle {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: .03em;
  color: var(--bitua-slate); background: transparent;
  border: 1px solid var(--bitua-mist); border-radius: 999px;
  padding: 7px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: var(--transition);
}
.lang-toggle:hover { border-color: var(--bitua-slate); color: var(--bitua-ink); }
.lang-toggle i { width: 15px; height: 15px; }
/* Language switcher: segmented control — all options visible, active one highlighted */
.langseg {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--bitua-bg); border: 1px solid var(--bitua-mist);
  border-radius: 999px; padding: 3px;
}
.langseg__opt {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: .03em;
  color: var(--bitua-slate); background: transparent; border: 0; cursor: pointer;
  padding: 6px 11px; border-radius: 999px; transition: var(--transition); line-height: 1;
}
.langseg__opt:hover { color: var(--bitua-ink); }
.langseg__opt.is-active { background: var(--bitua-white); color: var(--bitua-teal-dark); box-shadow: var(--shadow-sm); }
.nav__cta {
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: #fff;
  background: var(--bitua-teal); border-radius: 10px; padding: 11px 20px;
  cursor: pointer; transition: var(--transition);
}
.nav__cta:hover { background: var(--bitua-teal-dark); }
.nav__burger { display: none; background: transparent; border: 0; cursor: pointer; color: var(--bitua-ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: 84px 0 76px; }
.hero__grid {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 4.4vw, 50px); line-height: 1.05; font-weight: 700; letter-spacing: -.022em;
  margin: 16px 0 16px; text-wrap: balance;
}
.hero__lead { font-size: 19px; line-height: 1.55; color: var(--bitua-slate); max-width: 520px; }
.hero__ctas { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.hero__ctas .btn { font-size: 15px; padding: 14px 26px; }
.hero__stats { display: flex; gap: 26px; margin-top: 24px; align-items: center; }
.hero__stats .n { font-size: 27px; font-weight: 700; letter-spacing: -.01em; }
.hero__stats .l { font-size: 12px; color: var(--bitua-slate); }
.hero__media { position: relative; display: flex; align-items: center; justify-content: center; }
.hero__media > img {
  width: 100%; max-width: 430px; height: auto; border-radius: 20px;
  background: var(--bitua-bg); box-shadow: var(--shadow-lg);
}
.hero__chip {
  position: absolute; left: -20px; top: 70px; background: #fff;
  border: 1px solid var(--bitua-mist); box-shadow: var(--shadow-md);
  border-radius: 12px; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
}
.hero__chip .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bitua-teal); animation: bpulse 2s infinite;
}
.hero__badge {
  position: absolute; right: -16px; bottom: 78px; background: #fff;
  border: 1px solid var(--bitua-mist); box-shadow: var(--shadow-md);
  border-radius: 16px; padding: 16px 20px;
}
.hero__badge .n { font-size: 30px; font-weight: 700; color: var(--bitua-teal-dark); line-height: 1; }
.hero__badge .l { font-size: 12px; color: var(--bitua-slate); margin-top: 5px; max-width: 130px; }

/* ============================================================
   Interior page header
   ============================================================ */
.page-head { padding: 64px 0 8px; }
.page-head .container { max-width: 760px; text-align: center; }
.page-head h1 { font-size: 42px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 16px 0 0; }
.page-head p { font-size: 18px; color: var(--bitua-slate); margin-top: 16px; line-height: 1.55; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-wrap { padding: 24px 0 88px; }
.cta-band {
  position: relative; overflow: hidden; border-radius: 24px; background: var(--bitua-ink);
  padding: 52px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(0,208,160,.28) 0%, rgba(0,208,160,0) 55%);
}
.cta-band__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--bitua-teal); margin-bottom: 14px;
}
.cta-band__eyebrow i { width: 15px; height: 15px; }
.cta-band h2 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #fff; max-width: 560px; }
.cta-band p { font-size: 16px; color: rgba(255,255,255,.72); margin-top: 10px; max-width: 520px; line-height: 1.55; }
.cta-band__btn { font-size: 15px; padding: 15px 28px; flex-shrink: 0; }

/* ============================================================
   Trust bar
   ============================================================ */
.trust { max-width: 1180px; margin: 0 auto; padding: 18px 32px 8px; }
.trust__label {
  text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--bitua-slate); margin-bottom: 22px;
}
.trust__logos { display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; }
.trust__logos span {
  font-size: 22px; font-weight: 700; color: var(--bitua-slate);
  opacity: .6; letter-spacing: -.01em;
}

/* ============================================================
   How it works
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step {
  position: relative; background: var(--bitua-bg); border: 1px solid var(--bitua-mist);
  border-radius: 16px; padding: 26px;
}
.step__num { font-size: 13px; font-weight: 700; color: var(--bitua-teal); letter-spacing: .04em; }
.step__icon {
  width: 46px; height: 46px; border-radius: 12px; background: #fff;
  border: 1px solid var(--bitua-mist); color: var(--bitua-teal-dark);
  display: flex; align-items: center; justify-content: center; margin: 14px 0 16px;
}
.step__icon i { width: 22px; height: 22px; }
.step h3 { font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.step p { font-size: 14px; color: var(--bitua-slate); line-height: 1.6; }

/* ============================================================
   Features
   ============================================================ */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { background: #fff; border: 1px solid var(--bitua-mist); border-radius: 16px; padding: 28px; }
.feature__icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--bitua-mint);
  color: var(--bitua-teal-dark); display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature__icon i { width: 24px; height: 24px; }
.feature h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.feature p { font-size: 14px; color: var(--bitua-slate); line-height: 1.6; }

/* ============================================================
   Product tabs
   ============================================================ */
.tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.tab {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: var(--transition);
  border: 1px solid var(--bitua-mist); background: #fff; color: var(--bitua-slate);
}
.tab:hover { border-color: var(--bitua-slate); }
.tab.is-active { background: var(--bitua-ink); color: #fff; border-color: var(--bitua-ink); }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.product h3 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.product__lead { font-size: 16px; color: var(--bitua-slate); line-height: 1.6; margin: 14px 0 22px; }
.product__points { display: flex; flex-direction: column; gap: 12px; }
.product__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.product__points .check {
  width: 22px; height: 22px; border-radius: 50%; background: var(--bitua-mint);
  color: var(--bitua-teal-dark); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.product__points .check i { width: 14px; height: 14px; }
.product__learn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 26px;
  font-size: 15px; font-weight: 600; color: var(--bitua-teal-dark); cursor: pointer;
}
.product__learn i { width: 16px; height: 16px; }
.product__media {
  border-radius: 18px; border: 1px solid var(--bitua-mist); background: var(--bitua-bg);
  height: 380px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product__media img {
  max-width: 100%; max-height: 100%; width: 100%; height: 100%;
  object-fit: contain; padding: 16px; animation: bfade 240ms ease;
}

/* ============================================================
   About (Nosotros) + Partners
   ============================================================ */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 64px; }
.about h2 { font-size: 38px; font-weight: 700; letter-spacing: -.018em; line-height: 1.12; margin-bottom: 16px; }
.about .eyebrow { margin-bottom: 20px; }
.about__sub { font-size: 17px; color: var(--bitua-slate); line-height: 1.6; margin-bottom: 32px; }
.about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fact { background: #fff; border: 1px solid var(--bitua-mist); border-radius: 12px; padding: 16px 20px; }
.fact .n { font-size: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--bitua-teal-dark); }
.fact .l { font-size: 13px; color: var(--bitua-slate); margin-top: 4px; }
.about__media { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.about__media img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; }

.partners { border-top: 1px solid var(--bitua-mist); padding-top: 52px; }
.partners__label { text-align: center; margin-bottom: 36px; }
.partners__label span {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--bitua-slate);
}
.partners__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.partner { background: #fff; border: 1px solid var(--bitua-mist); border-radius: 16px; padding: 24px; }
.partner__name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.partner__cat {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--bitua-teal-dark); background: var(--bitua-mint);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}
.partner p { font-size: 14px; color: var(--bitua-slate); line-height: 1.6; }

/* ============================================================
   Stats band (full-bleed photo)
   ============================================================ */
.statsband { padding: 0 0 80px; }
.statsband__box { position: relative; border-radius: 24px; overflow: hidden; background: var(--bitua-ink); }
.statsband__box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.statsband__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(56,56,64,.92) 0%, rgba(56,56,64,.72) 60%, rgba(56,56,64,.55) 100%); }
.statsband__inner { position: relative; padding: 56px 48px; }
.statsband__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--bitua-teal); margin-bottom: 26px;
}
.statsband__eyebrow i { width: 15px; height: 15px; }
.statsband__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.statsband__grid .n { font-size: 46px; font-weight: 700; letter-spacing: -.02em; color: var(--bitua-teal); }
.statsband__grid .l { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 8px; }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials { padding: 24px 0 80px; scroll-margin-top: 80px; }
.testimonials .section-head { margin-bottom: 48px; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote {
  background: #fff; border: 1px solid var(--bitua-mist); border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.quote > i { width: 24px; height: 24px; color: var(--bitua-teal); }
.quote blockquote { font-size: 16px; line-height: 1.6; color: var(--bitua-ink); flex: 1; }
.quote figcaption { border-top: 1px solid var(--bitua-mist); padding-top: 16px; }
.quote .r { font-size: 14px; font-weight: 600; }
.quote .o { font-size: 13px; color: var(--bitua-slate); margin-top: 2px; }
.regions { margin-top: 44px; text-align: center; }
.regions__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--bitua-slate); margin-bottom: 12px; }
.regions__list { font-size: 16px; font-weight: 600; color: var(--bitua-ink); letter-spacing: .01em; }

/* ============================================================
   CTA + Contact
   ============================================================ */
.contact { padding: 64px 0 88px; scroll-margin-top: 80px; }
.contact__box {
  background: var(--bitua-bg); border: 1px solid var(--bitua-mist); border-radius: 24px;
  padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.contact h2 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.14; margin: 18px 0 14px; }
.contact__sub { font-size: 17px; color: var(--bitua-slate); line-height: 1.55; max-width: 420px; }
.contact__info { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; color: var(--bitua-slate); font-size: 14px; }
.contact__info a, .contact__info span { display: flex; align-items: center; gap: 10px; color: var(--bitua-slate); }
.contact__info a:hover { color: var(--bitua-teal-dark); }
.contact__info i, .contact__info svg { width: 18px; height: 18px; flex: none; }
.form {
  background: #fff; border: 1px solid var(--bitua-mist); border-radius: 16px;
  padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px;
}
.form .field { display: flex; flex-direction: column; gap: 6px; }
.form .field__l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bitua-slate); }
.form input, .form textarea, .form select {
  font-family: var(--font-sans); font-size: 15px; padding: 13px 15px; width: 100%;
  border: 1px solid var(--bitua-mist); border-radius: 10px; outline: none; color: var(--bitua-ink);
  transition: var(--transition); background-color: #fff;
}
.form textarea { resize: vertical; }
.form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form select:invalid { color: var(--bitua-slate); }   /* muted while the placeholder option is selected */
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--bitua-teal); box-shadow: var(--shadow-focus); }

/* Searchable country combobox */
.combo { position: relative; }
.combo__input { padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.combo__list { list-style: none; margin: 0; padding: 6px; position: absolute; z-index: 20;
  top: calc(100% + 6px); left: 0; right: 0; max-height: 248px; overflow-y: auto;
  background: #fff; border: 1px solid var(--bitua-mist); border-radius: 12px; box-shadow: var(--shadow-md);
  -webkit-overflow-scrolling: touch; }
.combo__list[hidden] { display: none; }
.combo__opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  cursor: pointer; font-size: 15px; color: var(--bitua-ink); }
.combo__opt:hover, .combo__opt.is-active { background: var(--bitua-bg); }
.combo__opt[aria-selected="true"] { color: var(--bitua-teal-dark); font-weight: 600; }
.combo__flag { font-size: 18px; line-height: 1; flex: none; }
.combo__empty { padding: 12px 11px; color: var(--bitua-slate); font-size: 14px; text-align: center; }

/* Global keyboard focus visibility (a11y) */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bitua-teal-dark); outline-offset: 3px; border-radius: 6px;
}
/* brighter outline on dark surfaces */
.hero a:focus-visible, .hero button:focus-visible, .hero .btn:focus-visible,
.footer a:focus-visible, .platband a:focus-visible, .hmap__trace:focus-visible {
  outline-color: var(--bitua-teal);
}
.form button { padding: 14px; font-size: 15px; }
.form-ok {
  background: #fff; border: 1px solid var(--bitua-mist); border-radius: 16px;
  padding: 44px 36px; text-align: center; box-shadow: var(--shadow-sm); animation: bfade 240ms ease;
}
.form-ok__icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--bitua-mint);
  color: var(--bitua-teal-dark); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.form-ok__icon i { width: 28px; height: 28px; }
.form-ok h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.form-ok p { font-size: 15px; color: var(--bitua-slate); line-height: 1.6; }

/* Inline error + privacy note + loading spinner */
.form__err { font-size: 13.5px; line-height: 1.5; color: #b42318; background: #fef3f2;
  border: 1px solid #fecdca; border-radius: 10px; padding: 11px 13px; }
.form__err a { color: #b42318; font-weight: 700; text-decoration: underline; }
.form__priv { font-size: 12px; color: var(--bitua-slate); line-height: 1.5; margin-top: 2px; }
.form__priv a { color: var(--bitua-teal-dark); font-weight: 600; }
.form button[disabled] { opacity: .8; cursor: default; }
.btn-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; display: inline-block; vertical-align: -3px; margin-right: 8px;
  animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spin { animation: none; } }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--bitua-mist); padding: 56px 0 40px; background: var(--bitua-bg); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer__brand img { height: 26px; margin-bottom: 14px; }
.footer__brand p { font-size: 13px; color: var(--bitua-slate); line-height: 1.6; max-width: 260px; }
.footer__col h4 {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bitua-slate); margin-bottom: 14px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 14px; color: var(--bitua-ink); cursor: pointer; transition: var(--transition); }
.footer__col a:hover { color: var(--bitua-teal-dark); }
.footer__bar {
  display: flex; justify-content: space-between; margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--bitua-mist); font-size: 13px; color: var(--bitua-slate); gap: 16px;
}
.footer__legalsep { margin: 0 7px; }
.footer__legal a:hover { color: var(--bitua-teal); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__media { order: 0; }   /* headline leads on stacked layouts; the dashboard follows */
  .hero h1 { font-size: 44px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .product { grid-template-columns: 1fr; gap: 32px; }
  .product__media { order: -1; height: 320px; }
  .about { grid-template-columns: 1fr; gap: 36px; }
  .about__media { order: -1; }
  .partners__grid { grid-template-columns: repeat(2, 1fr); }
  .statsband__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .quotes { grid-template-columns: 1fr; }
  .contact__box { grid-template-columns: 1fr; gap: 36px; padding: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 32px; }
}

@media (max-width: 640px) {
  .container, .nav__inner, .hero__grid, .trust { padding-left: 20px; padding-right: 20px; }
  .nav__links { display: none; }
  .nav__inner { gap: 16px; }
  .section { padding: 56px 0; }
  .hero { padding: 56px 0 48px; }
  .hero h1 { font-size: 36px; }
  .hero__lead { font-size: 17px; }
  .section-head h2, .about h2 { font-size: 30px; }
  .steps, .features, .partners__grid, .footer__grid { grid-template-columns: 1fr; }
  .about__facts { grid-template-columns: 1fr 1fr; }
  .statsband__grid { grid-template-columns: 1fr 1fr; }
  .statsband__inner { padding: 40px 28px; }
  .statsband__grid .n { font-size: 38px; }
  .contact__box { padding: 28px; }
  .footer__bar { flex-direction: column; }
  .hero__badge { right: 0; }
  .hero__chip { left: 0; }
  .page-head { padding-top: 44px; }
  .page-head h1 { font-size: 32px; }
  .cta-band h2 { font-size: 24px; }
}

/* ============================================================
   Craft & polish — world-class finishing layer
   (subtle motion, depth and hover; respects reduced-motion)
   ============================================================ */

/* ---- Scroll-reveal motion (fast + subtle; pre-triggered before viewport entry) ---- */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}

/* ---- Nav: elevate on scroll ---- */
.nav { transition: box-shadow .3s ease, background .3s ease; }
.nav--scrolled {
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 var(--bitua-mist), 0 8px 24px rgba(56,56,64,.06);
}

/* ---- Nav links: animated underline ---- */
.nav__links a { position: relative; }
.nav__links a:not(.is-active)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -26px; height: 2px;
  background: var(--bitua-teal); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav__links a:not(.is-active):hover::after { transform: scaleX(1); }

/* ---- Hero: ambient mesh + parallax-lite ---- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -10% 0 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 52% at 82% 14%, rgba(0,208,160,.18), transparent 70%),
    radial-gradient(34% 44% at 8% 4%, rgba(167,243,208,.34), transparent 72%);
}
.hero__media > img { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.hero__media:hover > img { transform: translateY(-5px); box-shadow: 0 18px 48px rgba(56,56,64,.16); }

/* ---- Buttons: lift, glow, arrow motion ---- */
.btn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn--primary { box-shadow: 0 6px 18px rgba(0,208,160,.26); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,208,160,.36); }
.btn--ghost:hover { transform: translateY(-2px); }
.btn i { transition: transform .2s ease; }
.btn--primary:hover i { transform: scale(1.08); }

/* ---- Cards: cohesive hover lift ---- */
.step, .feature, .partner, .quote, .fact {
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.step:hover, .feature:hover, .partner:hover, .quote:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #b8e6d4;
}
.fact:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: #b8e6d4; }
.feature__icon, .step__icon { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.feature:hover .feature__icon { transform: scale(1.08) rotate(-3deg); }
.step:hover .step__icon { transform: scale(1.08); }

/* ---- Eyebrow: subtle inner ring ---- */
.eyebrow { box-shadow: none; }

/* ---- Product: tabs + media polish, learn arrow ---- */
.tab { transition: var(--transition), transform .15s ease; }
.tab:hover { transform: translateY(-1px); }
.tab.is-active { box-shadow: 0 8px 18px rgba(56,56,64,.20); }
.product__media img { transition: transform .55s cubic-bezier(.16,1,.3,1); }
.product__media:hover img { transform: scale(1.04); }
.product__learn i { transition: transform .2s ease; }
.product__learn:hover i { transform: translateX(5px); }

/* ---- About media zoom ---- */
.about__media { position: relative; }
.about__media img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.about__media:hover img { transform: scale(1.05); }

/* ---- Stats band: number pop ---- */
.statsband__grid .n { font-variant-numeric: tabular-nums; }
.hero__stats .n, .fact .n { font-variant-numeric: tabular-nums; }

/* ---- Footer links: slide ---- */
.footer__col a { transition: color .2s ease, transform .2s ease; display: inline-block; }
.footer__col a:hover { transform: translateX(3px); }

/* ---- Reduced motion: disable all of the above ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .btn:hover, .step:hover, .feature:hover, .partner:hover, .quote:hover, .fact:hover,
  .hero__media:hover > img, .product__media:hover img, .about__media:hover img { transform: none !important; }
}

/* ============================================================
   BOLD VISUAL REFRESH — stronger art direction
   (dark editorial hero, fluid display type, section rhythm,
    gradient accents, dark footer). Loaded last → wins cascade.
   ============================================================ */

/* ---- Fluid display typography ---- */
.hero h1 { font-size: clamp(38px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.028em; }
.page-head h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.025em; }
.section-head h2, .about h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.022em; }
.cta-band h2 { font-size: clamp(26px, 3.2vw, 36px); }

/* ---- HERO: clean & airy (brand — flat light surface, no decorative gradients) ---- */
.hero {
  background: var(--bitua-bg);
  padding: clamp(40px, 4.5vw, 60px) 0 clamp(44px, 4.5vw, 64px);
  color: var(--bitua-ink);
}
.hero::before { display: none; }              /* no ambient glow — keep it clinical */
.hero__grid { position: relative; z-index: 1; }
.hero h1 { color: var(--bitua-ink); }
.hero__lead { color: var(--bitua-slate); font-size: clamp(17px, 1.4vw, 20px); }
.hero .eyebrow {
  background: transparent; color: var(--bitua-teal-dark); box-shadow: none; padding: 0;
}
.hero__stats { border-top: 1px solid var(--bitua-mist); padding-top: 22px; }
.hero__stats .n { color: var(--bitua-ink); font-size: clamp(24px, 2.4vw, 30px); }
.hero__stats .l { color: var(--bitua-slate); }
/* ghost button falls back to the base light style (ink text, mist border) */
.hero__media > img {
  border-radius: 22px; background: var(--bitua-white);
  box-shadow: var(--shadow-lg); border: 1px solid var(--bitua-mist);
}
.hero__chip { color: var(--bitua-ink); }

/* ---- NAV: glassy, refined ---- */
.nav { background: rgba(255,255,255,.78); }
.nav--scrolled { background: rgba(255,255,255,.94); }

/* ---- SECTION RHYTHM: alternating canvases ---- */
.section, .testimonials { background: var(--bitua-white); }
.section:nth-of-type(even) { background: var(--bitua-bg); position: relative; }
/* Delicate fading hairline where the canvas tone changes — makes band transitions intentional */
.section:nth-of-type(even)::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1180px, 92%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--bitua-mist), transparent);
}
.page-head { background: var(--bitua-bg); padding-bottom: 24px; }
.page-head .eyebrow { margin-bottom: 4px; }

/* ---- CARDS: bigger, bolder, gradient icon tiles ---- */
.feature, .step, .partner, .quote { border-radius: 20px; }
.feature { padding: 32px; }
.feature__icon, .step__icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--bitua-teal);
  color: #fff; border: none;
}
.feature__icon i { width: 26px; height: 26px; }
.step__icon i { width: 24px; height: 24px; }
.feature h3 { font-size: 19px; }
.step__num {
  position: absolute; top: 22px; right: 24px; font-size: 34px; font-weight: 700;
  color: var(--bitua-mist); letter-spacing: -.02em; opacity: .9;
}
.fact { border-radius: 16px; }
.fact .n { font-size: 32px; }

/* ---- PRODUCT panel: framed, elevated ---- */
.product__media { border-radius: 22px; box-shadow: var(--shadow-sm); }
.tab.is-active { background: var(--bitua-ink); }

/* ---- STATS BAND: deeper, larger numbers ---- */
.statsband__box { border-radius: 28px; }
.statsband__grid .n { font-size: clamp(38px, 4.4vw, 54px); }

/* ---- CTA BAND: vivid teal gradient ---- */
.cta-band {
  background: var(--bitua-teal); /* flat brand teal — primary action surface */
  border-radius: 28px; padding: clamp(40px, 5vw, 64px);
}
.cta-band__eyebrow { color: rgba(255,255,255,.92); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band__btn { background: #fff; color: var(--bitua-teal-dark); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.cta-band__btn:hover { background: #fff; color: var(--bitua-ink); }

/* ---- FOOTER: dark ---- */
.footer { background: var(--bitua-ink); border-top: none; }
.footer__brand p { color: rgba(255,255,255,.62); }
.footer__col h4 { color: rgba(255,255,255,.5); }
.footer__col a { color: rgba(255,255,255,.82); }
.footer__col a:hover { color: var(--bitua-teal); }
.footer__bar { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.55); }

/* ---- Responsive tweaks for the bolder layout ---- */
@media (max-width: 640px) {
  .step__num { font-size: 28px; top: 18px; right: 20px; }
  .statsband__grid .n { font-size: 34px; }
}

/* ============================================================
   ELITE LAYER — signature motif, editorial motion, bento,
   gradient hairlines, grain. Loaded last → wins cascade.
   ============================================================ */

/* Global grain texture removed — brand calls for clean, flat, clinical surfaces. */

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--bitua-teal); /* flat, no glow (brand) */
}

/* ---- HERO: editorial word reveal + entrance ---- */
.hero__title { overflow: hidden; }
.hero__title .w {
  display: inline-block; opacity: 0; transform: translateY(28px); filter: blur(6px);
  animation: wordIn .7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(.12s + var(--wi) * .055s);
}
@keyframes wordIn { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero .eyebrow   { opacity: 0; animation: heroIn .7s .05s both; }
.hero__lead      { opacity: 0; animation: heroIn .8s .45s both; }
.hero__ctas      { opacity: 0; animation: heroIn .8s .58s both; }
.hero__stats     { opacity: 0; animation: heroIn .8s .7s both; }
.hero__media     { opacity: 0; animation: heroIn 1s .3s both; }

/* ---- HERO: signature RFID rings behind the product ---- */
.hero__media::before {
  content: ""; position: absolute; width: 130%; aspect-ratio: 1; border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, transparent 32%, rgba(0,208,160,.10) 33%, transparent 34%) ,
    radial-gradient(circle, transparent 48%, rgba(0,208,160,.08) 49%, transparent 50%),
    radial-gradient(circle, transparent 64%, rgba(0,208,160,.05) 65%, transparent 66%);
  animation: ringPulse 6s ease-in-out infinite;
}
@keyframes ringPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* ---- Eyebrow: editorial leading line ---- */
.section-head .eyebrow::before,
.about .eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--bitua-teal-dark); opacity: .5; margin-right: 2px;
}

/* ---- Gradient HAIRLINE borders on cards (the premium 1px look) ---- */
.feature, .step, .partner, .quote {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bitua-white), var(--bitua-white)) padding-box,
    linear-gradient(150deg, rgba(0,208,160,.45), rgba(32,136,144,.10) 55%, rgba(226,232,240,.6)) border-box;
}
.feature:hover, .step:hover, .partner:hover, .quote:hover {
  background:
    linear-gradient(var(--bitua-white), var(--bitua-white)) padding-box,
    linear-gradient(150deg, rgba(0,208,160,.9), rgba(32,136,144,.4) 60%, rgba(0,208,160,.2)) border-box;
  box-shadow: 0 18px 40px rgba(56,56,64,.10), 0 0 0 1px rgba(0,208,160,.04);
}
/* steps sit on tinted sections → white surface keeps them crisp */
.step { background:
    linear-gradient(var(--bitua-white), var(--bitua-white)) padding-box,
    linear-gradient(150deg, rgba(0,208,160,.35), rgba(226,232,240,.6)) border-box; }

/* ---- Capabilities: even, balanced 3×2 grid (no oversized empty card) ---- */
.features { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; }
.features .feature { display: flex; flex-direction: column; align-items: flex-start; min-height: 200px; }
.features .feature .feature__icon { margin-bottom: 18px; }
.features .feature h3 { margin-bottom: 8px; }
/* (removed) el naranja de la tercera tarjeta y el degradado azul de la quinta: el naranja está
   reservado para alertas y los degradados decorativos se eliminaron del sistema. Todas las
   tarjetas usan el mismo tile teal plano. */

/* ---- Marquee-free partner bar: refined dotted separation ---- */
.trust__logos { gap: 40px; }
.trust__logos span { transition: opacity .25s ease, color .25s ease; }
.trust__logos span:hover { opacity: 1; color: var(--bitua-ink); }

/* ---- Buttons: magnetic-ish sheen ---- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.btn--primary:hover::after { left: 140%; }

/* ---- Reduced motion: silence the elite layer too ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__title .w { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .hero .eyebrow, .hero__lead, .hero__ctas, .hero__stats, .hero__media { opacity: 1 !important; animation: none !important; }
  .hero__media::before, .btn--primary::after, .scroll-progress { animation: none !important; }
}

/* ---- Capabilities responsive ---- */
@media (max-width: 980px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  .features .feature { min-height: 0; }
}

/* ============================================================
   HOME v2 — problem, solutions teaser, software band, marquee
   ============================================================ */

/* ---- Partner marquee ---- */
.trust__marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trust__track { display: flex; gap: 56px; width: max-content; animation: marquee 38s linear infinite; }
.trust__track span { font-size: 20px; font-weight: 700; color: var(--bitua-slate); opacity: .55;
  letter-spacing: -.01em; white-space: nowrap; transition: opacity .25s ease, color .25s ease; }
.trust:hover .trust__track { animation-play-state: paused; }
.trust__track span:hover { opacity: 1; color: var(--bitua-ink); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Problem section (risk framing, orange accents) ---- */
.problem { background: var(--bitua-bg); }
.problem__head { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.problem__head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; margin-top: 14px; }
.problem__head p { font-size: 17px; color: var(--bitua-slate); margin-top: 14px; }
.problem .eyebrow { background: transparent; color: var(--bitua-orange); box-shadow: none; padding: 0; }
.problem__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.problem__card { background: var(--bitua-bg); border: 1px solid var(--bitua-mist); border-radius: 20px; padding: 34px 30px;
  border-top: 3px solid var(--bitua-orange); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.problem__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.problem__n { font-size: clamp(40px, 4.6vw, 56px); font-weight: 700; letter-spacing: -.03em; color: var(--bitua-orange); font-variant-numeric: tabular-nums; line-height: 1; }
.problem__l { font-size: 15px; color: var(--bitua-slate); line-height: 1.55; margin-top: 14px; }
/* sources footnote — quiet but verifiable */
.problem__src { margin-top: 22px; text-align: center; font-size: 12px; color: var(--bitua-slate); opacity: .8; }
.problem__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.problem__src a:hover { color: var(--bitua-teal-dark); }

/* ---- Solutions teaser ---- */
.solgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.solcard { display: flex; align-items: center; gap: 16px; background: var(--bitua-white);
  border: 1px solid transparent; border-radius: 18px; padding: 20px 22px; color: var(--bitua-ink);
  background:
    linear-gradient(var(--bitua-white), var(--bitua-white)) padding-box,
    linear-gradient(150deg, rgba(0,208,160,.45), rgba(226,232,240,.6)) border-box;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.solcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.solcard__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--bitua-teal); color: #fff; }
.solcard__icon i { width: 24px; height: 24px; }
.solcard__body { flex: 1; }
.solcard__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.solcard__cat { font-size: 13px; color: var(--bitua-slate); margin-top: 2px; line-height: 1.45; }
.solcard__cat b { font-weight: 600; color: var(--bitua-teal-dark); }
.solcard__arrow { color: var(--bitua-slate); transition: transform .2s ease, color .2s ease; }
.solcard__arrow i { width: 18px; height: 18px; }
.solcard:hover .solcard__arrow { color: var(--bitua-teal-dark); transform: translate(3px, -3px); }
/* Con 7 soluciones la última tarjeta queda sola en la fila: se centra bajo la columna del medio
   para que lea intencional y se alinee con el CTA. El selector solo actúa cuando la última
   tarjeta abre fila (3n+1) y solo en la grilla de 3 columnas — así sigue sirviendo si cambia
   la cantidad de productos. */
@media (min-width: 981px) {
  .solgrid > .solcard:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.solutions__cta { text-align: center; margin-top: 32px; }
.solutions__cta .btn { padding: 13px 24px; }

/* ---- Software band (dark, AI layer) ---- */
.software { background: var(--bitua-ink) !important; color: #fff; }
.section.software { padding: 64px 0; } /* compact: chips-only content doesn't need a full-height band */
.software__inner { text-align: center; max-width: 900px; margin: 0 auto; }
/* Mismo tratamiento que .eyebrow: era el otro encabezado que se quedaba sin mayúsculas. */
.software__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #7defce; margin-bottom: 14px; }
.software__eyebrow i { width: 15px; height: 15px; }
.software h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; color: #fff; }
.software__sub { font-size: 17px; color: rgba(255,255,255,.72); margin: 14px 0 36px; }
.software__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.swchip { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: 15px; font-weight: 600;
  transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.swchip { cursor: default; } /* informational, not a control — no button affordance */
.swchip:hover { background: rgba(0,208,160,.10); }
.swchip i { width: 18px; height: 18px; color: var(--bitua-teal); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .problem__grid { grid-template-columns: 1fr; }
  .solgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .solgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   POSITIONING v3 — identity statement + Technology pillar
   ============================================================ */

/* ---- Identity statement band ---- */
.identity { padding: clamp(56px, 7vw, 88px) 0; background: var(--bitua-white); }
.identity__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.identity__label {
  display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--bitua-teal-dark); margin-bottom: 20px;
}
.identity__lead {
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.022em;
  line-height: 1.12; color: var(--bitua-ink);
}
.identity__text {
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--bitua-slate);
  margin: 20px auto 0; max-width: 720px;
}
.identity__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-size: 16px; font-weight: 600; color: var(--bitua-teal-dark);
}
.identity__cta i { width: 18px; height: 18px; transition: transform .2s ease; }
.identity__cta:hover i { transform: translateX(5px); }

/* ---- Technology pillar (dark, end-to-end engineering) ---- */
.tech {
  background: var(--bitua-ink) !important; /* flat ink band (brand: no decorative gradients) */
  color: #fff; position: relative; overflow: hidden;
}
.tech::before { content: none; } /* decorative RFID rings removed — flat ink band (brand) */
.tech__head { position: relative; max-width: 760px; margin: 0 auto 48px; text-align: center; }
/* Mismo tratamiento que .eyebrow del resto del sitio: era el único encabezado sin mayúsculas. */
.tech__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #7defce; margin-bottom: 14px; }
.tech__eyebrow i { width: 15px; height: 15px; }
.tech__head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: #fff; }
.tech__head p { font-size: 17px; color: rgba(255,255,255,.72); margin-top: 14px; line-height: 1.55; }
.tech__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.techcard {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 28px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease;
}
.techcard:hover { transform: translateY(-5px); background: rgba(0,208,160,.08); border-color: rgba(0,208,160,.32); }
.techcard__icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--bitua-teal); color: #fff;
  margin-bottom: 18px;
}
.techcard__icon i { width: 26px; height: 26px; }
.techcard h3 { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.techcard p { font-size: 14px; color: rgba(255,255,255,.66); line-height: 1.6; }

@media (max-width: 980px) { .tech__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tech__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Clients page — real client/partner grid
   ============================================================ */
.clients { padding: 8px 0 24px; }
.clients__label { text-align: center; font-size: 13px; font-weight: 600; color: var(--bitua-slate);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 28px; }
.clientgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.clientcard {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 76px; padding: 16px; border-radius: 16px; font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; color: var(--bitua-slate);
  background:
    linear-gradient(var(--bitua-white), var(--bitua-white)) padding-box,
    linear-gradient(150deg, rgba(0,208,160,.35), rgba(226,232,240,.7)) border-box;
  border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, color .25s ease;
}
.clientcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--bitua-ink); }
@media (max-width: 980px) { .clientgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .clientgrid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Client / partner LOGOS (real brand files in assets/logos/)
   Grayscale wall → color on hover (classic logo-wall treatment)
   ============================================================ */
.logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; display: block;
  filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease, transform .25s ease;
  color: var(--bitua-slate); font-weight: 700; font-size: 15px; /* alt-text fallback styling */ }

/* Marquee variant */
.trust__track--logos { gap: 64px; align-items: center; }
.logocell { display: flex; align-items: center; justify-content: center; height: 48px; }
.trust:hover .logo, .logocell:hover .logo { filter: grayscale(0); opacity: 1; }

/* Grid variant (Clientes + Nosotros) — grouped, optically normalized */
.logogroup + .logogroup { margin-top: 44px; }
.logogroup__h {
  display: block; text-align: center; font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bitua-slate); margin-bottom: 22px;
}
.logogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.logocard {
  display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 20px 24px;
  border-radius: 16px; background: var(--bitua-white);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bitua-white), var(--bitua-white)) padding-box,
    linear-gradient(150deg, rgba(0,208,160,.22), rgba(226,232,240,.7)) border-box;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.logocard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* fixed contain box → every logo gets the same optical footprint */
.logocard .logo { width: 100%; height: 50px; max-width: 152px; object-fit: contain; }
.logocard:hover .logo { filter: grayscale(0); opacity: 1; }

@media (max-width: 980px) { .logogrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .logogrid { grid-template-columns: repeat(2, 1fr); } .logocard { min-height: 88px; } .logocard .logo { height: 40px; } }

/* Clean text fallback when a logo file is missing */
.logo-txt { font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--bitua-slate); white-space: nowrap; }
.logocard .logo-txt { font-size: 17px; }

/* ============================================================
   NOSOTROS — founding team + regional partner network
   ============================================================ */

/* Team */
.teamgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; }
.teamcard { text-align: center; background: var(--bitua-white); border: 1px solid var(--bitua-mist);
  border-radius: 20px; padding: 34px 24px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease; }
.teamcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #b8e6d4; }
.teamcard__avatar { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #fff;
  letter-spacing: .02em; background: var(--bitua-teal); }
.teamcard__name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.teamcard__role { font-size: 14px; color: var(--bitua-teal-dark); font-weight: 600; margin-top: 4px; }

/* Regional network */
.netgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.netcard { background: var(--bitua-white); border: 1px solid var(--bitua-mist); border-radius: 14px; padding: 18px 18px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease; }
.netcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: #b8e6d4; }
.netcard__country { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--bitua-slate); }
.netcard__country i { width: 13px; height: 13px; color: var(--bitua-teal-dark); }
.netcard__name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-top: 8px; }

@media (max-width: 980px) {
  .teamgrid { grid-template-columns: repeat(3, 1fr); }
  .netgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .teamgrid { grid-template-columns: 1fr; max-width: 360px; }
  .netgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Team photos (circular) + 4-up grid ---- */
.teamgrid { grid-template-columns: repeat(4, 1fr); max-width: 920px; }
.teamcard__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px;
  border: 3px solid var(--bitua-white); box-shadow: 0 8px 22px rgba(56,56,64,.16); display: block; background: var(--bitua-bg); }
.teamcard__avatar { width: 96px; height: 96px; } /* keep initials fallback same size as photo */

/* ---- Footer social icons ---- */
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.82);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.footer__social a:hover { transform: translateY(-2px); background: var(--bitua-teal); color: #fff; border-color: var(--bitua-teal); }
.footer__social i { width: 18px; height: 18px; }

@media (max-width: 980px) { .teamgrid { grid-template-columns: repeat(2, 1fr); max-width: 520px; } }
@media (max-width: 640px) { .teamgrid { grid-template-columns: repeat(2, 1fr); max-width: 360px; } }

/* ============================================================
   LEADERSHIP — dynamic, tech-forward cards
   (gradient-framed portrait, desaturated → color + zoom on hover,
    teal accent ring, growing role bar)
   ============================================================ */
.teamgrid { grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 760px; }
.leader { position: relative; }
.leader__photo {
  position: relative; aspect-ratio: 1/1; border-radius: 18px; overflow: hidden;
  background: linear-gradient(150deg, #20323a, var(--bitua-ink));
  box-shadow: 0 1px 3px rgba(56,56,64,.10);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.leader__photo img, .leader__photo .avatar-fallback {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.leader__photo { isolation: isolate; } /* keep the tint blend inside the tile */
.leader__photo img {
  object-position: center 22%; /* frame the face, not the torso */
  /* no CSS filter here: filter + blend + animated ancestors made Chrome skip painting some tiles */
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
/* brand duotone via blend only: 'color' takes the photo's luminance + teal-dark hue → clinical duotone */
.leader__photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--bitua-teal-dark);
  mix-blend-mode: color;
}
/* constant subtle vignette → unifies disparate photo backgrounds (top + bottom darkened) */
.leader__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,38,42,.12) 0%, transparent 30%, transparent 56%, rgba(18,38,42,.46) 100%);
  opacity: .85; transition: opacity .35s ease;
}
.leader:hover .leader__photo { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(56,56,64,.20), 0 0 0 2px var(--bitua-teal); }
.leader:hover .leader__photo::after { opacity: .55; } /* soften the vignette on hover → tile reads brighter */
.avatar-fallback {
  display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #fff;
  letter-spacing: .02em; background: var(--bitua-teal);
}
.leader__info { padding-top: 16px; }
.leader__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.leader__role {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--bitua-teal-dark);
}
.leader__role::before { content: ""; width: 16px; height: 2px; background: var(--bitua-teal); transition: width .3s ease; }
.leader:hover .leader__role::before { width: 30px; }

@media (max-width: 980px) { .teamgrid { grid-template-columns: repeat(2, 1fr); max-width: 560px; } }
@media (max-width: 480px) { .teamgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .leader__name { font-size: 15px; } }

/* ============================================================
   NOSOTROS v2 — Abridge-style leadership row + image-less about
   ============================================================ */

/* About: centered intro + full-width stat row (no photo) */
.about-intro { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.about-intro h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.about-intro p { font-size: 17px; color: var(--bitua-slate); margin-top: 16px; line-height: 1.6; }
.about__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; }

/* Leadership — compact portrait cards in a single row (Abridge style) */
.teamgrid { grid-template-columns: repeat(6, 1fr); gap: 16px; max-width: 1180px; }
.leader__photo { aspect-ratio: 3/4; border-radius: 14px; }
.leader__info { padding-top: 14px; }
.leader__name { font-size: 15px; line-height: 1.25; }
.leader__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.leader__role { font-size: 11px; letter-spacing: .08em; margin-top: 0; }
.leader__role::before { width: 12px; }
.leader__li {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; color: var(--bitua-slate);
  transition: transform .2s ease, color .2s ease;
}
.leader__li svg { width: 16px; height: 16px; display: block; }
.leader__li:hover { transform: translateY(-2px); color: var(--bitua-teal-dark); }

@media (max-width: 980px) {
  .teamgrid { grid-template-columns: repeat(3, 1fr); max-width: 620px; }
  .about__facts { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
}
@media (max-width: 560px) {
  .teamgrid { grid-template-columns: repeat(2, 1fr); max-width: 380px; }
}

/* ============================================================
   TEAM — horizontal carousel (fixed-width cards + arrows).
   Higher specificity (.team .teamgrid) wins over the grid rules above.
   ============================================================ */
.teamrow { position: relative; max-width: 1180px; margin: 0 auto; }
.teamrow__viewport { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.teamrow__viewport::-webkit-scrollbar { display: none; }
.team .teamgrid { display: flex; flex-wrap: nowrap; gap: 16px; width: max-content; max-width: none;
  grid-template-columns: none; margin: 0; padding: 6px 4px; }
.team .leader { flex: 0 0 clamp(150px, 22vw, 186px); scroll-snap-align: start; }
.teamrow__nav { position: absolute; top: 38%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bitua-mist);
  background: #fff; box-shadow: var(--shadow-md); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--bitua-ink); transition: background .2s, transform .2s, opacity .2s; }
.teamrow__nav:hover { background: var(--bitua-bg); transform: translateY(-50%) scale(1.06); }
.teamrow__nav[hidden] { display: none; }
.teamrow__nav--prev { left: -10px; }
.teamrow__nav--next { right: -10px; }
.teamrow__nav i { width: 22px; height: 22px; }
@media (max-width: 560px) { .teamrow__nav { width: 38px; height: 38px; } }

/* ============================================================
   PURPOSE — manifesto / thesis band (from → to)
   ============================================================ */
.purpose { background: linear-gradient(180deg, var(--bitua-white) 0%, var(--bitua-bg) 100%) !important; }
.purpose__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.purpose .eyebrow { margin-bottom: 22px; }
.purpose__statement { font-size: clamp(26px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.purpose__from { color: var(--bitua-slate); }
.purpose__to { color: var(--bitua-teal-dark); }
.purpose__arrow { display: inline-flex; vertical-align: middle; margin: 0 4px; color: var(--bitua-teal); }
.purpose__arrow i { width: clamp(24px, 3vw, 38px); height: clamp(24px, 3vw, 38px); }
.purpose__sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--bitua-slate); margin: 22px auto 0; max-width: 640px; line-height: 1.6; }
@media (max-width: 640px) { .purpose__arrow { display: block; margin: 8px auto; transform: rotate(90deg); } }

/* ============================================================
   MOBILE NAV — hamburger + dropdown panel
   ============================================================ */
.nav__burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--bitua-mist); color: var(--bitua-ink);
  transition: var(--transition);
}
.nav__burger:hover { border-color: var(--bitua-slate); }
.nav__burger i { width: 20px; height: 20px; }
.nav__mobile {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 20px 18px; border-top: 1px solid var(--bitua-mist);
  background: rgba(255,255,255,.98); backdrop-filter: blur(12px);
}
.nav__mobile a {
  font-size: 16px; font-weight: 600; color: var(--bitua-ink);
  padding: 12px 8px; border-radius: 8px; transition: var(--transition);
}
.nav__mobile a:hover, .nav__mobile a.is-active { color: var(--bitua-teal-dark); background: var(--bitua-bg); }
.nav__mobile-cta {
  margin-top: 8px; justify-content: center; display: inline-flex !important; align-items: center; gap: 8px;
  color: #fff !important; background: var(--bitua-teal); text-align: center;
}
.nav__mobile-cta:hover { background: var(--bitua-teal-dark) !important; color: #fff !important; }
.nav__mobile-cta i { width: 18px; height: 18px; }
.nav--open .nav__mobile { display: flex; animation: bfade .25s ease; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }       /* moved into the mobile panel */
  .nav__burger { display: inline-flex; }
  .nav__actions { border-left: none; padding-left: 0; margin-left: 0; }
}

/* ============================================================
   HERO dashboard browser-frame + real-installs gallery
   ============================================================ */
.hero__media--app { width: 100%; }
.hero__media--app::before { display: none; }      /* drop the radar rings behind the UI shot */
.appframe {
  width: 100%; border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px rgba(0,0,0,.45);
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.hero__media--app:hover .appframe { transform: translateY(-4px); box-shadow: 0 36px 80px rgba(0,0,0,.5); }
.appframe__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.appframe__bar i { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; display: block; }
.appframe img { width: 100%; height: auto; display: block; }

/* Real installations gallery */
.installgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.installtile { aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; border: 1px solid var(--bitua-mist); box-shadow: var(--shadow-sm); }
.installtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.installtile:hover img { transform: scale(1.05); }
@media (max-width: 560px) { .installgrid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

/* ============================================================
   NOSOTROS — editorial about-hero (single headline + image)
   ============================================================ */
.abouthero { padding: clamp(56px, 7vw, 96px) 0 64px; }
.abouthero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.abouthero__text h1 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 18px 0 18px; text-wrap: balance; }
.abouthero__text p { font-size: 17px; color: var(--bitua-slate); line-height: 1.6; }
.abouthero .about__facts { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 32px 0 0; gap: 14px; }
.abouthero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-md); max-height: 560px; }
/* Render variant: clean product render contained on a soft tinted card */
.abouthero__media--render { background: var(--bitua-bg); border: 1px solid var(--bitua-mist); border-radius: 20px; padding: 20px; display: flex; align-items: center; justify-content: center; }
.abouthero__media--render img { object-fit: contain; box-shadow: none; border-radius: 0; max-height: 460px; }
@media (max-width: 860px) {
  .abouthero__grid { grid-template-columns: 1fr; gap: 36px; }
  .abouthero__media img { max-height: 420px; }
}

/* ============================================================
   ECOSYSTEM — engineering blueprint showcase (option B)
   ============================================================ */
.ecosystem { background: var(--bitua-bg) !important; }
.ecosystem__stack { display: flex; flex-direction: column; gap: 24px; max-width: 1000px; margin: 0 auto; }
.blueprint { margin: 0; border: 1px solid var(--bitua-mist); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.blueprint:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blueprint img { width: 100%; height: auto; display: block; }

/* ============================================================
   ABOUT-HERO CAROUSEL — tech slider (crossfade + progress + dots)
   ============================================================ */
.carousel { position: relative; width: 100%; }
.carousel__viewport {
  position: relative; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden;
  background: var(--bitua-bg); border: 1px solid var(--bitua-mist); box-shadow: var(--shadow-md);
}
.carousel__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px;
  opacity: 0; transform: scale(1.02); transition: opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.carousel__slide.is-active { opacity: 1; transform: scale(1); }
/* thin progress bar that refills each cycle */
.carousel__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,208,160,.15); border-radius: 0 0 18px 18px; overflow: hidden; }
.carousel__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bitua-teal); }
.carousel__bar.run::after { animation: carbar 4.2s linear forwards; }
@keyframes carbar { from { width: 0; } to { width: 100%; } }
.carousel__dots { display: flex; justify-content: center; gap: 2px; margin-top: 8px; }
/* 44x44 tappable area with a small visual dot drawn inside (accessible touch target) */
.carousel__dot { width: 44px; height: 44px; border: none; cursor: pointer; padding: 0;
  background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.carousel__dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--bitua-mist); transition: width .25s ease, background .25s ease; }
.carousel__dot:hover::before { background: var(--bitua-slate); }
.carousel__dot.is-active::before { width: 24px; background: var(--bitua-teal); }
@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: opacity .2s ease; transform: none; }
  .carousel__bar { display: none; }
}
/* "Bitua en terreno" — continuous auto-scroll (JS) + arrows + native swipe */
.tmar { position: relative; --tmar-tile: clamp(150px, 21vw, 230px); --tmar-gap: 16px; }
.tmar__viewport { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tmar__viewport::-webkit-scrollbar { display: none; }
/* soft fade edges so photos enter/exit gracefully */
.tmar::before, .tmar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none; }
.tmar::before { left: 0; background: linear-gradient(90deg, var(--bitua-white), transparent); }
.tmar::after { right: 0; background: linear-gradient(270deg, var(--bitua-white), transparent); }
.tmar__track { display: flex; gap: var(--tmar-gap); width: max-content; }
.tmar__slide { flex: 0 0 var(--tmar-tile); }
.tmar__slide img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; border: 1px solid var(--bitua-mist); box-shadow: var(--shadow-sm); display: block; }
.tmar__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bitua-mist);
  background: #fff; box-shadow: var(--shadow-md); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--bitua-ink); transition: background .2s, transform .2s;
}
.tmar__nav:hover { background: var(--bitua-bg); transform: translateY(-50%) scale(1.06); }
.tmar__nav--prev { left: -10px; }
.tmar__nav--next { right: -10px; }
.tmar__nav svg { width: 22px; height: 22px; }
@media (max-width: 560px) { .tmar::before, .tmar::after { width: 24px; } }

/* ============================================================
   NOSOTROS — hero CTAs + traction stat strip
   ============================================================ */
.abouthero__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.abouthero__ctas .btn { font-size: 15px; padding: 14px 24px; }

.statstrip { padding: 8px 0 16px; }
.statstrip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.statstrip__item {
  background: var(--bitua-white); border: 1px solid var(--bitua-mist); border-radius: 16px;
  padding: 26px 20px; text-align: center;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.statstrip__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #b8e6d4; }
.statstrip__item .n { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; color: var(--bitua-teal-dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.statstrip__item .l { font-size: 14px; color: var(--bitua-slate); margin-top: 8px; }
.statstrip__note { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bitua-slate); margin-top: 22px; }
@media (max-width: 860px) { .statstrip__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   BPWALL — engineering console (drifting blueprints + HUD)
   Replaces the carousel: ambient, tech, "a glimpse" not a read.
   ============================================================ */
.bpwall {
  position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #1b2a2e 0%, #14181c 55%, #0f1316 100%);
  border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow-lg);
}
/* blueprint grid overlay */
.bpwall::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(rgba(0,208,160,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,208,160,.06) 1px, transparent 1px);
  background-size: 30px 30px;
}
.bpwall__strip {
  position: absolute; inset: 0; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.bpwall__track {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 16px; padding: 16px;
  animation: bpdrift 34s linear infinite;
}
.bpwall__track img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
@keyframes bpdrift { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* sweeping scan line */
.bpwall__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,208,160,.9), transparent);
  box-shadow: 0 0 18px 2px rgba(0,208,160,.55);
  animation: bpscan 5s ease-in-out infinite;
}
@keyframes bpscan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* HUD tag */
.bpwall__tag {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(6px);
}
.bpwall__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bitua-teal); animation: bpulse 2s infinite; }

/* corner brackets (HUD mira) */
.bpwall__c { position: absolute; width: 18px; height: 18px; z-index: 4; border: 2px solid rgba(0,208,160,.7); pointer-events: none; }
.bpwall__c.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.bpwall__c.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.bpwall__c.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.bpwall__c.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }

@media (prefers-reduced-motion: reduce) {
  .bpwall__track { animation: none; }
  .bpwall__scan { display: none; }
  .bpwall__dot { animation: none; }
}

/* ============================================================
   HERO — animated dashboard (crossfade real screens + live)
   ============================================================ */
.appframe__bar { position: relative; }
.appframe__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bitua-slate); }
.appframe__livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--bitua-teal); box-shadow: 0 0 0 0 rgba(0,208,160,.5); animation: bpulse 2s infinite; }
.appshots { position: relative; width: 100%; aspect-ratio: 1908 / 872; background: #fff; overflow: hidden; }
.appshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.015); transition: opacity .8s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.appshot.is-active { opacity: 1; transform: scale(1); }
.appshots__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--bitua-teal); z-index: 2; }
.appshots__bar.run { animation: carbar 3.8s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .appshot { transition: opacity .2s ease; transform: none; }
  .appshots__bar, .appframe__livedot { animation: none; }
}

/* ============================================================
   NAV — "Acceder" (app login) link + form honeypot
   ============================================================ */
.nav__login {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--bitua-ink);
  padding: 9px 4px; cursor: pointer; transition: var(--transition);
}
.nav__login i { width: 15px; height: 15px; }
.nav__login:hover { color: var(--bitua-teal-dark); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 820px) { .nav__login { display: none; } } /* shown inside the mobile panel instead */

/* ============================================================
   PURPOSE v2 — dramatic dark manifesto band (signal motif)
   ============================================================ */
.purpose {
  background: var(--bitua-ink) !important; /* flat ink band — no radial, no rings (brand) */
  color: #fff; position: relative; overflow: hidden;
}
.purpose .container { position: relative; z-index: 1; }
.purpose .eyebrow { color: #7defce; }
.purpose__from { color: rgba(255,255,255,.5); }
.purpose__to { color: var(--bitua-teal); }
.purpose__arrow { display: inline-flex; align-items: center; color: var(--bitua-teal);
  animation: bpnudge 1.8s ease-in-out infinite; }
.purpose__sub { color: rgba(255,255,255,.72); }
@keyframes bpnudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .purpose::before { animation: none; }
  .purpose__arrow { animation: none; }
}

/* ============================================================
   LIVE DASHBOARD section — browser frame around the animated app
   ============================================================ */
.livedash__frame { max-width: 1180px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--bitua-mist); box-shadow: var(--shadow-lg); background: #fff; }
.livedash__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.livedash__bar .d { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; }
.livedash__url { margin-left: 14px; font-size: 13px; font-weight: 600; color: var(--bitua-slate); letter-spacing: .01em; }
.livedash__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bitua-slate); }
.livedash__livedot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: bpulse 2s infinite; }
.livedash__stage { position: relative; width: 100%; overflow: hidden; background: #ECECEC;
  aspect-ratio: 16 / 9; /* reserve the box before JS sizes it → no layout shift */ }
@media (prefers-reduced-motion: reduce) { .livedash__livedot { animation: none; } }

/* URL label in the hero browser bar (live dashboard) */
.appframe__url { margin-left: 12px; font-size: 12px; font-weight: 600; color: var(--bitua-slate); letter-spacing: .01em; }
.hero__media--app .livedash__stage { border-radius: 0; }

/* ============================================================
   Hero live-dashboard — contain the 1600px canvas (no blow-out)
   ============================================================ */
.hero__grid > * { min-width: 0; }
.hero__media--app { display: block; width: 100%; min-width: 0; }
.hero__media--app .appframe { width: 100%; }
.hero__media--app .livedash__stage { position: relative; overflow: hidden; width: 100%; }
.hero__media--app .scdash[data-dash-root] { position: absolute; top: 0; left: 0; }
/* Phones: dashboard renders at a legible width and pans horizontally inside the frame */
@media (max-width: 640px) {
  .hero__media--app .livedash__stage { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   Hero live-dashboard — "tech" treatment (dark app window + glow + scan)
   ============================================================ */
.hero__media--app .appframe {
  background: #11171c;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(0,208,160,.18), 0 0 60px rgba(0,208,160,.10);
}
.hero__media--app .appframe__bar { background: #1b232b; border-bottom: 1px solid rgba(255,255,255,.08); }
.hero__media--app .appframe__bar i { background: rgba(255,255,255,.22); }
.hero__media--app .appframe__url { color: rgba(255,255,255,.6); }
.hero__media--app .appframe__live { color: rgba(255,255,255,.62); }
/* Bottom fade so the live dashboard reads as depth/product, not a raw screenshot */
.hero__media--app .appframe { position: relative; }
.hero__media--app .appframe::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 4;
  background: linear-gradient(to top, #11171c 4%, rgba(17,23,28,0));
  pointer-events: none;
}

/* ============================================================
   PRODUCTOS — premium showcase (sticky quick-nav + alternating rows)
   ============================================================ */
.prodshow { padding-top: 8px; }

/* sticky quick-nav */
.prodnav {
  position: sticky; top: 74px; z-index: 20;
  /* Una sola línea: con 7 productos el wrap dejaba la última píldora sola en una segunda fila.
     Si no alcanza el ancho (desktop angosto, tablet, móvil) se desplaza en horizontal
     en vez de partirse, con la barra de scroll oculta. */
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  padding: 10px; margin: 0 auto 64px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(12px);
  border: 1px solid var(--bitua-mist); border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.prodnav::-webkit-scrollbar { display: none; }
.prodnav__item {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 9px 11px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--bitua-slate);
  text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
.prodnav__item:hover { background: var(--bitua-bg); color: var(--bitua-ink); }
.prodnav__item.is-active { background: var(--bitua-ink); color: #fff; }
.prodnav__n { font-size: 11px; font-weight: 700; letter-spacing: .06em; opacity: .55; font-variant-numeric: tabular-nums; }
.prodnav__item.is-active .prodnav__n { color: var(--bitua-teal); opacity: 1; }

/* rows */
.prodrows { display: flex; flex-direction: column; gap: 88px; }
/* Tres áreas: la imagen arriba de su columna, los botones justo debajo de ella, y el texto
   ocupando la columna contigua en toda la altura. En móvil se apilan imagen → texto → botones,
   para que el CTA no se adelante a los beneficios. */
.prow {
  display: grid; grid-template-columns: 1.05fr 1fr;
  grid-template-areas: "media body" "actions body";
  grid-template-rows: auto 1fr;
  column-gap: 64px; row-gap: 26px; align-items: start;
  scroll-margin-top: 150px;
}
.prow__media { grid-area: media; }
/* start, no center: el chip de categoría arranca a la misma altura que el borde superior
   de la foto. Centrado, el texto quedaba desfasado respecto de la imagen. */
.prow__body { grid-area: body; align-self: start; }
.prow__actions { grid-area: actions; align-self: start; }
.prow--rev { grid-template-areas: "body media" "body actions"; }

/* media: unified light studio panel + ghost index
   Coherence: every product sits on the SAME soft studio surface, fully
   visible (contain → nothing is cut), same frame shape and grade. */
.prow__media { position: relative; }
/* Numeral fantasma: tomaba el color tinta al 5% y no se leía. Con el acento del producto
   y algo más de opacidad se aprecia sin competir con la foto. */
.prow__index {
  position: absolute; top: -58px; left: -4px; z-index: 0;
  font-size: 80px; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--accent-deep);
  opacity: .3; font-variant-numeric: tabular-nums; pointer-events: none;
}
.prow--rev .prow__index { left: auto; right: -10px; }

/* decorative dot-grid behind the frame (outside, so it never textures the product) */
.prow__media::before {
  content: ''; position: absolute; z-index: 0; width: 180px; height: 180px;
  bottom: -22px; left: -22px; border-radius: 16px; pointer-events: none;
  background-image: radial-gradient(var(--bitua-slate) 1.2px, transparent 1.2px);
  background-size: 16px 16px; opacity: .14;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%);
          mask-image: linear-gradient(135deg, #000, transparent 70%);
}
.prow--rev .prow__media::before { left: auto; right: -22px;
  -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
          mask-image: linear-gradient(225deg, #000, transparent 70%); }

.prow__frame {
  position: relative; z-index: 1; border-radius: 20px; overflow: hidden;
  /* spotlight + soft teal glow → product reads as lit on a studio surface (smooth, no texture) */
  background:
    radial-gradient(70% 55% at 50% 92%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 10%, #ffffff 0%, #f3f7f9 52%, #e8eef2 100%);
  border: 1px solid var(--bitua-mist);
  box-shadow: var(--shadow-lg);
  transition: box-shadow .35s ease, transform .35s ease;
}
/* soft floor + vignette so contained shots read as one studio shoot */
.prow__frame::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 20px; box-shadow: inset 0 -40px 60px -40px rgba(56,56,64,.18), inset 0 0 0 1px rgba(255,255,255,.5);
}
.prow__frame img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  padding: 18px; mix-blend-mode: multiply;
  filter: saturate(1.04) contrast(1.03);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
/* Fotografía de estudio a sangre: para renders que traen su propio fondo, donde el multiply
   (que exige fondo blanco) dejaría un bloque gris. La imagen llena el marco conservando su
   proporción, así no se recorta el producto. */
.prow__frame--photo { aspect-ratio: 1080 / 1350; }
.prow__frame--photo img {
  aspect-ratio: auto; height: 100%; object-fit: cover; object-position: center;
  padding: 0; mix-blend-mode: normal;
}
/* micro-interaction: lift + subtle zoom + intensified glow on hover */
.prow__frame:hover { transform: translateY(-6px); box-shadow: 0 36px 70px rgba(56,56,64,.16), 0 0 50px color-mix(in srgb, var(--accent) 14%, transparent); }
.prow__frame:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .prow__frame, .prow__frame img { transition: none; }
  .prow__frame:hover { transform: none; }
  .prow__frame:hover img { transform: none; }
}

/* body */
.prow__cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep);
  padding: 7px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.prow__cat svg { width: 15px; height: 15px; }
.prow__title { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 16px; color: var(--bitua-ink); }
/* benefit-first hook — what the product is FOR */
.prow__job {
  font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--bitua-ink);
  margin-bottom: 16px; padding-left: 16px; border-left: 3px solid var(--accent);
}
.prow__joblabel {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bitua-teal-dark); margin-bottom: 7px;
}
/* supporting technical description (secondary) */
.prow__lead { font-size: 15.5px; line-height: 1.6; color: var(--bitua-slate); margin-bottom: 26px; }
/* mini-datasheet */
.prow__specs {
  /* Trazabilidad (centro) es siempre el valor más largo → recibe más ancho para que
     ninguno de los 7 productos parta el valor en dos líneas. */
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 0;
  margin: 0 0 28px; border-top: 1px solid var(--bitua-mist); border-bottom: 1px solid var(--bitua-mist);
}
/* Aire simétrico a ambos lados del divisor: antes la celda sólo tenía padding a la derecha,
   así que la línea quedaba pegada al texto de la columna siguiente.
   Primera y última celda van al ras para que el bloque alinee con el párrafo de arriba. */
.prow__specs .spec { padding: 18px; border-right: 1px solid var(--bitua-mist); }
.prow__specs .spec:first-child { padding-left: 0; }
.prow__specs .spec:last-child { border-right: none; padding-right: 0; }
.prow__specs .spec__k {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bitua-slate); margin-bottom: 6px;
}
.prow__specs .spec__v { font-size: 15px; font-weight: 700; color: var(--bitua-ink); line-height: 1.3; }

.prow__points { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0 0 30px; }
.prow__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--bitua-ink); }
.prow__points .check {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,208,160,.12); color: var(--bitua-teal-dark);
}
.prow__points .check svg { width: 14px; height: 14px; }
.prow__cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 13px 24px; border-radius: 11px; background: var(--bitua-teal);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.prow__cta:hover { background: var(--bitua-teal-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,208,160,.28); }
.prow__cta svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .prodrows { gap: 76px; }
  .prow, .prow--rev { grid-template-columns: 1fr; grid-template-rows: auto auto auto;
    grid-template-areas: "media" "body" "actions"; row-gap: 26px; }
  .prow__index { font-size: 92px; top: -34px; }
  .prow__title { font-size: 27px; }
  .prodnav { top: 64px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 44px; }
  .prodnav::-webkit-scrollbar { display: none; }
  .prodnav__item { padding: 9px 13px; flex: none; }
}
@media (max-width: 560px) {
  .prow__specs { grid-template-columns: 1fr; }
  .prow__specs .spec { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 13px 0; border-right: none; border-bottom: 1px solid var(--bitua-mist); }
  .prow__specs .spec:last-child { border-bottom: none; }
  .prow__specs .spec__k { margin-bottom: 0; }
  .prow__specs .spec__v { text-align: right; }
}

/* ============================================================
   PRODUCTOS — group headers, actions, comparison table, platform band
   ============================================================ */
/* group headers within the showcase */
.prodgroup { display: flex; flex-direction: column; }
.prow + .prow { margin-top: 72px; }
.prodgroup__head { max-width: 720px; margin-bottom: 36px; }
.prodgroup__title {
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bitua-teal-dark); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.prodgroup__title::before { content: ''; width: 28px; height: 2px; background: var(--bitua-teal); border-radius: 2px; }
.prodgroup__sub { font-size: 16px; color: var(--bitua-slate); line-height: 1.55; }

/* Etiqueta de bloque ("Beneficios", "Usos") — mismo tono que las claves de la ficha. */
.prow__blocklabel {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bitua-slate); margin: 0 0 12px;
}
/* Usos clínicos: van dentro de la columna de texto, justo debajo de los beneficios,
   con la misma jerarquía de etiqueta que "Beneficios". */
.prow__uses { margin: 0; }
/* Compactos a propósito: los usos deben caber en una sola línea dentro de la columna de texto. */
/* Una sola línea siempre: si el ancho no alcanza (ventana angosta o móvil) la fila se desplaza
   en horizontal con la barra oculta, igual que el menú de productos, en vez de partirse. */
.prow__useslist { list-style: none; display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.prow__useslist::-webkit-scrollbar { display: none; }
.prow__useslist li { flex: 0 0 auto; }
.prow__useslist li {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--bitua-ink);
  padding: 7px 9px; border-radius: 999px;
  border: 1px solid var(--bitua-mist); background: var(--bitua-white);
}
.prow__useic { display: inline-flex; color: var(--accent-deep); }
.prow__useic i { width: 14px; height: 14px; }

/* ---- Integraciones (plataforma): 4 tarjetas + fila de sistemas en operación ---- */
.intgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.intgrid .feature { padding: 26px 24px; }
.intgrid .feature h3 { font-size: 17px; }
.intchips {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--bitua-mist);
}
.intchips ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.intchips li {
  font-size: 14px; font-weight: 700; color: var(--bitua-teal-dark);
  padding: 7px 14px; border-radius: 999px; background: var(--bitua-white);
  border: 1px solid color-mix(in srgb, var(--bitua-teal) 26%, transparent);
}
@media (max-width: 980px) { .intgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .intgrid { grid-template-columns: 1fr; } }

/* Nota de cierre: la integración aplica a todos los sistemas. */
.prodintegra {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 64px auto 0; max-width: 760px; text-align: center;
  font-size: 15px; font-weight: 600; color: var(--bitua-teal-dark);
  background: color-mix(in srgb, var(--bitua-teal) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--bitua-teal) 22%, transparent);
  border-radius: 14px; padding: 16px 22px;
}
.prodintegra i { width: 18px; height: 18px; flex: none; }

/* row actions (demo + pdf) */
.prow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.prow__pdf {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: var(--bitua-ink); text-decoration: none;
  padding: 12px 20px; border-radius: 11px; border: 1px solid var(--bitua-mist);
  transition: border-color .2s, background .2s, transform .2s;
}
.prow__pdf:hover { border-color: var(--bitua-slate); background: var(--bitua-bg); transform: translateY(-2px); }
.prow__pdf svg { width: 17px; height: 17px; color: var(--bitua-teal-dark); }

/* comparison table */
.compare__scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--bitua-mist); background: #fff; box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.ctable { width: 100%; border-collapse: collapse; min-width: 900px; }
.ctable__area { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--bitua-teal-dark); background: rgba(0,208,160,.08); border: 1px solid rgba(0,208,160,.18); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.ctable thead th {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bitua-slate); text-align: left; padding: 18px 22px; background: var(--bitua-bg);
  border-bottom: 1px solid var(--bitua-mist); white-space: nowrap;
}
.ctable tbody td { font-size: 15px; color: var(--bitua-ink); padding: 18px 22px; border-bottom: 1px solid var(--bitua-mist); vertical-align: middle; }
.ctable tbody tr:last-child td { border-bottom: none; }
.ctable tbody tr { transition: background .15s; }
.ctable tbody tr:hover { background: var(--bitua-bg); }
.ctable__name { width: 230px; }
.ctable__name > span { display: inline-flex; flex-direction: column; gap: 2px; }
.ctable__name a { font-weight: 700; color: var(--bitua-ink); text-decoration: none; }
.ctable__name a:hover { color: var(--bitua-teal-dark); }
.ctable__name em { font-style: normal; font-size: 12px; color: var(--bitua-slate); letter-spacing: .03em; }
.ctable__ic {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: 12px;
  width: 38px; height: 38px; border-radius: 10px; background: rgba(0,208,160,.10); color: var(--bitua-teal-dark);
}
.ctable__ic svg { width: 19px; height: 19px; }
.ctable td.ctable__name { display: flex; align-items: center; }
.ctable__c, th.ctable__c { text-align: center; }
.ctable__yes { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bitua-teal); color: #fff; }
.ctable__yes svg { width: 15px; height: 15px; }
.ctable__no { color: var(--bitua-slate); font-weight: 700; }

/* sticky product column (keeps context on horizontal scroll) */
.ctable__name { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid var(--bitua-mist); }
.ctable thead th.ctable__name { z-index: 3; background: var(--bitua-bg); }
.ctable tbody tr:hover .ctable__name { background: var(--bitua-bg); }

/* "most chosen" highlighted row */
.ctable tbody tr.is-featured td { background: rgba(0,208,160,.06); }
.ctable tbody tr.is-featured .ctable__name { background: #e9faf4; box-shadow: inset 3px 0 0 var(--bitua-teal); }
.ctable tbody tr.is-featured:hover td { background: rgba(0,208,160,.10); }
.ctable tbody tr.is-featured:hover .ctable__name { background: #e0f6ee; }
.ctable__pop {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--bitua-teal-dark);
}
.ctable__pop svg { width: 13px; height: 13px; }

/* platform convergence band */
.platband { text-align: center; }
.platband__head { max-width: 700px; margin: 0 auto 44px; }
.platband__head .eyebrow { justify-content: center; }
.platband__nodes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 880px; margin: 0 auto; }
.pnode {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 12px;
  background: #fff; border: 1px solid var(--bitua-mist); box-shadow: var(--shadow-sm);
  font-size: 14px; font-weight: 600; color: var(--bitua-ink);
}
.pnode svg { width: 18px; height: 18px; color: var(--bitua-teal-dark); }
.platband__funnel { display: flex; justify-content: center; padding: 8px 0 4px; }
.platband__arrow { color: var(--bitua-teal); opacity: .8; animation: pfloat 2.4s ease-in-out infinite; }
.platband__arrow svg { width: 30px; height: 30px; }
@keyframes pfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .platband__arrow { animation: none; } }
.platband__hub {
  max-width: 620px; margin: 4px auto 0; padding: 30px 34px; border-radius: 20px;
  background: linear-gradient(135deg, #11171c, #1b2730);
  border: 1px solid rgba(0,208,160,.28);
  box-shadow: 0 26px 60px rgba(0,0,0,.22), 0 0 60px rgba(0,208,160,.12);
}
.platband__hubname {
  display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -.01em; margin-bottom: 22px;
}
.platband__hubname svg { width: 24px; height: 24px; color: var(--bitua-teal); }
.platband__feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.pfeat {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.9); padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.pfeat svg { width: 14px; height: 14px; color: var(--bitua-teal); }

@media (max-width: 900px) {
  .prow + .prow { margin-top: 64px; }
  .prodgroup__head { margin-bottom: 36px; }
  .platband__hubname { font-size: 19px; }
}

/* ============================================================
   PRODUCTOS — hospital map (where each solution lives + provider bridge)
   ============================================================ */
.hmap__plan { display: grid; grid-template-columns: 1.55fr auto .85fr; align-items: center; gap: 0; }

/* hospital building (blueprint feel) */
.hmap__building {
  position: relative; border: 1.5px dashed var(--bitua-teal-dark); border-radius: 20px;
  padding: 30px 26px 26px; background:
    linear-gradient(rgba(0,208,160,.03), rgba(0,208,160,.03)),
    repeating-linear-gradient(0deg, rgba(56,56,64,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(56,56,64,.05) 0 1px, transparent 1px 28px), #fff;
}
.hmap__tag {
  position: absolute; top: -14px; left: 24px; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; background: var(--bitua-ink); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.hmap__tag svg { width: 15px; height: 15px; }
.hmap__tag--alt { position: static; background: var(--bitua-teal-dark); } /* supplier tag: brand secondary, not alert-orange */
.hmap__zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hmap__zone {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  padding: 16px 16px 18px; border-radius: 14px; background: #fff;
  border: 1px solid var(--bitua-mist); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hmap__zone:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(0,208,160,.4); }
.hmap__zicon {
  width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,208,160,.10); color: var(--bitua-teal-dark); margin-bottom: 8px;
}
.hmap__zicon svg { width: 20px; height: 20px; }
.hmap__area { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bitua-slate); }
.hmap__prod { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 800; color: var(--bitua-ink); }
.hmap__prod svg { width: 14px; height: 14px; color: var(--bitua-teal-dark); }
.hmap__manages { font-size: 13.5px; line-height: 1.4; color: var(--bitua-slate); }

/* bridge: Smart Trace connects hospital <-> supplier */
.hmap__bridge { display: flex; flex-direction: column; align-items: center; padding: 0 6px; }
.hmap__dash { flex: 1; width: 0; min-height: 26px; border-left: 2px dashed var(--bitua-mist); }
.hmap__trace {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  width: 190px; padding: 18px 16px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(135deg, #11171c, #1b2730); color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 0 36px rgba(0,208,160,.14);
}
.hmap__ticon {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,208,160,.18); color: var(--bitua-teal);
}
.hmap__ticon svg { width: 22px; height: 22px; }
.hmap__tname { font-size: 16px; font-weight: 800; }
.hmap__tdesc { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.82); }

/* supplier node */
.hmap__supplier {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 24px 22px; border-radius: 18px; background: var(--bitua-bg);
  border: 1px solid var(--bitua-mist);
}
.hmap__sdesc { font-size: 14px; line-height: 1.5; color: var(--bitua-slate); }

@media (max-width: 900px) {
  .hmap__plan { grid-template-columns: 1fr; gap: 0; }
  .hmap__zones { grid-template-columns: repeat(2, 1fr); }
  .hmap__bridge { flex-direction: column; }
  .hmap__dash { min-height: 22px; }
  .hmap__trace { width: 100%; }
  .hmap__supplier { align-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .hmap__zones { grid-template-columns: 1fr; }
}

/* ============================================================
   NAV — Productos mega-menu (desktop) + collapsible (mobile)
   ============================================================ */
.nav__drop { position: relative; display: flex; align-items: center; }
.nav__droptrigger { display: inline-flex; align-items: center; gap: 5px; }
.nav__droptrigger svg { width: 15px; height: 15px; transition: transform .2s; }
.nav__drop:hover .nav__droptrigger svg, .nav__drop:focus-within .nav__droptrigger svg { transform: rotate(180deg); }

.nav__mega {
  position: absolute; top: calc(100% + 16px); left: 0; transform: translateY(8px);
  width: 680px; max-width: 92vw; padding: 10px; border-radius: 16px;
  background: #fff; border: 1px solid var(--bitua-mist);
  box-shadow: 0 24px 48px -14px rgba(56,56,64,.28), 0 6px 16px rgba(56,56,64,.06);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 60;
}
.nav__drop:hover .nav__mega, .nav__drop:focus-within .nav__mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* little pointer + invisible hover bridge so the panel doesn't close mid-move */
.nav__mega::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.nav__megagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav__megaitem { display: flex; align-items: center; gap: 12px; padding: 10px 11px; border-radius: 11px; text-decoration: none; transition: background .15s; }
.nav__megaitem:hover { background: var(--bitua-bg); color: inherit; }
.nav__megaitem::after { content: none !important; }
.nav__megaic { flex: none; width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,208,160,.10); color: var(--bitua-teal-dark); }
.nav__megaic svg { width: 18px; height: 18px; }
.nav__megatx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav__megatx b { font-size: 14px; font-weight: 700; color: var(--bitua-ink); }
.nav__megatx em { font-style: normal; font-size: 11.5px; color: var(--bitua-slate); letter-spacing: .02em; }
.nav__megaall { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; padding: 11px; border-radius: 10px; background: var(--bitua-bg); color: var(--bitua-teal-dark); text-decoration: none; font-weight: 700; font-size: 13.5px; transition: background .15s; }
.nav__megaall:hover { background: rgba(0,208,160,.12); color: var(--bitua-teal-dark); }
.nav__megaall::after { content: none !important; }
.nav__megaall svg { width: 15px; height: 15px; }

/* mobile collapsible products */
.nav__mdrop summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.nav__mdrop summary::-webkit-details-marker { display: none; }
.nav__mdrop summary svg { width: 18px; height: 18px; transition: transform .2s; color: var(--bitua-slate); }
.nav__mdrop[open] summary svg { transform: rotate(180deg); }
.nav__msub { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 4px 6px; margin-top: 6px; border-left: 2px solid var(--bitua-mist); }
.nav__msub a { display: flex; align-items: center; gap: 11px; font-size: 15px; padding: 7px 0 7px 12px; }
.nav__msub svg { width: 17px; height: 17px; color: var(--bitua-teal-dark); flex: none; }

/* ============================================================
   LEGAL PAGES (privacidad.html / terminos.html) — static
   ============================================================ */
.legalbar {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bitua-mist);
}
.legalbar__inner {
  max-width: 820px; margin: 0 auto; padding: 0 24px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.legalbar__logo img { height: 24px; display: block; }
.legalbar__back { font-size: 14px; font-weight: 600; color: var(--bitua-slate); display: inline-flex; align-items: center; gap: 6px; }
.legalbar__back:hover { color: var(--bitua-teal-dark); }
.legal { max-width: 820px; margin: 0 auto; padding: 56px 24px 72px; }
.legal__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bitua-teal-dark); }
.legal h1 { font-size: clamp(30px, 4.4vw, 42px); font-weight: 700; letter-spacing: -.022em; margin: 10px 0 8px; }
.legal__meta { color: var(--bitua-slate); font-size: 14px; margin-bottom: 36px; }
.legal h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 34px 0 10px; color: var(--bitua-ink); }
.legal p, .legal li { color: #475569; font-size: 16px; line-height: 1.7; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--bitua-teal-dark); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal__note { margin-top: 40px; padding: 18px 20px; background: var(--bitua-bg); border: 1px solid var(--bitua-mist); border-radius: 14px; font-size: 14px; color: var(--bitua-slate); }
.legal__foot { border-top: 1px solid var(--bitua-mist); margin-top: 44px; padding-top: 22px; font-size: 14px; color: var(--bitua-slate); display: flex; gap: 16px; flex-wrap: wrap; }
/* Dark site-style footer for the static legal pages (brand consistency) */
.legalsite-foot { background: var(--bitua-ink); }
.legalsite-foot__inner {
  max-width: 820px; margin: 0 auto; padding: 26px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.legalsite-foot__inner a { color: rgba(255,255,255,.82); font-weight: 600; }
.legalsite-foot__inner a:hover { color: var(--bitua-teal); }
.legalsite-foot__sep { color: rgba(255,255,255,.25); margin: 0 6px; }