:root{
  --bg: #fff;
  --text: #0f1222;
  --muted: #5b6274;
  --primary: #1c5cff;        /* azul acento */
  --primary-ink: #ffffff;
  --surface: #f3f5f9;
  --border: #e6e9f0;
  --chip: #0ea5e9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block}
a{color: var(--primary);text-decoration: none}
a:hover{text-decoration: underline}

.container{width:min(1120px, 92%);margin-inline:auto}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:8px; top:8px; width:auto; height:auto; padding:8px; background:#000; color:#fff; z-index:1000}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%)}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.7); backdrop-filter: saturate(1.2) blur(12px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; gap:16px; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px}
.logo img{height:80px}

.main-nav{margin-left:auto}
.nav-toggle{display:none; background:none; border:1px solid var(--border); padding:6px 8px; border-radius:8px}
.nav-toggle .nav-toggle-bar{display:block; width:20px; height:2px; background:var(--text); margin:3px 0}

.nav-list{list-style:none; display:flex; gap:18px; margin:0; padding:0}
.nav-list a{padding:8px 8px; border-radius:8px}
.nav-list a:hover{background:var(--surface); text-decoration:none}

.header-actions{display:flex; gap:8px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); cursor:pointer; text-decoration:none; font-weight:600}
.btn:hover{filter:brightness(0.98)}
.btn.ghost{background:transparent}
.btn.primary{background:var(--primary); color:var(--primary-ink); border-color:transparent}
.badge{display:inline-block; font-size:12px; padding:6px 10px; background:var(--surface); border:1px solid var(--border); border-radius:999px}

.section-title{font-size:clamp(20px, 3vw, 28px); margin:0 0 8px}
.section-lead{color:var(--muted); margin:0 0 24px}

/* Hero */
.hero{padding:48px 0 12px}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center}
.hero .lead{color:var(--muted)}
.hero-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.btn.accent {
  background: #fff;
  color: #111;
  border: 2px solid #ffb100;
}

/* Feature Gamma */
.feature{padding:24px 0}
.feature-inner{display:grid; grid-template-columns: .9fr 1.1fr; gap:24px; align-items:center}
.feature .cta-row{display:flex; gap:10px; margin-top:10px}

/* Services */
.services{padding:24px 0 6px}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px}
.card.highlight{outline:2px solid color-mix(in oklab, var(--primary) 35%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, var(--primary)), var(--surface))}
.card .chip{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:var(--chip); color:#001010; font-weight:700; margin-bottom:6px}

/* Projects */
.projects{padding:18px 0}
.grid.logos{display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:16px; align-items:stretch}
.project{display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; text-align:center}
.project img{height:36px}

/* Community */
.community{padding:8px 0 18px}

/* Contact */
.contact{padding:18px 0 36px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact-form label span{display:block; font-weight:600; margin-bottom:6px}
input[type="text"], input[type="email"], textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text)
}
textarea{resize:vertical}
.consent{margin:10px 0}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:18px 0 28px; background:var(--surface)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-links{list-style:none; display:flex; gap:16px; margin:0; padding:0}
.footer-links a{padding:6px 8px; border-radius:8px}
.footer-brand p{margin:8px 0 0; color:var(--muted); font-size:14px}

/* Responsive */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .feature-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .grid.logos{grid-template-columns:1fr 1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .main-nav{order:3}
  .header-actions{order:2}
  .nav-toggle{display:inline-block}
  .nav-list{position:absolute; right:4%; top:64px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:8px; flex-direction:column; gap:4px; width:min(260px, 92%); box-shadow:0 10px 30px rgba(0,0,0,.08); display:none}
  .nav-list.open{display:flex}
}

/* Contact strip */
.contact-strip{
  position: sticky; top: 56px; z-index: 19;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  border-bottom: 1px solid var(--border);
}
@media (max-width:960px){ .contact-strip{ top: 58px; } }
.contact-strip-inner{
  display:flex; gap:12px; align-items:center; justify-content:center;
  padding:8px 0; flex-wrap:wrap; font-weight:600;
}
.contact-item{ color: var(--text); text-decoration:none; }
.contact-item:hover{ text-decoration:underline; }

/* Promo strip (CO2 Quoter) — no sticky para no apilar con la tira de contacto */
.promo-strip{
  position: relative;
  background: color-mix(in oklab, var(--primary) 12%, var(--surface));
  border-bottom: 1px solid var(--border);
}
.promo-strip-inner{
  display:flex; gap:12px; align-items:center; justify-content:center;
  padding:10px 0; flex-wrap:wrap; font-weight:700;
}

/* ==== FAB WhatsApp (a la izquierda del botón de Botpress) ==== */
.whatsapp-fab {
  position: fixed;
  bottom: 100px;   /* lo subimos para que quede encima del de Botpress */
  right: 30px;
  z-index: 10000;
}

.whatsapp-fab img {
  width: 52px;
  height: 52px;
  display: block;
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); 
  /* duración 0.35s y una curva "ease" más natural */
}
.whatsapp-fab:hover img {
  transform: scale(1.2); /* 1.2 = 20% más grande */
}
.promo-strip.gamma {
  background: linear-gradient(90deg, #141e30, #243b55);
  color: #fff;
  text-align: center;
  padding: 0.8rem 0;
}
.promo-strip.gamma .btn.primary {
  background: #ffb100;
  color: #000;
  margin-left: 1rem;
}
.btn.accent {
  background: #fff;
  color: #111;
  border: 2px solid #ffb100;
}