/* ============================================================
   Soluciones para tu industria (inicio, antes de los comentarios)
   Listado con línea de progreso a la izquierda e imagen a la derecha.
   Medidas tomadas del video de referencia (grabado a 1265 × 539 px):
   títulos de 34 px, descripción de 16/26 px, imagen con esquinas de
   28 px y flechas de 46 px a 32 px del borde. Todo va bajo .soluciones.
   ============================================================ */
.soluciones {
  --sol-fondo: #0a0a0a;
  --sol-blanco: #fafafa;
  --sol-gris: #646464;
  --sol-desc: #a1a1a1;
  --sol-num: #595959;
  --sol-linea: #262626;
  --sol-division: #161616;
  /* Las medidas crecen con el ancho de la pantalla: a 1274 px coinciden
     con el video y en pantallas más anchas la sección no deja márgenes
     vacíos a los lados. */
  --sol-lado: max(var(--gutter, 16px), 5vw);
  --sol-radio: clamp(28px, 2.2vw, 38px);
  --sol-sangria: clamp(24px, 1.9vw, 34px);  /* de la línea vertical a los números */
  --sol-col-num: clamp(31px, 2.45vw, 44px); /* de los números a los títulos */
  --sol-alto-item: clamp(20px, min(4.4vh, 2.5vw), 40px);
  --sol-bajada: clamp(24px, 6vh, 60px);     /* la lista parte bajo el borde de la imagen */
  --sol-flecha: clamp(46px, 3.6vw, 60px);
  --sol-flecha-borde: clamp(32px, 2.5vw, 44px);
  --sol-cambio: 0.3s;
  --sol-avance: 5000ms;
  position: relative;
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--sol-fondo);
  color: var(--sol-blanco);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.sol {
  width: min(100% - var(--sol-lado) * 2, 1640px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 454fr) minmax(0, 625fr);
  grid-template-areas:
    "cab cab"
    "lista media";
  column-gap: clamp(40px, 5vw, 100px);
  row-gap: clamp(8px, 0.65vw, 12px);
}

/* ----- Encabezado ----- */
.sol__cabecera {
  grid-area: cab;
  padding-left: var(--sol-sangria);
}
.soluciones .sol__titulo {
  font-family: inherit;
  font-size: clamp(34px, 3.8vw, 68px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--sol-blanco);
}
.sol__etiqueta {
  margin-top: clamp(8px, 0.65vw, 12px);
  font-size: clamp(10px, 0.8vw, 14px);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #bdbdbd;
}

/* ----- Listado ----- */
.sol__lista {
  grid-area: lista;
  align-self: start;
  position: relative;
  margin-top: var(--sol-bajada);
  padding-left: var(--sol-sangria);
}
.sol__lista::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sol-linea);
}
.sol__item {
  position: relative;
  padding-bottom: calc(var(--sol-alto-item) - 2px);
  border-bottom: 1px solid var(--sol-division);
}
.js .sol__item:not(.is-active) {
  cursor: pointer;
}
.sol__item:last-child {
  border-bottom: 0;
}
/* Tramo blanco de la línea: sigue el alto del servicio activo y, con
   avance automático, se llena en el tiempo que dura cada servicio. */
.sol__barra {
  position: absolute;
  left: calc(var(--sol-sangria) * -1);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sol-blanco);
  transform: scaleY(0);
  transform-origin: top;
}
.sol__item.is-active .sol__barra {
  transform: scaleY(1);
}
.soluciones.is-auto .sol__item.is-active .sol__barra {
  animation: sol-progreso var(--sol-avance) linear forwards;
}
.soluciones.is-auto.is-pausado .sol__item.is-active .sol__barra {
  animation-play-state: paused;
}
@keyframes sol-progreso {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.soluciones .sol__nombre {
  font: inherit;
  letter-spacing: normal;
}
.sol__boton {
  display: grid;
  grid-template-columns: var(--sol-col-num) minmax(0, 1fr);
  align-items: start;
  width: 100%;
  padding-top: var(--sol-alto-item);
  text-align: left;
  color: var(--sol-gris);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--sol-cambio) ease;
}
.sol__boton:focus-visible {
  outline-offset: 2px;
}
.sol__num {
  margin-top: 0.7em;
  font-size: clamp(10.5px, 0.82vw, 14.5px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sol-num);
  transition: color var(--sol-cambio) ease;
}
.sol__texto {
  font-size: clamp(24px, 2.7vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.sol__item.is-active .sol__boton {
  color: var(--sol-blanco);
  cursor: default;
}
.sol__item.is-active .sol__num {
  color: var(--sol-desc);
}
@media (hover: hover) {
  .sol__item:hover .sol__boton {
    color: var(--sol-blanco);
  }
}

/* Descripción: se despliega solo la del servicio activo (sin JS, todas). */
.sol__panel {
  display: grid;
  grid-template-rows: 1fr;
  padding-left: var(--sol-col-num);
}
.sol__panel > div {
  min-height: 0;
  overflow: hidden;
}
.sol__desc {
  max-width: 24em;
  padding: 0.375em 0 0.5em;
  font-size: clamp(16px, 1.26vw, 22px);
  line-height: 1.625;
  color: var(--sol-desc);
}
.js .sol__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--sol-cambio) ease,
    visibility 0s var(--sol-cambio);
}
.js .sol__item.is-active .sol__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--sol-cambio) ease,
    visibility 0s;
}
.js .sol__desc {
  opacity: 0;
  transition: opacity var(--sol-cambio) ease;
}
.js .sol__item.is-active .sol__desc {
  opacity: 1;
}

/* ----- Imagen ----- */
.sol__media {
  grid-area: media;
  position: relative;
  min-height: 380px;
}
.sol__marco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 round var(--sol-radio));
  border-radius: var(--sol-radio);
  background: #111;
}
.sol__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  background: #111;
}
.sol__foto.is-active,
.sol__foto.is-saliendo {
  visibility: visible;
}
.sol__foto.is-active {
  z-index: 1;
}
.sol__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sol__pendiente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 40%, #1a1a1a, #0e0e0e);
  color: #6f6f6f;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.sol__pendiente small {
  font-size: 11px;
  color: #4f4f4f;
  font-family: ui-monospace, Consolas, monospace;
}

/* Flechas: esquina inferior derecha de la imagen */
.sol__flechas {
  position: absolute;
  right: var(--sol-flecha-borde);
  bottom: var(--sol-flecha-borde);
  z-index: 2;
  display: none;
  gap: clamp(12px, 0.95vw, 16px);
}
.js .sol__flechas {
  display: flex;
}
.sol__flecha {
  display: grid;
  place-items: center;
  width: var(--sol-flecha);
  height: var(--sol-flecha);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--sol-blanco);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease;
}
.sol__flecha svg {
  width: 43%;
  height: 43%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sol__flecha:focus-visible {
  border-radius: 50%;
}
@media (hover: hover) {
  .sol__flecha:hover {
    background: rgba(28, 28, 28, 0.92);
  }
}

/* ----- Móvil: una columna (encabezado, imagen, listado) ----- */
@media (max-width: 899px) {
  .soluciones {
    --sol-radio: 20px;
    --sol-sangria: 18px;
    --sol-col-num: 26px;
    --sol-alto-item: 18px;
    --sol-flecha: 46px;
    --sol-flecha-borde: 14px;
    padding-block: 64px 72px;
  }
  .sol {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cab"
      "media"
      "lista";
    row-gap: 0;
  }
  .sol__cabecera {
    padding-left: 0;
    margin-bottom: 24px;
  }
  .soluciones .sol__titulo {
    font-size: clamp(30px, 8.4vw, 40px);
  }
  .sol__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .sol__flechas {
    gap: 10px;
  }
  .sol__lista {
    margin-top: 20px;
  }
  .sol__texto {
    font-size: clamp(22px, 6.4vw, 28px);
  }
  .sol__desc {
    font-size: 15px;
    line-height: 1.6;
  }
}
@media (max-width: 380px) {
  .soluciones {
    --sol-flecha: 44px;
  }
}

/* ----- Movimiento reducido: cambios instantáneos, sin avance automático ----- */
@media (prefers-reduced-motion: reduce) {
  .soluciones {
    --sol-cambio: 0s;
  }
  .soluciones .sol__barra {
    animation: none !important;
  }
}