/* =============================================================================
   INGRESOS ADICIONALES — GLOBAL STYLES
   BEM methodology | CSS Custom Properties | Mobile-first
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ----------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --color-green-900:   #04342C;
  --color-green-800:   #085041;
  --color-green-700:   #0F6E56;
  --color-green-600:   #1d9e75;
  --color-green-400:   #5DCAA5;
  --color-green-100:   #9FE1CB;
  --color-green-50:    #E1F5EE;

  --color-coral-700:   #993C1D;
  --color-coral-600:   #D85A30;
  --color-coral-400:   #F0997B;
  --color-coral-50:    #FAECE7;

  --color-purple-700:  #3C3489;
  --color-purple-600:  #534AB7;
  --color-purple-400:  #7F77DD;
  --color-purple-50:   #EEEDFE;

  --color-amber-700:   #854F0B;
  --color-amber-600:   #BA7517;
  --color-amber-400:   #EF9F27;
  --color-amber-50:    #FAEEDA;

  /* Neutrals */
  --color-gray-900:    #111110;
  --color-gray-800:    #2C2C2A;
  --color-gray-600:    #5F5E5A;
  --color-gray-400:    #888780;
  --color-gray-200:    #B4B2A9;
  --color-gray-100:    #D3D1C7;
  --color-gray-50:     #F1EFE8;
  --color-white:       #FFFFFF;

  /* Semantic */
  --color-brand:       var(--color-green-600);
  --color-brand-dark:  var(--color-green-700);
  --color-brand-light: var(--color-green-50);

  /* Text */
  --text-primary:      var(--color-gray-900);
  --text-secondary:    var(--color-gray-600);
  --text-tertiary:     var(--color-gray-400);
  --text-inverse:      var(--color-white);

  /* Surfaces */
  --surface-primary:   var(--color-white);
  --surface-secondary: var(--color-gray-50);
  --surface-border:    var(--color-gray-100);
  --surface-border-subtle: rgba(17, 17, 16, 0.08);

  /* Typography */
  --font-serif:        'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:         'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes (fluid) */
  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  1rem;        /* 16px */
  --text-md:    1.0625rem;   /* 17px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.5rem;      /* 24px */
  --text-3xl:   2rem;        /* 32px */
  --text-4xl:   2.5rem;      /* 40px */
  --text-5xl:   3rem;        /* 48px */

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max:     1200px;
  --container-wide:    1400px;
  --container-narrow:  760px;
  --container-padding: clamp(1rem, 5vw, 2.5rem);
  --section-padding: clamp(2rem, 5vw, 4rem);

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   350ms ease;

  /* Z-index scale */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand);
  color: var(--color-white);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   ----------------------------------------------------------------------------- */
.u-serif { font-family: var(--font-serif); }
.u-sans  { font-family: var(--font-sans); }

.u-text-xs   { font-size: var(--text-xs); }
.u-text-sm   { font-size: var(--text-sm); }
.u-text-base { font-size: var(--text-base); }
.u-text-lg   { font-size: var(--text-lg); }
.u-text-xl   { font-size: var(--text-xl); }

.u-text-secondary { color: var(--text-secondary); }
.u-text-tertiary  { color: var(--text-tertiary); }
.u-text-brand     { color: var(--color-brand); }

.u-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.u-label--before::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-brand);
  vertical-align: middle;
  margin-right: var(--space-2);
}

/* -----------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   ----------------------------------------------------------------------------- */
.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* -----------------------------------------------------------------------------
   5. WORDPRESS ALIGNMENT CLASSES
   ----------------------------------------------------------------------------- */
.alignleft {
  float: left;
  margin-right: var(--space-6);
  margin-bottom: var(--space-4);
}

.alignright {
  float: right;
  margin-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.aligncenter {
  display: block;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.alignwide {
  margin-inline: calc(-1 * var(--container-padding));
}

.alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* -----------------------------------------------------------------------------
   6. WORDPRESS CORE CLASSES
   ----------------------------------------------------------------------------- */
.wp-caption {
  max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--space-2);
  font-style: italic;
}

.sticky {
  /* WordPress sticky post — handled in card styles */
}

.bypostauthor {
  /* WordPress author comment class */
}

/* Pagination */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0.5px solid var(--surface-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--transition-base);
  color: var(--text-secondary);
}

.page-numbers.current,
.page-numbers:hover {
  background: var(--color-brand);
  color: var(--color-white);
  border-color: var(--color-brand);
}

/* -----------------------------------------------------------------------------
   7. CATEGORY COLOR TOKENS
   ----------------------------------------------------------------------------- */
.cat--finanzas {
  --cat-color:      var(--color-green-600);
  --cat-color-dark: var(--color-green-700);
  --cat-color-bg:   var(--color-green-50);
}

.cat--emprendimiento {
  --cat-color:      var(--color-coral-600);
  --cat-color-dark: var(--color-coral-700);
  --cat-color-bg:   var(--color-coral-50);
}

.cat--crecimiento-personal {
  --cat-color:      var(--color-purple-400);
  --cat-color-dark: var(--color-purple-700);
  --cat-color-bg:   var(--color-purple-50);
}

.cat--productividad {
  --cat-color:      var(--color-amber-600);
  --cat-color-dark: var(--color-amber-700);
  --cat-color-bg:   var(--color-amber-50);
}

/* -----------------------------------------------------------------------------
   8. MEDIA QUERIES BREAKPOINTS
   ----------------------------------------------------------------------------- */
/*
  sm:  480px
  md:  768px
  lg:  1024px
  xl:  1200px
  2xl: 1400px
*/