/* SamuStudio 3D — estilos aislados bajo .samu3d (no afectan al resto del sitio) */
html, body { margin: 0; height: 100%; background: #F3F3F4; }

.samu3d {
  --samu-black: #111318;
  --samu-white: #F5F5F7;
  --samu-bg: #F3F3F4;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 46% 7% at 50% 90%, rgba(17,19,24,0.10), rgba(17,19,24,0) 70%),
    radial-gradient(ellipse 80% 70% at 50% 45%, #FAFAFB 0%, var(--samu-bg) 70%, #ECECEE 100%);
  /* el desplazamiento vertical de la página sigue funcionando en táctil */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.samu3d__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 1;
  transition: opacity .6s ease;
}
.samu3d.is-loading .samu3d__canvas { opacity: 0; }

/* Logo: capa HTML por encima del lienzo → nunca puede quedar tapado */
.samu3d__logo {
  position: absolute;
  left: 50%; top: 45.3%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
  width: clamp(240px, 35.5vw, 640px);
  pointer-events: none;
  line-height: 0;
}
.samu3d__logo-img { width: 100%; height: auto; display: block; }
.samu3d__logo-text { display: none; }
/* Versión provisional mientras no se agregue el SVG maestro */
.samu3d__logo.is-provisional .samu3d__logo-text {
  display: block;
  font: 300 clamp(44px, 6.4vw, 116px)/1 'Helvetica Neue', 'Manrope', Arial, sans-serif;
  letter-spacing: -0.035em;
  color: var(--samu-black);
  text-align: center;
  white-space: nowrap;
}
.samu3d__logo-text sup { font-size: .26em; vertical-align: 2.3em; margin-left: .08em; letter-spacing: 0; }

/* Con WebGL el logo se dibuja dentro de la escena 3D; la capa HTML queda invisible
   (sigue siendo el h1 para buscadores y lectores de pantalla) */
.samu3d.has-3d-logo:not(.is-fallback) .samu3d__logo { opacity: 0; }

/* En modo alternativo la imagen ya incluye el logo */
.samu3d.is-fallback .samu3d__logo { opacity: 0; }

/* Alternativa sin WebGL: imagen renderizada de la propia escena */
.samu3d__fallback { display: none; }
.samu3d.is-fallback .samu3d__canvas { display: none; }
.samu3d.is-fallback .samu3d__fallback {
  display: block; position: absolute; inset: 0;
  background: url('assets/fallback.webp') center / cover no-repeat;
}

.samu3d__loader {
  position: absolute; left: 50%; bottom: 9%;
  width: 64px; height: 1px; margin-left: -32px;
  background: linear-gradient(90deg, transparent, var(--samu-black), transparent);
  background-size: 200% 100%;
  opacity: 0; transition: opacity .3s;
  animation: samu3d-load 1.2s linear infinite;
}
.samu3d.is-loading .samu3d__loader { opacity: .5; }
@keyframes samu3d-load { to { background-position: -200% 0; } }

@media (orientation: portrait) {
  .samu3d__logo { width: clamp(220px, 70vw, 460px); top: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .samu3d__loader { animation: none; }
}

/* Créditos CC BY: botón mínimo, sin texto visible en reposo */
.samu3d__credits { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 3; font: 300 11px/1.45 'Manrope', 'Helvetica Neue', Arial, sans-serif; color: var(--samu-black); }
.samu3d__credits summary { list-style: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(17,19,24,.25); display: grid; place-items: center; font-size: 11px; opacity: .45; margin-left: auto; transition: opacity .2s; }
.samu3d__credits summary::-webkit-details-marker { display: none; }
.samu3d__credits summary:hover, .samu3d__credits summary:focus-visible { opacity: 1; outline: none; }
.samu3d__credits[open] summary { opacity: 1; }
.samu3d__credits ul { position: absolute; right: 0; bottom: 30px; width: min(340px, calc(100vw - 32px)); margin: 0; padding: 12px 14px 12px 26px; background: rgba(245,245,247,.96); border: 1px solid rgba(17,19,24,.1); border-radius: 10px; box-shadow: 0 8px 24px rgba(17,19,24,.08); }
.samu3d__credits li + li { margin-top: 4px; }
.samu3d__credits a { color: #6D2038; }