/* Portada de Servicios · cierre visual de la iteración 17.1. Lo escribe herramientas/construir_servicios_17_1.py.
   Se carga después de proyecto-ficha.css y proyecto-ficha-v2.css (tonos --pv-s / --pv-d, .pf-ic, .pf-t-*).
   Fondos: franja de introducción en azul profundo; bandas 01 blanco · 02 gris neutro · 03 blanco · 04 gris neutro · 05 azul profundo.
   Los visuales son HTML/CSS/SVG con texto real, salvo el notebook ilustrativo (imagen) y el diagrama de Integración (el de la landing). */

/* ---------- Introducción «Nuestras soluciones»: franja azul profundo centrada ---------- */
.sv2-intro
{
  background: radial-gradient(90% 140% at 50% 0%, #0B2F63, var(--deep) 72%);
  color: #FFFFFF;
}
.wrap.sv2-intro-in
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: 54rem;
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
  text-align: center;
}
.sv2-intro .kicker { color: #9CC9FF; }
.sv2-intro .h2
{
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.2;
  color: #FFFFFF;
}
.sv2-intro .lead
{
  margin: 0;
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
}

/* ---------- Bandas ---------- */
.sv2-band { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.sv2-f-g { background: var(--alt); }
.sv2-f-d
{
  background: radial-gradient(90% 120% at 0% 0%, #0B2F63, var(--deep) 70%);
  color: #FFFFFF;
}
.sv2-in
{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sv2-inv .sv2-vis { order: -1; }
.sv2-tx
{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
  max-width: 38rem;
}
.sv2-num
{
  position: absolute;
  top: .25rem;
  right: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
}
.sv2-ico { width: 3rem; height: 3rem; }
.sv2-ico .mi { font-size: 1.625rem; }
.sv2-h3
{
  margin: .125rem 0 0;
  font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem);
  line-height: 1.2;
  color: var(--ink);
}
.sv2-p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--body); }
.sv2-caps
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem 1.25rem;
  margin: .25rem 0 .5rem;
  padding: 0;
  list-style: none;
}
.sv2-caps li
{
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--ink);
}
.sv2-caps .mi { flex: none; margin-top: .0625rem; font-size: 1.125rem; color: var(--pv-s, #005DCA); }
/* Banda invertida (05): texto claro y botón secundario con contraste sobre azul profundo */
.sv2-f-d .sv2-h3,
.sv2-f-d .sv2-caps li { color: #FFFFFF; }
.sv2-f-d .sv2-p { color: rgba(255, 255, 255, .86); }
.sv2-f-d .sv2-num { color: rgba(255, 255, 255, .6); }
.sv2-f-d .sv2-caps .mi { color: var(--pv-d, #7DB4FF); }
.sv2-f-d .sv2-ico { border-color: var(--pv-d); background: rgba(255, 255, 255, .08); color: var(--pv-d); }
.sv2-f-d .btn-secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, .75); }
.sv2-f-d .btn-secondary:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--deep); }
:root[data-mode="dark"] .sv2-f-g .btn-secondary,
:root[data-mode="dark"] .sv2-f-w .btn-secondary,
:root[data-mode="dark"] .sv2-band:not(.sv2-f-d) .btn-secondary { color: var(--on-deep-link); border-color: var(--on-deep-link); }
@media (prefers-color-scheme: dark)
{
  :root[data-mode="auto"] .sv2-band:not(.sv2-f-d) .btn-secondary { color: var(--on-deep-link); border-color: var(--on-deep-link); }
}

/* ---------- Marco común de los visuales ---------- */
.sv2-vis { margin: 0; min-width: 0; }
.sv2-vis figcaption
{
  margin-top: .75rem;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
.sv2-f-d .sv2-vis figcaption { color: rgba(255, 255, 255, .7); }

/* 01 · notebook ilustrativo */
.sv2-vis-web img
{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 28px 48px -32px rgba(2, 33, 76, .6);
}

/* 02 · sistema a medida sobre panel azul profundo */
.sv2-dg
{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 30rem;
  border-radius: 24px;
  background: radial-gradient(90% 90% at 50% 40%, #0B2F63, var(--deep) 75%);
  box-shadow: 0 28px 48px -32px rgba(2, 33, 76, .7);
}
.sv2-lin { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv2-lin path
{
  fill: none;
  stroke: rgba(255, 255, 255, .42);
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.sv2-lin circle { fill: none; vector-effect: non-scaling-stroke; }
.sv2-lin .r1 { stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.sv2-lin .r2 { stroke: rgba(255, 255, 255, .09); stroke-width: 1.5; }
.sv2-lin .d { stroke: none; }
.sv2-lin .d1 { fill: #7DB4FF; }
.sv2-lin .d2 { fill: #86EFAC; }
.sv2-lin .d3 { fill: #C4B5FD; }
.sv2-lin .d4 { fill: #FDBA74; }
.sv2-n
{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 7.5rem;
  translate: -50% -50%;
  text-align: center;
}
.sv2-n b { font-size: .875rem; line-height: 1.25; font-weight: 600; color: #FFFFFF; }
.sv2-n .pf-ic
{
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--pv-d);
  background: rgba(255, 255, 255, .08);
  color: var(--pv-d);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .04);
}
.sv2-n .pf-ic .mi { font-size: 1.75rem; }
.sv2-centro .pf-ic
{
  width: 5rem;
  height: 5rem;
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: var(--deep);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .12), 0 0 0 18px rgba(255, 255, 255, .05);
}
.sv2-centro .pf-ic .mi { font-size: 2.5rem; }
.sv2-centro b { font-size: 1rem; }

/* 03 · teléfono con interfaz ilustrativa */
.sv2-vis-moviles { padding: clamp(1rem, 3vw, 1.5rem); border-radius: 24px; background: var(--alt); }
.sv2-mov
{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 24rem;
}
.sv2-ph
{
  position: relative;
  width: min(54%, 13rem);
  aspect-ratio: 9 / 19;
  padding: 7px;
  border-radius: 2.25rem;
  background: #0B1B33;
  box-shadow: 0 34px 50px -30px rgba(2, 33, 76, .75), inset 0 0 0 2px #2A3A55;
}
.sv2-ph .b { position: absolute; width: 3px; border-radius: 2px; background: #2A3A55; }
.sv2-ph .b1 { left: -3px; top: 18%; height: 7%; }
.sv2-ph .b2 { left: -3px; top: 28%; height: 11%; }
.sv2-ph .b3 { right: -3px; top: 24%; height: 15%; }
.sv2-ph .pant
{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: .5rem .5rem .6rem;
  overflow: hidden;
  border-radius: 1.75rem;
  background: #F4F7FB;
}
.sv2-ph .isla { align-self: center; width: 28%; height: .75rem; margin-top: .1rem; border-radius: 999px; background: #0B1B33; }
.sv2-ph .top { display: flex; align-items: center; justify-content: space-between; padding: 0 .25rem; }
.sv2-ph .top i { width: 1.25rem; height: .3rem; border-radius: 999px; background: #C5D0E0; }
.sv2-ph .top b { width: .9rem; height: .9rem; border-radius: 50%; background: #005DCA; }
.sv2-ph .mapa
{
  flex: none;
  height: 34%;
  overflow: hidden;
  border-radius: 12px;
  background: #E3EBF6;
}
.sv2-ph .mapa svg { display: block; width: 100%; height: 100%; }
.sv2-ph .mapa path { fill: none; vector-effect: non-scaling-stroke; }
.sv2-ph .mapa .c1 { stroke: #FFFFFF; stroke-width: 7; }
.sv2-ph .mapa .c2 { stroke: #FFFFFF; stroke-width: 5; }
.sv2-ph .mapa .ruta { stroke: #267B3D; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 0; }
.sv2-ph .mapa .pin { fill: #FFFFFF; stroke: #267B3D; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sv2-ph .mapa .pin2 { fill: #FD9426; stroke: #FFFFFF; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sv2-ph .hoja { display: grid; gap: .4rem; flex: 1; align-content: start; }
.sv2-ph .it
{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .5rem;
  align-items: center;
  padding: .45rem .5rem;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 6px 12px -10px rgba(2, 33, 76, .5);
}
.sv2-ph .it i { grid-row: span 2; width: .8rem; height: .8rem; border-radius: 50%; }
.sv2-ph .it .d1 { background: #267B3D; }
.sv2-ph .it .d2 { background: #FD9426; }
.sv2-ph .it .d3 { background: #005DCA; }
.sv2-ph .it u { display: block; height: .28rem; border-radius: 999px; background: #C5D0E0; text-decoration: none; }
.sv2-ph .it u + u { width: 55%; }
.sv2-ph .nav { display: flex; justify-content: space-around; padding-top: .25rem; }
.sv2-ph .nav i { width: 1.1rem; height: .3rem; border-radius: 999px; background: #C5D0E0; }
.sv2-ph .nav .on { background: #005DCA; }
.sv2-chip
{
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem .5rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 14px 24px -16px rgba(2, 33, 76, .55);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink);
}
.sv2-chip .mi
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--pv-s);
  color: #FFFFFF;
  font-size: 1.25rem;
}
.sv2-chip.c1 { left: 0; top: 14%; }
.sv2-chip.c2 { right: 0; bottom: 14%; }

/* 04 · tienda online conceptual */
.sv2-eco { display: grid; gap: 1.25rem; }
.sv2-shop
{
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 28px 48px -34px rgba(2, 33, 76, .6);
}
.sv2-shop .bar
{
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--alt);
}
.sv2-shop .bar i { width: .5rem; height: .5rem; border-radius: 50%; background: #CBD3DF; }
.sv2-shop .bar span { flex: 1; height: .5rem; margin-left: .5rem; border-radius: 999px; background: #DCE3EC; }
.sv2-shop .top { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.sv2-shop .top b { width: 4.5rem; height: 1rem; border-radius: 5px; background: #005DCA; }
.sv2-shop .top .q
{
  display: flex;
  align-items: center;
  flex: 1;
  height: 1.75rem;
  padding-inline: .5rem;
  border-radius: 999px;
  background: var(--alt);
  color: #8A94A6;
}
.sv2-shop .top .q .mi { font-size: 1.125rem; }
.sv2-shop .cart { position: relative; display: inline-flex; color: var(--deep); }
.sv2-shop .cart .mi { font-size: 1.5rem; }
.sv2-shop .cart em
{
  position: absolute;
  top: -.35rem;
  right: -.45rem;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #FD9426;
  color: #02214C;
  font-size: .625rem;
  font-style: normal;
  font-weight: 700;
}
.sv2-shop .cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .875rem; padding: .25rem 1rem 1rem; }
.sv2-shop .prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.sv2-shop .p { display: grid; gap: .35rem; }
.sv2-shop .p .img
{
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pv-s) 12%, var(--card));
  color: var(--pv-s);
}
.sv2-shop .p .img .mi { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.sv2-shop .p u { display: block; height: .32rem; border-radius: 999px; background: #D5DCE6; text-decoration: none; }
.sv2-shop .p u + u { width: 60%; }
.sv2-shop .p em { display: block; width: 55%; height: .8rem; margin-top: .15rem; border-radius: 999px; background: var(--pv-s); }
.sv2-shop .carro
{
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: .75rem;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--alt);
}
.sv2-shop .carro b { display: block; width: 55%; height: .4rem; border-radius: 999px; background: #B7C2D3; }
.sv2-shop .carro .l { display: flex; align-items: center; gap: .4rem; }
.sv2-shop .carro .l .mi { font-size: 1.25rem; color: #546E7A; }
.sv2-shop .carro .l u { flex: 1; height: .3rem; border-radius: 999px; background: #D5DCE6; text-decoration: none; }
.sv2-shop .pagar
{
  display: grid;
  place-items: center;
  margin-top: .25rem;
  padding: .35rem;
  border-radius: 999px;
  background: #267B3D;
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 700;
}
.sv2-eco .flujo
{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv2-eco .flujo li
{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  text-align: center;
}
.sv2-eco .flujo b { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.sv2-eco .flujo .pf-ic
{
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--pv-s);
  background: var(--card);
  color: var(--pv-s);
}
.sv2-eco .flujo li:not(:last-child)::after
{
  content: "chevron_right";
  font-family: 'Material Icons Round', 'Material Icons';
  position: absolute;
  top: .7rem;
  right: -.95rem;
  font-size: 1.25rem;
  color: var(--muted);
}

/* 05 · diagrama de la landing de Integración (reutilizado) */
.sv2-vis-integracion .dg { width: 100%; max-width: 36rem; margin-inline: auto; }

/* ---------- Franja complementaria de infraestructura (secundaria) ---------- */
.sv2-infra { padding-block: 1.5rem; background: var(--card); border-top: 1px solid var(--line-soft); }
.sv2-infra-in { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sv2-infra-in p { flex: 1 1 22rem; margin: 0; font-size: .9375rem; color: var(--body); }
.sv2-infra-in .pf-ic { width: 2.5rem; height: 2.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px)
{
  .sv2-in { grid-template-columns: 1fr; }
  .sv2-inv .sv2-vis { order: 0; }
  .sv2-tx { max-width: none; }
  .sv2-dg { max-height: none; aspect-ratio: 1 / 1; }
}
@media (max-width: 560px)
{
  .sv2-caps { grid-template-columns: 1fr; }
  .sv2-num { display: none; }
  .sv2-n { width: 5.75rem; }
  .sv2-n b { font-size: .75rem; }
  .sv2-n .pf-ic { width: 2.75rem; height: 2.75rem; }
  .sv2-n .pf-ic .mi { font-size: 1.5rem; }
  .sv2-centro .pf-ic { width: 3.75rem; height: 3.75rem; }
  .sv2-centro .pf-ic .mi { font-size: 1.875rem; }
  .sv2-mov { min-height: 21rem; }
  .sv2-ph { width: min(60%, 11.5rem); }
  .sv2-chip { font-size: .6875rem; padding: .375rem .625rem .375rem .375rem; }
  .sv2-chip .mi { width: 1.625rem; height: 1.625rem; font-size: 1rem; }
  .sv2-shop .cuerpo { grid-template-columns: 1fr; }
  .sv2-shop .carro { display: none; }
  .sv2-eco .flujo { gap: .375rem; }
  .sv2-eco .flujo b { font-size: .6875rem; }
}

/* Ajuste Fase A: franja de introducción más compacta (que no parezca un segundo hero) */
.sv2-intro .h2 { max-width: none; }
.sv2-intro .lead { max-width: 46rem; }
.wrap.sv2-intro-in { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 60rem; }
.wrap.sv2-intro-in
{
  width: min(60rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ==========================================================================================================
   CIERRE VISUAL (lanzamiento): fondos blanco/azul profundo alternados, ícono a la izquierda del título, sin numeración ni leyendas,
   curvas con paquetes de datos, banda 05 con el diagrama claro de Integración y cierre con el formulario de Sender
   ========================================================================================================== */
.sv2-intro, .sv2-band, #cierre { scroll-margin-top: calc(var(--nav-h, 4rem) + .5rem); }
.sv2-th { display: flex; align-items: center; gap: 1rem; }
.sv2-th .pv-disc { width: 3.25rem; height: 3.25rem; }
.sv2-th .pv-disc .mi { font-size: 1.75rem; }
.sv2-h3 { margin: 0; }
.sv2-f-d .sv2-th .pv-disc { box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); }
.sv2-f-d .sv2-h3 { color: #FFFFFF; }
.sv2-num { display: none; }

/* Sistema a medida: sin panel propio (la banda ya es azul profundo), curvas y paquetes de datos */
.sv2-dg-sw { background: none; box-shadow: none; aspect-ratio: 1 / 1; max-height: 31rem; margin-inline: auto; }
.sv2-lin path { stroke: rgba(255, 255, 255, .45); stroke-width: 1.6; stroke-dasharray: none; }
.sv2-lin { overflow: visible; }
.sv2-lin.pausa .dg-mov { visibility: hidden; }
.sv2-n .pv-disc { width: 3.5rem; height: 3.5rem; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
.sv2-n .pv-disc .mi { font-size: 1.75rem; }
.sv2-centro .pv-disc { width: 5rem; height: 5rem; background: #FFFFFF; color: var(--deep); box-shadow: 0 0 0 8px rgba(255, 255, 255, .12), 0 0 0 18px rgba(255, 255, 255, .05); }
.sv2-centro .pv-disc .mi { font-size: 2.5rem; }
@media (prefers-reduced-motion: reduce) { .sv2-lin .dg-mov { display: none; } }
:root[data-motion="off"] .sv2-lin .dg-mov { display: none; }

/* Comercio electrónico sobre azul profundo: la tienda es una ventana clara; el flujo se invierte */
.sv2-f-d .sv2-eco .flujo b { color: #FFFFFF; }
.sv2-f-d .sv2-eco .flujo li:not(:last-child)::after { color: rgba(255, 255, 255, .65); }
.sv2-eco .flujo .pv-disc { width: 2.75rem; height: 2.75rem; }
.sv2-eco .flujo .pv-disc .mi { font-size: 1.5rem; }
.sv2-eco .flujo li:not(:last-child)::after { top: .65rem; }

/* Integración sobre blanco: diagrama dg-sol de la landing */
.sv2-vis-integracion .dg { width: 100%; max-width: 34rem; margin-inline: auto; }

/* Franja de infraestructura y cierre */
.sv2-infra .pv-disc { width: 2.5rem; height: 2.5rem; }
.sv2-infra .pv-disc .mi { font-size: 1.375rem; }
.sv2-reunion { margin-top: 1.25rem; }
.sv2-cierre .sd-cierre-in { align-items: start; }
@media (max-width: 560px)
{
  .sv2-th { gap: .75rem; }
  .sv2-th .pv-disc { width: 2.75rem; height: 2.75rem; }
  .sv2-n .pv-disc { width: 2.75rem; height: 2.75rem; }
  .sv2-n .pv-disc .mi { font-size: 1.5rem; }
  .sv2-centro .pv-disc { width: 3.75rem; height: 3.75rem; }
  .sv2-centro .pv-disc .mi { font-size: 1.875rem; }
}

/* Pantalla del teléfono = archivo reemplazable (assets/servicios/aplicaciones-moviles/captura-dynamic-fleet.webp) */
.sv2-ph .pant-img { padding: 0; gap: 0; background: #F4F7FB; }
.sv2-ph .pant-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Contraste en modo oscuro del kicker del cierre (componente de Sender), medido con axe */
:root[data-mode="dark"] .sv2-cierre .sd-cierre-tx .kicker { color: var(--on-deep-link, #7DB4FF); }
@media (prefers-color-scheme: dark)
{
  :root[data-mode="auto"] .sv2-cierre .sd-cierre-tx .kicker { color: var(--on-deep-link, #7DB4FF); }
}

/* Nodo central «Sistema a medida»: isotipo oficial de PM Digital centrado en el disco (original sin deformar) */
.sv2-centro .pv-disc .sv2-iso { display: block; width: 58%; height: 58%; object-fit: contain; }