:root {
  /* Paleta de Colores Oficial (Eveca Consulting) */
  --primary: #39bc5b;
  --primary-hover: #0bb85e;
  --secondary: #d29326;
  --foreground: #000000;
  --background: #ffffff;
  --background-secondary: #f2f3f8;
  --body-text: #717171;
  --border: #f2f2f2;
  --input-field: #fafafa;
  --bg-translucent: rgba(255, 255, 255, 0.95);

  /* Colores Decorativos */
  --dark-blue: #062437;

  /* Colores Footer */
  --footer-border-alpha: rgba(255, 255, 255, 0.05);

  /* --- Tipografía --- */
  --font-main: "Poppins", sans-serif;
  --font-heading: "Poppins", sans-serif;

  /* Escala Tipográfica (Fluid Typography) */
  --fs-hero: clamp(32px, 5vw, 64px);
  --fs-h1: clamp(28px, 4vw, 48px);
  --fs-h2: clamp(24px, 3vw, 32px);
  --fs-h3: clamp(20px, 2vw, 24px);
  --fs-h4: clamp(18px, 1.5vw, 20px);
  --fs-h5: clamp(16px, 1.3vw, 16px);
  --fs-h6: 14px;
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-header: clamp(20px, 3vw, 26px);
  --fs-nav: 0.9375rem;
  --fs-xs: 0.75rem;
  --border-thin: 2px;
  --border-base: 1px;

  /* --- Dimensiones --- */
  --header-height: 110px;
  --header-height-inner: 80px;
  --logo-height: 65px;

  --lh-heading: 1.4;
  --lh-tight: 1.2;
  --lh-body: 1.75;

  /* --- Spacing Tokens (WP Gutenberg Standard) --- */
  --spacing-20: 0.44rem;
  --spacing-30: 0.67rem;
  --spacing-40: 1rem;
  --spacing-50: 1.5rem;
  --spacing-60: 2.25rem;
  --spacing-70: 3.38rem;
  --spacing-80: 5.06rem;

  --container-constrained: 900px;
  --container-max: 100%;
  --container-pad: 6rem;

  /* --- Botones & UI --- */
  --btn-padding: 1rem 1.8rem;
  --btn-radius: 0; /* Estilo corporativo angular */
  --btn-font-weight: 500;

  /* --- Sombras & Bordes --- */
  --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --shadow-sharp: 6px 6px 9px rgba(0, 0, 0, 0.1);

  /* --- Gradientes --- */
  --grad-midnight-overlay: linear-gradient(
    90deg,
    rgb(3, 13, 34) 5%,
    rgba(0, 0, 0, 0.47) 78%,
    transparent 100%
  );
  --grad-light-overlay: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    transparent 50%
  );

  --grad-banner: rgba(3, 13, 34, 0.7);

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Letter Spacing (Tokens) --- */
  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-display: 0.05em;
}

/* ==========================================================================
   Layout Components (Global)
   ========================================================================== */

.media-text-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--spacing-80);
}


.media-text-layout.layout-40-60 {
  grid-template-columns: 4fr 6fr;
  gap: var(--spacing-40);
}

.media-text-layout.layout-40-60.reverse {
  grid-template-columns: 6fr 4fr;
}

.media-text-layout.layout-65-35 {
  grid-template-columns: 6.5fr 3.5fr;
  gap: var(--spacing-60);
  align-items: start;
}


@media (max-width: 1024px) {
  .media-text-layout,
  .media-text-layout.layout-40-60,
  .media-text-layout.layout-40-60.reverse,
  .media-text-layout.layout-65-35 {
    grid-template-columns: 1fr;
    gap: var(--spacing-60);
  }
}


/* ==========================================================================
   Inner Page Components (Mini Hero)
   ========================================================================== */

.hero-mini {
  min-height: 40vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-image: var(--grad-midnight-overlay), var(--bg-url);
  position: relative;
  overflow: hidden;
}

.hero-mini .hero-title {
  color: var(--background);
  margin-bottom: 0;
  font-size: var(--fs-hero);
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

  .hero-mini .container {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Responsive Variables (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --container-pad: 3rem;
  }
}

@media (max-width: 768px) {
  :root {
    --container-pad: 1.5rem;
    --btn-padding: 0.8rem 1.2rem;
    --spacing-80: 3.5rem;
  }
}