/* ====== PROYECTOS (estilos comunes) ====== */

.hero--project .hero-wrap{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:24px;
  align-items:center;
  padding:22px 0 10px;
}
.hero--project .hero-text h1{ margin:0 0 8px; }
.hero--project .hero-text p{ margin:0 0 12px; color:var(--muted); }
.hero--project .hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.hero--project .hero-shot{
  margin:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  aspect-ratio: 16/10;
  display:flex; align-items:center; justify-content:center;
}
.hero--project .hero-shot img{ width:100%; height:100%; object-fit:cover; object-position:center; }

@media (max-width: 980px){
  .hero--project .hero-wrap{ grid-template-columns: 1fr; }
}

/* Ficha */
.project-ficha{ display:grid; gap:14px; }
.project-ficha .ficha-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.project-ficha .mini{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:10px; display:grid; gap:4px;
}
.project-ficha .mini span{ color:var(--muted); font-size:12px; }
@media (max-width: 720px){
  .project-ficha .ficha-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ====== LÍNEA DE TIEMPO – VERTICAL (img arriba / texto abajo) ====== */

.steps{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 900px){
  .steps{ grid-template-columns: 1fr; }
}

.step{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.step .media{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:#0b1320;
}
.step .media img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
}

/* control fino de recorte por clases/atributos */
.step .media.crop-top img,
.step .media[data-crop="top"] img{ object-position: top; }
.step .media.crop-bottom img,
.step .media[data-crop="bottom"] img{ object-position: bottom; }
.step .media.crop-center img,
.step .media[data-crop="center"] img{ object-position: center; }

/* **NUEVO**: mostrar imagen completa (sin recorte) */
.step .media[data-crop="fit"] img{ object-fit: contain; }
.step .media[data-crop="fit"]{ background:#0b1320; } /* letterbox agradable */

/* **NUEVO**: utilidades de relación de aspecto */
.step .media[data-ratio="3:4"]{ aspect-ratio: 3 / 4; }
.step .media[data-ratio="16:9"]{ aspect-ratio: 16 / 9; }
.step .media[data-ratio="1:1"]{ aspect-ratio: 1 / 1; }

.step .body{
  padding:12px 14px 14px;
  border-top: 1px dashed var(--border);
}
.step .body h3{ margin: 2px 0 6px; font-size:16px; }
.step .body p{ margin:0; color:var(--muted); }

/* ====== RECONOCIMIENTOS ====== */
.badges{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 820px){ .badges{ grid-template-columns: 1fr; } }

.badge{
  display:grid; grid-template-columns: 160px 1fr; gap:14px;
  align-items:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:14px;
}
.badge img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:10px;
}
.badge h3{ margin:0 0 6px; }
.badge p{ margin:0; color:var(--muted); }

/* ====== MOMENTOS (tarjetas más grandes) ====== */
.rail{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 900px){ .rail{ grid-template-columns: 1fr; } }

.rail-item{
  margin:0; overflow:hidden; border-radius:14px;
  border:1px solid var(--border); background:var(--card);
}
.rail-item img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; display:block;
  object-position: center top; /* recorte preferente desde arriba para verticales */
}
.rail-item figcaption{
  padding:10px 12px; color:var(--muted); border-top:1px dashed var(--border);
}

/* ====== VIDEOS ====== */
.video-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 900px){ .video-grid{ grid-template-columns: 1fr; } }
.video-embed{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; padding:0;
}
.video-embed iframe{ width:100%; height:100%; aspect-ratio: 16/9; border:0; display:block; }

/* ====== GALERÍA ====== */
.gallery-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }
.gallery-grid img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:12px;
  border:1px solid var(--border); background:var(--card);
  display:block;
}