:root{
  --ink:#0b3760;
  --ink-soft:#4d6f8d;
  --line:#bfdcef;
  --glass:rgba(255,255,255,.46);
  --brand-a:#0aa6dd;
  --brand-b:#0fbd8b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#e4f4fd;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}

/* ---------- Escenario ---------- */
.stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:100vh;
  min-height:100dvh;
  padding:0 clamp(20px,3.4vw,64px);
  overflow:hidden;
  background:
    radial-gradient(38% 34% at 6% 96%,rgba(126,196,120,.32) 0%,rgba(126,196,120,0) 70%),
    radial-gradient(42% 38% at 20% 6%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(70% 60% at 8% 88%,#ffffff 0%,rgba(255,255,255,0) 60%),
    radial-gradient(60% 55% at 88% 6%,#cdeeff 0%,rgba(205,238,255,0) 65%),
    linear-gradient(155deg,#eef9ff 0%,#dceffb 45%,#e6f6fd 100%);
}
.bg-waves{position:absolute;inset:0;z-index:0;pointer-events:none}
.bg-waves svg{width:100%;height:100%;display:block}

/* ---------- Marca ---------- */
.brand-logo{
  position:absolute;
  z-index:4;
  top:clamp(14px,2.4vh,34px);
  left:clamp(16px,2.6vw,48px);
  width:clamp(140px,15vw,250px);
  height:auto;
}

/* ---------- Fotografía ---------- */
.photo{
  position:absolute;
  z-index:1;
  left:clamp(30px,9vw,190px);
  bottom:0;
  height:88%;
  display:flex;
  align-items:flex-end;
  pointer-events:none;
}
.photo .doctor{
  height:100%;
  width:auto;
  max-width:min(56vw,820px);
  object-fit:contain;
  object-position:bottom left;
  filter:drop-shadow(0 26px 40px rgba(10,60,100,.16));
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0%,#000 7%,#000 100%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 0%,#000 7%,#000 100%);
}

/* ---------- Iconos flotantes ---------- */
.rail{position:absolute;z-index:2;inset:0;pointer-events:none}
.chip{
  position:absolute;
  display:grid;
  place-items:center;
  color:#3ecbe6;
  border-radius:24%;
  background:linear-gradient(150deg,rgba(255,255,255,.42),rgba(180,232,252,.22));
  border:2px solid rgba(255,255,255,.92);
  box-shadow:
    0 16px 36px rgba(10,92,132,.22),
    inset 0 3px 12px rgba(255,255,255,.95),
    inset 0 -6px 14px rgba(120,205,235,.35);
  backdrop-filter:blur(8px) saturate(1.2);
}
.chip:before{
  content:"";
  position:absolute;
  inset:7% 7% 48% 7%;
  border-radius:22% 22% 42% 42%;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));
  pointer-events:none;
}
.chip svg{position:relative;width:56%;height:56%;filter:drop-shadow(0 1px 3px rgba(0,120,165,.55))}
.c1{width:clamp(66px,6.4vw,108px);aspect-ratio:1;left:43.5%;top:14%;transform:rotate(-4deg);color:#42e0f5}
.c2{width:clamp(60px,5.9vw,100px);aspect-ratio:1;left:40.5%;top:31%;transform:rotate(-6deg);color:#7fe2f7}
.c3{width:clamp(62px,6vw,102px);aspect-ratio:1;left:45%;top:44%;transform:rotate(3deg);color:#e9fdff}
.c4{width:clamp(56px,5.4vw,92px);aspect-ratio:1;left:42%;top:58%;transform:rotate(-5deg);color:#9ce9fb}

/* ---------- Tarjeta ---------- */
.card{
  position:relative;
  z-index:5;
  width:min(100%,clamp(420px,40vw,700px));
  padding:clamp(26px,3vw,48px) clamp(22px,3vw,46px);
  border-radius:clamp(22px,2.2vw,38px);
  background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(226,244,254,.34));
  border:1.5px solid rgba(255,255,255,.95);
  box-shadow:
    0 30px 80px rgba(9,64,104,.18),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 60px rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(1.2);
}
.card h1{
  margin:0;
  font-size:clamp(32px,3.2vw,56px);
  font-weight:700;
  letter-spacing:-.5px;
  text-align:center;
  color:#0a3a63;
}
.subtitle{
  margin:8px 0 clamp(20px,2.4vw,34px);
  text-align:center;
  font-size:clamp(14px,1.25vw,21px);
  font-weight:500;
  color:var(--ink-soft);
}

/* ---------- Campos ---------- */
.field{
  display:flex;
  align-items:center;
  gap:clamp(10px,1vw,16px);
  height:clamp(52px,4vw,68px);
  padding:0 clamp(12px,1.4vw,22px);
  margin-bottom:clamp(12px,1.2vw,18px);
  background:rgba(255,255,255,.72);
  border:1.5px solid rgba(181,214,235,.85);
  border-radius:clamp(12px,.9vw,16px);
  transition:border-color .15s,box-shadow .15s;
}
.field:focus-within{border-color:#3cc4e8;box-shadow:0 0 0 3px rgba(60,196,232,.18)}
.field-icon{display:grid;place-items:center;color:#5d7f9b}
.field-icon svg{width:clamp(18px,1.4vw,23px);height:auto}
.field input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:clamp(15px,1.1vw,19px);
  font-weight:500;
  color:#123e66;
}
.field input::placeholder{color:#5c7d99;font-weight:500}
.eye{
  display:grid;place-items:center;
  width:38px;height:38px;
  padding:0;border:0;border-radius:10px;
  background:transparent;color:#5d7f9b;cursor:pointer;
}
.eye svg{width:22px;height:22px}
.eye:hover{background:rgba(255,255,255,.7)}

/* ---------- Opciones ---------- */
.options{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:2px 0 clamp(16px,1.8vw,24px);
  font-size:clamp(12.5px,.95vw,17px);
  font-weight:500;
  color:#20486c;
}
.remember{display:flex;align-items:center;gap:9px;white-space:nowrap}
.remember input{width:19px;height:19px;margin:0;accent-color:#11a7c9;border-radius:5px}
.options a{color:#0b62c4;text-decoration:none;font-weight:600}
.options a:hover{text-decoration:underline}

/* ---------- Botón ---------- */
.submit{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;
  height:clamp(52px,4.4vw,76px);
  border:0;border-radius:clamp(13px,1vw,17px);
  background:linear-gradient(92deg,#0aa6dd 0%,#0aabb4 45%,#10bf8b 100%);
  color:#fff;
  font-size:clamp(17px,1.35vw,23px);
  font-weight:700;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(10,164,196,.36);
  transition:filter .15s,transform .05s;
}
.submit svg{width:clamp(20px,1.4vw,24px);height:auto}
.submit:hover{filter:brightness(1.05)}
.submit:active{transform:translateY(1px)}
.submit:disabled{opacity:.65;cursor:wait}

.message{min-height:1.1em;margin:8px 0 0;font-size:13px;text-align:center;color:#a3273c}

/* ---------- Pie de la tarjeta ---------- */
.divider{display:flex;align-items:center;gap:16px;margin:clamp(16px,1.8vw,26px) 0 12px;color:#123f66;font-weight:700;font-size:clamp(15px,1.05vw,20px)}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(18,63,102,0),rgba(18,63,102,.35),rgba(18,63,102,0))}
.secure{display:flex;align-items:center;justify-content:center;gap:9px;margin:0;color:#4a6d8b;font-size:clamp(13px,.95vw,17px);font-weight:500}
.secure svg{width:clamp(16px,1.05vw,19px);height:auto}

/* ---------- Tablet y móvil ---------- */
@media (max-width:1040px){
  .stage{
    display:block;
    padding:0 clamp(14px,4vw,28px) clamp(20px,4vw,32px);
    min-height:100dvh;
  }
  .brand-logo{
    position:relative;
    display:block;
    margin:14px auto 6px;
    width:clamp(120px,32vw,170px);
  }
  .rail{display:none}
  .photo{
    position:relative;
    left:auto;bottom:auto;
    height:clamp(210px,34vh,330px);
    justify-content:center;
    align-items:flex-end;
    overflow:hidden;
    margin:0 auto;
  }
  .photo .doctor{
    height:100%;
    width:auto;
    max-width:100%;
    -webkit-mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,0) 100%);
  }
  .card{
    width:100%;
    max-width:520px;
    margin:-6px auto 0;
    padding:24px 20px;
    border-radius:24px;
  }
  .card h1{font-size:clamp(26px,6vw,32px)}
  .subtitle{font-size:14.5px;margin-bottom:20px}
  .field{height:54px;margin-bottom:12px;border-radius:13px}
  .field input{font-size:15.5px}
  .options{font-size:13px;margin-bottom:16px}
  .submit{height:54px;font-size:16.5px;border-radius:13px}
  .divider{font-size:15px;margin:16px 0 10px}
  .secure{font-size:12.5px}
}

@media (max-width:420px){
  .photo{height:clamp(190px,30vh,260px)}
  .card{padding:20px 16px}
  .options{flex-wrap:wrap;row-gap:6px}
}

@media (max-height:700px) and (min-width:1041px){
  .card{padding:24px 34px}
  .subtitle{margin:6px 0 18px}
  .field{height:54px;margin-bottom:12px}
  .options{margin-bottom:16px}
  .submit{height:58px}
  .divider{margin:14px 0 8px}
}