/* ==========================================================================
   Detalle de una solución — /soluciones/<slug>/
   (templates/solucion-detalle.php; se encola solo en esta vista).

   Los dos primeros bloques de la página NO se visten aquí: el hero de nombre es
   el componente compartido (secciones.css, .vhero-nombre) y el banner reusa
   literalmente el de Nosotros (.vnos-banner). Esta hoja solo trae lo propio de
   la vista: el bloque de copy a sangre completa (.vsold) y el menú a las otras
   soluciones (.vsolm).

   Se anima únicamente transform/opacity (§7.5). La variable --acento la fija la
   plantilla en <main> (color de la solución) y cada tarjeta del menú la
   redefine con el de la suya.
   ========================================================================== */

/* El banner de esta página es su LCP y va inmediatamente después del hero de
   nombre. La franja de tinta le sirve de piso al arte mientras carga y evita una
   costura clara si la imagen no llena la caja. Nació para separar el hero gris
   claro del banner; el hero pasó a oscuro (2026-09-01) y la franja se queda
   porque ahora encadena hero → banner → copy en el mismo tono. */
.vnos-banner--sol {
  background: var(--ink, #0a0a0a);
}

/* ==========================================================================
   3. Copy del servicio (.vsold) — a sangre completa.
   La jerarquía la hace el contraste de escala: antetítulo diminuto → frase de
   apertura enorme → tira gráfica → párrafos a cuerpo de lectura descolgados a
   la derecha. Sin retícula de tarjetas y sin caja centrada: el bloque ocupa el
   ancho de la pantalla, como pidió la agencia.
   ========================================================================== */
.vsold {
  padding: clamp(4rem, 12vh, 9rem) var(--pad) clamp(3rem, 9vh, 7rem);
  background: var(--ink, #0a0a0a);
  color: var(--paper, #fff);
}

/* -- Antetítulo: número + regla + nombre del servicio en versales ---------- */
.vsold__eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  margin: 0 0 clamp(1.75rem, 5vh, 3.5rem);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
}
.vsold__num {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--acento, var(--rojo));
}
.vsold__regla {
  flex: 0 0 auto;
  width: clamp(2rem, 7vw, 6rem);
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

/* -- Frase de apertura: el elemento de mayor peso visual de la página ------
   Peso 300 a este cuerpo (no 700): a 5rem el trazo fino se lee como titular
   editorial y deja que el tamaño haga el trabajo. `text-wrap: balance` reparte
   los renglones para que el último no quede con una sola palabra. */
.vsold__lead {
  margin: 0;
  max-width: 28ch; /* con el bloque a sangre completa, la medida la pone el texto */
  font-size: clamp(1.9rem, 5vw, 4.6rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* Escalón por longitud del copy. La plantilla marca cada lead como corto (por
   defecto), medio (>=90 caracteres) o largo (>=150) según lo que escribió la
   agencia. Sin esto, "Nuestra presencia en 8 oficinas locales…" —160
   caracteres— salía a 4.6rem en siete renglones y se comía el viewport entero,
   mientras que "Desarrollamos estrategias…" —55— se quedaba corto de presencia.
   La medida se ensancha a la vez que el cuerpo baja: así los tres escalones
   caen en un bloque de cuatro o cinco renglones. */
@media (min-width: 1100px) {
  .vsold__lead {
    max-width: 20ch;
    font-size: clamp(2.6rem, 4.6vw, 4.8rem);
  }
  .vsold__lead--medio {
    max-width: 32ch;
    font-size: clamp(2rem, 3.4vw, 3.5rem);
  }
  .vsold__lead--largo {
    max-width: 38ch;
    font-size: clamp(1.7rem, 2.7vw, 2.8rem);
  }
}
/* `balance` reparte bien tres renglones; a partir de cinco los navegadores lo
   ignoran o dejan la última línea muy corta. Para los leads largos, `pretty`
   (que solo cuida la viuda) da un bloque más parejo. */
.vsold__lead--medio,
.vsold__lead--largo {
  text-wrap: pretty;
}

/* -- Tira gráfica de la enumeración (perfiles del equipo, las 8 oficinas) ---
   Cada ítem es una celda con hairline superior y su número: es la escala
   intermedia entre el lead y los párrafos, y lo que impide que el bloque se lea
   como dos tamaños de texto y ya. */
.vsold__tira {
  margin-top: clamp(3rem, 9vh, 6.5rem);
}
.vsold__tira-tit {
  margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
}
/* El número de columnas lo fija la plantilla en --cols a partir de cuántos
   ítems trae la lista (6 → 6 columnas, 8 → 4), no `auto-fit`: con columnas
   automáticas las ocho oficinas caían 6 + 2 y la fila corta dejaba su hairline
   cortado a media pantalla. Con un divisor exacto, todas las filas van llenas.
   Los dos recuentos posibles son pares, así que en los tramos angostos dos
   columnas siguen dando filas completas. */
.vsold__tira-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 1100px) {
  .vsold__tira-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .vsold__tira-lista {
    grid-template-columns: 1fr;
  }
}
.vsold__tira-item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: clamp(0.9rem, 2.2vh, 1.4rem) 1rem clamp(0.9rem, 2.2vh, 1.4rem) 0;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}
.vsold__tira-num {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--acento, var(--rojo));
}
.vsold__tira-txt {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* -- Párrafos: columna estrecha descolgada a la derecha --------------------
   Descolgarla deja a la izquierda el aire que el lead necesita para respirar y
   crea la diagonal de lectura (antetítulo arriba-izq → lead → cuerpo abajo-der)
   que rompe el bloque plano. */
.vsold__cuerpo {
  margin-top: clamp(2.5rem, 8vh, 6rem);
  display: grid;
  gap: 1.25rem;
  max-width: 62ch;
}
@media (min-width: 900px) {
  .vsold__cuerpo {
    /* Descolgada a la derecha, pero pegada al lead: con el margen anterior
       (hasta 6rem) los copys de un solo párrafo dejaban medio viewport vacío
       entre una cosa y la otra, y la diagonal de lectura se perdía. */
    margin-top: clamp(2rem, 5vh, 3.5rem);
    margin-left: auto;
    margin-right: clamp(0rem, 6vw, 8rem);
  }
}
.vsold__p {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.72;
  color: rgb(255 255 255 / 0.74);
}
/* El primer párrafo sube medio escalón de tamaño y peso: es el puente entre el
   lead y el cuerpo, no un párrafo más. */
.vsold__p--primero {
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #fff;
}
/* Realce: la frase clave del copy, en blanco pleno y con la regla de acento
   trazada debajo. Es marcado sobre texto que ya existe, no texto nuevo. */
.vsold__hi {
  font-weight: 600;
  color: #fff;
  background-image: linear-gradient(var(--acento, var(--rojo)), var(--acento, var(--rojo)));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 0.08em;
}

/* ==========================================================================
   4. Menú a las otras soluciones (.vsolm) — tira de tarjetas a sangre completa.
   Hover: la foto se acerca, el velo se levanta, el número aparece, el nombre se
   corre y la regla de acento se traza. Todo transform/opacity, sin JS.
   ========================================================================== */
.vsolm {
  padding: clamp(3.5rem, 10vh, 8rem) var(--pad) clamp(4rem, 12vh, 9rem);
  background: var(--ink-2, #15151c);
  color: var(--paper, #fff);
}
.vsolm .vsec__h2 {
  --acento: var(--rojo);
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
}

.vsolm__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.75rem);
}
.vsolm__item {
  min-width: 0;
}

/* Los cuatro estados llevan `color: inherit` explícito, no solo el de reposo:
   GeneratePress pinta `a:hover` con el color de enlace del Customizer (#222) y
   el nombre de la tarjeta —que hereda del <a>— se volvía gris oscuro sobre el
   lienzo de tinta justo al pasar el cursor, que es cuando tiene que destacar. */
.vsolm__card,
.vsolm__card:hover,
.vsolm__card:focus,
.vsolm__card:active,
.vsolm__card:visited {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.vsolm__card:focus-visible {
  outline: 2px solid var(--acento, var(--rojo));
  outline-offset: 6px;
}

/* Marco de la miniatura. `isolation` + overflow para que el acercamiento de la
   foto quede recortado dentro de la tarjeta. */
.vsolm__marco {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  background: #000;
}
.vsolm__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Arranca ligeramente acercada para que al hover el movimiento sea de
     acercamiento y no de descubrir bordes. */
  transform: scale(1.02);
  transition: transform 0.75s var(--ease-entrada, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Velo de tinta: uniforma seis fotos de luminancia muy distinta y hace legible
   el número. Se levanta al hover, así la tarjeta "se enciende". */
.vsolm__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(10 10 10 / 0.72) 0%,
    rgb(10 10 10 / 0.28) 55%,
    rgb(10 10 10 / 0.35) 100%
  );
  opacity: 1;
  transition: opacity 0.55s ease;
}
/* Número grande en trazo: la firma gráfica de la tarjeta. Entra al hover. */
.vsolm__num {
  position: absolute;
  z-index: 2;
  left: 0.7rem;
  bottom: 0.4rem;
  font-size: clamp(2.6rem, 4.5vw, 4.6rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.75);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease,
    transform 0.6s var(--ease-entrada, cubic-bezier(0.16, 1, 0.3, 1));
}

.vsolm__pie {
  display: block;
  padding-top: 0.9rem;
}
/* Tick de acento: el mismo gesto que abre cada titular de sección
   (.vsec__h2::before). Nace corto —presente en reposo, que es lo que le da a la
   tarjeta su firma gráfica— y al hover se traza a todo el ancho. */
.vsolm__regla {
  display: block;
  height: 2px;
  background: var(--acento, var(--rojo));
  transform: scaleX(0.22);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-entrada, cubic-bezier(0.16, 1, 0.3, 1));
}
.vsolm__nombre {
  display: block;
  margin-top: 0.7rem;
  /* Dos renglones reservados aunque el nombre ocupe uno: "Performance,
     E-commerce y Marketplaces" es el único que parte en dos y sin esto su
     subtítulo se descolgaba y rompía la línea de base de toda la tira. */
  min-height: 2.3em;
  font-size: clamp(0.95rem, 1.15vw, 1.22rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  transition: transform 0.5s var(--ease-entrada, cubic-bezier(0.16, 1, 0.3, 1));
}
.vsolm__sub {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.76rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.52);
  transition:
    color 0.4s ease,
    transform 0.5s var(--ease-entrada, cubic-bezier(0.16, 1, 0.3, 1)) 0.04s;
}

/* Estado de hover/foco. Se agrupa aquí para leer el efecto completo de una vez.
   Solo se activa donde hay puntero fino: en táctil, `:hover` se queda pegado
   tras el tap y la tarjeta quedaba "encendida" hasta tocar otra cosa. */
@media (hover: hover) and (pointer: fine) {
  .vsolm__card:hover .vsolm__img {
    transform: scale(1.09);
  }
  .vsolm__card:hover .vsolm__velo {
    opacity: 0.45;
  }
  .vsolm__card:hover .vsolm__num {
    opacity: 1;
    transform: translateY(0);
  }
  .vsolm__card:hover .vsolm__regla {
    transform: scaleX(1);
  }
  .vsolm__card:hover .vsolm__nombre,
  .vsolm__card:hover .vsolm__sub {
    transform: translateX(6px);
  }
  .vsolm__card:hover .vsolm__sub {
    color: rgb(255 255 255 / 0.8);
  }
  /* Los hermanos se atenúan: el hover no solo destaca una tarjeta, apaga el
     resto, que es lo que da la sensación de índice vivo. */
  .vsolm__grid:hover .vsolm__item {
    transition: opacity 0.45s ease;
  }
  .vsolm__grid:hover .vsolm__item:not(:hover) {
    opacity: 0.42;
  }
}
/* Sin puntero fino (táctil) la regla de acento se queda dibujada: la tarjeta
   necesita su remate gráfico aunque nunca haya hover. */
@media not all and (hover: hover) {
  .vsolm__regla {
    transform: scaleX(1);
  }
  .vsolm__num {
    opacity: 0.85;
    transform: none;
  }
}
/* Foco de teclado: el mismo realce que el hover, sin depender del puntero. */
.vsolm__card:focus-visible .vsolm__regla {
  transform: scaleX(1);
}
.vsolm__card:focus-visible .vsolm__num {
  opacity: 1;
  transform: translateY(0);
}

/* Pie del menú: vuelta al slider completo. */
.vsolm__todas {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(2rem, 6vh, 3.5rem);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.35s ease;
}
.vsolm__todas i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.45s var(--ease-entrada, cubic-bezier(0.16, 1, 0.3, 1));
}
.vsolm__todas:hover,
.vsolm__todas:focus-visible {
  color: #fff;
  border-color: var(--rojo);
}
.vsolm__todas:hover i,
.vsolm__todas:focus-visible i {
  transform: translate(4px, -4px);
}

/* ==========================================================================
   Responsive. Cinco tarjetas en fila solo tienen sentido con ancho de sobra;
   por debajo se reparten en tres, dos y —en móvil— una tira horizontal que se
   arrastra, para que no se conviertan en cinco pantallazos de scroll.
   ========================================================================== */
@media (max-width: 1180px) {
  .vsolm__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 780px) {
  .vsolm__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  /* Tira arrastrable: cinco tarjetas apiladas serían media pantalla de scroll
     antes del pie. `scroll-snap` local (no toca el documento) para que cada
     tarjeta encaje al soltar. El margen negativo la saca a sangre completa y el
     padding devuelve el margen de la primera y la última. */
  .vsolm__grid {
    display: flex;
    gap: 0.85rem;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Sin esto el snapport es la caja de borde y el navegador arranca la tira ya
       desplazada 25px para encajar la primera tarjeta contra el borde de la
       pantalla: el margen lateral se perdía y la tira no alineaba con el
       titular. `scroll-padding` mete el padding dentro del snapport. */
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .vsolm__grid::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .vsolm__item {
    flex: 0 0 62vw;
    scroll-snap-align: start;
  }
}

/* Estado estático digno: sin movimiento, la tarjeta ya nace con su regla y su
   número, y ni la foto ni el texto se desplazan. */
@media (prefers-reduced-motion: reduce) {
  .vsolm__img,
  .vsolm__num,
  .vsolm__regla,
  .vsolm__nombre,
  .vsolm__sub,
  .vsolm__todas i {
    transition: none;
    transform: none;
  }
  .vsolm__regla {
    transform: scaleX(0.22);
  }
  .vsolm__num {
    opacity: 0.85;
  }
}