/* ==========================================================================
   bento — Página de caso (plantilla común de los 27 casos).
   Figma "Bento Web", página Diseño 1653:5049, marcos "Caso · X" (referencia de medidas:
   Caso · MAkinĖ Studios 2182:14479 y Caso · Mercadito Sessions 2188:14490).
   Valores en rem = px del Figma / 16 (root fluido ≥992, ver base.css).
   Tablet ≤991 y mobile ≤767 = criterio propio.
   ========================================================================== */

/* ---------- 01 · Hero caso (2182:14493): pad 120/80/64/80 ---------- */
.bn-cs_hero { padding: 7.5rem 5rem 4rem; }
.bn-cs_hero-inner { max-width: 61.25rem; display: flex; flex-direction: column; gap: 2rem; }   /* 980, gap 32 */
.bn-cs_crumb { display: flex; gap: 0.625rem; font-size: max(0.9375rem, 12px); line-height: 1.4; color: #8a8a8f; }  /* 15/21 */
.bn-cs_crumb a { color: inherit; text-decoration: none; transition: color 0.2s ease-out; }
.bn-cs_crumb a:hover { color: var(--bn-white); }
.bn-cs_crumb-sep { color: var(--bn-lime, #d2ff6c); }
.bn-cs_crumb-current { color: var(--bn-white); }
.bn-cs_title { font-size: 5rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; color: var(--bn-white); }  /* 80/88 */
.bn-cs_lead { max-width: 45rem; font-size: max(1.375rem, 15px); line-height: 1.41; color: #8a8a8f; }  /* 22/31, 720 */

/* ---------- 02 · Imagen principal (2182:14517): 1760×960 ---------- */
.bn-cs_main { padding: 0 5rem; }
.bn-cs_main-media { position: relative; aspect-ratio: 1760 / 960; overflow: hidden; background: #141416; }
.bn-cs_main-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 03 · El desafío (2182:14519): blanco, pad 160/80 ---------- */
.bn-cs_challenge { background: #fff; padding: 10rem 5rem; }
.bn-cs_challenge-inner { max-width: 65rem; display: flex; flex-direction: column; gap: 2rem; }   /* 1040 */
.bn-cs_statement { font-size: 2.75rem; line-height: 1.09; letter-spacing: -0.02em; font-weight: 400; color: #111; }  /* 44/48 */
.bn-cs_body { font-size: max(1.25rem, 15px); line-height: 1.4; color: #373737; }   /* 20/28 */

/* ---------- 04 · Sitio en contexto (2182:14525): navegador 1560×820 ---------- */
.bn-cs_context { background: #fff; padding: 0 5rem; }
.bn-cs_browser {
  width: 88.636%;                     /* 1560 / 1760 */
  margin: 0 auto;
  aspect-ratio: 1560 / 820;
  display: flex;
  flex-direction: column;
  background: #1f1f21;
  border: 1px solid #373737;
  overflow: hidden;
}
.bn-cs_bar { position: relative; flex: 0 0 auto; height: 2.4375rem; display: flex; align-items: center; gap: 0.5rem; padding: 0 1.125rem; }  /* 39, pad 18 */
.bn-cs_bar-dot { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }  /* 11 */
.bn-cs_bar-url {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0.25rem 2.5rem; border-radius: 0.375rem; background: rgba(255, 255, 255, 0.08);
  font-size: max(0.8125rem, 11px); line-height: 1.38; color: var(--bn-white); white-space: nowrap;   /* 13/18, pad 4/40, r6 */
}
.bn-cs_screen { flex: 1 1 0%; min-height: 0; overflow: hidden; }
.bn-cs_screen img { width: 100%; height: auto; display: block; }

/* CAC · 04 Universo CAC (2333:19800): mosaico 1760×805 exportado entero */
.bn-cs_mosaic { aspect-ratio: 1760 / 805; overflow: hidden; background: #091b3f; }
.bn-cs_mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 05 · La solución (2182:14536): pad 160/80, gap 64 ---------- */
.bn-cs_solution { padding: 10rem 5rem; display: flex; flex-direction: column; gap: 4rem; }
.bn-cs_solution-head { max-width: 65rem; display: flex; flex-direction: column; gap: 2rem; }
.bn-cs_solution-head .bn-cs_statement { color: var(--bn-white); }
.bn-cs_solution-head .bn-cs_body { color: #8a8a8f; }

/* Muro de secciones (2183:18119): 1600 de ancho, 3 columnas de 517, gap 24, alto visible 800 */
.bn-cs_wall { width: 90.909%; margin: 0 auto; padding: var(--bn-wall-pt, 5rem) 0 var(--bn-wall-pb, 5rem); }   /* 1600/1760; pad y alto: por caso (build.js) */
.bn-cs_wall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; aspect-ratio: var(--bn-wall-ratio, 2); overflow: hidden; }
.bn-cs_wall-col { display: flex; flex-direction: column; gap: 1.5rem; min-height: 0; overflow: hidden; }
.bn-cs_wall-col img { width: 100%; height: auto; display: block; flex: 0 0 auto; }

/* Páginas (MAkinĖ 2182:14563): 5 páginas de 301, gap 24, altos 640/560, arriba alineadas */
.bn-cs_pages { width: 90.909%; margin: 0 auto; padding: 5rem 0; display: flex; gap: 1.5rem; align-items: flex-start; }
.bn-cs_page { flex: 1 1 0%; min-width: 0; }
.bn-cs_page img { width: 100%; height: auto; display: block; }

/* 07 · El resultado (2258:18864): 1760×735, pad 96, gap 120; fondo exportado (2258:18870) */
.bn-cs_result {
  position: relative;
  overflow: hidden;
  padding: 6rem;
  display: flex;
  flex-direction: column;
  gap: 7.5rem;
  background: #0a0f6b url("../assets/images/casos/_shared/resultado-fondo-1760.webp") center / cover no-repeat;
}
.bn-cs_result-lines { position: absolute; inset: 0; pointer-events: none; }
.bn-cs_result-lines span { position: absolute; background: rgba(255, 255, 255, 0.2); }
.bn-cs_result-lines .v { top: 0; bottom: 0; width: 1px; }
.bn-cs_result-lines .h { left: 0; right: 0; height: 1px; }
.bn-cs_result-lines .v1 { left: 5.4545%; }    /* 96 / 1760 */
.bn-cs_result-lines .v2 { left: 35.1705%; }   /* 619 */
.bn-cs_result-lines .v3 { left: 64.8295%; }   /* 1141 */
.bn-cs_result-lines .v4 { left: 94.4886%; }   /* 1663 */
.bn-cs_result-lines .h1 { top: 3.5rem; }      /* 56 */
.bn-cs_result-lines .h2 { top: 27.6875rem; }  /* 443: arriba de las pruebas */
.bn-cs_result-lines .h3 { top: 39.875rem; }   /* 638 */
.bn-cs_result-top { position: relative; max-width: 75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; }   /* 1200, gap 48 */
.bn-cs_result-statement { font-size: 4rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: 400; color: rgba(255, 255, 255, 0.55); }  /* 64/67 */
.bn-cs_result-statement .is-on { color: var(--bn-white); }
.bn-cs_visit {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 999px;
  background: #daff7b; color: #0b0b0c; font-size: max(1rem, 14px); line-height: 1.06; font-weight: 500; text-decoration: none;
  transition: background-color 0.25s ease-out, transform 0.25s ease-out;
}
.bn-cs_visit:hover { background: #e6ff9e; transform: translateY(-1px); }   /* hover = criterio propio */
.bn-cs_proofs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }   /* 3 × 523 */
.bn-cs_proof {
  display: flex; flex-direction: column; gap: 3.5rem; padding: 2rem;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.bn-cs_proof-head { display: flex; align-items: center; gap: 0.75rem; font-size: max(1.5rem, 17px); line-height: 1.08; letter-spacing: -0.02em; color: var(--bn-white); }  /* 24/26 */
.bn-cs_proof-head::before { content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #d2ff6c; }
.bn-cs_proof-body { max-width: 28.6875rem; font-size: max(1.125rem, 14px); line-height: 1.39; color: rgba(255, 255, 255, 0.8); }  /* 18/25, 459 */

/* CTA de los casos: "Elevemos tu presencia online" en una línea (contenido 778 en 2182:14607) */
.bn-page-case .bn-cta_content { width: 48.625rem; }

/* ==========================================================================
   TABLET ≤991 (criterio propio)
   ========================================================================== */
@media (max-width: 991px) {
  .bn-cs_hero { padding: 4rem var(--bn-pad-x) 3rem; }
  .bn-cs_title { font-size: 3.25rem; }
  .bn-cs_lead { font-size: 1.125rem; }
  .bn-cs_main, .bn-cs_context { padding: 0 var(--bn-pad-x); }
  .bn-cs_challenge { padding: 5rem var(--bn-pad-x); }
  .bn-cs_statement { font-size: 2rem; }
  .bn-cs_body { font-size: 1.0625rem; }
  .bn-cs_browser { width: 100%; }
  .bn-cs_solution { padding: 5rem var(--bn-pad-x); gap: 2.5rem; }
  .bn-cs_wall, .bn-cs_pages { width: 100%; padding: 1rem 0; }
  .bn-cs_wall-grid { gap: 1rem; }
  .bn-cs_wall-col { gap: 1rem; }
  .bn-cs_pages { gap: 1rem; }
  .bn-cs_result { padding: 3rem 2rem; gap: 3rem; }
  .bn-cs_result-lines { display: none; }
  .bn-cs_result-statement { font-size: 2.5rem; }
  .bn-cs_proofs { grid-template-columns: 1fr; gap: 1px; }
  .bn-cs_proof { gap: 1.25rem; padding: 1.5rem; }
  .bn-cs_proof-head { font-size: 1.25rem; }
  .bn-cs_proof-body { font-size: 1rem; max-width: none; }
}

/* ==========================================================================
   MOBILE ≤767 (criterio propio)
   ========================================================================== */
@media (max-width: 767px) {
  .bn-cs_hero { padding: 3rem var(--bn-pad-x) 2rem; }
  .bn-cs_title { font-size: 2.375rem; }
  .bn-cs_lead { font-size: 1.0625rem; }
  .bn-cs_main-media:not(.bn-cs_main-media--live) { aspect-ratio: 4 / 3; }   /* con capa animada se mantiene la proporción del mockup */
  .bn-cs_challenge { padding: 4rem var(--bn-pad-x); }
  .bn-cs_statement { font-size: 1.625rem; }
  .bn-cs_browser { aspect-ratio: 4 / 3; }
  .bn-cs_bar { height: 1.75rem; padding: 0 0.625rem; gap: 0.3rem; }
  .bn-cs_bar-dot { width: 0.4375rem; height: 0.4375rem; }
  .bn-cs_bar-url { padding: 0.125rem 1rem; }
  .bn-cs_mosaic { aspect-ratio: 4 / 3; }
  .bn-cs_solution { padding: 4rem var(--bn-pad-x); }
  /* muro: dos columnas (la tercera se oculta) y alto proporcional */
  .bn-cs_wall-grid { grid-template-columns: repeat(2, 1fr); aspect-ratio: 3 / 4; gap: 0.625rem; }
  .bn-cs_wall-col { gap: 0.625rem; }
  .bn-cs_wall-col:nth-child(3) { display: none; }
  .bn-cs_pages { flex-wrap: nowrap; overflow-x: auto; gap: 0.625rem; scrollbar-width: none; }
  .bn-cs_page { flex: 0 0 42%; }
  .bn-cs_result { padding: 2.5rem 1.25rem; }
  .bn-cs_result-statement { font-size: 2rem; }
}