/* Portada animada · «Diseña tu producto IA» · ColoquIALab
   Todo cuelga de .pt y usa el prefijo pt-. Versión quieta: .pt-quieta (prefers-reduced-motion o ?sin-animaciones=1). */

.pt {
  --pt-mint: #12E3BC;
  --pt-mint-dim: #0DC4A2;
  --pt-ink: #09100e;
  --pt-dark: #0d1a15;
  --pt-white: #ffffff;
  --pt-texto-2: rgba(255, 255, 255, .74);
  --pt-texto-3: rgba(255, 255, 255, .62);
  --pt-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--pt-dark);
  color: var(--pt-white);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
.pt *, .pt *::before, .pt *::after { box-sizing: border-box; }

/* Fondo: brillo menta muy suave detrás de la escena + trama de puntos que se desvanece */
.pt-fondo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 58% at 72% 48%, rgba(18, 227, 188, .13), rgba(18, 227, 188, 0) 70%),
    radial-gradient(40% 40% at 8% 100%, rgba(18, 227, 188, .06), rgba(18, 227, 188, 0) 70%);
}
.pt-fondo::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 45%, #000 0%, transparent 75%);
}

/* ---------- Maquetación ---------- */
.pt-marco {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "cab escena" "texto escena";
  column-gap: clamp(24px, 4vw, 72px);
  max-width: 1360px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 32px clamp(24px, 4.5vw, 64px) 80px; /* 80 px abajo: deja sitio al pie de la app */
}
.pt-cab { grid-area: cab; display: flex; align-items: center; min-height: 44px; }
.pt-logo { display: block; height: 30px; width: auto; }

.pt-texto { grid-area: texto; align-self: center; max-width: 540px; padding: 24px 0; }

.pt-ceja {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pt-mint);
}
.pt-ceja::before { content: ''; width: 22px; height: 2px; background: var(--pt-mint); flex-shrink: 0; }

.pt-titulo {
  margin: 20px 0 22px;
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  font-weight: 800; line-height: .98; letter-spacing: -.035em;
  color: var(--pt-white);
  text-wrap: balance;
}
.pt-titulo em { font-style: normal; color: var(--pt-mint); }

.pt-entradilla {
  margin: 0; max-width: 31em;
  font-size: clamp(1rem, 1.2vw, 1.13rem); line-height: 1.62; font-weight: 400;
  color: var(--pt-texto-2);
  text-wrap: pretty;
}

.pt-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 30px; border-radius: 50px;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.1; letter-spacing: -.005em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s ease-out;
}
.pt-btn:active { transform: scale(.97); }
.pt-btn-mint { background: var(--pt-mint); color: var(--pt-ink); }
.pt-btn-mint:hover { background: var(--pt-mint-dim); }
.pt-btn-borde { background: transparent; color: var(--pt-white); border-color: rgba(255, 255, 255, .42); }
.pt-btn-borde:hover { border-color: var(--pt-mint); background: rgba(18, 227, 188, .08); }

.pt-nota { margin: 14px 0 0; font-size: .86rem; line-height: 1.5; color: var(--pt-texto-3); }

.pt-como {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: 10px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1; color: var(--pt-mint);
}
.pt-como span { transition: transform .3s var(--pt-ease); }
.pt-como:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.pt-como:hover span { transform: translateX(4px); }

.pt-extra:empty { display: none; }
.pt-extra { margin-top: 18px; }

.pt :focus-visible { outline: 3px solid var(--pt-mint); outline-offset: 3px; }
.pt-btn-mint:focus-visible { outline-color: var(--pt-white); box-shadow: 0 0 0 6px var(--pt-mint); }

/* ---------- Escena ---------- */
.pt-escena {
  grid-area: escena; align-self: center;
  position: relative; width: 100%; aspect-ratio: 1.2;
  container-type: inline-size;
  perspective: 1900px; perspective-origin: 50% 30%;
  --px: 0; --py: 0;
}
/* El mundo es plano a propósito: tablero y cartas sueltas no se cortan entre sí (manda el orden del DOM) */
.pt-mundo {
  position: absolute; inset: 0;
  perspective: 1900px; perspective-origin: 50% 30%;
  transform: rotateY(calc(var(--px) * 4deg)) rotateX(calc(var(--py) * -3deg));
}

/* Tablero inclinado que se monta por zonas */
.pt-tablero {
  position: absolute; left: 5%; top: 9%; width: 90%;
  aspect-ratio: 2000 / 1413;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateZ(-7deg);
}
.pt-tablero-base {
  position: absolute; inset: 0; border-radius: 1.4cqw;
  background: rgba(255, 255, 255, .035);
  border: 1.5px dashed rgba(255, 255, 255, .22);
  opacity: 0; transform: translateZ(-40px);
  transition: opacity .8s var(--pt-ease) .15s, transform 1.1s var(--pt-ease) .15s;
}
.pt-tablero-todo, .pt-zona { position: absolute; inset: 0; border-radius: 1.4cqw; overflow: hidden; }
.pt-tablero-todo img, .pt-zona img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.pt-tablero-todo { opacity: 0; transition: opacity .9s ease 1.55s; box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .45); }
.pt-zona { box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .25); }

.pt-zona {
  opacity: 0; transform: translateZ(36px);
  transition: opacity .4s ease, transform .9s var(--pt-ease);
  transition-delay: calc(.45s + var(--i) * .2s);
}
.pt-zona-riesgos { clip-path: polygon(0 0, 50% 0, 50% 33%, 17.5% 33%, 17.5% 39%, 0 39%); }
.pt-zona-evaluacion { clip-path: polygon(50% 0, 100% 0, 100% 39%, 82.5% 39%, 82.5% 33%, 50% 33%); }
.pt-zona-capacidades { clip-path: polygon(17.5% 33%, 82.5% 33%, 82.5% 39%, 85% 39%, 85% 61%, 82.5% 61%, 82.5% 67%, 17.5% 67%, 17.5% 61%, 15% 61%, 15% 39%, 17.5% 39%); }
.pt-zona-dispositivos { clip-path: polygon(0 61%, 17.5% 61%, 17.5% 67%, 50% 67%, 50% 100%, 0 100%); }
.pt-zona-recursos { clip-path: polygon(50% 67%, 82.5% 67%, 82.5% 61%, 100% 61%, 100% 100%, 50% 100%); }

/* Cartas que encajan solas en sus huecos */
.pt-encaja {
  position: absolute; width: 13.922%; height: 28.044%;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translate3d(40%, -55%, 160px) rotate(-16deg);
  transition: opacity .35s ease, transform 1s var(--pt-ease);
  transition-delay: calc(1.75s + var(--i) * .16s);
}
.pt-encaja-in {
  display: block; width: 100%; height: 100%;
  border-radius: 7% / 5%; overflow: hidden; background: #fff;
  box-shadow: 0 .5cqw 1.2cqw rgba(0, 0, 0, .28);
}
.pt-encaja img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Cartas sueltas: abanico que se reparte, se voltea y responde al puntero */
.pt-flot {
  position: absolute; width: 21cqw;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translate3d(var(--dx), var(--dy, 48cqw), 0) rotate(0deg) scale(.82);
  transition: opacity .4s ease, transform 1.1s var(--pt-ease);
  transition-delay: calc(2.35s + var(--i) * .14s);
}
.pt-flot-1 { left: 31%; top: 49%; --r: -11deg; --dx: 22cqw; --prof: 1.2; --z: 40px; }
.pt-flot-2 { left: 51%; top: 45%; --r: 1deg;   --dx: 2cqw;  --prof: 1.8; --z: 70px; }
.pt-flot-3 { left: 71%; top: 50%; --r: 12deg;  --dx: -18cqw; --prof: 1.4; --z: 50px; }
.pt-flot-par {
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--px) * var(--prof) * -1cqw), calc(var(--py) * var(--prof) * -1cqw), var(--z));
}

.pt-carta {
  --tx: 0; --ty: 0;
  position: relative; display: block; width: 100%; aspect-ratio: 300 / 424;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  border-radius: 7% / 5%;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty) * -9deg)) rotateY(calc(var(--tx) * 11deg));
  transition: transform .45s var(--pt-ease);
  -webkit-tap-highlight-color: transparent;
}
.pt-carta-in {
  position: absolute; inset: 0; display: block;
  transform-style: preserve-3d;
  transition: transform .85s var(--pt-ease);
}
.pt-carta.pt-vuelta .pt-carta-in { transform: rotateY(180deg); }
.pt-cara {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  border-radius: 7% / 5%; background: #fff;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 1.6cqw 3.4cqw rgba(0, 0, 0, .42), 0 .3cqw .8cqw rgba(0, 0, 0, .25);
  user-select: none; -webkit-user-drag: none;
}
.pt-cara-r { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .pt-carta:hover { transform: translateY(-1.6cqw) rotateX(calc(var(--ty) * -9deg)) rotateY(calc(var(--tx) * 11deg)) scale(1.04); }
}
.pt-carta:focus-visible { outline-offset: 5px; }

/* Pista */
.pt-pista {
  position: absolute; left: 4%; bottom: 0; margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; color: var(--pt-texto-3);
  transition: opacity .6s ease;
}
.pt-pista-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--pt-mint); box-shadow: 0 0 0 0 rgba(18, 227, 188, .5); }
.pt-fin .pt-pista-punto { animation: ptSonar 2.4s ease-out infinite; }
@keyframes ptSonar { 0% { box-shadow: 0 0 0 0 rgba(18, 227, 188, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(18, 227, 188, 0); } }

/* ---------- Entrada ---------- */
.pt-ap { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform 1s var(--pt-ease); transition-delay: calc(.1s + var(--a) * .09s); }
.pt-pista.pt-ap { transition-delay: 3.4s; }
.pt-on .pt-ap { opacity: 1; transform: none; }
.pt-on .pt-tablero-base { opacity: 1; transform: none; }
.pt-on .pt-tablero-todo { opacity: 1; }
.pt-on .pt-zona { opacity: 1; transform: none; }
.pt-on .pt-encaja { opacity: 1; transform: none; }
.pt-on .pt-flot { opacity: 1; transform: rotate(var(--r)); }
.pt-pista.pt-pista-usada { opacity: 0; }
/* tras la entrada, las cartas reaccionan rápido al puntero (sin retrasos heredados) */
.pt-fin .pt-flot { transition: transform .6s var(--pt-ease); transition-delay: 0s; }

/* ---------- Versión quieta ---------- */
.pt-quieta *, .pt-quieta *::before, .pt-quieta *::after { transition: none !important; animation: none !important; }
.pt-quieta .pt-carta, .pt-quieta .pt-carta:hover { transform: none; }
.pt-quieta .pt-mundo { transform: none; }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 900px) {
  .pt-marco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "cab" "escena" "texto";
    padding: 16px 20px 72px;
  }
  .pt-logo { height: 26px; }
  .pt-escena { width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 1.42; margin-top: 4px; }
  .pt-tablero { left: 6%; top: 2%; width: 88%; }
  .pt-flot { width: 19cqw; --dy: 22cqw; }
  .pt-flot-1 { left: 33%; top: 44%; }
  .pt-flot-2 { left: 52%; top: 40%; }
  .pt-flot-3 { left: 71%; top: 45%; }
  .pt-pista { left: auto; right: 2%; bottom: -2px; font-size: .78rem; }
  .pt-texto { align-self: start; padding: 18px 0 0; max-width: 560px; justify-self: center; width: 100%; }
  .pt-titulo { margin: 14px 0 14px; font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .pt-entradilla { font-size: 1rem; line-height: 1.55; }
  .pt-acciones { margin-top: 22px; gap: 10px; }
  .pt-btn { flex: 1 1 auto; min-height: 52px; padding: 0 22px; }
  .pt-nota { margin-top: 10px; }
  .pt-como { margin-top: 4px; }
}
@media (max-width: 380px) {
  .pt-btn { font-size: .95rem; padding: 0 16px; }
}