/* =====================================================================
   Vélites · Landing "Cámaras para comunidades de vecinos"
   Todo el CSS va bajo .vlp para no chocar con el tema de WordPress.
   ===================================================================== */
.vlp {
  --navy: #0a2470;
  --navy-2: #061647;
  --blue: #1546b8;
  --sky: #6fa3dc;
  --ice: #eef4fc;
  --paper: #ffffff;
  --ink: #0b1633;
  --ink-soft: #4a5672;
  --silver: #c9d3e2;
  --line: rgba(10, 36, 112, 0.12);
  --ok: #19a974;
  --rec: #ff4d4d;
  --r: 22px;
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* rompe el contenedor del tema y ocupa todo el ancho */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.vlp *, .vlp *::before, .vlp *::after { box-sizing: border-box; }
.vlp h1, .vlp h2, .vlp h3, .vlp h4, .vlp p, .vlp ul, .vlp ol, .vlp figure, .vlp dl, .vlp dd {
  margin: 0; padding: 0; border: 0; background: none;
  font-family: inherit; letter-spacing: normal; text-transform: none;
}
.vlp ul, .vlp ol { list-style: none; }
.vlp a { color: inherit; text-decoration: none; box-shadow: none; }
.vlp img, .vlp svg { display: block; max-width: 100%; height: auto; }
.vlp button, .vlp input, .vlp select, .vlp textarea { font: inherit; color: inherit; }
html { scroll-behavior: smooth; }

.vlp h1, .vlp h2, .vlp h3 {
  font-family: var(--display);
  color: inherit;
  line-height: 1.08;
  font-weight: 600;
  text-wrap: balance;
}
.vlp .wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.vlp section { position: relative; }
.vlp .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
}
.vlp .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.vlp .h2 { font-size: clamp(30px, 4.2vw, 50px); margin-top: 14px; }
.vlp .h2 em { font-style: normal; color: var(--blue); }
.vlp .lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-soft); max-width: 62ch; margin-top: 18px; }

/* ---------- Botones ---------- */
.vlp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 16.5px; line-height: 1;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  will-change: transform;
}
.vlp .btn svg { width: 18px; height: 18px; flex: none; }
.vlp .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.vlp .btn-primary:hover { box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.vlp .btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.vlp .btn-ghost:hover { background: rgba(255,255,255,.14); }
.vlp .btn-blue { background: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(21,70,184,.35); }
.vlp .btn-blue:hover { background: var(--navy); }

/* ---------- Barra superior ---------- */
.vlp .topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  padding: 22px 0;
}
.vlp .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vlp .brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.vlp .brand img { width: 42px; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.vlp .brand-name { font-family: var(--display); font-size: 27px; font-weight: 400; letter-spacing: .01em; line-height: 1; }
.vlp .brand-tag { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-top: 4px; font-family: var(--body); }
.vlp .top-call { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 15px; }
.vlp .top-call span.dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
.vlp .top-call svg { width: 16px; height: 16px; }

/* ---------- HERO ---------- */
.vlp .hero {
  background: var(--navy-2);
  color: #fff;
  padding: 130px 0 90px;
  overflow: hidden;
  isolation: isolate;
}
.vlp .hero-mesh {
  position: absolute; inset: -20%; z-index: -2;
  background:
    radial-gradient(at 18% 28%, #1546b8 0%, transparent 46%),
    radial-gradient(at 82% 66%, #2f6fd0 0%, transparent 44%),
    radial-gradient(at 55% 100%, #0a2470 0%, transparent 55%);
  filter: blur(50px) saturate(130%);
  animation: vlpMesh 26s ease-in-out infinite;
}
@keyframes vlpMesh {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(12deg) translateX(3%); }
}
.vlp .hero-grid-bg {
  position: absolute; inset: 0; z-index: -1; opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
}
.vlp .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.vlp .badge-4049 {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  font-size: 13.5px; font-weight: 500;
}
@supports (backdrop-filter: blur(10px)) {
  .vlp .badge-4049 { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.vlp .badge-4049 b {
  background: #fff; color: var(--navy); border-radius: 999px; padding: 5px 11px;
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .04em;
}
.vlp .hero h1 {
  font-size: clamp(36px, 5.2vw, 66px);
  margin-top: 26px; letter-spacing: -.02em; font-weight: 600;
}
.vlp .hero h1 .soft { color: var(--sky); font-weight: 300; }
.vlp .hero-sub { margin-top: 22px; font-size: clamp(17px, 1.45vw, 19.5px); color: rgba(255,255,255,.8); max-width: 54ch; }
.vlp .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.vlp .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 38px; font-size: 14.5px; color: rgba(255,255,255,.85); }
.vlp .hero-trust li { display: flex; align-items: center; gap: 8px; }
.vlp .hero-trust svg { width: 18px; height: 18px; color: #7fd6b0; flex: none; }

/* Ilustración edificio */
.vlp .hero-art { position: relative; }
.vlp .hero-art svg { width: 100%; height: auto; overflow: visible; }
.vlp .hero-art .cone { transform-box: fill-box; animation: vlpCone 4.8s ease-in-out infinite; }
.vlp .hero-art .cone:nth-of-type(2) { animation-delay: -1.2s; }
.vlp .hero-art .cone:nth-of-type(3) { animation-delay: -2.4s; }
.vlp .hero-art .cone:nth-of-type(4) { animation-delay: -3.6s; }
.vlp .hero-art .cone:nth-of-type(5) { animation-delay: -.6s; }
@keyframes vlpCone { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.vlp .hero-art .rec { animation: vlpRec 1.4s steps(2, jump-none) infinite; }
@keyframes vlpRec { 0% { opacity: 1; } 100% { opacity: .15; } }
.vlp .hero-art .scan { animation: vlpScan 5s linear infinite; }
@keyframes vlpScan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { transform: translateY(330px); opacity: 0; } }
.vlp .float-card {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 16px;
  background: rgba(255,255,255,.92); color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  font-size: 13.5px; line-height: 1.3;
  animation: vlpBob 6s ease-in-out infinite;
}
@supports (backdrop-filter: blur(10px)) {
  .vlp .float-card { background: rgba(255,255,255,.8); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
}
.vlp .float-card b { display: block; font-family: var(--display); font-size: 15px; }
.vlp .float-card .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ice); color: var(--blue); flex: none; }
.vlp .float-card .ic svg { width: 19px; height: 19px; }
.vlp .float-a { left: -18px; top: 16%; }
.vlp .float-b { right: -10px; bottom: 12%; animation-delay: -3s; }
@keyframes vlpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Franja de confianza ---------- */
.vlp .strip { background: var(--ice); border-bottom: 1px solid var(--line); }
.vlp .strip ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.vlp .strip li { padding: 26px 22px; display: flex; gap: 14px; align-items: center; border-left: 1px solid var(--line); }
.vlp .strip li:first-child { border-left: 0; }
.vlp .strip .n { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--navy); line-height: 1; white-space: nowrap; }
.vlp .strip .t { font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.vlp .strip svg { width: 26px; height: 26px; color: var(--blue); flex: none; }

/* ---------- Para quién ---------- */
.vlp .who { padding: 110px 0 60px; }
.vlp .who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.vlp .who-card {
  padding: 34px 30px; border-radius: var(--r); border: 1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.vlp .who-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(10,36,112,.12); border-color: rgba(21,70,184,.3); }
.vlp .who-card .role { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.vlp .who-card h3 { font-size: 23px; margin-top: 12px; }
.vlp .who-card p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }
.vlp .who-card ul { margin-top: 18px; display: grid; gap: 9px; font-size: 15px; }
.vlp .who-card li { display: flex; gap: 10px; }
.vlp .who-card li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--blue); }

/* ---------- Zonas ---------- */
.vlp .zones { padding: 70px 0 110px; }
.vlp .zones-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.vlp .zones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 50px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vlp .zone { background: #fff; padding: 34px 30px; position: relative; transition: background .3s ease; }
.vlp .zone:hover { background: var(--ice); }
.vlp .zone .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: #fff; }
.vlp .zone .ico svg { width: 26px; height: 26px; }
.vlp .zone h3 { font-size: 21px; margin-top: 20px; }
.vlp .zone p { margin-top: 8px; color: var(--ink-soft); font-size: 15.5px; }
.vlp .zone .k { position: absolute; top: 30px; right: 28px; font-family: var(--display); font-size: 13px; color: var(--silver); font-weight: 600; }

/* ---------- Servicios (oscuro) ---------- */
.vlp .services { background: var(--navy-2); color: #fff; padding: 110px 0; overflow: hidden; isolation: isolate; }
.vlp .services::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 85% 0%, rgba(47,111,208,.45), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(21,70,184,.35), transparent 50%);
}
.vlp .services .eyebrow { color: var(--sky); }
.vlp .services .h2 em { color: var(--sky); }
.vlp .services .lead { color: rgba(255,255,255,.75); }
.vlp .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 54px; }
.vlp .svc {
  border-radius: var(--r); padding: 36px 32px 34px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column;
  transition: background .3s ease, transform .35s ease;
}
.vlp .svc:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
.vlp .svc .num { font-family: var(--display); font-size: 14px; color: var(--sky); font-weight: 600; letter-spacing: .1em; }
.vlp .svc h3 { font-size: 27px; margin-top: 16px; }
.vlp .svc p { color: rgba(255,255,255,.75); margin-top: 12px; font-size: 16px; }
.vlp .svc ul { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 10px; font-size: 15px; color: rgba(255,255,255,.9); }
.vlp .svc li { display: flex; gap: 10px; align-items: flex-start; }
.vlp .svc li svg { width: 18px; height: 18px; color: #7fd6b0; flex: none; margin-top: 3px; }
.vlp .svc.feature { background: linear-gradient(160deg, rgba(111,163,220,.28), rgba(21,70,184,.25)); border-color: rgba(111,163,220,.5); }
.vlp .svc .tag { align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--navy); margin-bottom: 14px; }

/* ---------- Homologación ---------- */
.vlp .cert { padding: 120px 0; background: linear-gradient(180deg, #fff 0%, var(--ice) 100%); }
.vlp .cert .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.vlp .seal {
  position: relative; aspect-ratio: 1; max-width: 430px; width: 100%; margin-inline: auto;
  display: grid; place-items: center;
}
.vlp .seal .ring { position: absolute; inset: 0; animation: vlpSpin 40s linear infinite; }
.vlp .seal .ring text { font-family: var(--display); font-size: 15.5px; letter-spacing: .32em; fill: var(--navy); font-weight: 600; }
@keyframes vlpSpin { to { transform: rotate(360deg); } }
.vlp .seal-core {
  width: 66%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2a5fd0, var(--navy) 60%, var(--navy-2));
  color: #fff; display: grid; place-items: center; text-align: center;
  box-shadow: 0 30px 70px rgba(10,36,112,.35), inset 0 0 0 8px rgba(255,255,255,.08), inset 0 0 0 9px rgba(255,255,255,.25);
}
.vlp .seal-core img { width: 64px; margin: 0 auto 6px; }
.vlp .seal-core .nro { font-family: var(--display); font-size: clamp(54px, 7vw, 82px); font-weight: 700; line-height: .95; letter-spacing: -.02em; }
.vlp .seal-core .lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; margin-top: 6px; }
.vlp .cert-points { margin-top: 34px; display: grid; gap: 18px; }
.vlp .cert-points li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
.vlp .cert-points .ci { width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue); }
.vlp .cert-points .ci svg { width: 22px; height: 22px; }
.vlp .cert-points b { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; }
.vlp .cert-points span { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- Legalidad ---------- */
.vlp .legal { padding: 110px 0; }
.vlp .legal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; counter-reset: lg; }
.vlp .lg {
  padding: 30px 26px; border-radius: var(--r); background: var(--ice); position: relative;
  counter-increment: lg;
}
.vlp .lg::before {
  content: counter(lg, decimal-leading-zero); font-family: var(--display); font-weight: 700; font-size: 44px;
  color: rgba(21,70,184,.16); line-height: 1; display: block;
}
.vlp .lg h3 { font-size: 19px; margin-top: 14px; }
.vlp .lg p { color: var(--ink-soft); font-size: 15px; margin-top: 8px; }
.vlp .legal-note { margin-top: 26px; font-size: 13.5px; color: var(--ink-soft); }

/* ---------- Proceso ---------- */
.vlp .process { padding: 20px 0 110px; }
.vlp .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 54px; position: relative; }
.vlp .steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--sky)); opacity: .35; }
.vlp .step { padding: 0 22px 0 0; position: relative; }
.vlp .step .dot {
  width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--blue);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--blue);
  position: relative; z-index: 1;
}
.vlp .step h3 { font-size: 20px; margin-top: 22px; }
.vlp .step p { color: var(--ink-soft); font-size: 15.5px; margin-top: 8px; }

/* ---------- FAQ ---------- */
.vlp .faq { padding: 110px 0; background: var(--ice); }
.vlp .faq .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.vlp .faq-list { display: grid; gap: 12px; }
.vlp .faq details { background: #fff; border-radius: 16px; border: 1px solid var(--line); transition: box-shadow .3s ease; }
.vlp .faq details[open] { box-shadow: 0 16px 40px rgba(10,36,112,.08); }
.vlp .faq summary {
  list-style: none; cursor: pointer; padding: 22px 60px 22px 24px; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.35;
}
.vlp .faq summary::-webkit-details-marker { display: none; }
.vlp .faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--ice); color: var(--blue);
  display: grid; place-items: center; font-size: 20px; font-weight: 400; transition: transform .3s ease;
}
.vlp .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.vlp .faq .ans { padding: 0 24px 22px; color: var(--ink-soft); font-size: 16px; }

/* ---------- Contacto ---------- */
.vlp .contact { padding: 110px 0; background: var(--navy-2); color: #fff; overflow: hidden; isolation: isolate; }
.vlp .contact::before {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: radial-gradient(at 20% 20%, rgba(21,70,184,.6), transparent 45%), radial-gradient(at 90% 80%, rgba(47,111,208,.45), transparent 45%);
  filter: blur(40px);
}
.vlp .contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.vlp .contact .eyebrow { color: var(--sky); }
.vlp .contact .lead { color: rgba(255,255,255,.78); }
.vlp .direct { margin-top: 36px; display: grid; gap: 14px; }
.vlp .direct a {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: background .25s ease;
}
.vlp .direct a:hover { background: rgba(255,255,255,.12); }
.vlp .direct .di { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--navy); display: grid; place-items: center; flex: none; }
.vlp .direct .di svg { width: 20px; height: 20px; }
.vlp .direct small { display: block; font-size: 12.5px; opacity: .7; letter-spacing: .04em; }
.vlp .direct b { font-family: var(--display); font-size: 19px; font-weight: 600; }
.vlp .form {
  background: #fff; color: var(--ink); border-radius: 26px; padding: 36px 34px;
  box-shadow: 0 40px 90px rgba(0,0,0,.35);
}
.vlp .form h3 { font-size: 25px; }
.vlp .form .fsub { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
.vlp .roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.vlp .roles label { position: relative; cursor: pointer; }
.vlp .roles input { position: absolute; opacity: 0; pointer-events: none; }
.vlp .roles span {
  display: block; text-align: center; padding: 11px 6px; border-radius: 12px; border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; line-height: 1.25; transition: all .2s ease;
}
.vlp .roles input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.vlp .roles input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.vlp .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.vlp .field { display: grid; gap: 6px; }
.vlp .field.full { grid-column: 1 / -1; }
.vlp .field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.vlp .field input, .vlp .field select, .vlp .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid #d5ddeb; background: #f8faff;
  font-size: 15.5px; line-height: 1.3; outline: none; transition: border-color .2s ease, background .2s ease; box-shadow: none; margin: 0;
}
.vlp .field textarea { min-height: 90px; resize: vertical; }
.vlp .field input:focus, .vlp .field select:focus, .vlp .field textarea:focus { border-color: var(--blue); background: #fff; }
.vlp .check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.vlp .check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.vlp .check a { color: var(--blue); text-decoration: underline; }
.vlp .form .btn { width: 100%; margin-top: 18px; }
.vlp .form-alt { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); text-align: center; }
.vlp .form-alt a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.vlp .form-msg { margin-top: 12px; font-size: 14px; font-weight: 600; color: #c0392b; min-height: 1em; }

/* ---------- Pie ---------- */
.vlp .foot { background: #040e30; color: rgba(255,255,255,.7); padding: 50px 0 110px; font-size: 14px; }
.vlp .foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; align-items: center; }
.vlp .foot .brand { color: #fff; }
.vlp .foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.vlp .foot-links a:hover { color: #fff; }
.vlp .foot .legal-id { width: 100%; border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; font-size: 13px; }

/* ---------- Barra fija móvil ---------- */
.vlp .mbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
  display: none; gap: 8px; padding: 8px; border-radius: 18px;
  background: rgba(6,22,71,.94); box-shadow: 0 16px 40px rgba(0,0,0,.35);
  transform: translateY(140%); transition: transform .4s ease;
}
.vlp .mbar.on { transform: none; }
.vlp .mbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 8px; border-radius: 12px; font-weight: 600; font-size: 15px; color: #fff; }
.vlp .mbar a svg { width: 18px; height: 18px; }
.vlp .mbar .m-call { background: rgba(255,255,255,.1); }
.vlp .mbar .m-wa { background: #fff; color: var(--navy); }

/* ---------- Reveal (seguro: solo oculta si el JS está activo) ---------- */
.vlp.js-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.vlp.js-on .reveal.in { opacity: 1; transform: none; }
.vlp.js-on .reveal[data-d="1"] { transition-delay: .08s; }
.vlp.js-on .reveal[data-d="2"] { transition-delay: .16s; }
.vlp.js-on .reveal[data-d="3"] { transition-delay: .24s; }
.vlp .reveal[data-split] { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .vlp .hero .wrap, .vlp .cert .wrap, .vlp .faq .wrap, .vlp .contact .wrap, .vlp .zones-head { grid-template-columns: 1fr; }
  .vlp .hero-art { max-width: 560px; margin: 10px auto 0; width: 100%; }
  .vlp .svc-grid, .vlp .who-grid { grid-template-columns: 1fr; }
  .vlp .zones-grid { grid-template-columns: repeat(2, 1fr); }
  .vlp .legal-grid { grid-template-columns: repeat(2, 1fr); }
  .vlp .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .vlp .steps::before { display: none; }
  .vlp .strip ul { grid-template-columns: repeat(2, 1fr); }
  .vlp .strip li:nth-child(3) { border-left: 0; }
  .vlp .strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .vlp .cert .wrap { gap: 50px; }
}
@media (max-width: 640px) {
  .vlp { font-size: 16px; }
  .vlp .hero { padding: 108px 0 64px; }
  .vlp .top-call .txt { display: none; }
  .vlp .brand-name { font-size: 23px; }
  .vlp .hero-ctas .btn { width: 100%; }
  .vlp .float-a { left: 0; top: 2%; }
  .vlp .float-b { right: 0; bottom: 0; }
  .vlp .float-card { font-size: 12px; padding: 10px 12px; }
  .vlp .zones-grid, .vlp .legal-grid, .vlp .steps { grid-template-columns: 1fr; }
  .vlp .strip ul { grid-template-columns: 1fr; }
  .vlp .strip li { border-left: 0 !important; border-top: 1px solid var(--line); padding: 18px 4px; }
  .vlp .strip li:first-child { border-top: 0; }
  .vlp .who, .vlp .services, .vlp .cert, .vlp .legal, .vlp .faq, .vlp .contact { padding: 76px 0; }
  .vlp .zones { padding: 40px 0 76px; }
  .vlp .process { padding: 0 0 76px; }
  .vlp .form { padding: 28px 20px; }
  .vlp .fgrid { grid-template-columns: 1fr; }
  .vlp .roles span { font-size: 12.5px; }
  .vlp .mbar { display: flex; }
}
.vlp .badge-4049 b { white-space: nowrap; }
.vlp .contact .h2 em { color: var(--sky); }
@media (max-width: 640px) { .vlp .badge-4049 { font-size: 12.5px; } }
.vlp .brand img.brand-logo { width: auto; height: 46px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
.vlp .foot .brand img.brand-logo { height: 40px; filter: none; }
@media (max-width: 640px) { .vlp .brand img.brand-logo { height: 38px; } }
.vlp .hero .topbar .wrap { display: flex; align-items: center; justify-content: space-between; grid-template-columns: none; }
.vlp .topbar .brand img.brand-logo { height: 52px; }
@media (max-width: 640px) { .vlp .topbar .brand img.brand-logo { height: 40px; } }
.vlp .field input.is-bad { border-color: #d93025; background: #fff5f4; }
.vlp .check.is-bad { color: #b3261e; }
.vlp .check.is-bad input { outline: 2px solid #d93025; outline-offset: 2px; }
.vlp .form-msg.on { padding: 12px 14px; border-radius: 12px; background: #fdecea; color: #b3261e; font-size: 14.5px; }
.vlp .form-msg.on.ok { background: #e8f6ef; color: #12734f; }
.vlp .form-msg a { color: inherit; text-decoration: underline; font-weight: 700; }
/* ---------- Blog en la landing ---------- */
.vlp .blog { padding: 110px 0; }
.vlp .blog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.vlp .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }
.vlp .post { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, #fff 0%, #f7faff 100%); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.vlp .post:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(10,36,112,.12); border-color: rgba(21,70,184,.3); }
.vlp .pcat { align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); background: var(--ice); padding: 5px 11px; border-radius: 999px; }
.vlp .post h3 { font-size: 20px; line-height: 1.25; }
.vlp .post p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; flex: 1; }
.vlp .pmore { color: var(--blue); font-weight: 600; font-size: 14.5px; }
@media (max-width: 1020px) { .vlp .blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .vlp .blog { padding: 76px 0; } .vlp .blog-head .btn { width: 100%; } }
/* ---------- Trabajos realizados ---------- */
.vlp .work { padding: 110px 0 0; }
.vlp .work-card { display: grid; grid-template-columns: 1.15fr 1fr; margin-top: 44px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; transition: transform .35s ease, box-shadow .35s ease; }
.vlp .work-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(10,36,112,.14); }
.vlp .work-card img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.vlp .work-t { padding: 38px 40px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.vlp .work-t h3 { font-size: clamp(22px, 2.4vw, 28px); }
.vlp .work-t p { color: var(--ink-soft); font-size: 16px; }
@media (max-width: 1020px) { .vlp .work-card { grid-template-columns: 1fr; } .vlp .work-card img { min-height: 220px; } }
@media (max-width: 640px) { .vlp .work { padding: 76px 0 0; } .vlp .work-t { padding: 26px 22px; } }
/* ---------- Menú superior ---------- */
.vlp .top-nav { display: flex; gap: 28px; margin-left: auto; margin-right: 28px; }
.vlp .top-nav a { color: rgba(255,255,255,.85); font-size: 15px; font-weight: 500; position: relative; padding: 6px 0; }
.vlp .top-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--sky); transition: right .3s ease; }
.vlp .top-nav a:hover { color: #fff; }
.vlp .top-nav a:hover::after { right: 0; }
@media (max-width: 860px) { .vlp .top-nav { display: none; } }
.vlp .blog-grid .post:first-child { grid-column: 1 / -1; background: linear-gradient(135deg, var(--ice), #fff 70%); padding: 34px 36px; }
.vlp .blog-grid .post:first-child h3 { font-size: clamp(22px, 2.4vw, 28px); max-width: 26ch; }
/* ---------- Menú móvil ---------- */
.vlp .mnav { display: none; margin-left: 10px; }
.vlp .mnav summary { list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; display: grid; place-content: center; gap: 4px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); position: relative; z-index: 2; }
.vlp .mnav summary::-webkit-details-marker { display: none; }
.vlp .mnav summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s ease, opacity .3s ease; }
.vlp .mnav[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vlp .mnav[open] summary span:nth-child(2) { opacity: 0; }
.vlp .mnav[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.vlp .mnav-panel { position: fixed; inset: 0; z-index: 1; background: #061647; padding: 100px 24px 28px; display: flex; flex-direction: column; overflow-y: auto; animation: vlpMnav .3s ease; }
@keyframes vlpMnav { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.vlp .mnav-panel nav { display: flex; flex-direction: column; }
.vlp .mnav-panel nav a { font-family: var(--display); font-size: 26px; font-weight: 600; color: #fff; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.vlp .mnav-cta { display: grid; gap: 10px; margin-top: 28px; }
.vlp .mnav-b { display: flex; align-items: center; justify-content: center; padding: 15px; border-radius: 14px; font-weight: 600; font-size: 16px; }
.vlp .mnav-call { background: #fff; color: var(--navy); }
.vlp .mnav-wa { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.vlp .mnav-id { margin-top: auto; padding-top: 24px; font-size: 13px; color: rgba(255,255,255,.6); text-align: center; }
.vlp .hero:has(.mnav[open]) { z-index: 10000; }
.vlp:has(.mnav[open]) .mbar { display: none; }
@media (max-width: 860px) { .vlp .mnav { display: block; } .vlp .top-call { margin-left: auto; } }
@media (max-width: 860px) {
  .vlp .hero { z-index: 20; }
  .vlp .topbar { position: fixed; top: 0; left: 0; right: 0; padding: 12px 0; transition: background .3s ease, box-shadow .3s ease; }
  .vlp .topbar.scrolled { background: rgba(6,22,71,.96); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .vlp .topbar .brand img.brand-logo { height: 38px; }
}
@media (max-width: 860px) { .vlp section[id] { scroll-margin-top: 70px; } }