/* ============================================================
   LA PUERTA

   Antes del login hay una puerta, y la guardan los dos: Arisa a la
   izquierda, Chester a la derecha, el emblema de Arkaia en medio.
   Los dos miran hacia el centro, asi que la mirada lleva a la llave.

   Es simetrica a proposito: el login es asimetrico (ella a un lado,
   el formulario al otro) y asi las dos pantallas no se confunden.
   ============================================================ */

body.vista-maestra{ font-family:var(--f-arisa); overflow:hidden }

.pta{
  height:100dvh;
  display:grid;
  /* Los lados ceden; el centro manda y nunca baja de 320px. */
  grid-template-columns:1fr minmax(320px,432px) 1fr;
  background:var(--fondo);
}

/* ------------------------------------------------------------
   Las dos hojas de la puerta
   ------------------------------------------------------------ */
.pta-lado{ position:relative; overflow:hidden }

.pta-lado [data-foto]{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.1);
}

/* Los dos miran hacia FUERA, cada uno a su lado: ella a la izquierda,
   el a la derecha. Su retrato es el de ella en espejo -misma pose, misma
   distancia, mismo contraluz al borde de fuera-, asi que el encuadre es
   tambien simetrico.

   Ojo: en esta columna la imagen se recorta por los LADOS, no por arriba
   y abajo, o sea que el valor vertical de object-position no hace nada.
   Se deja escrito por simetria y porque en movil si cuenta. */
.pta-lado--ella [data-foto]{ object-position:58% 26% }
.pta-lado--el [data-foto]{ object-position:42% 26% }

/* El resplandor de cada uno. El de ella viene dentro de su retrato -una
   banda violeta pegada al borde-, pero a el se le quedo fuera al
   reencuadrarlo, asi que se le pone aqui con su verde de marca. Van los
   dos por CSS para que sean simetricos de verdad y no dependan de como
   saliera cada imagen. */
.pta-lado::after{
  content:''; position:absolute; z-index:1;
  top:6%; width:70%; aspect-ratio:1;
  border-radius:50%;
  filter:blur(46px);
  pointer-events:none;
}
.pta-lado--ella::after{
  left:-24%;
  background:radial-gradient(circle,rgba(157,78,221,.34),transparent 66%);
}
.pta-lado--el::after{
  right:-24%;
  background:radial-gradient(circle,rgba(64,208,80,.30),transparent 66%);
}
/* El velo va por encima del resplandor. */
.pta-velo{ z-index:2 }

/* El velo: cada lado se apaga hacia el centro para que la columna de
   la llave quede sobre negro limpio. Va como capa aparte y no como
   mask sobre la foto, para que el degradado use el mismo negro del
   fondo y la union no se vea. */
.pta-velo{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(7,7,10,.62),transparent 30%,transparent 62%,rgba(7,7,10,.85)),
    radial-gradient(120% 90% at var(--foco,50%) 30%,transparent 30%,rgba(7,7,10,.55) 75%);
}
.pta-lado--ella .pta-velo{
  --foco:38%;
  background-image:
    linear-gradient(90deg,transparent 30%,rgba(7,7,10,.72) 78%,var(--fondo) 100%),
    linear-gradient(180deg,rgba(7,7,10,.6),transparent 28%,transparent 64%,rgba(7,7,10,.85));
}
.pta-lado--el .pta-velo{
  background-image:
    linear-gradient(270deg,transparent 30%,rgba(7,7,10,.72) 78%,var(--fondo) 100%),
    linear-gradient(180deg,rgba(7,7,10,.6),transparent 28%,transparent 64%,rgba(7,7,10,.85));
}

/* El nombre de cada uno, en vertical y pegado al borde de fuera:
   estan, se les nombra, y no le quitan sitio a la llave. */
.pta-nombre{
  position:absolute; bottom:2.2rem;
  writing-mode:vertical-rl;
  font-family:var(--f-marca);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--tinta-2);
}
.pta-lado--ella .pta-nombre{ left:1.9rem; text-shadow:0 0 22px var(--violeta) }
.pta-lado--el .pta-nombre{ right:1.9rem; transform:rotate(180deg);
                           text-shadow:0 0 22px var(--marca-verde) }

/* ------------------------------------------------------------
   EL CENTRO · la cerradura

   El centro no es una columna de texto sobre negro: es la juntura de
   las dos hojas, y en medio esta el mecanismo que las mantiene
   cerradas. El sello de Arkaia es el nucleo; los anillos de alrededor
   son los que reaccionan a lo que se escribe.

   Todo el tamano del conjunto cuelga de --cerr. El sello es el 60%
   de ese ancho y no puede bajar de ~132px: por debajo de ahi la
   segunda linea del logo, CORPORATION, no se lee.
   ------------------------------------------------------------ */
.pta-centro{
  --cerr:clamp(222px,25vw,292px);
  position:relative; z-index:1;
  display:grid; align-content:center; justify-items:center;
  padding:clamp(1.25rem,3.5vw,2.5rem);
  text-align:center;
  /* Un poco de aire violeta detras del mecanismo. Muy poco: la llave
     tiene que seguir leyendose sobre negro limpio. */
  background:radial-gradient(64% 46% at 50% 38%,rgba(157,78,221,.09),transparent 72%);
}

/* Las dos juntas verticales. Son el hueco entre las hojas, y por eso
   cada una lleva el color del lado que le toca: violeta a la
   izquierda, verde a la derecha. */
.pta-centro::before,
.pta-centro::after{
  content:''; position:absolute; top:0; bottom:0; width:1px;
  pointer-events:none;
}
.pta-centro::before{
  left:0;
  background:linear-gradient(180deg,transparent,rgba(157,78,221,.55) 42%,rgba(157,78,221,.16) 70%,transparent);
}
.pta-centro::after{
  right:0;
  background:linear-gradient(180deg,transparent,rgba(64,208,80,.48) 42%,rgba(64,208,80,.14) 70%,transparent);
}

/* El orden de la columna: el sello arriba, la llave justo debajo y el
   texto al pie. Se hace con `order` y no moviendo el HTML a proposito: en
   el DOM el titulo y el texto siguen estando ANTES del formulario, que es
   lo que necesita un lector de pantalla -saber que te van a pedir antes de
   toparte con el campo-. Como lo unico enfocable de la columna es el
   propio formulario, el orden del tabulador no se resiente. */
.pta-cerradura{ order:0 }
.pta-marca    { order:1 }
.pta-hilo     { order:2 }
.pta-placa    { order:3 }
.pta-titulo   { order:4 }
.pta-texto    { order:5 }

/* --- El mecanismo ---------------------------------------------------- */
.pta-cerradura{
  position:relative;
  width:var(--cerr); aspect-ratio:1;
  display:grid; place-items:center;
}

/* El resplandor de detras, girando muy despacio. Es conico y no radial
   para que al girar se note el barrido de un color al otro. */
.pta-halo{
  position:absolute; inset:8%;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(157,78,221,.55),rgba(196,137,228,.30),
    rgba(64,208,80,.42),rgba(157,78,221,.55));
  filter:blur(30px);
  opacity:.42;
  animation:pta-orbitar 26s linear infinite;
}
@keyframes pta-orbitar{ to{ transform:rotate(360deg) } }

.pta-anillos{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}

/* El bisel: el borde exterior, quieto. Es lo unico que no se mueve, y
   por eso el resto se lee como movimiento. */
.pta-bisel{ stroke:rgba(255,255,255,.07); stroke-width:1 }

/* Las marcas de graduacion. 72 rayitas: las suficientes para que el
   giro se lea sin que parezcan una linea continua. */
.pta-marcas{
  stroke:rgba(255,255,255,.26);
  stroke-width:1.6;
  stroke-linecap:round;
}

.pta-runa{
  stroke:url(#pta-fusion);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:.85;
  transition:stroke var(--normal) var(--ease), opacity var(--normal);
}
.pta-runa--corta{ stroke-width:1; opacity:.45 }

.pta-mota{ fill:#E9DDF6; opacity:.75 }

/* El arco que se llena al escribir. Va por fuera de todo y con el trazo
   mas grueso: es el unico que informa de algo. */
.pta-avance{
  stroke:url(#pta-fusion);
  stroke-width:2.6;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(196,137,228,.55));
}

.pta-sello{
  position:relative; z-index:1;
  width:60%; height:auto;
  /* El emblema lleva su propio canal alfa, sacado de su brillo. Al
     principio se intento con mix-blend-mode:screen sobre el fichero
     original, pero `.pta-centro` crea su propio contexto de apilado y
     la fusion no llegaba al fondo: se veia el recuadro negro. */
  filter:drop-shadow(0 0 26px rgba(64,208,80,.45));
}

/* La onda de la llave buena: sale del centro y se come la pantalla.
   Vive aqui parada y solo la mueve el JS. */
.pta-onda{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid rgba(196,137,228,.8);
  opacity:0;
  pointer-events:none;
}

/* Llave mala: el mecanismo se pone en rojo un momento. El temblor lo
   hace el JS; esto es solo el color. */
.pta-cerradura.pta-mal .pta-runa{ stroke:var(--error); opacity:1 }
.pta-cerradura.pta-mal .pta-marcas{ stroke:rgba(255,107,107,.5) }
.pta-cerradura.pta-mal .pta-halo{ opacity:.16 }

/* --- Rotulos --------------------------------------------------------- */

/* "Arkaia Labs" entre dos rayas, una de cada color: el apellido de la
   marca, sostenido por los dos. */
.pta-marca{
  display:flex; align-items:center; gap:.85rem;
  margin-top:1.15rem;
  font-family:var(--f-marca);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--tinta-3);
}
/* letter-spacing mete el hueco DESPUES de la ultima letra, asi que el
   texto queda desplazado a la izquierda entre sus dos rayas. Se compensa
   con el mismo valor por delante. */
.pta-marca span{ padding-left:.42em }
.pta-marca::before,
.pta-marca::after{ content:''; height:1px; width:clamp(26px,5vw,48px) }
.pta-marca::before{ background:linear-gradient(90deg,transparent,rgba(157,78,221,.7)) }
.pta-marca::after{ background:linear-gradient(90deg,rgba(64,208,80,.6),transparent) }

.pta-titulo{
  margin-top:1.7rem;
  font-family:var(--f-marca);
  font-size:clamp(1.45rem,3vw,2.05rem);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.15;
  color:#fff;
  text-shadow:0 0 28px rgba(178,101,205,.30);
}
/* La palabra que importa, con los dos colores. */
.pta-titulo em{
  font-style:normal;
  background:linear-gradient(100deg,var(--violeta),var(--acento-vivo) 45%,var(--marca-verde));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.pta-texto{
  margin:.7rem 0 0;
  max-width:34ch;
  font-size:1rem;
  font-weight:500;
  line-height:1.5;
  color:var(--tinta-2);
}

/* El hilo que baja de la cerradura a la placa. La chispa que lo recorre
   la mueve el JS. */
.pta-hilo{
  position:relative;
  width:1px; height:clamp(26px,4.5vh,44px);
  margin:1.1rem 0 1.05rem;
  background:linear-gradient(180deg,transparent,rgba(196,137,228,.42),transparent);
}
.pta-hilo i{
  position:absolute; left:-1.5px; top:0;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--acento-vivo);
  box-shadow:0 0 8px var(--acento-vivo);
  opacity:0;
}

/* --- La placa de la llave -------------------------------------------- */

/* El formulario deja de ser texto suelto y pasa a ser una pieza montada
   en la puerta: un rectangulo con su borde, su brillo arriba y su
   sombra. Asi la llave tiene donde meterse. */
.pta-placa{
  position:relative;
  width:100%;
  padding:1.5rem clamp(1.1rem,2.5vw,1.6rem) 1.4rem;
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));
  box-shadow:0 24px 60px -30px #000, inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
/* El filo de arriba, con los dos colores otra vez: la placa esta
   encajada justo en la juntura. */
.pta-placa::before{
  content:''; position:absolute; top:-1px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,var(--violeta),var(--marca-verde),transparent);
  opacity:.75;
}

.pta-centro .form{
  width:100%;
  display:flex; flex-direction:column; gap:1rem;
}

.vista-maestra .campo-eti{
  justify-content:center;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  padding-left:.18em;         /* el hueco de la ultima letra, ver .pta-marca */
  text-transform:uppercase;
  color:var(--tinta-3);
}
.vista-maestra .campo input{
  height:48px;
  font-family:var(--f-arisa);
  font-weight:500;
  text-align:center;
  letter-spacing:.3em;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* El boton de mostrar no puede empujar al centro un texto centrado, asi
   que el campo compensa por los dos lados. */
.vista-maestra .campo-caja input{ padding-left:4.25rem }

.vista-maestra .boton--principal{
  height:50px;
  font-family:var(--f-marca);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff;
  /* Los dos colores tambien aqui: abrir es cosa de los dos. */
  background:linear-gradient(100deg,var(--violeta),var(--lila) 52%,#2FA83E);
  box-shadow:0 10px 30px -12px rgba(157,78,221,.75);
}
.vista-maestra .boton--principal:hover{ filter:brightness(1.12) }
.vista-maestra .boton--principal span{ padding-left:.2em }

/* ---------------------------------------------------------------------
   Pantallas bajas: el mecanismo es lo primero que cede. Un portatil de
   768px de alto no tiene sitio para la cerradura grande, el texto y la
   placa a la vez.
   --------------------------------------------------------------------- */
@media (max-height:860px) and (min-width:901px){
  .pta-centro{ --cerr:214px }
  .pta-titulo{ margin-top:1.3rem }
  .pta-hilo{ margin:.85rem 0 .8rem; height:24px }
}
@media (max-height:720px) and (min-width:901px){
  .pta-centro{ --cerr:180px }
  /* A esta altura el sello ya no puede con CORPORATION, asi que el
     rotulo de debajo pasa a ser el que nombra la marca. */
  .pta-texto{ display:none }
  .pta-hilo{ display:none }
  .pta-placa{ margin-top:1.2rem }
}

/* ---------------------------------------------------------------------
   Estrecho: no caben tres columnas. Los dos pasan a ser un fondo
   partido -ella arriba a la izquierda, el arriba a la derecha- y la
   llave va debajo, encima del negro.

   Y sin scroll: la puerta es una pantalla, no una pagina. La fila de
   arriba es la que cede -1fr de lo que sobre-, asi que la columna del
   centro nunca empuja nada fuera. Lo que hace que quepa es que el
   mecanismo se mide en vh y que el texto de apoyo desaparece cuando ya
   no hay sitio para el.
   --------------------------------------------------------------------- */
@media (max-width:900px){
  body.vista-maestra{ overflow:hidden }
  .pta{
    grid-template-columns:1fr 1fr;
    /* La primera fila se queda con lo que sobre; la segunda, la que
       importa, pide lo que necesita. minmax(0,...) y no 1fr a secas para
       que pueda encogerse de verdad en pantallas bajas. */
    grid-template-rows:minmax(0,1fr) auto;
    height:100dvh; min-height:0;
  }
  .pta-lado{ grid-row:1 }
  .pta-lado [data-foto]{ object-position:50% 18%; transform:scale(1.04) }
  /* Aqui se ve el alto completo del video -el recorte tambien es lateral-,
     asi que asoma la franja negra que su retrato lleva abajo desde que se
     alineo con el de ella, y el sale mas lejos. Se compensa acercandolo,
     con el origen en su cara para que no se le vaya la cabeza fuera. */
  .pta-lado--el [data-foto]{ transform:scale(1.24); transform-origin:50% 32% }

  /* Aqui los dos quedan pegados y el corte entre ellos se lee como un
     fallo. Una junta fina lo convierte en algo hecho a proposito. */
  .pta-lado--el{ position:relative }
  .pta-lado--el::before{
    content:''; position:absolute; z-index:2;
    top:0; bottom:0; left:0; width:1px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.22) 45%,transparent);
  }

  /* La franja de arriba va mas cerrada que en escritorio: ahi es donde
     estan ahora los nombres, y el de ella caia sobre su pelo magenta. */
  .pta-velo{
    background-image:
      linear-gradient(180deg,rgba(7,7,10,.8),rgba(7,7,10,.2) 20%,transparent 38%,rgba(7,7,10,.9) 88%,var(--fondo) 100%)
      !important;
  }

  /* Con la misma especificidad que las reglas de escritorio
     (.pta-lado--ella .pta-nombre): si no, aquellas ganan y el nombre de
     ella se queda pegado al borde en vez de centrarse.

     Y arriba, no abajo: el borde de abajo es por donde asoma la
     cerradura, y el aro exterior les pasaba justo por encima. */
  .pta-lado .pta-nombre{
    writing-mode:horizontal-tb;
    top:.85rem; bottom:auto; left:50%; right:auto;
    transform:translateX(-50%);
    font-size:.66rem; letter-spacing:.3em;
    color:var(--tinta);
  }

  .pta-centro{
    /* El mecanismo se mide contra el alto de la pantalla, que es lo que
       escasea aqui. El tope de abajo es el que decide que quepa en un
       movil pequeno. */
    --cerr:clamp(146px,23vh,196px);
    grid-column:1 / -1; grid-row:2;
    padding:0 1.35rem clamp(1.25rem,2.8vh,1.9rem);
    margin-top:-2.25rem;
  }
  /* Aqui no hay dos hojas que separar: la juntura no significa nada. */
  .pta-centro::before,
  .pta-centro::after{ display:none }

  .pta-marca{ margin-top:.9rem; font-size:.66rem }
  .pta-hilo{ margin:.8rem 0 .75rem; height:22px }
  .pta-placa{ padding:1.25rem 1.1rem 1.15rem }
  .pta-centro .form{ gap:.85rem }
  .pta-titulo{ margin-top:1.2rem; font-size:1.4rem }
  .pta-texto{ margin-top:.5rem; font-size:.95rem; line-height:1.45 }
}

/* Movil bajo: lo primero que sobra es el hilo, que es puro adorno. */
@media (max-width:900px) and (max-height:750px){
  .pta-hilo{ display:none }
  .pta-placa{ margin-top:.9rem }
  .pta-titulo{ margin-top:1rem; font-size:1.3rem }
}

/* Movil muy bajo: se va tambien el parrafo. El titular basta para
   entender que se pide, y la alternativa seria hacer scroll. */
@media (max-width:900px) and (max-height:670px){
  .pta-texto{ display:none }
  .pta-marca{ margin-top:.7rem }
}

/* ---------------------------------------------------------------------
   Movil apaisado. Aqui el fondo partido no vale: la fila de las fotos se
   queda en una tira de nada y parece un fallo. Un apaisado es justo lo
   que pide el reparto original -uno a cada lado-, asi que vuelven las
   tres columnas; lo que no hay es alto, y de eso se encarga quitar todo
   lo que no sea el sello, la llave y el titular.
   --------------------------------------------------------------------- */
@media (max-width:900px) and (max-height:520px){
  .pta{
    grid-template-columns:1fr minmax(258px,360px) 1fr;
    grid-template-rows:100dvh;
  }
  .pta-lado{ grid-row:1 }
  .pta-lado--ella{ grid-column:1 }
  .pta-lado--el{ grid-column:3 }
  .pta-lado [data-foto]{ object-position:50% 26%; transform:scale(1.1) }
  .pta-lado--el [data-foto]{ transform:scale(1.1); transform-origin:50% 50% }
  /* La junta central era para cuando estaban pegados; aqui no lo estan. */
  .pta-lado--el::before{ display:none }

  /* Vuelve el velo lateral: cada lado se apaga hacia el centro. Lleva
     !important porque el bloque de movil de arriba tambien lo lleva. */
  .pta-lado--ella .pta-velo{
    background-image:
      linear-gradient(90deg,transparent 30%,rgba(7,7,10,.72) 78%,var(--fondo) 100%),
      linear-gradient(180deg,rgba(7,7,10,.6),transparent 28%,transparent 64%,rgba(7,7,10,.85))
      !important;
  }
  .pta-lado--el .pta-velo{
    background-image:
      linear-gradient(270deg,transparent 30%,rgba(7,7,10,.72) 78%,var(--fondo) 100%),
      linear-gradient(180deg,rgba(7,7,10,.6),transparent 28%,transparent 64%,rgba(7,7,10,.85))
      !important;
  }

  /* Los nombres vuelven a la vertical, pegados al borde de fuera. */
  .pta-lado .pta-nombre{
    writing-mode:vertical-rl;
    top:auto; bottom:1.2rem; left:auto; right:auto;
    transform:none;
    font-size:.6rem; letter-spacing:.34em;
    color:var(--tinta-2);
  }
  .pta-lado--ella .pta-nombre{ left:.9rem }
  .pta-lado--el .pta-nombre{ right:.9rem; transform:rotate(180deg) }

  .pta-centro{
    --cerr:clamp(116px,30vh,152px);
    grid-column:2; grid-row:1;
    margin-top:0;
    padding:.6rem 1rem;
  }
  .pta-centro::before,
  .pta-centro::after{ display:block }
  .pta-marca,
  .pta-hilo,
  .pta-texto{ display:none }
  .pta-titulo{ margin-top:.85rem; font-size:1.15rem }
  .pta-placa{ padding:1rem 1rem .95rem; margin-top:.85rem }
  .pta-centro .form{ gap:.75rem }
}