@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400&family=Roboto+Mono:wght@400;500;700&family=Source+Code+Pro:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   HERRAMIENTAS — Layout
   Sección wrapper, contenedores WPBakery, grid interno.
   Archivo: bridge-child/sections/herramientas/css/layout.css
═══════════════════════════════════════════════════════════ */

/* ─── Ocultar scrollbar personalizado de Bridge ─────────── */
/* nano scrollbar elementos */
.nano-pane,
.nano-slider,
.nano > .nano-pane,
.nano > .nano-pane > .nano-slider,
.qode_scroll_section > .nano-pane,
/* containers genéricos */
#qode-scrollbar-container,
#qode-scrollbar,
.qode-scrollbar,
.qode-scrollbar-track,
.qode-scrollbar-thumb,
.qode_scrollbar_container,
#scrollbar,
#qode_smooth_scroll,
.qode-smooth-page-scroll-track,
body.qode-chrome .nano-pane,
body.qode-chrome .nano-slider {
  display: none !important;
  width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ─── Ocultar scrollbar nativo completamente ────────────── */
/* El scroll con rueda/trackpad/teclado sigue funcionando.   */
::-webkit-scrollbar              { width: 0 !important; display: none !important; }
html                             { scrollbar-width: none !important; -ms-overflow-style: none !important; }
body                             { -ms-overflow-style: none !important; }

/* ─── Fix WPBakery/Bridge: liberar contenedores ─────────── */
/* IMPORTANTE: padding: 0 completo (top/bottom también) para evitar
   el espacio vacío que Bridge inyecta por encima del contenido.    */
.vc_row:has(#herramientas) .full_section_inner,
.vc_row:has(#herramientas) .vc_column-inner,
.vc_row:has(#herramientas) .vc_column,
.vc_row:has(#herramientas) .wpb_wrapper,
.vc_row:has(#herramientas) .wpb_raw_html,
.vc_row:has(#herramientas) .vc_row-fluid,
.vc_row:has(#herramientas) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Si Bridge/WPBakery inyecta una fila vacía ANTES de herramientas,
   eliminar su espacio también */
.vc_row:has(#separador-grafo) + .vc_row:not(:has(#herramientas)),
.vc_row:has(#separador-grafo) + .vc_row:has(#herramientas) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ocultar <p> vacíos que WPBakery inyecta como hijos DIRECTOS de sus
   wrappers. Los <p> de las tarjetas están anidados y NO se ven afectados. */
#herramientas > p,
.vc_row:has(#herramientas) > p,
.vc_row:has(#herramientas) .wpb_wrapper > p,
.vc_row:has(#herramientas) .wpb_raw_html > p,
.vc_row:has(#herramientas) .vc_column-inner > p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
}

/* ─── Sección wrapper ────────────────────────────────────── */
#herramientas {
  background: #000000 !important;
  padding: 180px 0 200px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  contain: layout paint !important;
}

/* ─── Orbes neón de fondo ────────────────────────────────── */
#herramientas::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 48% 55% at 92% 12%, rgba(0,184,219,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at  8% 60%, rgba(173,70,255,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 50% 90%, rgba(21,93,252,0.18)  0%, transparent 60%) !important;
  filter: blur(50px) !important;
  transform: translateZ(0) !important;
}

/* ─── Layout interno: info + grid ───────────────────────── */
.herramientas__inner {
  max-width: 1720px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ─── Ocultar <p> vacíos que WPBakery inyecta en el inner ── */
/* Estos <p> son flex-items que distorsionan el centrado      */
#herramientas .herramientas__inner > p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* ─── Panel de texto izquierdo ───────────────────────────── */
.herramientas__info {
  flex: 0 0 auto !important;
  width: 30% !important;
  border-left: 2px solid #00d3f3 !important;
  padding-left: 24px !important;
  padding-right: 30px !important;
  align-self: flex-start !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.herramientas__title {
  font-family: 'Roboto Mono', monospace !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.8vw, 49.8px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  margin: 0 0 40px !important;
}
.herramientas__desc {
  font-family: 'Roboto Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.78) !important;
  margin: 0 !important;
}

/* ─── Bento grid de tarjetas ─────────────────────────────── */
.herramientas__grid {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: minmax(150px, auto) minmax(130px, auto) !important;
  grid-template-areas:
    "c1 c2 c2"
    "c1 c3 c4" !important;
  gap: 28px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.herramienta-card--1 { grid-area: c1 !important; }
.herramienta-card--2 { grid-area: c2 !important; }
.herramienta-card--3 { grid-area: c3 !important; }
.herramienta-card--4 { grid-area: c4 !important; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1280px) {
  #herramientas        { padding: 80px 0 100px !important; }
  .herramientas__inner { flex-direction: column !important; gap: 48px !important; }
  .herramientas__info  { width: 100% !important; max-width: 680px !important; }
}
@media (max-width: 900px) {
  #herramientas        { padding: 80px 0 100px !important; }
  .herramientas__inner { padding: 0 32px !important; gap: 32px !important; }
  /* Grid 2×2: cada tarjeta ocupa su propia celda, sin spans raros */
  .herramientas__grid  {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "c1 c2"
      "c3 c4" !important;
  }
  .herramienta-card--1,
  .herramienta-card--2,
  .herramienta-card--3,
  .herramienta-card--4 { grid-area: unset !important; }
  .herramienta-card--1 { grid-area: c1 !important; }
  .herramienta-card--2 { grid-area: c2 !important; }
  .herramienta-card--3 { grid-area: c3 !important; }
  .herramienta-card--4 { grid-area: c4 !important; }
}
@media (max-width: 600px) {
  #herramientas        { padding: 60px 0 80px !important; }
  .herramientas__inner { padding: 0 16px !important; }
  /* 1 columna en teléfono */
  .herramientas__grid  {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: "c1" "c2" "c3" "c4" !important;
  }
}