:root {
  --blue-700:#1e3a8a;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --blue-50:#eff6ff;
  --gray-900:#111827;
  --gray-700:#374151;
  --gray-400:#9ca3af;
  --gray-200:#e5e7eb;
  --gray-100:#f3f4f6;
  --white:#ffffff;
}

html.dark {
  --gray-900:#e5e7eb;
  --gray-700:#d1d5db;
  --gray-400:#9ca3af;
  --gray-200:#374151;
  --gray-100:#0f172a;
  --white:#0b1220;
  --blue-50:#14223a;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial; color: var(--gray-900); background: var(--gray-100); background-image:
  radial-gradient(circle, rgba(59,130,246,.12) 2px, transparent 3px),
  radial-gradient(circle, rgba(59,130,246,.10) 2px, transparent 3px),
  radial-gradient(circle, rgba(37,99,235,.10) 1.5px, transparent 3px),
  linear-gradient(180deg, transparent 60%, #0e1b39 85%, #0b1220 100%);
  background-size: 40px 40px, 60px 60px, 80px 80px, auto;
  background-position: 0 0, 20px -10px, -10px 25px, 0 100%;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
  animation: driftDots 18s ease-in-out infinite alternate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@keyframes driftDots {
  0% { background-position: 0 0, 20px -10px, -10px 25px, 0 100%; }
  50% { background-position: -12px 8px, 6px 18px, 18px -22px, 0 100%; }
  100% { background-position: 0 0, 20px -10px, -10px 25px, 0 100%; }
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.header { position: sticky; top:0; z-index: 50; background: var(--white); box-shadow: 0 1px 0 var(--gray-200); }
.header-inner { display:flex; align-items:center; justify-content: space-between; gap:16px; position: relative; overflow:hidden; padding: 8px 0; }
.header-inner::after { content:""; position:absolute; left:0; bottom:0; height:4px; width:100%; background: var(--blue-600); pointer-events:none; z-index:5; }

.logo { font-weight: 800; font-size: 20px; color: var(--gray-900); text-decoration: none; }
.logo-brand { position: relative; display:inline-block; padding: 4px 10px; border-radius: 12px; }
.logo-brand::before { content:""; position:absolute; inset:-6px -8px; border-radius: 12px; background:
  repeating-linear-gradient(90deg,transparent 0 18px, rgba(59,130,246,.12) 18px 19px),
  repeating-linear-gradient(0deg,transparent 0 18px, rgba(59,130,246,.12) 18px 19px);
  mask:
    radial-gradient(80px 80px at 20% 40%, #000 0 60%, transparent 72%),
    radial-gradient(80px 80px at 80% 60%, #000 0 60%, transparent 72%);
}
.logo-brand::after { content:""; position:absolute; inset:-10px -12px; border-radius: 14px; background:
  radial-gradient(120px 60px at 20% 40%, rgba(56,189,248,.14) 0%, transparent 70%),
  radial-gradient(120px 60px at 80% 60%, rgba(34,211,238,.10) 0%, transparent 70%);
  filter: blur(8px);
}
.logo-text { position: relative; display:inline-block; letter-spacing: .6px; color: #e6fbff; text-shadow:
  0 0 6px rgba(56,189,248,.55),
  0 0 14px rgba(34,211,238,.45),
  0 0 28px rgba(34,211,238,.25);
}
.logo-text::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.7), transparent); filter: blur(1px); }

.nav { display:flex; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; border:none; background: transparent; cursor:pointer; padding:8px; border-radius:8px; color: var(--gray-700); }
.theme-toggle:hover { background: var(--blue-50); color: var(--blue-700); }

.nav-list { display:flex; list-style:none; margin:0; padding:0; gap:16px; }
.nav-list a { color: var(--gray-700); text-decoration: none; padding: 14px 8px; border-radius: 6px; border:1px solid transparent; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; position: relative; z-index:0; }
.nav-list a:hover { color: var(--blue-700); background: var(--blue-50); border-color: var(--blue-500); transform: translateY(-2px); box-shadow: 0 2px 8px rgba(37,99,235,.10); }
.nav-list a:focus-visible { outline: none; color: var(--blue-700); background: var(--blue-50); border-color: var(--blue-500); transform: translateY(-2px); box-shadow: 0 2px 8px rgba(37,99,235,.10); }
/* acento profesional Easy Fix para enlaces del banner */
.nav-list a.nav-accent::before { content:""; position:absolute; inset:-4px -6px; border-radius: 12px; background:
  repeating-linear-gradient(90deg,transparent 0 18px, rgba(59,130,246,.12) 18px 19px),
  repeating-linear-gradient(0deg,transparent 0 18px, rgba(59,130,246,.12) 18px 19px);
  mask:
    radial-gradient(80px 80px at 20% 40%, #000 0 60%, transparent 72%),
    radial-gradient(80px 80px at 80% 60%, #000 0 60%, transparent 72%);
  z-index:-1;
}
.nav-list a.nav-accent::after { content:""; position:absolute; inset:-8px -10px; border-radius: 14px; background:
  radial-gradient(120px 60px at 20% 40%, rgba(56,189,248,.14) 0%, transparent 70%),
  radial-gradient(120px 60px at 80% 60%, rgba(34,211,238,.10) 0%, transparent 70%);
  filter: blur(8px);
  z-index:-2;
}
@media (max-width: 760px) { .nav-list a.nav-accent::before, .nav-list a.nav-accent::after { inset:-3px -5px; } }
html:not(.dark) .nav-list a.nav-accent::before, html:not(.dark) .nav-list a.nav-accent::after { display:none; }

.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:8px; font-weight:600; text-decoration:none; transition: all .2s ease; }
.btn-primary { background: var(--blue-600); color: var(--white); }
.btn-primary:hover { background: var(--blue-700); }
.btn-whatsapp { background: #25D366; color: var(--white); }
.btn-whatsapp:hover { filter: brightness(0.9); }
.btn-cta { background: linear-gradient(180deg, var(--blue-600), var(--blue-700)); color: var(--white); border:1px solid var(--blue-500); box-shadow: 0 8px 16px rgba(37,99,235,.25); padding:12px 18px; border-radius:12px; font-weight:700; position:relative; overflow:hidden; }
.btn-cta::after { content:""; position:absolute; left:-40%; top:0; width:40%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); transition: left .35s ease; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(37,99,235,.35); }
.btn-cta:hover::after { left:140%; }
.btn-cta:focus-visible { outline:none; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(37,99,235,.35); }

.nav-toggle { display:none; border:none; background: transparent; cursor:pointer; padding:10px; border-radius:8px; }
.nav-toggle-bar { display:block; width:22px; height:2px; background: var(--gray-700); margin:4px 0; }

.section { padding: 56px 0; scroll-margin-top: 80px; }
.section-title { font-size: 28px; margin: 0 0 24px; color: var(--blue-700); position: relative; display: inline-block; line-height: 1.2; }
/* acento profesional Easy Fix: subrayado animado */
.section-title::after { content:""; position:absolute; left:0; bottom:-8px; width:100%; height:3px; background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); border-radius:2px; transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.section-title.revealed::after, .section-title:hover::after, .section-title:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .section-title::after { transition: none; } }

.hero-inner { display:grid; grid-template-columns: 1fr; gap:24px; align-items:center; }
.hero { position: relative; overflow: hidden; min-height: 68vh; }
.hero-video { position:absolute; inset:0; z-index:0; }
.hero-video video { width:100%; height:100%; object-fit:cover; filter:brightness(0.9) saturate(1.1); }
.hero-inner, .hero-copy, .hero-media { position:relative; z-index:1; }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.25) 100%); z-index:0; }
.hero-copy h1 { font-size: 34px; line-height:1.15; margin:0 0 12px; color: var(--white); }
.hero-copy p { font-size: 18px; color: var(--white); margin:0 0 16px; }
html.dark .hero-copy h1, html.dark .hero-copy p { color: #ffffff; }
.hero-media img { width:100%; height:auto; border-radius:18px; box-shadow: 0 10px 24px rgba(0,0,0,.08); }

.services .services-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:16px; }
.service-card { background: var(--white); border:1px solid var(--gray-200); border-radius:16px; padding:18px; box-shadow: 0 6px 16px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease; }
.service-card h3 { margin:8px 0 6px; font-size:16px; color: var(--gray-900); }
.service-card p { margin:0; color: var(--gray-700); }
.service-icon { color: var(--blue-600); }

.service-card:hover { transform: translateY(-4px); border-color: var(--blue-500); box-shadow: 0 12px 24px rgba(37,99,235,.18); background: var(--blue-50); }
.service-card:hover h3 { color: var(--blue-700); }
.service-card:hover .service-icon { color: var(--blue-700); }

.services-list { margin-top: 24px; background: var(--white); border:1px solid var(--gray-200); border-radius:16px; padding:18px; }
.services-list h3 { margin:0 0 10px; font-size:18px; color: var(--gray-900); }
.services-list .list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 16px; padding-left:18px; }
.services-list li { color: var(--gray-700); }

.about-grid { display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items:center; }
.about-media img { width:100%; height:auto; border-radius:16px; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.about-text p { margin:0; font-size: 18px; color: var(--gray-700); }

.gallery-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; }
.gallery-grid img { width:100%; height:auto; border-radius:14px; border:1px solid var(--gray-200); box-shadow: 0 6px 16px rgba(0,0,0,.06); }

.testimonials-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; }
.testimonial { margin:0; padding:16px; background: var(--white); border:1px solid var(--gray-200); border-radius:14px; color: var(--gray-900); }

.reviews-captures { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; justify-items: center; }
.review-image { width:100%; height:auto; border-radius:16px; border:1px solid var(--gray-200); box-shadow: 0 6px 16px rgba(0,0,0,.06); background: var(--white); max-height:220px; object-fit: cover; }

.contact-form { background: var(--white); border:1px solid var(--gray-200); border-radius:16px; padding:18px; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-weight:600; color: var(--gray-700); }
.form-field input, .form-field textarea { border:1px solid var(--gray-200); border-radius:10px; padding:10px; font-size:14px; }
html.dark #trackId { background: var(--blue-50); color: #fff; border-color: rgba(255,255,255,.25); }
html.dark #trackId::placeholder { color: #fff; opacity: .85; }

.contact-info { margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.contact-item { background: var(--white); border:1px solid var(--gray-200); border-radius:12px; padding:14px; color: var(--gray-700); }
.contact-item a { color: var(--blue-600); text-decoration:none; }

.gate { position: fixed; inset: 0; background: rgba(255,255,255,0.96); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; z-index: 100; }
.gate[aria-hidden="true"] { display:none; }
.gate-card { width:100%; }

.table-wrap { background: var(--white); border:1px solid var(--gray-200); border-radius:16px; padding:12px; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--gray-200); padding:10px; text-align:left; }
.table th { color: var(--blue-700); font-weight:700; }
.table tr:hover { background: var(--blue-50); }
.status-select, .notes-input { width:100%; border:1px solid var(--gray-200); border-radius:10px; padding:8px; font-size:14px; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--gray-200); border-radius:10px; background: var(--white); color: var(--gray-700); cursor:pointer; }
.icon-btn:hover { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-500); }

.footer { background: linear-gradient(180deg, #0e1b39 0%, #0b1220 100%); border-top:1px solid transparent; }
.footer-inner { display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:16px; padding: 16px 0; }
.footer-brand { font-weight:800; color: var(--gray-900); }
.footer-links a { color: #fff; text-decoration:none; margin-right:12px; }
.footer-meta { color: #fff; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revealed { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .hero { min-height: 54vh; }
  .hero-inner { grid-template-columns: 1fr; }
  .services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .nav-toggle { display:block; }
  .nav { display:none; position:absolute; top:100%; right:0; background: var(--white); border:1px solid var(--gray-200); border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index:60; }
  .nav.open { display:block; }
  .nav-list { flex-direction:column; min-width: 220px; }
  .footer-inner { grid-template-columns: 1fr; text-align:center; }
  .form-row { grid-template-columns: 1fr; }
  .contact-info { grid-template-columns: 1fr; }
  .services-list .list { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .reviews-captures { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .header-inner { overflow: visible; }
}
.theme-tools { display:flex; justify-content:flex-end; padding:8px 16px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; border:1px solid var(--gray-200); background: var(--white); color: var(--gray-700); box-shadow: 0 6px 16px rgba(0,0,0,.06); cursor:pointer; }
.theme-toggle .icon-sun { display:none; }
html.dark .theme-toggle { background: var(--white); color: var(--gray-900); }
html.dark .theme-toggle .icon-moon { display:none; }
html.dark .theme-toggle .icon-sun { display:inline; }
html:not(.dark) .logo-text { color: var(--gray-900); text-shadow: none; }
html.dark .footer .logo-text { color: #fff; text-shadow: none; }
html:not(.dark) .footer .logo-text { color: #fff; text-shadow: none; }
html:not(.dark) .logo-text::after { display:none; }
html:not(.dark) .logo-brand::before, html:not(.dark) .logo-brand::after { display:none; }
html.dark body { background-image:
  radial-gradient(circle, rgba(59,130,246,.08) 2px, transparent 3px),
  radial-gradient(circle, rgba(59,130,246,.06) 2px, transparent 3px),
  radial-gradient(circle, rgba(37,99,235,.06) 1.5px, transparent 3px),
  linear-gradient(180deg, transparent 60%, #0b1220 85%, #0b1220 100%);
  background-size: 40px 40px, 60px 60px, 80px 80px, auto;
  background-position: 0 0, 20px -10px, -10px 25px, 0 100%;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}
.footer { margin-top: auto; }

main { flex: 1; }