/*
Theme Name: Despertar Blog
Theme URI: https://blog.despertar.com.ve
Author: Despertar Seguros Sociedad de Corretaje, S.A.
Author URI: https://despertar.com.ve
Description: Tema de bloques propio (FSE) de Despertar. Refleja la identidad de marca canon — verde #2e9042, Inter Variable, pills, neutros calidos stone. Blindado: el editor no puede inventar colores ni fuentes fuera del sistema. Reemplaza Elementor + Sierra.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version: 1.2.1
License: Proprietary — Despertar Seguros Sociedad de Corretaje, S.A. All rights reserved.
License URI: https://despertar.com.ve
Text Domain: despertar-blog
Tags: block-patterns, full-site-editing, blog, news, one-column, two-columns, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*
 * =========================================================
 * DESPERTAR BLOG — HOJA DE ESTILOS GLOBAL
 * =========================================================
 * Fuente de verdad de color y tipografia: /packages/design-tokens/brand.css
 * Los tokens se traducen aqui como variables CSS nativas y se aplican via
 * theme.json (settings.color.palette, settings.typography.fontFamilies).
 * NO se usa Tailwind. NO se hardcodean valores hexadecimales fuera de las
 * definiciones de variables.
 *
 * Orden de cascada:
 *   1. Variables de token (este archivo, :root)
 *   2. theme.json styles globales (WP inyecta inline)
 *   3. editor-styles (este archivo, contexto editor)
 *   4. block-specific overrides (assets/css/blocks.css)
 * =========================================================
 */

/* =========================================================
 * 1. DESIGN TOKENS — traducidos de brand.css + expression-web.css
 * ========================================================= */
:root {
  /* Escala de marca — verde */
  --db-green-50:  #e8f5eb;
  --db-green-100: #c1e4c9;
  --db-green-200: #97d3a5;
  --db-green-300: #6dc281;
  --db-green-400: #4db566;
  --db-green-500: #2e9042;   /* primary */
  --db-green-600: #29833c;
  --db-green-700: #237333;
  --db-green-800: #1d632b;
  --db-green-900: #14481d;
  --db-green-450: #34a14c;   /* tono vivo p/ gradientes de fallback */
  --db-green-650: #257a37;   /* tono medio p/ gradientes de fallback */

  /* Acentos */
  --db-orange:       #f97e24;
  --db-orange-light: #f9a84e;
  --db-orange-dark:  #e06f1f;
  --db-yellow:       #ffb900;
  --db-lime:         #B6D641;   /* CTA */
  --db-lime-dark:    #a3c12f;

  /* Neutros calidos (expression-web.css stone) */
  --db-neutral-0:   #ffffff;
  --db-neutral-50:  #fafaf9;   /* stone-50 */
  --db-neutral-100: #f5f5f4;   /* stone-100 */
  --db-neutral-200: #e7e5e4;   /* stone-200 */
  --db-neutral-300: #d6d3d1;   /* stone-300 */
  --db-neutral-400: #a8a29e;   /* stone-400 */
  --db-neutral-500: #78716c;   /* stone-500 */
  --db-neutral-600: #57534e;   /* stone-600 */
  --db-neutral-700: #44403c;   /* stone-700 */
  --db-neutral-800: #292524;   /* stone-800 */
  --db-neutral-900: #1c1917;   /* stone-900 */

  /* Roles semanticos */
  --db-color-text:           #1f2430;
  --db-color-text-secondary: #44403c;
  --db-color-text-muted:     #57534e;
  --db-color-text-subtle:    #78716c;
  --db-color-surface:        #ffffff;
  --db-color-surface-subtle: #fafaf9;
  --db-color-border:         rgba(0, 0, 0, 0.18); /* a11y: WCAG 1.4.11 non-text contrast */
  --db-color-border-solid:   #d6d3d1;

  /* Sombras */
  --db-shadow-card: 0 12px 28px -6px rgba(16, 40, 24, 0.12);
  --db-shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --db-shadow-green: 0 4px 14px 0 rgba(46, 144, 66, 0.25);

  /* Radios */
  --db-radius-sm:   6px;
  --db-radius-md:   8px;
  --db-radius-card: 16px;
  --db-radius-pill: 9999px;
  --db-radius-hero: 40px;

  /* Espacio */
  --db-space-1:  4px;
  --db-space-2:  8px;
  --db-space-3:  12px;
  --db-space-4:  16px;
  --db-space-5:  20px;
  --db-space-6:  24px;
  --db-space-8:  32px;
  --db-space-10: 40px;
  --db-space-12: 48px;
  --db-space-14: 56px;
  --db-space-18: 72px;

  /* Tipografia */
  --db-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --db-font-size-display: 3.5rem;
  --db-font-size-h1: 2.25rem;
  --db-font-size-h2: 1.875rem;
  --db-font-size-h3: 1.25rem;
  --db-font-size-h4: 1.125rem;
  --db-font-size-body-lg: 1.125rem;
  --db-font-size-body: 1rem;
  --db-font-size-sm: 0.875rem;
  --db-font-size-xs: 0.75rem;

  --db-leading-tight:   1.15;
  --db-leading-snug:    1.3;
  --db-leading-normal:  1.5;
  --db-leading-relaxed: 1.625;

  --db-tracking-tight:  -0.025em;
  --db-tracking-normal: 0;
  --db-tracking-wide:   0.05em;
}

/* =========================================================
 * 2. RESET MINIMAL + BASE TIPOGRAFICA
 * ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--db-font-sans);
  font-size: var(--db-font-size-body);
  line-height: var(--db-leading-normal);
  color: var(--db-color-text);
  background-color: var(--db-color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
 * 3. ELEMENTOS TIPOGRAFICOS
 * ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--db-font-sans);
  font-weight: 700;
  line-height: var(--db-leading-tight);
  letter-spacing: var(--db-tracking-tight);
  color: var(--db-color-text);
  margin-block-start: 0;
  margin-block-end: var(--db-space-4);
}

h1 { font-size: var(--db-font-size-h1); }
h2 { font-size: var(--db-font-size-h2); }
h3 { font-size: var(--db-font-size-h3); }
h4 { font-size: var(--db-font-size-h4); }
h5 { font-size: var(--db-font-size-body-lg); }
h6 { font-size: var(--db-font-size-body); }

p {
  margin-block-start: 0;
  margin-block-end: var(--db-space-4);
  line-height: var(--db-leading-relaxed);
  color: var(--db-color-text-secondary);
}

a {
  color: var(--db-green-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--db-green-700);
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================================================
 * 4. CONTENEDOR Y LAYOUT
 * ========================================================= */
/* Sin box global: cada banda va borde a borde; el ancho lo impone cada
   seccion via su propio wrapper __inner (o la caja propia del single, abajo). */

/* El ancho de lectura global (constrained default, queues/archive) */
.is-layout-constrained > :where(:not(.alignwide):not(.alignfull)) {
  max-width: 720px;
  margin-inline: auto;
}

/* Ancho de prosa del artículo individual: 640px ≈ 65ch (FIX 4)
   Solo aplica dentro del single (db-single-main) */
.db-single-main .is-layout-constrained > :where(:not(.alignwide):not(.alignfull)) {
  max-width: 640px;
}

/* 4B. FULL-BLEED + CAJAS POR SECCION (retiro del box global, 16-jul)
   .wp-site-blocks ya no encajona: las bandas con fondo llegan borde a borde.
   El single conserva su caja propia (ancho + padding lateral). Los demas
   wrappers con fondo solo necesitan el padding lateral en movil — en desktop
   sus hijos ya se auto-centran via .is-layout-constrained (regla de arriba). */
.db-single-main {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--db-space-6);
}

.db-archive-header,
.db-404-main,
.db-home-pillars {
  padding-inline: var(--db-space-6);
}

/* =========================================================
 * 5. BOTONES — PILL VERDE (CANON)
 * ========================================================= */
.wp-block-button .wp-block-button__link,
.wp-block-button__link {
  border-radius: var(--db-radius-pill) !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-family: var(--db-font-sans);
  font-size: var(--db-font-size-body);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  cursor: pointer;
  border: none;
}

/* Variante primaria (verde) */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link {
  background-color: var(--db-green-600); /* a11y: AA 4.77:1 sobre blanco */
  color: #ffffff;
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover {
  background-color: var(--db-green-700);
  box-shadow: var(--db-shadow-green);
  transform: translateY(-1px);
}

/* Variante CTA lima */
.wp-block-button.is-style-cta .wp-block-button__link {
  background-color: var(--db-lime);
  color: #1c1917;
}
.wp-block-button.is-style-cta .wp-block-button__link:hover {
  background-color: var(--db-lime-dark);
}

/* Variante outline */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--db-green-600);
  border: 2px solid var(--db-green-500) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--db-green-50, #e8f5eb);
}

/* =========================================================
 * 6. CARDS DE ARTICULO Y RECOMENDADAS — POST-IT (16-jul)
 * Card de listado (article-card.php) y card del riel (recommended-card.php):
 * imagen de fondo + tarjeta "post-it" blanca superpuesta con categoria,
 * titulo y fecha. Cubre los 3 outputs posibles de core/post-featured-image
 * (foto curada db-hero-photo, thumbnail normal, fallback branded
 * db-thumb-fallback) via el filtro 14B de functions.php.
 * ========================================================= */

/* Badge de categoria — pill naranja, reusado en hero + ambas cards */
.db-badge-cat {
  display: inline-block;
  margin-bottom: 8px;
}
.db-badge-cat a {
  display: inline-block;
  background: var(--db-orange);
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: var(--db-radius-pill);
  padding: 4px 11px;
  text-decoration: none;
  line-height: 1.4;
}
.db-badge-cat a:hover {
  background: var(--db-orange-dark);
  color: #ffffff;
}
.db-badge-cat--sm a {
  font-size: 0.6rem;
  padding: 3px 9px;
}

/* Card base — comportamiento compartido (hover) */
.db-article-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.db-article-card:hover {
  box-shadow: 0 20px 40px -12px rgba(20, 50, 25, 0.4);
  transform: translateY(-2px);
}

/* Variante post-it: imagen de fondo + tarjeta blanca al pie */
.db-article-card--postit {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.db-article-card--postit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 50, 25, 0.28), transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Imagen de fondo: cubre los 3 outputs posibles de post-featured-image */
.db-article-card--postit .db-article-card__image,
.db-article-card--postit .db-hero-photo--card,
.db-article-card--postit .db-thumb-fallback--card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
}
.db-article-card--postit .db-article-card__image img,
.db-article-card--postit .db-hero-photo--card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.db-article-card--postit .db-thumb-fallback--card {
  aspect-ratio: auto !important;
}

/* Post-it chico: categoria + titulo + fecha */
.db-postit-sm {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
  box-shadow: 0 12px 24px -12px rgba(20, 50, 25, 0.5);
}
.db-postit-sm .wp-block-post-title {
  margin: 0 0 6px;
}
.db-postit-sm .wp-block-post-title,
.db-postit-sm .wp-block-post-title a {
  color: var(--db-green-900);
  text-decoration: none;
}
.db-postit-sm .wp-block-post-title a:hover {
  color: var(--db-green-600);
  text-decoration: underline;
}
.db-postit-sm .wp-block-post-date {
  margin: 0;
  color: var(--db-neutral-600);
}

/* Card del riel "Recomendados" (recommended-card.php) — vertical, flujo normal */
.db-reco-card {
  display: flex;
  flex-direction: column;
}
.db-reco-card__thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.db-reco-card__thumb .wp-block-post-featured-image,
.db-reco-card__thumb .db-hero-photo,
.db-reco-card__thumb .db-thumb-fallback {
  margin: 0;
  width: 100%;
  height: 100%;
}
.db-reco-card__thumb .wp-block-post-featured-image img,
.db-reco-card__thumb .db-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.db-reco-card__body {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.db-reco-card__body .wp-block-post-date {
  margin: 0;
  color: var(--db-neutral-500);
}
.db-reco-card__body .wp-block-post-title {
  margin: 0;
}
.db-reco-card__body .wp-block-post-title,
.db-reco-card__body .wp-block-post-title a {
  color: var(--db-green-900);
  text-decoration: none;
}
.db-reco-card__body .wp-block-post-title a:hover {
  color: var(--db-green-600);
  text-decoration: underline;
}

/* =========================================================
 * 7. HEADER SITE
 * ========================================================= */
.wp-block-site-header,
.db-site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--db-color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.db-site-header__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--db-space-4) var(--db-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-space-6);
}
.db-site-header__logo img {
  height: 32px;
  width: auto;
}
.db-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--db-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.db-site-header__nav a {
  font-size: var(--db-font-size-sm);
  font-weight: 500;
  color: var(--db-color-text-secondary);
  text-decoration: none;
  padding-block: var(--db-space-1);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.db-site-header__nav a:hover,
.db-site-header__nav a[aria-current="page"] {
  color: var(--db-green-600);
  border-bottom-color: var(--db-green-500);
}
.db-site-header__cta {
  flex-shrink: 0;
}

/* =========================================================
 * 8. FOOTER
 * ========================================================= */
.db-site-footer {
  background: #ffffff;
  border-top: 1px solid var(--db-color-border);
  padding-block: var(--db-space-12);
}
.db-site-footer__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--db-space-6);
}
.db-site-footer__logo img {
  height: 28px;
  width: auto;
  margin-bottom: var(--db-space-4);
}
.db-site-footer__compliance {
  margin-top: var(--db-space-8);
  padding-top: var(--db-space-6);
  border-top: 1px solid var(--db-color-border);
  font-size: var(--db-font-size-xs);
  color: var(--db-color-text-subtle);
  line-height: var(--db-leading-relaxed);
}
.db-site-footer__compliance strong {
  color: var(--db-color-text-muted);
}

/* =========================================================
 * 9. HERO DEL BLOG
 * ========================================================= */
.db-hero {
  background: linear-gradient(135deg, var(--db-green-500) 0%, var(--db-green-400) 100%);
  color: #ffffff;
  padding: var(--db-space-18) var(--db-space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.db-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.db-hero__inner {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
.db-hero__kicker {
  font-size: var(--db-font-size-xs);
  font-weight: 700;
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  margin-bottom: var(--db-space-4);
}
.db-hero__title {
  font-size: clamp(1.875rem, 5vw, var(--db-font-size-display));
  font-weight: 800;
  line-height: var(--db-leading-tight);
  letter-spacing: var(--db-tracking-tight);
  color: #ffffff;
  margin-bottom: var(--db-space-5);
}
.db-hero__subtitle {
  font-size: var(--db-font-size-body-lg);
  color: rgba(255,255,255,0.88);
  line-height: var(--db-leading-relaxed);
  margin-bottom: var(--db-space-8);
}
.db-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--db-space-2);
  background-color: var(--db-lime);
  color: #1c1917;
  font-weight: 700;
  font-size: var(--db-font-size-body);
  padding: var(--db-space-3) var(--db-space-8);
  border-radius: var(--db-radius-pill);
  text-decoration: none;
  min-height: 44px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.db-hero__cta:hover {
  background-color: var(--db-lime-dark);
  color: #1c1917;
  transform: translateY(-1px);
}

/* =========================================================
 * 10. SECCION CATEGORIAS PILAR
 * ========================================================= */
.db-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--db-space-4);
  padding: var(--db-space-12) var(--db-space-6);
  max-width: 1280px;
  margin-inline: auto;
}
.db-pillar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--db-space-3);
  padding: var(--db-space-6) var(--db-space-4);
  background: var(--db-color-surface-subtle);
  border-radius: var(--db-radius-card);
  border: 1px solid var(--db-color-border);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.db-pillar-card:hover {
  background: var(--db-green-50, #e8f5eb);
  box-shadow: var(--db-shadow-green);
  transform: translateY(-2px);
}
.db-pillar-card__icon {
  font-size: 2rem;
  line-height: 1;
}
.db-pillar-card__name {
  font-size: var(--db-font-size-sm);
  font-weight: 600;
  color: var(--db-color-text);
  text-align: center;
  line-height: var(--db-leading-snug);
}

/* =========================================================
 * 11. PROSA (single.html — ancho de lectura)
 * ========================================================= */
.db-prose {
  max-width: 640px;
  margin-inline: auto;
  font-size: var(--db-font-size-body-lg);
  line-height: var(--db-leading-relaxed);
  color: var(--db-color-text-secondary);
}
.db-prose h2 {
  font-size: var(--db-font-size-h2);
  margin-top: var(--db-space-10);
  margin-bottom: var(--db-space-5);
  color: var(--db-green-900);
  border-bottom: 2px solid var(--db-green-100, #c1e4c9);
  padding-bottom: var(--db-space-2);
}
.db-prose h3 {
  font-size: var(--db-font-size-h3);
  margin-top: var(--db-space-8);
  margin-bottom: var(--db-space-3);
  color: var(--db-green-800);
}
.db-prose ul, .db-prose ol {
  padding-left: var(--db-space-6);
  margin-bottom: var(--db-space-4);
}
.db-prose li {
  margin-bottom: var(--db-space-2);
}
.db-prose blockquote {
  border-left: 4px solid var(--db-green-400);
  margin: var(--db-space-6) 0;
  padding: var(--db-space-4) var(--db-space-6);
  background: var(--db-green-50, #e8f5eb);
  border-radius: 0 var(--db-radius-md) var(--db-radius-md) 0;
  font-style: italic;
  color: var(--db-color-text);
}
.db-prose blockquote p { margin: 0; }
.db-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--db-space-6);
  font-size: var(--db-font-size-sm);
}
.db-prose th {
  background: var(--db-green-500);
  color: #ffffff;
  font-weight: 600;
  padding: var(--db-space-3) var(--db-space-4);
  text-align: left;
}
.db-prose td {
  padding: var(--db-space-3) var(--db-space-4);
  border-bottom: 1px solid var(--db-color-border-solid);
}
.db-prose tr:nth-child(even) td {
  background: var(--db-neutral-50);
}

/* =========================================================
 * 12. CTA BANNER
 * ========================================================= */
.db-cta-banner {
  background: linear-gradient(135deg, var(--db-green-800) 0%, var(--db-green-700) 100%);
  color: #ffffff;
  border-radius: var(--db-radius-card);
  padding: var(--db-space-10) var(--db-space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--db-space-5);
  margin-block: var(--db-space-12);
}
.db-cta-banner__title {
  font-size: var(--db-font-size-h2);
  font-weight: 800;
  line-height: var(--db-leading-tight);
  color: #ffffff;
  margin: 0;
}
.db-cta-banner__sub {
  font-size: var(--db-font-size-body-lg);
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.db-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--db-space-2);
  background-color: var(--db-lime);
  color: #1c1917;
  font-weight: 700;
  font-size: var(--db-font-size-body-lg);
  padding: var(--db-space-4) var(--db-space-10);
  border-radius: var(--db-radius-pill);
  text-decoration: none;
  min-height: 52px;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.db-cta-banner__btn:hover {
  background-color: var(--db-lime-dark);
  color: #1c1917;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* =========================================================
 * 13. FIRMA AUTOR
 * ========================================================= */
.db-author-signature {
  display: flex;
  align-items: center;
  gap: var(--db-space-4);
  padding: var(--db-space-6);
  background: var(--db-color-surface-subtle);
  border-radius: var(--db-radius-card);
  border: 1px solid var(--db-color-border);
  margin-block: var(--db-space-8);
}
.db-author-signature__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--db-green-100, #c1e4c9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.db-author-signature__info {
  display: flex;
  flex-direction: column;
  gap: var(--db-space-1);
}
.db-author-signature__name {
  font-size: var(--db-font-size-sm);
  font-weight: 700;
  color: var(--db-color-text);
}
.db-author-signature__role {
  font-size: var(--db-font-size-xs);
  color: var(--db-color-text-subtle);
}

/* =========================================================
 * 14. CALLOUT / NOTA DE AVISO
 * ========================================================= */
.db-callout {
  display: flex;
  gap: var(--db-space-4);
  padding: var(--db-space-5) var(--db-space-6);
  border-radius: var(--db-radius-md);
  margin-block: var(--db-space-6);
}
.db-callout--info {
  background: var(--db-green-50, #e8f5eb);
  border-left: 4px solid var(--db-green-400);
}
.db-callout--warning {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
}
.db-callout__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1.5;
}
.db-callout__body {
  font-size: var(--db-font-size-sm);
  color: var(--db-color-text-secondary);
  line-height: var(--db-leading-relaxed);
}
.db-callout__body strong {
  color: var(--db-color-text);
}
.db-callout__body p:last-child { margin: 0; }

/* =========================================================
 * 15. TABLA DE COMPARACION
 * ========================================================= */
.db-comparison-table {
  width: 100%;
  border-radius: var(--db-radius-card);
  overflow: hidden;
  border: 1px solid var(--db-color-border-solid);
  margin-block: var(--db-space-8);
  box-shadow: var(--db-shadow-sm);
}
.db-comparison-table table {
  width: 100%;
  border-collapse: collapse;
}
.db-comparison-table thead th {
  background: var(--db-green-500);
  color: #ffffff;
  font-weight: 700;
  font-size: var(--db-font-size-sm);
  padding: var(--db-space-4);
  text-align: center;
}
.db-comparison-table thead th:first-child {
  text-align: left;
}
.db-comparison-table tbody td {
  padding: var(--db-space-3) var(--db-space-4);
  border-bottom: 1px solid var(--db-color-border);
  font-size: var(--db-font-size-sm);
  vertical-align: middle;
}
.db-comparison-table tbody tr:nth-child(even) td {
  background: var(--db-neutral-50);
}
.db-comparison-table .check {
  color: var(--db-green-500);
  font-weight: 700;
  text-align: center;
}
.db-comparison-table .cross {
  color: #9ca3af;
  text-align: center;
}

/* =========================================================
 * 16. GRILLAS DE ARCHIVO
 * ========================================================= */
.db-archive-grid {
  display: grid;
  grid-template-columns: 1fr;            /* movil <640: 1 col */
  row-gap: var(--db-space-8);            /* 32px entre filas */
  column-gap: var(--db-space-6);         /* 24px entre columnas */
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--db-space-6);
  padding-block: var(--db-space-10);
}
@media (min-width: 640px) {
  .db-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .db-archive-grid { grid-template-columns: repeat(3, 1fr) !important; } /* gana al inline grid de WP */
}

/* =========================================================
 * 17. BUSQUEDA / 404
 * ========================================================= */
.db-search-page,
.db-404-page {
  text-align: center;
  padding: var(--db-space-18) var(--db-space-6);
  max-width: 600px;
  margin-inline: auto;
}
.db-search-page .wp-block-search__input,
.db-404-page .wp-block-search__input {
  border-radius: var(--db-radius-pill);
  border: 2px solid var(--db-color-border-solid);
  padding: var(--db-space-3) var(--db-space-5);
  font-size: var(--db-font-size-body);
  font-family: var(--db-font-sans);
  width: 100%;
  max-width: 400px;
  transition: border-color 0.15s ease;
}
.db-search-page .wp-block-search__input:focus,
.db-404-page .wp-block-search__input:focus {
  outline: none;
  border-color: var(--db-green-500);
}
.db-search-page .wp-block-search__button,
.db-404-page .wp-block-search__button {
  background: var(--db-green-500);
  color: #ffffff;
  border: none;
  border-radius: var(--db-radius-pill);
  padding: var(--db-space-3) var(--db-space-6);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s ease;
}
.db-search-page .wp-block-search__button:hover,
.db-404-page .wp-block-search__button:hover {
  background: var(--db-green-600);
}

/* =========================================================
 * 18A. ILUSTRACION BRANDED POR CATEGORIA (sistema Nu en verde)
 * Renderizada por functions.php cuando el post no tiene foto.
 * Tarjeta (--card, 16/9) y cabecera de articulo (--band, altura controlada).
 * ========================================================= */
.db-thumb-fallback {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; width: 100%;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.14), transparent 48%),
    linear-gradient(135deg, var(--fb-from, var(--db-green-500)) 0%, var(--fb-via, var(--db-green-650)) 52%, var(--fb-to, var(--db-green-800)) 100%);
}
.db-thumb-fallback::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
  background-size: 18px 18px; pointer-events: none;
}
.db-thumb-fallback__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; padding: 16px;
}
.db-thumb-fallback__icon svg {
  width: 52px; height: 52px; color: #ffffff; stroke-width: 1.75;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
.db-thumb-fallback__label { font-size: 15px; font-weight: 700; color: #ffffff; line-height: 1.2; }
/* Wordmark = marca (no contenido funcional); exento de AA por WCAG 1.4.3. Alpha .92 para legibilidad. */
.db-thumb-fallback__brand {
  position: absolute; left: 16px; bottom: 12px; z-index: 1;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.92);
}
/* Banda de cabecera SIN foto: altura controlada (mata el hueco ~693px) */
.db-thumb-fallback--band { height: clamp(220px, 32vw, 360px); }
.db-thumb-fallback--band .db-thumb-fallback__inner { padding: 24px; }
.db-thumb-fallback--band .db-thumb-fallback__icon svg { width: 64px; height: 64px; stroke-width: 1.6; }
.db-thumb-fallback--band .db-thumb-fallback__label { font-size: 24px; }
.db-thumb-fallback--band .db-thumb-fallback__brand { left: 24px; bottom: 16px; }

/* Familias cromaticas — mismo verde de marca, distinto punto de la escala */
.db-thumb-fallback--fam-carro   { --fb-from: var(--db-green-500); --fb-via: var(--db-green-700); --fb-to: var(--db-green-900); }
.db-thumb-fallback--fam-salud   { --fb-from: var(--db-green-450); --fb-via: var(--db-green-500); --fb-to: var(--db-green-800); }
.db-thumb-fallback--fam-familia { --fb-from: var(--db-green-500); --fb-via: var(--db-green-600); --fb-to: var(--db-green-800); }
.db-thumb-fallback--fam-datos   { --fb-from: var(--db-green-700); --fb-via: var(--db-green-800); --fb-to: var(--db-green-900); }
.db-thumb-fallback--fam-marca   { --fb-from: var(--db-green-450); --fb-via: var(--db-green-500); --fb-to: var(--db-green-650); }

/* --- Y3: refinamiento de tarjeta estilo Nu --- */
.db-article-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.db-article-card .wp-post-image {
  transition: transform 0.3s ease;
}
.db-article-card:hover .wp-post-image {
  transform: scale(1.04);
}

/* --- Y4: firma cromatica verde sutil sobre fotos reales --- */
.db-article-card__image,
.db-single-featured {
  position: relative;
}
.db-article-card__image::after,
.db-single-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(46, 144, 66, 0.22);
  pointer-events: none;
}

/* --- Y5: tarjeta nivel Nu en verde (escala tipografica + sin borde, va DESPUES de Y3) --- */
.db-article-card { border: 0; }
/* db-article-card__category: usada por el breadcrumb del single (db-breadcrumb),
   NO por las cards de listado (esas usan db-badge-cat). No es CSS muerto. */
.db-article-card__category {
  font-size: 0.8125rem;            /* 13px */
  font-weight: 700;
  text-transform: uppercase;       /* firma de marca, divergencia deliberada vs Nu */
  letter-spacing: 0.04em;
  color: var(--db-green-600);      /* #29833c — AA 4.77:1 */
}

/* --- Breadcrumb 13px — paridad Nu [D3] --- */
.db-breadcrumb p,
.db-breadcrumb .wp-block-post-terms { font-size: 13px; }

/* =========================================================
 * 18B. MENU MOVIL — OVERLAY FULL-SCREEN (FIX 2)
 * ========================================================= */

/* Overlay abierto: full-screen, sobre todo.
   height:100% no resuelve contra el viewport en fixed → usar 100dvh + min-height. */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background: #fff !important;
  z-index: 100000 !important;
  padding: 72px 24px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
}

/* Contenedor interno y lista: columna a todo el ancho */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation {
  width: 100% !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Botón cerrar: arriba a la derecha, visible */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10 !important;
}

/* Items del menú — área táctil WCAG 2.5.5 (≥48px) */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  font-size: 18px;
  min-height: 48px;
  border-bottom: 1px solid #e7e5e4;
  text-decoration: none;
  color: var(--db-color-text);
}

/* Botón hamburguesa y botón cerrar — mínimo 44×44px */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
}

/* =========================================================
 * 18C. CTA PRIMARIO — UN SOLO VERDE AA (FIX 3)
 * #247a37 ≈ 4.6:1 sobre blanco — pasa WCAG AA.
 * ========================================================= */
.wp-block-button.is-style-primary .wp-block-button__link {
  background-color: #247a37 !important;
  color: #ffffff !important;
}
.wp-block-button.is-style-primary .wp-block-button__link:hover {
  background-color: #1f6b30 !important;
  box-shadow: var(--db-shadow-green);
}

/* =========================================================
 * 18E. BREADCRUMB ARTICULO (FIX 6)
 * ========================================================= */
.db-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--db-font-size-xs);
  color: var(--db-color-text-subtle);
  margin-bottom: var(--db-space-3);
}

.db-breadcrumb p,
.db-breadcrumb .wp-block-post-terms {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

.db-breadcrumb a {
  color: var(--db-color-text-subtle);
  text-decoration: none;
}

.db-breadcrumb a:hover {
  color: var(--db-green-600);
  text-decoration: underline;
}

/* =========================================================
 * 18D. HEADER STICKY ROBUSTO + SOMBRA (FIX 7)
 * Asegura sticky aunque el bloque no emita el atributo de posicion.
 * ========================================================= */
.db-site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Garantizar que ningún ancestro rompa el sticky con overflow */
.wp-site-blocks {
  overflow: visible !important;
}

/* =========================================================
 * 18. RESPONSIVE
 * ========================================================= */
@media (max-width: 640px) {
  .db-site-header__inner {
    flex-wrap: wrap;
    gap: var(--db-space-3);
  }
  .db-site-header__nav {
    gap: var(--db-space-4);
    flex-wrap: wrap;
  }
  /* Paddings móviles de hero/pillar-grid/cta-banner: los gobierna el inline
     style de cada pattern (24px, look aprobado) — no duplicar aquí: un
     override de clase JAMÁS gana contra el atributo style del bloque. */
  .db-archive-grid {
    grid-template-columns: 1fr;
    padding-inline: var(--db-space-4);
  }
  .db-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .db-author-signature {
    flex-direction: column;
    text-align: center;
  }
}

/* =========================================================
 * 18F. BOTONES DE COMPARTIR (single)
 * ========================================================= */
.db-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
}
.db-share__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--db-color-text);
}
.db-share__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.db-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: var(--db-color-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.db-share__btn:hover {
  background: #fafaf9;
  border-color: rgba(0, 0, 0, 0.22);
}
.db-share__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.db-share__btn--wa {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.db-share__btn--wa:hover {
  background: #1ebe5b;
  border-color: #1ebe5b;
}
.db-share__copy.is-copied {
  background: #247a37;
  border-color: #247a37;
  color: #fff;
}
@media (max-width: 480px) {
  .db-share {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
 * 18G. NEWSLETTER (banda del footer, site-wide)
 * ========================================================= */
.db-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid #e7e5e4;
}
.db-newsletter__copy { flex: 1 1 320px; }
.db-newsletter__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--db-color-text);
  margin: 0 0 6px;
}
.db-newsletter__sub {
  font-size: 14px;
  color: var(--db-color-text-subtle);
  margin: 0;
}
.db-newsletter__form { flex: 1 1 340px; max-width: 440px; }
.db-newsletter__row { display: flex; gap: 8px; }
.db-newsletter__email {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  color: var(--db-color-text);
  font-size: 15px;
  min-height: 46px;
}
.db-newsletter__email:focus {
  outline: none;
  border-color: #247a37;
  box-shadow: 0 0 0 3px rgba(36, 122, 55, 0.12);
}
.db-newsletter__btn {
  padding: 12px 22px;
  border-radius: 9999px;
  border: none;
  background: #247a37;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 46px;
  transition: background 0.15s;
}
.db-newsletter__btn:hover { background: #1f6b30; }
.db-newsletter__btn:disabled { opacity: 0.6; cursor: default; }
.db-newsletter__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.db-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--db-color-text-subtle);
  line-height: 1.5;
}
.db-newsletter__consent input { margin-top: 2px; flex-shrink: 0; }
.db-newsletter__consent a { color: var(--db-green-600); text-decoration: underline; }
.db-newsletter__msg { font-size: 13px; font-weight: 600; margin: 10px 0 0; min-height: 18px; }
.db-newsletter__msg.is-ok { color: var(--db-green-600); }
.db-newsletter__msg.is-err { color: #c0392b; }
@media (max-width: 640px) {
  /* nowrap + basis auto: en column, el wrap heredado rompe el stretch (el
     item toma su max-content y desborda) y el basis 320px pasa a ser altura */
  .db-newsletter { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .db-newsletter__copy,
  .db-newsletter__form { flex-basis: auto; }
  .db-newsletter__form { max-width: none; }
}


/* Sigue leyendo — malla de enlazado interno (related posts) */
.db-related{max-width:640px;margin:3rem auto 0;padding-top:2rem;border-top:1px solid #e7e5e4}
.db-related__title{font-size:1.25rem;font-weight:700;color:#14481d;margin:0 0 1rem}
.db-related__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.db-related__list li{margin:0}
.db-related__list a{color:#247a37;text-decoration:none;font-weight:600;line-height:1.45}
.db-related__list a:hover{text-decoration:underline}

/* Foto destacada real (hero) — gana al fallback branded cuando hay meta _despertar_hero */
.db-hero-photo{margin:0;border-radius:16px;overflow:hidden}
.db-hero-photo img{display:block;width:100%;object-fit:cover}
.db-hero-photo--card{aspect-ratio:16/9}
.db-hero-photo--card img{aspect-ratio:16/9}
.db-hero-photo--band img{height:clamp(220px,38vw,380px)}

/* =========================================================
 * 19. HERO DEL SINGLE — IMAGEN DE FONDO + POST-IT (Pedido 1, 16-jul)
 * className "db-single-hero" (deliberadamente distinto de "db-hero", ya usado
 * por patterns/hero.php — el banner CTA verde del home/front-page.html).
 * ========================================================= */
.db-single-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(320px, 44vw, 480px);
  display: flex;
  align-items: flex-end;
  padding: 34px;
  box-shadow: 0 18px 46px -18px rgba(20, 72, 29, 0.4);
  border: 1px solid rgba(20, 72, 29, 0.12);
}
.db-single-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(20, 72, 29, 0.12), transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Cubre los 3 outputs posibles de post-featured-image dentro del hero:
   (a) foto curada db-hero-photo--band, (b) thumbnail normal, (c) fallback
   branded db-thumb-fallback--band. */
.db-single-hero .wp-block-post-featured-image,
.db-single-hero .db-hero-photo,
.db-single-hero .db-thumb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
}
.db-single-hero .wp-block-post-featured-image img,
.db-single-hero .db-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.db-single-hero .db-thumb-fallback--band {
  height: 100% !important;
}

/* Post-it grande: badge + H1 + meta */
.db-postit {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 24px;
  max-width: 460px;
  box-shadow: 0 22px 40px -16px rgba(20, 50, 25, 0.5);
}
/* Refuerzo de color: theme.json fija un color por defecto para core/post-title
   (bloques.core/post-title) — estas reglas garantizan el verde-900 del post-it
   sin depender del orden de carga entre global-styles-inline-css y este archivo. */
.db-postit-title,
.db-postit-title.wp-block-post-title {
  color: var(--db-green-900);
}
.db-postit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--db-neutral-600);
  font-variant-numeric: tabular-nums;
}
.db-postit-meta p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.db-postit-meta .wp-block-post-date,
.db-postit-meta .wp-block-post-author-name {
  color: var(--db-neutral-600);
  font-size: inherit;
}

@media (max-width: 781px) {
  .db-single-hero {
    padding: 14px;
    min-height: 380px;
  }
  .db-postit {
    max-width: 100%;
  }
}

/* =========================================================
 * 20. SINGLE — COLUMNAS: CONTENIDO + ASIDE "RECOMENDADOS" (Pedido 3b, 16-jul)
 * Movil: flujo normal (aside al pie, tras el articulo). Desktop >=1024px: grid
 * 2 columnas con aside sticky. Layout "default" (no "constrained") a proposito:
 * el ancho de 1280px ya lo impone .db-single-main (seccion 4) sobre el propio
 * <main>; agregar otro contentSize aqui duplicaria el padding.
 * ========================================================= */
.db-single-aside {
  margin-top: 48px;
}
.db-single-aside__title {
  margin: 0 0 16px;
}
.db-reco-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.db-reco-list > li {
  margin: 0;
}

@media (min-width: 1024px) {
  .db-single-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
  }
  .db-single-aside {
    margin-top: 0;
    position: sticky;
    top: 96px;
    align-self: start;
  }
}