/* ═══════════════════════════════════════════════
   CONTEXTOS — LABRIEGO
   ¿Para qué momento es esto?
═══════════════════════════════════════════════ */

#contextos {
  background: #FAFAFA;
  padding: 140px 0 160px;
}

/* ── Contenedor ───────────────────────────────── */
.ctx-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;
}

/* ── Encabezado ───────────────────────────────── */
.ctx-header {
  margin-bottom: 80px;
}

.ctx-title {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -2.5px;
  color: #0A0A0A;
  margin-bottom: 24px;
}

.ctx-sub {
  font-size: 16px;
  color: #999;
  line-height: 1.6;
  max-width: 440px;
}

/* ── Grid 2×2 ────────────────────────────────── */
.ctx-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ── Card ─────────────────────────────────────── */
.ctx-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 6px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);

  /* Entrada al viewport */
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctx-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.ctx-card.visible:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.13);
}

/* ── Área de imagen ───────────────────────────── */
.ctx-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Fondo placeholder — reemplazar por <img> cuando haya foto */
.ctx-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Si hay imagen real: mismo comportamiento */
.ctx-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctx-card:hover .ctx-bg,
.ctx-card:hover .ctx-img img {
  transform: scale(1.06);
}

/* Paleta editorial por contexto */
.ctx-bg--eventos {
  background: linear-gradient(140deg, #111114 0%, #252530 55%, #35251A 100%);
}
.ctx-bg--regalos {
  background: linear-gradient(140deg, #3A1614 0%, #6A2922 55%, #8C3B30 100%);
}
.ctx-bg--empresa {
  background: linear-gradient(140deg, #0C1620 0%, #182B3E 55%, #1E3550 100%);
}
.ctx-bg--personal {
  background: linear-gradient(140deg, #271E13 0%, #443220 55%, #5A4228 100%);
}

/* Overlay sutil al hover */
.ctx-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease;
  pointer-events: none;
}

.ctx-card:hover .ctx-img::after {
  background: rgba(0, 0, 0, 0.12);
}

/* Etiqueta decorativa sobre la imagen */
.ctx-label {
  position: absolute;
  bottom: 20px;
  left: 28px;
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  z-index: 1;
  transition: color 0.3s ease;
}

.ctx-card:hover .ctx-label {
  color: rgba(255, 255, 255, 0.65);
}

/* ── Información ──────────────────────────────── */
.ctx-body {
  padding: 28px 32px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ctx-name {
  font-size: 22px;
  font-weight: 700;
  color: #0A0A0A;
  letter-spacing: -0.5px;
}

.ctx-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--coral);
  white-space: nowrap;
  transition: letter-spacing 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctx-card:hover .ctx-cta {
  letter-spacing: 3.5px;
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 960px) {
  #contextos { padding: 100px 0 120px; }
  .ctx-inner { padding: 0 40px; }
  .ctx-title { font-size: 56px; letter-spacing: -3px; }
  .ctx-header { margin-bottom: 56px; }
  .ctx-grid { gap: 16px; }
}

@media (max-width: 680px) {
  .ctx-grid { grid-template-columns: 1fr; }
  .ctx-inner { padding: 0 24px; }
  .ctx-title { font-size: 42px; letter-spacing: -2px; }
  .ctx-img { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  #contextos { padding: 80px 0 100px; }
  .ctx-title { font-size: 34px; letter-spacing: -1.5px; }
  .ctx-body { padding: 20px 24px 24px; }
  .ctx-name { font-size: 19px; }
}