/* ===== Paleta basada en el banner ===== */
:root{
  --navy-900:#1f2a33;   /* fondo azul-gris oscuro */
  --navy-800:#243240;
  --navy-700:#2b3a49;
  --green-600:#16a34a;  /* acento verde del triángulo */
  --green-500:#22c55e;
  --orange-500:#f97316; /* sello SD */
  --text-100:#f8fafc;
  --text-300:#e5e7eb;
  --text-500:#cbd5e1;
  --text-700:#94a3b8;
  --card:#0f172a;
  --muted:#0b1220;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text-300);
  background:linear-gradient(180deg,var(--navy-900),var(--muted));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}

/* Layout */
.container{width:min(1140px,92%);margin-inline:auto}

/* Buttons */
.btn{
  --bg:transparent;
  --fg:var(--text-100);
  --bd:rgba(255,255,255,.14);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.9rem 1.2rem; border-radius:14px;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-weight:700; text-decoration:none; transition:.25s ease;
  box-shadow:none; cursor:pointer;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary{ --bg:linear-gradient(135deg,var(--green-600),var(--green-500)); --bd:transparent }
.btn-ghost{ --bg:transparent; --bd:rgba(255,255,255,.18); color:var(--text-100) }
.btn.sm{ padding:.6rem .9rem; font-weight:600 }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,rgba(15,23,42,.85),rgba(15,23,42,.6));
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{ display:flex; align-items:center; gap:1rem; padding:.9rem 0 }
.brand{ display:flex; align-items:center; gap:.75rem; color:var(--text-100); text-decoration:none }
.brand-mark{
  display:grid; place-items:center; width:36px; height:36px; border-radius:8px;
  background:linear-gradient(180deg,#ff8a3c,var(--orange-500)); color:#fff; font-weight:800
}
.brand-mark .sd{font-size:1.4rem;letter-spacing:.3px}
.brand-text small{display:block; font-size:.75rem; color:var(--text-700)}

.nav{ margin-left:auto; display:flex; gap:1rem }
.nav a{
  color:var(--text-300); text-decoration:none; font-weight:600; padding:.6rem .9rem;
  border-radius:10px; border:1px solid transparent;
}
.nav a:hover{ color:var(--text-100); border-color:rgba(255,255,255,.12) }

.header-cta{ margin-left:.5rem }
.hamburger{ display:none; margin-left:.5rem; background:transparent; border:0; cursor:pointer }
.hamburger span{ display:block; width:22px; height:2px; background:var(--text-300); margin:5px 0; transition:.25s }
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.hamburger.active span:nth-child(2){ opacity:0 }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* Hero */
.hero{
  position:relative;
  padding: clamp(3rem, 5vw, 5rem) 0;
  overflow:hidden;
}
.hero-accent{
  position:absolute; right:-18vw; top:0; width:52vw; height:100%;
  background:linear-gradient(135deg,var(--green-600),var(--green-500));
  transform:skewX(-22deg);
  filter:drop-shadow(0 25px 60px rgba(22,163,74,.35));
  z-index:-1;              /* 👈 queda detrás del contenido */
}
.hero-grid{
  position:relative;       /* crea contexto de apilamiento por si acaso */
  display:grid; grid-template-columns:1.1fr .9fr; gap: clamp(1.5rem, 3vw, 3rem);
  align-items:center;
}
.hero-copy h1{
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height:1.05; color:#fff; margin:0 0 .25rem
}
.subtitle{ font-size: clamp(1.05rem, 1.8vw, 1.2rem); color:var(--text-500); margin:.2rem 0 1rem }
.hero-bullets{ margin:0 0 1.25rem 1.1rem }
.hero-bullets li{ margin:.4rem 0 }
.hero-actions{ display:flex; gap:.7rem; flex-wrap:wrap }

.hero-media{
  position:relative;       /* asegura que esté delante del accent */
  border-radius:18px; overflow:hidden; background:var(--navy-800);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  z-index:0;
}


.hero-media figcaption{
  font-size:.8rem; color:var(--text-700); padding:.6rem .9rem; border-top:1px solid rgba(255,255,255,.06)
}

/* SaaS */
.saas{ padding: 2.2rem 0 0 }
.saas-inner{
  display:flex; gap:1rem; align-items:center; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  padding:1rem 1.2rem; border-radius:14px; border:1px solid rgba(255,255,255,.08)
}
.saas-icon{ width:56px; height:56px; display:grid; place-items:center; color:var(--green-500) }
.saas-copy h2{ margin:.2rem 0 .2rem; color:#fff }

/* Sections */
.section{ padding: clamp(2.5rem, 5vw, 4rem) 0 }
.section.alt{ background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.03)) }
.section-head{ text-align:center; margin-bottom: clamp(1.6rem, 3vw, 2.2rem) }
.section-head h2{ margin:0 0 .4rem; color:#fff; font-size: clamp(1.6rem, 3.4vw, 2.2rem) }
.section-head p{ margin:0; color:var(--text-500) }

/* Grid helpers */
.grid{ display:grid; gap:1rem }
.cards-5{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }

/* Cards (beneficios) con icono al lado del texto */
.card{
  display:flex;                 /* 👈 icono + texto en fila */
  align-items:flex-start;
  gap:.9rem;
  background: linear-gradient(180deg,var(--card),#0f1c33);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1.1rem; min-height:120px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.card h3{ color:#fff; margin:.1rem 0 .25rem; font-size:1rem }
.card p{ margin:0; color:var(--text-500); font-size:.95rem }

.icon{
  flex-shrink:0;
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  border:1px solid rgba(22,163,74,.35);
}
.i-orga{ background:linear-gradient(180deg,rgba(22,163,74,.25),rgba(22,163,74,.12)) }
.i-gestion{ background:linear-gradient(180deg,rgba(34,197,94,.25),rgba(34,197,94,.12)) }
.i-estrategia{ background:linear-gradient(180deg,rgba(71,179,255,.25),rgba(71,179,255,.1)) }
.i-poder{ background:linear-gradient(180deg,rgba(250,204,21,.25),rgba(250,204,21,.08)) }
.i-decision{ background:linear-gradient(180deg,rgba(244,114,182,.25),rgba(244,114,182,.09)) }

/* Features con imagen + texto */
.feature{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:1.4rem; align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  padding:1rem; border-radius:18px; border:1px solid rgba(255,255,255,.07)
}
.feature.reverse{ grid-template-columns:0.95fr 1.05fr }
.feature-media{
  overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow)
}
.feature-copy h3{ color:#fff; margin:.2rem 0 .3rem }
.check{ margin:.7rem 0 0 1.1rem; color:var(--text-500) }
.check li{ margin:.25rem 0 }

/* Por qué elegirnos */
.badges{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)) }
.badge{
  background:linear-gradient(180deg,var(--card),#0f1c33);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1.1rem; text-align:center;
}
.badge-num{ display:block; font-size:1.6rem; font-weight:800; color:var(--green-500) }
.badge-text{ color:var(--text-500) }

/* CTA */
.cta{
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(22,163,74,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.06);
}
.cta-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.4rem; align-items:start }
.cta-copy h2{ color:#fff; margin:.2rem 0 .3rem }
.contact{ list-style:none; padding:0; margin:1rem 0 0 }
.contact li{ margin:.25rem 0 }
.contact a{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25) }
.contact a:hover{ color:var(--green-500); border-bottom-color:transparent }

.cta-form{
  display:grid; gap:.7rem; background:linear-gradient(180deg,var(--card),#0f1c33);
  border:1px solid rgba(255,255,255,.1); padding:1rem; border-radius:16px
}
.cta-form input, .cta-form textarea{
  width:100%; background:#0b1220; color:#fff; border:1px solid rgba(255,255,255,.12);
  padding:.85rem 1rem; border-radius:12px; font:inherit
}
.cta-form input:focus, .cta-form textarea:focus{
  outline:none; border-color:rgba(34,197,94,.6); box-shadow:0 0 0 3px rgba(34,197,94,.2)
}
.mini{ color:var(--text-700); margin:.2rem 0 0; font-size:.85rem }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.06); padding:1rem 0 }
.footer-inner{ display:flex; align-items:center; justify-content:space-between }
.site-footer p{ margin:0 }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:.5s ease }
.reveal.show{ opacity:1; transform:none }

.cta-whatsapp{
  display:flex;
  align-items:center;
  justify-content:center;
}



/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr }
  .feature, .feature.reverse{ grid-template-columns:1fr }
  .cta-inner{ grid-template-columns:1fr }
}
@media (max-width: 760px){
  .nav{ display:none }
  .nav.open{
    display:flex; position:absolute; inset:64px 0 auto 0; padding: .8rem 4%;
    background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.92));
    border-bottom:1px solid rgba(255,255,255,.08); gap:.4rem; flex-direction:column
  }
  .hamburger{ display:block }
}