/* --- Grid base --- */
#fn-bannerhome.fnbh-grid{
  display:grid;
  gap:18px;
  padding:16px 0;
}

/* Tarjeta y capas: el aspect-ratio de la tarjeta manda la altura */
#fn-bannerhome .fnbh-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  contain:layout paint;
  align-self:stretch;
  min-height:0;
}
#fn-bannerhome .fnbh-link{
  position:absolute; inset:0;
  display:block; color:inherit; text-decoration:none;
}
#fn-bannerhome picture{ position:absolute; inset:0; display:block; }
#fn-bannerhome .fnbh-img{ width:100%; height:100%; object-fit:cover; display:block; }
#fn-bannerhome .fnbh-overlay{
  position:absolute; inset:0; padding:18px;
  display:flex; flex-direction:column; justify-content:flex-start;
  color:var(--fnbh-color, #1a1a1a);
  pointer-events:none;
}
#fn-bannerhome .fnbh-pretitle{ font-size:1rem; line-height:1.1; font-weight:700; opacity:.95; }
#fn-bannerhome .fnbh-title{ font-size:var(--fnbh-title,2.5rem); line-height:1.1; margin:.25rem 0 .5rem; font-weight:800;font-family: Merriweather, Sans-serif; }
#fn-bannerhome .fnbh-cta{ text-decoration:underline; font-weight:600; }
#fn-bannerhome .fnbh-badge{
  position:absolute; top:8px; right:8px; background:rgba(0,0,0,.65); color:#fff;
  font-size:.75rem; border-radius:999px; padding:4px 8px; pointer-events:none;
}

/* ---------- DESKTOP (10 slots sin huecos) ---------- */
@media (min-width: 992px){
  #fn-bannerhome.fnbh-grid{
    /* mismas columnas */
    grid-template-columns: 2fr 1fr 1fr 2fr;
    /* B rellena la 2ª fila también → sin celdas vacías */
    grid-template-areas:
      "A B B C"
      "D B B E"
      "D F G H"
      "I J J H";
    gap:18px;
  }

  /* Celdas de 1 fila con ratio fijo */
  #fn-bannerhome .fnbh-card-1  { grid-area:A; aspect-ratio:16/9; }
  #fn-bannerhome .fnbh-card-3  { grid-area:C; aspect-ratio:16/9; }
  #fn-bannerhome .fnbh-card-5  { grid-area:E; aspect-ratio:16/9; }
  #fn-bannerhome .fnbh-card-9  { grid-area:I; aspect-ratio:16/9; }
  #fn-bannerhome .fnbh-card-10 { grid-area:J; aspect-ratio:16/9; }
  #fn-bannerhome .fnbh-card-6  { grid-area:F; aspect-ratio:3/4; }
  #fn-bannerhome .fnbh-card-7  { grid-area:G; aspect-ratio:3/4; }

  /* Spans multi-fila: SIN aspect-ratio para que se estiren al área */
  #fn-bannerhome .fnbh-card-2  { grid-area:B; } /* ahora 2 filas x 2 cols */
  #fn-bannerhome .fnbh-card-4  { grid-area:D; } /* 2 filas izq */
  #fn-bannerhome .fnbh-card-8  { grid-area:H; } /* 2 filas dcha */

  /* Título desktop */
  #fn-bannerhome .fnbh-title{ font-size:var(--fnbh-title,2.5rem);    width: 40%; }
}


/* ---------- RESPONSIVE (maqueta como la captura) ---------- */
@media (max-width: 991px){
  #fn-bannerhome.fnbh-grid{
    /* 2 columnas fijas */
    grid-template-columns: 1fr 1fr;
    /* Orden móvil:
       1) B a ancho completo
       2) E y F lado a lado (dos pequeñas)
       3) A y D lado a lado (dos pequeñas)
       4) J ancho completo (Flota)
       5) I ancho completo (banner ancho)
       6) C ancho completo
       7) H ancho completo (bolsa)
       8) G ancho completo (cierre)
    */
    grid-template-areas:
      "B B"
      "E F"
      "A D"
      "J J"
      "I I"
      "C C"
      "H H"
      "G G";
    gap: 18px;
  }

  /* Ratios móviles ajustados para que encajen sin huecos */
  #fn-bannerhome .fnbh-card-2 { grid-area:B; aspect-ratio: 16 / 10; } /* hero */
  #fn-bannerhome .fnbh-card-5 { grid-area:E; aspect-ratio: 4 / 5;  }  /* pequeña */
  #fn-bannerhome .fnbh-card-6 { grid-area:F; aspect-ratio: 4 / 5;  }  /* pequeña */
  #fn-bannerhome .fnbh-card-1 { grid-area:A; aspect-ratio: 4 / 5;  }  /* pequeña */
  #fn-bannerhome .fnbh-card-4 { grid-area:D; aspect-ratio: 4 / 5;  }  /* pequeña */
  #fn-bannerhome .fnbh-card-10{ grid-area:J; aspect-ratio: 16 / 10; } /* flota */
  #fn-bannerhome .fnbh-card-9 { grid-area:I; aspect-ratio: 16 / 10; } /* ancho */
  #fn-bannerhome .fnbh-card-3 { grid-area:C; aspect-ratio: 16 / 10; } /* ancho */
  #fn-bannerhome .fnbh-card-8 { grid-area:H; aspect-ratio: 16 / 10; } /* ancho */
  #fn-bannerhome .fnbh-card-7 { grid-area:G; aspect-ratio: 16 / 10; } /* cierre */

  /* Título móvil (usa el valor del BO) */
  #fn-bannerhome .fnbh-title{ font-size:var(--fnbh-title-mobile,1.6rem); }
}

/* -------- Fondo a 100% viewport -------- */
#fn-bannerhome { position: relative; z-index: 0; }
#fn-bannerhome.fnbh-fullbleed::before{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  width:100vw; transform:translateX(-50%); z-index:-1;
  /* background: url(/img/cms/assets/panot.png) left top / auto repeat fixed; */
}
@media (max-width: 991px){
  #fn-bannerhome.fnbh-fullbleed::before{ background-attachment: scroll; }
}

/* --- FIX separación I–J (última fila) --- */
@media (min-width: 992px){
  /* usa el mismo valor que el gap del grid */
  #fn-bannerhome.fnbh-grid{ --fnbh-gap: 18px; }

  /* empuja J un poco a la derecha para garantizar el hueco */
  #fn-bannerhome .fnbh-card-9{ margin-right: 16px; }
  #fn-bannerhome .fnbh-card-10{ margin-left: 8px; }
}