/* ===== Layout 2 columnas ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:#0f172a;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.45;}

.layout{
  display:grid;
  grid-template-columns: 1fr 3fr; /* 25% / 75% */
  gap: clamp(16px, 2vw, 28px);
  min-height: 100vh;
  align-items: start;
  background-color: #fff;
  padding-top: 100px;
}

/* Columna izquierda sticky TODO el tramo */
.col-left{
  position: relative;
  padding: clamp(20px,2.5vw,28px);
}
.left-inner{
  position: sticky;
  top: clamp(16px, 3vh, 40px);
}

/* Para asegurar que la columna izquierda exista a lo largo de toda la animación,
   le damos una altura mínima similar al tramo total. */
.col-left { min-height: 600vh; }

.title{ margin:0 0 .75rem; font-size: clamp(24px, 3.2vw, 40px); }
.lead{ color:#334155; margin:0 0 1rem; }
.bullets{ padding-left: 1.1rem; color:#334155; }

/* Columna derecha (animación) */
.col-right{
  position: relative;
  padding: 0;
  overflow: visible;
  width: 75%;
}

/* ===== Escena sticky ===== */
.scene-wrap{
  position: relative;
  height: 600vh; /* 6x100vh */
  background:#fff;
}
.scene-viewport{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: visible;
}


/* Discos (tamaño del usuario) */
.disc{
  position:absolute;
  width: min(40vmin, 420px);
  max-width: 68%;
  opacity: 0;
  will-change: transform, opacity;
 filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.1));
}
.d1{z-index:1}.d2{z-index:2}.d3{z-index:3}.d4{z-index:4}.d5{z-index:5}.d6{z-index:6}

/* Panel lateral dentro de la columna derecha */
@media(min-width:761px) {
.side{
  position:absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  margin-left: -55%;
}
.panel{
  position:absolute;
  width:350px;
  opacity:0;
  transform: translateY(-50%);
  transition: opacity 360ms ease;
  will-change: opacity, transform, top, left;
}
.stack{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
}

@media(max-width:760px) {
.side{
  position:absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  bottom: 0px;

 
}
.panel{
  position:absolute;
  width:250px;
  opacity:0;
  transform: translateY(-50%);
  transition: opacity 360ms ease;
  will-change: opacity, transform, top, left;
}
.stack{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  margin-left: -100px;
}

.disc{

  width: min(60vmin, 420px);
  max-width: 88%;


}
    .stack { 
margin-left: 0px;
    }
    .layout .col-right {
width: 100%;
    }
}


@media(min-width:1200px) {
  .side{
    position:absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    margin-left: -45%;
  }

}



/* Por defecto mostramos solo desktop */
.panel.mobile { display: none; }

/* En pantallas menores de 760px mostramos la versión móvil */
@media (max-width: 760px) {
  .panel.desktop { display: none; }
  .panel.mobile { display: block; }
}





.panel.show{ opacity:1; }

/* Responsivo: en pantallas angostas pasamos a 1 columna */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .col-left{ order: 1; min-height: auto; }
  .col-right{ order: 2; }
  .left-inner{ position: static; }
  .panel{ width: 100%; text-align: center; margin-top: 20px;  }
  .panel img{ width: 100%;  }
}