/* ============================================================
   COMPONENTS — buttons, cards, form, marquee, misc reusable bits
   ============================================================ */

/* ---------- Buttons / LED ---------- */
.btn-panel{
  margin-top:40px;
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-secondary);
  background:linear-gradient(180deg,var(--panel-3),var(--panel-4));
  border:1px solid rgba(59,130,246,.45);
  border-radius:10px; padding:16px 28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 0 22px rgba(59,130,246,.18);
  transition:all 0.25s ease;
  cursor:pointer;
}
.btn-panel:hover, .btn-panel:focus-visible{
  color:#fff; border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 0 36px rgba(59,130,246,.42);
  transform:translateY(-2px);
}
.led{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent);
  animation:vxBlink 2.2s infinite; flex:none;
}
.led.success{ background:var(--success); box-shadow:0 0 10px var(--success) }

.btn-ghost{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--link); background:transparent; border:1px solid var(--border-strong);
  border-radius:8px; padding:10px 18px; cursor:pointer;
}
.btn-ghost:hover{ color:#fff; border-color:var(--accent) }

/* CTA secundario del hero: mismo tamaño que .btn-panel pero contorno/transparente */
.btn-outline{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-tertiary); background:transparent;
  border:1px solid var(--border-strong); border-radius:10px; padding:16px 28px;
  transition:all 0.25s ease; cursor:pointer;
}
.btn-outline:hover, .btn-outline:focus-visible{
  color:#fff; border-color:var(--accent); transform:translateY(-2px);
}

/* ---------- Idioma ---------- */
.lang-panel{
  display:flex; align-items:center; gap:6px; padding:5px;
  flex:0 0 auto;
  border:1px solid var(--border-accentish); border-radius:10px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.lang-btn{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.1em;
  padding:7px 11px; border-radius:7px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--text-tertiary);
  transition:all .2s ease;
}
.lang-btn[aria-pressed="true"]{
  color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px rgba(59,130,246,.4);
  border-color:var(--accent);
}
.lang-btn:not([aria-pressed="true"]){ opacity:.55 }
.lang-btn:not([aria-pressed="true"]):hover{ opacity:.85 }

@media (max-width: 520px){
  .lang-panel{ gap:3px; padding:4px; border-radius:8px }
  .lang-btn{
    min-width:30px;
    padding:6px 7px;
    font-size:10px;
    letter-spacing:0.04em;
  }
}

@media (max-width: 380px){
  .lang-btn:not([aria-pressed="true"]){ display:none }
}

.lang-toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--panel-3); border:1px solid var(--border-strong); color:var(--text-secondary);
  font-family:var(--mono); font-size:12px; padding:10px 18px; border-radius:10px; z-index:50;
  transition:opacity .25s ease, transform .25s ease;
}
.lang-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ---------- Ecosistema / servicios ---------- */
.eco-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
@media (max-width:700px){ .eco-grid{ grid-template-columns:1fr } }

.eco-card{
  position:relative; border-radius:18px; padding:26px 24px;
  border:1px solid var(--border-strong);
  background:linear-gradient(135deg,var(--panel-3),var(--panel-4));
  transition:box-shadow .25s ease, transform .25s ease;
}
.eco-card:hover{ transform:translateY(-3px); box-shadow:0 0 30px rgba(59,130,246,.22) }
.eco-card.featured{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:rgba(255,255,255,.5);
  box-shadow:0 0 30px rgba(59,130,246,.35);
}
.eco-mod{ font-family:var(--mono); font-size:10px; letter-spacing:0.2em; color:var(--text-muted); margin-bottom:10px }
.eco-card.featured .eco-mod{ color:rgba(255,255,255,.75) }
.eco-title{ font-size:19px; font-weight:600; margin:0 0 10px }
.eco-desc{ margin:0; font-size:14px; line-height:1.6; color:var(--text-secondary) }
.eco-card.featured .eco-desc{ color:rgba(255,255,255,.92) }

.eco-details{ margin-top:16px }
.eco-details summary{
  cursor:pointer; list-style:none;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--link); display:inline-flex; align-items:center; gap:6px; padding:4px 0;
}
.eco-details summary::-webkit-details-marker{ display:none }
.eco-details summary:hover{ color:var(--link-hover) }
.eco-details summary::after{ content:'+'; font-size:14px; transition:transform .2s ease }
.eco-details[open] summary::after{ transform:rotate(45deg) }
.eco-details ul{ margin:12px 0 0; padding-left:18px; font-size:13px; line-height:1.7; color:var(--text-secondary) }
.eco-card.featured .eco-details summary{ color:#fff }
.eco-card.featured .eco-details ul{ color:rgba(255,255,255,.9) }

/* ---------- Trabajos ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px }
@media (max-width:700px){ .work-grid{ grid-template-columns:1fr } }

.work-card{ border-radius:18px; overflow:hidden; border:1px solid var(--border); background:var(--panel-translucent) }
.work-thumb{
  height:180px;
  min-height:180px;
  background:repeating-linear-gradient(-45deg,rgba(140,170,255,0.14) 0 12px,rgba(140,170,255,0.06) 12px 24px);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-tertiary); font-family:var(--mono); font-size:12px;
}
.work-thumb.has-logo{ background:#f4f1ea; padding:28px }
.work-thumb.has-logo img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.work-body{ padding:22px 24px }
.work-tag{ display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px }
.work-body hr{ border:none; border-top:1px solid var(--border); margin:8px 0 12px }
.work-title{ display:inline-block; margin:0 0 8px; font-size:18px; font-weight:600; color:var(--text-primary) }
a.work-title:hover, a.work-title:focus-visible{ color:var(--accent) }
.work-desc{ margin:0 0 14px; font-size:14px; line-height:1.6; color:var(--text-secondary) }
.work-quote{
  margin:0 0 14px; padding:12px 16px;
  border-left:2px solid var(--accent); border-radius:0 8px 8px 0;
  background:rgba(59,130,246,.06);
}
.work-quote p{ margin:0 0 8px; font-size:13px; line-height:1.6; color:var(--text-secondary); font-style:italic }
.work-quote cite{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--text-tertiary); font-style:normal }
.work-stack{ display:flex; flex-wrap:wrap; gap:8px }
.work-chip{ font-family:var(--mono); font-size:11px; color:var(--text-tertiary); border:1px solid var(--border); border-radius:6px; padding:4px 8px }

@media (max-width:700px){
  .work-thumb{
    height:190px;
    min-height:190px;
  }
  .work-thumb.has-logo{
    padding:24px;
  }
  .work-thumb.has-logo img{
    max-width:min(280px, 88%);
    max-height:140px;
  }
}

/* ---------- Metodología ---------- */
.method-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
@media (max-width:900px){ .method-steps{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .method-steps{ grid-template-columns:1fr } }
.method-step{
  padding:22px 20px; border:1px solid var(--border); border-radius:14px;
  background:var(--panel-translucent);
}
.method-num{
  display:block; font-family:var(--mono); font-size:22px; font-weight:600;
  color:var(--accent); margin-bottom:10px;
}
.method-title{ margin:0 0 8px; font-size:16px; font-weight:600 }
.method-desc{ margin:0; font-size:13px; line-height:1.6; color:var(--text-secondary) }

/* ---------- Lo que realmente vendemos ---------- */
.sell-grid{ display:flex; flex-direction:column; gap:14px }
.sell-row{
  display:grid; grid-template-columns:1fr 1.4fr; gap:20px; align-items:center;
  padding:20px 24px; border:1px solid var(--border); border-radius:14px;
  background:var(--panel-translucent);
}
@media (max-width:640px){ .sell-row{ grid-template-columns:1fr; gap:6px } }
.sell-neg{ margin:0; font-size:16px; font-weight:600; color:var(--text-muted) }
.sell-pos{ margin:0; font-size:16px; font-weight:500; line-height:1.5; color:var(--text-primary) }
.sell-pos::before{ content:'→ '; color:var(--accent); font-weight:700 }

/* ---------- Contacto: intro ---------- */
.contact-intro{ margin:0 0 26px; font-size:14px; line-height:1.65; color:var(--text-secondary) }

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-fab{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.35), 0 0 0 6px rgba(37,211,102,.14);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-fab:hover, .whatsapp-fab:focus-visible{
  color:#fff; transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 8px rgba(37,211,102,.2);
}
.whatsapp-fab svg{ display:block }
@media (max-width:600px){
  .whatsapp-fab{ right:16px; bottom:16px; width:52px; height:52px }
}

/* ---------- Equipo ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:680px; margin:0 auto }
@media (max-width:600px){ .team-grid{ grid-template-columns:1fr } }

.team-card{ text-align:center; padding:28px 20px; border:1px solid var(--border); border-radius:16px; background:var(--panel-translucent) }
.avatar{
  width:64px; height:64px; margin:0 auto 16px; transform:rotate(45deg); border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 20px rgba(59,130,246,.3);
}
.avatar span{ transform:rotate(-45deg); font-family:var(--mono); font-weight:600; font-size:16px; color:#fff }
.team-name{ font-size:16px; font-weight:600; margin:0 0 4px }
.team-role{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--accent); text-transform:uppercase; margin:0 0 12px }
.team-bio{ font-size:13px; line-height:1.6; color:var(--text-secondary); margin:0 }

/* ---------- Misión ---------- */
.mision-wrap{ max-width:760px; margin:0 auto; text-align:center }
.mision-rows{ display:flex; flex-direction:column; gap:16px; text-align:left; margin-top:36px }
.mision-row{
  display:flex; align-items:baseline; gap:18px; padding:20px 24px;
  border:1px solid var(--border); border-radius:14px; background:var(--panel-translucent);
}
.mision-idx{ font-family:var(--mono); font-size:12px; color:var(--accent); flex:none }
.mision-row p{ margin:0; font-size:15px; line-height:1.65; color:var(--text-secondary) }

/* ---------- Tecnologías ---------- */
.tech-pill{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:#0b0f1e; background:#e8eaf2; padding:8px 16px; border-radius:8px; font-weight:600;
}
.marquee-track{
  margin-top:26px; overflow:hidden;
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  background:rgba(10,13,26,0.6); padding:20px 0;
}
.marquee-inner{ display:flex; gap:48px; width:max-content; animation:vxMarquee 26s linear infinite }
.tech-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; color:var(--text-secondary) }
.tech-badge{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:11px; flex:none }

/* ---------- Contacto ---------- */
.contact-panel{
  max-width:640px; margin:0 auto;
  border:1px solid var(--border-accentish); border-radius:18px;
  background:linear-gradient(180deg,rgba(16,22,42,0.9),rgba(8,11,22,0.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 0 60px rgba(59,130,246,.10);
  padding:clamp(28px,5vw,44px);
}
.contact-head{ display:flex; align-items:center; gap:10px; margin-bottom:30px }
.contact-head h2{ margin:0; font-size:20px; font-weight:700 }
form.contact-form{ display:flex; flex-direction:column; gap:20px }
.field{ display:flex; flex-direction:column; gap:6px }
.field-label{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--link) }
.field input, .field textarea{
  background:rgba(255,255,255,0.03); border:1px solid var(--border-strong); border-radius:8px;
  color:var(--text-primary); font-family:var(--mono); font-size:13px; padding:10px 12px; outline:none;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent) }
.sent-box{ text-align:center; padding:20px 0; font-family:var(--mono) }
.sent-title{ font-size:15px; color:var(--success); margin-bottom:12px }
.sent-body{ margin:0 0 24px; font-size:13px; line-height:1.7; color:var(--text-secondary) }