/* Carga local de Montserrat Regular */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
}

/* Carga local de Montserrat SemiBold */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
}

/* Carga local de Montserrat Bold */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-Bold.ttf') format('truetype');
}





:root {
  /* ==========================================================================
     PALETA METAFÓRICA DE COLORES (Pebarco Dark/Synth)
     ========================================================================== */
  --sombra-profunda:  #0f172a; /* Fondo principal */
  --camara-oscura:    #1e293b; /* Fondo de tarjetas/secciones */
  --fuego-magenta:    #ff007f; /* Acento primario neón */
  --luz-pulsar:       #00d2ff; /* Acento secundario cian */
  --luz-estelar:      #f8fafc; /* Texto principal */
  --penumbra:         #94a3b8; /* Texto secundario */


   /* ✅ Mapeo hacia los nombres que consume base.css: */
   --color-bg:         var(--sombra-profunda);
   --color-bg-header:  var(--camara-oscura);
   --color-card-bg:    var(--camara-oscura);
   --color-primary:    var(--fuego-magenta);
   --color-accent:     var(--luz-pulsar);
   --color-text:       var(--luz-estelar);

  /* ==========================================================================
     TIPOGRAFÍA METAFÓRICA (Google Font: Montserrat)
     ========================================================================== */
  --fuente-base:      'Montserrat', system-ui, -apple-system, sans-serif;
  --fuente-titular:   'Montserrat', system-ui, -apple-system, sans-serif;

  /* Modos/Matices de Voz (Escala de Tamaños en REM) */
  --voz-suspiro:      0.875rem;                       /* 14px - Legal/Captions */
  --voz-cuerpo:       1rem;                          /* 16px - Base */
  --voz-destacada:    1.25rem;                       /* 20px - Subtítulos */
  --voz-subtitular:   clamp(1.5rem, 2vw, 2rem);      /* 24px - 32px */
  --voz-impacto:      clamp(2rem, 3.5vw, 2.75rem);   /* 32px - 44px */
  --voz-monumental:   clamp(2.5rem, 5vw, 3.75rem);   /* 40px - 60px */
}


/* ==========================================
   OCULTAR IMÁGENES DENTRO DE MEDIA-FRAME
   ========================================== */
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none !important; /* Mantiene la imagen oculta por defecto */
  position: relative;
  z-index: 1;
}

/* Solo se muestra cuando JS confirme que la imagen existe y cargó */
.media-frame img.is-loaded {
  display: block !important;
}