@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --background: 0 0% 8%;
  --foreground: 0 0% 98%;
  --primary: 43 74% 49%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 9%;
  --muted-foreground: 0 0% 65%;
  --border: 43 30% 20%;
  --card: 0 0% 10%;
  --radius: 0.75rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3 { font-weight: 700; color: #fff; line-height: 1.15; }

.text-gold { color: hsl(var(--primary)); }
.gold-gradient-text {
  background: linear-gradient(135deg, hsl(43, 80%, 60%), hsl(43, 74%, 40%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.muted { color: hsl(var(--muted-foreground)); }

/* Reveal-on-scroll (mirrors the old whileInView fade+rise) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.5rem; padding: 0 2rem; border-radius: 0.6rem;
  font-weight: 700; font-size: 1rem; border: 1px solid transparent;
  cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 10px 30px -10px hsla(43,74%,49%,.4); }
.btn-primary:hover { background: hsl(43,74%,44%); }
.btn-outline { background: hsla(0,0%,100%,.03); border-color: hsla(43,74%,49%,.5); color: hsl(var(--primary)); }
.btn-outline:hover { background: hsla(43,74%,49%,.1); }
.btn svg { width: 1.1rem; height: 1.1rem; margin-right: .5rem; }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 1.5rem 0; transition: all .3s ease;
}
.site-header.is-scrolled {
  background: hsla(0,0%,8%,.95); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.3); padding: 1rem 0;
  border-bottom: 1px solid hsla(0,0%,100%,.05);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand-text { font-size: 1.25rem; font-weight: 700; letter-spacing: .05em; color: #fff; }
.brand-text span { color: hsl(var(--primary)); font-weight: 300; }

.nav-desktop { display: none; align-items: center; gap: 2rem; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { font-size: .9rem; font-weight: 500; color: hsla(0,0%,100%,.8); transition: color .2s; }
.nav-links a:hover { color: hsl(var(--primary)); }
.nav-ctas { display: flex; align-items: center; gap: 1rem; padding-left: 2rem; border-left: 1px solid hsla(0,0%,100%,.1); }
.nav-ctas .btn { height: 2.75rem; padding: 0 1.25rem; font-size: .9rem; }

.nav-toggle { display: flex; background: none; border: none; color: #fff; cursor: pointer; padding: .5rem; }
.mobile-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: hsl(var(--secondary)); border-top: 1px solid hsla(0,0%,100%,.05); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.mobile-nav.open { display: block; }
.mobile-nav-inner { padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-nav a.nav-link { font-size: 1.1rem; font-weight: 500; color: hsla(0,0%,100%,.9); }
.mobile-nav .btn { width: 100%; }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .nav-toggle-wrap { display: none; }
}

/* Hero */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; padding: 7rem 0 4rem; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, hsl(var(--background)), hsla(0,0%,8%,.95), hsl(var(--background))); }
.hero-visual { display: none; position: absolute; inset: 0 4rem 0 50%; align-items: center; }
.hero-content { position: relative; z-index: 10; max-width: 48rem; }
.pill {
  display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid hsla(43,74%,49%,.3); background: hsla(43,74%,49%,.1); color: hsl(var(--primary));
  font-size: .875rem; font-weight: 500; margin-bottom: 2rem;
}
.pill svg { width: 1rem; height: 1rem; margin-right: .5rem; }
.hero h1 { font-size: 2.5rem; margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.hero p.lead { font-size: 1.15rem; color: hsl(var(--muted-foreground)); line-height: 1.7; margin-bottom: 2.5rem; max-width: 40rem; }
.hero-ctas { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 640px) { .hero-ctas { flex-direction: row; } }
@media (min-width: 768px) { .hero h1 { font-size: 3.25rem; } }
@media (min-width: 1024px) {
  .hero h1 { font-size: 4.5rem; }
  .hero-visual { display: flex; }
}

/* Trust bar */
.trust-bar { border-top: 1px solid hsla(0,0%,100%,.05); border-bottom: 1px solid hsla(0,0%,100%,.05); background: hsla(0,0%,9%,.5); backdrop-filter: blur(6px); position: relative; z-index: 20; }
.trust-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; padding: 1.5rem 0; }
.trust-item { display: flex; align-items: center; gap: .75rem; color: hsl(var(--muted-foreground)); font-size: .9rem; font-weight: 500; }
.trust-item svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); flex-shrink: 0; }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4,1fr); } }

/* Section shells */
section { position: relative; }
.section-pad { padding: 6rem 0; }
.section-alt { background: hsl(var(--secondary)); border-top: 1px solid hsla(0,0%,100%,.05); border-bottom: 1px solid hsla(0,0%,100%,.05); }
.section-head { max-width: 48rem; margin-bottom: 4rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: 2rem; margin-bottom: 1.25rem; }
.section-head p { font-size: 1.1rem; color: hsl(var(--muted-foreground)); }
.eyebrow { display: block; color: hsl(var(--primary)); font-size: .85rem; font-weight: 600; letter-spacing: .2em; margin-bottom: 1rem; }
@media (min-width: 768px) { .section-head h2 { font-size: 3rem; } }

/* Benefits */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.benefit-card {
  padding: 2rem; border-radius: 1rem; background: hsl(var(--card)); border: 1px solid hsla(0,0%,100%,.05);
  transition: border-color .25s;
}
.benefit-card:hover { border-color: hsla(43,74%,49%,.5); }
.icon-box {
  width: 3.5rem; height: 3.5rem; border-radius: .85rem; background: hsla(43,74%,49%,.1);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: hsl(var(--primary));
}
.icon-box svg { width: 1.75rem; height: 1.75rem; }
.benefit-card h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.benefit-card p { color: hsl(var(--muted-foreground)); line-height: 1.6; }

/* Services bento */
.bento { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.bento-card {
  border-radius: 1.5rem; border: 1px solid hsla(0,0%,100%,.05); background: hsl(var(--card));
  min-height: 220px; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
}
.bento-card .bento-icon { position: absolute; top: 2rem; right: 2rem; color: hsla(43,74%,49%,.2); }
.bento-card .bento-icon svg { width: 5rem; height: 5rem; }
.bento-card h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.bento-card p { color: hsl(var(--muted-foreground)); }
.bento-feature { min-height: 420px; }
.bento-feature .visual-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bento-feature .overlay { position: absolute; inset: 0; background: linear-gradient(to top, hsla(0,0%,8%,.95), hsla(0,0%,8%,.4) 60%, transparent); }
.bento-feature .content { position: relative; z-index: 2; }
.bento-gold { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.bento-gold .bento-icon { color: rgba(0,0,0,.2); }
.bento-gold p { color: rgba(0,0,0,.7); }

@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; }
  .bento-feature { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .bento-wide { grid-column: span 2; }
}

/* Method (Método C3) */
.method-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; position: relative; }
.method-step { text-align: center; display: flex; flex-direction: column; align-items: center; }
.method-icon-wrap { position: relative; width: 5rem; height: 5rem; border-radius: 1rem; background: hsl(var(--secondary)); border: 1px solid hsla(0,0%,100%,.05); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.method-icon-wrap svg { width: 2rem; height: 2rem; color: hsl(var(--primary)); }
.method-num { position: absolute; top: -.75rem; right: -.75rem; width: 2rem; height: 2rem; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; border: 4px solid hsl(var(--background)); }
.method-step h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.method-step p { color: hsl(var(--muted-foreground)); font-size: .95rem; line-height: 1.6; max-width: 280px; }
@media (min-width: 768px) { .method-grid { grid-template-columns: repeat(3, 1fr); } }

/* Concept Lab */
.lab-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .lab-grid { grid-template-columns: 1fr 1fr; } }
.lab-card {
  position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 4/3;
  border: 1px solid hsla(0,0%,100%,.1); background: hsl(var(--card)); display: block;
}
.lab-card img, .lab-card svg.lab-visual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lab-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, hsla(0,0%,8%,.9), hsla(0,0%,8%,.1) 70%, transparent); }
.lab-card .lab-content { position: absolute; inset: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; }
.lab-tags { display: flex; align-items: center; gap: .5rem; margin-bottom: auto; align-self: flex-start; }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .8rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.tag-category { border: 1px solid hsla(43,74%,49%,.3); background: hsla(43,74%,49%,.1); color: hsl(var(--primary)); }
.tag-real { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tag-concept { border: 1px solid hsla(0,0%,100%,.1); background: hsla(0,0%,8%,.6); color: hsl(var(--muted-foreground)); }
.lab-card h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.lab-card .desc { font-size: .875rem; color: hsla(0,0%,100%,.7); max-width: 20rem; }
.lab-cta { margin-top: 3rem; text-align: center; }
.play-badge {
  position: absolute; top: 1rem; right: 1rem; z-index: 10; width: 44px; height: 44px; border-radius: 50%;
  background: hsla(0,0%,8%,.7); backdrop-filter: blur(6px); border: 1px solid hsla(0,0%,100%,.2);
  display: flex; align-items: center; justify-content: center; color: #fff; transition: background-color .2s, border-color .2s, color .2s;
}
.play-badge svg { width: 16px; height: 16px; margin-left: 2px; }
.play-badge:hover { background: hsl(43,74%,49%); border-color: hsl(43,74%,49%); color: hsl(0,0%,0%); }

/* Guarantees */
.guarantee-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.guarantee-card { background: hsl(var(--card)); border: 1px solid hsla(0,0%,100%,.05); border-radius: 1rem; padding: 2rem; transition: border-color .25s; }
.guarantee-card:hover { border-color: hsla(43,74%,49%,.3); }
.guarantee-card h3 { font-size: 1.05rem; margin-bottom: .75rem; color: #fff; }
.guarantee-card p { font-size: .9rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }
@media (min-width: 768px) { .guarantee-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .guarantee-grid { grid-template-columns: repeat(4, 1fr); } }

/* Final CTA */
.final-cta-box {
  background: hsla(0,0%,10%,.5); backdrop-filter: blur(20px); border: 1px solid hsla(43,74%,49%,.2);
  border-radius: 1.5rem; padding: 3rem 2rem; text-align: center;
}
.final-cta-box h2 { font-size: 2rem; margin-bottom: 1.5rem; }
.final-cta-box p { font-size: 1.1rem; color: hsl(var(--muted-foreground)); margin-bottom: 2.5rem; }
.final-cta-ctas { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
@media (min-width: 640px) { .final-cta-ctas { flex-direction: row; } .final-cta-box h2 { font-size: 2.75rem; } }
.btn-ghost { background: transparent; border-color: hsla(0,0%,100%,.2); color: #fff; }
.btn-ghost:hover { background: hsla(0,0%,100%,.1); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; margin: 0 auto; }
.faq-item { background: hsla(0,0%,9%,.4); border: 1px solid hsla(0,0%,100%,.05); border-radius: .6rem; padding: 0 1.5rem; transition: border-color .25s; }
.faq-item.open { border-color: hsla(43,74%,49%,.3); }
.faq-q { width: 100%; background: none; border: none; text-align: left; padding: 1.25rem 0; font-size: 1.1rem; font-weight: 500; color: #fff; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-q svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); transition: transform .25s; flex-shrink: 0; margin-left: 1rem; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding-bottom: 1.25rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }

/* Footer */
.site-footer { background: hsl(var(--secondary)); padding: 6rem 0 3rem; border-top: 1px solid hsla(0,0%,100%,.05); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; }
.footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.footer-brand img { width: 56px; height: 56px; border-radius: 50%; }
.footer-brand-text { display: flex; flex-direction: column; }
.footer-brand-text .name { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: .05em; }
.footer-brand-text .sub { font-size: .75rem; letter-spacing: .2em; color: hsl(var(--primary)); margin-top: .2rem; }
.site-footer p.desc { color: hsl(var(--muted-foreground)); font-size: .9rem; line-height: 1.6; }
.site-footer h4 { font-size: 1.1rem; margin-bottom: 1.5rem; color: #fff; }
.footer-list li { margin-bottom: 1rem; }
.footer-list a { color: hsl(var(--muted-foreground)); font-size: .9rem; display: flex; align-items: center; gap: .5rem; transition: color .2s; }
.footer-list a:hover { color: hsl(var(--primary)); }
.dot { width: .35rem; height: .35rem; border-radius: 50%; background: hsla(43,74%,49%,.5); }
.contact-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.contact-list a, .contact-list span { display: flex; align-items: flex-start; gap: .75rem; color: hsl(var(--muted-foreground)); font-size: .9rem; }
.contact-list svg { width: 1rem; height: 1rem; color: hsla(43,74%,49%,.7); flex-shrink: 0; margin-top: .15rem; }
.commitment-box { background: hsla(0,0%,8%,.5); border: 1px solid hsla(0,0%,100%,.05); border-radius: 1rem; padding: 1.5rem; }
.commitment-box h4 { font-size: 1rem; font-weight: 500; margin-bottom: 1rem; }
.commitment-box li { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
.commitment-box svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); }
.footer-bottom { padding-top: 2rem; border-top: 1px solid hsla(0,0%,100%,.1); display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; }
.footer-bottom p { color: hsl(var(--muted-foreground)); font-size: .875rem; }
.footer-bottom-links { display: flex; gap: 1.5rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.footer-bottom-links a:hover { color: #fff; }

@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* Floating WhatsApp */
.whatsapp-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; width: 3.5rem; height: 3.5rem;
  background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.35); transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 30px rgba(0,0,0,.4); }
.whatsapp-float svg { width: 1.75rem; height: 1.75rem; }

/* WireframeCube (inline SVG, replaces the Framer Motion version) */
.wire-cube-wrap { position: relative; }
.wire-cube-wrap .glow { position: absolute; inset: 0; border-radius: 50%; background: hsla(43,74%,49%,.1); filter: blur(70px); }
.wire-cube svg { position: relative; width: 100%; height: 100%; }
.wire-face { fill: url(#wireGradient); opacity: 0; transition: opacity 1.1s ease .3s; }
.wire-edge { stroke: hsl(43,74%,55%); stroke-width: 1; fill: none; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; opacity: 0; transition: stroke-dashoffset .8s ease-in-out, opacity .5s ease-in-out; }
.wire-cube-wrap.in-view .wire-face { opacity: 1; }
.wire-cube-wrap.in-view .wire-edge { stroke-dashoffset: 0; opacity: .85; }

/* Live site preview (scaled iframe of the real deployed site) */
.site-preview-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.site-preview-frame iframe { width: 400%; height: 400%; border: 0; transform: scale(0.25); transform-origin: top left; }

/* Workstation illustration */
.workstation svg { width: 100%; height: 100%; }
.workstation .cta-blink { animation: blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }