:root {
  --nw-primary: #2563eb;
  --nw-dark: #0f172a;
  --nw-light: #ffffff;
  --nw-gray: #64748b;
  --nw-accent: #22c55e;
  --nw-border: #e2e8f0;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--nw-dark);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
  text-decoration: none;
}

.navbar {
  backdrop-filter: blur(16px);
}

.navbar-brand {
  align-items: center;
  display: inline-flex;
  min-height: 48px;
  padding-bottom: 0;
  padding-top: 0;
}

.brand-logo {
  display: block;
  height: 44px;
  max-width: 125px;
  object-fit: contain;
  width: auto;
}

.section-offset {
  scroll-margin-top: 88px;
}

.hero-section {
  background:
    linear-gradient(120deg, rgba(15, 23, 42, .96), rgba(37, 99, 235, .86)),
    url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=80") center/cover;
  padding: 136px 0 84px;
}

.text-white-75 {
  color: rgba(255, 255, 255, .78);
}

.hero-badge {
  align-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: var(--nw-light);
  display: inline-flex;
  gap: 8px;
  padding: 8px 12px;
}

.hero-image-wrap {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  overflow: hidden;
}

.hero-image-wrap img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.section-kicker {
  color: var(--nw-primary);
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.section-heading {
  max-width: 680px;
}

.service-card,
.pricing-card,
.quote-form {
  background: var(--nw-light);
  border: 1px solid var(--nw-border);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .07);
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-card:hover,
.pricing-card:hover {
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .12);
  transform: translateY(-4px);
}

.service-card i {
  color: var(--nw-primary);
  font-size: 2rem;
}

.service-card h3,
.pricing-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 18px 0 10px;
}

.service-card p {
  color: var(--nw-gray);
  margin-bottom: 0;
}

.benefit-item {
  align-items: center;
  background: var(--nw-light);
  border: 1px solid var(--nw-border);
  border-radius: 8px;
  display: flex;
  font-weight: 700;
  gap: 10px;
  min-height: 82px;
  padding: 16px;
}

.benefit-item i,
.pricing-card li i {
  color: var(--nw-accent);
}

.pricing-card.featured {
  border-color: var(--nw-primary);
}

.price {
  color: var(--nw-primary);
  font-size: 2.15rem;
  font-weight: 900;
  margin-bottom: 20px;
}

.pricing-card li {
  align-items: center;
  color: var(--nw-gray);
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.process-step {
  align-items: flex-start;
  background: var(--nw-light);
  border: 1px solid var(--nw-border);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  min-height: 122px;
  padding: 18px;
}

.process-step span {
  align-items: center;
  background: var(--nw-primary);
  border-radius: 50%;
  color: var(--nw-light);
  display: inline-flex;
  flex: 0 0 38px;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.process-step strong {
  display: block;
  font-weight: 800;
  margin-bottom: 4px;
}

.process-step p {
  color: var(--nw-gray);
  margin-bottom: 0;
}

.accordion-button {
  font-weight: 700;
}

.form-control,
.form-select {
  border-radius: 8px;
}

.final-cta {
  background: linear-gradient(120deg, var(--nw-dark), var(--nw-primary));
}

.site-footer {
  background: var(--nw-dark);
  color: rgba(255, 255, 255, .76);
}

.site-footer a {
  color: rgba(255, 255, 255, .86);
}

.site-footer a:hover {
  color: var(--nw-light);
}

.whatsapp-floating {
  align-items: center;
  background: var(--nw-accent);
  border-radius: 999px;
  bottom: 22px;
  box-shadow: 0 14px 32px rgba(34, 197, 94, .35);
  color: var(--nw-light);
  display: inline-flex;
  font-size: 1.55rem;
  height: 58px;
  justify-content: center;
  position: fixed;
  right: 22px;
  width: 58px;
  z-index: 1030;
}

.whatsapp-floating:hover {
  color: var(--nw-light);
  transform: translateY(-2px);
}

.thanks-page {
  background: #f8fafc;
}

.thanks-icon {
  color: var(--nw-accent);
  font-size: 5rem;
}


.promo-modal .modal-content {
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.promo-modal-close {
  background-color: rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
  padding: 12px;
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
}

.promo-modal-image {
  aspect-ratio: 16 / 9;
  background: #f8fafc;
  object-fit: contain;
}

.promo-modal-body {
  background: var(--nw-light);
  padding: 24px;
}

.package-audience {
  color: var(--nw-primary);
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.package-ideal {
  color: var(--nw-gray);
  min-height: 48px;
}

.regular-price {
  color: var(--nw-gray);
  font-size: .95rem;
  margin-bottom: 6px;
}

.regular-price span {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.promo-price {
  color: var(--nw-primary);
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 20px;
}

.promo-price span {
  background: rgba(34, 197, 94, .14);
  border-radius: 999px;
  color: var(--nw-accent);
  display: inline-block;
  font-size: .78rem;
  margin-right: 8px;
  padding: 5px 9px;
  vertical-align: middle;
}

.package-list {
  margin-bottom: 18px;
}

.package-note {
  background: #f8fafc;
  border: 1px solid var(--nw-border);
  border-radius: 8px;
  color: var(--nw-gray);
  margin-bottom: 18px;
  padding: 14px;
}

.package-note p {
  margin-bottom: 0;
}

.package-disclaimer {
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid var(--nw-border);
  border-radius: 8px;
  color: var(--nw-gray);
  display: flex;
  gap: 12px;
  padding: 16px 18px;
}

.package-disclaimer i {
  color: var(--nw-primary);
  font-size: 1.2rem;
}

.package-disclaimer p {
  margin-bottom: 0;
}

/* =========================================================
   FIXERGO DIGITAL - UI/UX REDESIGN
   Capa visual: no modifica contenido ni integraciones.
   ========================================================= */

:root {
  --nw-primary: #1d8cff;
  --nw-primary-2: #38bdf8;
  --nw-dark: #06101d;
  --nw-dark-2: #0b1d33;
  --nw-light: #f8fbff;
  --nw-gray: #92abc9;
  --nw-accent: #37e05f;
  --nw-border: rgba(148, 163, 184, .22);
  --nw-panel: rgba(12, 27, 48, .88);
  --nw-panel-strong: rgba(9, 22, 40, .96);
  --nw-hero-image: url("https://images.pexels.com/photos/270404/pexels-photo-270404.jpeg?auto=compress&cs=tinysrgb&w=1800&h=1150&fit=crop");
}

body {
  background:
    radial-gradient(circle at top left, rgba(29, 140, 255, .15), transparent 34rem),
    radial-gradient(circle at 88% 18%, rgba(55, 224, 95, .1), transparent 27rem),
    linear-gradient(180deg, #06101d 0%, #081426 42%, #0a1422 100%);
  color: #e5eefc;
  overflow-x: hidden;
}

body::before {
  background-image:
    linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .82), transparent 78%);
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.digital-navbar {
  background: rgba(6, 16, 29, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: none;
  min-height: 72px;
  transition: background .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.digital-navbar.digital-navbar--scrolled,
.digital-navbar:focus-within {
  background: rgba(6, 16, 29, .9);
  border-bottom-color: rgba(148, 163, 184, .22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
}

.digital-navbar .nav-link {
  color: rgba(255, 255, 255, .84);
  font-weight: 650;
}

.digital-navbar .nav-link:hover,
.digital-navbar .nav-link:focus {
  color: #ffffff;
}

.digital-navbar .btn-primary,
.btn-primary {
  background: linear-gradient(135deg, #1d8cff, #37e05f);
  border-color: rgba(255, 255, 255, .12);
  color: #ffffff;
  font-weight: 700;
}

.digital-navbar .btn-primary:hover,
.digital-navbar .btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #1477dc, #22c55e);
  border-color: rgba(255, 255, 255, .18);
  color: #ffffff;
}

.digital-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .24);
}

.digital-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .24);
}

.digital-navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(1.7);
}

.hero-section {
  background:
    linear-gradient(90deg, rgba(4, 12, 24, .96) 0%, rgba(6, 18, 34, .91) 43%, rgba(11, 36, 67, .62) 100%),
    radial-gradient(circle at 20% 42%, rgba(29, 140, 255, .24), transparent 22rem),
    var(--nw-hero-image) center/cover;
  min-height: 720px;
  overflow: hidden;
  padding: 140px 0 88px;
  position: relative;
}

.hero-section::before {
  animation: digitalCodeFlow 18s linear infinite;
  color: rgba(125, 211, 252, .18);
  content: "const web = createSolution();\\A function landingPage(client) {\\A   return responsiveDesign + contactForms;\\A }\\A const stack = ['HTML','CSS','JavaScript','React'];\\A deploy(FixerGO.digital);\\A if (business.needsWeb) {\\A   buildExperience(client);\\A }\\A ";
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(.86rem, 1.25vw, 1.05rem);
  inset: -18% -10%;
  letter-spacing: .03em;
  line-height: 1.9;
  opacity: .68;
  pointer-events: none;
  position: absolute;
  text-shadow: 0 0 18px rgba(56, 189, 248, .18);
  transform: rotate(-10deg);
  white-space: pre;
  z-index: 0;
}

.hero-section::after {
  background: linear-gradient(180deg, transparent, rgba(6, 16, 29, .98));
  bottom: 0;
  content: "";
  height: 150px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 0;
}

.hero-section .container {
  position: relative;
  z-index: 1;
}

.hero-section .badge {
  background: rgba(7, 17, 31, .68) !important;
  border-color: rgba(56, 189, 248, .34) !important;
  color: #dff7ff !important;
}

.hero-section h1 {
  max-width: 780px;
}

.hero-section h1,
section h2 {
  color: #f8fbff;
}

.text-white-75,
.hero-section .lead {
  color: rgba(226, 239, 255, .84);
}

.hero-badge {
  background: rgba(11, 29, 51, .68);
  border-color: rgba(125, 211, 252, .22);
  color: #ffffff;
}

.hero-image-wrap {
  background: rgba(7, 17, 31, .52);
  border-color: rgba(125, 211, 252, .24);
  box-shadow: 0 30px 78px rgba(0, 0, 0, .38);
}

.hero-image-wrap img,
#beneficios img,
#proceso img,
#contacto img {
  border: 1px solid rgba(125, 211, 252, .18);
  filter: saturate(.95) contrast(1.03);
}

main > section:not(.hero-section):not(.final-cta) {
  position: relative;
}

.bg-light {
  background:
    linear-gradient(180deg, rgba(7, 17, 31, .82), rgba(10, 25, 45, .72)),
    radial-gradient(circle at 90% 10%, rgba(56, 189, 248, .11), transparent 20rem) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.text-secondary,
.service-card p,
.pricing-card li,
.process-step p,
.package-ideal,
.regular-price,
.package-note,
.package-disclaimer,
.accordion-body {
  color: rgba(226, 239, 255, .68) !important;
}

.section-kicker,
.package-audience,
.service-card i,
.package-disclaimer i {
  color: #38bdf8;
}

.service-card,
.pricing-card,
.quote-form,
.benefit-item,
.process-step {
  background: linear-gradient(180deg, rgba(15, 35, 61, .86), rgba(10, 24, 43, .94));
  border: 1px solid var(--nw-border);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .2);
  color: #e5eefc;
}

.service-card:hover,
.pricing-card:hover {
  border-color: rgba(56, 189, 248, .42);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .28);
}

.service-card h3,
.pricing-card h3,
.process-step strong,
.benefit-item,
.form-label,
.accordion-button,
.package-note strong,
.package-disclaimer strong {
  color: #f8fbff;
}

.benefit-item i,
.pricing-card li i {
  color: #37e05f;
}

.pricing-card.featured {
  border-color: rgba(56, 189, 248, .58);
  box-shadow: 0 26px 66px rgba(29, 140, 255, .18);
}

.price,
.promo-price {
  color: #38bdf8;
}

.promo-price span,
.pricing-card .badge {
  background: rgba(55, 224, 95, .15) !important;
  border: 1px solid rgba(55, 224, 95, .26);
  color: #bbf7d0 !important;
}

.package-note,
.package-disclaimer {
  background: rgba(7, 17, 31, .5);
  border-color: rgba(125, 211, 252, .16);
}

.package-insignia {
  filter: drop-shadow(0 18px 34px rgba(29, 140, 255, .2));
}

.tech-section {
  background:
    linear-gradient(180deg, rgba(6, 16, 29, .86), rgba(10, 25, 45, .76)),
    radial-gradient(circle at 10% 0%, rgba(29, 140, 255, .15), transparent 24rem),
    radial-gradient(circle at 90% 90%, rgba(55, 224, 95, .1), transparent 22rem);
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  border-top: 1px solid rgba(148, 163, 184, .12);
  overflow: hidden;
}

.tech-marquee {
  background: linear-gradient(180deg, rgba(15, 35, 61, .82), rgba(10, 24, 43, .94));
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 8px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .24);
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.tech-marquee::before,
.tech-marquee::after {
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 72px;
  z-index: 2;
}

.tech-marquee::before {
  background: linear-gradient(90deg, rgba(10, 24, 43, .98), transparent);
  left: 0;
}

.tech-marquee::after {
  background: linear-gradient(270deg, rgba(10, 24, 43, .98), transparent);
  right: 0;
}

.tech-track {
  animation: techLoop 34s linear infinite;
  display: flex;
  gap: 14px;
  width: max-content;
}

.tech-marquee:hover .tech-track {
  animation-play-state: paused;
}

.tech-pill {
  align-items: center;
  background: rgba(7, 17, 31, .62);
  border: 1px solid rgba(125, 211, 252, .16);
  border-radius: 8px;
  display: grid;
  flex: 0 0 158px;
  gap: 5px;
  justify-items: center;
  min-height: 132px;
  padding: 18px 14px;
  text-align: center;
}

.tech-pill i {
  color: #38bdf8;
  font-size: 2.3rem;
}

.tech-pill strong {
  color: #f8fbff;
  font-size: .98rem;
}

.tech-pill span {
  color: rgba(226, 239, 255, .62);
  font-size: .78rem;
  line-height: 1.35;
}

.tech-note {
  align-items: center;
  background: rgba(7, 17, 31, .48);
  border: 1px solid rgba(125, 211, 252, .14);
  border-radius: 8px;
  color: rgba(226, 239, 255, .72);
  display: inline-flex;
  gap: 10px;
  padding: 12px 14px;
}

.tech-note i {
  color: #37e05f;
}

.process-step span {
  background: linear-gradient(135deg, #1d8cff, #38bdf8);
  color: #ffffff;
}

.accordion-item {
  background: rgba(9, 22, 40, .9);
  border-color: rgba(125, 211, 252, .16);
  color: #dbeafe;
  overflow: hidden;
}

.accordion-button {
  background: rgba(15, 35, 61, .94);
  color: #f8fbff;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(29, 140, 255, .48), rgba(56, 189, 248, .18));
  color: #ffffff;
}

.accordion-button::after {
  filter: invert(1) grayscale(1);
  opacity: .8;
}

.accordion-body {
  background: rgba(8, 19, 35, .86);
}

.quote-form {
  padding: 30px;
}

.form-control,
.form-select {
  background-color: rgba(7, 17, 31, .68);
  border-color: rgba(125, 211, 252, .22);
  color: #f8fbff;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bfecff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control::placeholder {
  color: rgba(226, 239, 255, .48);
}

.form-control:focus,
.form-select:focus {
  background-color: rgba(7, 17, 31, .82);
  border-color: #38bdf8;
  color: #f8fbff;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .16);
}

.btn-light {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .92);
  color: #0f2f5f;
}

.btn-outline-primary {
  border-color: rgba(56, 189, 248, .58);
  color: #bfeeff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: #1d8cff;
  border-color: #1d8cff;
  color: #ffffff;
}

.final-cta {
  background:
    linear-gradient(120deg, rgba(6, 16, 29, .96), rgba(29, 140, 255, .86)),
    var(--nw-hero-image) center/cover;
  border-top: 1px solid rgba(125, 211, 252, .16);
}

.site-footer {
  background: #06101d;
  border-top: 1px solid rgba(125, 211, 252, .12);
}

.whatsapp-floating {
  background: linear-gradient(135deg, #16a34a, #37e05f);
}

.faq-floating {
  align-items: center;
  background: linear-gradient(135deg, #1d8cff, #38bdf8);
  border: 0;
  border-radius: 999px;
  bottom: 92px;
  box-shadow: 0 16px 34px rgba(29, 140, 255, .34);
  color: #ffffff;
  display: inline-flex;
  font-size: 1.35rem;
  gap: 9px;
  height: 58px;
  justify-content: center;
  overflow: hidden;
  padding: 0 18px;
  position: fixed;
  right: 22px;
  transition: width .22s ease, transform .2s ease, background .2s ease;
  width: 58px;
  z-index: 1030;
}

.faq-floating span {
  font-size: .92rem;
  font-weight: 800;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .22s ease, opacity .18s ease;
  white-space: nowrap;
}

.faq-floating:hover,
.faq-floating:focus {
  background: linear-gradient(135deg, #1477dc, #22c55e);
  color: #ffffff;
  transform: translateY(-2px);
  width: 118px;
}

.faq-floating:hover span,
.faq-floating:focus span {
  max-width: 52px;
  opacity: 1;
}

.faq-modal .modal-content {
  background: rgba(7, 17, 31, .98);
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52);
  overflow: hidden;
}

.faq-modal .modal-header {
  align-items: flex-start;
  background:
    linear-gradient(135deg, rgba(7, 17, 31, .98), rgba(13, 31, 55, .96)),
    radial-gradient(circle at 90% 0%, rgba(56, 189, 248, .18), transparent 18rem);
  border-bottom: 1px solid rgba(125, 211, 252, .16);
  padding: 24px 28px;
}

.faq-modal .modal-title {
  color: #f8fbff;
  font-size: 1.55rem;
  font-weight: 800;
}

.faq-modal .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
  opacity: .75;
}

.faq-modal .modal-body {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, .11), transparent 22rem),
    linear-gradient(180deg, #07111f, #0a192d);
  padding: 24px;
}

.promo-modal .modal-content {
  background: rgba(7, 17, 31, .98);
  border: 1px solid rgba(125, 211, 252, .18);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52);
}

.promo-modal-body {
  background: linear-gradient(180deg, rgba(15, 35, 61, .94), rgba(10, 24, 43, .98));
  color: #e5eefc;
}

.promo-modal-image {
  background: #06101d;
}

@keyframes digitalCodeFlow {
  from {
    transform: translate3d(0, 0, 0) rotate(-10deg);
  }

  to {
    transform: translate3d(-220px, 180px, 0) rotate(-10deg);
  }
}

@keyframes techLoop {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}