/* ═══════════════════════════════════════════════════════════════════
   SYNNET Blog — Índice (tema oscuro)
   /blog/, /blog/category/*, etiquetas, autor y fechas.
   Tipografías self-hosted vía blog-webfonts.css (nunca Google Fonts).
   ═══════════════════════════════════════════════════════════════════ */

.snb-index {
  /* Fondo y superficies */
  --snb-bg:        #E7EFFA;   /* azul claro del listado */
  --snb-surface:   #FFFFFF;   /* tarjetas */
  --snb-surface-2: #0D1420;   /* fondo de las portadas: sigue oscuro, ver abajo */
  --snb-line:      #D3E0F0;
  --snb-line-soft: #E2EBF6;

  /* Tinta */
  --snb-ink:   #0B1220;
  --snb-ink-2: #1F2937;
  --snb-ink-3: #4A5768;

  /* Acentos por familia de contenido. Variantes oscuras: las claras que se
     usaban sobre #0B0F19 no llegan a 4.5:1 sobre blanco. */
  --snb-blue:  #0566C1;
  --snb-green: #067A5B;
  --snb-amber: #B45309;
  --snb-k:     var(--snb-blue);

  /* Acentos claros, solo para lo que se pinta ENCIMA de las portadas
     oscuras (los motivos SVG). */
  --snb-blue-on-dark:  #00A3FF;
  --snb-green-on-dark: #00E5A0;
  --snb-amber-on-dark: #F5A524;
  --snb-k-dark:        var(--snb-blue-on-dark);

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

  /* Forma y movimiento */
  --snb-r:    14px;
  --snb-r-sm: 8px;
  --snb-ease: cubic-bezier(0.16, 1, 0.3, 1);

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

body.snb-index-page {
  background: #E7EFFA;
}

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

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

/* ── Cabecera ─────────────────────────────────────────────────── */

.snb-masthead {
  position: relative;
  padding-block: clamp(44px, 7vw, 84px) clamp(28px, 4vw, 44px);
}

.snb-masthead::before {
  content: '';
  position: absolute;
  inset-block-start: -140px;
  inset-inline-end: -160px;
  width: 620px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(5, 102, 193, 0.10), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.snb-masthead > * { position: relative; z-index: 1; }

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

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

.snb-crumbs a:hover,
.snb-crumbs a:focus-visible { color: var(--snb-blue); }
.snb-crumbs span[aria-hidden] { opacity: 0.35; }
.snb-crumbs [aria-current] { color: var(--snb-ink-2); }

.snb-masthead__title {
  font-family: var(--snb-display);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.032em;
  color: var(--snb-ink);
  margin: 0;
  text-wrap: balance;
}

.snb-masthead__deck {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  color: var(--snb-ink-3);
  max-width: 58ch;
  margin: 18px 0 0;
  text-wrap: pretty;
}

/* ── Filtros por categoría ────────────────────────────────────── */

.snb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 3vw, 38px);
}

.snb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--snb-line);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  color: var(--snb-ink-2);
  text-decoration: none;
  transition: border-color 180ms var(--snb-ease), color 180ms var(--snb-ease), background-color 180ms var(--snb-ease);
}

.snb-pill:hover,
.snb-pill:focus-visible {
  border-color: var(--snb-blue);
  color: var(--snb-blue);
}

.snb-pill.is-active {
  background: var(--snb-blue);
  border-color: var(--snb-blue);
  color: #fff;
  font-weight: 600;
}

.snb-pill__count {
  font-family: var(--snb-mono);
  font-size: 11px;
  opacity: 0.62;
}

.snb-pill.is-active .snb-pill__count { opacity: 0.72; }

/* ── Rejilla ──────────────────────────────────────────────────── */

.snb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  padding-block: clamp(8px, 1.5vw, 18px) clamp(40px, 5vw, 64px);
}

.snb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--snb-surface);
  border: 1px solid var(--snb-line);
  border-radius: var(--snb-r);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11, 18, 32, 0.05);
  transition: border-color 260ms var(--snb-ease), transform 260ms var(--snb-ease), box-shadow 260ms var(--snb-ease);
  animation: snb-rise 620ms var(--snb-ease) backwards;
}

.snb-card:nth-child(2) { animation-delay: 60ms; }
.snb-card:nth-child(3) { animation-delay: 110ms; }
.snb-card:nth-child(4) { animation-delay: 155ms; }
.snb-card:nth-child(5) { animation-delay: 195ms; }
.snb-card:nth-child(6) { animation-delay: 230ms; }
.snb-card:nth-child(n + 7) { animation-delay: 260ms; }

@keyframes snb-rise {
  from { opacity: 0; transform: translateY(16px); }
}

.snb-card:hover,
.snb-card:focus-within {
  border-color: var(--snb-blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11, 18, 32, 0.10);
}

.snb-card__media {
  display: block;
  text-decoration: none;
}

.snb-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px clamp(20px, 2vw, 26px) 24px;
  flex: 1;
}

.snb-card__kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--snb-k);
}

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

.snb-card__title {
  font-family: var(--snb-display);
  font-size: clamp(19px, 1.4vw, 21px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.014em;
  color: var(--snb-ink);
  margin: 0;
  text-wrap: balance;
}

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

/* Enlace extendido: toda la tarjeta es clicable sin duplicar destinos en AT. */
.snb-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.snb-card__deck {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--snb-ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.snb-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-family: var(--snb-mono);
  font-size: 12px;
  color: var(--snb-ink-3);
}

.snb-card__meta span[aria-hidden] { opacity: 0.4; }

.snb-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--snb-k);
}

.snb-card__cue svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms var(--snb-ease);
}

.snb-card:hover .snb-card__cue svg { transform: translateX(4px); }

/* ── Artículo destacado ───────────────────────────────────────── */

.snb-card--lead { grid-column: 1 / -1; }

@media (min-width: 880px) {
  .snb-card--lead {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* La foto destacada se ve completa: recortarla a la altura del texto
     partía titulares dentro de la propia imagen. El motivo dibujado sí
     llena la caja porque su SVG usa preserveAspectRatio="slice". */
  .snb-card--lead .snb-card__media {
    display: flex;
    align-items: center;
    height: 100%;
    background: var(--snb-surface-2);
    border-bottom: 1px solid var(--snb-line-soft);
  }

  .snb-card--lead .snb-cover {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
    border-bottom: 0;
  }

  .snb-card--lead .snb-cover__img { height: auto; }

  .snb-card--lead .snb-cover--drawn {
    align-self: stretch;
    height: 100%;
    min-height: 320px;
  }

  .snb-card--lead .snb-card__body {
    justify-content: center;
    gap: 14px;
    padding: clamp(26px, 2.6vw, 40px);
  }

  .snb-card--lead .snb-card__title {
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.024em;
  }

  .snb-card--lead .snb-card__deck {
    font-size: 16px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* ── Portadas ─────────────────────────────────────────────────── */

.snb-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--snb-surface-2);
  border-bottom: 1px solid var(--snb-line-soft);
}

/* Las imágenes destacadas del blog son banners 2:1 con tipografía dentro:
   recortarlas a la caja parte las palabras. Se muestran completas sobre el
   fondo de la portada; el motivo dibujado sí llena porque es vectorial. */
.snb-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 700ms var(--snb-ease);
}

.snb-card:hover .snb-cover__img { transform: scale(1.035); }

/* Las portadas siguen sobre fondo oscuro a proposito: el arte destacado del
   blog son banners oscuros y los motivos SVG estan dibujados para ese fondo.
   Una banda oscura sobre tarjeta blanca es ademas el mismo patron que ya usan
   las tarjetas de "Sigue leyendo" en el articulo. De ahi que aqui se use
   `--snb-k-dark` y no `--snb-k`. */
.snb-cover--drawn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 12%, color-mix(in srgb, var(--snb-k-dark) 22%, transparent), transparent 62%);
  pointer-events: none;
}

.snb-motif {
  display: block;
  width: 100%;
  height: 100%;
}

.snb-motif__grid path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}

.snb-motif__ink {
  fill: #22314D;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}

.snb-motif__accent { fill: var(--snb-k-dark); }
.snb-motif__mesh path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.11);
  stroke-width: 1.4;
}


.snb-motif__accent-stroke {
  fill: none;
  stroke: var(--snb-k-dark);
  stroke-width: 2;
  opacity: 0.85;
}

.snb-motif__vent path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.snb-motif__rule {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.snb-motif__arrow {
  fill: none;
  stroke: var(--snb-k-dark);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.55;
}

.snb-motif__pulse {
  fill: none;
  stroke: var(--snb-k-dark);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Paginación ───────────────────────────────────────────────── */

.snb-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-bottom: clamp(48px, 6vw, 72px);
}

.snb-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--snb-line);
  border-radius: var(--snb-r-sm);
  background: #FFFFFF;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--snb-ink-2);
  text-decoration: none;
  transition: border-color 180ms var(--snb-ease), color 180ms var(--snb-ease);
}

.snb-pager a.page-numbers:hover,
.snb-pager a.page-numbers:focus-visible {
  border-color: var(--snb-blue);
  color: var(--snb-blue);
}

.snb-pager .page-numbers.current {
  background: var(--snb-blue);
  border-color: var(--snb-blue);
  color: #fff;
  font-weight: 600;
}

.snb-pager .page-numbers.dots {
  border-color: transparent;
  color: var(--snb-ink-3);
}

/* ── Estado vacío ─────────────────────────────────────────────── */

.snb-empty {
  padding: clamp(48px, 7vw, 88px) 0;
  text-align: center;
}

.snb-empty__title {
  font-family: var(--snb-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  color: var(--snb-ink);
  margin: 0 0 10px;
}

.snb-empty__text {
  color: var(--snb-ink-3);
  margin: 0 0 26px;
}

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

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

.snb-btn:hover,
.snb-btn:focus-visible {
  border-color: var(--snb-blue);
  background: #F2F7FD;
  color: var(--snb-blue);
}

.snb-btn--solid {
  background: var(--snb-blue);
  border-color: var(--snb-blue);
  color: #fff;
}

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

/* ── Cierre ───────────────────────────────────────────────────── */

.snb-outro {
  display: grid;
  gap: 26px;
  align-items: center;
  padding: clamp(28px, 4vw, 46px);
  margin-bottom: clamp(56px, 7vw, 88px);
  border: 1px solid var(--snb-line);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(11, 18, 32, 0.05);
}

@media (min-width: 780px) {
  .snb-outro {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }
}

.snb-outro__title {
  font-family: var(--snb-display);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--snb-ink);
  margin: 0 0 8px;
  text-wrap: balance;
}

.snb-outro__deck {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--snb-ink-3);
  max-width: 46ch;
}

.snb-outro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* El FAB de WhatsApp vive abajo a la derecha: que no tape el CTA. */
@media (max-width: 640px) {
  .snb-outro { margin-bottom: 104px; }
  .snb-outro__actions .snb-btn { flex: 1 1 100%; }
}

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

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

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

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

/* ── Footer de Elementor ───────────────────────────────────────────
   El shape divider "drops" está pintado en blanco. Sobre el azul claro
   del índice se notaría igual que se notaba sobre el fondo oscuro, así
   que se recolorea al fondo real de la página. */

body.snb-index-page .elementor-location-footer .elementor-shape-top svg path,
body.snb-index-page .elementor-location-footer .elementor-shape-top svg polygon,
body.snb-index-page .elementor-location-footer .elementor-shape-top svg use {
  fill: #E7EFFA;
}