/*
 * ═══════════════════════════════════════════════════════════════
 *  MRV FINANCIAMIENTO CLIMÁTICO — Sistema de Diseño
 *  SharePoint 2016 On-Premise · Style Library Override
 *  Versión: 1.0 · DNP Colombia · 2026
 *
 *  Estructura:
 *  00. Fuentes e importaciones
 *  01. Tokens CSS (variables globales)
 *  02. Reset y base SharePoint 2016
 *  03. Layout y contenedores SP (#s4-*, .ms-*)
 *  04. Tipografía
 *  05. Colores y fondos utilitarios
  06. Componentes — Navegación
 *  07. Componentes — Botones
 *  08. Componentes — Badges y chips
 *  09. Componentes — Cards KPI
 *  10. Componentes — Cards de contenido
 *  11. Componentes — Tabla de datos
 *  12. Componentes — Formularios e inputs
 *  13. Componentes — Alertas y avisos
 *  14. Componentes — Barras de progreso
 *  15. Componentes — Tabs / Pestañas
 *  16. Componentes — Breadcrumb
 *  17. Componentes — Hero / Banner
 *  18. Componentes — Cifras KPI Strip
 *  19. Componentes — Sección genérica
 *  20. Componentes — Footer
 *  21. Animaciones y transiciones
 *  22. Utilidades
 *  23. Responsive
 * ═══════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════
   00. FUENTES
   ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');


/* ══════════════════════════════════════════════
   01. TOKENS CSS — VARIABLES GLOBALES
   ══════════════════════════════════════════════ */
:root {
  /* Paleta verde — identidad ambiental */
  --newmrv-forest:  #0D3B2E;
  --newmrv-canopy:  #1A5C42;
  --newmrv-moss:    #2E7D5A;
  --newmrv-fern:    #4CAF82;
  --newmrv-mist:    #A8D5BC;
  --newmrv-sky:     #C8E6D4;
  --newmrv-fog:     #EEF7F2;

  /* Paleta azul — clima y datos */
  --newmrv-water:   #1B6CA8;
  --newmrv-glacier: #4FA3D1;
  --newmrv-air:     #B3DFF0;

  /* Neutros tierra */
  --newmrv-earth:   #2C2416;
  --newmrv-stone:   #5C5248;
  --newmrv-sand:    #9E9288;
  --newmrv-bone:    #F5F2EE;
  --newmrv-white:   #FDFCFB;

  /* Semánticos */
  --newmrv-success: #2E7D5A;
  --newmrv-warning: #C47B0A;
  --newmrv-danger:  #C0392B;
  --newmrv-info:    #1B6CA8;

  /* Tipografía */
  --newmrv-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --newmrv-font-body:    'DM Sans', 'Segoe UI', Arial, sans-serif;
  --newmrv-font-mono:    'DM Mono', 'Courier New', Courier, monospace;

  /* Espaciado */
  --newmrv-xs:  4px;
  --newmrv-sm:  8px;
  --newmrv-md:  16px;
  --newmrv-lg:  24px;
  --newmrv-xl:  40px;
  --newmrv-2xl: 64px;
  --newmrv-3xl: 96px;

  /* Radios */
  --newmrv-r-sm:   4px;
  --newmrv-r-md:   8px;
  --newmrv-r-lg:   16px;
  --newmrv-r-xl:   24px;
  --newmrv-r-pill: 100px;

  /* Sombras */
  --newmrv-shadow-sm: 0 1px 3px rgba(13,59,46,.08), 0 1px 2px rgba(13,59,46,.06);
  --newmrv-shadow-md: 0 4px 16px rgba(13,59,46,.10), 0 2px 6px rgba(13,59,46,.07);
  --newmrv-shadow-lg: 0 12px 40px rgba(13,59,46,.13), 0 4px 12px rgba(13,59,46,.08);
  --newmrv-shadow-xl: 0 24px 64px rgba(13,59,46,.16);

  /* Transiciones */
  --newmrv-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --newmrv-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --newmrv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --newmrv-t-fast: 150ms;
  --newmrv-t-base: 280ms;
  --newmrv-t-slow: 500ms;
}


/* ══════════════════════════════════════════════
   02. RESET Y BASE — SHAREPOINT 2016
   Neutraliza los estilos por defecto de SP que
   interfieren con el diseño personalizado.
   ══════════════════════════════════════════════ */

/* Reset box-sizing global */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Tipografía base del body */
body,
.ms-body,
#s4-bodyContainer {
  font-family: var(--newmrv-font-body) !important;
  font-size: 16px !important;
  color: var(--newmrv-earth) !important;
  background-color: var(--newmrv-white) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Eliminar tipografía SP por defecto */
.ms-rtestate-field,
.ms-rtestate-field *,
.ms-rteFontSize-1,
.ms-rteFontSize-2,
.ms-rteFontSize-3 {
  font-family: var(--newmrv-font-body) !important;
}

/* Links base */
a,
.ms-link,
.ms-listlink {
  color: var(--newmrv-moss) !important;
  text-decoration: none !important;
  -webkit-transition: color var(--newmrv-t-fast) !important;
  transition: color var(--newmrv-t-fast) !important;
}
a:hover,
.ms-link:hover,
.ms-listlink:hover {
  color: var(--newmrv-canopy) !important;
  text-decoration: underline !important;
}

/* Eliminar bordes de tablas SP */
.ms-formtable,
.ms-formtable td,
.ms-formtable th {
  border: none !important;
  padding: 0 !important;
}

/* Reset headings SP */
h1, h2, h3, h4, h5, h6,
.ms-rteElement-H1,
.ms-rteElement-H2,
.ms-rteElement-H3 {
  font-family: var(--newmrv-font-display) !important;
  font-weight: 400 !important;
  color: var(--newmrv-forest) !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--newmrv-md) 0 !important;
}


/* ══════════════════════════════════════════════
   03. LAYOUT Y CONTENEDORES SHAREPOINT
   Mapeo de los IDs y clases estructurales de
   SharePoint 2016 al layout MRV.
   ══════════════════════════════════════════════ */

/* Ocultar Suite Bar (barra superior azul de SP) */
#suiteBar,
#suiteBarLeft,
#suiteBarRight,
.ms-qatoolbar {
  display: none !important;
}

/* Ocultar Ribbon (barra de herramientas de edición) cuando no está en modo edición */
#s4-ribbonrow:not(.ms-rtestate-field *) {
  /* No ocultamos el ribbon para preservar funcionalidad de edición */
  background: var(--newmrv-forest) !important;
  border-bottom: none !important;
}

/* Contenedor principal de página */
#s4-workspace {
  background-color: var(--newmrv-white) !important;
  overflow-x: hidden !important;
}

/* Zona de contenido principal */
#s4-bodyContainer {
  min-height: 100vh !important;
  background: var(--newmrv-white) !important;
}

/* Eliminar margen/padding que SP agrega */
#contentBox,
.ms-sitelcon-img,
#contentRow,
#contentCell {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* PlaceHolderMain — zona de contenido de páginas */
#PlaceHolderMain,
[id$="PlaceHolderMain"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  background: transparent !important;
}

/* Contenedor de página de publicación */
.ms-publishing-PublishingPageLayout,
.ms-publishingcontainer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Zona de WebParts */
.ms-webpartzone-cell,
.ms-wpContentDivSpace {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* WebPart wrapper — elimina borde y título SP por defecto */
.ms-WPBody,
.ms-WPBorderContainer,
.ms-WPHeaderTdSelection {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.ms-webpart-chrome-title {
  display: none !important;
}

/* Content Editor Web Part */
.ms-rtestate-field {
  padding: 0 !important;
}

/* Left navigation — ocultar nav izquierda SP */
#sideNavBox,
#s4-leftpanel,
.ms-nav,
.ms-quicklaunch {
  display: none !important;
}

/* Ajuste cuando no hay nav izquierda */
#contentBox {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Progress bar SP (loading) */
.ms-progress-container {
  background: var(--newmrv-fern) !important;
  height: 3px !important;
}

/* Status bar SP */
#s4-statusbarcontainer {
  display: none !important;
}


/* ══════════════════════════════════════════════
   04. TIPOGRAFÍA
   ══════════════════════════════════════════════ */

/* Display XL — Heros, splash */
.newmrv-display-xl {
  font-family: var(--newmrv-font-display) !important;
  font-size: clamp(40px, 5.5vw, 68px) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  color: var(--newmrv-forest) !important;
  letter-spacing: -.02em !important;
}
.newmrv-display-xl em {
  color: var(--newmrv-moss) !important;
  font-style: italic !important;
}

/* Display LG — Títulos de página */
.newmrv-display-lg {
  font-family: var(--newmrv-font-display) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: var(--newmrv-forest) !important;
}

/* Display MD — Encabezados de sección */
.newmrv-display-md {
  font-family: var(--newmrv-font-display) !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--newmrv-forest) !important;
}

/* Display SM Italic — Subtítulos, citas */
.newmrv-display-sm {
  font-family: var(--newmrv-font-display) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.35 !important;
  color: var(--newmrv-canopy) !important;
}

/* Heading UI — Títulos de card, sección */
.newmrv-heading {
  font-family: var(--newmrv-font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--newmrv-earth) !important;
}

/* Body — Texto de párrafo */
.newmrv-body {
  font-family: var(--newmrv-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--newmrv-stone) !important;
}

/* Small / Caption */
.newmrv-small {
  font-family: var(--newmrv-font-body) !important;
  font-size: 13px !important;
  color: var(--newmrv-sand) !important;
  line-height: 1.5 !important;
}

/* Mono — Datos, etiquetas técnicas */
.newmrv-mono {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 13px !important;
  color: var(--newmrv-fern) !important;
}

/* Label / Eyebrow — Encabezados de sección pequeños */
.newmrv-label,
.newmrv-eyebrow {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--newmrv-fern) !important;
  display: block !important;
  margin-bottom: var(--newmrv-md) !important;
}

/* Overrides de headings en zona de contenido SP */
.ms-rtestate-field h1 {
  font-family: var(--newmrv-font-display) !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  color: var(--newmrv-forest) !important;
}
.ms-rtestate-field h2 {
  font-family: var(--newmrv-font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--newmrv-forest) !important;
}
.ms-rtestate-field h3 {
  font-family: var(--newmrv-font-body) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--newmrv-earth) !important;
}
.ms-rtestate-field p {
  font-family: var(--newmrv-font-body) !important;
  font-size: 16px !important;
  color: var(--newmrv-stone) !important;
  line-height: 1.65 !important;
  margin-bottom: var(--newmrv-md) !important;
}


/* ══════════════════════════════════════════════
   05. COLORES Y FONDOS UTILITARIOS
   ══════════════════════════════════════════════ */

/* Fondos */
.newmrv-bg-forest  { background-color: var(--newmrv-forest) !important; }
.newmrv-bg-canopy  { background-color: var(--newmrv-canopy) !important; }
.newmrv-bg-moss    { background-color: var(--newmrv-moss)   !important; }
.newmrv-bg-fog     { background-color: var(--newmrv-fog)    !important; }
.newmrv-bg-bone    { background-color: var(--newmrv-bone)   !important; }
.newmrv-bg-white   { background-color: var(--newmrv-white)  !important; }
.newmrv-bg-water   { background-color: var(--newmrv-water)  !important; }

/* Colores de texto */
.newmrv-text-forest  { color: var(--newmrv-forest) !important; }
.newmrv-text-canopy  { color: var(--newmrv-canopy) !important; }
.newmrv-text-moss    { color: var(--newmrv-moss)   !important; }
.newmrv-text-fern    { color: var(--newmrv-fern)   !important; }
.newmrv-text-earth   { color: var(--newmrv-earth)  !important; }
.newmrv-text-stone   { color: var(--newmrv-stone)  !important; }
.newmrv-text-sand    { color: var(--newmrv-sand)   !important; }
.newmrv-text-white   { color: var(--newmrv-white)  !important; }
.newmrv-text-water   { color: var(--newmrv-water)  !important; }

/* Gradientes */
.newmrv-gradient-forest {
  background: linear-gradient(135deg, var(--newmrv-forest) 0%, var(--newmrv-canopy) 55%, var(--newmrv-moss) 100%) !important;
}
.newmrv-gradient-water {
  background: linear-gradient(135deg, #1B4F8A 0%, var(--newmrv-water) 100%) !important;
}
.newmrv-gradient-section {
  background: linear-gradient(90deg, var(--newmrv-fern), var(--newmrv-water)) !important;
}

/* Divisor */
.newmrv-divider {
  height: 1px !important;
  background-color: var(--newmrv-sky) !important;
  border: none !important;
  margin: var(--newmrv-xl) 0 !important;
}


/* ══════════════════════════════════════════════
   06. COMPONENTES — BARRA GOV.CO
   ══════════════════════════════════════════════ */

.newmrv-govco-bar {
  background-color: #3366CC !important;
  padding: 6px 0 !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.newmrv-govco-pill {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.15) !important;
  border-radius: var(--newmrv-r-pill) !important;
  padding: 3px 12px 3px 8px !important;
}

.newmrv-govco-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #FFD700 !important;
  display: inline-block !important;
}

.newmrv-govco-text {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.9) !important;
  letter-spacing: .06em !important;
}

.newmrv-govco-sep {
  font-size: 12px !important;
  color: rgba(255,255,255,.85) !important;
  font-family: var(--newmrv-font-body) !important;
}


/* ══════════════════════════════════════════════
   07. COMPONENTES — BOTONES
   ══════════════════════════════════════════════ */

/* Base */
.newmrv-btn {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--newmrv-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  padding: 10px 20px !important;
  border-radius: var(--newmrv-r-md) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  -webkit-transition: all var(--newmrv-t-base) var(--newmrv-ease-out) !important;
  transition: all var(--newmrv-t-base) var(--newmrv-ease-out) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Primario — CTA principal */
.newmrv-btn-primary {
  background-color: var(--newmrv-moss) !important;
  color: var(--newmrv-white) !important;
  -webkit-box-shadow: 0 2px 8px rgba(46,125,90,.25) !important;
  box-shadow: 0 2px 8px rgba(46,125,90,.25) !important;
}
.newmrv-btn-primary:hover {
  background-color: var(--newmrv-canopy) !important;
  color: var(--newmrv-white) !important;
  -webkit-box-shadow: 0 4px 16px rgba(46,125,90,.35) !important;
  box-shadow: 0 4px 16px rgba(46,125,90,.35) !important;
  -webkit-transform: translateY(-1px) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Secundario — Outline verde */
.newmrv-btn-secondary {
  background-color: transparent !important;
  color: var(--newmrv-moss) !important;
  border: 1.5px solid var(--newmrv-moss) !important;
}
.newmrv-btn-secondary:hover {
  background-color: var(--newmrv-fog) !important;
  color: var(--newmrv-canopy) !important;
  text-decoration: none !important;
}

/* Ghost — Sutil, gris */
.newmrv-btn-ghost {
  background-color: transparent !important;
  color: var(--newmrv-stone) !important;
  border: 1.5px solid var(--newmrv-sky) !important;
}
.newmrv-btn-ghost:hover {
  border-color: var(--newmrv-mist) !important;
  color: var(--newmrv-earth) !important;
  text-decoration: none !important;
}

/* Acento — Azul climático */
.newmrv-btn-accent {
  background-color: var(--newmrv-water) !important;
  color: var(--newmrv-white) !important;
  -webkit-box-shadow: 0 2px 8px rgba(27,108,168,.25) !important;
  box-shadow: 0 2px 8px rgba(27,108,168,.25) !important;
}
.newmrv-btn-accent:hover {
  background-color: #155a8e !important;
  color: var(--newmrv-white) !important;
  -webkit-transform: translateY(-1px) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Hero primary — Fern sobre oscuro */
.newmrv-btn-hero {
  background-color: var(--newmrv-fern) !important;
  color: var(--newmrv-forest) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 13px 24px !important;
  -webkit-box-shadow: 0 4px 20px rgba(76,175,130,.35) !important;
  box-shadow: 0 4px 20px rgba(76,175,130,.35) !important;
}
.newmrv-btn-hero:hover {
  background-color: #5BC490 !important;
  color: var(--newmrv-forest) !important;
  -webkit-transform: translateY(-2px) !important;
  transform: translateY(-2px) !important;
  -webkit-box-shadow: 0 8px 28px rgba(76,175,130,.45) !important;
  box-shadow: 0 8px 28px rgba(76,175,130,.45) !important;
  text-decoration: none !important;
}

/* Tamaños */
.newmrv-btn-sm {
  font-size: 13px !important;
  padding: 7px 14px !important;
}
.newmrv-btn-lg {
  font-size: 16px !important;
  padding: 14px 28px !important;
}

/* Icono dentro de botón */
.newmrv-btn-icon {
  width: 16px !important;
  height: 16px !important;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════
   08. COMPONENTES — BADGES Y CHIPS
   ══════════════════════════════════════════════ */

/* Badge base */
.newmrv-badge {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: var(--newmrv-r-pill) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.newmrv-badge-green {
  background: rgba(76,175,130,.15) !important;
  color: var(--newmrv-moss) !important;
}
.newmrv-badge-blue {
  background: rgba(27,108,168,.12) !important;
  color: var(--newmrv-water) !important;
}
.newmrv-badge-neutral {
  background: var(--newmrv-fog) !important;
  color: var(--newmrv-stone) !important;
  border: 1px solid var(--newmrv-sky) !important;
}
.newmrv-badge-warning {
  background: rgba(196,123,10,.12) !important;
  color: #9a5e00 !important;
}
.newmrv-badge-danger {
  background: rgba(192,57,43,.1) !important;
  color: var(--newmrv-danger) !important;
}

/* Chips de filtro */
.newmrv-chip-group {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  gap: 8px !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  margin-bottom: var(--newmrv-md) !important;
}

.newmrv-chip {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 11px !important;
  padding: 6px 16px !important;
  border-radius: var(--newmrv-r-pill) !important;
  border: 1.5px solid var(--newmrv-sky) !important;
  color: var(--newmrv-stone) !important;
  cursor: pointer !important;
  -webkit-transition: all var(--newmrv-t-fast) !important;
  transition: all var(--newmrv-t-fast) !important;
  background-color: var(--newmrv-white) !important;
  display: inline-block !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.newmrv-chip:hover {
  border-color: var(--newmrv-mist) !important;
  color: var(--newmrv-earth) !important;
  text-decoration: none !important;
}
.newmrv-chip.newmrv-active,
.newmrv-chip:focus {
  background-color: var(--newmrv-forest) !important;
  border-color: var(--newmrv-forest) !important;
  color: var(--newmrv-white) !important;
}
.newmrv-chip.newmrv-chip-green.newmrv-active {
  background-color: var(--newmrv-moss) !important;
  border-color: var(--newmrv-moss) !important;
}


/* ══════════════════════════════════════════════
   09. COMPONENTES — CARDS KPI
   ══════════════════════════════════════════════ */

.newmrv-kpi-grid {
  display: -ms-grid !important;
  display: grid !important;
  -ms-grid-columns: 1fr 1fr 1fr 1fr !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--newmrv-md) !important;
}

/* Para 3 columnas */
.newmrv-kpi-grid-3 {
  -ms-grid-columns: 1fr 1fr 1fr !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
/* Para 2 columnas */
.newmrv-kpi-grid-2 {
  -ms-grid-columns: 1fr 1fr !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

.newmrv-kpi-card {
  background: var(--newmrv-white) !important;
  border: 1px solid var(--newmrv-sky) !important;
  border-radius: var(--newmrv-r-lg) !important;
  padding: var(--newmrv-lg) !important;
  -webkit-box-shadow: var(--newmrv-shadow-sm) !important;
  box-shadow: var(--newmrv-shadow-sm) !important;
  -webkit-transition: -webkit-box-shadow var(--newmrv-t-base) var(--newmrv-ease-out),
                      -webkit-transform var(--newmrv-t-base) var(--newmrv-ease-out) !important;
  transition: box-shadow var(--newmrv-t-base) var(--newmrv-ease-out),
              transform var(--newmrv-t-base) var(--newmrv-ease-out) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Línea superior degradada */
.newmrv-kpi-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--newmrv-fern), var(--newmrv-water)) !important;
}

.newmrv-kpi-card:hover {
  -webkit-box-shadow: var(--newmrv-shadow-md) !important;
  box-shadow: var(--newmrv-shadow-md) !important;
  -webkit-transform: translateY(-2px) !important;
  transform: translateY(-2px) !important;
}

/* Variante oscura — para secciones con fondo forest */
.newmrv-kpi-card-dark {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(76,175,130,.2) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
.newmrv-kpi-card-dark:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(76,175,130,.4) !important;
  -webkit-box-shadow: 0 8px 24px rgba(13,59,46,.3) !important;
  box-shadow: 0 8px 24px rgba(13,59,46,.3) !important;
}
.newmrv-kpi-card-dark .newmrv-kpi-label { color: rgba(168,213,188,.7) !important; }
.newmrv-kpi-card-dark .newmrv-kpi-value { color: var(--newmrv-white) !important; }
.newmrv-kpi-card-dark .newmrv-kpi-unit  { color: var(--newmrv-mist) !important; }
.newmrv-kpi-card-dark .newmrv-kpi-delta { color: var(--newmrv-fern) !important; }

/* Elementos internos KPI */
.newmrv-kpi-label {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--newmrv-sand) !important;
  margin-bottom: var(--newmrv-sm) !important;
  display: block !important;
}

.newmrv-kpi-value {
  font-family: var(--newmrv-font-display) !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  color: var(--newmrv-forest) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.newmrv-kpi-unit {
  font-family: var(--newmrv-font-body) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: var(--newmrv-stone) !important;
}

.newmrv-kpi-delta {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--newmrv-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--newmrv-moss) !important;
  margin-top: var(--newmrv-sm) !important;
}
.newmrv-kpi-delta.newmrv-down { color: var(--newmrv-danger) !important; }
.newmrv-kpi-delta.newmrv-warn { color: var(--newmrv-warning) !important; }

.newmrv-kpi-context {
  font-size: 12px !important;
  color: var(--newmrv-sand) !important;
  margin-top: 4px !important;
  display: block !important;
}


/* ══════════════════════════════════════════════
   10. COMPONENTES — CARDS DE CONTENIDO
   ══════════════════════════════════════════════ */

.newmrv-card-grid {
  display: -ms-grid !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  -ms-grid-columns: 1fr 1fr 1fr !important;
  gap: var(--newmrv-lg) !important;
}
.newmrv-card-grid-2 {
  grid-template-columns: repeat(2, 1fr) !important;
  -ms-grid-columns: 1fr 1fr !important;
}
.newmrv-card-grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
  -ms-grid-columns: 1fr 1fr 1fr 1fr !important;
}

.newmrv-card {
  background: var(--newmrv-white) !important;
  border: 1px solid var(--newmrv-sky) !important;
  border-radius: var(--newmrv-r-xl) !important;
  overflow: hidden !important;
  -webkit-box-shadow: var(--newmrv-shadow-sm) !important;
  box-shadow: var(--newmrv-shadow-sm) !important;
  -webkit-transition: -webkit-box-shadow var(--newmrv-t-base) var(--newmrv-ease-out),
                      -webkit-transform var(--newmrv-t-base) var(--newmrv-ease-out),
                      border-color var(--newmrv-t-base) !important;
  transition: box-shadow var(--newmrv-t-base) var(--newmrv-ease-out),
              transform var(--newmrv-t-base) var(--newmrv-ease-out),
              border-color var(--newmrv-t-base) !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
}
.newmrv-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--newmrv-fern), var(--newmrv-water)) !important;
  -webkit-transform: scaleX(0) !important;
  transform: scaleX(0) !important;
  -webkit-transform-origin: left !important;
  transform-origin: left !important;
  -webkit-transition: -webkit-transform var(--newmrv-t-base) var(--newmrv-ease-out) !important;
  transition: transform var(--newmrv-t-base) var(--newmrv-ease-out) !important;
}
.newmrv-card:hover {
  -webkit-box-shadow: var(--newmrv-shadow-lg) !important;
  box-shadow: var(--newmrv-shadow-lg) !important;
  -webkit-transform: translateY(-4px) !important;
  transform: translateY(-4px) !important;
  border-color: var(--newmrv-mist) !important;
  text-decoration: none !important;
}
.newmrv-card:hover::after { -webkit-transform: scaleX(1) !important; transform: scaleX(1) !important; }

.newmrv-card-thumb {
  height: 140px !important;
  background: linear-gradient(135deg, var(--newmrv-canopy), var(--newmrv-moss)) !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  position: relative !important;
}
.newmrv-card-thumb-blue {
  background: linear-gradient(135deg, #1B4F8A, var(--newmrv-water)) !important;
}

.newmrv-card-body {
  padding: var(--newmrv-lg) !important;
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 !important;
  flex: 1 !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  gap: var(--newmrv-sm) !important;
}

.newmrv-card-tag {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--newmrv-fern) !important;
  display: block !important;
}

.newmrv-card-title {
  font-family: var(--newmrv-font-display) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--newmrv-earth) !important;
  line-height: 1.3 !important;
}

.newmrv-card-desc {
  font-size: 13px !important;
  color: var(--newmrv-sand) !important;
  line-height: 1.5 !important;
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 !important;
  flex: 1 !important;
}

.newmrv-card-action {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  color: var(--newmrv-moss) !important;
  padding: var(--newmrv-md) var(--newmrv-lg) !important;
  border-top: 1px solid var(--newmrv-fog) !important;
  -webkit-transition: background var(--newmrv-t-fast) !important;
  transition: background var(--newmrv-t-fast) !important;
}
.newmrv-card:hover .newmrv-card-action {
  background: var(--newmrv-fog) !important;
}

/* Card destacada (featured) */
.newmrv-card-featured {
  background: var(--newmrv-forest) !important;
  border-color: transparent !important;
  color: var(--newmrv-white) !important;
}
.newmrv-card-featured .newmrv-card-title { color: var(--newmrv-white) !important; font-size: 22px !important; }
.newmrv-card-featured .newmrv-card-desc  { color: var(--newmrv-mist) !important; }
.newmrv-card-featured .newmrv-card-tag   { color: rgba(168,213,188,.7) !important; }
.newmrv-card-featured .newmrv-card-action { color: var(--newmrv-fern) !important; border-top-color: rgba(76,175,130,.15) !important; }
.newmrv-card-featured:hover { border-color: rgba(76,175,130,.3) !important; }


/* ══════════════════════════════════════════════
   11. COMPONENTES — TABLA DE DATOS
   ══════════════════════════════════════════════ */

.newmrv-table-wrapper {
  background: var(--newmrv-white) !important;
  border: 1px solid var(--newmrv-sky) !important;
  border-radius: var(--newmrv-r-lg) !important;
  overflow: hidden !important;
  -webkit-box-shadow: var(--newmrv-shadow-sm) !important;
  box-shadow: var(--newmrv-shadow-sm) !important;
  width: 100% !important;
}

.newmrv-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-family: var(--newmrv-font-body) !important;
}

.newmrv-table thead tr {
  border-bottom: 2px solid var(--newmrv-sky) !important;
}

.newmrv-table th {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--newmrv-sand) !important;
  font-weight: 500 !important;
  padding: var(--newmrv-sm) var(--newmrv-md) !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
}

.newmrv-table td {
  padding: var(--newmrv-md) !important;
  font-size: 14px !important;
  color: var(--newmrv-stone) !important;
  border-bottom: 1px solid var(--newmrv-fog) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: middle !important;
}

.newmrv-table tbody tr:last-child td {
  border-bottom: none !important;
}

.newmrv-table tbody tr:hover td {
  background-color: var(--newmrv-fog) !important;
}

.newmrv-table .newmrv-td-primary {
  color: var(--newmrv-earth) !important;
  font-weight: 500 !important;
}

.newmrv-table .newmrv-td-value {
  font-family: var(--newmrv-font-mono) !important;
  color: var(--newmrv-moss) !important;
  font-size: 13px !important;
}

.newmrv-table .newmrv-td-muted {
  color: var(--newmrv-sand) !important;
  font-size: 13px !important;
}

/* Tabla dentro de SharePoint list view override */
.ms-listviewtable th,
.ms-listviewtable td {
  font-family: var(--newmrv-font-body) !important;
  font-size: 14px !important;
  color: var(--newmrv-stone) !important;
  border-color: var(--newmrv-fog) !important;
  padding: var(--newmrv-md) !important;
}
.ms-listviewtable th {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--newmrv-sand) !important;
  background: var(--newmrv-fog) !important;
  font-weight: 500 !important;
}


/* ══════════════════════════════════════════════
   12. COMPONENTES — FORMULARIOS E INPUTS
   ══════════════════════════════════════════════ */

.newmrv-form-group {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: var(--newmrv-md) !important;
}

.newmrv-form-label {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--newmrv-stone) !important;
  font-weight: 500 !important;
  display: block !important;
}

.newmrv-input,
.newmrv-select,
.newmrv-textarea {
  font-family: var(--newmrv-font-body) !important;
  font-size: 14px !important;
  color: var(--newmrv-earth) !important;
  background-color: var(--newmrv-white) !important;
  border: 1.5px solid var(--newmrv-sky) !important;
  border-radius: var(--newmrv-r-md) !important;
  padding: 10px 14px !important;
  outline: none !important;
  width: 100% !important;
  -webkit-transition: border-color var(--newmrv-t-fast), -webkit-box-shadow var(--newmrv-t-fast) !important;
  transition: border-color var(--newmrv-t-fast), box-shadow var(--newmrv-t-fast) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.5 !important;
}
.newmrv-input:focus,
.newmrv-select:focus,
.newmrv-textarea:focus {
  border-color: var(--newmrv-fern) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(76,175,130,.15) !important;
  box-shadow: 0 0 0 3px rgba(76,175,130,.15) !important;
  outline: none !important;
}
.newmrv-input::placeholder { color: var(--newmrv-sand) !important; }

.newmrv-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C5248' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

/* Override inputs de SP */
.ms-long,
.ms-input,
input[type="text"].ms-input,
input[type="search"] {
  font-family: var(--newmrv-font-body) !important;
  font-size: 14px !important;
  color: var(--newmrv-earth) !important;
  border: 1.5px solid var(--newmrv-sky) !important;
  border-radius: var(--newmrv-r-md) !important;
  padding: 8px 12px !important;
  background: var(--newmrv-white) !important;
}
.ms-long:focus,
.ms-input:focus,
input[type="text"].ms-input:focus {
  border-color: var(--newmrv-fern) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(76,175,130,.15) !important;
  box-shadow: 0 0 0 3px rgba(76,175,130,.15) !important;
  outline: none !important;
}


/* ══════════════════════════════════════════════
   13. COMPONENTES — ALERTAS Y AVISOS
   ══════════════════════════════════════════════ */

.newmrv-alert {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: flex-start !important;
  -ms-flex-align: flex-start !important;
  align-items: flex-start !important;
  gap: var(--newmrv-md) !important;
  padding: var(--newmrv-md) var(--newmrv-lg) !important;
  border-radius: var(--newmrv-r-md) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-family: var(--newmrv-font-body) !important;
  margin-bottom: var(--newmrv-md) !important;
}

.newmrv-alert-info {
  background: rgba(27,108,168,.08) !important;
  border-left: 3px solid var(--newmrv-water) !important;
  color: var(--newmrv-stone) !important;
}
.newmrv-alert-success {
  background: rgba(46,125,90,.08) !important;
  border-left: 3px solid var(--newmrv-moss) !important;
  color: var(--newmrv-stone) !important;
}
.newmrv-alert-warning {
  background: rgba(196,123,10,.08) !important;
  border-left: 3px solid var(--newmrv-warning) !important;
  color: var(--newmrv-stone) !important;
}
.newmrv-alert-danger {
  background: rgba(192,57,43,.08) !important;
  border-left: 3px solid var(--newmrv-danger) !important;
  color: var(--newmrv-stone) !important;
}


/* ══════════════════════════════════════════════
   14. COMPONENTES — BARRAS DE PROGRESO
   ══════════════════════════════════════════════ */

.newmrv-progress-wrap {
  margin-bottom: var(--newmrv-md) !important;
}
.newmrv-progress-head {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.newmrv-progress-name {
  font-size: 13px !important;
  color: var(--newmrv-stone) !important;
  font-family: var(--newmrv-font-body) !important;
}
.newmrv-progress-val {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 11px !important;
  color: var(--newmrv-fern) !important;
}
.newmrv-progress-track {
  height: 8px !important;
  background: var(--newmrv-fog) !important;
  border-radius: var(--newmrv-r-pill) !important;
  overflow: hidden !important;
  border: none !important;
}
.newmrv-progress-fill {
  height: 100% !important;
  border-radius: var(--newmrv-r-pill) !important;
  background: linear-gradient(90deg, var(--newmrv-fern), var(--newmrv-water)) !important;
  -webkit-transition: width var(--newmrv-t-slow) var(--newmrv-ease-out) !important;
  transition: width var(--newmrv-t-slow) var(--newmrv-ease-out) !important;
}
.newmrv-progress-fill-green {
  background: linear-gradient(90deg, var(--newmrv-canopy), var(--newmrv-fern)) !important;
}
.newmrv-progress-fill-blue {
  background: linear-gradient(90deg, var(--newmrv-glacier), var(--newmrv-water)) !important;
}


/* ══════════════════════════════════════════════
   15. COMPONENTES — TABS / PESTAÑAS
   ══════════════════════════════════════════════ */

.newmrv-tabs {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  gap: 0 !important;
  border-bottom: 2px solid var(--newmrv-sky) !important;
  margin-bottom: var(--newmrv-xl) !important;
  list-style: none !important;
  padding: 0 !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.newmrv-tab {
  font-family: var(--newmrv-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--newmrv-sand) !important;
  padding: var(--newmrv-md) var(--newmrv-lg) !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  -webkit-transition: color var(--newmrv-t-fast), border-color var(--newmrv-t-fast) !important;
  transition: color var(--newmrv-t-fast), border-color var(--newmrv-t-fast) !important;
  text-decoration: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
.newmrv-tab:hover {
  color: var(--newmrv-earth) !important;
  text-decoration: none !important;
}
.newmrv-tab.newmrv-active,
.newmrv-tab[aria-selected="true"] {
  color: var(--newmrv-forest) !important;
  border-bottom-color: var(--newmrv-fern) !important;
}


/* ══════════════════════════════════════════════
   16. COMPONENTES — BREADCRUMB
   ══════════════════════════════════════════════ */

.newmrv-breadcrumb {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 6px !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  padding: var(--newmrv-sm) 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

.newmrv-breadcrumb-item {
  font-size: 13px !important;
  color: var(--newmrv-sand) !important;
  font-family: var(--newmrv-font-body) !important;
}
.newmrv-breadcrumb-item a {
  color: var(--newmrv-fern) !important;
  text-decoration: none !important;
  -webkit-transition: color var(--newmrv-t-fast) !important;
  transition: color var(--newmrv-t-fast) !important;
}
.newmrv-breadcrumb-item a:hover { color: var(--newmrv-moss) !important; }
.newmrv-breadcrumb-sep {
  color: var(--newmrv-sky) !important;
  font-size: 14px !important;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}
.newmrv-breadcrumb-current {
  color: var(--newmrv-earth) !important;
  font-weight: 500 !important;
}

/* SP Breadcrumb override */
.ms-core-listMenu-horizontalBox .ms-core-listMenu-root > li > a,
.ms-breadcrumb-box a {
  color: var(--newmrv-fern) !important;
  font-family: var(--newmrv-font-body) !important;
  font-size: 13px !important;
}


/* ══════════════════════════════════════════════
   17. COMPONENTES — HERO / BANNER
   ══════════════════════════════════════════════ */

.newmrv-hero {
  min-height: 85vh !important;
  background: var(--newmrv-forest) !important;
  background-image:
    -webkit-radial-gradient(ellipse 90% 70% at 75% 20%, rgba(76,175,130,.13) 0%, transparent 65%),
    -webkit-radial-gradient(ellipse 60% 80% at 10% 80%, rgba(27,108,168,.10) 0%, transparent 60%) !important;
  background-image:
    radial-gradient(ellipse 90% 70% at 75% 20%, rgba(76,175,130,.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 80% at 10% 80%, rgba(27,108,168,.10) 0%, transparent 60%) !important;
  position: relative !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  padding: var(--newmrv-2xl) 0 !important;
}

.newmrv-hero-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
}

.newmrv-hero-eyebrow {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--newmrv-fern) !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: var(--newmrv-lg) !important;
}

.newmrv-hero-title {
  font-family: var(--newmrv-font-display) !important;
  font-size: clamp(38px, 5.5vw, 66px) !important;
  font-weight: 300 !important;
  color: var(--newmrv-white) !important;
  line-height: 1.05 !important;
  margin-bottom: var(--newmrv-lg) !important;
}
.newmrv-hero-title em {
  color: var(--newmrv-fern) !important;
  font-style: italic !important;
}
.newmrv-hero-title strong {
  font-weight: 600 !important;
  color: var(--newmrv-white) !important;
}

.newmrv-hero-desc {
  font-size: 17px !important;
  color: var(--newmrv-mist) !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
  margin-bottom: var(--newmrv-xl) !important;
  font-family: var(--newmrv-font-body) !important;
}

/* Hero sección compacta — para páginas internas */
.newmrv-hero-compact {
  min-height: 220px !important;
  padding: var(--newmrv-xl) 0 !important;
}
.newmrv-hero-compact .newmrv-hero-title {
  font-size: clamp(26px, 3.5vw, 44px) !important;
}


/* ══════════════════════════════════════════════
   18. COMPONENTES — CIFRAS KPI STRIP
   ══════════════════════════════════════════════ */

.newmrv-cifras-strip {
  background: var(--newmrv-fog) !important;
  border-top: 1px solid var(--newmrv-sky) !important;
  border-bottom: 1px solid var(--newmrv-sky) !important;
}

.newmrv-cifras-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: -ms-grid !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  -ms-grid-columns: 1fr 1fr 1fr 1fr !important;
}

.newmrv-cifra-item {
  padding: 40px 32px !important;
  border-right: 1px solid var(--newmrv-sky) !important;
  -webkit-transition: background var(--newmrv-t-base) !important;
  transition: background var(--newmrv-t-base) !important;
  position: relative !important;
}
.newmrv-cifra-item:last-child { border-right: none !important; }
.newmrv-cifra-item:hover { background: var(--newmrv-white) !important; }

.newmrv-cifra-tag {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--newmrv-sand) !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.newmrv-cifra-num {
  font-family: var(--newmrv-font-display) !important;
  font-size: 44px !important;
  font-weight: 600 !important;
  color: var(--newmrv-forest) !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.newmrv-cifra-unit {
  font-family: var(--newmrv-font-body) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  color: var(--newmrv-stone) !important;
}

.newmrv-cifra-delta {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--newmrv-font-mono) !important;
  font-size: 11px !important;
  color: var(--newmrv-moss) !important;
  margin-top: 8px !important;
}
.newmrv-cifra-delta.newmrv-down { color: var(--newmrv-danger) !important; }

.newmrv-cifra-context {
  font-size: 12px !important;
  color: var(--newmrv-sand) !important;
  margin-top: 4px !important;
  display: block !important;
}


/* ══════════════════════════════════════════════
   19. COMPONENTES — SECCIÓN GENÉRICA
   ══════════════════════════════════════════════ */

/* Contenedor de página con max-width */
.newmrv-page {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* Sección con padding vertical estándar */
.newmrv-section {
  padding: var(--newmrv-3xl) 0 !important;
}
.newmrv-section-sm { padding: var(--newmrv-2xl) 0 !important; }
.newmrv-section-lg { padding: calc(var(--newmrv-3xl) * 1.3) 0 !important; }

/* Fondos de sección */
.newmrv-section-fog   { background-color: var(--newmrv-fog) !important; }
.newmrv-section-bone  { background-color: var(--newmrv-bone) !important; }
.newmrv-section-dark  { background-color: var(--newmrv-forest) !important; }
.newmrv-section-white { background-color: var(--newmrv-white) !important; }

/* Header de sección */
.newmrv-section-header {
  margin-bottom: var(--newmrv-2xl) !important;
}
.newmrv-section-header-split {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: flex-end !important;
  -ms-flex-align: flex-end !important;
  align-items: flex-end !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  gap: var(--newmrv-lg) !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  margin-bottom: var(--newmrv-2xl) !important;
}

.newmrv-section-title {
  font-family: var(--newmrv-font-display) !important;
  font-size: clamp(26px, 3.5vw, 42px) !important;
  font-weight: 600 !important;
  color: var(--newmrv-forest) !important;
  line-height: 1.15 !important;
  margin-bottom: var(--newmrv-md) !important;
}
.newmrv-section-title em {
  color: var(--newmrv-moss) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.newmrv-section-dark .newmrv-section-title { color: var(--newmrv-white) !important; }
.newmrv-section-dark .newmrv-section-title em { color: var(--newmrv-fern) !important; }

.newmrv-section-desc {
  font-size: 16px !important;
  color: var(--newmrv-stone) !important;
  line-height: 1.65 !important;
  max-width: 560px !important;
  font-family: var(--newmrv-font-body) !important;
}
.newmrv-section-dark .newmrv-section-desc { color: var(--newmrv-mist) !important; }

/* Icono pill decorativo */
.newmrv-icon-pill {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--newmrv-r-lg) !important;
  background: rgba(76,175,130,.12) !important;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}
.newmrv-icon-pill-blue { background: rgba(27,108,168,.1) !important; }


/* ══════════════════════════════════════════════
   20. COMPONENTES — FOOTER
   ══════════════════════════════════════════════ */

.newmrv-footer {
  background-color: var(--newmrv-earth) !important;
  padding: 64px 0 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
}

.newmrv-footer-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

.newmrv-footer-top {
  display: -ms-grid !important;
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  -ms-grid-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: var(--newmrv-2xl) !important;
  padding-bottom: var(--newmrv-2xl) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.newmrv-footer-logo-text {
  font-family: var(--newmrv-font-display) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--newmrv-white) !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.newmrv-footer-logo-text em {
  color: var(--newmrv-fern) !important;
  font-style: italic !important;
}

.newmrv-footer-tagline {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
  display: block !important;
  margin-bottom: var(--newmrv-lg) !important;
}

.newmrv-footer-about {
  font-size: 13px !important;
  color: rgba(255,255,255,.45) !important;
  line-height: 1.65 !important;
  max-width: 280px !important;
  font-family: var(--newmrv-font-body) !important;
}

.newmrv-footer-col-title {
  font-family: var(--newmrv-font-mono) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
  display: block !important;
  margin-bottom: var(--newmrv-md) !important;
}

.newmrv-footer-links {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.newmrv-footer-link {
  font-size: 13px !important;
  color: rgba(255,255,255,.5) !important;
  text-decoration: none !important;
  -webkit-transition: color var(--newmrv-t-fast) !important;
  transition: color var(--newmrv-t-fast) !important;
  font-family: var(--newmrv-font-body) !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: 6px !important;
}
.newmrv-footer-link::before {
  content: '›' !important;
  color: var(--newmrv-fern) !important;
  opacity: .6 !important;
}
.newmrv-footer-link:hover {
  color: var(--newmrv-mist) !important;
  text-decoration: none !important;
}

.newmrv-footer-bottom {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  padding: var(--newmrv-lg) 0 !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  gap: var(--newmrv-md) !important;
}

.newmrv-footer-logo-pill {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--newmrv-r-md) !important;
  padding: 6px 14px !important;
  font-family: var(--newmrv-font-mono) !important;
  font-size: 10px !important;
  color: rgba(255,255,255,.4) !important;
  letter-spacing: .08em !important;
  display: inline-block !important;
}

.newmrv-footer-copy {
  font-size: 12px !important;
  color: rgba(255,255,255,.25) !important;
  font-family: var(--newmrv-font-body) !important;
}

.newmrv-footer-logos {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  gap: var(--newmrv-md) !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

/* Social buttons */
.newmrv-social-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--newmrv-r-md) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  -webkit-transition: all var(--newmrv-t-fast) !important;
  transition: all var(--newmrv-t-fast) !important;
  color: rgba(255,255,255,.4) !important;
  text-decoration: none !important;
}
.newmrv-social-btn:hover {
  background: rgba(76,175,130,.15) !important;
  border-color: rgba(76,175,130,.3) !important;
  color: var(--newmrv-fern) !important;
}
.newmrv-social-row {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  gap: 8px !important;
  margin-top: var(--newmrv-lg) !important;
}


/* ══════════════════════════════════════════════
   21. ANIMACIONES Y TRANSICIONES
   ══════════════════════════════════════════════ */

/* Keyframes */
@-webkit-keyframes mrv-fadeInUp {
  from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes mrv-fadeInUp {
  from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}

@-webkit-keyframes mrv-fadeInRight {
  from { opacity: 0; -webkit-transform: translateX(24px); transform: translateX(24px); }
  to   { opacity: 1; -webkit-transform: translateX(0);    transform: translateX(0); }
}
@keyframes mrv-fadeInRight {
  from { opacity: 0; -webkit-transform: translateX(24px); transform: translateX(24px); }
  to   { opacity: 1; -webkit-transform: translateX(0);    transform: translateX(0); }
}

@-webkit-keyframes mrv-pulse {
  0%, 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  50%       { opacity: .4; -webkit-transform: scale(.7); transform: scale(.7); }
}
@keyframes mrv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

@-webkit-keyframes mrv-spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes mrv-spin {
  to { transform: rotate(360deg); }
}

/* Clases de animación */
.newmrv-animate-in {
  -webkit-animation: mrv-fadeInUp .6s var(--newmrv-ease-out) both !important;
  animation: mrv-fadeInUp .6s var(--newmrv-ease-out) both !important;
}
.newmrv-animate-right {
  -webkit-animation: mrv-fadeInRight .6s var(--newmrv-ease-out) both !important;
  animation: mrv-fadeInRight .6s var(--newmrv-ease-out) both !important;
}

/* Delays escalonados */
.newmrv-delay-1 { -webkit-animation-delay: .08s !important; animation-delay: .08s !important; }
.newmrv-delay-2 { -webkit-animation-delay: .16s !important; animation-delay: .16s !important; }
.newmrv-delay-3 { -webkit-animation-delay: .24s !important; animation-delay: .24s !important; }
.newmrv-delay-4 { -webkit-animation-delay: .32s !important; animation-delay: .32s !important; }
.newmrv-delay-5 { -webkit-animation-delay: .40s !important; animation-delay: .40s !important; }

/* Reveal al scroll — estado inicial */
.newmrv-reveal {
  opacity: 0 !important;
  -webkit-transform: translateY(24px) !important;
  transform: translateY(24px) !important;
  -webkit-transition: opacity .6s var(--newmrv-ease-out), -webkit-transform .6s var(--newmrv-ease-out) !important;
  transition: opacity .6s var(--newmrv-ease-out), transform .6s var(--newmrv-ease-out) !important;
}
.newmrv-reveal.newmrv-visible {
  opacity: 1 !important;
  -webkit-transform: translateY(0) !important;
  transform: translateY(0) !important;
}

/* Dot pulsante */
.newmrv-pulse-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--newmrv-fern) !important;
  -webkit-animation: mrv-pulse 2s ease-in-out infinite !important;
  animation: mrv-pulse 2s ease-in-out infinite !important;
}

/* Skeleton loader */
@-webkit-keyframes mrv-skeleton {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes mrv-skeleton {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.newmrv-skeleton {
  background: linear-gradient(90deg, var(--newmrv-fog) 25%, var(--newmrv-sky) 50%, var(--newmrv-fog) 75%) !important;
  background-size: 200% 100% !important;
  -webkit-animation: mrv-skeleton 1.5s infinite !important;
  animation: mrv-skeleton 1.5s infinite !important;
  border-radius: var(--newmrv-r-md) !important;
}


/* ══════════════════════════════════════════════
   22. UTILIDADES
   ══════════════════════════════════════════════ */

/* Flexbox */
.newmrv-flex       { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
.newmrv-flex-col   { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; }
.newmrv-flex-wrap  { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }
.newmrv-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; }
.newmrv-items-end    { -webkit-box-align: flex-end !important; -ms-flex-align: end !important; align-items: flex-end !important; }
.newmrv-justify-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; }
.newmrv-justify-center  { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; }
.newmrv-gap-sm { gap: var(--newmrv-sm) !important; }
.newmrv-gap-md { gap: var(--newmrv-md) !important; }
.newmrv-gap-lg { gap: var(--newmrv-lg) !important; }
.newmrv-gap-xl { gap: var(--newmrv-xl) !important; }
.newmrv-flex-1 { -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; }

/* Grid genérico */
.newmrv-grid     { display: -ms-grid !important; display: grid !important; }
.newmrv-grid-2   { grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr !important; }
.newmrv-grid-3   { grid-template-columns: repeat(3, 1fr) !important; -ms-grid-columns: 1fr 1fr 1fr !important; }
.newmrv-grid-4   { grid-template-columns: repeat(4, 1fr) !important; -ms-grid-columns: 1fr 1fr 1fr 1fr !important; }

/* Márgenes */
.newmrv-mt-sm { margin-top: var(--newmrv-sm) !important; }
.newmrv-mt-md { margin-top: var(--newmrv-md) !important; }
.newmrv-mt-lg { margin-top: var(--newmrv-lg) !important; }
.newmrv-mt-xl { margin-top: var(--newmrv-xl) !important; }
.newmrv-mb-sm { margin-bottom: var(--newmrv-sm) !important; }
.newmrv-mb-md { margin-bottom: var(--newmrv-md) !important; }
.newmrv-mb-lg { margin-bottom: var(--newmrv-lg) !important; }
.newmrv-mb-xl { margin-bottom: var(--newmrv-xl) !important; }

/* Padding */
.newmrv-p-md { padding: var(--newmrv-md) !important; }
.newmrv-p-lg { padding: var(--newmrv-lg) !important; }
.newmrv-p-xl { padding: var(--newmrv-xl) !important; }

/* Texto */
.newmrv-text-center { text-align: center !important; }
.newmrv-text-right  { text-align: right !important; }
.newmrv-fw-300 { font-weight: 300 !important; }
.newmrv-fw-400 { font-weight: 400 !important; }
.newmrv-fw-500 { font-weight: 500 !important; }
.newmrv-fw-600 { font-weight: 600 !important; }

/* Ancho */
.newmrv-w-full { width: 100% !important; }
.newmrv-max-content { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 32px !important; padding-right: 32px !important; }
.newmrv-max-text { max-width: 640px !important; }

/* Bordes */
.newmrv-border     { border: 1px solid var(--newmrv-sky) !important; }
.newmrv-border-top { border-top: 1px solid var(--newmrv-sky) !important; }
.newmrv-rounded-md { border-radius: var(--newmrv-r-md) !important; }
.newmrv-rounded-lg { border-radius: var(--newmrv-r-lg) !important; }
.newmrv-rounded-xl { border-radius: var(--newmrv-r-xl) !important; }

/* Sombras */
.newmrv-shadow-sm { -webkit-box-shadow: var(--newmrv-shadow-sm) !important; box-shadow: var(--newmrv-shadow-sm) !important; }
.newmrv-shadow-md { -webkit-box-shadow: var(--newmrv-shadow-md) !important; box-shadow: var(--newmrv-shadow-md) !important; }
.newmrv-shadow-lg { -webkit-box-shadow: var(--newmrv-shadow-lg) !important; box-shadow: var(--newmrv-shadow-lg) !important; }

/* Visibilidad */
.newmrv-hidden { display: none !important; }
.newmrv-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Overflow */
.newmrv-overflow-hidden { overflow: hidden !important; }

/* Cursor */
.newmrv-pointer { cursor: pointer !important; }


/* ══════════════════════════════════════════════
   23. RESPONSIVE
   ══════════════════════════════════════════════ */

@media screen and (max-width: 1280px) {
  .newmrv-page,
  .newmrv-max-content,
  .newmrv-cifras-inner,
  .newmrv-footer-inner { padding-left: 24px !important; padding-right: 24px !important; }
}

@media screen and (max-width: 1024px) {
  .newmrv-kpi-grid      { grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr !important; }
  .newmrv-cifras-inner  { grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr !important; }
  .newmrv-footer-top    { grid-template-columns: 1fr 1fr !important; -ms-grid-columns: 1fr 1fr !important; }
  .newmrv-card-grid-4   { grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr !important; }
  .newmrv-section-title { font-size: 30px !important; }
}

@media screen and (max-width: 768px) {
  .newmrv-kpi-grid    { grid-template-columns: 1fr !important; -ms-grid-columns: 1fr !important; }
  .newmrv-card-grid   { grid-template-columns: 1fr !important; -ms-grid-columns: 1fr !important; }
  .newmrv-card-grid-2 { grid-template-columns: 1fr !important; -ms-grid-columns: 1fr !important; }
  .newmrv-card-grid-3 { grid-template-columns: 1fr !important; -ms-grid-columns: 1fr !important; }
  .newmrv-card-grid-4 { grid-template-columns: 1fr !important; -ms-grid-columns: 1fr !important; }
  .newmrv-cifras-inner { grid-template-columns: 1fr !important; -ms-grid-columns: 1fr !important; }
  .newmrv-cifra-item   { border-right: none !important; border-bottom: 1px solid var(--newmrv-sky) !important; }
  .newmrv-footer-top   { grid-template-columns: 1fr !important; -ms-grid-columns: 1fr !important; }
  .newmrv-grid-2,
  .newmrv-grid-3,
  .newmrv-grid-4 { grid-template-columns: 1fr !important; -ms-grid-columns: 1fr !important; }
  .newmrv-section { padding: var(--newmrv-2xl) 0 !important; }
  .newmrv-hero   { min-height: auto !important; padding: var(--newmrv-xl) 0 !important; }
  .newmrv-hero-title { font-size: 36px !important; }
  .newmrv-hero-desc  { font-size: 15px !important; }
  .newmrv-section-title { font-size: 26px !important; }
  .newmrv-cifra-num  { font-size: 36px !important; }
  .newmrv-tabs { overflow-x: auto !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; }
  .newmrv-tab  { white-space: nowrap !important; }
  .newmrv-footer-bottom { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; text-align: center !important; }
}

@media screen and (max-width: 480px) {
  .newmrv-page,
  .newmrv-max-content,
  .newmrv-cifras-inner,
  .newmrv-footer-inner { padding-left: var(--newmrv-md) !important; padding-right: var(--newmrv-md) !important; }
  .newmrv-hero-title { font-size: 30px !important; }
  .newmrv-btn-lg  { padding: 12px 20px !important; font-size: 14px !important; }
  .newmrv-chip-group { gap: 6px !important; }
}


/* ══════════════════════════════════════════════
   23. GRAFICOS
   ══════════════════════════════════════════════ */
.hero-canvas{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-canvas .dot{position:absolute;border-radius:50%;background:rgba(76,175,130,.16);animation:floatDot linear infinite;}
@keyframes floatDot{0%{transform:translateY(0) scale(1);opacity:.65;}50%{transform:translateY(-36px) scale(1.12);opacity:.3;}100%{transform:translateY(0) scale(1);opacity:.65;}}

.hero-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07);border-radius:16px;overflow:hidden;border:1px solid rgba(76,175,130,.14);margin-top:52px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.hkpi{padding:24px 26px;background:rgba(255,255,255,.03);transition:background .25s;}
.hkpi:hover{background:rgba(255,255,255,.07);}
.hkpi-tag{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(168,213,188,.5);display:block;margin-bottom:10px;}
.hkpi-num{font-family:'Fraunces',Georgia,serif;font-size:36px;font-weight:600;color:#FDFCFB;line-height:1;display:block;margin-bottom:4px;}
.hkpi-unit{font-size:14px;font-weight:300;color:#A8D5BC;font-family:'DM Sans',sans-serif;}
.hkpi-sub{font-family:'DM Mono',monospace;font-size:10px;color:rgba(168,213,188,.5);margin-top:6px;display:block;}

.acceso-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.acceso-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 14px;background:#FDFCFB;border:1px solid #C8E6D4;border-radius:16px;text-decoration:none;color:inherit;transition:all .28s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden;}
.acceso-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#4CAF82,#1B6CA8);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(0.16,1,0.3,1);}
.acceso-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(13,59,46,.12);border-color:#A8D5BC;text-decoration:none;color:inherit;}
.acceso-item:hover::before{transform:scaleX(1);}
.acceso-icon{width:50px;height:50px;border-radius:14px;background:rgba(76,175,130,.1);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;}
.acceso-item:hover .acceso-icon{background:rgba(76,175,130,.18);transform:scale(1.08);}
.acceso-icon.b{background:rgba(27,108,168,.1);}
.acceso-item:hover .acceso-icon.b{background:rgba(27,108,168,.18);}
.acceso-label{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:#2C2416;line-height:1.3;}
.acceso-desc{font-size:11px;color:#9E9288;line-height:1.4;}

.cifras-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.cifra{padding:44px 36px;border-right:1px solid #C8E6D4;transition:background .25s;}
.cifra:last-child{border-right:none;}
.cifra:hover{background:#FDFCFB;}

.dash-wrap{background:#0D3B2E;border-radius:24px;padding:40px;position:relative;overflow:hidden;}
.dash-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 85% 10%,rgba(76,175,130,.12) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 10% 90%,rgba(27,108,168,.1) 0%,transparent 60%);}
.dkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.06);border-radius:12px;overflow:hidden;border:1px solid rgba(76,175,130,.12);position:relative;margin-bottom:24px;}
.dkpi{padding:18px 20px;background:rgba(255,255,255,.02);}
.dkpi-l{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(168,213,188,.48);display:block;margin-bottom:8px;}
.dkpi-v{font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:600;color:#FDFCFB;line-height:1;display:block;}
.dkpi-u{font-size:13px;font-weight:300;color:#A8D5BC;}
.dkpi-d{font-family:'DM Mono',monospace;font-size:10px;color:#4CAF82;margin-top:4px;}

.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.bar-lbl{font-size:11px;color:rgba(255,255,255,.55);width:145px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{flex:1;height:7px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden;}
.bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,#4CAF82,#1B6CA8);}
.bar-fill.g{background:linear-gradient(90deg,#1A5C42,#4CAF82);}
.bar-fill.b{background:linear-gradient(90deg,#4FA3D1,#1B6CA8);}
.bar-val{font-family:'DM Mono',monospace;font-size:10px;color:rgba(168,213,188,.7);width:52px;text-align:right;flex-shrink:0;}

.chart-line{fill:none;stroke:#C47B0A;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.chart-area{fill:url(#areaG);opacity:.25;}
.chart-dot{fill:#C47B0A;}

.treemap{display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:3px;border-radius:16px;overflow:hidden;}
.tm-cell{display:flex;flex-direction:column;justify-content:flex-end;padding:14px;transition:filter .25s;}
.tm-cell:hover{filter:brightness(1.12);}
.tm-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:4px;}
.tm-val{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;color:#FDFCFB;line-height:1;}
.tm-unit{font-size:11px;font-weight:300;color:rgba(255,255,255,.6);}

.mapa-box{background:#0D3B2E;border-radius:20px;aspect-ratio:16/7;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.mapa-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(76,175,130,.38) 1px,transparent 1px);background-size:32px 32px;opacity:.28;}
.mapa-vig{position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at center,transparent 40%,rgba(13,59,46,.85) 100%);}

.casos-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.caso{display:flex;gap:16px;align-items:flex-start;padding:24px;background:#FDFCFB;border:1px solid #C8E6D4;border-radius:16px;transition:all .28s cubic-bezier(0.16,1,0.3,1);}
.caso:hover{box-shadow:0 8px 24px rgba(13,59,46,.1);transform:translateY(-2px);border-color:#A8D5BC;}
.caso-icon{width:42px;height:42px;border-radius:12px;background:rgba(76,175,130,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.caso-icon.b{background:rgba(27,108,168,.1);}
.caso-title{font-size:14px;font-weight:600;color:#2C2416;margin-bottom:5px;font-family:'DM Sans',sans-serif;}
.caso-desc{font-size:13px;color:#9E9288;line-height:1.5;}

.pub-item{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid #C8E6D4;text-decoration:none;color:inherit;transition:all .2s;}
.pub-item:last-child{border-bottom:none;}
.pub-item:hover .pub-title{color:#2E7D5A;}
.pub-item:hover{text-decoration:none;color:inherit;}
.pub-thumb{width:70px;height:70px;border-radius:10px;background:linear-gradient(135deg,#1A5C42,#2E7D5A);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .25s;}
.pub-item:hover .pub-thumb{transform:scale(1.05);}
.pub-thumb.b{background:linear-gradient(135deg,#1B4F8A,#1B6CA8);}
.pub-meta{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#9E9288;margin-bottom:5px;display:block;}
.pub-title{font-family:'Fraunces',Georgia,serif;font-size:15px;color:#2C2416;line-height:1.3;margin-bottom:4px;transition:color .2s;}
.pub-desc{font-size:12px;color:#9E9288;line-height:1.45;}

.cta-banner{background:linear-gradient(135deg,#0D3B2E 0%,#1A5C42 55%,#2E7D5A 100%);border-radius:24px;padding:60px 56px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:40px;}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 90% 50%,rgba(76,175,130,.15) 0%,transparent 70%);}
.cta-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(22px,3vw,34px);font-weight:300;color:#FDFCFB;line-height:1.15;margin-bottom:10px;}
.cta-title em{color:#4CAF82;font-style:italic;}
.cta-desc{font-size:15px;color:#A8D5BC;max-width:400px;line-height:1.6;}

.sp-page{width:100%;}
.wmax{max-width:1280px;margin:0 auto;padding:0 40px;}
.sec{padding:80px 0;}
.sec-fog{background:#EEF7F2;}
.sec-white{background:#FDFCFB;}

@media(max-width:1200px){.hero-kpis,.dkpis{grid-template-columns:repeat(2,1fr);}.acceso-grid{grid-template-columns:repeat(3,1fr);}.cifras-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){.casos-grid{grid-template-columns:1fr;}}
@media(max-width:768px){.hero-kpis,.dkpis{grid-template-columns:1fr;}.acceso-grid{grid-template-columns:1fr 1fr;}.cifras-grid{grid-template-columns:1fr;}.cta-banner{flex-direction:column;padding:36px 24px;}.wmax{padding:0 20px;}.cifra{border-right:none;border-bottom:1px solid #C8E6D4;}.cifra:last-child{border-bottom:none;}.treemap{grid-template-columns:1fr;height:auto;}}


/* ══════════════════════════════════════════════
   FIN DEL ARCHIVO — newmrv-sp2016.css
   Versión 1.0 · DNP Colombia · 2026
   ══════════════════════════════════════════════ */