/* =====================================================================
   SMARTOLOGY — Estilos de la mini película (compartidos por index.html
   y experiencia.html). El posicionamiento de #escenario y del body es
   propio de cada página.
   ===================================================================== */

/* capa de medio (video/imagen) */
.medio{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.medio.activa{opacity:1}
.medio video,.medio img{width:100%;height:100%;object-fit:cover;display:block}
.medio.placeholder{
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(80% 55% at 50% 30%, rgba(22,227,126,.16), transparent 70%),
    linear-gradient(160deg,#08110D,#04070A);
}
@keyframes ken{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.medio.imagen img{animation:ken 12s ease-out both}

/* congelado: se detiene el video, pasa a blanco y negro con un zoom leve
   (transición "de escena a foto" mientras el usuario decide) */
.medio video{transition:filter 900ms ease, transform 1400ms ease}
.medio.congelado video{filter:grayscale(1) contrast(1.06);transform:scale(1.09)}

/* viñeta para legibilidad */
#escenario::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 34%,
            rgba(0,0,0,0) 78%, rgba(0,0,0,.35) 100%);
}

/* overlay de texto */
#texto{position:absolute;left:0;right:0;z-index:5;padding:0 26px;text-align:center;
       pointer-events:none;opacity:0;transition:opacity .2s ease}
#texto.show{opacity:1}
#texto.arriba{top:14%}#texto.centro{top:50%;transform:translateY(-50%)}#texto.abajo{bottom:22%}
#texto h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.6rem,7vw,2.3rem);
          line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.8)}
#texto p{margin-top:10px;color:#EAF6EF;opacity:.9;font-size:1.02rem;text-shadow:0 2px 12px rgba(0,0,0,.8)}

/* botón de acción de escena (ej. ¿Contestar?) — control táctil "tecla":
   canto inferior sólido que se hunde al presionar, con barrido de brillo. Sin anillo. */
#accion{position:absolute;left:50%;bottom:12%;transform:translate(-50%,14px);z-index:10;overflow:hidden;
        display:inline-flex;align-items:center;justify-content:center;gap:11px;
        font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.08rem;color:#04140C;
        padding:16px 30px 17px;border:none;border-radius:12px;cursor:pointer;white-space:nowrap;
        background:linear-gradient(180deg,#3BF0A0,#15D477 60%,#0FB866);
        box-shadow:0 5px 0 #0A6E40,0 14px 28px rgba(21,212,119,.30),inset 0 1px 0 rgba(255,255,255,.45);
        touch-action:manipulation;-webkit-tap-highlight-color:transparent;
        opacity:0;pointer-events:none;
        transition:opacity .22s ease,transform .16s cubic-bezier(.2,1,.3,1),box-shadow .16s}
#accion.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#accion:active{transform:translate(-50%,4px);box-shadow:0 1px 0 #0A6E40,0 8px 16px rgba(21,212,119,.26),inset 0 1px 0 rgba(255,255,255,.4)}
#accion::after{content:"";position:absolute;inset:0;pointer-events:none;
        background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
        background-size:260% 100%;background-position:210% 0;animation:sheen 5s ease-in-out 1s infinite}
@keyframes sheen{0%{background-position:210% 0}55%,100%{background-position:-60% 0}}
#accion svg{width:19px;height:19px}

/* momento de DECISIÓN — HUD de película: etiqueta de claqueta + controles táctiles
   con barra de acento y flecha (no pills apiladas genéricas) */
#decision{position:absolute;left:0;right:0;top:50%;z-index:11;display:flex;flex-direction:column;align-items:stretch;gap:12px;
          padding:0 22px;opacity:0;transform:translateY(calc(-50% + 16px));pointer-events:none;
          transition:opacity .2s ease,transform .22s cubic-bezier(.2,1.3,.3,1)}
#decision.show{opacity:1;transform:translateY(-50%);pointer-events:auto}
#decision::before{content:"◂  Toma tu decisión  ▸";display:block;text-align:center;
          font-family:var(--mono,'Space Mono',monospace);font-size:.84rem;font-weight:700;letter-spacing:.2em;
          text-transform:uppercase;color:var(--acc,#16E37E);opacity:1;margin-bottom:12px;text-shadow:0 2px 10px rgba(0,0,0,.9)}
#decision .opcion{position:relative;overflow:hidden;width:100%;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.08rem;
          color:#EAF6EF;padding:17px 44px 17px 24px;border-radius:13px;border:1.5px solid rgba(22,227,126,.5);
          background:linear-gradient(180deg,rgba(12,26,19,.9),rgba(5,12,9,.94));
          -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
          cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 24px rgba(22,227,126,.14);text-align:left;
          touch-action:manipulation;-webkit-tap-highlight-color:transparent;
          transition:transform .14s,border-color .2s,background .2s}
#decision .opcion::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
          background:var(--acc,#16E37E);opacity:.55;transition:opacity .2s,width .16s}
#decision .opcion::after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);
          font-family:var(--mono,monospace);color:var(--acc,#16E37E);opacity:.7;transition:transform .18s,opacity .2s}
#decision .opcion:active{transform:scale(.99);border-color:var(--acc,#16E37E);
          background:linear-gradient(180deg,rgba(22,227,126,.16),rgba(8,16,11,.9))}
#decision .opcion:active::before{opacity:1;width:5px}
#decision .opcion:active::after{transform:translateY(-50%) translateX(4px);opacity:1}

/* hint "toca para continuar" */
#hint{position:absolute;left:0;right:0;bottom:8%;z-index:6;text-align:center;
      font-family:var(--mono,'Space Mono',monospace);color:#EAF6EF;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
      opacity:0;transition:opacity .5s;text-shadow:0 2px 10px rgba(0,0,0,.8);pointer-events:none}
#hint.show{opacity:.82;animation:respira 2.2s ease-in-out infinite}
@keyframes respira{50%{opacity:.32}}

@media (prefers-reduced-motion:reduce){.medio.imagen img{animation:none}}