/* ==========================================================================
   Página «Cómo está hecha una bomba VITTA» (plantilla
   templates/page-bomba.html; patrones patterns/bomba-*.php). Solo se carga
   en esa plantilla (vitta_enqueue_shared_styles()).

   Maqueta: «Bombas · 1/2/3 de 3» (1440px). Donde la maqueta no llegaba a
   contraste (filetes de la banda ~1,3:1, borde del índice ~2:1, números del
   índice), se ha subido hasta 3:1 en filetes y 4,5:1 en texto, medido sobre
   píxeles (ver CLAUDE.md).
   ========================================================================== */

/* ── Cabecera del sitio en navy, solo en esta página (como la maqueta) ──
   Misma parts/header.html de siempre; aquí solo el aspecto, por selector
   de plantilla. Logo, menú, selector y botones en claro, igual que la
   cabecera navy de la home (front-page.css, estado .is-scrolled): mismas
   opacidades, ya medidas allí. Filete inferior tenue como en la maqueta
   (decorativo: separa dos navy, no transmite información). */
body.page-template-page-bomba .app-header {
  background: var(--navy);
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 22%, var(--navy));
}
body.page-template-page-bomba .app-header .app-header__logo img { filter: brightness(0) invert(1); }
body.page-template-page-bomba .app-header .app-header__nav .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, .7);
  background: none;
}
body.page-template-page-bomba .app-header .app-header__nav .wp-block-navigation-item__content:hover { color: var(--white); }
body.page-template-page-bomba .app-header .lang-switch__link { color: rgba(255, 255, 255, .75); }
body.page-template-page-bomba .app-header .lang-switch__link:hover,
body.page-template-page-bomba .app-header .lang-switch__link.is-current { color: var(--white); }
body.page-template-page-bomba .app-header .lang-switch__link + .lang-switch__link { border-left-color: rgba(255, 255, 255, .35); }
body.page-template-page-bomba .app-header .app-header__access .wp-block-button__link {
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
}
body.page-template-page-bomba .app-header .app-header__access .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); }
body.page-template-page-bomba .app-header .app-header__nav .wp-block-navigation__responsive-container-open { color: var(--white); }
body.page-template-page-bomba .app-header .app-header__nav .is-menu-open .wp-block-navigation-item__content { color: var(--white); }

/* Las secciones van pegadas: sin el margen entre bloques del flujo. */
.bomba-pagina__contenido > * { margin-block: 0; }

/* ── Cabecera (Cover con la chapa de fondo) ───────────────────────────── */
.bomba-cabecera.wp-block-cover {
  min-height: 0;
  padding: clamp(40px, 5vw, 72px) var(--space-4) clamp(56px, 8vw, 120px);
  color: var(--white);
  align-items: stretch;
}
/* Velo: navy (color y opacidad del propio bloque) que vira a celeste
   oscuro por la derecha, como en la maqueta. */
.bomba-cabecera .wp-block-cover__background {
  background-image: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--teal-d) 70%, transparent) 100%);
}
.bomba-cabecera .wp-block-cover__inner-container { color: inherit; }
/* Los colores de texto van con el prefijo de la sección: el color por
   defecto de los párrafos del tema (navy) les ganaría con una sola clase. */

.bomba-cabecera__inner {
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .bomba-cabecera__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 556px);
    gap: clamp(48px, 5vw, 80px);
    align-items: start;
  }
}
.bomba-cabecera__inner > *,
.bomba-cabecera__intro > *,
.bomba-cabecera__indice > * { margin-block: 0; }

/* Logotipo (SVG en línea, currentColor) con el guion inclinado delante. */
.bomba-cabecera__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--teal);
}
.bomba-cabecera__logo::before {
  content: '';
  flex: none;
  width: 26px;
  height: 8px;
  background: currentColor;
  transform: skewX(-35deg);
}
.bomba-cabecera__logo-svg,
.bomba-cabecera__logo img { display: block; height: 30px; width: auto; }

.bomba-cabecera__titular {
  margin-top: var(--space-5) !important;
  max-width: 12em;
  font-size: clamp(2.125rem, 4vw, 3.625rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}
.bomba-cabecera .bomba-cabecera__entrada {
  margin-top: var(--space-5) !important;
  max-width: 44em;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}

/* Índice */
.bomba-cabecera .bomba-cabecera__antetitulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--teal);
}
.bomba-cabecera__lista {
  --filete: color-mix(in srgb, var(--teal) 60%, transparent);
  margin-top: var(--space-4) !important;
  padding: 0;
  list-style: none;
  counter-reset: bloque;
  border: 1px solid var(--filete);
  background: color-mix(in srgb, var(--navy) 45%, transparent);
  display: grid;
}
.bomba-cabecera__lista > li {
  counter-increment: bloque;
  margin: 0;
  border-bottom: 1px solid var(--filete);
}
.bomba-cabecera__lista > li:last-child { border-bottom: 0; }
.bomba-cabecera__lista a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  text-decoration: none;
}
.bomba-cabecera__lista a::before {
  content: counter(bloque, decimal-leading-zero);
  flex: none;
  min-width: 2ch;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--teal);
}
.bomba-cabecera__lista a:hover { background: color-mix(in srgb, var(--teal) 14%, transparent); }
.bomba-cabecera__lista a:hover,
.bomba-cabecera__lista a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.bomba-cabecera__lista a:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
@media (min-width: 560px) {
  .bomba-cabecera__lista { grid-template-columns: 1fr 1fr; }
  .bomba-cabecera__lista > li:nth-child(odd):not(:last-child) { border-right: 1px solid var(--filete); }
  .bomba-cabecera__lista > li:last-child { grid-column: 1 / -1; }
}

.bomba-cabecera .bomba-cabecera__nota {
  margin-top: var(--space-4) !important;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
}

/* ── Banda de cifras ──────────────────────────────────────────────────── */
.bomba-cifras {
  background: color-mix(in srgb, var(--navy) 66%, #000);
  color: var(--white);
  padding: var(--space-5) var(--space-4);
}
.bomba-cifras__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bomba-cifras__item {
  --filete: color-mix(in srgb, var(--teal) 55%, transparent);
  padding: var(--space-4) var(--space-4);
  margin: 0 !important;
}
.bomba-cifras__item:nth-child(even) { border-left: 1px solid var(--filete); }
.bomba-cifras__item:nth-child(n+3) { border-top: 1px solid var(--filete); }
.bomba-cifras__item > * { margin-block: 0; }
@media (min-width: 900px) {
  .bomba-cifras { padding-block: var(--space-4); }
  .bomba-cifras__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bomba-cifras__item { padding: var(--space-5) 28px; min-height: 162px; }
  .bomba-cifras__item + .bomba-cifras__item { border-left: 1px solid var(--filete); }
  .bomba-cifras__item:nth-child(n+3) { border-top: 0; }
}

.bomba-cifras .bomba-cifras__valor {
  color: var(--white);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.bomba-cifras .bomba-cifras__valor--dos-lineas { font-size: clamp(24px, 2.3vw, 31px); }
.bomba-cifras .bomba-cifras__pie {
  margin-top: var(--space-3) !important;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .76);
}
@media (max-width: 899px) {
  .bomba-cifras .bomba-cifras__pie { font-size: 13px; }
}

/* ── Bloques de contenido (patrones bomba-{ancla}.php) ─────────────────
   Fondo blanco, tarjetas en gris claro. Los filetes y bordes de la
   maqueta (#e1e5ea, 1,26:1) se suben a navy al 55% para llegar a 3:1,
   mismo criterio que la tarjeta clara de la home (tanda 5). */
.bomba-bloque {
  --filete: color-mix(in srgb, var(--navy) 55%, var(--white));
  --texto: color-mix(in srgb, var(--navy) 85%, var(--white));
  --texto-suave: color-mix(in srgb, var(--navy) 72%, var(--white));
  background: var(--white);
  color: var(--navy);
  padding: clamp(48px, 7vw, 96px) var(--space-4);
}
.bomba-bloque--separado { border-top: 1px solid var(--filete); }
.bomba-bloque p { color: inherit; }
.bomba-bloque__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}
.bomba-bloque__inner > *,
.bomba-bloque__texto > *,
.bomba-bloque__intro > * { margin-block: 0; }
.bomba-bloque__intro { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .bomba-bloque__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 456px); gap: clamp(40px, 4vw, 64px); align-items: start; }
  .bomba-bloque__intro--foto { grid-template-columns: minmax(0, 1fr) minmax(0, 496px); }
}
.bomba-bloque__texto > * + * { margin-top: var(--space-4); }

/* Número + etiqueta */
.bomba-bloque__cabeza { gap: var(--space-4); align-items: center; }
.bomba-bloque__cabeza > * { margin: 0; }
.bomba-bloque .bomba-bloque__num {
  font-size: clamp(34px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--navy) 66%, var(--white));
}
.bomba-bloque .bomba-bloque__etiqueta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.bomba-bloque__etiqueta::before {
  content: '';
  flex: none;
  width: 24px;
  height: 7px;
  background: currentColor;
  transform: skewX(-35deg);
}
.bomba-bloque__titular {
  margin-top: var(--space-5) !important;
  max-width: 15em;
  font-size: clamp(1.875rem, 3.3vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}
.bomba-bloque .bomba-bloque__parrafo {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--texto);
}
.bomba-bloque__parrafo strong { color: var(--navy); font-weight: 700; }
.bomba-bloque .bomba-bloque__subetiqueta {
  margin-bottom: calc(-1 * clamp(12px, 1.5vw, 24px)) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Cifras destacadas («Diseño interior optimizado») */
.bomba-destacados { border: 1px solid var(--filete); background: var(--bg); }
.bomba-destacados__item { margin: 0 !important; padding: var(--space-5); }
.bomba-destacados__item + .bomba-destacados__item { border-top: 1px solid var(--filete); }
.bomba-destacados__item > * { margin-block: 0; }
.bomba-destacados .bomba-destacados__valor {
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.bomba-destacados .bomba-destacados__pie { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.bomba-destacados .bomba-destacados__item--navy { background: var(--navy); }
.bomba-destacados .bomba-destacados__item--navy .bomba-destacados__valor { color: var(--teal); }
.bomba-destacados .bomba-destacados__item--navy .bomba-destacados__pie { color: rgba(255, 255, 255, .82); }

/* Figura con título, etiqueta, pie y leyenda (CFD) */
.bomba-figura {
  background: var(--bg);
  border: 1px solid var(--filete);
  padding: clamp(20px, 2.4vw, 32px);
}
.bomba-figura > * { margin-block: 0; }
.bomba-figura__cabeza { gap: var(--space-3) var(--space-5); align-items: baseline; }
.bomba-figura__cabeza > * { margin: 0; }
.bomba-figura .bomba-figura__titulo { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--navy); }
.bomba-figura .bomba-figura__etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.bomba-figura .bomba-img { margin: var(--space-5) 0 !important; }
.bomba-img img { display: block; width: 100%; height: auto; }
.bomba-figura__pie { display: grid; gap: var(--space-4); }
.bomba-figura__pie > * { margin: 0; }
@media (min-width: 900px) {
  .bomba-figura__pie { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: var(--space-7); align-items: start; }
}
.bomba-figura .bomba-figura__texto { font-size: 14px; line-height: 1.65; color: var(--texto); }
.bomba-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bomba-leyenda li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto);
}
/* Muestras de la leyenda: tonos del render oscurecidos lo justo para
   llegar a 3:1 sobre el gris (el amarillo y el verde del render, tal cual,
   se quedaban en ~1,5-2:1). */
.bomba-leyenda li::before { content: ''; flex: none; width: 26px; height: 5px; border-radius: 3px; background: #2440c8; }
.bomba-leyenda li:nth-child(2)::before { background: #0c7f74; }
.bomba-leyenda li:nth-child(3)::before { background: #836d00; }

/* Tarjetas con imagen y pie (bloques 01 y 02) */
.bomba-tarjetas { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .bomba-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bomba-tarjeta {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--filete);
  background: var(--white);
}
.bomba-tarjeta > * { margin-block: 0; }
.bomba-tarjeta .bomba-img { margin: 0; padding: var(--space-4); flex: 1; display: flex; align-items: center; justify-content: center; }
/* Ancho automático (por la proporción de width/height) y no 100%: la caja
   de la imagen mide lo que se ve, y como WordPress añade sizes="auto" a las
   imágenes diferidas, el navegador elige la variante por ese ancho real. */
.bomba-tarjeta .bomba-img img { height: clamp(180px, 22vw, 300px); width: auto; max-width: 100%; object-fit: contain; }
.bomba-tarjeta__texto {
  margin: 0 !important;
  background: var(--bg);
  border-top: 1px solid var(--filete);
  padding: var(--space-5) clamp(20px, 2vw, 26px);
}
.bomba-tarjeta__texto > * { margin-block: 0; }
.bomba-tarjeta .bomba-tarjeta__titulo { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--navy); }
.bomba-tarjeta .bomba-tarjeta__pie { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--texto-suave); }

/* Banda navy de cierre («Diseño interior optimizado») */
.bomba-bloque .bomba-cierre {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  background: var(--navy);
  color: var(--white);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 32px);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  font-weight: 500;
}
.bomba-cierre::before {
  content: '';
  flex: none;
  width: 32px;
  height: 11px;
  background: var(--teal);
  transform: skewX(-35deg);
}

/* Proceso en cuatro pasos («Calidad en la fundición»): las líneas entre
   pasos salen del hueco de 1px de la rejilla sobre el fondo del filete, así
   sirven igual con 1, 2 o 4 columnas. */
.bomba-pasos {
  display: grid;
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
}
@media (min-width: 600px) { .bomba-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bomba-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bomba-paso { margin: 0 !important; background: var(--bg); padding: var(--space-5) clamp(20px, 2vw, 26px); }
.bomba-paso > * { margin-block: 0; }
.bomba-paso .bomba-paso__num { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--teal-d); font-variant-numeric: tabular-nums; }
.bomba-paso .bomba-paso__titulo { margin-top: 10px; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--navy); }
.bomba-paso .bomba-paso__texto { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--texto-suave); }

/* Foto en primer plano sobre negro + «Por qué importa» («Calidad en la
   fundición») */
.bomba-par { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .bomba-par { grid-template-columns: minmax(0, 812fr) minmax(0, 476fr); } }
.bomba-foto-negra {
  margin: 0 !important;
  background: #000;
  padding-bottom: clamp(20px, 2vw, 26px);
  display: flex;
  flex-direction: column;
}
.bomba-foto-negra > * { margin-block: 0; }
.bomba-foto-negra .bomba-img { margin: 0 0 auto; }
.bomba-foto-negra .bomba-foto-negra__etiqueta,
.bomba-foto-negra .bomba-foto-negra__pie { padding-inline: clamp(20px, 2vw, 26px); }
.bomba-foto-negra .bomba-foto-negra__etiqueta {
  margin-top: var(--space-5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--teal);
}
.bomba-foto-negra .bomba-foto-negra__pie { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .86); }

.bomba-importa {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background-color: var(--teal);
  background-image: url('/wp-content/themes/vitta-theme/assets/web/fondo-azulclaro.webp');
  background-repeat: repeat;
  color: var(--navy);
  padding: clamp(24px, 2.6vw, 36px);
}
.bomba-importa > * { margin-block: 0; }
.bomba-importa .bomba-importa__etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--navy);
}
.bomba-importa__etiqueta::before { content: ''; flex: none; width: 24px; height: 7px; background: currentColor; transform: skewX(-35deg); }
.bomba-importa .bomba-importa__titulo { margin-top: var(--space-4); font-size: clamp(22px, 2vw, 27px); line-height: 1.2; font-weight: 700; color: var(--navy); text-wrap: balance; }
.bomba-importa .bomba-importa__texto { margin-top: var(--space-4); font-size: 15px; line-height: 1.7; color: var(--navy); }
.bomba-importa .bomba-importa__final {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--navy) 70%, transparent);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--navy);
}
/* La frase final va abajo del todo (margin-top:auto), con un mínimo de
   aire aunque la tarjeta no crezca por la foto de al lado. */
.bomba-importa .bomba-importa__texto:has(+ .bomba-importa__final) { margin-bottom: var(--space-6); }

/* Pie de foto de la imagen de los moldes («Calidad en la fundición») */
.bomba-bloque__intro--foto .bomba-img { margin: 0; }
.bomba-bloque__intro--foto .bomba-img figcaption {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* ── «Alta capacidad de presión» ───────────────────────────────────────
   Intro con la tarjeta de la cifra a la derecha (celeste con el motivo de
   la marca, como «Por qué importa» de «Calidad en la fundición», que ya
   estaba medido). */
@media (min-width: 1024px) {
  .bomba-bloque__intro--cifra { grid-template-columns: minmax(0, 1fr) minmax(0, 496px); align-items: stretch; }
}
.bomba-cifra {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--teal);
  background-image: url('/wp-content/themes/vitta-theme/assets/web/fondo-azulclaro.webp');
  background-repeat: repeat;
  color: var(--navy);
  padding: clamp(28px, 3vw, 40px);
}
.bomba-cifra > * { margin-block: 0; }
.bomba-cifra .bomba-cifra__etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--navy);
}
.bomba-cifra .bomba-cifra__valor {
  margin-top: 6px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 70%, transparent);
  font-size: clamp(56px, 5.6vw, 80px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--navy);
}
.bomba-cifra .bomba-cifra__pie { margin-top: var(--space-4); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; font-weight: 500; color: var(--navy); }

/* Apartados: titular a la izquierda, texto a la derecha desde 900px. */
.bomba-apartados { display: grid; gap: var(--space-6); }
.bomba-apartado { margin: 0 !important; display: grid; gap: var(--space-3); }
.bomba-apartado > * { margin: 0; }
@media (min-width: 900px) {
  .bomba-apartado { grid-template-columns: minmax(0, 432px) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); }
}
.bomba-apartado .bomba-apartado__titulo {
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy);
  text-wrap: balance;
}
.bomba-apartado .bomba-apartado__texto { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: var(--texto); }

/* Comparativas antes/después: marco con filete, cabeza y cierre en gris
   claro, cuerpo blanco (las capturas tienen fondo blanco). La línea entre
   las dos columnas sale del hueco de 1px de la rejilla, como en los pasos
   de «Calidad en la fundición». */
.bomba-comparativa { margin: 0 !important; border: 1px solid var(--filete); background: var(--white); }
.bomba-comparativa > * { margin-block: 0; }
.bomba-comparativa__cabeza {
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  background: var(--bg);
  border-bottom: 1px solid var(--filete);
  padding: 18px clamp(20px, 2vw, 26px);
}
.bomba-comparativa__cabeza > * { margin: 0; }
.bomba-comparativa .bomba-comparativa__titulo { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--navy); }
.bomba-comparativa .bomba-comparativa__etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.bomba-comparativa__cuerpo { display: grid; gap: 1px; background: var(--filete); }
@media (min-width: 900px) { .bomba-comparativa__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bomba-comparativa__lado {
  margin: 0 !important;
  background: var(--white);
  padding: clamp(18px, 1.6vw, 22px) clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px);
  display: flex;
  flex-direction: column;
}
.bomba-comparativa__lado > * { margin-block: 0; }
.bomba-comparativa .bomba-comparativa__rotulo {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.bomba-comparativa .bomba-comparativa__rotulo--antes { color: #9a4510; background: #fdf1e7; }
.bomba-comparativa .bomba-comparativa__rotulo--despues { color: var(--teal-d); background: color-mix(in srgb, var(--teal) 12%, var(--white)); }
/* Captura: nunca por encima de su tamaño nativo (width:auto toma el ancho
   del atributo width; max-width la encoge si no cabe). Desde 900px, las dos
   del par al mismo alto; la caja del <img> mide lo que se ve, para que
   sizes="auto" elija bien la variante. */
.bomba-comparativa .bomba-img { margin: var(--space-4) 0 0; flex: 1; display: flex; flex-direction: column; }
.bomba-comparativa .bomba-img img { width: auto; max-width: min(100%, var(--nativo, 100%)); height: auto; margin-inline: auto; }
/* Tope explícito: WordPress pone sizes="auto" a las imágenes diferidas y,
   con eso, Chromium toma como ancho natural el de la caja — width:auto ya
   no limita nada y la captura se ampliaba (p. ej. a 800px de ancho). */
.bomba-img--fea-cuerpo { --nativo: 653px; }
.bomba-img--fea-difusor { --nativo: 658px; }
.bomba-img--fea-rodete-antes { --nativo: 580px; }
.bomba-img--fea-rodete-despues { --nativo: 571px; }
@media (min-width: 900px) {
  .bomba-comparativa .bomba-img img { height: clamp(300px, 29vw, 420px); object-fit: contain; }
}
.bomba-comparativa .bomba-img figcaption {
  margin: auto 0 0;
  padding-top: var(--space-4);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: var(--texto-suave);
}
.bomba-comparativa .bomba-comparativa__cierre {
  background: var(--bg);
  border-top: 1px solid var(--filete);
  padding: 16px clamp(20px, 2vw, 26px);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--navy);
}

/* ── «Estructura reforzada» ────────────────────────────────────────────
   Intro a dos mitades: número, etiqueta y titular a la izquierda;
   entradilla y párrafo a la derecha. */
@media (min-width: 1024px) {
  .bomba-bloque__intro--mitades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bomba-bloque .bomba-bloque__entradilla {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--texto);
}

/* Foto de los nervios en su tarjeta (clases de «Diseño interior
   optimizado») + panel «El punto crítico» (clases de «Por qué importa»,
   «Calidad en la fundición»). Aquí la foto va
   a todo el ancho de la tarjeta, no a alto fijo como en las otras. */
@media (min-width: 1024px) { .bomba-par--estructura { grid-template-columns: minmax(0, 740fr) minmax(0, 548fr); } }
.bomba-tarjeta--foto .bomba-img { padding: clamp(12px, 1.3vw, 18px); flex: 1; display: grid; }
.bomba-tarjeta--foto .bomba-img img { width: 100%; height: auto; }
/* Con el panel al lado, la tarjeta crece a su alto: la foto (una textura,
   admite recorte) llena el hueco en vez de dejar blanco debajo. */
@media (min-width: 1024px) {
  .bomba-tarjeta--foto .bomba-img img { height: 100%; min-height: 0; object-fit: cover; }
}

/* Cierre «El refuerzo, a la vista»: gris, con la foto sobre blanco a la
   izquierda y el texto a la derecha desde 900px. */
.bomba-vista {
  margin: 0 !important;
  display: grid;
  gap: var(--space-6);
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--filete);
  padding: clamp(20px, 2.6vw, 38px);
}
@media (min-width: 900px) { .bomba-vista { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 3.4vw, 48px); } }
.bomba-vista > * { margin: 0; }
/* La foto trae su propio fondo claro: ella misma hace de recuadro.
   Apaisada (868×734, recortada al contenido): la tarjeta mide lo que la
   foto, y el texto va centrado frente a ella sin hueco alrededor. Tope
   explícito a su ancho nativo (sizes="auto", ver «Alta capacidad de
   presión»). */
.bomba-vista .bomba-img { margin: 0; }
.bomba-vista .bomba-img img { width: 100%; max-width: 868px; height: auto; }
.bomba-vista__texto > * { margin-block: 0; }
.bomba-vista .bomba-vista__titulo {
  margin-top: var(--space-4);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--navy);
  text-wrap: balance;
}
.bomba-vista .bomba-vista__parrafo { margin-top: var(--space-4); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: var(--texto); }
.bomba-vista__parrafo strong { color: var(--navy); font-weight: 700; }
.bomba-vista .bomba-vista__final { margin-top: var(--space-4); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; font-weight: 700; color: var(--navy); }

/* ── «Control de calidad y trazabilidad» ───────────────────────────────
   Intro a dos mitades (la de «Estructura reforzada»). Cada paso de control
   va en su marco: cabeza gris (número + título, y etiqueta si la hay),
   cuerpo blanco con la imagen y pie gris con el texto. */
.bomba-control {
  margin: 0 !important;
  min-width: 0; /* elemento de rejilla: sin esto crece al ancho de la captura */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--filete);
  background: var(--white);
}
.bomba-control > * { margin-block: 0; }
.bomba-control__cabeza {
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  background: var(--bg);
  border-bottom: 1px solid var(--filete);
  padding: 18px clamp(20px, 2vw, 26px);
}
.bomba-control__cabeza > *,
.bomba-control__nombre > * { margin: 0; }
.bomba-control__nombre { gap: 14px; align-items: baseline; }
.bomba-control .bomba-control__num { font-size: 12px; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--teal-d); }
.bomba-control .bomba-control__titulo { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; font-weight: 700; color: var(--navy); }
.bomba-control .bomba-control__etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.bomba-control__cuerpo {
  margin: 0 !important;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  padding: clamp(16px, 2vw, 26px);
}
/* Informes, analizador y plano: filete fino alrededor y nunca por encima
   de su tamaño nativo. El tope va explícito (--nativo + los 2px del
   filete) y no con width:auto, que con el sizes="auto" de WordPress no
   limita nada en Chromium (ver «Alta capacidad de presión»). */
.bomba-control .bomba-img { margin: 0; width: calc(var(--nativo) + 2px); max-width: 100%; }
.bomba-control .bomba-img img { display: block; width: 100%; height: auto; border: 1px solid var(--filete); background: var(--white); }
.bomba-img--escaneo-rodete { --nativo: 709px; }
.bomba-img--escaneo-cuerpo { --nativo: 353px; }
.bomba-img--analizador { --nativo: 288px; }
.bomba-img--plano { --nativo: 686px; }
.bomba-control__pie {
  margin: 0 !important;
  background: var(--bg);
  border-top: 1px solid var(--filete);
  padding: var(--space-5) clamp(20px, 2vw, 26px);
}
.bomba-control__pie > * { margin-block: 0; }
.bomba-control .bomba-control__texto { font-size: 15px; line-height: 1.65; color: var(--texto); }
.bomba-control .bomba-control__final { margin-top: 10px; font-size: 15px; line-height: 1.55; font-weight: 700; color: var(--navy); }

/* Filas de dos (pasos 02-03 y paso 04): 500 / 788 en la maqueta. */
.bomba-control-fila { display: grid; gap: var(--space-5); }
.bomba-control-fila > * { margin: 0 !important; min-width: 0; }
@media (min-width: 1024px) { .bomba-control-fila { grid-template-columns: minmax(0, 500fr) minmax(0, 788fr); } }

/* Paso 04: foto del cuerpo con su matrícula + panel oscuro (Cover). */
.bomba-trazabilidad__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--filete);
  padding: clamp(20px, 3vw, 40px);
}
.bomba-trazabilidad__foto .bomba-img { margin: 0; width: 100%; max-width: 440px; }
.bomba-trazabilidad__foto .bomba-img img { display: block; width: 100%; height: auto; }
.bomba-trazabilidad.wp-block-cover {
  min-height: 0;
  padding: clamp(28px, 3vw, 40px);
  align-items: stretch;
  color: var(--white);
}
/* Velo: navy (color y opacidad del bloque) que vira a celeste oscuro por
   la derecha, como en la maqueta (el mismo recurso que la cabecera). */
.bomba-trazabilidad .wp-block-cover__background {
  background-image: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--teal-d) 75%, transparent) 100%);
}
.bomba-trazabilidad .wp-block-cover__inner-container { display: flex; flex-direction: column; color: inherit; }
.bomba-trazabilidad .wp-block-cover__inner-container > * { margin-block: 0; }
.bomba-trazabilidad__cabeza { gap: 14px; align-items: center; }
.bomba-trazabilidad__cabeza > * { margin: 0; }
.bomba-trazabilidad .bomba-trazabilidad__num { font-size: 12px; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--teal); }
.bomba-trazabilidad .bomba-trazabilidad__etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--teal);
}
.bomba-trazabilidad__etiqueta::before { content: ''; flex: none; width: 24px; height: 7px; background: currentColor; transform: skewX(-35deg); }
.bomba-trazabilidad .bomba-trazabilidad__titulo { margin-top: var(--space-4); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; font-weight: 700; color: var(--white); text-wrap: balance; }
.bomba-trazabilidad .bomba-trazabilidad__texto { margin-top: var(--space-4); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: rgba(255, 255, 255, .86); }
.bomba-trazabilidad__texto strong { color: var(--white); font-weight: 700; }
.bomba-trazabilidad .bomba-trazabilidad__final {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .5);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.5;
  font-weight: 700;
  /* El celeste de marca tal cual daba 4,24:1 donde el velo vira a celeste
     oscuro; aclarado hacia el blanco lo justo para pasar de 4,5:1. */
  color: color-mix(in srgb, var(--teal) 72%, var(--white));
}
/* Aire mínimo antes de la frase final, aunque el panel no crezca. */
.bomba-trazabilidad .bomba-trazabilidad__texto:has(+ .bomba-trazabilidad__final) { margin-bottom: var(--space-6); }

/* Banda «Lo que queda garantizado»: cuatro columnas desde 900px (dos desde
   560); las líneas entre columnas salen del hueco de 1px de la rejilla. */
.bomba-garantias { margin: 0 !important; }
.bomba-garantias > * { margin-block: 0; }
.bomba-garantias .bomba-garantias__etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.bomba-garantias__lista {
  margin-top: var(--space-4) !important;
  display: grid;
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
}
@media (min-width: 560px) { .bomba-garantias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bomba-garantias__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bomba-garantias__item { margin: 0 !important; background: var(--bg); padding: var(--space-5) clamp(20px, 2vw, 26px); }
.bomba-garantias__item > * { margin-block: 0; }
.bomba-garantias .bomba-garantias__titulo { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--navy); }
.bomba-garantias .bomba-garantias__texto { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--texto-suave); }

/* ── «Pruebas reales y de laboratorio» (#pruebas) ──────────────────────
   Texto y composición de la maqueta navegable (bloque 06). Intro con la
   tarjeta celeste a la derecha (la de «Alta capacidad de presión»), aquí
   con un rótulo en vez de una cifra y los dos niveles numerados debajo. */
.bomba-bloque .bomba-bloque__lema {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.26;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--teal-d);
}
.bomba-cifra .bomba-cifra__valor--texto {
  font-size: clamp(38px, 3.8vw, 52px);
  white-space: normal;
}
.bomba-niveles {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: nivel;
  display: grid;
  gap: 10px;
}
.bomba-niveles > li {
  counter-increment: nivel;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--navy);
}
.bomba-niveles > li::before {
  content: counter(nivel, decimal-leading-zero);
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

/* Panel oscuro «Cómo se ensaya una VITTA»: titular a la izquierda, texto
   a la derecha desde 1024px, y tres cifras debajo separadas por el hueco
   de 1px de la rejilla. */
.bomba-ensayo {
  --filete-claro: color-mix(in srgb, var(--teal) 34%, var(--navy));
  margin: 0 !important;
  background: color-mix(in srgb, var(--navy) 66%, #000);
  color: var(--white);
}
.bomba-ensayo > *,
.bomba-ensayo__cabeza > *,
.bomba-ensayo__titular > *,
.bomba-ensayo__cuerpo > *,
.bomba-ensayo__cifra > * { margin-block: 0; }
.bomba-ensayo__cabeza {
  display: grid;
  gap: var(--space-5);
  padding: clamp(24px, 3.2vw, 44px) clamp(20px, 3.4vw, 48px) clamp(24px, 2.6vw, 36px);
}
@media (min-width: 1024px) {
  .bomba-ensayo__cabeza { grid-template-columns: minmax(0, 640fr) minmax(0, 520fr); gap: clamp(40px, 4vw, 56px); align-items: start; }
}
.bomba-ensayo .bomba-ensayo__etiqueta,
.bomba-catalogo .bomba-catalogo__etiqueta,
.bomba-banco .bomba-banco__etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--teal);
}
.bomba-ensayo__etiqueta::before,
.bomba-catalogo__etiqueta::before,
.bomba-banco__etiqueta::before,
.bomba-nivel__etiqueta::before,
.bomba-completa__etiqueta::before { content: ''; flex: none; width: 24px; height: 7px; background: currentColor; transform: skewX(-35deg); }
.bomba-ensayo .bomba-ensayo__titulo {
  margin-top: var(--space-4);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}
.bomba-ensayo .bomba-ensayo__texto { font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.66; color: rgba(255, 255, 255, .84); }
.bomba-ensayo__texto + .bomba-ensayo__texto { margin-top: var(--space-4); }
.bomba-ensayo__texto strong { color: var(--white); font-weight: 700; }
.bomba-ensayo__cifras {
  display: grid;
  gap: 1px;
  background: var(--filete-claro);
  border-top: 1px solid var(--filete-claro);
}
@media (min-width: 700px) { .bomba-ensayo__cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bomba-ensayo__cifra {
  margin: 0 !important;
  background: color-mix(in srgb, var(--teal) 6%, color-mix(in srgb, var(--navy) 66%, #000));
  padding: clamp(20px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
}
.bomba-ensayo .bomba-ensayo__valor {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--teal);
}
.bomba-ensayo .bomba-ensayo__pie { margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .78); }

/* Niveles 01 y 02: texto a la izquierda y dos figuras a la derecha desde
   1024px. Las figuras comparten alto de marco: los protocolos van enteros
   sobre gris y nunca por encima de su tamaño nativo (ver «Alta capacidad
   de presión»); las fotos de campo llenan el marco con recorte. */
.bomba-nivel { margin: 0 !important; display: grid; gap: var(--space-5); }
.bomba-nivel > *,
.bomba-nivel__texto > *,
.bomba-nivel__figuras > *,
.bomba-casos > *,
.bomba-casos__cabeza > *,
.bomba-casos__titular > *,
.bomba-casos__lista > * { margin-block: 0; }
@media (min-width: 1024px) {
  .bomba-nivel { grid-template-columns: minmax(0, 440fr) minmax(0, 832fr); gap: clamp(32px, 3vw, 40px); align-items: start; }
}
.bomba-bloque .bomba-nivel__etiqueta,
.bomba-bloque .bomba-completa__etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.bomba-nivel__titulo {
  margin-top: var(--space-3) !important;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--navy);
  text-wrap: balance;
}
.bomba-bloque .bomba-nivel__parrafo { margin-top: var(--space-3); font-size: clamp(15px, 1.15vw, 15.5px); line-height: 1.64; color: var(--texto); }
.bomba-nivel__parrafo strong { color: var(--navy); font-weight: 700; }
.bomba-nivel__figuras { display: grid; gap: var(--space-5); }
@media (min-width: 600px) { .bomba-nivel__figuras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); } }
.bomba-nivel__figura { margin: 0 !important; min-width: 0; display: flex; flex-direction: column; }
.bomba-nivel__figura img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: clamp(300px, 46vw, 412px);
  border: 1px solid var(--filete);
}
.bomba-nivel__figura--documento img { object-fit: contain; padding: clamp(12px, 1.4vw, 18px); background: var(--bg); }
.bomba-nivel__figura--foto img { object-fit: cover; }
.bomba-img--ensayo-800cv img { object-position: 50% 42%; }
.bomba-img--ensayo-600cv img { object-position: 50% 40%; }
.bomba-nivel__figura figcaption,
.bomba-detalle figcaption {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  color: var(--texto-suave);
}
.bomba-nivel__figura figcaption strong,
.bomba-detalle figcaption strong {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-d);
}

/* «Dos casos reales»: cabecera (titular + entrada) y dos fichas. Cada
   ficha: cabeza gris, cuerpo blanco con las tres filas y resultado en
   navy con cuatro datos. */
.bomba-casos { margin: 0 !important; display: grid; gap: var(--space-5); }
.bomba-casos__cabeza { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) {
  .bomba-casos__cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: end; }
}
.bomba-bloque .bomba-casos__entrada { font-size: 15px; line-height: 1.62; color: var(--texto); }
.bomba-casos__lista { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .bomba-casos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.bomba-caso {
  margin: 0 !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--filete);
  background: var(--white);
}
.bomba-caso > *,
.bomba-caso__cabeza > * { margin-block: 0; }
.bomba-caso__cabeza {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--filete);
  padding: 20px clamp(20px, 2vw, 26px);
}
.bomba-caso .bomba-caso__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.bomba-caso__titulo { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); }
.bomba-caso .bomba-caso__pendiente {
  align-self: flex-start;
  padding: 4px 9px;
  border: 1px dashed var(--filete);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.bomba-caso__ficha { flex: 1; margin: 0; padding: 22px clamp(20px, 2vw, 26px); display: grid; gap: var(--space-4); align-content: start; }
/* Filas y datos: grupos y párrafos del núcleo (no hay bloque <dl>); sin
   márgenes propios, como tenían dt/dd, y con el prefijo .bomba-caso para
   ganar a «.bomba-bloque p { color: inherit }». */
.bomba-caso__fila > *,
.bomba-caso__dato > * { margin-block: 0; }
.bomba-caso__fila { display: grid; gap: 4px; }
@media (min-width: 480px) { .bomba-caso__fila { grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-4); } }
.bomba-caso__fila .bomba-caso__termino {
  padding-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.bomba-caso__fila .bomba-caso__definicion { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--texto); }
.bomba-caso__fila .bomba-caso__definicion strong { color: var(--navy); font-weight: 700; }
.bomba-caso .bomba-caso__resultado {
  background: var(--navy);
  padding: 14px clamp(20px, 2vw, 26px) 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--teal);
}
.bomba-caso__datos {
  --filete-claro: color-mix(in srgb, var(--teal) 30%, var(--navy));
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--filete-claro);
  border-top: 1px solid var(--filete-claro);
}
.bomba-caso__dato {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: color-mix(in srgb, var(--navy) 84%, #000);
  padding: clamp(16px, 1.6vw, 20px) clamp(16px, 1.7vw, 22px);
}
.bomba-caso__dato--acento { background: color-mix(in srgb, var(--teal-d) 22%, color-mix(in srgb, var(--navy) 84%, #000)); }
.bomba-caso .bomba-caso__rotulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--teal);
}
.bomba-caso__cifra { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px; }
.bomba-caso__valor {
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.bomba-caso__valor--texto { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; letter-spacing: -0.01em; }
.bomba-caso__dato--acento .bomba-caso__valor { color: var(--teal); }
.bomba-caso__unidad { font-size: 16px; font-weight: 700; color: var(--teal); }
.bomba-caso .bomba-caso__pie { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .74); }

/* «Decisión de catálogo» (Cover con la chapa perforada en gris, oscurecida,
   y el velo navy que vira a celeste oscuro, como la cabecera): texto a la
   izquierda y las tres cifras a la derecha desde 900px. */
.bomba-catalogo.wp-block-cover {
  margin: 0 !important;
  min-height: 0;
  padding: 0;
  align-items: stretch;
  color: var(--white);
  background: var(--navy);
}
.bomba-catalogo .wp-block-cover__image-background { filter: grayscale(1) contrast(1.06) brightness(.55); }
.bomba-catalogo .wp-block-cover__background {
  background-image: linear-gradient(104deg, transparent 38%, color-mix(in srgb, var(--teal-d) 62%, transparent) 100%);
}
.bomba-catalogo .wp-block-cover__inner-container { display: grid; color: inherit; width: 100%; }
.bomba-catalogo .wp-block-cover__inner-container > *,
.bomba-catalogo__texto > *,
.bomba-catalogo__cifras > *,
.bomba-catalogo__cifra > * { margin-block: 0; }
@media (min-width: 900px) {
  .bomba-catalogo .wp-block-cover__inner-container { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
.bomba-catalogo__texto { padding: clamp(24px, 3.2vw, 44px) clamp(20px, 3.4vw, 48px); }
.bomba-catalogo .bomba-catalogo__titulo {
  margin-top: var(--space-4);
  max-width: 22em;
  font-size: clamp(23px, 2.3vw, 32px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}
.bomba-catalogo .bomba-catalogo__parrafo { margin-top: var(--space-4); max-width: 820px; font-size: clamp(15px, 1.15vw, 15.5px); line-height: 1.64; color: rgba(255, 255, 255, .86); }
.bomba-catalogo__parrafo strong { color: var(--white); font-weight: 700; }
.bomba-catalogo__cifras {
  --filete-claro: rgba(255, 255, 255, .5); /* .42 de la demo: 2,88:1 en el peor píxel */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 3vw, 40px) clamp(24px, 3.2vw, 44px);
}
@media (min-width: 900px) {
  .bomba-catalogo__cifras { padding-block: clamp(24px, 3.2vw, 44px); border-left: 1px solid var(--filete-claro); }
}
.bomba-catalogo__cifra + .bomba-catalogo__cifra { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--filete-claro); }
.bomba-catalogo .bomba-catalogo__valor {
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .78);
}
.bomba-catalogo .bomba-catalogo__pie { margin-top: 5px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.bomba-catalogo .bomba-catalogo__cifra--principal .bomba-catalogo__valor {
  font-size: clamp(44px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--teal) 72%, var(--white));
}
.bomba-catalogo .bomba-catalogo__cifra--principal .bomba-catalogo__pie { margin-top: 7px; font-size: 13.5px; font-weight: 700; color: var(--white); }

/* «Banco de pruebas hidráulico propio» */
.bomba-banco {
  margin: 0 !important;
  background: var(--navy);
  color: var(--white);
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
}
.bomba-banco > * { margin-block: 0; }
.bomba-banco .bomba-banco__titulo { margin-top: var(--space-3); font-size: clamp(21px, 2vw, 26px); line-height: 1.18; font-weight: 700; letter-spacing: -0.012em; color: var(--white); }
.bomba-banco .bomba-banco__texto { margin-top: var(--space-3); font-size: 15px; line-height: 1.62; color: rgba(255, 255, 255, .82); }
.bomba-banco__texto strong { color: var(--white); font-weight: 700; }

/* ── «Pasión por el detalle» (#bomba-completa) ─────────────────────────
   Bloque de cierre sobre navy (maqueta, bloque 07). Mismas piezas de
   cabecera que el resto, con los colores de texto para fondo oscuro. */
.bomba-bloque--navy {
  --filete: rgba(255, 255, 255, .42);
  background: var(--navy);
  color: var(--white);
}
.bomba-bloque--navy .bomba-bloque__num { color: color-mix(in srgb, var(--teal) 70%, var(--navy)); } /* 62 % de la demo: 4,21:1 */
.bomba-bloque--navy .bomba-bloque__etiqueta { color: var(--teal); }
.bomba-bloque--navy .bomba-bloque__titular { color: var(--white); }
.bomba-bloque--navy .bomba-bloque__parrafo { color: rgba(255, 255, 255, .82); }
.bomba-bloque--navy .bomba-bloque__parrafo--final { color: var(--white); font-weight: 700; }

/* La bomba completa: tarjeta blanca con la foto (700×2184, fondo blanco)
   a la izquierda y el texto centrado frente a ella desde 900px. El tope
   de la foto va explícito, por alto (sizes="auto"). */
.bomba-completa {
  --texto: color-mix(in srgb, var(--navy) 85%, var(--white));
  --filete: color-mix(in srgb, var(--navy) 55%, var(--white));
  margin: 0 !important;
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  align-items: center;
  background: var(--white);
  color: var(--navy);
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4.2vw, 60px);
}
.bomba-completa > *,
.bomba-completa__texto > * { margin-block: 0; }
@media (min-width: 900px) {
  .bomba-completa { grid-template-columns: minmax(0, 420px) minmax(0, 600px); gap: clamp(32px, 4vw, 56px); justify-content: start; justify-items: start; }
}
.bomba-completa .bomba-img { margin: 0; justify-self: center; }
.bomba-completa .bomba-img img { display: block; height: clamp(560px, 68vw, 980px); width: auto; max-width: 100%; object-fit: contain; }
.bomba-completa__titulo {
  margin-top: var(--space-4) !important;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.bomba-completa .bomba-completa__parrafo { margin-top: var(--space-4); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.64; color: var(--texto); }
.bomba-completa .bomba-completa__final {
  margin-top: var(--space-4);
  padding-top: 18px;
  border-top: 1px solid var(--filete);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--navy);
}

/* Los cuatro detalles: marco de alto fijo sobre casi negro. Tres fotos lo
   llenan con recorte; la rejilla (pieza entera sobre fondo oscuro) va
   contenida. */
.bomba-detalles { margin: 0 !important; display: grid; gap: var(--space-5); }
.bomba-detalles > * { margin-block: 0; }
@media (min-width: 560px) { .bomba-detalles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bomba-detalles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bomba-detalle { margin: 0 !important; min-width: 0; }
.bomba-detalle img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: clamp(190px, 26vw, 212px);
  object-fit: cover;
  background: #0c0c14;
}
.bomba-detalle--marcaje img { object-position: 50% 49%; }
.bomba-detalle--rejilla img { object-fit: contain; padding: 10px; }
.bomba-bloque--navy .bomba-detalle figcaption { color: rgba(255, 255, 255, .74); }
.bomba-bloque--navy .bomba-detalle figcaption strong { color: var(--teal); }

/* La roseta: la tarjeta «a la vista» de «Estructura reforzada», aquí con
   la foto sobre blanco a la izquierda (más estrecha) y el texto sobre
   gris, sin relleno común. */
.bomba-vista--roseta {
  --texto: color-mix(in srgb, var(--navy) 85%, var(--white));
  --filete: color-mix(in srgb, var(--navy) 55%, var(--white));
  padding: 0;
  gap: 0;
  border: 0;
  align-items: stretch;
  color: var(--navy);
}
@media (min-width: 900px) { .bomba-vista--roseta { grid-template-columns: minmax(0, 520fr) minmax(0, 792fr); gap: 0; } }
.bomba-vista--roseta .bomba-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: clamp(20px, 2.2vw, 28px);
}
.bomba-vista--roseta .bomba-img img { max-width: min(100%, 464px); }
.bomba-vista--roseta .bomba-vista__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3.6vw, 48px) clamp(20px, 3.8vw, 52px);
}
.bomba-vista--roseta .bomba-vista__final { padding-top: 14px; border-top: 1px solid var(--filete); }

/* Frase de cierre de la página: la banda de «Diseño interior optimizado»
   sin caja, sobre el navy del bloque. */
.bomba-bloque .bomba-cierre--final {
  background: none;
  padding: var(--space-4) 0 0;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--white);
}