/* Página de soluciones (/soluciones/): listado en pila sticky con color por solución y partículas en el panel,
   «según quién seas» en sección clara, camino de compra que se llena, soporte con BecarIA, precio, «si no existe»,
   FAQ y cierre. Va bajo .pagina--soluciones y usa las piezas de .pagina del framework. La cabecera del sitio es fija (72px). */
.pagina--soluciones{ --nav-h: 72px; }
body.pagina-soluciones{ background: var(--bg); }

/* ---------- 1. Encabezado ---------- */

.pagina--soluciones .franja{ display: flex; gap: 8px; margin-top: clamp(40px, 6vw, 90px); height: clamp(14px, 2vw, 28px); }
.pagina--soluciones .franja i{ border-radius: 999px; display: block; }
.pagina--soluciones .franja i:nth-child(1){ flex: 3; background: var(--purple); }
.pagina--soluciones .franja i:nth-child(2){ flex: 2; background: var(--green); }
.pagina--soluciones .franja i:nth-child(3){ flex: 4; background: var(--orange); }
.pagina--soluciones .franja i:nth-child(4){ flex: 1; background: var(--text); }

/* ---------- 2. Listado: pila sticky, cada solución con su color ---------- */
.pagina--soluciones .catalogo{ padding-bottom: var(--section-y); }
.pagina--soluciones .catalogo__top{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.pagina--soluciones .pila{ position: relative; }
.pagina--soluciones .sol{ position: sticky; top: calc(18px + var(--i, 0) * 14px); margin-bottom: clamp(40px, 9vh, 110px); }
.pagina--soluciones .sol:last-child{ margin-bottom: 0; }
.pagina--soluciones .sol[data-accent="purple"]{ --c: var(--purple); }
.pagina--soluciones .sol[data-accent="green"]{ --c: var(--green); }
.pagina--soluciones .sol[data-accent="orange"]{ --c: var(--orange); }
.pagina--soluciones .sol[data-accent="cream"]{ --c: var(--text); }
.pagina--soluciones .sol[data-accent="amber"]{ --c: var(--amber); }
.pagina--soluciones .sol[data-accent="red"]{ --c: var(--red); }
.pagina--soluciones .sol[data-accent="blue"]{ --c: var(--blue); }
.pagina--soluciones .sol[data-accent="teal"]{ --c: var(--teal); }
.pagina--soluciones .sol[data-accent="lime"]{ --c: var(--lime); }
.pagina--soluciones .sol[data-accent="pink"]{ --c: var(--pink); }
.pagina--soluciones .sol[data-accent="lilac"]{ --c: var(--lilac); }
.pagina--soluciones .sol[data-accent="coral"]{ --c: var(--coral); }
.pagina--soluciones .sol[data-accent="lemon"]{ --c: var(--lemon); }
.pagina--soluciones .sol__in{ background: var(--c); color: var(--bg); border-radius: var(--radius); min-height: clamp(460px, 66vh, 620px); padding: clamp(22px, 3vw, 44px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 64px); transform-origin: 50% 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.pagina--soluciones .sol.atras .sol__in{ transform: scale(.94); }
.pagina--soluciones .sol__txt{ display: grid; align-content: space-between; gap: 24px; }
.pagina--soluciones .sol__k{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pagina--soluciones .sol__badge{ background: var(--bg); color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-micro); letter-spacing: .08em; }
.pagina--soluciones .sol h3{ font-size: var(--fs-d2); font-weight: 800; letter-spacing: -.04em; line-height: .92; margin: 12px 0 18px; }
.pagina--soluciones .sol__frase{ font-size: var(--fs-lg); line-height: 1.25; max-width: 34ch; }
.pagina--soluciones .sol__ctas{ display: flex; flex-wrap: wrap; gap: 10px; }
.pagina--soluciones .sol__media{ position: relative; background: var(--bg); border-radius: var(--radius); display: grid; place-items: center; min-height: 260px; overflow: hidden; }
.pagina--soluciones .sol__ini{ position: relative; z-index: 1; width: 90%; text-align: center; white-space: nowrap; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--c); }

/* ---------- 3. Según quién seas (sección clara, tres bloques de color) ---------- */

.pagina--soluciones .solucion-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.pagina--soluciones .bloque{ background: var(--c); color: var(--bg); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 52px); display: grid; gap: 18px; align-content: start; }
.pagina--soluciones .bloque h3{ font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.pagina--soluciones .bloque p{ font-size: var(--fs-md); max-width: 64ch; }
.pagina--soluciones .bloque__cta{ justify-self: start; margin-top: 8px; background: var(--bg); color: var(--text); }
.pagina--soluciones .bloque__cta:hover{ background: var(--text); color: var(--bg); }
.pagina--soluciones .bloque:nth-child(1){ --c: var(--purple); grid-column: 1 / span 8; }
.pagina--soluciones .bloque:nth-child(2){ --c: var(--green); grid-column: 5 / span 8; }
.pagina--soluciones .bloque:nth-child(3){ --c: var(--orange); grid-column: 1 / span 9; }

/* ---------- 4. Cómo se compra: camino que se llena ---------- */
.pagina--soluciones .compra__head{ max-width: 900px; margin-bottom: clamp(36px, 5vw, 72px); }
.pagina--soluciones .compra__head .lead{ margin-top: 24px; max-width: 52ch; color: var(--text-dim); }
.pagina--soluciones .camino{ --p: 0; --g: clamp(40px, 6vw, 80px); position: relative; display: grid; gap: clamp(28px, 5vw, 64px); margin-bottom: var(--g); }
.pagina--soluciones .camino::before, .pagina--soluciones .camino::after{ content: ""; position: absolute; left: 50%; top: 0; bottom: calc(var(--g) * -1); width: 6px; margin-left: -3px; background: var(--tint-neutral); border-radius: 3px; }
.pagina--soluciones .camino::after{ background: var(--green); transform-origin: top; transform: scaleY(var(--p)); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.pagina--soluciones .paso{ position: relative; display: grid; grid-template-columns: 1fr 76px 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; }
.pagina--soluciones .paso__disco{ grid-column: 2; grid-row: 1; width: 76px; height: 76px; border-radius: 50%; background: var(--tint-neutral); color: var(--text-dim); display: grid; place-items: center; font-size: var(--fs-xl); font-weight: 800; position: relative; z-index: 1; transition: background .4s, color .4s; }
.pagina--soluciones .paso.on .paso__disco{ background: var(--green); color: var(--bg); }
.pagina--soluciones .paso__cuerpo{ grid-row: 1; }
.pagina--soluciones .paso:nth-child(odd) .paso__cuerpo{ grid-column: 1; text-align: right; }
.pagina--soluciones .paso:nth-child(even) .paso__cuerpo{ grid-column: 3; }
.pagina--soluciones .paso h3{ font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 10px; color: var(--text-dim); transition: color .4s; }
.pagina--soluciones .paso.on h3{ color: var(--text); }
.pagina--soluciones .compra__cierre a{ color: var(--bg); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.pagina--soluciones .compra__cierre a:hover{ color: var(--text); background: var(--bg); text-decoration-color: var(--green); }
.pagina--soluciones .paso p{ color: var(--text-dim); font-size: var(--fs-md); }
.pagina--soluciones .compra__cierre{ margin-top: 0; text-align: center; background: var(--green); color: var(--bg); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }

/* ---------- 5. Soporte: bloque morado con círculo que entra desde la derecha ---------- */
.pagina--soluciones .soporte{ --c: var(--purple); position: relative; overflow: hidden; }
.pagina--soluciones .soporte__grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 6vw, 100px); align-items: center; }
.pagina--soluciones .soporte__prose p{ max-width: 52ch; }
.pagina--soluciones .caminos{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.pagina--soluciones .caminos a{ text-decoration: none; }
.pagina--soluciones .caminos span, .pagina--soluciones .caminos a{ background: var(--bg); color: var(--text); border-radius: 999px; padding: 10px 18px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.pagina--soluciones .becar-wrap{ position: relative; view-timeline: --becar block; min-height: clamp(220px, 30vw, 420px); display: grid; place-items: center; }
.pagina--soluciones .becar{ width: clamp(200px, 28vw, 400px); aspect-ratio: 1; border-radius: 50%; background: var(--bg); color: var(--purple); display: grid; place-items: center; text-align: center; font-size: var(--fs-d4); font-weight: 800; letter-spacing: -.04em; line-height: 1; padding: 20px; }
.pagina--soluciones .becar small{ display: block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-top: 12px; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pagina--soluciones .becar{ animation: pagina--soluciones-becar-in linear both; animation-timeline: --becar; animation-range: entry 0% entry 100%; }
  }
}
@keyframes pagina--soluciones-becar-in{ from{ transform: translateX(60vw) rotate(-360deg); } to{ transform: none; } }

/* ---------- 6. Precio ---------- */
.pagina--soluciones .precio__grid{ display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 6vw, 100px); align-items: start; }
.pagina--soluciones .tarifas{ display: grid; gap: 14px; }
.pagina--soluciones .tarifa{ background: var(--bg-elev); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px); display: grid; gap: 6px; }
.pagina--soluciones .tarifa b{ font-size: var(--fs-d7); font-weight: 800; letter-spacing: -.05em; line-height: .85; }
.pagina--soluciones .tarifa:nth-child(1) b{ color: var(--orange); }
.pagina--soluciones .tarifa:nth-child(2) b{ color: var(--green); }
.pagina--soluciones .tarifa span{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }

/* ---------- 7. Si no existe, la creamos (naranja sólido) ---------- */
.pagina--soluciones .crea{ --c: var(--orange); }
.pagina--soluciones .crea__grid{ display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 6vw, 100px); align-items: center; }

/* ---------- 8. FAQ ---------- */

/* ---------- 9. Cierre (clara, lo último) ---------- */

@media (max-width: 900px){
  .pagina--soluciones .soporte__grid, .pagina--soluciones .precio__grid, .pagina--soluciones .crea__grid, .pagina--soluciones .sol__in{ grid-template-columns: 1fr; }
  
  .pagina--soluciones .sol__in{ min-height: 0; }
  .pagina--soluciones .sol__media{ min-height: 180px; order: -1; }
  .pagina--soluciones .solucion-grid{ grid-template-columns: 1fr; }
  .pagina--soluciones .bloque:nth-child(n){ grid-column: auto; }
  .pagina--soluciones .camino::before, .pagina--soluciones .camino::after{ left: 38px; }
  .pagina--soluciones .paso{ grid-template-columns: 76px 1fr; }
  .pagina--soluciones .paso__disco{ grid-column: 1; }
  .pagina--soluciones .paso:nth-child(n) .paso__cuerpo{ grid-column: 2; text-align: left; }
  
  .pagina--soluciones .becar-wrap{ min-height: 0; padding-top: 12px; }
}
@media (max-width: 900px){
  .pagina--soluciones .caminos{ justify-content: center; }
}
/* Móvil: las tarjetas van una debajo de otra, sin apilarse (con la pantalla del móvil la tarjeta no cabe entera) */
@media (max-width: 760px){
  .pagina--soluciones .sol{ position: static; margin-bottom: 20px; }
  .pagina--soluciones .sol:last-child{ margin-bottom: 0; }
  .pagina--soluciones .sol.atras .sol__in{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .pagina--soluciones .sol__in, .pagina--soluciones .camino::after, .pagina--soluciones .paso__disco, .pagina--soluciones .paso h3{ transition: none; }
  .pagina--soluciones .sol.atras .sol__in{ transform: none; }
}

/* ---------- Ajustes para la cabecera fija del sitio y para el contenido del editor ---------- */

.pagina--soluciones .sol{ top: calc(var(--nav-h) + 18px + var(--i, 0) * 14px); }

.pagina--soluciones .compra__head .lead p{ margin: 0; }
.pagina--soluciones .bloque p + p{ margin-top: .8em; }