*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:#000;
  color:#eaffff;
  font-family:system-ui,Segoe UI,Arial,sans-serif;
}

body{overflow:hidden}

.stage{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:26px;
  align-items:center;
  padding:22px;
  background:
    radial-gradient(circle at 38% 42%,rgba(0,210,255,.18),transparent 34%),
    radial-gradient(circle at 70% 20%,rgba(0,130,255,.08),transparent 30%),
    #000;
}

.visor{
  position:relative;
  height:calc(100vh - 44px);
  min-height:620px;
  border:1px solid rgba(100,255,255,.18);
  border-radius:30px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(0,255,255,.045),rgba(0,0,0,.02));
}

.grid{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(120,255,255,.06) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(90deg,rgba(120,255,255,.035) 0 1px,transparent 1px 52px);
  opacity:.6;
}

.alya{
  position:relative;
  width:min(88vw,980px);
  aspect-ratio:1536/864;
  transform-origin:center 58%;
  animation:headIdleWide 6s ease-in-out infinite;
  filter:drop-shadow(0 0 28px rgba(82,244,255,.46));
}

.base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  opacity:.98;
  user-select:none;
  pointer-events:none;
}

.holo-copy{
  display:none;
}

/* OJOS */

.eye{
  position:absolute;
  width:5.2%;
  height:3.1%;
  border-radius:50%;
  overflow:hidden;
  opacity:.9;
  z-index:50;
}

.eye-l{
  left:41.0%;
  top:42.5%;
}

.eye-r{
  left:53.4%;
  top:42.5%;
}

.pupil{
  position:absolute;
  left:50%;
  top:50%;

  width:47%;
  height:68%;

  border-radius:50%;
  opacity:.90;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,.95) 0 8%,
      rgba(200,255,255,.92) 18%,
      rgba(120,245,255,.65) 38%,
      rgba(0,220,255,.45) 62%,
      rgba(0,140,255,.22) 85%,
      transparent 100%
    );

  box-shadow:
    0 0 4px rgba(255,255,255,.65),
    0 0 10px rgba(120,255,255,.40),
    0 0 18px rgba(0,220,255,.22);

  transform:translate(-50%,-50%);
  transition:transform .08s linear;
}

.lid{
  position:absolute;
  left:3%;
  top:-115%;
  width:94%;
  height:104%;
  background:transparent;
  border-top:2px solid rgba(210,255,255,.82);
  border-bottom:1px solid rgba(90,225,255,.40);
  border-radius:50%;
  box-shadow:0 0 6px rgba(120,255,255,.65);
  transition:top .12s ease;
}

.alya.blink .lid{
  top:42%;
}

/* BOCA */

.mouth{
  position:absolute;

  left:50%;
  top:64.8%;

  width:8.6%;
  height:1.6%;

  transform:translateX(-50%);

  border:none;
  border-radius:999px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(230,255,255,.60) 0 18%,
      rgba(120,255,255,.30) 45%,
      transparent 80%
    );

  box-shadow:
    0 0 5px rgba(120,255,255,.35),
    inset 0 0 3px rgba(255,255,255,.18);

  filter:blur(.12px);
}

.mouth::before{
  content:"";

  position:absolute;

  left:12%;
  width:30%;
  height:120%;

  top:-40%;

  border-top:2px solid rgba(220,255,255,.80);
  border-radius:100% 100% 0 0;

  transform:rotate(-8deg);
}

.mouth::after{
  content:"";

  position:absolute;

  right:12%;
  width:30%;
  height:120%;

  top:-40%;

  border-top:2px solid rgba(220,255,255,.80);
  border-radius:100% 100% 0 0;

  transform:rotate(8deg);
}

.mouth .inner{
  position:absolute;
  inset:18% 16%;
  border-radius:50%;
  background:rgba(3,28,38,.72);
  opacity:0;
  transition:opacity .08s ease;
}

.mouth .teeth{
  position:absolute;
  left:20%;
  top:18%;
  width:60%;
  height:14%;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  opacity:0;
}

.mouth.closed{
  width:5.8%;
  height:.55%;
}

.mouth.neutral{
  width:7.4%;
  height:.9%;
}

.mouth.soft{
  width:6.8%;
  height:1.8%;
  border-radius:48%;
}

.mouth.soft .inner{opacity:.34}

.mouth.medium{
  width:7.0%;
  height:2.4%;
  border-radius:48%;
}

.mouth.medium .inner{opacity:.62}
.mouth.medium .teeth{opacity:.35}

.mouth.open{
  width:6.4%;
  height:3.2%;
  border-radius:50%;
}

.mouth.open .inner{opacity:.82}
.mouth.open .teeth{opacity:.46}

.mouth.smile{
  width:7.2%;
  height:.95%;
  border-radius:0 0 999px 999px;
}

.mouth.smile::before{
  border-top:0;
}

.mouth.smile::after{
  left:8%;
  right:8%;
  bottom:-35%;
  border-bottom:2px solid rgba(200,255,255,.82);
}

/* EFECTOS */

.scan{
  position:absolute;
  inset:-15%;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(145,255,255,.10) 0 1px,transparent 1px 7px);
  mix-blend-mode:screen;
  animation:scanMove 3.6s linear infinite;
  opacity:.65;
}

.halo{
  position:absolute;
  inset:11% 27%;
  border-radius:50%;
  box-shadow:
    0 0 75px rgba(0,255,255,.20),
    inset 0 0 40px rgba(0,255,255,.06);
  pointer-events:none;
}

/* PANEL */

.panel{
  border:1px solid rgba(110,255,255,.18);
  background:rgba(3,18,28,.88);
  border-radius:24px;
  padding:20px;
  backdrop-filter:blur(15px);
  box-shadow:0 20px 80px rgba(0,0,0,.35);
}

h1{
  margin:0 0 8px;
  font-size:32px;
}

p{
  opacity:.82;
  margin:0 0 12px;
}

textarea{
  width:100%;
  height:150px;
  border-radius:14px;
  border:1px solid rgba(120,255,255,.20);
  background:rgba(0,0,0,.48);
  color:white;
  padding:12px;
  font-size:15px;
  line-height:1.45;
}

.row,.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

button{
  margin-top:12px;
  border:1px solid rgba(130,255,255,.28);
  background:rgba(120,255,255,.12);
  color:white;
  border-radius:999px;
  padding:10px 15px;
  cursor:pointer;
  font-weight:700;
}

button:hover{
  background:rgba(120,255,255,.22);
}

.nota{
  font-size:12px;
  opacity:.62;
  margin-top:12px;
  line-height:1.35;
}

/* ANIMACIONES */

@keyframes scanMove{
  from{transform:translateY(-8%)}
  to{transform:translateY(8%)}
}

@keyframes headIdleWide{
  0%,100%{
    transform:translateY(0) scale(1) rotateY(0deg) rotateX(0deg);
  }
  25%{
    transform:translateY(-4px) scale(1.003) rotateY(1.1deg) rotateX(-.4deg);
  }
  50%{
    transform:translateY(-8px) scale(1.005) rotateY(0deg) rotateX(.5deg);
  }
  75%{
    transform:translateY(-4px) scale(1.003) rotateY(-1.1deg) rotateX(-.4deg);
  }
}

/* RESPONSIVE */

@media(max-width:900px){
  body{
    overflow:auto;
  }

  .stage{
    grid-template-columns:1fr;
    padding:12px;
  }

  .visor{
    height:58vh;
    min-height:360px;
  }

  .panel{
    margin-bottom:12px;
  }

  .alya{
    width:96vw;
    aspect-ratio:1536/864;
  }
}


/* ===================================================== */
/* MOBILE RESPONSIVE - ALYA */
/* ===================================================== */

@media(max-width:900px){
  html,body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
  }

  body{
    overflow-y:auto;
  }

  .stage{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:10px;
  }

  .visor{
    width:100%;
    height:56dvh;
    min-height:360px;
    border-radius:22px;
    padding:0;
  }

  .alya{
    width:150vw;
    max-width:760px;
    aspect-ratio:1536/864;
    transform-origin:center center;
  }

  .panel{
    width:100%;
    padding:14px;
    border-radius:18px;
    margin:0 0 12px 0;
  }

  h1{
    font-size:24px;
  }

  p{
    font-size:14px;
  }

  textarea{
    height:118px;
    font-size:14px;
  }

  .row,.chips{
    gap:6px;
  }

  button{
    flex:1 1 auto;
    min-width:110px;
    padding:10px 12px;
    font-size:14px;
  }
}

/* Celulares angostos en vertical */
@media(max-width:520px) and (orientation:portrait){
  .stage{
    padding:8px;
  }

  .visor{
    height:52dvh;
    min-height:330px;
  }

  .alya{
    width:165vw;
    max-width:none;
  }

  .panel{
    padding:12px;
  }

  textarea{
    height:110px;
  }
}

/* Celular horizontal */
@media(max-height:520px) and (orientation:landscape){
  body{
    overflow:hidden;
  }

  .stage{
    min-height:100dvh;
    display:grid;
    grid-template-columns:1fr 360px;
    gap:10px;
    padding:10px;
  }

  .visor{
    height:calc(100dvh - 20px);
    min-height:0;
  }

  .alya{
    width:92vw;
    max-width:900px;
  }

  .panel{
    max-height:calc(100dvh - 20px);
    overflow:auto;
  }

  textarea{
    height:90px;
  }

  h1{
    font-size:22px;
  }
}


/* Prosoltec: botones de acción */
.chips{
  margin-top:10px;
}

.chips button{
  flex:1 1 145px;
}

@media(max-width:900px){
  .chips button{
    flex:1 1 45%;
    min-width:130px;
  }
}