/* ==========================================================================
   StoreGCH — Seccion "Miralo de cerca"
   Laptop construida con HTML + CSS 3D (divs y transforms). Cero imagenes.
   La abre el scroll via GSAP + ScrollTrigger (assets/js/closer-look.js).
   Archivo independiente: no toca ningun estilo de la plantilla Electro.

   ---------------------------------------------------------------------------
   SISTEMA DE COORDENADAS (leer esto antes de tocar los angulos)
   ---------------------------------------------------------------------------
   El eje Y de CSS apunta hacia ABAJO, asi que los signos son poco intuitivos.
   En este archivo la convencion es:

     .cl-laptop   rotateX(--camera-x)   NEGATIVO = la camara mira desde arriba
                                        (0 = a la altura de los ojos)
     .cl-base     rotateX(90deg)        fija: acuesta la base sobre el piso,
                                        con la bisagra como eje
     .cl-lid      rotateX(--lid-angle)  -90deg = cerrada (apoyada sobre el
                                        teclado), 0 = parada, +15 = abierta
                                        e inclinada hacia atras

   La bisagra es la linea donde termina .cl-laptop y empieza .cl-base.
   Tapa y base miden lo mismo de profundidad, asi que cerrada calza exacta.
   ========================================================================== */

.closer-look {
  /* =====================================================================
     VARIABLES PARA TUNEAR
     ===================================================================== */

  /* ---- Geometria ----
     Todo lo que tiene un tamanio fisico (espesores, radios, notch, barra de
     menu) va en em, y .cl-laptop define 1em = --lw/88. O sea: 1em son 10px
     cuando la laptop mide 880px de ancho, y todo encoge con ella.
     Antes eran px fijos y en el celular —donde la laptop mide ~340— el notch,
     la barra de menu y los radios salian al triple del tamanio que les toca.
     (No se puede hacer con una variable de escala: `px * longitud` es
     invalido en CSS, y em es la unica unidad que multiplica de verdad.) */
  --lw: min(880px, 62vw, calc((100vh - 250px) * 1.18));  /* ancho de la laptop */
  --ld: .708;             /* profundidad / ancho (MacBook Pro real: 221/312) */
  --lid-h: calc(var(--lw) * var(--ld));         /* alto de la tapa = profundidad de la base */
  /* --thick, --lid-lift, --lid-thick y --r viven en .cl-laptop, que es donde
     el em ya vale lo que tiene que valer. */

  /* ---- Angulos ---- */
  --lid-closed: -90deg;   /* tapa cerrada. No lo toques: -90 es lo que la deja plana */
  --lid-open: 15deg;      /* tapa abierta. MAS GRANDE = se abre mas */
  --cam-start: -30deg;    /* camara al empezar. Mas negativo = mas desde arriba */
  --cam-end: -4deg;       /* camara al final. 0 = de frente, a la altura de los ojos */
  /* Proporcional al equipo, no en px absolutos: asi la perspectiva se siente
     igual en el celular que en el escritorio. Con 2400px fijos, la laptop
     chica quedaba casi ortografica (plana, sin volumen). */
  --persp: calc(var(--lw) * 2.73);

  /* ---- Estado en vivo: lo escribe GSAP en cada frame ---- */
  --lid-angle: -90deg;
  --camera-x: -22deg;
  --scale: .92;
  --fit: 1;               /* achique automatico si no entra. Lo escribe el JS */
  --power: 0;             /* 0 = pantalla apagada, 1 = encendida */
  --shadow-x: 1;
  --shadow-o: .55;
  --trazo: 0;             /* 0 = sin escribir, 1 = "store gch" completo */
  --rise: -.75;           /* centrado vertical, en fracciones de --lid-h. Lo escribe el JS */

  /* ---- Aluminio ---- */
  --alu-hi: #464a50;      /* brillo del chaflan */
  --alu-1: #3a3d42;
  --alu-2: #2a2c30;
  --alu-3: #1a1b1e;
  --key: #17181a;

  /* ---- Marca ---- */
  --accent: #FFC400;

  /* =====================================================================
     /VARIABLES
     ===================================================================== */

  position: relative;
  /* full-bleed: rompe cualquier contenedor de la plantilla */
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  background: #000;
  color: #f5f5f7;
  overflow: hidden;
  isolation: isolate;
}

.closer-look * { box-sizing: border-box; }

/* ---------- Escenario pegado ---------- */
.cl-sticky {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 34px 24px;
}

.cl-head {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.cl-head h2 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.02;
  color: #fff;
}

.cl-link {
  font-size: 14px;
  font-weight: 600;
  color: #a1a1a8;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.cl-link:hover { color: #fff; border-color: var(--accent); text-decoration: none; }

/* ---------- Panel ---------- */
.cl-panel {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  /* Un degrade muy suave en vez de un plano: sobre #0e0e0e liso una sombra
     negra no se ve (queda #050505 contra #0e0e0e y no lo registra el ojo). */
  background: radial-gradient(92% 76% at 50% 40%, #17181c 0%, #0e0e0e 58%, #0a0a0b 100%);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.06);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 26px;
  overflow: hidden;
}

/* ---------- Pills ----------
   .cl-features es la columna (pills + leyenda). .cl-pillrow envuelve solo los
   botones: en el celular es el que scrollea de costado, y asi la leyenda se
   queda quieta abajo en vez de irse con el scroll horizontal. */
.cl-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  z-index: 2;
}

.cl-pillrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.cl-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-align: left;
  background: rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 9px 18px 9px 9px;
  cursor: pointer;
  opacity: 0;                       /* GSAP las hace entrar */
  transition: background .2s ease, border-color .2s ease;
}
.cl-pill:hover { background: rgba(255,255,255,.13); }
.cl-pill { -webkit-tap-highlight-color: transparent; }
.cl-pill:focus { outline: none; }
.cl-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.cl-pill[aria-pressed="true"] {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.26);
}

.cl-pill span {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
}
.cl-pill[aria-pressed="true"] span { background: var(--accent); color: #111; transform: rotate(45deg); }

.cl-caption {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8a8a91;
  min-height: 2.6em;
  max-width: 250px;
  opacity: 0;                       /* entra junto con las pills */
}

/* ---------- La firma escrita a mano ----------
   Va SOBRE la pantalla, encima del wallpaper: es donde Apple escribe su
   hello, y es el unico lugar del panel con espacio y contraste propios
   (detras del equipo quedaba tapada por la laptop y por las pills).

   Se dibuja con stroke-dashoffset. Con pathLength="1" el offset va de 1
   (nada) a 0 (completo) sin importar cuanto mida cada trazo en realidad.

   --trazo (0 a 1) lo escribe el JS. Aca se reparte entre los tres trazos
   segun el LARGO REAL de cada uno (3899 / 182 / 3199 unidades), no en partes
   iguales: si no, el travesano se dibujaria lentisimo y la mano se notaria
   frenar. Asi el lapiz parece levantarse y seguir a velocidad pareja. */
.cl-write {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 72%;
  height: auto;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.35));
}
.cl-write path {
  fill: none;
  stroke: #fff;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
/* ---- Modo fuente ----
   Cuando la firma sale de una fuente de verdad (tools/texto-a-trazo.py), los
   glifos son contornos RELLENOS, no una linea de grosor constante: no hay
   nada que "dibujar" con stroke-dashoffset. Entonces se revela de izquierda
   a derecha, con el borde inclinado hacia adelante como la punta de una
   lapicera, que es lo que hace que se lea como escritura y no como cortina. */
.cl-write.is-fuente path {
  fill: #fff;
  stroke: none;
}
.cl-write.is-fuente {
  clip-path: polygon(
    -30% -30%,
    calc(var(--trazo) * 132% - 2%) -30%,
    calc(var(--trazo) * 132% - 14%) 130%,
    -30% 130%
  );
}

.cl-w1 { stroke-dashoffset: calc(1 - clamp(0, calc(var(--trazo) / 0.536), 1)); }
.cl-wt { stroke-dashoffset: calc(1 - clamp(0, calc((var(--trazo) - 0.536) / 0.025), 1)); }
.cl-w2 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--trazo) - 0.561) / 0.439), 1)); }

/* ---------- Escenario 3D ---------- */
.cl-stage {
  position: relative;
  z-index: 1;                 /* la laptop siempre por delante de la firma */
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--persp);
  perspective-origin: 50% 50%;
}

/* Luz ambiente: cuando la pantalla enciende, tinta todo el escenario.
   Va antes que la laptop en el orden de pintado, asi queda detras. */
.cl-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 86%;
  height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(70,120,220,.30), rgba(90,60,190,.12) 45%, transparent 72%);
  opacity: var(--power);
  pointer-events: none;
}

.cl-laptop {
  position: relative;
  width: var(--lw);
  height: var(--lid-h);
  /* LA ESCALA DEL EQUIPO. 1em = 10px cuando la laptop mide 880px de ancho.
     Todos los espesores y radios de aca para abajo van en em y encogen con
     ella. No hay texto adentro de la laptop, asi que no afecta a nada mas. */
  font-size: calc(var(--lw) / 88);
  --thick: 1.5em;      /* espesor del cuerpo: el labio del frente */
  --lid-lift: .8em;    /* cuanto flota la tapa sobre el teclado al cerrar */
  --lid-thick: .9em;   /* espesor del canto de la tapa */
  --r: 1.4em;          /* radio de las esquinas del chasis */
  transform-style: preserve-3d;
  /* --rise recentra el conjunto: cerrada, todo lo que se ve cae POR DEBAJO
     de la bisagra; abierta, casi todo queda por encima. Sin esto la laptop
     se va del panel en la mitad del recorrido. */
  transform: translateY(calc(var(--lid-h) * var(--rise)))
             rotateX(var(--camera-x))
             scale(calc(var(--scale) * var(--fit)));
}
.closer-look.is-live .cl-laptop,
.closer-look.is-live .cl-lid { will-change: transform; }

/* ---------- Tapa ---------- */
.cl-lid {
  position: absolute;
  left: 0;
  bottom: 0;                 /* el borde de abajo es la bisagra */
  width: 100%;
  height: var(--lid-h);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  /* el translateZ despega la tapa del teclado para que no se peleen los
     dos planos cuando esta cerrada (z-fighting) */
  transform: rotateX(var(--lid-angle)) translateZ(calc(var(--lid-lift) * -1));
}

/* Las dos caras de la tapa. backface-visibility hace que solo se vea la que
   mira a la camara: carcasa cuando esta cerrada, pantalla cuando se abre. */
.cl-screen,
.cl-lid-back {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

/* Cara externa: aluminio + logo */
.cl-lid-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(145deg, var(--alu-hi) 0%, var(--alu-1) 22%, var(--alu-2) 60%, var(--alu-3) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 2px 14px rgba(255,255,255,.05);
  display: grid;
  place-items: center;
}
/* El logo va en SVG inline: no es un asset externo (no hay pedido al
   servidor) y escala sin pixelarse cuando la tapa se acerca a la camara.
   En la MacBook real es un inserto espejado, asi que va apenas mas claro
   que el aluminio, no blanco. */
.cl-logo {
  width: 9.5%;
  height: auto;
  fill: rgba(255,255,255,.14);
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.10));
  /* Al cerrarse, la tapa queda dada vuelta respecto de la camara, asi que
     el logo saldria de cabeza. En la MacBook real pasa lo mismo (se lee
     derecho para el que esta enfrente, con la tapa abierta), pero aca la
     tapa cerrada es el primer cuadro y se leeria como un error. */
  transform: rotate(180deg);
}

/* Canto de la tapa.
   Sin esto, con la tapa entreabierta la laptop se lee como dos placas de
   papel flotando. El -90deg lo pone perpendicular a la tapa, colgando del
   borde libre hacia el lado del teclado. */
.cl-lid-edge {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: var(--lid-thick);
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  border-radius: 0.4em 0.4em 0 0;
  background: linear-gradient(180deg, var(--alu-3), var(--alu-1));
}

/* Cara interna: el marco negro y la pantalla */
.cl-screen {
  background: #0a0a0b;
  /* El halo va en box-shadow y no en filter: filter aplanaria el contexto
     3D de la tapa y romperia el truco de las dos caras. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 calc(4.6em * var(--power)) rgba(80,130,230, calc(.45 * var(--power))),
    0 0 calc(11em * var(--power)) rgba(120,80,210, calc(.28 * var(--power)));
  padding: 1.4%;
}

/* Reflejo del vidrio. Va sobre .cl-screen y no sobre .cl-display para que
   no lo apague el filtro de brillo: asi la pantalla apagada sigue leyendose
   como un panel de vidrio y no como un rectangulo negro vacio. */
.cl-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: linear-gradient(118deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 34%, rgba(255,255,255,0) 58%);
  pointer-events: none;
  z-index: 3;
}

.cl-display {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.7em;
  background: #000;
  overflow: hidden;
  /* el brillo va de apagada (.2) a encendida (1) siguiendo --power */
  filter: brightness(calc(.2 + .8 * var(--power)));
}

/* Wallpaper estilo macOS: solo gradientes + blur, ni una imagen.
   Vive en su propia capa compuesta (will-change) para que el blur se
   calcule una vez y no en cada frame: lo unico que anima es la opacidad.

   El fondo son manchones de color; las cintas diagonales que las cruzan
   salen de los dos pseudo-elementos, que es la unica forma de inclinar un
   degrade (radial-gradient no se puede rotar). */
.cl-wallpaper {
  position: absolute;
  inset: -12%;                /* se pasa del borde para que el blur no deje halo */
  opacity: var(--power);
  will-change: opacity;
  background:
    radial-gradient(64% 52% at 20% 24%, rgba(46,120,232,.55), transparent 64%),
    radial-gradient(58% 48% at 84% 32%, rgba(126,62,214,.52), transparent 66%),
    radial-gradient(76% 58% at 56% 94%, rgba(16,152,166,.46), transparent 70%),
    linear-gradient(165deg, #0a1b3d 0%, #0b0d24 56%, #05050c 100%);
  filter: blur(3em);
}

.cl-wallpaper::before,
.cl-wallpaper::after {
  content: "";
  position: absolute;
  inset: -45%;                /* de sobra, asi la rotacion no deja esquinas vacias */
}
.cl-wallpaper::before {
  transform: rotate(-24deg);
  background: linear-gradient(180deg,
    transparent 24%,
    rgba(34,196,208,.42) 32%,
    rgba(60,120,240,.40) 39%,
    transparent 47%,
    transparent 55%,
    rgba(150,70,220,.38) 62%,
    rgba(226,84,150,.34) 69%,
    transparent 77%);
}
.cl-wallpaper::after {
  transform: rotate(15deg);
  background: linear-gradient(180deg,
    transparent 41%,
    rgba(240,166,90,.26) 49%,
    rgba(226,84,150,.20) 55%,
    transparent 63%);
}

/* Barra de menu. Va a la misma altura que el notch, como en la MacBook
   real, donde el notch cae justo en el medio de la barra. */
.cl-menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.8em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 1em;
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(0.6em);
  backdrop-filter: blur(0.6em);
  opacity: var(--power);
  z-index: 1;
}
.cl-menubar svg {
  height: 1.1em;
  width: auto;
  fill: rgba(255,255,255,.9);
}
.cl-menubar i {            /* los iconitos de la derecha */
  width: 0.9em;
  height: 0.5em;
  border-radius: 0.2em;
  background: rgba(255,255,255,.55);
}
.cl-menubar i:first-of-type { margin-left: auto; }

.cl-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 9em;
  height: 1.8em;
  max-width: 24%;
  background: #000;
  border-radius: 0 0 0.8em 0.8em;
  z-index: 2;
}

/* ---------- Cuerpo ---------- */
.cl-base {
  position: absolute;
  left: 0;
  top: 100%;                 /* arranca justo en la bisagra */
  width: 100%;
  height: var(--lid-h);      /* misma profundidad que la tapa: cierra exacto */
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  transform: rotateX(90deg); /* acostada sobre el piso */
  border-radius: 0 0 var(--r) var(--r);
  background:
    linear-gradient(180deg, var(--alu-3) 0%, var(--alu-2) 3%, var(--alu-1) 42%, var(--alu-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* La bisagra: franja oscura pegada al borde de atras del cuerpo, para que
   no se vea el corte entre tapa y base. */
.cl-hinge {
  position: absolute;
  top: 0;
  left: 4%;
  width: 92%;
  height: 0.6em;
  border-radius: 0 0 0.3em 0.3em;
  background: linear-gradient(180deg, #6a6f76 0%, #33363b 45%, #08090a 100%);
}

.cl-keyboard {
  position: absolute;
  top: 9%;
  left: 7%;
  width: 86%;
  height: 42%;
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: .55%;
  padding: 1.1%;
  background: #0d0e10;
  border-radius: 0.6em;
  box-shadow: inset 0 0.1em 0.5em rgba(0,0,0,.75);
}
.cl-key {
  background: var(--key);
  border-radius: 0.3em;
  box-shadow: 0 0.1em 0 rgba(0,0,0,.85),
              inset 0 0.1em 0 rgba(255,255,255,.05);
  /* Retroiluminacion: sube con la pantalla y solo si la tapa esta abierta,
     igual que el reflejo del teclado. Es lo que hace que el equipo se lea
     "encendido" y no solo iluminado desde arriba. */
  background-image: radial-gradient(120% 140% at 50% 120%,
    rgba(190,210,255, calc(.13 * var(--power) * var(--abierta))), transparent 70%);
}

.cl-trackpad {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 30%;
  border-radius: 0.7em;
  background: linear-gradient(180deg, #45484e, #383b40);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07),
              inset 0 0.2em 0.8em rgba(0,0,0,.35);
}

/* Sombra que proyecta la tapa sobre el teclado.
   Se encoge desde la bisagra a medida que la tapa se levanta: con la tapa
   casi cerrada tapa todo el cuerpo, abierta queda apenas un apoyo oscuro
   contra la bisagra. */
.cl-cast {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  transform: scaleY(calc(1 - .78 * var(--abierta)));
  background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.6) 52%, rgba(0,0,0,0) 100%);
  opacity: calc(1 - .55 * var(--abierta));
  border-radius: 0 0 var(--r) var(--r);
  pointer-events: none;
}

/* La luz que tira la pantalla encendida sobre el teclado.
   Necesita las dos cosas: que este prendida Y que este abierta. */
.cl-spill {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(140,175,255,.34) 0%, rgba(120,150,255,.10) 38%, transparent 68%);
  opacity: calc(var(--power) * var(--abierta));
  border-radius: 0 0 var(--r) var(--r);
  pointer-events: none;
}

/* Labio delantero: le da espesor real al cuerpo.
   Rota -90 sobre la base (que ya esta a +90), o sea queda vertical otra vez,
   colgando del borde de adelante. */
.cl-lip {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--thick);
  transform-origin: 50% 0%;
  transform: rotateX(-90deg);
  border-radius: 0 0 0.8em 0.8em;
  background: linear-gradient(180deg, var(--alu-1), var(--alu-3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.cl-lip::after {              /* la muesca para abrir la tapa */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16%;
  height: 55%;
  border-radius: 0 0 0.6em 0.6em;
  background: rgba(0,0,0,.45);
}

/* ---------- Sombra en el piso ----------
   Coplanar con la base (mismo rotateX 90), corrida 2px hacia abajo para que
   no se peleen. Sin filter: el degrade ya viene suave, y asi no rompe el 3D. */
.cl-shadow {
  position: absolute;
  left: -22%;
  top: 100%;
  width: 144%;
  height: calc(var(--lid-h) * 1.25);
  transform-origin: 50% 0%;
  transform: rotateX(90deg) translateZ(-0.2em) scaleX(var(--shadow-x));
  opacity: var(--shadow-o);
  background:
    radial-gradient(ellipse 26% 24% at 50% 38%, rgba(0,0,0,.98), rgba(0,0,0,0) 74%),
    radial-gradient(ellipse 44% 40% at 50% 44%, rgba(0,0,0,.6), rgba(0,0,0,0) 78%);
  pointer-events: none;
}

/* Contacto: la linea oscura justo debajo del equipo. Es lo que hace que
   se vea APOYADO y no flotando. Va pegada al labio, no difusa. */
.cl-contacto {
  position: absolute;
  left: 6%;
  top: 100%;
  width: 88%;
  height: 2.6em;
  transform-origin: 50% 0;
  transform: rotateX(90deg) translateZ(-0.1em);
  background: radial-gradient(ellipse 50% 62% at 50% 0%, rgba(0,0,0,.9), rgba(0,0,0,0) 72%);
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* El limite ya no es el ancho: con --fit midiendo contra el escenario, el
     cuerpo abierto se proyecta ~15% mas ancho que la tapa y era eso lo que
     achicaba todo. Le damos mas margen a lo ancho (96vw) y sacamos el
     descuento fijo de alto, que dejaba media pantalla vacia arriba y abajo. */
  .closer-look { --lw: min(620px, 96vw, calc((100svh - 210px) * 1.25)); }

  .cl-sticky {
    /* svh, no vh: en iOS la barra de direcciones se esconde al scrollear y
       con 100vh el alto cambiaba en el medio de la animacion, lo que hacia
       saltar el pin. svh es el alto chico y no se mueve. */
    min-height: 100svh;
    padding: 18px 14px;
    gap: 12px;
  }

  .cl-head {
    align-items: center;
    gap: 4px 12px;
  }
  .cl-head h2 { font-size: clamp(26px, 7.4vw, 40px); }
  .cl-link { font-size: 13px; }

  /* El panel deja de estirarse hasta el borde y toma el alto de lo que
     tiene adentro. Estirado dejaba media pantalla de card vacia arriba y
     abajo del equipo, porque en vertical lo que limita el tamanio de la
     laptop es el ANCHO, no el alto. */
  .cl-panel {
    flex: 0 1 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: 12px 0 14px;
    border-radius: 20px;
    gap: 10px;
  }

  /* las pills pasan abajo, en scroll horizontal, con la leyenda fija debajo */
  .cl-features {
    grid-row: 2;
    align-self: stretch;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
  }

  .cl-pillrow {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    /* Sin esto hereda el align-items:flex-start y, en un contenedor con
       scroll horizontal, cualquier centrado deja las primeras pills
       inalcanzables: la fila arranca ya scrolleada. */
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 14px;
    gap: 8px;
    /* Difumina los dos extremos: es la unica pista de que la fila sigue.
       Antes la pill del borde se cortaba en seco y se leia como un bug. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .cl-pillrow::-webkit-scrollbar { display: none; }

  .cl-pill {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 7px 14px 7px 7px;
    gap: 8px;
  }
  .cl-pill span { width: 20px; height: 20px; font-size: 13px; }

  /* La leyenda vuelve: sin ella, tocar una pill en el celular no hacia nada
     visible y los botones quedaban de adorno. Una sola linea, centrada. */
  .cl-caption {
    display: block;
    margin: 0;
    padding: 0 16px;
    max-width: none;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
    min-height: 2.7em;
  }

  /* Alto fijo y proporcional al ancho.
     Con la camara bajando temprano, la pose mas alta de toda la animacion
     mide 0.74 de alto por cada 1 de ancho (medido), asi que al escenario le
     alcanza con ~0.68vw. Le dejamos 84vw: sobra margen para que el alto no
     sea nunca lo que limita el tamanio —si lo fuera, el equipo se achicaria
     y no habria forma de que llenara el ancho— y de paso se va el hueco que
     quedaba arriba y abajo. */
  .cl-stage {
    grid-row: 1;
    height: min(64svh, 84vw);
    padding: 0 6px;
  }
}

/* Celular acostado (y pantallas muy bajas): no hay alto para el titulo ni
   para la fila de pills sin que la laptop quede del tamanio de una estampilla.
   Se cae el titulo, se achica el panel y queda solo el equipo. */
@media (max-width: 900px) and (max-height: 480px) {
  .closer-look { --lw: min(620px, 78vw, calc((100svh - 90px) * 1.35)); }
  .cl-sticky { padding: 8px 10px; gap: 8px; }
  .cl-head h2 { font-size: 20px; }
  .cl-caption { display: none; }
  .cl-panel { padding: 8px 0 10px; }
  .cl-stage { height: min(72svh, 62vw); }
}

/* ---------- Sin JS / sin GSAP ----------
   La seccion deja de ocupar 100vh y muestra la laptop abierta. */
.closer-look.is-static {
  --lid-angle: var(--lid-open);
  --camera-x: var(--cam-end);
  --scale: 1;
  --power: 1;
  --shadow-x: .75;
  --shadow-o: .3;
  --trazo: 1;
  --rise: -.04;
}
.closer-look.is-static .cl-sticky { min-height: 0; padding: 56px 24px; }
.closer-look.is-static .cl-panel { min-height: 72vh; }
.closer-look.is-static .cl-pill,
.closer-look.is-static .cl-caption { opacity: 1; }

/* El fallback estatico en el celular: sin esto el min-height de 72vh vuelve
   a estirar el panel y reaparece el hueco que le sacamos arriba. */
@media (max-width: 900px) {
  .closer-look.is-static .cl-sticky { padding: 34px 14px; }
  .closer-look.is-static .cl-panel { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-pill,
  .cl-pill span,
  .cl-link { transition: none; }
}

/* ==========================================================================
   COMO CAMBIAR CUANTO SE ABRE LA LAPTOP

   1. Que se abra MAS: subi --lid-open (15deg -> 25deg la deja mas volcada
      hacia atras). Que se abra MENOS: bajalo (5deg queda casi en L).
   2. No toques --lid-closed: -90deg es exactamente lo que deja la tapa
      apoyada sobre el teclado, sin luz entre medio.
   3. Que la camara termine mas de frente: acerca --cam-end a 0deg. Que
      arranque mas picada (mas desde arriba): hace --cam-start mas negativo.
      OJO: la camara tambien decide cuan GRANDE se ve el equipo. Con la camara
      alta el cuerpo se proyecta larguisimo, y como --fit se fija con la pose
      mas exigente de toda la animacion (ver closer-look.js), una picada mas
      pronunciada —o una bajada mas tardia— encoge TODO el recorrido. Si tocas
      estos angulos, mira --fit en el inspector: si bajo de 1 en una ventana
      donde antes valia 1, le estas sacando tamanio al cuadro final.
   4. Para cambiar el TAMANIO tocá solo --lw. Todo lo demas (espesores, radios,
      notch, barra de menu, perspectiva) esta atado a ella y sigue solo: los
      em salen del font-size de .cl-laptop, que es --lw/88.
   ========================================================================== */