/* Tema claro SINBIO. Se activa cuando el sitio no tiene el estado oscuro.
   Conserva el azul como ancla de marca, el cian para jerarquía y el verde
   únicamente para acciones o estados positivos. */
html:not([data-theme="dark"]) {
  color-scheme: light;
  --sinbio-ink: #082b47;
  --sinbio-muted: #416279;
  --sinbio-blue: #0069c9;
  --sinbio-cyan: #00a9d6;
  --sinbio-green: #18a867;
  --sinbio-surface: #ffffff;
  --sinbio-tint: #eef8ff;
  --sinbio-border: rgba(0, 92, 167, .15);
  background: #f7fbff;
}

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) main {
  color: var(--sinbio-ink);
  background: #f7fbff;
}

/* Las secciones de contenido dejan de heredar el lienzo nocturno y conservan
   alternancia muy sutil para que el recorrido siga siendo fácil de escanear. */
html:not([data-theme="dark"]) .intro,
html:not([data-theme="dark"]) .services,
html:not([data-theme="dark"]) .service-focus,
html:not([data-theme="dark"]) .sectors,
html:not([data-theme="dark"]) .proof,
html:not([data-theme="dark"]) .process,
html:not([data-theme="dark"]) .faq-section,
html:not([data-theme="dark"]) .contact,
html:not([data-theme="dark"]) .blog-preview,
html:not([data-theme="dark"]) .service-section,
html:not([data-theme="dark"]) .service-process,
html:not([data-theme="dark"]) .service-faq,
html:not([data-theme="dark"]) .project-metrics,
html:not([data-theme="dark"]) .project-list,
html:not([data-theme="dark"]) .project-process,
html:not([data-theme="dark"]) .project-faq,
html:not([data-theme="dark"]) .social-metrics,
html:not([data-theme="dark"]) .social-networks,
html:not([data-theme="dark"]) .publication-section {
  color: var(--sinbio-ink) !important;
  background:
    linear-gradient(90deg, rgba(0, 105, 201, .026) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f2f9ff 100%) !important;
  background-size: 42px 42px, auto !important;
}

html:not([data-theme="dark"]) .service-focus,
html:not([data-theme="dark"]) .proof,
html:not([data-theme="dark"]) .process,
html:not([data-theme="dark"]) .service-process,
html:not([data-theme="dark"]) .project-process,
html:not([data-theme="dark"]) .social-networks {
  background:
    linear-gradient(90deg, rgba(0, 105, 201, .03) 1px, transparent 1px),
    linear-gradient(180deg, #eef9ff 0%, #f8fcff 100%) !important;
  background-size: 42px 42px, auto !important;
}

html:not([data-theme="dark"]) :is(
  .section-head h2, .intro-heading h2, .proof-head h2, .sectors-copy h2,
  .experience-copy h2, .contact-copy h2, .blog-preview h2,
  .service-hero-copy h1, .projects-hero-copy h1, .social-hero-copy h1,
  .service-next-panel h2, .project-card h3, .network-card h3,
  .publication-card h3, .detail-card h3, .related-card h3
) {
  color: var(--sinbio-ink) !important;
}

/* Los estilos de Astro incluyen selectores con atributos de alcance. Estas
   reglas tienen una especificidad equivalente para que los títulos no
   conserven accidentalmente el blanco reservado al fondo oscuro. */
html:not([data-theme="dark"]) :is(
  .section-head[class], .intro-heading[class], .proof-head[class], .sectors-copy[class],
  .experience-copy[class], .contact-copy[class], .service-hero-copy[class],
  .projects-hero-copy[class], .social-hero-copy[class], .process-head[class]
) :is(h1, h2) {
  color: var(--sinbio-ink) !important;
}

html:not([data-theme="dark"]) :is(
  .section-head p, .intro-copy p, .proof-copy p, .sectors-copy p,
  .experience-copy p, .contact-copy p, .blog-preview p,
  .service-hero-copy > p:not(.eyebrow), .projects-hero-copy > p:not(.eyebrow),
  .social-hero-copy > p:not(.eyebrow), .service-next-panel p:not(.eyebrow),
  .detail-card p, .related-card p, .project-card p, .network-card p,
  .publication-card p, .faq-grid p, .steps-grid p
) {
  color: var(--sinbio-muted) !important;
}

html:not([data-theme="dark"]) :is(.eyebrow, .process-line strong, .process-line > div::before) {
  color: #007caa !important;
}

/* Ritmo visual del inicio: blanco, azul sanitario suave y franjas de marca.
   Así se separan los bloques sin volver a convertir el modo claro en oscuro. */
html:not([data-theme="dark"]) .intro,
html:not([data-theme="dark"]) .service-focus,
html:not([data-theme="dark"]) .process,
html:not([data-theme="dark"]) .service-faq,
html:not([data-theme="dark"]) .project-list,
html:not([data-theme="dark"]) .publication-section {
  background:
    linear-gradient(90deg, rgba(0, 105, 201, .022) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f8fcff 100%) !important;
  background-size: 48px 48px, auto !important;
}

html:not([data-theme="dark"]) .services,
html:not([data-theme="dark"]) .proof,
html:not([data-theme="dark"]) .sectors,
html:not([data-theme="dark"]) .contact,
html:not([data-theme="dark"]) .service-section.related,
html:not([data-theme="dark"]) .service-process,
html:not([data-theme="dark"]) .project-metrics,
html:not([data-theme="dark"]) .project-process,
html:not([data-theme="dark"]) .social-metrics,
html:not([data-theme="dark"]) .social-networks {
  background:
    radial-gradient(circle at 88% 8%, rgba(0, 169, 214, .12), transparent 26rem),
    linear-gradient(90deg, rgba(0, 105, 201, .035) 1px, transparent 1px),
    linear-gradient(180deg, #e8f7ff 0%, #f4fbff 100%) !important;
  background-size: auto, 48px 48px, auto !important;
}

/* Hero claro: la fotografía y sus tarjetas siguen siendo protagonistas, con
   un lienzo acuoso y luminoso en lugar del fondo nocturno dividido. */
html:not([data-theme="dark"]) .hero {
  color: var(--sinbio-ink) !important;
  background:
    radial-gradient(circle at 75% 28%, rgba(0, 169, 214, .23), transparent 28rem),
    radial-gradient(circle at 18% 82%, rgba(47, 191, 113, .14), transparent 25rem),
    linear-gradient(125deg, #fafdff 0%, #e7f7fb 54%, #d7edf5 100%) !important;
}

html:not([data-theme="dark"]) .hero::before {
  opacity: .65 !important;
  background-image:
    linear-gradient(rgba(0, 105, 201, .047) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 105, 201, .047) 1px, transparent 1px) !important;
}

html:not([data-theme="dark"]) .hero::after {
  background:
    linear-gradient(90deg, rgba(250, 253, 255, .84) 0%, rgba(250, 253, 255, .74) 39%, rgba(250, 253, 255, .2) 60%, transparent 79%),
    linear-gradient(180deg, transparent 72%, rgba(215, 237, 245, .32)) !important;
}

html:not([data-theme="dark"]) .hero-overlay {
  background:
    radial-gradient(circle at 74% 42%, rgba(0, 169, 214, .14), transparent 28%),
    radial-gradient(circle at 96% 22%, rgba(47, 191, 113, .12), transparent 22%) !important;
}

html:not([data-theme="dark"]) .hero-flow path {
  stroke: rgba(0, 105, 201, .46) !important;
}

html:not([data-theme="dark"]) .hero-visual::before {
  background:
    radial-gradient(circle at 66% 22%, rgba(0, 169, 214, .22), transparent 32%),
    radial-gradient(circle at 32% 84%, rgba(47, 191, 113, .16), transparent 34%) !important;
}

/* Experiencia: los textos heredados de la versión oscura ahora usan tinta
   sólida y sus bloques recuperan una superficie de lectura. */
html:not([data-theme="dark"]) .proof-head[class] .proof-copy,
html:not([data-theme="dark"]) .logo-caption[class] {
  color: var(--sinbio-muted) !important;
}

html:not([data-theme="dark"]) .experience-copy[class] {
  color: var(--sinbio-ink) !important;
  background: linear-gradient(145deg, #ffffff 0%, #eff9ff 100%) !important;
  border-color: rgba(0, 105, 201, .16) !important;
  box-shadow: 0 15px 32px rgba(8, 61, 96, .09) !important;
}

html:not([data-theme="dark"]) .experience-copy[class] :is(h3, li) {
  color: var(--sinbio-ink) !important;
}

html:not([data-theme="dark"]) .experience-copy[class] > p:not(.eyebrow) {
  color: var(--sinbio-muted) !important;
}

html:not([data-theme="dark"]) .experience-copy[class] .eyebrow {
  color: #007caa !important;
}

html:not([data-theme="dark"]) .experience-list li::before {
  background: #00a9d6 !important;
  box-shadow: 0 0 0 4px rgba(0, 169, 214, .12) !important;
}

html:not([data-theme="dark"]) .proof-notes > div {
  color: var(--sinbio-ink) !important;
  background: #ffffff !important;
  border-color: rgba(0, 105, 201, .16) !important;
}

html:not([data-theme="dark"]) .proof-notes > div :is(strong, span) {
  color: var(--sinbio-ink) !important;
}

/* Enlace a proyectos: azul con contraste AA en vez de la franja azul pálida. */
html:not([data-theme="dark"]) .projects-link {
  color: #ffffff !important;
  border-color: rgba(116, 230, 238, .62) !important;
  background:
    radial-gradient(circle at 88% 22%, rgba(101, 220, 237, .25), transparent 28%),
    linear-gradient(118deg, #00509b 0%, #006fc9 58%, #00889c 100%) !important;
  box-shadow: 0 16px 34px rgba(0, 78, 173, .18) !important;
}

html:not([data-theme="dark"]) .projects-link :is(span, strong) { color: #ffffff !important; }
html:not([data-theme="dark"]) .projects-link span { color: #bff6ff !important; }

/* El encabezado de Proceso vuelve a ser una composición abierta: conserva el
   divisor cian pero elimina el rectángulo que competía con las tarjetas. */
html:not([data-theme="dark"]) .process-head {
  padding: 0 0 clamp(24px, 3vw, 34px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 105, 201, .22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* El Hero móvil tenía reglas de la versión nocturna que volvieron blanco el
   título al quitar la tarjeta de texto. Recuperamos tinta SINBIO y un ligero
   velo claro detrás del contenido, sin ocultar el carrusel. */
@media (max-width: 760px) {
  html:not([data-theme="dark"]) .hero[data-astro-cid-j7pv25f6] h1[data-astro-cid-j7pv25f6] {
    color: #071c33 !important;
    text-shadow: none !important;
  }

  html:not([data-theme="dark"]) .hero-copy-panel[data-astro-cid-j7pv25f6] .eyebrow[data-astro-cid-j7pv25f6] {
    color: #005d91 !important;
    border-color: rgba(0, 105, 201, .16) !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 8px 20px rgba(0, 78, 173, .08) !important;
  }

  html:not([data-theme="dark"]) .hero-actions[data-astro-cid-j7pv25f6] .btn-secondary[data-astro-cid-j7pv25f6] {
    color: #082b47 !important;
    border-color: rgba(0, 105, 201, .2) !important;
    background: rgba(255, 255, 255, .88) !important;
  }

  html:not([data-theme="dark"]) .hero[data-astro-cid-j7pv25f6]::after {
    background: linear-gradient(180deg, rgba(250, 253, 255, .44), rgba(250, 253, 255, .08) 45%, transparent 66%) !important;
  }
}

html:not([data-theme="dark"]) .process-head .eyebrow {
  color: #007caa !important;
}

/* El bloque de blog funciona como pausa cromática al final del recorrido. */
html:not([data-theme="dark"]) .blog-preview {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(101, 220, 237, .26), transparent 28rem),
    linear-gradient(118deg, #00427f 0%, #005eae 58%, #007f9a 100%) !important;
}

html:not([data-theme="dark"]) .blog-preview :is(h2, .section-head > p:not(.eyebrow), .eyebrow) {
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .blog-preview .eyebrow { color: #bff6ff !important; }
html:not([data-theme="dark"]) .blog-preview .post-card { background: #ffffff !important; }
html:not([data-theme="dark"]) .blog-preview .blog-more {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .54) !important;
  background: rgba(255, 255, 255, .13) !important;
}

/* Debe ir después de las reglas específicas anteriores: el selector del
   encabezado de Proceso es compartido por desktop y móvil. */
html:not([data-theme="dark"]) .process-head {
  padding: 0 0 clamp(24px, 3vw, 34px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 105, 201, .22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Proceso: anteriormente conservaba el panel oscuro en el modo claro. */
html:not([data-theme="dark"]) .process-head {
  padding: 0 0 clamp(24px, 3vw, 34px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 105, 201, .22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Cabeceras de las páginas internas: mismas proporciones y fotografía, pero
   con superficie clara y texto de lectura inmediata. */
html:not([data-theme="dark"]) :is(.service-hero, .projects-hero, .social-hero) {
  color: var(--sinbio-ink) !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(0, 169, 214, .16), transparent 28rem),
    linear-gradient(135deg, #ffffff 0%, #eaf7ff 100%) !important;
}

html:not([data-theme="dark"]) :is(.service-hero-media, .projects-hero-visual, .social-hero-visual) {
  border-color: rgba(0, 105, 201, .24) !important;
  box-shadow: 0 18px 42px rgba(7, 54, 88, .16) !important;
}

/* Un único lenguaje de tarjetas para servicios, proyectos, redes y contenido. */
html:not([data-theme="dark"]) :is(
  .service-focus-card, .detail-card, .related-card, .steps-grid > *,
  .project-card, .metrics-grid > *, .network-card, .publication-card,
  .faq-grid > *, .faq-panel, .contact-form, .contact-item, .proof-notes,
  .experience-mini-card, .sector-proof, .sector-visual-note, .post-card
) {
  color: var(--sinbio-ink) !important;
  background: rgba(255, 255, 255, .94) !important;
  border-color: var(--sinbio-border) !important;
  box-shadow: 0 12px 28px rgba(8, 61, 96, .08) !important;
}

html:not([data-theme="dark"]) :is(
  .service-focus-card, .detail-card, .related-card, .steps-grid > *,
  .project-card, .metrics-grid > *, .network-card, .publication-card,
  .faq-grid > *, .faq-panel, .contact-form, .contact-item, .proof-notes,
  .experience-mini-card, .sector-proof, .sector-visual-note, .post-card
) :is(h3, h4, strong, li, span:not(.eyebrow), label) {
  color: var(--sinbio-ink);
}

html:not([data-theme="dark"]) :is(.service-focus-card, .detail-card, .related-card, .project-card, .network-card, .publication-card, .faq-grid > *, .steps-grid > *, .post-card) p {
  color: var(--sinbio-muted) !important;
}

html:not([data-theme="dark"]) .process-copy {
  color: var(--sinbio-muted) !important;
  border-color: var(--sinbio-cyan) !important;
}

html:not([data-theme="dark"]) .process-line::before {
  background: linear-gradient(180deg, var(--sinbio-cyan), #48d29c) !important;
}

html:not([data-theme="dark"]) .process-line > div {
  color: var(--sinbio-ink) !important;
  background: #ffffff !important;
  border-color: var(--sinbio-border) !important;
  box-shadow: 0 12px 26px rgba(8, 61, 96, .08) !important;
}

html:not([data-theme="dark"]) .process-line > div::before {
  background: #eafaff !important;
  border-color: rgba(0, 169, 214, .3) !important;
}

html:not([data-theme="dark"]) .process-line :is(span, p) {
  color: var(--sinbio-ink) !important;
}

html:not([data-theme="dark"]) .process-line p { color: var(--sinbio-muted) !important; }

/* Las franjas de intención comercial mantienen contraste alto, pero usan el
   azul de marca en vez de extender el fondo nocturno a toda la página. */
html:not([data-theme="dark"]) :is(.cta-strip, .service-cta, .project-cta, .social-cta) {
  color: #ffffff !important;
  background: linear-gradient(115deg, #0056a4 0%, #006fc9 55%, #008fa6 100%) !important;
}

html:not([data-theme="dark"]) :is(.cta-strip, .service-cta, .project-cta, .social-cta) :is(h2, h3, p, .eyebrow) {
  color: #ffffff !important;
}

html:not([data-theme="dark"]) .service-next {
  background: linear-gradient(135deg, #e7f7ff 0%, #f8fcff 100%) !important;
}

html:not([data-theme="dark"]) .service-next-panel {
  color: var(--sinbio-ink) !important;
  background: #ffffff !important;
  border-color: rgba(0, 105, 201, .2) !important;
  box-shadow: 0 14px 30px rgba(8, 61, 96, .1) !important;
}

html:not([data-theme="dark"]) :is(input, select, textarea) {
  color: var(--sinbio-ink) !important;
  background: #ffffff !important;
  border-color: rgba(0, 105, 201, .26) !important;
}

html:not([data-theme="dark"]) :is(input, select, textarea)::placeholder {
  color: #668096 !important;
}

@media (max-width: 760px) {
  html:not([data-theme="dark"]) :is(.process-head, .service-next-panel, .faq-panel) {
    box-shadow: 0 9px 22px rgba(8, 61, 96, .08) !important;
  }

  html:not([data-theme="dark"]) .process-line::before { display: none !important; }
}

/* Siguiente paso: se integra como franja de transición, no como una tarjeta
   flotante que compite con las secciones de detalle. */
html:not([data-theme="dark"]) .service-next {
  border-block: 1px solid rgba(0, 105, 201, .12) !important;
  background:
    radial-gradient(circle at 88% 50%, rgba(0, 169, 214, .15), transparent 30rem),
    linear-gradient(115deg, #e5f6ff 0%, #f7fcff 58%, #eaf9f4 100%) !important;
}

html:not([data-theme="dark"]) .service-next-panel {
  padding: clamp(24px, 3.5vw, 38px) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .service-next-panel > div:first-child {
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 3px solid #00a9d6;
}

html:not([data-theme="dark"]) .service-next-panel .eyebrow {
  color: #007caa !important;
}

html:not([data-theme="dark"]) .service-next-panel h2 {
  color: var(--sinbio-ink) !important;
}

html:not([data-theme="dark"]) .service-next-panel p:not(.eyebrow) {
  color: var(--sinbio-muted) !important;
}

@media (max-width: 760px) {
  html:not([data-theme="dark"]) .service-next-panel {
    gap: 18px !important;
    padding: 24px 0 !important;
  }

  html:not([data-theme="dark"]) .service-next-panel > div:first-child {
    padding-left: 15px;
  }

  /* Los destacados y la sección de Sectores conservaban colores de texto de
     la composición nocturna; en móvil quedaban sobre el fondo claro. */
  html:not([data-theme="dark"]) .hero-highlight[data-astro-cid-j7pv25f6],
  html:not([data-theme="dark"]) .hero-highlight-alt[data-astro-cid-j7pv25f6] {
    color: #0057ad !important;
  }

  html:not([data-theme="dark"]) .hero-inline-highlight[data-astro-cid-j7pv25f6] {
    color: #063b83 !important;
    background:
      linear-gradient(90deg, rgba(0, 169, 214, .10), rgba(118, 213, 229, .34), rgba(47, 191, 113, .16), rgba(0, 169, 214, .10)) 0 88% / 220% .16em no-repeat !important;
  }

  html:not([data-theme="dark"]) .sectors-panel[data-astro-cid-j7pv25f6] {
    border-color: rgba(0, 105, 201, .18) !important;
    background: rgba(255, 255, 255, .34) !important;
  }

  html:not([data-theme="dark"]) .sectors-copy[data-astro-cid-j7pv25f6] .eyebrow[data-astro-cid-j7pv25f6] {
    color: #007caa !important;
  }

  html:not([data-theme="dark"]) .sectors-copy[data-astro-cid-j7pv25f6] .sector-copy[data-astro-cid-j7pv25f6] {
    color: #365f78 !important;
    text-shadow: none !important;
  }
}

/* Proceso de las páginas de servicio: la misma secuencia se lee como una
   ruta operativa. En escritorio mantiene cuatro hitos; en móvil, cada hito
   tiene su propio espacio y conector, sin depender de texto sobre fondos. */
.service-process {
  isolation: isolate;
  padding-block: clamp(58px, 7vw, 84px) !important;
}

.service-process .section-head {
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 42px) !important;
}

.service-process .steps-grid {
  position: relative;
  gap: clamp(12px, 1.6vw, 22px) !important;
  align-items: stretch;
}

.service-process .steps-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 30px;
  right: clamp(10%, 12vw, 15%);
  left: clamp(10%, 12vw, 15%);
  height: 2px;
  background: linear-gradient(90deg, #00a9d6, #2fbf71);
  opacity: .7;
}

.service-process .steps-grid > article {
  position: relative;
  display: flex !important;
  min-height: 184px !important;
  padding: clamp(22px, 2.2vw, 30px) !important;
  flex-direction: column;
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}

.service-process .steps-grid > article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #00a9d6, #2fbf71);
}

.service-process .steps-grid > article:hover {
  transform: translateY(-4px);
}

.service-process .steps-grid > article strong {
  position: relative;
  z-index: 1;
  display: grid !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 0 18px !important;
  place-items: center;
  border: 1px solid rgba(0, 169, 214, .34);
  border-radius: 50% !important;
  color: #0067b8 !important;
  background: linear-gradient(135deg, #e7faff, #f2fffb) !important;
  box-shadow: 0 7px 16px rgba(0, 105, 201, .11);
  font-size: .82rem;
  letter-spacing: .08em;
}

.service-process .steps-grid > article p {
  max-width: 24ch;
  margin: 0 !important;
  font-size: clamp(.96rem, 1.05vw, 1.04rem) !important;
  font-weight: 650;
  line-height: 1.5 !important;
}

html:not([data-theme="dark"]) .service-process .steps-grid > article {
  border: 1px solid rgba(0, 105, 201, .16) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(237, 249, 255, .92)) !important;
  box-shadow: 0 14px 28px rgba(8, 61, 96, .09) !important;
}

html:not([data-theme="dark"]) .service-process .steps-grid > article:hover {
  box-shadow: 0 20px 36px rgba(8, 61, 96, .14) !important;
}

html:not([data-theme="dark"]) .service-process .steps-grid > article p {
  color: #254d68 !important;
}

html[data-theme="dark"] .service-process .steps-grid > article {
  border: 1px solid rgba(118, 213, 229, .22) !important;
  background: linear-gradient(145deg, rgba(12, 42, 65, .98), rgba(5, 27, 48, .98)) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .2) !important;
}

html[data-theme="dark"] .service-process .steps-grid > article:hover {
  box-shadow: 0 22px 38px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .service-process .steps-grid > article strong {
  color: #b9f4ff !important;
  border-color: rgba(118, 213, 229, .42) !important;
  background: rgba(0, 169, 214, .14) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .service-process .steps-grid > article p {
  color: #d5e8ef !important;
}

@media (max-width: 760px) {
  .service-process {
    padding-block: 48px !important;
  }

  .service-process .section-head {
    margin-bottom: 26px !important;
  }

  .service-process .steps-grid {
    gap: 12px !important;
    padding-left: 14px;
  }

  .service-process .steps-grid::before {
    top: 28px;
    bottom: 28px;
    left: 25px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, #00a9d6, #2fbf71);
  }

  .service-process .steps-grid > article {
    min-height: 0 !important;
    padding: 18px 18px 18px 72px !important;
    border-radius: 14px !important;
  }

  .service-process .steps-grid > article::before {
    width: 3px;
  }

  .service-process .steps-grid > article strong {
    position: absolute;
    top: 17px;
    left: -14px;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    font-size: .78rem;
  }

  .service-process .steps-grid > article p {
    max-width: none;
    font-size: 1rem !important;
    line-height: 1.48 !important;
  }

  .service-process .steps-grid > article:hover {
    transform: none;
  }
}

/* Cierre de conversión de cada servicio. La franja deja de sentirse como un
   bloque aislado: el mensaje guía la decisión y los dos caminos de contacto
   quedan contenidos como una sola acción clara. */
.service-next {
  position: relative;
  isolation: isolate;
  padding-block: clamp(52px, 7vw, 82px) !important;
  overflow: hidden;
}

.service-next::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .72;
  background:
    radial-gradient(circle at 88% 26%, rgba(0, 169, 214, .24), transparent 20rem),
    linear-gradient(90deg, rgba(118, 213, 229, .055) 1px, transparent 1px);
  background-size: auto, 74px 74px;
}

.service-next-panel {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(258px, 330px) !important;
  gap: clamp(26px, 3.2vw, 44px) !important;
  padding: clamp(30px, 4.2vw, 52px) !important;
  border-radius: 24px !important;
}

.service-next-panel::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #00a9d6, #2fbf71);
}

.service-next-panel > div:first-child {
  padding-left: clamp(6px, 1vw, 14px) !important;
  border-left: 0 !important;
}

.service-next-panel h2 {
  max-width: 25ch;
  margin: 8px 0 14px !important;
  font-size: clamp(2rem, 3.1vw, 3rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em;
}

.service-next-panel p:not(.eyebrow) {
  max-width: 58ch;
  font-size: 1rem !important;
  line-height: 1.58 !important;
}

.service-next-actions {
  display: grid !important;
  grid-template-columns: 1fr;
  align-self: center;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 2px 0 2px clamp(20px, 2.2vw, 30px) !important;
  border-left: 1px solid rgba(113, 211, 229, .3) !important;
}

.service-next-actions .btn {
  display: inline-flex;
  width: 100%;
  min-height: 52px !important;
  justify-content: center;
  padding-inline: 18px !important;
  text-align: center;
  white-space: normal !important;
}

.service-next-actions .btn-secondary {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(170, 229, 240, .42) !important;
}

html:not([data-theme="dark"]) .service-next {
  border-block: 0 !important;
  background:
    radial-gradient(circle at 88% 24%, rgba(0, 169, 214, .19), transparent 25rem),
    linear-gradient(115deg, #e5f7ff 0%, #f9fdff 52%, #e7f8f0 100%) !important;
}

html:not([data-theme="dark"]) .service-next-panel {
  border: 1px solid rgba(0, 105, 201, .15) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 169, 214, .09), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(243, 250, 253, .96)) !important;
  box-shadow: 0 20px 42px rgba(8, 61, 96, .1) !important;
}

html:not([data-theme="dark"]) .service-next-panel::before {
  background: linear-gradient(180deg, #0084c5, #2fbf71) !important;
}

html:not([data-theme="dark"]) .service-next-actions {
  padding: 16px !important;
  border-left-color: rgba(0, 105, 201, .16) !important;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(231, 247, 255, .82), rgba(255, 255, 255, .92));
}

html:not([data-theme="dark"]) .service-next-actions .btn-secondary {
  color: var(--sinbio-ink) !important;
  background: #ffffff !important;
  border-color: rgba(0, 105, 201, .25) !important;
}

@media (max-width: 760px) {
  .service-next {
    padding-block: 42px !important;
  }

  .service-next-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 26px 22px 24px !important;
    border-radius: 18px !important;
  }

  .service-next-panel::before {
    top: 20px;
    bottom: auto;
    left: 22px;
    width: 54px;
    height: 3px;
    border-radius: 999px;
  }

  .service-next-panel > div:first-child {
    padding: 18px 0 0 !important;
  }

  .service-next-panel h2 {
    max-width: 16ch;
    font-size: clamp(1.76rem, 8.4vw, 2.2rem) !important;
  }

  .service-next-panel p:not(.eyebrow) {
    font-size: .98rem !important;
  }

  .service-next-actions {
    gap: 11px !important;
    padding: 0 !important;
    border-left: 0 !important;
  }

  html:not([data-theme="dark"]) .service-next-actions {
    padding: 12px !important;
  }

  .service-next-actions .btn {
    min-height: 50px !important;
  }
}

/* Ajuste final: el cierre usa el mismo radio suave de las tarjetas y CTA de
   Sinbio; se elimina el marco interno para que no parezca un componente ajeno. */
.service-next-panel {
  border-radius: 18px !important;
  overflow: hidden;
}

.service-next-panel::before {
  display: none;
}

.service-next-panel > div:first-child {
  padding-left: 0 !important;
}

.service-next-actions {
  padding: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
}

.service-next-actions .btn {
  border-radius: 12px !important;
}

html:not([data-theme="dark"]) .service-next-panel {
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f2fbff 100%) !important;
}

html:not([data-theme="dark"]) .service-next-actions {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

@media (max-width: 760px) {
  .service-next-panel {
    border-radius: 16px !important;
  }

  .service-next-panel > div:first-child {
    padding-top: 0 !important;
  }
}

/* El cierre móvil conserva la respiración de las tarjetas del sitio: texto y
   CTA no tocan el borde, y el marco acompaña sin dominar la composición. */
html:not([data-theme="dark"]) .service-next-panel {
  border-color: rgba(0, 105, 201, .11) !important;
  box-shadow: 0 14px 28px rgba(8, 61, 96, .08) !important;
}

@media (max-width: 760px) {
  .service-next .container.service-next-panel {
    width: calc(100% - 28px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 26px 20px 22px !important;
    border-radius: 14px !important;
  }

  .service-next-panel h2 {
    margin-top: 9px !important;
    margin-bottom: 15px !important;
  }

  .service-next-actions {
    gap: 12px !important;
    padding: 2px 0 0 !important;
  }

  .service-next-actions .btn {
    min-height: 48px !important;
    padding-inline: 16px !important;
    border-radius: 11px !important;
  }
}

/* En tema claro el siguiente paso funciona como una tarjeta de decisión
   compacta, no como una segunda franja decorativa. */
html:not([data-theme="dark"]) .service-next {
  padding-block: clamp(38px, 4.5vw, 56px) !important;
  background: #f4fbff !important;
}

html:not([data-theme="dark"]) .service-next::before {
  display: none;
}

html:not([data-theme="dark"]) .service-next-panel {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
  gap: clamp(28px, 4vw, 52px) !important;
  padding: clamp(28px, 3vw, 38px) clamp(30px, 4vw, 48px) !important;
  border: 1px solid rgba(0, 105, 201, .14) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 26px rgba(8, 61, 96, .07) !important;
}

html:not([data-theme="dark"]) .service-next-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #0078c8, #00a9d6 62%, #2fbf71);
}

html:not([data-theme="dark"]) .service-next-panel h2 {
  max-width: 24ch;
  font-size: clamp(1.9rem, 2.65vw, 2.55rem) !important;
  line-height: 1.1 !important;
}

html:not([data-theme="dark"]) .service-next-panel p:not(.eyebrow) {
  max-width: 54ch;
  color: #42667d !important;
}

html:not([data-theme="dark"]) .service-next-actions {
  align-self: center;
  gap: 10px !important;
}

html:not([data-theme="dark"]) .service-next-actions .btn {
  min-height: 48px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Sectores conserva un fondo documental oscuro también en el tema claro.
   El normalizador global de tarjetas blanqueaba el contenedor de beneficios
   y se veía una franja clara detrás de las tres señales. */
html:not([data-theme="dark"]) #sectores .sector-proof.sector-benefits {
  color: inherit !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  html:not([data-theme="dark"]) .service-next {
    padding-block: 34px !important;
  }

  html:not([data-theme="dark"]) .service-next .container.service-next-panel {
    width: calc(100% - 28px) !important;
    /* Esta regla de tema claro tiene mayor especificidad que el apilado
       general. Sin el override, la cuadrícula de dos columnas se conserva
       en móvil y el bloque de acciones invade el texto. */
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 28px 20px 22px !important;
    border-radius: 14px !important;
  }

  html:not([data-theme="dark"]) .service-next-panel > div,
  html:not([data-theme="dark"]) .service-next-actions {
    min-width: 0 !important;
  }

  html:not([data-theme="dark"]) .service-next-panel::after {
    right: 20px;
    left: 20px;
  }

  html:not([data-theme="dark"]) .service-next-panel h2 {
    max-width: 17ch;
    font-size: clamp(1.7rem, 8vw, 2.05rem) !important;
  }

  html:not([data-theme="dark"]) .service-next-actions {
    gap: 10px !important;
  }
}