/* ══════════════════════════════════════
   TICKER
══════════════════════════════════════ */
.ticker-wrap {
  overflow: hidden; background: var(--ink);
  padding: 13px 0;
  border-top: 1px solid var(--ink3);
  border-bottom: 1px solid var(--ink3);
}
.ticker-track { display: flex; width: max-content; animation: ticker 22s linear infinite; }
.ticker-item {
  display: flex; align-items: center; gap: 12px; padding: 0 32px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.3);
  white-space: nowrap; letter-spacing: .07em;
  text-transform: uppercase; font-family: var(--font-mono);
}
.ticker-item em { color: var(--purple-soft); font-style: normal; }
.ticker-dot { color: var(--ink3); font-size: 20px; line-height: 1; }

/* ══════════════════════════════════════
   SERVICES
══════════════════════════════════════ */
#servicios { background: var(--white); }
.services-header { margin-bottom: 52px; }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

.service-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r16); padding: 32px 28px;
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background: var(--purple);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.service-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(13,15,26,0.08); border-color:rgba(108,71,255,0.2); }
.service-card:hover::before { transform: scaleX(1); }

.service-card.featured { background: var(--ink); border-color: var(--ink2); }
.service-card.featured .s-title { color: var(--white); }
.service-card.featured .s-desc  { color: #5A6280; }
.service-card.featured .s-icon  { background: rgba(108,71,255,0.18); }
.service-card.featured .s-tag   { background: var(--ink2); border-color: var(--ink3); color: #6B7490; }
.service-card.featured .s-tag.p { background: rgba(108,71,255,0.14); border-color: rgba(108,71,255,0.28); color: var(--purple-soft); }

.s-icon {
  width:44px; height:44px; background:var(--purple-tint); border-radius:10px;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.service-card:hover .s-icon { transform: scale(1.1) rotate(-6deg); }
.s-title { font-size:17px; font-weight:700; letter-spacing:-.3px; color:var(--ink); margin-bottom:10px; }
.s-desc  { font-size:14px; color:var(--slate); line-height:1.7; margin-bottom:20px; }
.s-tags  { display:flex; flex-wrap:wrap; gap:6px; }
.s-tag   { font-family:var(--font-mono); font-size:10px; font-weight:500; background:var(--white); border:1px solid var(--border); border-radius:5px; padding:3px 8px; color:var(--slate); }
.s-tag.p { background:var(--purple-tint); border-color:rgba(108,71,255,0.2); color:var(--purple); }

/* ══════════════════════════════════════
   PROCESS
══════════════════════════════════════ */
.process-section { background: var(--ink); position: relative; overflow: hidden; }
.process-section::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(108,71,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,71,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.process-inner { max-width:var(--max-w); margin:0 auto; position:relative; z-index:1; }
.process-section .eyebrow    { color: var(--purple-soft); }
.process-section .section-h2 { color: var(--white); }
.process-section .section-p  { color: #4A5168; }

.process-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:52px; }
.process-step {
  background:var(--ink2); border:1px solid var(--ink3);
  padding:36px 28px; position:relative; transition:background .2s;
}
.process-step:first-child { border-radius: 16px 0 0 16px; }
.process-step:last-child  { border-radius: 0 16px 16px 0; }
.process-step:hover { background: #1F2236; }
.p-num   { font-family:var(--font-mono); font-size:11px; color:var(--purple); letter-spacing:.1em; font-weight:500; margin-bottom:16px; }
.p-title { font-size:20px; font-weight:700; letter-spacing:-.5px; color:var(--white); margin-bottom:12px; }
.p-desc  { font-size:14px; color:#7A8299; line-height:1.65; }
.p-connector {
  position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:2px; height:32px; background:var(--purple); opacity:.3;
}
.process-step:last-child .p-connector { display:none; }

/* ══════════════════════════════════════
   PORTFOLIO
══════════════════════════════════════ */
#portafolio { background: var(--white); }
.portfolio-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:52px; }
.p-card {
  border-radius:var(--r16); overflow:hidden;
  background:var(--bg); border:1px solid var(--border);
  transition:transform .25s, box-shadow .25s;
}
.p-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(108,71,255,0.14); }
.p-card.big { grid-column: span 2; }

.p-card-inner { aspect-ratio:16/7; background:var(--ink); display:flex; flex-direction:column; overflow:hidden; }
.p-card.big .p-card-inner { aspect-ratio:16/6; }

.p-card-chrome {
  background:rgba(18,20,36,0.98); border-bottom:1px solid var(--ink3);
  padding:9px 13px; display:flex; align-items:center; gap:9px; flex-shrink:0;
}
.chrome-dots { display:flex; gap:5px; }
.chrome-dot  { width:7px; height:7px; border-radius:50%; }
.chrome-dot:nth-child(1) { background:#FF5F56; }
.chrome-dot:nth-child(2) { background:#FFBD2E; }
.chrome-dot:nth-child(3) { background:#27C93F; }
.chrome-bar {
  flex:1; max-width:260px; margin:0 auto; background:var(--ink3);
  border-radius:5px; height:19px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9px; color:#4A5168;
  padding:0 10px; overflow:hidden; white-space:nowrap; letter-spacing:.03em;
}
.p-card-screen { flex:1; position:relative; overflow:hidden; background:var(--ink); }
.p-card-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
  transition:transform .5s ease;
}
.p-card:hover .p-card-img { transform:scale(1.04); }
.p-card-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:32px 14px 10px;
  background:linear-gradient(transparent,rgba(13,15,26,0.85));
  font-family:var(--font-mono); font-size:10px;
  color:rgba(255,255,255,0.85); letter-spacing:.1em;
  text-transform:uppercase; z-index:1;
}
.p-card-meta   { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.p-card-tag    { font-family:var(--font-mono); font-size:10px; font-weight:500; background:var(--purple-tint); color:var(--purple); border:1px solid rgba(108,71,255,0.2); border-radius:5px; padding:3px 8px; }
.p-card-title  { font-size:14px; font-weight:600; color:var(--ink); margin-top:6px; }
.p-card-arrow  { font-size:16px; color:var(--muted); flex-shrink:0; transition:color .2s, transform .2s; }
.p-card:hover .p-card-arrow { color:var(--purple); transform:translate(2px,-2px); }

/* ══════════════════════════════════════
   DIFFERENTIATORS
══════════════════════════════════════ */
#diferenciadores { background: var(--bg); }
.diff-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.diff-items  { display:flex; flex-direction:column; gap:28px; margin-top:36px; }
.diff-item   { display:flex; gap:16px; align-items:flex-start; }
.diff-icon   { width:40px; height:40px; flex-shrink:0; background:var(--purple-tint); border:1px solid rgba(108,71,255,0.2); border-radius:var(--r8); display:flex; align-items:center; justify-content:center; font-size:18px; }
.diff-item h4 { font-size:15px; font-weight:700; letter-spacing:-.2px; margin-bottom:4px; }
.diff-item p  { font-size:14px; color:var(--slate); line-height:1.65; }

.diff-visual  { background:var(--ink); border-radius:var(--r24); padding:40px 36px; text-align:center; position:relative; overflow:hidden; }
.diff-visual::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(108,71,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,71,255,0.05) 1px, transparent 1px);
  background-size:32px 32px;
}
.diff-big       { font-size:72px; font-weight:800; letter-spacing:-4px; color:var(--white); line-height:1; position:relative; z-index:1; }
.diff-big span  { color:var(--purple-soft); }
.diff-big-label { font-size:14px; color:#7A8299; margin-top:12px; margin-bottom:32px; position:relative; z-index:1; line-height:1.55; }
.tech-pills { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; position:relative; z-index:1; }
.tech-pill  { font-family:var(--font-mono); font-size:11px; font-weight:500; background:var(--ink2); border:1px solid var(--ink3); color:#6B7490; border-radius:6px; padding:4px 10px; transition:border-color .2s, color .2s; }
.tech-pill:hover { border-color:rgba(108,71,255,0.4); color:var(--purple-soft); }

/* ══════════════════════════════════════
   PRICING
══════════════════════════════════════ */
#precios { background: var(--white); }
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:52px; }
.pricing-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r16); padding:32px 24px;
  transition:transform .2s, box-shadow .2s; position:relative;
}
.pricing-card:hover { transform:translateY(-4px); box-shadow:0 14px 44px rgba(13,15,26,0.08); }
.pricing-card.featured-plan { background:var(--purple); border-color:var(--purple-deep); }

.plan-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--white);
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:100px;
  padding:4px 14px; white-space:nowrap; font-family:var(--font-mono);
}
.plan-name { font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.featured-plan .plan-name { color:rgba(255,255,255,0.6); }

.plan-price { font-size:38px; font-weight:800; letter-spacing:-2px; color:var(--ink); line-height:1; margin-bottom:4px; }
.featured-plan .plan-price { color:var(--white); }
.plan-price small { font-size:13px; font-weight:500; letter-spacing:0; vertical-align:super; }
.plan-price-label { font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:20px; }
.plan-price-alt       { font-size:28px; letter-spacing:-1px; }
.plan-price-alt small { font-size:16px; vertical-align:middle; letter-spacing:0; }
.featured-plan .plan-price-label { color:rgba(255,255,255,0.5); }

.plan-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.plan-features li { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--slate); line-height:1.5; }
.featured-plan .plan-features li { color:rgba(255,255,255,0.85); }
.check { color:var(--green); font-size:12px; font-weight:700; flex-shrink:0; margin-top:2px; }

.btn-plan    { width:100%; padding:11px 16px; border-radius:var(--r8); font-size:13px; font-weight:700; border:none; letter-spacing:-.2px; transition:all .2s; }
.btn-outline { background:transparent; color:var(--ink); border:1.5px solid var(--border); }
.btn-outline:hover { border-color:var(--purple); color:var(--purple); }
.btn-white   { background:var(--white); color:var(--purple); }
.btn-white:hover  { background:var(--purple-tint); }
.btn-dark    { background:var(--ink); color:var(--white); border:none; }
.btn-dark:hover   { background:var(--purple); }

.pricing-note { text-align:center; margin-top:24px; font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.04em; }

/* ══════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════ */
.testimonials-section { background: var(--ink); }
.testimonials-section .eyebrow    { color: var(--purple-soft); }
.testimonials-section .section-h2 { color: var(--white); }
.testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:52px; }
.testi-card { background:var(--ink2); border:1px solid var(--ink3); border-radius:var(--r16); padding:28px 28px 24px; transition:border-color .2s; }
.testi-card:hover { border-color:rgba(108,71,255,0.3); }
.testi-stars  { color:#F7F8FC; font-size:14px; letter-spacing:2px; margin-bottom:14px; }
.testi-quote  { font-size:15px; color:rgba(255,255,255,0.72); line-height:1.75; margin-bottom:22px; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-av     { width:38px; height:38px; border-radius:50%; background:var(--purple); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--white); }
.testi-av-green { background:#00C896; color:#0D0F1A; }
.testi-av-amber { background:#FFB020; color:#0D0F1A; }
.testi-av-red   { background:#FF4F6A; }
.testi-name   { font-size:14px; font-weight:700; color:var(--white); }
.testi-role   { font-size:11px; color:#7A8299; font-family:var(--font-mono); }

/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
.cta-section { padding:100px clamp(1.25rem,4vw,3rem); background:var(--bg); }
.cta-inner {
  max-width:var(--max-w); margin:0 auto;
  background:var(--ink); border-radius:24px;
  padding:80px 64px; text-align:center; position:relative; overflow:hidden;
}
.cta-inner::before {
  content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(108,71,255,0.2) 0%, transparent 65%);
}
.cta-inner::after {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(108,71,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,71,255,0.04) 1px, transparent 1px);
  background-size:48px 48px;
}
.cta-content  { position:relative; z-index:1; }
.cta-title    { font-size:clamp(36px,5vw,60px); font-weight:800; letter-spacing:-2.5px; color:var(--white); line-height:1; margin-bottom:16px; }
.cta-title .acc { color:var(--purple-soft); }
.cta-sub      { font-size:17px; color:#7A8299; margin-bottom:36px; max-width:420px; margin-left:auto; margin-right:auto; line-height:1.65; }
.cta-actions  { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-note     { font-size:11px; color:#4A5168; margin-top:16px; font-family:var(--font-mono); }
.btn-lg { font-size:16px; padding:16px 32px; }

/* ══════════════════════════════════════
   WHATSAPP FLOAT
══════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:500;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  transition:transform .2s, box-shadow .2s;
  animation:float 3.5s ease-in-out infinite;
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(37,211,102,0.5); }
.wa-tooltip {
  position:absolute; right:64px; background:var(--ink); color:var(--white);
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s;
}
.wa-float:hover .wa-tooltip { opacity:1; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer { background:var(--ink); border-top:1px solid var(--ink3); padding:64px clamp(1.25rem,4vw,3rem) 32px; }
.footer-inner { max-width:var(--max-w); margin:0 auto; }
.footer-top   { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand-name { font-size:19px; font-weight:800; letter-spacing:-.5px; color:var(--white); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.footer-brand-name .z { color:var(--purple); }
.footer-tagline  { font-size:13px; color:#7A8299; line-height:1.65; max-width:260px; }
.footer-flag     { margin-top:10px; font-size:12px; color:#7A8299; font-family:var(--font-mono); }
.footer-col-title { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#7A8299; margin-bottom:16px; }
.footer-links    { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a  { font-size:14px; color:#6B7490; transition:color .2s; }
.footer-links a:hover { color:var(--white); }
.footer-bottom   { border-top:1px solid var(--ink3); padding-top:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-copy     { font-size:11px; color:#4A5168; font-family:var(--font-mono); }
.footer-social   { display:flex; gap:10px; }
.social-btn      { width:32px; height:32px; border-radius:8px; background:var(--ink2); border:1px solid var(--ink3); display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; }
.social-btn:hover { background:var(--purple); border-color:var(--purple); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:960px){
  nav { padding:0 1.25rem; }
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .hero-badge-left,.hero-badge-right { display:none; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .process-steps { grid-template-columns:1fr; gap:0; }
  .process-step:first-child { border-radius:16px 16px 0 0; }
  .process-step:last-child  { border-radius:0 0 16px 16px; }
  .p-connector { right:auto; left:50%; bottom:-1px; top:auto; transform:translateX(-50%); width:32px; height:2px; }
  .portfolio-grid { grid-template-columns:1fr; }
  .p-card.big { grid-column:span 1; }
  .diff-layout { grid-template-columns:1fr; gap:40px; }
  .pricing-grid { grid-template-columns:1fr 1fr; }
  .testi-grid   { grid-template-columns:1fr; }
  .footer-top   { grid-template-columns:1fr 1fr; }
  .cta-inner    { padding:52px 28px; }
}
@media(max-width:600px){
  .hero-h1 { letter-spacing:-2.5px; }
  .hero-stats { gap:28px; }
  .services-grid { grid-template-columns:1fr; }
  .pricing-grid  { grid-template-columns:1fr; }
  .footer-top    { grid-template-columns:1fr; }
}