:root{
  --bg: #F7F7F4;
  --surface: #FFFFFF;
  --ink: #16171B;
  --muted: #6B6D76;
  --line: #E4E4DF;
  --accent: #3355FF;
  --accent-soft: #E9EDFF;
  --chrome-bar: #FBFBF9;
  --chip-bg: #16171B;
  --chip-fg: #FFFFFF;
  --nav-bg: rgba(247,247,244,0.85);
  --dot-red: #FF5F57;
  --dot-yellow: #FFBD2E;
  --dot-green: #28C840;
  --radius: 14px;
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg: #131316;
  --surface: #1B1C21;
  --ink: #F3F3F0;
  --muted: #A5A7B2;
  --line: #2B2C33;
  --accent: #7C97FF;
  --accent-soft: #1E2547;
  --chrome-bar: #1E1F25;
  --chip-bg: #F3F3F0;
  --chip-fg: #16171B;
  --nav-bg: rgba(19,19,22,0.85);
  color-scheme: dark;
}

*{ box-sizing: border-box; }

body, .browser, .chrome-bar, .service-card, .port-card, .pricing-card,
.test-card, .faq-item, .founder-card, .process-step, .stats-grid,
.mobile-nav, nav, input, textarea{
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: 'Space Grotesk', sans-serif;
  margin: 0;
  letter-spacing: -0.02em;
}
.mono{
  font-family: 'IBM Plex Mono', monospace;
}
a{ color: inherit; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; }

.wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- beta banner ---------- */
.beta-banner{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  text-align:center;
  padding: 9px 16px;
  font-size: 12.5px;
  color: var(--muted);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.beta-tag{
  display:inline-flex; align-items:center;
  background: var(--accent-soft);
  color: var(--accent);
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 5px;
  margin-right: 8px;
  vertical-align: middle;
}

/* ---------- nav: classic bar with names at the top of the page.
   Not sticky — it scrolls away naturally like a normal header. Once it's
   scrolled past, the compact "menu" button living in each page's browser
   chrome-bar (see below) and the floating dock at the bottom take over. */
nav{
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 14px 24px;
  max-width: 1040px; margin:0 auto;
  position: relative;
}
.logo{
  font-weight:700; font-size: 18px;
  display:flex; align-items:center; gap:8px;
  text-decoration:none; color: var(--ink);
  flex-shrink:0;
}
.logo .dots{ display:flex; gap:4px; }
.logo .dot{ width:7px; height:7px; border-radius:50%; }

/* traffic-light dots (logo + browser chrome) */
.dot-red{ background: var(--dot-red); }
.dot-yellow{ background: var(--dot-yellow); }
.dot-green{ background: var(--dot-green); }

.nav-links{
  display:flex; gap: 18px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--muted);
}
.nav-links a{ text-decoration:none; transition: color .15s; white-space:nowrap; }
.nav-links a:hover, .nav-links a:focus-visible{ color: var(--ink); }
.nav-links a.active{ color: var(--accent); }
@media (max-width: 720px){ .nav-links{ display:none; } }

/* shared trigger look — used both by the top nav's mobile hamburger
   and the compact "menu" button inside the browser chrome-bar */
.nav-toggle{
  display:flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:8px;
  background:transparent;
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace; color:var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
.nav-toggle:hover, .nav-toggle:focus-visible{ border-color: var(--accent); color: var(--accent); }
.nav-toggle-bars{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.nav-toggle-bars span{
  width:16px; height:2px; background:currentColor; display:block;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.open .nav-toggle-bars span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle.open .nav-toggle-bars span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* the top nav's own hamburger — mobile only, hidden once names fit.
   This is the ONLY menu trigger; on scroll it hands off to the dock below
   instead of a second button, so mobile never shows two menus at once. */
.nav-inner .nav-toggle{ padding: 8px 14px; font-size:12.5px; }
@media (min-width: 721px){ .nav-inner .nav-toggle{ display:none; } }

.mobile-nav{
  /* lives as a body-level sibling right after </nav> in the HTML (not
     nested inside it) — <nav> has backdrop-filter, which makes it a
     stacking context + containing block for fixed descendants. Nested
     inside, this panel got trapped behind <nav>'s own paint layer and
     rendered underneath .hero (position:relative) regardless of z-index.
     position:fixed here is relative to the viewport again; top/right are
     set in JS from the toggle button's real position since the beta
     banner's height (and therefore the nav's) varies by language/wrap. */
  position:fixed;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,20,20,0.04), 0 16px 40px -20px rgba(20,20,20,0.35);
  display:flex; flex-direction:column; gap:2px;
  padding: 10px;
  opacity:0; transform: translateY(-8px);
  pointer-events:none;
  z-index: 65;
  transition: opacity .2s ease, transform .2s ease;
}
.mobile-nav.open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-nav a{
  font-family:'IBM Plex Mono', monospace; font-size: 13px; color: var(--muted);
  text-decoration:none; padding: 9px 12px; border-radius: 8px;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible{ background: var(--accent-soft); color: var(--ink); }
.mobile-nav a.active{ color: var(--accent); }
.mobile-nav a.active:hover{ color: var(--accent); }
.mobile-nav .btn{ margin-top:8px; justify-content:center; }
@media (max-width: 380px){ .mobile-nav{ width: calc(100vw - 32px); } }
/* kinetic cascade — each link/button fades and slides in with a short stagger.
   Delay is only ever applied to opacity/transform (the entrance); background-color
   and color (the hover highlight) always transition instantly, so hovering a link
   right after opening the menu never feels laggy. */
.mobile-nav a, .mobile-nav .btn{
  opacity:0; transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, background-color .15s ease, color .15s ease;
}
.mobile-nav.open a, .mobile-nav.open .btn{ opacity:1; transform:none; }
.mobile-nav.open a:nth-child(1){ transition: opacity .25s ease .03s, transform .25s ease .03s, background-color .15s ease, color .15s ease; }
.mobile-nav.open a:nth-child(2){ transition: opacity .25s ease .06s, transform .25s ease .06s, background-color .15s ease, color .15s ease; }
.mobile-nav.open a:nth-child(3){ transition: opacity .25s ease .09s, transform .25s ease .09s, background-color .15s ease, color .15s ease; }
.mobile-nav.open a:nth-child(4){ transition: opacity .25s ease .12s, transform .25s ease .12s, background-color .15s ease, color .15s ease; }
.mobile-nav.open a:nth-child(5){ transition: opacity .25s ease .15s, transform .25s ease .15s, background-color .15s ease, color .15s ease; }
.mobile-nav.open a:nth-child(6){ transition: opacity .25s ease .18s, transform .25s ease .18s, background-color .15s ease, color .15s ease; }
.mobile-nav.open a:nth-child(7){ transition: opacity .25s ease .21s, transform .25s ease .21s, background-color .15s ease, color .15s ease; }
.mobile-nav.open .btn{ transition: opacity .25s ease .24s, transform .25s ease .24s, background-color .15s ease, color .15s ease; }

/* ---------- browser chrome ---------- */
.browser{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,20,20,0.03), 0 12px 32px -18px rgba(20,20,20,0.25);
}
.chrome-bar{
  display:flex; align-items:center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--chrome-bar);
}
.chrome-dots{ display:flex; gap:7px; flex-shrink:0; }
.chrome-dots span{ width:11px; height:11px; border-radius:50%; }
.chrome-url{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 12px;
  flex:1;
  overflow:hidden; white-space:nowrap;
}
.chrome-url .caret{
  display:inline-block; width:7px; height:13px;
  background: var(--accent);
  margin-left:2px; vertical-align:-2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

section{ padding: 86px 0; }
section.tight{ padding: 64px 0; }

/* in-section headings (smaller than page-level h2) */
.section-title{ font-size:28px; margin-bottom:28px; }
.section-title--md{ font-size:24px; margin-bottom:24px; }
.section-title--tight{ margin-bottom:18px; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:""; width:16px; height:1px; background: var(--accent);
}

.breadcrumb{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom: 20px;
  transition: color .15s;
}
.breadcrumb:hover{ color: var(--accent); }

/* ---------- hero ---------- */
.hero{ padding: 56px 0 40px; position:relative; }
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(125% 125% at 50% 10%, #000 40%, #6633ee 100%);
  transition: opacity .4s ease;
}
:root[data-theme="dark"] .hero::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .hero::before{ transition:none; } }
.hero-inner{ padding: 48px 40px 56px; }
.hero h1{
  font-size: clamp(32px, 5.2vw, 54px);
  line-height: 1.06;
  max-width: 760px;
}
.hero h1 .hl{ color: var(--accent); }
.hero p.lead{
  margin-top: 20px;
  font-size: 17px;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.6;
}
.page-hero-inner{ padding: 40px 40px 44px; }
.page-hero-inner h1{
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  max-width: 700px;
}
.cta-row{ display:flex; gap:14px; margin-top: 32px; flex-wrap:wrap; }
.btn{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13.5px;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--chip-bg); color: var(--chip-fg); }
.btn-primary:hover{ background: var(--accent); }
.btn-ghost{ border-color: var(--line); color: var(--ink); background:transparent; }
.btn-ghost:hover{ border-color: var(--ink); }
.link-more{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  margin-top: 24px;
}
.link-more:hover{ text-decoration: underline; }

.wireframe{
  margin-top: 40px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wf-block{
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(10px);
  animation: assemble .5s ease forwards;
}
.wf-block.fill{ background: var(--accent-soft); border-style: solid; border-color: var(--accent-soft); }
@keyframes assemble{ to{ opacity:1; transform: translateY(0); } }
.wf-1{ grid-column: 1 / 3; height:16px; animation-delay: .5s; }
.wf-2{ height:64px; animation-delay: .68s; }
.wf-3{ height:64px; animation-delay: .8s; }
.wf-4{ grid-column:1/3; height:34px; width:140px; animation-delay: .95s; }

@media (max-width: 620px){
  .hero-inner{ padding: 32px 20px 40px; }
  .page-hero-inner{ padding: 28px 20px 32px; }
}

/* ---------- stats ---------- */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow:hidden;
}
.stat-item{
  padding: 30px 18px;
  text-align:center;
  border-right: 1px solid var(--line);
}
.stat-item:last-child{ border-right:none; }
.stat-num{
  font-family:'Space Grotesk', sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight:700;
  color: var(--accent);
  display:block;
  font-variant-numeric: tabular-nums;
}
.stat-label{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--muted);
  display:block;
  margin-top: 6px;
}
@media (max-width: 700px){
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .stat-item{ border-bottom: 1px solid var(--line); }
  .stat-item:nth-child(2n){ border-right:none; }
  .stat-item:nth-last-child(-n+2){ border-bottom:none; }
}

/* ---------- sobre nosotros ---------- */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items:start;
}
.about-copy p{ color: var(--muted); line-height:1.75; font-size:15.5px; margin: 0 0 16px; }
.founders{ display:flex; flex-direction:column; gap: 14px; }
.founder-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  display:flex; justify-content:space-between; align-items:center;
  gap: 12px;
}
.founder-name{ font-weight:600; font-size:14.5px; }
.founder-role{ color: var(--muted); font-size: 12.5px; margin-top:2px; }
.founder-handle{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 9px;
  border-radius: 6px;
  white-space:nowrap;
}
@media (max-width: 780px){ .about-grid{ grid-template-columns: 1fr; } }

/* ---------- servicios ---------- */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 22px;
}
.service-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--muted);
  display:block; margin-bottom: 14px;
}
.service-card h3{ font-size: 18px; margin-bottom: 10px; }
.service-card p{ color: var(--muted); font-size: 14px; line-height:1.6; margin:0; }
@media (max-width: 780px){ .services-grid{ grid-template-columns: 1fr; } }

/* ---------- proceso ---------- */
.process-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.process-step{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px;
}
.step-num{
  width:34px; height:34px; border-radius:50%;
  background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; margin-bottom:16px;
}
.process-step h3{ font-size:16px; margin-bottom:8px; }
.process-step p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0; }
@media (max-width: 860px){ .process-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }

/* ---------- portafolio ---------- */
.port-filters{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.port-filter{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  padding: 9px 15px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.port-filter:hover{ border-color: var(--ink); color: var(--ink); }
.port-filter.active{ background: var(--chip-bg); color: var(--chip-fg); border-color: var(--chip-bg); }
.port-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.port-card{ transition: opacity .25s ease, transform .25s ease; }
.port-card.hide{ display:none; }
.port-card .chrome-bar{ padding: 9px 12px; }
.port-card .chrome-dots span{ width:8px; height:8px; }
a.port-card{ display:block; text-decoration:none; color:inherit; }
.port-thumb{
  height: 160px;
  background:
    linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.port-thumb .ph-line{
  position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:5px;
}
.port-thumb iframe{
  position:absolute; top:0; left:0;
  width:400%; height:400%;
  transform: scale(.25);
  transform-origin: top left;
  border:0; pointer-events:none;
  background:#fff;
}
.port-meta{ padding: 16px 18px 20px; }
.port-meta h3{ font-size:15.5px; }
.port-meta p{ margin:6px 0 0; color:var(--muted); font-size:13px; }
.port-note{
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
  font-family:'IBM Plex Mono', monospace;
}
@media (max-width: 780px){ .port-grid{ grid-template-columns: 1fr; } }

/* ---------- precios ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items:stretch;
}
.pricing-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 24px;
  display:flex; flex-direction:column;
  position:relative;
}
.pricing-card h3{ font-size:19px; }
.pricing-card.featured{
  border-color: var(--accent);
  box-shadow: 0 14px 36px -20px rgba(51,85,255,0.4);
}
.pricing-badge{
  position:absolute; top:-11px; right:22px;
  background: var(--accent); color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  padding: 4px 10px; border-radius:6px;
}
.price-tag{
  font-family:'Space Grotesk', sans-serif;
  font-size: 32px; font-weight:700;
  margin: 14px 0 2px;
}
.price-tag .unit{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px; color: var(--muted); font-weight:400;
}
.pricing-feats{ list-style:none; padding:0; margin: 18px 0 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pricing-feats li{ font-size:13.5px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; line-height:1.4; }
.pricing-feats li::before{ content:"✓"; color:var(--accent); font-weight:700; }
.pricing-feats li.no{ opacity:.55; }
.pricing-feats li.no::before{ content:"✕"; color:var(--muted); font-weight:700; }
.pricing-card .btn{ justify-content:center; }
@media (max-width: 860px){ .pricing-grid{ grid-template-columns: 1fr; } }

/* ---------- carousel (shared by testimonios + portafolio) ---------- */
.carousel{ position:relative; }
.carousel-viewport{ overflow:hidden; border-radius:12px; }
.carousel-track{ display:flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.carousel-track > *{
  min-width:100%;
  box-sizing:border-box;
}
.carousel-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; }
.carousel-arrow{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: border-color .15s, transform .15s;
  color: var(--ink);
}
.carousel-arrow:hover{ border-color: var(--accent); transform: translateY(-1px); }
.carousel-dots{ display:flex; gap:8px; }
.carousel-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--line); border:none; cursor:pointer; padding:0;
  transition: background .15s, transform .15s;
}
.carousel-dot.active{ background: var(--accent); transform:scale(1.25); }

/* ---------- testimonios ---------- */
.test-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
}
.test-card p.quote{
  font-size: 14.5px; line-height:1.65; color: var(--ink);
  margin: 0 0 18px;
}
.test-who{ display:flex; align-items:center; gap:10px; }
.avatar{
  width:32px; height:32px; border-radius:50%;
  background: var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; color:var(--accent); font-weight:600;
}
.test-name{ font-size:13px; font-weight:600; }
.test-role{ font-size:12px; color:var(--muted); }

/* ---------- portafolio carousel ---------- */
.carousel-slide{ padding: 0 2px; }
.carousel-slide .port-thumb{ height: 240px; }
@media (max-width: 620px){ .carousel-slide .port-thumb{ height: 180px; } }

/* ---------- faq ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width: 720px; }
.faq-item{
  border:1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow:hidden;
}
.faq-question{
  width:100%; text-align:left;
  background:none; border:none; cursor:pointer;
  padding: 18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size: 15px; font-weight:600; color: var(--ink);
}
.faq-index{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--accent); margin-right:10px; }
.faq-chevron{ flex-shrink:0; transition: transform .25s ease; color: var(--muted); }
.faq-item.open .faq-chevron{ transform: rotate(180deg); }
.faq-answer{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-answer-inner{ overflow:hidden; }
.faq-item.open .faq-answer{ grid-template-rows: 1fr; }
.faq-answer p{ margin:0; padding: 0 20px 18px; color: var(--muted); font-size:14px; line-height:1.65; }

/* ---------- cta banner ---------- */
.cta-banner{
  background: #16171B;
  color:#fff;
  border-radius: var(--radius);
  padding: 52px 40px;
  text-align:center;
}
.cta-banner h2{ font-size: clamp(24px, 3.4vw, 32px); color:#fff; margin-bottom:14px; }
.cta-banner p{ color:#B7B8C0; max-width:520px; margin:0 auto 28px; font-size:15px; line-height:1.6; }
.cta-banner .cta-row{ justify-content:center; margin-top:0; }
.cta-banner .btn-primary{ background: var(--accent); }
.cta-banner .btn-primary:hover{ background:#fff; color:#16171B; }
.cta-banner .btn-ghost{ border-color:#3A3B42; color:#fff; }
.cta-banner .btn-ghost:hover{ border-color:#fff; }
.cta-terminal{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:#8C8FA3; margin-top:26px;
}
.cta-terminal .caret2{
  display:inline-block; width:7px; height:13px; background: var(--accent);
  margin-left:2px; vertical-align:-2px; animation: blink 1s step-end infinite;
}

/* ---------- contacto ---------- */
.contact-inner{ padding: 44px 40px; }
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.contact-copy p{ color: var(--muted); font-size:15px; line-height:1.7; }
.contact-line{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 13.5px;
  margin-top: 22px;
}
.contact-line span.k{ color: var(--muted); }
.contact-line a{ text-decoration:none; transition: color .15s ease; }
.contact-line a:hover{ color: var(--accent); }
form{ display:flex; flex-direction:column; gap:14px; }
label{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  display:block;
}
input, textarea{
  width:100%;
  font-family:'IBM Plex Sans', sans-serif;
  font-size: 14.5px;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}
input:focus, textarea:focus, .btn:focus-visible,
.carousel-arrow:focus-visible, .carousel-dot:focus-visible, .faq-question:focus-visible,
.port-filter:focus-visible, .nav-toggle:focus-visible, .dock-item:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
textarea{ min-height: 96px; }
.field{ display:flex; flex-direction:column; }
.form-status{ font-size:13px; color: var(--accent); font-family:'IBM Plex Mono', monospace; min-height:18px; }
@media (max-width: 780px){ .contact-grid{ grid-template-columns: 1fr; } .contact-inner{ padding: 28px 22px; } }

/* ---------- footer ---------- */
footer{
  border-top: 1px solid var(--line);
  padding: 48px 0 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}
.footer-col h4{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.footer-col p{ color: var(--muted); font-size:13px; line-height:1.6; margin:0; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a{
  display:flex; align-items:center; gap:9px;
  text-decoration:none; color: var(--muted); font-size:13px;
  transition: color .15s;
}
.footer-links a:hover{ color: var(--accent); }
.footer-icon{ width:15px; height:15px; flex-shrink:0; }
.footer-bottom{
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--muted);
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr; gap:24px; } }

/* ---------- dock (floating quick-nav, fixed to the bottom of the viewport) ---------- */
.dock-wrap{
  position: fixed; left:0; right:0; bottom: 16px;
  display:flex; justify-content:center;
  z-index: 60;
  pointer-events: none;
  padding: 0 12px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
/* hidden until you scroll past the classic nav above — makes it read as
   the SAME menu handing off from names-at-top to icons-at-bottom, rather
   than two unrelated nav elements */
.dock-wrap.show{ opacity:1; transform:none; }
.dock{
  pointer-events: none;
  display:flex; align-items:flex-end; gap: 14px;
  list-style:none; margin:0;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20,20,20,0.04), 0 16px 40px -20px rgba(20,20,20,0.35);
  max-width: calc(100vw - 24px);
}
.dock-wrap.show .dock{ pointer-events: auto; }
.dock-sep{ width:1px; align-self:stretch; background: var(--line); margin: 4px 2px; flex-shrink:0; }
.dock-item{
  position:relative;
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor:pointer;
  text-decoration:none;
  transform-origin: bottom center;
  transition: transform .18s cubic-bezier(.32,1.4,.5,1), background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dock-item:hover, .dock-item:focus-visible{ border-color: var(--accent); color: var(--accent); }
.dock-item svg{ width:18px; height:18px; flex-shrink:0; }
.dock-item::after{
  content: attr(data-tip);
  position:absolute; bottom: calc(100% + 14px); left:50%;
  transform: translateX(-50%) translateY(4px);
  font-family:'IBM Plex Mono', monospace; font-size: 11px; white-space:pre;
  color: var(--ink); background: var(--surface); border:1px solid var(--line);
  padding: 4px 9px; border-radius: 6px;
  opacity:0; pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 2;
}
.dock-item:hover::after, .dock-item:focus-visible::after{ opacity:1; transform: translateX(-50%) translateY(0); }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
/* standalone theme toggle used in the top nav (the dock's own theme
   button reuses .dock-item for its circular sizing/hover/tooltip) */
.nav-inner .theme-toggle{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.nav-inner .theme-toggle:hover, .nav-inner .theme-toggle:focus-visible{ border-color: var(--accent); color: var(--accent); }
.nav-inner .theme-toggle svg{ width:16px; height:16px; }

/* language switcher — same circular-icon-button treatment as the theme
   toggle, but shows a text code (ES/EN/中) instead of an svg icon */
.lang-toggle{ font-family:'IBM Plex Mono', monospace; }
.lang-toggle .lang-code{ font-size: 10.5px; font-weight:600; letter-spacing: 0.02em; }
.nav-inner .lang-toggle{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.nav-inner .lang-toggle:hover, .nav-inner .lang-toggle:focus-visible{ border-color: var(--accent); color: var(--accent); }
.dock-item.lang-toggle .lang-code{ font-size: 10px; }
body{ padding-bottom: 96px; }
@media (max-width: 480px){
  .dock{ gap:6px; padding: 8px 10px; }
  .dock-item{ width:36px; height:36px; }
  .dock-item svg{ width:16px; height:16px; }
}
@media (max-width: 360px){
  .dock{ gap:4px; padding: 7px 8px; }
  .dock-item{ width:32px; height:32px; }
  .dock-item svg{ width:15px; height:15px; }
}

/* ---------- interactive hover states ---------- */
@media (hover:hover) and (pointer:fine){
  .service-card, .port-card, .pricing-card, .test-card, .founder-card,
  .process-step, .faq-item{
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .3s ease, color .3s ease;
  }
  .service-card:hover, .pricing-card:hover, .founder-card:hover, .process-step:hover{
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 14px 32px -22px rgba(51,85,255,0.35);
  }
  .port-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -20px rgba(20,20,20,0.3);
  }
  .test-card:hover{ border-color: var(--accent); }
}

.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  /* one-time decorative reveals: safe to force straight to their final state */
  .wf-block, .reveal{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
  /* interactive/stateful elements: only kill the animation itself — forcing
     opacity/transform here would break real functionality (e.g. the mobile
     nav panel would stay permanently visible, or the carousel would get
     stuck on its first slide since transform is how it tracks position) */
  .carousel-track, .faq-answer, .dock-item, .dock-wrap, .mobile-nav, .mobile-nav a, .mobile-nav .btn,
  .service-card, .port-card, .pricing-card, .founder-card, .process-step{
    animation:none !important; transition:none !important;
  }
  .caret, .caret2{ animation:none !important; }
}