/* ===========================================================
   INGFRAMEX — página de SOLUCIÓN, lenguaje visual 2026

   Refactor pedido por el cliente (mockup «soluciones-muestra»).
   Piloto: medicion_humedad_aceite_lubricacion_hidraulica.php

   Convive con industria-page.css y producto-page.css sin chocar:
   todo lleva prefijo .sol-. Las páginas que no se hayan migrado
   siguen usando el CSS viejo sin enterarse.

   Novedades respecto al lenguaje anterior:
     - Acento NARANJA junto al morado corporativo.
     - Antetítulos en versalitas sobre cada título de sección.
     - Títulos a dos tonos: segunda línea en naranja.
     - Numeración 01-07 como elemento gráfico.
     - Tarjetas en vez de listas con viñetas.
     - Carruseles con scroll-snap.

   DEGRADACIÓN SIN FOTO — importante:
   el mockup trae 12 huecos de imagen y hoy no existen casi
   ninguno. Cada bloque con imagen tiene su variante --sin-foto
   que NO deja un hueco vacío: reacomoda la caja o pinta un
   fondo de marca. Así la página se puede publicar hoy y mejora
   sola cuando lleguen las fotografías.
   =========================================================== */

:root {
  --sol-morado:      #5b1c64;
  --sol-morado-osc:  #3f1247;
  --sol-morado-prof: #290c2f;
  /* Morado aclarado. Se usa solo en la mitad izquierda del filete cuando el
     fondo de la seccion es morado: el #5b1c64 sobre #5b1c64 no se veria. */
  --sol-morado-luz:  #a86bb5;
  --sol-naranja:     #e2571f;
  --sol-naranja-osc: #c4471a;
  --sol-tinta:       #17111c;
  --sol-texto:       #2c2430;
  --sol-suave:       #6b6270;
  --sol-borde:       #e8e2ea;
  --sol-crema:       #faf7fb;
}

.sol-wrap {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------- Antetítulo y títulos de sección ---------- */

.sol-eyebrow {
  display: inline-block;
  background: var(--sol-morado);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 3px;
  margin-bottom: 20px;
}

.sol-eyebrow--naranja { background: var(--sol-naranja); }
/* El chip del panel morado va en pastilla y con filo, como en el mockup;
   los demas eyebrow del sitio siguen siendo rectangulos. */
.sol-eyebrow--claro {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 6px 15px;
}

/* Título a dos tonos: la segunda línea va en <span>. */
.sol-titulo {
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.18;
  color: var(--sol-texto);
  margin: 0 0 14px;
}

.sol-titulo span {
  display: block;
  color: var(--sol-naranja);
}

.sol-lead {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--sol-suave);
  margin: 0 0 34px;
  max-width: 62ch;
}

/* Sobre fondo oscuro */
.is-oscuro .sol-titulo { color: #fff; }
.is-oscuro .sol-lead   { color: rgba(255, 255, 255, 0.72); }

/* Filete superior que separa secciones, como en el mockup.

   RETRO DEL CLIENTE (2026-08-25): era naranja liso de 3px y pasa a BICOLOR
   —morado INGFRAMEX de la izquierda al centro, naranja del centro a la
   derecha— y mas grueso. El grosor se afino en tres pasadas de la misma
   retro: 3px originales -> 6px -> 10px -> 8px, que es el que quedo.

   Va como degradado de fondo y no como border-top porque un borde no admite
   dos colores. El corte es duro, no difuminado: los topes «0 50%» y «50% 100%»
   hacen que el cambio ocurra justo en el centro. Se pinta en la franja
   superior con background-size: 100% 8px y, como .sol-seccion tiene 76px de
   padding, ningun hijo lo tapa.

   OJO: las variantes de fondo usan background-COLOR y no el atajo background,
   porque el atajo borraria el degradado. Quien anada una variante nueva tiene
   que respetarlo.

   El color de la mitad izquierda sale de --filete-izq. Asi cada fondo lo
   ajusta sin repetir el degradado, y las tarjetas de dentro lo heredan. */
.sol-seccion {
  --filete-izq: var(--sol-morado);
  padding: 76px 0;
  background-color: #fff;
  background-image: linear-gradient(to right, var(--filete-izq) 0 50%, var(--sol-naranja) 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: 0 0;
}

.sol-seccion.is-crema  { background-color: var(--sol-crema); }
.sol-seccion.is-tinta  { background-color: var(--sol-tinta); }
/* Hoy ninguna seccion del piloto usa is-morado —el mockup no lo pide— pero la
   variante se deja definida y con su filete aclarado por si alguna de las 16
   paginas restantes la necesita. */
.sol-seccion.is-morado { background-color: var(--sol-morado); --filete-izq: var(--sol-morado-luz); }

/* ---------- Hero partido ---------- */

.sol-hero {
  /* El menú fijo mide 5.75rem; el hero arranca justo debajo. */
  margin-top: 5.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 27rem;
}

.sol-hero-media {
  background: var(--sol-tinta);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 30px;
}

/* Franja de credencial arriba a la izquierda. */
.sol-hero-credencial {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--sol-morado-prof);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 8px 16px;
}

/* Sin fotografía: en vez de un rectángulo vacío, una trama sutil
   de marca. Se ve intencional, no roto. */
.sol-hero-media--sin-foto {
  background-image:
    radial-gradient(circle at 78% 18%, rgba(226, 87, 31, 0.22), transparent 46%),
    linear-gradient(150deg, var(--sol-morado-prof) 0%, var(--sol-tinta) 70%);
}

.sol-hero-texto {
  background: linear-gradient(160deg, var(--sol-morado) 0%, var(--sol-morado-osc) 100%);
  color: #fff;
  padding: 58px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sol-hero-texto h1 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.16;
  margin: 0 0 16px;
  color: #fff;
}

.sol-hero-texto h1 em {
  font-style: normal;
  color: var(--sol-naranja);
}

.sol-hero-texto p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 30px;
  max-width: 46ch;
}

/* ---------- Botones ---------- */

.sol-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 14px 28px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all 0.22s ease;
}

.sol-btn--naranja {
  background: var(--sol-naranja);
  color: #fff;
}

.sol-btn--naranja:hover {
  background: var(--sol-naranja-osc);
  color: #fff;
}

.sol-btn--morado {
  background: var(--sol-morado);
  color: #fff;
}

.sol-btn--morado:hover {
  background: var(--sol-morado-osc);
  color: #fff;
}

.sol-btn--linea {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.sol-btn--linea:hover {
  background: #fff;
  border-color: #fff;
  color: var(--sol-morado);
}

/* ---------- Intro a dos columnas ---------- */

/* RETRO DEL CLIENTE (2026-08-25): la intro deja de ser texto + imagen y pasa
   a una sola columna, con el texto ocupando todo el ancho y en cuerpo mayor.
   Antes era 1.05fr / 1fr con la foto a la derecha. */
.sol-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

/* El cuerpo sube de 1rem a 1.2rem y la entradilla a 1.35rem. A este tamaño el
   renglón cae a unos 105 caracteres de ancho en pantalla grande: largo, pero
   es un texto de dos párrafos, no un artículo. Si al cliente le resulta
   incómodo de leer, la solución es una línea —max-width en el <p> o
   column-count: 2— y no volver a meter una imagen al lado. */
.sol-intro-texto p {
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--sol-texto);
  margin: 0 0 22px;
  max-width: 100%;
}

.sol-intro-texto p:first-of-type {
  font-size: 1.35rem;
  line-height: 1.62;
}

/* Negritas de la retro. Se marcan en tinta y no en morado a propósito: el
   morado del sitio es color de enlace y de título, y unas palabras moradas en
   medio de un párrafo se leen como si fueran clicables. */
.sol-intro-texto p strong {
  font-weight: 700;
  color: var(--sol-tinta);
}

.sol-intro-texto .sol-btn {
  margin-top: 6px;
}

/* ---------------------------------------------------------------
   .sol-intro-media queda SIN USO desde la retro del 2026-08-25: el
   cliente pidió retirar la imagen de la intro y dar todo el ancho al
   texto. No se borra porque este archivo es el molde de las 17 páginas
   de solución y la decisión podría revertirse o no aplicar a alguna.
   Si al terminar la fase ninguna página la usa, se puede eliminar
   junto con .sol-intro-media--sin-foto.
   --------------------------------------------------------------- */
.sol-intro-media {
  background: var(--sol-crema);
  border: 1px solid var(--sol-borde);
  border-radius: 14px;
  padding: 34px;
  text-align: center;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.sol-intro-media img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Sin foto: círculo degradado de marca detrás del botón. */
.sol-intro-media--sin-foto::before {
  content: "";
  position: absolute;
  width: 19rem;
  height: 19rem;
  right: -5rem;
  top: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 28, 100, 0.09), rgba(226, 87, 31, 0.05) 60%, transparent 72%);
}

.sol-intro-media > * { position: relative; }

.sol-intro-media p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--sol-suave);
  margin: 0;
  max-width: 34ch;
}

/* ---------- Bloque «por qué»: panel + numerados ---------- */

/* RETRO DEL CLIENTE (2026-08-25): dos columnas del MISMO ancho. Antes eran
   0.9fr / 1.1fr, con el panel morado estrecho y los siete puntos apretados a
   la derecha. Ahora el panel se lleva los puntos 01, 02 y 06 y las dos
   columnas pesan igual, como en el mockup. */
.sol-porque-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  /* stretch, no start: las dos columnas terminan a la misma altura. Lo pidio
     el cliente y ademas evita el escalon que quedaba cuando una era mas larga
     que la otra. */
  align-items: stretch;
}

/* Se quito el position: sticky que tenia el panel. Con tres puntos dentro ya
   es tan alto como la columna de al lado, y quedarse pegado al hacer scroll
   se veia raro. */
.sol-panel {
  background: linear-gradient(165deg, var(--sol-morado) 0%, var(--sol-morado-osc) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 38px 34px;
}

/* Solo la entrada del panel, no los parrafos de los puntos que ahora van
   dentro: por eso es una clase y no «.sol-panel p», que los alcanzaria. */
.sol-panel-lead {
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  color: #fff;
}

/* Puntos numerados. Una sola columna: al repartirse en dos bloques —tres
   dentro del panel morado y cuatro fuera— ya no hace falta la rejilla de dos
   que habia antes. */
.sol-numerados {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Las tarjetas de la derecha llenan el alto del panel morado: la lista ocupa
   todo el alto de su celda y grid-auto-rows 1fr reparte ese alto en partes
   iguales entre las tarjetas.

   Funciona en los dos sentidos: si el panel es mas alto, las tarjetas crecen;
   si las tarjetas suman mas, la fila crece y el panel se estira. Por eso no
   hay una altura fija en ninguna parte.

   Solo aplica a la lista de fuera; la del panel se queda como esta. */
.sol-numerados:not(.sol-numerados--panel) {
  height: 100%;
  grid-auto-rows: 1fr;
}

/* Tarjeta con filo lateral grueso, como en el mockup. */
.sol-num {
  background: #fff;
  border: 1px solid var(--sol-borde);
  border-left: 5px solid var(--sol-morado);
  border-radius: 10px;
  padding: 20px 22px;
  transition: box-shadow 0.22s ease;
}

.sol-num:hover {
  box-shadow: 0 8px 26px rgba(91, 28, 100, 0.08);
}

/* El mockup pasa de morado a naranja a mitad de la lista, igual que el filete
   bicolor de las secciones: los dos primeros puntos en morado y el resto en
   naranja. Con «n+3» la regla aguanta listas de cualquier largo —siempre dos
   moradas y las demas naranjas—, asi que sirve para las otras 16 paginas. */
.sol-numerados:not(.sol-numerados--panel) > .sol-num:nth-child(n+3) {
  border-left-color: var(--sol-naranja);
}

.sol-numerados:not(.sol-numerados--panel) > .sol-num:nth-child(n+3) .sol-num-cifra {
  color: var(--sol-naranja);
}

/* RETRO (2026-08-25): la cifra y el titulo van en la MISMA linea, alineados
   por la base, tal como los pinta el mockup. Antes iban uno encima del otro.
   Son <span>, o sea que quedan en linea solos; el <p> siguiente, al ser
   bloque, baja de renglon por su cuenta. */
.sol-num-cifra {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sol-morado);
  margin-right: 10px;
}

.sol-num-titulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--sol-naranja);
}

.sol-num p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--sol-texto);
  margin: 14px 0 0;
}

.sol-num a { color: var(--sol-morado); }

/* Los tres puntos que viven dentro del panel morado. Se reusa .sol-num para
   no duplicar tipografia; solo cambian los colores, porque una tarjeta blanca
   sobre el morado pesaria demasiado. La cifra se queda naranja, igual que en
   la columna de la derecha y que en el mockup. */
/* Los tres puntos que viven dentro del panel morado. En el mockup NO son
   tarjetas: son texto suelto separado por un filete fino, y el primero lleva
   filete arriba para despegarse de la entrada del panel. */
.sol-numerados--panel {
  margin-top: 24px;
  gap: 0;
}

.sol-numerados--panel .sol-num {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 0;
  padding: 22px 0;
}

.sol-numerados--panel .sol-num:last-child { padding-bottom: 0; }
.sol-numerados--panel .sol-num:hover      { box-shadow: none; }

.sol-numerados--panel .sol-num-cifra  { color: var(--sol-naranja); }
.sol-numerados--panel .sol-num-titulo { color: var(--sol-naranja); }

.sol-numerados--panel .sol-num p {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}

.sol-numerados--panel .sol-num a { color: #fff; }

/* ---------- Carrusel ---------- */

.sol-carrusel-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.sol-flechas {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 6px;
}

.sol-flecha {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--sol-borde);
  background: #fff;
  color: var(--sol-morado);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
}

.sol-flecha:hover:not(:disabled) {
  background: var(--sol-naranja);
  border-color: var(--sol-naranja);
  color: #fff;
}

.sol-flecha:disabled { opacity: 0.32; cursor: default; }

.is-oscuro .sol-flecha {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* La pista es un scroller con scroll-snap: TODO el contenido vive
   en el HTML —no se carga por JS— para que Google lo indexe, y sin
   JavaScript sigue funcionando arrastrando o con la rueda. */
.sol-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 22px) / 3);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  /* Sin barra visible; se navega con las flechas o arrastrando. */
  scrollbar-width: none;
}

.sol-pista::-webkit-scrollbar { display: none; }
.sol-pista > * { scroll-snap-align: start; }

/* Puntos de paginación */
.sol-puntos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.sol-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sol-borde);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.22s ease;
}

.sol-punto.is-activo {
  width: 22px;
  border-radius: 4px;
  background: var(--sol-naranja);
}

.is-oscuro .sol-punto { background: rgba(255, 255, 255, 0.28); }
.is-oscuro .sol-punto.is-activo { background: var(--sol-naranja); }

/* ---------- Tarjeta de caso / aplicación ---------- */

.sol-caso {
  background: #fff;
  border: 1px solid var(--sol-borde);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.is-oscuro .sol-caso {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.sol-caso-media {
  height: 11rem;
  background-size: cover;
  background-position: center;
  background-color: var(--sol-crema);
}

.is-oscuro .sol-caso-media { background-color: rgba(255, 255, 255, 0.06); }

/* Sin foto: la tarjeta pierde la banda de imagen y gana una barra
   de color arriba. No queda hueco gris. */
.sol-caso--sin-foto .sol-caso-media {
  height: 5px;
  background: linear-gradient(90deg, var(--sol-morado), var(--sol-naranja));
}

.sol-caso-cuerpo { padding: 22px 20px 24px; }

.sol-caso-cifra {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sol-naranja);
  line-height: 1;
  margin-right: 9px;
}

.sol-caso-etiqueta {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--sol-suave);
}

.is-oscuro .sol-caso-etiqueta { color: rgba(255, 255, 255, 0.6); }

.sol-caso-cuerpo h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sol-texto);
  margin: 12px 0 0;
}

.is-oscuro .sol-caso-cuerpo h3 { color: #fff; }

.sol-caso-cuerpo h3 a { color: inherit; text-decoration: none; }
.sol-caso-cuerpo h3 a:hover { color: var(--sol-naranja); }

/* ---------- Equipos ---------- */

/* Cabecera de la seccion de equipos: bloque morado con el titulo dentro,
   sobre fondo claro. Asi viene en el mockup —la seccion NO es morada, solo
   este bloque—. Sustituye a los estilos en linea que tenia la pagina. */
.sol-equipos-cabecera {
  background: var(--sol-morado);
  border-radius: 14px;
  padding: 36px 40px;
  text-align: center;
  margin-bottom: 34px;
}

.sol-equipos-cabecera .sol-titulo {
  color: #fff;
  margin: 0 0 10px;
}

.sol-equipos-cabecera .sol-lead {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
}

.sol-equipos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Filete superior de cada tarjeta de equipo.

   RETRO (2026-08-25, segunda pasada): aqui NO va bicolor. Con cuatro tarjetas
   en fila, un degradado dentro de cada una competia con el filete de la
   seccion y se leia como ruido. El cliente pidio color solido por tarjeta:
   las DOS DE LA IZQUIERDA en morado y las DOS DE LA DERECHA en naranja, de
   modo que la fila completa siga leyendose como una transicion morado ->
   naranja, igual que el filete de la seccion y que las tarjetas de
   .sol-numerados.

   Va en un ::before y no en el fondo de la tarjeta porque el primer hijo
   (.sol-equipo-cat) tiene fondo opaco y lo taparia; y no en un border-image
   porque eso cuadraria las esquinas redondeadas. El overflow hidden recorta el
   ::before al radio, asi que el filete sigue la curva.
   --filete-izq se hereda de la seccion, de modo que el morado se aclara solo
   si algun dia la tarjeta vive sobre fondo morado. */
.sol-equipo {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sol-equipo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--filete-izq);
  z-index: 1;
}

/* Rejilla de cuatro: las dos ultimas quedan a la derecha. */
.sol-equipos-grid > .sol-equipo:nth-child(n+3)::before {
  background: var(--sol-naranja);
}

/* Etiqueta de categoria de la tarjeta: «SONDA INTELIGENTE», «TRANSMISOR
   COMPACTO», etc. RETRO (2026-08-25): se pidieron en mayusculas y mas
   grandes. Ya venian en mayusculas por text-transform, pero a 0.6rem —unos
   9.6px— apenas se leian y no parecian mayusculas. Suben a 0.78rem, con algo
   mas de aire arriba y abajo para que la barra no quede apretada. */
.sol-equipo-cat {
  display: block;
  background: var(--sol-crema);
  color: var(--sol-morado);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 11px 18px;
  border-bottom: 1px solid var(--sol-borde);
}

/* RETRO (2026-08-25): las fotos de las tarjetas se ven mas grandes. El alto
   del area sube de 10rem a 17.5rem, en dos pasadas —10 -> 14.5 -> 17.5—, y se
   recorta el relleno de 16px a 10px,
   asi que la foto gana por los dos lados. Sigue siendo un alto fijo para que
   las cuatro tarjetas alineen su titulo a la misma altura aunque las imagenes
   tengan proporciones distintas —la del MMP8 es muy vertical—; el object-fit
   contain de abajo evita que ninguna se deforme o se recorte. */
.sol-equipo-media {
  height: 17.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #fff;
}

.sol-equipo-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Sin foto: no se reserva alto muerto, el texto sube. */
.sol-equipo--sin-foto .sol-equipo-media { display: none; }

.sol-equipo-cuerpo {
  padding: 4px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sol-equipo-cuerpo h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--sol-texto);
  margin: 12px 0 8px;
  line-height: 1.35;
}

.sol-equipo-cuerpo h3 a { color: inherit; text-decoration: none; }
.sol-equipo-cuerpo h3 a:hover { color: var(--sol-naranja); }

.sol-equipo-cuerpo > p {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--sol-suave);
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------
   .sol-equipo-lista queda SIN USO desde la retro del 2026-08-25: el
   cliente pidió quitar las viñetas de las cuatro tarjetas de equipo,
   porque el mockup no las lleva. No se borra el estilo porque este
   archivo es el molde de las 17 páginas de solución y alguna podría
   necesitarlas. Si al terminar la fase ninguna la usa, se elimina
   junto con .sol-equipo-lista li y su ::before.
   --------------------------------------------------------------- */
.sol-equipo-lista {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.sol-equipo-lista li {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--sol-suave);
  padding-left: 15px;
  margin-bottom: 8px;
  position: relative;
}

.sol-equipo-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sol-naranja);
}

.sol-equipo-lista a { color: var(--sol-morado); }

.sol-equipo-cuerpo .sol-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  font-size: 0.72rem;
  padding: 11px 14px;
}

/* ---------- Servicios ---------- */

.sol-servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Entradilla de la seccion en caja blanca con filo naranja a la izquierda,
   como en el mockup. Solo aqui: --caja es un modificador de .sol-lead. */
.sol-lead--caja {
  background: #fff;
  border: 1px solid var(--sol-borde);
  border-left: 5px solid var(--sol-naranja);
  border-radius: 8px;
  /* .sol-lead limita a 62ch para que el parrafo suelto no salga con renglones
     larguisimos. Aqui NO aplica: es una caja que debe cruzar el ancho completo,
     como en el mockup, y con el limite el texto se amontonaba en cuatro
     renglones dentro de una caja a medio llenar. */
  max-width: none;
  padding: 18px 24px;
  font-weight: 600;
  color: var(--sol-texto);
}

/* Tarjeta de servicio, formato del mockup: filete de color arriba, icono en
   circulo arriba a la derecha, cifra en tinta, titulo, texto y «Saber mas».
   El color de acento (--acento) lo fija cada tarjeta mas abajo y lo comparten
   el filete, el icono y el enlace. */
.sol-servicio {
  --acento: var(--sol-morado);
  position: relative;
  background: #fff;
  border: 1px solid var(--sol-borde);
  border-top: 5px solid var(--acento);
  border-radius: 10px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.sol-servicio:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(91, 28, 100, 0.09);
}

/* El mockup pinta de naranja la tercera y la cuarta —la ultima de la primera
   fila y la primera de la segunda—, lo que traza una diagonal entre filas.
   Con siete tarjetas en rejilla de tres se conserva ese mismo par. */
.sol-servicio:nth-child(3),
.sol-servicio:nth-child(4) {
  --acento: var(--sol-naranja);
}

.sol-servicio-icono {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sol-borde);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acento);
  font-size: 0.88rem;
}

.sol-servicio-cifra {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sol-tinta);
  line-height: 1;
}

.sol-servicio h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sol-tinta);
  /* Aire a la derecha para no meterse debajo del icono. */
  margin: 12px 44px 8px 0;
}

.sol-servicio p {
  font-size: 0.89rem;
  line-height: 1.62;
  color: var(--sol-suave);
  margin: 0;
}

/* margin-top auto: el enlace se pega abajo, asi que las siete tarjetas lo
   alinean a la misma altura aunque su texto mida distinto. */
.sol-servicio-mas {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--acento);
  text-decoration: none;
}

.sol-servicio-mas:hover { text-decoration: underline; }

/* Texto solo para lectores de pantalla: «Saber mas» a secas se repite siete
   veces y no dice adonde lleva. */
.sol-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- CTA final ---------- */

.sol-cta {
  background: linear-gradient(120deg, var(--sol-morado-prof) 0%, var(--sol-morado) 60%, var(--sol-naranja-osc) 190%);
  color: #fff;
  padding: 66px 0;
  text-align: center;
}

.sol-cta h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: #fff;
}

.sol-cta p {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 28px;
}

.sol-cta .sol-btn { align-self: center; }

/* ---------- Responsivo ---------- */

@media (max-width: 992px) {
  .sol-hero { grid-template-columns: 1fr; min-height: 0; }
  .sol-hero-media { min-height: 15rem; }
  .sol-hero-texto { padding: 44px 32px; }
  .sol-hero-texto h1 { font-size: 2rem; }
  .sol-intro-grid { gap: 24px; }
  .sol-intro-texto p { font-size: 1.08rem; }
  .sol-intro-texto p:first-of-type { font-size: 1.18rem; }
  .sol-porque-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Apiladas ya no hay panel al lado que igualar, y forzar filas iguales
     dejaria tarjetas con mucho hueco vacio. */
  .sol-numerados:not(.sol-numerados--panel) { height: auto; grid-auto-rows: auto; }
  .sol-equipos-grid { grid-template-columns: repeat(2, 1fr); }
  /* A dos columnas «izquierda» y «derecha» cambian de significado: ya no son
     las dos primeras y las dos ultimas, sino las impares y las pares. */
  .sol-equipos-grid > .sol-equipo:nth-child(odd)::before  { background: var(--filete-izq); }
  .sol-equipos-grid > .sol-equipo:nth-child(even)::before { background: var(--sol-naranja); }
  .sol-servicios-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-pista { grid-auto-columns: calc((100% - 22px) / 2); }
  .sol-titulo { font-size: 1.85rem; }
}

@media (max-width: 600px) {
  .sol-seccion { padding: 52px 0; }
  .sol-intro-texto p { font-size: 1rem; }
  .sol-intro-texto p:first-of-type { font-size: 1.08rem; }
  .sol-hero-texto h1 { font-size: 1.6rem; }
  .sol-hero-texto { padding: 34px 24px; }
  .sol-titulo { font-size: 1.5rem; }
  .sol-equipos-grid { grid-template-columns: 1fr; }
  /* Apiladas no hay izquierda ni derecha: se recupera la mitad y mitad, las
     dos primeras en morado y las dos ultimas en naranja. */
  .sol-equipos-grid > .sol-equipo:nth-child(-n+2)::before { background: var(--filete-izq); }
  .sol-equipos-grid > .sol-equipo:nth-child(n+3)::before  { background: var(--sol-naranja); }
  .sol-servicios-grid { grid-template-columns: 1fr; }
  .sol-pista { grid-auto-columns: 82%; }
  .sol-carrusel-cab { flex-direction: column; }
  .sol-flechas { display: none; }   /* en móvil se arrastra con el dedo */
  .sol-cta h2 { font-size: 1.5rem; }
}

/* Quien prefiera menos movimiento, sin desplazamiento animado. */
@media (prefers-reduced-motion: reduce) {
  .sol-pista { scroll-behavior: auto; }
  .sol-servicio:hover { transform: none; }
}