:root {
  --bg: #0c0c10;
  --bg-soft: #13131a;
  --panel: #171821;
  --ink: #f1f1f5;
  --muted: #a6a7ad;
  --brand: #f2c14e;
  --accent: #7de0de;
  --ring: 45 87% 57%
}

* {
  box-sizing: border-box
}

.c45-wrap {
  max-width: 1220px;
  margin: auto;
  padding: 34px 20px;
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
}

.c45-cover {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 55%), var(--bg-soft);
  border-radius: 30px;
  padding: 30px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .05) inset
}

@media(max-width:960px) {
  .c45-cover {
    grid-template-columns: 1fr
  }
}

.c45-cover:after {
  content: "";
  position: absolute;
  inset: auto -40% -60% -40%;
  height: 75%;
  background: radial-gradient(550px 150px at 40% 0%, rgba(242, 193, 78, .35), transparent 60%), radial-gradient(650px 200px at 80% 20%, rgba(125, 224, 222, .18), transparent 60%);
  filter: blur(70px);
  z-index: -1;
  opacity: .9
}

.c45-badge {
  position: absolute;
  /* top: 20px; */
  left: 20px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .72rem;
  color: #111;
  background: var(--brand);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(242, 193, 78, .35)
}

.c45-title {
  /* font-family: 'Playfair Display', serif; */
  font-weight: 800;
  line-height: 1.02;
  font-size: clamp(32px, 7vw, 76px);
  margin: 0;
  letter-spacing: .5px
}

.c45-subtitle {
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--muted)
}

.c45-student {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap
}

.c45-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .2)
}

.c45-name {
  font-weight: 800;
  font-size: clamp(16px, 2vw, 22px)
}

.c45-cover-photo {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 5/6;
  align-self: stretch;
  background: #0b0b0d;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  position: relative
}

.c45-cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05)
}

.c45-cover-stats {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.c45-chip {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(6, 6, 8, .5), rgba(6, 6, 8, .2));
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px
}

.c45-panel {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px
}

@media(max-width:960px) {
  .c45-panel {
    grid-template-columns: 1fr
  }
}

.c45-card {
  background: linear-gradient(120deg, rgba(255, 255, 255, .06), transparent 50%), var(--panel);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  overflow: hidden
}

.c45-card h3 {
  margin: 0 0 12px;
  /* font-family: 'Playfair Display', serif; */
  font-weight: 800;
  font-size: clamp(18px, 2.8vw, 24px)
}

/* Métricas clave */
.c45-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px
}

@media(max-width:860px) {
  .c45-metrics {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:480px) {
  .c45-metrics {
    grid-template-columns: 1fr
  }
}

.c45-kpi {
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  min-width: 0
}

.c45-kpi .label {
  font-size: 12px;
  color: var(--muted)
}

.c45-kpi .value {
  font-size: clamp(18px, 6vw, 26px);
  font-weight: 800;
  margin-top: 6px;
  word-break: break-word
}

.c45-chart-wrap {
  position: relative;
  width: 100%;
  height: 300px
}

@media(max-width:520px) {
  .c45-chart-wrap {
    height: 240px
  }
}

.c45-weightChart {
  width: 100% !important;
  height: 100% !important
}

/* Resumen */
.c45-resumen {
  margin: 0;
  padding-left: 18px;
  color: var(--muted)
}

.c45-resumen li b {
  color: var(--ink)
}

.c45-notes {
  overflow-wrap: anywhere;
  word-break: break-word
}

.c45-hr {
  border-color: rgba(255, 255, 255, .06);
  margin: 18px 0
}

/* Before/After — 80vh, centrado, imagen sin recorte */








.c45-card.c45-beforeafter {
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}

.c45-ba-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media(max-width:1100px){
  .c45-ba-grid{ grid-template-columns: 1fr 1fr; }
}

@media(max-width:700px){
  .c45-ba-grid{ grid-template-columns: 1fr; }
}

.c45-ba{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0b0b0d;
  border: 1px solid rgba(255,255,255,.08);
  aspect-ratio: 3/4;
}

.c45-beforeafter .c45-ba img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Etiqueta plano */
.c45-ba-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:8px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(6,6,8,.55);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  z-index:2;
}

/* Slider base (se mantiene tu lógica) */
.c45-ba-after-wrap{ position:absolute; inset:0; overflow:hidden }
.c45-ba-after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.c45-ba-handle{
  appearance:none; -webkit-appearance:none;
  width:100%;
  background:transparent;
  position:absolute; inset:0; cursor: ew-resize
}
.c45-ba-divider{
  position:absolute; top:0; bottom:0; width:2px;
  background: linear-gradient(#fff, #fff0);
  left:50%; box-shadow: 0 0 0 1px rgba(255,255,255,.25)
}
.c45-ba-knob{
  position:absolute; left:calc(50% - 18px); top:calc(50% - 18px);
  width:36px; height:36px; border-radius:50%;
  background: var(--brand);
  box-shadow:0 10px 24px rgba(242,193,78,.35);
  display:grid; place-items:center; font-weight:900; color:#111
}





/* Galería */
.c45-months {
  column-count: 4;
  column-gap: 12px
}

@media(max-width:1100px) {
  .c45-months {
    column-count: 3
  }
}

@media(max-width:800px) {
  .c45-months {
    column-count: 2
  }
}

@media(max-width:540px) {
  .c45-months {
    column-count: 1
  }
}

.c45-month {
  break-inside: avoid;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 12px;
  background: #0b0b0d;
  border: 1px solid rgba(255, 255, 255, .06);
  cursor: zoom-in
}

.c45-month img {
  width: 100%;
  height: auto;
  display: block
}

.c45-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(6, 6, 8, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  padding: 6px 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px)
}

.c45-delta {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(13, 13, 16, .8), rgba(13, 13, 16, .5));
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff
}

/* Lightbox */
.c45-lightbox {
  /* position: fixed; */
  inset: 0;
  background: rgba(0, 0, 0, .8);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999
}

.c45-lightbox.open {
  display: flex
}

.c45-lightbox>div {
  /* max-width: 1000px; */
  width: 100%
}

.c45-lightbox img {
  /* width: 100%; */
  height: auto;
  border-radius: 16px
}

/* Slider base */
.c45-ba {
  position: relative
}

.c45-ba-after-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden
}

.c45-ba-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.c45-ba-handle {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  position: absolute;
  inset: 0;
  cursor: ew-resize
}

.c45-ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(#fff, #fff0);
  left: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25)
}

.c45-ba-knob {
  position: absolute;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(242, 193, 78, .35);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #111
}

/* Footer */
.c45-footer {
  margin: 26px auto 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center
}

/* Masonry size pattern */
.c45-month {
  position: relative
}

.c45-month img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.c45-month.tall {
  aspect-ratio: 3/4
}

.c45-month.mid {
  aspect-ratio: 4/3
}

.c45-month.short {
  aspect-ratio: 1/1
}

@media(max-width:1100px) {
  .c45-month.tall {
    aspect-ratio: 4/5
  }
}

@media(max-width:540px) {

  .c45-month.tall,
  .c45-month.mid,
  .c45-month.short {
    aspect-ratio: 4/5
  }
}

.c45-month:hover img {
  transform: scale(1.02);
  transition: transform .25s ease
}