/* ═══════════════════════════════════════════════════
   ASURATECH — MIDNIGHT STUDIO
   Complete unified stylesheet
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Figtree:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* Palette */
  --c-bg: #09090b;
  --c-surface: #111114;
  --c-elevated: #19191d;
  --c-card: #141417;
  --c-border: rgba(255,255,255,.06);
  --c-border-h: rgba(121,104,206,.2);
  --c-text: #e4e4e7;
  --c-text-2: #a1a1aa;
  --c-text-3: #63637a;
  --c-brand: #7968ce;
  --c-brand-l: #9b8edb;
  --c-accent: #d95995;
  --c-accent-l: #e47dae;
  --c-success: #34d399;
  --grad: linear-gradient(135deg, #7968ce, #9761bf, #d95995);
  --grad-soft: linear-gradient(135deg, rgba(121,104,206,.12), rgba(217,89,149,.06));
  --grad-card: linear-gradient(160deg, rgba(121,104,206,.05) 0%, transparent 50%);
  --glow-brand: 0 0 60px rgba(121,104,206,.08);
  --glow-accent: 0 0 40px rgba(217,89,149,.06);

  /* Space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
  --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;
  --s-32: 8rem;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* Ease */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur: .3s;

  /* Layout */
  --max-w: 1120px;
  --header-h: 68px;
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--c-bg); color:var(--c-text);
  line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family:'Outfit',sans-serif;
  font-weight:600; line-height:1.15; color:var(--c-text);
  letter-spacing:-.02em;
}
a { color:inherit; text-decoration:none }
img { max-width:100%; height:auto; display:block }
button { cursor:pointer; font-family:inherit; border:none; background:none }
ul { list-style:none }
a,button { -webkit-tap-highlight-color:transparent }

/* ── NOISE OVERLAY ── */
body::after {
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.018'/%3E%3C/svg%3E");
  opacity:.5;
}

/* ── LAYOUT ── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--s-6) }
.section { padding:var(--s-24) 0 }
.section-alt { background:var(--c-surface) }

/* ── TYPOGRAPHY ── */
.section-eyebrow {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:'Outfit',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--c-brand-l);
  margin-bottom:var(--s-5);
}
.section-eyebrow::before {
  content:''; width:16px; height:1px; background:var(--c-brand);
}
.section-title {
  font-size:clamp(1.7rem,3.8vw,2.6rem);
  margin-bottom:var(--s-4);
}
.section-desc {
  font-size:1rem; color:var(--c-text-2);
  max-width:520px; line-height:1.7;
}
.section-header { margin-bottom:var(--s-16) }
.section-header-center { text-align:center }
.section-header-center .section-desc { margin:var(--s-4) auto 0 }
.gradient-text {
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:'Outfit',sans-serif; font-weight:500; font-size:.88rem;
  padding:.7rem 1.6rem; border-radius:var(--r-lg);
  transition:all var(--dur) var(--ease); position:relative; white-space:nowrap;
}
.btn-brand {
  background:var(--grad); color:#fff;
  box-shadow:0 2px 16px rgba(121,104,206,.2), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-brand:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }
.btn-outline {
  color:var(--c-text); border:1px solid var(--c-border);
  background:transparent;
}
.btn-outline:hover { border-color:var(--c-brand); background:rgba(121,104,206,.04) }
.btn-ghost {
  color:var(--c-brand-l); background:rgba(121,104,206,.06);
  border:1px solid rgba(121,104,206,.1);
}
.btn-ghost:hover { background:rgba(121,104,206,.12); border-color:rgba(121,104,206,.2) }
.btn-sm { padding:.5rem 1.1rem; font-size:.82rem; border-radius:var(--r-md) }
.btn-full { width:100% }

/* ── CARD BASE ── */
.card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-8);
  transition:all var(--dur) var(--ease); position:relative;
}
.card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--grad-card); opacity:0; transition:opacity var(--dur);
  pointer-events:none;
}
.card:hover {
  border-color:var(--c-border-h); transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.3), var(--glow-brand);
}
.card:hover::before { opacity:1 }

/* ── ANIMATIONS ── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0) }
.reveal-d1 { transition-delay:.08s }
.reveal-d2 { transition-delay:.16s }
.reveal-d3 { transition-delay:.24s }
.reveal-d4 { transition-delay:.32s }

/* fade-in alias for backward compat */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease),transform .6s var(--ease) }
.fade-in.visible { opacity:1; transform:translateY(0) }

@keyframes spin { to { transform:rotate(360deg) } }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse-glow { 0%,100%{opacity:.3} 50%{opacity:.7} }

/* ═══ PRELOADER ═══ */
#preloader {
  position:fixed; inset:0; background:var(--c-bg);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; transition:opacity .4s var(--ease), visibility .4s;
}
.preloader-content { text-align:center }
.preloader-content .logo-preloader {
  max-height:48px; width:auto; display:block; margin:0 auto var(--s-6);
  opacity:.8;
}
.loading-spinner {
  width:28px; height:28px;
  border:2px solid rgba(255,255,255,.06);
  border-top-color:var(--c-brand);
  border-radius:50%; animation:spin .7s linear infinite;
  margin:0 auto var(--s-4);
}
.preloader-content p { color:var(--c-text-3); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase }
#preloader.hidden { opacity:0; visibility:hidden; pointer-events:none }

/* ═══ HEADER ═══ */
#header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:rgba(9,9,11,.7);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition:all var(--dur) var(--ease);
}
#header.sticky {
  background:rgba(9,9,11,.92);
  border-bottom-color:var(--c-border);
  box-shadow:0 1px 30px rgba(0,0,0,.5);
}
#header nav {
  display:flex; justify-content:space-between; align-items:center;
  height:var(--header-h);
}
.logo { display:flex; align-items:center; z-index:1001; }
.logo-img { height:36px; width:auto; transition:opacity var(--dur) }
.logo:hover .logo-img { opacity:.85 }

.nav-links { display:flex; align-items:center; gap:var(--s-1) }
.nav-links a {
  font-family:'Outfit',sans-serif; font-size:.8rem; font-weight:500;
  color:var(--c-text-3); padding:.4rem .7rem;
  border-radius:var(--r-sm); transition:all .2s var(--ease);
  letter-spacing:.01em;
}
.nav-links a:hover { color:var(--c-text) }
.nav-links a.active { color:var(--c-text); background:rgba(255,255,255,.04) }
.nav-links a.nav-cta {
  background:var(--c-brand); color:#fff;
  padding:.4rem 1rem; border-radius:var(--r-full);
  margin-left:var(--s-3); font-weight:600; font-size:.78rem;
  box-shadow:0 2px 12px rgba(121,104,206,.2);
  transition:all .2s var(--ease);
}
.nav-links a.nav-cta:hover {
  background:#6858b8; transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(121,104,206,.3);
}

.mobile-menu {
  display:none; color:var(--c-text-2); font-size:1.3rem;
  padding:.4rem; z-index:1001; line-height:1;
}

@media(max-width:768px) {
  .mobile-menu { display:block }
  .nav-links {
    position:fixed; top:0; left:0; width:100%; height:100dvh;
    flex-direction:column; justify-content:center; gap:var(--s-1);
    background:rgba(9,9,11,.98); backdrop-filter:blur(24px);
    padding:var(--s-8); transform:translateX(-100%);
    transition:transform .4s var(--ease); z-index:1000;
  }
  .nav-links.active { transform:translateX(0) }
  .nav-links li { width:100% }
  .nav-links a { display:block; font-size:1.15rem; padding:.9rem var(--s-4); border-radius:var(--r-md) }
  .nav-links a.nav-cta {
    margin-left:0; margin-top:var(--s-4); text-align:center;
    padding:.85rem var(--s-6); font-size:.9rem;
  }
  .logo-img { height:30px }
}
@media(min-width:769px) and (max-width:1024px) {
  .nav-links a { font-size:.74rem; padding:.35rem .55rem }
  .nav-links { gap:0 }
}

/* ═══ HERO (INDEX) ═══ */
.hero {
  position:relative; min-height:92vh; display:flex; align-items:center;
  padding:calc(var(--header-h) + var(--s-16)) 0 var(--s-16);
  overflow:hidden;
}
.hero-bg-orb {
  position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none;
}
.hero-bg-orb--1 {
  width:500px; height:500px; top:-15%; right:-8%;
  background:radial-gradient(circle, rgba(121,104,206,.1) 0%, transparent 70%);
}
.hero-bg-orb--2 {
  width:400px; height:400px; bottom:-10%; left:-5%;
  background:radial-gradient(circle, rgba(217,89,149,.06) 0%, transparent 70%);
}
.hero-content { position:relative; z-index:1; max-width:680px }
.hero-badge {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:'Outfit',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--c-brand-l);
  padding:var(--s-2) var(--s-4);
  background:rgba(121,104,206,.06); border:1px solid rgba(121,104,206,.12);
  border-radius:var(--r-full); margin-bottom:var(--s-8);
}
.hero h1 {
  font-size:clamp(2.2rem,5.5vw,3.6rem);
  font-weight:700; letter-spacing:-.04em;
  margin-bottom:var(--s-6); line-height:1.08;
}
.hero-subtitle {
  font-size:1.1rem; color:var(--c-text-2);
  line-height:1.75; margin-bottom:var(--s-10); max-width:540px;
}
.hero-features {
  display:flex; gap:var(--s-6); flex-wrap:wrap; margin-bottom:var(--s-10);
}
.feature-badge {
  display:flex; align-items:center; gap:var(--s-2);
  font-size:.84rem; color:var(--c-text-2);
}
.badge-icon { font-size:.9rem; opacity:.7 }
.hero-buttons { display:flex; gap:var(--s-4); flex-wrap:wrap }

.cta-button-hero {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--grad); color:#fff; padding:.75rem 1.75rem;
  border-radius:var(--r-lg); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.9rem;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
  transition:all var(--dur) var(--ease);
}
.cta-button-hero:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }
.button-icon { transition:transform var(--dur) }
.cta-button-hero:hover .button-icon { transform:translateX(3px) }

@media(max-width:768px) {
  .hero { min-height:auto; padding-top:calc(var(--header-h) + var(--s-10)) }
}

/* ═══ SERVICE CARDS (INDEX) ═══ */
.services-overview { padding:var(--s-24) 0; background:var(--c-surface) }
.services-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-6);
}
.service-card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-8);
  cursor:pointer; transition:all var(--dur) var(--ease);
  position:relative; overflow:hidden; text-decoration:none; color:var(--c-text);
}
.service-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.service-card:hover {
  border-color:var(--c-border-h); transform:translateY(-5px);
  box-shadow:0 16px 48px rgba(0,0,0,.3), var(--glow-brand);
}
.service-card:hover::after { transform:scaleX(1) }
.service-icon { font-size:1.8rem; margin-bottom:var(--s-5) }
.service-card h3 {
  font-family:'Outfit',sans-serif; font-size:1.05rem;
  margin-bottom:var(--s-3); font-weight:600;
}
.service-card > p {
  font-size:.86rem; color:var(--c-text-2); margin-bottom:var(--s-5); line-height:1.6;
}
.service-highlights { display:flex; flex-direction:column; gap:var(--s-1); margin-bottom:var(--s-5) }
.service-highlights li { font-size:.8rem; color:var(--c-text-2); padding:1px 0 }
.service-price {
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1rem;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:var(--s-3);
}
.service-link {
  font-family:'Outfit',sans-serif; font-size:.82rem;
  color:var(--c-brand-l); font-weight:500;
  transition:color .2s; display:inline-flex; align-items:center; gap:var(--s-1);
}
.service-link:hover { color:var(--c-accent) }

/* ═══ WHY US ═══ */
.why-us { padding:var(--s-24) 0 }
.benefits-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s-5);
}
.benefit-item {
  display:flex; gap:var(--s-5); align-items:flex-start;
  padding:var(--s-5); border-radius:var(--r-lg);
  border:1px solid transparent;
  transition:all var(--dur) var(--ease);
}
.benefit-item:hover { background:rgba(255,255,255,.02); border-color:var(--c-border) }
.benefit-icon { font-size:1.3rem; flex-shrink:0; margin-top:2px; opacity:.8 }
.benefit-item h3 {
  font-family:'Outfit',sans-serif; font-size:.92rem; margin-bottom:var(--s-1); font-weight:600;
}
.benefit-item p { font-size:.84rem; color:var(--c-text-2); line-height:1.6 }

/* ═══ CTA SECTION ═══ */
.cta-section { padding:var(--s-20) 0; background:var(--c-surface) }
.cta-content {
  text-align:center; max-width:560px; margin:0 auto;
  padding:var(--s-12); position:relative;
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-2xl); overflow:hidden;
}
.cta-content::before {
  content:''; position:absolute; top:-60%; left:-20%; width:140%; height:120%;
  background:radial-gradient(ellipse, rgba(121,104,206,.06), transparent 60%);
  pointer-events:none;
}
.cta-content h2 {
  font-size:clamp(1.3rem,3vw,1.7rem); margin-bottom:var(--s-3);
  position:relative;
}
.cta-content p {
  color:var(--c-text-2); margin-bottom:var(--s-8); font-size:.92rem;
  position:relative;
}
.cta-buttons {
  display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap;
  position:relative;
}
.cta-button { /* generic alias used in inner pages */
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--grad); color:#fff; padding:.7rem 1.6rem;
  border-radius:var(--r-lg); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.88rem;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
  transition:all var(--dur) var(--ease);
}
.cta-button:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }
.cta-button.secondary {
  background:transparent; color:var(--c-text); border:1px solid var(--c-border);
  box-shadow:none;
}
.cta-button.secondary:hover { border-color:var(--c-brand); background:rgba(121,104,206,.04); box-shadow:none }

/* ═══ CONTACT (INDEX) ═══ */
.contact { padding:var(--s-24) 0 }
.contact-content { text-align:center; max-width:580px; margin:0 auto }
.contact-info {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s-5); margin:var(--s-10) 0; text-align:left;
}
.contact-item {
  padding:var(--s-6); background:var(--c-card);
  border:1px solid var(--c-border); border-radius:var(--r-lg);
}
.contact-header { display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-2) }
.contact-icon { font-size:1rem; opacity:.7 }
.contact-item h4 { font-size:.82rem; font-weight:600 }
.contact-item p { font-size:.82rem; color:var(--c-text-2); word-break:break-word }
.contact-button {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:transparent; color:var(--c-text); border:1px solid var(--c-border);
  padding:.7rem 1.6rem; border-radius:var(--r-lg);
  font-family:'Outfit',sans-serif; font-weight:500; font-size:.88rem;
  transition:all var(--dur) var(--ease);
}
.contact-button:hover { border-color:var(--c-brand); background:rgba(121,104,206,.04) }
.contact-button.secondary { margin-left:var(--s-4) }

/* ═══ BACK TO TOP ═══ */
.back-to-top {
  position:fixed; bottom:24px; right:24px;
  width:40px; height:40px;
  background:var(--c-card); border:1px solid var(--c-border);
  color:var(--c-text-3); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; opacity:0; visibility:hidden;
  transition:all var(--dur) var(--ease); z-index:998;
}
.back-to-top.visible { opacity:1; visibility:visible }
.back-to-top:hover { border-color:var(--c-brand); color:var(--c-brand); transform:translateY(-2px) }

/* ═══ FOOTER ═══ */
.footer { background:var(--c-surface); border-top:1px solid var(--c-border); padding:var(--s-12) 0 var(--s-6) }
.footer-content {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--s-10); margin-bottom:var(--s-10);
}
.footer-section h3 { font-family:'Outfit',sans-serif; font-size:.85rem; font-weight:600; margin-bottom:var(--s-4); color:var(--c-text) }
.footer-section p { font-size:.84rem; color:var(--c-text-2); line-height:1.6 }
.footer-section ul { display:flex; flex-direction:column; gap:var(--s-2) }
.footer-section ul li { font-size:.82rem; color:var(--c-text-3) }
.footer-section ul a { color:var(--c-text-2); transition:color .2s; font-size:.82rem }
.footer-section ul a:hover { color:var(--c-brand-l) }
.payment-security-inline { display:flex; flex-direction:column; gap:var(--s-4) }
.payment-logos { display:flex; flex-direction:column; gap:var(--s-2) }
.payment-badge { opacity:.5; transition:opacity .2s }
.payment-badge:hover { opacity:.8 }
.mp-logo { height:26px; width:auto }
.card-logos-row { display:flex; gap:var(--s-2) }
.card-logo { height:22px; width:auto }
.security-badges-compact { display:flex; gap:var(--s-4) }
.security-badge { display:flex; align-items:center; gap:var(--s-1); font-size:.7rem; color:var(--c-text-3); font-weight:500 }
.sec-icon { width:14px; height:14px }
.footer-bottom { padding-top:var(--s-6); border-top:1px solid var(--c-border); text-align:center }
.footer-bottom p { font-size:.76rem; color:var(--c-text-3) }

/* WhatsApp */
.whatsapp-float { position:fixed; bottom:24px; left:24px; z-index:998 }
.whatsapp-tooltip {
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--c-card); color:var(--c-text); padding:.4rem .7rem;
  border-radius:var(--r-md); font-size:.74rem; white-space:nowrap;
  border:1px solid var(--c-border); opacity:0; pointer-events:none;
  transition:all var(--dur) var(--ease);
}
.whatsapp-float:hover .whatsapp-tooltip { opacity:1; transform:translateX(-50%) translateY(-4px) }
.whatsapp-link {
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:#25D366; box-shadow:0 4px 16px rgba(37,211,102,.25);
  transition:all var(--dur) var(--ease);
}
.whatsapp-link:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(37,211,102,.35) }
.whatsapp-ico { width:24px; height:24px }

/* ═══ MODAL ═══ */
.modal {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:var(--s-4);
}
.modal-content {
  background:var(--c-elevated); border:1px solid var(--c-border);
  border-radius:var(--r-2xl); width:100%; max-width:460px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s-6) var(--s-8); border-bottom:1px solid var(--c-border);
}
.modal-header h2 { font-size:1.1rem }
.close-modal {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--c-text-3); border-radius:var(--r-sm);
  transition:all .2s;
}
.close-modal:hover { background:rgba(255,255,255,.05); color:var(--c-text) }
.modal-body { padding:var(--s-8) }
.form-group { margin-bottom:var(--s-5) }
.form-group label {
  display:block; font-size:.82rem; font-weight:500;
  color:var(--c-text-2); margin-bottom:var(--s-2);
}
.form-group input, .form-group textarea {
  width:100%; padding:.6rem var(--s-4);
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-md); color:var(--c-text);
  font-family:inherit; font-size:.88rem;
  transition:border-color .2s; outline:none;
}
.form-group input:focus, .form-group textarea:focus { border-color:var(--c-brand) }
.form-group textarea { min-height:100px; resize:vertical }
.error-message { display:none; color:#ef4444; font-size:.78rem; margin-top:var(--s-1) }
.captcha-group { margin-bottom:var(--s-5) }
.submit-button {
  width:100%; padding:.75rem;
  background:var(--grad); color:#fff;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.88rem;
  border:none; border-radius:var(--r-md); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.submit-button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 4px 20px rgba(121,104,206,.25) }
.submit-button:disabled { opacity:.4; cursor:not-allowed }
.success-message { display:none; text-align:center; padding:var(--s-8); color:var(--c-success); font-weight:500 }
.notification {
  position:fixed; top:16px; right:16px; z-index:3000;
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-md); padding:var(--s-4) var(--s-6);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transform:translateX(120%); transition:transform .4s var(--ease);
}
.notification.show { transform:translateX(0) }
.notification-content { display:flex; align-items:center; gap:var(--s-4) }
.notification-close { color:var(--c-text-3); font-size:1.1rem }

/* ═══ ERROR PAGES ═══ */
.error-section {
  padding:calc(var(--header-h) + var(--s-16)) 0 var(--s-16);
  min-height:75vh; display:flex; align-items:center;
}
.error-content { text-align:center; max-width:480px; margin:0 auto }
.error-icon { font-size:2.5rem; margin-bottom:var(--s-6); opacity:.6 }
.error-code {
  font-family:'Outfit',sans-serif;
  font-size:clamp(4rem,14vw,8rem); font-weight:800;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; margin-bottom:var(--s-4); letter-spacing:-.04em;
}
.error-title { font-size:1.2rem; margin-bottom:var(--s-4) }
.error-description { color:var(--c-text-2); font-size:.92rem; line-height:1.7; margin-bottom:var(--s-8) }
.error-actions { display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s-8) }
.error-button {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:.7rem 1.4rem; border-radius:var(--r-lg);
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.88rem;
  transition:all var(--dur) var(--ease);
  background:var(--grad); color:#fff;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
}
.error-button:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }
.error-button.secondary { background:transparent; color:var(--c-text); border:1px solid var(--c-border); box-shadow:none }
.error-button.secondary:hover { border-color:var(--c-brand); background:rgba(121,104,206,.04); box-shadow:none }
.error-hint { padding:var(--s-5); background:rgba(121,104,206,.04); border-radius:var(--r-lg); border:1px solid var(--c-border) }
.error-hint p { font-size:.86rem; color:var(--c-text-2) }

/* ═══════════════════════════════
   INNER PAGE STYLES
   (creatuweb, servicio, licencias,
    asistencia, ubicacion)
   All classes from original pages
   ═══════════════════════════════ */

/* -- Generic inner hero -- */
.hero-remote, .servicios-hero, .licencias-hero,
.custom-ideas, .custom-ideas.secondary,
.ubicacion-main-section {
  position:relative; overflow:hidden;
  padding:calc(var(--header-h) + var(--s-16)) 0 var(--s-16);
}

/* Hero decorative orbs */
.hero-remote::before, .servicios-hero .hero-circle-1,
.licencias-hero::before, .custom-ideas::before {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
  width:500px; height:500px; top:-20%; right:-10%;
  background:radial-gradient(circle, rgba(121,104,206,.06) 0%, transparent 70%);
  filter:blur(60px);
}
.servicios-hero .hero-circle-2, .hero-remote::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
  width:400px; height:400px; bottom:-15%; left:-8%;
  background:radial-gradient(circle, rgba(217,89,149,.04) 0%, transparent 70%);
  filter:blur(60px);
}
.hero-background-effects { position:absolute; inset:0; pointer-events:none; overflow:hidden }
.hero-grid { display:none }

/* Servicios hero content */
.hero-content-servicios, .hero-content-remote, .ideas-content,
.hero-content { position:relative; z-index:1; max-width:680px }

.hero-content-servicios h1, .hero-content-remote h1 {
  font-size:clamp(1.8rem,4.5vw,2.8rem); margin-bottom:var(--s-4); font-weight:700;
}
.highlight-text {
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-subtitle {
  color:var(--c-text-2); font-size:1.05rem; line-height:1.7;
  margin-bottom:var(--s-8); max-width:560px;
}

/* Hero features row */
.hero-features { display:flex; gap:var(--s-6); flex-wrap:wrap; margin-bottom:var(--s-8) }
.hero-feature-item {
  display:flex; align-items:center; gap:var(--s-2);
  font-size:.86rem; color:var(--c-text-2);
}
.hero-feature-item .feature-icon { color:var(--c-brand-l); font-weight:700 }

/* Hero CTA buttons */
.hero-cta-buttons, .hero-cta { display:flex; gap:var(--s-4); flex-wrap:wrap }
.hero-btn-primary, .hero-cta-button.primary {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--grad); color:#fff; padding:.72rem 1.65rem;
  border-radius:var(--r-lg); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.88rem;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
  transition:all var(--dur) var(--ease);
}
.hero-btn-primary:hover, .hero-cta-button.primary:hover {
  transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3);
}
.hero-btn-secondary, .hero-cta-button.secondary {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:transparent; color:var(--c-text); border:1px solid var(--c-border);
  padding:.72rem 1.65rem; border-radius:var(--r-lg);
  font-family:'Outfit',sans-serif; font-weight:500; font-size:.88rem;
  transition:all var(--dur) var(--ease);
}
.hero-btn-secondary:hover, .hero-cta-button.secondary:hover {
  border-color:var(--c-brand); background:rgba(121,104,206,.04);
}
.btn-arrow, .whatsapp-icon { transition:transform .2s }
.hero-btn-primary:hover .btn-arrow { transform:translateX(3px) }

/* -- Stats (asistencia) -- */
.hero-stats { display:flex; gap:var(--s-10); margin:var(--s-8) 0; flex-wrap:wrap }
.stat-item { text-align:center }
.stat-number {
  font-family:'Outfit',sans-serif; font-size:1.6rem; font-weight:700;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-size:.74rem; color:var(--c-text-3); margin-top:2px; letter-spacing:.03em }

/* Hero feature badges */
.hero-features-badges, .hero-benefits { display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-8) }
.hero-feature-badge, .benefit-badge {
  display:flex; align-items:center; gap:var(--s-2);
  font-size:.82rem; color:var(--c-text-2);
  padding:var(--s-2) var(--s-4);
  background:rgba(255,255,255,.02); border:1px solid var(--c-border);
  border-radius:var(--r-full);
}

/* -- Info cards (servicio) -- */
.payment-timing-section { padding:var(--s-20) 0; background:var(--c-surface) }
.service-notice {
  display:flex; align-items:flex-start; gap:var(--s-4);
  padding:var(--s-5); background:rgba(121,104,206,.03);
  border:1px solid rgba(121,104,206,.08); border-radius:var(--r-lg);
  margin-bottom:var(--s-8);
}
.service-notice .notice-icon { font-size:1.1rem; flex-shrink:0 }
.service-notice p { font-size:.86rem; color:var(--c-text-2); line-height:1.6 }
.payment-timing-box { margin-top:var(--s-6) }
.info-grid-new {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-6);
}
.info-card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-8);
}
.info-card-header { display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-6) }
.info-card-header .info-icon { font-size:1.3rem }
.info-card-header h3 { font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:600 }
.info-highlight {
  padding:var(--s-4); background:rgba(121,104,206,.04);
  border-radius:var(--r-md); margin-bottom:var(--s-4);
}
.highlight-badge { display:inline-block; font-size:.72rem; font-weight:600; color:var(--c-brand-l); margin-bottom:var(--s-1) }
.info-highlight p { font-size:.86rem; color:var(--c-text-2) }
.billing-info { display:flex; flex-direction:column; gap:var(--s-2) }
.billing-item { display:flex; align-items:flex-start; gap:var(--s-2) }
.billing-item .check-icon, .check-icon { color:var(--c-brand-l); font-weight:700; flex-shrink:0 }
.billing-item p { font-size:.84rem; color:var(--c-text-2) }
.iva-notice { padding:var(--s-3) var(--s-4); background:rgba(217,89,149,.03); border-radius:var(--r-sm); margin-top:var(--s-2) }
.info-badge { flex-shrink:0 }

/* Payment methods */
.payment-methods-list { display:flex; flex-direction:column; gap:var(--s-2); margin-bottom:var(--s-5) }
.payment-method-item { display:flex; align-items:center; gap:var(--s-2); font-size:.86rem; color:var(--c-text-2) }
.payment-check { color:var(--c-brand-l); font-weight:700 }
.payment-logos-section { display:flex; flex-direction:column; gap:var(--s-3) }
.cards-row { display:flex; gap:var(--s-2) }
.card-badge .card-icon { height:28px; width:auto }
.transfer-logo .transfer-img { height:36px; width:auto; opacity:.6 }
.with-iva small { font-size:.72rem; color:var(--c-text-3) }

/* -- Service grid (servicio) -- */
.services-grid-section { padding:var(--s-20) 0 }
.services-grid-section .services-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-5);
}
.services-grid-section .service-card {
  text-decoration:none; color:var(--c-text);
}
.services-grid-section .service-card h2 {
  font-family:'Outfit',sans-serif; font-size:1rem; font-weight:600; margin-bottom:var(--s-3);
}
.services-grid-section .service-card .price {
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1.1rem;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:var(--s-2);
}
.price-note { font-size:.78rem; color:var(--c-text-3); margin-bottom:var(--s-3) }
.service-description { font-size:.86rem; color:var(--c-text-2); line-height:1.6 }
.click-info { font-size:.78rem; color:var(--c-brand-l); margin-top:var(--s-4); font-weight:500 }
.services-cta {
  text-align:center; margin-top:var(--s-12); padding:var(--s-8);
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl);
}
.services-cta p { color:var(--c-text-2); margin-bottom:var(--s-4) }
.cta-button-services {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--grad); color:#fff; padding:.7rem 1.6rem;
  border-radius:var(--r-lg); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.88rem;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
  transition:all var(--dur) var(--ease);
}
.cta-button-services:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }

/* Coverage areas */
.coverage-areas-services { padding:var(--s-20) 0; background:var(--c-surface) }
.areas-grid-services {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-6);
}
.area-card-services {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-8);
}
.area-icon-services { font-size:1.6rem; margin-bottom:var(--s-4) }
.area-card-services h3 { font-family:'Outfit',sans-serif; font-size:1.1rem; margin-bottom:var(--s-2) }
.area-subtitle-services { font-size:.82rem; color:var(--c-brand-l); margin-bottom:var(--s-4) }
.communes-list-services { display:flex; flex-direction:column; gap:var(--s-1); margin-bottom:var(--s-4) }
.communes-list-services li { font-size:.84rem; color:var(--c-text-2) }
.area-note-services { font-size:.78rem; color:var(--c-text-3) }

/* Service modals */
.service-modal {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:var(--s-4);
}
.modal-content-service {
  background:var(--c-elevated); border:1px solid var(--c-border);
  border-radius:var(--r-2xl); width:100%; max-width:520px;
  max-height:85vh; overflow-y:auto; position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.modal-close {
  position:absolute; top:var(--s-4); right:var(--s-4);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--c-text-3); border-radius:var(--r-sm);
  transition:all .2s; z-index:1;
}
.modal-close:hover { background:rgba(255,255,255,.05); color:var(--c-text) }
.modal-header-service { padding:var(--s-8) var(--s-8) var(--s-4); border-bottom:1px solid var(--c-border) }
.modal-icon { font-size:2rem; margin-bottom:var(--s-4) }
.modal-header-service h2 { font-size:1.2rem; margin-bottom:var(--s-2) }
.modal-price {
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1.1rem;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.modal-price-note { font-size:.78rem; color:var(--c-text-3); margin-top:var(--s-1) }
.modal-body-service { padding:var(--s-6) var(--s-8) var(--s-8) }
.modal-section { margin-bottom:var(--s-6) }
.modal-section h3 { font-size:.92rem; margin-bottom:var(--s-3) }
.modal-list { display:flex; flex-direction:column; gap:var(--s-2) }
.modal-list li { font-size:.86rem; color:var(--c-text-2); line-height:1.5 }
.alert-box { padding:var(--s-5); background:rgba(217,89,149,.03); border:1px solid rgba(217,89,149,.08); border-radius:var(--r-lg) }
.alert-box p { font-size:.84rem; color:var(--c-text-2); line-height:1.5 }
.highlight-box { padding:var(--s-5); background:rgba(121,104,206,.04); border:1px solid rgba(121,104,206,.08); border-radius:var(--r-lg) }
.highlight-box p { font-size:.86rem; color:var(--c-text-2) }
.modal-cta { margin-top:var(--s-6); text-align:center }
.modal-button {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--grad); color:#fff; padding:.7rem 1.6rem;
  border-radius:var(--r-lg); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.88rem;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
  transition:all var(--dur) var(--ease);
}
.modal-button:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }
.modal-content-license {
  background:var(--c-elevated); border:1px solid var(--c-border);
  border-radius:var(--r-2xl); width:100%; max-width:460px;
  padding:var(--s-8); position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.modal-close-license { position:absolute; top:var(--s-4); right:var(--s-4); width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--c-text-3); border-radius:var(--r-sm); transition:all .2s }
.modal-close-license:hover { background:rgba(255,255,255,.05); color:var(--c-text) }
.modal-actions { margin-top:var(--s-6) }
.modal-btn-primary-full {
  width:100%; background:var(--grad); color:#fff; padding:.75rem;
  border-radius:var(--r-lg); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.88rem; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.modal-btn-primary-full:hover { box-shadow:0 4px 20px rgba(121,104,206,.25) }

/* -- Creatuweb -- */
.ideas-content h2 {
  font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:var(--s-4);
  font-weight:700; max-width:640px;
}
.ideas-content > p { color:var(--c-text-2); font-size:1rem; line-height:1.7; max-width:600px; margin-bottom:var(--s-10) }
.ideas-features {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--s-5); margin-bottom:var(--s-10);
}
.idea-item {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-6);
  transition:all var(--dur) var(--ease);
}
.idea-item:hover { border-color:var(--c-border-h); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.3) }
.idea-icon { font-size:1.5rem; margin-bottom:var(--s-4) }
.idea-item h3 { font-size:.95rem; margin-bottom:var(--s-2) }
.idea-item p { font-size:.84rem; color:var(--c-text-2); line-height:1.6 }
.idea-arrow { display:none }

.services { padding:var(--s-20) 0; background:var(--c-surface) }
.service-main { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s-10); align-items:start }
.service-main-icon { font-size:2rem; margin-bottom:var(--s-4) }
.service-content h3 { font-size:1.2rem; margin-bottom:var(--s-4) }
.service-content > p { color:var(--c-text-2); line-height:1.7; margin-bottom:var(--s-8) }
.service-benefits { display:flex; flex-direction:column; gap:var(--s-3); margin-bottom:var(--s-8) }
.service-benefits .benefit-item { display:flex; align-items:center; gap:var(--s-2); padding:0 }
.service-benefits .benefit-item span:last-child { font-size:.88rem; color:var(--c-text-2) }
.service-buttons { display:flex; gap:var(--s-4); flex-wrap:wrap }

.price-section {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-2xl); padding:var(--s-8); text-align:center;
  position:sticky; top:calc(var(--header-h) + var(--s-6));
}
.price-badge {
  display:inline-block; font-family:'Outfit',sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  color:var(--c-accent); padding:var(--s-1) var(--s-4);
  background:rgba(217,89,149,.06); border:1px solid rgba(217,89,149,.12);
  border-radius:var(--r-full); margin-bottom:var(--s-6);
}
.price-container { margin-bottom:var(--s-2) }
.price-label { font-size:.76rem; color:var(--c-text-3); font-weight:500; margin-bottom:var(--s-1) }
.price {
  font-family:'Outfit',sans-serif; font-size:2.4rem; font-weight:800;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  transition:all .3s var(--ease); letter-spacing:-.02em;
}
.price-currency { font-size:.82rem; color:var(--c-text-3) }
.maintenance { font-size:.8rem; color:var(--c-text-2); margin:var(--s-2) 0 var(--s-4); transition:opacity .3s }
.price-toggle-container { margin-bottom:var(--s-4) }
.price-toggle-btn {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:.78rem; color:var(--c-brand-l); padding:var(--s-2) var(--s-4);
  background:rgba(121,104,206,.04); border:1px solid var(--c-border);
  border-radius:var(--r-full); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.price-toggle-btn:hover { background:rgba(121,104,206,.08); border-color:var(--c-border-h) }
.toggle-icon { font-size:.9rem }
.toggle-arrow { font-size:.76rem; transition:transform var(--dur) }
.price-toggle-btn.active .toggle-arrow { transform:rotate(180deg) }
.price-divider { height:1px; background:var(--c-border); margin:var(--s-4) 0 }
.features-mini { display:flex; flex-direction:column; gap:var(--s-2); margin-bottom:var(--s-8); text-align:left }
.feature-mini { display:flex; align-items:center; gap:var(--s-2); font-size:.82rem; color:var(--c-text-2) }
.pulse-button { width:100% }
.price-footer { font-size:.72rem; color:var(--c-text-3); margin-top:var(--s-4) }

.features { padding:var(--s-20) 0 }
.features-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s-5);
}
.feature-item {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-6);
  transition:all var(--dur) var(--ease);
}
.feature-item:hover { border-color:var(--c-border-h); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.3) }
.feature-icon { font-size:1.5rem; margin-bottom:var(--s-4) }
.feature-item h3 { font-size:.92rem; margin-bottom:var(--s-2) }
.feature-item p { font-size:.84rem; color:var(--c-text-2); line-height:1.6 }
.contact-buttons { display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap; margin-top:var(--s-8) }

/* -- Licencias -- */
.licenses-section { padding:var(--s-20) 0; background:var(--c-surface) }
.section-subtitle { font-size:1rem; color:var(--c-text-2); text-align:center; margin-bottom:var(--s-8) }
.license-categories {
  display:flex; gap:var(--s-2); justify-content:center;
  margin-bottom:var(--s-10); flex-wrap:wrap;
}
.category-btn {
  display:flex; align-items:center; gap:var(--s-2);
  padding:.55rem 1.2rem; border-radius:var(--r-full);
  background:var(--c-card); border:1px solid var(--c-border);
  color:var(--c-text-2); font-family:'Outfit',sans-serif;
  font-size:.84rem; font-weight:500;
  transition:all var(--dur) var(--ease); cursor:pointer;
}
.category-btn:hover { border-color:var(--c-border-h); color:var(--c-text) }
.category-btn.active {
  background:var(--grad); color:#fff; border-color:transparent;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
}
.category-icon { font-size:.95rem }
.licenses-grid { display:none; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-5) }
.licenses-grid.active { display:grid }
.license-card {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-6);
  cursor:pointer; transition:all var(--dur) var(--ease); position:relative;
}
.license-card:hover { border-color:var(--c-border-h); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3), var(--glow-brand) }
.license-badge {
  position:absolute; top:var(--s-4); right:var(--s-4);
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  color:var(--c-accent); padding:var(--s-1) var(--s-3);
  background:rgba(217,89,149,.08); border:1px solid rgba(217,89,149,.15);
  border-radius:var(--r-full);
}
.license-card-header { display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-5) }
.license-card-icon { font-size:1.5rem }
.license-card-title h3 { font-size:1rem }
.license-card-subtitle { font-size:.78rem; color:var(--c-text-3); margin-top:1px }
.license-card-body { margin-bottom:var(--s-4) }
.license-price { margin-bottom:var(--s-3) }
.license-price .price-amount {
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1.4rem;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.license-price .price-currency { font-size:.78rem; color:var(--c-text-3); margin-left:var(--s-1) }
.price-dual { display:flex; align-items:center; gap:var(--s-4); justify-content:center }
.price-option { text-align:center }
.platform-label { display:block; font-size:.72rem; color:var(--c-text-3); margin-bottom:var(--s-1) }
.price-amount-small {
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1.1rem;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.price-divider-vertical { width:1px; height:32px; background:var(--c-border) }
.version-options { display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-4) }
.version-tag {
  padding:2px 8px; font-size:.74rem; font-weight:600;
  background:rgba(121,104,206,.06); border:1px solid var(--c-border);
  border-radius:var(--r-full); color:var(--c-brand-l);
}
.version-divider { color:var(--c-text-3); font-size:.78rem }
.license-highlights { display:flex; flex-direction:column; gap:var(--s-1); margin-bottom:var(--s-3) }
.license-highlights li { font-size:.82rem; color:var(--c-text-2) }
.license-card-footer { padding-top:var(--s-4); border-top:1px solid var(--c-border) }
.license-btn-primary {
  width:100%; background:rgba(121,104,206,.06); color:var(--c-brand-l);
  border:1px solid rgba(121,104,206,.12); padding:.5rem;
  border-radius:var(--r-md); font-family:'Outfit',sans-serif;
  font-size:.82rem; font-weight:600; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.license-btn-primary:hover { background:rgba(121,104,206,.12); border-color:rgba(121,104,206,.2) }
.availability-notice {
  display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-3);
  font-size:.78rem; color:var(--c-accent-l);
}
.notice-icon, .notice-text { font-size:.78rem }

.guarantee-section { padding:var(--s-20) 0 }
.guarantee-content { text-align:center }
.guarantee-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-5); margin-top:var(--s-8); text-align:left;
}

/* License modal */
.license-modal {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:var(--s-4);
  transition:opacity .3s;
}
.license-modal.active { opacity:1 }
#modalLicenseName { font-size:1.15rem; margin-bottom:var(--s-2) }
#modalLicensePrice {
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1.3rem;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:var(--s-4);
}
#modalLicenseDescription { font-size:.88rem; color:var(--c-text-2); line-height:1.6 }

/* -- Asistencia Remota -- */
.how-it-works { padding:var(--s-20) 0; background:var(--c-surface) }
.steps-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-5);
}
.step-card {
  text-align:center; padding:var(--s-6);
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); transition:all var(--dur) var(--ease);
}
.step-card:hover { border-color:var(--c-border-h); transform:translateY(-3px) }
.step-number {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--grad); color:#fff;
  font-family:'Outfit',sans-serif; font-size:.75rem; font-weight:700;
  margin-bottom:var(--s-4);
}
.step-icon { font-size:1.5rem; margin-bottom:var(--s-4) }
.step-card h3 { font-size:.92rem; margin-bottom:var(--s-2) }
.step-card p { font-size:.84rem; color:var(--c-text-2); line-height:1.6 }
.download-button {
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-4); padding:.4rem 1rem;
  background:rgba(121,104,206,.06); border:1px solid var(--c-border);
  border-radius:var(--r-md); color:var(--c-brand-l);
  font-size:.8rem; font-weight:500; transition:all .2s;
}
.download-button:hover { background:rgba(121,104,206,.12); border-color:var(--c-border-h) }

.remote-image-container { text-align:center; margin-top:var(--s-12) }
.image-frame { position:relative; display:inline-block; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--c-border) }
.remote-image { max-width:100%; border-radius:var(--r-xl) }
.frame-corner { display:none }

.benefits-services-combined { padding:var(--s-20) 0 }
.combined-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-10) }
.benefits-list-compact { display:flex; flex-direction:column; gap:var(--s-4) }
.benefit-card-compact {
  display:flex; gap:var(--s-4); align-items:flex-start;
  padding:var(--s-4); border-radius:var(--r-lg);
  border:1px solid var(--c-border); background:var(--c-card);
}
.benefit-icon-compact { font-size:1.2rem; flex-shrink:0; margin-top:2px }
.benefit-text h3 { font-size:.88rem; margin-bottom:var(--s-1) }
.benefit-text p { font-size:.82rem; color:var(--c-text-2) }
.services-list-compact { display:flex; flex-direction:column; gap:var(--s-3) }
.service-item-compact {
  display:flex; align-items:center; gap:var(--s-3);
  font-size:.88rem; color:var(--c-text-2);
  padding:var(--s-3); border-bottom:1px solid var(--c-border);
}

.cta-remote { padding:var(--s-20) 0; background:var(--c-surface) }
.cta-content-remote { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-10); align-items:center }
.cta-image-remote { display:flex; justify-content:center }
.remote-illustration { max-width:100%; height:auto }
.remote-illustration rect { fill:var(--c-card) }
.remote-illustration circle[fill="#6366f1"] { fill:var(--c-brand) }
.remote-illustration circle[fill="#ec4899"] { fill:var(--c-accent) }
.remote-illustration path[stroke="#6366f1"] { stroke:var(--c-brand) }
.remote-illustration path[stroke="#10B981"] { stroke:var(--c-success) }
.cta-text-remote h2 { font-size:1.3rem; margin-bottom:var(--s-4) }
.cta-text-remote p { color:var(--c-text-2); margin-bottom:var(--s-6); line-height:1.7 }
.cta-button-remote {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--grad); color:#fff; padding:.72rem 1.65rem;
  border-radius:var(--r-lg); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.88rem;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
  transition:all var(--dur) var(--ease);
}
.cta-button-remote:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }

.faq-remote { padding:var(--s-20) 0 }
.faq-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-5);
}
.faq-item {
  padding:var(--s-6); background:var(--c-card);
  border:1px solid var(--c-border); border-radius:var(--r-xl);
}
.faq-item h3 { font-size:.92rem; margin-bottom:var(--s-3); color:var(--c-brand-l) }
.faq-item p { font-size:.84rem; color:var(--c-text-2); line-height:1.6 }

.final-cta-remote { padding:var(--s-16) 0; background:var(--c-surface) }
.final-cta-box {
  text-align:center; padding:var(--s-10);
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-2xl);
}
.final-cta-box h2 { font-size:1.3rem; margin-bottom:var(--s-3) }
.final-cta-box p { color:var(--c-text-2); margin-bottom:var(--s-6) }
.final-cta-button {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--grad); color:#fff; padding:.72rem 1.65rem;
  border-radius:var(--r-lg); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.88rem;
  box-shadow:0 2px 16px rgba(121,104,206,.2);
  transition:all var(--dur) var(--ease);
}
.final-cta-button:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }

/* -- Ubicacion -- */
.page-title { font-size:clamp(1.6rem,4vw,2.2rem); margin-bottom:var(--s-10) }
.ubicacion-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:var(--s-10); align-items:start }
.ubicacion-info { display:flex; flex-direction:column; gap:var(--s-5) }
.importante-box-inline {
  display:flex; gap:var(--s-4); padding:var(--s-5);
  background:rgba(217,89,149,.03); border:1px solid rgba(217,89,149,.08);
  border-radius:var(--r-lg);
}
.importante-icon { font-size:1.1rem; flex-shrink:0 }
.importante-content h3 { font-size:.92rem; margin-bottom:var(--s-2); color:var(--c-accent) }
.importante-content p { font-size:.86rem; color:var(--c-text-2); line-height:1.6 }
.action-buttons { display:flex; gap:var(--s-4); flex-wrap:wrap }
.btn-action {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:.65rem 1.4rem; border-radius:var(--r-lg);
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.86rem;
  transition:all var(--dur) var(--ease);
}
.btn-action.btn-primary { background:var(--grad); color:#fff; box-shadow:0 2px 16px rgba(121,104,206,.2) }
.btn-action.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }
.btn-action.btn-secondary { background:transparent; color:var(--c-text); border:1px solid var(--c-border) }
.btn-action.btn-secondary:hover { border-color:var(--c-brand); background:rgba(121,104,206,.04) }
.btn-icon { font-size:.9rem }
.info-card-ubicacion {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-6);
}
.card-icon-header { display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4) }
.icon-box { font-size:1.1rem }
.card-icon-header h2 { font-family:'Outfit',sans-serif; font-size:.92rem; font-weight:600 }
.info-content p { font-size:.88rem; color:var(--c-text-2) }
.direccion-principal { font-weight:600; color:var(--c-text)!important; font-size:.95rem!important }
.direccion-secundaria,.direccion-region { color:var(--c-text-3)!important }
.horario-item { display:flex; justify-content:space-between; padding:var(--s-2) 0; border-bottom:1px solid var(--c-border) }
.horario-item:last-child { border-bottom:none }
.dia { font-weight:500; font-size:.86rem }
.hora { font-size:.82rem; color:var(--c-text-2) }
.contact-item-link, .info-content a.contact-item {
  display:flex; align-items:center; gap:var(--s-2);
  font-size:.86rem; color:var(--c-text-2); padding:var(--s-2) 0;
  transition:color .2s;
}
.info-content a.contact-item:hover { color:var(--c-brand-l) }
.contact-icon-small { font-size:.9rem }
.map-container { position:relative }
.map-wrapper {
  border-radius:var(--r-2xl); overflow:hidden;
  border:1px solid var(--c-border); position:sticky;
  top:calc(var(--header-h) + var(--s-6)); height:480px;
}
.map-wrapper iframe { width:100%; height:100%; border:none; filter:invert(.9) hue-rotate(180deg) saturate(.3) brightness(.8) }
.map-overlay {
  position:absolute; bottom:var(--s-4); left:var(--s-4);
  background:var(--c-card); border:1px solid var(--c-border);
  padding:var(--s-2) var(--s-4); border-radius:var(--r-md);
}
.overlay-content { display:flex; align-items:center; gap:var(--s-2); font-size:.82rem }
.overlay-icon { font-size:.9rem }

.zonas-section { padding:var(--s-16) 0; background:var(--c-surface) }
.zonas-cobertura-box {
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl); padding:var(--s-8);
}
.zonas-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--s-3) }
.zona-item { display:flex; align-items:center; gap:var(--s-2); font-size:.86rem; color:var(--c-text-2) }
.zona-check { color:var(--c-brand-l); font-weight:700 }
.zonas-note { font-size:.82rem; color:var(--c-text-3); margin-top:var(--s-4) }

.domicilio-section { padding:var(--s-16) 0 }
.domicilio-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-5);
}
.domicilio-card {
  text-align:center; padding:var(--s-6);
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-xl);
}
.domicilio-icon { font-size:1.5rem; margin-bottom:var(--s-4) }
.domicilio-card h3 { font-size:.92rem; margin-bottom:var(--s-2) }
.domicilio-card p { font-size:.84rem; color:var(--c-text-2); line-height:1.6 }

.cta-final-section { padding:var(--s-12) 0; background:var(--c-surface) }
.cta-final-box {
  text-align:center; padding:var(--s-10);
  background:var(--c-card); border:1px solid var(--c-border);
  border-radius:var(--r-2xl);
}
.cta-final-box h2 { font-size:1.3rem; margin-bottom:var(--s-3) }
.cta-final-box p { color:var(--c-text-2); margin-bottom:var(--s-6) }
.cta-buttons-final { display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap }
.cta-btn-final {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:.65rem 1.4rem; border-radius:var(--r-lg);
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.86rem;
  transition:all var(--dur) var(--ease);
}
.cta-whatsapp { background:var(--grad); color:#fff; box-shadow:0 2px 16px rgba(121,104,206,.2) }
.cta-whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(121,104,206,.3) }
.cta-email { background:transparent; color:var(--c-text); border:1px solid var(--c-border) }
.cta-email:hover { border-color:var(--c-brand); background:rgba(121,104,206,.04) }

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px) {
  .service-main { grid-template-columns:1fr }
  .price-section { position:static }
  .combined-grid { grid-template-columns:1fr }
  .cta-content-remote { grid-template-columns:1fr }
  .ubicacion-grid { grid-template-columns:1fr }
  .map-wrapper { position:static; height:320px }
  .footer-content { grid-template-columns:1fr 1fr; gap:var(--s-8) }
  .services-grid, .benefits-grid, .contact-info { grid-template-columns:1fr }
}
@media(max-width:480px) {
  .footer-content { grid-template-columns:1fr }
  .btn, .cta-button, .hero-btn-primary, .hero-btn-secondary { font-size:.84rem; padding:.6rem 1.3rem }
}
@media screen and (max-width:768px) {
  input[type="text"],input[type="email"],input[type="tel"],textarea,select { font-size:16px!important }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
  .fade-in,.reveal { opacity:1; transform:none }
}