/* ==========================================================================
   Cor-E Dark — bloques específicos de /services (public/css/services-dark.css)
   Namespace .sv-* — solo carga en paginaActual === 'services' (cabecera.ejs).
   Tokens y componentes genéricos .hm-* viven en dark-base.css, cargado antes
   — incluidos .hm-page-hero, .hm-line/.hm-line-head y .hm-rows/.hm-row,
   promovidos desde este archivo cuando /about pasó a necesitarlos también
   (ver prompt/aboutNew.md §2.2 y §5).
   Ver prompt/servicesNew.md §5 para la especificación original.
   ========================================================================== */

/* ==========================================================================
   Hero y patrón de sección (kicker + h2 + intro) — promovidos a
   .hm-page-hero / .hm-line / .hm-line-head en dark-base.css cuando /about
   pasó a necesitarlos también. Aquí solo queda lo genuinamente propio de
   /services: los 3 enlaces de arranque bajo el hero.
   ========================================================================== */
.sv-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
}

/* ==========================================================================
   .sv-line-hero — panel de imagen a sangre completa por línea de servicio
   (Talent, Consulting, Training), mismo patrón que .hm-careers de la home
   y .ct-next de /contactUs: foto a borde de viewport + degradado en la
   costura hacia el color de fondo real de la sección + texto en el panel
   opuesto. Vive FUERA de .hm-wrap (un hijo directo de <section class="hm-line">)
   para poder llegar a sangre — .hm-wrap tiene padding-inline, .hm-line no.
   ========================================================================== */
.sv-line-hero {
  --seam: var(--dk-surface-2);
  --seam-dir: to left;
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 420px;
  /* .hm-line ya reserva padding-block: var(--rhythm) arriba y abajo del
     contenido; este panel necesita llegar hasta el borde superior real de
     la sección, así que cancela ese padding-top con margen negativo en vez
     de tocar la regla compartida de .hm-line (que usan 6 secciones más). */
  margin-top: calc(-1 * var(--rhythm));
  margin-bottom: clamp(48px, 6vw, 72px);
}
.sv-line-hero-photo {
  position: relative;
  overflow: hidden;
}
.sv-line-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sv-line-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--seam-dir), transparent 70%, var(--seam) 100%);
}
/* Sin :hover con transform aquí a propósito. designRules.md §5 permite scale()
   en hover únicamente cuando la imagen vive dentro de un <a> completo (el caso
   citado, .hm-cell--lead, es un enlace de card a card). .sv-line-hero-photo no
   es un enlace — añadir zoom sugeriría una interacción que no existe. */

.sv-line-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4vw, 64px);
}
.sv-line-hero-content .hm-line-head { margin: 0; max-width: none; }

/* Color de la costura: por defecto surface-2 (Talent, Training — 2ª y 4ª
   sección .hm-line del documento, posición par → fondo surface-2 por
   .hm-line:nth-of-type(even) en dark-base.css). Consulting es la 3ª
   (posición impar → fondo canvas) y necesita este modificador. */
.sv-line-hero--on-canvas { --seam: var(--dk-canvas); }

/* Alternancia editorial: por defecto la foto va a la derecha (columna
   ancha, 58%); --reverse la pasa a la izquierda. El texto se queda
   siempre primero en el DOM (orden de tabulación real, ver designRules
   §6) — solo el orden visual cambia, vía `order`. */
.sv-line-hero--reverse {
  --seam-dir: to right;
  grid-template-columns: 58% 42%;
}
.sv-line-hero--reverse .sv-line-hero-photo { order: -1; }

@media (max-width: 899.98px) {
  .sv-line-hero { grid-template-columns: 1fr; }
  .sv-line-hero--reverse .sv-line-hero-photo { order: 0; }
  .sv-line-hero-photo { min-height: 280px; }
  .sv-line-hero-photo::after { display: none; }
}

/* ==========================================================================
   Sub-navegación pegajosa
   ========================================================================== */
:root { --sv-nav-h: 57px; }

.sv-nav {
  position: sticky;
  top: var(--nav-h);   /* debajo del navbar, no encima — hallazgo S, ver prompt/personaldataNew.md §5.5 */
  z-index: 20;
  background: var(--dk-canvas);
  border-block: 1px solid var(--dk-line);
}
.sv-nav-list {
  list-style: none;
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sv-nav-list::-webkit-scrollbar { display: none; }
.sv-nav a {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx-3);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 18px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.sv-nav a:hover,
.sv-nav a:focus-visible {
  color: var(--tx-1);
}
.sv-nav a[aria-current="true"] {
  color: var(--tx-1);
  border-bottom-color: var(--ac-yellow);
}

.sv-section { scroll-margin-top: calc(var(--nav-h) + var(--sv-nav-h) + 24px); }

/* scroll-behavior: smooth promovido a dark-base.css (lo necesita también
   /personaldata) — ver prompt/personaldataNew.md §5.2. */

/* ==========================================================================
   .sv-groups / .sv-group — capacidades agrupadas
   ========================================================================== */
.sv-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
}
.sv-group-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ac-blue);
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.sv-group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.sv-capability {
  padding-block: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--dk-line);
}
.sv-capability h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--tx-1);
  margin: 0 0 8px;
}
.sv-capability p {
  color: var(--tx-2);
  max-width: 46ch;
  margin: 0;
}
@media (max-width: 767.98px) {
  .sv-group-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   .sv-callout — bloque destacado
   ========================================================================== */
.sv-callout {
  background: var(--dk-surface-2);
  padding: clamp(28px, 4vw, 44px);
  margin-top: clamp(32px, 4vw, 48px);
}
.sv-callout h3 {
  font-size: var(--fs-h3);
  color: var(--tx-1);
  margin: 0 0 12px;
}
.sv-callout p {
  color: var(--tx-2);
  max-width: 62ch;
  margin: 0;
}

/* ==========================================================================
   .sv-method — los 4 pasos de la metodología
   ========================================================================== */
.sv-method {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin: 0 0 clamp(48px, 6vw, 72px);
}
.sv-method-step {
  border-top: 1px solid var(--dk-line);
  padding-top: 20px;
}
.sv-method-num {
  font-size: var(--fs-d3);
  font-weight: 600;
  color: var(--tx-3);
  display: block;
  margin-bottom: 8px;
}
.sv-method-step h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--tx-1);
  margin: 0 0 8px;
}
.sv-method-step p {
  color: var(--tx-2);
  margin: 0;
}
@media (max-width: 1023.98px) {
  .sv-method { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599.98px) {
  .sv-method { grid-template-columns: 1fr; }
}

/* ==========================================================================
   .sv-tracks — las 4 rutas de formación
   ========================================================================== */
.sv-tracks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.sv-track {
  background: var(--dk-surface);
  padding: clamp(28px, 3vw, 40px);
}
.sv-track h3 {
  font-size: var(--fs-h3);
  color: var(--tx-1);
  margin: 0;
}
@media (max-width: 899.98px) {
  .sv-tracks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Programas sectoriales + modalidades
   ========================================================================== */
.sv-programs {
  margin-top: clamp(40px, 5vw, 56px);
  max-width: 66ch;
}
.sv-programs p {
  color: var(--tx-2);
  margin: 0 0 16px;
}
.sv-modalities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sv-modalities li {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx-1);
  border: 1px solid var(--dk-line);
  padding: 6px 16px;
}

/* ==========================================================================
   .sv-solves — "What it solves"
   ========================================================================== */
.sv-solves {
  list-style: none;
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: 0;
}
.sv-solves li {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--tx-1);
  padding-block: 20px;
  border-top: 1px solid var(--dk-line);
  max-width: 46ch;
}
.sv-solves li:last-child { border-bottom: 1px solid var(--dk-line); }

/* ==========================================================================
   Specialties — reutiliza .hm-depth-block, añade título de sección
   ========================================================================== */
.sv-specialties-head {
  max-width: 62ch;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.sv-specialties-head h2 {
  font-size: var(--fs-d2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--tx-1);
  margin: 0;
}
.sv-depth-block-links {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* ==========================================================================
   .sv-depth-photo — bloque de especialidad con fondo fotográfico, solo el
   azul (COBOL & Mainframe). Rojo y amarillo siguen sólidos — no hay
   fotografía auténtica disponible para ellos (prompt/servicesImagesNew.md
   §5.2, hallazgos F, G, J).
   ========================================================================== */
.hm-depth-block--blue.sv-depth-photo {
  position: relative;
  overflow: hidden;
  background: var(--dk-canvas);   /* color de respaldo mientras carga la imagen */
}
.sv-depth-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;   /* favorece la terminal COBOL (arriba) sin perder la silueta (abajo) */
  z-index: 0;
}
/* Sin :hover con transform aquí tampoco: este <div> no es un enlace — solo
   contiene dos .hm-link-arrow internos. Un zoom en todo el bloque al pasar
   el ratón sugeriría que el bloque entero es clicable. */
.sv-depth-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 26, 0.85);   /* velo neutro, no tinte de color — designRules §8 */
  z-index: 1;
}
.sv-depth-content { position: relative; z-index: 2; }

/* dark-base.css fija --dk-canvas para texto sobre relleno sólido claro. Con
   foto + velo oscuro detrás, el texto vuelve a --tx-1 — selector más
   específico que la regla compartida, no se toca dark-base.css. */
.hm-depth-block--blue.sv-depth-photo h3,
.hm-depth-block--blue.sv-depth-photo p { color: var(--tx-1); }
.hm-depth-block--blue.sv-depth-photo .hm-link-arrow {
  color: var(--tx-1);
  border-color: rgba(255,255,255,0.35);
}

/* Mismo criterio para el anillo de foco — el override compartido en
   dark-base.css (outline-color: var(--dk-canvas)) sería casi invisible aquí. */
.hm-depth-block--blue.sv-depth-photo :focus-visible {
  outline-color: var(--ac-yellow);
}

/* ==========================================================================
   Combined — cómo se combinan las líneas
   ========================================================================== */
.sv-combos {
  margin: 0 0 clamp(40px, 5vw, 56px);
}
.sv-combo {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap);
  padding-block: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--dk-line);
}
.sv-combos .sv-combo:last-child { border-bottom: 1px solid var(--dk-line); }
.sv-combo h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--tx-1);
  margin: 0;
}
.sv-combo p {
  color: var(--tx-2);
  max-width: 56ch;
  margin: 0;
}
@media (max-width: 767.98px) {
  .sv-combo { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   Industries
   ========================================================================== */
.sv-industries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.sv-industry {
  border-top: 1px solid var(--dk-line);
  padding-top: 20px;
}
.sv-industry h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--tx-1);
  margin: 0 0 8px;
}
.sv-industry p {
  color: var(--tx-2);
  max-width: 52ch;
  margin: 0;
}
@media (max-width: 767.98px) {
  .sv-industries { grid-template-columns: 1fr; }
}

@media (max-width: 320px) {
  html, body { overflow-x: hidden; }
}