/* =====================================================================
   kem2-caja.css — Ketin 2.0 — Caja · v1.0.0 · 2026-07-19
   Diseño por defecto SIN !important: todo editable desde Design.
   Identidades ZIHT (default) / PTF (.kem-ptf) solo como carga inicial.
   ===================================================================== */

.kem2-caja {
  background: #ffffff;
  border: 1px solid #dbdde6;
  border-radius: 3px;
  overflow: hidden;
}

.kem2-caja-body {
  padding: 28px 26px;
}

/* ---- Zona de imagen (sangrada, full-bleed arriba) ---- */
.kem2-caja-media {
  position: relative;
  width: 100%;
  background: #eceef4; /* Fondo gris neutro: fallback si no hay asset */
  overflow: hidden;
}
.kem2-caja-media.kem2-ratio-169 { aspect-ratio: 16 / 9; }
.kem2-caja-media.kem2-ratio-43  { aspect-ratio: 4 / 3; }
.kem2-caja-media.kem2-ratio-11  { aspect-ratio: 1 / 1; }
.kem2-caja-media.kem2-ratio-auto { aspect-ratio: auto; }

.kem2-caja-media .kem2-caja-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kem2-caja-media.kem2-ratio-auto .kem2-caja-img {
  height: auto;
  object-fit: unset;
}

/* Modos de fondo */
.kem2-caja-media.kem2-img-bg {
  background-repeat: no-repeat;
  background-position: center;
}
.kem2-caja-media.kem2-img-cover   { background-size: cover; }
.kem2-caja-media.kem2-img-contain { background-size: contain; }
.kem2-caja-media.kem2-img-bg.kem2-ratio-auto { aspect-ratio: 16 / 9; } /* bg necesita altura */

/* Placeholder (imagen nativa de Divi o gris neutro) */
.kem2-caja-media.kem2-media-placeholder .kem2-caja-img {
  object-fit: contain;
  padding: 12%;
  box-sizing: border-box;
  opacity: .85;
}

/* ---- Labels (pills) ---- */
.kem2-caja-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.kem2-caja-label {
  display: inline-block;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.4;
}
.kem2-caja-label-1 {
  color: #4800fe;
  background: var(--kem2-l1-bg, #eeecff);
  border: var(--kem2-l1-bw, 0) var(--kem2-l1-bs, solid) var(--kem2-l1-bc, transparent);
  border-radius: var(--kem2-l1-br, 2px);
  padding: var(--kem2-l1-pv, 3px) var(--kem2-l1-ph, 8px);
}
.kem2-caja-label-2 {
  color: #4800fe;
  background: var(--kem2-l2-bg, #eeecff);
  border: var(--kem2-l2-bw, 0) var(--kem2-l2-bs, solid) var(--kem2-l2-bc, transparent);
  border-radius: var(--kem2-l2-br, 2px);
  padding: var(--kem2-l2-pv, 3px) var(--kem2-l2-ph, 8px);
}
.kem2-caja-label-3 {
  color: #4800fe;
  background: var(--kem2-l3-bg, #eeecff);
  border: var(--kem2-l3-bw, 0) var(--kem2-l3-bs, solid) var(--kem2-l3-bc, transparent);
  border-radius: var(--kem2-l3-br, 2px);
  padding: var(--kem2-l3-pv, 3px) var(--kem2-l3-ph, 8px);
}

/* ---- Título y texto ---- */
.kem2-caja-title {
  font-family: 'Source Serif 4', 'Iowan Old Style', ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.008em;
  color: #080b26;
  margin: 0 0 10px;
}
.kem2-caja-text {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13.8px;
  line-height: 1.65;
  color: #565968;
  margin: 0;
}

/* ---- Identidad PTF (carga por defecto, editable) ---- */
.kem2-caja.kem-ptf {
  border-color: #d7ddca;
}
.kem2-caja.kem-ptf .kem2-caja-label {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.kem2-caja.kem-ptf .kem2-caja-label-1 { color: #2f5233; background: var(--kem2-l1-bg, #eaf1e9); }
.kem2-caja.kem-ptf .kem2-caja-label-2 { color: #2f5233; background: var(--kem2-l2-bg, #eaf1e9); }
.kem2-caja.kem-ptf .kem2-caja-label-3 { color: #2f5233; background: var(--kem2-l3-bg, #eaf1e9); }
.kem2-caja.kem-ptf .kem2-caja-title {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-weight: 500;
  color: #0e2015;
}
.kem2-caja.kem-ptf .kem2-caja-text {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #3c4a3e;
}
