/* ============================================================
   METADIGITAL THEME — VARIABLES DE DISEÑO
   ============================================================
   Este es el único archivo que se edita por cada proyecto nuevo.
   Cambiando estos valores se personaliza el 90% del sitio.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORES
     Instrucciones: definir primario y secundario del cliente.
     El resto de variables se derivan automáticamente.
  ---------------------------------------------------------- */

  /* Colores principales — EDITAR POR PROYECTO */
  --color-primario:         #1a3a5c;   /* Azul oscuro por defecto */
  --color-secundario:       #e8734a;   /* Naranja acento por defecto */

  /* Variantes del primario */
  --color-primario-claro:   #2a5080;
  --color-primario-oscuro:  #0f2238;
  --color-primario-suave:   #e8f0f8;   /* Fondos suaves, hover states */

  /* Variantes del secundario */
  --color-secundario-claro: #ed8f68;
  --color-secundario-oscuro:#c4562a;
  --color-secundario-suave: #fdf1ec;

  /* Neutros */
  --color-texto:            #1a1a1a;
  --color-texto-suave:      #555555;
  --color-texto-muted:      #888888;
  --color-texto-invertido:  #ffffff;
  --color-fondo:            #ffffff;
  --color-fondo-suave:      #f7f8fa;   /* Secciones alternas */
  --color-borde:            #e2e6ea;
  --color-borde-suave:      #f0f2f4;

  /* ----------------------------------------------------------
     TIPOGRAFÍA — EDITAR POR PROYECTO
     Reemplazar el @import de Google Fonts en main.css también.
  ---------------------------------------------------------- */

  --fuente-titulos:         'Playfair Display', Georgia, serif;
  --fuente-cuerpo:          'DM Sans', system-ui, sans-serif;
  --fuente-mono:            'JetBrains Mono', monospace;

  /* Escala tipográfica (mobile-first, se sobreescribe en desktop) */
  --texto-xs:    0.75rem;    /* 12px */
  --texto-sm:    0.875rem;   /* 14px */
  --texto-base:  1rem;       /* 16px */
  --texto-md:    1.125rem;   /* 18px */
  --texto-lg:    1.25rem;    /* 20px */
  --texto-xl:    1.5rem;     /* 24px */
  --texto-2xl:   2rem;       /* 32px */
  --texto-3xl:   2.5rem;     /* 40px */
  --texto-4xl:   3.25rem;    /* 52px */
  --texto-5xl:   4rem;       /* 64px */

  /* Pesos */
  --peso-normal:  400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-bold:    700;

  /* Line heights */
  --leading-apretado: 1.15;
  --leading-normal:   1.6;
  --leading-suelto:   1.75;

  /* ----------------------------------------------------------
     ESPACIADO — Sistema consistente en toda la web
  ---------------------------------------------------------- */

  --espacio-1:    0.25rem;   /* 4px */
  --espacio-2:    0.5rem;    /* 8px */
  --espacio-3:    0.75rem;   /* 12px */
  --espacio-4:    1rem;      /* 16px */
  --espacio-5:    1.25rem;   /* 20px */
  --espacio-6:    1.5rem;    /* 24px */
  --espacio-8:    2rem;      /* 32px */
  --espacio-10:   2.5rem;    /* 40px */
  --espacio-12:   3rem;      /* 48px */
  --espacio-16:   4rem;      /* 64px */
  --espacio-20:   5rem;      /* 80px */
  --espacio-24:   6rem;      /* 96px */
  --espacio-32:   8rem;      /* 128px */

  /* Padding de secciones */
  --seccion-padding-v:      5rem;       /* vertical por defecto */
  --seccion-padding-v-sm:   3rem;       /* mobile */

  /* Ancho máximo del contenido */
  --contenedor-max:         1200px;
  --contenedor-angosto:     780px;      /* Para textos largos */
  --contenedor-padding:     1.5rem;     /* Padding lateral en mobile */

  /* ----------------------------------------------------------
     BORDES Y RADIOS
  ---------------------------------------------------------- */

  --radio-sm:    4px;
  --radio-md:    8px;
  --radio-lg:    12px;
  --radio-xl:    20px;
  --radio-pill:  999px;

  --borde-ancho: 1px;
  --borde-color: var(--color-borde);

  /* ----------------------------------------------------------
     SOMBRAS
  ---------------------------------------------------------- */

  --sombra-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --sombra-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --sombra-lg:  0 10px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --sombra-xl:  0 20px 48px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.07);

  /* ----------------------------------------------------------
     TRANSICIONES
  ---------------------------------------------------------- */

  --transicion-rapida:  150ms ease;
  --transicion-normal:  250ms ease;
  --transicion-lenta:   400ms ease;

  /* ----------------------------------------------------------
     HEADER — EDITAR POR PROYECTO
  ---------------------------------------------------------- */

  --header-altura:          72px;
  --header-bg:              #ffffff;
  --header-bg-scroll:       #ffffff;   /* Al hacer scroll (si es transparente al inicio) */
  --header-texto:           var(--color-texto);
  --header-sombra:          0 2px 12px rgba(0,0,0,0.07);

  /* ----------------------------------------------------------
     BOTONES
  ---------------------------------------------------------- */

  --btn-radio:              var(--radio-md);
  --btn-padding:            0.75rem 1.75rem;
  --btn-padding-lg:         1rem 2.25rem;
  --btn-fuente-size:        var(--texto-base);
  --btn-fuente-peso:        var(--peso-semi);
  --btn-transicion:         var(--transicion-normal);

  /* Botón primario */
  --btn-primario-bg:        var(--color-secundario);
  --btn-primario-texto:     #ffffff;
  --btn-primario-hover-bg:  var(--color-secundario-oscuro);

  /* Botón secundario (outline) */
  --btn-outline-borde:      var(--color-primario);
  --btn-outline-texto:      var(--color-primario);
  --btn-outline-hover-bg:   var(--color-primario);
  --btn-outline-hover-texto:#ffffff;

  /* ----------------------------------------------------------
     HERO — EDITAR POR PROYECTO
  ---------------------------------------------------------- */

  --hero-min-height:        85vh;
  --hero-overlay:           rgba(10, 22, 40, 0.55);  /* Oscurecer imagen de fondo */
  --hero-texto-color:       #ffffff;

  /* ----------------------------------------------------------
     CARDS DE SERVICIOS
  ---------------------------------------------------------- */

  --card-radio:             var(--radio-lg);
  --card-padding:           2rem;
  --card-sombra:            var(--sombra-md);
  --card-sombra-hover:      var(--sombra-lg);
  --card-borde:             1px solid var(--color-borde-suave);
}

/* ----------------------------------------------------------
   BREAKPOINTS DE REFERENCIA (solo para documentación)
   Usar en media queries con min-width:
   sm:  576px
   md:  768px
   lg:  1024px
   xl:  1200px
---------------------------------------------------------- */