:root{
  --nav-h: 80px;
  --bg0:#050816; --bg1:#0a1023; --bg2:#111a39;
  --txt:#eaf2ff; --muted:#bcd0e6;
  --accent-red:#ff3b30; --accent-cyan:#23b6ff; --accent-indigo:#6b76ff;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }
body{ font-family:'Segoe UI', sans-serif; }

/* ===== NAVBAR (scopeada a la página de contacto) ===== */
body.contact-page{ padding-top: var(--nav-h); }
.contact-page .navbar{ position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; justify-content:space-between; align-items:center; min-height: var(--nav-h); padding:10px 40px; background-color:#010717; }
.contact-page .logo-container{ display:flex; align-items:center; }
.contact-page .logo-link{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.contact-page .logo-img{ height:60px; width:auto; display:block; }
.contact-page .logo-text{ color:#fff; font-size:24px; font-weight:700; line-height:1; white-space:nowrap; }
.contact-page .nav-links{ list-style:none; display:flex; gap:60px; align-items:center; }
.contact-page .nav-links a{ color:#ffffff; text-decoration:none; font-weight:500; position:relative; transition:color .3s ease; }
.contact-page .nav-links a::after{ content:''; position:absolute; width:0%; height:2px; bottom:-4px; left:0; background-color:#fff; transition:width .3s ease; }
.contact-page .nav-links a:hover{ color:#ff0000; }
.contact-page .nav-links a:hover::after{ width:100%; }
.contact-page .nav-links a.active{ color:#ff4d4d; }

/* ===== HERO sin imagen (degradados + orbes) ===== */
.contact-page .hero{ position:relative; min-height:100vh; display:flex; align-items:stretch; isolation:isolate; background:
  radial-gradient(1200px 700px at 85% -10%, rgba(35,182,255,.10), transparent 60%),
  radial-gradient(900px 600px at 15% 10%, rgba(255,59,48,.10), transparent 55%),
  linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 60%);
  overflow:hidden; }
.contact-page .bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.contact-page .orb{ position:absolute; width:38vmin; height:38vmin; filter: blur(36px); border-radius:50%; opacity:.35; animation: float 14s ease-in-out infinite; }
.contact-page .orb-red{ background: radial-gradient(circle at 30% 30%, rgba(255,59,48,.55), transparent 60%); top:8%; left:6%; animation-delay:0s; }
.contact-page .orb-cyan{ background: radial-gradient(circle at 70% 40%, rgba(35,182,255,.55), transparent 55%); top:18%; right:8%; animation-delay:2s; }
.contact-page .orb-indigo{ background: radial-gradient(circle at 40% 60%, rgba(107,118,255,.55), transparent 60%); bottom:10%; left:22%; animation-delay:4s; }
@keyframes float{ 0%,100%{ transform:translateY(0) translateX(0)} 50%{ transform:translateY(-10px) translateX(6px)} }

.contact-page .container{ width:min(1120px,92%); margin-inline:auto; position:relative; z-index:1; padding: 40px 0 56px; }
.contact-page .intro{ max-width:760px; margin:12px 0 22px; color:var(--txt); }
.contact-page .intro h1{ font-size: clamp(36px, 6vw, 56px); margin-bottom: 6px; }
.contact-page .intro p{ color: var(--muted); }

/* ===== GRID y CARDS ===== */
.contact-page .grid{ display:grid; grid-template-columns: 1fr; gap:20px; }
@media(min-width:980px){ .contact-page .grid{ grid-template-columns: .9fr 1.1fr; } }

.contact-page .cards{ display:grid; gap:16px; align-content:start }
.contact-page .card{ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:18px; color:#eaf2ff; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.25); backdrop-filter: blur(6px); transition: transform .18s ease; }
.contact-page .card:hover{ transform: translateY(-1px); }
.contact-page .card-header{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }

/* ===== Íconos NEÓN (sin recuadro translúcido) ===== */
.contact-page .icon.circle{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; position:relative; background:transparent; border:0; }
.contact-page .icon.circle svg{ width:20px; height:20px; display:block; transition: transform .25s ease, filter .25s ease; }
/* Colores de brillo por canal */
.contact-page .icon.wa{ --glow: rgba(37,211,102,.7); }
.contact-page .icon.mail{ --glow: rgba(14,165,233,.7); }
.contact-page .icon.map{ --glow: rgba(34,197,94,.7); }
/* Glow base + animación suave y hover pulsante */
@keyframes neonPulse{ 0%,100%{ box-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow); } 50%{ box-shadow: 0 0 16px var(--glow), 0 0 32px var(--glow); } }
.contact-page .icon.circle{ animation: neonPulse 6s ease-in-out infinite; }
.contact-page .card:hover .icon.circle{ animation-duration: 3.2s; }
.contact-page .card:hover .icon.circle svg{ transform: scale(1.06); filter: drop-shadow(0 0 6px var(--glow)); }

.contact-page .card p{ color:var(--muted); margin:6px 0 12px; }
.contact-page .actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ===== Botones ===== */
.contact-page .btn{ appearance:none; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition: transform .18s ease, filter .18s ease }
.contact-page .btn:hover{ filter:brightness(1.08); transform: translateY(-1px); }
.contact-page .btn-ghost{ background:transparent }
.contact-page .btn-primary{ background: linear-gradient(90deg,var(--accent-red),#ff7a59); border-color: transparent; box-shadow: 0 2px 22px rgba(255,59,48,.35); }
.contact-page .btn-wa{ background: rgba(37,211,102,.15); border-color: rgba(37,211,102,.45); color:#eafff3 }

/* ===== Formulario ===== */
.contact-page .form-card{ padding:22px }
.contact-page .form-card h2{ margin:6px 0 12px }
.contact-page .field{ display:grid; gap:8px; margin:12px 0 }
.contact-page label{ font-weight:600; color:#fff }
.contact-page input, .contact-page select, .contact-page textarea{ width:100%; padding:12px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; outline:none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease }
.contact-page input::placeholder, .contact-page textarea::placeholder{ color:#b7c7dd }
.contact-page input:focus, .contact-page select:focus, .contact-page textarea:focus{ border-color:#ff7a59; box-shadow:0 0 0 3px rgba(255,122,89,.25); transform: translateY(-1px); }
.contact-page .error{ color:#ffc6c3; min-height:18px }
.contact-page .honeypot{ position:absolute; left:-9999px; opacity:0 }
.contact-page .muted{ color:var(--muted) }

/* ===== FAB ===== */
.contact-page .fab{ position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.35); text-decoration:none; z-index:999; transition: transform .2s ease }
.contact-page .fab:hover{ transform: translateY(-2px) }

/* ===== Animaciones de entrada ===== */
.contact-page .fade-up{ opacity:0; transform: translateY(16px); animation: fadeUp .7s cubic-bezier(.2,.65,.3,1) forwards; }
.contact-page .d1{ animation-delay:.08s } .contact-page .d2{ animation-delay:.16s } .contact-page .d3{ animation-delay:.24s } .contact-page .d4{ animation-delay:.32s }
@keyframes fadeUp{ to{ opacity:1; transform: translateY(0); } }

/* ===== Footer ===== */
.contact-page .footer{ display:flex; justify-content:center; align-items:center; gap:8px; padding:20px; color:#c9d6ea; background:#020614; border-top:1px solid rgba(255,255,255,.08) }
.contact-page .footer .link{ color:#dbe8ff; }

/* ===== Responsivo ===== */
@media(max-width:900px){ :root{ --nav-h: 68px; } .contact-page .navbar{ padding:10px 20px; } .contact-page .logo-img{ height:48px; } .contact-page .logo-text{ font-size:20px; } .contact-page .nav-links{ gap:20px; } }

/* Respeto a reduced-motion */
.reduce-motion *{ animation: none !important; transition: none !important; }

/* ===== Estilos neutros para tablas si se inyectan ===== */
.contact-page table{ width:100%; border-collapse:collapse; margin:10px 0; background:rgba(255,255,255,.03); }
.contact-page th, .contact-page td{ border:1px solid rgba(255,255,255,.12); padding:8px 10px; color:var(--txt); }