/* 130 · Sectores: rejilla quieta (clases q130-). Sin JS. Nada cambia con el scroll.
   Escritorio: 12 columnas, 4 tarjetas arriba y 3 abajo, altura fija. Solo la tarjeta con ratón/foco reacciona:
   fundido a una segunda imagen + frase y «Ver proyectos» sobre un velo inferior.
   Móvil/táctil: carrusel horizontal con scroll-snap; imagen arriba y texto siempre visible debajo. */
.sc69 { padding-block: var(--sec); border-top: 1px solid var(--line-strong); }
.sc69-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.sc69-pie { padding-top: var(--s-4); text-align: center; }

.q130-lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.q130-cel { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
.q130-card { position: relative; display: block; height: 100%; color: inherit; text-decoration: none; background: #fff; }
.q130-med { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--grid); }
.q130-med img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.q130-b { opacity: 0; }
.q130-n { position: absolute; top: 12px; left: 14px; font-family: var(--mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 8px rgba(0,0,0,.5); }
.q130-txt { display: block; padding: var(--s-1) 2px var(--s-2); }
.q130-nom { margin: 0; font-size: 1.125rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.q130-cc { display: block; margin-top: 4px; font-family: var(--mono, ui-monospace, monospace); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--signal); }
.q130-p { display: block; margin-top: var(--s-1); max-width: 38ch; font-size: var(--t-small); line-height: 1.4; }
.q130-mas { display: inline-block; margin-top: var(--s-1); font-size: var(--t-small); font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.q130-card:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

@media (min-width: 700px) {
  .q130-cel { flex-basis: 46%; }
}

/* escritorio con puntero fino: tarjeta a sangre, texto sobre velo */
@media (min-width: 1024px) and (hover: hover) {
  .q130-lista { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(300px, 27vw, 420px); gap: 2px; overflow: visible; scroll-snap-type: none; }
  .q130-cel { grid-column: span 3; flex: none; }
  .q130-cel:nth-child(n+5) { grid-column: span 4; }
  .q130-card { overflow: hidden; background: var(--grid); color: #fff; }
  .q130-med { position: absolute; inset: 0; aspect-ratio: auto; }
  .q130-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 45%); transition: opacity 400ms ease; }
  .q130-txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 16px 14px; }
  .q130-nom { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); }
  .q130-cc { color: #fff; }
  .q130-p, .q130-mas { opacity: 0; transform: translateY(6px); transition: opacity 350ms ease, transform 350ms ease, max-height 350ms ease, margin 350ms ease; color: #fff; }
  .q130-p { max-height: 0; margin-top: 0; }
  .q130-mas { max-height: 0; margin-top: 0; overflow: hidden; }
  .q130-card:hover::after, .q130-card:focus-visible::after { background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 80%); }
  .q130-card:hover .q130-b, .q130-card:focus-visible .q130-b { opacity: 1; }
  .q130-card:hover .q130-p, .q130-card:focus-visible .q130-p { max-height: 6em; margin-top: 8px; }
  .q130-card:hover .q130-mas, .q130-card:focus-visible .q130-mas { max-height: 2em; margin-top: 8px; }
  .q130-card:hover .q130-p, .q130-card:focus-visible .q130-p,
  .q130-card:hover .q130-mas, .q130-card:focus-visible .q130-mas { opacity: 1; transform: none; }
  .q130-med img { transition: opacity 500ms ease; }
  .q130-card::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; background: var(--signal); opacity: 0; transition: opacity 350ms ease; }
  .q130-card:hover::before, .q130-card:focus-visible::before { opacity: 1; }
  .q130-card:focus-visible { outline-offset: -3px; outline-color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .q130-med img, .q130-card::after, .q130-card::before, .q130-p, .q130-mas { transition: none !important; }
}