/* SOLUCIONES · lo propio de las mini landings (21-oct). El sistema visual es el de Showrooms
   (showrooms.css: tokens, nav, hero, secciones, laptop, flujo); aquí sólo lo que cambia:
   el acento de cada solución (--c, el color de su pestaña en la portada), el flujo con N pasos,
   las tarjetas de «Lo que incluye» y la fila de las otras soluciones. */

.hero .ceja-hero{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; font-weight:600; font-size:clamp(.95rem,.9rem + .2vw,1.05rem); color:var(--c); }
.hero .ceja-hero i{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 12%, white); }
.hero .ceja-hero i svg{ width:18px; height:18px; }
.hero-tit .acento{ color:var(--c); }
.hero-btns .btn-azul{ min-width:220px; }

/* el flujo con tantos pasos como videos tenga la solución */
.sol .fl2{ grid-template-columns:repeat(var(--n),minmax(0,1fr)); }
.sol .fl2{ max-width:min(1240px, 168px * var(--n) + 16px * (var(--n) - 1)); margin-left:auto; margin-right:auto; }   /* pocos pasos: la fila se centra, la laptop no se encoge */
@media (min-width:1101px){ .sol .demo-lap{ max-width:min(1040px, (100svh - 260px) * 1.6); } }

/* ── LO QUE INCLUYE: una tarjeta por función; tocarla reproduce su video arriba ── */
.inc{ width:var(--ancho); margin:0 auto; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.inc[data-n="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:880px; }
.inc[data-n="6"]{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:980px; }
.inc > li{ min-width:0; }
.inc button{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:10px; width:100%; height:100%; padding:22px 20px 18px; border-radius:24px; background:var(--mist); cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -24px rgba(0,0,0,.22); transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.inc button:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
@media (hover:hover){ .inc button:hover{ transform:translateY(-2px); box-shadow:0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent), 0 18px 34px -22px color-mix(in srgb, var(--c) 70%, transparent); } }
.inc-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 12%, white); }
.inc-ic svg{ width:20px; height:20px; }
.inc b{ font-size:1.06rem; line-height:1.25; font-weight:600; letter-spacing:-.018em; }
.inc span.d{ font-size:.9rem; line-height:1.45; color:var(--muted); text-wrap:pretty; flex:1; }
.inc em{ font-style:normal; font-size:.875rem; font-weight:600; color:var(--brand); display:inline-flex; align-items:center; gap:6px; min-height:24px; }
.inc em svg{ width:14px; height:14px; }
.inc.anima > li{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i) * 60ms); }
.inc.anima.in > li{ opacity:1; transform:none; }
@media (max-width:1000px){ .inc, .inc[data-n]{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .inc, .inc[data-n]{ grid-template-columns:1fr; } .inc button{ padding:18px 18px 16px; } }

/* ── TODO EN UNA SOLA APP: las otras soluciones ── */
.otras{ width:var(--ancho); max-width:980px; margin:0 auto; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.otras a{ display:flex; align-items:center; gap:14px; min-height:84px; padding:16px 18px; border-radius:20px; background:var(--mist); box-shadow:0 0 0 1px var(--hair); transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
@media (hover:hover){ .otras a:hover{ transform:translateY(-2px); box-shadow:0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); } }
.otras .inc-ic{ flex:none; }
.otras b{ display:block; font-size:1rem; font-weight:600; letter-spacing:-.015em; }
.otras small{ display:block; font-size:.85rem; color:var(--muted); line-height:1.35; margin-top:2px; }
.otras .fl{ margin-left:auto; color:var(--muted); }
.sec-pie{ text-align:center; margin-top:clamp(20px,2.4vw,28px); }
@media (max-width:820px){ .otras{ grid-template-columns:1fr; } }

/* la nota de alcance (p. ej. BIM: el modelo lo hace Concreta BIM) */
.nota-sol{ max-width:62ch; margin:clamp(20px,2.4vw,28px) auto 0; padding:0 var(--pad); text-align:center; color:var(--muted); font-size:.95rem; text-wrap:balance; }
.nota-sol a{ color:var(--brand); }
.nota-sol a:hover{ text-decoration:underline; }

/* el hilo cuelga sus capas SVG dentro de la lista: el último paso ya no es :last-child y pintaba una flecha suelta */
.sol .fn:last-of-type::after, .sol .fn:last-of-type::before{ display:none; }
/* teléfono: cada función en un renglón (ícono a la izquierda), para no apilar ocho tarjetas altas */
@media (max-width:560px){
  .inc{ gap:10px; }
  .inc button{ display:grid; grid-template-columns:40px 1fr; column-gap:14px; row-gap:4px; align-items:start; padding:16px; border-radius:20px; }
  .inc-ic{ grid-row:span 3; }
  .inc b{ font-size:1rem; }
  .inc span.d{ font-size:.875rem; }
  .inc em{ min-height:20px; }
}

/* el mockup grande del CRM dentro del flujo: ocupa el lugar de la laptop en su paso */
.sol .demo-mockup{ margin-top:44px; }   /* su etiqueta «Toca un punto» va arriba del celular: no debe pisar la fila de pasos */
.sol .demo-lap[hidden], .sol .demo-mockup[hidden]{ display:none !important; }