/*
Theme Name: Vida Plena B
Theme URI: https://vidaplena.blog
Description: Child theme de ColorMag Pro que aplica el rediseño "Dirección B — Fresco y contemporáneo" de Vida Plena (vidaplena.blog): paleta verde bienestar, tipografía Bricolage Grotesque + Figtree, esquinas redondeadas, chips de sección y publicidad discreta. Toda la marca vive acá para sobrevivir las actualizaciones del tema padre. No toca contenido ni plugins (Site Kit, AdSense, OneSignal siguen intactos). Ver README.md.
Author: Yellow Pulse Digital
Author URI: https://yellowpulse.digital
Template: colormag-pro
Version: 1.2.0
Requires PHP: 7.4
Text Domain: vidaplena-b
*/

/* =========================================================================
   VIDA PLENA · DIRECCIÓN B — FRESCO Y CONTEMPORÁNEO
   Estructura del archivo:
     0.  Tokens (variables de marca)
     1.  Base (fondo crema, tipografías, links)
     2.  Header + wordmark (círculo bosque con hoja)
     3.  Navegación como chips píldora + botón Suscribirme
     4.  Top bar
     5.  Hero de portada (imagen full-bleed + overlay + chip lima)
     6.  Tarjetas de nota (radio 20px, chip verde suave, sin sombras)
     7.  Cabeceras de sección + banda Recetas (bosque)
     8.  Página de nota (single)
     9.  Banda "Seguí leyendo" (relacionadas)
    10.  Archive de categoría (cabecera verde suave + chips subcat.)
    11.  Sidebar / widgets / caja de autor
    12.  Newsletter "El boletín verde"
    13.  Publicidad (contenedores rotulados)
    14.  Botones, inputs, buscador
    15.  Paginación (círculos 44px)
    16.  Footer (caja verde suave)
    17.  Responsive
   Las variables se definen una sola vez en :root; no se repiten literales.
   ========================================================================= */

/* ---- 0. TOKENS ---------------------------------------------------------- */
:root {
  /* Color */
  --vp-bosque:        #1E3B2C;   /* texto fuerte, botones primarios, bandas oscuras */
  --vp-lima:          #BCE784;   /* acento: chip hero, newsletter (máx. 1 por vista) */
  --vp-verde-medio:   #2F7A4D;   /* hover de enlaces y botones */
  --vp-verde-suave:   #E4F0DC;   /* chips de sección, cajas de cabecera */
  --vp-blanco-calido: #FDFCF7;   /* fondo general del body */
  --vp-blanco:        #FFFFFF;   /* fondo de tarjetas */
  --vp-texto:         #33453A;   /* cuerpo de texto */
  --vp-meta:          #5E6E60;   /* fechas, metadatos — oscurecido 1 paso desde el
                                    #7B8A7C del brief para cumplir contraste AA (≈5.2:1) */
  --vp-crema-banda:   #EDF6E4;   /* texto sobre bandas bosque */
  --vp-borde:         rgba(30,59,44,0.08);   /* hairline de tarjetas */
  --vp-borde-hover:   rgba(47,122,77,0.40);

  /* Radios */
  --vp-r-pill:  999px;   /* botones, chips, inputs */
  --vp-r-card:  20px;    /* tarjetas, cajas de sidebar, ads */
  --vp-r-media: 24px;    /* hero e imágenes grandes */
  --vp-r-band:  28px;    /* bandas, cabeceras de sección, pie */

  /* Tipografía */
  --vp-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --vp-sans:    'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --vp-wrap: 40px;       /* padding horizontal de bandas */
}

/* ---- 1. BASE ------------------------------------------------------------ */
body,
body.colormag-pro,
.cm-normal-container,
.cm-narrow-container,
.cm-wide-container {
  background-color: var(--vp-blanco-calido) !important;
  color: var(--vp-texto);
  font-family: var(--vp-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* El contenedor "boxed" del tema: lo llevamos al crema, sin sombra dura */
.boxed #cm-page,
#cm-page {
  background-color: var(--vp-blanco-calido) !important;
  box-shadow: none !important;
}

a { color: var(--vp-bosque); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--vp-verde-medio); }

h1, h2, h3, h4, h5, h6,
.cm-entry-title, .cm-entry-title a,
.cm-page-title, .cm-widget-title, .widget-title {
  font-family: var(--vp-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vp-bosque);
  text-transform: none;   /* los títulos van en sentence case vía filtro PHP */
}

/* Punto/hoja decorativa reutilizable */
.vp-leaf {
  display: inline-block;
  width: .7em; height: .7em;
  flex: none;
  color: var(--vp-lima);
}

/* Labels de UI (rótulos) en Figtree con tracking amplio */
.vp-eyebrow {
  font-family: var(--vp-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vp-meta);
}

/* ---- 2. HEADER + WORDMARK ----------------------------------------------- */
.cm-header,
.cm-header .cm-header-1,
.cm-header .cm-header-2 {
  background: var(--vp-blanco-calido) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cm-header-1 .cm-row { border-bottom: 1px solid var(--vp-borde); padding-bottom: 10px; }

/* Oculta el logo rasterizado del tema y el site-title/description duplicados */
.cm-site-branding img.custom-logo,
.cm-site-branding .custom-logo-link img { display: none !important; }
.cm-site-title, .site-title, #cm-site-branding .site-title,
.site-description, #cm-site-branding .site-description,
.cm-site-description { display: none !important; }

/* Logo oficial de marca (imagen; inyectado por PHP en el header, por vp.js en
   el footer). No se redibuja: se sirve assets/marca/logo-horizontal[-claro].png */
.vp-brand { display: inline-flex; align-items: center; }
.vp-logo { display: inline-flex; align-items: center; line-height: 0; }
.vp-logo img {
  height: 46px;
  width: auto;
  display: block;
  max-width: 100%;
}

/* ---- 3. NAVEGACIÓN COMO CHIPS PÍLDORA ----------------------------------- */
#cm-primary-nav,
.cm-primary-nav,
.cm-header-2 {
  background: var(--vp-blanco-calido) !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Barra flotante del menú: fondo blanco, esquinas redondeadas, acento lima
   arriba y una sombra suave para darle vida y separarlo del fondo crema. */
.cm-menu-primary-container {
  background: var(--vp-blanco);
  border: 1px solid var(--vp-borde);
  border-top: 3px solid var(--vp-lima);
  border-radius: var(--vp-r-card);
  box-shadow: 0 8px 22px rgba(30,59,44,0.07);
  padding: 8px 14px;
  margin: 8px 0 12px;
}
.cm-primary-nav > ul,
#cm-primary-nav > ul,
.cm-menu-primary-container > ul,
#cm-primary-nav .cm-menu-primary-container > ul,
.cm-primary-nav ul#menu-secciones,
.cm-primary-nav ul.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cm-primary-nav ul li,
#cm-primary-nav ul li {
  background: transparent !important;
  float: none !important;
  margin: 0 !important;
  list-style: none;
}

.cm-primary-nav ul li a,
#cm-primary-nav ul li a {
  font-family: var(--vp-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vp-bosque) !important;
  background: transparent;
  padding: 9px 16px !important;
  border-radius: var(--vp-r-pill);
  line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}
.cm-primary-nav ul li a:hover,
#cm-primary-nav ul li a:hover,
.cm-primary-nav ul li:hover > a,
#cm-primary-nav ul li:hover > a {
  background: var(--vp-verde-suave) !important;
  color: var(--vp-bosque) !important;
}
/* Chip activo */
.cm-primary-nav ul li.current-menu-item > a,
.cm-primary-nav ul li.current_page_item > a,
.cm-primary-nav ul li.current-menu-ancestor > a,
.cm-primary-nav ul li.current-category-ancestor > a,
#cm-primary-nav ul li.current-menu-item > a,
#cm-primary-nav ul li.current-menu-ancestor > a {
  background: var(--vp-verde-suave) !important;
  color: var(--vp-bosque) !important;
}
/* Ícono home del tema: neutralizado */
.cm-home-icon.front_page_on { background: transparent !important; }
#cm-primary-nav .cm-icon path,
.cm-home-icon .cm-icon path { fill: var(--vp-bosque) !important; }

/* Submenús (dropdown) redondeados */
.cm-primary-nav ul ul,
#cm-primary-nav ul ul {
  background: var(--vp-blanco) !important;
  border: 1px solid var(--vp-borde) !important;
  border-radius: var(--vp-r-card) !important;
  box-shadow: 0 12px 30px rgba(30,59,44,0.10) !important;
  padding: 8px !important;
  overflow: hidden;
}
.cm-primary-nav ul ul li a,
#cm-primary-nav ul ul li a { border-radius: 12px; }

/* Botones de Home / Email en el menú (chips circulares con ícono) */
.cm-primary-nav ul li.vp-nav-btn a,
#cm-primary-nav ul li.vp-nav-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0 !important;
  border-radius: var(--vp-r-pill);
  background: var(--vp-verde-suave) !important;
  color: var(--vp-bosque) !important;
}
.cm-primary-nav ul li.vp-nav-btn a:hover,
#cm-primary-nav ul li.vp-nav-btn a:hover {
  background: var(--vp-verde-medio) !important;
  color: var(--vp-blanco-calido) !important;
}
.vp-nav-btn svg { display: block; }

/* Botón "Suscribirme" (inyectado por vp.js en el header) */
.vp-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vp-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--vp-blanco-calido) !important;
  background: var(--vp-bosque);
  padding: 10px 20px;
  border-radius: var(--vp-r-pill);
  line-height: 1;
  white-space: nowrap;
  transition: background .15s ease;
}
.vp-subscribe:hover { background: var(--vp-verde-medio); color: var(--vp-blanco-calido) !important; }

/* Toggle hamburguesa (mobile) */
.cm-menu-toggle,
.cm-menu-toggle .cm-icon,
.cm-menu-toggle .cm-icon--bars {
  color: var(--vp-bosque) !important;
  fill: var(--vp-bosque) !important;
}

/* ---- 4. TOP BAR --------------------------------------------------------- */
.cm-top-bar {
  background: var(--vp-bosque) !important;
  color: var(--vp-crema-banda);
  border: 0 !important;
}
.cm-top-bar,
.cm-top-bar a,
.cm-top-bar .date-in-header {
  font-family: var(--vp-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vp-crema-banda);
}
.cm-top-bar a { color: var(--vp-lima) !important; }
.cm-top-bar a:hover { color: var(--vp-blanco) !important; }
.cm-top-bar .cm-top-search .cm-icon { color: var(--vp-crema-banda) !important; }
/* Ticker de últimas notas del tema, si está activo */
.breaking-news-latest {
  background: var(--vp-lima) !important;
  color: var(--vp-bosque) !important;
  font-family: var(--vp-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border-radius: var(--vp-r-pill) !important;
  padding: 4px 12px !important;
  text-transform: none;
}
.breaking-news-latest::before,
.breaking-news-latest::after { display: none !important; }
.newsticker li a { font-family: var(--vp-sans); color: var(--vp-crema-banda); }
.newsticker li a:hover { color: var(--vp-lima); }

/* ---- 5. HERO DE PORTADA ------------------------------------------------- */
/* El widget "news in picture" (style-5) del tema: lo convertimos en hero
   full-bleed con overlay, chip lima y titular blanco. */
.cm-highlighted-post-no-slide .cm-post,
.cm-highlighted-post .cm-post {
  position: relative;
  border-radius: var(--vp-r-media);
  overflow: hidden;
  isolation: isolate;
}
.cm-highlighted-post-no-slide .cm-post > a,
.cm-highlighted-post-no-slide .cm-post figure,
.cm-highlighted-post .cm-post > a {
  display: block;
  margin: 0;
}
.cm-highlighted-post-no-slide .cm-post img,
.cm-highlighted-post .cm-post img {
  width: 100%;
  height: clamp(340px, 42vw, 520px);
  object-fit: cover;
  border-radius: var(--vp-r-media) !important;
  display: block;
}
/* Overlay degradado */
.cm-highlighted-post-no-slide .cm-post::after,
.cm-highlighted-post .cm-post::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--vp-r-media);
  background: linear-gradient(to top, rgba(14,31,21,0.85), rgba(14,31,21,0.15) 55%, transparent 80%);
  z-index: 1;
  pointer-events: none;
}
.cm-highlighted-post-no-slide .cm-post-content,
.cm-highlighted-post .cm-post-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px 32px 30px;
}
.cm-highlighted-post-no-slide .cm-entry-title,
.cm-highlighted-post .cm-entry-title { margin: 10px 0 0; }
.cm-highlighted-post-no-slide .cm-entry-title a,
.cm-highlighted-post .cm-entry-title a {
  color: var(--vp-blanco) !important;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.cm-highlighted-post-no-slide .cm-below-entry-meta,
.cm-highlighted-post-no-slide .cm-below-entry-meta a,
.cm-highlighted-post .cm-below-entry-meta,
.cm-highlighted-post .cm-below-entry-meta a {
  color: rgba(253,252,247,0.85) !important;
}
/* Chip lima del hero (pisa el color inline por-categoría del Customizer) */
.cm-highlighted-post-no-slide .cm-post-categories a,
.cm-highlighted-post .cm-post-categories a {
  background: var(--vp-lima) !important;
  color: var(--vp-bosque) !important;
}

/* ---- 6. TARJETAS DE NOTA ------------------------------------------------ */
/* Bloques de posts destacados y del loop → tarjetas blancas redondeadas */
.cm-featured-posts .cm-post,
.cm-posts .cm-post,
.cm-content article.cm-first-post,
.cm-content .cm-posts article {
  background: var(--vp-blanco);
  border: 1px solid var(--vp-borde);
  border-radius: var(--vp-r-card);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
  box-shadow: none;
}
.cm-featured-posts .cm-post:hover,
.cm-posts .cm-post:hover,
.cm-content .cm-posts article:hover {
  border-color: var(--vp-borde-hover);
  transform: none;
  box-shadow: none;
}
/* Imagen de tarjeta: arriba, sin marco */
.cm-featured-image,
.cm-post-thumbnail { margin: 0; border-radius: 0; overflow: hidden; }
.cm-featured-image img,
.cm-post-thumbnail img,
.wp-post-image {
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100%;
  display: block;
}
/* Cuerpo de tarjeta */
.cm-featured-posts .cm-post-content,
.cm-posts .cm-post-content { padding: 16px 18px 18px; }

/* Chip de sección (verde suave, píldora) — pisa el color inline del tema */
.cm-post-categories a,
a.category.tag,
.cm-above-title-cat a,
.cm-cat-links a {
  font-family: var(--vp-sans) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  background: var(--vp-verde-suave) !important;
  color: var(--vp-bosque) !important;
  padding: 5px 12px !important;
  border-radius: var(--vp-r-pill) !important;
  display: inline-block;
  line-height: 1.3;
  border: 0 !important;
}
.cm-post-categories a:hover,
a.category.tag:hover {
  background: var(--vp-verde-medio) !important;
  color: var(--vp-blanco) !important;
}

/* Título de tarjeta */
.cm-entry-title { line-height: 1.2; margin: 10px 0 8px; }
.cm-entry-title a {
  font-size: 20px;
  color: var(--vp-bosque) !important;
  letter-spacing: -0.01em;
}
.cm-entry-title a:hover { color: var(--vp-verde-medio) !important; }

/* Extracto */
.cm-entry-summary,
.cm-entry-summary p {
  font-family: var(--vp-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--vp-texto);
}
/* Metadatos */
.cm-below-entry-meta,
.cm-below-entry-meta a,
.cm-post-date, .cm-author, .cm-posted-on {
  font-family: var(--vp-sans);
  font-size: 13px;
  color: var(--vp-meta);
}
.cm-below-entry-meta a:hover { color: var(--vp-verde-medio); }

/* ---- 7. CABECERAS DE SECCIÓN + BANDA RECETAS ---------------------------- */
/* Título de sección de la home (widget) — el tema pone un border inline por
   color de categoría; lo unificamos a hairline verde. */
.cm-widget-title,
.cm-section-title {
  font-family: var(--vp-display) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -0.015em !important;
  color: var(--vp-bosque) !important;
  border-bottom: 2px solid var(--vp-verde-suave) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
  text-transform: none !important;
}
.cm-widget-title span,
.cm-section-title span {
  background: transparent !important;
  color: var(--vp-bosque) !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.cm-widget-title::after,
.cm-section-title::after,
.widget-title::after { background: var(--vp-verde-medio) !important; }

/* Banda Recetas (bosque) — vp.js le pone .vp-band al widget cuyo título es
   "Recetas". El bloque queda como una caja oscura redondeada. */
.vp-band {
  background: var(--vp-bosque) !important;
  border-radius: var(--vp-r-band);
  padding: 32px var(--vp-wrap) 36px;
  margin: 28px 0;
  color: var(--vp-crema-banda);
}
.vp-band .cm-widget-title,
.vp-band .cm-section-title {
  color: var(--vp-crema-banda) !important;
  border-bottom-color: rgba(237,246,228,0.20) !important;
}
.vp-band .cm-widget-title span { color: var(--vp-crema-banda) !important; }
.vp-band .cm-post {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(237,246,228,0.14) !important;
}
.vp-band .cm-entry-title a { color: var(--vp-crema-banda) !important; }
.vp-band .cm-entry-title a:hover { color: var(--vp-lima) !important; }
.vp-band .cm-below-entry-meta,
.vp-band .cm-below-entry-meta a,
.vp-band .cm-post-date { color: rgba(237,246,228,0.7) !important; }
.vp-band .cm-post-categories a {
  background: var(--vp-lima) !important;
  color: var(--vp-bosque) !important;
}
.vp-band a { color: var(--vp-lima); }
.vp-band a:hover { color: var(--vp-blanco); }

/* ---- 8. PÁGINA DE NOTA (SINGLE) ----------------------------------------- */
.single .cm-entry-header { text-align: center; max-width: 760px; margin: 0 auto 8px; }
.single .cm-entry-header-meta { justify-content: center; }
.single .cm-post-categories { justify-content: center; display: flex; margin-bottom: 14px; }

.single .cm-entry-title,
.single-post .entry-title {
  font-family: var(--vp-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--vp-bosque);
  margin: 6px 0 16px;
}

/* Meta del autor + fecha + lectura, centrada */
.single .cm-below-entry-meta,
.single .cm-entry-header-meta {
  font-family: var(--vp-sans);
  font-size: 14px;
  color: var(--vp-meta);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.single .cm-author, .single .cm-vcard a { font-weight: 700; color: var(--vp-bosque); }

/* Imagen destacada del single: radio 24px + epígrafe */
.single .cm-featured-image { margin: 22px auto 8px; max-width: 760px; }
.single .cm-featured-image img { border-radius: var(--vp-r-media) !important; }
.single .cm-featured-image figcaption,
.single .wp-caption-text {
  font-family: var(--vp-sans);
  font-size: 13px;
  color: var(--vp-meta);
  text-align: center;
  margin-top: 8px;
}

/* Cuerpo: columna angosta 620px, Figtree 17/1.85 */
.single .cm-single-post-content,
.single .cm-entry-summary {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.single .cm-entry-summary,
.single .cm-entry-summary p,
.single .cm-entry-summary li,
.single .entry-content,
.single .entry-content p {
  font-family: var(--vp-sans) !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--vp-texto) !important;
}
.single .cm-entry-summary a,
.single .entry-content a {
  color: var(--vp-verde-medio) !important;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--vp-verde-suave);
}
.single .cm-entry-summary a:hover,
.single .entry-content a:hover { color: var(--vp-bosque) !important; box-shadow: inset 0 -2px 0 var(--vp-lima); }

.single .cm-entry-summary h2 {
  font-size: 28px !important; line-height: 1.15 !important;
  margin: 1.6em 0 .5em; color: var(--vp-bosque);
}
.single .cm-entry-summary h3 {
  font-size: 22px !important; line-height: 1.2 !important;
  margin: 1.4em 0 .4em; color: var(--vp-bosque);
}

/* Destacado dentro de nota: caja verde suave (reemplaza blockquotes clave) */
.single .cm-entry-summary blockquote,
.single .entry-content blockquote {
  background: var(--vp-verde-suave);
  border: 0;
  border-radius: var(--vp-r-card);
  padding: 22px 26px;
  margin: 28px 0;
  color: var(--vp-bosque);
  font-size: 18px;
  line-height: 1.6;
}
.single .cm-entry-summary blockquote p:last-child,
.single .entry-content blockquote p:last-child { margin-bottom: 0; }

/* Tags como chips + botones compartir píldora */
.single .tags-links,
.single .cm-tags,
.single .cm-post-tags {
  max-width: 620px; margin: 30px auto 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.single .tags-links a, .single .cm-tags a {
  font-family: var(--vp-sans); font-size: 13px; font-weight: 600;
  background: var(--vp-verde-suave); color: var(--vp-bosque);
  padding: 6px 14px; border-radius: var(--vp-r-pill);
}
.single .tags-links a:hover, .single .cm-tags a:hover { background: var(--vp-verde-medio); color: var(--vp-blanco); }

/* ---- 9. BANDA "SEGUÍ LEYENDO" (relacionadas) ---------------------------- */
.single-related-posts,
.related-posts-wrapper {
  background: var(--vp-bosque) !important;
  border-radius: var(--vp-r-band);
  padding: 34px var(--vp-wrap) 38px !important;
  margin: 44px 0 0 !important;
}
.related-posts-main-title,
.related-posts-flyout-main-title {
  font-family: var(--vp-display) !important;
  font-weight: 800 !important;
  color: var(--vp-crema-banda) !important;
  font-size: 24px !important;
  letter-spacing: -0.015em;
  margin: 0 0 22px !important;
  border: 0 !important;
}
.single-related-posts a,
.related-posts-wrapper a { color: var(--vp-crema-banda) !important; }
.single-related-posts a:hover,
.related-posts-wrapper a:hover { color: var(--vp-lima) !important; }
.related-posts-thumbnail img {
  border-radius: var(--vp-r-card) !important;
  box-shadow: none !important;
}
.single-related-posts .related-posts-title,
.related-posts-wrapper .related-posts-title {
  font-family: var(--vp-display) !important;
  font-weight: 700 !important;
  color: var(--vp-crema-banda) !important;
}

/* ---- 10. ARCHIVE DE CATEGORÍA ------------------------------------------- */
/* Cabecera de sección: caja verde suave con breadcrumb, h1, descripción y
   chips de subcategorías (los chips los inyecta vp.js). */
.cm-page-header {
  background: var(--vp-verde-suave) !important;
  border-radius: var(--vp-r-band);
  padding: 30px 34px 32px !important;
  margin: 24px 0 28px !important;
  border: 0 !important;
  text-align: left;
}
.cm-page-header .breadcrumb-wrap,
.cm-page-header .breadcrumb-title {
  font-family: var(--vp-sans);
  font-size: 13px;
  color: var(--vp-meta);
  margin-bottom: 8px;
}
.cm-page-header .breadcrumb-wrap a { color: var(--vp-verde-medio); }
.cm-page-title {
  font-family: var(--vp-display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.6vw, 40px) !important;
  color: var(--vp-bosque) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.02em;
}
.vp-arch-desc {
  font-family: var(--vp-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--vp-texto);
  max-width: 720px;
  margin: 0 0 16px;
}
/* Chips de subcategorías dentro de la cabecera */
.vp-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.vp-subcats a {
  font-family: var(--vp-sans);
  font-size: 13px; font-weight: 600;
  background: var(--vp-blanco);
  color: var(--vp-bosque);
  padding: 7px 15px;
  border-radius: var(--vp-r-pill);
  border: 1px solid var(--vp-borde);
}
.vp-subcats a:hover { background: var(--vp-bosque); color: var(--vp-blanco-calido); border-color: var(--vp-bosque); }

/* Nota destacada del archivo como tarjeta horizontal (primer post) */
@media (min-width: 768px) {
  .archive .cm-posts.cm-layout-1 > .cm-first-post,
  .archive .cm-content > .cm-posts > article.cm-first-post {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    gap: 0;
  }
  .archive .cm-first-post .cm-featured-image { height: 100%; }
  .archive .cm-first-post .cm-featured-image img { height: 100%; object-fit: cover; }
  .archive .cm-first-post .cm-post-content { padding: 26px 28px; align-self: center; }
}

/* ---- 11. SIDEBAR / WIDGETS / CAJA DE AUTOR ------------------------------ */
.cm-secondary .widget,
.sidebar .widget {
  background: var(--vp-blanco);
  border: 1px solid var(--vp-borde);
  border-radius: var(--vp-r-card);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: none;
}
.cm-secondary .widget-title,
.cm-secondary .cm-widget-title {
  font-size: 18px !important;
  margin-bottom: 16px !important;
}
.cm-secondary .widget a { color: var(--vp-bosque); }
.cm-secondary .widget a:hover { color: var(--vp-verde-medio); }
.widget_categories li,
.widget_recent_entries li {
  border-bottom: 1px solid var(--vp-borde);
  padding: 8px 0;
}
.widget_categories li:last-child, .widget_recent_entries li:last-child { border-bottom: 0; }

/* Caja de autor (inyectada por vp.js al final del single) */
.vp-author-box {
  max-width: 620px;
  margin: 34px auto 0;
  background: var(--vp-blanco);
  border: 1px solid var(--vp-borde);
  border-radius: var(--vp-r-card);
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.vp-author-box img { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.vp-author-box .vp-author-name {
  font-family: var(--vp-display); font-weight: 700; font-size: 18px; color: var(--vp-bosque);
}
.vp-author-box .vp-author-bio { font-family: var(--vp-sans); font-size: 14px; color: var(--vp-texto); margin-top: 2px; }

/* ---- 12. NEWSLETTER "EL BOLETÍN VERDE" ---------------------------------- */
.vp-newsletter {
  background: var(--vp-lima);
  border-radius: var(--vp-r-card);
  padding: 26px 24px 28px;
  color: var(--vp-bosque);
}
.vp-newsletter__title {
  font-family: var(--vp-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--vp-bosque);
}
.vp-newsletter__sub {
  font-family: var(--vp-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--vp-bosque);
  opacity: .85;
  margin: 0 0 16px;
}
.vp-newsletter__form { display: flex; flex-direction: column; gap: 10px; }
.vp-newsletter__form input[type="email"] {
  width: 100%;
  font-family: var(--vp-sans);
  font-size: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(30,59,44,0.18) !important;
  border-radius: var(--vp-r-pill) !important;
  background: var(--vp-blanco) !important;
  color: var(--vp-bosque);
}
.vp-newsletter__form button,
.vp-newsletter__form input[type="submit"] {
  font-family: var(--vp-sans) !important;
  font-weight: 700;
  font-size: 14px;
  background: var(--vp-bosque) !important;
  color: var(--vp-blanco-calido) !important;
  border: 0 !important;
  border-radius: var(--vp-r-pill) !important;
  padding: 13px 20px !important;
  cursor: pointer;
}
.vp-newsletter__form button:hover,
.vp-newsletter__form input[type="submit"]:hover { background: var(--vp-verde-medio) !important; }
/* Que un form mc4wp/CF7 embebido herede el layout */
.vp-newsletter .mc4wp-form-fields,
.vp-newsletter .wpcf7-form { display: flex; flex-direction: column; gap: 10px; }

/* ---- 13. PUBLICIDAD ----------------------------------------------------- */
/* Contenedores rotulados; los anuncios de terceros quedan exentos del sistema
   de color. Reubicados por vp.js desde el pool oculto. */
.vp-ad {
  margin: 30px auto;
  padding: 14px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  background: var(--vp-blanco);
  border: 1px solid var(--vp-borde);
  border-radius: var(--vp-r-card);
}
.vp-ad--header { margin: 14px auto 6px; }
.vp-ad--inline { margin: 34px auto; }
.vp-ad::before {
  content: "Publicidad";
  display: block;
  font-family: var(--vp-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vp-meta);
  margin-bottom: 8px;
}
.vp-adwidget { display: inline-block; max-width: 100%; }
.vp-adwidget img, .vp-adwidget ins, .vp-adwidget iframe { max-width: 100%; height: auto; }
#vp-ad-pool, #vp-arch-extra { display: none !important; }

/* ---- 14. BOTONES / INPUTS / BUSCADOR ------------------------------------ */
button, input[type="submit"], input[type="button"],
.btn, .cm-button, .wpcf7-submit,
.mc4wp-form input[type="submit"] {
  font-family: var(--vp-sans) !important;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  background: var(--vp-bosque) !important;
  color: var(--vp-blanco-calido) !important;
  border: 0 !important;
  border-radius: var(--vp-r-pill) !important;
  box-shadow: none !important;
  padding: 11px 22px;
  cursor: pointer;
}
button:hover, input[type="submit"]:hover, .cm-button:hover,
.wpcf7-submit:hover, .mc4wp-form input[type="submit"]:hover {
  background: var(--vp-verde-medio) !important;
  color: var(--vp-blanco-calido) !important;
}
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], textarea, select {
  font-family: var(--vp-sans);
  border: 1px solid var(--vp-borde) !important;
  border-radius: var(--vp-r-pill) !important;
  background: var(--vp-blanco);
  color: var(--vp-texto);
  padding: 11px 16px;
}
textarea { border-radius: var(--vp-r-card) !important; }
.cm-top-search .cm-icon, .cm-search-icon { color: var(--vp-crema-banda); }

/* ---- 15. PAGINACIÓN (círculos 44px) ------------------------------------- */
.pagination, .cm-navigation, .navigation.pagination,
.nav-links {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 36px 0;
}
.page-numbers,
.pagination a, .pagination span,
.nav-links a, .nav-links span {
  font-family: var(--vp-sans) !important;
  font-weight: 700;
  min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border-radius: var(--vp-r-pill) !important;
  background: var(--vp-blanco) !important;
  border: 1px solid var(--vp-borde) !important;
  color: var(--vp-bosque) !important;
  box-shadow: none !important;
}
.page-numbers.current,
.pagination .current {
  background: var(--vp-bosque) !important;
  color: var(--vp-blanco-calido) !important;
  border-color: var(--vp-bosque) !important;
}
.page-numbers:hover,
.pagination a:hover, .nav-links a:hover {
  background: var(--vp-verde-suave) !important;
  color: var(--vp-bosque) !important;
  border-color: var(--vp-borde-hover) !important;
}

/* ---- 16. FOOTER (caja verde suave) -------------------------------------- */
#cm-footer, .cm-footer, .colormag-footer--classic {
  background: var(--vp-blanco-calido) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cm-footer-cols,
.cm-footer .cm-container > .cm-row {
  background: var(--vp-verde-suave) !important;
  border-radius: var(--vp-r-band);
  padding: 40px var(--vp-wrap) !important;
  margin: 24px 0;
}
#cm-footer .widget,
#cm-footer .cm-upper-footer-col,
#cm-footer .widget_text { background: transparent !important; }
.cm-footer-cols, .cm-footer-cols *,
.cm-footer .widget, .cm-footer .widget * { color: var(--vp-bosque) !important; }
#cm-footer .cm-widget-title {
  background: transparent !important;
  color: var(--vp-bosque) !important;
  border-bottom: 1px solid rgba(30,59,44,0.14) !important;
  padding: 0 0 8px 0 !important;
  margin-bottom: 14px !important;
  font-family: var(--vp-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
#cm-footer .cm-widget-title span { background: transparent !important; color: var(--vp-bosque) !important; padding: 0 !important; box-shadow: none !important; }
.cm-footer-cols a:hover, .cm-footer .widget a:hover { color: var(--vp-verde-medio) !important; }
.cm-footer .vp-logo img { height: 40px; }

/* Barra inferior del footer */
.cm-footer-bar, .cm-footer-bar-style-3 {
  background: var(--vp-bosque) !important;
  color: var(--vp-crema-banda);
  border: 0 !important;
  border-radius: 0;
}
.cm-footer-bar a, .cm-footer-bar { color: var(--vp-crema-banda); }
.cm-footer-bar a:hover { color: var(--vp-lima); }

/* Crédito "Powered by Yellow Pulse Digital" (amarillo de marca YP). */
.vp-credit {
  font-family: var(--vp-sans);
  font-size: 12px;
  color: var(--vp-crema-banda);
  margin-top: 4px;
}
.vp-credit a { color: #FFD400 !important; font-weight: 700; text-decoration: none; }
.vp-credit a:hover { color: #FFD400 !important; text-decoration: underline; }

/* Íconos de redes (inyectados por vp.js) */
.vp-social { display: inline-flex; gap: 14px; align-items: center; }
.vp-social a { color: var(--vp-bosque); display: inline-flex; }
.vp-social a:hover { color: var(--vp-verde-medio) !important; }
.cm-top-bar .vp-social a { color: var(--vp-crema-banda); }
.cm-top-bar .vp-social a:hover { color: var(--vp-lima) !important; }
.cm-footer-bar .vp-social a { color: var(--vp-crema-banda); }
.cm-footer-bar .vp-social a:hover { color: var(--vp-lima) !important; }

/* ---- 17. REGLAS DE HIGIENE VISUAL --------------------------------------- */
/* Matar degradados/sombras heredados del tema en componentes propios */
.cm-header, .cm-widget-title, .cm-button {
  background-image: none !important;
}
.cm-featured-posts .cm-post,
.cm-posts .cm-post { background-image: none !important; }

/* ---- 18. RESPONSIVE ----------------------------------------------------- */
@media (max-width: 991px) {
  .vp-band, .single-related-posts, .related-posts-wrapper { padding: 26px 22px 30px !important; }
  .cm-page-header { padding: 24px 22px 26px !important; }
  .cm-highlighted-post-no-slide .cm-post-content,
  .cm-highlighted-post .cm-post-content { padding: 22px 22px 24px; }
}
@media (max-width: 782px) {
  /* Nav en modo chips scrolleables horizontal cuando el tema no colapsa */
  .cm-primary-nav > ul, #cm-primary-nav > ul { gap: 6px; }
  .vp-subscribe { padding: 9px 16px; }
  /* Barra flotante del menú: un poco más compacta en móvil */
  .cm-menu-primary-container { padding: 6px 10px; margin: 6px 0 10px; }
}
@media (max-width: 600px) {
  .vp-logo img { height: 38px; }
  .single .cm-entry-summary, .single .cm-entry-summary p { font-size: 16px !important; }
  .cm-footer-cols, .cm-footer .cm-container > .cm-row { padding: 28px 22px !important; }
  /* Hit targets ≥ 44px en móvil */
  .cm-primary-nav ul li a, #cm-primary-nav ul li a { padding: 12px 16px !important; }
  .cm-primary-nav ul li.vp-nav-btn a, #cm-primary-nav ul li.vp-nav-btn a { width: 44px; height: 44px; padding: 0 !important; }
}

/* =========================================================================
   19. BLOQUE DE HOME (código): 4 últimas notas — hero + 3 tarjetas
   ========================================================================= */
.vp-home-featured { margin: 4px 0 28px; }
.vp-home-featured__title {
  font-family: var(--vp-display); font-weight: 800;
  font-size: 22px; letter-spacing: -0.015em; color: var(--vp-bosque);
  border-bottom: 2px solid var(--vp-verde-suave);
  padding-bottom: 10px; margin: 0 0 20px;
}

/* Tarjeta base */
.vp-card { background: var(--vp-blanco); border: 1px solid var(--vp-borde); border-radius: var(--vp-r-card); overflow: hidden; transition: border-color .15s ease; }
.vp-card:hover { border-color: var(--vp-borde-hover); }
.vp-card__media { display: block; }
.vp-card__media img { width: 100%; display: block; }
.vp-card__body { padding: 16px 18px 18px; }
.vp-card__cat a {
  font-family: var(--vp-sans); font-size: 12px; font-weight: 700;
  background: var(--vp-verde-suave); color: var(--vp-bosque);
  padding: 5px 12px; border-radius: var(--vp-r-pill); display: inline-block; line-height: 1.3;
}
.vp-card__cat a:hover { background: var(--vp-verde-medio); color: var(--vp-blanco); }
.vp-card__title { margin: 10px 0 8px; line-height: 1.2; }
.vp-card__title a { font-family: var(--vp-display); font-weight: 700; font-size: 20px; color: var(--vp-bosque); letter-spacing: -0.01em; }
.vp-card__title a:hover { color: var(--vp-verde-medio); }
.vp-card__meta { font-family: var(--vp-sans); font-size: 13px; color: var(--vp-meta); }

/* Hero (nota más reciente): imagen full-bleed + overlay + chip lima */
.vp-card--hero {
  position: relative; border: 0; border-radius: var(--vp-r-media); isolation: isolate;
}
.vp-card--hero .vp-card__media img {
  height: clamp(320px, 40vw, 500px); object-fit: cover; border-radius: var(--vp-r-media);
}
.vp-card--hero::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--vp-r-media); z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(14,31,21,0.85), rgba(14,31,21,0.15) 55%, transparent 80%);
}
.vp-card--hero .vp-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 32px 30px; }
.vp-card--hero .vp-card__cat a { background: var(--vp-lima) !important; color: var(--vp-bosque) !important; }
.vp-card--hero .vp-card__title a { color: var(--vp-blanco); font-size: clamp(26px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -0.02em; }
.vp-card--hero .vp-card__meta { color: rgba(253,252,247,0.85); }

/* Grilla de 3 tarjetas (legacy, por compatibilidad) */
.vp-home-featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.vp-card--card .vp-card__media img { height: 200px; object-fit: cover; }

/* Layout sin sidebar: 2 grandes arriba + fila de 4 chicas abajo */
.vp-feat-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vp-feat-top .vp-card--hero .vp-card__media img { height: clamp(260px, 30vw, 380px); }
.vp-feat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 20px; }
.vp-feat-row .vp-card--card .vp-card__media img { height: 150px; }
.vp-feat-row .vp-card__title a { font-size: 17px; }
.vp-feat-row .vp-card__body { padding: 14px 16px 16px; }

/* Fallback sin imagen destacada: nada de recuadros vacíos. */
.vp-card--hero.vp-card--noimg { min-height: 320px; background: var(--vp-bosque); display: flex; }
.vp-card--hero.vp-card--noimg::after { background: linear-gradient(135deg, rgba(47,122,77,0.35), transparent 70%); }
.vp-card--card.vp-card--noimg { display: flex; flex-direction: column; }
.vp-card--card.vp-card--noimg .vp-card__body { padding-top: 20px; }
.vp-mini--noimg .vp-mini__body { padding: 2px 0; }

/* =========================================================================
   20. SIDEBAR: "Últimas notas" (mini-cards)
   ========================================================================= */
.vp-side-latest__list { display: flex; flex-direction: column; gap: 6px; }
.vp-mini { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--vp-borde); }
.vp-mini:last-child { border-bottom: 0; }
.vp-mini__thumb { flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
.vp-mini__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-mini__body { display: flex; flex-direction: column; gap: 3px; }
.vp-mini__title { font-family: var(--vp-display); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--vp-bosque); }
.vp-mini:hover .vp-mini__title { color: var(--vp-verde-medio); }
.vp-mini__date { font-family: var(--vp-sans); font-size: 12px; color: var(--vp-meta); }

/* =========================================================================
   21. FOOTER NUEVO (logo + menú + redes + crédito YP)
   ========================================================================= */
/* Wrapper del footer: centra la caja dentro de #cm-footer (ancho completo) */
.vp-footer-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
#cm-footer .vp-footer, .cm-footer .vp-footer { display: block !important; }
.vp-footer {
  background: var(--vp-verde-suave);
  border-radius: var(--vp-r-band);
  padding: 34px 40px;
  margin: 24px 0;
}
.vp-footer__top {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(30,59,44,0.12);
}
.vp-footer__brand { display: inline-flex; line-height: 0; }
.vp-footer__brand img { height: 44px; width: auto; display: block; }
.vp-footer__nav { flex: 1; display: flex; justify-content: center; }
.vp-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vp-footer__menu li { margin: 0; }
.vp-footer__menu a {
  font-family: var(--vp-sans); font-size: 14px; font-weight: 600; color: var(--vp-bosque);
  padding: 8px 14px; border-radius: var(--vp-r-pill); display: inline-block; line-height: 1.2;
}
.vp-footer__menu a:hover { background: var(--vp-blanco); color: var(--vp-verde-medio); }
.vp-footer .vp-social a { color: var(--vp-bosque); }
.vp-footer .vp-social a:hover { color: var(--vp-verde-medio); }
.vp-footer__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--vp-sans); font-size: 13px; color: var(--vp-bosque);
}
.vp-footer__copy { color: var(--vp-bosque); opacity: .8; }
/* El crédito YP hereda .vp-credit (amarillo #FFD400) definido arriba; sobre
   fondo claro conservamos el amarillo con buena legibilidad. */
.vp-footer .vp-credit { color: var(--vp-bosque); margin: 0; }
.vp-footer .vp-credit a { color: #C9A400 !important; }  /* amarillo YP oscurecido para contraste AA sobre verde suave */
.vp-footer .vp-credit a:hover { color: #A88600 !important; }

/* Banner de pie */
.vp-ad--footer { margin: 24px auto 8px; }

/* =========================================================================
   22. RESPONSIVE de los bloques nuevos
   ========================================================================= */
@media (max-width: 991px) {
  .vp-home-featured__grid { grid-template-columns: 1fr 1fr; }
  .vp-feat-top { grid-template-columns: 1fr; }   /* 2 grandes se apilan en tablet/móvil */
  .vp-feat-row { grid-template-columns: repeat(2, 1fr); }
  .vp-footer__top { flex-direction: column; align-items: flex-start; }
  .vp-footer__nav { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .vp-home-featured__grid { grid-template-columns: 1fr; }
  .vp-feat-top { grid-template-columns: 1fr; }
  .vp-feat-row { grid-template-columns: 1fr 1fr; }
  .vp-feat-row .vp-card--card .vp-card__media img { height: 130px; }
  .vp-card--card .vp-card__media img { height: 200px; }
  .vp-footer { padding: 26px 22px; }
  .vp-footer__bar { flex-direction: column; align-items: flex-start; }
}