:root{
    --bg:#0f1724;
    --card-bg: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    --accent:#ff7aa2;
    --text:#e6eef8;
    --radius: 320px; /* distancia desde el centro */
    --tilt: 30deg; /* inclinación en X */
    --item-size: 220px; /* tamaño de cada imagen */
    --gap: 12px;
    --transition: 600ms cubic-bezier(.2,.9,.2,1);
  }

  html,body{
    height:1000px;
    width: 1000px;
    margin:0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255,122,162,0.06), transparent),
                linear-gradient(180deg, #e609ee 0%, #071827 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background-repeat: no-repeat;
  }

  .wrap{
    min-height:100hv;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
    box-sizing:border-box;
  }

  .panel{
    width:100%;
    max-width:1100px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:18px;
    padding:28px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.03);
    height: 100%;
  }

  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
  }

  .title{
    display:flex;
    gap:14px;
    align-items:center;
  }

  .logo{
    width:56px;
    height:56px;
    border-radius:12px;
    background: linear-gradient(135deg, var(--accent), #6ec1ff);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#da3495;
    box-shadow: 0 6px 18px rgba(255,122,162,0.12);
    font-size: xx-large;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  h1{
    font-size:20px;
    margin:0;
    letter-spacing:-0.2px;
  }

  p.lead{
    margin:0;
    color:rgba(230,238,248,0.75);
    font-size:13px;
  }

  .controls{
    display:flex;
    gap:10px;
    align-items:center;
  }

  .btn{
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    color:var(--text);
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer;
    transition: all 180ms ease;
    font-size:14px;
  }
  .btn:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,0.4); }

  .stage{
    margin-top:18px;
    height:520px;
    position:relative;
    perspective:1200px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .carousel{
    width:100%;
    max-width:920px;
    height:420px;
    position:relative;
    transform-style:preserve-3d;
    transition: transform var(--transition);
    margin:auto;
    display:block;
    pointer-events:all;
  }

  .carousel-inner{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transition: transform var(--transition);
    display:block;
  }

  .item{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--item-size);
    height:var(--item-size);
    margin-left: calc(var(--item-size) / -2);
    margin-top: calc(var(--item-size) / -2);
    transform-origin: center center;
    transition: transform 400ms cubic-bezier(.2,.9,.2,1), filter 300ms;
    border-radius:14px;
    overflow:hidden;
    box-shadow: 0 12px 30px rgba(2,6,23,0.6);
    background:var(--card-bg);
    border:1px solid rgba(255,255,255,0.04);
    /* cursor:pointer; */
  }

  .item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: translateZ(1px);
  }

  .item .caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:10px 12px;
    color: #fff;
    font-size:13px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events:none;
  }

  .item.focus{
    transform: translateZ(60px) scale(1.06);
    z-index:50;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  }

  .hud{
    margin-top:100px;
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    /*border: solid 2px red;*/
    position: relative;
    bottom: -10%;
  }

  .sliders{
    display:flex;
    gap:12px;
    align-items:center;
    /*border: solid 2px blue;*/
  }

  .slider{
    display:flex;
    gap:8px;
    align-items:center;
    color:rgba(230,238,248,0.85);
    font-size:13px;
  }

  input[type=range]{
    -webkit-appearance:none;
    appearance:none;
    width:180px;
    height:6px;
    background:linear-gradient(90deg,#2b3b55,#12324a);
    border-radius:6px;
    outline:none;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 6px 18px rgba(255,122,162,0.18);
    border:3px solid rgba(255,255,255,0.06);
  }

  .hint{
    color:rgba(230,238,248,0.6);
    font-size:13px;
  }

  /* Responsive */
  @media (max-width:880px){
    :root{ --item-size:160px; --radius:220px; }
    .stage{ height:420px; }
  }
  @media (max-width:520px){
    .panel{ padding:18px; }
    .stage{ height:360px; }
    :root{ --item-size:130px; --radius:180px; }
  }