/* === splash-kit.css (reemplazo) ========================================= */

:root{
  /* Diámetro del círculo del splash (ajustable) */
  --splash-sign-size: clamp(420px, 36vw, 620px);
  /* Sombra: fuera del círculo (no genera halo blanco) */
  --splash-sign-shadow: 0 20px 32px rgba(6, 16, 46, .28);
}

/* Contenedor del panel derecho del splash (layout) */
.splash-right {
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  /* Si tenías un recuadro blanco acá, lo dejamos translúcido mínimo */
  background: none;
  box-shadow: none;              /* evitamos halo del card */
  border-radius: 24px;
}

/* Figura circular del logo */
.splash-sign {
  width: var(--splash-sign-size);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
}

/* Imagen del anillo: círculo verdadero, sin halo */
.splash-sign__img {
  width: 100%;
  height: 100%;
  display: block;

  /* 1) recorta exactamente a círculo (Chrome/Safari/Edge) */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 99.6%, transparent 99.7%);
          mask-image: radial-gradient(circle at 50% 50%, #000 99.6%, transparent 99.7%);

  /* 2) fallback para navegadores sin mask-image */
  clip-path: circle(50% at 50% 50%);

  /* 3) Sombra definida por la forma (no por el rectángulo): no produce halo */
  filter: drop-shadow(var(--splash-sign-shadow));

  /* Render nítido */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  transform: translateZ(0);      /* evita halos por subpíxel */
}

/* Si existía un resplandor/halo debajo, lo anulamos */
.splash-sign::before,
.splash-right::before {
  content: none !important;
}

/* Opcional: centrar el bloque respecto del título a la izquierda */
@media (min-width: 1100px){
  .splash-right { justify-items: center; }
}

/* Fine-tuning opcional: tamaño específico en desktop amplio */
@media (min-width: 1400px){
  :root{ --splash-sign-size: 560px; }
}