:root{
  /* Paleta VSG */
  --color-primary:#003058;     /* Azul Profundo Marino */
  --color-secondary:#003464;   /* Azul Noche */
  --color-tertiary:#004c94;    /* Azul Real */
  --color-accent:#cfa83f;      /* Oro Mostaza */
  --color-light:#f6f8fb;
  --color-background-alt:#eef4fa;
}

*{box-sizing:border-box}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--color-primary); background:var(--color-light)}

/* NAV */
nav{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:1rem}
nav .branding{display:flex; align-items:center; gap:.75rem}
nav .branding img{height:160px}
nav .menu{display:flex; flex-wrap:wrap; gap:1rem; font-size:.95rem}
nav .menu a{text-decoration:none; color:inherit}
nav .menu a:hover{text-decoration:underline}

/* HERO azul con slogan */
.hero{position:relative; text-align:center; padding:5rem 1rem; color:#fff; overflow:hidden}
.hero-blue{background:var(--color-primary)}
.hero h1{font-size:3rem; font-weight:800; margin:0 0 1rem; line-height:1.15}
.hero p{font-size:1.1rem; max-width:48rem; margin:0 auto 1.25rem; color:rgba(255,255,255,.92)}
.btn-primary{display:inline-block; background:var(--color-accent); color:#0f2438; padding:.8rem 1.4rem; border-radius:999px; text-decoration:none; font-weight:700}
.btn-primary:hover{background:var(--color-tertiary); color:#fff}
.cta-note{display:block; margin-top:.5rem; opacity:.9}

/* Secciones */
section{padding:4rem 1rem}
.white{background:#fff}
.alt-background{background:var(--color-background-alt)}
.center-text{ text-align:center; }
section h2{text-align:center; font-size:2rem; font-weight:700; margin:0 0 1.5rem}

/* Dolores (pain points) */
.pain-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; max-width:1000px; margin:0 auto}
.pain-card{background:#fff; color:#0f2438; border:1px solid #e6e8ec; border-radius:12px; padding:1rem 1rem 1rem 2.25rem; box-shadow:0 2px 6px rgba(0,0,0,.05); position:relative}
.pain-card .dot{position:absolute; left:.9rem; top:1.15rem; width:.6rem; height:.6rem; border-radius:999px; background:var(--color-accent)}

/* Divisiones (una sola fila) */
.divisiones-row{display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory}
.service-card{flex:0 0 280px; border:none; border-radius:1rem; overflow:hidden; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); transition:.3s; scroll-snap-align:start}
.service-card:hover{transform:translateY(-4px); box-shadow:0 4px 12px rgba(0,0,0,.15)}
.service-card.active{transform:translateY(-6px); box-shadow:0 6px 16px rgba(0,0,0,.2)}
.service-card img{width:100%; height:180px; object-fit:cover; display:block}
.service-card h3{margin:0; padding:.75rem; font-size:1.1rem; font-weight:700; background:var(--color-secondary); color:#fff}
.service-card .description{max-height:0; overflow:hidden; padding:0 1rem; background:#fff; color:var(--color-primary); font-size:.95rem; line-height:1.5; transition:max-height .45s ease, opacity .45s ease; opacity:0}
.service-card.active .description{max-height:300px; padding:1rem; opacity:1}

/* Proceso horizontal con imágenes */
.process-row{display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; max-width:1200px; margin:0 auto}
.step{min-width:260px; flex:0 0 280px; border-radius:14px; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.06); overflow:hidden; scroll-snap-align:start}
.step img{width:100%; height:160px; object-fit:cover; display:block}
.step .b{padding:1rem 1.1rem}
.step h4{margin:.2rem 0 .35rem; font-size:1.05rem; color:var(--color-primary)}
.step p{margin:0; line-height:1.55; color:#0f2438}

/* Contacto (Forms) */
.form-embed{max-width:860px; margin:0 auto; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.08)}
.contact-extra{text-align:center; margin-top:1.25rem}
.contact-extra a{color:var(--color-tertiary); text-decoration:underline}

/* Footer */
footer{text-align:center; padding:1.5rem; font-size:.875rem; color:#777}

/* Responsive */
@media (max-width: 768px){
  nav{flex-direction:column; align-items:flex-start}
}