/* PANORO · versión oscura
   Rumbo: zzstudio.design — casi negro, acento lima, columna izquierda fija y las pantallas
   pasando de arriba a abajo por la derecha. */

:root{
  --bg:#0A0A0A;
  --surf:#141414;
  --surf2:#1C1C1C;
  --ink:#F4F4F4;
  --mut:#8B8B8B;
  --line:rgba(255,255,255,.12);
  --acc:#CBFF3C;
  --acc-ink:#0A0A0A;
  --ease:cubic-bezier(.2,.9,.25,1);
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:16px;
  --edge:56px;      /* franja lateral con la marca vertical */
  --col:clamp(320px,34vw,520px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;letter-spacing:-.01em;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--acc);color:var(--acc-ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.03em;line-height:1.06}
p{margin:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* franja izquierda con la marca escrita en vertical */
.edge{
  position:fixed;left:0;top:0;bottom:0;width:var(--edge);z-index:90;
  border-right:1px solid var(--line);background:var(--bg);
  display:grid;place-items:center;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:12px;letter-spacing:.42em;color:var(--mut);
}

/* ── Barra ── */
.nav{
  position:fixed;top:0;left:var(--edge);right:0;z-index:100;height:62px;
  display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.78);backdrop-filter:blur(14px);
}
.logo{display:inline-flex;align-items:center;gap:10px;padding:0 20px;height:100%;border-right:1px solid var(--line)}
.logo__mark{width:auto;height:24px}
.logo__word{width:auto;height:12px}
.menu{display:flex;height:100%}
.menu a{
  display:grid;place-items:center;padding:0 26px;height:100%;border-right:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  transition:color .25s,background .25s;
}
.menu a:hover{color:var(--acc-ink);background:var(--acc)}

.pill{
  display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;
  background:var(--surf2);color:var(--ink);font-size:15px;border:1px solid var(--line);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,transform .2s var(--ease);
}
.pill i{width:16px;height:16px;border-radius:50%;border:4px solid currentColor;display:block}
.pill:hover{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.pill:active{transform:scale(.98)}
.pill--acc{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.pill--acc:hover{background:#E4FF7A;border-color:#E4FF7A}
.pill--lg{padding:16px 30px;font-size:17px}

/* ── Columna fija + pantallas ── */
.split{display:grid;grid-template-columns:var(--col) minmax(0,1fr);margin-left:var(--edge)}
.panel{
  position:sticky;top:62px;height:calc(100svh - 62px);
  display:grid;grid-template-rows:auto 1fr auto;gap:30px;
  padding:56px 40px 30px;border-right:1px solid var(--line);
}
.panel__t{font-size:clamp(26px,2.6vw,40px);font-weight:400}
.panel__t .ln{display:block;overflow:hidden;padding-bottom:.05em}
.panel__t .ln__i{display:block}
.panel__top{display:grid;gap:34px;justify-items:start}
.mono-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);display:flex;gap:10px;align-items:center}
.panel__best{display:grid;gap:22px;align-content:center}

/* mazo de tarjetas que van pasando, como el de la referencia */
.deck{position:relative;height:132px}
.deck__c{
  position:absolute;left:0;top:0;display:flex;align-items:center;gap:12px;
  width:min(280px,100%);padding:16px 20px;border-radius:12px;
  background:rgba(24,24,24,.92);border:1px solid var(--line);color:var(--ink);font-size:15px;
  box-shadow:0 24px 40px -28px rgba(0,0,0,.9);
  transition:transform .7s var(--ease),opacity .7s var(--ease);
}
.deck__c svg{width:20px;height:20px;fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.panel__foot{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:20px}
.panel__foot b{font-family:var(--mono);font-size:32px;font-weight:500;color:var(--acc);line-height:1}
.panel__foot span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);line-height:1.5}

/* ── Menú numerado, fijo a la derecha ── */
.index{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:95;width:min(320px,28vw)}
.index ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.index li{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer;
  padding:12px 18px;border-left:1px solid var(--line);background:rgba(10,10,10,.55);
  transition:background .3s,opacity .3s,border-color .3s;
}
.index b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mut);padding-top:3px}
.index strong{display:block;font-size:15px;font-weight:500;margin-bottom:2px}
.index span{font-size:13.5px;color:var(--mut);display:block;max-height:1.35em;overflow:hidden;transition:max-height .45s var(--ease)}
.index li.on{background:rgba(20,20,20,.94);border-left-color:var(--acc)}
.index li.on b{color:var(--acc)}
.index li.on span{max-height:5em}
.index:hover li:not(:hover){opacity:.5}

/* ── Cada pantalla ocupa la altura de la ventana ── */
.feed{display:grid;perspective:1600px}
.shot{position:relative;min-height:100svh;display:grid;align-items:center;border-bottom:1px solid var(--line);overflow:hidden;transform-style:preserve-3d}
/* flex y no grid: con grid la pista se dimensiona al contenido y la notebook,
   cuyo contenido es un iframe absoluto, colapsaba al ancho del texto de la URL. */
.shot__stage{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(30px,5vw,80px);width:100%}
.shot::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 80% at 50% 0%, var(--t1), var(--t2) 60%, #0A0A0A 100%);
}
.shot>*{position:relative;z-index:1}
.shot[data-tint="verde"]{--t1:#123021;--t2:#0C1A13}
.shot[data-tint="ambar"]{--t1:#3A2A0E;--t2:#1C150A}
.shot[data-tint="azul"]{--t1:#122036;--t2:#0C131D}
.shot[data-tint="rojo"]{--t1:#3A1414;--t2:#1C0D0D}

/* ── El monitor es una MacBook de verdad ──
   Mockup PNG con la pantalla recortada (webmobilefirst.com, uso comercial permitido, sin
   atribución obligatoria). El marco va ARRIBA y la web queda atrás, en el hueco: así la
   notebook es una foto y la pantalla sigue siendo un iframe que se puede usar.
   Medidas del hueco sacadas del canal alfa del PNG: 621x387 sobre 800x460. */
.mon{
  /* flex en el contenedor y width:100% acá: con grid centrado la caja colapsaba al texto */
  width:100%;max-width:940px;position:relative;
  filter:drop-shadow(0 55px 60px rgba(0,0,0,.8));
}
.lap{
  position:relative;aspect-ratio:800/460;
  transform:perspective(2000px) rotateY(-12deg) rotateX(2.5deg);
  transform-origin:50% 78%;
  transition:transform .6s var(--ease);
}
.mon:hover .lap{transform:perspective(2000px) rotateY(-6deg) rotateX(1deg)}

.lap__frame{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;user-select:none;
}
.mon__view{
  position:absolute;left:11.125%;top:5.87%;width:77.625%;height:84.13%;z-index:1;
  overflow:hidden;background:#0E0E0E;border-radius:3px;
}
.mon__view svg{width:100%;height:100%;display:block;object-fit:cover}

/* el brillo del vidrio, que se apaga cuando la estás usando */
.lap__glare{
  position:absolute;left:11.125%;top:5.87%;width:77.625%;height:84.13%;z-index:3;
  border-radius:3px;pointer-events:none;transition:opacity .4s;
  background:linear-gradient(112deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 24%,transparent 44%);
}
.mon__view.live ~ .lap__glare{opacity:0}

/* la luz que la pantalla tira sobre la mesa */
.lap__cast{
  position:absolute;left:10%;right:10%;top:98%;height:64px;z-index:0;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,var(--t1),transparent 72%);
  opacity:.6;filter:blur(16px);
}

.mon__url{
  margin:14px 0 0;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
}

/* colores de las pantallas dibujadas */
.s-bg{fill:#0E0E0E}
.s-top{fill:#181818}
.s-card{fill:#1B1B1B}
.s-l{fill:rgba(255,255,255,.16)}
.s-acc{fill:var(--acc)}
.s-acc2{fill:rgba(203,255,60,.34)}

/* ── Zoom: el monitor se centra y se puede usar ── */
.zoom-bg{position:fixed;inset:0;z-index:250;background:rgba(4,4,4,.94);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
body.zoom .zoom-bg{opacity:1;pointer-events:auto}
.shot.zoom .mon{
  position:fixed;left:50%;top:50%;z-index:300;width:min(94vw,1480px);
  transform:translate(-50%,-50%)!important;transition:width .5s var(--ease);
}
/* de frente y sin brillo: acá se usa de verdad */
.shot.zoom .lap,.shot.zoom .mon:hover .lap{transform:none;aspect-ratio:621/387}
.shot.zoom .lap__frame,.shot.zoom .lap__glare,.shot.zoom .lap__cast{opacity:0}
.shot.zoom .mon__view{inset:0;width:100%;height:100%;border-radius:8px}
.mon__close{
  position:absolute;right:-10px;top:-48px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:var(--surf2);color:var(--ink);cursor:pointer;display:none;
}
.shot.zoom .mon__close{display:block}
.mon__close:hover{background:var(--acc);color:var(--acc-ink)}
body.zoom .index,body.zoom .nav,body.zoom .edge{opacity:0;pointer-events:none;transition:opacity .3s}

/* la web real corriendo adentro */
.mon__view--live iframe{
  position:absolute;top:0;left:0;width:1440px;height:900px;border:0;
  transform-origin:top left;pointer-events:none;background:#E5E9EB;
}
.mon__view.live iframe{pointer-events:auto}
.mon__tap{
  position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(10,10,10,.25);color:var(--ink);font-size:15px;transition:opacity .3s;
}
.mon__tap span{margin-left:8px}
.mon__view.live .mon__tap{opacity:0;pointer-events:none}

/* botón que sigue al cursor, como el VIEW PROJECT de ellos */
.mon{transform-origin:center bottom;will-change:transform}
.shot__go{
  position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;
  background:var(--acc);color:var(--acc-ink);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;padding:9px 14px;border-radius:4px;transform:translate(-50%,-50%);
  transition:opacity .25s;white-space:nowrap;
}
.shot__stage:hover .mon{transform-origin:center bottom;will-change:transform}
.shot__go{opacity:1}

/* etiqueta abajo a la derecha */
.shot__tag{
  position:absolute;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:rgba(10,10,10,.72);border-top:1px solid var(--line);border-left:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
}
.shot__date{color:var(--mut)}
.shot__tag b{font-weight:500}
.shot__tag em{font-style:normal;color:var(--acc)}

.shot--cta .shot__cta{display:grid;gap:16px;justify-items:start;max-width:34ch}
.shot__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.shot--cta h2{font-size:clamp(26px,3vw,40px)}
.shot--cta p{color:var(--mut)}

/* ── Secciones de abajo ── */
.sec{max-width:1320px;margin:0 auto;padding:120px 24px 0;margin-left:calc(var(--edge) + 0px)}
.sec__head{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;margin-bottom:44px}
.lbl{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding-top:8px}
.lbl i{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.sec__head h2{font-size:clamp(26px,3.6vw,46px);max-width:20ch}

.list{list-style:none;margin:0;padding:0}
.list li{
  display:grid;grid-template-columns:70px minmax(0,1fr) 30px;align-items:center;gap:24px;
  padding:22px 10px;border-top:1px solid var(--line);transition:padding-left .4s var(--ease),background .35s;
}
.list li:last-child{border-bottom:1px solid var(--line)}
.list li:hover{padding-left:26px;background:var(--surf)}
.list span{font-family:var(--mono);font-size:12px;color:var(--mut)}
.list h3{font-size:clamp(20px,2.2vw,28px);font-weight:400}
.list i{font-style:normal;color:var(--mut);transition:transform .35s var(--ease),color .3s}
.list li:hover i{transform:translateX(6px);color:var(--acc)}

.pasos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pasos article{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start;min-height:190px}
.pasos b{font-family:var(--mono);font-size:12px;color:var(--acc);font-weight:500}
.pasos h3{font-size:19px}
.pasos p{color:var(--mut);font-size:14.5px}

.cta{max-width:900px;margin:130px auto 0;padding:0 24px;display:grid;justify-items:center;text-align:center;gap:16px}
.cta h2{font-size:clamp(28px,4.4vw,56px);max-width:16ch}
.cta__s{color:var(--mut);max-width:50ch}
.cta__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:6px}

.foot{margin:130px 0 0 var(--edge);padding:28px 24px 50px;border-top:1px solid var(--line)}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot__k{font-size:14px;color:var(--mut)}
.foot__k a{color:var(--acc)}
.foot__legal{margin-top:18px;font-size:13px;color:var(--mut)}

@media (min-width:1281px){
  /* el menú de la derecha no se come el monitor */
  .shot__stage{padding-right:clamp(300px,24vw,360px)}
  .shot__tag{right:clamp(300px,24vw,360px)}
}
@media (max-width:1280px){
  .index{display:none}
}
@media (max-width:1100px){
  .split{grid-template-columns:1fr}
  .panel{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:110px 28px 36px}
  .panel__mid{align-content:start}
  .shot{min-height:auto;padding:40px 0}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  :root{--edge:0px}
  .edge{display:none}
  .nav{left:0}
  .sec,.foot{margin-left:0}
  .sec__head{grid-template-columns:1fr;gap:14px}
  .pasos{grid-template-columns:1fr}
  .shot__tag{position:static;justify-content:flex-start;border-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}