:root{
  --bg:#0e1110; --bg-soft:#121614; --txt:#e7ece9; --txt-dim:#a8b3ad;
  --brand:#9fbf84; --brand-strong:#7da663; --stroke:#263129;
  --radius-xl:20px; --radius-lg:14px; --radius-md:10px;
  --shadow-1:0 10px 30px rgba(0,0,0,.35); --shadow-2:0 2px 10px rgba(0,0,0,.4) inset;
  --container:1200px;
}
*,*::before,*::after{ box-sizing: border-box }
body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial; background: var(--bg); color: var(--txt); line-height:1.6 }
img{ max-width:100%; display:block; border-radius:12px }
a{ color:inherit; text-decoration:none }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding: 0 20px }

/* Nav */
.site-header{ position: sticky; top:0; z-index:100; backdrop-filter: blur(6px); background: color-mix(in oklab, var(--bg) 70%, transparent); border-bottom: 1px solid var(--stroke) }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0 }
.brand{ display:flex; align-items:center; gap:12px }
.brand-logo{ width:40px; height:40px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); box-shadow: var(--shadow-1); display:grid; place-items:center; font-weight:900; letter-spacing:1px; color:#0b0d0c }
.brand-name{ font-weight:700; letter-spacing: .6px }
.nav-links{ display:flex; gap:20px }
.nav-links a{ padding: 8px 12px; border-radius: 10px; border:1px solid transparent }
.nav-links a:hover, .nav-links a.active{ border-color: var(--stroke); background: var(--bg-soft) }

.nav-right{ display:flex; align-items:center; gap:10px }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--stroke); background: var(--bg-soft); transition: .2s transform ease, .2s background ease }
.btn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--bg-soft), var(--brand) 8%) }
.btn.primary{ background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color:#0c0f0e; border-color: transparent; font-weight:700 }
.btn.primary:hover{ filter: brightness(1.03) }

/* Hero */
.hero{ position:relative; overflow:clip; padding: 72px 0 40px; border-bottom: 1px solid var(--stroke) }
.hero-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:36px; align-items:center }
.badge{ display:inline-block; padding:6px 10px; border:1px solid var(--stroke); border-radius: 999px; color: var(--txt-dim); font-size: 14px; background: color-mix(in oklab, var(--bg-soft), white 1%) }
.hero h1{ font-size: clamp(34px, 4.5vw, 64px); line-height:1.05; margin:16px 0 }
.hero p{ font-size: clamp(16px, 1.3vw, 20px); color: var(--txt-dim) }
.hero-cta{ display:flex; gap:12px; margin-top: 22px; flex-wrap: wrap }

.panel{ background: linear-gradient(180deg, color-mix(in oklab, var(--bg-soft), white 2%), var(--bg-soft)); border:1px solid var(--stroke); border-radius: var(--radius-xl); padding: 18px; box-shadow: var(--shadow-2) }
.panel-title{ margin:4px 0 8px }
.specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px }
.spec{ background: color-mix(in oklab, var(--bg-soft), white 3%); border:1px solid var(--stroke); border-radius: 12px; padding: 12px }
.spec b{ display:block; font-size:13px; color: var(--txt-dim) }
.spec span{ font-size:18px; font-weight:600 }

.section-title{ font-size: clamp(26px, 3vw, 38px); margin: 24px 0 12px }
.section-sub{ color: var(--txt-dim); margin: 0 0 24px }

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px }
.card{ background: var(--bg-soft); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding:18px }

.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px }

/* Páginas internas */
.feature-block{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0; padding: 16px; border:1px solid var(--stroke); border-radius:14px; background: var(--bg-soft) }
.usecase-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.usecase-card{ background: var(--bg-soft); border:1px solid var(--stroke); padding: 12px; border-radius:14px }
.usecase-card h3{ margin:10px 0 6px }

/* Contacto */
.contact-layout{ display:grid; grid-template-columns: 2fr 1fr; gap:24px; padding: 24px 0 40px }
.contact-card{ background: linear-gradient(180deg, color-mix(in oklab, var(--bg-soft), white 2%), var(--bg-soft)); border:1px solid var(--stroke); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow-2) }
.contact-head h1{ margin: 0 0 6px }
.contact-head p{ margin: 0 0 18px; color: var(--txt-dim) }
.info-card{ background: var(--bg-soft); border:1px solid var(--stroke); border-radius: var(--radius-lg); padding:16px }
.info-card + .info-card{ margin-top:16px }
.info-card h3{ margin:0 0 10px }
.info-card ul{ margin:0; padding-left:18px }
.info-card .muted{ color: var(--txt-dim); margin-top:8px }
.map-card img{ width:100%; height:auto; border-radius:12px }

.contact-form.modern .field{ position:relative; background: color-mix(in oklab, var(--bg-soft), white 3%); border: 1px solid var(--stroke); border-radius: 12px; padding: 12px 12px 6px; transition: border .2s ease, box-shadow .2s ease }
.contact-form.modern .field + .field{ margin-top:12px }
.contact-form.modern .field input,
.contact-form.modern .field textarea,
.contact-form.modern .field select{ width:100%; background: transparent; border:none; outline:none; color: var(--txt); font-size:16px; padding: 10px 4px 6px }
.contact-form.modern .field textarea{ resize: vertical }
.contact-form.modern .field label{ position:absolute; left:12px; top:10px; font-size:14px; color: var(--txt-dim); pointer-events:none; transition: all .15s ease; padding: 0 4px; background: transparent }
.contact-form.modern .field:focus-within{ border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 80%) }
.contact-form.modern .field input:not(:placeholder-shown) + label,
.contact-form.modern .field textarea:not(:placeholder-shown) + label,
.contact-form.modern .field select + label,
.contact-form.modern .field:focus-within label{ top:-9px; font-size:12px; color: var(--brand); background: var(--bg-soft) }

/* Select estilizado + flecha + tema oscuro */
.contact-form.modern .field.select{ position:relative }
.contact-form.modern .field.select select{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: color-mix(in oklab, var(--bg-soft), white 2%);
  color: var(--txt);
  border-radius: 8px;
  background-clip: padding-box;
  color-scheme: dark;
  padding-right: 36px;
  cursor: pointer;
}
.contact-form.modern .field.select::after{
  content:""; position:absolute; top:50%; right:12px; width:10px; height:10px; pointer-events:none;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid var(--txt-dim); border-bottom: 2px solid var(--txt-dim); opacity:.9
}
.contact-form.modern .field.select option{ background-color: var(--bg-soft); color: var(--txt) }
/* Seleccionado verde y hover oliva claro */
.contact-form.modern .field.select select option:checked{ background-color: var(--brand) !important; color:#0c0f0e !important }
.contact-form.modern .field.select select option:hover{ background-color: color-mix(in oklab, var(--brand), white 25%) !important; color:#0c0f0e !important }
.contact-form.modern .field.select select:focus option:checked{ background-color: var(--brand) !important; color:#0c0f0e !important }

.form-actions{ display:flex; align-items:center; gap:12px; margin-top:12px }

/* Footer */
footer{ border-top:1px solid var(--stroke); padding: 36px 0; color: var(--txt-dim) }
.foot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap }
.foot-links{ display:flex; gap:16px }

/* Responsive */
@media (max-width: 980px){
  .hero-grid, .cards, .gallery, .feature-block, .usecase-grid, .grid-2{ grid-template-columns: 1fr }
  .nav-links{ display:none }
  .contact-layout{ grid-template-columns:1fr }
}