/* ═══════════════════════════════════════════════════════════════════
   SYNNET Blog — Artículo (tema claro)
   Columna de lectura centrada y acotada; índice lateral solo cuando
   sobra sitio en el margen, para no descentrar el texto.
   ═══════════════════════════════════════════════════════════════════ */

.snb-post {
  --snb-paper:   #FFFFFF;
  --snb-veil:    #F6F9FC;
  --snb-panel:   #F4F8FC;
  --snb-line:    #E3EAF2;
  --snb-line-2:  #D3DFEC;

  --snb-ink:     #0B1220;
  --snb-ink-2:   #1F2937;
  --snb-ink-3:   #475569;
  --snb-ink-4:   #5B6675;

  --snb-link:    #0566C1;
  --snb-blue:    #0566C1;
  --snb-green:   #067A5B;
  --snb-amber:   #B45309;
  --snb-k:       var(--snb-blue);

  --snb-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --snb-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --snb-mono:    'JetBrains Mono', ui-monospace, monospace;

  --snb-ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --snb-measure: 760px;

  display: block;
  background: var(--snb-paper);
  color: var(--snb-ink-2);
  font-family: var(--snb-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.snb-post-page { background: #FFFFFF; }

.snb-post [data-kind='comparativa'] { --snb-k: var(--snb-green); }
.snb-post [data-kind='articulo']    { --snb-k: var(--snb-amber); }

.snb-post .snb-shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.snb-shell--narrow { max-width: calc(var(--snb-measure) + 96px); }
.snb-shell--wide   { max-width: 1040px; }
.snb-shell--layout { max-width: 1440px; }

/* ── Cabecera del artículo ────────────────────────────────────── */

.snb-post__masthead {
  background: linear-gradient(180deg, var(--snb-veil), var(--snb-paper));
  border-bottom: 1px solid var(--snb-line);
  padding-block: clamp(32px, 4.5vw, 56px) clamp(30px, 4vw, 46px);
}

.snb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--snb-ink-4);
  margin-bottom: 22px;
}

.snb-crumbs a {
  color: var(--snb-ink-4);
  text-decoration: none;
  transition: color 180ms var(--snb-ease);
}

.snb-crumbs a:hover,
.snb-crumbs a:focus-visible { color: var(--snb-link); }
.snb-crumbs span[aria-hidden] { opacity: 0.4; }

.snb-post__kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--snb-k);
}

.snb-post__kicker::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--snb-k);
  flex: none;
}

.snb-post__title {
  font-family: var(--snb-display);
  font-size: clamp(31px, 4.2vw, 50px);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -0.028em;
  color: var(--snb-ink);
  margin: 0;
  text-wrap: balance;
}

.snb-post__deck {
  margin: 18px 0 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--snb-ink-3);
  max-width: 56ch;
  text-wrap: pretty;
}

.snb-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 24px 0 0;
  font-family: var(--snb-mono);
  font-size: 12.5px;
  color: var(--snb-ink-4);
}

.snb-post__meta span[aria-hidden] { opacity: 0.45; }
.snb-post__author { font-weight: 500; color: var(--snb-ink-3); }

/* ── Imagen destacada ─────────────────────────────────────────── */

.snb-post__figure {
  margin: 0;
  padding-block: clamp(28px, 4vw, 44px) 0;
}

.snb-post__thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--snb-line);
}

/* ── Composición ──────────────────────────────────────────────── */

.snb-shell--layout { padding-block: clamp(34px, 4.5vw, 56px) clamp(48px, 6vw, 76px); }

.snb-post__layout {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
  max-width: var(--snb-measure);
  margin-inline: auto;
}

.snb-post__gutter { display: none; }

/* A partir de aquí sobra margen para el índice sin mover el texto:
   1fr | 760px | 1fr deja la columna de lectura centrada exacta. */
@media (min-width: 1400px) {
  .snb-post__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--snb-measure)) minmax(0, 1fr);
    column-gap: 36px;
    row-gap: 28px;
    max-width: none;
    align-items: start;
  }

  .snb-post__gutter { display: block; grid-column: 1; grid-row: 1; }
  .snb-post__body   { grid-column: 2; grid-row: 1 / span 2; }
  .snb-toc          { grid-column: 3; grid-row: 1; }
  .snb-aside-cta    { grid-column: 3; grid-row: 2; }
}

/* ── Índice del artículo ──────────────────────────────────────── */

.snb-toc {
  border: 1px solid var(--snb-line);
  border-radius: 12px;
  background: var(--snb-paper);
  padding: 6px 18px;
}

.snb-toc__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--snb-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--snb-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.snb-toc__summary::-webkit-details-marker { display: none; }

.snb-toc__summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 1.6px solid var(--snb-ink-4);
  border-bottom: 1.6px solid var(--snb-ink-4);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 220ms var(--snb-ease);
  flex: none;
}

.snb-toc[open] .snb-toc__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.snb-toc__list {
  list-style: none;
  margin: 0;
  padding: 4px 0 14px;
  counter-reset: snb-toc;
  border-top: 1px solid var(--snb-line);
}

.snb-toc__list li { margin: 0; }

.snb-toc__list a {
  display: block;
  padding: 7px 0 7px 16px;
  position: relative;
  font-size: 14px;
  line-height: 1.45;
  color: var(--snb-ink-3);
  text-decoration: none;
  transition: color 180ms var(--snb-ease);
}

.snb-toc__list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--snb-line-2);
  transition: background-color 180ms var(--snb-ease), transform 180ms var(--snb-ease);
}

.snb-toc__list a:hover,
.snb-toc__list a:focus-visible { color: var(--snb-link); }

.snb-toc__list a.is-current {
  color: var(--snb-ink);
  font-weight: 600;
}

.snb-toc__list a.is-current::before {
  background: var(--snb-link);
  transform: scale(1.4);
}

@media (min-width: 1400px) {
  .snb-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
  .snb-toc__summary { cursor: default; }
  .snb-toc__summary::after { display: none; }
}

/* ── Tarjeta de contacto lateral ──────────────────────────────── */

.snb-aside-cta {
  border: 1px solid var(--snb-line);
  border-radius: 12px;
  background: var(--snb-panel);
  padding: 22px;
}

.snb-aside-cta__title {
  font-family: var(--snb-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--snb-ink);
  margin: 0 0 8px;
}

.snb-aside-cta__text {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--snb-ink-3);
}

.snb-aside-cta__phone {
  display: block;
  margin-top: 12px;
  font-family: var(--snb-mono);
  font-size: 14px;
  color: var(--snb-ink-3);
  text-decoration: none;
  text-align: center;
}

.snb-aside-cta__phone:hover { color: var(--snb-link); }

/* ── Cuerpo del artículo ──────────────────────────────────────── */

.snb-post__body {
  font-size: 18px;
  line-height: 1.78;
  color: var(--snb-ink-2);
  min-width: 0;
}

/* El wrapper legacy .synnet-article no debe crear caja propia. */
.snb-post__body .synnet-article { display: contents; }

.snb-post__body > *:first-child,
.snb-post__body .synnet-article > *:first-child { margin-top: 0; }

.snb-post__body p {
  margin: 0 0 1.35em;
  text-wrap: pretty;
}

.snb-post__body h2 {
  font-family: var(--snb-display);
  font-size: clamp(25px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--snb-ink);
  margin: 2.1em 0 0.7em;
  scroll-margin-top: 100px;
  text-wrap: balance;
}

.snb-post__body h3 {
  font-family: var(--snb-display);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--snb-ink);
  margin: 1.9em 0 0.6em;
  scroll-margin-top: 100px;
}

.snb-post__body h4 {
  font-family: var(--snb-display);
  font-size: 17.5px;
  font-weight: 600;
  color: var(--snb-ink);
  margin: 1.7em 0 0.5em;
}

.snb-post__body a {
  color: var(--snb-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 160ms var(--snb-ease);
}

.snb-post__body a:hover { color: #044A8F; }

.snb-post__body strong { color: var(--snb-ink); font-weight: 600; }

.snb-post__body ul,
.snb-post__body ol {
  margin: 0 0 1.35em;
  padding-left: 1.35em;
}

.snb-post__body li { margin-bottom: 0.5em; }
.snb-post__body li::marker { color: var(--snb-k); }
.snb-post__body ol li::marker { font-family: var(--snb-mono); font-size: 0.85em; }

.snb-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--snb-line);
}

.snb-post__body figure { margin: 1.8em 0; }

.snb-post__body figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--snb-ink-4);
  text-align: center;
}

.snb-post__body blockquote {
  margin: 1.8em 0;
  padding: 20px 24px;
  border: 1px solid var(--snb-line-2);
  border-radius: 12px;
  background: var(--snb-panel);
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--snb-ink-2);
}

.snb-post__body blockquote p:last-child { margin-bottom: 0; }

.snb-post__body code {
  font-family: var(--snb-mono);
  font-size: 0.88em;
  background: #EEF3F9;
  border: 1px solid var(--snb-line);
  border-radius: 5px;
  padding: 2px 6px;
}

.snb-post__body pre {
  background: #0F172A;
  color: #E2E8F0;
  border-radius: 12px;
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 1.8em 0;
}

.snb-post__body pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.snb-post__body hr {
  border: 0;
  border-top: 1px solid var(--snb-line);
  margin: 2.4em 0;
}

/* Colores heredados del editor de bloques: el cuerpo ya es claro. */
.snb-post__body .has-black-color { color: var(--snb-ink) !important; }

/* ── Tablas ───────────────────────────────────────────────────── */

.snb-tablewrap {
  overflow-x: auto;
  margin: 1.9em 0;
  border: 1px solid var(--snb-line);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

.snb-tablewrap:focus-visible {
  outline: 2px solid var(--snb-link);
  outline-offset: 2px;
}

.snb-post__body table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
}

.snb-post__body thead tr:first-child th:first-child { border-top-left-radius: 11px; }
.snb-post__body thead tr:first-child th:last-child  { border-top-right-radius: 11px; }

.snb-post__body thead th {
  background: #0F1B2D;
  color: #F1F5F9;
  font-family: var(--snb-display);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  padding: 13px 16px;
  white-space: nowrap;
}

.snb-post__body tbody td,
.snb-post__body tbody th {
  padding: 13px 16px;
  border-top: 1px solid var(--snb-line);
  vertical-align: top;
  text-align: left;
}

.snb-post__body tbody tr:nth-child(odd) { background: #FAFCFE; }

/* Tabla sin thead: la primera fila hace de encabezado. */
.snb-post__body table > tbody > tr:first-child > td strong { color: var(--snb-ink); }

/* ── Etiquetas ────────────────────────────────────────────────── */

.snb-post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 2.4em;
  padding-top: 22px;
  border-top: 1px solid var(--snb-line);
  font-size: 14px;
}

.snb-post__tags-label {
  font-weight: 600;
  color: var(--snb-ink);
  margin-right: 4px;
}

.snb-post__tags a {
  padding: 5px 12px;
  border: 1px solid var(--snb-line-2);
  border-radius: 999px;
  color: var(--snb-ink-3);
  text-decoration: none;
}

.snb-post__tags a:hover {
  border-color: var(--snb-link);
  color: var(--snb-link);
}

/* ── Botones ──────────────────────────────────────────────────── */

.snb-post .snb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 22px;
  border: 1px solid var(--snb-line-2);
  border-radius: 8px;
  background: transparent;
  font-family: var(--snb-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--snb-ink);
  text-decoration: none;
  transition: background-color 180ms var(--snb-ease), border-color 180ms var(--snb-ease), transform 180ms var(--snb-ease);
}

.snb-post .snb-btn--solid {
  background: var(--snb-link);
  border-color: var(--snb-link);
  color: #FFFFFF;
}

.snb-post .snb-btn--solid:hover,
.snb-post .snb-btn--solid:focus-visible {
  background: #044E97;
  border-color: #044E97;
  transform: translateY(-1px);
}

/* ── Sigue leyendo ────────────────────────────────────────────── */

.snb-related {
  border-top: 1px solid var(--snb-line);
  background: var(--snb-veil);
  padding-block: clamp(44px, 5vw, 68px);
}

.snb-related__title {
  font-family: var(--snb-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--snb-ink);
  margin: 0 0 26px;
}

.snb-related .snb-shell { max-width: calc(var(--snb-measure) + 96px); }

.snb-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 20px;
}

.snb-related__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--snb-paper);
  border: 1px solid var(--snb-line);
  border-radius: 12px;
  overflow: hidden;
  padding-bottom: 18px;
  transition: border-color 240ms var(--snb-ease), transform 240ms var(--snb-ease);
}

.snb-related__card:hover,
.snb-related__card:focus-within {
  border-color: var(--snb-link);
  transform: translateY(-2px);
}

.snb-related__media { display: block; }

.snb-related__card .snb-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0D1420;
}

.snb-related__card .snb-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.snb-related__card .snb-cover--drawn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 12%, color-mix(in srgb, var(--snb-k) 26%, transparent), transparent 62%);
}

.snb-related__card .snb-motif { display: block; width: 100%; height: 100%; }
.snb-related__card .snb-motif__grid path { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.snb-related__card .snb-motif__ink { fill: #22314D; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.snb-related__card .snb-motif__accent { fill: var(--snb-k); }
.snb-related__card .snb-motif__mesh path { fill: none; stroke: rgba(255,255,255,0.11); stroke-width: 1.4; }
.snb-related__card .snb-motif__accent-stroke { fill: none; stroke: var(--snb-k); stroke-width: 2; opacity: 0.85; }
.snb-related__card .snb-motif__vent path { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; stroke-dasharray: 3 5; }
.snb-related__card .snb-motif__rule { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 4 6; }
.snb-related__card .snb-motif__arrow { fill: none; stroke: var(--snb-k); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.snb-related__card .snb-motif__pulse { fill: none; stroke: var(--snb-k); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.snb-related__kicker {
  margin: 14px 18px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--snb-k);
}

.snb-related__heading {
  font-family: var(--snb-display);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--snb-ink);
  margin: 0 18px;
  text-wrap: balance;
}

.snb-related__heading a { color: inherit; text-decoration: none; }

.snb-related__heading a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.snb-related__meta {
  margin: 0 18px;
  font-family: var(--snb-mono);
  font-size: 12px;
  color: var(--snb-ink-4);
}

/* ── Comentarios ──────────────────────────────────────────────── */

.snb-comments {
  border-top: 1px solid var(--snb-line);
  padding-block: clamp(44px, 5vw, 68px);
}

.snb-comments .comments-title,
.snb-comments .comment-reply-title {
  font-family: var(--snb-display);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--snb-ink);
  margin: 0 0 8px;
}

.snb-comments .comment-notes,
.snb-comments .logged-in-as {
  font-size: 14px;
  color: var(--snb-ink-4);
  margin: 0 0 24px;
}

.snb-comments .comment-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.snb-comments .comment-list li {
  border: 1px solid var(--snb-line);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 14px;
}

.snb-comments .comment-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--snb-ink);
  margin-bottom: 7px;
}

.snb-comments .comment-form p { margin: 0 0 18px; }

.snb-comments .comment-form input[type='text'],
.snb-comments .comment-form input[type='email'],
.snb-comments .comment-form input[type='url'],
.snb-comments .comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--snb-line-2);
  border-radius: 8px;
  background: var(--snb-paper);
  font-family: var(--snb-body);
  font-size: 15.5px;
  color: var(--snb-ink-2);
  transition: border-color 180ms var(--snb-ease), box-shadow 180ms var(--snb-ease);
}

.snb-comments .comment-form textarea { min-height: 150px; resize: vertical; }

.snb-comments .comment-form input:focus,
.snb-comments .comment-form textarea:focus {
  outline: none;
  border-color: var(--snb-link);
  box-shadow: 0 0 0 3px rgba(5, 102, 193, 0.14);
}

.snb-comments .comment-form ::placeholder { color: #6B7684; }

.snb-comments .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--snb-ink-3);
}

.snb-comments .comment-form-cookies-consent label {
  font-weight: 400;
  color: var(--snb-ink-3);
  margin: 0;
}

.snb-comments .form-submit { margin-bottom: 0; }

.snb-comments .comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: 1px solid var(--snb-link);
  border-radius: 8px;
  background: var(--snb-link);
  color: #FFFFFF;
  font-family: var(--snb-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms var(--snb-ease), transform 180ms var(--snb-ease);
}

.snb-comments .comment-form .submit:hover {
  background: #044E97;
  transform: translateY(-1px);
}

/* ── Foco ─────────────────────────────────────────────────────── */

.snb-post a:focus-visible {
  outline: 2px solid var(--snb-link);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Respiro final: el FAB de WhatsApp no debe tapar contenido ── */

@media (max-width: 640px) {
  .snb-comments,
  .snb-related { padding-bottom: 100px; }
}

/* ── Movimiento reducido ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .snb-post *,
  .snb-post *::before,
  .snb-post *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}