/* mattfolio — "Soluciones con IA": cinco muestras en video (datos en js/soluciones-data.js) */

.soluciones{
  position:relative;container-type:inline-size;
  padding:clamp(96px, 12vh, 140px) 4vw clamp(90px, 11vh, 130px);
}

/* ---------- encabezado ---------- */
.sol-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 40px;
  padding-bottom:clamp(18px, 1.8vw, 26px);margin-bottom:clamp(18px, 1.8vw, 26px);
  border-bottom:1px solid var(--line);
}
.sol-label{
  grid-column:1 / -1;
  font:400 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim);
}
.sol-titulo{
  font-family:var(--display);font-weight:500;
  font-size:clamp(40px, 5.2vw, 92px);line-height:.98;letter-spacing:-.035em;color:var(--ink);
}
.sol-titulo .grad{font-weight:inherit}
.sol-sub{
  font-size:clamp(15px, 1.2vw, 19px);font-weight:300;color:var(--ink-dim);
  padding-bottom:.45em;text-align:right;
}

/* ---------- composición de escritorio: 16:9 | 9:16 a dos filas | 16:9 ----------
   El ancho lateral se despeja para que el reel (9:16) mida exactamente dos piezas 16:9 + un título + un espacio. */
.sol-grid{
  --gap:clamp(14px, 1.3vw, 22px);
  --cap:48px;
  --w:calc((100% - 2 * var(--gap) - .5625 * (var(--cap) + var(--gap))) / 2.6328);
  /* alto reservado antes de que el script arme las piezas: dos filas 16:9 + títulos + espacio */
  min-height:calc(2 * ((100cqw - 2 * var(--gap) - .5625 * (var(--cap) + var(--gap))) / 2.6328 * .5625 + var(--cap)) + var(--gap));
  display:grid;grid-template-columns:var(--w) minmax(0,1fr) var(--w);
  grid-template-rows:auto auto;gap:0 var(--gap);row-gap:var(--gap);
}
.sol-item{margin:0;min-width:0}
.sol-item[data-lugar="izq-arriba"]{grid-column:1;grid-row:1}
.sol-item[data-lugar="izq-abajo"]{grid-column:1;grid-row:2}
.sol-item[data-lugar="centro"]{grid-column:2;grid-row:1 / span 2}
.sol-item[data-lugar="der-arriba"]{grid-column:3;grid-row:1}
.sol-item[data-lugar="der-abajo"]{grid-column:3;grid-row:2}

/* superficie: borde fino, esquinas apenas redondeadas, sin tarjeta ni sombra */
.sol-media{
  position:relative;width:100%;aspect-ratio:var(--ar);
  border-radius:6px;overflow:hidden;background:#0c0c12;
  box-shadow:inset 0 0 0 1px rgba(236,235,230,.1);
  -webkit-tap-highlight-color:transparent;
}
.sol-media picture{display:contents}
.sol-media img,.sol-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sol-media video{opacity:0;transition:opacity .45s ease}
.sol-item.activa .sol-media video{opacity:1}
/* el borde queda por encima de la imagen y del video */
.sol-media::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(236,235,230,.1)}
.sol-toggle:focus-visible{outline:2px solid #6f86ff;outline-offset:3px}

/* número + título debajo de cada pieza, siempre visibles */
.sol-cap{
  height:var(--cap);display:flex;align-items:center;gap:clamp(12px, 1.4vw, 22px);
  padding-top:2px;
}
.sol-cap .n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-faint);flex:none}
.sol-cap .t{font-size:clamp(15px, 1.35vw, 21px);font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* elementos solo de móvil */
.sol-avance,.sol-toggle{display:none}

/* ---------- tablet: misma composición, márgenes algo menores ---------- */
@media (min-width:768px) and (max-width:1099px){
  .sol-grid{--cap:44px}
  .sol-cap{gap:8px}
  .sol-cap .n{font-size:11px}
  .sol-cap .t{font-size:14px}
}

/* ---------- móvil: la sección completa no se muestra (decisión del 23/10) ----------
   Sin encabezado, miniaturas, botón ni muestras, y sin su espacio: tras la galería sigue Proyectos.
   Las reglas de abajo son del bloque plegable "Ver demostraciones"; quedan por si se reactiva
   (quitar esta línea y poner EN_MOVIL = true en js/soluciones.js). */
@media (max-width:767px){
  .soluciones{display:none}
}
@media (max-width:767px){
  .soluciones{padding:84px 20px 70px}
  .sol-head{grid-template-columns:1fr;gap:12px;border-bottom:0;padding-bottom:0;margin-bottom:22px}
  .sol-label{font-size:11px;letter-spacing:.28em}
  .sol-titulo{font-size:clamp(36px, 10.5vw, 46px)}
  .sol-sub{text-align:left;padding-bottom:0}
  /* avance: las cinco portadas en miniatura, decorativas */
  .sol-avance{display:flex;align-items:flex-end;gap:6px;height:40px;margin-bottom:22px}
  .sol-avance span{
    flex:none;height:40px;border-radius:4px;overflow:hidden;background:#0c0c12;
    box-shadow:inset 0 0 0 1px rgba(236,235,230,.1);
  }
  .sol-avance picture{display:contents}
  .sol-avance img{width:100%;height:100%;object-fit:cover;display:block}
  .sol-toggle{
    display:inline-flex;align-items:center;gap:12px;
    font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
    padding:14px 20px 14px 18px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(111,134,255,.5);background:rgba(40,19,211,.14);
  }
  .sol-toggle .mas{position:relative;width:11px;height:11px;flex:none;transition:transform .35s ease}
  .sol-toggle .mas::before,.sol-toggle .mas::after{content:'';position:absolute;left:0;top:5px;width:11px;height:1px;background:currentColor}
  .sol-toggle .mas::after{transform:rotate(90deg)}
  .soluciones.abierta .sol-toggle .mas{transform:rotate(45deg)}
  .soluciones:not(.abierta) .sol-grid{display:none}
  /* desplegado: una columna por número; el reel limitado al alto disponible, sin recorte */
  .sol-grid{display:flex;flex-direction:column;gap:24px;margin-top:28px;--cap:44px;min-height:0}
  .sol-item[data-lugar]{grid-column:auto;grid-row:auto}
  .sol-item[data-lugar="centro"]{width:fit-content;max-width:100%;margin:0 auto}
  .sol-item[data-lugar="centro"] .sol-media{width:auto;height:min(70svh, 640px);max-width:100%}
  .sol-cap .t{font-size:17px}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .sol-media video,.sol-toggle .mas{transition:none}
}