/* Implementos al estilo de Demolición de Laurini: índice en banda de color y un capítulo por equipo
   (título, botón "Más información" y collage de fotos: una grande y cuatro chicas), con fondos alternados. */

/* Índice */
.imp-index-v166{background:#193d75;padding:64px 6vw}
.imp-index-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0;max-width:1200px;margin:0 auto}
.imp-index-v166 a{padding:0 24px;font-size:19px;line-height:1.3;color:#fff;text-decoration:none;text-underline-offset:7px}
.imp-index-v166 a+a{border-left:1px solid rgba(255,255,255,.45)}
.imp-index-v166 a:hover,.imp-index-v166 a:focus-visible{text-decoration:underline}
.imp-index-v166 a:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* Capítulos */
.imp-chapter-v166{padding:110px 6vw 130px;background:#fff;scroll-margin-top:80px}
.imp-chapter-v166.is-tint{background:#e7edf4}
.imp-chapter-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;max-width:1600px;margin:0 auto 34px}
.imp-chapter-head h2{margin:0;font-size:clamp(36px,3.8vw,54px);font-weight:400;line-height:1.1;letter-spacing:-.03em;color:#193d75}
.imp-more{flex:none;padding:13px 34px;border:2px solid #193d75;font-size:17px;line-height:1.3;color:#193d75;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.imp-more:hover,.imp-more:focus-visible{background:#193d75;color:#fff}

/* Collage: una foto grande (2×2) y cuatro cuadradas */
.imp-collage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1600px;margin:0 auto}
.imp-cell{position:relative;display:block;overflow:hidden;aspect-ratio:1;background:#cfd8e3;cursor:zoom-in}
.imp-cell.is-lead{grid-column:1/3;grid-row:1/3}
.imp-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.imp-cell:hover img,.imp-cell:focus-visible img{transform:scale(1.04)}
.imp-cell:focus-visible{outline:3px solid #193d75;outline-offset:3px}

@media(max-width:959px){
  .imp-index-v166{padding:48px 28px}
  .imp-index-v166 a{padding:0 16px;font-size:17px}
  .imp-chapter-v166{padding:80px 28px 90px}
  .imp-collage{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .imp-cell.is-lead{grid-column:1/3;grid-row:auto}
}
@media(max-width:639px){
  .imp-index-v166{padding:40px 20px}
  .imp-index-inner{flex-direction:column;align-items:center;gap:16px}
  .imp-index-v166 a{padding:0}
  .imp-index-v166 a+a{border-left:0}
  .imp-chapter-v166{padding:64px 20px 72px}
  .imp-chapter-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:26px}
  .imp-collage{gap:12px}
}
@media(prefers-reduced-motion:reduce){.imp-cell img{transition:none}}

/* Resto de implementos: tres tarjetas en fila con el panel azul al pasar el mouse */
.imp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1600px;margin:0 auto}
.imp-cards .eng-card>img{aspect-ratio:4/3;object-fit:cover}
@media(max-width:959px){.imp-cards{gap:16px}}
@media(max-width:639px){.imp-cards{grid-template-columns:1fr;gap:12px}}

/* Capítulos con renders sobre fondo liso: la pieza se ve completa, sin recortes, y la celda toma el color del fondo del render */
.imp-cell.is-teal{background:#4f8091}
.imp-cell.is-slate{background:#6a8191}
.imp-cell.is-white{background:#fff}
.imp-cell.is-teal img,.imp-cell.is-slate img,.imp-cell.is-white img{object-fit:contain}
.imp-cell.is-white img{padding:4%;box-sizing:border-box}
/* Collage de 3 fotos: la grande a la izquierda y dos anchas a la derecha */
.imp-collage.is-3 .imp-cell:not(.is-lead){grid-column:3/5;aspect-ratio:auto}
@media(max-width:959px){.imp-collage.is-3 .imp-cell:not(.is-lead){grid-column:auto;aspect-ratio:1}.imp-collage.is-3 .imp-cell:not(.is-lead):last-child{grid-column:auto}}
