/*
  Página del recurso (30/10/2026): la landing de un checklist, diagnóstico,
  calculadora o comparador con secciones debajo del asistente. Las elige el dueño
  en el creador de landings (bloque `_resource_page`, routes/captación/recurso_pagina.py)
  y la landing pública pone entonces `nb-resource-page` en el body.

  El asistente deja de ser una capa fija sobre todo (position: fixed; inset: 0;
  z-index: 9999) y pasa a ser la primera pantalla de la página, para que debajo
  quepan las secciones. Las landings de nextblog.es van siempre así y además
  llevan el menú y el pie de la web (static/css/platform_chrome.css ajusta el hueco
  del menú). Nació en ese fichero y se sacó aquí cuando el usuario pidió que
  cualquier cliente pudiera montarlo.
*/

/* ---- El asistente, primera pantalla de la página ---- */
/* En checklist y diagnóstico el asistente ocupa la pantalla entera y el hero no
   se ve: sin separación arriba, el asistente es lo primero. */
body.nb-resource-page.nb-resource-wizard .landing-shell { padding-top: 0; }
/* El envoltorio de la landing mide 100vh como minimo (min-height) aunque su hero
   este oculto, y lo que lleva (el hero con el titular en <p>, el formulario
   estandar) se veria antes del asistente: se oculta. Sigue en el DOM: el script
   del escenario usa su formulario para enviar el muro. La landing lo fija con
   triple id e !important (landing_pública.html): hay que superarlo con la misma arma. */
body.nb-resource-page.nb-resource-wizard #landingContentWrapper#landingContentWrapper#landingContentWrapper {
  min-height: 0 !important;
  display: none !important;
}
/* Su cabecera (barra de progreso) y su pie (flechas) se anclan a la sección. */
body.nb-resource-page .checklist-fullscreen,
body.nb-resource-page .diagnostic-fullscreen,
body.nb-resource-page .nbi-stage {
  position: relative;
  inset: auto;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  z-index: 1;
}
/* Calculadora, comparador y curso: la intro lleva los campos y el boton y no
   siempre cabe en una pantalla. El escenario crece con su contenido; una pantalla
   es el minimo, no el tope. */
body.nb-resource-page .nbi-stage {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}
body.nb-resource-page .nbi-stage .nbi-body { overflow: visible; }
body.nb-resource-page .checklist-header,
body.nb-resource-page .diagnostic-header,
body.nb-resource-page .checklist-footer,
body.nb-resource-page .diagnostic-footer {
  position: absolute;
}

/* ---- Resultados en la misma página (checklist y diagnóstico) ---- */
/* Esos dos asistentes no navegan al terminar: destapan #thank-you (dentro del
   envoltorio) con la pantalla de «analizando» y luego los resultados. Un script
   de landing_pública.html quita entonces nb-resource-wizard y pone
   nb-resource-results: vuelve el envoltorio y desaparecen el asistente y las
   secciones, como en la página de gracias que sirve el servidor. */
body.nb-resource-page.nb-resource-results .checklist-fullscreen,
body.nb-resource-page.nb-resource-results .diagnostic-fullscreen,
body.nb-resource-page.nb-resource-results .nb-seo-summary,
body.nb-resource-page.nb-resource-results .nb-ficha-band {
  display: none !important;
}

/* ---- Secciones del dueño: son bandas del resumen (nb-seo-band) y toman los
   colores del fondo que lleven (data-section-bg, variables --band-*): así se pueden
   reordenar y cambiar de fondo sin que nada quede ilegible. ---- */
.nb-seo-summary .nb-ficha-stats { padding: 4.5rem 1.25rem; }
.nb-seo-summary .nb-ficha-stats h2 { margin-bottom: 2.25rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.nb-ficha-lead { margin: 0 0 2.5rem; font-size: 1.2rem; line-height: 1.65; color: inherit; }
.nb-ficha-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--band-blue);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}
.nb-ficha-link:hover { text-decoration: underline; }

/* Cifras: el número grande en el color de la marca, sin tarjetas. */
.nb-ficha-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 2rem 3rem;
}
.nb-ficha-stat-list strong {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--band-blue);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.nb-ficha-stat-list span { display: block; max-width: 22em; color: inherit; font-size: 1.08rem; line-height: 1.55; }
.nb-ficha-note { margin: 2.25rem 0 0; color: var(--band-muted); font-size: 0.9rem; }

/* Puente al servicio: texto y, si la hay, una imagen. */
.nb-ficha-bridge .nb-ficha-lead { opacity: 0.88; }
/* Media columna: con el tamaño de las demás bandas el título ocupaba cinco líneas. */
.nb-seo-summary .nb-ficha-bridge h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.nb-ficha-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem 4.5rem;
  align-items: center;
}
.nb-ficha-bridge.is-sin-imagen .nb-ficha-split { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.nb-ficha-split-text .nb-ficha-lead { margin-bottom: 2rem; }
.nb-ficha-shot {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.nb-ficha-shot img { display: block; width: 100%; height: auto; }

/* Otros recursos: filas con línea, como el bloque de enlaces de la web. */
.nb-ficha-related-list { list-style: none; margin: 0 0 2.25rem; padding: 0; border-top: 1px solid var(--band-line); }
.nb-ficha-related-list li { border-bottom: 1px solid var(--band-line); }
.nb-ficha-related-item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.6rem 0;
  color: inherit;
  text-decoration: none;
}
.nb-ficha-related-item:hover h3 { color: var(--band-blue); }
.nb-ficha-related-icon.nb-cover {
  justify-content: center;
  align-items: center;
  width: 3.25rem;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 12px;
  font-size: 1.45rem;
}
.nb-ficha-related-icon.nb-cover::before { display: none; }
.nb-ficha-related-meta {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--band-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nb-ficha-related-copy h3 { margin: 0 0 0.35rem; font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: inherit; transition: color 0.15s ease; }
.nb-ficha-related-desc { display: block; color: var(--band-muted); font-size: 1rem; line-height: 1.55; }
.nb-ficha-related-go { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--band-blue); font-weight: 700; white-space: nowrap; }

/* Preguntas frecuentes: filas desplegables con línea, sin cajas. */
.nb-ficha-faq-list { border-top: 1px solid var(--band-line); }
.nb-ficha-faq-item { border-bottom: 1px solid var(--band-line); }
.nb-ficha-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.45rem 0;
  cursor: pointer;
  list-style: none;
}
.nb-ficha-faq-item summary::-webkit-details-marker { display: none; }
.nb-ficha-faq-item summary h3 { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.35; color: inherit; }
.nb-ficha-faq-item summary i { flex: none; color: var(--band-blue); font-size: 1.5rem; transition: transform 0.2s ease; }
.nb-ficha-faq-item[open] summary i { transform: rotate(45deg); }
.nb-ficha-faq-item p { margin: 0 0 1.45rem; max-width: 75ch; font-size: 1.08rem; line-height: 1.65; }
.nb-ficha-faq-links a { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 1.5rem; color: var(--band-blue); font-weight: 700; text-decoration: none; }
.nb-ficha-faq-links a:hover { text-decoration: underline; }

@media (max-width: 899.98px) {
  .nb-seo-summary .nb-ficha-stats { padding: 3.5rem 1rem; }
  .nb-ficha-split { grid-template-columns: minmax(0, 1fr); }
  .nb-ficha-related-item { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; }
  .nb-ficha-related-icon.nb-cover { width: 2.75rem; font-size: 1.2rem; }
  .nb-ficha-related-go { grid-column: 2; }
}

/* ---- Composiciones de las secciones del dueño (data-section-layout, elegidas en el
   modal de sección; las variantes vivas están en SECTION_LAYOUTS). ---- */
.nb-ficha-stats[data-section-layout="cards"] .nb-ficha-stat-list li { background: var(--band-panel); border: 1px solid var(--band-line); border-radius: 14px; padding: 2rem; }
.nb-ficha-bridge[data-section-layout="centered"] .nb-ficha-split { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin: 0 auto; text-align: center; }
.nb-ficha-bridge[data-section-layout="centered"] .nb-ficha-link { justify-content: center; }
.nb-ficha-related[data-section-layout="cards"] .nb-ficha-related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; border: 0; }
.nb-ficha-related[data-section-layout="cards"] .nb-ficha-related-list li { border: 1px solid var(--band-line); border-radius: 14px; background: var(--band-panel); padding: 1.5rem; }
.nb-ficha-related[data-section-layout="cards"] .nb-ficha-related-item { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0; }
.nb-ficha-faq[data-section-layout="columns"] .nb-ficha-faq-list { columns: 2; column-gap: 3rem; }
.nb-ficha-faq[data-section-layout="columns"] .nb-ficha-faq-item { break-inside: avoid; }
@media (max-width: 899.98px) {
  .nb-ficha-faq[data-section-layout="columns"] .nb-ficha-faq-list { columns: 1; }
}

/* ---- Estilo «bandas» (_resource_page.estilo, 08/11/2026) ----
   Las fichas de Xtrategic Platform con su kit (nextblog_kit/static/css/recursos.css), con
   los colores de la landing: niebla = el principal muy claro, marfil = el fondo, petróleo
   oscuro = el acento, tinta = el texto; lo destacado (raya, aro, botón) = --nbk-hi. Los
   títulos van en la letra de la landing; el texto, en la del estilo si la hay. Maqueta:
   templates/captación/_recurso_bandas.html. */
/* Doble clase: el <style> de _landing_seo_summary.html, que va después, pone letra y color a .nb-seo-summary. */
.nb-seo-summary.nb-seo-summary--bandas {
  --nbk-primary: var(--landing-primary, #355f72);
  --nbk-deep: var(--landing-accent, #173b4b);
  --nbk-ivory: var(--landing-bg, #fefefb);
  --nbk-ink: var(--landing-text, #20333b);
  --nbk-muted: color-mix(in srgb, color-mix(in srgb, var(--nbk-primary) 30%, var(--nbk-ink)) 80%, #ffffff);
  --nbk-mist: color-mix(in srgb, var(--nbk-primary) 5%, #f7fcfd);
  --nbk-line: color-mix(in srgb, var(--nbk-primary) 16%, #ffffff);
  --nbk-paper: color-mix(in srgb, var(--nbk-ivory) 97%, var(--nbk-ink));
  --nbk-light: color-mix(in srgb, var(--nbk-primary) 72%, #a5d3e6);
  --nbk-head-font: var(--landing-font, inherit);
  color: var(--nbk-ink);
  font-family: var(--nbk-font-text, var(--landing-font, inherit));
  line-height: 1.5;
}
.nb-seo-summary--bandas .nb-seo-band {
  padding: 5rem 0;
  background: var(--section-bg-custom, var(--nbk-ivory));
  color: var(--section-text-custom, var(--nbk-ink));
}
.nb-seo-summary--bandas .nbk-band--seq:nth-child(odd of .nbk-band--seq),
.nb-seo-summary--bandas .nbk-band--mist { background: var(--section-bg-custom, var(--nbk-mist)); }
.nb-seo-summary--bandas .nb-seo-band-inner { width: 100%; }
.nb-seo-summary--bandas .nbk-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
/* Como en la web del kit: medidas con el borde y el relleno dentro. */
.nb-seo-summary--bandas *, .nb-seo-summary--bandas *::before, .nb-seo-summary--bandas *::after { box-sizing: border-box; overflow-wrap: anywhere; }

/* Cabecera de cada banda, a la izquierda. */
.nb-seo-summary--bandas .nbk-head { max-width: 760px; margin-bottom: 2rem; }
.nb-seo-summary--bandas .nbk-head h2,
.nb-seo-summary--bandas .nbk-faq h2,
.nb-seo-summary--bandas .nbk-bridge h2 {
  margin: 0 0 1rem;
  color: var(--section-title-custom, var(--nbk-deep));
  font-family: var(--nbk-head-font);
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.nb-seo-summary--bandas .nbk-head p { margin: 0; color: var(--nbk-muted); font-size: 1.05rem; line-height: 1.75; }
.nb-seo-summary--bandas .nbk-head p strong { font-weight: inherit; color: inherit; }

/* Tarjetas con raya y niveles. */
.nb-seo-summary--bandas .nbk-features,
.nb-seo-summary--bandas .nbk-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nb-seo-summary--bandas .nbk-feature,
.nb-seo-summary--bandas .nbk-tier { min-width: 0; padding: 1.5rem; border: 1px solid var(--nbk-line); border-radius: 16px; background: #ffffff; }
.nb-seo-summary--bandas .nbk-feature::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 1.25rem; background: var(--nbk-hi); }
.nb-seo-summary--bandas .nbk-feature h3,
.nb-seo-summary--bandas .nbk-timeline h3,
.nb-seo-summary--bandas .nbk-tier h3 {
  margin: 0 0 0.65rem;
  color: var(--nbk-deep);
  font: 700 1.125rem/1.35 var(--nbk-head-font);
  letter-spacing: -0.015em;
}
.nb-seo-summary--bandas .nbk-feature p,
.nb-seo-summary--bandas .nbk-timeline p,
.nb-seo-summary--bandas .nbk-tier p { margin: 0; color: var(--nbk-muted); line-height: 1.75; }
.nb-seo-summary--bandas .nbk-checks { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--nbk-muted); line-height: 1.6; }
.nb-seo-summary--bandas .nbk-checks li + li { margin-top: 0.35rem; }
.nb-seo-summary--bandas .nbk-tier {
  border-top: 3px solid var(--nbk-primary);
  border-top-color: color-mix(in srgb, var(--nbk-deep) calc((var(--nbk-tier-step, 1) - 1) / max(1, var(--nbk-tier-total, 1) - 1) * 100%), var(--nbk-light));
}
.nb-seo-summary--bandas .nbk-tier-range {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 10px;
  background: var(--nbk-mist);
  color: var(--nbk-deep);
  font-size: 0.875rem;
  font-weight: 700;
}

/* Pasos en línea con un aro del color destacado. */
.nb-seo-summary--bandas .nbk-timeline { max-width: 860px; margin: 0; padding: 0; list-style: none; }
.nb-seo-summary--bandas .nbk-timeline li { position: relative; margin-left: 7px; padding: 0 0 2rem 2rem; border-left: 1px solid var(--nbk-line); }
.nb-seo-summary--bandas .nbk-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.nb-seo-summary--bandas .nbk-timeline li::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: -7px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--nbk-hi);
  border-radius: 50%;
  background: var(--nbk-ivory);
  box-sizing: border-box;
}

/* Cifras: el número grande sobre su explicación, con una línea encima. */
.nb-seo-summary--bandas .nbk-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nb-seo-summary--bandas .nbk-metrics li { position: relative; min-width: 0; padding-top: 1.5rem; border-top: 1px solid var(--nbk-line); }
.nb-seo-summary--bandas .nbk-metrics strong {
  display: block;
  margin: 0 0 0.6rem;
  color: var(--nbk-deep);
  font: 700 clamp(2.2rem, 4vw, 3.5rem)/1.1 var(--nbk-head-font);
  letter-spacing: -0.03em;
}
.nb-seo-summary--bandas .nbk-metrics span { display: block; max-width: 30ch; color: var(--nbk-muted); font-size: 1rem; font-weight: 400; line-height: 1.65; }
.nb-seo-summary--bandas .nbk-note { margin: 2rem 0 0; color: var(--nbk-muted); font-size: 0.9rem; }

/* Párrafos. */
.nb-seo-summary--bandas .nbk-prose { max-width: 72ch; line-height: 1.75; }
.nb-seo-summary--bandas .nbk-prose p { margin: 0 0 1.25rem; }
.nb-seo-summary--bandas .nbk-prose p:last-child { margin-bottom: 0; }

/* Cierre: banda del acento, texto a la izquierda y el botón destacado a la derecha. */
.nb-seo-summary--bandas .nbk-bridge { background: var(--section-bg-custom, var(--nbk-deep)); }
.nb-seo-summary--bandas .nbk-bridge-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: center; }
.nb-seo-summary--bandas .nbk-bridge-text { max-width: 760px; }
.nb-seo-summary--bandas .nbk-bridge h2 { color: var(--section-title-custom, #ffffff); }
.nb-seo-summary--bandas .nbk-bridge p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; line-height: 1.75; }
.nb-seo-summary--bandas .nbk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 100%;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--nbk-hi);
  color: var(--nbk-on-hi);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.25s ease;
}
.nb-seo-summary--bandas .nbk-button:hover { background: color-mix(in srgb, var(--nbk-hi) 88%, #ffffff); color: var(--nbk-on-hi); transform: translateY(-2px); }
.nb-seo-summary--bandas .nbk-button:focus-visible { outline: 3px solid var(--nbk-hi); outline-offset: 4px; }
/* Botón del cierre claro (_resource_page.boton_cierre = «claro»): el fondo de las bandas y el
   texto del acento, como el de Mi vida como enfermera. */
.nb-seo-summary--bandas[data-nbk-boton-cierre="claro"] .nbk-bridge .nbk-button { background: var(--nbk-mist); color: var(--nbk-deep); }
.nb-seo-summary--bandas[data-nbk-boton-cierre="claro"] .nbk-bridge .nbk-button:hover { background: #ffffff; color: var(--nbk-deep); }

/* Preguntas: cajas blancas apiladas, la primera abierta. */
.nb-seo-summary--bandas .nbk-faq h2 { margin-bottom: 2rem; }
.nb-seo-summary--bandas .nbk-faq .nb-ficha-faq-list { display: grid; gap: 0.75rem; max-width: 960px; border: 0; }
.nb-seo-summary--bandas .nbk-faq .nb-ficha-faq-item { padding: 0.2rem 1.5rem; border: 1px solid var(--nbk-line); border-radius: 16px; background: #ffffff; }
.nb-seo-summary--bandas .nbk-faq .nb-ficha-faq-item summary { padding: 0.95rem 0; }
.nb-seo-summary--bandas .nbk-faq .nb-ficha-faq-item summary h3 { color: var(--nbk-deep); font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.nb-seo-summary--bandas .nbk-faq .nb-ficha-faq-item summary i { color: var(--nbk-primary); font-size: 1.1rem; line-height: 1; }
.nb-seo-summary--bandas .nbk-faq .nb-ficha-faq-item p { max-width: 72ch; margin: 0 0 1rem; color: var(--nbk-muted); font-size: 1rem; line-height: 1.7; }
.nb-seo-summary--bandas .nbk-faq .nb-ficha-faq-item summary:focus-visible { outline: 3px solid var(--nbk-light); outline-offset: 4px; }

/* «Más recursos»: tarjetas con portada, como las de la página de recursos. */
.nb-seo-summary--bandas .nbk-related { padding: 4rem 0 4.5rem; border-top: 1px solid var(--nbk-line); background: var(--section-bg-custom, var(--nbk-paper)); }
.nb-seo-summary--bandas .nbk-related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1.75rem;
}
.nb-seo-summary--bandas .nbk-related-head h2 {
  margin: 0;
  color: var(--section-title-custom, var(--nbk-deep));
  font-family: var(--nbk-head-font);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.nb-seo-summary--bandas .nbk-text-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--nbk-primary); font-weight: 700; text-decoration: none; }
.nb-seo-summary--bandas .nbk-text-link i { font-size: 0.95em; transition: transform 0.15s ease; }
.nb-seo-summary--bandas .nbk-text-link:hover { color: var(--nbk-deep); text-decoration: underline; }
.nb-seo-summary--bandas .nbk-text-link:hover i { transform: translateX(2px); }
.nb-seo-summary--bandas .nbk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; }
.nb-seo-summary--bandas .nbk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--nbk-line);
  border-radius: 16px;
  background: #ffffff;
  transition: border-color 0.2s ease;
}
.nb-seo-summary--bandas .nbk-card:hover { border-color: var(--nbk-light); }
.nb-seo-summary--bandas .nbk-card:focus-within { outline: 3px solid color-mix(in srgb, var(--nbk-hi) 55%, transparent); outline-offset: 3px; }
.nb-seo-summary--bandas .nbk-tone--petroleo { --nbk-cover-from: var(--nbk-primary); --nbk-cover-to: var(--nbk-deep); }
.nb-seo-summary--bandas .nbk-tone--acero { --nbk-cover-from: var(--nbk-primary); --nbk-cover-to: var(--nbk-primary); }
.nb-seo-summary--bandas .nbk-tone--niebla { --nbk-cover-from: var(--nbk-light); --nbk-cover-to: var(--nbk-primary); }
.nb-seo-summary--bandas .nbk-tone--abismo { --nbk-cover-from: color-mix(in srgb, var(--nbk-primary) 45%, var(--nbk-deep)); --nbk-cover-to: color-mix(in srgb, var(--nbk-deep) 72%, #000000); }
.nb-seo-summary--bandas .nbk-cover {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  aspect-ratio: 16 / 9;
  padding: 1.35rem 1.5rem 1.2rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--nbk-cover-from, var(--nbk-primary)) 0%, var(--nbk-cover-to, var(--nbk-deep)) 100%);
  color: #ffffff;
  text-decoration: none;
  isolation: isolate;
}
.nb-seo-summary--bandas .nbk-cover::before {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -46%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  z-index: -1;
}
.nb-seo-summary--bandas .nbk-cover-type {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.nb-seo-summary--bandas .nbk-cover-type i { font-size: 0.85rem; }
.nb-seo-summary--bandas .nbk-cover-title { display: block; max-width: 88%; font: 700 clamp(1.25rem, 1.8vw, 1.4rem)/1.22 var(--nbk-head-font); letter-spacing: -0.015em; }
.nb-seo-summary--bandas .nbk-cover--image { padding-bottom: 0; }
.nb-seo-summary--bandas .nbk-cover-shot {
  position: absolute;
  top: 4rem;
  left: 9%;
  width: 82%;
  height: calc(100% - 2.5rem);
  padding: 5px 5px 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 42, 54, 0.28);
  box-sizing: border-box;
}
.nb-seo-summary--bandas .nbk-cover-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.nb-seo-summary--bandas .nbk-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1.25rem 1.4rem 1.5rem; }
.nb-seo-summary--bandas .nbk-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nb-seo-summary--bandas .nbk-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--nbk-mist);
  color: var(--nbk-muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.nb-seo-summary--bandas .nbk-card-title { margin: 0; color: var(--nbk-ink); font: 700 1.08rem/1.35 var(--nbk-head-font); letter-spacing: -0.01em; }
.nb-seo-summary--bandas .nbk-card-title a { color: inherit; text-decoration: none; }
.nb-seo-summary--bandas .nbk-card-title a::after { content: ""; position: absolute; inset: 0; }
.nb-seo-summary--bandas .nbk-card:hover .nbk-card-title a { color: var(--nbk-primary); }
.nb-seo-summary--bandas .nbk-card-title a:focus-visible { outline: none; }
.nb-seo-summary--bandas .nbk-card-desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--nbk-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

@media (max-width: 899.98px) {
  .nb-seo-summary--bandas .nbk-bridge-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .nb-seo-summary--bandas .nb-seo-band:not(.nbk-related) { padding: 3.5rem 0; }
  .nb-seo-summary--bandas .nbk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nb-seo-summary--bandas .nbk-container { width: min(100% - 30px, 680px); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-seo-summary--bandas .nbk-card,
  .nb-seo-summary--bandas .nbk-button,
  .nb-seo-summary--bandas .nbk-text-link i { transition: none; }
  .nb-seo-summary--bandas .nbk-button:hover,
  .nb-seo-summary--bandas .nbk-text-link:hover i { transform: none; }
}

/* Estilo «bandas» (el aspecto del kit de Xtrategic, 08/11/2026): la base que el kit heredaba de
   la web que lo envolvía (Bootstrap). Sin ella, el asistente empezaba 45 px más abajo (sus
   cajas medían el relleno aparte), los textos sin interlineado propio salían más apretados y la
   tecla «Enter» de la calculadora, clara. Con especificidad cero, como en Bootstrap: cualquier
   regla de la landing manda, igual que mandaba en el kit. */
:where(body.nb-estilo-bandas) { line-height: 1.5; }
:where(body.nb-estilo-bandas) *,
:where(body.nb-estilo-bandas) *::before,
:where(body.nb-estilo-bandas) *::after { box-sizing: border-box; }
:where(body.nb-estilo-bandas) kbd { padding: .1875rem .375rem; font-size: .875em; color: #fff; background-color: #212529; border-radius: .25rem; }
/* Los márgenes de Bootstrap para textos y títulos (sin el de arriba que pone el navegador): el
   subtítulo de la descargable salía 16 px más abajo en el móvil. */
:where(body.nb-estilo-bandas) :is(p, ol, ul, dl) { margin-top: 0; margin-bottom: 1rem; }
:where(body.nb-estilo-bandas) :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: .5rem; }
/* Los campos y botones heredan letra e interlineado (la calculadora medía 9-13 px menos). */
:where(body.nb-estilo-bandas) :is(input, button, select, optgroup, textarea) { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
/* Como el kit (nextblog_kit/templates/nextblog/landing.html): sin partición automática de
   palabras («cua-drante») y el subtítulo pegado al título (en la vista incrustada no estaba la
   copia reforzada que le pone 16 px). Seis ids (cuatro veces el envoltorio y dos :not(#…)) para
   pasar por encima de esa copia (tres ids, el de la landing, clases y !important). */
body.nb-estilo-bandas #landingContentWrapper#landingContentWrapper#landingContentWrapper#landingContentWrapper:not(#nb-x):not(#nb-y) :is(h1, h2, h3, h4, p, label, .landing-title, .landing-subtitle, .form-intro, .field-label, .image-description) {
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}
body.nb-estilo-bandas #landingContentWrapper#landingContentWrapper#landingContentWrapper#landingContentWrapper:not(#nb-x):not(#nb-y) .hero-section .landing-subtitle {
  margin-top: 0 !important;
}

/* ---- Enlaces agrupados debajo del puente y aviso encima del recurso (09/11/2026) ---- */
.nb-ficha-learning, .nbk-learning {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.75rem 3rem;
  margin-top: 2.5rem;
}
.nb-ficha-learning h3, .nbk-learning h3 { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 700; color: inherit; }
.nb-ficha-learning ul, .nbk-learning ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.nb-ficha-learning a, .nbk-learning a { color: inherit; text-decoration: underline; text-underline-offset: 3px; line-height: 1.45; }
.nb-ficha-learning a:hover, .nbk-learning a:hover { opacity: .85; }
/* En el cierre oscuro de las bandas, como en Mi vida como enfermera: enlaces blancos y el título
   de cada grupo en el color de las bandas. */
.nb-seo-summary--bandas .nbk-bridge .nbk-learning { color: #ffffff; }
.nb-seo-summary--bandas .nbk-bridge .nbk-learning h3 { color: var(--nbk-mist); }
/* La nota antes de «Más recursos» (_resource_page.nota: «Material educativo…»). */
.nb-seo-summary--bandas .nbk-nota { padding: 1.5rem 0; }
.nb-seo-summary--bandas .nbk-nota p { max-width: 72ch; margin: 0; color: var(--nbk-muted); font-size: .875rem; line-height: 1.7; }
.nb-recurso-aviso { box-sizing: border-box; width: 100%; padding: .9rem 1.25rem; background: color-mix(in srgb, currentColor 6%, #fff); }
.nb-recurso-aviso p { box-sizing: border-box; max-width: 1180px; margin: 0 auto; font-size: .95rem; font-weight: 600; line-height: 1.5; }