:root {
  --azul:#007bff;
  --naranja:#ff9900;
  --verde:#02aa6d;
  --gris:#0f1220;
  --claro:#f7f8fc;
}

* { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior: smooth; }

/* Nunca scroll horizontal (sin afectar sticky) */
html, body { overflow-x: clip; }
@supports not (overflow: clip){
  html, body { overflow-x: hidden; }
}

body {
  font-family:"Open Sans",system-ui,Arial;
  color:#222;
  background:#fff;
  line-height:1.6;
}

/* Medios fluidos */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* Contenedor único y coherente */
.container { width:min(1100px,92vw); margin-inline:auto }

a { color:var(--azul); text-decoration:none }
.btn { display:inline-block; padding:.9rem 1.2rem; border-radius:.8rem; font-weight:700; cursor:pointer }
.btn--primary { background:var(--azul); color:#fff }
.btn--ghost { border:2px solid var(--azul); color:var(--azul) }
.tag { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--azul); font-weight:700 }

/* HERO */
.hero { background:linear-gradient(180deg,#0b1020 0%,#141a33 100%); color:#fff; padding:6rem 0 4rem }
.hero__wrap { display:grid; gap:2rem; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center }
.hero h1 { font-family:Montserrat,system-ui; font-weight:800; line-height:1.1; font-size:clamp(2rem,3.5vw,3rem); margin:.5rem 0 1rem }
.hero p { opacity:.9; font-size:1.05rem }
.hero__badges { display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 1.5rem }
.hero__media { min-height: 380px; aspect-ratio: auto; }
.hero__media img { width: 100%; height: 100%; object-fit: contain; }

/* BLOQUES */
.section { padding:4rem 0 }
.section--alt { background:var(--claro) }
.section h2 { font-family:Montserrat; font-size:clamp(1.6rem,2.6vw,2.2rem); margin:0 0 1.2rem }
.lead { font-size:1.05rem; color:#444 }

/* Misión Visión Valores */
.mvv { display:grid; gap:1.2rem; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:1.5rem }
.card { background:#fff; border:1px solid #e7e9f0; border-radius:1rem; padding:1.2rem }
.card h3 { font-family:Montserrat; margin:.2rem 0 .6rem }
.card p { color:#444 }

/* SOLUCIONES */
.solutions { display:grid; gap:1.2rem; grid-template-columns:repeat(3, minmax(0,1fr)) }
.solution { border:1px solid #e7e9f0; border-radius:1rem; padding:1.2rem; background:#fff; display:flex; flex-direction:column; justify-content:space-between }
.solution__head { display:flex; align-items:center; gap:.7rem }
.solution__pill { background:#e8f0ff; color:#0b59d8; font-weight:700; border-radius:999px; padding:.25rem .6rem; font-size:.78rem }

.solution .btn { margin-top:auto; align-self:flex-start }
.solution p { margin-bottom:1.5rem }
#soluciones .lead { margin-bottom:2rem }
.solution h3 { margin-bottom:.8rem }

/* Impacto */
.stats { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.5rem; margin-top: 2rem; }
.stat {
  background: linear-gradient(180deg, #0f1220 0%, #161b30 100%);
  color: #fff; border-radius: 1rem; padding: 2rem 1.2rem; text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease;
}
.stat:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.stat strong { display:block; font-size:2rem; font-weight:800; color:var(--azul); margin-bottom:.4rem; }
.stat span { font-size:.95rem; opacity:.9; }

/* Testimonios/Logos */
.testimonios__grid { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); margin:2rem 0 }
.quote { border-left:4px solid #0b59d8; background:#f9faff; border-radius:.6rem; padding:1rem 1.2rem; font-style:italic; color:#333; }
.quote small { display:block; margin-top:.8rem; font-size:.9rem; font-weight:600; color:#666; }

.logos{ display:flex; gap:5rem; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:70px; }
.logos img{ height:48px; width:auto; max-width:160px; object-fit:contain; filter: grayscale(1) contrast(1.05) opacity(.9); transition: filter .2s ease, transform .2s ease; }
.logos img:hover{ filter:none; transform: translateY(-2px); }
@media (min-width:1200px){ .logos img{ height:100px; } }

/* CTA + CONTACTO unificados */
.cta-contact{
  background: linear-gradient(135deg, var(--azul), #1f47ff);
  color:#fff; border-radius: 1.2rem; padding: clamp(2rem, 4vw, 3rem);
}
.cta-contact a{ color:#e8f1ff; text-decoration: underline; }
.cta-contact__wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: start; }
.cta-contact__copy h2{ margin:0 0 .4rem; font-weight: 800; }
.cta-contact__copy .lead{ opacity:.95; margin-bottom: .9rem; }
.cta-contact__bullets{ margin: .6rem 0 1rem; padding-left: 1.1rem; }
.cta-contact__bullets li{ margin:.2rem 0; list-style: "✓ "; }
.cta-contact__alt{ opacity:.9; font-size: .95rem; }

/* Form */
.cta-contact__form{
  background: rgba(255,255,255,.08); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 1rem;
  padding: 1rem; display:grid; grid-template-columns: 1fr 1fr; gap: .8rem .8rem;
}
.cta-contact__form label{ display:flex; flex-direction:column; gap:.35rem; font-weight:600; }
.cta-contact__form input, .cta-contact__form textarea{
  width:100%; padding:.75rem .85rem; border:1px solid rgba(255,255,255,.35); border-radius:.8rem;
  background:#fff; color:#111827; transition: box-shadow .15s ease, border-color .15s ease;
}
.cta-contact__form input:focus, .cta-contact__form textarea:focus{
  border-color:#7aa7ff; box-shadow: 0 0 0 4px rgba(122,167,255,.25); outline: none;
}
.cta-contact__form .full{ grid-column: 1 / -1; }
.cta-contact__form .btn{ grid-column: 1 / -1; justify-self: start; padding:.8rem 1.2rem; border-radius:.8rem; box-shadow:0 6px 16px rgba(0,123,255,.22); }
.cta-contact__legal{ grid-column: 1 / -1; opacity:.85; font-size:.85rem; }

/* Responsive */
@media (max-width: 980px){
  .hero__wrap, .mvv, .solutions, .stats { grid-template-columns: 1fr; }
  .hero__media{ min-height: 280px; }

  .cta-contact__wrap{ grid-template-columns: 1fr; }
  .cta-contact__form{ grid-template-columns: 1fr; }
  .cta-contact__form .btn{ justify-self: stretch; text-align:center; }
}

/* Evitar que los hijos “empujen” las grillas (overflow) */
.hero__wrap > *,
.mvv > *,
.solutions > *,
.stats > * { min-width: 0; }
