/* =============================================================
   BASE — Reset, variables, root styles
   ============================================================= */

/* Design tokens */
:root {
  --pink:   #ff2d8d;
  --cyan:   #00f0ff;
  --purple: #a855f7;
  --dark:   #050310;

  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Rajdhani', sans-serif;

  /* Shared horizontal edge padding — nav, hero, services all use this */
  --edge: 3.5rem;
}

@media (max-width: 920px) {
  :root { --edge: 1.5rem; }
}

/* Box model reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button, a {
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--dark);
  color: #e0e0ff;
  overflow-x: hidden;
}

/* Animated background canvas — pinned behind all content */
#cvs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Wrapper that sits above the canvas */
.page {
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}

/* Shared section wrapper */
.sw {
  max-width: 1260px;
  margin: 0 auto;
  padding: 7rem var(--edge);
}
/* =============================================================
   ANIMATIONS — Keyframes and scroll-reveal utility classes
   ============================================================= */

/* Conic-gradient custom property (used for spinning card borders) */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes loader-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 14px rgba(255, 45, 141, 0.6))
            drop-shadow(0 0 28px rgba(0, 240, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(255, 45, 141, 1))
            drop-shadow(0 0 60px rgba(0, 240, 255, 0.6));
  }
}

@keyframes logo-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 24px rgba(255, 45, 141, 0.5))
            drop-shadow(0 0 50px rgba(0, 240, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 42px rgba(255, 45, 141, 0.85))
            drop-shadow(0 0 80px rgba(0, 240, 255, 0.55));
  }
}

@keyframes ring-expand {
  0%   { transform: translate(-50%, -50%) scale(0.88); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: 0; }
}

@keyframes spin-border {
  to { --border-angle: 360deg; }
}

/* ── Scroll Reveal ──────────────────────────────────────────── */

/* Elements start hidden and animate in when .vis is added by JS */

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.rv-l {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.rv-r {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.rv.vis,
.rv-l.vis,
.rv-r.vis {
  opacity: 1;
  transform: none;
}
/* =============================================================
   COMPONENTS — Shared UI pieces: buttons, section headers,
   glow text helpers, section tags
   ============================================================= */

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.88rem 2rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Shimmer sweep on hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-110%) skewX(-12deg);
  transition: transform 0.45s;
}

.btn:hover::before {
  transform: translateX(120%) skewX(-12deg);
}

.btn-primary {
  background: linear-gradient(135deg, var(--pink), #b01875);
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 45, 141, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(255, 45, 141, 0.6);
}

.btn-outline {
  background: transparent;
  color: var(--cyan);
  border: 1.5px solid var(--cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.12),
              inset 0 0 10px rgba(0, 240, 255, 0.03);
}

.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.45);
}

/* ── Section Tags ───────────────────────────────────────────── */

.s-tag {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.s-tag::before,
.s-tag::after {
  content: '';
  width: 28px;
  height: 1px;
}

/* Color variants */
.t-pk { color: var(--pink);   text-shadow: 0 0 8px var(--pink); }
.t-pk::before, .t-pk::after { background: var(--pink); box-shadow: 0 0 6px var(--pink); }

.t-cy { color: var(--cyan);   text-shadow: 0 0 8px var(--cyan); }
.t-cy::before, .t-cy::after { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

.t-pu { color: var(--purple); text-shadow: 0 0 8px var(--purple); }
.t-pu::before, .t-pu::after { background: var(--purple); box-shadow: 0 0 6px var(--purple); }

/* ── Section Headings ───────────────────────────────────────── */

.s-head {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 0.9rem;
}

.s-sub {
  font-size: 1rem;
  color: rgba(170, 185, 230, 0.6);
  line-height: 1.8;
  max-width: 500px;
  margin-bottom: 3.5rem;
}

/* ── Glow Text Helpers ──────────────────────────────────────── */

.g-pk { color: var(--pink);   text-shadow: 0 0 20px rgba(255, 45, 141, 0.5); }
.g-cy { color: var(--cyan);   text-shadow: 0 0 20px rgba(0, 240, 255, 0.5); }
.g-pu { color: var(--purple); text-shadow: 0 0 20px rgba(168, 85, 247, 0.5); }
/* =============================================================
   LOADER — Full-screen intro loading screen
   ============================================================= */

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: #030208;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

#loader.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loader picture {
  display: contents;
}

#loader img {
  width: 120px;
  animation: loader-pulse 1.4s ease-in-out infinite;
}

.ld-bar-wrap {
  width: 180px;
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.ld-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--cyan));
  border-radius: 2px;
  box-shadow: 0 0 8px var(--cyan);
  transition: width 0.06s linear;
}

.ld-txt {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: rgba(200, 210, 255, 0.35);
  text-transform: uppercase;
}
/* =============================================================
   NAV — Fixed navigation bar + scroll progress bar
   ============================================================= */

/* Scroll progress line at very top of viewport */
#spbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--cyan), var(--purple));
  z-index: 200;
  box-shadow: 0 0 8px var(--cyan);
  transition: width 0.1s linear;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.2rem var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}

/* Activates after user scrolls down */
nav.sticky {
  background: rgba(5, 3, 16, 0.88);
  backdrop-filter: blur(18px);
  border-color: rgba(0, 240, 255, 0.07);
}

/* Logo */
.n-logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.n-logo .pk {
  color: var(--pink);
  text-shadow: 0 0 12px var(--pink);
}

.n-logo .cy {
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan);
}

/* Nav links */
.n-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  align-items: center;
}

.n-links a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 195, 235, 0.65);
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}

/* Underline reveal on hover */
.n-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  transition: width 0.3s;
}

.n-links a:hover {
  color: var(--cyan);
}

.n-links a:hover::after {
  width: 100%;
}

/* Active section link — set by nav.js IntersectionObserver */
.n-links a.active {
  color: var(--cyan);
}

.n-links a.active::after {
  width: 100%;
}

/* CTA button in nav */
.n-cta {
  padding: 0.5rem 1.3rem !important;
  border: 1.5px solid var(--pink) !important;
  border-radius: 4px;
  color: var(--pink) !important;
  font-family: var(--font-display) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  transition: background 0.25s, box-shadow 0.25s !important;
}

.n-cta::after {
  display: none !important;
}

.n-cta:hover {
  background: rgba(255, 45, 141, 0.1) !important;
  box-shadow: 0 0 20px rgba(255, 45, 141, 0.4) !important;
}

/* ── Language toggle (flag pill) ──────────────────────────── */
/* One-button design: shows the flag + name of the language you'd switch TO.
   Click to flip. Glow on hover matches the site's neon pink aesthetic. */
.lang-toggle-wrap {
  display: flex;
  align-items: center;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.75rem;
  margin-left: 0.4rem;
  background: linear-gradient(135deg, rgba(255, 45, 141, 0.08), rgba(0, 255, 255, 0.05));
  border: 1.5px solid rgba(255, 45, 141, 0.4);
  border-radius: 6px;
  color: var(--text, #f0f0f0);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s, background 0.25s;
}

.lang-toggle:hover {
  border-color: var(--pink);
  background: linear-gradient(135deg, rgba(255, 45, 141, 0.18), rgba(0, 255, 255, 0.08));
  box-shadow: 0 0 18px rgba(255, 45, 141, 0.45);
  transform: translateY(-1px);
}

.lang-toggle:active {
  transform: translateY(0);
}

.lang-toggle .lt-flag {
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.4));
}

.lang-toggle .lt-label {
  line-height: 1;
}

/* ── Language-conditional visibility ───────────────────────── */
/* Elements with these attrs vanish in the matching language. Used for
   things like the Monthly Maintenance card (EN-only) and Multi-Page
   card (ES-only). i18n.js sets the data-lang attr on <body> at load.
   Specificity boosted via .pr-card so pricing.css can't accidentally win. */
body[data-lang="es"] [data-hide-es],
body[data-lang="es"] .pr-card[data-hide-es] {
  display: none !important;
}
body[data-lang="en"] [data-hide-en],
body[data-lang="en"] .pr-card[data-hide-en] {
  display: none !important;
}

/* ── Hamburger button (mobile only) ────────────────────────── */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  z-index: 110;
  touch-action: manipulation;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--cyan);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Animate bars into an × when open */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ──────────────────────────────────────────── */

@media (max-width: 1180px) {

  .nav-toggle {
    display: flex;
  }

  .n-links {
    /* Off-screen by default */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(280px, 80vw);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 6rem 2.5rem 3rem;
    background: rgba(5, 3, 16, 0.97);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(0, 240, 255, 0.1);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 105;
  }

  /* Slide in when open */
  .n-links.open {
    transform: translateX(0);
  }

  .n-links a {
    font-size: 1rem;
    letter-spacing: 0.15em;
  }

  /* CTA button takes full width in the drawer */
  .n-cta {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }
}
/* =============================================================
   HERO — Full-viewport opening section
   ============================================================= */

#hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 4.5rem var(--edge) 3rem;
  gap: 4rem;
}

/* ── Left column ────────────────────────────────────────────── */

.h-left {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.h-eyebrow {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pink);
  text-shadow: 0 0 10px var(--pink);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.h-eyebrow::before,
.h-eyebrow::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--pink);
  box-shadow: 0 0 6px var(--pink);
}

.h-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  /* Each line is one word by design; never let the glitch scramble wrap/reflow them. */
  white-space: nowrap;
}

.h-title .l1 { display: block; color: #fff; }

.h-title .l2 {
  display: block;
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(0, 240, 255, 0.65);
}

.h-title .l3 {
  display: block;
  color: var(--pink);
  text-shadow: 0 0 30px rgba(255, 45, 141, 0.65);
}

/* Typewriter line */
.h-tw {
  font-size: 1rem;
  color: rgba(180, 195, 230, 0.6);
  font-weight: 300;
  min-height: 1.4rem;
}

.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--cyan);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

/* CTA buttons */
.h-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

/* Stat strip */
.h-stats {
  display: flex;
  gap: 2.5rem;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.st-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
}

.st-lbl {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(160, 175, 220, 0.45);
  text-transform: uppercase;
}

/* ── Right column — logo ────────────────────────────────────── */

.h-right {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.logo-wrap {
  position: relative;
  display: inline-block;
}

.logo-wrap img {
  width: min(480px, 48vw);
  display: block;
  position: relative;
  z-index: 2;
  animation: logo-pulse 4s ease-in-out infinite;
}

/* Expanding orbit rings around logo */
.lg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring-expand 3s ease-out infinite;
}

.lg-ring:nth-child(1) { width: 115%; padding-top: 115%; border-color: rgba(255, 45, 141, 0.28); animation-delay: 0s; }
.lg-ring:nth-child(2) { width: 145%; padding-top: 145%; border-color: rgba(0, 240, 255, 0.18);   animation-delay: 1s; }
.lg-ring:nth-child(3) { width: 175%; padding-top: 175%; border-color: rgba(168, 85, 247, 0.13); animation-delay: 2s; }
/* =============================================================
   SUBPAGE — Shared layouts used by about / services / marketing /
   process / pricing / contact subpages.
   ============================================================= */

/* ── Subpage hero (centered banner) ─────────────────────────── */

.sp-hero {
  padding: 9.5rem var(--edge) 4rem;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

.sp-hero .s-tag {
  justify-content: center;
}

.sp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 1.1rem;
}

.sp-hero .sp-lede {
  font-size: 1.06rem;
  color: rgba(180, 195, 230, 0.7);
  line-height: 1.75;
  max-width: 620px;
  margin: 0 auto;
}

/* ── Section wrapper (subpage) ──────────────────────────────── */

.sp-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem var(--edge);
}

.sp-section-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 5rem var(--edge);
}

.sp-section-hdr {
  margin-bottom: 3rem;
}

.sp-section-hdr.center {
  text-align: center;
}

.sp-section-hdr.center .s-tag {
  justify-content: center;
}

/* ── Two-column content block (intro + list) ────────────────── */

.sp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 860px) {
  .sp-split {
    grid-template-columns: 1fr 1.15fr;
    gap: 4.5rem;
  }
}

.sp-split-l h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

.sp-split-l p {
  font-size: 1.02rem;
  color: rgba(180, 195, 230, 0.7);
  line-height: 1.8;
  margin-bottom: 1.1rem;
}

.sp-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-bullets li {
  font-size: 1rem;
  color: rgba(200, 210, 240, 0.82);
  line-height: 1.6;
  padding: 0.7rem 0 0.7rem 1.8rem;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sp-bullets li:last-child {
  border-bottom: none;
}

.sp-bullets li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0.7rem;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.55);
}

.sp-bullets.pk li::before { color: var(--pink); text-shadow: 0 0 8px rgba(255, 45, 141, 0.55); }
.sp-bullets.pu li::before { color: var(--purple); text-shadow: 0 0 8px rgba(168, 85, 247, 0.55); }

/* ── Mission statement (oversized) ──────────────────────────── */

.sp-mission {
  text-align: center;
  padding: 6rem var(--edge);
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

.sp-mission::before,
.sp-mission::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.5;
}

.sp-mission::before { top: 1.5rem; }
.sp-mission::after { bottom: 1.5rem; }

.sp-mission-tag {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--pink);
  text-shadow: 0 0 10px rgba(255, 45, 141, 0.55);
  margin-bottom: 2rem;
}

.sp-mission p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  font-weight: 700;
  line-height: 1.4;
  color: rgba(230, 240, 255, 0.92);
  letter-spacing: 0.005em;
}

.sp-mission p .acc {
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
}

/* ── Team grid (monogram avatars) ───────────────────────────── */

.sp-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 3.5rem;
}

@media (min-width: 720px) {
  .sp-team-grid { grid-template-columns: repeat(3, 1fr); }
}

.sp-tm {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 2.4rem 1.8rem 2.2rem;
  text-align: center;
  transition: transform 0.35s ease, border-color 0.35s, box-shadow 0.35s;
}

.sp-tm:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4),
              0 0 24px rgba(0, 240, 255, 0.1);
}

.sp-tm-avatar {
  width: 116px;
  height: 116px;
  margin: 0 auto 1.4rem;
  display: block;
}

.sp-tm-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}

.sp-tm-role {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
  margin-bottom: 1rem;
}

.sp-tm-loc {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(170, 185, 230, 0.6);
  margin-bottom: 1.4rem;
}

.sp-tm-bio {
  font-size: 0.95rem;
  color: rgba(190, 200, 235, 0.78);
  line-height: 1.65;
  text-align: left;
}

/* Color variants for monogram backgrounds (cycled via :nth-child for safety) */
.sp-tm.tm-pk .sp-tm-role { color: var(--pink); text-shadow: 0 0 8px rgba(255, 45, 141, 0.55); }
.sp-tm.tm-cy .sp-tm-role { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 240, 255, 0.55); }
.sp-tm.tm-pu .sp-tm-role { color: var(--purple); text-shadow: 0 0 8px rgba(168, 85, 247, 0.55); }

/* ── Value pillars (three-up icons) ─────────────────────────── */

.sp-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 2.5rem;
}

@media (min-width: 720px) {
  .sp-values { grid-template-columns: repeat(3, 1fr); }
}

.sp-val {
  padding: 1.8rem 1.4rem;
  border-left: 2px solid rgba(0, 240, 255, 0.35);
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.035), transparent 60%);
}

.sp-val-t {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 0.55rem;
}

.sp-val-d {
  font-size: 0.93rem;
  color: rgba(190, 200, 235, 0.72);
  line-height: 1.65;
}

/* ── Big-stat callout strip ─────────────────────────────────── */

.sp-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin: 3rem 0 1rem;
}

@media (min-width: 720px) {
  .sp-stats { grid-template-columns: repeat(3, 1fr); }
}

.sp-stat {
  text-align: center;
  padding: 1.8rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.sp-stat-num {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--pink);
  text-shadow: 0 0 20px rgba(255, 45, 141, 0.55);
  display: block;
  margin-bottom: 0.35rem;
}

.sp-stat.cy .sp-stat-num { color: var(--cyan); text-shadow: 0 0 20px rgba(0, 240, 255, 0.55); }
.sp-stat.pu .sp-stat-num { color: var(--purple); text-shadow: 0 0 20px rgba(168, 85, 247, 0.55); }

.sp-stat-lbl {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(180, 195, 230, 0.65);
}

/* ── Numbered process steps (vertical, no diagram) ─────────── */

.sp-steps {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  gap: 1.2rem;
}

.sp-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.6rem;
  padding: 1.8rem 1.6rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.sp-step:hover {
  border-color: rgba(0, 240, 255, 0.2);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

.sp-step-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--pink);
  text-shadow: 0 0 16px rgba(255, 45, 141, 0.55);
  line-height: 1;
}

.sp-step:nth-child(4n+2) .sp-step-num { color: var(--cyan); text-shadow: 0 0 16px rgba(0, 240, 255, 0.55); }
.sp-step:nth-child(4n+3) .sp-step-num { color: var(--purple); text-shadow: 0 0 16px rgba(168, 85, 247, 0.55); }

.sp-step-t {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.sp-step-d {
  font-size: 0.97rem;
  color: rgba(190, 200, 235, 0.74);
  line-height: 1.7;
  margin-bottom: 0.8rem;
}

.sp-step-meta {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(170, 185, 230, 0.55);
}

/* ── FAQ (no JS, all open) ──────────────────────────────────── */

.sp-faq {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

.sp-q {
  padding: 1.6rem 1.6rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.sp-q-t {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
  margin-bottom: 0.7rem;
  letter-spacing: 0.02em;
}

.sp-q-a {
  font-size: 0.98rem;
  color: rgba(190, 200, 235, 0.75);
  line-height: 1.75;
}

/* ── Pricing teaser (compact starter cards on home) ─────────── */

.sp-tease {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 3rem;
}

@media (min-width: 720px) {
  .sp-tease { grid-template-columns: repeat(4, 1fr); }
}

.sp-tease-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 1.7rem 1.4rem;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.sp-tease-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 45, 141, 0.3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.sp-tease-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
  margin-bottom: 0.7rem;
}

.sp-tease-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--pink);
  text-shadow: 0 0 16px rgba(255, 45, 141, 0.45);
  margin-bottom: 0.2rem;
  line-height: 1;
}

.sp-tease-unit {
  font-size: 0.78rem;
  color: rgba(170, 185, 230, 0.6);
  margin-bottom: 1rem;
}

.sp-tease-desc {
  font-size: 0.88rem;
  color: rgba(190, 200, 235, 0.72);
  line-height: 1.6;
}

/* ── CTA banner ─────────────────────────────────────────────── */

.sp-cta {
  text-align: center;
  padding: 6rem var(--edge) 8rem;
  max-width: 760px;
  margin: 0 auto;
}

.sp-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 900;
  margin-bottom: 1.1rem;
  line-height: 1.15;
}

.sp-cta p {
  font-size: 1.02rem;
  color: rgba(180, 195, 230, 0.65);
  line-height: 1.7;
  margin-bottom: 2.2rem;
}

.sp-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Map-Pack visual block (marketing page) ─────────────────── */

.sp-mp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 860px) {
  .sp-mp { grid-template-columns: 1fr 1fr; }
}

.sp-mp-visual {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.04), rgba(255, 45, 141, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sp-mp-row {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: rgba(190, 200, 235, 0.65);
  transition: border-color 0.3s, color 0.3s;
}

.sp-mp-row.win {
  border-color: rgba(0, 240, 255, 0.45);
  color: #fff;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.15);
}

.sp-mp-row.win .sp-mp-pin {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.65);
}

.sp-mp-pin {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(180, 195, 230, 0.6);
}

.sp-mp-cap {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(180, 195, 230, 0.5);
  margin-top: 0.5rem;
  text-align: center;
}

/* ── Mission / story body copy ──────────────────────────────── */

.sp-mission-body {
  font-size: 1.1rem;
}

@media (min-width: 600px) {
  .sp-mission-body {
    font-size: 1.18rem;
  }
}

/* ── Reveal-on-scroll (shared) ──────────────────────────────── */

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.rv.vis,
.rv.in {
  opacity: 1;
  transform: none;
}
/* =============================================================
   FOOTER
   ============================================================= */

footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2.5rem var(--edge);
}

.f-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  text-align: center;
}

.f-logo {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
}

.f-logo .pk { color: var(--pink); text-shadow: 0 0 10px var(--pink); }
.f-logo .cy { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }

.f-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  list-style: none;
}

.f-links a {
  font-size: 0.78rem;
  color: rgba(160, 175, 225, 0.38);
  text-decoration: none;
  transition: color 0.2s;
}

.f-links a:hover {
  color: var(--cyan);
}

.f-copy {
  font-size: 0.78rem;
  color: rgba(140, 155, 205, 0.32);
  letter-spacing: 0.05em;
}
/* =============================================================
   RESPONSIVE — Mobile & tablet breakpoints
   ============================================================= */

@media (max-width: 920px) {

  /* Hero: stack columns */
  #hero {
    /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr), whose
       auto minimum grows to the min-content of unbreakable nowrap text. The
       12-char Spanish scramble ("EXPERIENCIAS") would expand the track wider
       than the viewport and reflow the column. Capping the minimum at 0 keeps
       the track at viewport width regardless of the scramble content. */
    grid-template-columns: minmax(0, 1fr);
    padding: 6rem var(--edge) 3rem;
    text-align: center;
    /* Clip the glitch scramble's horizontal spill: a wide random frame is
       wider than the centered title box, and on the narrow mobile column its
       overflow used to extend the page scrollWidth every frame, jittering the
       whole viewport sideways. Clip at the hero box so the page width can
       never grow. `clip` (not hidden) keeps no scroll container; the hidden
       fallback covers Safari < 16. overflow-y stays visible. */
    overflow-x: hidden;
    overflow-x: clip;
  }

  .h-eyebrow { justify-content: center; }
  .h-btns    { justify-content: center; }
  .h-stats   { justify-content: center; }

  /* Hide logo on mobile — it crowds the layout */
  .h-right { display: none; }

  /* Section wrapper padding */
  .sw { padding: 5rem var(--edge); }

  /* Process: hide decorative SVG, show steps only */
  .proc-grid { grid-template-columns: 1fr; }
  .proc-svg-wrap { display: none; }

  /* Contact: stack columns */
  .ct-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Nav: tighten vertical padding — horizontal comes from --edge */
  nav { padding-top: 1rem; padding-bottom: 1rem; }
}

@media (max-width: 480px) {

  /* Form: stack the two-column row */
  .f2 { grid-template-columns: 1fr; }
}