:root{
  color-scheme:dark;
  --color-bg:#131217;
  --color-bg-soft:#1c1a22;
  --color-surface:#211f28;
  --color-surface-light:#2b2734;
  --color-text:#faf9fc;
  --color-muted:#cbc7d2;
  --color-accent:#8b5cf6;
  --color-accent-hover:#8152e5;
  --color-accent-soft:#c4b5fd;
  --color-accent-deep:#6d3ee8;
  --color-border:#45404f;
  --color-button:#7c4dea;
  --color-button-text:#ffffff;
  --color-whatsapp-bg:#ffffff;
  --color-whatsapp-hover:#eee9ff;
  --color-whatsapp-text:#321d59;
  --color-focus:#d8ccff;

  /* Aliases retained for the existing component API. */
  --bg:var(--color-bg);
  --surface:var(--color-surface);
  --text:var(--color-text);
  --muted:var(--color-muted);
  --brand:var(--color-accent-soft);
  --brand-contrast:#17121f;
  --card:var(--color-surface-light);
  --border:var(--color-border);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  min-width:320px;
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(circle at 8% 0%,rgba(139,92,246,.18),transparent 26rem),
    radial-gradient(circle at 92% 32%,rgba(196,181,253,.07),transparent 24rem),
    var(--color-bg);
  color:var(--color-text);
  line-height:1.6;
}

a{color:var(--color-accent-soft);text-decoration:none;text-underline-offset:.2em}
a:hover{color:#e3dcff;text-decoration:underline}
a:focus-visible,summary:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:3px;
  border-radius:8px;
}

@media (min-width:900px){
  body{
    background-image:
      linear-gradient(rgba(19,18,23,.76),rgba(19,18,23,.88)),
      url('../images/fondo.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

.container{width:min(1100px,92%);margin-inline:auto}
.narrow{width:min(800px,92%)}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(22,20,27,.9);
  backdrop-filter:saturate(1.15) blur(12px);
  border-bottom:1px solid rgba(196,181,253,.2);
  box-shadow:0 8px 28px rgba(5,4,8,.2);
}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:14px 0}
.brand{font-weight:600;letter-spacing:.3px;color:var(--color-text)}
.brand::before{content:'';display:inline-block;width:9px;height:9px;margin-right:.5rem;background:var(--color-accent-soft);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);vertical-align:.05em}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav-link{padding:8px 10px;border-radius:10px;color:var(--color-muted)}
.nav-link.active,.nav-link:hover{background:rgba(139,92,246,.14);color:var(--color-text);text-decoration:none}

.cta,.btn{
  position:relative;
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,var(--color-button),var(--color-accent-deep));
  color:var(--color-button-text);
  border-radius:12px;
  padding:11px 18px;
  font-weight:600;
  line-height:1.25;
  box-shadow:0 8px 22px rgba(109,62,232,.24),inset 0 1px rgba(255,255,255,.16);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.cta{border-radius:999px;padding:10px 15px}
.cta::before,.btn::before{
  content:'';
  flex:0 0 10px;
  width:10px;
  height:10px;
  background:currentColor;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  transform:translateY(-1px);
}
.cta:hover,.btn:hover{
  color:#fff;
  text-decoration:none;
  transform:translateY(-1px);
  background:linear-gradient(135deg,var(--color-accent-hover),var(--color-button));
  box-shadow:0 10px 28px rgba(109,62,232,.32),inset 0 1px rgba(255,255,255,.2);
}
.cta:active,.btn:active{transform:translateY(1px);box-shadow:0 4px 14px rgba(109,62,232,.24)}
.cta:focus-visible,.btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}

.main{padding:40px 0 80px}
.hero{position:relative;padding:46px 0 18px}
.hero::after{
  content:'';
  position:absolute;
  top:18px;
  right:4%;
  width:50px;
  height:50px;
  border:1px solid rgba(196,181,253,.42);
  border-radius:50%;
  box-shadow:-13px 5px 0 -2px var(--color-bg),0 0 28px rgba(139,92,246,.2);
  opacity:.78;
  pointer-events:none;
}
.hero h1{max-width:900px;font-size:clamp(30px,5vw,48px);line-height:1.12;margin:0 0 12px;letter-spacing:-.02em}
.hero p{color:var(--color-muted);margin:0 0 22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-ghost{
  background:rgba(250,249,252,.05);
  border:1px solid var(--color-accent-soft);
  color:var(--color-text);
  box-shadow:none;
}
.btn-ghost::before{color:var(--color-accent-soft)}
.btn-ghost:hover{background:rgba(139,92,246,.16);border-color:#ddd3ff;box-shadow:none}
.btn.small{min-height:42px;padding:10px 14px;font-size:.95rem}

/* WhatsApp actions use a high-contrast white treatment without changing their links or tracking. */
a.cta[data-event^="click_whatsapp"],
a.btn[data-event^="click_whatsapp"]{
  background:var(--color-whatsapp-bg);
  border-color:rgba(255,255,255,.9);
  color:var(--color-whatsapp-text);
  box-shadow:0 9px 24px rgba(6,5,9,.2),inset 0 -1px rgba(50,29,89,.08);
}
a.cta[data-event^="click_whatsapp"]:hover,
a.btn[data-event^="click_whatsapp"]:hover{
  background:var(--color-whatsapp-hover);
  border-color:var(--color-whatsapp-bg);
  color:#24123f;
  box-shadow:0 11px 28px rgba(6,5,9,.26),inset 0 -1px rgba(50,29,89,.1);
}
a.cta[data-event^="click_whatsapp"]:active,
a.btn[data-event^="click_whatsapp"]:active{
  background:#e4dcff;
  color:#1d0f33;
  box-shadow:0 4px 14px rgba(6,5,9,.2);
}
a.cta[data-event^="click_whatsapp"]:focus-visible,
a.btn[data-event^="click_whatsapp"]:focus-visible{
  outline-color:#ffffff;
  box-shadow:0 0 0 4px rgba(139,92,246,.65),0 9px 24px rgba(6,5,9,.2);
}

.trust-badges{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0;padding:0;list-style:none;color:var(--color-muted)}
.trust-badges li{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  background:rgba(43,39,52,.72);
  border:1px solid rgba(196,181,253,.22);
  border-radius:999px;
}
.trust-badges li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--color-accent-soft);box-shadow:0 0 0 3px rgba(139,92,246,.14)}

.cards h2,.how h2{margin-top:10px;font-size:1.65rem}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(46,42,56,.96),rgba(35,32,43,.98));
  border:1px solid var(--color-border);
  border-radius:16px;
  padding:20px;
  box-shadow:0 14px 34px rgba(6,5,9,.16);
}
.card::after{
  content:'';
  position:absolute;
  top:13px;
  right:15px;
  width:28px;
  height:28px;
  border:1px solid rgba(196,181,253,.28);
  border-radius:50%;
  background:
    linear-gradient(var(--color-accent-soft),var(--color-accent-soft)) center/10px 1px no-repeat,
    linear-gradient(var(--color-accent-soft),var(--color-accent-soft)) center/1px 10px no-repeat,
    rgba(139,92,246,.1);
  pointer-events:none;
}
.card h3{margin:6px 38px 10px 0}
.card .price{margin:10px 0 14px;font-weight:600;color:#eee9ff}
.card.contact{padding:22px;text-align:left}
.more{margin-top:14px}

.how .steps,.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:10px}
.steps li{
  background:linear-gradient(90deg,rgba(43,39,52,.96),rgba(34,31,41,.96));
  border:1px solid var(--color-border);
  border-radius:13px;
  padding:15px 15px 15px 52px;
  position:relative;
}
.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:13px;
  top:13px;
  width:29px;
  height:29px;
  border-radius:50%;
  background:var(--color-accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  box-shadow:0 0 0 4px rgba(139,92,246,.12);
}
.steps.large li{padding:16px 16px 16px 58px}
.note{
  margin-top:18px;
  background:rgba(43,39,52,.86);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-accent);
  border-radius:12px;
  padding:16px;
  color:var(--color-muted);
}
.service-info p{margin:6px 0}
.service-info strong{color:var(--color-text)}

.quotes blockquote{
  position:relative;
  margin:0 0 14px;
  background:rgba(43,39,52,.88);
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:17px 17px 17px 20px;
}
.quotes blockquote::before{content:'';position:absolute;inset:15px auto 15px 0;width:3px;border-radius:4px;background:var(--color-accent)}
.quotes cite{display:block;margin-top:8px;color:var(--color-muted);font-style:normal}

.faq{background:rgba(43,39,52,.88);border:1px solid var(--color-border);border-radius:13px;padding:14px 16px;margin:11px 0}
.faq[open]{border-color:rgba(196,181,253,.5);background:rgba(49,44,60,.96)}
.faq summary{cursor:pointer;font-weight:600;color:var(--color-text)}
.faq summary::marker{color:var(--color-accent-soft)}
.faq div{margin-top:9px;color:var(--color-muted)}

.cta-band{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%,rgba(196,181,253,.12),transparent 14rem),
    linear-gradient(110deg,#24202d,#302843 55%,#211e29);
  border-top:1px solid rgba(196,181,253,.28);
  border-bottom:1px solid rgba(196,181,253,.28);
  padding:34px 0;
  margin-top:40px;
}
.cta-band::after{content:'';position:absolute;right:7%;top:22px;width:26px;height:26px;background:rgba(216,204,255,.35);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);transform:rotate(12deg)}
.cta-band h2{margin:0 0 10px;text-align:center}
.cta-band .btn{display:inline-flex;margin-inline:auto}
.cta-band .container{text-align:center;position:relative;z-index:1}
.cta-band p{color:#d8d3df;margin:0 0 18px}

.site-footer{background:rgba(17,16,21,.7);border-top:1px solid var(--color-border);padding:24px 0;color:var(--color-muted)}
.site-footer .footer-inner{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.site-footer p{margin:0}

.eyebrow{color:var(--color-accent-soft);font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:.84rem;margin:0 0 8px}
.eyebrow::before{content:'';display:inline-block;width:18px;height:1px;background:currentColor;margin:0 8px 4px 0}
.hero-text{max-width:780px}
.trust-section{
  position:relative;
  margin-top:30px;
  background:linear-gradient(135deg,rgba(47,42,58,.94),rgba(35,32,43,.96));
  border:1px solid var(--color-border);
  border-radius:17px;
  padding:24px 26px;
  box-shadow:0 14px 34px rgba(6,5,9,.14);
}
.trust-section::before{
  content:'';
  position:absolute;
  top:20px;
  right:22px;
  width:16px;
  height:16px;
  border:1px solid var(--color-accent-soft);
  transform:rotate(45deg);
  opacity:.62;
}
.trust-section h2{margin:0 40px 8px 0}
.trust-section p{color:var(--color-muted);margin:8px 0}
.bullets{padding-left:20px;color:var(--color-muted)}
.bullets li{margin:7px 0}
.bullets li::marker{color:var(--color-accent-soft)}
.contact-cards{margin-top:18px}
.contact.card strong{color:var(--color-accent-soft)}
.contact-label{
  display:inline-block;
  background:rgba(139,92,246,.14);
  color:#ded5ff;
  border:1px solid rgba(196,181,253,.38);
  border-radius:999px;
  padding:4px 10px;
  font-size:.82rem;
  font-weight:600;
}

.section-intro{max-width:780px;color:var(--color-muted);margin:0 0 18px}
.service-grid{align-items:stretch}
.service-card{display:flex;flex-direction:column;gap:8px}
.service-card h3{font-size:1.35rem;margin:0 38px 4px 0}
.service-card p{margin:0;color:var(--color-muted)}
.service-card strong{color:var(--color-text)}
.service-card .price{margin-top:auto;color:var(--color-text)}
.section-panel,.content-section{margin-top:38px}
.split-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:linear-gradient(135deg,rgba(48,43,59,.96),rgba(35,31,44,.96));
  border:1px solid var(--color-border);
  border-radius:17px;
  padding:24px;
  box-shadow:0 14px 34px rgba(6,5,9,.13);
}
.split-panel h2,.split-panel p{margin:0 0 8px}
.split-panel p{color:var(--color-muted)}
.split-panel .cta-heading{color:var(--color-text);font-size:1.5rem;font-weight:600;line-height:1.2}
.topic-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.topic-list span{background:rgba(139,92,246,.12);border:1px solid rgba(196,181,253,.32);color:var(--color-text);border-radius:999px;padding:8px 12px}
.limits-block{margin-top:0}
.note h2{color:var(--color-text);margin:0 0 10px;font-size:1.4rem}

@media (max-width:720px){
  body{
    background:
      radial-gradient(circle at 10% 0%,rgba(139,92,246,.2),transparent 20rem),
      linear-gradient(180deg,#17151b 0%,#1d1a23 48%,#17151b 100%);
  }
  .container,.narrow{width:min(100% - 28px,1100px)}
  .site-header{background:rgba(28,25,34,.96)}
  .header-inner{align-items:center;flex-wrap:wrap;padding:11px 0;gap:10px}
  .brand{padding-top:0}
  .nav{display:flex;order:3;width:100%;gap:7px;overflow-x:auto;flex-wrap:nowrap;padding:5px 0 2px;scrollbar-width:thin}
  .nav-link{white-space:nowrap;padding:8px 10px;font-size:.92rem;background:rgba(255,255,255,.025)}
  .nav-link:not(.nav-priority):not(.active){display:none}
  .cta{min-height:42px;padding:9px 13px}
  .main{padding:20px 0 56px}
  .hero{padding:34px 0 20px}
  .hero::after{top:10px;right:8px;width:38px;height:38px;box-shadow:-10px 4px 0 -2px #19171e,0 0 22px rgba(139,92,246,.18)}
  .hero h1{padding-right:24px;font-size:clamp(29px,9vw,39px)}
  .hero p{font-size:1.02rem}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%;text-align:center}
  .trust-badges{gap:8px}
  .trust-badges li{width:100%;border-radius:11px;padding:9px 11px;background:rgba(47,43,57,.78)}

  /* Mobile sections become distinct surfaces instead of one continuous black field. */
  .main > section.container:not(.hero),.main > section.narrow:not(.hero){
    margin-top:22px;
    padding:22px 18px;
    background:linear-gradient(145deg,rgba(43,39,52,.82),rgba(32,29,39,.92));
    border:1px solid rgba(196,181,253,.15);
    border-radius:18px;
  }
  .main > section.container:nth-of-type(even),.main > section.narrow:nth-of-type(even){
    background:linear-gradient(145deg,rgba(50,44,62,.88),rgba(37,33,45,.94));
  }
  .main > .cta-band{width:100%;border-radius:0;padding:32px 14px;margin-top:30px}
  .main > .cta-band .container{width:100%}
  .section-panel,.content-section{margin-top:30px}
  .grid{grid-template-columns:1fr;gap:14px}
  .card{padding:19px;background:linear-gradient(145deg,#332e3e,#292530);border-color:#514a5e}
  .split-panel{align-items:flex-start;flex-direction:column;padding:19px;background:linear-gradient(145deg,#373040,#292530)}
  .split-panel .btn,.service-card .btn{width:100%;text-align:center}
  .steps li{background:linear-gradient(90deg,#332e3d,#292630);padding-top:16px;padding-bottom:16px}
  .faq{background:#302b39;padding:15px}
  .faq[open]{background:#383143}
  .trust-section{padding:22px 19px;background:linear-gradient(145deg,#352f40,#292530)}
  .cta-band::after{right:4%;font-size:1.5rem}
  .site-footer{background:#17151b;padding-bottom:28px}
}

@media (max-width:420px){
  .brand{font-size:.96rem}
  .cta{font-size:.92rem}
  .btn{width:100%;padding-inline:14px;text-align:center}
  .card .btn{margin-top:2px}
  .topic-list span{width:100%;text-align:center}
}