:root{
  --bg:#0b1220; --surface:rgba(255,255,255,.94); --line:#e6eef7;
  --txt:#0f172a; --muted:#64748b; --brand:#2563eb; --brand-2:#06b6d4;
  --ok:#16a34a; --err:#dc2626; --card-radius:20px;
  --shadow-lg:0 16px 44px rgba(6,16,36,.22);
}
html,body{height:100%}
body{
  background: var(--bg);
  color: var(--txt);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-size:0.94rem;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ===== Fondo animado con degradé sutil ===== */
.page-wrap{
  min-height:100svh; display:grid; place-items:center;
  padding:clamp(12px,2vw,32px); position:relative; isolation:isolate; overflow:hidden;
}
.page-wrap::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(880px 420px at 82% -12%, rgba(59,130,246,.22), transparent 62%),
    radial-gradient(720px 360px at -12% 92%, rgba(14,165,233,.2), transparent 52%),
    linear-gradient(180deg, rgba(191,212,250,.9), rgba(0,183,255,.78)),
    url("img/tecno_lab.jpg") center/cover no-repeat fixed;
  background-size: cover; 
  transform:scale(1.02);
  filter:saturate(1.05);
}
.page-wrap::after{
  content:""; position:absolute; inset:-30% -10% -10% -10%; z-index:-1;
  background:conic-gradient(from 180deg, rgba(37,99,235,.08), rgba(6,182,212,.06), transparent 40%);
  animation: spinGlow 22s linear infinite;
}

@keyframes spinGlow { to { transform: rotate(360deg); } }

.card-shell{width:min(100%,760px); margin:auto}
.card-lab{
  border-radius:var(--card-radius); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  backdrop-filter: blur(10px) saturate(1.06);
  transform-style: preserve-3d; perspective:1000px;
  transition: box-shadow .25s ease, transform .15s ease;
}
.card-lab.hovered{ box-shadow: 0 22px 60px rgba(37,99,235,.25); }

/* Animación de entrada */
.reveal{ opacity:0; transform: translateY(14px) scale(.98); animation: fadeUp .6s ease .1s forwards }
@keyframes fadeUp{
  to{ opacity:1; transform: translateY(0) scale(1) }
}

.title{ text-align:center; text-transform:uppercase; letter-spacing:1.6px; font-weight:800; color:#1f2a44; margin-bottom:.35rem }
.lead-sm{ color:var(--muted); font-size:.92rem }

.badge-lite{
  background:linear-gradient(180deg,#f4f8ff,#f7fcff);
  border:1px solid #e3eefb; color:#0f4c81; font-weight:700; font-size:.85rem;
  transform: translateY(0); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 4px 12px rgba(15,76,129,.06);
  animation: popIn .5s ease forwards;
}
.badge-lite:hover{ transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 6px 16px rgba(15,76,129,.12) }
.badges-stagger > .badge-lite{ opacity:0 }
.badges-stagger > .badge-lite:nth-child(1){ animation-delay:.15s }
.badges-stagger > .badge-lite:nth-child(2){ animation-delay:.28s }
.badges-stagger > .badge-lite:nth-child(3){ animation-delay:.41s }
@keyframes popIn{ from{opacity:0; transform: translateY(8px) scale(.98)} to{opacity:1; transform:none} }

.form-control,.form-select{
  background:#fbfdff; border-color:#d8e5f2; color:var(--txt);
  border-radius:12px; padding:.7rem .9rem; font-size:.95rem;
  transition: box-shadow .2s ease,border-color .2s ease, transform .08s ease;
}
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(37,99,235,.18) }
.form-control:active,.form-select:active{ transform: scale(.995) }
.input-group-text{ background:#f3f8ff; border-color:#d8e5f2; color:#245d99; border-radius:12px; font-size:.95rem }

.btn-brand{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:none; color:#fff; font-weight:800; border-radius:12px;
  box-shadow:0 10px 22px rgba(37,99,235,.25);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  font-size:.98rem; padding:.85rem 1rem;
  will-change: transform;
}
.btn-brand:hover{ filter:brightness(1.06); box-shadow:0 14px 26px rgba(37,99,235,.28) }
.btn-brand:active{ transform: translateY(1px) scale(.995) }
.btn-brand:disabled{ opacity:.75; box-shadow:none }
.btn-brand .ripple{ position:absolute; border-radius:50%; transform: scale(0); animation:ripple .6s ease-out; background:rgba(255,255,255,.35); pointer-events:none }
@keyframes ripple{ to{ transform: scale(16); opacity:0 } }

.btn-wrap{ width:60%; margin-inline:auto }
@media (max-width:576px){ .btn-wrap{ width:100% } }

.toggle-link{ cursor:pointer; color:#0f74c5; font-weight:700; font-size:.92rem; display:inline-flex; align-items:center; gap:.35rem }
.toggle-link i{ transition: transform .2s ease }
.toggle-link[aria-expanded="true"] i{ transform: rotate(180deg) }

.help-row{ border-top:1px dashed #e7eef7; color:var(--muted); font-size:.92rem }
.privacy{ font-size:.85rem; color:var(--muted) }
.text-success-soft{ color:var(--ok) }
.text-danger-soft{ color:var(--err) }

/* Check animado para el mensaje de éxito */
.check{ width:22px; height:22px; vertical-align:-4px }
.check path{ stroke: var(--ok); stroke-width:3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw .6s ease forwards }
@keyframes draw{ to{ stroke-dashoffset: 0 } }

/* Modo oscuro opcional por preferencia del SO */
@media (prefers-color-scheme: dark){
  :root{ --surface:rgba(19,26,40,.86); --line:#263247; --txt:#eaf0ff; --muted:#9fb2cf }
  .title{ color:#dfe8ff }
  .badge-lite{ background:linear-gradient(180deg,#0d1a32,#0e2037); border-color:#263247; color:#bcd8ff }
  .form-control,.form-select{ background:#0e1626; border-color:#22304a }
  .input-group-text{ background:#0e1626; border-color:#22304a; color:#a6c1ff }
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important }
}

/* Logos */
.header-logos{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:28px;
}
.header-logos .logo-main{
  width:min(100%, 410px);
  height:auto;
}
.header-logos .logo-right{
  position:absolute;
  top:8px;
  left:14px;
  width:clamp(96px, 18vw, 150px);
  height:auto;
  z-index:1;
}
@media (max-width:576px){
  .header-logos{
    padding-top:42px;
  }
  .header-logos .logo-main{ width:220px }
  .header-logos .logo-right{
    width:104px;
    top:6px;
    left:10px;
  }
}