/* Thot Creative · © 2026 Webs Creative LLC · Todos los derechos reservados
   Efectos «Creative 3D»: tarjetas con inclinación y reflejo, borde degradado, cabecera 3D y transiciones. */

/* Tarjeta 3D: la inclinación la pone gc-tarjeta3d (JS) con --rx/--ry y el reflejo con --mx/--my. */
.gc-3d {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --elevar: 0px;
  position: relative; transform-style: preserve-3d; will-change: transform;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--elevar));
  transition: transform 500ms var(--gc-curva), box-shadow var(--gc-normal) var(--gc-curva);
}
.gc-3d.activa { transition: transform 90ms linear, box-shadow var(--gc-normal) var(--gc-curva); --elevar: -3px; box-shadow: var(--gc-sombra-l), 0 0 0 1px color-mix(in srgb, var(--gc-naranja) 18%, transparent), 0 24px 60px -24px color-mix(in srgb, var(--gc-naranja) 45%, transparent); }
/* Borde degradado (máscara) */
.gc-3d::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--gc-degradado-borde);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9;
}
/* Reflejo de luz que sigue al ratón */
.gc-3d::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--gc-normal);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .10), color-mix(in srgb, var(--gc-naranja) 6%, transparent) 30%, transparent 60%);
}
[data-tema="claro"] .gc-3d::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .7), color-mix(in srgb, var(--gc-naranja) 7%, transparent) 32%, transparent 62%); }
.gc-3d.activa::after { opacity: 1; }
.gc-3d > * { transform: translateZ(18px); }
.gc-3d .gc-3d__profundo { transform: translateZ(36px); }

/* Cabecera del panel con escena 3D */
.gc-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--gc-radio-xl); padding: 30px 32px; margin-bottom: 22px; min-height: 196px;
  border: 1px solid var(--gc-borde); background: linear-gradient(120deg, color-mix(in srgb, var(--gc-naranja) 10%, transparent), transparent 45%), var(--gc-cristal);
  box-shadow: var(--gc-sombra); display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
}
.gc-hero__lienzo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .95; }
.gc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--gc-superficie) 0%, color-mix(in srgb, var(--gc-superficie) 70%, transparent) 38%, transparent 70%); }
[data-tema="claro"] .gc-hero::after { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .8) 40%, transparent 72%); }
.gc-hero h1 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.03em; margin: 0; }
.gc-hero p { margin: 6px 0 0; color: var(--gc-texto-suave); max-width: 520px; }
.gc-hero__fecha { font-size: var(--gc-t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--gc-enlace); font-weight: 600; margin-bottom: 8px; }

/* Rejilla tecnológica de fondo */
.gc-rejilla-fondo { background-image: linear-gradient(var(--gc-rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--gc-rejilla) 1px, transparent 1px); background-size: 32px 32px; }

/* Transiciones entre pantallas con profundidad */
.gc-vista-enter-active { transition: opacity 320ms var(--gc-curva), transform 420ms var(--gc-curva), filter 320ms; }
.gc-vista-leave-active { transition: opacity 160ms ease, transform 160ms ease; }
.gc-vista-enter-from { opacity: 0; transform: perspective(1200px) translateZ(-60px) translateY(10px); filter: blur(4px); }
.gc-vista-leave-to { opacity: 0; transform: translateY(-4px); }
.gc-lista-enter-active { transition: all 360ms var(--gc-curva); }
.gc-lista-enter-from { opacity: 0; transform: translateY(10px); }
.gc-escalonado > * { animation: gc-escalonar 620ms var(--gc-curva) both; }
.gc-escalonado > *:nth-child(2) { animation-delay: 60ms; } .gc-escalonado > *:nth-child(3) { animation-delay: 120ms; } .gc-escalonado > *:nth-child(4) { animation-delay: 180ms; }
.gc-escalonado > *:nth-child(5) { animation-delay: 240ms; } .gc-escalonado > *:nth-child(6) { animation-delay: 300ms; } .gc-escalonado > *:nth-child(7) { animation-delay: 360ms; } .gc-escalonado > *:nth-child(8) { animation-delay: 420ms; }
@keyframes gc-escalonar { from { opacity: 0; transform: perspective(900px) translateY(16px) rotateX(10deg); } }

/* Halo animado alrededor de lo importante */
.gc-halo { position: relative; }
.gc-halo::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; background: conic-gradient(from var(--angulo, 0deg), var(--gc-naranja), var(--gc-cian), var(--gc-violeta), var(--gc-naranja)); filter: blur(10px); opacity: .55; animation: gc-girar-halo 6s linear infinite; }
@property --angulo { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes gc-girar-halo { to { --angulo: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .gc-3d, .gc-3d.activa { transform: none !important; }
  .gc-3d::after { display: none; }
  .gc-hero__lienzo, .gc-acceso__lienzo { display: none; }
  .gc-halo::before { animation: none; }
}