/* ============ CREA IDEA — Design System ============ */
:root{
  --bg: #0A0B10;
  --bg-2: #0E1018;
  --bg-3: #131622;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --ink: #F4F4F6;
  --ink-2: #C9CAD2;
  --ink-3: #8B8D9A;
  --ink-4: #5A5C6A;
  --teal: #4ED4D8;
  --teal-2: #2B8A8F;
  --violet: #A78BFA;
  --violet-2: #7C5CFF;
  --grad: linear-gradient(100deg, #4ED4D8 0%, #7BA8F0 45%, #A78BFA 100%);
  --grad-soft: linear-gradient(160deg, rgba(78,212,216,0.18), rgba(167,139,250,0.18));
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(78,212,216,0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(167,139,250,0.08), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(78,212,216,0.06), transparent 60%);
  pointer-events:none;
  z-index:0;
}
main{position:relative; z-index:1}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; border:none; background:none; color:inherit; cursor:pointer}
em{font-style:italic; font-family:var(--font-serif); font-weight:400}

.container{max-width: 1240px; margin:0 auto; padding: 0 28px}

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 14px;
  border:1px solid var(--border);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(12px);
}
.section-title{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 20px 0;
  text-wrap: balance;
}
.section-lead{
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--ink-2);
  max-width: 640px;
  text-wrap: pretty;
}
.gradient-text{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head{margin-bottom: 60px}
.section-head--center{text-align:center; display:flex; flex-direction:column; align-items:center}
.section-head--center .section-lead{margin: 0 auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: all .3s var(--ease);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn-primary{
  background: var(--grad);
  color:#0A0B10;
  font-weight: 600;
  box-shadow: 0 8px 32px -8px rgba(78,212,216,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 40px -8px rgba(78,212,216,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-ghost{
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border: 1px solid var(--border-2);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover{background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2)}
.btn-lg{padding: 18px 30px; font-size: 15px}
.btn-full{width: 100%; justify-content: center}

/* ---------- NAV ---------- */
.nav{
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 1240px;
  z-index: 100;
  transition: all .3s var(--ease);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px 12px 20px;
  border-radius: 100px;
  background: rgba(10,11,16,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.5);
}
.nav-logo{display:flex; align-items:center; gap:10px}
.nav-logo img{width: 32px; height: 32px}
.nav-logo-text{display:flex; flex-direction:column; line-height:1}
.nav-logo-name{font-family: var(--font-serif); font-size: 16px; letter-spacing: 0.02em}
.nav-logo-sub{font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-4); margin-top: 2px}
.nav-links{display:flex; gap: 4px}
.nav-links a{
  padding: 8px 14px; border-radius: 100px;
  font-size: 13px; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.nav-links a:hover{color: var(--ink); background: rgba(255,255,255,0.04)}
.nav-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 14px 8px 16px;
  border-radius: 100px;
  background: var(--ink);
  color: #0A0B10;
  font-weight: 500;
  font-size: 13px;
  transition: all .2s var(--ease);
}
.nav-cta:hover{transform: translateY(-1px)}
@media (max-width: 860px){
  .nav-links{display:none}
}

/* ============ 1. HERO ============ */
.hero{
  position:relative;
  min-height: 100vh;
  padding: 140px 28px 80px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-orb{
  position:absolute;
  border-radius:50%;
  filter: blur(80px);
  opacity: 0.6;
  animation: float-orb 18s ease-in-out infinite;
}
.hero-orb--teal{
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(78,212,216,0.5), transparent 70%);
  top: -100px; right: -80px;
}
.hero-orb--violet{
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(167,139,250,0.45), transparent 70%);
  bottom: -200px; left: -150px;
  animation-delay: -6s;
}
@keyframes float-orb{
  0%,100%{transform: translate(0,0) scale(1)}
  50%{transform: translate(40px,-30px) scale(1.08)}
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.hero-noise{
  position:absolute; inset:0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inner{
  position:relative; z-index:2;
  max-width: 1240px; margin: 0 auto; width: 100%;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--ink-2);
  padding: 8px 14px;
  border:1px solid var(--border);
  border-radius: 100px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  margin-bottom: 36px;
}
.pulse-dot{
  width: 8px; height: 8px; border-radius:50%;
  background: #4ED4D8;
  box-shadow: 0 0 0 0 rgba(78,212,216,0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow: 0 0 0 0 rgba(78,212,216,0.6)}
  70%{box-shadow: 0 0 0 10px rgba(78,212,216,0)}
  100%{box-shadow: 0 0 0 0 rgba(78,212,216,0)}
}

.hero-title{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 128px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: min(1100px, 72%);
  margin-bottom: 36px;
}
@media (max-width: 1180px){
  .hero-title{max-width: 100%}
}
.hero-title span.reveal-line{display:block; overflow:hidden}
.hero-title em{margin-right: 0.12em}
.hero-sub{
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--ink-2);
  max-width: 620px;
  margin-bottom: 40px;
  text-wrap: pretty;
}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 100px}

/* Hero floating cards */
.hero-float{position:absolute; z-index:3; pointer-events:none}
.hero-float--a{top: 20%; right: 3%; animation: floaty 7s ease-in-out infinite}
.hero-float--b{top: 52%; right: 9%; animation: floaty 8s ease-in-out infinite -2s}
.hero-float--c{top: 72%; right: 2%; animation: floaty 9s ease-in-out infinite -4s}
@media (max-width: 1180px){
  .hero-float{display:none}
}
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-14px)}
}
.float-card{
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  min-width: 200px;
}
.float-metric .float-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.float-tag{
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.float-dot{width:8px; height:8px; border-radius:50%}
.float-dot.green{background:#4ade80; box-shadow: 0 0 12px rgba(74,222,128,.7)}
.float-metric-label{font-size: 11px; color: var(--ink-3); margin-bottom: 8px}
.float-spark{width: 100%; height: 30px}

.float-post{display:flex; gap:10px; align-items:center; min-width: 220px}
.float-post-img{
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, #4ED4D8, #A78BFA);
  flex-shrink: 0;
  position:relative;
}
.float-post-img::after{
  content:"▶";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#0A0B10; font-size: 14px;
}
.float-post-title{font-size: 12px; font-weight: 500; margin-bottom: 3px}
.float-post-meta{font-size: 10px; color: var(--ink-3); display:flex; gap:10px; font-family: var(--font-mono)}

.float-task{min-width: 200px}
.float-task-line{
  display:flex; align-items:center; gap:8px;
  padding: 5px 0;
  font-size: 11px;
  color: var(--ink-2);
  font-family: var(--font-mono);
}
.float-task-line.muted{color: var(--ink-4)}
.tcheck{
  width:12px; height:12px; border-radius:50%;
  background: #4ade80;
  position:relative;
  flex-shrink:0;
}
.tcheck::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:8px; color:#0A0B10; font-weight:700}
.tcheck--active{background: var(--teal)}
.tcheck--pending{background: rgba(255,255,255,0.12)}
.tcheck--pending::after{content:""}

/* Hero keywords */
.hero-keywords{
  position:absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-keywords span{
  position:absolute;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: rgba(255,255,255,0.06);
  white-space: nowrap;
  animation: float-kw 14s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2s);
}
.hero-keywords span:nth-child(1){top: 12%; left: 8%; font-size: 48px}
.hero-keywords span:nth-child(2){top: 38%; left: 3%; font-size: 32px}
.hero-keywords span:nth-child(3){top: 62%; left: 44%; font-size: 28px}
.hero-keywords span:nth-child(4){top: 15%; left: 52%; font-size: 24px}
.hero-keywords span:nth-child(5){top: 78%; left: 8%; font-size: 38px}
.hero-keywords span:nth-child(6){top: 8%; left: 32%; font-size: 30px}
@keyframes float-kw{
  0%,100%{transform: translate(0,0)}
  50%{transform: translate(12px,-8px)}
}

.hero-scroll{
  position:absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.hero-scroll-line{
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--ink-3));
  position:relative; overflow:hidden;
}
.hero-scroll-line::after{
  content:""; position:absolute; top:0; left:0; right:0; height: 12px;
  background: linear-gradient(to bottom, transparent, var(--teal));
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse{
  0%{transform: translateY(-12px)}
  100%{transform: translateY(40px)}
}

/* Trusted strip */
.trusted-strip{
  position:relative; z-index:2;
  margin-top: 60px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; gap: 32px;
  overflow: hidden;
}
.trusted-label{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 28px;
}
.trusted-track{display:flex; gap: 32px; animation: marquee 40s linear infinite; white-space: nowrap}
.trusted-lane{display:flex; gap: 32px; font-family: var(--font-serif); font-size: 20px; color: var(--ink-3); white-space: nowrap}
.trusted-lane span{flex-shrink:0}
@keyframes marquee{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}

/* ============ 2. PROBLEMA ============ */
.problem{padding: 140px 28px; position:relative}
.problem-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.problem-card{
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  transition: all .4s var(--ease);
  display:flex; flex-direction:column;
  min-height: 320px;
  position:relative;
  overflow:hidden;
}
.problem-card::before{
  content:"";
  position:absolute; inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events:none;
}
.problem-card:hover{transform: translateY(-4px); border-color: var(--border-2)}
.problem-card:hover::before{opacity: 1}
.problem-card > *{position:relative; z-index:1}
.problem-num{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.problem-card h3{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.problem-card p{color: var(--ink-2); font-size: 15px; flex:1}
.problem-visual{
  margin-top: 24px;
  height: 60px;
  display:flex; align-items:flex-end; gap:8px;
}
.pv-bar{
  flex:1;
  height: var(--h);
  background: linear-gradient(to top, rgba(78,212,216,0.4), rgba(78,212,216,0.05));
  border-radius: 3px;
  animation: bar-rise 1.4s var(--ease) both;
}
.problem-visual--scatter{position:relative; display:block}
.problem-visual--scatter span{
  position:absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  opacity: 0.5;
}
.problem-visual--scatter span:nth-child(1){top: 20%; left: 10%}
.problem-visual--scatter span:nth-child(2){top: 60%; left: 25%}
.problem-visual--scatter span:nth-child(3){top: 30%; left: 40%; background: var(--violet)}
.problem-visual--scatter span:nth-child(4){top: 70%; left: 55%}
.problem-visual--scatter span:nth-child(5){top: 15%; left: 70%; background: var(--violet)}
.problem-visual--scatter span:nth-child(6){top: 50%; left: 85%}
.problem-visual--scatter span:nth-child(7){top: 80%; left: 92%}
.problem-visual--fade{display:flex; gap: 10px; align-items:center}
.pv-ghost{
  flex:1; height: 40px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}
.pv-ghost:nth-child(2){opacity: 0.5}
.pv-ghost:nth-child(3){opacity: 0.2}
@keyframes bar-rise{from{height: 0} to{height: var(--h)}}
@media (max-width: 860px){.problem-grid{grid-template-columns: 1fr}}

/* ============ 3. ABOUT ============ */
.about{padding: 100px 28px 140px; position:relative}
.about-grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 80px;
  align-items: center;
}
.about-right{
  display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.about-pillar{
  padding: 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: all .3s var(--ease);
}
.about-pillar:hover{background: rgba(255,255,255,0.06); border-color: var(--border-2); transform: translateY(-3px)}
.about-pillar-icon{
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad-soft);
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--teal);
  margin-bottom: 16px;
}
.about-pillar-icon svg{width: 22px; height: 22px}
.about-pillar h4{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 6px;
}
.about-pillar p{font-size: 13px; color: var(--ink-3); line-height: 1.5}
.about-stats{
  display:flex; gap: 40px; margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.about-stats div{display:flex; flex-direction:column}
.about-stats strong{
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.about-stats span{font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase}
@media (max-width: 960px){
  .about-grid{grid-template-columns: 1fr; gap: 40px}
}

/* ============ 4. SERVICES ============ */
.services{padding: 100px 28px 140px}
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-card{
  padding: 28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  position:relative;
  overflow:hidden;
  min-height: 260px;
  display:flex; flex-direction:column;
  transition: all .4s var(--ease);
  cursor: pointer;
}
.service-card::before{
  content:"";
  position:absolute;
  top:-1px; left:-1px; right:-1px; bottom:-1px;
  background: var(--grad);
  border-radius: var(--radius);
  opacity: 0;
  z-index: 0;
  transition: opacity .4s var(--ease);
}
.service-card::after{
  content:"";
  position:absolute;
  inset: 1px;
  background: linear-gradient(180deg, #141722, #0E1018);
  border-radius: calc(var(--radius) - 1px);
  z-index: 1;
}
.service-card:hover{transform: translateY(-5px)}
.service-card:hover::before{opacity: 0.7}
.service-card > *{position:relative; z-index: 2}
.service-head{
  display:flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px;
}
.service-num{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
}
.service-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(78,212,216,0.08);
  border: 1px solid rgba(78,212,216,0.2);
  display:flex; align-items:center; justify-content:center;
  color: var(--teal);
  transition: all .4s var(--ease);
}
.service-card:hover .service-icon{
  background: var(--grad);
  color: #0A0B10;
  border-color: transparent;
  transform: rotate(-6deg) scale(1.05);
}
.service-icon svg{width: 24px; height: 24px}
.service-card h3{
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.service-card p{font-size: 14px; color: var(--ink-3); line-height: 1.55; flex:1}
.service-arrow{
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  display:flex; align-items:center; gap: 6px;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.service-card:hover .service-arrow{color: var(--teal); gap: 10px}
@media (max-width: 960px){.services-grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 640px){.services-grid{grid-template-columns: 1fr}}

/* ============ 5. SISTEMA ============ */
.sistema{padding: 100px 28px 140px; position:relative; overflow:hidden}
.sistema::before{
  content:"";
  position:absolute; top: 20%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 800px; border-radius: 50%;
  background: radial-gradient(circle, rgba(78,212,216,0.12), transparent 60%);
  filter: blur(60px);
  z-index: 0;
  pointer-events:none;
}
.sistema > *{position:relative; z-index: 1}
.sistema-stage{
  position:relative;
  height: 620px;
  margin-top: 40px;
  margin-bottom: 60px;
}
.device{position:absolute}
.device--desktop{
  top: 40px; left: 50%; transform: translateX(-50%);
  width: min(820px, 90%);
  z-index: 1;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}
.device-chrome{
  display:flex; align-items:center; gap: 8px;
  padding: 10px 14px;
  background: #1a1d28;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.device-chrome .dot{width:10px; height:10px; border-radius:50%}
.dot.red{background:#ff5f57}
.dot.yellow{background:#febc2e}
.dot.green{background:#28c840}
.device-url{
  margin-left: 14px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  flex: 1;
  max-width: 340px;
}
.device-url b{color: var(--teal)}
.device-screen{
  background:#fff;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.device-screen img{width:100%; height:100%; object-fit: cover; object-position: top}

.device--tablet{
  bottom: 10px; left: 2%;
  width: 280px;
  z-index: 2;
  transform: rotate(-4deg);
  transition: transform .6s var(--ease);
}
.device--tablet:hover{transform: rotate(-2deg) translateY(-6px)}
.device-tablet-frame{
  padding: 10px;
  background: #1a1d28;
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.08);
}
.device-tablet-frame img{
  border-radius: 8px;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: top;
}

.device--phone{
  bottom: 40px; right: 4%;
  width: 180px;
  z-index: 3;
  transform: rotate(5deg);
  transition: transform .6s var(--ease);
}
.device--phone:hover{transform: rotate(2deg) translateY(-6px)}
.device-phone-frame{
  padding: 8px;
  background: #1a1d28;
  border-radius: 28px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  position:relative;
}
.device-phone-notch{
  position:absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 6px;
  background: #000;
  border-radius: 10px;
  z-index: 2;
}
.device-phone-frame img{
  border-radius: 20px;
  aspect-ratio: 9/16;
  object-fit: cover;
  object-position: top;
}

.spec{
  position:absolute;
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 16px;
  background: rgba(20,22,32,0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  font-size: 12px;
  z-index: 5;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.spec-num{
  font-family: var(--font-mono);
  background: var(--grad);
  color: #0A0B10;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
}
.spec--1{top: 15%; left: 6%}
.spec--2{top: 8%; right: 8%}
.spec--3{bottom: 30%; left: 30%}
@media (max-width: 860px){
  .sistema-stage{height: 480px}
  .device--tablet, .device--phone{display:none}
  .spec--3{display:none}
}

.sistema-features{
  display:flex; flex-wrap:wrap; gap: 10px;
  justify-content:center;
  padding: 32px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sf{
  display:flex; align-items:center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
  font-size: 13px;
  color: var(--ink-2);
}
.sf-n{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--teal);
}

/* ============ 6. PORTAFOLIO ============ */
.portfolio{padding: 100px 28px 80px}
.filter-row{
  display:flex; flex-wrap: wrap; gap: 8px;
  margin: 40px 0 32px;
}
.chip{
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: all .2s var(--ease);
}
.chip:hover{border-color: var(--border-2); color: var(--ink)}
.chip.is-active{
  background: var(--ink);
  color: #0A0B10;
  border-color: var(--ink);
  font-weight: 500;
}
.chip--sm{padding: 6px 12px; font-size: 11px}
.chip.is-active.chip--sm{background: var(--teal); border-color: var(--teal); color: #0A0B10}

.brands-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.brand-card{
  padding: 24px 18px;
  aspect-ratio: 1;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  transition: all .3s var(--ease);
  position:relative;
  overflow:hidden;
}
.brand-card:hover{
  background: rgba(255,255,255,0.05);
  border-color: var(--border-2);
  transform: translateY(-3px);
}
.brand-card::before{
  content:"";
  position:absolute; inset:0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.brand-card:hover::before{opacity: 1}
.brand-card > *{position:relative}
.brand-mono{
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.brand-rubro{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.brand-card.is-hidden{display:none}
@media (max-width: 960px){.brands-grid{grid-template-columns: repeat(3,1fr)}}
@media (max-width: 560px){.brands-grid{grid-template-columns: repeat(2,1fr)}}

.marquee{
  margin-top: 60px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.marquee-track{
  display:flex; gap: 48px;
  animation: marquee 50s linear infinite;
  white-space:nowrap;
}
.marquee-lane{
  display:flex; gap: 48px; flex-shrink:0;
  font-family: var(--font-serif);
  font-size: 40px;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.marquee-lane span{flex-shrink:0}
.marquee-lane .dot-sep{color: var(--teal); font-size: 32px}

/* ============ 7. BEHANCE ============ */
.behance{padding: 100px 28px}
.behance-head{
  display:flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 50px;
  flex-wrap: wrap;
}
.projects-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  grid-auto-rows: 220px;
}
.project-card--a{grid-column: span 4; grid-row: span 2}
.project-card--b{grid-column: span 2; grid-row: span 1}
.project-card--c{grid-column: span 2; grid-row: span 1}
.project-card--e{grid-column: span 4; grid-row: span 2}

@media (max-width: 960px){
  .projects-grid{grid-template-columns: repeat(2,1fr); grid-auto-rows: 200px}
  .project-card--a, .project-card--b, .project-card--c, .project-card--d, .project-card--e, .project-card--f{
    grid-column: span 2; grid-row: span 1;
  }
}

.project-label{
  position:absolute;
  inset: 0;
  display:flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  color: rgba(255,255,255,0.96);
  letter-spacing: -0.01em;
  text-align: center;
  padding: 24px;
  z-index: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
  pointer-events: none;
}
.project-card{
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
  background: #1a1d28;
  cursor: pointer;
  transition: all .4s var(--ease);
  display:block;
  color: var(--ink);
}
.project-badge{
  position:absolute; top: 14px; right: 14px;
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px;
  background: rgba(10,11,16,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #fff;
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
  transition: all .3s var(--ease);
}
.project-card:hover .project-badge{opacity: 1; transform: translateY(0)}
.cli-link{transition: color .2s var(--ease)}
.cli-link:hover{color: var(--teal)}
.project-card:hover{transform: translateY(-4px)}
.project-card:hover .project-overlay{opacity: 1}
.project-card:hover .project-bg{transform: scale(1.05)}
.project-bg{
  position:absolute; inset:0;
  transition: transform .6s var(--ease);
}
.project-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,11,16,0.9) 100%);
  padding: 20px;
  display:flex; flex-direction:column; justify-content: flex-end;
  opacity: 0.5;
  transition: opacity .4s var(--ease);
}
.project-card h4{
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.project-card .project-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-card--a{grid-column: span 3; grid-row: span 2}
.project-card--b{grid-column: span 3; grid-row: span 1}
.project-card--c{grid-column: span 2; grid-row: span 1}
.project-card--d{grid-column: span 1; grid-row: span 1}
.project-card--e{grid-column: span 2; grid-row: span 2}
.project-card--f{grid-column: span 4; grid-row: span 1}

@media (max-width: 960px){
  .projects-grid{grid-template-columns: repeat(2,1fr)}
  .project-card--a, .project-card--b, .project-card--c, .project-card--d, .project-card--e, .project-card--f{
    grid-column: span 1; grid-row: span 1;
  }
}

/* ============ 8. PLANES ============ */
.plans{padding: 100px 28px 120px}
.plans-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.plan-card{
  padding: 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
  transition: all .4s var(--ease);
}
.plan-card:hover{transform: translateY(-6px); border-color: var(--border-2)}
.plan-card--featured{
  background: linear-gradient(180deg, rgba(78,212,216,0.08), rgba(167,139,250,0.08));
  border: 1px solid rgba(78,212,216,0.3);
}
.plan-card--featured::before{
  content:"";
  position:absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(78,212,216,0.3), transparent 60%);
  filter: blur(40px);
  pointer-events:none;
}
.plan-badge{
  display:inline-block;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  color: var(--ink-3);
  margin-bottom: 24px;
  align-self: flex-start;
  border: 1px solid var(--border);
}
.plan-card--featured .plan-badge{
  background: var(--grad);
  color: #0A0B10;
  border-color: transparent;
  font-weight: 600;
}
.plan-name{
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.plan-tagline{
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 28px;
  line-height: 1.55;
  min-height: 72px;
}
.plan-price{
  display:flex; align-items:baseline; gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--border);
}
.plan-currency{font-family: var(--font-mono); font-size: 16px; color: var(--ink-3)}
.plan-amount{
  font-family: var(--font-serif);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan-period{font-size: 13px; color: var(--ink-3)}
.plan-features{
  list-style: none;
  display:flex; flex-direction:column; gap: 10px;
  flex: 1;
  margin-bottom: 24px;
}
.plan-features li{
  display:flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.plan-features li::before{
  content: "→";
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.plan-cta{
  display:inline-flex; align-items:center; justify-content:center; gap: 8px;
  padding: 14px 20px;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: all .3s var(--ease);
}
.plan-cta:hover{background: rgba(255,255,255,0.1)}
.plan-card--featured .plan-cta{
  background: var(--ink);
  color: #0A0B10;
  border-color: var(--ink);
  font-weight: 600;
}
.plans-note{
  text-align:center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--ink-4);
  font-family: var(--font-mono);
}
@media (max-width: 960px){.plans-grid{grid-template-columns: 1fr}}

/* ============ 9. CTA FINAL ============ */
.ctafinal{padding: 80px 28px 100px}
.ctafinal-inner{
  position:relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 100px 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #141722 0%, #0E1018 100%);
  border: 1px solid var(--border);
  text-align:center;
  overflow: hidden;
}
.ctafinal-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(600px 400px at 50% 0%, rgba(78,212,216,0.18), transparent 70%),
    radial-gradient(500px 300px at 50% 100%, rgba(167,139,250,0.15), transparent 70%);
  pointer-events:none;
}
.ctafinal-inner > *{position:relative}
.ctafinal-title{
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 24px 0;
  text-wrap: balance;
}
.ctafinal-sub{
  font-size: 17px;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0 auto 40px;
  text-wrap: pretty;
}

/* ============ 10. CONTACTO ============ */
.contact{padding: 100px 28px 120px}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.contact-list{
  list-style:none;
  margin-top: 40px;
  display:flex; flex-direction:column; gap: 16px;
}
.contact-list li{
  display:flex; align-items:center; gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  transition: all .3s var(--ease);
}
.contact-list li:hover{background: rgba(255,255,255,0.05); border-color: var(--border-2)}
.cli-icon{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--grad-soft);
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--teal);
  flex-shrink: 0;
}
.cli-lab{font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.12em; text-transform: uppercase; display:block; margin-bottom: 2px}
.cli-val{font-size: 15px; color: var(--ink); display:block}

.contact-form{
  padding: 32px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display:flex; flex-direction:column; gap: 16px;
}
.form-row{display:flex; flex-direction:column}
.form-row--split{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.form-row label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display:flex; flex-direction:column; gap: 8px;
}
.form-row input,
.form-row textarea{
  font: inherit;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all .2s var(--ease);
  text-transform: none;
  letter-spacing: 0;
}
.form-row input:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--teal);
  background: rgba(78,212,216,0.04);
}
.form-row input::placeholder,
.form-row textarea::placeholder{color: var(--ink-4)}
.form-tags{display:flex; flex-wrap:wrap; gap: 6px; margin: 4px 0}
.form-ok{
  padding: 12px;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: var(--radius-sm);
  color: #4ade80;
  font-size: 13px;
  text-align:center;
}
@media (max-width: 860px){
  .contact-grid{grid-template-columns: 1fr; gap: 40px}
  .form-row--split{grid-template-columns: 1fr}
}

/* ============ FOOTER ============ */
.footer{
  border-top: 1px solid var(--border);
  padding: 40px 0 60px;
}
.footer-inner{
  display:flex; align-items:center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer-brand{display:flex; align-items:center; gap: 12px}
.footer-brand img{width: 36px; height: 36px}
.footer-name{font-family: var(--font-serif); font-size: 18px}
.footer-sub{font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-4); margin-top: 2px}
.footer-copy{font-size: 13px; color: var(--ink-3)}
.footer-social{display:flex; gap: 20px}
.footer-social a{font-size: 13px; color: var(--ink-2); transition: color .2s}
.footer-social a:hover{color: var(--teal)}

/* ============ FAB ============ */
.fab{
  position: fixed; right: 20px; bottom: 20px;
  z-index: 90;
  display:flex; flex-direction:column; gap: 10px; align-items:flex-end;
}
.fab-btn{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 0 12px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(20,22,32,0.8);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-2);
  color: var(--ink);
  transition: all .3s var(--ease);
  overflow: hidden;
  justify-content: center;
}
.fab-btn:hover{transform: translateY(-2px); border-color: var(--teal)}
.fab-wa{
  width: auto;
  padding: 0 20px 0 14px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  border-color: transparent;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px -6px rgba(37,211,102,0.5);
  gap: 8px;
}
.fab-label{font-family: var(--font-sans); font-size: 13px; font-weight: 500}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{opacity: 1; transform: translateY(0)}

[data-reveal]{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{opacity: 1; transform: translateY(0)}

/* Hero title — always visible, no fade. Words wrap freely. */
.hero-title .reveal-line{display:block; opacity:1; transform:none}

/* ============ UPDATE · Behance previews + ambient motion ============ */
.behance-preview{
  position: relative;
  overflow: hidden;
  padding: 120px 28px 130px;
  isolation: isolate;
}
.behance-preview::before{
  content:"";
  position:absolute;
  inset: 8% -10% auto -10%;
  height: 68%;
  background:
    radial-gradient(circle at 18% 34%, rgba(78,212,216,0.12), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(167,139,250,0.14), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  filter: blur(10px);
  opacity: .95;
  z-index: -2;
  pointer-events: none;
}
.behance-preview .container{position:relative; z-index:2}
.behance-preview .behance-head{align-items:center; margin-bottom: 28px}
.behance-preview .section-lead{margin-top: 12px; max-width: 720px}
.behance-ambient{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.9;
}
.ambient-orb,
.ambient-dot,
.ambient-word,
.ambient-line{position:absolute; display:block}
.ambient-orb{
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(circle at 38% 36%, rgba(255,255,255,0.12), transparent 24%), rgba(255,255,255,0.01);
  filter: blur(.2px);
  animation: behanceFloat 13s var(--ease) infinite alternate;
}
.ambient-orb::after{
  content:"";
  position:absolute;
  inset: 22%;
  border-radius: inherit;
  border: 1px dashed rgba(78,212,216,0.20);
  animation: behanceSpin 18s linear infinite;
}
.ambient-orb--one{left:-90px; top:22%; animation-delay: -2s}
.ambient-orb--two{right:-115px; top:16%; width:320px; height:320px; animation-delay:-6s}
.ambient-orb--three{right:18%; bottom:-140px; width:220px; height:220px; animation-delay:-9s}
.ambient-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 28px rgba(78,212,216,.75);
  animation: dotDrift 8s ease-in-out infinite alternate;
}
.ambient-dot--one{left:9%; top:18%}
.ambient-dot--two{right:14%; top:55%; background:var(--violet); box-shadow:0 0 28px rgba(167,139,250,.7); animation-delay:-3s}
.ambient-dot--three{left:46%; bottom:14%; animation-delay:-5s}
.ambient-word{
  font-family: var(--font-serif);
  font-size: clamp(48px, 9vw, 140px);
  line-height: 1;
  color: rgba(255,255,255,0.035);
  letter-spacing: -0.04em;
  white-space: nowrap;
  animation: wordDrift 18s ease-in-out infinite alternate;
}
.ambient-word--one{left:5%; bottom:10%}
.ambient-word--two{right:-2%; top:7%; font-size: clamp(38px, 7vw, 108px); animation-delay:-8s}
.ambient-line{
  height:1px;
  width: 220px;
  background: linear-gradient(90deg, transparent, rgba(78,212,216,0.34), transparent);
  transform: rotate(-18deg);
  animation: linePulse 6s ease-in-out infinite alternate;
}
.ambient-line--one{left:18%; top:12%}
.ambient-line--two{right:20%; bottom:18%; transform: rotate(16deg); animation-delay:-3s}
.behance-preview-note{
  width: fit-content;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin: 0 0 22px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.035);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}
.behance-live-dot{
  width: 8px;
  height: 8px;
  border-radius:50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(78,212,216,.6);
  animation: livePulse 1.8s ease-out infinite;
}
.projects-grid--behance{
  position: relative;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 210px;
  gap: 16px;
  perspective: 1200px;
}
.projects-grid--behance::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.05);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 45%, #000 0 48%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0 48%, transparent 78%);
  opacity:.55;
  z-index:-1;
  animation: gridBreathe 7s ease-in-out infinite alternate;
}
.projects-grid--behance .project-card--a{grid-column: span 4; grid-row: span 2}
.projects-grid--behance .project-card--b{grid-column: span 4; grid-row: span 1}
.projects-grid--behance .project-card--c{grid-column: span 3; grid-row: span 1}
.projects-grid--behance .project-card--e{grid-column: span 5; grid-row: span 2}
.behance-card{
  min-height: 100%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  box-shadow: 0 26px 80px -42px rgba(0,0,0,.92);
  transform-style: preserve-3d;
}
.behance-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0 30%, rgba(255,255,255,0.22) 42%, transparent 54% 100%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease);
  mix-blend-mode: screen;
}
.behance-card::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: calc(var(--radius) - 1px);
  pointer-events:none;
  z-index:3;
  border: 1px solid rgba(255,255,255,.05);
}
.behance-card:hover{
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
  border-color: rgba(78,212,216,0.28);
  box-shadow: 0 34px 110px -46px rgba(78,212,216,.34), 0 22px 70px -44px rgba(0,0,0,.95);
}
.behance-card:hover::before{transform: translateX(130%)}
.behance-card:hover .project-bg{transform: scale(1.075)}
.behance-card:hover .project-preview-glow{opacity:1; transform: scale(1)}
.project-preview-chrome{
  position:absolute;
  top:14px;
  left:14px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius: 999px;
  background: rgba(10,11,16,.62);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing:.10em;
  text-transform: uppercase;
}
.project-preview-chrome span{
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(255,255,255,.45);
}
.project-preview-chrome span:nth-child(1){background:#ff5f57}
.project-preview-chrome span:nth-child(2){background:#febc2e}
.project-preview-chrome span:nth-child(3){background:#28c840}
.project-preview-glow{
  position:absolute;
  right:-20%;
  top:-30%;
  width: 58%;
  aspect-ratio:1;
  border-radius:50%;
  z-index:1;
  background: radial-gradient(circle, rgba(78,212,216,.32), transparent 62%);
  filter: blur(10px);
  opacity:.45;
  transform: scale(.8);
  transition: all .55s var(--ease);
}
.project-scan{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.08), transparent);
  height: 42%;
  opacity: .22;
  animation: scanPreview 5.6s ease-in-out infinite;
}
.project-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing:.10em;
  color: rgba(255,255,255,.66);
  text-transform: uppercase;
}
.project-kicker small{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--teal);
}
.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 7px;
  margin-top: 14px;
}
.project-tags span{
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,11,16,.38);
  color: rgba(255,255,255,.74);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing:.06em;
  text-transform: uppercase;
}
.behance-card .project-overlay{
  z-index:4;
  opacity:.88;
  background: linear-gradient(180deg, rgba(10,11,16,0.03) 0%, rgba(10,11,16,0.32) 42%, rgba(10,11,16,.94) 100%);
}
.behance-card h4{font-size: clamp(24px, 2.4vw, 38px)}
.behance-card .project-meta{color: rgba(255,255,255,.68)}
.behance-card .project-badge{
  top: auto;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  opacity: 1;
  transform: translateY(8px);
  background: rgba(255,255,255,.92);
  color:#0A0B10;
  border-color: rgba(255,255,255,.22);
}
.behance-card:hover .project-badge{transform: translateY(0)}
.project-label{z-index:2}

@keyframes behanceFloat{
  0%{transform: translate3d(0,0,0) scale(.96)}
  100%{transform: translate3d(24px,-34px,0) scale(1.04)}
}
@keyframes behanceSpin{to{transform:rotate(360deg)}}
@keyframes dotDrift{
  0%{transform:translate3d(0,0,0); opacity:.55}
  100%{transform:translate3d(22px,-28px,0); opacity:1}
}
@keyframes wordDrift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(30px,-18px,0)}
}
@keyframes linePulse{
  0%{opacity:.18; transform: translateX(-20px) rotate(-18deg)}
  100%{opacity:.75; transform: translateX(20px) rotate(-18deg)}
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(78,212,216,.64)}
  70%{box-shadow:0 0 0 10px rgba(78,212,216,0)}
  100%{box-shadow:0 0 0 0 rgba(78,212,216,0)}
}
@keyframes gridBreathe{
  from{opacity:.32; transform:scale(.99)}
  to{opacity:.62; transform:scale(1.01)}
}
@keyframes scanPreview{
  0%,100%{transform:translateY(-110%); opacity:0}
  20%{opacity:.22}
  52%{opacity:.08}
  78%{transform:translateY(260%); opacity:0}
}

@media (max-width: 1020px){
  .projects-grid--behance{grid-template-columns: repeat(2,1fr); grid-auto-rows: 245px}
  .projects-grid--behance .project-card--a,
  .projects-grid--behance .project-card--b,
  .projects-grid--behance .project-card--c,
  .projects-grid--behance .project-card--e{grid-column: span 1; grid-row: span 1}
  .behance-card h4{font-size: 26px}
}
@media (max-width: 640px){
  .behance-preview{padding: 90px 18px 100px}
  .projects-grid--behance{grid-template-columns: 1fr; grid-auto-rows: 250px}
  .behance-preview .behance-head{gap:22px}
  .project-preview-chrome b{display:none}
  .behance-card .project-badge{left:16px; right:auto; bottom:14px}
  .project-tags span:nth-child(n+3){display:none}
  .ambient-word{display:none}
}

@media (prefers-reduced-motion: reduce){
  .ambient-orb,
  .ambient-orb::after,
  .ambient-dot,
  .ambient-word,
  .ambient-line,
  .behance-live-dot,
  .projects-grid--behance::before,
  .project-scan{
    animation: none !important;
  }
  .behance-card:hover{transform: translateY(-4px)}
}

/* ============ PLANES ACTUALIZADOS DESDE PDF ============ */
.plan-card{
  isolation:isolate;
}
.plan-card::after{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-70px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(78,212,216,0.12), transparent 68%);
  pointer-events:none;
  z-index:-1;
}
.plan-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:-4px 0 14px;
}
.plan-stat{
  min-height:76px;
  padding:12px 10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,0.035);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
}
.plan-stat span{
  font-family:var(--font-mono);
  font-size:9px;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-4);
}
.plan-stat strong{
  font-family:var(--font-serif);
  font-size:clamp(22px, 2vw, 30px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.plan-specs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.plan-specs span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(78,212,216,.08);
  border:1px solid rgba(78,212,216,.16);
  color:var(--ink-2);
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1;
}
.plan-block{
  border-top:1px dashed var(--border);
  padding-top:22px;
  margin-top:4px;
  flex:1;
}
.plan-block-title{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
}
.plan-features{
  margin-bottom:24px;
  gap:10px;
}
.plan-features li{
  font-size:13.5px;
  line-height:1.45;
}
.plan-benefits{
  margin-top:auto;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.plan-benefits ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.plan-benefits li{
  position:relative;
  padding-left:15px;
  font-size:12px;
  line-height:1.35;
  color:var(--ink-3);
}
.plan-benefits li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 16px rgba(78,212,216,.55);
}
.plan-note-card{
  margin:14px 0 18px;
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.5;
  color:var(--ink-4);
}
.plan-card--featured .plan-stat{
  border-color:rgba(78,212,216,.25);
  background:rgba(78,212,216,.055);
}
.plan-card--featured .plan-benefits{
  border-color:rgba(78,212,216,.22);
  background:rgba(78,212,216,.045);
}
@media (max-width: 1140px){
  .plan-stats{grid-template-columns:1fr;}
  .plan-stat{min-height:unset;}
}
@media (max-width: 960px){
  .plan-stats{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 520px){
  .plan-card{padding:24px;}
  .plan-stats{grid-template-columns:1fr;}
}