/* ─────────────────────────────────────────────
   vpl-styles.css  ·  Villa Polo Labs
   Estilos compartidos para todas las páginas
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --electric:  #007BFF;
  --turquoise: #00E5FF;
  --navy:      #001F3F;
  --navy-2:    #002b54;
  --navy-3:    #003a6f;
  --white:     #FFFFFF;
  --paper:     #ffffff;
  --paper-2:   #f3f6fb;
  --paper-3:   #e6edf7;
  --ink:       #001F3F;
  --ink-2:     #0b2b4d;
  --muted:     #5a6b82;
  --mutedest:  #8a97a9;
  --rule:      rgba(0,31,63,0.13);
  --rule-2:    rgba(0,31,63,0.07);
  --grad:      linear-gradient(135deg,#007BFF 0%,#00E5FF 100%);
  --grad-soft: linear-gradient(135deg,rgba(0,123,255,0.09) 0%,rgba(0,229,255,0.09) 100%);
  --f-d: 'Montserrat', Arial, sans-serif;
  --f-b: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --f-m: 'JetBrains Mono', ui-monospace, monospace;
}

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background:var(--paper); color:var(--ink); font-family:var(--f-b); font-size:16px; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:0; }

/* ── Utilities ── */
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── Nav ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:32px; padding:16px 40px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.nav.scrolled { border-bottom-color:var(--rule-2); background:rgba(255,255,255,0.95); }
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { height:34px; width:34px; display:block; }
.nav-logo-text { font-family:var(--f-d); font-weight:700; font-size:13px; letter-spacing:0.12em; color:var(--ink); text-transform:uppercase; line-height:1; }
.nav-logo-text small { display:block; font-size:9px; font-weight:500; color:var(--muted); letter-spacing:0.22em; margin-top:3px; }
.nav-links { display:flex; justify-content:center; gap:28px; list-style:none; }
.nav-links a { font-size:13px; color:var(--ink-2); font-weight:500; transition:color .15s; letter-spacing:0.01em; }
.nav-links a:hover, .nav-links a.active { color:var(--electric); }
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-sign { font-size:13px; color:var(--muted); font-weight:500; transition:color .15s; }
.nav-sign:hover { color:var(--electric); }

/* ── Buttons ── */
.btn-grad {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--grad); color:#fff;
  font-family:var(--f-d); font-weight:600; font-size:13px;
  padding:10px 18px; border-radius:999px; border:0;
  box-shadow:0 8px 24px -8px rgba(0,123,255,0.45);
  transition:transform .15s, filter .15s, box-shadow .2s;
}
.btn-grad:hover { transform:translateY(-1px); filter:brightness(1.04); }
.btn-grad .arr { width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,0.25); display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--grad); color:#fff;
  font-family:var(--f-d); font-size:14px; font-weight:600;
  padding:14px 18px 14px 22px; border-radius:999px; border:0;
  box-shadow:0 10px 28px -10px rgba(0,123,255,0.5);
  transition:transform .15s, filter .15s;
}
.btn-primary:hover { transform:translateY(-1px); filter:brightness(1.04); }
.btn-primary .arr { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.25); display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink); font-family:var(--f-d); font-size:14px; font-weight:600;
  padding:14px 22px; border:1px solid var(--rule);
  background:transparent; border-radius:999px;
  transition:background .15s, border-color .15s, color .15s;
}
.btn-ghost:hover { background:var(--paper-2); border-color:var(--electric); color:var(--electric); }

/* ── Eyebrow ── */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-m); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--electric); font-weight:500; margin-bottom:28px;
  padding:7px 14px; border-radius:999px;
  background:rgba(0,123,255,0.08); border:1px solid rgba(0,123,255,0.2);
}
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--electric); position:relative; }
.eyebrow-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--electric); opacity:.6; animation:pulseRing 2.2s infinite; }
@keyframes pulseRing { 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.8);opacity:0} }

/* ── Section chrome ── */
section { padding:112px 40px; position:relative; }
.container { max-width:1200px; margin:0 auto; }
.s-head { display:grid; grid-template-columns:220px 1fr; gap:48px; margin-bottom:64px; padding-bottom:28px; border-bottom:1px solid var(--rule); align-items:baseline; }
.s-lbl { font-family:var(--f-m); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.s-lbl .num { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; margin-right:8px; }
.s-head h2 { font-family:var(--f-d); font-size:clamp(32px,5vw,60px); font-weight:700; line-height:1.02; letter-spacing:-.028em; max-width:20ch; text-wrap:balance; }

/* ── Page hero (non-home) ── */
.page-hero {
  padding:140px 40px 72px;
  background:radial-gradient(ellipse 80% 50% at 80% 0%,rgba(0,229,255,0.10) 0%,transparent 60%),
             radial-gradient(ellipse 60% 40% at 10% 30%,rgba(0,123,255,0.08) 0%,transparent 60%),
             var(--paper);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,31,63,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,31,63,0.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,black,transparent);
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { font-family:var(--f-d); font-size:clamp(40px,6.5vw,88px); font-weight:800; line-height:.97; letter-spacing:-.032em; max-width:16ch; margin-bottom:22px; }
.page-hero p { font-size:18px; color:var(--ink-2); max-width:52ch; line-height:1.55; text-wrap:pretty; }

/* ── Dark hero variant ── */
.page-hero-dark {
  background:var(--navy);
  color:var(--white);
  padding:140px 40px 72px;
  position:relative; overflow:hidden;
}
.page-hero-dark::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 90% 0%,rgba(0,229,255,0.22) 0%,transparent 55%),
             radial-gradient(ellipse 60% 50% at 0% 100%,rgba(0,123,255,0.18) 0%,transparent 55%);
}
.page-hero-dark .container { position:relative; z-index:1; }
.page-hero-dark h1 { font-family:var(--f-d); font-size:clamp(40px,6.5vw,88px); font-weight:800; line-height:.97; letter-spacing:-.032em; max-width:16ch; margin-bottom:22px; color:#fff; }
.page-hero-dark p { font-size:18px; color:rgba(255,255,255,0.75); max-width:52ch; line-height:1.55; text-wrap:pretty; }

/* ── Footer ── */
.foot { background:var(--paper); border-top:1px solid var(--rule); padding:80px 40px 32px; }
.foot-inner { max-width:1200px; margin:0 auto; }
.foot-mark { font-family:var(--f-d); font-size:clamp(64px,12vw,180px); font-weight:800; letter-spacing:-.045em; line-height:.9; margin-bottom:48px; }
.foot-mark .g { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.foot-cols { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-top:36px; border-top:1px solid var(--rule); margin-bottom:44px; }
.foot-col h4 { font-family:var(--f-m); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot-col a { font-size:14px; color:var(--ink-2); transition:color .15s; }
.foot-col a:hover { color:var(--electric); }
.foot-brand { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.foot-brand img { height:30px; width:30px; }
.foot-brand-text { font-family:var(--f-d); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.foot-brand-desc { font-size:14px; color:var(--muted); line-height:1.65; max-width:30ch; }
.foot-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:22px; border-top:1px solid var(--rule); flex-wrap:wrap; gap:12px; }
.foot-bottom p, .foot-bottom a { font-family:var(--f-m); font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.06em; }
.foot-bottom a:hover { color:var(--electric); }

/* ── Form shared ── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-family:var(--f-m); font-size:10px; font-weight:500; color:var(--muted); margin-bottom:7px; letter-spacing:.14em; text-transform:uppercase; }
.form-input,.form-select,.form-textarea { width:100%; padding:12px 14px; border-radius:10px; background:var(--paper-2); border:1px solid var(--rule-2); color:var(--ink); font-family:var(--f-b); font-size:14.5px; outline:none; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--electric); background:#fff; box-shadow:0 0 0 3px rgba(0,123,255,0.08); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--mutedest); }
.form-textarea { min-height:80px; resize:vertical; }
.form-select { background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.btn-submit { width:100%; padding:15px 18px; border-radius:12px; border:0; background:var(--grad); color:#fff; font-family:var(--f-d); font-weight:600; font-size:15px; cursor:pointer; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 14px 32px -12px rgba(0,123,255,0.5); transition:transform .15s, filter .15s; }
.btn-submit:hover { transform:translateY(-1px); filter:brightness(1.04); }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-submit .arr { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.25); display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.form-foot { margin-top:14px; font-family:var(--f-m); font-size:10.5px; color:var(--muted); letter-spacing:.06em; text-align:center; text-transform:uppercase; }
.form-error { background:#fff1f1; border:1px solid #f9c4c4; border-radius:10px; padding:10px 14px; margin-bottom:12px; color:#8a1616; font-size:13px; display:none; }
.form-success { display:none; text-align:center; padding:28px 0 16px; }
.form-success-mark { width:56px; height:56px; border-radius:50%; background:var(--grad); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:18px; box-shadow:0 14px 32px -10px rgba(0,123,255,0.5); }
.form-success h4 { font-family:var(--f-d); font-size:24px; font-weight:700; letter-spacing:-.02em; margin-bottom:10px; }
.form-success p { color:var(--muted); font-size:14.5px; line-height:1.6; }

/* ── Chip ── */
.chip { font-family:var(--f-m); font-size:11px; letter-spacing:.04em; padding:6px 12px; border-radius:999px; background:var(--paper-2); color:var(--ink-2); border:1px solid var(--rule-2); }
.chip.blue { background:#e9efff; color:#1747ff; border-color:rgba(23,71,255,0.16); }
.chip.grad { background:var(--grad-soft); color:var(--electric); border-color:rgba(0,123,255,0.2); font-weight:500; }

/* ── CTA band ── */
.cta-band { background:var(--navy); padding:80px 40px; text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(0,229,255,0.18) 0%,transparent 65%); pointer-events:none; }
.cta-band .container { position:relative; z-index:1; }
.cta-band h2 { font-family:var(--f-d); font-size:clamp(32px,5vw,60px); font-weight:800; letter-spacing:-.03em; color:#fff; margin-bottom:16px; }
.cta-band p { font-size:17px; color:rgba(255,255,255,0.7); max-width:48ch; margin:0 auto 36px; line-height:1.55; }
.cta-band-btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ── Responsive ── */
@media (max-width:1080px) {
  .s-head { grid-template-columns:1fr; gap:14px; margin-bottom:48px; }
}
@media (max-width:768px) {
  .nav { grid-template-columns:auto auto; padding:14px 20px; }
  .nav-links { display:none; }
  section { padding:80px 20px; }
  .page-hero,.page-hero-dark { padding:130px 20px 56px; }
  .foot { padding:56px 20px 24px; }
  .foot-cols { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .cta-band { padding:64px 20px; }
}