/* Foto circular con volumen, anillo luminoso y halo según graduación */

.belt-portal{

  --bp-size:120px;

  --bp-halo:24px;

  --bp-glow-main:#e8a030;

  --bp-glow-tip:var(--bp-glow-main);

  --bp-ring:var(--bp-glow-main);

  position:relative;

  width:calc(var(--bp-size) + var(--bp-halo) * 1.55);

  height:calc(var(--bp-size) + var(--bp-halo) * 1.55);

  flex-shrink:0;

  display:flex;

  align-items:center;

  justify-content:center;

}

.belt-portal--sm{--bp-size:48px;--bp-halo:10px}

.belt-portal--md{--bp-size:72px;--bp-halo:14px}

.belt-portal--lg{--bp-size:120px;--bp-halo:24px}

.belt-portal--xl{--bp-size:140px;--bp-halo:28px}



.belt-portal__halo{

  position:absolute;

  width:var(--bp-size);

  height:var(--bp-size);

  border-radius:50%;

  background:var(--bp-glow-main);

  filter:blur(calc(var(--bp-halo) * 0.68));

  opacity:.72;

  z-index:0;

  pointer-events:none;

}

.belt-portal--tipped .belt-portal__halo{

  background:conic-gradient(

    from 210deg,

    var(--bp-glow-main) 0deg 270deg,

    var(--bp-glow-tip) 270deg 360deg

  );

}

.belt-portal--dan .belt-portal__halo{

  opacity:.88;

  filter:blur(calc(var(--bp-halo) * 0.78));

}



.belt-portal__shell{

  position:relative;

  z-index:1;

  width:var(--bp-size);

  height:var(--bp-size);

  border-radius:50%;

  padding:max(3px,calc(var(--bp-size) * 0.042));

  background:linear-gradient(152deg,#efebe3 0%,#dbd2c6 45%,#cfc6b8 100%);

  box-shadow:

    10px 12px 22px rgba(72,58,42,.2),

    -6px -6px 14px rgba(255,255,255,.82),

    inset 1px 1px 2px rgba(255,255,255,.65),

    inset -1px -2px 4px rgba(90,78,62,.12);

}



.belt-portal__ring{

  position:absolute;

  inset:max(2px,calc(var(--bp-size) * 0.028));

  border-radius:50%;

  border:max(1.5px,calc(var(--bp-size) * 0.018)) solid var(--bp-ring);

  box-shadow:

    0 0 4px var(--bp-ring),

    0 0 12px color-mix(in srgb,var(--bp-ring) 70%,transparent),

    0 0 22px color-mix(in srgb,var(--bp-ring) 38%,transparent),

    inset 0 0 8px color-mix(in srgb,var(--bp-ring) 28%,transparent);

  pointer-events:none;

  z-index:4;

}

.belt-portal--dan .belt-portal__ring{

  box-shadow:

    0 0 5px var(--bp-ring),

    0 0 14px color-mix(in srgb,var(--bp-ring) 80%,transparent),

    0 0 28px color-mix(in srgb,var(--bp-ring) 45%,transparent),

    inset 0 0 10px color-mix(in srgb,var(--bp-ring) 35%,transparent);

}

.belt-portal--light-glow .belt-portal__ring{

  border-color:color-mix(in srgb,var(--bp-ring) 85%,#c8bfb2);

  box-shadow:

    0 0 6px color-mix(in srgb,var(--bp-ring) 90%,#fff),

    0 0 16px color-mix(in srgb,var(--bp-ring) 55%,transparent),

    inset 0 0 8px rgba(255,255,255,.45);

}

.belt-portal--light-glow .belt-portal__halo{

  opacity:.9;

  filter:blur(calc(var(--bp-halo) * 0.55));

}



.belt-portal__well{

  position:relative;

  width:100%;

  height:100%;

  border-radius:50%;

  overflow:hidden;

  z-index:2;

  background:#c4bab0;

  box-shadow:

    inset 0 6px 14px rgba(45,38,30,.38),

    inset 0 1px 2px rgba(255,255,255,.2),

    inset 0 -2px 4px rgba(255,255,255,.08);

}



.belt-portal__img{

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center 22%;

  display:block;

}

.belt-portal__fallback{

  width:100%;

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:calc(var(--bp-size) * 0.34);

  font-weight:800;

  color:#7d6234;

  background:linear-gradient(160deg,#e6dfd2 0%,#d4cbc0 100%);

  box-shadow:inset 0 4px 10px rgba(55,45,35,.18);

}



.belt-portal--inline{display:inline-flex;vertical-align:middle}