/* ============================================================
   Página Esencial · Showcase de las 4 demos
   Extiende el sistema de tokens de pe-landing.css (3 capas):
   aquí solo capa 3 (componente) + los primitivos nuevos que la
   paleta de la casa no trae (los oscuros del portátil).
   Piezas adaptadas a HTML/CSS/JS vanilla (todas MIT):
   · "Macbook Scroll" de Aceternity UI
     https://ui.aceternity.com/registry/macbook-scroll.json
   · "3D Marquee" de Aceternity UI
     https://ui.aceternity.com/registry/3d-marquee.json
   · "Tilt Card" de beUI
     https://beui.dev/r/tilt-card.json
   El "browser chrome" es dibujo propio (referencia visual:
   "Browser" de Watermelon UI — https://ui.watermelon.sh).
   Iconos: glifos auténticos de Iconoir (MIT).
   ============================================================ */

/* ---- capa 1 (primitivos nuevos): rampa de negros cálidos del portátil
   y ternas RGB para sombras con alfa. Los únicos valores crudos. ---- */
.pe-demos {
  --nb-900: #12100c;   /* bisel y teclas */
  --nb-800: #1c1813;   /* base del portátil */
  --nb-700: #2a241d;   /* aluminio oscuro */
  --nb-600: #393129;   /* aluminio iluminado */
  --rgb-sombra-negra: 20, 14, 8;
  --rgb-papel: 243, 233, 214;
  --rgb-blanco-calido: 255, 253, 247;
}

/* ---- capa 3: tokens del showcase ---- */
.pe-demos {
  --pe-show-pantalla-h: clamp(15rem, 30vw, 21.25rem);
  --pe-show-radio: .9rem;
  --pe-show-mb-bisel: var(--nb-900);    /* pantalla apagada */
  --pe-show-mb-cuerpo: var(--nb-700);   /* aluminio oscuro del portátil */
  --pe-show-mb-tecla: var(--nb-900);
  --pe-show-mb-sombra: 0 2.5em 5em -.8em rgba(var(--rgb-sombra-negra), .5);
  --pe-show-muro-op: .13;
  --pe-show-velo: var(--pe-fondo);
}

.pe-demos { position: relative; }

/* ============ muro 3D ambiental (puro CSS) ============ */
.pe-muro-fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  perspective: 1200px;
}
.pe-muro {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(1500px, 230%);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2.2rem);
  transform: translate(-50%, -50%) rotateX(55deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  opacity: var(--pe-show-muro-op);
}
.pe-muro-col {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  animation: pe-muro-baja 17s ease-in-out infinite alternate;
  will-change: transform;
}
.pe-muro-col:nth-child(even) {
  animation: pe-muro-sube 13s ease-in-out infinite alternate;
}
.pe-muro-col img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: .8rem;
  display: block;
}
@keyframes pe-muro-baja {
  from { transform: translateY(-4rem); }
  to   { transform: translateY(4rem); }
}
@keyframes pe-muro-sube {
  from { transform: translateY(4rem); }
  to   { transform: translateY(-4rem); }
}
/* velo de papel: el muro se funde arriba y abajo */
.pe-muro-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--pe-show-velo) 12%,
    transparent 26%,
    transparent 64%,
    var(--pe-show-velo) 88%,
    transparent 100%);
}
.pe-demos > *:not(.pe-muro-fondo) { position: relative; z-index: 1; }

/* ============ momento cinematográfico: el portátil ============ */
.pe-cine-epigrafe {
  text-align: center;
  color: var(--pe-texto-sec);
  font-size: var(--fs-base);
  max-width: 37rem;
  margin: clamp(2.2rem, 5vw, 3.6rem) auto 0;
}
.pe-cine-epigrafe strong { color: var(--pe-texto); font-weight: 600; }
.pe-cine-escena { position: relative; }
/* escena alta solo cuando el JS va a coreografiarla (sin JS: compacta) */
.pe-cine-escena.pe-cine-anim { height: 160vh; }
.pe-cine-sticky {
  /* el JS la fija (fixed) mientras la escena cruza la ventana;
     position:sticky no prende con el overflow del tema de la casa */
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pe-mb {
  font-size: min(13px, 1.45vw, 1.9vh);
  width: 58em;
  margin: 0 auto;
  perspective: 90em; /* la tapa (hija) gira con profundidad real */
}
/* tapa + pantalla */
.pe-mb-tapa {
  position: relative;
  height: 37em;
  padding: .9em;
  background: linear-gradient(180deg, var(--nb-800) 0%, var(--nb-900) 100%);
  border-radius: 1.5em 1.5em .5em .5em;
  box-shadow:
    0 0 0 .12em rgba(var(--rgb-sombra-negra), .55),
    0 3em 6em -2em rgba(var(--rgb-sombra-negra), .45);
  transform-origin: 50% 100%;
  will-change: transform;
}
.pe-mb-cam {
  position: absolute;
  top: .42em;
  left: 50%;
  transform: translateX(-50%);
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--nb-900);
  box-shadow: inset 0 0 .2em var(--nb-900);
  z-index: 2;
}
.pe-mb-pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: .8em;
  background: var(--pe-show-mb-bisel);
}
.pe-mb-pantalla img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}
/* base: teclado sugerido + trackpad */
.pe-mb-deck {
  position: relative;
  height: 19em;
  margin: 0 1.5em;
  padding: 1.4em 1.6em;
  display: grid;
  grid-template-columns: 7em 1fr 7em;
  gap: 1.2em;
  background: linear-gradient(180deg, var(--nb-600) 0%, var(--nb-800) 60%, var(--nb-900) 100%);
  border-radius: .3em .3em 1.8em 1.8em;
  box-shadow: 0 2.5em 4em -1.5em rgba(var(--rgb-sombra-negra), .5);
}
.pe-mb-altavoz {
  border-radius: .5em;
  background-image: radial-gradient(circle, var(--nb-900) .32em, transparent .38em);
  background-size: 1.05em 1.05em;
  background-position: center;
}
.pe-mb-teclas {
  border-radius: .5em;
  background:
    repeating-linear-gradient(to right,
      transparent 0 2.05em, rgba(var(--rgb-sombra-negra), .6) 2.05em 2.2em),
    repeating-linear-gradient(to bottom,
      transparent 0 1.42em, rgba(var(--rgb-sombra-negra), .6) 1.42em 1.56em),
    linear-gradient(180deg, var(--nb-900), var(--nb-900));
  box-shadow:
    inset 0 0 0 .18em rgba(var(--rgb-papel), .05),
    inset 0 .3em .8em rgba(var(--rgb-sombra-negra), .55);
}
.pe-mb-trackpad {
  position: absolute;
  left: 50%;
  bottom: 1.1em;
  transform: translateX(-50%);
  width: 13em;
  height: 7.5em;
  border-radius: .7em;
  background: var(--nb-800);
  box-shadow:
    inset 0 .25em .6em rgba(var(--rgb-sombra-negra), .65),
    0 .12em 0 rgba(var(--rgb-papel), .06);
}
.pe-cine-pie { text-align: center; margin: 1.4rem 0 0; }
.pe-cine-pie a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--pe-acento-texto);
  font-size: var(--fs-base);
  text-underline-offset: .22em;
}
.pe-cine-pie a:hover { color: var(--pe-acento); }
.pe-cine-pie svg { width: 1.05em; height: 1.05em; }

/* ============ las 4 ventanas de navegador ============ */
.pe-ventanas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-top: clamp(2.6rem, 6vw, 4.6rem);
}
@media (max-width: 46rem) {
  .pe-ventanas { grid-template-columns: 1fr; }
}
.pe-ventana {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--pe-show-radio);
  background: var(--pe-tarjeta);
  border: 1px solid var(--pe-borde);
  box-shadow: var(--pe-sombra);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  will-change: transform;
  transition: box-shadow .5s ease;
}
.pe-ventana:hover {
  box-shadow:
    0 2px 4px rgba(var(--rgb-sombra-negra), .08),
    0 34px 70px -28px rgba(var(--rgb-sombra-negra), .4);
}
.pe-ventana:focus-visible {
  outline: 3px solid var(--pe-acento);
  outline-offset: 5px;
}
/* brillo que sigue al cursor (patrón Tilt Card de beUI) */
.pe-v-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
    rgba(var(--rgb-blanco-calido), .9), transparent 60%);
  mix-blend-mode: soft-light;
}
/* cromo del navegador: semáforos, pestaña y barra de dirección */
.pe-v-cromo {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .95rem;
  background: var(--pe-crema);
  border-bottom: 1px solid var(--pe-borde);
}
.pe-v-semaforos { display: flex; gap: .45rem; flex: none; }
.pe-v-semaforos i {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  display: block;
}
.pe-v-semaforos i:nth-child(1) { background: var(--pe-terracota); }
.pe-v-semaforos i:nth-child(2) { background: var(--pe-oxido); }
.pe-v-semaforos i:nth-child(3) { background: var(--pe-suave); }
.pe-v-pestana {
  flex: none;
  max-width: 11rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-kicker);
  color: var(--pe-texto);
  background: var(--pe-papel);
  border: 1px solid var(--pe-borde);
  border-bottom: none;
  border-radius: .5rem .5rem 0 0;
  padding: .32rem .95rem;
  margin-bottom: -.71rem;
  align-self: flex-end;
}
.pe-v-url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-tiny);
  color: var(--pe-texto-sec);
  background: var(--pe-papel);
  border: 1px solid var(--pe-borde);
  border-radius: 2rem;
  padding: .34rem .95rem;
}
.pe-v-url svg { width: 1em; height: 1em; flex: none; }
.pe-v-url span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* pantalla: la captura hace scroll por dentro al pasar el cursor */
.pe-v-pantalla {
  position: relative;
  height: var(--pe-show-pantalla-h);
  overflow: hidden;
  background: var(--pe-papel);
}
.pe-v-pantalla img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pe-v-pantalla img { transition: transform 1.6s cubic-bezier(.25, .7, .25, 1); }
  .pe-ventana:hover .pe-v-pantalla img {
    transform: translateY(calc(-100% + var(--pe-show-pantalla-h)));
    transition: transform 18s linear;
  }
  .pe-ventana:hover .pe-v-glare { opacity: .45; }
}
.pe-ventana:focus-visible .pe-v-pantalla img {
  transform: translateY(calc(-100% + var(--pe-show-pantalla-h)));
  transition: transform 18s linear;
}
/* pie de la ventana */
.pe-v-pie {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1.3rem;
}
.pe-v-nombre {
  font-family: 'IM Fell English', 'EB Garamond', serif;
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.pe-v-quien {
  color: var(--pe-texto-sec);
  font-style: italic;
  font-size: var(--fs-small);
}
.pe-v-abrir {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--pe-acento-texto);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.pe-v-abrir svg { width: 1.05em; height: 1.05em; }
.pe-ventana:hover .pe-v-abrir { text-decoration: underline; text-underline-offset: .22em; }

/* ============ movimiento reducido: todo quieto, todo visible ============ */
@media (prefers-reduced-motion: reduce) {
  .pe-muro-col { animation: none; }
  .pe-v-pantalla img { transition: none; }
  .pe-ventana:focus-visible .pe-v-pantalla img { transform: none; }
  .pe-v-glare { display: none; }
}