/* La puerta del espacio: una tarjeta partida en diagonal.
   Al cambiar de Entrar a Crear cuenta, la hoja verde barre la tarjeta y
   descubre el otro formulario. Colores y tipografias, las de su web. */

.escena{
  min-height:calc(100vh - 75px);
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,54px) 0 clamp(40px,7vw,80px);
}

/* Geometría de la hoja, que es lo único delicado de esta pantalla.
   Al inclinarla, sus bordes dejan de ser verticales: con -6 grados y esta
   altura, cada esquina se desplaza unos 32 px (un 3,3 % de la tarjeta).
   Por eso el formulario ocupa el 42 % y la hoja se pasa de largo: para que
   ni en la esquina peor la diagonal llegue a tapar una letra. */
.auth{
  --sesgo:-6deg;         /* lo inclinada que va */
  --barrido:0%;          /* 0% = la hoja tapa la derecha */
  --hoja:59%;            /* lo ancha que es */
  position:relative;
  width:min(100%,980px);
  min-height:552px;
  border-radius:26px;
  overflow:hidden;
  background:var(--blanco);
  box-shadow:0 2px 4px #08676c10, 0 40px 90px -46px #08676c66;
  isolation:isolate;
}
/* -93,2 % de 59 % = 55 % de la tarjeta: el borde derecho pasa de 106 % a 51 %. */
.auth[data-modo="crear"]{ --barrido:-93.2%; }

/* --- la hoja verde --------------------------------------------------------- */
/* Va mas alta y mas ancha que la tarjeta: al inclinarla, las esquinas
   se saldrian y asomaria el blanco por detras. */
.hoja{
  position:absolute;
  top:-7%; bottom:-7%; left:47%;
  width:var(--hoja);
  overflow:hidden;
  transform:translateX(var(--barrido)) skewX(var(--sesgo));
  transition:transform 1.05s var(--ease);
  will-change:transform;
  z-index:2;
}
/* Dentro, todo se des-inclina para que el texto salga recto.
   Aqui SOLO se des-inclina: el degradado no se mueve nunca. Si se le pone
   tambien el desplazamiento, el verde se va con el y media hoja se queda
   en blanco. El vaiven es cosa del texto, y va aparte. */
.hoja__interior{
  position:absolute;
  /* Se pasa un 8 % por cada lado. Al des-inclinarlo deja de ser un
     paralelogramo y se convierte en rectangulo, y sin ese margen quedan
     dos cuñas sin cubrir por las que se ve el blanco de la tarjeta. */
  inset:0 -8%;
  transform:skewX(calc(-1 * var(--sesgo)));
  background:
    radial-gradient(120% 90% at 82% 8%, #0f9a97 0%, transparent 58%),
    linear-gradient(152deg, #07595e 0%, var(--pine) 42%, #0a7d80 100%);
  /* La foto va en soft-light: sin aislar, se mezclaria con el blanco de la
     tarjeta que hay detras y dejaba una franja gris junto a la diagonal. */
  isolation:isolate;
}
/* --- su hoja sobre el agua -------------------------------------------------- */
/* La foto de su portada, muy bajada, para que el verde tenga fondo y no sea
   un color plano. Se arrastra despacio con el barrido: da profundidad. */
.hoja__agua{
  position:absolute; inset:-8% -14%;
  background:url('img/hoja-hero.webp') center/cover no-repeat;
  opacity:.28;
  mix-blend-mode:soft-light;
  transform:translateX(calc(-0.3 * var(--barrido))) scale(1.04);
  transition:transform 1.3s var(--ease);
  pointer-events:none;
}

/* Las hojas sueltas. Cada una con su tamaño, su giro y su ritmo, para que
   no se note que son la misma repetida. Se arrastran menos que el agua,
   asi que al barrer parece que hay capas. */
.hojitas{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  transform:translateX(calc(-0.16 * var(--barrido)));
  transition:transform 1.25s var(--ease);
}
.hojita{
  position:absolute;
  background:url('img/hoja.svg') center/contain no-repeat;
  opacity:var(--velo,.12);
  transform:rotate(var(--giro,0deg));
  animation:mecer var(--tarda,22s) ease-in-out var(--espera,0s) infinite;
  will-change:transform;
}
/* Caer no: mecerse. Es una consulta, no una pantalla de carga. */
@keyframes mecer{
  0%   {transform:translate3d(0,0,0)        rotate(var(--giro))}
  25%  {transform:translate3d(10px,-14px,0) rotate(calc(var(--giro) + 7deg))}
  50%  {transform:translate3d(-6px,-22px,0) rotate(calc(var(--giro) - 5deg))}
  75%  {transform:translate3d(-12px,-9px,0) rotate(calc(var(--giro) + 3deg))}
  100% {transform:translate3d(0,0,0)        rotate(var(--giro))}
}
/* Al cambiar de formulario, una racha: se avivan un momento y vuelven. */
.auth.racha .hojita{animation-duration:calc(var(--tarda) / 3.4)}
.auth.racha .hojita{opacity:calc(var(--velo) * 1.75)}

/* El agua: dos circulos muy suaves, como los de su web. */
.hoja__interior::before,
.hoja__interior::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:1;
}
.hoja__interior::before{
  width:360px;height:360px;right:-120px;bottom:-140px;
  background:#ffffff12;
}
.hoja__interior::after{
  width:170px;height:170px;right:110px;top:-56px;
  background:#b9d6d21f;
}

/* El texto va centrado en la hoja, con hueco de sobra a los dos lados: la
   diagonal se come unos 32 px por esquina y da igual hacia que lado mire. */
.hoja__texto{
  position:absolute;z-index:2;
  top:50%; left:0; right:0;
  padding:0 clamp(40px,5.2vw,74px);
  color:var(--cream);
  /* un vaiven corto, solo para que no parezca pegado a la hoja */
  transform:translateY(-50%) translateX(calc(-0.1 * var(--barrido)));
  transition:transform 1.05s var(--ease);
}
.hoja__dicho{
  position:absolute; inset:auto 0 auto 0;
  padding:inherit;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.hoja__dicho[data-para="entrar"]{ transition-delay:.22s }
.auth[data-modo="entrar"] .hoja__dicho[data-para="entrar"],
.auth[data-modo="crear"]  .hoja__dicho[data-para="crear"]{
  opacity:1; transform:translateY(0); position:relative;
}
.hoja__marca{
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:#f3f0e7a8;margin:0 0 18px;
}
.hoja__titular{
  font-family:'Cormorant Garamond','Ohlala Type',Georgia,serif;
  font-weight:400;font-size:clamp(38px,4.6vw,58px);
  line-height:1.02;letter-spacing:-.035em;
  color:var(--cream);margin:0 0 16px;
}
.hoja__titular em{font-style:italic}
.hoja__titular{max-width:12ch}
.hoja__pie{
  color:#f3f0e7c4;font-size:15.5px;line-height:1.6;
  margin:0;max-width:27ch;
}

/* --- los dos formularios --------------------------------------------------- */
/* Los dos formularios comparten la misma casilla de la rejilla: se apilan uno
   encima del otro y la tarjeta crece hasta el mas alto de los dos. Antes iban
   en absolute con alto fijo y el de crear cuenta, que tiene un campo mas, se
   salia por arriba de la tarjeta. */
.paneles{
  position:relative;z-index:3;
  display:grid;
  min-height:552px;
}
.panel{
  grid-area:1/1;
  width:42%;
  justify-self:start;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,4vw,48px) clamp(26px,3.6vw,46px);
  opacity:0;visibility:hidden;
  transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .7s var(--ease), visibility 0s .6s;
}
.panel[data-panel="crear"]{ justify-self:end }
.auth[data-modo="entrar"] .panel[data-panel="entrar"],
.auth[data-modo="crear"]  .panel[data-panel="crear"]{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .55s var(--ease) .34s, transform .8s var(--ease) .34s, visibility 0s;
}

.panel__titulo{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(28px,3vw,36px);font-weight:400;
  letter-spacing:-.03em;color:var(--pine);
  margin:0 0 4px;position:relative;display:inline-block;
}
.panel__titulo::after{
  content:"";position:absolute;left:0;right:34%;bottom:-7px;height:2px;
  background:var(--copper);border-radius:2px;
  transform-origin:left;transform:scaleX(0);
  transition:transform .7s var(--ease) .5s;
}
.auth[data-modo="entrar"] .panel[data-panel="entrar"] .panel__titulo::after,
.auth[data-modo="crear"]  .panel[data-panel="crear"]  .panel__titulo::after{
  transform:scaleX(1);
}
.panel__nota{color:var(--suave);font-size:14.5px;margin:14px 0 26px}

/* Campos con raya, no con caja: mas cerca de como respira su web. */
.linea{position:relative;margin:0 0 22px}
.linea input,
.linea select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--line);
  border-radius:0;padding:10px 30px 10px 0;
  transition:border-color .3s var(--ease);
}
.linea input::placeholder{color:#8a9a9673}
.linea input:focus,
.linea select:focus{outline:none;border-bottom-color:var(--teal);box-shadow:none}
.linea label{
  font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--suave);margin:0 0 2px;display:block;
}
.linea__icono{
  position:absolute;right:2px;bottom:11px;width:18px;height:18px;
  color:#8a9a9690;pointer-events:none;
}
.linea__ojo{
  position:absolute;right:-8px;bottom:-3px;
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:none;padding:0;cursor:pointer;color:var(--suave);
  line-height:0;border-radius:10px;
}
.linea__ojo:hover{color:var(--teal)}
.linea__ojo svg{width:18px;height:18px}

.panel .button{width:100%;justify-content:center;margin-top:6px}
.panel__pie{
  margin:22px 0 0;font-size:14.5px;color:var(--suave);
}
.panel__pie button{
  min-height:44px;display:inline-flex;align-items:center;
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:var(--pine);font-weight:600;
  border-bottom:1px solid var(--copper);
}
.panel__pie button:hover{color:var(--teal)}
.panel__enlaces{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin:-6px 0 22px;font-size:13.5px;
}
.panel__enlaces a{min-height:44px;display:inline-flex;align-items:center;color:var(--copper)}
.recuerdame{
  min-height:44px;display:flex;align-items:center;gap:8px;
  color:var(--suave);font-size:13.5px;cursor:pointer;
}
.recuerdame input{
  width:44px;height:44px;flex:0 0 44px;margin:0 -11px;
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;font-size:16px;
  background:center/44px 44px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='12' y='12' width='20' height='20' rx='4' fill='white' stroke='%2308676c' stroke-width='2'/%3E%3C/svg%3E");
}
.recuerdame input:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='12' y='12' width='20' height='20' rx='4' fill='%2308676c'/%3E%3Cpath d='M17 22.5l4 4 7-8' fill='none' stroke='%23f3f0e7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.recuerdame input:focus-visible{outline:2px solid var(--copper);outline-offset:-8px;border-radius:14px}

.panel .aviso{margin:0 0 20px;font-size:14px}

/* --- movil ------------------------------------------------------------------ */
/* En una pantalla estrecha la diagonal no cabe: la hoja pasa a ser una franja
   arriba, sin inclinar, y los formularios van debajo. */
@media(max-width:860px){
  .escena{padding:16px 0 40px}
  .auth{
    --sesgo:0deg;
    --barrido:0%;
    min-height:0;
    display:block;
    border-radius:20px;
  }
  .auth[data-modo="crear"]{ --barrido:0% }
  .hoja{
    position:relative;
    top:0;bottom:0;left:0;width:100%;
    height:216px;
    transform:none;
  }
  .hoja__interior{inset:0;transform:none}
  .hoja__texto{transform:translateY(-50%)}
  .hoja__agua{inset:0;transform:none}
  .hojitas{transform:none}
  .hojita:nth-child(n+4){display:none}
  .hoja__interior::before{width:230px;height:230px;right:-90px;bottom:-110px}
  .hoja__interior::after{width:110px;height:110px;right:60px;top:-40px}
  .hoja__texto{padding:0 24px}
  .hoja__titular{font-size:clamp(30px,8vw,40px)}
  .hoja__pie{font-size:14.5px}
  .paneles{min-height:0}
  .paneles{display:block;min-height:0}
  .panel{
    grid-area:auto;width:100%;justify-self:stretch;
    padding:28px 24px 34px;
    display:none;
  }
  .auth[data-modo="entrar"] .panel[data-panel="entrar"],
  .auth[data-modo="crear"]  .panel[data-panel="crear"]{display:flex}
}

/* Sin JavaScript se ven los dos, uno debajo del otro: siguen funcionando. */
.auth.sin-js .paneles{display:block;min-height:0}
.auth.sin-js .panel{grid-area:auto;width:100%;justify-self:stretch;opacity:1;visibility:visible;
  transform:none;display:flex;border-top:1px solid var(--line)}
.auth.sin-js .hoja{display:none}

@media(prefers-reduced-motion:reduce){
  .hoja,.hoja__interior,.hoja__texto,.hoja__agua,.hojitas,
  .panel,.hoja__dicho,.panel__titulo::after{
    transition-duration:.01ms !important;transition-delay:0s !important;
  }
  .hojita{animation:none !important}
}