/* INDIGO+TR — login.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Roboto',sans-serif;overflow:hidden}

.page{display:grid;grid-template-columns:1fr 1fr;height:100vh}

/* LEFT */
.left{background:#FEFEFF;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 80px;animation:slideInLeft 0.85s cubic-bezier(0.22,1,0.36,1) both}
#loginForm{width:100%;max-width:364px;display:flex;flex-direction:column;align-items:center}
@keyframes slideInLeft{from{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.brand{display:flex;align-items:center;gap:13px;margin-bottom:23px;opacity:0;animation:fadeUp 0.6s 0.35s cubic-bezier(0.22,1,0.36,1) forwards}
.brand-dot{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 35% 35%,#00D3F3,#005B99)}
.brand-name{font-weight:700;font-size:2rem;color:#314158}
.subtitle{font-size:13px;color:#314158;text-align:center;margin-bottom:27px;max-width:364px;opacity:0;animation:fadeUp 0.6s 0.5s cubic-bezier(0.22,1,0.36,1) forwards}
.alert-error{width:100%;max-width:380px;background:#fee2e2;border:1px solid #fca5a5;color:#dc2626;padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:16px}

.form-group{width:100%;max-width:364px;margin-bottom:18px}
.form-group:nth-child(2){opacity:0;animation:fadeUp 0.6s 0.6s cubic-bezier(0.22,1,0.36,1) forwards}
.form-group:nth-child(3){opacity:0;animation:fadeUp 0.6s 0.7s cubic-bezier(0.22,1,0.36,1) forwards}

.input-wrapper{position:relative}
.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#6b7280;width:20px;height:20px;pointer-events:none}
.form-input{width:100%;padding:0 16px 0 48px;height:52px;background:#EDF8FF;border-radius:16px;font-family:'Roboto',sans-serif;font-size:13px;color:#1C1C1C;outline:none;border:2px solid transparent;transition:background 0.3s,border-color 0.3s,box-shadow 0.3s}
.form-input::placeholder{color:#1C1C1C}
.form-input:focus{background:#fff;border-color:#00D3F3;box-shadow:0 0 0 3px rgba(0,211,243,0.13)}

.btn-login{width:164px;height:52px;margin-top:16px;background:linear-gradient(90deg,#005B99 0%,#00D3F3 100%);color:#fff;font-family:'Roboto',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:0.03em;border:none;border-radius:26px;cursor:pointer;position:relative;overflow:hidden;transition:transform 0.2s,box-shadow 0.3s;opacity:0;animation:fadeUp 0.6s 0.85s cubic-bezier(0.22,1,0.36,1) forwards;display:block}
.btn-login::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#00D3F3 0%,#005B99 100%);opacity:0;transition:opacity 0.4s}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,91,153,0.38)}
.btn-login:hover::before{opacity:1}
.btn-login:disabled{opacity:0.7;cursor:not-allowed;transform:none}
.btn-login span{position:relative;z-index:1}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.32);transform:scale(0);animation:rippleAnim 0.55s linear;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* RIGHT */
.right{position:relative;overflow:visible;background:linear-gradient(135deg,#005B99 0%,#00D3F3 100%);animation:fadeIn 1s 0.1s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* TRAMA — posición exacta del Figma */
.trama-wrap{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
#trama{position:absolute;left:-100%;bottom:-125px;transform:scale(1.3);opacity:1;pointer-events:none}

/* PROMO — ocupa todo el .right, los elementos hijos se posicionan dentro */
.promo{position:absolute;top:0;left:0;right:0;bottom:0;z-index:9;animation:promoIn 1s 0.3s cubic-bezier(0.22,1,0.36,1) both}
@keyframes promoIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* CARD — Figma: 297x620, sangra levemente por la izquierda del panel */
/* left:-5% hace que sangre ~5% hacia el panel izquierdo, overflow:hidden del .right la recorta */
.text-card{
  position:absolute;
  left:-12%;
  top:8%;bottom:8%;
  width:44%;
  background:rgba(208,208,208,0.21);
  border:1px solid rgba(255,255,255,0.52);
  border-radius:46px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:40px 36px 40px 4%;
  z-index:5;
  display:flex;align-items:center
}
.typewriter-wrap{
  color:#fff;font-family:'Roboto',sans-serif;
  font-size:clamp(18px, 2.4vw, 36px);font-weight:700;line-height:1.4;
  text-shadow:0 2px 8px rgba(0,0,0,0.15);
  /* Altura fija = 5 líneas máximo — el texto aparece desde arriba sin crecer */
  height:calc(clamp(18px, 2.4vw, 36px) * 1.4 * 8);
  overflow:hidden;
  display:flex;
  align-items:flex-start
}
.cursor{display:inline-block;width:3px;height:1em;background:#00D3F3;margin-left:3px;vertical-align:middle;border-radius:2px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* FOTO — Figma: 758x467 (ratio 1.622), empieza a ~30% del panel, llega al borde derecho */
.photo-card{
  position:relative;
  width:calc(100% + 12% - 60px);
  margin-left:-12%;
  border-radius:25px;margin-right:60px;
  margin-top:19%;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,0);
  z-index:2;
  animation:photoIn 1s 0.5s cubic-bezier(0.22,1,0.36,1) both;
  height:62%
}
@keyframes photoIn{from{transform:translateX(28px);opacity:0}to{transform:translateX(0);opacity:1}}
.photo-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top
}

@media(max-width:1100px){.left{padding:40px 40px}}
@media(max-width:740px){.right{display:none}.page{grid-template-columns:1fr}.left{padding:40px 24px}}