/* Portada en visual (ecosistema 360 · D-016/D-017, 2026-10-01): el proceso y las capacidades, con poco texto.
   Usa las variables de main.css; respeta prefers-reduced-motion. */
.pt-hero-obra { display: block; position: relative; border: var(--border) solid var(--line); background: #eef0f2; box-shadow: var(--shadow); text-decoration: none; overflow: hidden; }
.pt-hero-obra img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: cover; object-position: top; transition: transform .8s ease; }
.pt-hero-obra:hover img { transform: scale(1.03); }
.pt-hero-obra__pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); background: var(--surface); color: var(--ink); font-size: var(--step-sm); border-top: var(--border) solid var(--line); }
.pt-hero-obra__pie span { color: var(--signal-strong); }
.pt-proceso { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); position: relative; counter-reset: pt; }
.pt-proceso::before { content: ""; position: absolute; left: 2rem; right: 2rem; top: 1.9rem; height: 2px; background: linear-gradient(90deg, var(--signal), var(--line)); }
.pt-proceso li { position: relative; display: grid; gap: .35rem; align-content: start; counter-increment: pt; }
.pt-proceso svg { width: 3.8rem; height: 3.8rem; padding: .85rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--signal); fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; transition: transform .3s ease, background .3s ease; }
.pt-proceso li:hover svg { transform: translateY(-3px); background: var(--signal-wash); }
.pt-proceso h3 { font-size: 1rem; margin: .4rem 0 0; }
.pt-proceso h3::before { content: counter(pt) " · "; color: var(--signal-strong); }
.pt-proceso p { margin: 0; color: var(--ink-soft); font-size: var(--step-sm); }
.pt-proceso__ver { margin-top: var(--sp-4); }
.pt-proceso__ver a { color: var(--signal-strong); font-weight: 600; text-decoration: none; }
.pt-destacado { padding-top: 0; overflow: hidden; }
.pt-destacado__img { display: block; width: calc(100% + 2 * var(--sp-4)); max-width: none; margin: 0 calc(-1 * var(--sp-4)) var(--sp-2); aspect-ratio: 21 / 9; max-height: 19rem; object-fit: cover; object-position: center 40%; border-bottom: var(--border) solid var(--line); }
@media (min-width: 52rem) { .pt-destacado { grid-column: 1 / -1; } }
@media (max-width: 62rem) {
  .pt-proceso { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-4); }
  .pt-proceso::before { display: none; }
}
@media (max-width: 34rem) { .pt-proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .pt-hero-obra img, .pt-proceso svg { transition: none; }
  .pt-hero-obra:hover img, .pt-proceso li:hover svg { transform: none; }
}
/* Venía de la v2: en el móvil las tarjetas de trabajos se salían ~17 px (su ficha no encogía). */
.cases > * { min-width: 0; }
.case-card .cajetin { min-width: 0; }
.case-card .cajetin__v { overflow-wrap: anywhere; }