/* ============================================================
   VERCREDITOS PUBLICIDAD HTML REAL V3
   Diseño real con HTML/CSS. No usa la captura como fondo.
   ============================================================ */

.vc3-hero{
  position:relative;
  overflow:hidden;
  min-height:720px;
  padding:54px 0 62px;
  background:
    radial-gradient(circle at 18% 12%,rgba(41,150,255,.28),transparent 27%),
    radial-gradient(circle at 88% 24%,rgba(0,189,255,.15),transparent 28%),
    linear-gradient(135deg,#041946 0%,#07337e 56%,#061f54 100%);
  color:#fff;
}

.vc3-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 77% 45%,rgba(32,130,255,.15),transparent 31%),
    linear-gradient(115deg,transparent 64%,rgba(44,152,255,.08) 64.2%,transparent 64.5%);
}

.vc3-grid{
  position:relative;
  z-index:2;
  width:min(1420px,calc(100% - 44px));
  margin:0 auto;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:40px;
  align-items:center;
}

.vc3-copy{padding:18px 0 10px}

.vc3-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:36px;
}

.vc3-brand-mark{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.vc3-brand-mark img{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:12px;
}

.vc3-brand strong{
  font:900 30px/1 Montserrat,Inter,Arial,sans-serif;
  letter-spacing:-.025em;
}

.vc3-kicker{
  display:block;
  margin-bottom:16px;
  color:#63d6ff;
  font:800 13px/1.2 Montserrat,Inter,Arial,sans-serif;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.vc3-title{
  max-width:650px;
  margin:0;
  font:900 clamp(48px,5.3vw,78px)/1.02 Montserrat,Inter,Arial,sans-serif;
  letter-spacing:-.045em;
}

.vc3-title span{color:#67d3ff}

.vc3-lead{
  max-width:690px;
  margin:24px 0 28px;
  color:#dce9ff;
  font:500 18px/1.58 Inter,Arial,sans-serif;
}

.vc3-features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  max-width:690px;
}

.vc3-feature{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:13px;
  align-items:center;
  min-height:92px;
  padding:14px 16px;
  border:1px solid rgba(129,192,255,.28);
  border-radius:17px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.vc3-feature-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,#0c72eb,#35c7ff);
  color:#fff;
  font:900 17px/1 Inter,Arial,sans-serif;
}

.vc3-feature b{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font:800 16px/1.25 Inter,Arial,sans-serif;
}

.vc3-feature span{
  display:block;
  color:#bfd6f7;
  font:500 13px/1.45 Inter,Arial,sans-serif;
}

.vc3-actions{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:22px;
}

.vc3-actions a{
  min-height:54px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:14px;
  text-decoration:none;
  font:850 15px/1 Inter,Arial,sans-serif;
}

.vc3-google{
  background:#fff;
  color:#092e69;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.vc3-google-g{
  font-weight:900;
  color:#4285f4;
}

.vc3-platform{
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.055);
}

.vc3-availability{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
  color:#b9d1f2;
  font:500 13px/1.4 Inter,Arial,sans-serif;
}

.vc3-visual{
  position:relative;
  min-height:625px;
}

.vc3-window-dots{
  display:flex;
  gap:6px;
  margin-bottom:18px;
}

.vc3-window-dots i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffcc58;
}

.vc3-window-dots i:first-child{background:#ff6b57}
.vc3-window-dots i:last-child{background:#43d17a}

/* Login */
.vc3-login{
  position:absolute;
  left:4%;
  top:5%;
  width:38%;
  min-width:270px;
  padding:20px 18px 18px;
  border:1px solid rgba(107,182,255,.34);
  border-radius:22px;
  background:
    radial-gradient(circle at 72% 0,rgba(47,146,255,.24),transparent 32%),
    linear-gradient(150deg,#052459,#073b89);
  box-shadow:0 28px 55px rgba(0,0,0,.28);
  transform:rotate(1.2deg);
}

.vc3-login-logo{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  border-radius:14px;
  background:#fff;
}

.vc3-login-logo img{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:10px;
}

.vc3-login h3{
  margin:0 0 8px;
  text-align:center;
  color:#fff;
  font:900 20px/1.2 Montserrat,Inter,Arial,sans-serif;
}

.vc3-login p{
  margin:0 0 14px;
  text-align:center;
  color:#c7dbf7;
  font:500 11px/1.45 Inter,Arial,sans-serif;
}

.vc3-login-btn{
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:10px;
  background:#fff;
  color:#173564;
  font:800 12px/1 Inter,Arial,sans-serif;
}

/* Carga */
.vc3-form{
  position:absolute;
  right:0;
  top:6%;
  width:49%;
  padding:0 0 16px;
  overflow:hidden;
  border:1px solid #c8ddf7;
  border-radius:20px;
  background:#f8fbff;
  box-shadow:0 30px 65px rgba(0,0,0,.25);
  transform:rotate(2.1deg);
}

.vc3-form-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  background:#fff;
  border-bottom:1px solid #e0e9f5;
  color:#0f356a;
  font:900 13px/1 Inter,Arial,sans-serif;
}

.vc3-mini-logo{
  width:24px;
  height:24px;
  object-fit:contain;
  border-radius:7px;
}

.vc3-form-body{padding:16px}

.vc3-form h4{
  margin:0 0 5px;
  color:#133a72;
  font:900 18px/1.2 Montserrat,Inter,Arial,sans-serif;
}

.vc3-form-sub{
  margin-bottom:14px;
  color:#7285a0;
  font:500 10px/1.35 Inter,Arial,sans-serif;
}

.vc3-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:13px;
}

.vc3-step{
  padding:6px 5px;
  border-radius:8px;
  background:#edf4fd;
  color:#6f819a;
  text-align:center;
  font:700 8px/1.2 Inter,Arial,sans-serif;
}

.vc3-step.active{
  background:#0d79ef;
  color:#fff;
}

.vc3-fields{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.vc3-field span{
  display:block;
  margin-bottom:4px;
  color:#34567f;
  font:800 8px/1 Inter,Arial,sans-serif;
}

.vc3-input{
  height:30px;
  border:1px solid #cfdef0;
  border-radius:7px;
  background:#fff;
}

.vc3-upload{
  grid-column:1/-1;
  margin-top:5px;
  padding:13px;
  border:1px dashed #92c7ff;
  border-radius:10px;
  background:#f0f7ff;
  text-align:center;
  color:#3f72a8;
  font:800 9px/1.35 Inter,Arial,sans-serif;
}

.vc3-next{
  width:96px;
  height:34px;
  margin:12px 0 0 auto;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#0a7bf2;
  color:#fff;
  font:800 10px/1 Inter,Arial,sans-serif;
}

/* Dashboard */
.vc3-dashboard{
  position:absolute;
  left:10%;
  bottom:1%;
  width:68%;
  overflow:hidden;
  border:1px solid rgba(105,185,255,.32);
  border-radius:22px;
  background:#fff;
  box-shadow:0 32px 68px rgba(0,0,0,.30);
  transform:rotate(-.6deg);
}

.vc3-dash-top{
  min-height:42px;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:11px;
  background:linear-gradient(135deg,#063680,#0753b8);
  color:#fff;
}

.vc3-dash-top img{
  width:26px;
  height:26px;
  object-fit:contain;
  border-radius:7px;
  background:#fff;
}

.vc3-dash-brand{
  font:900 12px/1 Inter,Arial,sans-serif;
  margin-right:auto;
}

.vc3-dash-nav{
  display:flex;
  gap:9px;
  color:#d8e8ff;
  font:700 8px/1 Inter,Arial,sans-serif;
}

.vc3-dash-nav span:first-child{
  padding:6px 8px;
  border-radius:7px;
  background:#0b82f7;
  color:#fff;
}

.vc3-dash-body{
  padding:13px;
  background:#f6f9fd;
}

.vc3-video{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:10px;
  padding:11px;
  border-radius:12px;
  background:linear-gradient(135deg,#06347c,#0752b1);
  color:#fff;
}

.vc3-video h5{
  margin:0 0 4px;
  font:900 13px/1.2 Inter,Arial,sans-serif;
}

.vc3-video p{
  margin:0;
  color:#c8dcfa;
  font:500 8px/1.35 Inter,Arial,sans-serif;
}

.vc3-video-screen{
  min-height:76px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#061226;
  color:#fff;
  font-size:24px;
}

.vc3-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin:9px 0;
}

.vc3-kpi{
  padding:8px;
  border:1px solid #dbe7f5;
  border-radius:9px;
  background:#fff;
}

.vc3-kpi span{
  display:block;
  color:#6e8099;
  font:700 7px/1 Inter,Arial,sans-serif;
}

.vc3-kpi b{
  display:block;
  margin-top:3px;
  color:#0f376e;
  font:900 14px/1 Inter,Arial,sans-serif;
}

.vc3-table{
  overflow:hidden;
  border:1px solid #dce7f5;
  border-radius:10px;
  background:#fff;
}

.vc3-row{
  display:grid;
  grid-template-columns:.7fr 1.3fr 1fr .7fr;
  gap:5px;
  padding:7px 8px;
  border-bottom:1px solid #e9eff7;
  color:#405979;
  font:600 7px/1.25 Inter,Arial,sans-serif;
}

.vc3-row:last-child{border-bottom:0}

.vc3-row.head{
  background:#eef5fd;
  color:#6a7d96;
  font-weight:800;
}

/* Chat */
.vc3-chat{
  position:absolute;
  right:-1%;
  bottom:0;
  width:26%;
  min-width:190px;
  overflow:hidden;
  border:1px solid #c7dbf4;
  border-radius:20px;
  background:#fff;
  box-shadow:0 28px 60px rgba(0,0,0,.27);
  transform:rotate(1.2deg);
}

.vc3-chat-head{
  padding:12px 13px;
  background:#f7fbff;
  border-bottom:1px solid #e3ecf7;
  color:#123b73;
}

.vc3-chat-head b{
  display:block;
  font:900 11px/1.2 Inter,Arial,sans-serif;
}

.vc3-chat-head span{
  color:#7b8ca2;
  font:600 8px/1.2 Inter,Arial,sans-serif;
}

.vc3-chat-body{
  padding:11px;
  background:#f8fbff;
}

.vc3-msg{
  max-width:88%;
  margin-bottom:8px;
  padding:8px 9px;
  border-radius:10px;
  background:#eef3f9;
  color:#48617f;
  font:600 8px/1.35 Inter,Arial,sans-serif;
}

.vc3-msg.mine{
  margin-left:auto;
  background:#0b7df2;
  color:#fff;
}

.vc3-chat-input{
  height:30px;
  margin:0 11px 11px;
  border:1px solid #d7e4f3;
  border-radius:9px;
  background:#fff;
}

/* Etiquetas */
.vc3-note{
  position:absolute;
  z-index:5;
  color:#93dfff;
  font:700 13px/1.2 "Comic Sans MS",cursive;
  transform:rotate(-5deg);
  opacity:.9;
}

.vc3-note.one{left:24%;top:1%}
.vc3-note.three{right:5%;top:1%}
.vc3-note.four{right:-2%;bottom:24%;transform:rotate(-7deg)}

@media(max-width:1180px){
  .vc3-grid{grid-template-columns:1fr}
  .vc3-copy{max-width:850px}
  .vc3-visual{min-height:660px}
}

@media(max-width:760px){
  .vc3-hero{
    min-height:0;
    padding:38px 0 46px;
  }

  .vc3-grid{
    width:min(100% - 24px,1420px);
    gap:30px;
  }

  .vc3-title{font-size:clamp(40px,12vw,58px)}
  .vc3-features{grid-template-columns:1fr}
  .vc3-actions{display:grid}

  .vc3-actions a{
    width:100%;
    box-sizing:border-box;
  }

  .vc3-visual{
    min-height:0;
    display:grid;
    gap:14px;
  }

  .vc3-login,
  .vc3-form,
  .vc3-dashboard,
  .vc3-chat{
    position:relative;
    inset:auto;
    width:100%;
    min-width:0;
    transform:none;
    box-sizing:border-box;
  }

  .vc3-note{display:none}
  .vc3-dashboard{order:3}
  .vc3-chat{order:4}
}