/*
 ╔══════════════════════════════════════════════════════════════════╗
 ║                    IDENTIDAD DE MARCA                           ║
 ║                                                                 ║
 ║  Este es el ÚNICO archivo que debes editar para aplicar         ║
 ║  la identidad visual de la empresa.                             ║
 ║                                                                 ║
 ║  No necesitas tocar index.html ni contenido.js para cambiar     ║
 ║  colores, tipografía o logo.                                    ║
 ╚══════════════════════════════════════════════════════════════════╝
*/


/* ════════════════════════════════════════════════════════════════
   1. PALETA DE COLORES CORPORATIVOS
   ════════════════════════════════════════════════════════════════
   Aquí defines TODOS los colores de la empresa.
   Puedes tener 1 o 10 — los que el manual de marca indique.

   Instrucciones:
   ─ Reemplaza el valor #... por el código hexadecimal del color.
   ─ Si un color no existe en tu paleta, deja el valor que está
     (el sitio funciona igual).
   ─ Los nombres (primario, secundario, etc.) son solo etiquetas
     para organizarte. Lo importante es cómo los asignas
     en la sección 2 (más abajo).
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── TUS COLORES CORPORATIVOS ── */

  --marca-color-1:   #E8402A;   /* ← Color 1: Rojo/Acento (provisional) */
  --marca-color-2:   #1A3A5C;   /* ← Color 2: Azul oscuro (provisional) */
  --marca-color-3:   #2A7FC1;   /* ← Color 3: Azul medio (provisional)  */
  --marca-color-4:   #F5F5F5;   /* ← Color 4: Gris claro (provisional)  */
  --marca-color-5:   #FFFFFF;   /* ← Color 5: Blanco                     */

  /* Agrega más colores si tu paleta los tiene: */
  /* --marca-color-6: #...; */
  /* --marca-color-7: #...; */


  /* ════════════════════════════════════════════════════════════════
     2. ASIGNACIÓN DE ROLES
     ════════════════════════════════════════════════════════════════
     Aquí decides QUÉ color corporativo va en cada parte del sitio.
     Solo cambia el valor de la derecha (var(--marca-color-X))
     apuntando al color que quieras.

     Ejemplo: si quieres que los botones sean el color 2 en vez
     del color 1, cambia:
       --c-accent: var(--marca-color-1);
     por:
       --c-accent: var(--marca-color-2);
     ════════════════════════════════════════════════════════════════ */

  /* Fondo principal de la página (negro o muy oscuro recomendado) */
  --c-bg:        #0A0A0A;

  /* Superficies secundarias: cards, paneles */
  --c-surface:   #111111;

  /* Líneas y bordes separadores */
  --c-line:      #222222;

  /* Color de ACENTO — el más visible de la marca
     Aparece en: botones principales, guiones de la lista,
     etiquetas de sección, hover del nav, borde inferior del nav */
  --c-accent:    var(--marca-color-1);

  /* Tono más oscuro del acento — se usa en el estado hover
     de los botones. Normalmente es el mismo color, 15% más oscuro.
     Si no tienes un tono oscuro definido, puedes poner el mismo
     valor que --c-accent y el hover simplemente no cambiará. */
  --c-accent2:   #C43320;

  /* Color secundario de la marca
     Aparece en: elementos de apoyo, fondos de secciones
     (actualmente el sitio es todo negro — este color está
     disponible para usarlo cuando lo necesites) */
  --c-secondary: var(--marca-color-2);

  /* Color terciario / de apoyo */
  --c-tertiary:  var(--marca-color-3);

  /* Textos */
  --c-white:     var(--marca-color-5);   /* texto principal           */
  --c-off-white: #E8E8E8;                /* texto sobre fondos claros */
  --c-muted:     #888888;                /* texto secundario / gris   */


  /* ════════════════════════════════════════════════════════════════
     3. TIPOGRAFÍA
     ════════════════════════════════════════════════════════════════
     Cambia 'Inter' por el nombre exacto de tu fuente corporativa.

     Si usas Google Fonts:
       1. Ve a fonts.google.com y busca tu fuente
       2. Copia el <link> que te dan y pégalo en index.html
          reemplazando el que ya existe (líneas 10-12)
       3. Pon aquí el nombre exacto: 'Nombre De La Fuente'

     Si tienes la fuente como archivo (.ttf, .woff2):
       1. Crea una carpeta /fuentes/ en este proyecto
       2. Copia el archivo ahí
       3. Agrega un @font-face al final de este archivo
          (hay un ejemplo comentado más abajo)
     ════════════════════════════════════════════════════════════════ */

  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  /*       ↑ cambiar por la fuente corporativa cuando la tengas    */


  /* ── Medidas del layout (normalmente no se cambian) ── */
  --max-w: 1280px;
  --nav-h: 72px;
}


/* ════════════════════════════════════════════════════════════════
   4. LOGO
   ════════════════════════════════════════════════════════════════
   OPCIÓN A — Logo como imagen (cuando tengas el archivo)
   ──────────────────────────────────────────────────────────────
   1. Guarda tu logo en esta carpeta: logo.svg  (o .png, .webp)
   2. En contenido.js, cambia:
        usarLogoImagen: false   →   usarLogoImagen: true
        archivo: "imagenes/logo.svg"   →   la ruta correcta
   3. El logo aparecerá automáticamente en el nav y el footer.

   OPCIÓN B — Solo texto (activo ahora)
   ──────────────────────────────────────────────────────────────
   El nombre de la empresa (CONFIG.empresa.nombre en contenido.js)
   se muestra como texto en el nav. El guion central toma el
   color --c-accent.

   ── Estilos del logo imagen (cuando lo actives) ──
   ════════════════════════════════════════════════════════════════ */

.nav-logo img,
.footer-logo img {
  height: 36px;   /* ← ajusta la altura del logo */
  width: auto;
}


/* ════════════════════════════════════════════════════════════════
   5. FUENTE PROPIA (si tienes el archivo de la fuente)
   ════════════════════════════════════════════════════════════════
   Descomenta y completa este bloque si tu tipografía corporativa
   viene como archivo en vez de Google Fonts:

@font-face {
  font-family: 'NombreDeTuFuente';
  src: url('fuentes/nombre-regular.woff2') format('woff2'),
       url('fuentes/nombre-regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'NombreDeTuFuente';
  src: url('fuentes/nombre-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'NombreDeTuFuente';
  src: url('fuentes/nombre-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

   Luego actualiza --font arriba:
   --font: 'NombreDeTuFuente', sans-serif;
   ════════════════════════════════════════════════════════════════ */