/* ============================================================
   GRAFENO COMUNICACIONES – PRELOADER & PAGE TRANSITION
   Patrón de grafeno (panal) + spinner de dos arcos (celeste)
   Carga inicial y transición entre páginas. Salida difuminada.
   ============================================================ */

:root {
  --pl-bg:        #fafbfc;   /* fondo claro del preloader */
  --pl-ink:       #1b2733;   /* gris grafito (arco oscuro / texto) */
  --pl-cel:       #2FAFC4;   /* celeste de acento */
  --pl-cel-soft:  rgba(47,175,196,0.85);
  --pl-title-font:'Outfit', sans-serif;
}

/* Oculta el overlay antiguo */
#loader-overlay { display: none !important; }

/* ══════════════════════════════════════════════
   1. CONTENEDOR PRINCIPAL
══════════════════════════════════════════════ */
#mpc-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, #ffffff 0%, var(--pl-bg) 55%),
    var(--pl-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  pointer-events: all;
  transform: scale(1);
  transition: opacity .8s ease, filter .8s ease, transform .8s var(--pl-ease, cubic-bezier(.65,0,.35,1)), visibility 0s linear .8s;
}
/* Resplandores suaves de fondo que "respiran" */
#mpc-preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 38% at 50% 40%, rgba(47,175,196,0.12), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 105%, rgba(46,107,116,0.10), transparent 72%),
    radial-gradient(ellipse 40% 30% at 15% 18%, rgba(125,184,192,0.08), transparent 70%);
  animation: mpc-bg-breathe 6.5s ease-in-out infinite;
}
/* Salida: se difumina, desvanece y hace un leve zoom (más dinámico) */
#mpc-preloader.loaded {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.06);
  visibility: hidden;
  pointer-events: none;
}
@keyframes mpc-bg-breathe {
  0%, 100% { opacity: .65; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Lienzo del patrón de grafeno (panal) */
#mpc-hex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}
#mpc-preloader.hex-on #mpc-hex { opacity: 1; }

/* ══════════════════════════════════════════════
   2. NÚCLEO CENTRAL: spinner de dos arcos + marca
══════════════════════════════════════════════ */
.mpc-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  transform: translateY(0);
  animation: mpc-core-in .9s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes mpc-core-in {
  from { opacity: 0; transform: translateY(16px) scale(.94); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0); }
}
/* Halo de luz pulsante detrás del spinner */
.mpc-core::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 38px;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(47,175,196,0.22) 0%, rgba(47,175,196,0.10) 35%, transparent 68%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: mpc-halo 2.6s ease-in-out infinite;
}
@keyframes mpc-halo {
  0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.82); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* Spinner SVG (dos arcos con extremos redondeados) */
.mpc-spin {
  width: 76px;
  height: 76px;
  animation: mpc-rotate 1.15s linear infinite, mpc-spin-glow 2.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(47,175,196,0.28));
}
@keyframes mpc-spin-glow {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(47,175,196,0.22)); }
  50%      { filter: drop-shadow(0 6px 22px rgba(47,175,196,0.55)); }
}
.mpc-spin .ring-track { stroke: rgba(27,39,51,0.10); }
.mpc-spin .ring-ink   { stroke: var(--pl-ink); }
.mpc-spin .ring-cel   { stroke: var(--pl-cel); }

/* Marca bajo el spinner — con brillo (shimmer) que la recorre */
.mpc-word {
  font-family: var(--pl-title-font);
  font-weight: 800;
  letter-spacing: .42em;
  font-size: 17px;
  text-indent: .42em;
  text-transform: uppercase;
  background: linear-gradient(100deg,
    var(--pl-ink) 0%, var(--pl-ink) 38%,
    var(--pl-cel) 50%,
    var(--pl-ink) 62%, var(--pl-ink) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation:
    mpc-word-in .9s cubic-bezier(.22,.9,.32,1) .15s both,
    mpc-shimmer 2.8s linear infinite;
}
@keyframes mpc-word-in {
  from { opacity: 0; transform: translateY(8px); letter-spacing: .7em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: .42em; }
}
@keyframes mpc-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}
.mpc-sub {
  font-family: var(--pl-title-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5em;
  text-indent: .5em;
  text-transform: uppercase;
  color: var(--pl-cel);
  margin-top: -10px;
  animation: mpc-sub-in .9s cubic-bezier(.22,.9,.32,1) .32s both;
}
@keyframes mpc-sub-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mpc-sub::after { content: ''; animation: mpc-dots 1.4s steps(4,end) infinite; }
@keyframes mpc-dots {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; }
}

/* ══════════════════════════════════════════════
   3. TRANSICIÓN ENTRE PÁGINAS (mismo estilo)
══════════════════════════════════════════════ */
#mpc-page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999998;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, #ffffff 0%, var(--pl-bg) 55%),
    var(--pl-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease, visibility 0s linear .42s;
}
#mpc-page-transition::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 38% at 50% 48%, rgba(47,175,196,0.13), transparent 70%);
}
#mpc-page-transition.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity .42s ease;
}
#mpc-page-transition .mpc-spin {
  width: 64px; height: 64px;
  position: relative; z-index: 2;
}
#mpc-page-transition.active .mpc-spin {
  animation: mpc-rotate 1.15s linear infinite, mpc-pt-pop .5s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes mpc-pt-pop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════
   4. BARRA DE PROGRESO DE SCROLL
══════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue, #2E6B74), var(--accent, #2FAFC4), var(--blue-bright, #7DB8C0));
  z-index: 10000;
  width: 0%;
  transition: width 0.1s linear;
}

/* ══════════════════════════════════════════════
   5. KEYFRAMES
══════════════════════════════════════════════ */
@keyframes mpc-rotate { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════
   6. RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .mpc-spin { width: 64px; height: 64px; }
  .mpc-word { font-size: 15px; letter-spacing: .36em; }
}
@media (prefers-reduced-motion: reduce) {
  .mpc-spin { animation: mpc-rotate 2.4s linear infinite; }
  #mpc-hex { transition: none; }
  #mpc-preloader::before,
  .mpc-core::before,
  .mpc-word { animation: none; }
  .mpc-word { color: var(--pl-ink); -webkit-text-fill-color: var(--pl-ink); }
}