/* ═══════════════════════════════════════════════════════════
   PORTADA INFORMES — Layout & Grid
   Grid principal, alturas de columna, etiquetas, responsive.
═══════════════════════════════════════════════════════════ */

/* ── Fix WPBakery containers ───────────────────────────── */
.vc_row:has(#inf-portada) .full_section_inner,
.vc_row:has(#inf-portada) .vc_column-inner,
.vc_row:has(#inf-portada) .wpb_wrapper,
.vc_row:has(#inf-portada) .wpb_raw_html,
.vc_row:has(#inf-portada) .vc_row-fluid,
.vc_row:has(#inf-portada) {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

/* ── Section wrapper — full bleed ──────────────────────── */
#inf-portada {
  background:
    radial-gradient(ellipse at top left,     rgba(0, 211, 243, 0.26) 0%, transparent 30%),
    radial-gradient(ellipse at bottom right, rgba(210, 0, 255, 0.26) 0%, transparent 30%),
    #000 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr 410px !important;
  gap: 96px !important;
  padding: 120px 190px 100px !important;
  align-items: start !important;   /* cada columna tiene su propio alto */
}

#inf-portada > p { display: none !important; }


/* ── Columna DESTACADOS — altura fija ── */
#inf-portada .inf-portada__col--dest {
  height: 1300px !important;  /* 3 tarjetas de ~361px c/u con thumbnail 100px + texto 2+3 líneas */
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── Columna NUEVOS — misma altura que DESTACADOS ── */
#inf-portada .inf-portada__col--nuevo {
  display: flex !important;
  flex-direction: column !important;
  height: 1300px !important;
  overflow: hidden !important;
}

/* La tarjeta visible llena la columna; overflow hidden evita que el contenido tape la nnav */
#inf-portada .nuevos-card:not(.nuevos-card--hidden) {
  flex: 1 !important;
  overflow: hidden !important;
}

/* La imagen crece para llenar la tarjeta */
#inf-portada .nuevos-card .nuevos-card__img {
  flex: 1 !important;
  aspect-ratio: unset !important;
  min-height: 200px !important;
  max-height: 720px !important;   /* evita imagen gigante en monitores muy anchos */
}

/* Cuerpo e info extendida NUNCA se comprimen — siempre visibles */
#inf-portada .nuevos-card .nuevos-card__body {
  flex-shrink: 0 !important;
}
#inf-portada .nuevos-card .nuevos-detail {
  flex-shrink: 0 !important;
}

/* ── Etiquetas de columna ───────────────────────────────── */
#inf-portada .col-label {
  font-family: 'Roboto Mono', monospace !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.5vw, 49.8px) !important;
  color: #fff !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

#inf-portada .col-label--right {
  text-align: center !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* Monitor grande (≥1921px) — amplía márgenes laterales */
@media (min-width: 1921px) {
  #inf-portada {
    padding-left:  max(190px, calc((100vw - 1540px) / 2)) !important;
    padding-right: max(190px, calc((100vw - 1540px) / 2)) !important;
    grid-template-columns: 1fr 650px !important;
  }
}

/* Monitor grande (≤1440px) — igual que desktop */
@media (max-width: 1440px) {
  #inf-portada .inf-portada__col--nuevo {
    height: 1300px !important;
  }
  #inf-portada .inf-portada__col--dest {
    height: 1300px !important;
  }
}

/* Laptop / tablet (≤1100px) — tarjetas 327px, thumb 120px, info 204px */
@media (max-width: 1100px) {
  #inf-portada {
    padding: 80px 60px 100px !important;
    gap: 48px !important;
  }
  #inf-portada .inf-portada__col--nuevo {
    height: 1200px !important;
  }
  #inf-portada .inf-portada__col--dest {
    height: 1200px !important;
  }
}

/* Móvil (≤900px) — columna única, tarjetas 327px, thumb 110px, info 214px */
@media (max-width: 900px) {
  #inf-portada {
    /* Reemplazar 100vw por 100%: en iOS Safari, 100vw causa overflow si el
       contenedor tiene algún desfase, expandiendo el viewport en cascada.
       Con width:100% + left/transform reset queda exactamente al ancho del padre. */
    width: 100% !important;
    left: auto !important;
    transform: none !important;
    grid-template-columns: 1fr !important;
    padding: 60px 24px 80px !important;
    gap: 48px !important;
    align-items: start !important;
    overflow-x: hidden !important;
  }
  #inf-portada .inf-portada__col--nuevo {
    height: auto !important;
    overflow: visible !important;
  }
  #inf-portada .nuevos-card:not(.nuevos-card--hidden) {
    flex: none !important;
  }
  #inf-portada .nuevos-card .nuevos-card__img {
    flex: none !important;
    aspect-ratio: 16 / 9 !important;
  }
  #inf-portada .inf-portada__col--dest {
    height: 1200px !important;  /* tarjetas 327px → thumb 110px → info 214px → 2+3 líneas */
  }
  #inf-portada .inf-portada__col--nuevo {
    height: 860px !important;
  }
  #inf-portada .col-label--right {
    text-align: left !important;
  }
}