/* ==========================================================================
   GoYes — Dark Tech Design System
   Colors:  bg #060B17 · surface #0E1626 · surface-alt #101A30
            primary #158CF9 · cyan #2FD8FF · violet #7B5CFA
            text #EAF2FF · muted #8C9BBF
   Type:    Orbitron (eyebrows / stats) · Rajdhani (headings) · Inter (body)
   Signature: diagonal "signal-cut" dividers + traveling circuit line,
              echoing the diagonal parallelogram in the GoYes mark.
   ========================================================================== */

:root{
  --bg:#060b17;
  --surface:#0e1626;
  --surface-alt:#101a30;
  --surface-border:#1c2740;
  --primary:#158cf9;
  --cyan:#2fd8ff;
  --violet:#7b5cfa;
  --text:#eaf2ff;
  --muted:#8c9bbf;
  --muted-2:#5c6a8a;

  --font-display:'Orbitron', sans-serif;
  --font-heading:'Rajdhani', sans-serif;
  --font-body:'Inter', sans-serif;

  --grad-primary: linear-gradient(90deg, var(--primary) 0%, var(--cyan) 100%);
  --grad-violet: linear-gradient(135deg, var(--violet) 0%, var(--primary) 100%);

  --radius: 14px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth; overflow-x:hidden;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  max-width:100vw;
}

img, svg{max-width:100%;}

::selection{background:var(--primary); color:#04060d;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--text);
  margin:0;
}

p{color:var(--muted); margin:0;}

a{color:var(--cyan); text-decoration:none; transition:color .2s ease;}
a:hover{color:var(--primary);}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.container-xl{max-width:1220px;}

/* ---------- background circuitry ---------- */
.bg-grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(21,140,249,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,140,249,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ---------- eyebrow / label ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--grad-primary);
  display:inline-block;
}

/* ---------- navbar ---------- */
.navbar-goyes{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(6,11,23,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--surface-border);
  transition:background .3s ease;
}
.navbar-goyes .navbar-brand img{height:34px;}
.navbar-goyes .nav-link{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.02em;
  color:var(--text);
  padding:.5rem 1rem !important;
  position:relative;
}
.navbar-goyes .nav-link:hover,
.navbar-goyes .nav-link.active{color:var(--cyan);}
.navbar-goyes .nav-link.active::after{
  content:"";
  position:absolute; left:1rem; right:1rem; bottom:.2rem; height:2px;
  background:var(--grad-primary);
}
.btn-nav-cta{
  font-family:var(--font-heading);
  font-weight:700;
  background:var(--grad-primary);
  color:#04060d !important;
  padding:.5rem 1.4rem;
  border-radius:8px;
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 0 100%);
}
.btn-nav-cta:hover{filter:brightness(1.1); color:#04060d !important;}

/* ---------- buttons ---------- */
.btn-goyes-primary{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.05rem;
  color:#04060d;
  background:var(--grad-primary);
  border:none;
  padding:.85rem 2rem;
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  display:inline-flex; align-items:center; gap:.6rem;
  transition:transform .2s ease, filter .2s ease;
}
.btn-goyes-primary:hover{transform:translateX(3px); filter:brightness(1.12); color:#04060d;}

.btn-goyes-outline{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.05rem;
  color:var(--text);
  background:transparent;
  border:1px solid var(--surface-border);
  padding:.85rem 2rem;
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  transition:border-color .2s ease, color .2s ease;
}
.btn-goyes-outline:hover{border-color:var(--cyan); color:var(--cyan);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:9.5rem 0 6rem;
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  top:-200px; right:-160px;
  width:640px; height:640px;
  background:radial-gradient(circle, rgba(21,140,249,.35) 0%, rgba(21,140,249,0) 70%);
  z-index:0;
  pointer-events:none;
}
.hero-glow-2{
  position:absolute;
  bottom:-260px; left:-180px;
  width:560px; height:560px;
  background:radial-gradient(circle, rgba(123,92,250,.25) 0%, rgba(123,92,250,0) 70%);
  z-index:0;
  pointer-events:none;
}
.hero h1{
  font-size:clamp(2.6rem, 5vw, 4.2rem);
  line-height:1.05;
}
.hero h1 .accent{
  background:var(--grad-primary);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lead{
  font-size:1.2rem;
  color:var(--muted);
  max-width:520px;
  margin-top:1.4rem;
}
.hero-badges{
  display:flex; gap:2rem; margin-top:2.6rem; flex-wrap:wrap;
}
.hero-badge .num{
  font-family:var(--font-display);
  font-size:1.9rem;
  color:var(--text);
  display:block;
}
.hero-badge .label{
  font-size:.82rem;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* hero mark: animated G built from CSS, echoes logo geometry */
.hero-mark{
  position:relative;
  width:100%;
  max-width:420px;
  aspect-ratio:1/1;
  margin-inline:auto;
}
.hero-mark img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 0 40px rgba(47,216,255,.25));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
.hero-mark .ring{
  position:absolute; inset:-8%;
  border:1px dashed rgba(47,216,255,.25);
  border-radius:50%;
  animation:spin 40s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ---------- section shell ---------- */
section{position:relative; z-index:1;}
.section-pad{padding:6rem 0;}
.section-title{
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom:1rem;
}
.section-lead{
  font-size:1.08rem;
  max-width:640px;
}

/* diagonal signal-cut divider between sections, referencing the mark's parallelogram */
.signal-divider{
  position:relative;
  height:64px;
  overflow:hidden;
}
.signal-divider svg{width:100%; height:100%; display:block;}

/* ---------- surfaces / cards ---------- */
.card-goyes{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:2.2rem;
  height:100%;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.card-goyes:hover{
  transform:translateY(-6px);
  border-color:rgba(47,216,255,.4);
  background:var(--surface-alt);
}
.card-icon{
  width:52px; height:52px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-violet);
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  margin-bottom:1.4rem;
  flex-shrink:0;
}
.card-icon svg{width:26px; height:26px; stroke:#04060d;}

.card-goyes h3{font-size:1.35rem; margin-bottom:.6rem;}
.card-goyes p{font-size:.98rem;}

/* ---------- stats strip ---------- */
.stats-strip{
  background:var(--surface);
  border-top:1px solid var(--surface-border);
  border-bottom:1px solid var(--surface-border);
}
.stat-item{text-align:center; padding:2.4rem 1rem;}
.stat-item .num{
  font-family:var(--font-display);
  font-size:2.2rem;
  background:var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block;
}
.stat-item .label{
  color:var(--muted);
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-top:.3rem;
}

/* ---------- story / about ---------- */
.story-media{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--surface-border);
}
.story-media img{width:100%; display:block;}
.story-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,23,0) 40%, rgba(6,11,23,.85) 100%);
}

/* ---------- process ---------- */
.process-step{
  position:relative;
  padding-left:0;
}
.process-index{
  font-family:var(--font-display);
  font-size:2.6rem;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(47,216,255,.4);
  line-height:1;
  margin-bottom:1rem;
  display:block;
}
.process-step h3{font-size:1.3rem; margin-bottom:.6rem;}
.process-step p{font-size:.98rem;}
.process-line{
  display:none;
}
@media (min-width:992px){
  .process-line{
    display:block;
    position:absolute;
    top:1.3rem; left:calc(100% + 0px); width:100%;
    height:1px;
    background:linear-gradient(90deg, rgba(47,216,255,.5), transparent);
  }
}

/* ---------- values (about page) ---------- */
.value-card{
  border-left:2px solid var(--surface-border);
  padding-left:1.6rem;
  transition:border-color .25s ease;
}
.value-card:hover{border-color:var(--cyan);}
.value-card h3{font-size:1.2rem; margin-bottom:.5rem;}

/* ---------- testimonials ---------- */
.testimonial-card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:2rem;
  height:100%;
}
.testimonial-card .quote-mark{
  font-family:var(--font-display);
  font-size:2.4rem;
  color:var(--primary);
  line-height:1;
  display:block;
  margin-bottom:.6rem;
}
.testimonial-card p.body-text{color:var(--text); font-style:italic; font-size:.98rem;}
.testimonial-author{margin-top:1.4rem; display:flex; align-items:center; gap:.8rem;}
.testimonial-avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--grad-violet);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; color:#04060d;
}
.testimonial-author .name{font-family:var(--font-heading); font-weight:700; color:var(--text); font-size:.95rem;}
.testimonial-author .role{font-size:.8rem; color:var(--muted-2);}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:3.5rem 2.5rem;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; top:-40%; right:-10%;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(21,140,249,.25), transparent 70%);
}
.cta-band h2{font-size:clamp(1.7rem, 3vw, 2.3rem); margin-bottom:.8rem;}

/* ---------- footer ---------- */
footer.site-footer{
  background:#050810;
  border-top:1px solid var(--surface-border);
  padding:3.5rem 0 1.5rem;
}
footer.site-footer img.footer-logo{height:32px; margin-bottom:1rem;}
footer.site-footer p{font-size:.92rem;}
footer.site-footer h6{
  font-family:var(--font-heading);
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:1rem;
}
footer.site-footer ul{list-style:none; padding:0; margin:0;}
footer.site-footer li{margin-bottom:.6rem;}
footer.site-footer a{color:var(--muted); font-size:.94rem;}
footer.site-footer a:hover{color:var(--cyan);}
.footer-bottom{
  border-top:1px solid var(--surface-border);
  margin-top:2.5rem;
  padding-top:1.5rem;
  font-size:.85rem;
  color:var(--muted-2);
}
.social-dot{
  width:38px; height:38px;
  border:1px solid var(--surface-border);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text);
  transition:border-color .2s ease, color .2s ease;
}
.social-dot:hover{border-color:var(--cyan); color:var(--cyan);}

/* ---------- page header (inner pages) ---------- */
.page-header{
  padding:9.5rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.page-header h1{font-size:clamp(2.2rem, 4vw, 3rem);}
.breadcrumb-goyes{
  font-family:var(--font-heading);
  font-size:.9rem;
  color:var(--muted-2);
  margin-bottom:1rem;
}
.breadcrumb-goyes a{color:var(--muted-2);}
.breadcrumb-goyes a:hover{color:var(--cyan);}

/* ---------- contact page ---------- */
.contact-card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:2.4rem;
}
.form-control-goyes{
  background:var(--bg);
  border:1px solid var(--surface-border);
  color:var(--text);
  border-radius:8px;
  padding:.75rem 1rem;
  font-family:var(--font-body);
}
.form-control-goyes:focus{
  background:var(--bg);
  color:var(--text);
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(47,216,255,.15);
}
.form-control-goyes::placeholder{color:var(--muted-2);}
label.form-label-goyes{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.03em;
  color:var(--muted);
  margin-bottom:.4rem;
  display:block;
}
.contact-info-item{
  display:flex; gap:1rem; align-items:flex-start;
  margin-bottom:1.8rem;
}
.contact-info-item .icon-box{
  width:44px; height:44px; flex-shrink:0;
  border-radius:9px;
  background:rgba(47,216,255,.08);
  border:1px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center;
}
.contact-info-item .icon-box svg{width:20px; height:20px; stroke:var(--cyan);}
.contact-info-item h4{font-size:1rem; margin-bottom:.2rem; color:var(--text);}
.contact-info-item p{font-size:.92rem;}

/* ---------- plan cards (servicios) ---------- */
.plan-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:2.2rem;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, border-color .25s ease;
}
.plan-card:hover{transform:translateY(-6px); border-color:rgba(47,216,255,.4);}
.plan-card.featured{
  border-color:rgba(47,216,255,.55);
  background:linear-gradient(180deg, rgba(47,216,255,.06), var(--surface) 40%);
}
.plan-badge{
  position:absolute;
  top:-14px; left:2rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#04060d;
  background:var(--grad-primary);
  padding:.35rem .9rem;
  border-radius:20px;
}
.plan-tag{
  font-family:var(--font-display);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:.6rem;
  display:block;
}
.plan-card h3{font-size:1.5rem; margin-bottom:.5rem;}
.plan-card p.plan-desc{font-size:.95rem; margin-bottom:1.4rem;}
.plan-features{list-style:none; padding:0; margin:0 0 1.8rem; flex-grow:1;}
.plan-features li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.92rem;
  color:var(--text);
  margin-bottom:.7rem;
}
.plan-features li svg{
  width:18px; height:18px; flex-shrink:0; margin-top:.15rem;
  stroke:var(--cyan);
}
.plan-card .btn-goyes-outline{width:100%; justify-content:center; text-align:center;}

/* ---------- dark accordion (FAQ) ---------- */
.accordion-goyes .accordion-item{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius) !important;
  overflow:hidden;
  margin-bottom:1rem;
}
.accordion-goyes .accordion-button{
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.05rem;
  box-shadow:none;
}
.accordion-goyes .accordion-button::after{
  filter:invert(72%) sepia(89%) saturate(2000%) hue-rotate(160deg) brightness(1.1);
}
.accordion-goyes .accordion-button:not(.collapsed){
  background:var(--surface-alt);
  color:var(--cyan);
}
.accordion-goyes .accordion-body{
  color:var(--muted);
  font-size:.95rem;
  background:var(--surface);
}

/* ---------- utilities ---------- */
.text-gradient{
  background:var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bg-surface{background:var(--surface);}

@media (max-width: 767px){
  .hero{padding:8rem 0 4rem;}
  .section-pad{padding:4rem 0;}
  .hero-badges{gap:1.4rem;}
}

[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].reveal-in{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .hero-mark img, .hero-mark .ring{animation:none;}
  html{scroll-behavior:auto;}
}