/* Banner rotativo de noticias / empresas del grupo. Generado por
   banner-noticias-lib.js; ver su cabecera. Medidas del panel de Figma
   (QP8dpaPwOHvXXXj8b6LV36, componente "Content/Banner rotativo", 22-oct-2026):
   escritorio 1280x240, radio 16, #072031; contenido 760 (padding 32/40/28/40,
   gap 10) + imagen 520 a la derecha. Movil 358 de ancho, imagen 160 arriba,
   contenido padding 20 gap 8, boton a lo ancho, puntos abajo, sin flechas.

   Desviaciones del archivo, a proposito:
   - Etiqueta y texto del boton: el archivo usa Inter; el sitio usa UNA familia,
     Host Grotesk (manual-de-marca-2026 §0). Mismo tamano y peso.
   - Boton: el archivo pinta #2563EB; el CTA del sistema es --h26-blue #3b82f6
     con --h26-blue-ink #2f6fd0 al pasar (manual §0). El boton es del sistema,
     no de esta pagina, asi que gana el token (figma-to-site, "A brand token
     beats a file hex").
   - Degradado sobre la foto: el archivo apila la imagen + un lineal
     #082437 -> #051928 cuya opacidad el panel no muestra. Se traduce a un
     fundido desde el navy del banner hacia la foto. PROVISIONAL hasta leer
     /nodes (en 429 hasta ~26-oct). */

.bnr{
  position:relative; overflow:hidden; border-radius:16px;
  background:var(--h26-navy, #072031); color:#fff;
  font-family:"Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align:left;
}
.bnr *{ box-sizing:border-box; }
.bnr__slides{ display:grid; }
.bnr__slide{
  grid-area:1 / 1; display:grid; grid-template-columns:minmax(0, 1fr) 40.625%; /* 520/1280 */
  min-height:240px; opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.bnr__slide.is-on{ opacity:1; visibility:visible; transition:opacity .45s ease; }

.bnr__bd{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:32px 40px 28px; min-width:0; }
.bnr .bnr__lbl{ margin:0; font-size:11px; line-height:16px; font-weight:600; letter-spacing:0; color:var(--h26-gold, #e5c179); }
.bnr .bnr__tt{ margin:0; max-width:680px; font-size:24px; line-height:32px; font-weight:700; color:#fff; }
.bnr .bnr__tx{ margin:0; max-width:680px; font-size:16px; line-height:24px; font-weight:400; color:#fff; }
/* body -> boton = 40: gap 10 + espaciador 20 + gap 10 del archivo. */
.bnr .bnr__btn{
  display:inline-flex; align-items:center; justify-content:center; height:48px; margin-top:30px; padding:0 24px;
  border-radius:8px; background:var(--h26-blue, #3b82f6); color:#fff;
  font-size:13px; line-height:18px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background-color .2s ease;
}
.bnr .bnr__btn:hover, .bnr .bnr__btn:focus-visible{ background:var(--h26-blue-ink, #2f6fd0); color:#fff; }

.bnr__img{ position:relative; overflow:hidden; }
.bnr__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bnr__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--h26-navy, #072031) 0%, rgba(7, 32, 49, .55) 22%, rgba(5, 25, 40, 0) 55%);
}

/* Puntos + flechas: compartidos por todos los slides, alineados al borde
   derecho de la columna de texto (acciones = space-between en el archivo) y
   centrados en la altura del boton (48 -> 36: 6 por lado, 28 + 6 = 34). */
.bnr__ctl{ position:absolute; right:calc(40.625% + 40px); bottom:34px; display:flex; align-items:center; gap:12px; }
.bnr__dots{ display:flex; align-items:center; gap:6px; }
.bnr .bnr__dot{
  position:relative; width:6px; height:6px; padding:0; border:0; border-radius:3px; cursor:pointer;
  background:rgba(255, 255, 255, .3); transition:width .3s ease, background-color .3s ease;
}
.bnr .bnr__dot::before{ content:""; position:absolute; inset:-9px -3px; } /* area de toque, sin mover el dibujo */
.bnr .bnr__dot.is-on{ width:24px; background:var(--h26-gold, #e5c179); }
.bnr .bnr__arr{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border:1px solid rgba(255, 255, 255, .3); border-radius:8px; background:transparent; color:#fff;
  font:400 16px/1 "Host Grotesk", system-ui, sans-serif; cursor:pointer; transition:background-color .2s ease;
}
.bnr .bnr__arr:hover, .bnr .bnr__arr:focus-visible{ background:rgba(255, 255, 255, .08); }
.bnr button:focus-visible, .bnr a:focus-visible{ outline:2px solid var(--h26-gold, #e5c179); outline-offset:2px; }

/* ---- Donde va: home, zona, ficha -------------------------------------- */
/* Home: es un hijo directo de Main-Body-Flow (gap 113) entre Presales y
   How-It-Works; .h26-sec ya da 56 + 56 = 112 a cada lado. */
.bnr-slot--zona{ margin-top:56px; }               /* dentro de la banda "<zona> en cifras", tras la nota */
/* Entre "En venta ahora" y Ubicacion. Arriba ya da 64 "En venta ahora"; Ubicacion
   no tiene padding arriba (medido: 0), asi que el banner pone el mismo 64 abajo. */
/* Mismo fondo que "En venta ahora" (.ed-uni #f7f8fa): el archivo mete el banner
   en la banda del vecino de arriba, sin corte de color justo encima de la tarjeta. */
.bnr-sec--ficha{ padding:0 40px 64px; background:#f7f8fa; }
.bnr-sec--ficha .bnr-sec__in{ max-width:1280px; margin:0 auto; }

/* ---- Movil (mismo corte que el home h26) ------------------------------- */
@media (max-width:900px){
  .bnr__slide{ grid-template-columns:1fr; min-height:0; }
  .bnr__img{ order:-1; height:160px; }
  .bnr__img::after{ background:linear-gradient(0deg, var(--h26-navy, #072031) 0%, rgba(7, 32, 49, 0) 45%); }
  /* abajo: boton, gap 8, fila de puntos 10 (4 + 6), padding 20 -> 38 */
  .bnr__bd{ gap:8px; padding:20px 20px 38px; }
  .bnr .bnr__tt{ font-size:18px; line-height:26px; font-weight:600; }
  .bnr .bnr__tx{ font-size:14px; line-height:22px; }
  /* margin-top:auto: los slides comparten alto (el del mas largo) y el boton
     queda siempre a la misma altura, pegado a los puntos. */
  .bnr .bnr__btn{ width:100%; margin-top:auto; }
  .bnr__ctl{ right:auto; left:20px; bottom:20px; }
  .bnr .bnr__arr{ display:none; }

  /* El archivo pone el banner a 358 (16 por lado) aunque sus vecinos van a 20. */
  .h26-home .bnr-sec--home{ padding:0 0 32px; }
  .h26-home .bnr-sec--home .h26-wrap{ width:calc(100% - 32px); }
  .bnr-slot--zona{ margin-top:32px; }
  .bnr-sec--ficha{ padding:0 16px 40px; }
}

@media (prefers-reduced-motion:reduce){
  .bnr__slide, .bnr__slide.is-on, .bnr .bnr__dot{ transition:none; }
}