/* ══════════════════════════════════════════════════════════════════════════
   TORQIUM DISPLAY — CAPA VISUAL DE LA PÁGINA DE PRODUCTO
   ──────────────────────────────────────────────────────────────────────────
   Ámbito exclusivo: solo actúa bajo la clase .display-page, presente
   únicamente en html/carta-visual.html.

   NO modifica proyectos.css (compartido con proyectos.html, torqium-tpv.html
   y sistema-ia-predictivo.html). Todo lo de aquí es aditivo y reversible:
   basta con quitar el <link> y la clase .display-page para volver al estado
   validado anterior.

   Paleta: exclusivamente tonos ya presentes en el sistema visual TORQIUM
   (azul eléctrico rgba(0,100,255) / rgba(0,82,190), turquesa rgba(0,190,235)
   y #7ddfff, texto #f3f7ff).

   v2 · 14/08/2026 — destello reforzado + aro orbital animado
   © 2026 Jordi Cano Román — TORQIUM®
   ══════════════════════════════════════════════════════════════════════════ */

/* Ancho único del contenido textual de la página (rango 1100–1200 px) */
.pantalla-proyectos.display-page {
  --display-ancho: 1120px;

  /* Aire vertical: altura de la cabecera fija (72px) + respiración extra.
     Los valores 72 / 64 / 58 replican los de .con-cabecera en cabecera.css. */
  padding-top: calc(72px + clamp(26px, 4.5vh, 56px));
  padding-bottom: 96px;
}

/* ══════════════════════════════════════════
   HERO — logo + título + subtítulo centrados
══════════════════════════════════════════ */
.display-hero {
  width: 100%;
  max-width: var(--display-ancho);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Contenedor del logotipo. Destello y aro van en pseudo-elementos absolutos:
   no ocupan espacio y por tanto no alteran la maquetación. */
.display-hero-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(26px, 3.8vh, 46px);
  animation: fadeInDown 0.7s ease;   /* keyframe ya definido en proyectos.css */
}

/* ── DESTELLO AZUL ────────────────────────────────────────────────
   Centrado en el isotipo (43% de la altura de la caja), no en el
   conjunto: el logotipo incluye la palabra DISPLAY debajo, así que
   centrarlo al 50% dejaría el resplandor caído respecto a la marca. */
.display-hero-logo::before {
  content: '';
  position: absolute;
  top: 43%;
  left: 50%;
  width: 184%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 160, 255, 0.46) 0%,
    rgba(0, 125, 245, 0.28) 26%,
    rgba(0, 195, 240, 0.15) 45%,
    rgba(0, 82, 190, 0.05) 63%,
    rgba(0, 0, 0, 0) 76%
  );
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
  animation: displayRespiracion 7s ease-in-out infinite;
}

/* ── ARO ORBITAL ──────────────────────────────────────────────────
   Anillo tenue continuo con un arco luminoso que recorre la órbita.
   Se consigue con un conic-gradient recortado a banda por máscara,
   girando muy despacio. Rodea todo el lockup sin tocarlo. */
.display-hero-logo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 134%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(120, 215, 255, 0.10) 0deg,
    rgba(120, 215, 255, 0.10) 150deg,
    rgba(140, 228, 255, 0.22) 225deg,
    rgba(190, 248, 255, 0.95) 292deg,
    rgba(140, 228, 255, 0.26) 330deg,
    rgba(120, 215, 255, 0.10) 360deg
  );
  -webkit-mask-image: radial-gradient(
    closest-side,
    transparent 0 90.2%,
    #000 91.4% 93%,
    transparent 94.2%
  );
  mask-image: radial-gradient(
    closest-side,
    transparent 0 90.2%,
    #000 91.4% 93%,
    transparent 94.2%
  );
  filter: blur(1.6px);
  z-index: 0;
  pointer-events: none;
  animation: displayOrbita 18s linear infinite;
}

@keyframes displayRespiracion {
  0%, 100% { opacity: 0.84; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes displayOrbita {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Logotipo. Escritorio 220–260 px · el clamp topa en 250 px. */
.display-hero-logo img {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(210px, 20vw, 250px);
  height: auto;
  filter:
    drop-shadow(0 0 20px rgba(0, 140, 255, 0.38))
    drop-shadow(0 12px 26px rgba(0, 0, 0, 0.60));
}

/* ══════════════════════════════════════════
   TÍTULO Y SUBTÍTULO — ritmo vertical y entrada escalonada
   Las animaciones fadeInDown / fadeInUp ya vienen de proyectos.css;
   aquí solo se les da retardo para que el hero entre por capas.
══════════════════════════════════════════ */
.display-page .titulo-proyectos {
  margin-bottom: 14px;
  animation-delay: 0.14s;
  animation-fill-mode: both;
}

.display-page .subtitulo-proyectos {
  max-width: 780px;
  margin-top: 10px;
  margin-bottom: clamp(40px, 6.5vh, 72px);
  line-height: 1.65;
  animation-delay: 0.28s;
  animation-fill-mode: both;
}

/* ══════════════════════════════════════════
   CONTENIDO — mismo ancho que el hero
══════════════════════════════════════════ */
.display-page .detalle-proyecto-ia {
  margin-top: 0;
  max-width: var(--display-ancho);
  gap: clamp(1.9rem, 3.4vw, 2.6rem);
}

.display-page .acciones-ia {
  margin-top: clamp(30px, 4.5vh, 52px);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  .pantalla-proyectos.display-page {
    padding-top: calc(64px + 22px);   /* cabecera móvil = 64px */
    padding-bottom: 74px;
  }

  /* Móvil 150–180 px */
  .display-hero-logo img {
    width: clamp(150px, 46vw, 180px);
  }

  .display-hero-logo::before {
    width: 196%;
    filter: blur(22px);
  }

  .display-hero-logo::after {
    width: 138%;
    filter: blur(1.1px);
  }
}

@media screen and (max-width: 900px) and (orientation: landscape) {
  .pantalla-proyectos.display-page {
    padding-top: calc(58px + 18px);   /* cabecera apaisada = 58px */
  }

  .display-hero-logo img {
    width: clamp(140px, 22vw, 176px);
  }
}

/* ══════════════════════════════════════════
   REDUCCIÓN DE MOVIMIENTO
   Se detiene todo el movimiento y se deja el hero en su estado final:
   destello y aro siguen visibles, simplemente quietos.
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .display-hero-logo,
  .display-hero-logo::before,
  .display-hero-logo::after,
  .display-page .titulo-proyectos,
  .display-page .subtitulo-proyectos {
    animation: none !important;
  }

  .display-hero-logo::before {
    opacity: 1;
  }
}