/* --- Grid base --- */
#fnc-bannercategory.fnc-grid{
  display:grid;
  gap:18px;
  padding:32px 0;
}

/* Tarjeta y capas (la tarjeta manda la altura; el contenido no empuja) */
#fnc-bannercategory .fnc-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  contain:layout paint;        /* aísla el layout interno */
}
#fnc-bannercategory .fnc-link{
  position:absolute; inset:0;  /* NO altera la altura de la tarjeta */
  display:block; color:inherit; text-decoration:none;
}
#fnc-bannercategory picture{ position:absolute; inset:0; display:block; }
#fnc-bannercategory .fnc-img{ width:100%; height:100%; object-fit:cover; display:block; }
#fnc-bannercategory .fnc-overlay{
  position:absolute; inset:0; padding:18px;
  display:flex; flex-direction:column; justify-content:flex-start;
  color:var(--fnc-color, #fff);
  pointer-events:none;        /* todo el bloque es clicable */
}
#fnc-bannercategory .fnc-pretitle{ font-size:1rem; line-height:1.1; font-weight:700; opacity:.95; }
#fnc-bannercategory .fnc-title{ font-size:var(--fnc-title,2.5rem); line-height:1.1; margin:.25rem 0 .5rem; font-weight:800; font-family: Frank Ruhl Libre; }
#fnc-bannercategory .fnc-cta{ text-decoration:underline; font-weight:600; }
#fnc-bannercategory .fnc-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 (forzado como la maqueta) ---------- */
@media (min-width: 992px){
  #fnc-bannercategory.fnc-grid{
    grid-template-columns: 2fr 1fr 1fr 2fr;
    grid-template-areas:
      "A B B C"
      "D B B C"
      "D E F C";
    gap: 18px;
  }

  /* A, E, F fijan la altura de sus filas */
  #fnc-bannercategory .fnc-card-1{ grid-area:A; aspect-ratio: 2 / 1; } /* panorámico */
  #fnc-bannercategory .fnc-card-4{ grid-area:E; aspect-ratio: 1 / 1; } /* cuadrado */
  #fnc-bannercategory .fnc-card-5{ grid-area:F; aspect-ratio: 1 / 1; } /* cuadrado */

  /* B, C, D se ESTIRAN para rellenar su área (sin aspect-ratio) */
  #fnc-bannercategory .fnc-card-3{ grid-area:B; } /* 2 columnas x 2 filas */
  #fnc-bannercategory .fnc-card-6{ grid-area:C; } /* 1 columna x 3 filas */
  #fnc-bannercategory .fnc-card-2{ grid-area:D; } /* 1 columna x 2 filas */

  /* Aseguramos que los items pueden estirar sin límites internos */
  #fnc-bannercategory .fnc-card{ align-self:stretch; min-height:0; }
  #fnc-bannercategory .fnc-link,
  #fnc-bannercategory picture{ position:absolute; inset:0; }

  /* Título en desktop (rem configurable) */
  #fnc-bannercategory .fnc-title{ font-size:var(--fnc-title,2.5rem); }
}

/* ---------- RESPONSIVE (forzado como la maqueta móvil) ---------- */
@media (max-width: 991px){
  #fnc-bannercategory.fnc-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "B B"   /* ID 3 arriba, ancho completo */
      "A D"   /* IDs 1 y 2 en dos columnas */
      "E F"   /* IDs 4 y 5 en dos columnas */
      "C C";  /* ID 6 ancho completo al final */
  }

  /* Aspect ratios móviles por slot */
  #fnc-bannercategory .fnc-card-1{ grid-area:A; aspect-ratio: 16 / 12; }
  #fnc-bannercategory .fnc-card-2{ grid-area:D; aspect-ratio: 4 / 5;  }
  #fnc-bannercategory .fnc-card-3{ grid-area:B; aspect-ratio: 16 / 10; }
  #fnc-bannercategory .fnc-card-4{ grid-area:E; aspect-ratio: 4 / 5;  }
  #fnc-bannercategory .fnc-card-5{ grid-area:F; aspect-ratio: 4 / 5;  }
  #fnc-bannercategory .fnc-card-6{ grid-area:C; aspect-ratio: 16 / 9;  }

  /* Título en móvil (rem configurable) */
  #fnc-bannercategory .fnc-title{ font-size:var(--fnc-title-mobile,1.6rem); }
}

/* -------- Fondo a 100% de viewport (aunque estemos en un container) -------- */
#fnc-bannercategory { position: relative; z-index: 0; }

/* Solo en front (no en la preview de BO) */
#fnc-bannercategory.fnc-fullbleed::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;               /* cubre toda la altura del bloque */
  left: 50%;
  width: 100vw;            /* ancho del viewport */
  transform: translateX(-50%);
  z-index: -1;
  background: url(/img/cms/assets/panot.png) left top / auto repeat fixed;
}

/* Fallback móvil para evitar glitches con background-attachment: fixed */
@media (max-width: 991px){
  #fnc-bannercategory.fnc-fullbleed::before{
    background-attachment: scroll;
  }
}