:root{
  --bg: #0b1220;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);

  --accent: #22c55e;
  --accent2: #60a5fa;

  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; }
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(900px 520px at 92% 18%, rgba(96,165,250,.22), transparent 60%),
    linear-gradient(180deg, #070b14 0%, var(--bg) 100%);
  color: var(--text);
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
.main-wrapper{ min-height:100vh; display:flex; flex-direction:column; }

/* Header */
.site-header{
  position: sticky;
  top:0;
  z-index:9999;
  backdrop-filter: blur(12px);
  background: rgba(7, 11, 20, .65);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{
  max-width:1120px;
  margin:0 auto;
  padding: .95rem 1.2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-width: 260px;
}
.brand-logo{
  width:64px; height:64px; object-fit:contain;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
  padding:6px;
}
.brand-main{ font-weight: 900; letter-spacing: .2px; }
.brand-sub{ font-size: .78rem; color: var(--muted2); margin-top:2px; }

.nav-links{
  display:flex;
  align-items:center;
  gap:1.0rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav-links a{
  color: var(--muted);
  padding:.35rem .25rem;
  position:relative;
  transition: .15s ease;
}
.nav-links a:hover{ color: var(--text); transform: translateY(-1px); }
.nav-links a.active{ color: var(--accent); }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.nav-cta{
  padding:.6rem 1.0rem !important;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(34,197,94,.75));
  color:#0b1220 !important;
  font-weight: 900;
  box-shadow: 0 18px 44px rgba(34,197,94,.22);
}

/* Mobile menu button */
.menu-btn{
  display:none;
  width:42px; height:42px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.menu-btn span{
  display:block;
  height:2px;
  margin:7px 10px;
  background: rgba(255,255,255,.82);
  border-radius:999px;
}

/* Layout */
main{ flex:1; }
.container{
  max-width:1120px;
  margin:0 auto;
  padding: 2.6rem 1.2rem 3.5rem;
}

.card{
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.4rem;
}
.grid{
  display:grid;
  gap:1.2rem;
}
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.section-title{
  font-size: 1.85rem;
  letter-spacing: -0.4px;
  margin-bottom: .55rem;
}
.section-subtitle{
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.3rem;
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap:1.4rem;
  align-items:stretch;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: .9rem;
}
.hero h1{
  font-size: 2.55rem;
  line-height: 1.08;
  margin-bottom: .9rem;
}
.hero p{ color: var(--muted); line-height:1.75; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top: 1.2rem; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.75rem 1.15rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  font-weight: 900;
  transition: .15s ease;
}
.btn-primary{
  background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(34,197,94,.72));
  color:#071017;
  box-shadow: 0 18px 44px rgba(34,197,94,.22);
}
.btn-outline{
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.btn:hover{ transform: translateY(-1px); }

.hero-panel{
  position:relative;
  overflow:hidden;
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:280px; height:280px;
  background: radial-gradient(circle at center, rgba(96,165,250,.35), transparent 65%);
}
.kpi{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  margin-top:.8rem;
}
.kpi strong{ font-size:1.05rem; }
.kpi span{ color: var(--muted); font-size:.92rem; line-height:1.55; }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.95rem; }
.chip{
  font-size:.86rem;
  padding:.35rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--muted);
}

/* Reveal animation */
[data-reveal]{ opacity:0; transform: translateY(10px); transition: .55s ease; }
.reveal-in{ opacity:1; transform: translateY(0); }

/* Services filter */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin: 1rem 0 1.2rem;
}
.filter-btn{
  padding:.5rem .85rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor:pointer;
  font-weight: 800;
}
.filter-btn.active{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.35);
  color: var(--text);
}

.service-card h3{ margin-bottom:.45rem; }
.service-card p{ color: var(--muted); line-height:1.65; }
.service-meta{ color: var(--muted2); font-size:.85rem; margin-top:.7rem; }

/* Lists */
.list{
  margin-top:.75rem;
  padding-left: 1.1rem;
}
.list li{
  margin-bottom:.5rem;
  color: var(--muted);
  line-height:1.65;
}

/* Forms */
.form-row{ display:flex; gap:1rem; }
label{ display:block; font-weight: 900; margin:.75rem 0 .35rem; }
input, textarea{
  width:100%;
  padding:.75rem .85rem;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}
textarea{ min-height: 140px; resize: vertical; }

.alert{
  margin: 1rem 0;
  padding: .85rem 1rem;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.alert-success{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.alert-error{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }

/* Footer */
.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(7, 11, 20, .65);
}
.footer-inner{
  max-width:1120px;
  margin:0 auto;
  padding: 1.3rem 1.2rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-title{ font-weight: 900; margin-bottom: .25rem; }
.footer-muted{ color: var(--muted2); font-size:.92rem; line-height:1.55; }
.footer-links{ display:flex; gap:1rem; flex-wrap:wrap; color: var(--muted); }
.footer-contact{ color: var(--muted); font-size:.95rem; line-height:1.7; }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .menu-btn{ display:block; }
  .nav-links{
    display:none;
    width:100%;
    margin-top:.8rem;
    padding:.9rem;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
  }
  .nav-links.is-open{ display:flex; flex-direction:column; align-items:stretch; }
  .nav-cta{ text-align:center; }
  .form-row{ flex-direction:column; }
}

/* SETTINGS / VALUE SECTION */
.value-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:1rem;
  margin-top:1.1rem;
}
.value-item{
  padding:1.05rem 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.value-item h4{ margin-bottom:.35rem; font-size:1.02rem; }
.value-item p{ color: rgba(255,255,255,.72); line-height:1.6; font-size:.95rem; }

.callout{
  margin-top:1.1rem;
  padding:1rem 1.05rem;
  border-radius: 16px;
  border:1px solid rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
  color: rgba(255,255,255,.82);
}

details.tech-details{
  margin-top:1rem;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
details.tech-details summary{
  cursor:pointer;
  padding: .9rem 1rem;
  font-weight: 900;
  color: rgba(255,255,255,.88);
}
details.tech-details .tech-body{
  padding: .85rem 1rem 1rem;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}

@media (max-width: 980px){
  .value-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .value-grid{ grid-template-columns: 1fr; }
}

/* =========================
   SERVICIOS: COMPACT MODE
   ========================= */

.services-grid{
  gap: .9rem !important;
}

/* En pantallas grandes: 4 columnas para evitar scroll excesivo */
@media (min-width: 1180px){
  .services-grid{
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  }
}

/* En pantallas medianas: 3 columnas */
@media (max-width: 1179px){
  .services-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  }
}

/* En móviles: 1 columna */
@media (max-width: 620px){
  .services-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Cards más pequeñas */
.service-card{
  padding: 1.05rem 1.05rem !important;
  border-radius: 16px !important;
}

/* Títulos un poco más compactos */
.service-card h3{
  font-size: 1.02rem !important;
  margin-bottom: .45rem !important;
}

/* Texto: limitar líneas para reducir altura (menos invasivo) */
.service-card p{
  font-size: .93rem !important;
  line-height: 1.55 !important;
  margin-bottom: .7rem !important;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Chips más pequeños + mostrar máximo 2 para que no crezca la card */
.service-card .chip{
  font-size: .78rem !important;
  padding: .22rem .58rem !important;
}
.service-card .chips .chip:nth-child(n+3){
  display:none;
}

/* Meta más discreta */
.service-meta{
  font-size: .84rem !important;
  color: rgba(255,255,255,.62) !important;
  margin-top: .55rem !important;
}

/* Botón "ver todos" centrado */
.services-actions{
  display:flex;
  justify-content:center;
  margin-top: 1.1rem;
}