/* Portada: las carreras de barcos y de élitras, ya hechas (#carreras-hechas).
   Un mosaico de fotos que se abren en grande con el visor de la galería
   (data-galeria="carreras"): una foto grande y cuatro pequeñas. */

#carreras-hechas .section-head { margin-bottom: clamp(1.2rem, 3vw, 2rem); }

.ca-mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 14.5vw, 200px); gap: clamp(.5rem, 1.4vw, .9rem); }
.ca-foto { position: relative; isolation: isolate; display: block; min-width: 0; padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--panel-sunk); box-shadow: var(--bevel), 0 18px 36px -26px #000; cursor: zoom-in; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.ca-grande { grid-column: span 2; grid-row: span 2; }
.ca-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.ca-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(10, 7, 3, .78) 100%); pointer-events: none; }
.ca-foto:hover { transform: translateY(-4px); box-shadow: var(--bevel), 0 0 0 2px var(--ember), 0 28px 50px -26px var(--ember); }
.ca-foto:hover img { transform: scale(1.06); }
.ca-foto:focus-visible { outline: 3px solid var(--diamond-glow, #8fe7ff); outline-offset: 3px; }
.ca-etq { position: absolute; left: .7rem; bottom: .6rem; z-index: 2; padding: .2rem .6rem; border-radius: 99px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(13, 10, 5, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); pointer-events: none; }
.ca-grande .ca-etq { left: 1rem; bottom: .9rem; padding: .3rem .8rem; font-size: .84rem; }
.ca-pie { display: flex; justify-content: center; margin-top: clamp(1rem, 2.5vw, 1.6rem); }

@media (max-width: 700px) {
  .ca-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 30vw, 160px); }
  .ca-grande { grid-column: 1 / -1; grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-foto, .ca-foto img { transition: none; }
  .ca-foto:hover, .ca-foto:hover img { transform: none; }
}