/* ==========================================================================
   servicios.html — estilos exclusivos de esta página.
   Reutiliza tokens.css, fonts.css, hero.css (Header, botones, tipografías)
   y home.css (.ks-container, .eyebrow, .section-title, .section-text,
   .reveal, .card-hover, .bg-texture*, .value-card*, .service-block*,
   .service-points, .service-link, .metodologia-*, .pasos-list, .paso*,
   .cta-*, .site-footer). Solo se agregan aquí los layouts nuevos.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
html{scroll-padding-top:100px}

/* ---------- Hero ---------- */
.about-hero{position:relative;min-height:clamp(620px,76vh,720px);display:flex;align-items:center;padding-top:calc(88px + 4vw);padding-bottom:clamp(48px,6vw,72px)}
.about-hero .bg-texture-overlay{background:rgba(250,249,245,0.92)}

.about-hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}

.about-hero-content .eyebrow{margin-bottom:18px}
.about-hero-content h1.section-title{font-size:clamp(34px,4.2vw,52px);margin-bottom:20px}
.about-hero-content .section-text{max-width:540px;margin-bottom:28px;font-size:clamp(15.5px,1.1vw,18px)}

.about-hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px}
.hero-inline-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:14.5px;color:var(--ks-black);text-decoration:none;padding-bottom:3px;border-bottom:1.5px solid var(--ks-line);transition:color 180ms,border-color 180ms}
.hero-inline-link:hover{color:var(--ks-red);border-color:var(--ks-red)}

.about-hero-visual{position:relative}
.about-hero-shape{position:absolute;width:82%;height:82%;border-radius:32px;z-index:0;top:-20px;left:-20px;background:var(--ks-yellow)}
.about-hero-accent{position:absolute;width:18px;height:18px;border-radius:999px;background:var(--ks-red);bottom:-10px;right:14%;z-index:2}
.about-hero-frame{position:relative;z-index:1;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/5}
.about-hero-frame img{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width:768px){
  .about-hero-grid{grid-template-columns:0.96fr 1.08fr;gap:56px}
  .about-hero-content{order:1}
  .about-hero-visual{order:2}
}

/* ---------- Navegación interna de servicios ---------- */
.svc-nav{background:var(--ks-white)}
.svc-nav-grid{display:grid;grid-template-columns:1fr;gap:20px}
.svc-nav-item{border-left:3px solid var(--ks-red);padding:6px 0 6px 20px;display:flex;flex-direction:column;gap:10px}
.svc-nav-item.is-secondary{border-left-color:var(--ks-orange)}
.svc-nav-item .service-tag{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ks-red)}
.svc-nav-item.is-secondary .service-tag{color:var(--ks-orange)}
.svc-nav-item p{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text-secondary);margin:0}

@media (min-width:768px){
  .svc-nav-grid{grid-template-columns:1fr 1fr;gap:40px}
}

/* ---------- Consultoría en computación ---------- */
.consultoria{background:var(--ks-ivory)}
.consultoria .bg-texture-overlay{background:rgba(250,249,245,0.93)}
.consultoria-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:8px}

/* ---------- Contenido digital ---------- */
.contenido-digital{background:var(--ks-white)}
.contenido-intro{max-width:700px;margin:0 0 36px}
.contenido-panoramic{border-radius:28px;overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:16/8;margin-bottom:40px}
.contenido-panoramic img{width:100%;height:100%;object-fit:cover;display:block}
.contenido-modules{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:32px}
.contenido-ctas{display:flex;flex-wrap:wrap;gap:16px}

@media (min-width:700px){
  .contenido-modules{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Soluciones integradas ---------- */
.integradas{background:var(--ks-surface)}
.integradas-intro{max-width:700px;margin:0 0 40px}

.flow-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:56px}
.flow-step{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--ks-black);background:var(--ks-white);border:1px solid var(--ks-line);border-radius:999px;padding:12px 22px}
.flow-arrow{color:var(--ks-red);font-size:18px;line-height:1;flex-shrink:0}

.escenarios-grid{display:grid;grid-template-columns:1fr;gap:32px}
.escenario{padding-top:24px;border-top:1px solid var(--ks-line)}
.escenario:first-child{padding-top:0;border-top:none}
.escenario h3{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--ks-black);margin:0 0 10px;letter-spacing:-0.005em}
.escenario p{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text-secondary);margin:0 0 16px}

@media (min-width:768px){
  .escenarios-grid{grid-template-columns:repeat(3,1fr);gap:0}
  .escenario{padding-top:0;padding-left:32px;border-top:none;border-left:1px solid var(--ks-line)}
  .escenario:first-child{padding-left:0;border-left:none}
}

/* ---------- Necesidades que podemos atender ---------- */
.necesidades{background:var(--ks-white)}
.necesidades-grid{display:grid;grid-template-columns:1fr;gap:20px}
.necesidad-card{background:var(--ks-white);border:1px solid var(--ks-line);border-radius:24px;box-shadow:var(--shadow-sm);padding:26px;display:flex;flex-direction:column;gap:14px}
.necesidad-icon{width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.necesidad-icon svg{width:22px;height:22px}
.necesidad-card h3{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ks-black);margin:0;letter-spacing:-0.005em;line-height:1.25}

@media (min-width:640px){
  .necesidades-grid{grid-template-columns:repeat(6,1fr)}
  .necesidad-card.span-3{grid-column:span 3}
  .necesidad-card.span-2{grid-column:span 2}
  .necesidad-card.span-6{grid-column:span 6;flex-direction:row;align-items:center;gap:20px}
  .necesidad-card.span-6 h3{flex:1}
}