/* GOTAR: capa de entrada de todas las webs de gotar.es. Uso en brand/DESIGN-SYSTEM.md.
   Este archivo y sus fotos (hero-bg.jpg, hero-bg-mobile.jpg) van en la misma carpeta.
   Se va sola por CSS: splash.js solo añade el salto y espera para el .reveal. */
.splash {
  --splash-mark: clamp(9.5rem, 34vmin, 19rem);
  position: fixed; inset: 0; z-index: 9998; overflow: hidden;
  background-color: #1838c8;
  background-image:
    radial-gradient(ellipse 100% 78% at 50% 48%, rgba(6,11,28,0.74) 0%, rgba(7,12,30,0.46) 58%, rgba(7,12,30,0.24) 100%),
    url("hero-bg.jpg"),
    url("data:image/jpeg;base64,/9j/2wBDABISEhITEhQWFhQcHhseHCkmIiImKT4sMCwwLD5eO0U7O0U7XlNlUk1SZVOWdmhodpatkYqRrdK8vNL/+///////2wBDARISEhITEhQWFhQcHhseHCkmIiImKT4sMCwwLD5eO0U7O0U7XlNlUk1SZVOWdmhodpatkYqRrdK8vNL/+///////wgARCAAOABgDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAABBf/EABYBAQEBAAAAAAAAAAAAAAAAAAQDBf/aAAwDAQACEAMQAAAAGsAdwmXRhV//xAAgEAABBAEEAwAAAAAAAAAAAAABAAIDBBMFEiEiMTJR/9oACAEBAAE/AK+n2Zudu1v0pxoUASTllV29Nbd3PUeGqe7am9pFidIeXKHSmlmSR/Vf/8QAGxEAAgIDAQAAAAAAAAAAAAAAAQIAAxEhMoL/2gAIAQIBAT8AZbW6PkRqcnbif//EABkRAQACAwAAAAAAAAAAAAAAAAEAAgMRMf/aAAgBAwEBPwA1DJU4T//Z");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  animation: splashFade 600ms cubic-bezier(0.4, 0, 0.2, 1) 1600ms forwards;
}
.splash::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(to bottom, rgba(242,239,232,0), rgba(242,239,232,0.78));
}
.splash::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--splash-mark); height: calc(var(--splash-mark) * 1.28);
  margin-left: calc(var(--splash-mark) * -0.5); margin-top: calc(var(--splash-mark) * -0.4992);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 128' fill='none'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%23ECE9E0' stroke-width='2.4'/%3E%3Cpath fill='%23ECE9E0' d='M50 12 C54 38 62 46 88 50 C56 54 51 80 50 122 C49 80 44 54 12 50 C38 46 46 38 50 12 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.96;
  transform-origin: 50% 39%;
  will-change: transform;
  animation: splashSpin 8s linear infinite;
}
@keyframes splashSpin { to { transform: rotate(360deg); } }
@keyframes splashFade {
  from { opacity: 1; pointer-events: none; }
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 640px) {
  .splash {
    background-image:
      radial-gradient(ellipse 130% 64% at 50% 46%, rgba(6,11,28,0.76) 0%, rgba(7,12,30,0.48) 60%, rgba(7,12,30,0.26) 100%),
      url("hero-bg-mobile.jpg"),
      url("data:image/jpeg;base64,/9j/2wBDABISEhITEhQWFhQcHhseHCkmIiImKT4sMCwwLD5eO0U7O0U7XlNlUk1SZVOWdmhodpatkYqRrdK8vNL/+///////2wBDARISEhITEhQWFhQcHhseHCkmIiImKT4sMCwwLD5eO0U7O0U7XlNlUk1SZVOWdmhodpatkYqRrdK8vNL/+///////wgARCAATAA4DASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFA//EABYBAQEBAAAAAAAAAAAAAAAAAAQDBf/aAAwDAQACEAMQAAAANZErWO40C5f/xAAfEAACAgEEAwAAAAAAAAAAAAACAwABBAURMVEhImH/2gAIAQEAAT8ARpRF7u8D9jc/CxNgAKZfdzK1F7+ShURXKEeopYXyM//EABoRAAICAwAAAAAAAAAAAAAAAAECADESIVL/2gAIAQIBAT8AcOducjyKjVP/xAAXEQADAQAAAAAAAAAAAAAAAAAAAQKB/9oACAEDAQE/AJWDP//Z");
  }
}
/* splash.js pone esta clase mientras la capa tapa la página: bloquea el scroll y guarda el .reveal para el fundido. */
html.splash-on { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html.splash-on .reveal, html.splash-on .reveal.is-visible {
    opacity: 0; transform: translateY(28px); filter: blur(10px); transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash { animation-duration: 250ms; animation-delay: 700ms; }
  .splash::after { animation: none; will-change: auto; }
}
@media print { .splash { display: none; } }
/* Mientras llega la foto, el hero sigue azul al quitarse la capa. */
.hero { background-color: #1838c8; }