/* ╔══════════════════════════════════════════════════════════╗
   ║  DOQSOFT — Sección Recursos (compartido · 5 páginas)     ║
   ║  Color: brand green DOQSOFT (sectorial)                  ║
   ║  Pages:                                                  ║
   ║   · recursos-casos-exito.html (catálogo casos)           ║
   ║   · recursos-caso-avante.html (case study detail)        ║
   ║   · recursos-blog.html (catálogo blog)                   ║
   ║   · recursos-blog-*.html (blog post)                     ║
   ║   · recursos-soporte.html (centro soporte breve)         ║
   ╚══════════════════════════════════════════════════════════╝ */

:root {
  --recursos-primary: #21b65f;
  --recursos-primary-dark: #1a9e52;
  --recursos-primary-darker: #15803d;
  --recursos-primary-soft: rgba(33, 182, 95, 0.08);
  --recursos-primary-tint: rgba(33, 182, 95, 0.15);
  --recursos-glow: rgba(33, 182, 95, 0.25);
  --recursos-light: #54c247;
}

/* ─────────────────────────────────────────────
   Sub-bar (compartido)
   ───────────────────────────────────────────── */
.product-subbar-recursos {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(254, 254, 254, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 0.625rem 0;
}

.product-subbar-recursos .breadcrumbs a:hover { color: var(--recursos-primary-dark); }
.product-subbar-recursos .product-subbar-anchors a:hover {
  color: var(--recursos-primary-dark);
  background: var(--recursos-primary-soft);
}

/* Eyebrow */
.eyebrow-recursos { color: var(--recursos-primary-dark); }
.eyebrow-recursos .eyebrow-dot {
  background: var(--recursos-primary);
  box-shadow: 0 0 0 3px var(--recursos-primary-tint);
}

/* Hero shared */
.ph-recursos { background: linear-gradient(180deg, #fafdfb 0%, #ecfaf1 60%, #fefefe 100%); }
.ph-recursos .ph-orb-1 { background: radial-gradient(circle, var(--recursos-primary) 0%, transparent 65%); opacity: 0.35; }
.ph-recursos .ph-orb-2 { background: radial-gradient(circle, var(--recursos-light) 0%, transparent 65%); opacity: 0.3; }
.ph-recursos .ph-grid {
  background-image:
    linear-gradient(to right, rgba(33,182,95,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33,182,95,0.05) 1px, transparent 1px);
}

[class*="page-recursos"] .product-badge { border-color: var(--recursos-primary-tint); box-shadow: 0 1px 2px rgba(33, 182, 95, 0.08); }
[class*="page-recursos"] .product-badge-dot { background: var(--recursos-primary); box-shadow: 0 0 0 3px var(--recursos-primary-tint); }
[class*="page-recursos"] .product-badge-name { color: var(--recursos-primary-dark); }
[class*="page-recursos"] .product-hero-title em {
  background: linear-gradient(135deg, var(--recursos-primary) 0%, var(--recursos-light) 60%, var(--recursos-primary-darker) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[class*="page-recursos"] .btn-product {
  background: var(--recursos-primary);
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 24px -8px var(--recursos-glow);
}
[class*="page-recursos"] .btn-product:hover {
  background: var(--recursos-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 14px 30px -8px var(--recursos-glow);
}

/* ─────────────────────────────────────────────
   CATÁLOGO HERO (centered text-only, no card visual)
   ───────────────────────────────────────────── */
.recursos-catalogo-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-12) 0;
}

.recursos-catalogo-hero .product-badge { align-self: center; }

/* ─────────────────────────────────────────────
   Filtros (catálogos)
   ───────────────────────────────────────────── */
.recursos-filtros {
  padding: var(--space-8) 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}

.recursos-filtros-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.recursos-filtros-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.recursos-filtros-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-right: 6px;
}

.recursos-filtros-tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-full);
  background: white;
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  font-family: inherit;
  letter-spacing: 0.01em;
}

.recursos-filtros-tag:hover {
  border-color: var(--recursos-primary-tint);
  color: var(--recursos-primary-dark);
}

.recursos-filtros-tag.active {
  background: var(--recursos-primary-soft);
  color: var(--recursos-primary-dark);
  border-color: var(--recursos-primary);
}

/* ─────────────────────────────────────────────
   CASOS · DESTACADO + CARDS
   ───────────────────────────────────────────── */
.recursos-destacado {
  padding: var(--space-32) 0;
  background:
    radial-gradient(ellipse at top, var(--recursos-primary-soft) 0%, transparent 50%),
    var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.recursos-destacado .section-header {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.recursos-destacado .section-header .eyebrow { justify-content: center; }
.recursos-destacado .section-sub { margin-left: auto; margin-right: auto; }

.recursos-destacado-card {
  margin-top: var(--space-12);
  background: white;
  border: 1px solid var(--recursos-primary-tint);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 24px 48px -16px var(--recursos-glow);
  transition: all var(--t-mid) var(--ease-out);
}

.recursos-destacado-card:hover { transform: translateY(-3px); box-shadow: 0 32px 64px -20px var(--recursos-glow); }

.recursos-destacado-link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 1024px) {
  .recursos-destacado-link { grid-template-columns: 1.4fr 1fr; }
}

.recursos-destacado-content {
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.recursos-destacado-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recursos-destacado-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-full);
  background: var(--recursos-primary-soft);
  color: var(--recursos-primary-darker);
  border: 1px solid var(--recursos-primary-tint);
}

.recursos-destacado-title {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-ink);
}

.recursos-destacado-desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.recursos-destacado-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.recursos-destacado-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recursos-destacado-metric strong {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--recursos-primary-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}

.recursos-destacado-metric span {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.recursos-destacado-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--recursos-primary-dark);
  letter-spacing: 0.01em;
  margin-top: var(--space-2);
  transition: gap var(--t-fast) var(--ease-out);
}

.recursos-destacado-card:hover .recursos-destacado-cta { gap: 12px; }

.recursos-destacado-visual {
  background: linear-gradient(135deg, var(--recursos-primary-soft) 0%, var(--color-bg-cream) 100%);
  padding: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recursos-destacado-quote {
  background: white;
  padding: var(--space-7);
  border-radius: var(--r-xl);
  box-shadow: 0 16px 32px -12px var(--recursos-glow);
  position: relative;
  max-width: 360px;
}

.recursos-destacado-quote-mark {
  color: var(--recursos-primary-tint);
  margin-bottom: var(--space-2);
}

.recursos-destacado-quote p {
  font-family: 'Funnel Display', serif;
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.recursos-destacado-quote-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.recursos-destacado-quote-author strong {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 600;
}

.recursos-destacado-quote-author span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Biblioteca de casos */
.recursos-biblioteca {
  padding: var(--space-32) 0;
  background: var(--color-bg);
}

.recursos-biblioteca .section-header {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.recursos-biblioteca .section-header .eyebrow { justify-content: center; }
.recursos-biblioteca .section-sub { margin-left: auto; margin-right: auto; }

.recursos-biblioteca-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-12);
}

@media (min-width: 640px) { .recursos-biblioteca-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .recursos-biblioteca-grid { grid-template-columns: repeat(3, 1fr); } }

.recursos-caso-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all var(--t-mid) var(--ease-out);
  text-decoration: none;
  color: inherit;
}

a.recursos-caso-card:hover {
  transform: translateY(-3px);
  border-color: var(--recursos-primary-tint);
  box-shadow: 0 16px 32px -12px var(--recursos-glow);
}

.recursos-caso-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.recursos-caso-card-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c, var(--recursos-primary)) 12%, transparent);
  color: var(--c, var(--recursos-primary-darker));
  border: 1px solid color-mix(in srgb, var(--c, var(--recursos-primary)) 25%, transparent);
}

.recursos-caso-card h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-top: var(--space-1);
}

.recursos-caso-card p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}

.recursos-caso-card-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-soft);
}

.recursos-caso-card-metric strong {
  font-family: 'Funnel Display', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--recursos-primary-dark);
  letter-spacing: -0.01em;
  line-height: 1;
}

.recursos-caso-card-metric span {
  font-size: 11px;
  color: var(--color-text-muted);
}

.recursos-caso-card-link {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--recursos-primary-dark);
  margin-top: auto;
}

.recursos-caso-card-placeholder { opacity: 0.85; background: var(--color-bg-soft); }

/* CTA final recursos */
.cta-final-recursos { background: linear-gradient(180deg, #f0fdf4 0%, #fefefe 100%); }
.cta-final-recursos .cta-option:hover { box-shadow: 0 24px 48px -16px var(--recursos-glow); border-color: var(--recursos-primary-tint); }
.cta-final-recursos .cta-option-tag { background: var(--recursos-primary); }
.cta-final-recursos .cta-option-secondary .cta-option-tag { background: var(--color-ink); }

/* ═════════════════════════════════════════════════════════════
   CASE STUDY DETAIL — page-recursos-caso
   ═════════════════════════════════════════════════════════════ */

.caso-hero {
  padding: calc(var(--header-h) + var(--subbar-h) + var(--space-8)) 0 var(--space-12);
  background: linear-gradient(180deg, #fafdfb 0%, #ecfaf1 60%, #fefefe 100%);
  position: relative;
  overflow: hidden;
}

.caso-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}

.caso-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.caso-hero-tag {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-full);
  background: white;
  color: color-mix(in srgb, var(--c, var(--recursos-primary-darker)) 100%, white 0%);
  border: 1px solid color-mix(in srgb, var(--c, var(--recursos-primary)) 30%, transparent);
}

.caso-hero-title {
  font-family: 'Funnel Display', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-ink);
  max-width: 880px;
}

.caso-hero-title strong {
  font-weight: 500;
  background: linear-gradient(135deg, var(--recursos-primary) 0%, var(--recursos-light) 60%, var(--recursos-primary-darker) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.caso-hero-sub {
  font-size: var(--text-lg, 1.0625rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 720px;
}

/* KPI impact metrics */
.caso-impacto {
  padding: var(--space-12) 0 var(--space-16);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}

.caso-impacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) { .caso-impacto-grid { grid-template-columns: repeat(4, 1fr); } }

.caso-impacto-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  transition: all var(--t-mid) var(--ease-out);
}

.caso-impacto-card:hover {
  transform: translateY(-3px);
  border-color: var(--recursos-primary-tint);
  box-shadow: 0 16px 32px -12px var(--recursos-glow);
}

.caso-impacto-num {
  font-family: 'Funnel Display', serif;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--recursos-primary-dark);
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
}

.caso-impacto-unit {
  font-size: 0.45em;
  color: var(--recursos-primary);
  font-weight: 400;
}

.caso-impacto-label {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.caso-productos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

.caso-productos-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.caso-productos-pill {
  display: inline-block;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  letter-spacing: 0.01em;
}

/* Body grid: main + sidebar */
.caso-body { padding: var(--space-16) 0; background: var(--color-bg); }

.caso-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .caso-body-grid { grid-template-columns: 1fr 320px; gap: var(--space-12); }
}

.caso-body-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.caso-section { display: flex; flex-direction: column; gap: var(--space-4); }

.caso-section h2 {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.caso-section p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

.caso-section p strong { color: var(--color-ink); font-weight: 600; }
.caso-section a { color: var(--recursos-primary-dark); font-weight: 600; }
.caso-section a:hover { color: var(--recursos-primary-darker); text-decoration: underline; }

.caso-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: var(--space-4);
}

.caso-list li {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  position: relative;
  padding-left: var(--space-3);
}

.caso-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--recursos-primary);
}

.caso-list li strong { color: var(--color-ink); font-weight: 600; }

/* Pull quote */
.caso-quote {
  margin: var(--space-6) 0;
  padding: var(--space-7);
  background: var(--recursos-primary-soft);
  border-left: 4px solid var(--recursos-primary);
  border-radius: var(--r-md);
  position: relative;
}

.caso-quote-mark {
  font-family: 'Funnel Display', serif;
  font-size: 3rem;
  color: var(--recursos-primary-tint);
  line-height: 0.6;
  display: inline-block;
  margin-bottom: var(--space-2);
}

.caso-quote p {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.caso-quote-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-4);
  font-style: normal;
}

.caso-quote-author strong {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 600;
}

.caso-quote-author span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.caso-quote-feature {
  background: linear-gradient(135deg, var(--recursos-primary-soft) 0%, var(--color-bg-cream) 100%);
  border-left-width: 6px;
  padding: var(--space-9);
}

.caso-quote-feature p { font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 300; }

/* Callout (Implementación express) */
.caso-callout {
  margin: var(--space-6) 0;
  padding: var(--space-7);
  background: white;
  border: 2px solid var(--recursos-primary);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.caso-callout-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--r-full);
  background: var(--recursos-primary);
  color: white;
}

.caso-callout-title {
  font-family: 'Funnel Display', serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1.3;
}

.caso-callout p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
}

/* Resultados grid */
.caso-resultados-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

@media (min-width: 768px) { .caso-resultados-grid { grid-template-columns: repeat(3, 1fr); } }

.caso-resultado {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.caso-resultado-num {
  font-family: 'Funnel Display', serif;
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--recursos-primary-dark);
  letter-spacing: -0.04em;
  line-height: 1;
}

.caso-resultado-num span { font-size: 0.5em; color: var(--recursos-primary); font-weight: 400; }

.caso-resultado-label {
  font-family: 'Funnel Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
}

.caso-resultado p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* SIDEBAR */
.caso-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--subbar-h) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-self: start;
}

.caso-sidebar-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.caso-sidebar-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.caso-sidebar-logo-text {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--recursos-primary-darker);
}

.caso-sidebar-logo-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.caso-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.caso-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.caso-sidebar-section p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}

.caso-sidebar-product {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--recursos-primary-dark);
  font-weight: 600;
  border-bottom: 1px solid var(--recursos-primary-tint);
  align-self: flex-start;
}

.caso-sidebar-share {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.caso-sidebar-share-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.caso-sidebar-share-icons {
  display: flex;
  gap: 12px;
}

.caso-sidebar-share-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  transition: all var(--t-fast) var(--ease-out);
}

.caso-sidebar-share-icons a:hover {
  color: var(--recursos-primary-dark);
  border-color: var(--recursos-primary-tint);
}

/* Related stories */
.caso-related {
  padding: var(--space-32) 0;
  background: var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.caso-related .section-header {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.caso-related .section-header .eyebrow { justify-content: center; }

.caso-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-12);
}

@media (min-width: 768px) { .caso-related-grid { grid-template-columns: repeat(3, 1fr); } }

.caso-related-link { text-align: center; margin-top: var(--space-8); }

/* ═════════════════════════════════════════════════════════════
   BLOG CATÁLOGO + POST DETAIL
   ═════════════════════════════════════════════════════════════ */

/* Featured post card */
.recursos-blog-feature-card {
  margin-top: var(--space-12);
  background: white;
  border: 1px solid var(--recursos-primary-tint);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 24px 48px -16px var(--recursos-glow);
  transition: all var(--t-mid) var(--ease-out);
}

.recursos-blog-feature-card:hover { transform: translateY(-3px); box-shadow: 0 32px 64px -20px var(--recursos-glow); }

.recursos-blog-feature-link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 1024px) { .recursos-blog-feature-link { grid-template-columns: 0.85fr 1.15fr; } }

.recursos-blog-feature-cover {
  background: linear-gradient(135deg, var(--recursos-primary-soft) 0%, var(--color-bg-cream) 100%);
  padding: var(--space-12) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 320px;
  position: relative;
}

.recursos-blog-feature-cover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: white;
  color: var(--recursos-primary-dark);
  box-shadow: 0 12px 24px -6px var(--recursos-glow);
}

.recursos-blog-feature-cover-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--recursos-primary-dark);
  background: white;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--recursos-primary-tint);
}

.recursos-blog-feature-content {
  padding: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.recursos-blog-feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.recursos-blog-feature-tag {
  display: inline-block;
  padding: 3px 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-full);
  background: var(--recursos-primary-soft);
  color: var(--recursos-primary-darker);
  border: 1px solid var(--recursos-primary-tint);
  font-size: 10px;
}

.recursos-blog-feature-date,
.recursos-blog-feature-time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.recursos-blog-feature-title {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-ink);
}

.recursos-blog-feature-desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.recursos-blog-feature-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.recursos-blog-feature-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--recursos-primary), var(--recursos-light));
  color: white;
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.recursos-blog-feature-author-info { display: flex; flex-direction: column; }
.recursos-blog-feature-author-info strong { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.recursos-blog-feature-author-info span { font-size: var(--text-xs); color: var(--color-text-muted); }

.recursos-blog-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--recursos-primary-dark);
  margin-top: var(--space-2);
  transition: gap var(--t-fast) var(--ease-out);
}

.recursos-blog-feature-card:hover .recursos-blog-feature-cta { gap: 12px; }

/* Blog grid (recientes) */
.recursos-blog-recientes {
  padding: var(--space-32) 0;
  background: var(--color-bg);
}

.recursos-blog-recientes .section-header {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.recursos-blog-recientes .section-header .eyebrow { justify-content: center; }
.recursos-blog-recientes .section-sub { margin-left: auto; margin-right: auto; }

.recursos-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-12);
}

@media (min-width: 640px) { .recursos-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .recursos-blog-grid { grid-template-columns: repeat(3, 1fr); } }

.recursos-blog-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all var(--t-mid) var(--ease-out);
  text-decoration: none;
  color: inherit;
}

a.recursos-blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--recursos-primary-tint);
  box-shadow: 0 16px 32px -12px var(--recursos-glow);
}

.recursos-blog-card-cover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  background: var(--recursos-primary-tint);
  color: var(--recursos-primary-dark);
}

.recursos-blog-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.recursos-blog-card-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-full);
  background: var(--recursos-primary-soft);
  color: var(--recursos-primary-darker);
  border: 1px solid var(--recursos-primary-tint);
}

.recursos-blog-card h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-ink);
}

.recursos-blog-card-meta {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--recursos-primary-dark);
  letter-spacing: 0.01em;
}

.recursos-blog-card-placeholder { opacity: 0.85; background: var(--color-bg-soft); }

/* ═════════════════════════════════════════════════════════════
   POST DETAIL — page-recursos-post (editorial layout)
   ═════════════════════════════════════════════════════════════ */

.post-article { background: var(--color-bg); }

.post-header {
  padding: calc(var(--header-h) + var(--subbar-h) + var(--space-8)) 0 var(--space-8);
  background: linear-gradient(180deg, #fafdfb 0%, #ecfaf1 60%, #fefefe 100%);
}

.post-header-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
  align-items: center;
}

.post-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.post-header-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-full);
  background: var(--recursos-primary-soft);
  color: var(--recursos-primary-darker);
  border: 1px solid var(--recursos-primary-tint);
}

.post-title {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-ink);
  max-width: 800px;
}

.post-lead {
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 720px;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  width: 100%;
  max-width: 720px;
}

.post-meta-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.post-meta-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--recursos-primary), var(--recursos-light));
  color: white;
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.post-meta-author-info { display: flex; flex-direction: column; align-items: flex-start; }
.post-meta-author-info strong { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.post-meta-author-info span { font-size: var(--text-xs); color: var(--color-text-muted); }

.post-meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.post-meta-sep { color: var(--color-text-light); }

/* Cover */
.post-cover { padding: var(--space-8) 0; background: var(--color-bg); }

.post-cover-inner {
  max-width: 880px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--recursos-primary-soft) 0%, var(--color-bg-cream) 100%);
  border: 1px solid var(--recursos-primary-tint);
  border-radius: var(--r-2xl);
  padding: var(--space-16) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-height: 280px;
  justify-content: center;
}

.post-cover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: white;
  color: var(--recursos-primary-dark);
  box-shadow: 0 16px 32px -8px var(--recursos-glow);
}

.post-cover-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--recursos-primary-dark);
  background: white;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--recursos-primary-tint);
}

/* Body */
.post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12) 0 var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.post-body p,
.post-body ol li,
.post-body ul li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
  font-family: 'Montserrat', sans-serif;
}

.post-body p strong { color: var(--color-ink); font-weight: 600; }
.post-body p em { color: var(--recursos-primary-darker); font-style: italic; }
.post-body p a { color: var(--recursos-primary-dark); font-weight: 600; border-bottom: 1px solid var(--recursos-primary-tint); }
.post-body p a:hover { color: var(--recursos-primary-darker); border-bottom-color: var(--recursos-primary); }

.post-intro {
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  color: var(--color-ink) !important;
  font-weight: 400;
  font-family: 'Funnel Display', serif !important;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-2);
}

.post-body h2 {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: var(--space-8);
}

.post-body h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-ink);
  margin-top: var(--space-5);
}

.post-list-numbered {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-6);
  counter-reset: post-list;
}

.post-list-numbered li {
  list-style: decimal;
  padding-left: var(--space-2);
}

.post-pullquote {
  margin: var(--space-8) calc(var(--space-4) * -1);
  padding: var(--space-7);
  background: var(--recursos-primary-soft);
  border-left: 4px solid var(--recursos-primary);
  border-radius: var(--r-md);
}

.post-pullquote-mark {
  font-family: 'Funnel Display', serif;
  font-size: 3rem;
  color: var(--recursos-primary-tint);
  line-height: 0.6;
  display: inline-block;
  margin-bottom: var(--space-2);
}

.post-pullquote p {
  font-family: 'Funnel Display', serif !important;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem) !important;
  font-weight: 400 !important;
  font-style: italic;
  line-height: 1.4 !important;
  color: var(--color-ink) !important;
  letter-spacing: -0.01em;
}

.post-pullquote-feature {
  background: linear-gradient(135deg, var(--recursos-primary-soft) 0%, var(--color-bg-cream) 100%);
  border-left-width: 6px;
  padding: var(--space-9);
}

.post-pullquote-feature p { font-size: clamp(1.5rem, 2.6vw, 1.875rem) !important; font-weight: 300 !important; }

.post-metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

@media (min-width: 768px) { .post-metrics-grid { grid-template-columns: repeat(3, 1fr); } }

.post-metric {
  background: white;
  border: 1px solid var(--recursos-primary-tint);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-metric strong {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--recursos-primary-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.post-metric span {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Post footer · CTA + related */
.post-footer {
  background: var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
  padding: var(--space-16) 0 var(--space-32);
}

.post-cta {
  max-width: 880px;
  margin: 0 auto var(--space-16);
  background: white;
  border: 1px solid var(--recursos-primary-tint);
  border-radius: var(--r-2xl);
  padding: var(--space-9);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  box-shadow: 0 24px 48px -16px var(--recursos-glow);
}

@media (min-width: 768px) { .post-cta { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); } }

.post-cta-content { display: flex; flex-direction: column; gap: var(--space-3); }

.post-cta-content h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.post-cta-content p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.post-cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Post related */
.post-related {
  max-width: 1100px;
  margin: 0 auto;
}

.post-related-title {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-align: center;
  margin-bottom: var(--space-6);
}

.post-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) { .post-related-grid { grid-template-columns: repeat(3, 1fr); } }

/* ═════════════════════════════════════════════════════════════
   CENTRO SOPORTE — single hero card + 4 cards
   ═════════════════════════════════════════════════════════════ */

.recursos-soporte-hero-scene {
  position: relative;
  width: 100%;
  min-height: 460px;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recursos-soporte-hero-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: white;
  border: 1px solid var(--recursos-primary-tint);
  border-radius: var(--r-2xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow:
    0 32px 64px -20px rgba(33, 182, 95, 0.35),
    0 12px 24px -6px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(33, 182, 95, 0.06);
  overflow: hidden;
  animation: recursosHeroFloat 8s ease-in-out infinite;
}

@keyframes recursosHeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.recursos-soporte-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--recursos-primary), var(--recursos-light), var(--recursos-primary));
}

.recursos-soporte-hero-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.recursos-soporte-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--recursos-primary-dark);
}

.recursos-soporte-hero-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--recursos-primary);
  box-shadow: 0 0 0 3px var(--recursos-primary-tint);
  animation: recursosStatusPulse 1.6s ease-in-out infinite;
}

@keyframes recursosStatusPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--recursos-primary-tint); }
  50% { box-shadow: 0 0 0 7px var(--recursos-primary-soft); }
}

.recursos-soporte-hero-card-title {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.recursos-soporte-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--recursos-primary), var(--recursos-primary-dark));
  color: white;
  box-shadow: 0 8px 16px -4px rgba(33, 182, 95, 0.5);
  align-self: center;
  margin-top: var(--space-2);
}

.recursos-soporte-hero-program {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.recursos-soporte-hero-program-label {
  font-family: 'Funnel Display', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}

.recursos-soporte-hero-program-name {
  font-family: 'Funnel Display', serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--recursos-primary-darker);
  text-align: center;
}

.recursos-soporte-hero-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) 0;
  border-top: 1px dashed var(--color-border-soft);
  border-bottom: 1px dashed var(--color-border-soft);
}

.recursos-soporte-hero-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  font-size: 11px;
  opacity: 0;
  animation: recursosItemReveal 4.5s ease-out forwards;
}

.recursos-soporte-hero-item:nth-child(1) { animation-delay: 0.4s; }
.recursos-soporte-hero-item:nth-child(2) { animation-delay: 1.0s; }
.recursos-soporte-hero-item:nth-child(3) { animation-delay: 1.6s; }
.recursos-soporte-hero-item:nth-child(4) { animation-delay: 2.2s; }

@keyframes recursosItemReveal {
  0% { opacity: 0; transform: translateX(-4px); }
  18% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}

.recursos-soporte-hero-item-num {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--recursos-primary-dark);
}

.recursos-soporte-hero-item-name {
  font-weight: 500;
  color: var(--color-text);
}

.recursos-soporte-hero-item-status {
  font-weight: 700;
  color: var(--recursos-primary);
  font-size: 12px;
}

.recursos-soporte-hero-item-active {
  animation: recursosItemActivePulse 1.8s ease-in-out infinite;
}

@keyframes recursosItemActivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.recursos-soporte-hero-card-foot {
  display: flex;
  justify-content: center;
}

.recursos-soporte-hero-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--recursos-primary-dark);
  background: white;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--recursos-primary-tint);
}

/* Contenido del centro */
.recursos-soporte-contenido {
  padding: var(--space-32) 0;
  background:
    radial-gradient(ellipse at top, var(--recursos-primary-soft) 0%, transparent 50%),
    var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.recursos-soporte-contenido .section-header {
  text-align: center;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.recursos-soporte-contenido .section-header .eyebrow { justify-content: center; }
.recursos-soporte-contenido .section-sub { margin-left: auto; margin-right: auto; }

.recursos-soporte-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-12);
}

@media (min-width: 768px) { .recursos-soporte-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

.recursos-soporte-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: all var(--t-mid) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.recursos-soporte-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(circle at top right, var(--recursos-primary-soft) 0%, transparent 70%);
  z-index: 0;
  opacity: 0.5;
}

.recursos-soporte-card > * { position: relative; z-index: 1; }

.recursos-soporte-card:hover {
  transform: translateY(-4px);
  border-color: var(--recursos-primary-tint);
  box-shadow: 0 24px 48px -16px var(--recursos-glow);
}

.recursos-soporte-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--recursos-primary-tint) 0%, var(--recursos-primary-soft) 100%);
  color: var(--recursos-primary-dark);
}

.recursos-soporte-card h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.recursos-soporte-card p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.recursos-soporte-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.recursos-soporte-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.5;
}

.recursos-soporte-list li::before {
  content: '✓';
  color: var(--recursos-primary);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 11px;
}

.recursos-soporte-card-link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--recursos-primary-dark);
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease-out);
  align-self: flex-start;
}

.recursos-soporte-card-link:hover { color: var(--recursos-primary-darker); }

.recursos-soporte-cta-bottom {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: white;
  border: 1px solid var(--recursos-primary-tint);
  border-radius: var(--r-xl);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.recursos-soporte-cta-bottom p {
  font-family: 'Funnel Display', serif;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}

.recursos-soporte-cta-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}