/* Cámara de obra — visor automático (solo proyecto.html).
   Marco tipo "viewfinder" + encabezado distintivo para diferenciarlo de
   las galerías editoriales de avance. Colores de marca WTCP. */

.sec-avance__cam { margin-top: 2.75rem; }

/* Fila: foto (≈50%) a la izquierda + time-lapse a la derecha, centradas */
.sec-avance__cam-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-bottom: 1rem;
}
.sec-avance__cam-col {
  flex: 0 1 540px;
  max-width: 540px;
  min-width: 0;
}

/* Encabezado: badge a la izquierda, hora a la derecha */
.sec-avance__cam-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1rem;
  margin-bottom: .85rem;
}
.sec-avance__cam-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: default;
  user-select: none;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
}
.sec-avance__cam-badge svg { width: 16px; height: 16px; opacity: .85; }
.sec-avance__cam-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2A9D8F;
  flex: 0 0 auto;
  animation: wtcpCamPulse 2.2s infinite;
}
@keyframes wtcpCamPulse {
  0%   { box-shadow: 0 0 0 0 rgba(42, 157, 143, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(42, 157, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(42, 157, 143, 0); }
}
.sec-avance__cam-tag {
  font-size: .6rem;
  letter-spacing: .1em;
  padding: .18rem .5rem;
  border: 1px solid rgba(196, 163, 90, .5);
  color: #C4A35A;
  border-radius: 999px;
  text-transform: uppercase;
}
.sec-avance__cam-updated { font-size: .8rem; color: #fff; opacity: .7; }
.sec-avance__cam-updated [data-cam-updated] { font-variant-numeric: tabular-nums; }

/* Marco tipo cinta de obra: franjas diagonales amarillo/negro alrededor
   de la imagen, para marcar que es una zona de obra (no una foto editorial). */
.sec-avance__cam-figure { position: relative; margin: 0; }
.sec-avance__cam-frame {
  position: relative;
  display: block;
  line-height: 0;
  padding: 9px;
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, #f4c20d 0 16px, #161616 16px 32px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.sec-avance__cam-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  background: #0e1726;
  transition: filter .3s ease;
}
.sec-avance__cam-figure.is-offline img { filter: grayscale(.5) brightness(.6); }

/* Overlay "sin señal" (cuando la cámara está offline) */
.sec-avance__cam-offline {
  position: absolute;
  inset: 9px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  line-height: 1.3;
  padding: 1rem;
}
.sec-avance__cam-offline[hidden] { display: none; }
.sec-avance__cam-offline-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid rgba(231, 111, 81, .75);
}
.sec-avance__cam-offline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E76F51;
  flex: 0 0 auto;
}
.sec-avance__cam-offline-sub {
  font-size: .74rem;
  color: rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .45);
  padding: .2rem .55rem;
  border-radius: 6px;
}

/* Time-lapse: tarjeta pequeña con play → abre modal */
.sec-avance__cam-tl { margin: 0; flex: 0 0 auto; }
.sec-avance__cam-tl-title {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  opacity: .85;
  margin-bottom: .55rem;
}
.sec-avance__cam-tl-card {
  position: relative;
  display: inline-block;
  width: 260px;
  max-width: 100%;
  padding: 0;
  border: 1px solid rgba(196, 163, 90, .35);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  line-height: 0;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.sec-avance__cam-tl-thumb {
  width: 100%;
  height: auto;
  display: block;
  opacity: .82;
  transition: opacity .2s ease, transform .35s ease;
}
.sec-avance__cam-tl-card:hover .sec-avance__cam-tl-thumb { opacity: 1; transform: scale(1.04); }
.sec-avance__cam-tl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.sec-avance__cam-tl-card:hover .sec-avance__cam-tl-play { background: rgba(196, 163, 90, .9); }
.sec-avance__cam-tl-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }

.sec-avance__cam-disclaimer { font-size: .78rem; color: #fff; opacity: .55; }

/* Modal del time-lapse (se inyecta en <body>) */
.sec-avance__cam-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
}
.sec-avance__cam-modal[hidden] { display: none; }
.sec-avance__cam-modal-video {
  width: min(94vw, 1100px);
  max-height: 86vh;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .6);
}
.sec-avance__cam-modal-close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.sec-avance__cam-modal-close:hover { background: rgba(255, 255, 255, .24); }