/* ==========================================================================
   bento — home
   Cada bloque cita su nodo de Figma. Valores en rem = px del frame 1920 / 16.
   Tablet (≤991) y mobile (≤767) son criterio propio: el Figma solo tiene 1920.
   ========================================================================== */

/* Saltos de línea que existen en el Figma 1920; en mobile el texto corre libre */
@media (max-width: 767px) { .bn-br-d { display: none; } }

/* ============================ NAV · 1653:5052 ============================ */
.bn-nav { position: relative; z-index: 20; }
.bn-nav_inner {
  max-width: var(--bn-max);
  margin-inline: auto;
  height: 6.5625rem;                 /* 105 */
  padding: 0 5rem;                   /* 24/80 → alto fijo, centrado vertical */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.bn-nav_logo { justify-self: start; display: block; width: 3.5625rem; }   /* 57 */
.bn-nav_logo img { width: 100%; height: auto; }

.bn-nav_menu {                       /* 1653:5057 Menu capsule */
  display: flex;
  gap: 0.25rem;
  padding: 0.375rem;
  border-radius: 999px;
  background: var(--bn-capsule);
  border: 1px solid var(--bn-capsule-line);
}
.bn-nav_link {                       /* Nav / Link 1376:63 · instancias 19/20.7 */
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  font-size: var(--bn-fs-19);
  line-height: 1.09;
  color: var(--bn-white);
  transition: background-color 0.2s ease-out;
}
.bn-nav_link:hover,
.bn-nav_link.is-active { background: rgba(255, 255, 255, 0.1); }

.bn-nav_right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.25rem;                      /* 20 */
}
.bn-nav_lang { font-size: var(--bn-fs-16); line-height: 1.09; color: var(--bn-gray); display: flex; align-items: center; gap: 0.3em; }
/* Selector de idioma (js/i18n.js). Activo en blanco = criterio propio; el Figma solo dibuja "ES / EN" en gris */
.bn-nav_lang-opt { color: inherit; text-decoration: none; transition: color 0.2s ease-out; }
.bn-nav_lang-opt:hover, .bn-nav_lang-opt.is-active { color: var(--bn-white); }
.bn-nav_lang--menu { display: none; }
.bn-nav_toggle { display: none; }

/* ============================ HERO · 1653:5065 ============================ */
.bn-hero { position: relative; padding-top: 6.875rem; overflow-x: clip; }   /* 110 */
.bn-hero_glow { left: 5.8125rem; top: -1.3rem; width: 106.25rem; height: 93.75rem; }
.bn-hero_intro {
  position: relative;
  max-width: var(--bn-max);
  margin-inline: auto;
  padding: 0 5rem;                   /* 80 */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 5rem;
}
.bn-hero_title { max-width: 75.0625rem; }   /* 1201 */
.bn-hero_side {
  width: 30.125rem;                  /* 482 */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;                      /* 28 */
}
.bn-hero_text { font-size: var(--bn-fs-18); line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.bn-hero_media {
  position: relative;
  margin-top: 5.5rem;                /* spacer 88 */
  aspect-ratio: 1920 / 800;          /* rect del video 1653:5075 */
  overflow: hidden;
}
.bn-hero_media > img { width: 100%; height: 100%; object-fit: cover; }

/* ===================== BANNER +30 · 1951:30897 ===================== */
.bn-proof {
  position: relative;
  padding: 8.75rem 0 4.5rem;         /* 140 / 72 */
  display: flex;
  flex-direction: column;
  gap: 6rem;                         /* 96 */
}
.bn-proof_row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.bn-proof_number {                   /* 1951:30900 — 200/156, ls -10 */
  font-size: var(--bn-fs-display);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: var(--bn-white);
}
.bn-proof_col {
  width: 41.5625rem;                 /* 665 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;                       /* 40 */
}

/* Logos · carrusel 1794:14023 — tiles 237×167, gap 20, 72px/s */
.bn-logos { overflow: hidden; }
.bn-logos_track {
  display: flex;
  width: max-content;
  animation: bn-marquee 100s linear infinite;   /* 28 tiles × 257px / 72px·s⁻¹ ≈ 100s */
}
.bn-logos_set { display: flex; gap: 1.25rem; padding-right: 1.25rem; }
.bn-logos_set img { width: 14.8125rem; height: auto; }
@keyframes bn-marquee { to { transform: translateX(-50%); } }

/* ===================== PROBLEMA · 1698:2192 ===================== */
.bn-problem {
  position: relative;
  z-index: 0;
  background: var(--bn-white);
  border: 1px solid var(--bn-line);
  padding: 10rem var(--bn-pad-x-wide);           /* 160 / 240 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;                                     /* 80 */
  color: var(--bn-ink);
}
.bn-problem > * { width: 100%; max-width: 90rem; }  /* 1440 */
.bn-problem_title { text-align: center; max-width: 65rem; }  /* 1040 */
.bn-problem_title-soft { color: rgba(17, 17, 17, 0.5); }
.bn-problem_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;                                     /* 16 */
}
/* Card — 1713:9 Default / 1713:17 Hover (SMART_ANIMATE 0.5s ease-out) */
.bn-problem_card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 28.25rem;                              /* 452 */
  padding: 2.5rem 2rem;                          /* 40 / 32 */
  background: var(--bn-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  outline: none;
  transition: background-color 0.5s ease-out;
}
.bn-problem_card::before,
.bn-problem_card::after {                        /* 1713:23 / 1713:24 grano */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/brand/grain.png") repeat;
  background-size: 38.25rem auto;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}
.bn-problem_card::before { mix-blend-mode: overlay; }
.bn-problem_body { display: flex; flex-direction: column; align-items: center; }
.bn-problem_card-title {
  font-size: var(--bn-fs-lg);                    /* 28/30.5 */
  line-height: 1.09;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--bn-ink);
  transition: color 0.5s ease-out;
}
.bn-problem_reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-out;
}
.bn-problem_card-text {
  overflow: hidden;
  min-height: 0;
  max-width: 30.3125rem;                         /* 485 */
  font-size: var(--bn-fs-20);                    /* 20/30 */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0;
  transition: opacity 0.5s ease-out, padding 0.5s ease-out;
}
.bn-problem_card:hover,
.bn-problem_card:focus-visible { background: var(--bn-dark-hover); }
.bn-problem_card:hover::before,
.bn-problem_card:focus-visible::before { opacity: 0.35; }
.bn-problem_card:hover::after,
.bn-problem_card:focus-visible::after { opacity: 0.12; }
.bn-problem_card:hover .bn-problem_card-title,
.bn-problem_card:focus-visible .bn-problem_card-title { color: var(--bn-white); }
.bn-problem_card:hover .bn-problem_reveal,
.bn-problem_card:focus-visible .bn-problem_reveal { grid-template-rows: 1fr; }
.bn-problem_card:hover .bn-problem_card-text,
.bn-problem_card:focus-visible .bn-problem_card-text { opacity: 1; padding-top: 0.75rem; }

/* ===================== SERVICIOS · 1653:5092 ===================== */
.bn-services {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--bn-capsule-line);
  border-bottom: 1px solid var(--bn-capsule-line);
  overflow-x: clip;
}
/* glow 1653:5093 (155,-37 · 1611×1672 · blur 439) — desborda hacia Problema como en el Figma */
.bn-services_glow { left: -17.8rem; top: -29.8rem; width: 155.7rem; height: 159.5rem; }
.bn-services_inner {
  position: relative;
  padding-top: 11.75rem;             /* 160 + spacer 28 */
  padding-bottom: 13rem;             /* spacer 48 + 160 */
}
.bn-services_inner > .bn-h2 { margin-bottom: 5rem; }   /* spacer 80 */

/* 1653:5098 Core · Website — 1680×466, fondo IMG + #19191c 70% */
.bn-services_core {
  display: grid;
  grid-template-columns: 2fr 1fr;    /* 1120 / 560 */
  min-height: 29.125rem;             /* 466 */
  background:
    linear-gradient(rgba(25, 25, 28, 0.7), rgba(25, 25, 28, 0.7)),
    url("../assets/images/brand/servicios-bg.webp") center / cover no-repeat;
  overflow: hidden;
}
.bn-services_what {                  /* 1653:5099 + Fondo 1653:5100 (aurora exportada) */
  position: relative;
  padding: 3rem 4rem 3rem 3rem;      /* 48/64/48/48 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;                       /* 24 */
  background: var(--bn-navy) url("../assets/images/brand/servicios-aurora.webp") center / cover no-repeat;
}
.bn-services_kicker { font-size: var(--bn-fs-24); line-height: 1.25; font-style: italic; color: rgba(255, 255, 255, 0.95); }
.bn-services_lead { font-size: var(--bn-fs-xl); line-height: 1.25; max-width: 35.5rem; color: rgba(255, 255, 255, 0.95); }
.bn-services_price { display: flex; flex-direction: column; gap: 0.375rem; }
.bn-services_label { font-size: var(--bn-fs-13); line-height: 1.09; color: rgba(255, 255, 255, 0.55); }
.bn-services_value { font-size: var(--bn-fs-lg); line-height: 1.09; }

.bn-services_includes {              /* 1653:5114 — #0b0b0c 55% + blur 30 */
  padding: 3rem 2.5rem;              /* 48/40 */
  background: rgba(11, 11, 12, 0.55);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.bn-services_list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;                   /* fila 56 */
  font-size: var(--bn-fs-22);
  line-height: 1.09;
  color: rgba(255, 255, 255, 0.95);
}
.bn-services_check { color: var(--bn-lime); font-size: var(--bn-fs-16); }
.bn-services_stack { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.25rem 0; }
.bn-services_icons { display: flex; gap: 0.4rem; }
.bn-services_icons img { width: 1.625rem; height: 1.625rem; }

.bn-services_extra {                 /* 1653:5141 Amplificadores */
  margin-top: 2.5rem;                /* gap 40 */
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.bn-services_extra-title { font-size: var(--bn-fs-20); line-height: 1.09; font-weight: 400; }
.bn-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bn-chip {
  padding: 0.7375rem 1.327rem;       /* 11.8 / 21.2 */
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: max(1.1059rem, 14px);   /* 17.7 */
  line-height: 1.09;
  color: rgba(255, 255, 255, 0.9);
}

/* ===================== MÉTODO · 1836:14300 / 1836:14279 ===================== */
.bn-method { position: relative; z-index: 1; background: var(--bn-white); color: var(--bn-ink-2); }
.bn-method_inner {
  padding-top: 8.75rem;              /* 140 */
  padding-bottom: 8.75rem;
  display: grid;
  grid-template-columns: 37.5rem 1fr;          /* 600 | 1000 */
  grid-template-rows: auto 1fr;
  grid-template-areas: "title ill" "steps ill";
  column-gap: 5rem;                            /* 80 */
}
.bn-method_title { grid-area: title; }
.bn-method_steps { grid-area: steps; align-self: end; margin-top: 3.5rem; }
.bn-method_ill { grid-area: ill; }

.bn-method_item { border-top: 1px solid var(--bn-line); }
.bn-method_item:last-child { border-bottom: 1px solid var(--bn-line); }
.bn-method_head {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1.125rem 0;                         /* 18 */
  font-size: var(--bn-fs-step);                /* 26/28.3 */
  line-height: 1.09;
  letter-spacing: -0.02em;
  color: var(--bn-gray-2);
  transition: color 0.4s ease-out;
}
.bn-method_head:hover { color: var(--bn-ink-2); }
.bn-method_item.is-active .bn-method_head { color: var(--bn-ink-2); cursor: default; }
.bn-method_detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease-out;
}
.bn-method_detail > p {
  overflow: hidden;
  min-height: 0;
  font-size: var(--bn-fs-17);                  /* 17/25.5 */
  line-height: 1.5;
  color: var(--bn-text-2);
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.bn-method_item.is-active .bn-method_detail { grid-template-rows: 1fr; }
.bn-method_item.is-active .bn-method_detail > p { opacity: 1; padding-bottom: 1.125rem; margin-top: -0.375rem; }

.bn-method_ill {                     /* 1000×760 r16 #f1f1f4 */
  position: relative;
  display: grid;
  aspect-ratio: 1000 / 760;
  border-radius: 1rem;
  overflow: hidden;
  background: #f1f1f4;
}
.bn-method_ill img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.bn-method_ill img.is-active { opacity: 1; }

/* ===================== CASOS · 1721:97 ===================== */
.bn-cases { position: relative; z-index: 1; background: var(--bn-black); overflow: hidden; }
.bn-cases_glow { left: -20.25rem; top: 43.9rem; width: 155.7rem; height: 159.5rem; }
.bn-cases_inner {
  position: relative;
  padding-top: 8.75rem;              /* 140 */
  padding-bottom: 8.75rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;                         /* 48 */
}
.bn-cases_title { line-height: 1.0875; margin-bottom: 2rem; }   /* 64/69.6 + pad 32 */

.bn-case { position: relative; background: var(--bn-card); }       /* 1721:5 · 1680×900 */
.bn-case_media { aspect-ratio: 1680 / 620; overflow: hidden; }
.bn-case_media img { width: 100%; height: 100%; object-fit: cover; }
.bn-case_body {
  min-height: 17.5rem;               /* 280 */
  padding: 3rem;                     /* 48 */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
.bn-case_head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3125rem; }  /* 21 */
.bn-case_client {
  padding: 0.375rem 0.75rem;         /* 6/12 */
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--bn-fs-14);
  line-height: 1.09;
  color: rgba(255, 255, 255, 0.8);
}
.bn-case_title { line-height: 1.0875; }        /* 48/52.2 */
.bn-case_text {
  width: 40rem;                      /* 640 */
  flex: 0 0 auto;
  margin-top: 3.5rem;                /* alinea con el título (724 − 668) */
  font-size: var(--bn-fs-20);
  line-height: 1.09;
  color: rgba(255, 255, 255, 0.65);
}

/* Testimonios · 1951:31995 — card #141416 + glow + "Aurora suave" 1951:31997 + grano 30% */
.bn-quotes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 44.875rem;             /* 718 */
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 56.875rem 24.3125rem, rgba(210, 255, 108, 0.28) 0, rgba(210, 255, 108, 0.12) 13rem, rgba(210, 255, 108, 0) 22.5rem),
    radial-gradient(circle at 72.5rem 16.8125rem, rgba(123, 92, 255, 0.4) 0, rgba(123, 92, 255, 0.18) 16rem, rgba(123, 92, 255, 0) 27rem),
    radial-gradient(circle at 52.5rem 20.5625rem, rgba(18, 45, 230, 0.45) 0, rgba(18, 45, 230, 0.2) 17.5rem, rgba(18, 45, 230, 0) 27.5rem),
    radial-gradient(circle at 60rem 31.1875rem, rgba(var(--bn-glow), 0.2) 0, rgba(var(--bn-glow), 0.08) 50rem, rgba(var(--bn-glow), 0) 77.75rem),
    var(--bn-card);
}
.bn-quotes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/brand/grain.png") repeat;
  background-size: 38.25rem auto;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}
.bn-quotes_inner {
  width: 100%;
  padding: 10rem 7.5rem;             /* 160 / 120 */
  display: flex;
  flex-direction: column;
  gap: 4rem;                         /* 64 */
}
.bn-quotes_stage { display: grid; }
.bn-quotes_quote {
  grid-area: 1 / 1;
  font-size: var(--bn-fs-h3);        /* 56/64.4, ls -1.4 */
  line-height: 1.15;
  letter-spacing: -0.025em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.bn-quotes_quote.is-active { opacity: 1; visibility: visible; }
.bn-quotes_accent { color: #738cff; }
.bn-quotes_tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bn-quotes_tab {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0 0.25rem;        /* 20 / 4 */
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out, border-color 0.5s ease-in-out;
}
.bn-quotes_tab:hover { opacity: 0.8; }
.bn-quotes_tab.is-active { opacity: 1; border-top-color: var(--bn-white); }
.bn-quotes_avatar {
  flex: 0 0 auto;
  width: 3.25rem;                    /* 52 */
  height: 3.25rem;
  border-radius: 50%;
  background: var(--bn-avatar);
  display: grid;
  place-items: center;
  font-size: var(--bn-fs-16);
  color: var(--bn-gray-3);
}
.bn-quotes_who { display: flex; flex-direction: column; gap: 0.375rem; }
.bn-quotes_name { font-size: var(--bn-fs-17); line-height: 1.09; font-weight: 500; }
.bn-quotes_role { font-size: var(--bn-fs-15); line-height: 1.09; color: var(--bn-gray); }

/* ===================== EQUIPO · 1967:14159 / 1967:14109 ===================== */
.bn-team {
  position: relative;
  z-index: 1;
  background: var(--bn-white);
  color: var(--bn-ink-2);
  padding: 7.5rem var(--bn-pad-x-wide);           /* 120 / 240 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;                                    /* 56 */
}
.bn-team > * { width: 100%; max-width: 90rem; }
.bn-team_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* Hover 0.25s ease-out: la foto se achica (480 → resto) y aparece la bio.
   Criterio propio: la card mantiene su alto (580) y la foto cede el espacio
   que necesite cada bio, para que el LinkedIn nunca quede cortado. */
.bn-person {
  height: 36.25rem;                                /* 580 */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                                     /* 24 */
  padding-bottom: 2rem;                            /* 32 */
  background: var(--bn-light-2);
  overflow: hidden;
  outline: none;
}
.bn-person_photo {
  flex: 1 0 30rem;                                 /* 480 */
  min-height: 0;
  overflow: hidden;
  background: var(--bn-line);
  /* QA Notion 2026-11-11 "hover más fluido, amigable": el prototipo pide 0.25s ease-out;
     se alarga y suaviza (criterio propio sobre pedido del usuario) */
  transition: flex 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.bn-person_photo img {
  width: 100%; height: 30rem; object-fit: cover; object-position: top center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bn-person:hover .bn-person_photo img,
.bn-person:focus-within .bn-person_photo img { transform: scale(1.04); }
.bn-person_info, .bn-person_bio { padding: 0 1.75rem; flex: 0 0 auto; }   /* 28 */
.bn-person_info { display: flex; flex-direction: column; gap: 0.25rem; }
.bn-person_name { font-size: var(--bn-fs-22); line-height: 1.09; font-weight: 400; }
.bn-person_role { font-size: var(--bn-fs-15); line-height: 1.09; color: var(--bn-gray); }
.bn-person_bio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(0.625rem);
  /* al salir se va rápido y sin demora; al entrar espera que la foto empiece a abrir lugar */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.bn-person:hover .bn-person_bio,
.bn-person:focus-within .bn-person_bio {
  transform: none;
  transition: opacity 0.6s ease-out 0.18s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.bn-person_bio p { font-size: var(--bn-fs-16); line-height: 1.5; color: var(--bn-text-3); }
.bn-person_link { font-size: var(--bn-fs-15); line-height: 1.09; color: var(--bn-ink-2); }
.bn-person_link:hover { text-decoration: underline; }
.bn-person:hover .bn-person_photo,
.bn-person:focus-within .bn-person_photo { flex: 1 0 var(--bn-photo-open, 0%); }   /* main.js mide la altura final: se anima hasta ahí, sin rebote ni frenazo */
.bn-person:hover .bn-person_bio,
.bn-person:focus-within .bn-person_bio { opacity: 1; }

/* ===================== CTA · 1977:14114 ===================== */
.bn-cta {
  --bn-grain-size: 43.7rem;          /* tile ×1.14 */
  z-index: 1;
  background: var(--bn-black-cta);
  min-height: 37.25rem;              /* 596 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 5rem var(--bn-pad-x);
}
.bn-cta_content {
  width: 45.6875rem;                 /* 731 */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.857rem;                     /* 45.7 */
}
.bn-cta_title { text-align: center; line-height: 1.02; }   /* 64/65.3 */
.bn-cta_form {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5714rem;
  padding: 0.5714rem;                /* 9.14 */
  border-radius: 999px;
  background: var(--bn-white);
  border: 1.14px solid rgba(255, 255, 255, 0.3);
}
.bn-cta_input {
  flex: 1 1 auto;
  min-width: 0;
  height: 4rem;                      /* 64 */
  padding: 0 1.4286rem;              /* 22.86 */
  border: 0;
  background: transparent;
  outline: none;
  font-size: max(1.1429rem, 15px);   /* 18.29 */
  color: var(--bn-ink);
}
.bn-cta_input::placeholder { color: var(--bn-ink); opacity: 1; }
.bn-cta_submit {                     /* 1977:14137 — hover: criterio propio (= Nav CTA) */
  flex: 0 0 auto;
  height: 4rem;
  padding: 0 2rem;                   /* 32 */
  border-radius: 999px;
  background: var(--bn-lime-2);
  color: var(--bn-ink-2);
  font-size: max(1.2143rem, 15px);   /* 19.43 */
  font-weight: 500;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.bn-cta_submit:hover { background: var(--bn-blue); color: var(--bn-white); }
.bn-cta_note {
  margin-top: calc(1rem - 2.857rem); /* el Figma agrupa form + nota con gap 16 */
  font-size: var(--bn-fs-16);
  line-height: 1.09;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

/* ===================== FAQ · 1653:5685 / 1416:1483 ===================== */
:root { interpolate-size: allow-keywords; }
.bn-faq {
  position: relative;
  z-index: 1;
  background: var(--bn-white);
  border: 1px solid var(--bn-line);
  color: var(--bn-ink);
}
.bn-faq_inner {
  padding-top: 10rem;                /* 160 */
  padding-bottom: 10rem;
  display: flex;
  gap: 5rem;                         /* 80 */
}
.bn-faq_title {
  flex: 0 0 38.75rem;                /* 620 */
  font-size: var(--bn-fs-faq);       /* 72/75.6, ls -2.16 */
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  padding-right: 1.25rem;
}
.bn-faq_list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.5rem; }
.bn-faq_item { border-top: 1px solid rgba(55, 55, 55, 0.2); padding: 1.625rem 1.75rem; }   /* 26/28 */
.bn-faq_q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2rem;
  font-size: var(--bn-fs-20);
  line-height: 1.09;
  color: var(--bn-text);
  cursor: pointer;
  list-style: none;
}
.bn-faq_q::-webkit-details-marker { display: none; }
.bn-faq_toggle {                     /* 32 · abierto lima "–", cerrado "+" */
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  transition: background-color 0.35s ease-out;
}
.bn-faq_toggle::before,
.bn-faq_toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.625rem;
  height: 1px;
  background: var(--bn-text);
  transform: translate(-50%, -50%);
  transition: transform 0.35s ease-out;
}
.bn-faq_toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.bn-faq_item[open] .bn-faq_toggle { background: var(--bn-lime); }
.bn-faq_item[open] .bn-faq_toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.bn-faq_a p {
  max-width: 45rem;                  /* 720 */
  padding-top: 0.875rem;             /* gap 14 */
  font-size: var(--bn-fs-17);
  line-height: 1.5;
  color: var(--bn-gray);
}
.bn-faq_item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s ease-out, content-visibility 0.35s allow-discrete;
}
.bn-faq_item[open]::details-content { block-size: auto; }

/* ===================== FOOTER · 1973:14112 ===================== */
.bn-footer { background: var(--bn-black); }
.bn-footer > .bn-container {
  padding-top: 5.5rem;               /* 88 */
  padding-bottom: 2.25rem;           /* 36 */
  display: flex;
  flex-direction: column;
  gap: 3.5rem;                       /* 56 */
}
.bn-footer_tldr {
  max-width: 50.6875rem;             /* 811 */
  font-size: var(--bn-fs-24);        /* 24/32.4 */
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.88);
}
.bn-footer_tldr-tag { color: var(--bn-lime-2); }
.bn-footer_map { display: grid; grid-template-columns: repeat(4, 1fr); }
.bn-footer_col { display: flex; flex-direction: column; gap: 0.875rem; }   /* 14 */
.bn-footer_label { font-size: var(--bn-fs-13); line-height: 1.09; letter-spacing: 0.02em; color: var(--bn-gray); }
.bn-footer_links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.bn-footer_links a:not(.bn-btn) {
  font-size: var(--bn-fs-18);        /* 18/25.2 */
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s ease-out;
}
.bn-footer_links a:not(.bn-btn):hover { color: var(--bn-white); }
.bn-footer_cta { margin-top: 1rem; }
.bn-btn--sm { padding: 0.6375rem 1.0625rem; font-size: max(0.95625rem, 13px); }   /* 10.2/17 · 15.3 */
.bn-footer_bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.25rem;              /* gap 20 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.bn-footer_logo { width: 9.375rem; height: auto; }   /* 150 */
.bn-footer_copy { font-size: var(--bn-fs-13); line-height: 1.09; color: var(--bn-gray); }

/* ==========================================================================
   Sin hover (touch): lo que en desktop aparece al pasar el mouse queda visible
   ========================================================================== */
@media (hover: none) {
  .bn-problem_card { height: auto; min-height: 16rem; }
  .bn-problem_reveal { grid-template-rows: 1fr; }
  .bn-problem_card-text { opacity: 1; padding-top: 0.75rem; color: var(--bn-text); }

  .bn-person { height: auto; }
  .bn-person_photo { flex: none; aspect-ratio: 469 / 480; }
  .bn-person_photo img { height: 100%; }
  .bn-person_bio { opacity: 1; transform: none; }
  .bn-person:hover .bn-person_photo { flex: none; }
  .bn-person:hover .bn-person_photo img { transform: none; }
}

/* ==========================================================================
   TABLET ≤991 (criterio propio)
   ========================================================================== */
@media (max-width: 991px) {
  .bn-nav_inner { padding: 0 var(--bn-pad-x); height: 5rem; }
  .bn-nav_link { padding: 0.5rem 0.875rem; }
  .bn-nav_lang { display: none; }
  .bn-nav_menu .bn-nav_lang--menu { display: flex; padding: 0.5rem 0.875rem; }

  .bn-hero { padding-top: 3.5rem; }
  .bn-hero_intro { flex-direction: column; align-items: flex-start; gap: 2rem; padding: 0 var(--bn-pad-x); }
  .bn-hero_side { width: 100%; max-width: 36rem; }
  .bn-hero_media { margin-top: 3.5rem; aspect-ratio: 16 / 9; }

  .bn-proof { padding: 5rem 0 3rem; gap: 4rem; }
  .bn-proof_row { flex-direction: column; align-items: flex-start; gap: 2.5rem; }
  .bn-proof_col { width: 100%; max-width: 36rem; }
  .bn-logos_set img { width: 10rem; }
  .bn-logos_set { gap: 0.75rem; padding-right: 0.75rem; }

  .bn-problem { padding-top: 5rem; padding-bottom: 5rem; gap: 3rem; }
  .bn-problem_grid { grid-template-columns: 1fr; }
  .bn-problem_card { height: auto; min-height: 14rem; }

  .bn-services_inner { padding-top: 5rem; padding-bottom: 5rem; }
  .bn-services_inner > .bn-h2 { margin-bottom: 3rem; }
  .bn-services_core { grid-template-columns: 1fr; }
  .bn-services_what { min-height: 24rem; padding: 2rem; }
  .bn-services_includes { padding: 2rem; }
  .bn-services_list li { padding: 0.75rem 0; }

  .bn-method_inner {
    padding-top: 5rem;
    padding-bottom: 5rem;
    grid-template-columns: 1fr;
    grid-template-areas: "title" "ill" "steps";
    row-gap: 2.5rem;
  }
  .bn-method_steps { margin-top: 0; }

  .bn-cases_inner { padding-top: 5rem; padding-bottom: 5rem; gap: 2rem; }
  .bn-cases_title { margin-bottom: 1rem; }
  .bn-case_body { flex-direction: column; min-height: 0; padding: 2rem; gap: 1.25rem; }
  .bn-case_text { width: auto; max-width: 40rem; margin-top: 0; }

  .bn-quotes { min-height: 0; }
  .bn-quotes_inner { padding: 4rem 2rem; gap: 3rem; }

  .bn-team { padding-top: 5rem; padding-bottom: 5rem; gap: 2.5rem; }
  .bn-team_grid { gap: 0.75rem; }
  .bn-person_info, .bn-person_bio { padding: 0 1.25rem; }

  .bn-cta { min-height: 0; padding: 5rem var(--bn-pad-x); }
  .bn-cta_content { gap: 2rem; }
  .bn-cta_note { margin-top: -1rem; }

  .bn-faq_inner { flex-direction: column; gap: 2.5rem; padding-top: 5rem; padding-bottom: 5rem; }
  .bn-faq_title { flex: none; }
  .bn-faq_item { padding: 1.25rem 0.5rem; }

  .bn-footer > .bn-container { padding-top: 4rem; gap: 3rem; }
  .bn-footer_map { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; column-gap: 1.5rem; }
}

/* ==========================================================================
   MOBILE ≤767 (criterio propio, un solo mobile)
   ========================================================================== */
@media (max-width: 767px) {
  /* Nav: logo + Hablemos + botón; la cápsula se despliega debajo */
  .bn-nav_inner { grid-template-columns: 1fr auto; height: 4.5rem; }
  .bn-nav_logo { width: 2.75rem; }
  .bn-nav_right { gap: 0.5rem; }
  .bn-nav_right .bn-btn--cta { padding: 0.625rem 1rem; font-size: 0.9375rem; }
  .bn-nav_toggle {
    display: grid;
    place-content: center;
    gap: 0.3rem;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 999px;
    background: var(--bn-capsule);
    border: 1px solid var(--bn-capsule-line);
  }
  .bn-nav_toggle-bar { display: block; width: 1rem; height: 1.5px; background: var(--bn-white); transition: transform 0.2s ease-out; }
  .bn-nav_toggle[aria-expanded="true"] .bn-nav_toggle-bar:first-of-type { transform: translateY(calc((0.3rem + 1.5px) / 2)) rotate(45deg); }
  .bn-nav_toggle[aria-expanded="true"] .bn-nav_toggle-bar:last-of-type { transform: translateY(calc((0.3rem + 1.5px) / -2)) rotate(-45deg); }
  .bn-nav_menu {
    position: absolute;
    top: 4.5rem;
    left: var(--bn-pad-x);
    right: var(--bn-pad-x);
    flex-direction: column;
    border-radius: 1.5rem;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
  }
  .bn-nav.is-open .bn-nav_menu { opacity: 1; visibility: visible; transform: none; }
  .bn-nav_link { padding: 0.875rem 1.125rem; font-size: 1.0625rem; }
  .bn-nav_menu .bn-nav_lang--menu { padding: 0.875rem 1.125rem; font-size: 1.0625rem; }

  .bn-hero { padding-top: 2rem; }
  .bn-hero_media { margin-top: 2.5rem; aspect-ratio: 4 / 3; }

  .bn-proof { padding: 4rem 0 2.5rem; gap: 3rem; }
  .bn-logos_set img { width: 8rem; }

  .bn-problem { padding-top: 4rem; padding-bottom: 4rem; gap: 2rem; }
  .bn-problem_title { text-align: left; }
  .bn-problem_card { min-height: 12rem; padding: 2rem 1.25rem; }

  .bn-services_inner { padding-top: 4rem; padding-bottom: 4rem; }
  .bn-services_inner > .bn-h2 { margin-bottom: 2rem; }
  .bn-services_what { min-height: 20rem; padding: 1.5rem; gap: 1rem; }
  .bn-services_includes { padding: 1.5rem; }

  .bn-method_inner { padding-top: 4rem; padding-bottom: 4rem; row-gap: 2rem; }
  .bn-method_ill { border-radius: 0.75rem; }

  .bn-cases_inner { padding-top: 4rem; padding-bottom: 4rem; gap: 1.5rem; }
  .bn-cases_title { margin-bottom: 0.5rem; }
  .bn-case_body { padding: 1.5rem; }

  .bn-quotes_inner { padding: 3rem 1.25rem; gap: 2rem; }
  .bn-quotes_tabs { grid-template-columns: 1fr; gap: 0.25rem; }
  .bn-quotes_tab { padding: 0.75rem 0; }
  .bn-quotes_avatar { width: 2.5rem; height: 2.5rem; }

  .bn-team { padding-top: 4rem; padding-bottom: 4rem; gap: 2rem; }
  .bn-team_grid { grid-template-columns: 1fr; gap: 1rem; }

  .bn-cta { padding: 4rem var(--bn-pad-x); }
  .bn-cta_input { height: 3.25rem; padding: 0 1rem; font-size: 1rem; }
  .bn-cta_submit { height: 3.25rem; padding: 0 1.25rem; font-size: 1rem; }
  .bn-cta_note { margin-top: -0.75rem; }

  .bn-faq_inner { padding-top: 4rem; padding-bottom: 4rem; gap: 2rem; }
  .bn-faq_item { padding: 1.125rem 0; }

  .bn-footer > .bn-container { padding-top: 3rem; gap: 2.5rem; }
  .bn-footer_map { row-gap: 2rem; column-gap: 1rem; }
  .bn-footer_bottom { flex-direction: column; align-items: flex-start; }
  .bn-footer_logo { width: 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-logos_track { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* link a la página de caso: cubre toda la card de caso de la home */
.bn-case_link { position: absolute; inset: 0; z-index: 2; }
.bn-case_link:focus-visible { outline: 2px solid var(--bn-lime); outline-offset: 6px; }