/* =========================================================
   AIkimia Labs — sistema visual compartido
   Naranja propietario + carbón + tipografía Manrope
   ========================================================= */

:root{
  --orange: #FF751F;
  --orange-deep: #E85E0A;
  --orange-soft: #FFB27A;
  --carbon: #101820;
  --carbon-2: #171f28;
  --gray: #7D828C;
  --gray-light: #B7BAC1;
  --offwhite: #F6F6F3;
  --white: #FFFFFF;

  --ink: var(--carbon);
  --bg: var(--white);
  --bg-soft: var(--offwhite);

  --container: 1240px;
  --gutter: clamp(24px, 5vw, 64px);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 144px;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 0.22s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  --fs-eyebrow: 13px;
  --fs-body: clamp(16px, 0.95vw + 0.4rem, 18px);
  --fs-h1: clamp(2.6rem, 3.6vw + 1.4rem, 5.4rem);
  --fs-h2: clamp(2rem, 2.2vw + 1rem, 3.4rem);
  --fs-h3: clamp(1.35rem, 1vw + 0.9rem, 1.9rem);
  --fs-lead: clamp(1.1rem, 0.6vw + 0.9rem, 1.4rem);
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }

:focus-visible{
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

h1, h2, h3, h4{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
p{ margin: 0; }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lead{
  font-size: var(--fs-lead);
  color: var(--gray);
  font-weight: 400;
  line-height: 1.55;
}

/* ---------- Eyebrow / numbered section labels (brand-book system) ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.eyebrow::before{
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
}
.eyebrow--on-dark{ color: var(--orange); }
.eyebrow--on-dark::before{ background: var(--orange); }

/* ---------- Buttons ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
  will-change: transform;
}
.btn svg{ width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-spring); }
.btn:hover svg{ transform: translateX(4px); }
.btn:active{ transform: scale(0.96); }

.btn--primary{
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(16,24,32,0.08);
}
.btn--primary:hover{
  background: var(--orange-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(255,117,31,0.55);
}

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: rgba(16,24,32,0.16);
}
.btn--ghost:hover{
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn--ghost-light{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.28);
}
.btn--ghost-light:hover{
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn--block{ width: 100%; justify-content: center; }
.btn--sm{ padding: 12px 20px; font-size: 14px; }
.btn[disabled]{ opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* ---------- Nav ---------- */
.site-nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding var(--dur-med) var(--ease-out-expo),
              background-color var(--dur-med) var(--ease-out-expo),
              box-shadow var(--dur-med) var(--ease-out-expo),
              backdrop-filter var(--dur-med) var(--ease-out-expo);
}
.site-nav .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-nav.is-scrolled{
  padding: 12px 0;
  background: rgba(246,246,243,0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(16,24,32,0.06);
}
body.nav-dark .site-nav.is-scrolled{
  background: rgba(16,24,32,0.72);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.nav-dark .brand{ color: var(--white); }
.brand svg{ height: 26px; width: auto; overflow: visible; }
.brand .brand-labs{ color: var(--gray); font-weight: 600; }
.brand--asset{
  width: clamp(156px, 13vw, 190px);
}
.brand--asset img{
  width: 100%;
  height: auto;
  display: block;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a:not(.btn){
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 0;
}
body.nav-dark .nav-links a:not(.btn){ color: rgba(255,255,255,0.86); }
.nav-links a:not(.btn)::after{
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transition: left var(--dur-fast) var(--ease-out-expo), right var(--dur-fast) var(--ease-out-expo);
}
.nav-links a:not(.btn):hover::after,
.nav-links a.is-active::after{ left: 0; right: 0; }
.nav-links a.is-active{ color: var(--orange-deep); }
body.nav-dark .nav-links a.is-active{ color: var(--orange); }

.nav-toggle{
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(16,24,32,0.14);
  background: transparent;
  position: relative;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard), top var(--dur-fast) var(--ease-standard);
}
body.nav-dark .nav-toggle span, body.nav-dark .nav-toggle span::before, body.nav-dark .nav-toggle span::after{ background: var(--white); }
.nav-toggle span{ top: 20px; }
.nav-toggle span::before{ top: -7px; }
.nav-toggle span::after{ top: 7px; }
.nav-toggle.is-open span{ background: transparent; }
.nav-toggle.is-open span::before{ top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after{ top: 0; transform: rotate(-45deg); }

@media (max-width: 880px){
  .nav-toggle{ display: block; }
  .nav-links{
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    background: var(--offwhite);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out-expo);
    gap: var(--space-4);
  }
  body.nav-dark .nav-links{ background: var(--carbon); }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a:not(.btn){ font-size: 22px; }
  .nav-links .btn{ max-width: calc(100vw - 48px); text-align: center; justify-content: center; }
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-scale{
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
  transition-delay: var(--d, 0s);
}
.reveal-scale.is-visible{ opacity: 1; transform: scale(1); }

/* ---------- Sections ---------- */
section{ position: relative; }
.section{ padding-block: var(--space-6); }
.section--tight{ padding-block: var(--space-5); }
.section-head{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 720px;
  margin-bottom: var(--space-5);
}
.section-head h2{ margin-top: 6px; }

.on-dark{ background: var(--carbon); color: var(--white); }
.on-dark .lead{ color: var(--gray-light); }
.on-soft{ background: var(--bg-soft); }

.hr{
  height: 1px;
  background: rgba(16,24,32,0.1);
  border: 0;
  margin: 0;
}
.on-dark .hr{ background: rgba(255,255,255,0.12); }

/* ---------- Grid helpers ---------- */
.grid{ display: grid; gap: var(--space-3); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.card{
  background: var(--white);
  border: 1px solid rgba(16,24,32,0.08);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  transition: transform var(--dur-med) var(--ease-out-expo),
              box-shadow var(--dur-med) var(--ease-out-expo),
              border-color var(--dur-med) var(--ease-out-expo);
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -30px rgba(16,24,32,0.28);
  border-color: rgba(255,117,31,0.35);
}
.card .num{
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--orange-deep);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-2);
}
.card h3{ margin-bottom: 10px; }
.card p{ color: var(--gray); }
.action-icon{
  display: grid; place-items: center; width: 42px; height: 42px;
  margin-bottom: var(--space-3); border-radius: 50%;
  color: var(--orange-deep); background: rgba(255,117,31,.1);
  font-weight: 800; font-size: 20px;
}
.text-link{ display:inline-block; margin-top:var(--space-3); color:var(--orange-deep); font-weight:700; }
.trust-line{ margin-top:22px; color:var(--white); font-size:14px; font-weight:700; letter-spacing:.02em; }
.config-note{ color:var(--gray); font-size:14px; }
.contact-form{ padding:var(--space-4); border:1px solid rgba(16,24,32,.1); border-radius:var(--radius-m); background:var(--offwhite); }
.contact-form .hint{ min-height:1.5em; margin-top:14px; color:var(--gray); }

/* ---------- Microdiagramas: desorden → acción → resultado ---------- */
.flow-diagram{
  display:grid;
  align-items:stretch;
  gap:14px;
  margin:0 0 var(--space-5);
  padding:0;
  list-style:none;
}
.flow-diagram--three{ grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr) 112px minmax(0,1fr); }
.flow-diagram--process{ grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr) 60px minmax(0,1fr) 60px minmax(0,1fr); }
.flow-node{
  min-height:154px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  border:1px solid rgba(16,24,32,.11);
  border-radius:var(--radius-m);
  background:var(--white);
  box-shadow:0 22px 50px -38px rgba(16,24,32,.4);
}
.flow-node small{ color:var(--gray); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.flow-node strong{ margin-top:8px; font-size:clamp(1rem,.55vw + .9rem,1.3rem); line-height:1.25; }
.flow-node--accent{ color:var(--white); background:var(--carbon); border-color:rgba(255,117,31,.55); box-shadow:inset 0 0 0 1px rgba(255,117,31,.12), 0 28px 60px -38px rgba(255,117,31,.8); }
.flow-node--accent small{ color:var(--orange-soft); }
.flow-node--problem{ border-top:3px solid var(--gray-light); }
.flow-node--result{ border-top:3px solid var(--orange); }
.flow-icon,.flow-step{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:auto;
  border-radius:50%;
  background:rgba(255,117,31,.11);
  color:var(--orange-deep);
  font-size:15px;
  font-weight:800;
}
.flow-node--accent .flow-icon,.flow-node--accent .flow-step{ color:var(--white); background:var(--orange); }
.flow-connector{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  position:relative;
}
.flow-connector i{ width:8px; height:8px; border-radius:50%; background:var(--orange); animation:particlePass 2.2s ease-in-out infinite; }
.flow-connector i:nth-child(2){ animation-delay:.18s; opacity:.7; }
.flow-connector i:nth-child(3){ animation-delay:.36s; opacity:.4; }
.flow-connector span{ position:absolute; top:calc(50% + 18px); width:120px; text-align:center; color:var(--gray); font-size:11px; font-weight:700; }
@keyframes particlePass{ 0%,100%{ transform:translateX(-3px); opacity:.35; } 50%{ transform:translateX(3px); opacity:1; } }

.card--dark{
  background: var(--carbon-2);
  border-color: rgba(255,255,255,0.08);
  color: var(--white);
}
.card--dark p{ color: var(--gray-light); }
.card--dark:hover{ border-color: rgba(255,117,31,0.5); }

/* ---------- Pull quote ---------- */
.pull-quote{
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  max-width: 900px;
}
.pull-quote .accent{ color: var(--orange); }

/* ---------- Media / images with reveal clip ---------- */
.media{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--carbon);
}
.media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out-expo);
}
.media.is-visible img{ transform: scale(1); }
.media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,24,32,0) 40%, rgba(16,24,32,0.55) 100%);
  pointer-events: none;
}
.media--flat::after{ display: none; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--carbon);
  color: var(--gray-light);
  padding-block: var(--space-6) var(--space-4);
}
.footer-top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 780px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
.footer-top h4{
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  font-weight: 700;
}
.footer-top ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-top a{ color: var(--gray-light); font-size: 14.5px; transition: color var(--dur-fast) var(--ease-standard); }
.footer-top a:hover{ color: var(--orange); }
.footer-brand p{ color: var(--gray-light); margin-top: var(--space-2); max-width: 320px; font-size: 14.5px; }
.footer-logo{
  width: min(220px, 100%);
  display: block;
}
.footer-logo img{ width:100%; height:auto; display:block; }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  font-size: 13px;
  color: var(--gray);
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding-top: clamp(150px, 20vw, 210px);
  padding-bottom: var(--space-5);
  background: var(--carbon);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.page-hero .lead{ max-width: 620px; }
.page-hero-particles{
  position: absolute;
  right: -6%;
  top: 12%;
  width: 46%;
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 880px){ .page-hero-particles{ display: none; } }

/* ---------- Floating liquid symbol animation (hero) ---------- */
.liquid-mark{
  position: relative;
  isolation: isolate;
}
.liquid-mark svg{ display: block; width: 100%; height: auto; }
.liquid-mark::before{
  content:'';
  position:absolute;
  inset:18% 8% 6%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,117,31,.28), rgba(255,117,31,0) 68%);
  filter:blur(18px);
  animation:heroGlow 6.5s ease-in-out infinite;
}
.hero-ai-symbol{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.34));
  animation:heroFloat 6.5s cubic-bezier(.45,.05,.55,.95) infinite;
  transform-origin:50% 56%;
}
.liquid-mark .drop{
  animation: floaty 6s var(--ease-standard) infinite;
  transform-origin: center;
}
.liquid-mark .drop:nth-child(2){ animation-delay: -1.4s; animation-duration: 7s; }
.liquid-mark .drop:nth-child(3){ animation-delay: -3s; animation-duration: 5.5s; }
.liquid-mark .particle{ animation: drift 5s ease-in-out infinite; }
.liquid-mark .particle:nth-child(4){ animation-delay: -1s; }
.liquid-mark .particle:nth-child(5){ animation-delay: -2.4s; }
@keyframes floaty{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes drift{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(3px, -8px); }
}
@keyframes heroFloat{
  0%,100%{ transform:translate3d(0,0,0) rotate(-.7deg); }
  50%{ transform:translate3d(0,-15px,0) rotate(.7deg); }
}
@keyframes heroGlow{
  0%,100%{ opacity:.62; transform:scale(.96); }
  50%{ opacity:1; transform:scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .liquid-mark .drop, .liquid-mark .particle, .hero-ai-symbol, .liquid-mark::before{ animation: none; }
}

/* ---------- Numbered timeline (Cómo funciona) ---------- */
.timeline{
  position: relative;
  padding-left: 0;
}
.timeline::before{
  content: '';
  position: absolute;
  left: 27px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(255,117,31,0.5), rgba(16,24,32,0.08));
}
body.nav-dark .timeline::before{ background: linear-gradient(180deg, rgba(255,117,31,0.6), rgba(255,255,255,0.1)); }
.timeline-item{
  position: relative;
  padding-left: 76px;
  padding-bottom: var(--space-5);
}
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-item .dot{
  position: absolute;
  left: 0; top: 2px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid rgba(16,24,32,0.12);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: var(--orange-deep);
  font-size: 15px;
  transition: transform var(--dur-med) var(--ease-spring), background var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard);
}
.timeline-item:hover .dot{
  background: var(--orange);
  color: var(--white);
  transform: scale(1.08);
}
.timeline-item h3{ margin-bottom: 8px; }
.timeline-item p{ color: var(--gray); max-width: 640px; }

/* ---------- Pricing cards ---------- */
.plan-card{
  position: relative;
  background: var(--white);
  border: 1px solid rgba(16,24,32,0.1);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-med) var(--ease-out-expo), box-shadow var(--dur-med) var(--ease-out-expo), border-color var(--dur-med) var(--ease-out-expo);
}
.plan-card:hover{ transform: translateY(-8px); box-shadow: 0 34px 60px -30px rgba(16,24,32,0.3); }
.plan-card--highlight{
  border-color: var(--orange);
  box-shadow: 0 24px 50px -28px rgba(255,117,31,0.4);
}
.plan-card--highlight .tag{
  position: absolute; top: -14px; left: var(--space-4);
  background: var(--orange); color: var(--white);
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  padding: 6px 14px; border-radius: 999px;
}
.plan-card .price{
  font-size: clamp(1.7rem, 1.4vw + 1.2rem, 2.3rem);
  font-weight: 800; letter-spacing: -0.02em;
}
.plan-card .price span{ font-size: 15px; font-weight: 600; color: var(--gray); }
.plan-card ul{ display: flex; flex-direction: column; gap: 12px; }
.plan-card li{ display: flex; gap: 10px; font-size: 14.5px; color: var(--ink); align-items: flex-start; }
.plan-card li svg{ flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--orange-deep); }
.plan-card .plan-for{ font-size: 13.5px; color: var(--gray); }

/* ---------- Two-up stat / for-whom cards ---------- */
.whom-card{
  border-radius: var(--radius-l);
  padding: var(--space-5) var(--space-4);
  color: var(--white);
  background: var(--carbon);
  position: relative;
  overflow: hidden;
}
.whom-card::before{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 0% 0%, rgba(255,117,31,0.28), transparent 60%);
}
.whom-card > *{ position: relative; }
.whom-card h3{ font-size: clamp(1.4rem, 1vw + 1rem, 1.9rem); margin-bottom: var(--space-2); }
.whom-card p{ color: var(--gray-light); }

/* ---------- Mapa de capacidades ---------- */
.capability-map{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.capability-card{ min-height:220px; padding:var(--space-4); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-m); background:var(--carbon-2); }
.capability-card span{ color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.capability-card h3{ margin:48px 0 10px; color:var(--white); }
.capability-card p{ color:var(--gray-light); font-size:15px; }
.capability-card--featured{ grid-column:span 2; background:linear-gradient(120deg,var(--carbon-2),#231b17); border-color:rgba(255,117,31,.45); }
.capability-card--featured .text-link{ color:var(--orange-soft); }

/* ---------- Historia visual ---------- */
.story-visual{ padding:0 0 var(--space-6); background:var(--soft); }
.story-visual-frame{ position:relative; overflow:hidden; border-radius:var(--radius-l); background:var(--carbon); box-shadow:0 24px 70px rgba(16,24,32,.16); }
.story-visual-frame img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.story-visual-frame figcaption{ position:absolute; left:22px; bottom:20px; padding:9px 14px; border-radius:999px; color:var(--white); background:rgba(16,24,32,.78); backdrop-filter:blur(10px); font-size:13px; font-weight:700; }

/* ---------- Clientes actuales ---------- */
.client-proof{ background:var(--white); }
.client-proof-head{ margin-bottom:var(--space-3); }
.client-logo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.client-logo{ min-height:150px; display:grid; place-items:center; padding:22px; border:1px solid rgba(16,24,32,.1); border-radius:var(--radius-m); background:#fff; overflow:hidden; }
.client-logo img{ display:block; width:100%; height:105px; object-fit:contain; }

/* ---------- Aviso de privacidad ---------- */
.legal-copy{ max-width:820px; }
.legal-copy > p{ color:var(--gray); }
.legal-copy section{ padding:28px 0; border-top:1px solid rgba(16,24,32,.12); }
.legal-copy section:first-of-type{ margin-top:36px; }
.legal-copy h2{ margin-bottom:12px; font-size:clamp(1.25rem,2vw,1.6rem); }
.legal-copy p + p{ margin-top:12px; }
.legal-copy ul{ display:grid; gap:8px; margin-top:12px; padding-left:20px; color:var(--gray); list-style:disc; }
.legal-copy a{ color:var(--orange-deep); font-weight:700; }

/* ---------- Profesiones / giros ---------- */
.industry-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(16,24,32,.12); }
.industry-item{ min-height:205px; padding:30px 28px; border-right:1px solid rgba(16,24,32,.12); border-bottom:1px solid rgba(16,24,32,.12); }
.industry-item:nth-child(3n){ border-right:0; }
.industry-item b{ display:block; color:var(--orange-deep); font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.industry-item span{ display:block; margin-top:12px; color:var(--ink); font-weight:750; line-height:1.35; }
.industry-item p{ margin-top:12px; color:var(--gray); font-size:14px; }
.custom-system{ display:grid; grid-template-columns:1.1fr 1fr auto; align-items:center; gap:var(--space-4); margin-top:var(--space-5); padding:var(--space-4); border-radius:var(--radius-l); background:var(--carbon); color:var(--white); }
.custom-system h3{ margin-top:14px; }
.custom-system > p{ color:var(--gray-light); }
.custom-system .btn{ white-space:nowrap; }

/* ---------- Recorrido guiado de Inicio ---------- */
#profesiones,#proceso,#inversion,#diagnostico-inicio{ scroll-margin-top:92px; }
.profession-selector{ display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.7fr); gap:var(--space-4); align-items:start; }
.profession-options{ display:flex; flex-wrap:wrap; gap:10px; }
.profession-option{ appearance:none; border:1px solid rgba(16,24,32,.14); background:var(--white); color:var(--ink); border-radius:999px; padding:10px 15px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
.profession-option:hover{ border-color:var(--orange); transform:translateY(-1px); }
.profession-option:focus-visible{ outline:3px solid rgba(255,117,31,.28); outline-offset:3px; }
.profession-option.is-active{ background:var(--carbon); border-color:var(--carbon); color:var(--white); }
.profession-example{ background:var(--white); border-radius:var(--radius-l); padding:clamp(26px,4vw,48px); box-shadow:0 18px 60px rgba(16,24,32,.08); }
.profession-example-head span{ color:var(--orange-deep); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.profession-example-head h3{ margin-top:10px; font-size:clamp(1.6rem,2.5vw,2.35rem); }
.profession-example-head p{ margin-top:7px; color:var(--gray); }
.example-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:stretch; margin:32px 0; }
.example-flow li:not(.example-arrow){ min-height:150px; padding:22px; border-radius:var(--radius-m); background:var(--soft); display:flex; flex-direction:column; justify-content:space-between; }
.example-flow small{ color:var(--gray); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.example-flow strong{ line-height:1.35; }
.example-flow .example-result{ background:var(--carbon); color:var(--white); }
.example-flow .example-result small{ color:var(--orange); }
.example-arrow{ align-self:center; color:var(--orange-deep); font-size:24px; }
.journey-steps{ display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 28px; counter-reset:journey; }
.journey-steps li{ position:relative; display:flex; gap:16px; padding:26px 24px 26px 0; border-top:1px solid rgba(16,24,32,.16); }
.journey-steps li:not(:last-child)::after{ content:'→'; position:absolute; right:12px; top:25px; color:var(--orange-deep); }
.journey-steps span{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--orange); color:var(--white); font-size:14px; font-weight:800; }
.journey-steps h3{ font-size:18px; margin:4px 0 8px; }
.journey-steps p{ color:var(--gray); font-size:14px; }
.decision-strip{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-5); align-items:end; }
.decision-strip h2{ margin:16px 0; }
.decision-options{ display:flex; flex-direction:column; border-top:1px solid rgba(16,24,32,.16); }
.decision-options span{ display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid rgba(16,24,32,.16); color:var(--gray); }
.decision-options b{ color:var(--ink); white-space:nowrap; }
.decision-strip > .text-link{ grid-column:1 / -1; }

@media (max-width: 980px){
  .capability-map,.industry-grid{ grid-template-columns:repeat(2,1fr); }
  .capability-card--featured{ grid-column:span 2; }
  .industry-item:nth-child(3n){ border-right:1px solid rgba(16,24,32,.12); }
  .industry-item:nth-child(2n){ border-right:0; }
  .custom-system{ grid-template-columns:1fr 1fr; }
  .custom-system .btn{ grid-column:1 / -1; width:max-content; }
  .profession-selector{ grid-template-columns:1fr; }
  .journey-steps{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .journey-steps li:nth-child(2)::after{ display:none; }
  .client-logo-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Form (Diagnóstico) ---------- */
.diag-shell{
  max-width: 760px;
  margin-inline: auto;
}
.progress{
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-4);
}
.progress i{
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(16,24,32,0.1);
  overflow: hidden;
  position: relative;
}
.progress i::after{
  content: '';
  position: absolute; inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
}
.progress i.is-done::after, .progress i.is-active::after{ transform: scaleX(1); }

.field{ margin-bottom: var(--space-3); }
.field label{
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 8px;
  color: var(--ink);
}
.field .hint{ font-size: 13px; color: var(--gray); margin-top: 6px; display: block; }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea,
.field select{
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  border: 1.5px solid rgba(16,24,32,0.14);
  background: var(--white);
  font: inherit;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,117,31,0.14);
}
.field textarea{ min-height: 110px; resize: vertical; }

.option-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px){ .option-grid{ grid-template-columns: 1fr; } }
.option{
  position: relative;
  border: 1.5px solid rgba(16,24,32,0.14);
  border-radius: var(--radius-s);
  padding: 13px 16px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
  display: flex; align-items: center; gap: 10px;
}
.option:hover{ transform: translateY(-2px); }
.option input{ accent-color: var(--orange); width: 16px; height: 16px; }
.option:has(input:checked){
  border-color: var(--orange);
  background: rgba(255,117,31,0.06);
}

.step{ display: none; }
.step.is-active{
  display: block;
  animation: stepIn 0.5s var(--ease-out-expo);
}
@keyframes stepIn{
  from{ opacity: 0; transform: translateX(18px); }
  to{ opacity: 1; transform: translateX(0); }
}

.step-nav{ display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }

.summary-list{ display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-4); }
.summary-list .row{ display: flex; justify-content: space-between; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid rgba(16,24,32,0.08); font-size: 14.5px; }
.summary-list .row b{ color: var(--gray); font-weight: 600; max-width: 45%; }
.summary-list .row span{ text-align: right; max-width: 55%; }

.form-success{
  text-align: center;
  padding: var(--space-5) 0;
}
.form-success svg{ width: 64px; height: 64px; color: var(--orange); margin-bottom: var(--space-3); }

/* ---------- Contact page ---------- */
.contact-card{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(16,24,32,0.1);
  border-radius: var(--radius-m);
  transition: transform var(--dur-med) var(--ease-out-expo), box-shadow var(--dur-med) var(--ease-out-expo);
}
.contact-card:hover{ transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(16,24,32,0.25); }
.contact-card .icon{
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,117,31,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange-deep);
  flex: none;
}
.contact-card .icon svg{ width: 22px; height: 22px; }

/* ---------- Misc ---------- */
.tag-pill{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,117,31,0.1);
  color: var(--orange-deep);
  font-size: 12.5px;
  font-weight: 700;
}
.note-box{
  border-left: 3px solid var(--orange);
  background: rgba(255,117,31,0.06);
  padding: var(--space-3);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 14.5px;
  color: var(--ink);
}
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; gap: var(--space-4); } }
.split.rev .split-media{ order: 2; }
@media (max-width: 900px){ .split.rev .split-media{ order: 0; } }

@media (max-width: 720px){
  :root{ --gutter: 20px; --space-6: 72px; }
  .site-nav{ padding:16px 0; }
  .brand{ font-size:17px; }
  .brand svg{ height:24px; }
  .brand--asset{ width:150px; padding:6px 8px; }
  .btn{ width:100%; justify-content:center; }
  .hero-grid{ grid-template-columns:1fr !important; gap:28px !important; }
  .liquid-mark{ max-width:280px; margin-inline:auto; }
  .section-head{ margin-bottom:var(--space-4); }
  .card, .plan-card{ padding:var(--space-3); }
  .timeline-item{ padding-left:64px; }
  .timeline-item .dot{ width:46px; height:46px; }
  .timeline::before{ left:22px; }
  .step-nav{ flex-direction:column-reverse; }
  .step-nav > *{ width:100%; }
  .summary-list .row{ flex-direction:column; gap:4px; }
  .summary-list .row b, .summary-list .row span{ max-width:100%; text-align:left; }
  .footer-top{ grid-template-columns:1fr; }
  .industry-grid{ grid-template-columns:1fr; }
  .action-grid,.capability-map{ display:flex; overflow-x:auto; gap:14px; margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 18px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .action-grid::-webkit-scrollbar,.capability-map::-webkit-scrollbar,.profession-options::-webkit-scrollbar{ display:none; }
  .action-grid .card,.capability-map .capability-card{ flex:0 0 min(82vw,320px); scroll-snap-align:start; }
  .capability-card--featured{ grid-column:auto; }
  .capability-card{ min-height:180px; }
  .profession-options{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 14px; scrollbar-width:none; }
  .profession-option{ flex:0 0 auto; }
  .industry-item,.industry-item:nth-child(3n){ min-height:auto; border-right:0; }
  .custom-system{ grid-template-columns:1fr; }
  .custom-system .btn{ grid-column:auto; width:100%; }
  .example-flow{ grid-template-columns:1fr; }
  .example-arrow{ transform:rotate(90deg); justify-self:center; }
  .example-flow li:not(.example-arrow){ min-height:120px; }
  .journey-steps{ grid-template-columns:1fr; }
  .journey-steps li::after{ display:none; }
  .decision-strip{ grid-template-columns:1fr; }
  .decision-strip > .text-link{ grid-column:auto; }
  .decision-options span{ flex-direction:column; gap:4px; }
  .client-logo{ min-height:120px; padding:14px; }
  .client-logo img{ height:88px; }
  .flow-diagram,.flow-diagram--three,.flow-diagram--process{ grid-template-columns:1fr; gap:10px; }
  .flow-node{ min-height:100px; }
  .flow-connector{ min-height:40px; flex-direction:column; gap:4px; }
  .flow-connector span{ position:static; width:auto; }
  .story-visual{ padding-bottom:60px; }
  .story-visual .container{ padding-inline:0; }
  .story-visual-frame{ border-radius:0; box-shadow:none; }
  .story-visual-frame figcaption{ left:14px; bottom:12px; }
}

@media (prefers-reduced-motion:reduce){ .flow-connector i{ animation:none; } }