:root{
    --pink: #E4007C;   /* Rosa mexicano */
    --black:#0B0B0B;
    --white:#FFFFFF;
  }

  /* Bloquea scroll mientras carga */
  body.is-loading { overflow: hidden; }

  /* Overlay */
  #loader{
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background:
      radial-gradient(1200px 800px at 10% -10%, color-mix(in oklab, var(--pink) 30%, transparent), transparent 60%),
      radial-gradient(900px 600px at 110% 110%, color-mix(in oklab, var(--pink) 25%, transparent), transparent 60%),
      var(--black);
    z-index: 9999;
    transition: opacity .45s ease, transform .45s ease;
  }
  #loader.hide{
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
  }

  .loader-wrap{
    display: grid; gap: 1.1rem; place-items: center;
    text-align: center;
  }

  /* Spinner principal (anillo con conic-gradient) */
  .ring{
    width: 92px; height: 92px; border-radius: 50%;
    background:
      conic-gradient(from 0turn, var(--pink), var(--white) 40%, var(--pink));
    -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
    mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
    filter: drop-shadow(0 0 16px color-mix(in oklab, var(--pink) 70%, white));
    animation: spin 1s linear infinite;
  }

  /* Punto pulsante al centro */
  .dot{
    position: relative;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--pink);
    box-shadow:
      0 0 12px color-mix(in oklab, var(--pink) 70%, white),
      0 0 30px color-mix(in oklab, var(--pink) 40%, white);
    animation: pulse 1.2s ease-in-out infinite;
    margin-top: -66px; /* colócalo visualmente dentro del anillo */
  }

  .loader-text{
    color: var(--white);
    font: 600 1.05rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    letter-spacing: .3px;
  }

  /* Destello en el texto "Cargando" */
  .loader-text .shine{
    background: linear-gradient(90deg, var(--white) 0%, color-mix(in oklab, var(--white) 78%, var(--pink)) 50%, var(--white) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: shine 1.8s linear infinite;
    text-transform: uppercase;
  }

  /* Puntos animados ... */
  .ellipsis::after{
    content: '…';
    display: inline-block;
    width: 1ch; text-align: left;
    animation: dots 1.1s steps(3, end) infinite;
  }

  /* Accesibilidad: reduce animación si el usuario lo prefiere */
  @media (prefers-reduced-motion: reduce){
    .ring, .dot, .loader-text .shine, .ellipsis::after {
      animation: none !important;
    }
  }

  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: .85; }
  }
  @keyframes shine {
    0%   { background-position: 200% 0; }
    100% { background-position: 0% 0; }
  }
  @keyframes dots {
    0%  { content: ''; }
    33% { content: '.'; }
    66% { content: '..'; }
    100%{ content: '...'; }
  }